/* ============================================================
   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:#B0664F; --on-warm:#FDFAF1;
  --r-lg:28px; --r-md:20px;
  --maxw:1400px;
  --pad:clamp(20px,4vw,56px);
}
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 .4s ease,color .4s 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:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.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 .25s,height .25s,opacity .3s;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{
  position:fixed;top:16px;left:50%;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:0 6px 26px var(--shadow);
  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;
}
nav .nl{display:flex;gap:20px;font-size:13.5px;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:.2s;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:2px;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .18s 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:0 14px 34px var(--shadow);
  }
  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)}
}
@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 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.rl.in>span{transform:none}
.fu{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s 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 .3s cubic-bezier(.16,1,.3,1),background .25s,color .25s;
}
.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 .3s}
.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) .25s}
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:0 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 .4s 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 .7s 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:9.5px;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:15.5px;line-height:1.55;opacity:.78;max-width:38ch;min-height:7.75em}
.wc .cred{margin-top:16px;font-size:12.5px;line-height:1.55;opacity:.72;border-top:1px solid currentColor;padding-top:12px}
.wc .cred b{font-family:"Martian Mono",monospace;font-size:8.5px;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:8.5px;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:8.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.62;display:block;margin-top:5px}
.railhint{align-self:center;flex:0 0 auto;padding-bottom:30px;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:2px;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 .45s cubic-bezier(.16,1,.3,1),background .3s}
.pc:hover{transform:translateY(-7px);background:var(--paper)}
.pc .num{font-family:"Martian Mono",monospace;font-size:9.5px;letter-spacing:.12em;color:var(--blue);display:block;margin-bottom:22px}
.pc h4{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:14.5px;margin-bottom:9px;cursor:pointer;transition:.22s;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:3px;margin-top:20px;overflow:hidden}
.qbar i{display:block;height:100%;width:33%;background:var(--dusty);transition:width .5s 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 .45s 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 .7s 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 h4{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:15.5px;line-height:1.55;color:var(--muted);max-width:36ch}
.ic .cred{margin-top:14px;font-size:12.5px;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:8.5px;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}
.case-hero .back{font-family:"Martian Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-block;margin-bottom:26px}
.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)}
.factbar-in{max-width:var(--maxw);margin:0 auto;padding:26px var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.factbar dt{font-family:"Martian Mono",monospace;font-size:8.5px;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:clamp(40px,6vw,80px) 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:clamp(40px,6vw,80px) var(--pad)}
.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)}

/* ---------- 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 .45s cubic-bezier(.16,1,.3,1),background .3s}
.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:14.5px;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:16.5px;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:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.sidelist dd{font-size:15.5px;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:15.5px;
  background:none;color:inherit;font-family:inherit;cursor:pointer;transition:.2s}
.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:3px;margin-top:26px;overflow:hidden}
.dg-bar i{display:block;height:100%;width:0;background:var(--dusty);transition:width .45s 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:15.5px;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 .3s 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:clamp(30px,4vw,54px) 0;margin:clamp(40px,6vw,80px) 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 .4s ease;
  border-radius:8px;box-shadow:0 10px 34px var(--shadow);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 .3s 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:8.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;box-shadow:0 6px 22px var(--shadow)}
.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:8px}
.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:.2s}
.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:2px;overflow:hidden}
.splitbar i{display:block;height:100%;width:0;background:var(--blue);transition:width .3s 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 .4s 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 h4{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:15.5px;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 .9s 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:.25s}
.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:clamp(40px,6vw,80px) 0 clamp(20px,3vw,40px)}
.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 .5s 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:clamp(30px,4vw,50px) 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:10px;
  border:1px solid var(--line);background:var(--paper);box-shadow:0 8px 26px var(--shadow)}
.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:6px}

.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:0 10px 34px var(--shadow)}
.tallframe img{width:100%;display:block}
.tallcap{max-width:820px;margin:12px auto 0;text-align:center;
  font-family:"Martian Mono",monospace;font-size:8.5px;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:8.5px;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:8.5px;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:clamp(20px,3vw,40px) var(--pad)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
@media(max-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tiles figure{margin:0}
.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:14.5px;line-height:1.5}
  .wc .tg{padding-top:10px;margin-top:auto}
  .wc .tg i{padding:4px 8px}
  .railhint{padding-bottom:18px}
}

/* ============================================================
   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:13.5px;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:8.5px;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:8.5px;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:3px;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:8.5px;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:6px;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 .2s ease,transform .2s 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:13.5px;letter-spacing:-.01em}
.cvbar i{font-style:normal;font-size:11.5px;opacity:.8;margin-left:8px}
@media(max-width:700px){.cvbar i{display:none}.cvbar b{font-size:11.5px}}
.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:8.5px;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:14.5px;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:8.5px;
  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}
.cvmatrix{border-collapse:collapse;width:100%;min-width:560px;table-layout:fixed}
.cvmatrix th[scope=row]{text-align:left;font-size:14.5px;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:8.5px;
  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:15.5px;font-weight:600}
.cvlist span{display:block;font-size:13.5px;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:1000px;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 .78s 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 .78s cubic-bezier(.42,0,.28,1)}
.mag-leaf.turned{transform:rotateY(-180deg)}
.mag-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  background:var(--panel);box-shadow:0 8px 30px var(--shadow)}
.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)}
/* a crease down the spine so the two halves read as one object */
.mag-front{box-shadow:inset 14px 0 22px -16px rgba(0,0,0,.45),0 8px 30px var(--shadow)}
.mag-back{box-shadow:inset -14px 0 22px -16px rgba(0,0,0,.45),0 8px 30px var(--shadow)}

.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:.2s}
.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:1000px;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:0 18px 50px var(--shadow)}
.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:8.5px;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:3px;overflow:hidden;min-width:2px}
.au-fill{position:absolute;left:0;bottom:0;top:0;width:0;background:var(--ai);
  transition:width .45s 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:13.5px;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:8.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;cursor:pointer;transition:.2s}
.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:12.5px;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:12.5px;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:14.5px;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:8.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;transition:.18s;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:clamp(30px,4vw,50px) 0;padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);
  border-radius:var(--r-lg);background:var(--blue);color:var(--on-blue);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.tryit:hover{transform:translateY(-3px)}
.tryit-lab{grid-column:1;font-family:"Martian Mono",monospace;font-size:8.5px;
  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:15.5px;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:8.5px;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:10px;padding:9px 12px;
  font-size:12.5px;line-height:1.45;white-space:nowrap;transition:opacity .15s ease;
  box-shadow:0 8px 24px var(--shadow)}
.disc-tip b{display:block;font-weight:600}
.disc-tip i{display:block;font-style:normal;font-family:"Martian Mono",monospace;
  font-size:8.5px;letter-spacing:.1em;opacity:.65;margin-bottom:4px}
.disc-tip span{display:block;opacity:.85}
@media(max-width:620px){.disc-label{font-size:12px}}