/* kk.css - fresh CSS for the static rebuild (hero replacement + helpers).
   Replicates the RevSlider "Creative agency" hero: fullwidth, grid 1024x820,
   left-offset text block (x:160/1024), DM Serif Display headline, Roboto subline.
   RevSlider scaled layers proportionally with viewport width - hence the vw units. */

.kk-hero {
  position: relative;
  width: 100%;
  height: min(100vh, 80vw); /* grid ratio 820/1024 capped at viewport */
  min-height: 480px;
  overflow: hidden;
}

.kk-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kk-hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(24px, 15.6vw, 260px); /* 160/1024 of grid width */
  padding-right: 24px;
}

.kk-hero__title {
  margin: 0;
  max-width: min(560px, 51vw); /* original layer width 524px on the 1024 grid */
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.86vw, 96px); /* 60/1024 grid, RS upscaled */
  line-height: 1;
  color: #fff;
}

.kk-hero__sub {
  margin: clamp(16px, 2.4vw, 40px) 0 0;
  max-width: 32ch; /* layer width 513px */
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.34vw, 28px); /* 24/1024 grid */
  line-height: 1.4;
  color: #fff;
}

@media (max-width: 680px) {
  .kk-hero__inner {
    padding-left: 24px;
    align-items: center;
    text-align: center;
  }
}

/* layout-audit 2026-07-15: stray mobile margins in the recovered Elementor CSS
   overflow the viewport by ~16px at 320w; the original theme relied on body
   overflow-x:hidden. Clip at the root so nothing wiggles on touch devices. */
html {
  overflow-x: clip;
}

/* layout-audit: burger tap target measured 35x35; WCAG target-size bar is 44 */
.elementor-menu-toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* publication detail pages */
.kk-post {
  max-width: 860px;
  margin: 0 auto;
  /* fluid: 120px @320 -> 180px @1440 (was fixed 180px - half a phone screen) */
  padding: clamp(120px, 102.86px + 5.36vw, 180px) 24px clamp(64px, 48px + 5vw, 120px);
}
.kk-post__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  color: #000;
  margin: 0 0 12px;
  text-transform: none; /* the theme uppercases h1 globally; titles are cited works */
}
.kk-post__meta {
  color: #7a7a7a;
  margin-bottom: 40px;
}
.kk-post__content a {
  color: #db6f26;
  text-decoration: underline;
  overflow-wrap: anywhere; /* layout-audit: unbroken DOI URLs overflowed at 320w */
}

/* layout-audit: measure was 96ch at desktop (target 45-75ch) */
.kk-post__content p {
  max-width: 72ch;
}
.kk-post__back {
  margin-top: 56px;
}

/* scroll-appear: JS adds .kk-appear only to below-fold elements right before
   observing them, so content is never hidden unless the reveal is armed */
.kk-appear {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kk-appear.kk-in {
  opacity: 1;
  transform: none;
}

/* mobile nav dropdown - shown by the JS toggle */
nav.elementor-nav-menu--dropdown {
  display: none;
}
nav.elementor-nav-menu--dropdown.kk-nav-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: #f8f6f0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
nav.elementor-nav-menu--dropdown.kk-nav-open ul {
  margin: 0;
  padding: 12px 0;
  list-style: none;
}
nav.elementor-nav-menu--dropdown.kk-nav-open a {
  display: block;
  padding: 12px 28px;
  color: #000;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* publication download link (the original ran this text through a marquee) */
.kk-download {
  display: inline-block;
  margin: 8px 0 24px;
  padding: 12px 26px;
  border: 1px solid #000;
  border-radius: 40px;
  color: #000;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.kk-download:hover {
  background: #db6f26;
  border-color: #db6f26;
  color: #fff;
}

/* mask reveal - JS animates the inner span from translateY(110%) to 0 */
.kk-reveal {
  display: block;
  overflow: hidden;
}
.kk-reveal > span {
  display: block;
  will-change: transform;
}