/* ============================================================
   case.css — case study pages. Loads after core.css.
   The field order below is the approved case pattern and does
   not change between cases:
     01 context · 02 role and ownership · 03 decisions ·
     04 scope · 05 outcome · then the visual evidence.
   ============================================================ */

/* ---------- breadcrumb ---------------------------------------- */
.crumb .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8);min-height:44px}
.crumb a,.crumb span{font-size:var(--t-label);letter-spacing:.01em;color:var(--ink-3)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;transition:color var(--dur-1) var(--ease)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--rule-2)}
.crumb [aria-current]{color:var(--ink-2)}

/* ---------- 01 context ---------------------------------------- */
.case-head .wrap{padding-top:var(--f34-72);padding-bottom:var(--f30-52)}
.case-head .lab{display:block;margin-bottom:var(--f16-24)}
.case-head h1{
  font-weight:700;font-size:var(--t-display);line-height:1.04;letter-spacing:-.035em;
  margin:0 0 var(--f16-24);max-width:14ch;text-wrap:balance;
}
.standfirst{
  font-size:var(--t-lead);line-height:1.48;color:var(--ink-2);
  max-width:52ch;margin:0 0 var(--f26-40);
}
/* Every case carries exactly six facts, so the column count is chosen to
   divide six: two, three, then six. auto-fit looked right at 1280 and left
   an empty cell at every width in between, because six does not divide by
   four or five. */
/* Drawn as a table rather than floated in space: one hairline between the
   cells and one around them, with the page's own ground showing through, so
   the six facts read as a record and not as six loose columns. The rule is
   the gap — 1px of --rule behind cells that carry --canvas. */
.facts{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;margin:var(--s20) 0 0;padding:0;
  background:var(--rule);border:1px solid var(--rule);
}
@media(min-width:700px){.facts{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.facts{grid-template-columns:repeat(6,1fr)}}
.facts > div{min-width:0;background:var(--canvas);padding:var(--s16) var(--s16) var(--s20)}
.facts dt{
  font-size:var(--t-label);color:var(--ink-3);
  letter-spacing:.01em;margin-bottom:var(--s8);
}
.facts dd{margin:0;font-size:var(--t-meta);color:var(--ink-2);line-height:1.45}
/* Kept for a case that ever carries an odd number of facts: the last one
   spans the row rather than leaving a cell open. */
@media(max-width:699px){
  .facts > div:last-child:nth-child(odd){grid-column:1/-1}
  .counts > div:last-child:nth-child(odd){grid-column:1/-1}
}

/* 02a the leadership claim — the one line the whole page rests on */
.led{
  color:var(--ink);font-size:var(--t-body-l);line-height:1.5;
  padding-left:var(--s20);border-left:2px solid var(--ember);max-width:62ch;
}
/* 02b ownership depth — printed only when it is true */
.own{margin-top:var(--s24)}

/* 04 scope */
.delivered{list-style:none;margin:0 0 var(--s24);padding:0;display:flex;flex-wrap:wrap;gap:var(--s8)}
.delivered li{
  font-size:var(--t-label);letter-spacing:.01em;
  color:var(--ink-2);border:1px solid var(--edge);padding:var(--s8) var(--s12);
}
.counts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:var(--s20) var(--s24);margin:0;
  padding-top:var(--s20);
}
.counts > div{min-width:0}
.counts dt{font-size:var(--t-label);color:var(--ink-3);margin-bottom:var(--s4)}
.counts dd{margin:0;font-size:var(--t-num);font-weight:500;color:var(--ink);line-height:1.35}
.counts-note{margin-top:var(--s16);font-size:var(--t-label);color:var(--ink-3)}

/* 05 outcome */
.outcome p{color:var(--ink);font-size:var(--t-body-l);line-height:1.5;max-width:60ch}

/* ---------- visual evidence ----------------------------------- */
.evidence .wrap{padding-top:var(--pad-sec);padding-bottom:var(--s24)}
.shots{list-style:none;margin:0;padding:0}
.shot{padding:var(--f30-52) 0}
.shot:first-child{border-top:0;padding-top:0}
.shot .lab{display:block;margin-bottom:var(--s12)}
.shot h3{
  font-weight:600;font-size:var(--t-head);letter-spacing:-.02em;
  margin:0 0 var(--s8);max-width:32ch;
}
.shot p{margin:0 0 var(--s24);color:var(--ink-2);font-size:var(--t-body-s);max-width:60ch}
.shot img{width:100%;height:auto;border:1px solid var(--rule);background:var(--raised)}
@media(min-width:900px){
  .shot{
    display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
    grid-template-rows:auto auto 1fr;   /* slack goes to the last row, so the
                                           copy stays under its heading      */
    gap:0 var(--f30-52);align-items:start;
  }
  .shot .lab{grid-column:1;grid-row:1;margin-bottom:0}
  .shot h3{grid-column:1;grid-row:2;margin-top:var(--s16)}
  .shot p{grid-column:1;grid-row:3;margin-bottom:0}
  .shot .frame{grid-column:2;grid-row:1/4}
}

/* ---------- prev / next --------------------------------------- */
.pager{}
/* The gap-over-a-background trick draws a 1px grid line, but it only works on
   an element with no padding of its own (.facts, .counts, .params). .wrap has
   the page gutter, so the background painted the gutter too and framed the two
   links in a grey box. A border draws the same line and paints nothing else. */
.pager .wrap{
  padding-top:var(--s24);padding-bottom:var(--s24);
  display:grid;grid-template-columns:1fr;
}
.pager a{
  display:flex;flex-direction:column;justify-content:center;gap:var(--s4);
  min-height:64px;padding:var(--s16) 0;transition:color var(--dur-2) var(--ease);
}
.pager a + a{border-top:1px solid var(--rule)}
@media(min-width:760px){
  .pager .wrap{grid-template-columns:1fr 1fr}
  .pager a + a{
    border-top:0;border-left:1px solid var(--rule);
    padding-left:var(--s24);align-items:flex-end;text-align:right;
  }
}
.pager .dir{font-size:var(--t-label);letter-spacing:.01em;color:var(--ink-3)}
.pager .nm{font-weight:600;font-size:var(--t-sub);letter-spacing:-.015em}
.pager a:hover .nm{color:var(--ember)}

/* live-site link in the context block */
.live{
  display:inline-flex;align-items:center;gap:var(--s8);min-height:44px;
  font-size:var(--t-body-s);font-weight:500;color:var(--ember);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-2) var(--ease);
}
.live:hover{border-color:var(--ember)}

/* ---------- the stages a project went through ------------------ */
/* Same shape as the home page's stage list, so a reader who has seen
   one recognises the other. */
.steps{list-style:none;margin:0;padding:0}
.steps li{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4) var(--s24);
  padding:var(--s16) 0;align-items:baseline;
}
@media(min-width:760px){.steps li{grid-template-columns:46px 210px minmax(0,1fr);gap:var(--s24)}}
.steps .n{font-size:var(--t-label);color:var(--ember)}
.steps h3{margin:0;font-size:var(--t-sub);font-weight:600;letter-spacing:-.01em}
.steps p{margin:0;color:var(--ink-2);font-size:var(--t-body-s);grid-column:1/-1}
@media(min-width:760px){.steps p{grid-column:3}}

/* ---------- a wall of app screens ------------------------------ */
.screens{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--s20);
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
}
.screens li{display:flex;flex-direction:column;gap:var(--s8);min-width:0}
.screens img{
  display:block;width:100%;height:auto;background:var(--raised);
  border:1px solid var(--rule);border-radius:16px;
}
.shot-cap{
  margin:0;font-size:var(--t-label);line-height:1.5;color:var(--ink-3);
}

/* ---------- the device in a case hero -------------------------- */
@media(min-width:960px){
  .case-head .wrap.has-device{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
    gap:0 var(--f34-72);align-items:start;
  }
  .case-head .wrap.has-device > .lab,
  .case-head .wrap.has-device > h1,
  .case-head .wrap.has-device > .standfirst,
  .case-head .wrap.has-device > .facts{grid-column:1}
  .case-head .wrap.has-device > .device{grid-column:2;grid-row:1/6;align-self:center}
}
.case-head .device{margin:var(--f30-52) 0 0}
@media(min-width:960px){.case-head .device{margin:0}}

/* ---------- the wall of screens, in the app's own theme -------- */
[data-app-theme="light"] .screens img[data-theme="dark"],
[data-app-theme="dark"] .screens img[data-theme="light"]{display:none}
html:not(.js) .screens img[data-theme="dark"]{display:none}
.screens li{position:relative}
.field-head .theme-switch{margin-left:auto}

/* ============================================================
   The process chapters below the six fields (bugreports).
   Same tokens, same rail; a few shapes the fields never needed:
   an act label, a figure, a table, before/after pairs, a token
   sheet. Nothing here changes the case pattern above.
   ============================================================ */

/* the seam between the six fields and the chapters */
.layer2 .wrap{border-top:1px solid var(--rule-2)}

/* act label: a full-width row, not a section */
.act .wrap{padding-top:var(--f22-32);padding-bottom:0}
.act .lab{display:block;color:var(--ember);letter-spacing:.01em;padding-bottom:var(--s12);border-bottom:1px solid var(--rule)}

/* sub-heads inside a chapter */
.field h3.sub{
  font-size:var(--t-sub);font-weight:600;letter-spacing:-.01em;
  margin:var(--s24) 0 var(--s12);color:var(--ink);
}
.field p + h3.sub,.field ul + h3.sub,.field ol + h3.sub,.field .tw + h3.sub,.field .fig + h3.sub{margin-top:var(--s32)}

/* lists that carry rules and decisions */
.rules{margin:0 0 var(--s16);padding-left:1.3em;max-width:60ch}
.rules li{color:var(--ink-2);font-size:var(--t-body);line-height:1.55;margin:0 0 var(--s12)}
.rules li b{color:var(--ink);font-weight:600}
.rules li::marker{color:var(--ink-3)}
ol.rules li::marker{font-variant-numeric:tabular-nums}

/* a figure: hand-drawn svg on the page ground */
.fig{margin:var(--s24) 0 var(--s24);max-width:none}
.fig svg{display:block;width:100%;height:auto;color:var(--ink);font-family:var(--sans)}
.fig-loop svg,.fig-tl svg{min-width:640px}
.fig-map svg{min-width:940px}
@media(min-width:1000px){.field:not(.evidence) .wrap > .fig-map{grid-column:1/-1}}
.fig{overflow-x:auto;padding-bottom:var(--s4)}
.fig figcaption{
  margin-top:var(--s12);font-size:var(--t-label);color:var(--ink-3);line-height:1.5;max-width:60ch;
}

/* a table that carries evidence */
.tw{overflow-x:auto;margin:var(--s12) 0 var(--s16)}
.tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-meta);line-height:1.45}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:var(--s12) var(--s12) var(--s12) 0;border-top:1px solid var(--rule)}
.tbl th{font-weight:500;color:var(--ink-3);font-size:var(--t-label);border-top:0;padding-top:0}
.tbl td{color:var(--ink-2)}
.tbl td:first-child{color:var(--ink);white-space:nowrap}
.findings th:nth-child(2),.findings td:nth-child(2){white-space:nowrap}
.findings td:first-child{white-space:normal;min-width:200px}
.tbl tr:last-child td{border-bottom:1px solid var(--rule)}

/* before / after pairs */
.pairs{
  list-style:none;margin:var(--s24) 0 var(--s16);padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s24) var(--s20);
}
.pairs li{min-width:0}
.pairs .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
.pairs figure{margin:0;min-width:0}
.pairs img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:12px;background:var(--raised)}
.pairs figcaption{font-size:var(--t-label);color:var(--ink-3);margin-top:var(--s8)}
.pairs h4{margin:var(--s12) 0 var(--s4);font-size:var(--t-sub);font-weight:600;letter-spacing:-.01em}
.pairs p{margin:0;font-size:var(--t-body-s);color:var(--ink-2)}

/* the token sheet */
.tokwrap{margin:var(--s24) 0}
.tokwrap .counts-note{margin-top:var(--s16)}
.counts{margin-bottom:var(--s8)}
.tok{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s12)}
.tok .c{border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--raised);min-width:0}
.tok .s{height:52px;display:flex}
.tok .s i{flex:1}
.tok .n{padding:var(--s8) var(--s12);font-size:var(--t-label);color:var(--ink-3);line-height:1.45;font-variant-numeric:tabular-nums}
.tok .n b{display:block;color:var(--ink);font-weight:500;font-size:var(--t-meta)}
.type{display:flex;flex-direction:column;gap:var(--s8);margin-top:var(--s16)}
.type > div{display:flex;align-items:baseline;gap:var(--s16);border-top:1px solid var(--rule);padding-top:var(--s8);flex-wrap:wrap}
.type .k{font-size:var(--t-label);color:var(--ink-3);flex:0 0 220px}
.type .t1{font-size:clamp(1.5rem,3vw,2.125rem);line-height:1.1;letter-spacing:-.02em;font-weight:600}
.type .t2{font-size:var(--t-figure);font-weight:600;line-height:1.2}
.type .t3{font-size:var(--t-meta);color:var(--ink-2)}
.type .rad{display:inline-flex;gap:var(--s8)}
.type .rad i{width:44px;height:28px;border:1px solid var(--edge);display:inline-block}

/* inline code names (a tag, a file) */
.code{font-family:var(--mono);font-size:var(--t-mono);color:var(--ink-2)}

/* the evidence sections now open with a line, like the fields */
.ev-led{margin-bottom:var(--f22-32);max-width:62ch}

/* ============================================================
   The chronological page: a header without the phone, then a
   stage — the phone sticky on the left (or the panel, full width,
   in an iPad), the chronology on the right.
   ============================================================ */
.story-head .facts{margin-bottom:var(--f22-32)}
.story-head .facts dd{color:var(--ink);font-size:var(--t-num);font-weight:500}
.story-head .facts dt{margin-bottom:var(--s4)}
.mode{display:flex;align-items:center;justify-content:flex-start;gap:var(--s16);flex-wrap:wrap;width:min(360px,100%);margin:var(--f34-72) 0 0}
.mode > .lab{margin:0}
.mode-switch .dbtn{padding:0 var(--s16)}
.stage .wrap{padding-top:var(--s8);padding-bottom:var(--pad-sec)}
.story-head .wrap{padding-bottom:var(--s8)}
/* The product signs the page before the page describes it: the logotype
   sits above the kicker, at the size it has on a home-page card. */
.logotype{
  font-weight:700;font-size:calc(var(--t-title) * 1.45);letter-spacing:-.035em;line-height:1;
  margin:0 0 var(--s16);color:var(--ink);
}
/* The mark and its line are one block; the headline starts well clear of it. */
.story-head .lab{margin-bottom:var(--f30-52)}
/* The chronology page has no device beside its header, so the standfirst
   is not held to a case study’s narrow column: it runs on to the width
   the page itself is set at. */
.story-head .standfirst{max-width:min(88ch,100%);font-size:clamp(0.9375rem,1.35vw,1.0625rem);line-height:1.55}
.story-head .standfirst:not(:last-of-type){margin-bottom:var(--s16)}
.stage-grid{display:grid;gap:var(--f30-52);align-items:start}
.stage-side{min-width:0;align-self:stretch}  /* as tall as the row, so the sticky phone has room to stick */
.stage-sticky{display:flex;flex-direction:column;gap:var(--s12)}
.stage-sticky .device-hint{order:-1;margin:0 0 var(--s4);text-align:left;max-width:none}
.stage-sticky .device{align-items:center}
.stage-tablet{display:none;min-width:0}
.stage-tablet .device-hint{text-align:left;max-width:none;margin:0 0 var(--s16)}
.stage[data-mode="panel"] .stage-side{display:none}
.stage[data-mode="panel"] .stage-tablet{display:block}
@media(min-width:1000px){
  .stage-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--f34-72)}
  /* the heading starts where the phone’s frame starts, not where its hint does:
     two lines of hint plus the gap under it. */
  .stage-main{padding-top:calc(2 * 1.5 * var(--t-body-s) + var(--s4))}
  .stage-sticky{position:sticky;top:calc(56px + var(--s16))}  /* under the sticky site header */
  .stage[data-mode="panel"] .stage-grid{grid-template-columns:minmax(0,1fr)}
}
/* the iPad: a landscape slab with a thin bezel; the panel is laid out at
   1194 × 834 and scaled to whatever the slab is drawn at */
.tablet{
  width:100%;padding:2.2%;border-radius:3.2%/4.6%;
  background:linear-gradient(148deg,#585b63,#191b1f 34%,#3a3d44 63%,#131518);
  box-shadow:0 34px 64px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.10);
}
.tablet-screen{position:relative;overflow:hidden;border-radius:1.4%/2%;background:#0b0c0e;aspect-ratio:1194/834}
.tablet-screen iframe{position:absolute;left:0;top:0;width:1194px;height:834px;border:0;transform-origin:0 0;background:#0b0c0e}
/* the chronology */
.stage-head{margin-bottom:var(--s16)}
.stage-main > .led{margin-bottom:var(--f22-32)}
.stage-main > .fig{margin:0 0 var(--f22-32)}

/* ---------- the DEINS catalogue: chapters, and the services under
   them. A chapter reads like a stop; the services under it are named
   only, because 119 paragraphs would be a document rather than a page.
   The note each one carries arrives on hover, over the page instead of
   inside it, so nothing moves while the reader scans the row. --------- */
/* the library's own name sits between the introducing line and its chapters */
.lib-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s16);
  flex-wrap:wrap;margin:var(--f22-32) 0;padding-bottom:var(--s12);
  border-bottom:1px solid var(--rule);
}
.lib-head h3{margin:0;font-size:var(--t-head);font-weight:600;letter-spacing:-.02em}
.legend{
  margin:calc(-1 * var(--f22-32) + var(--s12)) 0 var(--f22-32);
  font-size:var(--t-body-s);color:var(--ink-3);
}
.legend::before{
  content:"";display:inline-block;width:22px;height:0;vertical-align:middle;
  margin-right:var(--s8);border-top:1px solid var(--ember);
}
.chapters{list-style:none;margin:0;padding:0}
.chap{
  display:grid;grid-template-columns:1fr;gap:var(--s8) var(--s24);
  padding:var(--f22-32) 0;border-top:1px solid var(--rule);
}
.chap:first-child{border-top:0;padding-top:0}
@media(min-width:760px){.chap{grid-template-columns:96px minmax(0,1fr)}}
.chap-n{display:flex;flex-direction:column;gap:var(--s4)}
.chap-n span{font-size:var(--t-label);color:var(--ember);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.chap-n small{font-size:var(--t-label);color:var(--ink-3);line-height:1.4}
.chap-body{min-width:0}
.chap-body h3{margin:0 0 var(--s8);font-size:var(--t-head);font-weight:600;letter-spacing:-.02em}
.chap-body > p{color:var(--ink-2);font-size:var(--t-body);line-height:1.55;max-width:62ch;margin:0 0 var(--s16)}

.svcs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s8)}
.svc{
  position:relative;display:flex;align-items:baseline;gap:var(--s8);
  padding:var(--s8) var(--s12);border:1px solid var(--rule);cursor:default;
  transition:border-color var(--dur-1) var(--ease);
}
.svc:hover,.svc:focus-visible{border-color:var(--edge);outline:none}
/* The list answers one question — was this service applied — so it is drawn
   with one answer: ember outline, ember ground, ember number and a white name
   for all eighty-nine; plain grey for the thirty that were not. Earlier passes
   graded the applied ones into two weights and every gradation read as noise
   against the single distinction that matters. The backbone still exists in
   the markup (.core, from deins_selected.BACKBONE) and can be drawn again if
   it is ever wanted. Hover lifts any chip to full brightness: the grey is
   quiet, not unreadable. */
.svc.ran,.svc.core{border-color:var(--ember);background:rgba(255,106,0,.15)}
.svc.ran .svc-n,.svc.core .svc-n{color:var(--ember)}
.svc.ran .svc-t,.svc.core .svc-t{color:var(--ink)}
.svc:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.svc-n{font-size:var(--t-label);color:var(--edge);font-variant-numeric:tabular-nums}
.svc-t{font-size:var(--t-body-s);color:var(--edge);transition:color var(--dur-1) var(--ease)}
.svc:hover .svc-t,.svc:focus-visible .svc-t{color:var(--ink)}
.svc-d{
  position:absolute;left:-1px;top:calc(100% + 6px);z-index:5;width:min(340px,78vw);
  padding:var(--s12);background:var(--raised);border:1px solid var(--edge);
  font-size:var(--t-body-s);line-height:1.5;color:var(--ink-2);
  opacity:0;visibility:hidden;transition:opacity var(--dur-1) var(--ease);
}
.svc:hover .svc-d,.svc:focus-visible .svc-d{opacity:1;visibility:visible}
/* A note that would reach past the edge of the page is slid back inside
   it by site.js, which sets the left offset; what is here is where it
   starts, not where it stays. */
/* On a touch screen there is no hover to wait for, so the note is simply
   printed under the name and the chip becomes a full-width row. */
@media(hover:none){
  .svcs{flex-direction:column;gap:var(--s12)}
  .svc{flex-direction:column;align-items:flex-start;gap:var(--s4);width:100%}
  .svc-d{position:static;width:auto;opacity:1;visibility:visible;border:0;background:none;padding:0}
}

/* The last word: after 119 services, the argument they were evidence for.
   Set larger and brighter than the page's prose, with the load-bearing
   phrases in the accent — the only place on this page the accent carries
   meaning rather than marking a selection. */
.coda{
  margin:var(--f34-72) 0 0;padding-top:var(--f30-52);
  border-top:1px solid var(--rule);
}
/* it starts where a chapter's prose starts, not out on the number rail */
@media(min-width:760px){.coda{padding-left:calc(96px + var(--s24))}}
.coda p{
  margin:0 0 var(--s20);color:var(--ink);font-weight:400;
  font-size:clamp(1rem,1.45vw,1.1875rem);line-height:1.62;
  letter-spacing:-.005em;max-width:52ch;text-wrap:pretty;
}
.coda p:last-child{margin-bottom:0}
/* One pair of quotation marks, larger than the text and in the accent:
   the whole passage is set off by them, so no word inside needs marking. */
.coda .q{
  color:var(--ember);font-size:1.75em;line-height:0;vertical-align:-.2em;
}
/* The marks land last: the three paragraphs rise as everything else does,
   and the two quotation marks follow 420ms behind, from slightly small —
   punctuation closing after the sentence. The page's one such moment. */
html.js .coda .q{opacity:0;transform:scale(.88);display:inline-block}
html.js .coda.in .q{opacity:1;transform:none;transition:opacity .45s var(--ease) .42s,transform .45s var(--ease) .42s}
@media (prefers-reduced-motion: reduce){html.js .coda .q{opacity:1;transform:none;transition:none}}
.coda p:first-child .q{margin-right:.05em}
.coda p:last-child .q{margin-left:.03em}

/* the LinkedIn draft, above the closing block */
#post .wrap{padding-top:var(--f30-52);padding-bottom:var(--f30-52)}
#post p{max-width:68ch}
.stops{list-style:none;margin:0;padding:0}
.stop{display:grid;grid-template-columns:1fr;gap:var(--s8) var(--s24);padding:var(--f22-32) 0;border-top:1px solid var(--rule)}
.stop:first-child{border-top:0;padding-top:0}
@media(min-width:760px){.stop{grid-template-columns:96px minmax(0,1fr)}}
.stop-n{display:flex;flex-direction:column;gap:var(--s4)}
.stop-n span{font-size:var(--t-label);color:var(--ember);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.stop-n small{font-size:var(--t-label);color:var(--ink-3);line-height:1.4}
.stop-body{min-width:0}
.stop-body h3{margin:0 0 var(--s12);font-size:var(--t-head);font-weight:600;letter-spacing:-.02em;max-width:30ch;text-wrap:balance}
.stop-body p{color:var(--ink-2);font-size:var(--t-body);line-height:1.55;max-width:62ch;margin:0 0 var(--s12)}
.stop-body p b{color:var(--ink);font-weight:600}
.stop-body .meta{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4) var(--s16);
  margin:var(--s16) 0 var(--s8);padding:var(--s12) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  max-width:62ch;font-size:var(--t-meta);line-height:1.45;
}
.stop-body .meta dt{color:var(--ink-3);font-size:var(--t-label);letter-spacing:.01em;padding-top:2px}
.stop-body .meta dd{margin:0;color:var(--ink-2)}
.stop-body .fig{margin:var(--s20) 0 var(--s8)}
.stop-body .tw{margin-top:var(--s16)}
.stop-body .tbl.comp td:first-child{white-space:nowrap}
.stop-body .pairs{margin-top:var(--s20)}
.stop-body .tokwrap{margin:var(--s20) 0 var(--s8)}
.stop-body .screens-block{margin-top:var(--s24)}
.stop-body .screens-block .field-head{margin-bottom:var(--s12)}
.stop-body .screens-block h4{margin:0;font-size:var(--t-sub);font-weight:600;letter-spacing:-.01em}
.stop-body .screens-block .counts-note{margin:0 0 var(--s16)}
.fig-chain svg{min-width:900px}
.fig-work svg,.fig-rev svg{min-width:640px}

/* ---------- /work/: two collections under one head -------------
   The tabs are buttons, not links: they change nothing about the address
   except the fragment, so a shared link still opens on the right one.
   Without JavaScript the tablist goes and both collections are simply
   there, one under the other, in source order. */
.tabs .wrap{padding-bottom:var(--s8)}
.tablist{display:flex;gap:var(--s8);flex-wrap:wrap}
.tab{
  display:inline-flex;align-items:center;gap:var(--s8);min-height:44px;padding:0 var(--s16);
  background:none;border:1px solid var(--edge);color:var(--ink-2);cursor:pointer;
  font-family:var(--sans);font-size:var(--t-body-s);
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.tab:hover{color:var(--ink);border-color:var(--ink-3)}
.tab:active{color:var(--ember);border-color:var(--ember)}
.tab:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.tab[aria-selected="true"]{color:var(--ink);border-color:var(--ink);background:rgba(247,247,250,.06)}
.tab .n{font-size:var(--t-label);color:var(--ink-3)}
.tab[aria-selected="true"] .n{color:var(--ink-2)}
html:not(.js) .tabs{display:none}
/* the head already put air above; a panel starts closer to its tab */
.workpanel .wrap{padding-top:var(--f22-32)}
.workpanel:focus-visible{outline:none}
.panel-stand{
  font-size:var(--t-lead);line-height:1.48;color:var(--ink-2);max-width:52ch;
  margin:calc(-1 * var(--s8)) 0 var(--f26-40);
}

/* ---------- architectural visualisation: an image-led list ------
   Not the product cards. No box, no border round the item, no raised
   ground: a band of picture at the width of its column and the name
   under it — the way a visual discipline is read. Two columns from 900px
   so the pictures stay large; one below. The hover moves the picture
   inside its frame, never the row, because .rev owns the row's transform. */
.avgroup + .avgroup{margin-top:var(--f34-72)}
.avgroup > h3{font-weight:600;font-size:var(--t-head);letter-spacing:-.02em;margin:0 0 var(--f22-32)}
.avlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--f30-52)}
@media(min-width:900px){.avlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--f34-72) var(--s48)}}
.avlist li{min-width:0}
.av-media{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--sunk);border:1px solid var(--rule);
}
.av-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
@media(hover:hover){.avlist li:hover .av-media img{transform:scale(1.025)}}
/* Until a project's pictures land, the frame says so rather than sitting
   empty — a label on the ground, never a stand-in picture. */
.av-soon{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--t-label);letter-spacing:.01em;color:var(--ink-3);
}
/* A project is a link, but the item keeps its picture-led shape: no box, no
   underline; focus draws the ring round the whole item. */
.av-link{display:block;color:inherit;text-decoration:none}
.av-link:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
@media(hover:hover){.av-link:hover .av-name{color:var(--ember)}}
.av-name{transition:color var(--dur-2) var(--ease)}
.av-cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s8) var(--s16);flex-wrap:wrap;margin-top:var(--s16)}
.av-name{margin:0;font-weight:600;font-size:var(--t-sub);letter-spacing:-.015em;line-height:1.25}
.av-meta{font-size:var(--t-label);color:var(--ink-3);letter-spacing:.01em;white-space:nowrap}

/* ---------- an architecture presentation ----------------------- */
/* The project page for the 3D work: the site's own head, then one stage
   that shows pictures, a plan or a tour, switched by a segmented row. The
   pictures are the originals — nothing here is resized on disk; the stage
   fits them to the screen with object-fit and the download link hands over
   the file. Tours run in a same-origin frame that is only given a src once
   its button is pressed, and is emptied again when the reader leaves it. */
/* Nothing sits between the standfirst and the tab row now: the head's own
   bottom padding is the gap. */
.arch .wrap{padding-top:0}
.arch-page .case-head .wrap{padding-bottom:var(--f22-32)}
.arch-page .standfirst{margin-bottom:0}
/* The page's own mode row is a line of tabs on a rule — text, and a bar
   under the chosen one — so it never looks like the boxed buttons a tour
   draws inside its frame (Eren, 14 September). */
.arch-modes{display:flex;flex-wrap:wrap;gap:0 var(--s24);margin-bottom:var(--f16-24);border-bottom:1px solid var(--rule)}
.arch-modes .dbtn{
  border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 var(--s4);
  background:none;color:var(--ink-3);font-size:var(--t-body-s);
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.arch-modes .dbtn:hover{color:var(--ink);background:none}
.arch-modes .dbtn:active{color:var(--ember);border-color:var(--ember)}
.arch-modes .dbtn[aria-pressed="true"],
html[data-theme="light"] .arch-modes .dbtn[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);background:none;font-weight:600}
.arch-modes .dbtn:focus-visible{outline-offset:-2px}
html:not(.js) .arch-modes{display:none}
@media(max-width:600px){
  .arch-modes{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .arch-modes::-webkit-scrollbar{display:none}
  .arch-modes .dbtn{flex:0 0 auto}
}
.arch-stage{
  margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--sunk);border:1px solid var(--rule);display:grid;place-items:center;
}
.arch-stage img{width:100%;height:100%;object-fit:contain}
.arch-loading{
  position:absolute;left:var(--s12);bottom:var(--s12);padding:var(--s4) var(--s8);
  font-size:var(--t-label);color:var(--ink-2);background:var(--raised);border:1px solid var(--rule);
}
.arch-cap{display:flex;justify-content:space-between;align-items:center;gap:var(--s12) var(--s24);flex-wrap:wrap;margin:var(--s16) 0}
.arch-cap > div:first-child{display:flex;align-items:baseline;gap:var(--s16);min-width:0}
.arch-title{margin:0;font-weight:600;font-size:var(--t-sub);letter-spacing:-.015em;line-height:1.3}
.arch-count{font-size:var(--t-label);color:var(--ink-3);white-space:nowrap}
.arch-actions{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap}
.arch-actions .live{margin-left:var(--s8)}
.arch-thumbs{display:flex;gap:var(--s8);overflow-x:auto;padding:var(--s4) 0 var(--s12);scrollbar-width:thin}
.arch-thumbs button{
  flex:0 0 auto;width:112px;height:72px;padding:0;overflow:hidden;cursor:pointer;
  background:var(--sunk);border:1px solid var(--rule);opacity:.7;
  transition:opacity var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.arch-thumbs button:hover,.arch-thumbs button[aria-current="true"]{opacity:1;border-color:var(--ink)}
.arch-thumbs img{width:100%;height:100%;object-fit:cover}
.arch-select{display:flex;align-items:center;gap:var(--s12);margin-bottom:var(--s16)}
/* The browser's own arrow sat on the box's edge; the select draws its own,
   the same chevron as the project menu, with room either side of it. The
   chevron colour is the light page's --ink-2 — this page is only ever light. */
.arch-select select{
  font:inherit;font-size:var(--t-body-s);color:var(--ink);background:var(--canvas);
  border:1px solid var(--edge);padding:var(--s8) var(--s40) var(--s8) var(--s16);min-height:44px;max-width:100%;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%234A4F58' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s16) center;
}
.arch-plan{margin:0;padding:var(--s16);background:var(--raised);border:1px solid var(--rule)}
.arch-plan img{width:100%;max-height:75vh;object-fit:contain}
.arch-panel > .live{margin-top:var(--s12)}
.arch-note{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s8) var(--s24);flex-wrap:wrap;
  font-size:var(--t-meta);color:var(--ink-2);margin:0 0 var(--s12);
}
.arch-note p{margin:0}
.arch-tour{display:block;width:100%;height:min(84vh,900px);min-height:560px;border:1px solid var(--rule);background:var(--sunk)}
@media(max-width:700px){
  .arch-tour{height:90vh;min-height:640px}
  .arch-thumbs button{width:92px;height:60px}
  .arch-cap{align-items:flex-start;flex-direction:column}
}

/* The breadcrumb row also carries a small menu of the other architecture
   projects: a boxed control with an arrow, in the site's own line and type,
   opened without script. The single "next project" link under the stage is
   still there, but a reader who never scrolls that far sees this one. */
/* It shares the title's row: the name on the left, the menu on the right,
   both on one horizontal line — Eren's call, 14 September. */
/* The menu never leaves the right edge: a long name breaks onto a second
   line instead, and the menu stays level with the name's first line. */
.title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s16) var(--s24);flex-wrap:nowrap;margin-bottom:var(--f16-24)}
.title-row h1{margin-bottom:0;flex:1 1 auto;min-width:0}
.title-row .pick{flex:0 0 auto;margin-top:calc((var(--t-display) * 1.04 - 44px) / 2)}
.pick{position:relative;width:max-content;font-size:var(--t-body-s)}
.pick summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s12);
  min-height:44px;padding:0 var(--s16);border:1px solid var(--edge);color:var(--ink-2);
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.pick summary::-webkit-details-marker{display:none}
.pick summary:hover{color:var(--ink);border-color:var(--ink-3)}
.pick summary:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.pick[open] summary{color:var(--ink);border-color:var(--ink)}
.pick-arrow{
  width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-1) var(--ease);
}
.pick[open] .pick-arrow{transform:translateY(2px) rotate(-135deg)}
.pick ul{
  position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:220px;
  list-style:none;margin:0;padding:var(--s4) 0;background:var(--canvas);border:1px solid var(--edge);
}
.pick li a,.pick li [aria-current]{display:block;padding:var(--s8) var(--s16);min-height:44px;line-height:28px;color:var(--ink-2);white-space:nowrap}
/* The open project stays in the list, in its place, set bold and in ink. */
.pick li [aria-current]{color:var(--ink);font-weight:600}
.pick li a:hover{color:var(--ink);background:var(--raised)}
/* When the title row wraps and the menu sits on the left, its list opens
   from the left edge rather than running off the screen. */
@media(max-width:760px){.pick ul{left:0;right:auto;min-width:min(260px,calc(100vw - 32px))}}
@media(max-width:520px){
  .title-row{flex-wrap:wrap}
  .title-row h1{flex-basis:100%}
  .title-row .pick{width:100%;margin-top:0}
  .pick summary{width:100%;justify-content:space-between}
  .pick ul{width:100%;min-width:0}
}
.arch-next .wrap{grid-template-columns:1fr}
.arch-next a{align-items:flex-end;text-align:right;border-top:1px solid var(--rule)}

/* A hint over a freshly opened tour: a hand between two arrows, sliding
   side to side, so a reader knows the picture answers the mouse. It goes
   on its own after a few seconds, or as soon as the pointer comes in. */
.arch-frame{position:relative}
.arch-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:var(--s8);
  padding:var(--s16) var(--s24);color:#F7F7FA;background:rgba(11,12,14,.72);border:1px solid rgba(247,247,250,.18);
  font-size:var(--t-meta);letter-spacing:.01em;white-space:nowrap;
  opacity:1;transition:opacity var(--dur-3) var(--ease);
}
.arch-hint.is-leaving{opacity:0}
.arch-hint svg{display:block;overflow:visible}
.arch-hint path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arch-hint .hint-hand{animation:arch-drag 1.8s ease-in-out infinite}
.arch-hint .hint-arrow{opacity:.7}
@keyframes arch-drag{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}}
@media(prefers-reduced-motion:reduce){.arch-hint .hint-hand{animation:none}}

/* The plan menu on the page uses the same custom list as the demos, in the
   page's tokens: it opens under the field, on its own left edge. */
.arch-select{position:relative}
.arch-select .sel-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0 0 0 0)}
.arch-select .sel{position:relative;display:block;min-width:260px}
.arch-select .sel-btn{
  appearance:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s12);width:100%;min-height:44px;padding:0 var(--s16);
  border:1px solid var(--edge);background:var(--canvas);color:var(--ink);font:inherit;font-size:var(--t-body-s);text-align:left;cursor:pointer;
  transition:border-color var(--dur-1) var(--ease);
}
.arch-select .sel-btn:hover{border-color:var(--ink-3)}
.arch-select .sel-btn[aria-expanded="true"]{border-color:var(--ink)}
.arch-select .sel-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.arch-select .sel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arch-select .sel-arrow{flex:0 0 auto;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-1) var(--ease)}
.arch-select .sel-btn[aria-expanded="true"] .sel-arrow{transform:translateY(2px) rotate(-135deg)}
.arch-select .sel-list{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:6;margin:0;padding:var(--s4) 0;list-style:none;
  background:var(--canvas);border:1px solid var(--edge);max-height:288px;overflow:auto;
}
.arch-select .sel-list li{padding:0 var(--s16);min-height:44px;line-height:44px;color:var(--ink-2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-select .sel-list li:hover,.arch-select .sel-list li[data-active]{background:var(--raised);color:var(--ink)}
.arch-select .sel-list li[aria-selected="true"]{color:var(--ink);font-weight:600}

/* The stage answers a swipe and a press: a horizontal swipe moves through
   the set, a press opens the picture full-screen — where the same swipe,
   two arrows and the keys move through it. The picture fits the screen;
   the phone's own pinch zooms in. */
.arch-stage{touch-action:pan-y}
.arch-stage img{cursor:zoom-in}
.arch-zoom{padding:var(--s16);touch-action:pan-y pinch-zoom}
.arch-zoom img{max-width:100%;max-height:calc(100vh - 2 * var(--s16));border:0;background:transparent}
.zoom-cap{
  position:fixed;left:var(--s16);bottom:var(--s16);z-index:1;max-width:calc(100% - 32px);
  padding:var(--s8) var(--s12);font-size:var(--t-label);color:#F7F7FA;background:rgba(11,12,14,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.zoom-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:1;width:44px;height:44px;
  display:grid;place-items:center;padding:0;border:1px solid rgba(247,247,250,.3);
  background:rgba(11,12,14,.72);color:#F7F7FA;font-size:18px;cursor:pointer;
}
.zoom-prev{left:var(--s16)}.zoom-next{right:var(--s16)}
.zoom-nav:hover{border-color:#F7F7FA}
.zoom-nav:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media(max-width:700px){.zoom-nav{display:none}}

/* Keep project selectors and gallery controls accessible on narrow screens. */
@media(max-width:600px){
.title-row{flex-wrap:wrap}.title-row h1{flex-basis:100%}.title-row .pick{margin-top:0}.pick ul{max-width:calc(100vw - 32px)}.pick li a,.pick li [aria-current]{white-space:normal}
.arch-select .sel{min-width:0;width:100%}.arch-select{max-width:100%}
.arch-zoom .zoom-nav{display:grid;top:auto;bottom:calc(64px + env(safe-area-inset-bottom));transform:none}.arch-zoom .zoom-cap{bottom:calc(var(--s16) + env(safe-area-inset-bottom))}
.arch-zoom img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 160px);object-fit:contain}
.arch-tour{height:80dvh;min-height:480px}
}
@media(max-height:500px) and (orientation:landscape){.arch-tour{height:90dvh;min-height:300px}}