/* ============================================================
   ABKR · v2 · High-End Visual Design edition
   Editorial Luxury × Z-Axis Cascade × Editorial Split
   ============================================================ */


/* ============================================================
   1.  DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand palette — locked */
  --color-stone:           #E8D5BC;
  --color-stone-deep:      #D8C2A4;
  --color-stone-pale:      #F4ECDC;
  --color-cream:           #FBF8F1;
  --color-harvest:         #B29471;
  --color-harvest-deep:    #8E7456;
  --color-cobalt:          #22384B;
  --color-cobalt-deep:     #182837;

  --color-ink:             #1A1A1A;
  --color-ink-soft:        rgba(26, 26, 26, 0.78);
  --color-ink-mute:        rgba(26, 26, 26, 0.55);
  --color-ink-faint:       rgba(26, 26, 26, 0.32);

  --color-on-cobalt:       #FBF8F1;
  --color-on-cobalt-soft:  rgba(251, 248, 241, 0.78);
  --color-on-cobalt-mute:  rgba(251, 248, 241, 0.50);
  --color-on-cobalt-faint: rgba(251, 248, 241, 0.18);

  /* Type */
  --font-display: 'Lyga', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Fluid type scale — pushed harder than v1 (more agency-scale) */
  --text-mega:    clamp(3.5rem, 11vw, 9.5rem);
  --text-display: clamp(3rem, 8vw, 7rem);
  --text-h1:      clamp(2.5rem, 6vw, 4.75rem);
  --text-h2:      clamp(1.875rem, 4.4vw, 3.25rem);
  --text-h3:      clamp(1.25rem, 2vw, 1.625rem);
  --text-body-lg: clamp(1.0625rem, 1.1vw, 1.1875rem);
  --text-body:    1.0625rem;
  --text-body-sm: 0.9375rem;
  --text-eyebrow: 0.6875rem;
  --text-caption: 0.8125rem;

  /* 4-pt scale (macro-whitespace, agency-tier breathing room) */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.5rem;
  --s-6:   2rem;
  --s-7:   3rem;
  --s-8:   4rem;
  --s-9:   6rem;
  --s-10:  8rem;
  --s-11:  10rem;
  --s-12:  12rem;

  /* Section macro padding — double the v1 spacing */
  --section-pad: clamp(6rem, 14vw, 11rem);

  /* Layout */
  --container: 1320px;
  --container-tight: 980px;

  /* Motion easing — custom spring-y curves only (skill mandate) */
  --ease-spring:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-q:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  /* Squircle radii (oversized for editorial) */
  --r-sm:    0.875rem;
  --r-md:    1.25rem;
  --r-lg:    2rem;
  --r-pill:  999px;
}


/* ============================================================
   2.  WEB FONTS
   ============================================================ */
@font-face {
  font-family: 'Lyga';
  src: url('Fonts/OOLyga-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('Fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
       url('Fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   3.  RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-stone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

ul, ol, li { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
em { font-style: italic; }


/* ============================================================
   4.  SKIP LINK & GLOBAL FOCUS
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--s-3) var(--s-5);
  background: var(--color-cobalt);
  color: var(--color-on-cobalt);
  font-family: var(--font-body);
  font-weight: 500;
  z-index: 100;
}
.skip-link:focus {
  left: var(--s-5);
  top: var(--s-5);
  outline: 2px solid var(--color-harvest);
  outline-offset: 4px;
}

*:focus-visible {
  outline: 2px solid var(--color-harvest);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ============================================================
   5.  GRAIN OVERLAY — fixed pseudo-layer (perf-safe)
   ============================================================ */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url('grain.png');
  background-size: 200px 200px;
  background-repeat: repeat;
}


/* ============================================================
   6.  SECTION BACKGROUNDS
   ============================================================ */
section[id], footer {
  position: relative;
}

.section-stone     { background: var(--color-stone);      color: var(--color-ink); }
.section-cream     { background: var(--color-cream);      color: var(--color-ink); }
.section-cobalt    { background: var(--color-cobalt);     color: var(--color-on-cobalt); }
.section-cobalt-tint {
  background: linear-gradient(180deg, var(--color-cobalt) 0%, var(--color-cobalt-deep) 100%);
  color: var(--color-on-cobalt);
}


/* ============================================================
   7.  FLOATING NAV — glass pill, top-center, blur-backdropped
   ============================================================ */
.float-nav {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 60;

  display: flex;
  align-items: center;
  gap: var(--s-2);

  padding: 0.4rem 0.4rem 0.4rem var(--s-5);
  background: color-mix(in srgb, var(--color-cream) 78%, transparent);
  border-radius: var(--r-pill);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 5%, transparent),
    0 8px 32px -8px color-mix(in srgb, var(--color-ink) 12%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, var(--color-cream) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
          backdrop-filter: blur(20px) saturate(1.6);
  opacity: 0;
  transition:
    transform 900ms var(--ease-spring),
    opacity   700ms var(--ease-soft);
}

.float-nav.is-ready {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.float-nav__mark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  padding-right: var(--s-4);
  border-right: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
}

.float-nav__list {
  display: none;
  gap: var(--s-1);
}

@media (min-width: 768px) {
  .float-nav__list {
    display: flex;
    margin: 0 var(--s-2);
  }
}

.float-nav__list a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  transition: color 320ms var(--ease-spring), background 320ms var(--ease-spring);
}
.float-nav__list a:hover {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
}

.float-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.5rem 0.5rem 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--color-cobalt);
  color: var(--color-on-cobalt);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition:
    background 380ms var(--ease-spring),
    transform  380ms var(--ease-spring);
}
.float-nav__cta:active { transform: scale(0.97); }
.float-nav__cta:hover  { background: var(--color-cobalt-deep); }

.float-nav__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-on-cobalt) 18%, transparent);
  transition: transform 380ms var(--ease-spring);
}
.float-nav__cta-icon svg { width: 0.65rem; height: 0.65rem; }
.float-nav__cta:hover .float-nav__cta-icon {
  transform: translate(2px, -1px) scale(1.06);
}

/* Hide CTA text on smallest screens — keep arrow only */
@media (max-width: 480px) {
  .float-nav__cta-text { display: none; }
  .float-nav__cta { padding-left: 0.5rem; }
}

/* Mobile-only hamburger — replaces the Enquire CTA position on <768px */
.float-nav__burger {
  display: none;
  appearance: none;
  background: var(--color-cobalt);
  color: var(--color-on-cobalt);
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 360ms var(--ease-spring), transform 360ms var(--ease-spring);
}
.float-nav__burger:hover { background: var(--color-cobalt-deep); }
.float-nav__burger:active { transform: scale(0.94); }

.float-nav__burger-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
}
.float-nav__burger-icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.25px;
  background: var(--color-on-cobalt);
  transform-origin: center;
  transition: transform 460ms var(--ease-spring), top 320ms var(--ease-spring);
}
.float-nav__burger-icon span:nth-child(1) { top: 3px; }
.float-nav__burger-icon span:nth-child(2) { top: 9px; }

/* Morph into 'X' when menu is open */
.is-menu-open .float-nav__burger-icon span:nth-child(1) {
  top: 5.5px;
  transform: rotate(45deg);
}
.is-menu-open .float-nav__burger-icon span:nth-child(2) {
  top: 5.5px;
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .float-nav__cta { display: none; }
  .float-nav__burger { display: inline-flex; }
}


/* ============================================================
   7b.  MOBILE MENU — fullscreen overlay revealed by hamburger
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: color-mix(in srgb, var(--color-cobalt) 96%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
          backdrop-filter: blur(28px) saturate(1.4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity     500ms var(--ease-spring),
    visibility    0s linear 500ms;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5rem, 14vw, 8rem) var(--s-6);
}

.is-menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 480ms var(--ease-spring),
    visibility 0s linear 0s;
}

.mobile-menu__inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-7);
  text-align: center;
}

.mobile-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  width: 100%;
}

.mobile-menu__list li {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition:
    opacity   620ms var(--ease-spring),
    transform 700ms var(--ease-spring),
    filter    620ms var(--ease-spring);
  transition-delay: calc(60ms + var(--i, 0) * 70ms);
}

.is-menu-open .mobile-menu__list li {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.mobile-menu__list a {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--color-stone);
  padding: var(--s-2) 0;
  transition: color 300ms var(--ease-spring);
}
.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible { color: var(--color-harvest); }

.mobile-menu__cta {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition:
    opacity   620ms var(--ease-spring),
    transform 700ms var(--ease-spring),
    filter    620ms var(--ease-spring),
    background 420ms var(--ease-spring);
  transition-delay: calc(60ms + var(--i, 4) * 70ms);
}
.is-menu-open .mobile-menu__cta {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.mobile-menu__contact {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-on-cobalt-mute);
  letter-spacing: 0.02em;
  margin: 0;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition:
    opacity   620ms var(--ease-spring),
    transform 700ms var(--ease-spring),
    filter    620ms var(--ease-spring);
  transition-delay: calc(60ms + var(--i, 5) * 70ms);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.mobile-menu__contact a {
  color: var(--color-on-cobalt-soft);
  transition: color 300ms var(--ease-spring);
}
.mobile-menu__contact a:hover { color: var(--color-harvest); }
.is-menu-open .mobile-menu__contact {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Lock body scroll while menu is open */
.is-menu-open { overflow: hidden; }


/* ============================================================
   8.  HERO — v1 cinematic intro (locked)
   ============================================================ */
.intro {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  background-color: var(--color-cobalt);
  color: var(--color-on-cobalt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-7) var(--s-5);
  overflow: hidden;
}

.intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  transform: translateY(-80px);
  will-change: transform;
}

.intro__logo {
  width: clamp(280px, 40vw, 520px);
  height: auto;
  opacity: 1;
  transform: scale(1);
  will-change: opacity, transform;
}

.intro__text {
  position: absolute;
  top: calc(100% + var(--s-7));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.intro__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.375rem, 4.2vw, 3rem);
  line-height: 1.2;
  letter-spacing: 0.015em;
  color: var(--color-on-cobalt);
  text-align: center;
  margin: 0;
}
.intro__name .ltr {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  will-change: opacity, transform;
}

.intro__rule {
  width: 80px;
  height: 1px;
  background-color: var(--color-harvest);
  border: none;
  transform-origin: center;
  transform: scaleX(1);
  opacity: 1;
  will-change: transform, opacity;
}

.intro__subtitle {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.75rem, 1.3vw, 1.0625rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-cobalt-soft);
  text-align: center;
  line-height: 1.5;
  opacity: 1;
  transform: translateY(0);
  will-change: opacity, transform;
}

.intro__scroll {
  position: absolute;
  bottom: var(--s-7);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-on-cobalt-soft);
  opacity: 0.6;
  will-change: opacity, transform;
  animation: intro-bounce 2.4s var(--ease-in-out) infinite;
}
.intro__scroll svg { width: 24px; height: 24px; display: block; }

@keyframes intro-logo-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes intro-stage-lift {
  from { transform: translateY(0);     }
  to   { transform: translateY(-80px); }
}
@keyframes intro-letter-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes intro-rule-draw {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes intro-text-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes intro-scroll-fade-in {
  from { opacity: 0;   }
  to   { opacity: 0.6; }
}
@keyframes intro-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   }
  50%      { transform: translateX(-50%) translateY(8px); }
}

.intro--animated .intro__logo {
  animation: intro-logo-in 1.1s var(--ease-out) 0.5s both;
}
.intro--animated .intro__stage {
  animation: intro-stage-lift 0.7s var(--ease-out-q) 2.1s both;
}
.intro--animated .intro__name .ltr {
  animation: intro-letter-rise 0.8s var(--ease-out-q) both;
  animation-delay: calc(2.6s + var(--i, 0) * 20ms);
}
.intro--animated .intro__rule {
  animation: intro-rule-draw 0.6s var(--ease-in-out) 3.3s both;
}
.intro--animated .intro__subtitle {
  animation: intro-text-rise 0.8s var(--ease-out-q) 3.6s both;
}
.intro--animated .intro__scroll {
  animation:
    intro-bounce 2.4s var(--ease-in-out) infinite,
    intro-scroll-fade-in 0.5s var(--ease-out-q) 4.2s both;
}


/* ============================================================
   9.  PILL EYEBROW — microscopic badge that precedes major H2s
   ============================================================ */
.pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.4rem 0.95rem 0.4rem 0.65rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 6%, transparent);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--s-6);
}

.pill-eyebrow__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-harvest);
}

/* Brand-compliant on-Cobalt variant — Stone on Cobalt is a sanctioned
   AA combo per Brand Guidelines 2.0 page 5. */
.pill-eyebrow--on-dark {
  background: color-mix(in srgb, var(--color-stone) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-stone) 24%, transparent);
  color: var(--color-stone);
}


/* ============================================================
   9b.  CHAPTER MARK — editorial focus-area treatment
   Used for the two focus sections on Cobalt (Numbers + Practice).
   Lyga italic numeral · harvest hairline · uppercase label.
   Brand-compliant Stone on Cobalt for the label.
   ============================================================ */
.chapter-mark {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}

.chapter-mark__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 3vw, 2.75rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--color-harvest);
  font-feature-settings: 'lnum' 1;
}

.chapter-mark__rule {
  display: inline-block;
  width: clamp(48px, 8vw, 100px);
  height: 1px;
  background: color-mix(in srgb, var(--color-harvest) 60%, transparent);
  align-self: center;
  transform: translateY(-2px);
}

.chapter-mark__label {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* Stone-on-Cobalt — brand-approved AA combo */
.chapter-mark--on-dark .chapter-mark__rule {
  background: color-mix(in srgb, var(--color-harvest) 75%, transparent);
}

.chapter-mark--on-dark .chapter-mark__label {
  color: var(--color-stone);
}


/* ============================================================
   10.  CTA PILL — button-in-button architecture
   ============================================================ */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.85rem 0.85rem 0.85rem 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--color-ink);
  color: var(--color-cream);
  transition:
    background 420ms var(--ease-spring),
    transform  420ms var(--ease-spring),
    box-shadow 420ms var(--ease-spring);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-cream) 14%, transparent) inset;
}
.cta-pill:active { transform: scale(0.97); }

.cta-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-cream) 14%, transparent);
  transition: transform 420ms var(--ease-spring), background 420ms var(--ease-spring);
}
.cta-pill__icon svg { width: 0.85rem; height: 0.85rem; }

.cta-pill:hover .cta-pill__icon {
  transform: translate(3px, -2px) scale(1.06);
  background: color-mix(in srgb, var(--color-cream) 20%, transparent);
}

.cta-pill--dark {
  background: var(--color-cobalt);
  color: var(--color-on-cobalt);
}
.cta-pill--dark:hover {
  background: var(--color-cobalt-deep);
}
.cta-pill--dark .cta-pill__icon {
  background: color-mix(in srgb, var(--color-on-cobalt) 14%, transparent);
}
.cta-pill--dark:hover .cta-pill__icon {
  background: color-mix(in srgb, var(--color-on-cobalt) 22%, transparent);
}


/* ============================================================
   11.  FRAME — Double-bezel image container (passe-partout)
   ============================================================ */
.frame {
  position: relative;
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
  padding: 0.6rem;
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 6%, transparent),
    0 30px 60px -28px color-mix(in srgb, var(--color-ink) 22%, transparent);
}

.frame__inner {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--r-lg) - 0.4rem);
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, var(--color-cream) 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-harvest) 18%, transparent);
}

.frame__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.03);
  transition: transform 1.4s var(--ease-spring);
}

.frame--portrait .frame__inner   { aspect-ratio: 4 / 5; }
.frame--landscape .frame__inner  { aspect-ratio: 16 / 11; }
.frame--wide .frame__inner       { aspect-ratio: 21 / 9; }

/* Subtle hover lift on frames within interactive zones */
.frame:hover img { transform: scale(1.025); }


/* ============================================================
   12.  SPLIT-SPREAD (Lead) — Editorial 50/50 with rendered text left,
   portrait right. Massive type. Photo bleeds.
   ============================================================ */
.split-spread {
  padding: var(--section-pad) var(--s-5);
  padding-top: clamp(5rem, 10vw, 8rem);
}

.split-spread__text,
.split-spread__photo {
  width: 100%;
}

.split-spread__text {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: var(--s-10);
}

@media (min-width: 1024px) {
  .split-spread {
    display: grid;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr);
    gap: clamp(var(--s-7), 6vw, var(--s-10));
    align-items: center;
    max-width: 1480px;
    margin-inline: auto;
    padding-inline: var(--s-7);
  }

  .split-spread__text {
    margin: 0;
    max-width: 660px;
  }

  .split-spread__photo {
    margin: 0;
  }
}

.split-spread__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-display);
  line-height: 0.96;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  margin: 0 0 var(--s-7);
  font-feature-settings: 'liga' 1, 'dlig' 1, 'calt' 1, 'kern' 1;
}

.split-spread__quote-line {
  display: block;
}
.split-spread__quote-line--accent {
  font-style: italic;
  color: var(--color-harvest-deep);
  margin-left: clamp(1rem, 4vw, 3rem);
}

.split-spread__body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 56ch;
  margin-bottom: var(--s-8);
  hanging-punctuation: first last;
}

.split-spread__photo {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .split-spread__photo {
    margin-inline: 0;
    margin-left: auto;
    max-width: none;
  }
}

.split-spread__photo-caption {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-left: var(--s-1);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.split-spread__photo-rule {
  display: inline-block;
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-harvest) 50%, transparent);
}


/* ============================================================
   13.  PROCESS-PIN — sticky-heading rail. Heading column pins while
   the numbered steps scroll past on desktop.
   ============================================================ */
.process-pin {
  padding: var(--section-pad) var(--s-5);
}

.process-pin__inner {
  max-width: var(--container);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .process-pin__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(var(--s-7), 5vw, var(--s-9));
    align-items: start;
  }

  .process-pin__head {
    position: sticky;
    top: clamp(5rem, 12vh, 7rem);
    align-self: start;
  }
}

.process-pin__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h1);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin: 0 0 var(--s-5);
  max-width: 12ch;
}

.process-pin__intro {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 42ch;
  margin-bottom: var(--s-7);
  hanging-punctuation: first last;
}

.process-pin__photo {
  margin-top: var(--s-6);
  max-width: 460px;
}

.process-pin__steps {
  display: flex;
  flex-direction: column;
}

.process-pin__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  padding: var(--s-7) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
}

/* Sequential entrance — each step lands ~140 ms after the one above,
   pacing the process beats deliberately (01 → 02 → 03 → 04). Higher
   specificity than the generic [data-reveal] so the delay wins. */
.js .process-pin__step[data-reveal] {
  transition-delay: calc(var(--i, 0) * 140ms);
}

.process-pin__step:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
}

@media (min-width: 768px) {
  .process-pin__step {
    grid-template-columns: 5rem 1fr;
    gap: var(--s-7);
  }
}

.process-pin__step-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-harvest);
  font-feature-settings: 'lnum' 1;
}

.process-pin__step-body h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h3);
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: var(--s-3);
}

.process-pin__step-body p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 48ch;
}


/* ============================================================
   14.  CASCADE (About) — Z-Axis 3-card layered composition.
   Portrait + bio + credentials, all visible on desktop, fits viewport.
   ============================================================ */
.cascade {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) var(--s-5);
  max-width: var(--container);
  margin-inline: auto;
}

.cascade__head {
  text-align: left;
  max-width: 980px;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
}

.cascade__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--color-ink);
  max-width: 24ch;
  margin: 0;
}

.cascade__heading-italic {
  font-style: italic;
  color: var(--color-harvest-deep);
  display: block;
}

.cascade__layers {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media (min-width: 768px) {
  .cascade__layers {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: var(--s-5);
  }
  .cascade__card--photo  { grid-column: 1; grid-row: 1; }
  .cascade__card--bio    { grid-column: 2; grid-row: 1 / 3; }
  .cascade__card--cred   { grid-column: 1; grid-row: 2; }
  .cascade__card--accred { grid-column: 1 / -1; grid-row: 3; }
}

/* Desktop: 3-card Z-axis cascade + accreditation card on row 2 */
@media (min-width: 1100px) {
  .cascade__layers {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0;
    align-items: start;
  }

  .cascade__card--photo {
    grid-column: 1;
    grid-row: 1;
    transform: rotate(-1.2deg);
    margin-top: clamp(0.75rem, 1.5vw, 1.5rem);
    z-index: 2;
  }

  .cascade__card--bio {
    grid-column: 2;
    grid-row: 1;
    margin-left: clamp(-2rem, -2.4vw, -2.5rem);
    z-index: 1;
  }

  .cascade__card--cred {
    grid-column: 3;
    grid-row: 1;
    margin-left: clamp(-1.5rem, -1.8vw, -2rem);
    margin-top: clamp(1.5rem, 3vw, 2.75rem);
    transform: rotate(1.8deg);
    z-index: 3;
  }

  .cascade__card--accred {
    grid-column: 1 / 4;
    grid-row: 2;
    justify-self: center;
    /* Negative top margin pulls the card up to overlap the bottom of
       the row above by ~15–20%, creating the layered-cascade rhythm */
    margin-top: clamp(-4.5rem, -5vw, -3.5rem);
    z-index: 4;
  }
}

/* Staggered card entrance — 120ms between cards. Higher specificity than
   generic [data-reveal] so the delay wins. */
.js .cascade__card[data-reveal] {
  transition-delay: calc(var(--i, 0) * 120ms);
}

.cascade__card-shell {
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
  padding: 0.55rem;
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 6%, transparent),
    0 30px 60px -32px color-mix(in srgb, var(--color-ink) 22%, transparent);
}

.cascade__card-inner {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--color-cream);
  border-radius: calc(var(--r-lg) - 0.4rem);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--color-cream) 90%, transparent);
}

/* Photo card — image fills the inner panel, no padding */
.cascade__card-inner--photo {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.cascade__card-inner--photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--r-lg) - 0.4rem);
  filter: saturate(0.92) contrast(1.03);
}

/* Inset caption — sits in the bottom margin of the photo card shell */
.cascade__photo-cap {
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: calc(var(--s-3) * -1.5 + 0.55rem);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.cascade__photo-cap-rule {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-harvest) 50%, transparent);
}

.cascade__bio-lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin-bottom: var(--s-4);
}

.cascade__card--bio p + p {
  margin-top: var(--s-4);
}

.cascade__card--bio p {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 52ch;
}

.cascade__cred-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-harvest);
  margin-bottom: var(--s-3);
}

.cascade__cred-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-ink);
}

.cascade__rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-harvest);
  margin: var(--s-4) 0 var(--s-4);
}

/* ---- Accreditation card (4th cascade child) ----
   The AMDRAS seal sits inside its own card — same shell + cream inner as
   the other cascade cards, but smaller and with a 3-column inner layout:
   [ badge ] [ eyebrow + hairline + caption text ]. Overlaps the bottom of
   row 1 on desktop, creating the visual close of the cascade. */
.cascade__card--accred {
  max-width: 520px;
  width: 100%;
}

.cascade__card-inner--accred {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: center;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.75rem);
}

.cascade__card-inner--accred img {
  width: clamp(104px, 12vw, 144px);
  height: auto;
  display: block;
}

.cascade__card-inner--accred figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: left;
}

.cascade__accred-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-harvest);
}

.cascade__accred-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-harvest);
}

.cascade__accred-body {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-ink-soft);
  max-width: 32ch;
}



/* ============================================================
   15.  POSTER-RAIL (Numbers) — 4 equal-height cards in one row.
   Tightened so the whole section fits one desktop viewport.
   ============================================================ */
.poster-rail {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  position: relative;
  overflow: hidden;
}

.poster-rail__head {
  padding: 0 var(--s-5);
  max-width: var(--container);
  margin: 0 auto clamp(2rem, 3.5vw, 3rem);
}

.poster-rail__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
  color: var(--color-on-cobalt);
  margin: 0;
  max-width: 18ch;
}

.poster-rail__series {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: 0 var(--s-5);
  max-width: var(--container);
  margin: 0 auto;
}

@media (min-width: 640px) {
  .poster-rail__series {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .poster-rail__series {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
  }
}

/* Staggered entrance — left to right */
.js .poster-card[data-reveal] {
  transition-delay: calc(var(--i, 0) * 110ms);
}

.poster-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--color-on-cobalt) 4%, transparent);
  box-shadow:
    0 0 0 1px var(--color-on-cobalt-faint),
    inset 0 1px 0 0 color-mix(in srgb, var(--color-on-cobalt) 10%, transparent);
  min-height: 280px;
  overflow: hidden;
  isolation: isolate;
}

.poster-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--color-harvest) 22%, transparent), transparent 55%);
  z-index: -1;
  opacity: 0.6;
  pointer-events: none;
}

.poster-card--accent {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-harvest) 14%, transparent) 0%,
    color-mix(in srgb, var(--color-harvest) 4%, transparent) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-harvest) 32%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, var(--color-harvest) 28%, transparent);
}

.poster-card__index {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-on-cobalt-mute);
  margin-bottom: var(--s-3);
}

.poster-card__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 4.8vw, 4.75rem);
  line-height: 0.85;
  letter-spacing: -0.035em;
  color: var(--color-on-cobalt);
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-flex;
  align-items: baseline;
  margin-bottom: var(--s-3);
}
.poster-card--accent .poster-card__value {
  color: var(--color-harvest);
}

.poster-card__suffix {
  font-size: 0.32em;
  color: var(--color-harvest);
  letter-spacing: 0;
  margin-left: 0.05em;
  vertical-align: 0.55em;
}

.poster-card__rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-harvest);
  margin-bottom: var(--s-3);
}

.poster-card__label {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.1875rem;
  line-height: 1.18;
  color: var(--color-on-cobalt);
  margin: 0 0 var(--s-3);
  max-width: 20ch;
}

.poster-card__caption {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-on-cobalt-soft);
  max-width: 38ch;
  margin-top: auto;
  hanging-punctuation: first last;
}


/* ============================================================
   16.  RAIL (Practice) — static 3+2 grid, all 5 cards visible.
   Staggered blur-fade entrance (90 ms between cards). Mobile stacks.
   ============================================================ */
.rail {
  padding: var(--section-pad) var(--s-5);
}

.rail__head {
  max-width: var(--container);
  margin: 0 auto var(--s-9);
}

.rail__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.018em;
  color: var(--color-on-cobalt);
  max-width: 22ch;
  margin: 0;
}

/* 3 + 2 asymmetric grid:
   Desktop ≥1024px → 6-col base. Top row: 3 cards each spanning 2.
                     Bottom row: 2 cards each spanning 3 (wider).
   Tablet 768–1023px → 2 cols, last card full-width.
   Mobile <768px → single column stack.

   Each panel inherits a per-index transition-delay from --i,
   creating a left-to-right, top-to-bottom waterfall reveal. */
.rail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: var(--container);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .rail__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
  .rail__panel:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .rail__grid {
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(var(--s-4), 1.4vw, var(--s-5));
  }
  .rail__panel:nth-child(1),
  .rail__panel:nth-child(2),
  .rail__panel:nth-child(3) { grid-column: span 2; }
  .rail__panel:nth-child(4),
  .rail__panel:nth-child(5) { grid-column: span 3; }
}

/* Staggered entrance — per-panel timing reads from --i.
   Bigger translate + longer duration than the generic reveal so the
   cascade feels deliberate. 160ms between cards = 640ms total over 5. */
.js .rail__panel[data-reveal] {
  opacity: 0;
  transform: translateY(72px);
  filter: blur(8px);
  transition:
    opacity   1.1s var(--ease-spring),
    transform 1.2s var(--ease-spring),
    filter    1.1s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 160ms);
}

.rail__panel[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.rail__panel-shell {
  height: 100%;
  background: color-mix(in srgb, var(--color-on-cobalt) 4%, transparent);
  padding: 0.65rem;
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px var(--color-on-cobalt-faint),
    inset 0 1px 0 0 color-mix(in srgb, var(--color-on-cobalt) 10%, transparent);
  transition: transform 560ms var(--ease-spring), box-shadow 560ms var(--ease-spring);
}

.rail__panel-shell:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-harvest) 38%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, var(--color-on-cobalt) 18%, transparent),
    0 28px 60px -32px color-mix(in srgb, var(--color-cobalt-deep) 80%, transparent);
}

.rail__panel-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
  min-height: 320px;
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  border-radius: calc(var(--r-lg) - 0.45rem);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-cobalt-deep) 92%, var(--color-on-cobalt)) 0%,
    var(--color-cobalt-deep) 100%);
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, var(--color-on-cobalt) 12%, transparent);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .rail__panel-inner { min-height: 340px; }
}

.rail__panel-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-harvest) 22%, transparent), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.rail__panel-num {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-on-cobalt-mute);
  margin-bottom: var(--s-2);
}

.rail__panel-icon {
  width: 40px;
  height: 40px;
  color: var(--color-harvest);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: square;
  flex: none;
  margin-bottom: var(--s-2);
}

.rail__panel-inner h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--color-on-cobalt);
  margin: 0;
}

.rail__panel-rule {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-harvest);
  transition: width 480ms var(--ease-spring);
}

.rail__panel-shell:hover .rail__panel-rule { width: 56px; }

.rail__panel-inner p {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-on-cobalt-soft);
  margin-top: auto;
  hanging-punctuation: first last;
}


/* ============================================================
   17.  STORY-SPREAD — magazine treatment.
   Image hero with text overlay top-left; body flows in 2 columns
   below (single column on mobile). Drop cap on first paragraph.
   ============================================================ */
.story-spread {
  padding: clamp(4rem, 8vw, 6rem) var(--s-5);
}

/* Image hero — wide cinematic frame with overlay text */
.story-hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
  isolation: isolate;
}

.story-hero__image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 6%, transparent),
    0 40px 80px -40px color-mix(in srgb, var(--color-ink) 26%, transparent);
}

.story-hero__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.03);
}

@media (min-width: 1024px) {
  .story-hero__image img { aspect-ratio: 21 / 9; }
}

/* Scrim — darkens upper-left area so overlay text reads cleanly */
.story-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(24, 40, 55, 0.82) 0%,
    rgba(24, 40, 55, 0.55) 22%,
    rgba(24, 40, 55, 0.18) 45%,
    transparent 65%);
  border-radius: var(--r-lg);
  pointer-events: none;
}

/* Overlay text — top-left of the image */
.story-hero__overlay {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3.5rem);
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 2;
  max-width: 90%;
  color: var(--color-cream);
}

@media (min-width: 768px) {
  .story-hero__overlay { max-width: 60%; }
}

.story-hero__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.014em;
  color: var(--color-cream);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.story-hero__heading-italic {
  font-style: italic;
  color: color-mix(in srgb, var(--color-harvest) 80%, var(--color-cream));
}

/* Bottom-right caption — small magazine masthead detail */
.story-hero__cap {
  position: absolute;
  bottom: clamp(1rem, 2.5vw, 2rem);
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 248, 241, 0.72);
}

.story-hero__cap-rule {
  flex: 1;
  height: 1px;
  background: rgba(251, 248, 241, 0.32);
}

/* Body — full-desktop spread, 2 columns on wide screens */
.story-body {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: 0;
}

@media (min-width: 768px) {
  .story-body {
    column-count: 2;
    column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
    column-rule: 1px solid color-mix(in srgb, var(--color-harvest) 26%, transparent);
  }
}

.story-body p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.78;
  color: var(--color-ink-soft);
  margin: 0 0 1.1em;
  hanging-punctuation: first last;
  /* Don't break short paragraphs awkwardly across columns */
  break-inside: avoid-column;
}

.story-body p:last-child { margin-bottom: 0; }

/* Drop cap on the first paragraph — anchors the editorial entry */
.drop-cap {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 4em;
  line-height: 0.82;
  float: left;
  margin: 0.05em 0.14em -0.08em 0;
  color: var(--color-harvest);
  letter-spacing: -0.02em;
}


/* ============================================================
   18.  CONTACT-BEZEL — Double-bezel form container + letterpress inputs
   ============================================================ */
.contact-bezel {
  padding: var(--section-pad) var(--s-5);
}

.contact-bezel__head {
  max-width: var(--container-tight);
  margin: 0 auto var(--s-9);
  text-align: left;
}

.contact-bezel__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  margin: 0 0 var(--s-5);
  max-width: 16ch;
}

.contact-bezel__heading-italic {
  font-style: italic;
  color: var(--color-harvest-deep);
}

.contact-bezel__intro {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-width: 50ch;
}

.bezel-outer {
  max-width: var(--container-tight);
  margin: 0 auto;
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
  padding: 0.75rem;
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-ink) 6%, transparent),
    0 40px 80px -40px color-mix(in srgb, var(--color-ink) 20%, transparent);
}

.bezel-inner {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--color-cream);
  border-radius: calc(var(--r-lg) - 0.55rem);
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, var(--color-cream) 90%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-harvest) 14%, transparent);
}

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5) var(--s-6);
  margin-bottom: var(--s-7);
}

@media (min-width: 720px) {
  .contact-form__grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-form__group--full {
    grid-column: 1 / -1;
  }
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.contact-form__label {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.contact-form__opt {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--color-ink-faint);
  margin-left: var(--s-2);
}

/* Netlify Forms honeypot — hidden from humans, visible to bots so we can
   silently discard their submissions. position: absolute keeps it out of
   layout flow; the !important block guards against future style edits. */
.contact-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none;
}

.contact-form__input,
.contact-form__textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-stone) 20%, var(--color-cream));
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);
  padding: 0.95rem 1rem;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-ink) 6%, transparent);
  transition:
    border-color 320ms var(--ease-spring),
    box-shadow 380ms var(--ease-spring),
    background 320ms var(--ease-spring);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-bottom-color: var(--color-harvest);
  background: color-mix(in srgb, var(--color-stone) 30%, var(--color-cream));
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--color-ink) 8%, transparent),
    inset 0 -2px 0 0 var(--color-harvest);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.contact-form__submit {
  align-self: flex-start;
}

.contact-form__status {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}

.contact-form__status--success {
  background: color-mix(in srgb, var(--color-harvest) 12%, var(--color-cream));
  color: var(--color-harvest-deep);
}

.contact-form__status--error {
  background: color-mix(in srgb, #b03030 8%, var(--color-cream));
  color: #8a2222;
}


/* ---- Direct contact tiles below form ---- */
.contact-bezel__direct {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  max-width: var(--container-tight);
  margin: var(--s-7) auto 0;
}

@media (min-width: 720px) {
  .contact-bezel__direct {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }
}

.direct-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--color-ink) 3%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 6%, transparent);
  transition:
    background 380ms var(--ease-spring),
    box-shadow 380ms var(--ease-spring),
    transform  380ms var(--ease-spring);
}

.direct-link:hover {
  background: color-mix(in srgb, var(--color-harvest) 8%, var(--color-cream));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-harvest) 36%, transparent);
}
.direct-link:active { transform: scale(0.99); }

.direct-link__label {
  grid-column: 1;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.direct-link__value {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-ink);
  margin-top: var(--s-2);
}

.direct-link__arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
  color: var(--color-ink);
  transition: transform 420ms var(--ease-spring), background 420ms var(--ease-spring);
}
.direct-link__arrow svg { width: 0.85rem; height: 0.85rem; }
.direct-link:hover .direct-link__arrow {
  transform: translate(2px, -2px) scale(1.06);
  background: var(--color-harvest);
  color: var(--color-cream);
}


/* Contact social row — small icon + label pill, adapted for the
   light cream Contact section background. Sits below the direct
   email + phone tiles. */
.contact-social {
  list-style: none;
  margin: var(--s-5) auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  max-width: var(--container-tight);
}

.contact-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.55rem 1rem 0.55rem 0.75rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 16%, transparent);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition:
    background 380ms var(--ease-spring),
    box-shadow 380ms var(--ease-spring),
    color      380ms var(--ease-spring),
    transform  380ms var(--ease-spring);
}

.contact-social a:hover {
  background: color-mix(in srgb, var(--color-harvest) 12%, var(--color-cream));
  box-shadow: 0 0 0 1px var(--color-harvest);
  color: var(--color-harvest-deep);
  transform: translateY(-1px);
}

.contact-social a:active { transform: translateY(0) scale(0.98); }

.contact-social svg {
  width: 18px;
  height: 18px;
  flex: none;
}


/* ============================================================
   19.  FOOTER
   ============================================================ */
.foot {
  padding: var(--s-10) var(--s-5) var(--s-8);
}

.foot__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-7);
  align-items: end;
}

@media (max-width: 640px) {
  .foot__inner {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.foot__logo {
  width: 120px;
  height: auto;
  opacity: 0.92;
}

.foot__meta {
  text-align: right;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-on-cobalt-soft);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.foot__meta p + p { margin-top: 0.25rem; }

/* Land acknowledgement — slightly muted, max-width for readable line length */
.foot__acknowledgement {
  margin-top: var(--s-4) !important;
  max-width: 48ch;
  color: var(--color-on-cobalt-mute);
  font-style: italic;
  line-height: 1.6;
}


.foot__copy {
  color: var(--color-on-cobalt-mute);
  margin-top: var(--s-4) !important;
}

@media (max-width: 640px) {
  .foot__meta {
    text-align: left;
    align-items: flex-start;
  }
}


/* ============================================================
   20.  SCROLL REVEAL — blur-fade-up (skill mandate: blur + translate + opacity)
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(6px);
  transition:
    opacity   780ms var(--ease-spring),
    transform 900ms var(--ease-spring),
    filter    900ms var(--ease-spring);
  will-change: opacity, transform, filter;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* ============================================================
   21.  SCROLL-SCRUB (Story body) — word-by-word ink-mute → ink
   ============================================================ */
.scrub-word {
  color: color-mix(
    in srgb,
    var(--color-ink) calc(var(--p, 0) * 100%),
    var(--color-ink-faint)
  );
  transition: color 200ms var(--ease-spring);
}

.scrub-static .scrub-word {
  color: var(--color-ink);
  transition: none;
}

:not(.js) [data-scrub] { color: var(--color-ink); }


/* ============================================================
   22.  REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .intro__logo,
  .intro__name .ltr,
  .intro__rule,
  .intro__subtitle,
  .intro__stage,
  .intro__scroll {
    animation: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .frame__inner img { transition: none !important; }
  .float-nav {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    transition: none !important;
  }
}