/* ============================================================
   FRESH — design system
   Palette: Pass the Salt paper/ink/taupe/dusty + Fresh blue #0057FF
   ============================================================ */

:root{
  --paper:#FDFAF1; --ink:#15171A; --muted:#6F6A60; --line:#E4DBCE;
  --panel:#F6F2E7; --taupe:#E2D7CE; --dusty:#A3E1EA; --blue:#0057FF;
  --on-blue:#FDFAF1; --on-dusty:#15171A; --shadow:rgba(21,23,26,.10);
  --warm:#B05A4E; --on-warm:#FDFAF1;
  --r-lg:28px; --r-md:20px;
  --rhythm:clamp(30px,4.2vw,58px);
  --maxw:1400px;
  --pad:clamp(20px,4vw,56px);

  /* motion: four steps, not nineteen ad-hoc durations */
  --t-fast:.2s; --t-base:.35s; --t-slow:.7s; --t-reveal:.9s;
  --ease:cubic-bezier(.16,1,.3,1);

  /* elevation: three levels; the old set differed by 2-4px and read the same */
  --e1:0 6px 24px var(--shadow);
  --e2:var(--e2);
  --e3:0 20px 48px var(--shadow);

  /* the two small radii the components actually needed */
  --r-xs:3px; --r-sm:8px;
}
body[data-mode="dark"]{
  --paper:#101216; --ink:#EFEADF; --muted:#8E887C; --line:#23262C;
  --panel:#171A1F; --taupe:#2A2622; --dusty:#A3E1EA; --blue:#4C86FF;
  --on-blue:#08101F; --on-dusty:#15171A; --shadow:rgba(0,0,0,.5);
  --warm:#C97C62; --on-warm:#15171A;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background var(--t-base) ease,color var(--t-base) ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r-xs)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;padding:10px 16px;min-height:24px}
.skip:focus{left:12px;top:12px;z-index:300;background:var(--blue);color:var(--on-blue);padding:12px 18px;border-radius:100px}

/* ---------- type ---------- */
.display{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-variation-settings:"wdth" 125,"wght" 900;
  text-transform:uppercase; letter-spacing:-.035em; line-height:.86;
}
.label{
  font-family:"Martian Mono",ui-monospace,monospace; font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.prose p{font-size:clamp(16px,1.3vw,18.5px);line-height:1.65;color:var(--muted);max-width:66ch;margin-bottom:18px}
.prose p b,.prose p strong{color:var(--ink);font-weight:600}

/* ---------- progress + cursor ---------- */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--blue);width:0;z-index:200;transition:width .1s linear}
#dot{
  position:fixed;top:0;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--blue);pointer-events:none;z-index:199;
  transform:translate(-50%,-50%);transition:width var(--t-fast),height var(--t-fast),opacity var(--t-base);opacity:0;
}
body.hovering #dot{width:46px;height:46px;opacity:.22}
@media (hover:hover) and (pointer:fine){body.cursor-on #dot{opacity:1}}

/* ---------- nav ---------- */
nav{
  /* left:50% and auto margins both resolve against the initial containing
     block, which the CV page's 560px skills matrix stretches to 554 -- that
     put the nav 92px off-centre at 390px. vw is viewport-relative, so it
     stays centred whatever the page width does. */
  position:fixed;top:16px;left:50vw;transform:translateX(-50%);z-index:150;
  display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:100px;
  padding:8px 8px 8px 20px;box-shadow:var(--e1);
  max-width:calc(100vw - 32px);
}
nav .mark{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118,"wght" 900;
  text-transform:uppercase;font-size:17px;letter-spacing:-.02em;margin-right:14px;
  display:inline-flex;align-items:center;min-height:24px;
}
nav .nl{display:flex;gap:20px;font-size:13px;color:var(--muted);margin-right:12px}
nav .nl a:hover,nav .nl a[aria-current]{color:var(--ink)}
nav .pill{
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;
  font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;background:none;color:inherit;
  cursor:pointer;transition:var(--t-fast);white-space:nowrap;
}
nav .pill:hover{background:var(--panel)}
nav .pill.solid{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
nav .lang b{color:var(--blue)}
/* ---------- hamburger ----------
   Below 900px the links used to be display:none with nothing replacing
   them, so a phone had no navigation at all. They now collapse into a
   panel under the nav pill. */
nav .burger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:32px;padding:0}
nav .burger i{display:block;width:15px;height:1.6px;background:currentColor;border-radius:var(--r-xs);
  transition:transform var(--t-fast) cubic-bezier(.16,1,.3,1),opacity var(--t-fast) ease}
nav.open .burger i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
nav.open .burger i:nth-child(2){opacity:0}
nav.open .burger i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media(max-width:900px){
  nav .burger{display:flex}
  nav .nl{
    display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;gap:0;margin-right:0;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
    padding:8px;box-shadow:var(--e2);
  }
  nav.open .nl{display:flex}
  nav .nl a{padding:13px 16px;border-radius:14px;font-size:16px;color:var(--ink)}
  nav .nl a:hover,nav .nl a[aria-current]{background:var(--panel)}
}
/* At 390px the bar's children summed to ~403px inside a 358px shell, so the
   contact pill hung 22px off the right edge on every page. Nothing here
   removes a control; it just tightens the row until it fits. */
@media(max-width:520px){
  nav{gap:5px;padding:7px 7px 7px 12px;max-width:calc(100vw - 20px)}
  nav .mark{font-size:16px;margin-right:6px}
  nav .pill{padding:7px 11px;font-size:9px}
  nav .burger{padding:7px 9px}
}
@media(max-width:360px){
  /* Below this the theme toggle is the one control with a keyboard and OS
     equivalent, so it is the one that goes. */
  nav .pill#mode{display:none}
}
@media (prefers-reduced-motion:reduce){nav .burger i{transition:none}}

/* ---------- reveal primitives ---------- */
.rl{overflow:hidden;display:block;padding-top:.08em;margin-top:-.08em}
.rl>span{display:block;transform:translateY(105%);transition:transform var(--t-reveal) cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.rl.in>span{transform:none}
.fu{opacity:0;transform:translateY(26px);transition:opacity var(--t-reveal) cubic-bezier(.16,1,.3,1),transform var(--t-reveal) cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.fu.in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 28px;border-radius:100px;font-size:15px;font-weight:600;
  background:var(--blue);color:var(--on-blue);border:1.5px solid var(--blue);
  cursor:pointer;transition:transform var(--t-base) cubic-bezier(.16,1,.3,1),background var(--t-fast),color var(--t-fast);
}
.btn:hover{transform:translateY(-3px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn .ar{transition:transform var(--t-base)}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- hero ---------- */
header.hero{padding:clamp(130px,17vh,190px) var(--pad) clamp(50px,7vh,80px);max-width:var(--maxw);margin:0 auto}
header.hero h1{font-size:clamp(46px,12.2vw,196px)}
header.hero h1 i{font-style:normal;display:inline-block;font-variation-settings:"wdth" 62,"wght" 900;transition:font-variation-settings 1.5s cubic-bezier(.16,1,.3,1) var(--t-fast)}
body.lit header.hero h1 i{font-variation-settings:"wdth" 125,"wght" 900}
.hero-foot{display:flex;gap:clamp(24px,5vw,80px);align-items:flex-end;flex-wrap:wrap;margin-top:clamp(30px,4vw,52px)}
.hero-foot p{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--muted);max-width:40ch}
.hero-foot p b{color:var(--ink);font-weight:600}

/* ---------- marquee ---------- */
.mq{background:var(--blue);color:var(--on-blue);padding:18px 0;overflow:hidden;white-space:nowrap;margin:clamp(30px,5vw,60px) 0 0}
.mq-in{display:inline-flex;will-change:transform}
.mq-in span{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 800;
  text-transform:uppercase;font-size:clamp(20px,2.8vw,38px);letter-spacing:-.02em;
  padding:0 26px;display:inline-block;
}
.mq-in span em{font-style:normal;opacity:.45}

/* ---------- sections ---------- */
section{padding:clamp(64px,9vw,130px) 0}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,3.5vw,46px)}
.shead .label{color:var(--blue)}
.shead h2{font-size:clamp(30px,5.2vw,74px)}

/* ---------- work rail ---------- */
#work{padding-bottom:0}
.pin{height:500vh;position:relative}
/* column layout so the hint is laid out below the rail rather than
   absolutely positioned over it — at short viewports the cards grew
   under the hint and collided with it */
.stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
/* the rail takes the leftover height and centres the cards inside it, so
   the hint below always keeps its space even on short viewports */
.rail{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;gap:22px;
  padding:clamp(10px,4.5vh,54px) var(--pad);will-change:transform}
.wc{
  flex:0 0 clamp(290px,38vw,520px);border-radius:var(--r-lg);
  min-height:0;max-height:100%;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid transparent;transition:transform var(--t-base) cubic-bezier(.16,1,.3,1);
}
.wc:hover{transform:translateY(-8px)}

/* image slot — always visible, never hover-to-reveal:
   touch devices have no hover and the work must be seen on arrival */
/* Text sizes itself and is never clipped; the image absorbs whatever
   space is left over, down to a floor. A fixed 44% basis clipped copy
   on short viewports. */
.wc .shot{flex:1 1 auto;min-height:clamp(72px,15vh,240px);position:relative;overflow:hidden;background:rgba(21,23,26,.07)}
.wc .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow) cubic-bezier(.16,1,.3,1)}
.wc:hover .shot img{transform:scale(1.05)}
.wc .shot .ph{width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:0;border-bottom:1px dashed var(--line)}
.wc .body{padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;flex:0 0 auto}
/* two rows reserved so the text block stays one height whether the tags
   wrap or not — otherwise cards drift apart as the viewport narrows */
.wc .tg{margin-top:auto;padding-top:14px;min-height:92px;align-content:flex-start}
.wc .n{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.13em;opacity:.6}
/* Titles are bottom-aligned inside a two-line box, so a one-line title
   (WILD) sits on the same baseline as the second line of a two-line one
   (AMBERG / LOGLAY). The inner span keeps the <br> inside a single flex
   item — without it each line would become its own flex item. */
.wc h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 800;text-transform:uppercase;font-size:clamp(26px,3.3vw,46px);line-height:.92;letter-spacing:-.03em;margin:16px 0 12px;
  min-height:1.84em;display:flex;align-items:flex-end}
.wc h3 span{display:block}
/* fixed three lines so every card below Friendly Spaces has an
   identically sized text block */
.wc p{font-size:15px;line-height:1.55;opacity:.78;max-width:38ch;min-height:7.75em}
.wc .cred{margin-top:16px;font-size:13px;line-height:1.55;opacity:.72;border-top:1px solid currentColor;padding-top:12px}
.wc .cred b{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;opacity:.7;display:block;margin-bottom:2px}
.wc .cred span{display:block;margin-bottom:7px}
.wc .cred span:last-child{margin-bottom:0}
.wc .tg{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.wc .tg i{font-style:normal;font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;border:1px solid currentColor;opacity:.6;padding:5px 10px;border-radius:100px}
.wc.c1{background:var(--dusty);color:var(--on-dusty)}
.wc.c2{background:var(--taupe);color:var(--ink)}
.wc.c3{background:var(--blue);color:var(--on-blue)}
.wc.c4{background:var(--panel);color:var(--ink);border-color:var(--line)}
.wc.c5{background:var(--ink);color:var(--paper)}
.wc.c6{background:var(--dusty);color:var(--on-dusty)}
.stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.stats div b{display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 800;font-size:clamp(26px,3vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.stats div span{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.62;display:block;margin-top:5px}
.railhint{align-self:center;flex:0 0 auto;padding-bottom:clamp(24px,4.5vh,52px);color:var(--muted);display:flex;align-items:center;gap:10px}
/* a card cannot be shorter than roughly 405px (fixed text block + minimum
   image), so below this height there is no room for the hint and it would
   sit on top of the cards. Hide it rather than collide. */
@media (max-height:560px){.railhint{display:none}}
.railbar{width:120px;height:2px;background:var(--line);border-radius:var(--r-xs);overflow:hidden}
.railbar i{display:block;height:100%;width:0;background:var(--blue)}

/* ---------- pillar cards ---------- */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 26px 30px;transition:transform var(--t-base) cubic-bezier(.16,1,.3,1),background var(--t-base)}
.pc:hover{transform:translateY(-7px);background:var(--paper)}
.pc .num{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.12em;color:var(--blue);display:block;margin-bottom:22px}
.pc h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 800;text-transform:uppercase;font-size:20px;letter-spacing:-.02em;margin-bottom:9px}
.pc p{font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- diagnostic (stays dark in both themes) ---------- */
.diag{background:#15171A;color:#FDFAF1;border:1px solid transparent;border-radius:var(--r-lg);padding:clamp(32px,5vw,72px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,60px);align-items:center}
body[data-mode="dark"] .diag{background:#171A1F;border-color:#23262C}
.diag h2{font-size:clamp(30px,4.4vw,62px);margin-bottom:18px}
.diag>div>p{font-size:17px;line-height:1.6;opacity:.72;max-width:44ch;margin-bottom:26px}
.diag .btn{background:var(--dusty);border-color:var(--dusty);color:#15171A}
.quiz{background:rgba(253,250,241,.055);border:1px solid rgba(253,250,241,.16);border-radius:var(--r-md);padding:26px}
.quiz .q{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-bottom:14px}
.quiz .ask{font-size:20px;font-weight:600;line-height:1.35;margin-bottom:20px}
.opt{border:1px solid rgba(253,250,241,.2);border-radius:100px;padding:13px 20px;font-size:14px;margin-bottom:9px;cursor:pointer;transition:var(--t-fast);display:flex;justify-content:space-between;align-items:center;gap:12px}
.opt:hover,.opt.sel{background:var(--dusty);color:#15171A;border-color:var(--dusty)}
.opt span{opacity:.45;font-family:"Martian Mono",monospace;font-size:9px}
.qbar{height:3px;background:rgba(253,250,241,.15);border-radius:var(--r-xs);margin-top:20px;overflow:hidden}
.qbar i{display:block;height:100%;width:33%;background:var(--dusty);transition:width var(--t-base) cubic-bezier(.16,1,.3,1)}
@media(max-width:900px){.diag{grid-template-columns:1fr}}

/* ---------- illustration cards ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ic{border-radius:var(--r-md);overflow:hidden;min-height:440px;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel);transition:transform var(--t-base) cubic-bezier(.16,1,.3,1)}
.ic:hover{transform:translateY(-7px)}
/* illustration is the point here, so the image leads */
.ic .shot{flex:1 1 230px;min-height:140px;position:relative;overflow:hidden;background:rgba(21,23,26,.06)}
.ic .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow) cubic-bezier(.16,1,.3,1)}
.ic:hover .shot img{transform:scale(1.05)}
.ic .shot .ph{width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:0;border-bottom:1px dashed var(--line)}
.ic .body{padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.ic h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110,"wght" 800;text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.025em;margin-bottom:10px}
.ic p{font-size:15px;line-height:1.55;color:var(--muted);max-width:36ch}
.ic .cred{margin-top:14px;font-size:13px;line-height:1.55;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.ic .cred b{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;opacity:.8;display:block;margin-bottom:2px}
.ic .cred span{display:block;margin-bottom:7px}
.ic .cred span:last-child{margin-bottom:0}
.ic .tech{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
@media(max-width:820px){.two{grid-template-columns:1fr}}

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.case-hero{padding:clamp(120px,16vh,170px) var(--pad) clamp(30px,4vw,50px);max-width:var(--maxw);margin:0 auto}
/* Small type is fine; a small hit area is not. Vertical padding lifts these
   to the 24px minimum without moving anything visually, because the extra
   height is absorbed by the margin below. */
.case-hero .back{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:inline-block;
  padding:7px 4px;margin:-7px -4px 19px}
.case-hero .back:hover{color:var(--blue)}
.case-hero h1{font-size:clamp(42px,9.5vw,140px);margin-bottom:24px}
.case-hero .sub{font-size:clamp(18px,2vw,26px);line-height:1.4;max-width:30ch;color:var(--muted)}

/* credit strip */
.factbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(36px,5vw,60px)}
/* Columns sized to their content and spread edge to edge, so the gaps
   between facts are equal. Equal-width columns made them look uneven,
   because the values differ a lot in length. */
.factbar-in{max-width:var(--maxw);margin:0 auto;padding:26px var(--pad);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:24px clamp(24px,4vw,56px)}
.factbar-in > div{flex:0 1 auto;max-width:340px}
.factbar dt{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.factbar dd{font-size:15px;line-height:1.5;font-weight:500}

/* full-bleed image band */
.band{margin:var(--rhythm) 0;background:var(--panel)}
.band img{width:100%;height:auto}
.band.tint{background:var(--dusty)}
.figure{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.figure figcaption,.band figcaption{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px;text-align:center;padding-bottom:14px}

/* placeholder until real assets land */
.ph{
  aspect-ratio:16/9;border-radius:var(--r-md);
  background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 14px,var(--paper) 14px,var(--paper) 28px);
  border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:"Martian Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:center;padding:20px;
}
.ph.tall{aspect-ratio:4/5}
.ph.square{aspect-ratio:1/1}

/* narrative blocks */
.chapter{max-width:var(--maxw);margin:0 auto;padding:var(--rhythm) var(--pad)}
/* .chapter spaces itself with padding; .band, .split and .shelf use margin.
   Where the two meet, both fire and the gap doubles -- 116px against 58px
   elsewhere. Collapse the pair so only one side contributes. */
.band + .chapter,.split + .chapter,.shelf + .chapter,
.feed + .chapter,.tiles-wrap + .chapter{padding-top:0}
.chapter + .band,.chapter + .split,.chapter + .shelf,
.chapter + .feed,.chapter + .tiles-wrap,.chapter + .dashrow-wrap{margin-top:0}
/* Two chapters in a row each contribute their own padding: 116 again. */
.chapter + .chapter{padding-top:0}
/* .dashrow-wrap has a top margin only, so the chapter after it must keep
   its padding or the two collide. */
/* .split carried both a margin and a padding of its own, so it was 116 on
   every side before it even met a neighbour. */
.split{padding:var(--rhythm) 0;margin:0}
.chapter-grid{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.chapter-grid h2{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110,"wght" 800;text-transform:uppercase;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;line-height:1.05;position:sticky;top:100px}
@media(max-width:820px){
  .chapter-grid{grid-template-columns:1fr}
  .chapter-grid h2{position:static}
}
.pullquote{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 700;
  font-size:clamp(22px,3.2vw,40px);line-height:1.14;letter-spacing:-.025em;
  max-width:22ch;margin:clamp(30px,4vw,52px) 0;color:var(--ink);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}

/* next project */
.nextup{border-top:1px solid var(--line);padding:clamp(40px,6vw,80px) var(--pad);max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.nextup .label{color:var(--muted)}
.nextup a{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 115,"wght" 900;text-transform:uppercase;font-size:clamp(28px,6vw,72px);letter-spacing:-.03em;line-height:1}
.nextup a:hover{color:var(--blue)}

/* ---------- closer + footer ---------- */
.closer{text-align:center;padding:clamp(64px,9vw,130px) var(--pad) clamp(70px,10vw,140px);max-width:var(--maxw);margin:0 auto}
.closer h2{font-size:clamp(40px,10.5vw,170px);margin-bottom:32px}
.closer .ctas{justify-content:center}
footer{border-top:1px solid var(--line);padding:26px 0 44px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted)}
footer a{display:inline-block;padding:6px 3px;margin:-6px -3px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rl>span{transform:none}
  .fu{opacity:1;transform:none}
  .pin{height:auto}
  .stick{position:static;height:auto;display:block;padding:40px 0}
  .rail{transform:none!important;overflow-x:auto;padding-bottom:20px}
  .chapter-grid h2{position:static}
}

/* ============================================================
   SERVICES / PRICING
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 28px 32px;display:flex;flex-direction:column;transition:transform var(--t-base) cubic-bezier(.16,1,.3,1),background var(--t-base)}
.tier:hover{transform:translateY(-7px);background:var(--paper)}
.tier.feature{background:var(--dusty);color:var(--on-dusty);border-color:transparent}
.tier.feature .price,.tier.feature h3{color:var(--on-dusty)}
.tier.feature li{color:#2C393B}
.tier .kind{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-bottom:16px}
.tier h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 800;text-transform:uppercase;font-size:21px;letter-spacing:-.02em;margin-bottom:12px}
.tier .price{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 800;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.03em;margin-bottom:4px;font-variant-numeric:tabular-nums}
.tier .price small{font-family:"Instrument Sans",sans-serif;font-size:13px;font-weight:500;letter-spacing:0;opacity:.6;display:block;margin-top:7px}
.tier ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:9px}
.tier li{font-size:14px;line-height:1.5;color:var(--muted);padding-left:18px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:1.5px;background:var(--blue)}
.tier .btn{margin-top:auto;align-self:flex-start}

.note{border-left:3px solid var(--blue);padding:2px 0 2px 18px;margin:clamp(28px,4vw,44px) 0;font-size:17px;line-height:1.6;color:var(--muted);max-width:62ch}

/* about */
.bio{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:820px){.bio{grid-template-columns:1fr}}
.sidelist dt{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.sidelist dd{font-size:15px;line-height:1.55;margin:0 0 20px}
.sidelist dd:last-child{margin-bottom:0}

/* ============================================================
   DIAGNOSTIC
   ============================================================ */
.dg{max-width:860px;margin:0 auto;padding:0 var(--pad)}
.dg-card{background:#15171A;color:#FDFAF1;border-radius:var(--r-lg);padding:clamp(28px,4vw,52px);border:1px solid transparent}
body[data-mode="dark"] .dg-card{background:#171A1F;border-color:#23262C}
.dg-step{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-bottom:16px}
.dg-q{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 700;font-size:clamp(22px,3.2vw,36px);line-height:1.12;letter-spacing:-.025em;margin-bottom:26px}
.dg-opts{display:flex;flex-direction:column;gap:9px}
.dg-opt{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;
  border:1px solid rgba(253,250,241,.22);border-radius:100px;padding:15px 22px;font-size:15px;
  background:none;color:inherit;font-family:inherit;cursor:pointer;transition:var(--t-fast)}
.dg-opt:hover,.dg-opt.sel{background:var(--dusty);color:#15171A;border-color:var(--dusty)}
.dg-opt i{font-style:normal;font-family:"Martian Mono",monospace;font-size:9px;opacity:.5}
.dg-bar{height:3px;background:rgba(253,250,241,.15);border-radius:var(--r-xs);margin-top:26px;overflow:hidden}
.dg-bar i{display:block;height:100%;width:0;background:var(--dusty);transition:width var(--t-base) cubic-bezier(.16,1,.3,1)}
.dg-back{margin-top:18px;background:none;border:0;color:inherit;opacity:.5;cursor:pointer;
  font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.11em;text-transform:uppercase}
.dg-back:hover{opacity:1}
.dg-back[hidden]{display:none}
.dg-result h2{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 800;text-transform:uppercase;
  font-size:clamp(26px,4vw,52px);letter-spacing:-.03em;line-height:.95;margin-bottom:26px}
.dg-block{border-top:1px solid rgba(253,250,241,.18);padding:22px 0}
.dg-block:first-of-type{border-top:0;padding-top:0}
.dg-block h3{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dusty);margin-bottom:12px}
.dg-block p{font-size:17px;line-height:1.6;opacity:.85;max-width:60ch;margin-bottom:12px}
.dg-block p:last-child{margin-bottom:0}
.dg-block b{opacity:1;font-weight:600}
.dg-form{margin-top:28px;border-top:1px solid rgba(253,250,241,.18);padding-top:26px}
.dg-form p{font-size:15px;line-height:1.55;opacity:.72;margin-bottom:16px;max-width:52ch}
.dg-fields{display:flex;gap:10px;flex-wrap:wrap}
.dg-fields input{flex:1 1 240px;background:rgba(253,250,241,.07);border:1px solid rgba(253,250,241,.22);
  border-radius:100px;padding:14px 22px;color:#FDFAF1;font-family:inherit;font-size:15px}
.dg-fields input::placeholder{color:rgba(253,250,241,.45)}
.dg-fields input:focus{outline:2px solid var(--dusty);outline-offset:2px}
.dg-fields button{background:var(--dusty);color:#15171A;border:0;border-radius:100px;padding:14px 30px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform var(--t-base) cubic-bezier(.16,1,.3,1)}
.dg-fields button:hover{transform:translateY(-2px)}
.dg-hp{position:absolute;left:-9999px}
.dg-again{margin-top:22px}

/* ============================================================
   PROCESS / RESULT SPLIT
   Opt-in by click: the wheel is untouched until the deck is clicked, and
   leaving the pane disarms it, so it can never trap a reader.
   ============================================================ */
.split{background:var(--panel);padding:var(--rhythm) 0;margin:var(--rhythm) 0}
.split-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.splitgrid{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(16px,2.5vw,34px);align-items:stretch}
.splitpane{position:relative;height:clamp(300px,56vh,520px);display:flex;align-items:center;justify-content:center;cursor:pointer}
.splitpane img{position:absolute;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;opacity:0;transition:opacity var(--t-base) ease;
  border-radius:var(--r-sm);box-shadow:var(--e2);background:var(--paper)}
.splitpane img.on{opacity:1}
.splitcap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;min-height:14px}
.splitcap b{color:var(--blue);font-weight:600}
.splithint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  pointer-events:none;transition:opacity var(--t-base) ease}
.splithint span{display:inline-block;white-space:nowrap;
  background:var(--ink);color:var(--paper);border-radius:100px;padding:9px 18px;
  font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;box-shadow:var(--e1)}
.split.armed .splithint span{background:var(--blue);color:var(--on-blue)}
.split.armed .splitpane{cursor:ns-resize}
.split.armed #deckpane img.on{outline:2px solid var(--blue);outline-offset:6px;border-radius:var(--r-sm)}
.splitctl{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.splitctl button{border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:100px;width:38px;height:38px;cursor:pointer;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;transition:var(--t-fast)}
.splitctl button:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.splitctl button:disabled{opacity:.35;cursor:default}
.splitbar{flex:1;min-width:80px;height:2px;background:var(--line);border-radius:var(--r-xs);overflow:hidden}
.splitbar i{display:block;height:100%;width:0;background:var(--blue);transition:width var(--t-base) ease}
.splitcount{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}

/* explanation cards beside the deck */
.splitpane.notes{cursor:default}
.splitpane .note-card{position:absolute;inset:0;opacity:0;transition:opacity var(--t-base) ease;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,2.4vw,34px);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--paper)}
.splitpane .note-card.on{opacity:1}
.splitpane .note-card h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 800;
  text-transform:uppercase;font-size:clamp(17px,1.9vw,22px);letter-spacing:-.02em;margin-bottom:12px}
.splitpane .note-card p{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.splitpane .note-card p:last-child{margin:0}
@media(max-width:820px){.splitgrid{grid-template-columns:1fr}.splitpane{height:clamp(240px,42vh,360px)}}
@media (prefers-reduced-motion:reduce){.splitpane img{transition:none}}

/* ---------- hero slideshow ---------- */
.heroshow{position:relative;width:100%;height:min(88vh,880px);overflow:hidden;background:var(--ink)}
.heroshow figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--t-reveal) ease}
.heroshow figure.on{opacity:1}
.heroshow picture{display:block;width:100%;height:100%}
.heroshow img,.heroshow video{width:100%;height:100%;object-fit:cover;display:block}
.heroshow .hs-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;display:flex;gap:7px}
.heroshow .hs-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(253,250,241,.42);transition:var(--t-fast)}
.heroshow .hs-dots button.on{background:var(--paper);width:22px;border-radius:100px}
@media (prefers-reduced-motion:reduce){
  .heroshow figure{transition:none}
  .heroshow figure:not(:first-child){display:none}
  .heroshow figure:first-child{opacity:1}
}

/* ---------- closing trio: two stills flanking the Instagram reel ----------
   All three are 9:16 and identically sized. <picture> must be block with a
   height, or the <img> inside cannot resolve height:100% and collapses to
   its natural size while the video fills its box. */
.trio{max-width:940px;margin:0 auto;
  padding:clamp(30px,5vw,60px) var(--pad) clamp(40px,6vw,80px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.6vw,18px);align-items:start}
.trio figure{margin:0;aspect-ratio:9/16;overflow:hidden;border-radius:var(--r-md)}
.trio picture{display:block;width:100%;height:100%}
.trio img,.trio video{width:100%;height:100%;object-fit:cover;display:block}
.trio video{background:#000}
@media(max-width:700px){
  .trio{grid-template-columns:1fr;max-width:320px}
  .trio figure:first-child,.trio figure:last-child{display:none}
}

/* ---------- the feed: nine tiles, the way a profile grid reads ---------- */
.feed{padding:var(--rhythm) 0}
.feed-in{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4px,0.8vw,8px)}
.feed-grid figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--panel);position:relative}
.feed-grid picture{display:block;width:100%;height:100%}
.feed-grid img,.feed-grid video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-base) cubic-bezier(.16,1,.3,1)}
.feed-grid figure:hover img,.feed-grid figure:hover video{transform:scale(1.05)}

/* ============================================================
   WIREFRAME SHELF — full-page designs as a scrollable row of page tops
   ============================================================ */
.shelf{padding:var(--rhythm) 0}
.shelf-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--pad) 22px;-webkit-overflow-scrolling:touch}
.shelf-row figure{margin:0;flex:0 0 clamp(220px,25vw,320px);scroll-snap-align:start}
/* A phone layout in a desktop-width card reads as a giant phone. Narrow it
   to phone proportions; the frame height is shared, so the row still aligns. */
.shelf-row figure.phone{flex-basis:clamp(140px,15vw,200px)}
/* Tall: these are full-page designs, and a short frame crops them to a sliver
   that tells the reader nothing about the page. */
.shelf-row .frame{height:clamp(420px,72vh,760px);overflow:hidden;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--e1)}
.shelf-row img{width:100%;height:auto;display:block}
.shelf-row figcaption{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:9px}
.shelf-row::-webkit-scrollbar{height:6px}
.shelf-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-sm)}

.tallframe{max-width:820px;margin:0 auto;height:clamp(360px,62vh,620px);
  overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);box-shadow:var(--e2)}
.tallframe img{width:100%;display:block}
.tallcap{max-width:820px;margin:12px auto 0;text-align:center;
  font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}

.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.beforeafter div{border:1px solid var(--line);border-radius:var(--r-md);padding:24px 22px;background:var(--panel)}
.beforeafter h4{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.beforeafter p{font-size:16px;line-height:1.55;margin:0 0 8px}
.beforeafter b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 700;
  font-size:19px;letter-spacing:-.01em;display:block;margin-bottom:8px}
@media(max-width:700px){.beforeafter{grid-template-columns:1fr}}

/* ---------- shared figure / grid image behaviour ---------- */
.figure img,.band img{width:100%;height:auto;border-radius:var(--r-md)}
.band.full img{border-radius:0}
.grid2 img,.grid3 img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);display:block}
.grid2 figure,.grid3 figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-md)}
.grid2 figure.wide,.grid3 figure.wide{aspect-ratio:4/3}
.feed-grid a{display:block;overflow:hidden;background:var(--panel)}
.feed-grid a:hover img{transform:scale(1.04)}
.trio figcaption{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-top:12px;text-align:center}

/* ============================================================
   TILES -- a square grid of animated portraits
   ============================================================ */
.tiles-wrap{max-width:1080px;margin:0 auto;padding:var(--rhythm) var(--pad)}
/* Flex rather than grid so a part-full last row centres instead of hanging
   off the left edge. --tcols carries the column count into the width calc. */
.tiles{--tgap:clamp(10px,1.4vw,18px);--tcols:4;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--tgap)}
@media(max-width:760px){.tiles{--tcols:3}}
@media(max-width:520px){.tiles{--tcols:2}}
.tiles figure{margin:0;flex:0 0 calc((100% - (var(--tcols) - 1) * var(--tgap)) / var(--tcols))}
.tiles .t{aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-md);background:var(--panel)}
.tiles video{width:100%;height:100%;object-fit:cover;display:block}
.tiles figcaption{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-top:9px;text-align:center;line-height:1.4}

/* ---------- work rail on short viewports ----------
   A laptop is wide and short. The card's reserved text blocks used to add
   up to more than the rail's height, so cards were clipped top and bottom
   and spilled over the scroll hint. Cards now stretch to the rail box; the
   reservations that made them too tall relax as height runs out. */
@media (max-height:840px){
  .wc p{min-height:0}
  .wc .tg{min-height:0}
  .wc h3{font-size:clamp(24px,2.8vw,38px);margin:12px 0 10px}
  .stats{margin-top:16px;gap:18px}
  .stats div b{font-size:clamp(22px,2.4vw,32px)}
}
@media (max-height:700px){
  .wc .body{padding:18px 20px}
  .wc p{font-size:14px;line-height:1.5}
  .wc .tg{padding-top:10px;margin-top:auto}
  .wc .tg i{padding:4px 8px}
  .railhint{padding-bottom:22px}
}

/* ============================================================
   CV TIMELINE
   Two validated series: the Fresh blue for employed roles, terracotta for
   her own agency. Checked on both surfaces with the dataviz checker --
   light #FDFAF1 #0057FF/#C2410C protan dE 34.0, dark #101216
   #4C86FF/#E2703A protan dE 28.0, all six checks pass. Study is the
   neutral dashed track, not a third hue. Every bar is direct-labelled, so
   identity never rests on colour alone.
   ============================================================ */
:root{--s-edu:#8C8579}
body[data-mode="dark"]{--s-edu:#8E887C}

.cvsec{padding:clamp(40px,6vw,80px) 0}
.cvh2{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110,"wght" 800;
  text-transform:uppercase;font-size:clamp(24px,3.4vw,42px);letter-spacing:-.03em;
  line-height:.98;margin-top:10px}
.cvhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(22px,3vw,38px)}
.cvnote{font-size:13px;color:var(--muted);max-width:34ch}

.cvstats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,26px);
  padding:clamp(24px,4vw,44px) 0;border-bottom:1px solid var(--line)}
.cvstats b{display:block;font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 108,"wght" 800;
  font-size:clamp(30px,5vw,62px);line-height:1;font-variant-numeric:tabular-nums}
.cvstats span{display:block;margin-top:8px;font-family:"Martian Mono",monospace;
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
@media(max-width:620px){.cvstats{grid-template-columns:repeat(2,1fr);row-gap:26px}}

.cvlegend{display:flex;gap:16px;flex-wrap:wrap;font-family:"Martian Mono",monospace;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cvlegend span{display:inline-flex;align-items:center;gap:7px}
.sw{width:12px;height:12px;border-radius:var(--r-xs);display:inline-block}
.sw.k-employed{background:var(--blue)}
.sw.k-own{background:var(--warm)}
.sw.k-edu{background:transparent;border:1px solid var(--blue);
  background-image:repeating-linear-gradient(45deg,transparent 0 3px,
    color-mix(in srgb,var(--blue) 62%,transparent) 3px 4px)}

.cvgrid{display:grid;grid-template-columns:1fr 300px;gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:900px){.cvgrid{grid-template-columns:1fr}}

/* ---- the chart ---- */
.cvchart{position:relative;padding-top:30px}
.cvaxis{position:absolute;inset:0;pointer-events:none}
.cvtick{position:absolute;top:0;bottom:0}
.cvtick i{position:absolute;top:26px;bottom:0;left:0;width:1px;background:var(--line)}
.cvtick em{position:absolute;top:4px;left:0;transform:translateX(-50%);font-style:normal;
  font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.08em;color:var(--muted)}
.cvnow{position:absolute;top:26px;bottom:0;width:1px;background:var(--muted);opacity:.55}
.cvnow em{position:absolute;top:-22px;left:0;transform:translateX(-50%);font-style:normal;
  font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

.cvtrack{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:20px 0 8px}
.cvrow{position:relative;height:46px;margin-bottom:6px}
.cvbar{position:absolute;top:0;height:46px;border:0;padding:0;cursor:pointer;
  border-radius:var(--r-sm);background:var(--blue);color:#fff;overflow:hidden;
  display:flex;align-items:center;text-align:left;
  box-shadow:0 0 0 2px var(--paper);
  transform-origin:left center;transition:filter var(--t-fast) ease,transform var(--t-fast) cubic-bezier(.16,1,.3,1)}
.cvbar.k-own{background:var(--warm);color:var(--on-warm)}
.cvbar.k-edu{
  background:transparent;
  background-image:repeating-linear-gradient(45deg,transparent 0 6px,
    color-mix(in srgb,var(--blue) 62%,transparent) 6px 8px);
  border:1px solid var(--blue);color:var(--ink);box-shadow:none}
.cvbar-in{padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cvbar b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 105,"wght" 700;
  font-size:13px;letter-spacing:-.01em}
.cvbar i{font-style:normal;font-size:11px;opacity:.8;margin-left:8px}
@media(max-width:700px){.cvbar i{display:none}.cvbar b{font-size:11px}}
.cvbar:hover,.cvbar:focus-visible{filter:brightness(1.08);transform:translateY(-2px);outline:none}
.cvbar:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.cvchart.dim .cvbar:not(.on){opacity:.34}
.cvbar.on{filter:brightness(1.08);transform:translateY(-2px)}

/* grow in on reveal */
.cvchart .cvbar{transform:scaleX(.001)}
.cvchart.in .cvbar{animation:cvgrow .7s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes cvgrow{to{transform:scaleX(1)}}

/* ---- detail panel ---- */
.cvdetail{border:1px solid var(--line);border-radius:var(--r-md);padding:22px 20px;
  background:var(--panel);position:sticky;top:90px;min-height:190px}
.cvd-span{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.cvdetail h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 800;
  text-transform:uppercase;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;margin:10px 0 4px}
.cvd-role{font-size:14px;color:var(--muted);margin-bottom:14px}
.cvdetail ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.cvdetail li{font-size:14px;line-height:1.5;padding-left:14px;position:relative}
.cvdetail li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--blue)}
@media(max-width:900px){.cvdetail{position:static}}

/* ---- table fallback ---- */
.cvtable{margin-top:28px;font-size:14px}
.cvtable summary{cursor:pointer;font-family:"Martian Mono",monospace;font-size:9px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.cvtable table{width:100%;border-collapse:collapse;margin-top:16px}
.cvtable caption{text-align:left;font-size:13px;color:var(--muted);padding-bottom:8px}
.cvtable th,.cvtable td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line)}
.cvtable th{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---- coverage matrix ---- */
.cvmatrix-wrap{overflow-x:auto}
/* The matrix is 560px wide and scrolls inside itself below about 620px.
   Without a hint, a phone reader sees six columns and assumes that is all. */
.cvmatrix-hint{display:none;font-family:"Martian Mono",monospace;font-size:8px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin:10px 0 0}
@media(max-width:620px){.cvmatrix-hint{display:block}}
.cvmatrix{border-collapse:collapse;width:100%;min-width:560px;table-layout:fixed}
.cvmatrix th[scope=row]{text-align:left;font-size:14px;font-weight:400;
  padding:0 18px 0 0;white-space:nowrap;width:25%}
.cvmatrix thead th{padding:0 0 14px;vertical-align:bottom;width:12.5%}
.cvmatrix thead th span{display:block;font-family:"Martian Mono",monospace;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cvmatrix td{text-align:center;padding:9px 6px;border-top:1px solid var(--line)}
.cvmatrix td span{display:inline-block;width:15px;height:15px;border-radius:50%}
.cvmatrix td.on span{background:var(--blue)}
.cvmatrix td.off span{border:1.5px solid var(--line)}
.cvmatrix td em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.cvcols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
@media(max-width:760px){.cvcols{grid-template-columns:1fr;gap:30px}}
.cvlist{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:14px}
.cvlist b{display:block;font-size:15px;font-weight:600}
.cvlist span{display:block;font-size:13px;color:var(--muted);margin-top:3px}

@media (prefers-reduced-motion:reduce){
  .cvchart .cvbar{transform:none;animation:none}
  .cvchart.in .cvbar{animation:none;transform:none}
  .cvbar:hover,.cvbar.on{transform:none}
}

/* Short engagements are genuinely narrow on a 16-year axis. Each bar owns
   its own row, so a label placed outside can never collide with another
   bar, and every mark keeps its direct label. */
.cvbar.tiny{overflow:visible;min-width:14px}
/* nowrap stays, so only an explicit <br> in the label breaks a line;
   letting these wrap freely turned Verlag Hermann Schmidt into three. */
.cvbar.tiny .cvbar-in{position:absolute;left:100%;padding:0 0 0 10px;color:var(--ink);
  line-height:1.25}
.cvbar.tiny i{display:none}

/* ============================================================
   MAGAZINE READER
   36 pages as 18 double-sided leaves, each rotating about the spine.
   Only leaves near the current one load their images.
   ============================================================ */
.magsec{padding:clamp(40px,6vw,80px) 0}
.mag{position:relative;max-width:820px;margin:0 auto;
  aspect-ratio:1.416/1;              /* two A4 pages side by side */
  perspective:2600px;perspective-origin:50% 40%}
.mag-book{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform var(--t-slow) cubic-bezier(.42,0,.28,1)}
/* on the covers only one page is showing, so slide the block over to keep
   the visible page centred instead of hugging one side */
.mag.at-start .mag-book{transform:translateX(-25%)}
.mag.at-end .mag-book{transform:translateX(25%)}
.mag-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform var(--t-slow) cubic-bezier(.42,0,.28,1)}
.mag-leaf.turned{transform:rotateY(-180deg)}
/* No drop shadow: at this size it read as a grey halo round every page
   rather than as depth. A hairline keeps the page edge defined. */
.mag-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  background:var(--panel);border:1px solid var(--line)}
.mag-face img{width:100%;height:100%;object-fit:cover;display:block}
.mag-back{transform:rotateY(180deg)}
.mag-blank{display:block;width:100%;height:100%;background:var(--panel)}

.mag-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:60;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:16px;display:flex;align-items:center;justify-content:center;transition:var(--t-fast)}
.mag-nav:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mag-nav:disabled{opacity:.3;cursor:default}
.mag-prev{left:-22px}
.mag-next{right:-22px}
@media(max-width:820px){.mag-prev{left:4px}.mag-next{right:4px}}

.mag-ctl{max-width:820px;margin:22px auto 0;display:flex;align-items:center;gap:16px}
.mag-count{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);min-width:96px}
.mag-range{flex:1;accent-color:var(--blue);cursor:pointer}

@media (prefers-reduced-motion:reduce){.mag-leaf{transition:none}}

/* ============================================================
   AUDIT WIDGET
   Styled after the Friendly Spaces audit report rather than the Fresh
   site: indigo #212E8C on white with the lilac #F5DEFF edge band. Like
   .diag it keeps that palette in both themes, because it is a document.

   The weight bar carries the explanation: every section is a track whose
   WIDTH is its weight and whose FILL is what has been earned, so ten
   points of toilets really is wider than six points of food. One hue, no
   categorical palette needed, and every segment is direct-labelled.
   ============================================================ */
.au{--ai:#212E8C;--al:#F5DEFF;--aw:#FFFFFF;--am:rgba(33,46,140,.62);
  --aline:rgba(33,46,140,.16);
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(40px,6vw,80px)}
.au-doc{position:relative;background:var(--aw);color:var(--ai);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e3)}
.au-band{position:absolute;left:0;top:0;bottom:0;width:clamp(18px,3vw,54px);background:var(--al)}
.au-inner{padding:clamp(26px,4vw,54px) clamp(22px,4vw,54px) clamp(26px,4vw,54px)
  calc(clamp(18px,3vw,54px) + clamp(22px,4vw,54px))}

.au-grid{display:grid;grid-template-columns:330px 1fr;gap:clamp(24px,3.5vw,52px);align-items:start}
@media(max-width:900px){.au-grid{grid-template-columns:1fr}}
.au-sticky{position:sticky;top:96px}
@media(max-width:900px){.au-sticky{position:static}}

.au-lab,.au-hint,.au-scale,.au-fine{font-family:"Martian Mono",monospace}
.au-lab{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--am)}
.au-total{display:flex;align-items:baseline;gap:8px;margin:6px 0 2px}
.au-total b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 800;
  font-size:clamp(48px,7vw,78px);line-height:1;font-variant-numeric:tabular-nums}
.au-total span{font-size:17px;color:var(--am)}
.au-status{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 700;
  text-transform:uppercase;font-size:13px;letter-spacing:.02em;margin-bottom:20px}
.au.is-cert .au-status{color:#1B7A4B}
.au.is-cond .au-status{color:#A96A00}

.au-bar{position:relative;display:flex;gap:2px;height:44px}
.au-seg{position:relative;background:var(--al);border-radius:var(--r-xs);overflow:hidden;min-width:2px}
.au-fill{position:absolute;left:0;bottom:0;top:0;width:0;background:var(--ai);
  transition:width var(--t-base) cubic-bezier(.16,1,.3,1)}
.au-seg em{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-style:normal;
  font-family:"Martian Mono",monospace;font-size:8px;color:var(--am);z-index:2}
.au-mark{position:absolute;top:-6px;bottom:-6px;width:1px;background:var(--ai);opacity:.4;z-index:3}
.au-mark-key{opacity:1;width:2px}
.au-mark em{position:absolute;top:-15px;left:0;transform:translateX(-50%);font-style:normal;
  font-family:"Martian Mono",monospace;font-size:8px;color:var(--ai)}
.au-scale{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.1em;
  color:var(--am);margin-top:8px}
.au-hint{font-size:9px;line-height:1.7;letter-spacing:.04em;color:var(--am);margin-top:16px}

.au-bonus{margin-top:22px;padding-top:18px;border-top:1px solid var(--aline)}
.au-bonus label{display:block;font-size:13px;margin-bottom:8px}
.au-bonus label i{font-style:normal;color:var(--am);font-size:12px}
.au-bonusrow{display:flex;align-items:center;gap:12px}
.au-bonusrow input{flex:1;accent-color:var(--ai)}
.au-bonusrow output{font-family:"Archivo",sans-serif;font-variation-settings:"wght" 800;
  font-size:19px;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}

.au-acts{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.au-btn{border:1px solid var(--ai);background:none;color:var(--ai);border-radius:100px;
  padding:9px 16px;font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;cursor:pointer;transition:var(--t-fast)}
.au-btn:hover{background:var(--ai);color:var(--aw)}

.au-sec{padding:22px 0;border-top:1px solid var(--aline)}
.au-sec:first-child{border-top:0;padding-top:0}
.au-sechead{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.au-sechead h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 700;
  font-size:clamp(16px,1.9vw,20px);letter-spacing:-.01em}
.au-sechead h3 i{font-style:normal;color:var(--am)}
.au-sechead h3 u{display:block;text-decoration:none;font-family:"Instrument Sans",sans-serif;
  font-variation-settings:normal;font-weight:400;font-size:13px;color:var(--am);margin-top:2px}
.au-secscore{font-family:"Archivo",sans-serif;font-variation-settings:"wght" 800;
  font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.au-verdictline{font-size:13px;color:var(--am);margin:6px 0 14px}

.au-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:9px 0;border-top:1px dashed var(--aline)}
.au-crit{font-size:14px;line-height:1.45}
.au-opts{display:flex;gap:4px}
.au-opt{position:relative}
.au-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.au-opt span{display:block;border:1px solid var(--aline);border-radius:100px;
  padding:6px 12px;font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;transition:var(--t-fast);white-space:nowrap}
.au-opt input:checked + span{background:var(--ai);color:var(--aw);border-color:var(--ai)}
.au-opt input:focus-visible + span{outline:2px solid var(--ai);outline-offset:2px}
@media(max-width:560px){
  .au-row{grid-template-columns:1fr}
  .au-opts{justify-content:flex-start}
}

.au-legend{margin-top:26px;padding-top:20px;border-top:1px solid var(--aline);
  font-size:14px;line-height:1.6;color:var(--am);display:flex;flex-direction:column;gap:10px}
.au-legend b{color:var(--ai)}
.au-fine{font-size:9px;letter-spacing:.05em;line-height:1.7}

@media (prefers-reduced-motion:reduce){.au-fill{transition:none}}

/* ---------- try-it callout ---------- */
.tryit{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  margin:var(--rhythm) 0;padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);
  border-radius:var(--r-lg);background:var(--blue);color:var(--on-blue);
  transition:transform var(--t-base) cubic-bezier(.16,1,.3,1)}
.tryit:hover{transform:translateY(-3px)}
.tryit-lab{grid-column:1;font-family:"Martian Mono",monospace;font-size:9px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;opacity:.7}
.tryit-h{grid-column:1;font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 108,"wght" 800;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,38px);letter-spacing:-.03em;line-height:1;margin:10px 0 8px}
.tryit-p{grid-column:1;font-size:15px;line-height:1.55;opacity:.86;max-width:52ch}
.tryit-go{grid-column:2;grid-row:1 / span 3;font-size:30px;opacity:.85}
@media(max-width:620px){
  .tryit{grid-template-columns:1fr}
  .tryit-go{grid-column:1;grid-row:auto}
}

/* ---------- disciplines over time (d3) ----------
   One strip per discipline rather than a stacked area, because a stacked
   area needs seven categorical hues and this palette cannot carry seven
   that separate in dark mode. One hue, direct labels, entry year called
   out on each row. */
.disc{position:relative;margin-top:8px}
.disc-svg{display:block;width:100%;overflow:visible}
.disc-track{fill:var(--line);opacity:.55}
.disc-run{fill:var(--blue)}
.disc-hit{fill:transparent;cursor:default}
.disc-label{font-family:"Instrument Sans",sans-serif;font-size:14px;fill:var(--ink)}
.disc-first{font-family:"Martian Mono",monospace;font-size:9px;fill:var(--on-blue);letter-spacing:.06em}
.disc-grid line{stroke:var(--line);stroke-width:1}
.disc-axis text{font-family:"Martian Mono",monospace;font-size:9px;fill:var(--muted);letter-spacing:.08em}
.disc-tip{position:absolute;pointer-events:none;z-index:5;transform:translate(-50%,-100%);
  background:var(--ink);color:var(--paper);border-radius:var(--r-sm);padding:9px 12px;
  font-size:13px;line-height:1.45;white-space:nowrap;transition:opacity var(--t-fast) ease;
  box-shadow:var(--e1)}
.disc-tip b{display:block;font-weight:600}
.disc-tip i{display:block;font-style:normal;font-family:"Martian Mono",monospace;
  font-size:9px;letter-spacing:.1em;opacity:.65;margin-bottom:4px}
.disc-tip span{display:block;opacity:.85}
@media(max-width:620px){.disc-label{font-size:12px}}

/* ---------- one-third / two-thirds pair ----------
   A vertical stop-motion beside a landscape venue shot. Both are cropped to
   the same height so the row reads as one band. */
.split13{display:grid;grid-template-columns:1fr 2fr;gap:14px;margin-top:34px}
.split13 figure{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-md);background:var(--panel)}
.split13 figure:last-child{aspect-ratio:auto}
.split13 video,.split13 img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){
  .split13{grid-template-columns:1fr}
  .split13 figure:last-child{aspect-ratio:4/3}
}

/* ---------- three app states, side by side ----------
   Held narrow so three tall phones do not dominate the page. */
/* Narrow enough that all three phones are on screen at once -- at 940px
   they were ~640px tall each and you had to scroll to see the third. */
.appshots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,26px);
  max-width:660px;margin:var(--rhythm) auto 0}
.appshots figure{margin:0}
.appshots img{width:100%;height:auto;display:block;border-radius:14px;
  box-shadow:var(--e2)}
.appshots figcaption{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;text-align:center}
@media(max-width:640px){.appshots{grid-template-columns:1fr;max-width:320px}}


/* ---------- dashboard scroll row ----------
   Wide screenshots in a full-bleed band read as enlarged and soft. Shown a
   few at a time at their own scale instead, scrolling sideways. */
.dashrow-wrap{max-width:var(--maxw);margin:var(--rhythm) auto 0}
.dashrow{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--pad) 18px;-webkit-overflow-scrolling:touch}
.dashrow figure{margin:0;flex:0 0 clamp(290px,46vw,620px);scroll-snap-align:start}
.dashrow img{width:100%;height:auto;display:block;border-radius:var(--r-md);
  border:1px solid var(--line);box-shadow:var(--e1)}
.dashrow figcaption{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:10px}
.dashrow::-webkit-scrollbar{height:6px}
.dashrow::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-sm)}
.dashhint{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}


/* ---------- /play/ : the arcade, as an overlay on the site ----------
   Forced dark (see the inline script on the page) and centred, so it reads
   as a layer over the portfolio rather than another page of it. The close
   control is deliberately large: it is the only way back. */
.playbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px clamp(16px,4vw,40px);
  background:var(--paper);border-bottom:1px solid var(--line)}
.playbar .mark{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 118,"wght" 900;
  font-size:19px;letter-spacing:-.02em;text-decoration:none;color:var(--ink);text-transform:uppercase}

.playclose{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);border:1px solid var(--line);border-radius:100px;
  padding:7px 16px 7px 8px;transition:background var(--t-base),border-color var(--t-base),color var(--t-base)}
.playclose:hover,.playclose:focus-visible{background:var(--ink);color:var(--paper);
  border-color:var(--ink);outline:none}
.playclose .pcx{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:var(--on-blue);font-size:19px;line-height:1;font-weight:700}
.playclose .pct{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.playclose .pct b{font-weight:600;opacity:.55;border:1px solid currentColor;
  border-radius:var(--r-xs);padding:2px 5px;font-size:8px}

.playwrap{max-width:1120px;margin:0 auto;padding:clamp(34px,6vw,72px) var(--pad) clamp(40px,6vw,80px)}
.playhead{text-align:center;margin-bottom:clamp(30px,5vw,58px)}
.playhead .label{color:var(--muted)}
.playhead h1{margin:14px 0 0;font-size:clamp(38px,7vw,86px)}
.playlede{max-width:56ch;margin:20px auto 0;font-size:16px;line-height:1.65;color:var(--muted)}

.playgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:900px){.playgrid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

.pcard{display:flex;flex-direction:column;text-align:center;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t-base) cubic-bezier(.16,1,.3,1),box-shadow var(--t-base),border-color var(--t-base)}
.pcard:hover,.pcard:focus-visible{transform:translateY(-5px);border-color:var(--muted);
  box-shadow:var(--e3);outline:none}

.pshot{aspect-ratio:1.6/1;overflow:hidden;background:#04060b;border-bottom:1px solid var(--line)}
.pshot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-slow) cubic-bezier(.16,1,.3,1)}
.pcard:hover .pshot img{transform:scale(1.045)}

.pbody{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;align-items:center;flex:1 1 auto}
.pbody .n{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pbody h2{font-family:Archivo,sans-serif;font-weight:900;font-stretch:112%;
  font-size:clamp(21px,2.2vw,28px);line-height:1.05;letter-spacing:-.02em;
  text-transform:uppercase;margin:12px 0 12px}
.pbody p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 20px;max-width:34ch}
.plink{margin-top:auto;font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.plink .ar{display:inline-block;transition:transform var(--t-base) cubic-bezier(.16,1,.3,1)}
.pcard:hover .plink .ar{transform:translateX(5px)}

.playout{text-align:center;margin-top:clamp(34px,5vw,60px)}
.playout .label{margin-top:16px;color:var(--muted)}
.playout .label b{font-weight:600;border:1px solid currentColor;border-radius:var(--r-xs);padding:2px 6px}


/* ---------- play button in the work header, and the D3 credit ----------
   The button sits where the "Scroll" label was, so the rail head now offers
   a route into the games without spending a whole card on them. */
.shead-go{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.btn.sm{padding:10px 16px;font-size:11px}
@media(max-width:760px){
  .shead-go{align-items:flex-start;text-align:left}
}
/* Deliberately quiet: names the library, invites no further questions. */
.cvcredit{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);opacity:.75;white-space:nowrap}


/* ---------- wayfinder result cards ----------
   The diagnostic now recommends projects, so its result block is a short
   stack of links rather than three paragraphs of prose. */
.dg-picks{display:grid;gap:14px}
.dg-pick{display:grid;gap:7px;padding:20px 22px;text-decoration:none;
  /* colour must be explicit: the result card sits inside a dark block, so
     inheriting would put light text on a light panel. */
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform var(--t-base) cubic-bezier(.16,1,.3,1),border-color var(--t-base),box-shadow var(--t-base)}
.dg-pick:hover,.dg-pick:focus-visible{transform:translateY(-3px);border-color:var(--muted);
  box-shadow:var(--e2);outline:none}
.dg-pick-tag{font-family:"Martian Mono",monospace;font-size:8px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dg-pick-name{color:var(--ink);font-family:Archivo,sans-serif;font-weight:900;font-stretch:110%;
  font-size:clamp(20px,2.2vw,27px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.dg-pick-line{font-size:14px;line-height:1.6;color:var(--muted)}
.dg-pick-why{font-family:"Martian Mono",monospace;font-size:8px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue)}
.dg-pick-go{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
#also .dg-pick{padding:15px 18px}
#also .dg-pick-name{font-size:clamp(16px,1.6vw,20px)}


/* ---------- wayfinder teaser: now a real control, not a mock-up ---------- */
.quiz .opt{width:100%;font-family:inherit;text-align:left;background:none;color:inherit}
.quiz .opt .opt-t{flex:1 1 auto}
.qback{margin-top:16px;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.55}
.qback:hover{opacity:1}
.qpick{display:grid;gap:5px;padding:15px 20px;margin-bottom:9px;text-decoration:none;
  border-radius:var(--r-md);background:var(--dusty);color:#15171A;
  transition:transform var(--t-base) cubic-bezier(.16,1,.3,1)}
.qpick:hover,.qpick:focus-visible{transform:translateY(-2px);outline:none}
.qpick b{font-family:Archivo,sans-serif;font-weight:900;font-stretch:110%;font-size:19px;
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.qpick i{font-style:normal;font-family:"Martian Mono",monospace;font-size:8px;
  letter-spacing:.12em;text-transform:uppercase;opacity:.62}
.qpick span{font-family:"Martian Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}