/* ==========================================================================
   ONNNO — editorial landing page
   Paper / ink / one indigo, borrowed from the apron and the hand-painted sign.
   ========================================================================== */

:root{
  --paper:      #f3ede1;
  --paper-2:    #ebe2d1;
  --paper-3:    #e3d8c4;
  --ink:        #17130f;
  --ink-soft:   #524b41;
  --ink-faint:  #8b8274;
  --blue:       #1A3560;
  --line:       rgba(23,19,15,0.14);
  --line-strong:rgba(23,19,15,0.28);

  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans:  'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 113px;

  color-scheme: light;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ background: var(--paper); }
html,body{ margin:0; padding:0; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration: none; }

::selection{ background: var(--blue); color: var(--paper); }

/* film-grain overlay, purely textural */
.grain{
  position: fixed; inset:0; z-index: 900; pointer-events:none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---------- reveal utilities ----------
   Progress (0→1) is written every frame from JS as a scroll-scrubbed value
   (with a light lerp for smoothness), not toggled once via a class. */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.reveal-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.reveal-line{
  display:inline-block;
  transform: translateY(115%);
  will-change: transform;
}

/* the hero has no scroll "runway" above it, so it gets a one-time load-in
   transition instead of the scroll-scrubbed engine used everywhere else */
.hero .reveal{
  transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
  transition-delay: var(--d, 0s);
}
.hero .reveal.is-visible{ opacity:1; transform: translateY(0); }
.hero .reveal-line{ transition: transform 1.1s cubic-bezier(.16,.8,.24,1); transition-delay: calc(var(--d, 0s) + .1s); }
.hero .reveal.is-visible .reveal-line{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .reveal-line{ transform:none !important; }
}

/* kinetic type — optical size and weight are scrubbed by JS as these
   headlines scroll into view, so hand off the axes from the browser's
   automatic optical sizing to explicit per-frame control */
[data-kinetic]{ font-optical-sizing: none; }

/* ============================== NAV ============================== */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.4rem var(--edge);
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  transition: color .4s ease, background-color .4s ease, box-shadow .4s ease, padding .4s ease;
}
.site-nav::before{
  content:''; position:fixed; top:0; left:0; right:0; height: 170px;
  background: linear-gradient(180deg, rgba(23,19,15,.55) 0%, rgba(23,19,15,0) 100%);
  opacity: 0; transition: opacity .4s ease; z-index:-1; pointer-events:none;
}
.site-nav--overlay{ color: var(--paper); }
.site-nav--overlay::before{ opacity: 1; }

/* once the hero has scrolled past (Introducción onward), the nav gets a
   solid ground so it reads clearly over any section, dark ones included —
   this wins over --overlay's light text since it's declared after it. */
.site-nav--solid{
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.site-nav--solid::before{ opacity: 0 !important; }
.site-nav--solid .site-nav__meta,
.site-nav--solid .site-nav__social{ display:none; }
.site-nav__mark{ display:inline-flex; align-items:center; }
.site-nav__logo{ height: 68px; width: auto; transition: height .4s ease; }
.site-nav--solid .site-nav__logo{ height: 28px; }
.site-nav__meta{
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}
@media (max-width: 720px){ .site-nav__meta{ display:none; } }

.site-nav__right{ display:flex; flex-direction:column; align-items:flex-end; gap:1rem; }
.site-nav__toggle{
  display:flex; align-items:center; gap:.6rem;
  background:none; border:0; color: inherit; cursor:pointer;
  font-family: var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding: .4rem 0;
}
.site-nav__social{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: inherit; opacity:.85; transition: opacity .3s ease;
}
.site-nav__social:hover{ opacity:.6; }
.site-nav__toggle-icon{ display:inline-flex; flex-direction:column; gap:4px; width:20px; }
.site-nav__toggle-icon i{ display:block; height:1px; background: currentColor; transition: transform .4s ease, opacity .4s ease; }
[aria-expanded="true"] .site-nav__toggle-icon i:first-child{ transform: translateY(2.5px) rotate(45deg); }
[aria-expanded="true"] .site-nav__toggle-icon i:last-child{ transform: translateY(-2.5px) rotate(-45deg); }

.site-index{
  position: fixed; inset:0; z-index: 480;
  background: var(--ink); color: var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  justify-content: safe center;
  overflow-y: auto;
  padding: calc(var(--nav-h) + 2rem) var(--edge) 3rem;
  transform: translateY(-100%);
  transition: transform .7s cubic-bezier(.16,.8,.24,1);
}
.site-index.is-open{ transform: translateY(0); }

.site-index__list{ list-style:none; margin:0; padding:0; }
.site-index__list li{ border-top: 1px solid rgba(243,237,225,0.18); }
.site-index__list li:last-child{ border-bottom: 1px solid rgba(243,237,225,0.18); }
.site-index__list a{
  display:flex; align-items:baseline; gap: 1.4rem;
  padding: .85rem 0;
  font-family: var(--serif); font-style: italic; font-weight:400;
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  transition: opacity .3s ease, padding-left .3s ease;
}
.site-index__list a:hover{ padding-left: .6rem; opacity:.7; }
.site-index__list .n{
  font-family: var(--sans); font-style:normal; letter-spacing:.08em;
  font-size: .8rem; color: var(--ink-faint);
}
.site-index__foot{
  margin-top: 2.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem 2rem;
  font-size: .72rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(243,237,225,0.6);
}
.site-index__foot a{ color: var(--paper); border-bottom:1px solid rgba(243,237,225,.4); }
.site-index__address{ font-size:.6rem; opacity:.55; }

/* when the nav is already showing its solid white ground (past the hero),
   opening the índice keeps that same paper background instead of the
   usual dark one, so the panel doesn't feel like a different surface. */
.site-nav--solid ~ .site-index{ background: var(--paper); color: var(--ink); }
.site-nav--solid ~ .site-index .site-index__list li{ border-top-color: rgba(23,19,15,.14); }
.site-nav--solid ~ .site-index .site-index__list li:last-child{ border-bottom-color: rgba(23,19,15,.14); }
.site-nav--solid ~ .site-index .site-index__foot{ color: rgba(23,19,15,.6); }
.site-nav--solid ~ .site-index .site-index__foot a{ color: var(--ink); border-bottom-color: rgba(23,19,15,.4); }

/* on shorter viewports, nine chapters + footer don't fit under the nav's
   real height without scrolling — tighten row rhythm so it does. */
@media (max-height: 1300px){
  .site-index{ padding: calc(var(--nav-h) + .75rem) var(--edge) 1.25rem; }
  .site-index__list a{ padding: .4rem 0; font-size: clamp(1.3rem, 4vw, 2.1rem); }
  .site-index__foot{ margin-top: 1rem; }
}

/* ============================== HERO ============================== */
.hero{
  position: relative;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero__frame{ position:absolute; inset:0; }
.hero__img{
  display:block;
  width:100%; height:100%; object-fit:cover; object-position: 50% 42%;
  filter: saturate(1.02) contrast(1.03);
  background: var(--ink);
}
.hero__vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,19,15,.42) 0%, rgba(23,19,15,.05) 30%, rgba(23,19,15,.15) 62%, rgba(23,19,15,.75) 100%);
}
.hero__content{
  position:relative; z-index:2;
  color: var(--paper);
  padding: 0 var(--edge) clamp(2.5rem, 8vh, 5rem);
}
.hero__kicker{
  font-size: .78rem; letter-spacing:.2em; text-transform:uppercase;
  margin: 0 0 .6rem;
  opacity: .9;
}
.hero__word{
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(4.2rem, 17vw, 14rem);
  line-height: .86;
  letter-spacing: -.01em;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 40, 'wght' 420;
  transition: font-variation-settings 1.1s cubic-bezier(.16,.8,.24,1);
  transition-delay: var(--d, 0s);
}
.hero__word.is-visible{ font-variation-settings: 'opsz' 144, 'wght' 500; }
.hero__descriptor{
  margin: 1rem 0 0;
  font-size: clamp(.85rem, 1.6vw, 1.15rem);
  letter-spacing: .04em;
  max-width: 40em;
}
.hero__descriptor .slash{ color: var(--ink-faint); margin: 0 .35em; }

.hero__scroll{
  position:absolute; right: var(--edge); bottom: 2rem; z-index:2;
  color: var(--paper);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero__scroll i{ width:1px; height:38px; background: rgba(243,237,225,.6); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--paper); animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
@media (max-width: 640px){ .hero__scroll{ display:none; } }

/* small "this scrolls sideways" hint for the horizontal swipe rails */
.swipe-hint{
  display:none; margin: .7rem 0 0; text-align:right;
  font-size: .68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint);
}
@media (max-width: 860px){ .swipe-hint{ display:block; } }

/* ============================== CHAPTER shared ============================== */
.chapter{ position: relative; padding: clamp(4.5rem, 10vw, 8rem) var(--edge); }
.chapter__head{ margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.chapter__index{
  display:inline-block; font-size: .72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint);
  margin-bottom: 1rem;
}
.chapter__index.light{ color: rgba(243,237,225,.75); }
.chapter__title{
  margin:0; font-family: var(--serif); font-weight:500; font-style:italic;
  font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: .96;
}

/* ============================== INTRODUCTION ============================== */
.intro{ background: var(--paper); border-top: 1px solid var(--line); }
.intro__lead{ max-width: 26ch; margin-bottom: clamp(2.5rem, 7vw, 4.5rem); }
.intro__lead p{
  font-family: var(--serif); font-weight:400; font-style:italic;
  font-size: clamp(1.8rem, 4.6vw, 3.4rem); line-height:1.08; margin:0;
}
.drop{ font-size: 1.5em; font-style: normal; }

.intro__grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 6vw, 5rem);
  padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line);
  margin-bottom: clamp(3rem, 8vw, 5rem);
}
.intro__body{ font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink-soft); max-width: 46ch; margin:0; }
.intro__quote{
  font-family: var(--serif); font-style: italic; font-weight:400; color: var(--blue);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height:1.25; margin:0;
}
.intro__timeline{ border-top: 1px solid var(--line); padding-top: clamp(2rem, 5vw, 3rem); }
.intro__timeline p{ max-width: 62ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin:0; }

@media (max-width: 820px){
  .intro__grid{ grid-template-columns: 1fr; }
}

/* ============================== THE TABLE ============================== */
.the-table{
  padding:0; display:grid; grid-template-columns: 1.05fr .95fr; align-items:stretch;
  background: var(--paper-2);
}
.the-table__media{ position:relative; overflow:hidden; min-height: 62vh; }
.the-table__media img{ width:100%; height:100%; object-fit:cover; object-position: 40% 30%; transform: scale(1.1); }
.the-table__text{
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  display:flex; flex-direction:column; justify-content:center; gap: 1.4rem;
}
.the-table__text .chapter__title{ margin-bottom:.5rem; }
.the-table__quote{
  font-family: var(--serif); font-style:italic; font-weight:400; color: var(--blue);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height:1.32; max-width: 30ch; margin:0;
}
.the-table__text p:not(.the-table__quote){ color: var(--ink-soft); max-width: 42ch; font-size: 1.02rem; margin:0; }

@media (max-width: 900px){
  .the-table{ grid-template-columns: 1fr; }
  .the-table__media{ min-height: 52vh; }
}

/* ============================== 4:00 AM ============================== */
.dawn{
  position: relative; padding:0; min-height: 100vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background: var(--ink);
}
.dawn__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter: brightness(.55) saturate(.85) contrast(1.05);
  transform: scale(1.15);
}
.dawn__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,9,7,.45) 0%, rgba(10,9,7,.1) 35%, rgba(10,9,7,.85) 100%);
}
.dawn__content{
  position:relative; z-index:2; color: var(--paper);
  padding: clamp(5rem,14vw,9rem) var(--edge) clamp(3rem,8vw,5rem);
  max-width: 46rem;
}
.dawn__time{
  margin: 0 0 1.4rem; font-family: var(--serif); font-weight:400;
  font-size: clamp(4rem, 13vw, 8.5rem); line-height:.9;
}
.dawn__time .colon{ color: var(--paper); opacity:.5; margin: 0 .05em; }
.dawn__time .am{ font-size: .28em; letter-spacing:.14em; text-transform:uppercase; margin-left:.3em; font-family: var(--sans); vertical-align: middle; }
.dawn__text{ font-size: clamp(1rem, 1.7vw, 1.25rem); line-height:1.55; margin: 0 0 1.1rem; color: rgba(243,237,225,.92); max-width: 42ch; }
.dawn__text--small{ font-size: .95rem; color: rgba(243,237,225,.65); }

/* ============================== THE SPACE ============================== */
.the-space{ background: var(--paper); }
.the-space__lead{
  font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  max-width: 44ch; line-height:1.35; margin: 0 0 clamp(2.5rem, 6vw, 4rem); color: var(--ink);
}
.the-space__lead strong{ color: var(--blue); font-style:normal; }

.the-space__sequence{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1.4vw, 1rem);
}
.the-space__sequence figure{ margin:0; position:relative; overflow:hidden; }
.the-space__sequence img, .the-space__sequence video{ width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.16,.8,.24,1); }
.the-space__sequence figure:hover img, .the-space__sequence figure:hover video{ transform: scale(1.045); }
.the-space__sequence figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: .8rem .9rem;
  font-size: .74rem; line-height:1.35; color: var(--paper);
  background: linear-gradient(0deg, rgba(23,19,15,.72), rgba(23,19,15,0));
}
.seq-a, .seq-b, .seq-c, .seq-d{ grid-column:auto; aspect-ratio: 3/4; margin-top:0; align-self:auto; }

/* mobile: trade the asymmetric grid for a full-bleed horizontal swipe rail —
   snap-scrolled, edge-to-edge, each frame peeking the next */
@media (max-width: 860px){
  .the-space__sequence{
    display:flex; grid-template-columns:none; gap: .9rem;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin: 0 calc(var(--edge) * -1); padding: 0 var(--edge);
  }
  .the-space__sequence::-webkit-scrollbar{ display:none; }
  .seq-a, .seq-b, .seq-c, .seq-d{
    grid-column:auto; flex:0 0 80vw; margin-top:0;
    aspect-ratio: 4/5; scroll-snap-align:start;
  }
}

/* ============================== PEOPLE & CRAFT ============================== */
.people{ background: var(--paper-2); }

/* a scattered photo collage around the big display title, echoing an
   architecture studio's "All Work (28)" teaser moment */
.people__hero{
  position:relative; height: clamp(560px, 58vw, 820px);
  margin: clamp(1rem, 3vw, 1.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  display:flex; align-items:center; justify-content:center;
}
.people__hero-title{
  position:relative; z-index:2; margin:0; text-align:center; font-size: clamp(3rem, 8vw, 6.5rem);
  display:inline-block; background: var(--paper-2); padding: 0 .15em;
}
.people__hero-img{
  position:absolute; z-index:1; object-fit:cover;
  box-shadow: 0 30px 60px -28px rgba(23,19,15,.4);
  transition: transform .6s cubic-bezier(.16,.8,.24,1);
}
.people__hero-img--a{ width:16%; aspect-ratio:3/4; top:3%; left:4%; }
.people__hero-img--b{ width:18%; aspect-ratio:4/5; bottom:4%; right:6%; }
.people__hero-img--c{ width:11%; aspect-ratio:2/3; top:5%; right:16%; }
.people__hero-img--d{ width:10%; aspect-ratio:3/4; bottom:10%; left:18%; }
.people__hero-img--e{ width:14%; aspect-ratio:3/4; top:34%; right:2%; }
.people__hero-img--f{ width:12%; aspect-ratio:2/3; bottom:30%; left:1%; }

/* mobile keeps all six photos — same experience, just rescaled into two
   clusters (top / bottom) with the middle band clear for the title, since
   at this width the title spans nearly edge to edge. No hover here (no
   real cursor on touch); instead the photos drift gently bottom-to-top
   as the section scrolls through, driven from JS via data-depth. */
@media (max-width: 640px){
  .people__hero{ height: clamp(560px, 150vw, 640px); }
  .people__hero-title{ font-size: clamp(2.3rem, 11vw, 3rem); }
  .people__hero-img{ box-shadow: 0 16px 34px -18px rgba(23,19,15,.4); }
  .people__hero-img--a{ width:30%; top:2%; left:3%; bottom:auto; right:auto; }
  .people__hero-img--c{ width:22%; top:3%; right:5%; left:auto; bottom:auto; }
  .people__hero-img--e{ width:24%; top:20%; left:36%; right:auto; bottom:auto; }
  .people__hero-img--d{ width:22%; bottom:14%; left:6%; top:auto; right:auto; }
  .people__hero-img--f{ width:20%; bottom:2%; left:34%; top:auto; right:auto; }
  .people__hero-img--b{ width:34%; bottom:2%; right:4%; top:auto; left:auto; }
}

/* text now reads as one simple, centered flow beneath the hero title
   instead of separate list / caption / statement blocks */
.people__caption{
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; max-width: 56ch; text-align:center;
  font-size: 1.02rem; color: var(--ink-soft); line-height:1.55;
}
.people__statement{
  font-family: var(--serif); font-style:italic; color: var(--ink-soft);
  line-height:1.45; margin: 0 auto;
}
.people__statement--lead{
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-size: clamp(1.3rem, 2.6vw, 2rem); color: var(--ink);
  max-width: 42ch; text-align:center; line-height:1.35;
}
.people__statement em{ color: var(--blue); }

/* ============================== GROWTH ============================== */
.growth{ background: var(--paper); }
.growth__row{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,5vw,4rem); margin-bottom: clamp(2.5rem,6vw,4rem); }
.growth__text{ font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; margin:0; }
@media (max-width: 780px){ .growth__row{ grid-template-columns: 1fr; } }

.growth__closing{ font-family: var(--serif); font-style:italic; font-size: clamp(1.2rem,2.2vw,1.6rem); max-width:56ch; margin:0; color: var(--ink); }

/* ---------- pinned card stack ----------
   The section holds its place in the viewport (position:sticky) while its
   tall wrapper scrolls past underneath; JS turns that vertical scroll into
   a deck of photos cycling through — the front card peels up and away,
   spinning off, while the next one (already waiting, peeking behind it)
   scales up to take its place. */
.growth__pin{
  position: relative;
  height: 320vh;
  margin: clamp(2rem, 5vw, 3rem) calc(var(--edge) * -1) 0;
}
/* the clip and the sticky positioning live on this plain wrapper — keeping
   them off the element that also carries the per-frame transform sidesteps
   a real clipping bug some engines have with position:sticky + overflow:hidden
   sitting on the same box inside a very tall ancestor (verified: the strip
   silently stopped painting once scrolled far enough that the "stuck" and
   "natural" positions diverged a lot; splitting sticky/clip from the moving
   element fixed it) */
.growth__viewport{
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  padding: 0 var(--edge);
}
.growth__track{
  position: relative;
  height: 100%;
}
.growth__card{
  position: absolute; top: 50%; left: 50%;
  width: min(64vw, 440px);
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  box-shadow: 0 30px 70px -30px rgba(23,19,15,.45);
  will-change: transform, filter, opacity;
}
/* the closing beat: no photo, just "2026" growing from the corner
   year-label's spot into a big centered word — sizing/position for this
   one card are driven entirely from JS */
.growth__card--text{
  width: auto; aspect-ratio: auto; background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 26px; color: var(--ink); white-space: nowrap;
}
.growth__count{
  position: absolute; right: var(--edge); bottom: clamp(1.5rem, 4vw, 2.5rem);
  font-family: var(--sans); font-size: .72rem; letter-spacing:.16em;
  color: var(--ink-faint); pointer-events:none;
}
/* the year sits beside the pinned photo, not on top of it — same corner
   treatment as the counter, mirrored to the opposite edge, and it swaps
   the instant the deck settles on a new card (see data-growth-year in JS) */
.growth__year{
  position: absolute; left: var(--edge); bottom: clamp(1.3rem, 3.6vw, 2.3rem);
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink-faint);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .growth__pin{ height:auto; margin: 0; }
  .growth__viewport{
    position:static; height:auto; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .growth__viewport::-webkit-scrollbar{ display:none; }
  .growth__track{
    display:flex; align-items:center; gap: clamp(1rem, 3vw, 2rem); height:auto;
  }
  .growth__card{
    position:static; flex:0 0 auto;
    scroll-snap-align:start; transform:none !important; filter:none !important; opacity:1 !important;
  }
  .growth__card--text{ font-size: clamp(2.5rem, 8vw, 4rem); }
  .growth__count{ display:none; }
  .growth__year{ display:none; }
}

/* ============================== THE OVEN ============================== */
.oven{
  background: var(--blue);
  color: var(--paper);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.oven .chapter__index{ color: rgba(243,237,225,.65); }
.oven__figure{
  margin: clamp(2rem,5vw,3.5rem) 0; max-width: 300px; width: 60vw;
  box-shadow: 0 30px 60px -25px rgba(23,19,15,.35);
  border: 8px solid var(--paper); outline: 1px solid rgba(243,237,225,.3);
}
.oven .chapter__title{ text-align:center; }
.oven__text{ max-width: 42ch; display:flex; flex-direction:column; gap: 1rem; align-items:center; }
.oven__text p{ margin:0; color: rgba(243,237,225,.92); }
.oven__small{ font-size: .85rem; letter-spacing:.02em; color: rgba(243,237,225,.65); font-style:italic; font-family: var(--serif); }

/* ============================== FINAL STATEMENT ============================== */
.finale{
  position:relative; min-height: 100vh; display:grid; grid-template-columns: 1fr 1fr;
  background: var(--paper-2);
}
.finale__text{ display:flex; flex-direction:column; justify-content:center; padding: clamp(3rem,6vw,6rem) var(--edge); }
.finale__statement{
  font-family: var(--serif); font-weight:500; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height:1.02; margin:0 0 1.6rem;
}
.finale__statement em{ font-style:italic; color: var(--blue); font-weight:400; }
.finale__attr{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin:0; }
.finale__media{ position:relative; overflow:hidden; min-height: 50vh; }
.finale__media img{ width:100%; height:100%; object-fit:cover; object-position: 60% 40%; }

@media (max-width: 860px){
  .finale{ grid-template-columns: 1fr; }
  .finale__media{ min-height: 60vh; order:-1; }
}

/* ============================== VISIT ============================== */
.visit{ background: var(--paper); padding: clamp(4.5rem,10vw,8rem) var(--edge); text-align:center; }
.visit__word{ margin: 0 0 clamp(3rem,7vw,5rem); line-height:0; }
.visit__logo{ display:inline-block; height: clamp(3rem, 11vw, 7rem); width: auto; }
.visit__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  max-width: 60rem; margin: 0 auto; text-align:left;
  border-top: 1px solid var(--line); padding-top: clamp(2rem,5vw,3rem);
}
.visit__label{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:.6rem; }
.visit__grid p{ margin:0; color: var(--ink-soft); }
.visit__grid p + p{ margin-top: .8rem; }
.visit__grid p strong{ color: var(--ink); font-weight:600; }
.visit__grid a{ border-bottom: 1px solid var(--line-strong); }
@media (max-width: 720px){ .visit__grid{ grid-template-columns: 1fr; text-align:center; } }

/* ============================== FOOTER ============================== */
.site-footer{ background: var(--ink); color: rgba(243,237,225,.7); padding: 1.6rem var(--edge); font-size:.75rem; }
.site-footer__row{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding: .5rem 0; }
.site-footer__row--small{ color: rgba(243,237,225,.45); border-top:1px solid rgba(243,237,225,.12); }
.site-footer a{ text-decoration: underline; text-underline-offset: 3px; }

/* ============================== BIRTHDAY ANNOUNCEMENT ============================== */
.birthday{
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  visibility: hidden; pointer-events: none;
}
.birthday.is-open{ visibility: visible; pointer-events: auto; }
.birthday__backdrop{
  position: absolute; inset: 0;
  background: rgba(10, 16, 28, .6);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s ease;
}
.birthday.is-open .birthday__backdrop{ opacity: 1; }
.birthday__confetti{
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.birthday__card{
  position: relative; z-index: 1;
  background: var(--paper); color: var(--ink);
  width: min(92vw, 380px); max-height: 88vh; overflow-y: auto;
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(10,16,28,.55);
  transform: translateY(18px) scale(.96); opacity: 0;
  transition: transform .5s cubic-bezier(.16,.8,.24,1), opacity .4s ease;
}
.birthday.is-open .birthday__card{ transform: translateY(0) scale(1); opacity: 1; }
.birthday__close{
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%; border: 0;
  background: rgba(10,16,28,.55); color: var(--paper);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, transform .25s ease;
}
.birthday__close:hover{ background: rgba(10,16,28,.8); transform: scale(1.08); }
.birthday__media{
  display: block; width: 100%; padding: 0; margin: 0; border: 0;
  background: none; cursor: pointer; line-height: 0;
}
.birthday__media img{ display: block; width: 100%; height: auto; border-radius: 18px 18px 0 0; }
.birthday__text{ padding: 1.3rem 1.4rem 1.6rem; text-align: center; }
.birthday__title{
  margin: 0 0 .5rem; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 1.8rem); color: var(--blue);
}
.birthday__sub{ margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }

/* on laptop/desktop, a tall narrow mobile-style card reads too small and
   feels unadapted — switch to a wider side-by-side banner instead */
@media (min-width: 700px){
  .birthday__card{
    width: min(90vw, 640px); max-height: 80vh;
    display: flex; align-items: stretch;
  }
  .birthday__media{ width: 42%; flex: none; overflow: hidden; border-radius: 18px 0 0 18px; }
  .birthday__media img{ width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  .birthday__text{
    flex: 1; min-width: 0; text-align: left;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem);
  }
  .birthday__title{ font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
}

@media (prefers-reduced-motion: reduce){
  .birthday__backdrop, .birthday__card{ transition: opacity .2s ease; }
  .birthday__card{ transform: none; }
}