/* ==========================================================================
   Hoi Yee Lim — Rev06
   Visual-first. Text is progressive: a line by default, the rest on demand.
   ========================================================================== */

:root{
  --paper:#FCFBF8;
  --paper-dim:#F4F2EC;
  --paper-deep:#141311;
  --ink:#1A1917;
  --ink-mid:#4A4740;
  --ink-soft:#6E6A61;
  --ink-faint:#A19C91;
  --line:#E4E1D8;
  --line-strong:#CFCBC0;
  --accent:#9E2B1F;

  --measure:640px;
  --measure-wide:760px;

  --step--2:11px;
  --step--1:13px;
  --step-0:17px;
  --step-1:21px;
  --step-2:28px;
  --step-3:38px;
  --step-4:54px;
  --step-5:78px;

  --gap-s:24px;
  --gap-m:48px;
  --gap-l:96px;
  --gap-xl:150px;

  --ease:cubic-bezier(.16,1,.3,1);

  /* All three are SIL Open Font Licence 1.1, free for commercial use.
     Jost = Futura/Century Gothic register. Inter = Helvetica register. */
  --font-display:'Jost',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.68;
  letter-spacing:-0.005em;
  font-optical-sizing:auto;
  overflow-x:hidden;
}
body.locked{overflow:hidden;}

img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;color:inherit;}
::selection{background:var(--ink);color:var(--paper);}

/* ---------- layout ---------- */

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 40px;}
.wide{max-width:1440px;}
.measure{max-width:var(--measure);}
.measure-wide{max-width:var(--measure-wide);}

section{padding:var(--gap-xl) 0;}
section.tight{padding:var(--gap-l) 0;}
.dim{background:var(--paper-dim);}

/* ---------- typography ---------- */

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:-0.028em;}
h1{font-size:var(--step-5);line-height:1.02;}
h2{font-size:var(--step-4);line-height:1.08;}
h3{font-size:var(--step-2);line-height:1.2;letter-spacing:-0.02em;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

.lede{font-size:var(--step-1);line-height:1.55;color:var(--ink-mid);font-weight:400;letter-spacing:-0.011em;}
.soft{color:var(--ink-soft);}

.meta{
  font-family:var(--font-mono);
  font-size:var(--step--2);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:400;
}
.mono{font-family:var(--font-mono);}

.opener{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:var(--gap-m);
}

/* text link */
.tlink{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:4px;background:none;border-left:0;border-right:0;border-top:0;
  cursor:pointer;transition:border-color .25s ease,color .25s ease;
}
.tlink:hover{border-bottom-color:var(--ink);}
.tlink.strong{border-bottom-color:var(--ink);}

/* ---------- header ---------- */

header{
  position:sticky;top:0;z-index:60;
  background:rgba(252,251,248,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
header.scrolled{border-bottom-color:var(--line);}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{font-family:var(--font-display);font-size:18px;font-weight:500;text-decoration:none;letter-spacing:-.01em;}
.brand span{color:var(--ink-faint);font-style:italic;}
nav.links{display:flex;gap:32px;}
nav.links a{
  font-family:var(--font-mono);
  font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);}
.nav-toggle{display:none;background:none;border:0;padding:0;cursor:pointer;}

/* ---------- hero ---------- */

.hero{padding-top:120px;padding-bottom:var(--gap-l);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--gap-l);align-items:center;}
.hero h1{max-width:14ch;margin:44px 0 34px;}
.hero h1 .quiet{color:var(--ink-faint);}
.hero-note{max-width:440px;color:var(--ink-mid);}
.spine{
  display:inline-block;margin-top:52px;padding-top:14px;border-top:1px solid var(--ink);
  font-family:var(--font-mono);
  font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;
}

/* hero graphic */
.hero-art{width:100%;max-width:420px;justify-self:end;}
.hero-art svg{width:100%;height:auto;overflow:visible;}
.draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);animation:draw 2.4s var(--ease) forwards;}
.draw.d2{animation-delay:.5s;}
.draw.d3{animation-delay:1s;}
.draw.d4{animation-delay:1.4s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.fadein{opacity:0;animation:fadein .9s var(--ease) forwards;}
.fadein.f2{animation-delay:1.6s;}
.fadein.f3{animation-delay:1.9s;}
.fadein.f4{animation-delay:2.2s;}
@keyframes fadein{to{opacity:1;}}
.pulse{animation:pulse 3.6s ease-in-out infinite;transform-origin:center;}
@keyframes pulse{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ---------- disclosure (progressive text) ---------- */

.more{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease),opacity .4s ease;
  opacity:0;
}
.more > div{overflow:hidden;}
.disc.open .more{grid-template-rows:1fr;opacity:1;}
.disc-btn::after{content:' +';}
.disc.open .disc-btn::after{content:' –';}

/* ---------- principles: cursor proximity reveal ---------- */

.pr-list{border-top:1px solid var(--line);}
.pr{
  position:relative;display:grid;
  grid-template-columns:92px minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--gap-m);align-items:start;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:44px 0;cursor:default;
  --near:0;
}
.pr-num{
  font-family:var(--font-display);
  font-size:var(--step-2);line-height:1.1;
  color:var(--line-strong);
  color:color-mix(in srgb, var(--accent) calc(var(--near) * 100%), var(--line-strong));
  transition:color .35s ease;
}
.pr .h3{letter-spacing:-0.022em;
  display:block;font-family:var(--font-display);font-weight:400;
  letter-spacing:-.012em;font-size:var(--step-3);line-height:1.15;
  transform:translateX(calc(var(--near) * 10px));
  transition:transform .5s var(--ease);
}
.pr .arg{
  display:block;font-size:15.5px;line-height:1.72;color:var(--ink-soft);
  max-width:44ch;padding-top:9px;
  opacity:calc(0.05 + var(--near) * 0.95);
  transform:translateY(calc((1 - var(--near)) * 10px));
  transition:opacity .45s ease,transform .55s var(--ease);
}
/* the marker line that grows toward the argument */
.pr .tie{
  position:absolute;left:92px;top:0;height:1px;background:var(--accent);
  width:calc(var(--near) * 40px);opacity:calc(var(--near) * 0.6);
  transition:width .5s var(--ease),opacity .4s ease;
}
.pr::before{
  content:'';position:absolute;inset:0 -24px;background:var(--paper-dim);
  opacity:calc(var(--near) * 0.55);z-index:-1;
  transition:opacity .45s ease;
}
.pr-hint{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- method: one screen, heading left, stage top-aligned ---------- */

#method{padding:var(--gap-l) 0;}
.method{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:var(--gap-l);align-items:start;
}
.mleft{display:block;}
.mleft .opener{margin-bottom:26px;}
.mleft h2{font-size:var(--step-3);max-width:15ch;margin-bottom:14px;}
.mleft .lede{font-size:16px;max-width:44ch;margin-bottom:30px;}

.mlist{border-top:1px solid var(--ink);}
.mitem{
  display:grid;grid-template-columns:46px minmax(0,1fr) 18px;
  gap:14px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:15px 0;cursor:pointer;position:relative;
}
.mitem .mno{
  font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.1em;color:var(--ink-faint);transition:color .3s ease;
}
.mitem .mtitle{
  letter-spacing:-0.022em;font-family:var(--font-display);font-size:18px;
  font-weight:400;line-height:1.24;transition:transform .45s var(--ease);
}
.mitem .mclient{
  display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px;
}
.mitem .mdot{
  justify-self:end;width:7px;height:7px;border-radius:50%;
  background:transparent;border:1px solid var(--line-strong);
  transform:translateY(-3px);transition:all .35s var(--ease);
}
.mitem:hover .mtitle{transform:translateX(6px);}
.mitem.on .mno{color:var(--accent);}
.mitem.on .mdot{background:var(--accent);border-color:var(--accent);transform:translateY(-3px) scale(1.25);}

.mstage{position:relative;}
.mframe{
  position:relative;width:100%;aspect-ratio:1/.76;
  border:1px solid var(--line);background:var(--paper);overflow:hidden;
}
.mframe .dia{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;padding:22px;
}
.mframe .dia.on{opacity:1;visibility:visible;}
.mframe .dia svg{width:100%;height:100%;overflow:visible;}

.mcap{margin-top:22px;position:relative;min-height:150px;}
.mcap .cap{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .45s ease,visibility .45s,transform .5s var(--ease);
}
.mcap .cap.on{opacity:1;visibility:visible;transform:none;}
.mline{display:grid;grid-template-columns:66px minmax(0,1fr);gap:14px;margin-bottom:10px;}
.mline b{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:400;padding-top:4px;
}
.mline span{font-size:14.5px;line-height:1.6;color:var(--ink-mid);}
.mcap .open-g{margin-top:14px;margin-left:80px;}

/* ---------- work: view toggle ---------- */

.viewbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:var(--gap-m);}
.toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:100px;overflow:hidden;}
.toggle button{
  background:none;border:0;padding:9px 20px;cursor:pointer;
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  transition:background .3s,color .3s;
}
.toggle button.on{background:var(--ink);color:var(--paper);}

/* ---------- index rows ---------- */

.index-head{
  display:grid;grid-template-columns:70px minmax(0,3fr) minmax(0,1.4fr) minmax(0,1.2fr) 34px;
  gap:20px;padding-bottom:14px;border-bottom:1px solid var(--ink);
}
.row{
  display:grid;grid-template-columns:70px minmax(0,3fr) minmax(0,1.4fr) minmax(0,1.2fr) 34px;
  gap:20px;align-items:baseline;width:100%;text-align:left;
  padding:20px 0;border:0;border-bottom:1px solid var(--line);
  background:none;cursor:pointer;position:relative;
  transition:color .3s ease;
}
.row .num{font-family:var(--font-mono);font-size:var(--step--1);color:var(--ink-faint);transition:color .3s;}
.row .name{font-size:var(--step-1);line-height:1.3;transition:transform .45s var(--ease);}
.row .name .loc{display:block;font-size:var(--step--1);color:var(--ink-faint);margin-top:5px;}
.row .type,.row .scale{font-size:var(--step--1);color:var(--ink-soft);transition:opacity .3s;}
.row .scale{text-align:right;font-family:var(--font-mono);}
.row .arrow{text-align:right;color:var(--ink-faint);font-size:14px;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .35s var(--ease);}
.row:hover .arrow{opacity:1;transform:none;}
.row:hover .name{transform:translateX(10px);}
.row:hover .num{color:var(--accent);}
.row.dimmed{color:var(--ink-faint);}
.row.dimmed .name,.row.dimmed .type,.row.dimmed .scale{opacity:.4;}
.row.has-study .num::after{content:'●';margin-left:7px;font-size:6px;vertical-align:middle;color:var(--accent);}

/* chapter heading */
.chapter-head{
  display:grid;grid-template-columns:70px minmax(0,1fr);gap:20px;align-items:baseline;
  margin:var(--gap-l) 0 0;padding-bottom:16px;border-bottom:1px solid var(--ink);
}
.chapter-head:first-of-type{margin-top:0;}
.chapter-head h3{font-size:var(--step-2);}
.chapter-head .note{grid-column:2;font-size:15px;color:var(--ink-soft);max-width:52ch;margin-top:10px;}

/* ---------- grid view ---------- */

.grid-view{display:none;}
.grid-view.on{display:block;}
.index-view.off{display:none;}

.gcards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px 28px;
}
.gcard{
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;
}
.gcard .shot{
  position:relative;overflow:hidden;background:var(--paper-dim);
  aspect-ratio:4/3;margin-bottom:16px;
}
.gcard .shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s ease;
}
.gcard:hover .shot img{transform:scale(1.045);}
.gcard .shot::after{
  content:attr(data-count);position:absolute;right:12px;bottom:12px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:#fff;background:rgba(20,19,17,.62);padding:5px 9px;
  opacity:0;transform:translateY(5px);transition:all .35s var(--ease);
}
.gcard:hover .shot::after{opacity:1;transform:none;}
.gcard .gname{font-family:var(--font-display);font-size:var(--step-1);line-height:1.25;}
.gcard .gmeta{
  font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.09em;color:var(--ink-faint);margin-top:7px;
}

/* homepage feature grid */
.feature{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;}
.feature .gcard:nth-child(1){grid-column:span 4;}
.feature .gcard:nth-child(2){grid-column:span 2;}
.feature .gcard:nth-child(3){grid-column:span 2;}
.feature .gcard:nth-child(4){grid-column:span 2;}
.feature .gcard:nth-child(5){grid-column:span 2;}
.feature .gcard:nth-child(1) .shot{aspect-ratio:16/9;}

/* ---------- hover preview (desktop only) ---------- */

#peek{
  position:fixed;top:0;left:0;z-index:40;pointer-events:none;
  width:280px;height:200px;overflow:hidden;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.94);
  transition:opacity .3s ease,transform .5s var(--ease);
  box-shadow:0 20px 50px rgba(20,19,17,.16);
}
#peek.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1);}
#peek img{width:100%;height:100%;object-fit:cover;}
@media (pointer:coarse){#peek{display:none;}}

/* ---------- gallery: fullscreen scroll + filmstrip ---------- */

#lb{
  position:fixed;inset:0;z-index:100;
  background:#121110;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s;
}
#lb.on{opacity:1;visibility:visible;}

.lb-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:22px 32px;color:rgba(252,251,248,.72);flex:0 0 auto;
  border-bottom:1px solid rgba(252,251,248,.1);
}
.lb-title{letter-spacing:-0.022em;font-family:var(--font-display);font-size:20px;color:#FCFBF8;}
.lb-title span{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(252,251,248,.5);margin-left:14px;
}
.lb-actions{display:flex;align-items:baseline;gap:26px;flex:0 0 auto;}
.lb-close,.lb-study{
  background:none;border:0;cursor:pointer;color:rgba(252,251,248,.6);
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;transition:color .25s;
  text-decoration:none;white-space:nowrap;
}
.lb-study{border-bottom:1px solid rgba(252,251,248,.3);padding-bottom:3px;}
.lb-close:hover,.lb-study:hover{color:#FCFBF8;}

/* the scrolling stack */
.lb-scroll{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  scroll-behavior:smooth;scroll-snap-type:y proximity;
  padding:34px 0 44px;
  -webkit-overflow-scrolling:touch;
}
.lb-scroll::-webkit-scrollbar{width:0;}
.lb-frame{
  scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;
  padding:0 6vw 34px;
}
.lb-frame:last-child{padding-bottom:0;}
.lb-frame img{
  max-width:100%;max-height:78vh;width:auto;object-fit:contain;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .9s var(--ease);
}
.lb-frame.seen img{opacity:1;transform:none;}

/* filmstrip */
.lb-bot{
  flex:0 0 auto;display:flex;align-items:center;gap:22px;
  padding:14px 32px 18px;border-top:1px solid rgba(252,251,248,.1);
}
.lb-count{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;color:rgba(252,251,248,.55);flex:0 0 auto;
}
.lb-strip{
  display:flex;gap:8px;overflow-x:auto;flex:1 1 auto;padding:4px 0;
  scrollbar-width:none;
}
.lb-strip::-webkit-scrollbar{height:0;}
.lb-strip button{
  flex:0 0 auto;width:74px;height:50px;padding:0;border:0;cursor:pointer;
  background:none;opacity:.42;overflow:hidden;
  transition:opacity .3s ease,outline-color .3s ease;
  outline:1px solid transparent;outline-offset:2px;
}
.lb-strip button img{width:100%;height:100%;object-fit:cover;}
.lb-strip button:hover{opacity:.8;}
.lb-strip button.on{opacity:1;outline-color:rgba(252,251,248,.75);}
.lb-hint{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(252,251,248,.3);
  flex:0 0 auto;
}

/* ---------- photography ---------- */

.photo-grid{column-count:3;column-gap:20px;}
.photo-grid .ph.gone{display:none;}
.ph-empty[hidden]{display:none;}
.photo-grid .ph{
  break-inside:avoid;margin:0 0 20px;padding:0;border:0;background:none;
  width:100%;cursor:pointer;display:block;position:relative;overflow:hidden;
}
.photo-grid .ph img{width:100%;height:auto;transition:transform 1.1s var(--ease),filter .5s ease;}
.photo-grid .ph:hover img{transform:scale(1.035);}
.photo-grid .ph .phcap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(to top,rgba(18,17,16,.72),rgba(18,17,16,0));
  color:#FCFBF8;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;opacity:0;transform:translateY(6px);
  transition:all .35s var(--ease);
}
.photo-grid .ph:hover .phcap{opacity:1;transform:none;}

.ph-empty{
  break-inside:avoid;margin:0 0 20px;width:100%;aspect-ratio:4/3;
  border:1px dashed var(--line-strong);background:var(--paper-dim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:20px;
}
.ph-empty .fname{
  font-family:var(--font-mono);font-size:11px;
  color:var(--accent);letter-spacing:.04em;
}
.ph-empty .note{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- about: growth rail ---------- */

.story-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--gap-l);align-items:start;}
.rail{position:sticky;top:120px;}
.rail svg{width:100%;height:auto;overflow:visible;}
.rail .node{transition:all .6s var(--ease);}
.rail .node circle{fill:var(--paper);stroke:var(--line-strong);transition:all .6s var(--ease);}
.rail .node text{fill:var(--ink-faint);transition:fill .6s ease;}
.rail .node.lit circle{fill:var(--accent);stroke:var(--accent);}
.rail .node.lit text{fill:var(--ink);}
.rail .track{stroke:var(--line);}
.rail .fill{stroke:var(--accent);transition:stroke-dashoffset .6s var(--ease);}

.movement{border-bottom:1px solid var(--line);}
.movement:first-of-type{border-top:1px solid var(--line);}
.mv-head{
  display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:20px;
  align-items:baseline;width:100%;text-align:left;background:none;border:0;
  padding:46px 0 0;cursor:pointer;
}
.mv-head .h3{letter-spacing:-0.022em;
  display:block;font-family:var(--font-display);font-weight:400;
  letter-spacing:-.012em;font-size:var(--step-3);line-height:1.12;
  transition:transform .45s var(--ease);
}
.mv-head .pr-plus{justify-self:end;color:var(--ink-faint);font-size:18px;transition:transform .45s var(--ease);}
.movement.open .mv-head .pr-plus{transform:rotate(45deg);color:var(--accent);}
.movement:hover .mv-head .h3{letter-spacing:-0.022em;transform:translateX(6px);}
.mv-lede{
  display:block;font-size:var(--step-1);line-height:1.55;color:var(--ink);
  max-width:40ch;margin:16px 0 0;
}
.movement .more > div{padding:0 0 46px;}
.movement .more p{max-width:56ch;color:var(--ink-mid);font-size:16px;margin-top:1.1em;}

/* ---------- capabilities ---------- */

.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);}
.caps > div{padding:44px 40px 44px 0;border-right:1px solid var(--line);}
.caps > div:last-child{border-right:0;padding-right:0;}
.caps > div:not(:first-child){padding-left:40px;}
.caps .cico{width:40px;height:40px;margin-bottom:22px;}
.caps h3{font-size:var(--step-1);margin-bottom:14px;}
.caps p{font-size:15px;line-height:1.62;color:var(--ink-soft);}
.caps ul{list-style:none;padding:0;margin:20px 0 0;}
.caps li{
  font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.06em;color:var(--ink-mid);padding:7px 0;border-top:1px solid var(--line);
}

/* ---------- history ---------- */

.hist{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--gap-m);padding:34px 0;border-top:1px solid var(--line);}
.hist:last-of-type{border-bottom:1px solid var(--line);}
.hist .role{letter-spacing:-0.022em;font-size:var(--step-1);font-family:var(--font-display);line-height:1.2;}
.hist .where{font-family:var(--font-mono);font-size:var(--step--2);line-height:1.8;color:var(--ink-faint);margin-top:8px;}
.hist p{font-size:15px;line-height:1.68;color:var(--ink-soft);max-width:56ch;}

/* ---------- case study ---------- */

.study-hero{padding-top:110px;padding-bottom:var(--gap-l);}
.study-hero h1{font-size:var(--step-4);max-width:16ch;margin-bottom:30px;}
.study-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;border-top:1px solid var(--ink);padding-top:20px;margin-top:52px;}
.study-facts .k{display:block;font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px;}
.study-facts .v{display:block;font-size:15px;line-height:1.45;}

.chapter{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--gap-m);padding:72px 0;border-top:1px solid var(--line);}
.chapter .body{max-width:var(--measure);}
.chapter .body p{color:var(--ink-mid);}
.chapter .body p.first{font-size:var(--step-1);color:var(--ink);line-height:1.55;}

.decisions{margin-top:38px;}
.decision{padding:26px 0;border-top:1px solid var(--line);}
.decision h4{font-family:var(--font-display);font-size:var(--step-1);font-weight:400;margin:0 0 9px;}
.decision p{font-size:15px;line-height:1.68;color:var(--ink-soft);margin:0;}

figure{margin:0;}
figure img{width:100%;height:auto;}
figcaption{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.06em;color:var(--ink-faint);margin-top:12px;}
.plate{margin:var(--gap-l) 0;}
.plate-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}

.pull{letter-spacing:-0.022em;font-family:var(--font-display);font-size:var(--step-3);line-height:1.24;max-width:22ch;margin:0;letter-spacing:-.01em;}

.jump{display:flex;justify-content:space-between;align-items:baseline;padding:40px 0;border-top:1px solid var(--ink);text-decoration:none;}
.jump:hover .jump-title{letter-spacing:-0.022em;text-decoration:underline;text-underline-offset:5px;}
.jump-title{letter-spacing:-0.022em;font-family:var(--font-display);font-size:var(--step-2);}

/* placeholder */
.todo{
  border:1px dashed var(--accent);background:rgba(158,43,31,.03);
  padding:16px 18px;margin:18px 0;
  font-family:var(--font-mono);
  font-size:var(--step--1);line-height:1.62;color:var(--accent);
}
.todo b{display:block;letter-spacing:.12em;text-transform:uppercase;font-size:var(--step--2);margin-bottom:6px;}

/* ---------- contact ---------- */

.contact{background:var(--paper-deep);color:var(--paper);}
.contact h2{max-width:16ch;margin-bottom:32px;}
.contact .lede{color:rgba(252,251,248,.6);}
.contact .meta{color:rgba(252,251,248,.4);}
.contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid rgba(252,251,248,.16);padding-top:26px;margin-top:66px;}
.contact-grid a,.contact-grid div{text-decoration:none;color:inherit;}
.contact-grid .k{display:block;font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:rgba(252,251,248,.4);margin-bottom:9px;}
.contact-grid .v{font-size:15px;}
.contact-grid a:hover .v{text-decoration:underline;text-underline-offset:4px;}

footer{background:var(--paper-deep);color:rgba(252,251,248,.4);padding:0 0 40px;}
footer .wrap{display:flex;justify-content:space-between;gap:20px;}

/* ---------- reveal ---------- */

.reveal{opacity:0;transform:translateY(18px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.stag > *{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.stag.in > *{opacity:1;transform:none;}
.stag.in > *:nth-child(1){transition-delay:0s;}
.stag.in > *:nth-child(2){transition-delay:.07s;}
.stag.in > *:nth-child(3){transition-delay:.14s;}
.stag.in > *:nth-child(4){transition-delay:.21s;}
.stag.in > *:nth-child(5){transition-delay:.28s;}
.stag.in > *:nth-child(6){transition-delay:.35s;}

@media (prefers-reduced-motion:reduce){
  .reveal,.stag > *{opacity:1;transform:none;transition:none;}
  .draw,.fadein,.pulse{animation:none;stroke-dashoffset:0;opacity:1;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */

@media (max-width:1080px){
  :root{--step-5:58px;--step-4:44px;--step-3:32px;--gap-xl:104px;--gap-l:72px;}
  .hero-grid{grid-template-columns:1fr;gap:var(--gap-m);}
  .hero-art{max-width:340px;justify-self:start;}
  .method{grid-template-columns:1fr;gap:var(--gap-m);}
  .mstage{position:static;}
  .mframe{aspect-ratio:1/.7;}
  .mcap{min-height:120px;}
  .story-grid{grid-template-columns:1fr;gap:var(--gap-m);}
  .rail{position:static;max-width:420px;}
  .caps{grid-template-columns:1fr;}
  .caps > div{border-right:0;border-bottom:1px solid var(--line);padding:34px 0;}
  .caps > div:not(:first-child){padding-left:0;}
  .caps > div:last-child{border-bottom:0;}
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .feature{grid-template-columns:repeat(2,minmax(0,1fr));}
  .feature .gcard:nth-child(n){grid-column:span 1;}
  .feature .gcard:nth-child(1){grid-column:span 2;}
  .photo-grid{column-count:2;}
  .pr{grid-template-columns:70px minmax(0,1fr);gap:20px var(--gap-m);}
  .pr .arg{grid-column:2;max-width:none;}
  .pr .tie{left:70px;}
  .study-facts,.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px;}
}

@media (max-width:760px){
  :root{--step-5:40px;--step-4:32px;--step-3:26px;--step-2:22px;--step-1:19px;--step-0:16px;
        --gap-xl:76px;--gap-l:52px;--gap-m:26px;}
  .wrap{padding:0 22px;}
  header .wrap{height:60px;}
  nav.links{
    display:none;position:absolute;top:60px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 22px 18px;
  }
  nav.links.open{display:flex;}
  nav.links a{padding:12px 0;border-bottom:1px solid var(--line);}
  nav.links a:last-child{border-bottom:0;}
  .nav-toggle{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}

  .hero{padding-top:56px;}
  .hero h1{max-width:none;}
  .hero-art{max-width:260px;}

  .pr{grid-template-columns:44px minmax(0,1fr);gap:14px 16px;padding:30px 0;--near:1;}
  .pr .tie{display:none;}
  .pr .arg{opacity:1;transform:none;}
  .pr::before{display:none;}

  .mitem{grid-template-columns:44px minmax(0,1fr) 16px;gap:12px;padding:16px 0;}
  .mframe{aspect-ratio:1/.78;}
  .mcap{min-height:150px;}
  .mline{grid-template-columns:60px minmax(0,1fr);gap:12px;}
  .mcap .open-g{margin-left:0;}

  .index-head{display:none;}
  .row{grid-template-columns:50px minmax(0,1fr);gap:12px;padding:16px 0;}
  .row .type,.row .scale,.row .arrow{display:none;}
  .row:hover .name{transform:none;}
  .chapter-head{grid-template-columns:50px minmax(0,1fr);gap:12px;}
  .chapter-head .note{grid-column:1 / -1;}

  .gcards{grid-template-columns:1fr;gap:34px;}
  .feature{grid-template-columns:1fr;}
  .feature .gcard:nth-child(n){grid-column:span 1;}
  .feature .gcard:nth-child(1) .shot{aspect-ratio:4/3;}
  .photo-grid{column-count:1;}

  .mv-head{padding:32px 0 0;}
  .mv-head .h3{letter-spacing:-0.022em;max-width:none;}
  .mv-lede{max-width:none;font-size:var(--step-0);}
  .movement .more > div{padding:0 0 32px;}

  .hist,.chapter{grid-template-columns:1fr;gap:16px;}
  .plate-2{grid-template-columns:1fr;}
  .study-facts,.contact-grid{grid-template-columns:1fr;gap:20px;}
  footer .wrap{flex-direction:column;gap:8px;}

  .lb-top{padding:16px 20px;}
  .lb-title{letter-spacing:-0.022em;font-size:17px;}
  .lb-title span{display:block;margin:5px 0 0;}
  .lb-frame{padding:0 20px 24px;}
  .lb-frame img{max-height:66vh;}
  .lb-bot{padding:12px 20px 16px;gap:14px;}
  .lb-strip button{width:58px;height:40px;}
  .lb-hint{display:none;}
}


/* ==========================================================================
   Rev08 additions
   ========================================================================== */

/* ---------- hero: the diagram as the page background ---------- */

.hero-bg{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.hero-bg svg{
  position:absolute;top:50%;left:50%;
  width:132%;height:auto;min-height:100%;
  transform:translate(-50%,-50%);
  opacity:.9;
}
.hero.has-bg{position:relative;}
.hero.has-bg > .wrap,.hero.has-bg .hero-grid{position:relative;z-index:1;}
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(252,251,248,0),var(--paper));
}

/* profile portrait */
.portrait{
  position:relative;width:100%;max-width:300px;justify-self:end;
}
.portrait img{width:100%;height:auto;filter:grayscale(1) contrast(1.04);transition:filter .8s var(--ease);}
.portrait:hover img{filter:grayscale(0) contrast(1);}
.portrait figcaption{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:12px;
}

/* ---------- category tabs ---------- */

.tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding-bottom:20px;border-bottom:1px solid var(--ink);
  margin-bottom:var(--gap-m);
}
.tab{
  background:none;border:1px solid transparent;cursor:pointer;
  padding:9px 16px;border-radius:100px;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);transition:all .28s var(--ease);
}
.tab:hover{color:var(--ink);border-color:var(--line-strong);}
.tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}

.empty-note{
  font-family:var(--font-mono);font-size:12px;
  letter-spacing:.1em;color:var(--ink-faint);padding:60px 0;
}
.empty-note[hidden]{display:none;}

/* ---------- project cards: concept → space ---------- */

.pcards{display:grid;grid-template-columns:1fr;gap:0;}

.pcard{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--gap-m);align-items:start;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:44px 0;cursor:pointer;position:relative;
}
.pcard:first-child{border-top:1px solid var(--line);}
.pcard.hide{display:none;}

.pc-shot{
  position:relative;display:block;overflow:hidden;
  background:var(--paper-dim);aspect-ratio:4/3;
}
.pc-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.pcard:hover .pc-shot img{transform:scale(1.04);}
.pc-shot::after{
  content:attr(data-count);position:absolute;right:12px;bottom:12px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:#fff;background:rgba(20,19,17,.6);padding:5px 9px;
  opacity:0;transform:translateY(5px);transition:all .35s var(--ease);
}
.pcard:hover .pc-shot::after{opacity:1;transform:none;}

.pc-body{display:block;padding-top:2px;}
.pc-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.pc-num{
  font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.12em;color:var(--ink-faint);transition:color .3s;
}
.pcard:hover .pc-num{color:var(--accent);}
.pc-study{
  font-family:var(--font-mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:100px;padding:3px 9px;
}
.pc-title{letter-spacing:-0.022em;
  display:block;font-family:var(--font-display);
  font-size:var(--step-2);line-height:1.2;letter-spacing:-.012em;
  transition:transform .45s var(--ease);
}
.pcard:hover .pc-title{letter-spacing:-0.022em;transform:translateX(7px);}
.pc-meta{
  display:block;font-family:var(--font-mono);
  font-size:var(--step--2);letter-spacing:.09em;color:var(--ink-faint);margin-top:9px;
}
.pc-lines{display:block;margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}
.pc-line{display:grid;grid-template-columns:74px minmax(0,1fr);gap:16px;margin-bottom:12px;}
.pc-line:last-child{margin-bottom:0;}
.pc-line b{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:400;padding-top:5px;
}
.pc-line span{font-size:15px;line-height:1.65;color:var(--ink-mid);}

/* ---------- photography: dark room ---------- */

body.dark{background:#0E0D0C;color:#F2F0EB;}
body.dark header{background:rgba(14,13,12,.86);}
body.dark header.scrolled{border-bottom-color:rgba(242,240,235,.13);}
body.dark .brand{color:#F2F0EB;}
body.dark .brand span{color:#77726A;}
body.dark nav.links a{color:#8E8981;}
body.dark nav.links a:hover,body.dark nav.links a[aria-current="page"]{color:#F2F0EB;border-bottom-color:#F2F0EB;}
body.dark .nav-toggle{color:#8E8981;}
body.dark .meta{color:#77726A;}
body.dark .hero-note{color:#A9A49B;}
body.dark .opener{border-bottom-color:rgba(242,240,235,.14);}
body.dark .tabs{border-bottom-color:rgba(242,240,235,.34);}
body.dark .tab{color:#8E8981;}
body.dark .tab:hover{color:#F2F0EB;border-color:rgba(242,240,235,.3);}
body.dark .tab.on{background:#F2F0EB;border-color:#F2F0EB;color:#0E0D0C;}
body.dark .todo{border-color:#C4553F;color:#D8705B;background:rgba(196,85,63,.06);}
body.dark .contact{background:#000;}
body.dark footer{background:#000;}
body.dark .empty-note{color:#77726A;}
body.dark ::selection{background:#F2F0EB;color:#0E0D0C;}

@media (min-width:761px){
  body.dark nav.links{background:transparent;}
}
@media (max-width:760px){
  body.dark nav.links{background:#0E0D0C;border-bottom-color:rgba(242,240,235,.14);}
  body.dark nav.links a{border-bottom-color:rgba(242,240,235,.1);}
}

/* the wall */
.photo-grid{column-count:3;column-gap:14px;}
.photo-grid .ph{
  break-inside:avoid;margin:0 0 14px;padding:0;border:0;background:none;
  width:100%;cursor:pointer;display:block;position:relative;overflow:hidden;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.photo-grid .ph.in{opacity:1;transform:none;}
.photo-grid .ph img{
  width:100%;height:auto;display:block;
  transition:transform 1.2s var(--ease),opacity .5s ease;
}
.photo-grid .ph:hover img{transform:scale(1.03);}
.photo-grid .ph.gone{display:none;}
.photo-grid .ph.hide{display:none;}
.photo-grid .ph .phcap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));
  color:#F2F0EB;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;opacity:0;transform:translateY(6px);
  transition:all .35s var(--ease);
}
.photo-grid .ph:hover .phcap{opacity:1;transform:none;}

.ph-count{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#77726A;
}

@media (max-width:1080px){ .photo-grid{column-count:2;} }
@media (max-width:760px){
  .photo-grid{column-count:1;}
  .pcard{grid-template-columns:1fr;gap:22px;padding:32px 0;}
  .pcard:hover .pc-title{letter-spacing:-0.022em;transform:none;}
  .pc-line{grid-template-columns:62px minmax(0,1fr);gap:12px;}
  .tabs{gap:5px;padding-bottom:16px;}
  .tab{padding:7px 12px;font-size:9.5px;letter-spacing:.1em;}
  .hero-bg svg{width:220%;}
  .portrait{max-width:200px;justify-self:start;}
}
@media (max-width:1080px){
  .portrait{max-width:240px;justify-self:start;}
}


/* ==========================================================================
   Rev09
   ========================================================================== */

/* ---------- homepage cover: portrait left, words right ---------- */

.cover{padding-top:56px;padding-bottom:var(--gap-l);}
.cover-grid{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--gap-l);align-items:center;
}
.cover-portrait{position:relative;width:100%;max-width:520px;}
.cover-portrait img{
  width:100%;height:auto;display:block;
  opacity:0;transform:translateY(18px);
  transition:opacity 1.2s var(--ease),transform 1.4s var(--ease);
}
.cover-portrait.in img{opacity:1;transform:none;}
.cover-portrait figcaption{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  margin-top:14px;
}
.cover-text h1{max-width:14ch;margin:30px 0 30px;}
.cover-text h1 .quiet{color:var(--ink-faint);}
.cover-note{max-width:520px;color:var(--ink-mid);}

/* ---------- principles: stage + statements ---------- */

.pstage-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--gap-l);align-items:start;
}
.pstage{position:sticky;top:110px;}
.pframe{
  position:relative;width:100%;aspect-ratio:1/.9;
  border:1px solid var(--line);background:var(--paper);overflow:hidden;
}
.pframe .pdia{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:30px;opacity:0;visibility:hidden;
  transition:opacity .5s ease,visibility .5s;
}
.pframe .pdia.on{opacity:1;visibility:visible;}
.pframe .pdia svg{width:100%;height:100%;overflow:visible;}
.pstage-cap{
  margin-top:20px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  min-height:2.4em;
}

.pr-list{border-top:1px solid var(--line);}
.pr{
  position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:22px;align-items:start;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:30px 0;cursor:pointer;--near:0;
}
.pr-num{
  font-family:var(--font-display);font-size:var(--step-2);line-height:1;
  color:var(--line-strong);
  color:color-mix(in srgb, var(--accent) calc(var(--near) * 100%), var(--line-strong));
  transition:color .35s ease;
}
.pr .h3{letter-spacing:-0.022em;
  display:block;font-family:var(--font-display);font-weight:400;
  letter-spacing:-.012em;font-size:var(--step-2);line-height:1.22;
  transform:translateX(calc(var(--near) * 8px));
  transition:transform .5s var(--ease);
}
.pr .arg{
  display:block;font-size:15px;line-height:1.7;color:var(--ink-soft);
  max-width:46ch;margin-top:12px;
  max-height:calc(var(--near) * 220px);overflow:hidden;
  opacity:var(--near);
  transition:max-height .55s var(--ease),opacity .4s ease,margin .4s ease;
}
.pr .tie{
  position:absolute;left:0;top:0;height:1px;background:var(--accent);
  width:calc(var(--near) * 46px);opacity:calc(var(--near) * .7);
  transition:width .5s var(--ease),opacity .4s ease;
}

/* ---------- about: full-bleed portrait cover ---------- */

.acover{
  position:relative;min-height:82vh;display:flex;align-items:center;
  overflow:hidden;background:var(--paper);
}
.acover-img{position:absolute;inset:0;z-index:0;}
.acover-img img{width:100%;height:100%;object-fit:cover;object-position:30% 56%;filter:grayscale(1) contrast(1.05);}
.acover-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(252,251,248,0) 0%,
    rgba(252,251,248,.06) 26%,
    rgba(252,251,248,.72) 44%,
    rgba(252,251,248,.96) 58%,
    var(--paper) 74%);
}
.acover .wrap{position:relative;z-index:2;width:100%;}
.acover-text{margin-left:auto;width:min(560px,52%);}
.acover-text h1{font-size:var(--step-5);line-height:1.02;}
.acover-text{width:min(620px,54%);}

/* ---------- about: horizontal timeline, one screen ---------- */

.tl{padding-top:var(--gap-m);}
.tl-rail{position:relative;padding:56px 0 12px;}
.tl-rail .line{
  position:absolute;left:0;right:0;top:56px;height:1px;background:var(--line);
}
.tl-rail .line-fill{
  position:absolute;left:0;top:56px;height:1px;background:var(--accent);
  width:0;transition:width .7s var(--ease);
}
.tl-rail .line-open{
  position:absolute;right:0;top:56px;width:14%;height:1px;
  background:repeating-linear-gradient(to right,var(--line-strong) 0 4px,transparent 4px 10px);
}
.tl-nodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;}
.tlnode{
  position:relative;background:none;border:0;cursor:pointer;text-align:left;
  padding:0 18px 0 0;
}
.tlnode .dot{
  position:absolute;top:-56px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line-strong);
  transform:translateY(-5px);transition:all .45s var(--ease);
}
.tlnode.on .dot{background:var(--accent);border-color:var(--accent);transform:translateY(-5px) scale(1.5);}
.tlnode .yr{
  display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;color:var(--ink-faint);margin-bottom:8px;transition:color .35s;
}
.tlnode .lb{letter-spacing:-0.022em;
  display:block;font-family:var(--font-display);
  font-size:var(--step-1);line-height:1.2;color:var(--ink-faint);
  transition:color .35s,transform .45s var(--ease);
}
.tlnode:hover .lb,.tlnode.on .lb{color:var(--ink);}
.tlnode.on .yr{color:var(--accent);}
.tlnode:hover .lb{transform:translateX(4px);}
.tl-open-label{
  position:absolute;right:0;top:-46px;
  font-family:var(--font-mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}

.tl-stage{
  position:relative;margin-top:var(--gap-m);
  border-top:1px solid var(--line);padding-top:var(--gap-m);
  min-height:340px;
}
.tl-panel{
  position:absolute;left:0;right:0;top:var(--gap-m);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-m);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s ease,visibility .45s,transform .55s var(--ease);
}
.tl-panel.on{opacity:1;visibility:visible;transform:none;position:relative;top:0;}
.tl-panel .q{letter-spacing:-0.022em;
  font-family:var(--font-display);font-size:var(--step-3);
  line-height:1.18;letter-spacing:-.012em;max-width:16ch;margin:0;
}
.tl-panel .body p{font-size:16px;line-height:1.72;color:var(--ink-mid);}
.tl-panel .body p:first-child{font-size:var(--step-1);color:var(--ink);line-height:1.55;}

/* ---------- photography: the rack ---------- */

.rack-stage{
  position:relative;height:calc(100vh - 74px);min-height:520px;
  background:#0B0A09;overflow:hidden;cursor:ew-resize;
  perspective:1600px;
}
.rack{
  position:absolute;top:50%;left:0;display:flex;align-items:center;
  height:70vh;transform:translate3d(0,-50%,0);will-change:transform;
  transform-style:preserve-3d;padding:0 40vw 0 10vw;
}
.slot{
  position:relative;flex:0 0 auto;
  height:100%;width:auto;aspect-ratio:var(--ar,3/4);
  margin-right:22px;
  padding:0;border:0;background:#111;cursor:pointer;
  overflow:hidden;
  transform:rotateY(14deg) scale(.9);
  filter:grayscale(1) brightness(.62) contrast(1.05);
  transition:transform .55s var(--ease),filter .55s ease,box-shadow .55s ease,margin .55s var(--ease);
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.slot img{height:100%;width:100%;object-fit:cover;display:block;}
.slot.hide{display:none;}
.slot.near{transform:rotateY(9deg) scale(.95);filter:grayscale(1) brightness(.8);}
.slot.on{
  transform:rotateY(0deg) scale(1.06);
  filter:grayscale(0) brightness(1) contrast(1);
  z-index:5;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.slot .slot-cap{
  position:absolute;left:0;right:0;bottom:0;padding:20px 16px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));
  color:#F2F0EB;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:left;
  opacity:0;transition:opacity .4s ease;
}
.slot.on .slot-cap{opacity:1;}

.rack-hud{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 40px 24px;pointer-events:none;
}
.rack-hud span{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#7C766D;
}
.rack-hud .now{color:#F2F0EB;}

.rack-tabs{
  position:absolute;left:0;right:0;top:0;z-index:10;
  display:flex;gap:5px;flex-wrap:wrap;padding:20px 40px;
}

/* touch fallback: a plain horizontal reel, in colour */
.rack-stage.touch{cursor:default;height:auto;padding:20px 0 30px;}
.rack-stage.touch .rack{
  position:relative;top:auto;transform:none;height:auto;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px;gap:12px;
  -webkit-overflow-scrolling:touch;
}
.rack-stage.touch .rack::-webkit-scrollbar{height:0;}
.rack-stage.touch .slot{
  height:52vh;width:auto;margin-right:0;scroll-snap-align:center;
  transform:none;filter:none;box-shadow:none;
}
.rack-stage.touch .slot .slot-cap{opacity:1;}
.rack-stage.touch .rack-hud{position:static;padding:16px 22px 0;}
.rack-stage.touch .rack-tabs{position:static;padding:0 22px 16px;}

@media (max-width:1080px){
  .cover-grid{grid-template-columns:1fr;gap:var(--gap-m);}
  .cover-portrait{max-width:380px;}
  .method{grid-template-columns:1fr;gap:var(--gap-m);}
  .mframe{aspect-ratio:1/.66;}
  .mcap{min-height:170px;}
  .pstage-grid{grid-template-columns:1fr;gap:var(--gap-m);}
  .pstage{position:static;}
  .pframe{aspect-ratio:1/.62;}
  .tl-panel{grid-template-columns:1fr;gap:20px;}
  .acover-text{width:min(520px,66%);}
  .acover-scrim{background:linear-gradient(100deg,rgba(252,251,248,0) 0%,rgba(252,251,248,.5) 26%,rgba(252,251,248,.94) 46%,var(--paper) 64%);}
  .slot{margin-right:16px;}
  .rack{padding:0 40vw 0 8vw;}
}

@media (max-width:760px){
  .cover{padding-top:26px;}
  .cover-text h1{max-width:none;}
  .cover-portrait{max-width:100%;}
  .mcap .open-g{margin-left:0;}
  .mline{grid-template-columns:56px minmax(0,1fr);gap:10px;}
  .tl-nodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px;}
  .tl-rail .line,.tl-rail .line-fill,.tl-rail .line-open{display:none;}
  .tlnode .dot{position:static;transform:none;margin-bottom:12px;}
  .tlnode.on .dot{transform:scale(1.4);}
  .tl-open-label{display:none;}
  .tl-stage{min-height:0;}
  .tl-panel{position:relative;top:0;}
  .tl-panel:not(.on){display:none;}
  .acover{min-height:0;padding:0;}
  .acover-text{width:100%;padding:220px 0 40px;}
  .acover-scrim{background:linear-gradient(to bottom,rgba(252,251,248,0) 0%,rgba(252,251,248,.55) 30%,rgba(252,251,248,.96) 48%,var(--paper) 62%);}
  .acover-img img{object-position:32% 30%;}
  .rack-hud{padding:14px 22px 18px;}
}


/* ---------- studio: tools and templates ---------- */

.sgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.scard{background:var(--paper);padding:40px 36px 34px;display:flex;flex-direction:column;}
.scard.soon{background:var(--paper-dim);}
.sicon{display:block;width:44px;height:44px;margin-bottom:26px;}
.sicon svg{width:100%;height:100%;}
.stag{
  display:inline-block;align-self:flex-start;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:100px;padding:4px 10px;margin-bottom:16px;
}
.scard h3{font-size:var(--step-2);margin-bottom:14px;letter-spacing:-0.022em;}
.scard p{font-size:15px;line-height:1.68;color:var(--ink-soft);}
.sfoot{
  margin-top:auto;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.sprice{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.slink{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;
}

@media (max-width:760px){
  .sgrid{grid-template-columns:1fr;}
  .scard{padding:30px 24px 26px;}
}