/* ═══════════════════════════════════════════════
   Μαρίνα — Ψυχολόγος
   Horizontal scroll on desktop · vertical on phone
   ═══════════════════════════════════════════════ */

:root{
  --ink:      #22271f;
  --ink-soft: #4a5145;
  --muted:    #8b857a;
  --cream:    #fbf8f3;
  --sand:     #f1ebe0;
  --sand-dk:  #e4dccd;
  --olive:    #6e7c5e;
  --clay:     #b0603a;
  --line:     rgba(34,39,31,.14);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(22px, 5.5vw, 92px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:var(--cream); padding:12px 20px }
.skip:focus{ left:0 }

/* ── type ──────────────────────────────── */
.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 2.6vw, 4.1rem);
  line-height:1.16; letter-spacing:-.01em;
  margin:0 0 .6em;
}
.eyebrow{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin:0 0 1.4em;
}

/* ── buttons ───────────────────────────── */
.btn{
  display:inline-block; position:relative; z-index:0; overflow:hidden;
  font-size:.82rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; padding:16px 34px;
  border:1px solid var(--ink); border-radius:2px; color:var(--ink);
  transition:color .45s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--cream) }
.btn:hover::after{ transform:translateY(0) }
.btn--sm{ padding:11px 22px; font-size:.72rem }
.btn--light{ border-color:rgba(251,248,243,.6); color:var(--cream) }
.btn--light::after{ background:var(--cream) }
.btn--light:hover{ color:var(--ink) }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:76px;
  display:flex; align-items:center;
  transition:background .5s var(--ease), height .4s var(--ease), box-shadow .5s var(--ease);
}
.nav__inner{
  width:100%; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav.is-stuck{
  background:rgba(251,248,243,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line); height:64px;
}

.nav__logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--cream); transition:color .4s var(--ease) }
.nav__mark{
  font-family:var(--serif); font-size:1.5rem; line-height:1;
  border:1px solid currentColor; border-radius:50%;
  width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto;
  padding-bottom:2px;
}
.nav__name{ font-size:.86rem; letter-spacing:.16em; text-transform:uppercase }

.nav__links{ display:flex; align-items:center; gap:34px; margin-left:auto }
.nav__links a{
  color:var(--cream); text-decoration:none; font-size:.82rem; letter-spacing:.05em;
  position:relative; transition:color .4s var(--ease);
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn).is-here::after{ transform:scaleX(1); transform-origin:left }

.nav__links .btn{ border-color:rgba(251,248,243,.55) }
.nav__links .btn::after{ background:var(--cream) }
.nav__links .btn:hover{ color:var(--ink) }

.nav__tools{ display:flex; align-items:center; gap:18px }
.lang{ display:flex; align-items:center; gap:6px; color:var(--cream); transition:color .4s var(--ease) }
.lang__btn{
  background:none; border:0; padding:2px 1px; cursor:pointer;
  font-family:var(--sans); font-size:.75rem; letter-spacing:.1em;
  color:inherit; opacity:.55; transition:opacity .3s;
}
.lang__btn.is-on{ opacity:1; text-decoration:underline; text-underline-offset:4px }
.lang__btn:hover{ opacity:1 }
.lang__sep{ opacity:.35; font-size:.75rem }

.nav.is-stuck .nav__logo,
.nav.is-stuck .nav__links a,
.nav.is-stuck .lang{ color:var(--ink) }
.nav.is-stuck .nav__links .btn{ border-color:var(--ink) }
.nav.is-stuck .nav__links .btn::after{ background:var(--ink) }
.nav.is-stuck .nav__links .btn:hover{ color:var(--cream) }

.burger{
  display:none; width:34px; height:34px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:7px;
}
.burger span{ display:block; height:1px; width:100%; background:var(--cream); transition:transform .4s var(--ease), background .4s }
.nav.is-stuck .burger span, .nav.is-open .burger span{ background:var(--ink) }
.nav.is-open .burger span:nth-child(1){ transform:translateY(4px) rotate(45deg) }
.nav.is-open .burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg) }

/* ═══════════ HORIZONTAL TRACK ═══════════ */
.track{ position:relative }               /* height set by JS */
.track__sticky{
  position:sticky; top:0;
  height:100svh; overflow:hidden;
}
.rail{
  display:flex; height:100%;
  will-change:transform;
}

.panel{
  flex:0 0 auto;
  width:100vw;
  height:100%;
  position:relative;
  display:flex; align-items:stretch;
  padding-inline:var(--pad);
  padding-block:104px 23vh;      /* top clears nav · bottom reserves the thread band */
  isolation:isolate;
}

/* Every panel is a full-height grid, so nothing floats in a void.
   Rows read: heading · body · footing. */
.panel__body{
  position:relative; z-index:2;
  width:100%; max-width:clamp(1120px, 80vw, 1840px); margin-inline:auto;
  height:100%;
  display:grid;
  align-content:center;
}
.panel__body--center{ text-align:center }

.panel--hero   .panel__body{ align-content:end; justify-items:start }
.panel--hero   .btn{ justify-self:start }
.panel--path   .panel__body{ align-content:start; padding-top:2vh }

.panel--modes  .panel__body{ grid-template-rows:auto 1fr auto; align-content:stretch }
.panel--modes  .modes{ align-self:start; margin-top:clamp(24px,5vh,56px) }

.panel--process .panel__body{ grid-template-rows:auto 1fr; align-content:stretch; max-width:none }
.panel--process .steps{ align-self:start; margin-top:clamp(20px,4vh,52px) }

.panel--cv     .panel__body{ grid-template-rows:auto 1fr; align-content:stretch; max-width:none }
.panel--cv     .cv{ align-self:center }

.panel--about  .panel__body,
.panel--off    .panel__body{ align-content:stretch }

/* ═══════════ THE THREAD ═══════════
   One line crosses the whole site, changing
   character panel by panel. Drawn on scroll. */

.ink{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none; overflow:visible;
}

.thread{
  fill:none;
  stroke:var(--clay);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:.72;
}
.thread--ghost{ opacity:.24; stroke-width:1.1 }
.ink--light .thread{ stroke:rgba(251,248,243,.9); opacity:.8 }
.ink--light .thread--ghost{ opacity:.28 }

.contour ellipse{
  fill:none;
  stroke:var(--olive);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  opacity:.22;
}

/* Rings expand and fade instead of sitting there — same size, staggered,
   so they read as one ripple travelling outward. */
.contour--ripple ellipse{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:ripple 8.4s var(--ease) infinite;
}
.contour--ripple ellipse:nth-child(2){ animation-delay:2.8s }
.contour--ripple ellipse:nth-child(3){ animation-delay:5.6s }

@keyframes ripple{
  0%   { transform:scale(.18); opacity:0 }
  14%  { opacity:.26 }
  70%  { opacity:.09 }
  100% { transform:scale(1.06); opacity:0 }
}

@media (prefers-reduced-motion:reduce){
  .contour--ripple ellipse{ animation:none; opacity:.16; transform:scale(.75) }
  .contour--ripple ellipse:nth-child(2){ transform:scale(.5) }
  .contour--ripple ellipse:nth-child(3){ transform:scale(.26) }
}

.node{ fill:var(--clay); opacity:.45 }
.ink--light .node{ fill:var(--cream); opacity:.6 }

.ticks path,
.stems path{
  fill:none;
  stroke:var(--muted);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  opacity:.32;
}

/* the dot that rides the tip of the line */
.tip{
  fill:var(--clay);
  opacity:0;
  transition:opacity .5s var(--ease);
}
.ink--light .tip{ fill:var(--cream) }
.ink.is-drawing .tip{ opacity:.9 }

/* ═══════════ GHOST NUMERALS ═══════════ */
.ghost{
  position:absolute;
  right:clamp(20px,4vw,64px);
  top:clamp(80px,11vh,130px);
  z-index:1;
  font-family:var(--serif);
  font-size:clamp(5rem, 10vw, 9.5rem);
  line-height:.72;
  font-weight:300;
  color:var(--ink);
  opacity:.075;
  pointer-events:none;
  user-select:none;
}
.ghost--light{ color:var(--cream); opacity:.16 }

/* ═══════════ FACTS STRIP ═══════════ */
.facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,56px);
  margin:0;
  max-width:900px;
}
.facts > div{ border-top:1px solid var(--line); padding-top:18px }
.facts dt{
  font-family:var(--serif); font-size:1.32rem; line-height:1.2;
  margin:0 0 .3em; color:var(--ink);
}
.facts dd{
  margin:0; font-size:.76rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}

/* ═══════════ GRAIN ═══════════ */
.grain{
  position:absolute; inset:0; z-index:30;
  pointer-events:none; opacity:.42; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

/* The drift scales the photo past its edges, so it rides the img and this
   box clips it. On the wrapper it spilled ~5% out of the chapter — above
   the veil, and wide enough to let phones pan sideways. */
.panel__media{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.panel__media img{ width:100%; height:100%; object-fit:cover }
.panel__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg,   rgba(20,24,18,.55) 0%,  rgba(20,24,18,0) 42%),
    linear-gradient(100deg, rgba(20,24,18,.86) 0%,  rgba(20,24,18,.52) 48%, rgba(20,24,18,.3) 100%);
}
.panel__veil--deep{ background:rgba(22,27,20,.6) }

/* ── 01 hero ── */
.panel--hero{ width:100vw; color:var(--cream) }
.panel--hero .eyebrow{ color:rgba(251,248,243,.75) }
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem, 4.4vw, 7rem);
  line-height:1.08; letter-spacing:-.015em;
  margin:0 0 .45em;
}
.hero__lead{
  font-size:clamp(1rem, 1.5vw, 1.2rem); max-width:44ch;
  color:rgba(251,248,243,.88); margin:0 0 2.4em;
}

/* ── 02 modes ── */
.panel--modes{ background:var(--cream) }
.modes{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(40px,7vw,130px); max-width:none }
.mode__icon{ width:40px; height:40px; color:var(--olive); margin-bottom:22px }
.mode h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.5vw,2.15rem); margin:0 0 .5em }
.mode p{ margin:0; color:var(--ink-soft); max-width:38ch; font-size:1.02rem }
.mode__meta{
  margin-top:1.25em !important;
  padding-top:1.1em;
  border-top:1px solid var(--line);
  font-size:.74rem !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted) !important;
}

/* ── 03 metaphor ── */
.panel--path{ width:96vw; color:var(--cream) }
.quote{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.35rem, 2.2vw, 3.2rem);
  line-height:1.42; max-width:24ch; margin:0 auto 1.1em;
}
.quote--last{ margin-bottom:0; font-style:normal; max-width:28ch }

/* ── 04 process ── */
.panel--process{ width:112vw; background:var(--sand) }
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,64px);
}
.step{ border-top:1px solid var(--line); padding-top:26px }
.step__n{ font-family:var(--serif); font-size:1.5rem; color:var(--clay); display:block; margin-bottom:14px }
.step h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,1.3vw,1.9rem); margin:0 0 .5em }
.step p{ margin:0; color:var(--ink-soft); font-size:clamp(.95rem,.75vw,1.12rem); max-width:44ch }

/* ── 05 / 07 split ── */
.panel--about{ width:94vw; background:var(--cream) }
.panel--off{ width:94vw; background:var(--sand) }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(34px,5vw,92px); align-items:center; height:100% }
.split--flip .split__img{ order:2 }
.split__img{ margin:0; height:100%; overflow:hidden; background:var(--sand-dk) }
.split__img img{ width:100%; height:100%; object-fit:cover }
.split__txt p{ color:var(--ink-soft); margin:0 0 1.2em; max-width:56ch; font-size:1.04rem }
.split__txt p:last-child{ margin-bottom:0 }

/* ── 06 credentials ── */
.panel--cv{ width:124vw; background:var(--cream) }
.cv{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(20px,2.4vw,40px);
}
.cv__item{ border-top:1px solid var(--line); padding-top:26px }
.cv__tag{
  display:block; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay); margin-bottom:14px;
}
.cv__item h3{ font-family:var(--serif); font-weight:400; font-size:1.42rem; line-height:1.28; margin:0 0 .5em }
.cv__item p{ margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.68 }

/* ── 08 cta ── */
.panel--cta{ width:90vw; background:var(--ink); color:var(--cream) }
.panel--cta .btn{ border-color:rgba(251,248,243,.6); color:var(--cream) }
.panel--cta .btn::after{ background:var(--cream) }
.panel--cta .btn:hover{ color:var(--ink) }
.cta__h{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.4vw,4.6rem); line-height:1.18; margin:0 0 .5em }
.cta__p{ color:rgba(251,248,243,.75); margin:0 0 2.6em; font-size:1.05rem }
.cta__actions{ display:flex; flex-direction:column; align-items:center; gap:clamp(46px,7vh,86px) }
.cta__tel{
  text-decoration:none;
  font-family:var(--sans);
  font-variant-numeric:lining-nums tabular-nums;
  font-size:clamp(1.15rem,1.5vw,1.7rem);
  font-weight:300;
  letter-spacing:.06em;
  color:var(--cream);
  border-bottom:1px solid rgba(251,248,243,.32);
  padding-bottom:4px;
  transition:border-color .4s var(--ease);
}
.cta__tel:hover{ border-color:var(--cream) }
.cta__tel:hover{ color:var(--cream) }
/* The meta line used to sit centred, directly between the seam and the
   number — which is exactly where the thread has to travel. Moved to the
   opposite corner from the signature, so the line gets a clear run. */
.cta__foot{
  position:absolute;
  left:var(--pad);
  bottom:clamp(48px,9vh,112px);
  margin:0;
  text-align:left;
  font-size:.8rem;
  color:rgba(251,248,243,.5);
}

/* Her name, where the line finally comes to rest. Mynerve is the one
   Google script face that carries Greek — everything else falls back to
   a serif, which would defeat the point. */
.sig{
  position:absolute;
  right:clamp(24px,5vw,110px);
  bottom:clamp(44px,8vh,104px);
  z-index:2;
  width:clamp(300px,30vw,620px);
  pointer-events:none;
}
.sig__ink{ display:block; width:100%; aspect-ratio:1207/364; overflow:visible }

/* Weight is what separates writing from a wobble. Widths are in viewBox
   units — no non-scaling-stroke here, because this box keeps its aspect,
   so the contrast holds at any size. */
.sig__s{
  fill:none;
  stroke:var(--cream);
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.94;
}
/* The wipe lives inside a mask, so it is pure white and wide enough to
   clear the artwork's full height. It is never seen — only its effect. */
.mthread{ display:none }
.mend{ display:none }
.mtail{ display:none }

/* Whoever built it, quietly. */
.btech{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:1.5em;
  text-decoration:none;
  opacity:.42;
  transition:opacity .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease);
}
.btech img{ height:19px; width:auto; display:block }
.btech span{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(251,248,243,.75); white-space:nowrap;
  /* body line-height is 1.75, so the span box was far taller than its text and
     centring aligned the boxes, not the words */
  line-height:1;
  padding-top:.12em;      /* optical: caps sit high in their box */
}
.btech:hover,
.btech:focus-visible{
  opacity:1;
  transform:translateY(-1px);
  filter:drop-shadow(0 0 9px rgba(167,89,245,.6)) drop-shadow(0 0 22px rgba(167,89,245,.32));
}

.sig__wipe{
  fill:none;
  stroke:#fff;
  stroke-width:660;
  stroke-linecap:butt;
  opacity:1;
}

/* Printed underneath, the way a signature block names what was signed.
   Revealed by a wipe rather than a fade, so it reads as being written. */
.sig__name{
  display:block;
  margin-top:.35em;
  padding-left:6%;
  font-family:"Mynerve","Segoe Script",cursive;
  font-size:clamp(.92rem,1.15vw,1.35rem);
  letter-spacing:.02em;
  color:rgba(251,248,243,.62);
  white-space:nowrap;
  clip-path:inset(0 calc(100% - var(--wipe,0%)) 0 0);
}
.cta__foot p{ margin:.3em 0 }

/* ═══════════ PROGRESS + CUE ═══════════ */
.prog{
  position:absolute; left:var(--pad); right:var(--pad); bottom:26px; z-index:20;
  height:1px; background:rgba(138,133,122,.28);
}
.prog i{
  display:block; height:100%; width:0%;
  background:var(--clay); transform-origin:left;
  transition:width .12s linear, background .5s var(--ease);
}
.prog{ transition:background .5s var(--ease) }
.prog.is-light{ background:rgba(251,248,243,.25) }
.prog.is-light i{ background:var(--cream) }

.cue{
  position:absolute; left:50%; bottom:46px; translate:-50% 0; z-index:20;
  display:flex; align-items:center; gap:12px;
  color:rgba(251,248,243,.72);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  transition:opacity .5s var(--ease);
}
.cue i{ display:block; width:46px; height:1px; background:currentColor; transform-origin:left; animation:slide 2.4s var(--ease) infinite }
.cue.is-gone{ opacity:0; pointer-events:none }
@keyframes slide{
  0%{ transform:scaleX(0); opacity:0 }
  35%{ transform:scaleX(1); opacity:1 }
  75%{ transform:scaleX(1); opacity:1 }
  100%{ transform:scaleX(1) translateX(46px); opacity:0 }
}

/* ═══════════ REVEAL ═══════════ */
.rv{ opacity:0; transform:translateX(34px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.rv.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none }
  .cue i{ animation:none }
  [data-drift]{ transform:none !important }
}

/* ═══════════════════════════════════════════════
   PHONE / TABLET — unwind to a vertical page
   ═══════════════════════════════════════════════ */
@media (max-width:900px){
  /* the horizontal gestures are meaningless stacked vertically */
  .ink{ display:none }

  .mthread{
    display:block;
    position:absolute; inset:0;
    width:100%;                 /* reaches centred content too */
    height:100%;
    z-index:40;
    pointer-events:none;
    overflow:visible;
  }
  /* It passes over type on its wider swings, so it stays light and thin —
     present, but never competing with the reading. */
  .mthread path{
    fill:none;
    stroke:url(#mgrad);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    opacity:.62;
  }
  .mnodes circle{
    fill:var(--clay);
    opacity:0;
    transition:opacity .55s var(--ease);
  }
  .mnodes circle.is-on{ opacity:.85 }

  /* was padding-left only, which pushed 07 and 08 off centre */

  /* The last chapter pins while the tail below it scrolls, which is the room
     the ending needs: come in from the left, circle the number, sign. */
  .panel.panel--cta{
    position:sticky; top:0;
    height:100svh;
    padding-block:84px clamp(96px,15vh,140px);
  }
  /* The pinned chapter is 100svh, but once the browser bar slides away the
     screen is taller than that and the cream page showed through beneath
     it. Keep everything under the ending dark, overscroll bounce included. */
  .mtail{ display:block; height:135svh; background:var(--ink) }
  html{ background:var(--ink) }
  /* safety net: nothing may widen the page sideways (clip, unlike hidden,
     does not create a scroller, so the sticky ending still pins) */
  main{ overflow-x:clip }

  .mend{
    display:block;
    position:absolute; inset:0;
    width:100%; height:100%;
    z-index:1;
    pointer-events:none; overflow:visible;
  }
  .mend path{
    fill:none;
    stroke:var(--cream);
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    opacity:.85;
  }

  .btech{ margin-top:1.2em }
  .btech img{ height:17px }
  .btech span{ font-size:.58rem; letter-spacing:.13em }
  /* the chapter numeral was sitting under the credit */
  .panel--cta .ghost{ bottom:auto; top:clamp(88px,13vh,130px); opacity:.06 }

  /* Panels are flex rows by default, so the signature was landing BESIDE
     the body instead of under it. Stack this one, and lift the meta line out
     of the flow so it cannot come between the number and the signature. */
  /* .panel and .panel--cta have equal specificity and the .panel
     padding-block shorthand is declared later, so it was silently winning.
     Doubling the class outranks it. */
  .panel.panel--cta{
    flex-direction:column;
    align-items:stretch;
    padding-bottom:clamp(150px,23vh,210px);
  }
  /* panel__body is position:relative, so it was catching the absolutely
     positioned meta line. Make it static and the meta resolves against the
     panel itself, landing under the signature. */
  .panel--cta .panel__body{ height:auto; position:static }
  .panel--cta .cta__foot{
    position:absolute;
    left:var(--pad); right:var(--pad);
    bottom:clamp(30px,5vh,52px);
    margin:0;
    text-align:center;
  }

  .track{ height:auto !important }
  .track__sticky{ position:static; height:auto; overflow:visible }
  .rail{ display:block; height:auto; transform:none !important }

  .panel{
    width:100% !important; height:auto;
    min-height:auto;
    padding-block:clamp(72px,13vw,120px);
    align-items:stretch;
  }
  .panel--hero{
    min-height:96svh;
    display:flex; align-items:flex-end;
    padding-bottom:clamp(80px,14vh,130px);
  }

  .modes{ grid-template-columns:1fr; gap:44px }
  .steps{ grid-template-columns:1fr; gap:0 }
  .step{ padding-block:26px 30px }
  .cv{ grid-template-columns:1fr; gap:0 }
  .cv__item{ padding-block:24px 28px }

  .split{ grid-template-columns:1fr; gap:30px }
  .split--flip .split__img{ order:0 }
  .split__img{ aspect-ratio:3/4; max-height:none }

  .rv{ transform:translateY(26px) }

  /* the thread reads vertically now — let each panel's ink
     stretch to the panel's real height and soften it */
  .ink{ opacity:.75 }
  .facts{ grid-template-columns:1fr; gap:0; max-width:none }
  .facts > div{ padding-block:18px 20px }
  .ghost{
    font-size:clamp(4.5rem,20vw,7rem);
    top:auto; bottom:clamp(24px,5vh,54px);
    right:clamp(14px,4vw,30px);
    opacity:.05;
  }
  .ghost--light{ opacity:.11 }
  .panel--hero .ghost{ top:auto; bottom:clamp(120px,20vh,180px) }

  .grain{ position:fixed; opacity:.3 }
  .prog{ display:none }
  .cue{ bottom:28px }

  /* mobile drawer */
  .burger{ display:flex }
  .nav__links{
    position:fixed; inset:0; background:var(--cream);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:6px; padding:0 var(--pad); margin:0;
    clip-path:circle(0% at calc(100% - 40px) 40px);
    transition:clip-path .65s var(--ease);
    pointer-events:none;
  }
  .nav.is-open .nav__links{ clip-path:circle(150% at calc(100% - 40px) 40px); pointer-events:auto }
  .nav__links a{
    color:var(--ink); font-family:var(--serif); font-size:2rem; padding-block:10px;
    opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav.is-open .nav__links a{ opacity:1; transform:none }
  .nav.is-open .nav__links a:nth-child(1){ transition-delay:.16s }
  .nav.is-open .nav__links a:nth-child(2){ transition-delay:.22s }
  .nav.is-open .nav__links a:nth-child(3){ transition-delay:.28s }
  .nav.is-open .nav__links a:nth-child(4){ transition-delay:.34s }
  .nav.is-open .nav__links a:nth-child(5){ transition-delay:.40s }
  .nav__links a:not(.btn)::after{ display:none }
  .nav__links .btn{ font-family:var(--sans); font-size:.8rem; border-color:var(--ink); margin-top:22px }
  .nav__links .btn::after{ background:var(--ink) }
  .nav__links .btn:hover{ color:var(--cream) }
}

@media (max-width:420px){
  .nav__name{ display:none }
  .nav__links a{ font-size:1.7rem }
}

/* Sparse panels: pull the thread band up under the content instead of
   leaving a dead strip. Scaling the ink box keeps the geometry — line,
   nodes and stems — internally consistent. */
/* Every ink box stays full height so a given viewBox y means the same
   screen height on every panel — that is what keeps the seams flush. */

/* The steps ride the wave rather than sitting in a row, so the vertical
   space between copy and line becomes composition instead of a void.
   Each stem is cut to reach its own card. */
.panel--process .step:nth-child(2){ margin-top:13vh }
.panel--process .step:nth-child(3){ margin-top:4vh }
/* The straddle is gone: it needed the line mid-panel, which would have
   put this chapter's seam out of line with every other one. */
.panel--cv .cv{ align-items:start }

/* Wide screens: keep growing rather than stranding content in margins. */
@media (min-width:1900px){
  body{ font-size:19px }
  .eyebrow{ font-size:.82rem }
  .mode p{ font-size:1.2rem }
  .cv__item h3{ font-size:1.72rem }
  .cv__item p{ font-size:1.1rem }
  .facts dt{ font-size:1.6rem }
  .split__txt p{ font-size:1.22rem }
  .hero__lead{ font-size:1.45rem }
}

/* Phones stack vertically, so the desktop wave/straddle offsets and the
   scaled ink boxes would inject huge gaps. Neutralise them. */
@media (max-width:900px){
  .panel--process .steps,
  .panel--cv .cv{ align-self:auto; margin-top:0 }
  .panel--cv .cv{ align-items:stretch }
  /* stems only mean something against a horizontal timeline */
  .stems, .ticks{ display:none }
  .panel--process .step:nth-child(2),
  .panel--process .step:nth-child(3),
  .panel--cv .cv__item{ margin-top:0; margin-bottom:0 }
}

@media (max-width:900px){
  .sig{
    position:static;
    width:min(78vw,340px);
    margin:clamp(36px,7vh,64px) auto 0;
  }
  .sig__name{ text-align:center }
}

@media (max-width:900px){
  .cta__foot{ position:static; text-align:center; margin-top:clamp(40px,7vh,72px) }
  .cta__actions{ gap:clamp(26px,4vh,40px) }
}