/* ============================================================
   QuietQuill · brand guide v1.0
   law 1 · warm paper ground, ink text, oxblood as the only accent
   law 2 · the accent does three jobs: kickers, figures, rules
   law 3 · mint is the availability pulse, never a surface
   ------------------------------------------------------------
   Token names are inherited from the previous brand and kept on
   purpose: several hundred rules consume them, so a rename buys
   nothing. --rose holds oxblood. The name is a legacy, not a
   description.
   ============================================================ */


:root{
  --ground:#F8F6F1; --panel:#FFFFFF; --screen:#FFFFFF; --tile:#F2EFE8;
  --line:#E5E1D8; --line-soft:#EFECE4;
  --text:#1B1917; --text-2:#3A3733; --text-3:#6B655D;
  --rose:#8E3B44; --on-rose:#FFFFFF;
  --mint:#207560;
  /* the kicker follows the accent. Mint is the availability pulse only, so it
     cannot also be the default kicker colour the way it was under Belle. */
  --kicker:var(--rose);
  --rose-tint:#F4E7E7; --on-rose-tint:#8E3B44;
  --mint-tint:#E1F0EA; --on-mint-tint:#1B5D4C;
  --strong:#CFC9BD;      /* the heavier rule under a header and above a footer */
  --plate-dark:#141019;  /* ground for plates holding artwork drawn on dark */

  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
  /* QuietQuill has no fixed-width face. The variable is repointed rather than
     edited out of the forty rules that consume it. */
  --mono:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --serif:Literata,Georgia,"Times New Roman",serif;
  --size-hero:clamp(2.4rem,5.5vw,3.4rem);
  --size-h2:clamp(1.5rem,3vw,1.9rem);
  --size-h3:1.15rem;
  --size-body:1rem; --size-small:0.85rem; --size-mono:0.8rem;

  --radius:8px; --radius-card:12px; --radius-tile:6px;
  --space-1:8px; --space-2:12px; --space-3:18px;
  --space-4:28px; --space-5:44px; --space-6:72px;
  --measure:1080px;
}
/* .well flipped a dark page light for long reading. On a paper site it is
   nearly a no-op, but the class is in the markup on many pages, so it stays and
   reads as a distinct, slightly brighter reading surface. */
.well{
  --ground:#FFFFFF; --panel:#FDFCFA; --screen:#FFFFFF; --tile:#F2EFE8;
  --line:#E5E1D8; --line-soft:#EFECE4;
  --text:#1B1917; --text-2:#3A3733; --text-3:#6B655D;
  --rose:#8E3B44; --on-rose:#FFFFFF;
  --mint:#207560;
  --kicker:var(--rose);
  --rose-tint:#F4E7E7; --on-rose-tint:#8E3B44;
  --mint-tint:#E1F0EA; --on-mint-tint:#1B5D4C;
  background:var(--ground); color:var(--text);
}

/* ---------- QuietQuill type ----------
   Literata carries display and titles, Public Sans carries everything else,
   which it inherits from body. These selectors already existed; only the face
   and weight are added. The two size values below are the only sizes this pass
   touches: Literata sets larger than the previous face at the same size. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600}
h1{line-height:1.12;letter-spacing:-.012em}
.wcard h3,.ltile h3,.card h4,.rb-copy h3,.job h3{font-family:var(--serif);font-weight:600}
.wcard h3{font-size:1.28rem}
.metric .n,.statrow .n,.th-fig{font-family:var(--serif);font-weight:600}
blockquote,.quote p,.pb-list blockquote{font-family:var(--serif)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);font-size:var(--size-body);line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit}
/* height:auto is not optional here. Thirty-one images across the site carry
   real width and height attributes, which is correct for layout stability —
   but max-width alone caps the width while the attribute keeps the height,
   so anything wider than its column renders squeezed horizontally at full
   intrinsic height. That is what happened to the Choose Democracy figures. */
img{max-width:100%;height:auto;display:block}
p{margin:0 0 var(--space-2)}
h1,h2,h3,h4{font-weight:500;margin:0}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--space-4)}
.narrow{max-width:820px}

.kicker{font-family:var(--mono);font-size:var(--size-mono);font-weight:400;color:var(--kicker);text-transform:uppercase;letter-spacing:.13em;font-weight:600;display:block;margin:0 0 var(--space-2)}
.meta{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--rose);color:var(--on-rose);padding:10px 16px;z-index:100;border-radius:var(--radius)}
.skip:focus{left:12px;top:12px}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;background:var(--ground);border-bottom:1px solid var(--strong)}
.nav-in{max-width:var(--measure);margin:0 auto;padding:var(--space-3) var(--space-4);display:flex;align-items:center;gap:var(--space-4)}
/* One face, one colour. The two-tone split belonged to the previous brand; here
   the whole name is ink in Literata and the only accent is the cursor, drawn as
   a bar so its weight and gap hold at every size. The cursor is the one
   deliberate link back to Belle, and the reason this brand is QuietQuill. */
.mark{font-family:var(--serif);font-weight:500;font-size:1.15rem;
  text-decoration:none;margin-right:auto;letter-spacing:0;color:var(--text)}
.mark .bot{font-family:inherit;font-weight:inherit;color:inherit;
  letter-spacing:inherit}
.mark .cur{position:relative;color:transparent;font-family:inherit;
  animation:cursorblink 1.1s step-end infinite}
.mark .cur::after{content:"";position:absolute;left:0;bottom:.09em;
  width:.46em;height:.075em;min-height:2px;background:var(--rose);
  border-radius:1px}
@keyframes cursorblink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.mark .cur{animation:none}}
.nav a.link{text-decoration:none;font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);text-transform:none;padding:4px 0;border-bottom:1px solid transparent}
.nav a.link:hover,.nav a.link:focus,.nav a.link[aria-current="page"]{color:var(--rose);border-bottom-color:var(--rose)}
@media(max-width:760px){.nav-in{gap:var(--space-3);padding:var(--space-2) var(--space-3);flex-wrap:wrap}}
/* On a phone the row holds the wordmark plus three of the five links, and the
   other two drop to a second line flush left, which reads as an accident. Give
   the wordmark the whole first row so the links wrap as one group underneath. */
@media(max-width:560px){
  .nav-in{row-gap:9px;column-gap:var(--space-3)}
  .nav-in .mark{flex:0 0 100%;margin-right:0}
}

/* ---------- hero ---------- */
.hero{padding:var(--space-6) 0 var(--space-5)}
h1{font-size:var(--size-hero);line-height:1.12;max-width:18ch;margin:0 0 var(--space-4)}
.tagline{font-size:1.15rem;color:var(--rose);max-width:46ch;margin:0 0 var(--space-3)}
.lede{font-size:1.05rem;line-height:1.65;max-width:62ch;color:var(--text-2);margin:0 0 var(--space-2)}
.lede em{font-style:normal;font-weight:500;color:var(--text)}
.cta-row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin-top:var(--space-4)}
.btn{display:inline-block;text-decoration:none;font-size:var(--size-small);font-weight:500;padding:11px 20px;border-radius:var(--radius);border:1px solid var(--text);background:var(--text);color:#FFFFFF;transition:background .15s,border-color .15s}
.btn:hover{filter:none;background:#000000;border-color:#000000}
.btn.ghost{background:transparent;color:var(--rose);border-color:var(--rose)}

/* ---------- thesis ---------- */
.thesis{margin-top:var(--space-5);border-top:1px solid var(--line);padding-top:var(--space-5)}
.thesis h2{font-size:var(--size-h2);margin:0 0 var(--space-1)}
.thesis .cap{color:var(--text-2);max-width:62ch;margin:0 0 var(--space-3);font-size:var(--size-small)}
.trow{border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--panel)}
/* A row is an <a> where it leads somewhere and a <div> where it does not, so
   every rule that shaped the row has to accept both. */
.trow > div,.trow > a{display:grid;grid-template-columns:1fr 34px 1.25fr;
  border-bottom:1px solid var(--line-soft)}
.trow > div:last-child,.trow > a:last-child{border-bottom:none}
.trow > a{text-decoration:none;color:inherit;cursor:pointer;transition:background .18s}
.trow > a:focus-visible{outline:2px solid var(--rose);outline-offset:-2px}
.trow span{padding:var(--space-2) var(--space-3);font-size:var(--size-small);line-height:1.55}
.trow .a{color:var(--text-3)}
.trow .arw{display:flex;align-items:center;justify-content:center;color:var(--rose);padding:0;font-family:var(--mono)}
.trow .b{font-weight:500;color:var(--text)}
.trow .th{background:var(--tile)}
.trow .th span{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);text-transform:uppercase;letter-spacing:.13em;font-weight:600}
@media(max-width:720px){.trow > div,.trow > a{grid-template-columns:1fr}.trow .arw,.trow .th{display:none}.trow .a{padding-bottom:0}.trow .b{padding-top:2px}.trow .b::before{content:"→ ";color:var(--rose);font-family:var(--mono)}}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-5)}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-3)}
.metric .n{font-size:2rem;font-weight:500;line-height:1.1;color:var(--rose);display:block;margin-bottom:6px}
.metric.pulse .n{color:var(--mint)}
.metric .l{font-size:var(--size-small);line-height:1.45;color:var(--text-3)}
@media(max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.metrics{grid-template-columns:1fr}}

/* ---------- sections ---------- */
section{padding:var(--space-6) 0 0}
.sec-head{margin-bottom:var(--space-4)}
.sec-head h2{font-size:var(--size-h2);margin:0 0 6px}
.sec-head p{margin:0;color:var(--text-2);font-size:var(--size-small);max-width:62ch}

/* ---------- work cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
/* An odd number of cards used to leave a half-width orphan on the last row.
   A lone trailing card spans instead, so parking a case study cannot punch a
   hole in the grid. */
.cards>:last-child:nth-child(odd),.cprow>:last-child:nth-child(odd){grid-column:1/-1}
.cards>:only-child,.cprow>:only-child{max-width:none}
/* A spanning card is far wider than the fixed thumb height, so cover would
   crop the screenshot to a letterbox. Let it keep its own ratio instead. */
.cards>:last-child:nth-child(odd) .thumb,.cprow>:last-child:nth-child(odd) .thumb,
.cards>:only-child .thumb,.cprow>:only-child .thumb{height:auto;aspect-ratio:1000/372}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.wcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-3);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:filter .15s,border-color .15s}
.wcard:hover{border-color:var(--text);filter:none}
.wcard .ptag{font-family:var(--mono);font-size:var(--size-mono);text-transform:none;background:var(--rose-tint);color:var(--on-rose-tint);border-radius:999px;padding:4px 13px;align-self:flex-start;margin:var(--space-3) 0 var(--space-2)}
.wcard h3{font-size:1.35rem;line-height:1.25;margin:0 0 8px}
.wcard p{font-size:var(--size-small);line-height:1.6;color:var(--text-2);margin:0 0 var(--space-3)}
.wcard .foot{margin-top:auto;font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);text-transform:none}
.wcard .foot .read{color:var(--rose)}

/* ---------- try it: the demo bar and full screen ----------
   Every case study carries something you can operate. The bar sits at the top
   of the demo so the way in is visible without scrolling, and the button is
   the same shape and in the same place on every page. */
.try-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin-bottom:var(--space-2)}
.fsbtn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--size-mono);text-transform:none;
  background:transparent;border:1px solid var(--line);border-radius:5px;
  padding:6px 11px;cursor:pointer;
  /* was: no colour set and opacity .72, which left the label at the browser's
     default black on a dark plate, 1.29:1. Fixed 13 Aug 2026 during the lane
     page accessibility audit. */
  color:var(--text-2);
  transition:color .15s,border-color .15s,background .15s}
.fsbtn:hover{color:var(--text);border-color:var(--text)}
.fsbtn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.fsbtn svg{width:12px;height:12px;display:block;flex:0 0 auto}
.fsbtn .x{display:none}
[data-tryit].fs-on .fsbtn .x{display:block}
[data-tryit].fs-on .fsbtn .e{display:none}

/* the fallback overlay, for Safari on a phone and anywhere the API is refused */
[data-tryit].is-max{position:fixed;inset:0;z-index:200;margin:0;max-width:none;
  border-radius:0;overflow:auto;-webkit-overflow-scrolling:touch}
body.tryit-locked{overflow:hidden}

/* the native path. A fullscreen element has no page behind it, so it has to
   carry its own background or it lands on black. */
[data-tryit]:fullscreen{overflow:auto;border-radius:0;margin:0;max-width:none;
  padding:var(--space-4)}
[data-tryit]:-webkit-full-screen{overflow:auto;border-radius:0;margin:0;
  padding:var(--space-4)}

/* a demo that is a live app in a frame */
.demoframe{width:100%;border:0;display:block;background:var(--screen);
  border-radius:var(--radius);aspect-ratio:16/10;min-height:420px}
[data-tryit].is-max .demoframe,[data-tryit]:fullscreen .demoframe{
  aspect-ratio:auto;height:calc(100vh - 132px);min-height:0;border-radius:0}
.try-fine{font-size:var(--size-small);line-height:1.6;color:var(--text-3);
  margin:var(--space-3) 0 0;max-width:76ch}

/* what a maxed demo looks like, whichever path opened it. #cpa carries its
   own Paper background and an id, so it wins over this. */
[data-tryit].is-max,[data-tryit]:fullscreen{background:var(--ground);
  padding:var(--space-3)}
[data-tryit]:-webkit-full-screen{background:var(--ground)}
.demo-lite{position:relative}

/* phone-shaped prototypes stand up to the full height of the display */
[data-tryit].is-max .bs-proto,[data-tryit]:fullscreen .bs-proto,
[data-tryit].is-max .pg-proto,[data-tryit]:fullscreen .pg-proto{
  max-width:none;width:auto;height:calc(100vh - 104px);border-radius:var(--radius)}
[data-tryit].is-max .demo-frame iframe,[data-tryit]:fullscreen .demo-frame iframe{
  height:calc(100vh - 118px)}
[data-tryit].is-max .out-frame,[data-tryit]:fullscreen .out-frame{
  height:calc(100vh - 190px)}
.demo-cap{display:block;text-align:center;margin-top:10px}
/* the caption under a maxed demo is noise, and it pushes the frame off-screen */
[data-tryit].is-max .demo-cap,[data-tryit]:fullscreen .demo-cap{display:none}

/* ---------- foldable detail ----------
   A case study should read in under a minute and still hold its evidence.
   Argument stays on the page; evidence goes behind one of these. Native
   details/summary, so it works with no JavaScript, opens on Ctrl+F in
   Chrome, and prints expanded. */
.folds{border-top:1px solid var(--line-soft);margin:var(--space-4) 0 0}
.fold{border-bottom:1px solid var(--line-soft)}
.fold>summary{cursor:pointer;list-style:none;display:flex;gap:var(--space-2);
  align-items:center;padding:11px 2px;font-family:var(--mono);
  font-size:var(--size-mono);color:var(--text-2);text-transform:none;
  transition:color .15s}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"+";color:var(--rose);flex:0 0 1ch;width:1ch}
.fold[open]>summary::before{content:"\2013"}
.fold>summary:hover{color:var(--text)}
.fold>summary:focus-visible{outline:2px solid var(--rose);outline-offset:3px;
  border-radius:2px}
.fold>summary .n{margin-left:auto;color:var(--text-3);font-size:.66rem;
  padding-left:var(--space-2);white-space:nowrap}
/* The drawn tile on each row. The folds ship open, because once the prose was
   cut to length the whole page reads in a scroll and hiding the evidence
   costs more than it saves. The glyph is what makes an open stack scannable:
   it gives each section a shape to find it by. Drawn, like every other
   thumbnail on this site. */
.fold-th{flex:0 0 auto;width:64px;height:48px;display:block;overflow:hidden;
  background:var(--screen);border:1px solid var(--line);
  border-radius:var(--radius-tile);transition:border-color .15s}
.fold-th svg{width:100%;height:100%;display:block}
.fold>summary:hover .fold-th{border-color:var(--rose)}
/* body indents to the label, not to the marker */
.fold-b{padding:2px 0 var(--space-3) calc(1ch + 64px + var(--space-2) * 2)}
@media(max-width:640px){
  .fold-th{width:48px;height:36px}
  .fold-b{padding-left:calc(1ch + var(--space-2))}
  .fold>summary .n{display:none}
}
.fold-b p{margin:0 0 10px;line-height:1.7;max-width:62ch}
.fold-b p:last-child{margin-bottom:0}
.fold-b ul{margin:8px 0 0;padding-left:20px;max-width:62ch}
.fold-b li{margin:0 0 9px;line-height:1.65}
.fold-b li:last-child{margin-bottom:0}
.fold-b li strong,.fold-b p strong{font-weight:500}
.fold-b .qa{margin-top:0}
@media print{.fold-b{display:block !important}}

/* ---------- thumbnails: recreations, never screenshots ---------- */
.thumb{border-radius:var(--radius);overflow:hidden;padding:var(--space-3);height:210px;display:flex;flex-direction:column;justify-content:center;position:relative}
.thumb img{border-radius:var(--radius-tile)}
.th-t{font-family:var(--mono);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3)}
.th-title{font-size:1rem;font-weight:500;color:var(--text);margin:0 0 2px}
.bars{display:flex;align-items:flex-end;gap:6px;height:96px;margin:var(--space-2) 0}
.bars i{flex:1;background:var(--rose);border-radius:2px;display:block}
.th-fig{font-size:1.35rem;font-weight:500;color:var(--text)}
.th-fig .up{color:var(--rose)}
.th-row{display:flex;align-items:baseline;gap:8px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.kpi{background:var(--screen);border:1px solid var(--line);border-radius:var(--radius-tile);padding:8px 10px}
.kpi b{display:block;font-size:0.95rem;font-weight:500;color:var(--text)}
.kpi span{font-family:var(--mono);font-size:0.58rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-3)}
.slidebox{background:var(--screen);border:1px solid var(--line);border-radius:var(--radius-tile);padding:10px 12px;height:100%;display:flex;flex-direction:column;gap:7px}
.sl-line{height:6px;background:var(--tile);border-radius:2px}
.sl-line.w60{width:60%}.sl-line.w40{width:40%}.sl-line.w75{width:75%}
.sl-img{flex:1;background:var(--tile);border-radius:3px;min-height:44px}
.badges{display:flex;gap:5px}
.badges i{width:20px;height:20px;border-radius:999px;background:var(--rose);opacity:.45;display:block}
.mailbox{background:var(--screen);border:1px solid var(--line);border-radius:var(--radius-tile);width:74%;margin:0 auto;padding:10px;height:100%;display:flex;flex-direction:column;gap:6px}
.mail-cta{background:var(--rose);color:var(--on-rose);font-size:0.6rem;font-family:var(--mono);text-align:center;border-radius:3px;padding:5px 0}
.mail-audit{font-family:var(--mono);font-size:0.52rem;color:var(--text-3);line-height:1.5}
.browser{background:var(--screen);border:1px solid var(--line);border-radius:var(--radius-tile);height:100%;overflow:hidden;display:flex;flex-direction:column}
.br-bar{height:16px;background:var(--tile);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:4px;padding:0 6px}
.br-bar i{width:5px;height:5px;border-radius:999px;background:var(--line);display:block}
.br-hero{flex:1;background:var(--rose);opacity:.75;min-height:52px}
.br-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:6px}
.br-tiles i{height:22px;background:var(--tile);border-radius:2px;display:block}
.flowmini{display:flex;align-items:center;gap:5px;justify-content:center}
.flowmini i{background:var(--screen);border:1px solid var(--line);border-radius:3px;height:34px;flex:1;display:block}
.flowmini u{color:var(--rose);font-family:var(--mono);text-decoration:none;font-size:0.7rem}

/* ---------- case study pages ---------- */
/* padding-block only. The shorthand here used to zero the sides, which beat
   .wrap's own side padding and left every case-study hero flush against the
   screen edge on a phone. */
.case-hero{padding-top:var(--space-5);padding-bottom:var(--space-4)}
.case-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);max-width:24ch;margin:0 0 var(--space-2)}
.case-hero .oneline{color:var(--rose);font-size:1.1rem;line-height:1.5;max-width:58ch;margin:var(--space-3) 0 0}
.backlink{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);text-decoration:none;text-transform:none;display:inline-block;margin-bottom:var(--space-3)}
.backlink:hover{color:var(--rose)}
.reading{border-radius:var(--radius-card);border:1px solid var(--line);padding:var(--space-5) var(--space-4);margin-bottom:var(--space-4)}
@media(max-width:640px){.reading{padding:var(--space-4) var(--space-3)}}
.reading .block{margin:0 0 var(--space-4)}
.reading .block:last-child{margin-bottom:0}
.reading .block .h{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 6px}
.reading .block p{margin:0 0 10px;line-height:1.7;max-width:62ch}
.reading .block p:last-child{margin-bottom:0}
.reading .block ul{margin:8px 0 0;padding-left:20px;max-width:62ch}
.reading .block li{margin:0 0 9px;line-height:1.65}
.reading .block li strong,.reading .block p strong{font-weight:500}
.outcome{background:var(--tile);border:1px solid var(--line);border-left:2px solid var(--rose);border-radius:var(--radius);padding:var(--space-3);margin:var(--space-4) 0}
.outcome .h{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 8px}
.outcome ul{margin:8px 0 0;padding-left:20px}
.outcome li{margin:0 0 7px;line-height:1.6}
.outcome li:last-child{margin-bottom:0}
.outcome p{margin:0 0 8px;line-height:1.65;max-width:62ch}
.diff{background:var(--rose-tint);color:var(--on-rose-tint);border-radius:var(--radius);padding:var(--space-3);margin:var(--space-4) 0 0}
.diff .h{font-family:var(--mono);font-size:var(--size-mono);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 6px;opacity:.85}
.diff p{margin:0;line-height:1.65;max-width:62ch}
.frame{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-2);margin:0 0 var(--space-4)}
.frame img{border-radius:var(--radius-tile);width:100%}
.frame figcaption{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);text-transform:none;padding:10px 4px 2px;line-height:1.5}

.qa{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:10px}
.qa div{display:grid;grid-template-columns:1fr 1.35fr;border-bottom:1px solid var(--line-soft)}
.qa div:last-child{border-bottom:none}
.qa span{padding:9px var(--space-2);font-size:var(--size-small);line-height:1.5}
.qa span:first-child{font-weight:500;border-right:1px solid var(--line-soft)}
.qa span:last-child{color:var(--text-2)}
.qa .qh{background:var(--tile)}
.qa .qh span{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);text-transform:uppercase;letter-spacing:.13em;font-weight:600}
@media(max-width:640px){.qa div{grid-template-columns:1fr}.qa span:first-child{border-right:none;padding-bottom:0}.qa span:last-child{padding-top:2px}.qa .qh{display:none}}

.flow{display:flex;align-items:stretch;margin:10px 0 0;flex-wrap:nowrap}
.flow-node{flex:1 1 0;min-width:0;background:var(--tile);border:1px solid var(--line);border-radius:var(--radius-tile);padding:var(--space-2);text-align:center}
.flow-node .t{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);text-transform:uppercase;letter-spacing:.13em;font-weight:600;display:block;margin-bottom:4px;line-height:1.35}
.flow-node .d{font-size:0.78rem;line-height:1.4;color:var(--text-3);display:block}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--rose);font-family:var(--mono);padding:0 6px;flex:0 0 auto}
@media(max-width:760px){.flow{flex-direction:column}.flow-arrow{padding:4px 0;transform:rotate(90deg)}}
.flow-cap{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);text-transform:none;margin:10px 0 0}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-3)}
.tag{font-family:var(--mono);font-size:var(--size-mono);text-transform:none;background:var(--tile);border:1px solid var(--line);color:var(--text-3);padding:3px 11px;border-radius:999px}
.tag.rose{border-color:var(--rose);color:var(--rose)}
.note{font-size:var(--size-small);color:var(--text-3);margin:var(--space-3) 0 0;line-height:1.6;max-width:62ch}
.nextprev{display:flex;justify-content:space-between;gap:var(--space-2);border-top:1px solid var(--line);margin-top:var(--space-5);padding-top:var(--space-3);font-family:var(--mono);font-size:var(--size-mono);text-transform:none}
.nextprev a{color:var(--rose);text-decoration:none}
/* two links side by side leaves each about 120px on a phone, which wraps the
   case-study titles to one or two words a line */
@media(max-width:560px){.nextprev{flex-direction:column;gap:var(--space-3)}}

/* ---------- generic cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-3);display:flex;flex-direction:column}
.card h4{font-size:var(--size-h3);margin:0 0 6px}
.card p{font-size:var(--size-small);line-height:1.6;color:var(--text-2);margin:0 0 var(--space-2)}
.card .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}

.stack{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media(max-width:760px){.stack{grid-template-columns:1fr}}
.stack-cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-3)}
.stack-cell h4{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 8px}
.stack-cell p{margin:0;font-size:var(--size-small);line-height:1.7;color:var(--text-2)}

/* ---------- resume ---------- */
.rsheet{border-radius:var(--radius-card);border:1px solid var(--line);padding:var(--space-5);margin-bottom:var(--space-4)}
@media(max-width:640px){.rsheet{padding:var(--space-3)}}
.rhead{border-bottom:1px solid var(--line);padding-bottom:var(--space-3);margin-bottom:var(--space-3)}
.rhead h1{font-size:2rem;max-width:none;margin:0 0 4px}
.rhead .sum{max-width:78ch;margin:var(--space-2) 0 0;line-height:1.65}
.rsec{margin-bottom:var(--space-4)}
.rsec:last-child{margin-bottom:0}
.rsec > h2{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 var(--space-2);padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.job{margin-bottom:var(--space-3);break-inside:avoid}
.job:last-child{margin-bottom:0}
.job h3{font-size:1.02rem;margin:0}
.job .jm{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:2px 0 6px}
.job ul{margin:0;padding-left:18px}
.job li{margin:0 0 5px;line-height:1.55;font-size:0.94rem}
.rskill{display:grid;grid-template-columns:170px 1fr;gap:var(--space-2);padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:0.94rem}
.rskill:last-child{border-bottom:none}
.rskill b{font-weight:500}
.rskill span{color:var(--text-2)}
@media(max-width:640px){.rskill{grid-template-columns:1fr;gap:2px}}

/* ---------- contact ---------- */
.contact{margin-top:var(--space-6);border-top:1px solid var(--line);padding:var(--space-6) 0}
.contact h2{font-size:var(--size-h2);margin:0 0 var(--space-2)}
.contact p{color:var(--text-2);max-width:56ch;margin:0 0 var(--space-4)}
.contact-links{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.clink{text-decoration:none;font-size:var(--size-small);padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius);color:var(--text-2);transition:filter .15s}
.clink:hover{color:var(--text);border-color:var(--text)}
.clink.primary{background:var(--text);color:#FFFFFF;border-color:var(--text);font-weight:500}
.clink.primary:hover{filter:none;background:#000000;color:#FFFFFF}
.avail{font-family:var(--mono);font-size:var(--size-mono);color:var(--mint);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 var(--space-3);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.pulse-dot{width:7px;height:7px;border-radius:999px;background:var(--mint);flex-shrink:0;margin-top:.5em}

footer{padding:0 0 var(--space-5)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;border-top:1px solid var(--strong);padding-top:var(--space-3)}
footer span{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);text-transform:none}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* rebrand thumbnail: chaos to system, palette only */
.ba-mini{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);align-items:start}
.ba-mini > div{display:flex;flex-direction:column;gap:7px}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.mini i{aspect-ratio:1;border-radius:2px;display:block;background:var(--tile)}
.mini.scatter i:nth-child(1){background:var(--line)}
.mini.scatter i:nth-child(2){background:var(--rose);opacity:.3}
.mini.scatter i:nth-child(3){background:var(--screen);border:1px solid var(--line)}
.mini.scatter i:nth-child(4){background:var(--text-3);opacity:.55}
.mini.scatter i:nth-child(5){background:var(--tile)}
.mini.scatter i:nth-child(6){background:var(--rose);opacity:.62}
.mini.system i{background:var(--rose);opacity:.85}
.mini.system i:nth-child(2n){opacity:.68}

/* ---------- print: the résumé sheet only ---------- */
@media print{
  @page{size:letter;margin:12mm 13mm}
  html,body{background:#FFFFFF !important}
  header.nav,.contact,footer,.noprint{display:none !important}
  body{font-size:9.3pt;line-height:1.34}
  .wrap{max-width:none;padding:0}
  .narrow{max-width:none}
  .rsheet{border:none;padding:0;margin:0;border-radius:0;background:#FFFFFF}
  .rhead{padding-bottom:8pt;margin-bottom:9pt}
  .rhead h1{font-size:17pt;margin-bottom:2pt}
  .rhead .sum{font-size:8.9pt;line-height:1.38;margin-top:5pt}
  .jm{font-size:7.6pt}
  .rsec{margin-bottom:8pt}
  .rsec > h2{font-size:7.6pt;margin-bottom:5pt;padding-bottom:3pt}
  .job{margin-bottom:6.5pt}
  .job h3{font-size:10pt}
  .job ul{padding-left:13pt}
  .job li{font-size:8.9pt;margin-bottom:1.6pt;line-height:1.34}
  .rskill{font-size:8.8pt;padding:2pt 0;grid-template-columns:132px 1fr}
  a{text-decoration:none}
}

/* ---------- work groups ---------- */
.group{margin-bottom:var(--space-5)}
.group-h{margin-bottom:var(--space-3)}
.group-h .kicker{margin-bottom:4px}
.group-p{color:var(--text-3);font-size:var(--size-small);max-width:62ch;margin:0}
.alsobox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-3);margin-top:var(--space-3)}
.alsobox p{font-size:var(--size-small);line-height:1.6;color:var(--text-2);margin:0 0 var(--space-2);max-width:76ch}
.alsobox p:last-child{margin-bottom:0}
.alsobox strong{font-weight:500;color:var(--text)}

/* ---------- ipl calendar thumb ---------- */
.cal{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cal .cal-h{font-family:var(--mono);font-size:0.58rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);text-align:center}
.cal i{height:26px;border-radius:3px;background:var(--tile);display:block}
.cal i.on{background:var(--rose);opacity:.8}

/* ---------- bookspot thumb ---------- */
.bsp{display:grid;grid-template-columns:1.15fr 1fr;gap:10px;height:100%}
.bsp-map{position:relative;background:var(--tile);border:1px solid var(--line);border-radius:var(--radius-tile)}
.bsp-map u{position:absolute;width:14px;height:14px;border-radius:999px;background:var(--rose);text-decoration:none;display:block;border:2px solid var(--screen)}
.bsp-card{background:var(--screen);border:1px solid var(--line);border-radius:var(--radius-tile);padding:12px;display:flex;flex-direction:column;gap:7px;justify-content:center}
.bsp-t{font-size:1.05rem;font-weight:500;color:var(--text)}

/* ---------- live demo ---------- */
.demo{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-4);margin-top:var(--space-4)}
.demo-h h2{font-size:var(--size-h2);margin:0 0 6px}
.demo-h p{color:var(--text-2);font-size:var(--size-small);max-width:62ch;margin:0}
.demo-frame{margin-top:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--screen)}
.demo-frame iframe{width:100%;height:640px;border:0;display:block}
@media(max-width:640px){.demo{padding:var(--space-3)}.demo-frame iframe{height:520px}}

/* ---------- case stat row ---------- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin:0 0 var(--space-4)}
@media(max-width:760px){.statrow{grid-template-columns:repeat(2,1fr)}}
.statrow > div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-3)}
.statrow .n{display:block;font-size:1.7rem;font-weight:500;color:var(--rose);line-height:1.1;margin-bottom:4px}
.statrow .l{display:block;font-size:var(--size-small);line-height:1.4;color:var(--text-3)}

/* ---------- image galleries inside a well ---------- */
.gal{display:grid;gap:var(--space-2);margin:var(--space-3) 0 0}
.gal.g4{grid-template-columns:repeat(4,1fr)}
.gal.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.gal.g4{grid-template-columns:repeat(2,1fr)}.gal.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gal.g4,.gal.g3{grid-template-columns:1fr}}
.gal figure{margin:0;background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.gal img{width:100%;border-radius:var(--radius-tile);display:block}
.gal figcaption{font-family:var(--mono);font-size:0.72rem;line-height:1.45;color:var(--text-3);text-transform:none;padding:8px 2px 2px}

/* ---------- prototype call-out ---------- */
.protolink{background:var(--rose-tint);color:var(--on-rose-tint);border-radius:var(--radius-card);padding:var(--space-3);margin:var(--space-4) 0;display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;flex-wrap:wrap}
.protolink .kicker{color:var(--on-rose-tint);opacity:.8;margin-bottom:2px}
.protolink .pl-t{font-size:1.15rem;font-weight:500;margin:0 0 4px}
.protolink .pl-n{font-size:var(--size-small);line-height:1.5;margin:0;max-width:54ch;opacity:.9}
.protolink .btn{white-space:nowrap}

/* ---------- case-study set pieces (studio dashboard) ---------- */
.tile{background:var(--tile);border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px}
.tilegrid{display:grid;gap:10px}
.tilegrid.g2{grid-template-columns:1fr 1fr}
.tilegrid.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hbar{height:10px;border-radius:5px;background:var(--tile);overflow:hidden}
.hbar i{display:block;height:100%;background:var(--rose);border-radius:5px}
.mrow2{display:grid;grid-template-columns:minmax(120px,150px) 1fr 52px;gap:12px;align-items:center;padding:6px 0;font-size:var(--size-small)}
.model{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;max-width:860px}
.model .arw{align-self:center;color:var(--text-3);font-family:var(--mono)}
.model p{margin:0;font-size:.9rem;line-height:1.7;color:var(--text-2);font-family:var(--mono)}
.chaos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.chaos .tile{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:18px 12px;font-size:.78rem;line-height:1.3}
.funnel{text-align:center;color:var(--text-3);font-family:var(--mono);font-size:.85rem;margin-bottom:8px}
.funnel-out{border:1px dashed var(--line);border-radius:var(--radius);padding:10px 14px;text-align:center;font-family:var(--mono);font-size:.8rem;color:var(--rose)}
@media(max-width:760px){.tilegrid.g5,.tilegrid.g2,.chaos{grid-template-columns:1fr 1fr}.model{grid-template-columns:1fr}.model .arw{display:none}}
@media(max-width:480px){.tilegrid.g5,.tilegrid.g2,.chaos{grid-template-columns:1fr}}

/* ============================================================
   Poster viewer — work-aristotle.html
   An inline SVG whose viewBox is panned and zoomed by script.
   Without JS the poster still renders whole; the region chips are
   revealed by the script, so nothing dead is shown to a reader
   who cannot use them.
   ============================================================ */
.pv{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--space-4);margin-top:var(--space-4)}
.pv-h h2{font-size:var(--size-h2);margin:0 0 6px}
.pv-h p{color:var(--text-2);font-size:var(--size-small);max-width:62ch;margin:0}
.pv-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:var(--space-3) 0 var(--space-2)}
.pv-btn{font-family:var(--mono);font-size:var(--size-mono);text-transform:none;
  color:var(--text-2);background:var(--tile);border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;cursor:pointer;line-height:1.4}
.pv-btn:hover{border-color:var(--rose);color:var(--rose)}
.pv-hint{font-family:var(--mono);font-size:.72rem;color:var(--text-3);text-transform:none;
  margin-left:auto}
/* touch-action:none is what lets a one-finger drag pan the poster instead of
   scrolling the page; overscroll-behavior stops a pinch from rubber-banding it */
/* The poster is 3941 x 2550, so a short stage letterboxes it and leaves grey
   down both sides when the whole thing is in view. Taller than the poster's
   own ratio would be, so a fitted poster very nearly fills the width. */
.pv-stage{position:relative;height:clamp(380px,74vh,860px);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#EFEBE3;touch-action:none;
  cursor:grab;overscroll-behavior:contain}
.pv-stage.is-grab{cursor:grabbing}
.ap-svg{width:100%;height:100%;display:block}
.pv-chipwrap{margin-top:var(--space-3)}
.pv-grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pv-lab{font-family:var(--mono);font-size:.7rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.13em;font-weight:600;
  flex:0 0 auto;padding-right:4px}
.pv-chip{font-family:var(--mono);font-size:var(--size-mono);text-transform:none;
  background:var(--tile);border:1px solid var(--line);color:var(--text-2);padding:4px 11px;
  border-radius:999px;cursor:pointer;line-height:1.4}
.pv-chip:hover{border-color:var(--rose);color:var(--rose)}
.pv-chip[aria-pressed="true"]{border-color:var(--rose);background:var(--rose-tint);
  color:var(--on-rose-tint)}
.pv:fullscreen{background:var(--ground);border-radius:0;display:flex;flex-direction:column;
  padding:var(--space-3)}
.pv:fullscreen .pv-h,.pv:fullscreen .flow-cap,.pv:fullscreen .cta-row{display:none}
.pv:fullscreen .pv-stage{flex:1 1 auto;height:auto}
@media(max-width:640px){.pv{padding:var(--space-3)}.pv-hint{display:none}}
@media print{.pv-stage{height:auto;aspect-ratio:3941/2550}.pv-bar,.pv-chipwrap{display:none}}

.sect-h{font-size:var(--size-h2);margin:var(--space-5) 0 6px}
.sect-p{color:var(--text-2);font-size:var(--size-small);max-width:62ch;margin:0 0 var(--space-3)}

/* ============================================================
   Brand case study — Chaney Family Dentistry
   ============================================================ */
/* before / after: two plates side by side, both on white, because a
   logo comparison is only fair if both sit on the same ground */
.baw{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-3)}
.baw figure{margin:0}
.baw .plate{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--space-4);display:flex;align-items:center;justify-content:center;min-height:200px}
.baw img{max-width:100%;height:auto;display:block}
.baw figcaption{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  text-transform:none;margin-top:10px}
@media(max-width:640px){.baw{grid-template-columns:1fr}}

.pal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);margin-top:var(--space-3)}
.pal>div{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--tile)}
.pal .chip{display:block;height:78px}
.pal .nm{display:block;font-family:var(--mono);font-size:var(--size-mono);color:var(--text-2);
  text-transform:uppercase;letter-spacing:.13em;font-weight:600;padding:9px 11px 1px}
.pal .hx{display:block;font-family:var(--mono);font-size:.7rem;color:var(--text-3);
  padding:0 11px 10px;text-transform:uppercase}
@media(max-width:640px){.pal{grid-template-columns:repeat(2,1fr)}}

.quote{border-left:2px solid var(--rose);background:var(--panel);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
  padding:var(--space-3) var(--space-4);margin:var(--space-4) 0}
.quote p{font-size:1.02rem;line-height:1.72;color:var(--text-2);margin:0 0 var(--space-2);
  max-width:64ch}
.quote cite{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  font-style:normal;text-transform:none}

/* a single wide plate — used for the lockup and for the apnea slide */
.plateshot{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--space-4);margin-top:var(--space-3)}
.plateshot.dark{background:var(--plate-dark);padding:0;overflow:hidden}
.plateshot img{width:100%;height:auto;display:block}

/* portrait grid — four drawn staff portraits, all built the same way, which is
   the whole point of them, so they need to sit in one even row */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);
  margin-top:var(--space-3)}
.pgrid figure{margin:0}
.pgrid img{width:100%;height:auto;display:block;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-card)}
.pgrid figcaption{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  text-transform:none;margin-top:8px;text-align:center}
@media(max-width:640px){.pgrid{grid-template-columns:repeat(2,1fr)}}

/* a plate that breaks out past the reading column — for slides whose own
   callout type has to stay legible, which the 765px measure does not allow */
.plateshot.bleed{width:min(1060px,calc(100vw - 40px));margin-left:50%;
  transform:translateX(-50%)}
@media print{.plateshot.bleed{width:auto;margin-left:0;transform:none}}

/* before/after plates should be the same height even when the two images are
   different shapes — otherwise the comparison reads as a ranking */
.baw figure{display:flex;flex-direction:column}
.baw .plate{flex:1 1 auto}

/* a dense 16:9 slide cannot be read at 390px wide, so every slide plate opens
   its own full-size file where the phone's own pinch-zoom can take over */
.plateshot a.plink{display:block;border-radius:inherit;overflow:hidden}
.flow-cap a.capfull{color:var(--text-2);border-bottom:1px solid var(--line);
  text-decoration:none;white-space:nowrap;margin-left:.6em}
.flow-cap a.capfull:hover{color:var(--rose);border-bottom-color:var(--rose)}

/* before/after on a dark ground, for artwork that already has its own night sky */
.baw.dark .plate{background:var(--plate-dark);padding:0;overflow:hidden;min-height:0}
.baw.dark img{width:100%}

/* ============================================================
   THE SLEEP APNEA EXPLAINER
   Rebuilt. The first version put every drawing inside an identical
   bordered card at an identical width and hung a two-column caption
   list underneath it, five times running. That is the shape of a slide
   deck, not of a page, and no amount of work inside the cards was going
   to fix a rhythm the cards themselves were making.
   So the frames came off. The artwork is transparent now, so each
   drawing sits directly on a band that runs nearly the full width of
   the window, mixed for that drawing; the steps move alongside the art
   instead of queueing beneath it; and the craft notes at the end land
   on paper, because a page about a thing that happens in a dark room
   still has to let the reader out of the dark room at some point.
   None of these classes are shared with another page.
   ============================================================ */

/* Bands live inside .wrap.narrow and break out of it. Not 100vw: 100vw
   counts the scrollbar, so a true full-bleed band is wider than the
   client area and raises a horizontal scrollbar on every desktop that
   shows one. The usual cure is overflow-x:hidden on the body, which
   would kill the sticky header. min(1560px, 100vw - 22px) clears the
   widest scrollbar and reads as full bleed at any real window size. */
/* These four bands are dark on purpose: the plates inside them are drawn on
   #131F46 and converting the ground would break the art. They also carry text
   and numbered labels, so the tokens those consume have to flip with the
   ground, the same way .well flips the other direction. On-dark values are the
   previous brand's, unchanged, because they were already correct here. */
.sa-band{
  --text:#F4F2EE; --text-2:#BBB2C0; --text-3:#8B8494;
  --line:#423748; --line-soft:#2E2735;
  --rose:#DFA192; --on-rose:#2A120B;
  --mint:#9FE0CE;
  --kicker:var(--rose);
  color:var(--text);
}
.sa-band{width:min(1560px,calc(100vw - 22px));margin-left:50%;
  transform:translateX(-50%);padding:var(--space-6) var(--space-4);
  margin-top:var(--space-5);margin-bottom:var(--space-5)}
.sa-in{max-width:1220px;margin:0 auto}
@media(max-width:640px){.sa-band{padding:var(--space-5) var(--space-3)}}
@media print{.sa-band{width:auto;margin-left:0;transform:none;padding:0;background:none}}

/* Four grounds, not one. A page whose every panel is mixed identically
   reads as a template even when the drawings on it do not. The two
   anatomy plates deliberately share g2 — same ground, same cross
   section, forty lines of copy apart. */
/* The bands are navy, not the site's warm near-black, because the drawings
   are: every plate was drawn on a field of #131F46 and two of them still
   carry it. Matching the page to the artwork rather than the artwork to the
   page is what lets a drawing sit on the band with no frame and no seam. The
   line and secondary-text colours go cool inside a band for the same reason —
   a purple-grey rule on a navy ground reads as a leftover. */
.sa-band,.sa-band .sa-in{--line:#2C3C68;--line-soft:#212D51;
  --text-2:#B7BFD8;--text-3:#8C95B6}
.sa-band.g1{background:radial-gradient(120% 140% at 30% 18%,#17244F 0%,#131F46 44%,#0E1737 100%)}
.sa-band.g2{background:radial-gradient(95% 125% at 50% 42%,#16224C 0%,#121C41 48%,#0C1430 100%)}
.sa-band.g3{background:linear-gradient(180deg,#0C1430 0%,#182550 46%,#182550 54%,#0C1430 100%)}
.sa-band.g4{background:radial-gradient(80% 115% at 50% 46%,#1A2856 0%,#101A3C 55%,#080D22 100%)}

/* a band's own header: index, label, and a rule that runs out to the edge */
.sa-bh{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4)}
.sa-bh .ix{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);letter-spacing:.12em}
.sa-bh .ti{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  text-transform:none;letter-spacing:.05em}
.sa-bh .ru{flex:1 1 40px;height:1px;background:var(--line)}

/* art beside its steps, rather than art above its steps */
.sa-two{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:var(--space-5);align-items:center}
.sa-two.top{align-items:start}
@media(max-width:900px){.sa-two{grid-template-columns:1fr;gap:var(--space-4);align-items:start}}

/* No border, no radius, no fill. The drawing is transparent and the band
   is already its ground; a frame here puts the art back on a slide. */
.sa-stage{position:relative;line-height:0}
.sa-stage>img{width:100%;height:auto;display:block}
.sa-stage.mid{max-width:820px;margin:0 auto}

/* The cutaway again, at the top and undisturbed. It is the drawing the page
   exists for, and the annotated version further down gives a third of its width
   to the step column — the right trade there, the wrong one at first sight. So
   it opens the page at full size with nothing at all on it. */
.sa-band.opener{margin-top:var(--space-3);padding-top:var(--space-4);padding-bottom:var(--space-4)}
.sa-stage.plate{max-width:1240px;margin:0 auto}

.sa-cap{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  text-transform:none;line-height:1.65;margin:var(--space-3) 0 0;max-width:44ch}
.sa-cap.warn{color:#D98878}

/* a vertical step column */
.sa-steps{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.sa-steps li{margin:0}
.sa-step{display:flex;gap:13px;width:100%;text-align:left;background:none;border:0;
  border-left:2px solid transparent;padding:11px 14px;color:inherit;cursor:pointer;
  font:inherit;transition:background .18s,border-color .18s}
.sa-step:hover{background:rgba(255,255,255,.04)}
.sa-step.on{background:rgba(255,255,255,.06);border-left-color:var(--rose)}
.sa-step:focus-visible{outline:2px solid var(--rose);outline-offset:-2px}
.sa-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.7rem;background:#13293F;color:#A7E6F8;margin-top:2px;
  transition:background .18s,color .18s}
.sa-step.on .sa-n{background:var(--rose);color:#241D2B}
.sa-t{font-size:var(--size-small);color:var(--text-2);line-height:1.6}
.sa-t b{display:block;font-weight:600;color:var(--text);margin-bottom:2px}

/* The flow strip. The system drawing is one unbroken left-to-right path,
   so its steps run left to right too, threaded on a rule standing in for
   the line the air travels. Under 900px the rule turns vertical instead
   of vanishing — the sequence is the content, not decoration on it. */
.sa-flow{list-style:none;margin:var(--space-5) 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(6,1fr)}
.sa-flow::before{content:"";position:absolute;left:8%;right:8%;top:12px;height:1px;
  background:linear-gradient(90deg,transparent,#3E618A 10%,#3E618A 90%,transparent)}
.sa-flow li{margin:0}
.sa-fstep{width:100%;background:none;border:0;padding:0 9px;color:inherit;font:inherit;
  cursor:pointer;text-align:center;display:block}
.sa-fstep:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.sa-fdot{width:25px;height:25px;border-radius:50%;margin:0 auto 13px;display:grid;
  place-items:center;font-family:var(--mono);font-size:.7rem;background:#0F1A28;
  border:1px solid #3E618A;color:#A7E6F8;
  transition:background .18s,border-color .18s,color .18s}
.sa-fstep:hover .sa-fdot,.sa-fstep.on .sa-fdot{background:var(--rose);border-color:var(--rose);color:#241D2B}
.sa-ft{font-size:.78rem;line-height:1.5;color:var(--text-3);transition:color .18s}
.sa-ft b{display:block;font-weight:600;color:var(--text-2);margin-bottom:3px;
  font-size:var(--size-small);transition:color .18s}
.sa-fstep:hover .sa-ft,.sa-fstep.on .sa-ft{color:var(--text-2)}
.sa-fstep:hover .sa-ft b,.sa-fstep.on .sa-ft b{color:var(--text)}
@media(max-width:900px){
  .sa-flow{grid-template-columns:1fr;gap:var(--space-2)}
  .sa-flow::before{left:12px;right:auto;top:8px;bottom:8px;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,#3E618A 8%,#3E618A 92%,transparent)}
  .sa-fstep{display:flex;gap:13px;text-align:left;padding:0}
  .sa-fdot{margin:0;flex:0 0 25px}
}

/* Seven parts in a fixed order is a sequence, so the flagship drawing
   gets a way to walk it rather than only a way to browse it. */
.sa-seq{display:flex;align-items:center;gap:9px;margin:var(--space-4) 0 0;
  border-top:1px solid var(--line);padding-top:var(--space-3)}
.sa-sb{font-family:var(--mono);font-size:var(--size-mono);text-transform:none;
  background:none;border:1px solid var(--line);color:var(--text-2);padding:6px 14px;
  border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s}
.sa-sb:hover:not([disabled]){border-color:var(--rose);color:var(--rose)}
.sa-sb:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.sa-sb[disabled]{opacity:.3;cursor:default}
.sa-pos{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);margin-left:auto}

/* The key. Three colours, three jobs, stated once at the top and then
   never repeated on a plate. It is the reason none of the drawings below
   need a legend of their own. */
.sa-key{display:flex;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-3) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:var(--space-4) 0 0}
.sa-key div{display:flex;gap:10px;flex:1 1 200px}
.sa-key i{width:9px;height:9px;border-radius:2px;flex:0 0 9px;margin-top:7px}
.sa-key .kt{font-size:.79rem;line-height:1.5;color:var(--text-3)}
.sa-key .kt b{display:block;font-family:var(--mono);font-size:var(--size-mono);font-weight:400;
  text-transform:uppercase;letter-spacing:.13em;font-weight:600;color:var(--text-2);margin-bottom:3px}

/* a numbered section head in the reading column, to match the bands */
.sa-sec{margin:var(--space-6) 0 0}
.sa-sec .ix{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);
  letter-spacing:.12em;display:block;margin-bottom:11px}
.sa-sec h2{font-size:var(--size-h2);margin:0 0 var(--space-2);max-width:26ch;line-height:1.2}
.sa-sec>p{color:var(--text-2);max-width:64ch}
.sa-sec>p.lead{color:var(--text-2);font-size:var(--size-small);max-width:62ch}

/* The acronym. It was a centred bordered card, which made four words of
   plain vocabulary look like a pull quote. It is four words. */
.sa-apap{margin:var(--space-4) 0 0}
.sa-apap .w{font-size:clamp(1.5rem,5vw,2.9rem);line-height:1.14;font-weight:500;
  margin:0;letter-spacing:-.01em}
.sa-apap .w i{font-style:normal;color:#A5E04B}
.sa-apap .s{color:var(--text-2);font-size:var(--size-small);margin:var(--space-3) 0 0;max-width:58ch}

/* The payoff plate carries the closed airway beside it, cropped to the
   closure itself and shown small. Repeating the whole earlier drawing would
   read as a duplicate; a 168px detail of the one place the two plates differ
   reads as what it is, a reference back to the state the machine undoes. */
.sa-cmp{display:flex;gap:var(--space-3);align-items:flex-start;margin:var(--space-4) 0 0}
.sa-cmp img{width:168px;flex:0 0 168px;height:auto;opacity:.62;filter:saturate(.8)}
.sa-cmp p{font-size:.78rem;line-height:1.55;color:var(--text-3);margin:0}
.sa-cmp p b{display:block;font-family:var(--mono);font-size:var(--size-mono);font-weight:400;
  color:var(--text-2);text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin-bottom:4px}

/* The craft notes, on paper. Five bold-lead paragraphs on the dark ground
   was the one stretch of the page with no design on it at all, and
   arriving at paper after two thousand pixels of night is a bigger
   rhythm change than any single panel could have made. */
.sa-well{background:var(--ground);width:min(1560px,calc(100vw - 22px));margin-left:50%;transform:translateX(-50%);
  margin-top:var(--space-6);margin-bottom:var(--space-6);padding:var(--space-6) var(--space-4)}
@media print{.sa-well{width:auto;margin-left:0;transform:none}}
.sa-rules{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-5)}
@media(max-width:820px){.sa-rules{grid-template-columns:1fr}}
.sa-rules li{margin:0;border-top:1px solid var(--line);padding-top:var(--space-3)}
.sa-rules li.wide{grid-column:1/-1}
.sa-rules .rn{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);
  letter-spacing:.12em;display:block;margin-bottom:9px}
.sa-rules h3{font-size:1.02rem;line-height:1.34;margin:0 0 7px;font-weight:600}
.sa-rules p{font-size:var(--size-small);line-height:1.62;color:var(--text-2);margin:0}

/* the pins on the artwork, unchanged in behaviour: cyan at rest because
   cyan is air on every plate, rose when live because rose is this site */
.xp-pins{position:absolute;inset:0;width:100%;height:100%}
.xp-pin{cursor:pointer}
.xp-pin .h{fill:#6FD3EE;opacity:.14;transition:opacity .18s,fill .18s}
.xp-pin .d{fill:#0C1830;stroke:#6FD3EE;transition:fill .18s,stroke .18s}
.xp-pin .n{fill:#A7E6F8;font-family:var(--mono);text-anchor:middle;
  dominant-baseline:central;transition:fill .18s}
.xp-pin.on .h{fill:#DFA192;opacity:.3}
.xp-pin.on .d{fill:#DFA192;stroke:#F6E6E0}
.xp-pin.on .n{fill:#241D2B}

@media(prefers-reduced-motion:reduce){
  .xp-pin *,.sa-step,.sa-n,.sa-fdot,.sa-ft,.sa-ft b,.sa-sb{transition:none}
}
@media print{
  .sa-step,.sa-fstep{background:none}
  .sa-seq{display:none}
}

/* The fold glyphs. Only the accent-coloured marks move — the rose and the mint
   details, never the structural strokes in --line or --text-3. Moving every
   child made the whole icon look like it was sliding; holding the structure
   still and letting the highlight shift reads as the drawing being alive
   inside its tile. The tile is a fixed 64x48 and nothing here can change it:
   these are transforms on the SVG's own children, so no layout is involved. */
.fold-th svg [stroke="#8E3B44"],.fold-th svg [fill="#8E3B44"],
.fold-th svg [stroke="#207560"],.fold-th svg [fill="#207560"]{
  transform-box:fill-box;transform-origin:center;
  animation:glyphA 4.4s ease-in-out infinite}
.fold-th svg [stroke="#207560"],.fold-th svg [fill="#207560"]{
  animation-name:glyphB;animation-duration:5.3s;animation-delay:-1.6s}
/* a second accent mark in the same glyph offsets, so they never move as one */
.fold-th svg [stroke="#8E3B44"]~[stroke="#8E3B44"],
.fold-th svg [fill="#8E3B44"]~[fill="#8E3B44"]{
  animation-duration:5.1s;animation-delay:-2.2s}
@keyframes glyphA{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes glyphB{0%,100%{transform:translateX(0)}50%{transform:translateX(1.2px)}}
.fold:not([open]) .fold-th svg *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.fold-th svg *{animation:none}}


/* ---------- choose democracy ---------- */
/* the three website illustrations are drawn on white and would otherwise
   float on the plum ground, so each sits on its own white plate */
.cdfig{margin:var(--space-4) 0}
.cdfig .plate{display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-card);padding:var(--space-3)}
.cdfig img{width:100%;height:auto}
.cdfig figcaption{font-size:.95rem;line-height:1.6;color:var(--text-2);
  max-width:62ch;margin-top:12px}
/* eighteen small drawings, met one at a time in the book, shown as one even grid */
.cdgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);
  margin-top:var(--space-3)}
.cdgrid a{display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.cdgrid img{width:100%;height:auto;display:block}
@media(max-width:640px){.cdgrid{grid-template-columns:repeat(2,1fr)}}
/* three more videos from the channel, one even 16:9 row */
.cdvids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);
  margin-top:var(--space-3)}
.cdvids iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;
  border-radius:var(--radius);background:var(--screen);display:block}
@media(max-width:760px){.cdvids{grid-template-columns:1fr}}

/* folds settle open — content fades up 4px rather than snapping in.
   Closing snaps, which reads fine; only the reveal needed the ease. */
details.fold[open] .fold-b{animation:foldIn .22s ease-out}
@keyframes foldIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){details.fold[open] .fold-b{animation:none}}

/* a locked pin flares once when it lands, so the eye finds it across a wide
   drawing; one shot, no loop */
.xp-pin.on .h{animation:xpPulse .5s ease-out}
@keyframes xpPulse{from{opacity:.55}to{opacity:.3}}
@media(prefers-reduced-motion:reduce){.xp-pin.on .h{animation:none}}

/* ---------------------------------------------------------- most recent
   One project gets the top of the page. It is the newest work, it is the
   only one whose source can be shown in full, and it is the clearest single
   argument for how evidence gets handled here - so it leads rather than
   sitting in the personal-projects row. */
.recentband{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--space-4);align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--space-4);position:relative;overflow:hidden}
.recentband:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--rose)}
.rb-shot{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);
  line-height:0;transition:transform .2s ease}
.rb-shot img{width:100%;height:auto;display:block}
.recentband:hover .rb-shot{transform:translateY(-2px)}
.rb-copy .ptag{display:inline-block;font-family:var(--mono);font-size:var(--size-mono);
  text-transform:none;background:var(--rose-tint);color:var(--on-rose-tint);
  border-radius:999px;padding:4px 13px;margin-bottom:var(--space-2)}
.rb-copy h3{font-size:var(--size-h3);margin:0 0 var(--space-2)}
.rb-copy h3 a{color:var(--text);text-decoration:none}
.rb-copy h3 a:hover{color:var(--rose)}
.rb-copy p{color:var(--text-2);font-size:var(--size-small);margin:0 0 var(--space-2);max-width:52ch}
.rb-facts{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3)!important}
.rb-links{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-top:var(--space-3)}
.rb-live{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);
  font-size:var(--size-mono);color:var(--mint);text-decoration:none;border-bottom:1px solid transparent}
.rb-live:hover{border-bottom-color:var(--mint)}
.rb-live .rb-a{transition:transform .15s ease}
.rb-live:hover .rb-a{transform:translateX(3px)}
@media(max-width:760px){.recentband{grid-template-columns:1fr;padding:var(--space-3)}}
@media(prefers-reduced-motion:reduce){.rb-shot,.rb-live .rb-a{transition:none}
  .recentband:hover .rb-shot{transform:none}}

/* ============================================================================
   LANE PAGES — /ai /marketing /comms /nonprofit /design
   One deck of cards, dealt five ways. Generated by lanes/build-lanes.js from
   lanes/cards.data.js. Nothing below changes the homepage or the case studies.
   ========================================================================== */

/* ---------- global visible focus ----------
   The /design hero claims accessible, so focus has to be obvious everywhere,
   not just on the skip link. Mint clears 12.3:1 on the ground and 4.9:1 in the
   ivory well, both comfortably past the 3:1 minimum for a non-text indicator. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--text);outline-offset:3px;border-radius:4px}
.wcard:focus-visible,.ltile:focus-visible{border-color:var(--text)}

/* ---------- the work menu ----------
   A native <details> so it opens on Enter or Space and needs no script. */
.wdrop{position:relative}
.wdrop summary{list-style:none;cursor:pointer;font-family:var(--mono);
  font-size:var(--size-mono);color:var(--text-3);text-transform:none;
  padding:4px 0;border-bottom:1px solid transparent;display:inline-flex;
  align-items:center;gap:6px}
.wdrop summary::-webkit-details-marker{display:none}
.wdrop summary:hover,.wdrop[open] summary{color:var(--rose);border-bottom-color:var(--rose)}
.wdrop .caret{font-size:.7em;transition:transform .15s}
.wdrop[open] .caret{transform:rotate(180deg)}
.wdrop-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:60;margin:0;
  padding:6px;list-style:none;min-width:232px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:0 18px 40px rgba(30,25,20,.18)}
.wdrop-menu a{display:block;text-decoration:none;padding:9px 12px;border-radius:var(--radius);
  font-size:var(--size-small);color:var(--text-2)}
.wdrop-menu a:hover{background:var(--tile);color:var(--rose)}
.wdrop-menu a[aria-current="page"]{color:var(--rose);background:var(--rose-tint)}
.wdrop-menu li:first-child a{color:var(--text-3)}
@media(max-width:760px){.wdrop-menu{position:static;box-shadow:none;margin-top:8px;min-width:0}}

/* ---------- pill toggles ---------- */
.lpills{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-4) 0 0}
.lpills-lb{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  text-transform:none}
.lpills-in{display:flex;gap:7px;flex-wrap:wrap}
.lpill{text-decoration:none;font-family:var(--mono);font-size:var(--size-mono);
  text-transform:none;padding:5px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--text-3);background:var(--tile)}
.lpill:hover{border-color:var(--rose);color:var(--rose)}
.lpill.on{background:var(--text);border-color:var(--text);color:#FFFFFF;font-weight:500}

/* ---------- hero ---------- */
.lp-hero{padding:0 0 var(--space-5)}
.lp-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-5);
  align-items:center;padding:var(--space-5) 0 0}
.lp-hero-copy h1{font-size:var(--size-hero);line-height:1.12;max-width:20ch;
  margin:0 0 var(--space-3)}
.lp-hero-copy .lede{max-width:56ch}
.lp-hero-art img{width:100%;height:auto;border-radius:var(--radius-card);
  border:1px solid var(--line);background:var(--panel)}
@media(max-width:900px){.lp-hero-in{grid-template-columns:1fr;gap:var(--space-4)}}
.lp-metrics{margin-top:var(--space-5)}

/* ---------- press band ---------- */
.pressband{margin-top:var(--space-5);border-top:1px solid var(--line);padding-top:var(--space-4)}
.pb-h{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);
  text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 var(--space-3)}
.pb-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3)}
.pb-list li{background:var(--panel);border:1px solid var(--line);
  border-left:2px solid var(--rose);border-radius:var(--radius);padding:var(--space-3)}
.pb-list blockquote{margin:0 0 10px;font-size:var(--size-small);line-height:1.6;color:var(--text)}
.pb-list blockquote::before{content:"“"}
.pb-list blockquote::after{content:"”"}
.pb-list cite{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  font-style:normal;text-transform:none;line-height:1.5;display:block}
.pb-list cite a{color:var(--rose)}
.pb-also{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:var(--space-2)}
.pb-also li{font-size:var(--size-small);color:var(--text-2)}
.pb-also a{color:var(--rose)}

/* ---------- client strip ---------- */
.clientstrip{margin-top:var(--space-5);border-top:1px solid var(--line);padding-top:var(--space-4)}
.cs-h{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);
  text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:0 0 var(--space-3)}
.clientstrip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.clientstrip li{background:var(--tile);border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font-size:var(--size-small);color:var(--text-2)}

/* ---------- sections and lead cards ---------- */
.lp-sec{padding:var(--space-6) 0 0}
.lp-shot{padding:0;overflow:hidden}
.lp-shot img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:var(--radius)}
.lp-credit{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  line-height:1.5;display:block;margin:0 0 var(--space-2)}

/* the receipt under a headline number. Sits directly beneath the metrics strip,
   quieter than the strip and louder than a footnote, because a reader who
   doubts the number should not have to go looking. */
.lp-proofnote{max-width:74ch;margin:var(--space-3) 0 0;font-size:var(--size-small);
  line-height:1.65;color:var(--text-2);border-left:2px solid var(--line);
  padding-left:var(--space-3)}
.pn-srcs{display:block;margin-top:8px;font-family:var(--mono);
  font-size:var(--size-mono)}
.pn-srcs a{color:var(--rose);margin-right:var(--space-3)}
.pn-srcs a:last-child{margin-right:0}
.lp-pending{font-family:var(--mono);font-size:var(--size-mono);color:var(--on-mint-tint);
  background:var(--mint-tint);border-radius:var(--radius);padding:6px 11px;
  display:block;margin:0 0 var(--space-2);line-height:1.5}

/* ---------- compact tiles ---------- */
.ltiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
@media(max-width:940px){.ltiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ltiles{grid-template-columns:1fr}}
.ltile{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--space-3) var(--space-3) var(--space-4);transition:filter .15s,border-color .15s}
.ltile:hover{border-color:var(--text);filter:none}
.lt-tag{font-family:var(--mono);font-size:var(--size-mono);text-transform:uppercase;letter-spacing:.13em;font-weight:600;
  color:var(--text-3);margin:0 0 8px}
.ltile h3{font-size:1.05rem;line-height:1.3;margin:0 0 7px}
.ltile p{font-size:var(--size-small);line-height:1.6;color:var(--text-2);margin:0}
.lt-go{position:absolute;right:var(--space-3);bottom:var(--space-2);
  font-family:var(--mono);color:var(--rose)}

/* A tile that carries artwork bleeds it to the tile edge and squares off the
   bottom corners of the image so the picture reads as part of the card, not a
   thumbnail floating inside padding. Same top-anchored crop as a lead card,
   shallower, because these tiles sit three across. */
.lt-shot{margin:calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3);
  border-radius:var(--radius-card) var(--radius-card) 0 0;overflow:hidden;
  background:var(--tile);aspect-ratio:2.69 / 1}
.lt-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@supports not (aspect-ratio: 1 / 1){.lt-shot{height:132px}}

/* ---------- drawn plates: recreations, never a placeholder box ---------- */
.lp-drawn{background:var(--screen);border:1px solid var(--line);position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:10px}
.lp-cap{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-3);position:absolute;left:var(--space-3);
  bottom:10px}
.lp-panels{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;
  gap:7px;height:132px}
.lp-panels i{display:block;background:var(--tile);border:1px solid var(--line);
  border-radius:3px}
.lp-panels .p1{grid-row:1 / span 2;border-left:3px solid var(--rose)}
.lp-panels .p3{background:var(--rose);opacity:.55;border-color:var(--rose)}
.lp-board{position:relative;height:132px;background:var(--tile);
  border:1px solid var(--line);border-radius:var(--radius-tile);padding:12px}
.lp-board u{display:block;height:6px;border-radius:2px;background:var(--line-soft);border:1px solid var(--line);
  text-decoration:none;margin-bottom:9px}
.lp-board .ttl{height:11px;width:58%;background:var(--rose);opacity:.85}
.lp-board .l1{width:82%}.lp-board .l2{width:66%}.lp-board .l3{width:74%}
.lp-board .dot{position:absolute;width:17px;height:17px;border-radius:999px;
  background:var(--rose);opacity:.55;display:block}
.lp-board .d1{right:16px;top:16px}.lp-board .d2{right:40px;top:44px;opacity:.35}
.lp-board .d3{right:20px;top:74px;opacity:.7}
.lp-room{position:relative;height:132px;display:flex;align-items:flex-end;
  justify-content:center;gap:9px}
.lp-room .wall{position:absolute;left:0;right:0;top:0;height:74px;display:block;
  background:var(--tile);border:1px solid var(--line);border-radius:var(--radius-tile);
  border-bottom:3px solid var(--rose)}
.lp-room b{width:15px;border-radius:6px 6px 0 0;background:var(--text-3);opacity:.6;display:block;
  position:relative}
.lp-room .h1{height:36px}.lp-room .h2{height:44px}.lp-room .h3{height:39px}
.lp-room .h4{height:47px}.lp-room .h5{height:34px}
.lp-sign{height:132px;display:flex;align-items:center;justify-content:center;gap:12px}
.lp-sign u{display:block;width:44px;height:56px;background:var(--tile);
  border:1px solid var(--line);border-radius:3px;text-decoration:none}
.lp-sign .s1{transform:rotate(-7deg);border-top:3px solid var(--rose)}
.lp-sign .s2{transform:rotate(3deg);height:66px;border-top:3px solid var(--mint)}
.lp-sign .s3{transform:rotate(9deg);border-top:3px solid var(--rose)}

/* ---------- lane cross-links in the footer ---------- */
.lanefoot-wrap{border-top:1px solid var(--line-soft);padding-top:var(--space-3);
  margin-bottom:var(--space-2)}
.lanefoot{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:baseline}
.lf-h{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  text-transform:uppercase;letter-spacing:.13em;font-weight:600}
.lf-links{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.lf-links a{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose);
  text-transform:none;text-decoration:none;border-bottom:1px solid transparent}
.lf-links a:hover{border-bottom-color:var(--rose)}

@media (prefers-reduced-motion:reduce){.wdrop .caret{transition:none}}

/* ---------- the Futures Lab clip and still on the facilitation page ---------- */
.sfvid,.sfstill{margin:var(--space-4) 0 0}
.sfvid video,.sfstill img{width:100%;height:auto;display:block;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--screen)}
.sfvid figcaption,.sfstill figcaption{font-family:var(--mono);font-size:var(--size-mono);
  color:var(--text-3);line-height:1.6;margin-top:10px}

/* ---------- the Audubon board gallery on the facilitation page ---------- */
.boards{margin:var(--space-4) 0 var(--space-4)}
.boards figure{margin:0 0 var(--space-4)}
.boards img{width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff}
.boards figcaption{font-size:var(--size-small);color:var(--text-2);line-height:1.65;
  margin-top:10px}
.boards figcaption strong{color:var(--text)}
.gffig{margin:var(--space-4) 0}
.gffig img{width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff}
.gffig figcaption{font-size:var(--size-small);color:var(--text-2);line-height:1.65;margin-top:10px}
.gffig figcaption strong{color:var(--text)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start}
@media(max-width:700px){.pair{grid-template-columns:1fr}}

/* ---------- the comics index: square thumbnails, work before words ----------
   Each thumbnail is a square crop of the comic's own opening panel, taken from
   the top so hand lettering survives the crop. No separate thumbnail files: the
   panels are already in the repo and the crop is done in the box. */
.cread{margin:var(--space-5) 0 var(--space-6)}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
@media(max-width:940px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* below this the two squares cannot both fit the column, and the row
   pushed the whole page sideways on a phone. */
@media(max-width:430px){.cgrid{grid-template-columns:minmax(0,1fr)}}
.ccard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-bottom:0}
.cthumb{display:block;aspect-ratio:1 / 1;overflow:hidden;border-radius:var(--radius-card);
  border:1px solid var(--line);background:var(--tile);margin-bottom:var(--space-2);
  transition:border-color .15s}
.cthumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.ccard:hover .cthumb,.ccard:focus-visible .cthumb{border-color:var(--rose)}
.ccard:hover .cthumb img,.ccard:focus-visible .cthumb img{transform:scale(1.05)}
.ccard:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:var(--radius)}
.ccard .ct{font-size:.95rem;line-height:1.35;margin-bottom:5px}
.ccard:hover .ct{color:var(--rose)}
.ccard .cm{display:block;font-family:var(--mono);font-size:var(--size-mono);
  color:var(--text-3);text-transform:uppercase;letter-spacing:.13em;font-weight:600;white-space:nowrap}
/* .cnote is already the reader pages' mint content-note panel, so the
   chip in this grid gets its own name. */
.cflag{display:block;margin-top:3px;font-family:var(--mono);font-size:var(--size-mono);
  text-transform:none;color:var(--rose)}
@supports not (aspect-ratio: 1 / 1){.cthumb{height:220px}}

/* ---------- comic reader pages ---------- */
.comic{margin:var(--space-5) 0}
.cpanel{margin:0 0 var(--space-3)}
.cpanel img{width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff}
.cnote{background:var(--mint-tint);color:var(--on-mint-tint);border-radius:var(--radius-card);
  padding:var(--space-3) var(--space-4);margin:var(--space-4) 0 0}
.cnote .h{font-family:var(--mono);font-size:var(--size-mono);text-transform:uppercase;letter-spacing:.13em;font-weight:600;
  margin:0 0 8px;opacity:.85}
.cnote p{margin:0 0 8px;font-size:var(--size-small);line-height:1.65}
.cnote p:last-child{margin-bottom:0}
.cnote a{color:inherit;text-decoration:underline}
.cfoot{border-top:1px solid var(--line);padding-top:var(--space-3);margin-top:var(--space-4)}
.cfoot p{font-size:var(--size-small);color:var(--text-3);line-height:1.65;margin:0 0 10px}
.cfoot p:last-child{margin-bottom:0}

/* ---------- the read-it list on the journalism page ---------- */
.readlist{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.readlist a{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
  text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);
  border-left:2px solid var(--rose);border-radius:var(--radius);
  padding:var(--space-3);transition:border-color .15s,filter .15s}
.readlist a:hover{border-color:var(--rose);filter:brightness(1.06)}
.readlist .t{font-weight:500;flex:1 1 320px;line-height:1.35}
.readlist .m{font-family:var(--mono);font-size:var(--size-mono);color:var(--text-3);
  text-transform:uppercase;letter-spacing:.13em;font-weight:600}
.readlist .go{font-family:var(--mono);font-size:var(--size-mono);color:var(--rose)}