/* ══════════════════════════════════════════════════════════════
   TAMINA CAMPUS
   ── 0 tokens · 1 base · 2 type · 3 chrome · 4 motion primitives
   ── 5 hero · 6 time · 7 idea · 8 campus · 9 places
   ── 10 design · 11 closer look · 12 moments · 13 foot
   ══════════════════════════════════════════════════════════════ */

/* ─── 0 · tokens ─────────────────────────────────────────────── */
:root{
  --paper:#FFFFFF;
  --mist:#F5F5F7;
  --sand:#EFEDE9;
  --ink:#14161A;
  --soft:#63676E;
  --faint:#93989F;
  --line:#E6E6E9;
  --hair:#EFEFF2;
  --night:#08090B;
  --accent:#B0603A;

  /* Switzer — a quiet, optically even grotesk. Set light and open, never
     black and tight; the weight does the talking on Apple's pages, and
     it is always 500–600, not 900.                                    */
  --sans:"Switzer",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --serif:"Sentient","Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;

  --pad:clamp(22px,5.4vw,84px);
  --maxw:1240px;
  --nav:58px;
  --rhythm:clamp(112px,17vh,220px);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-draw:cubic-bezier(.62,0,.24,1);
  --ease-mask:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.12,.36,1);
}

/* ─── 1 · base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
figure{margin:0}
svg.defs{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:rgba(20,22,26,.10)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.chapter{position:relative;scroll-margin-top:calc(var(--nav) + 10px)}

/* ─── 2 · type ───────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.021em;line-height:1.06}
p{margin:0 0 1.1em;color:var(--soft);font-weight:400}
p:last-child{margin-bottom:0}

.eyebrow{
  font-size:.74rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin:0 0 clamp(22px,3.2vw,34px);
}
.eyebrow.light{color:rgba(255,255,255,.46)}

.display{
  font-size:clamp(2.05rem,5.3vw,4.05rem);font-weight:600;
  letter-spacing:-.023em;line-height:1.07;max-width:19ch;
}
.display.xl{font-size:clamp(2.4rem,7vw,5.4rem);letter-spacing:-.026em;line-height:1.05;max-width:16ch}
.display.light{color:#fff}

.lead{
  color:var(--soft);font-weight:400;
  font-size:clamp(1.08rem,1.6vw,1.35rem);line-height:1.52;letter-spacing:-.004em;
  max-width:38ch;
}

/* ─── 3 · chrome ─────────────────────────────────────────────────
   A floating island, not a bar. It carries the mark and the name of
   whatever chapter you are standing in; its width is set in JS from
   the label's measured width, so it grows and shrinks like a pill
   rather than snapping.                                           */
.scrollbar{position:fixed;inset:0 0 auto 0;height:2px;z-index:80;pointer-events:none}
.scrollbar i{
  display:block;height:100%;width:100%;background:var(--ink);opacity:.7;
  transform:scaleX(0);transform-origin:0 50%;
}

.chrome{
  position:fixed;inset:12px 0 auto 0;z-index:70;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding-inline:var(--pad);
}

.island{
  pointer-events:auto;position:relative;display:flex;align-items:center;
  height:46px;border-radius:23px;overflow:hidden;
  width:var(--iw,200px);max-width:calc(100vw - var(--pad) * 2);
  background:rgba(248,248,250,.72);color:var(--ink);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  box-shadow:0 1px 2px rgba(20,22,26,.05),0 14px 36px -16px rgba(20,22,26,.3),
             inset 0 0 0 .5px rgba(255,255,255,.6);
  /* centred on screen at every width; the spring carries the change */
  opacity:0;
  transform:translate3d(0,var(--iy,-14px),0) scale(var(--is,.94));
  transition:width .58s var(--spring),transform .58s var(--spring),
             opacity .6s var(--ease-soft),
             background .5s var(--ease-soft),box-shadow .55s var(--ease-soft);
}
.chrome.on .island{opacity:1;--iy:0px;--is:1}
.island:hover{background:rgba(248,248,250,.88)}
.island.open{
  background:rgba(250,250,251,.92);
  box-shadow:0 2px 6px rgba(20,22,26,.05),0 22px 52px -20px rgba(20,22,26,.32),
             inset 0 0 0 .5px rgba(255,255,255,.66);
}
.island.morph .island__toggle{animation:islandBreath .58s var(--spring)}
@keyframes islandBreath{0%{transform:scale(1)}36%{transform:scale(1.026)}100%{transform:scale(1)}}

/* the mark, then where you are. Nothing else. */
.island__toggle{
  appearance:none;border:0;background:none;padding:0 16px 0 9px;cursor:pointer;
  flex:none;display:flex;align-items:center;gap:11px;height:100%;color:inherit;
}
.island__slot{width:30px;height:30px;flex:none;display:block}
/* The label is sized to the exact width of the line it is showing and
   never animates that width itself — otherwise the pill would measure
   a value still in flight. Only the pill animates.                 */
.island__label{
  position:relative;height:22px;overflow:visible;flex:none;
  width:var(--lw,120px);
}
.island__txt{
  position:absolute;left:0;top:0;white-space:nowrap;width:max-content;
  font-size:.82rem;font-weight:500;letter-spacing:-.008em;line-height:22px;
  opacity:0;transform:translateY(112%);filter:blur(2.5px);
  transition:opacity .3s var(--ease-soft),transform .58s var(--ease),filter .3s var(--ease-soft);
}
.island__txt.is-on{opacity:1;transform:none;filter:none;transition-delay:.08s}
.island__txt.is-out{opacity:0;transform:translateY(-112%);filter:blur(2.5px);transition-delay:0s}

/* the one thing the island ever opens for */
.island__contact{
  flex:none;display:inline-flex;align-items:center;height:100%;
  padding:0 19px 0 17px;white-space:nowrap;
  font-size:.8rem;font-weight:500;letter-spacing:-.008em;color:var(--ink);
  box-shadow:inset 1px 0 0 rgba(20,22,26,.09);
  opacity:0;transform:translateX(-8px);
  transition:opacity .32s var(--ease-soft),transform .5s var(--ease),
             background .35s var(--ease-soft),color .35s var(--ease-soft);
}
.island.open .island__contact{opacity:1;transform:none;transition-delay:.12s}
.island__contact:hover{background:var(--ink);color:#fff}

/* cinema mode — the island stays (it is the only chrome that earns its
   place) but turns dark for the sequence; everything else steps away */
body.cinema .island{
  background:rgba(18,20,24,.5);color:#fff;
  box-shadow:0 12px 32px -14px rgba(0,0,0,.5),inset 0 0 0 .5px rgba(255,255,255,.16);
}
body.cinema .island:hover{background:rgba(18,20,24,.72)}
body.cinema 
body.cinema 
body.cinema 
body.cinema 
body.cinema 
body.cinema .island__contact{color:#fff;box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
body.cinema .island__contact:hover{background:#fff;color:var(--ink)}
body.cinema .flyer{color:#fff}
body.cinema .scrollbar i{background:#fff;opacity:.5}

@media(max-width:560px){
  .chrome{padding-inline:14px}
  .island{max-width:calc(100vw - 116px)}
  
.island.open 
.island.open 
.island.open 

}

/* ─── the mark ───────────────────────────────────────────────────
   Drawn the way it was designed: the cross is set out, the circle is
   struck with a compass, then the garden line is traced in one
   continuous stroke. Afterwards the same element flies into the bar.
   Every stroke width is divided by the live flight scale, so the mark
   keeps one optical weight from 150px down to 30px.               */
/* The mark is SIZED, never scaled. Safari rasterises a transformed
   layer once at its pre-transform size, so scale(5) on a 30px SVG
   renders 30px of detail blown up — visibly soft. Setting width and
   height instead makes it re-render sharp at every step of the flight. */
.flyer{
  position:fixed;left:0;top:0;z-index:72;
  width:var(--fw,30px);height:var(--fw,30px);
  transform-origin:0 0;pointer-events:none;
  --fs:1;--fp:1;
  transform:translate3d(var(--fx,0px),var(--fy,0px),0);
  color:#fff;
}
.flyer.dark{color:var(--ink)}
body.is-loading .flyer{opacity:0}
.mk{width:100%;height:100%;overflow:visible;display:block;transform-box:view-box}
/* Stroke widths and radii are written by JS in user units, not by CSS
   calc(): Safari does not reliably resolve a unitless calc() against a
   custom property for stroke-width, and geometry properties like r
   need a real length. Attributes and inline styles work everywhere. */
.mk__ring,.mk__glass{
  fill:none;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round;
}
.mk__ring{
  opacity:.62;transform:rotate(-90deg);transform-box:view-box;transform-origin:200px 200px;
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.mk__glass{stroke-dasharray:1000;stroke-dashoffset:1000}

/* construction — only ever visible during the opening */
.mk__con line,.mk__arm{stroke:currentColor;fill:none;stroke-linecap:round}
.mk__con{opacity:0}
.mk__arm{opacity:0;transform-box:view-box;transform-origin:200px 200px}
.mk__pivot,.mk__pen{fill:currentColor;opacity:0}


body.ready .mk__con  {animation:mkCon 2.55s .10s var(--ease-soft) forwards}
body.ready .mk__pivot{animation:mkPivot 2.50s .16s var(--ease-soft) forwards}
body.ready .mk__arm  {animation:mkArm 1.10s .34s var(--ease-draw) forwards}
body.ready .mk__ring {animation:mkDraw 1.10s .34s var(--ease-draw) forwards}
body.ready .mk__glass{animation:mkDraw 1.55s 1.24s var(--ease-draw) forwards}
body.ready .mk       {animation:mkSettle 1.2s 2.42s var(--ease) both}

@keyframes mkDraw{to{stroke-dashoffset:0}}
@keyframes mkCon{0%{opacity:0}14%{opacity:.34}72%{opacity:.34}100%{opacity:0}}
@keyframes mkPivot{0%{opacity:0}14%{opacity:.6}76%{opacity:.6}100%{opacity:0}}
@keyframes mkArm{0%{opacity:0;transform:rotate(0deg)}12%{opacity:.4}
  84%{opacity:.4}100%{opacity:0;transform:rotate(360deg)}}
  9%{opacity:.85}
  86%{opacity:.85}
  100%{opacity:0;offset-distance:100%}
}
@keyframes mkSettle{from{transform:scale(1.03)}to{transform:scale(1)}}

/* ─── 4 · motion primitives ──────────────────────────────────────
   Every "hidden until revealed" state is scoped to .js, so if the
   script never arrives the page still reads as a finished document
   rather than a blank one.                                        */
.js [data-reveal]{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .95s var(--ease) var(--d,0s),transform 1.05s var(--ease) var(--d,0s);
}
.js [data-reveal].in{opacity:1;transform:none}

/* masked line reveal */
.line{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.js .line>span{display:block;transform:translate3d(0,110%,0)}
body.ready .line>span{
  transition:transform 1.25s var(--ease-mask) var(--d,0s);
  transform:none;
}

/* word-split reveal (JS) */
.sp{display:inline-block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;vertical-align:top}
.js .sp>i{
  display:inline-block;font-style:inherit;transform:translate3d(0,105%,0);
  transition:transform 1.05s var(--ease-mask) var(--dw,0s);
}
.js [data-split].in .sp>i{transform:none}
/* when an element does both, the split wins */
.js [data-reveal][data-split]{opacity:1;transform:none;transition:none}

/* ─── 5 · hero ───────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  background:#0B0D10;isolation:isolate;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 54%}
.js .hero__bg img{
  transform:scale(1.08);opacity:0;
  transition:transform 2.6s var(--ease),opacity 1.6s var(--ease-soft);
}
body.ready .hero__bg img{transform:scale(1);opacity:1}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,8,11,.42) 0%,rgba(6,8,11,.06) 34%,rgba(6,8,11,.20) 68%,rgba(6,8,11,.62) 100%);
}

.hero__stage{
  position:relative;z-index:1;width:100%;height:100%;
  display:grid;place-items:center;padding:var(--nav) var(--pad);
}
.hero__slot{width:clamp(104px,13vw,168px);height:clamp(104px,13vw,168px);display:block}

.hero__cue{
  position:absolute;left:50%;bottom:max(24px,3vh);transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.58rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.6);opacity:0;
}
body.ready .hero__cue{animation:cuein 1s 2.9s var(--ease) forwards}
.hero__cue i{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:cuebob 2.8s 3.4s ease-in-out infinite}
@keyframes cuein{to{opacity:1}}
@keyframes cuebob{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.6);opacity:.5}}

/* ─── 6 · the beat between hero and idea ─────────────────────────
   This was a full-screen pinned stage holding a single line, which
   meant a whole empty screen either side of it. It is now a plain
   block sized to its own type, so The Idea follows straight on.   */
.creed{
  background:var(--paper);
  padding-block:clamp(76px,12.5vh,158px);   /* the same air on both sides */
  display:grid;place-items:center;padding-inline:var(--pad);
}
.creed__stage{display:contents}
.creed__in{
  max-width:min(1000px,92vw);text-align:center;
  transform:translate3d(0,var(--cy,0px),0) scale(var(--cz,1));
  will-change:transform;
}
.creed__h{
  font-size:clamp(2.5rem,7.4vw,5.8rem);font-weight:600;
  letter-spacing:-.028em;line-height:1.03;margin:0;
}
/* the title does not merely slide in: each word lifts, sharpens and
   settles, so the phrase resolves rather than arrives                */
.creed__h .sp,.creed__sub .sp{overflow:visible;padding:0;margin:0}
/* Each word is resolved by scroll position, not by a one-shot
   transition — so the phrase assembles as you move, instead of
   simply being there by the time you arrive.                    */
.creed__h .sp>i,.creed__sub .sp>i{
  transform:translate3d(0,.42em,0) scale(1.06);
  opacity:0;filter:blur(14px);transform-origin:50% 100%;
  will-change:transform,opacity,filter;
}
/* no-JS fallback */
html:not(.js) .creed__h .sp>i,html:not(.js) .creed__sub .sp>i{
  transform:none;opacity:1;filter:none;
}
.creed__sub{
  margin:clamp(22px,3.4vh,38px) 0 0;color:var(--soft);
  font-size:clamp(1.02rem,1.9vw,1.45rem);line-height:1.4;letter-spacing:-.008em;
}
.creed__sub .sp>i{transform:translate3d(0,.5em,0) scale(1.03);filter:blur(9px)}

/* ─── 7 · the idea ───────────────────────────────────────────── */
.idea{background:var(--paper)}
.idea__track{position:relative;height:500vh}
.idea__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(26px,5vh,64px);padding:calc(var(--nav) + 3vh) var(--pad) 6vh;
}
.idea__art{
  position:relative;
  width:min(60vmin,500px);height:min(60vmin,500px);flex:none;
  transform:scale(var(--artScale,1)) translateY(var(--artY,0px));
}
/* the plan is cropped so the building's outer edge lands exactly on the
   drawn circle (r150 of a 400 box = 75%), so the mask can open on it     */
.idea__plan{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:var(--planO,0);
  clip-path:circle(var(--planR,0%) at 50% 50%);
  transform:scale(var(--planS,1.06));
  will-change:clip-path,opacity,transform;
}
.idea__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.idea__ring{
  fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-dasharray:1000;stroke-dashoffset:calc(1000 - 1000 * var(--ringP,0));
  opacity:var(--lineO,1);
}
.idea__glass{
  fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:calc(1000 - 1000 * var(--glassP,0));
  opacity:var(--lineO,1);
}
.idea__waist{fill:var(--accent);opacity:var(--waistO,0)}
/* The statement leads and the drawing answers underneath — but until
   the drawing exists the line sits alone above a blank half-screen.
   So it starts centred and lifts to make room as the circle appears. */
.idea__lines{
  order:-1;position:relative;display:grid;place-items:center;width:100%;
  min-height:clamp(74px,13vh,150px);pointer-events:none;
  transform:translate3d(0,var(--lineDrop,0px),0);
}
.idea__line{
  grid-area:1/1;margin:0;text-align:center;max-width:20ch;
  font-size:clamp(1.35rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.06;
  color:var(--ink);opacity:0;
  transform:translate3d(0,var(--ly,18px),0) scale(var(--lz,1));
  filter:blur(var(--lb,0px));
  will-change:opacity,transform,filter;
}
.idea__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:-1px}
.idea__coda{padding-block:clamp(70px,12vh,150px) clamp(20px,4vh,60px);display:flex;justify-content:center}
.pull{
  font-family:var(--serif);font-weight:400;letter-spacing:-.012em;
  font-size:clamp(1.4rem,3.1vw,2.4rem);line-height:1.22;color:var(--ink);
  max-width:22ch;text-align:center;margin:0;
}
@media(max-width:640px){
  .idea__track{height:430vh}
  .idea__art{width:min(84vmin,420px);height:min(84vmin,420px)}
}

/* ─── 7b · the mark, read six ways ───────────────────────────── */
.idea__more{display:flex;justify-content:center;padding-block:clamp(30px,6vh,70px) clamp(70px,12vh,150px)}
.readmark{
  appearance:none;border:0;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:12px 14px 12px 12px;border-radius:999px;background:var(--mist);color:var(--ink);
  transition:background .45s var(--ease),transform .5s var(--spring),box-shadow .5s var(--ease);
}
.readmark:hover{background:#EDEDF0;box-shadow:0 14px 34px -20px rgba(20,22,26,.4)}
.readmark:active{transform:scale(.985)}
.readmark__mark{width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--paper)}
.readmark__mark svg{width:22px;height:22px;overflow:visible}
.readmark__mark use{fill:none;stroke:var(--ink);stroke-width:16;stroke-linejoin:round}
.readmark__mark use:first-child{opacity:.42}
.readmark__txt{display:flex;flex-direction:column;gap:2px;text-align:left}
.readmark__txt b{font-size:.94rem;font-weight:500;letter-spacing:-.012em}
.readmark__txt em{font-style:normal;font-size:.8rem;color:var(--soft)}
.readmark__go{
  position:relative;width:26px;height:26px;border-radius:50%;flex:none;
  background:rgba(20,22,26,.07);transition:background .4s var(--ease),transform .5s var(--spring);
}
.readmark__go::before{
  content:"";position:absolute;left:47%;top:50%;width:6px;height:6px;
  border-top:1.4px solid currentColor;border-right:1.4px solid currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.readmark:hover .readmark__go{background:var(--ink);color:#fff;transform:translateX(2px)}

/* the reading itself — its own quiet room */
.reader{
  position:fixed;inset:0;z-index:96;background:var(--paper);
  opacity:0;transition:opacity .5s var(--ease-soft);
}
.reader[hidden]{display:none}
.reader.open{opacity:1}
.reader__scroll{
  height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transform:translateY(16px);transition:transform .8s var(--ease);
}
.reader.open .reader__scroll{transform:none}
.reader__close{
  position:fixed;right:clamp(16px,3vw,40px);top:clamp(16px,3vw,32px);z-index:3;
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(245,245,247,.86);color:var(--ink);display:grid;place-items:center;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:background .4s var(--ease),transform .4s var(--spring);
}
.reader__close:hover{background:var(--ink);color:#fff}
.reader__close:active{transform:scale(.93)}
.reader__close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

.reader__head{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(72px,14vh,150px) var(--pad) clamp(40px,7vh,90px);
  text-align:center;
}
.reader__mark{width:clamp(58px,7vw,88px);height:auto;margin:0 auto clamp(34px,5vh,56px);overflow:visible}
.reader__mark use{fill:none;stroke:var(--ink);stroke-width:6;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000}
.reader.open .reader__mark use{animation:rdraw 1.5s .18s var(--ease-draw) forwards}
.reader.open .reader__mark use:last-child{animation-duration:1.9s;animation-delay:.5s}
@keyframes rdraw{to{stroke-dashoffset:0}}
.reader__mark use:first-child{opacity:.4}
.reader__head h2{
  font-size:clamp(1.9rem,5vw,3.6rem);font-weight:600;letter-spacing:-.024em;line-height:1.08;
}
.reader__head h2 em{display:block;font-style:italic;font-family:var(--serif);font-weight:400}
.reader__head p{margin:clamp(20px,3vh,30px) auto 0;max-width:44ch;color:var(--soft)}

.reader__body{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);
}
.reader__fig{position:sticky;top:0;height:100svh;display:grid;place-items:center;align-self:start}
.rmark{width:min(74%,380px);height:auto;overflow:visible}
.rmark__con line{stroke:var(--faint);stroke-width:.7;stroke-dasharray:3 5;opacity:.5;
  transition:opacity .7s var(--ease-soft)}
.rmark__ring{fill:none;stroke:var(--ink);stroke-width:2;opacity:.16;
  transition:opacity .8s var(--ease-soft),stroke-width .8s var(--ease)}
.rmark__glass{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linejoin:round;
  transition:opacity .8s var(--ease-soft)}

/* the two chambers, filled one at a time */
.rmark__cham{fill:var(--accent);stroke:none;fill-opacity:0;
  transition:fill-opacity .95s var(--ease-soft)}
.rmark__cham--lo{transition-delay:.28s}

.rmark__waist{opacity:0;transition:opacity .7s var(--ease-soft)}
.rmark__waist circle{fill:var(--accent)}
.rmark__halo{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.5}

/* the sand, travelling the line it never leaves */
.rmark__flow{fill:none;stroke:var(--accent);stroke-width:4.4;stroke-linecap:round;
  stroke-dasharray:58 942;opacity:0;transition:opacity .6s var(--ease-soft)}

.rmark[data-step="2"] .rmark__waist{opacity:1}
.rmark[data-step="2"] .rmark__halo{animation:rhalo 2.6s var(--ease-soft) infinite}
.rmark[data-step="3"] .rmark__cham{fill-opacity:.17}
.rmark[data-step="3"] .rmark__waist{opacity:1}
.rmark[data-step="4"] .rmark__cham--up{fill-opacity:.05}
.rmark[data-step="4"] .rmark__cham--lo{fill-opacity:.17}
.rmark[data-step="4"] .rmark__flow{opacity:1;animation:rflow 3.6s linear infinite}
.rmark[data-step="4"] .rmark__waist{opacity:1}
.rmark[data-step="5"] .rmark__ring{opacity:1;stroke-width:2.8}
.rmark[data-step="5"] .rmark__glass{opacity:.32}
.rmark[data-step="5"] .rmark__con line{opacity:0}
.rmark[data-step="6"] .rmark__ring{opacity:1;stroke-width:3.4}
.rmark[data-step="6"] .rmark__cham{fill-opacity:.14}
.rmark[data-step="6"] .rmark__waist{opacity:1}
.rmark[data-step="6"] .rmark__con line{opacity:0}
@keyframes rhalo{0%{transform:scale(1);opacity:.5}55%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
@keyframes rflow{to{stroke-dashoffset:-1000}}
.rmark__halo{transform-box:view-box;transform-origin:200px 200px}

.reader__steps{padding-block:4vh}
.rstep{min-height:84svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(24px,5vh,60px)}
.rstep__k{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 18px}
.rstep h3{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.022em;
  line-height:1.1;margin-bottom:24px;max-width:16ch}
.rstep p{font-size:1.02rem;line-height:1.62;max-width:46ch}
.rstep p+p{margin-top:1.05em}
.rstep__say{
  margin-top:26px;padding-left:22px;border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.34;
  color:var(--ink)!important;
}
/* ─── the principle: two halves, one whole ───────────────────── */
.unity{
  max-width:var(--maxw);margin-inline:auto;text-align:center;
  padding:clamp(70px,12vh,150px) var(--pad) clamp(20px,4vh,50px);
}
.unity__k{
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 clamp(20px,3vh,30px);
}
.unity__h{
  font-size:clamp(1.9rem,5vw,3.5rem);font-weight:600;letter-spacing:-.024em;line-height:1.06;
  margin:0 0 clamp(22px,3.4vh,34px);
}
.unity__lead{
  max-width:52ch;margin:0 auto;color:var(--soft);
  font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.56;
}

.ustage{margin-top:clamp(40px,7vh,80px)}
.usvg{width:min(74vw,340px);height:auto;margin-inline:auto;overflow:visible;display:block}
.usvg .uarm{
  fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.usvg .uhalf{fill:var(--accent);fill-opacity:.15;stroke:var(--ink);stroke-width:3.4;
  stroke-linejoin:round}
.usvg .ujoint{fill:var(--accent);opacity:0;transition:opacity .45s var(--ease-soft)}

.uctrl{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:clamp(30px,4.5vh,46px)}
.usr{font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
#uslider{
  appearance:none;-webkit-appearance:none;width:min(54vw,290px);height:2px;
  background:var(--line);border-radius:2px;outline:none;cursor:pointer;
}
#uslider::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);cursor:grab;
  box-shadow:0 1px 8px rgba(20,22,26,.2);
}
#uslider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--ink);cursor:grab;box-shadow:0 1px 8px rgba(20,22,26,.2);
}
#uslider:focus-visible{outline:2px solid var(--accent);outline-offset:7px}
.ucap{
  margin-top:24px;font-family:var(--serif);
  font-size:clamp(1.12rem,2.1vw,1.5rem);color:var(--ink);
}
.unity__say{
  margin:clamp(48px,7vh,80px) auto 0;max-width:26ch;
  font-family:var(--serif);font-size:clamp(1.2rem,2.3vw,1.6rem);line-height:1.32;
  color:var(--ink);
}

.reader__foot{
  max-width:var(--maxw);margin-inline:auto;text-align:center;
  padding:clamp(60px,10vh,130px) var(--pad) clamp(70px,12vh,150px);
}
.reader__foot p{
  font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.3;
  color:var(--ink);max-width:24ch;margin-inline:auto;
}
@media(max-width:880px){
  .reader__body{grid-template-columns:1fr;gap:0}
  .reader__fig{height:40svh;top:0;background:linear-gradient(var(--paper) 74%,rgba(255,255,255,0));
    z-index:2;padding-top:10px}
  .rmark{width:min(52%,220px)}
  .rstep{min-height:auto;padding-block:clamp(34px,7vh,64px)}
  .reader__steps{padding-block:0}
}

/* ─── 8 · the campus ─────────────────────────────────────────────
   The image is always full-bleed; what changes is the window cut
   into it. clip-path composites on the GPU, so the opening stays
   smooth where animating width/height would judder.            */
.campus{padding-block:var(--rhythm) 0}
.campus__intro{padding-bottom:clamp(40px,6vh,74px)}
.campus__intro .lead{margin-top:26px}

.grow{position:relative;height:300vh}
.grow__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.grow__frame{
  --ix0:7.5%;--iy0:13.5%;         /* the card at rest — large, not a thumbnail */
  position:absolute;inset:0;background:var(--paper);
  clip-path:inset(calc(var(--iy0) * var(--gk,1)) calc(var(--ix0) * var(--gk,1))
                  round calc(26px * var(--gk,1)));
  transform:translate3d(0,calc(46px * var(--gk,1)),0);
  will-change:clip-path,transform;
}
.grow__frame img{
  width:100%;height:100%;object-fit:cover;object-position:center 48%;
  transform:scale(calc(1 + .09 * var(--gk,1)));
  will-change:transform;
}
@media(max-width:760px){.grow__frame{--ix0:4.5%;--iy0:20%}}

/* ─── 9 · places with purpose ────────────────────────────────────
   Tall editorial cards on a rail. A card opens by growing from
   exactly where it sits to fill the screen (FLIP), so the image the
   eye was already on is the image that arrives.                  */
.places{background:var(--mist);padding-block:var(--rhythm)}
.places__intro{padding-bottom:clamp(30px,5vh,54px)}
.places__hint{
  margin:24px 0 0;font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--faint);
}

.prail{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-block:8px 4px;cursor:grab;
}
.prail::-webkit-scrollbar{display:none}
.prail.drag{cursor:grabbing;scroll-snap-type:none}
.ptrack{
  display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;
  padding-inline:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));
}

.pcard{
  position:relative;flex:none;scroll-snap-align:center;
  width:min(1240px,86vw);aspect-ratio:16/10;
  border:0;padding:0;background:none;color:inherit;cursor:pointer;text-align:left;
}
.js .pcard{
  opacity:0;transform:translate3d(0,34px,0);
  transition:opacity .9s var(--ease) calc(var(--n) * .07s),
             transform 1s var(--ease) calc(var(--n) * .07s);
}
.js .prail.in .pcard{opacity:1;transform:none}

.pbox{
  position:absolute;inset:0;overflow:hidden;background:#15161a;
  border-radius:clamp(16px,1.5vw,22px);
  transition:top .72s var(--ease),left .72s var(--ease),width .72s var(--ease),
             height .72s var(--ease),border-radius .72s var(--ease);
}
.pbox img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease-soft),transform 1.4s var(--ease);
}
.pbox img.on{opacity:1}
.pcard:hover .pbox img.on{transform:scale(1.045)}
.pbox__grad{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 34%,rgba(6,8,11,.16) 56%,rgba(6,8,11,.80) 100%);
}
.pbox__meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(20px,2.4vw,34px);color:#fff;display:flex;flex-direction:column;
}
.pbox__meta i{
  font-style:normal;font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:12px;
}
.pbox__meta b{
  font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:600;letter-spacing:-.018em;line-height:1.06;
}
.pbox__meta em{
  font-style:normal;margin-top:9px;font-size:clamp(.88rem,1.2vw,1rem);line-height:1.4;
  color:rgba(255,255,255,.82);max-width:30ch;
}
.pbox__plus{
  position:absolute;right:clamp(14px,1.6vw,20px);top:clamp(14px,1.6vw,20px);
  width:34px;height:34px;border-radius:50%;
  background:rgba(12,14,18,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transform:scale(.85);
  transition:opacity .45s var(--ease),transform .5s var(--ease),background .4s var(--ease);
}
.pbox__plus::before,.pbox__plus::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#fff;
  transform:translate(-50%,-50%);transition:transform .55s var(--ease),opacity .4s;
}
.pbox__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.pcard:hover .pbox__plus,.pcard:focus-visible .pbox__plus{opacity:1;transform:none}

/* dots for places that have a second view */
.pbox__dots{
  position:absolute;right:clamp(18px,2.4vw,34px);bottom:clamp(20px,2.4vw,34px);
  display:none;gap:7px;
}
.pbox__dots button{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.42);transition:background .4s var(--ease),width .4s var(--ease);
}
.pbox__dots button.on{background:#fff;width:22px;border-radius:999px}

/* open state */
.pveil{
  position:fixed;inset:0;z-index:88;background:rgba(6,7,9,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transition:opacity .6s var(--ease-soft);
}
.pveil[hidden]{display:none}
.pveil.on{opacity:1}
.pcard.open .pbox{position:fixed;z-index:92}
.pcard.open .pbox__plus{
  background:rgba(12,14,18,.55);opacity:1;transform:none;
  right:clamp(16px,2vw,26px);top:clamp(16px,2vw,26px);width:40px;height:40px;
}
.pcard.open .pbox__plus::after{opacity:0}
.pcard.open .pbox__plus::before{transform:translate(-50%,-50%) rotate(45deg)}
.pcard.open .pbox__plus{transform:rotate(90deg)}
.pcard.open .pbox__meta{padding:clamp(26px,4vw,64px)}
.pcard.open .pbox__meta i{margin-bottom:16px}
.pcard.open .pbox__meta b{font-size:clamp(1.8rem,4.4vw,3.4rem);letter-spacing:-.015em}
.pcard.open .pbox__meta em{font-size:clamp(1rem,1.7vw,1.35rem);margin-top:14px;max-width:34ch}
.pcard.open .pbox__grad{background:linear-gradient(transparent 42%,rgba(6,8,11,.14) 62%,rgba(6,8,11,.74) 100%)}
.pcard.open .pbox__dots{display:flex}
.pcard.open .pbox img.on{transform:none}
.pbox__meta i,.pbox__meta b,.pbox__meta em{
  transition:font-size .72s var(--ease),margin .72s var(--ease);
}

@media(max-width:760px){
  .pcard{width:88vw;aspect-ratio:4/5}
  .ptrack{padding-inline:var(--pad)}
  .pbox__meta{padding:clamp(18px,5vw,26px)}
}

/* ─── 10 · design with purpose ───────────────────────────────── */
.design{background:var(--paper);padding-block:var(--rhythm)}
.design__intro{padding-bottom:clamp(36px,6vh,66px)}
.design__intro .lead{margin-top:26px}

/* Drawings only. The row is the button: pressing it opens the
   description underneath the label — never at the foot of the card —
   and swaps the drawing on the right.                              */
.smart{
  --cr:clamp(22px,2.2vw,32px);--sp:clamp(16px,1.8vw,26px);
  background:var(--mist);border-radius:var(--cr);padding:var(--sp);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,36px);align-items:center;
}
.smart__list{display:flex;flex-direction:column;padding:clamp(4px,1vw,14px) 0;align-self:center}
.drow{border-bottom:1px solid rgba(20,22,26,.09)}
.drow:last-child{border-bottom:0}
.drow__btn{
  appearance:none;border:0;background:none;cursor:pointer;width:100%;text-align:left;
  display:flex;align-items:center;gap:14px;padding:clamp(13px,1.45vw,18px) 4px;
  color:var(--soft);transition:color .45s var(--ease-soft);
}
.drow__btn:hover{color:var(--ink)}
.drow.on .drow__btn{color:var(--ink)}
.drow__name{
  flex:1;font-size:clamp(.96rem,1.22vw,1.08rem);font-weight:500;letter-spacing:-.012em;
}
.drow__ico{
  position:relative;width:24px;height:24px;border-radius:50%;flex:none;
  background:rgba(20,22,26,.06);
  transition:background .5s var(--ease),transform .6s var(--ease);
}
.drow__ico::before,.drow__ico::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:1.3px;background:currentColor;
  border-radius:2px;transform:translate(-50%,-50%);
  transition:transform .6s var(--ease),opacity .45s var(--ease-soft);
}
.drow__ico::after{transform:translate(-50%,-50%) rotate(90deg)}
/* + turns to − : a half turn keeps the surviving bar horizontal */
.drow.on .drow__ico{background:var(--ink);color:#fff;transform:rotate(180deg)}
.drow.on .drow__ico::after{opacity:0}

.drow__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .66s var(--ease),opacity .45s var(--ease-soft);
  opacity:0;
}
.drow__body>div{overflow:hidden;min-height:0}
.drow.on .drow__body{grid-template-rows:1fr;opacity:1}
.drow__body p{
  margin:0;padding:0 12px clamp(14px,1.5vw,19px) 4px;
  font-size:clamp(.88rem,1.02vw,.96rem);line-height:1.5;color:var(--soft);
  max-width:none;text-wrap:pretty;
}

.smart__stage{
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:var(--paper);border-radius:calc(var(--cr) - var(--sp) + 6px);
  align-self:center;
}
.smart__slot{position:absolute;inset:0}
.smart__slot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(1.02);
  transition:opacity .8s var(--ease-soft),transform 1.4s var(--ease);
}
.smart__slot img.on{opacity:1;transform:none}

@media(max-width:900px){
  .smart{grid-template-columns:1fr;gap:0}
  .smart__stage{order:1;position:relative;top:auto;margin-bottom:8px}
  .smart__list{order:2}
}

/* ─── 11 · a closer look ─────────────────────────────────────── */
.look{background:var(--mist);padding-block:var(--rhythm)}
.look__intro{padding-bottom:clamp(34px,5vh,58px)}

.rail{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-block:10px;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail__track{
  display:flex;gap:clamp(14px,1.8vw,26px);width:max-content;
  padding-inline:max(var(--pad),calc((100vw - min(1100px,86vw)) / 2));
}
.slide{
  position:relative;flex:none;scroll-snap-align:center;
  width:min(1100px,86vw);aspect-ratio:16/9;
  border-radius:clamp(18px,1.8vw,26px);overflow:hidden;background:var(--sand);
  transform:scale(var(--ss,1));opacity:var(--so,1);
  transition:transform .1s linear,opacity .1s linear;
  will-change:transform,opacity;
}
.slide--p{width:min(560px,70vw);aspect-ratio:3/4}
.slide img{
  width:100%;height:100%;object-fit:cover;pointer-events:none;
  transform:scale(calc(1.06 - .06 * var(--sc,1)));
}
.slide figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(60px,9vw,120px) clamp(22px,3vw,40px) clamp(20px,2.6vw,34px);
  background:linear-gradient(transparent,rgba(6,8,11,.10) 34%,rgba(6,8,11,.72));
  color:#fff;display:flex;flex-direction:column;gap:6px;
  opacity:var(--sc,1);
}
.slide figcaption b{font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.017em}
.slide figcaption span{font-size:clamp(.86rem,1.3vw,1rem);color:rgba(255,255,255,.82);max-width:34ch}

.rail__ui{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(24px,3.4vw,40px)}
.rail__ui--end{justify-content:flex-end}
.dots{display:flex;align-items:center;gap:7px}
.dot{
  appearance:none;border:0;padding:0;cursor:pointer;height:7px;width:7px;border-radius:999px;
  background:rgba(20,22,26,.22);transition:width .55s var(--ease),background .45s var(--ease);
}
.dot.on{width:26px;background:var(--ink)}
.rail__btns{display:flex;gap:9px}
.circ{
  appearance:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:50%;
  background:rgba(20,22,26,.06);color:var(--ink);display:grid;place-items:center;font-size:1rem;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease),opacity .4s;
}
.circ:hover{background:var(--ink);color:#fff}
.circ:active{transform:scale(.94)}
.circ[disabled]{opacity:.28;pointer-events:none}
@media(max-width:760px){.rail__btns{display:none}.rail__ui{justify-content:center}}

/* ─── 12 · moments of life ───────────────────────────────────── */
.moments{background:var(--night);color:#fff}
.moments__open{padding-block:clamp(110px,20vh,240px) clamp(70px,12vh,140px)}
.moments__open .display{max-width:16ch}

.seq{position:relative;height:760vh}
.seq__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.seq__layers{position:absolute;inset:0}
.seq__l{
  position:absolute;inset:0;opacity:0;will-change:opacity,transform;
  transform:scale(var(--z,1.06));
}
.seq__l img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
/* the images run from snow to golden hour — the ramp has to carry
   white type over all of them without ever looking like a box */
.seq__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,5,7,.40) 0%,rgba(4,5,7,0) 22%,rgba(4,5,7,0) 33%,
                    rgba(4,5,7,.30) 55%,rgba(4,5,7,.66) 78%,rgba(4,5,7,.90) 100%);
}
.seq__type{
  position:absolute;left:0;right:0;bottom:clamp(78px,13vh,150px);
  padding-inline:var(--pad);max-width:var(--maxw);margin-inline:auto;
  display:grid;pointer-events:none;text-shadow:0 2px 34px rgba(4,5,7,.55);
}

/* "You" is the constant. Only what happens to you changes. */
.seq__line{
  grid-area:1/1;margin:0;align-self:end;display:flex;align-items:baseline;
  gap:.28em;color:#fff;
  font-size:clamp(2.4rem,8.2vw,6.6rem);font-weight:600;
  letter-spacing:-.026em;line-height:1;
}
.seq__you{
  flex:none;color:rgba(255,255,255,.42);font-weight:500;
  opacity:var(--youO,0);
  transform:translate3d(0,var(--youY,26px),0);
  will-change:opacity,transform;
}
.seq__verbs{position:relative;display:block;min-width:0}
.seq__v{
  display:block;overflow:hidden;padding-bottom:.11em;margin-bottom:-.11em;
}
.seq__v:not(:first-child){position:absolute;left:0;top:0;right:auto}
.seq__v>i{
  display:block;font-style:normal;white-space:nowrap;
  transform:translate3d(0,var(--vy,110%),0);
  opacity:var(--vo,0);will-change:transform,opacity;
}

.seq__say{
  grid-area:2/1;margin:clamp(14px,2vh,24px) 0 0;
  font-family:var(--serif);font-size:clamp(1.05rem,2.1vw,1.6rem);line-height:1.32;
  color:rgba(255,255,255,.88);max-width:26ch;
  opacity:0;transform:translate3d(0,var(--wy,18px),0);
  will-change:opacity,transform;
}
.seq__hud{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(24px,4vh,44px);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  font-size:.62rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.seq__count b{color:#fff;font-weight:500}
.seq__rail{flex:1;height:1px;background:rgba(255,255,255,.24);position:relative;overflow:hidden}
.seq__rail i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.seq__steps{display:none}

.coda{position:relative;z-index:1;background:var(--night);text-align:center;
  padding-block:clamp(100px,18vh,220px) clamp(90px,15vh,180px)}
.coda__say{
  font-size:clamp(1.7rem,4.6vw,3.4rem);font-weight:600;letter-spacing:-.015em;line-height:1.06;
  color:#fff;max-width:20ch;margin:0 auto;
}
.coda__mark{margin:clamp(56px,9vh,110px) auto clamp(34px,5vh,60px);width:clamp(56px,7vw,86px)}
.coda__mark svg{width:100%;height:auto;overflow:visible}
.coda__mark use{fill:none;stroke:#fff;stroke-width:6;stroke-linejoin:round}
.coda__mark use:first-child{opacity:.45}
.coda__end{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.7rem);color:rgba(255,255,255,.78);margin:0;
}

/* ─── 12b · design explorations ──────────────────────────────── */
.explore{background:var(--night);color:#fff;padding-block:clamp(30px,6vh,70px) clamp(80px,13vh,150px)}
.explore__intro{padding-bottom:clamp(34px,5vh,56px)}
.explore__lead{
  margin:26px 0 0;max-width:44ch;color:rgba(255,255,255,.58);
  font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.5;
}

.exrail{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;padding-block:6px;
}
.exrail::-webkit-scrollbar{display:none}
.exrail.drag{cursor:grabbing;scroll-snap-type:none}
.extrack{
  display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;
  padding-inline:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.excard{
  flex:none;scroll-snap-align:center;width:clamp(240px,27vw,400px);
  background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;
}
.excard__shot{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:clamp(16px,1.5vw,22px);
  background:#141518;
}
.excard__shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease),opacity .8s var(--ease-soft);
}
.excard__open{
  position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(10,11,13,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;opacity:0;transform:scale(.86);
  transition:opacity .45s var(--ease),transform .5s var(--ease);
}
.excard__open::before,.excard__open::after{
  content:"";position:absolute;width:11px;height:1.4px;background:#fff;
}
.excard__open::after{transform:rotate(90deg)}
/* a drawing is shown whole, on paper */
.excard--paper .excard__shot{background:#F4F3F0}
.excard--paper .excard__shot img{object-fit:contain;padding:8%}
.excard:hover .excard__shot img,.excard:focus-visible .excard__shot img{transform:scale(1.055)}
.excard--paper:hover .excard__shot img{transform:scale(1.03)}
.excard:hover .excard__open,.excard:focus-visible .excard__open{opacity:1;transform:none}
.excard h3{
  margin:clamp(16px,1.8vw,22px) 0 7px;font-size:clamp(1.02rem,1.5vw,1.2rem);
  font-weight:500;letter-spacing:-.015em;color:#fff;
}
.excard p{margin:0;font-size:clamp(.84rem,1.2vw,.94rem);line-height:1.45;color:rgba(255,255,255,.55);max-width:32ch}

/* full-screen viewer */
.lb{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:clamp(14px,3vw,40px);
  background:rgba(6,7,9,.86);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  opacity:0;transition:opacity .5s var(--ease-soft);
}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb__sheet{
  position:relative;width:min(1280px,100%);max-height:100%;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,26%,340px);
  gap:clamp(16px,2vw,30px);
  transform:scale(.965) translateY(12px);opacity:0;
  transition:transform .7s var(--ease),opacity .5s var(--ease-soft);
}
.lb.open .lb__sheet{transform:none;opacity:1}
.lb__stage{
  position:relative;border-radius:clamp(14px,1.4vw,20px);overflow:hidden;background:#101114;
  aspect-ratio:16/10;max-height:calc(100svh - clamp(28px,6vw,80px));
}
/* the viewer never crops — a study is shown whole */
.lb__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(1.03);
  transition:opacity .6s var(--ease-soft),transform 1.2s var(--ease);
}
.lb__stage img.on{opacity:1;transform:none}
.lb__meta{display:flex;flex-direction:column;justify-content:center;padding-right:6px;min-width:0}
.lb__k{font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin:0 0 14px}
.lb__meta h3{font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.018em;color:#fff;margin:0 0 14px}
.lb__p{margin:0;font-size:clamp(.92rem,1.3vw,1.02rem);line-height:1.5;color:rgba(255,255,255,.62);max-width:34ch}
.lb__thumbs{display:flex;gap:8px;margin-top:clamp(22px,3vh,32px);flex-wrap:wrap}
.lb__thumbs button{
  width:64px;height:44px;border-radius:8px;overflow:hidden;border:0;padding:0;cursor:pointer;
  background:#191a1e;opacity:.5;transition:opacity .4s var(--ease),outline-color .3s;
  outline:1.5px solid transparent;outline-offset:2px;
}
.lb__thumbs button img{width:100%;height:100%;object-fit:cover}
.lb__thumbs button:hover{opacity:.8}
.lb__thumbs button.on{opacity:1;outline-color:rgba(255,255,255,.75)}
.lb__nav{display:flex;gap:9px;margin-top:clamp(24px,3.4vh,36px)}
.circ.light{background:rgba(255,255,255,.10);color:#fff}
.circ.light:hover{background:#fff;color:var(--ink)}
.lb__close{
  position:absolute;right:0;top:-46px;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;display:grid;place-items:center;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.lb__close:hover{background:rgba(255,255,255,.2)}
.lb__close:active{transform:scale(.93)}
.lb__close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media(max-width:900px){
  .lb__sheet{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-content:start;
    max-height:100%;overflow-y:auto;scrollbar-width:none}
  .lb__sheet::-webkit-scrollbar{display:none}
  .lb__stage{aspect-ratio:16/11;max-height:52svh}
  .lb__meta{padding:4px 0 10px}
  .lb__close{top:-42px;right:0}
  .lb{padding-top:56px}
}

/* ─── 12c · about — a quiet signature ───────────────────────── */
.foot__end{display:inline-flex;align-items:baseline;gap:22px}
.foot__about{
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:inherit;letter-spacing:inherit;color:inherit;
  transition:color .35s var(--ease-soft);
}
.foot__about:hover,.foot__end a:hover{color:rgba(255,255,255,.85)}

.about{
  position:fixed;inset:0;z-index:97;background:var(--paper);
  display:grid;place-items:center;padding:var(--pad);
  opacity:0;transition:opacity .55s var(--ease-soft);
}
.about[hidden]{display:none}
.about.open{opacity:1}
.about__in{
  max-width:44ch;text-align:center;
  transform:translateY(14px);
  transition:transform .9s var(--ease);
}
.about.open .about__in{transform:none}
.about h2{
  font-size:.74rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin:0 0 clamp(44px,8vh,88px);
}
.about p{
  font-size:clamp(1rem,1.45vw,1.14rem);line-height:1.74;color:var(--soft);
  letter-spacing:-.002em;text-wrap:pretty;
}
.about__cta{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(46px,8.5vh,96px);
  height:46px;padding:0 26px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:.86rem;font-weight:500;letter-spacing:-.008em;white-space:nowrap;
  transition:transform .45s var(--spring),background .4s var(--ease-soft),
             box-shadow .5s var(--ease-soft);
  box-shadow:0 10px 26px -14px rgba(20,22,26,.55);
}
.about__cta:hover{transform:translateY(-1px);box-shadow:0 16px 34px -14px rgba(20,22,26,.5)}
.about__cta:active{transform:scale(.975)}
.about__close{
  position:fixed;right:clamp(16px,3vw,40px);top:clamp(16px,3vw,32px);
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(245,245,247,.86);color:var(--ink);display:grid;place-items:center;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:background .4s var(--ease),transform .4s var(--spring);
}
.about__close:hover{background:var(--ink);color:#fff}
.about__close:active{transform:scale(.93)}
.about__close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

/* ─── 13 · foot ──────────────────────────────────────────────── */
.foot{background:var(--night);padding:0 0 clamp(40px,7vh,80px)}
.foot__row{
  display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding-top:34px;border-top:1px solid rgba(255,255,255,.10);
  font-size:.65rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.42);
}
.foot__row p{margin:0;color:inherit;max-width:64ch}
.foot__row span{letter-spacing:.16em;text-transform:uppercase}

/* ─── responsive chrome ──────────────────────────────────────── */

@media(max-width:640px){
  :root{--nav:50px}
  .seq__type{bottom:clamp(84px,15vh,140px)}
  .look .rail__track{padding-inline:var(--pad)}
  .slide{width:86vw}
  .slide--p{width:74vw}
}

/* ─── reduced motion ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;
    transition-duration:.15s!important;transition-delay:0s!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .line>span,.sp>i{transform:none!important}
  .mk__ring,.mk__glass{stroke-dashoffset:0!important}
  .mk__pen,.mk__arm,.mk__con,.mk__pivot{display:none}
  .hero__bg img{opacity:1!important;transform:none!important}
  .hero__cue{display:none}
  
  
  .idea__track{height:auto}
  .idea__stage{position:relative;height:auto;padding-block:60px}
  .grow{height:auto}
  .grow__stage{position:relative;height:auto}
  .seq{height:auto}
  .seq__stage{position:relative;height:auto}
  .pcard{opacity:1!important;transform:none!important}
  .pcard:hover .pbox img.on{transform:none}
  .excard:hover .excard__shot img{transform:none}
  .slide{transform:none!important;opacity:1!important}
}