/* ============================================================
   AC layer — getartcraft.com-inspired look, loaded AFTER editorial.css.
   Warm paper, framed hairline rails, mono HUD labels, wide Archivo
   display (one face per headline), square buttons.
   Shared chrome: .hud (top bar), .ac-cta + .ac-foot (footer), .ruler (ac.js).
   ============================================================ */
:root {
  --bg: #f2f1ee;
  --bg-raised: #faf9f7;
  --bg-sunken: #e9e8e4;
  --ink: #101014;
  --ink-2: #3b3b40;
  --muted: #46464c;          /* 8.3:1 on --bg (AAA) */
  --line: rgba(16,16,20,.16);
  --line-soft: rgba(16,16,20,.08);
  --accent: #2340a8;         /* 7.8:1 on --bg (AAA) */
  --signal: #2d81ff;         /* decorative only (ruler marker) */
  --paper: var(--bg);
  --paper-2: var(--bg-sunken);
  --sans: 'Inter', system-ui, sans-serif;
  --display: 'Archivo', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --frame: 1280px;
  --wide: var(--display);
  --bp-edge: var(--pad);
  --hand: var(--mono);
  --pad: clamp(1rem, 2.8vw, 2.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); padding-top: 0; }
body::before { display: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- type ---------- */
.case-hero h1, .page-head h1, .blk-title, .prose h2, .contact h2, .blk-head .rolebadge, .ac-h {
  font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 800; font-style: normal;
  text-transform: none; letter-spacing: -.035em; line-height: .98; color: var(--ink);
}
.case-hero h1, .page-head h1 { font-size: clamp(2.4rem, 6vw, 5.4rem); max-width: 18ch; }
.blk-title, .prose h2, .contact h2 { font-size: clamp(1.8rem, 3.6vw, 3.4rem); }
.blk-head .rolebadge { font-size: clamp(1.5rem, 2.8vw, 2.6rem); }
h1 em, h2 em, h3 em, .about-lead em, .ac-h em,
.case-hero h1 em, .page-head h1 em, .blk-title em, .prose h2 em, .contact h2 em {
  /* one typeface per headline: emphasized words inherit the headline treatment */
  font-family: inherit; font-style: normal; font-weight: inherit; font-variation-settings: inherit;
  letter-spacing: inherit; color: inherit;
}
h3, .split2 .side h3, .cap h3, .step h3, .anno h4, .wcard h2, .exhibit h3 {
  font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 700; letter-spacing: -.02em;
}
.case-hero .lede, .page-head .sub { font-family: var(--sans); color: var(--ink-2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.prose p, .split2 .side p, .step p, .anno p, .spec p, .cap p, .wcard p { color: var(--ink-2); line-height: 1.65; }
.pull blockquote, .quote blockquote { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 600; font-style: normal; letter-spacing: -.02em; }
.aha blockquote { font-family: var(--serif); font-style: italic; }

/* HUD labels: mono, uppercase, tracked */
.eyebrow, .case-meta dt, .stat .lab, .wc-top, .tag, .split2 .side .tag, .spec .k, .anno .n, .step .sn,
.np-lab, .ex-lab, .fig figcaption, .dg-cap, .plate-title, .plate-kicker, .pull cite, .quote cite, .c-cell .lab, .c-field label {
  font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow { color: var(--ink-2); gap: .7em; }
.eyebrow .accent, .eyebrow .code { color: var(--muted); }
.split2 .side .tag, .spec .k, .anno .n, .step .sn { color: var(--accent); }
.stat .lab { color: var(--ink-2); letter-spacing: .1em; line-height: 1.6; }

/* numbered section labels: "01 / THE CHALLENGE" replaces the © mark */
main { counter-reset: sec; }
main section.blk:has(.eyebrow), main section.plate { counter-increment: sec; }
main section .eyebrow .accent { font-size: 0; }
main section .eyebrow .accent::before { content: counter(sec, decimal-leading-zero) " /"; font-size: .72rem; color: var(--muted); }
.case-hero .eyebrow .accent, .page-head .eyebrow .accent { display: none; }

/* ---------- frame: the content column has hairline rails, sections rule rail to rail ---------- */
main.wrap, .ac-frame { max-width: var(--frame); margin: 0 auto; padding: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
main.wrap > *, .ac-frame > * { padding-left: var(--pad); padding-right: var(--pad); }
main.wrap > section.blk, main.wrap > section.plate, main.wrap > section.pull { border-top: 1px solid var(--line); }
main.wrap > section.blk[style*="border-top:none"] { border-top: none !important; }
section.blk { padding-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: clamp(3rem, 8vh, 5.5rem); }
.case-hero, .page-head { padding-top: clamp(3rem, 9vh, 6rem); }
/* cell grids bleed out to the rails, like the ArtCraft feature grid */
main.wrap .statrow, main.wrap .split2, main.wrap .spec-grid, main.wrap .caps, main.wrap .quotes {
  margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); border-left: none; border-right: none;
}
.statrow, .split2, .spec-grid, .caps, .quotes, .work-grid, .c-aside { gap: 1px; background: var(--line); border-color: var(--line); border-radius: 0; }
.stat, .split2 .side, .spec, .cap, .quote, .wcard, .c-cell { background: var(--bg); border-radius: 0; }
.case-meta { border-top: 1px solid var(--line); }
.case-meta dd { color: var(--ink); }
.blk-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
.blk-head .rolebadge { color: var(--ink); max-width: 24ch; }

/* stats: wide display numerals */
.stat .num { font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 800; letter-spacing: -.04em; font-size: clamp(2rem, 4vw, 3.2rem); }
.stat .num.up { color: var(--accent); }

/* lists, steps, quotes */
.prose ul li::before, .spec ul li::before { content: "▪"; color: var(--ink); font-size: .7em; top: .35em; }
.leadlist li { display: block; position: relative; padding-left: 2.2rem; }
.leadlist li::before { content: "→"; position: absolute; left: 0; top: 1.1rem; color: var(--accent); font-family: var(--mono); font-style: normal; }
.leadlist li strong { color: var(--ink); }
.step { border-bottom: 1px solid var(--line); }
.pull { border-bottom: none; }
.pull blockquote { font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.15; max-width: 26ch; }
.aha { border: 1px solid var(--ink); background: var(--bg-raised); border-radius: 0; }
.aha .k { font-family: var(--mono); color: var(--accent); }

/* dark exhibit: square, ArtCraft media-cell black */
.exhibit { background: #121316; border-radius: 0; }
.exhibit .ex-lab { color: #a9adb8; }

/* figures & diagrams */
.fig .img, .diagram { border-color: var(--line); background: var(--bg-raised); border-radius: 0; }
.figph { background: var(--bg-sunken); border-color: var(--line); }
.figph .ph-tag { background: var(--bg); border-color: var(--line); font-family: var(--mono); color: var(--ink-2); }
.plate-no { font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 800; color: transparent; -webkit-text-stroke: 1px var(--ink); }
img[src*="sketches/"] { filter: grayscale(1) contrast(1.04); mix-blend-mode: multiply; }

/* buttons: square, black fill / outline */
.cta, .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: 0 1.5rem; border-radius: 0;
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg); transition: background .25s, color .25s; cursor: pointer; }
.cta:hover, .ac-btn:hover { background: #2a2a30; color: #fff; gap: .6em; }
.ac-btn.ghost { background: transparent; color: var(--ink); border-color: rgba(16,16,20,.5); }
.ac-btn.ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* next project */
.nextproj { border-top: 1px solid var(--line); }
.nextproj a { font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 800; letter-spacing: -.035em; }
.nextproj a .np-arw { font-family: var(--mono); font-style: normal; font-weight: 400; }

/* ============================================================
   HUD top bar
   ============================================================ */
.hud { position: sticky; top: 0; z-index: 200; height: 48px; display: flex; justify-content: space-between; align-items: stretch;
  background: rgba(242,241,238,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.hud .grp { display: flex; align-items: stretch; min-width: 0; }
.hud .mark { display: flex; align-items: center; padding: 0 1.1rem; border-right: 1px solid var(--line);
  font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 900; font-size: 1.05rem; letter-spacing: -.04em; text-transform: none; }
.hud nav { display: flex; align-items: stretch; padding: 0 .5rem; }
.hud .sep { border-left: 1px solid var(--line); }
.hud a.it { display: flex; align-items: center; padding: 0 .45rem; color: var(--ink-2); white-space: nowrap; }
.hud a.it span { padding: .3rem .45rem; transition: background .15s, color .15s; }
.hud a.it:hover span, .hud a.it[aria-current] span { background: var(--ink); color: var(--bg); }
.hud a.it[aria-current] { color: var(--ink); }
.hud .loc { display: flex; align-items: center; padding: 0 1.1rem; color: var(--ink-2); white-space: nowrap; }
.hud a.go { display: flex; align-items: center; padding: 0 1.3rem; background: var(--ink); color: var(--bg); font-weight: 500; white-space: nowrap; transition: background .2s; }
.hud a.go:hover { background: #2a2a30; }
@media (max-width: 760px) { .hud .loc, .hud .hide-sm { display: none; } .hud nav { padding: 0 .2rem; } .hud a.it { padding: 0 .2rem; } .hud a.go { padding: 0 1rem; } }
@media (max-width: 420px) { .hud .mark { padding: 0 .8rem; } .hud { font-size: .66rem; letter-spacing: .1em; } }

/* ============================================================
   Scroll ruler (built by ac.js) — right-edge ticks + % marker
   ============================================================ */
.ruler i, .ruler b { font-style: normal; font-weight: 400; }
.ruler { position: fixed; top: 48px; right: 0; bottom: 0; width: 40px; z-index: 150; pointer-events: none; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.ruler i { position: absolute; right: 0; width: 10px; border-top: 1px solid rgba(16,16,20,.35); }
.ruler i.maj { width: 20px; border-top-color: rgba(16,16,20,.7); }
.ruler i.maj b { position: absolute; right: 24px; top: -6px; font-weight: 400; }
.ruler .mk { position: absolute; right: 0; width: 60px; border-top: 1px solid var(--signal); transition: top .12s linear; }
.ruler .mk b { position: absolute; right: 2px; top: 2px; font-weight: 400; color: var(--accent); }
@media (max-width: 1399px) { .ruler { display: none; } }

/* ============================================================
   Closing CTA + footer grid
   ============================================================ */
.ac-cta { max-width: var(--frame); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-top: 1px solid var(--line);
  padding: clamp(4rem, 12vh, 8rem) var(--pad); text-align: center; overflow: hidden; }
.ac-cta .hi { display: block; font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 900; text-transform: uppercase;
  font-size: min(17vw, 15.5rem); line-height: .8; letter-spacing: -.04em; white-space: nowrap; user-select: none;
  color: transparent; background: radial-gradient(circle at 50% 50%, var(--ink) 36%, transparent 42%) 0 0 / 5px 5px;
  -webkit-background-clip: text; background-clip: text; transition: background-size .5s var(--ease); }
.ac-cta .hi:hover, .ac-cta .hi:focus-visible { background-size: 3px 3px; }
.ac-cta .hi:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.ac-cta .btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: clamp(2rem, 5vh, 3.2rem); }
.ac-foot { border-top: 1px solid var(--line); }
.ac-foot .cols { max-width: var(--frame); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.ac-foot .col { padding: 2.4rem var(--pad) 3rem; border-left: 1px solid var(--line); min-width: 0; }
.ac-foot .col:first-child { border-left: none; }
.ac-foot .mark { font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 900; font-size: 1.6rem; letter-spacing: -.04em; }
.ac-foot .about { margin-top: 1rem; color: var(--ink-2); line-height: 1.6; max-width: 34ch; }
.ac-foot .mail { display: inline-block; margin-top: 1.4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ac-foot .mail:hover, .ac-foot ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ac-foot h2 { font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.ac-foot ul { list-style: none; display: grid; gap: .7rem; }
.ac-foot ul a { color: var(--ink-2); font-size: 1rem; }
.ac-foot .bar { border-top: 1px solid var(--line); }
.ac-foot .bar > div { max-width: var(--frame); margin: 0 auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem var(--pad);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ac-foot .bar a:hover { color: var(--ink); }
@media (max-width: 860px) { .ac-foot .cols { grid-template-columns: 1fr 1fr; } .ac-foot .col:first-child { grid-column: 1 / -1; } .ac-foot .col:nth-child(2) { border-left: none; } .ac-foot .col { border-top: 1px solid var(--line); } .ac-foot .col:first-child { border-top: none; } }
@media (max-width: 480px) { .ac-foot .cols { grid-template-columns: 1fr; } .ac-foot .col { border-left: none; } }

@media (prefers-reduced-motion: reduce) { .ruler .mk { transition: none; } }

/* case-study header image: full width between the rails, under the title block */
main.wrap > .case-cover { padding: 0; margin: 0; border-bottom: 1px solid var(--line); background: var(--bg-sunken); } /* first section, directly under the header bar */
.case-cover img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; }
/* case hero: the product UI on a plain stage at the top of the page, the title centred below */
/* the cover image is cropped to its devices and sized as large as the panel allows (--r = its width/height ratio);
   rail.js coverRect() mirrors these numbers to fly the thumbnail to the same spot */
main.wrap > .case-cover.ui { --ch: clamp(380px, 74vh, 900px); --cp: clamp(16px, 3.5vh, 40px);
  display: flex; justify-content: center; align-items: center; overflow: hidden; background: #f5f5f5;
  height: var(--ch); padding: var(--cp) var(--pad); }
.case-cover.ui img, .case-cover.ui video { width: min(100%, calc((var(--ch) - 2 * var(--cp)) * var(--r, 1))); height: auto; max-width: none; aspect-ratio: var(--r, 1); object-fit: contain; }
.case-cover.ui video { border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 50px -18px rgba(24,36,70,.35); background: #e9edf4; }
.case-hero { text-align: center; }
.case-hero h1, .case-hero .lede { margin-left: auto; margin-right: auto; }
.case-hero .case-meta { justify-items: center; }

/* ---------- open a project: the clicked card comes forward (cross-page View Transition) ----------
   Grid → project: the card image morphs into the case cover while the grid scales past and fades.
   Project → grid (back): the cover shrinks into its card and the grid settles in.
   Pages opt in with @view-transition { navigation: auto; types: open | back }. */
.case-cover.ui img, .case-cover.ui video { view-transition-name: proj; } /* the image itself, so the hand-off from the thumbnail does not grow to the full panel */
.case-cover.reveal { opacity: 1; transform: none; transition: none; } /* the cover is already in place when the page opens; never fade it in */
::view-transition-group(proj) { animation-duration: .8s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 2; }
/* no cross-fade: the thumbnail is already where the cover lands, so the cover simply takes its place */
::view-transition-old(proj) { animation: none; opacity: 0; }
::view-transition-new(proj) { animation: none; }
/* opening a case study: the grid has already cleared and the image and rail are in place, so the page swaps at once (no fade out / fade in) */
html:active-view-transition-type(open)::view-transition-old(root) { animation: none; opacity: 0; }
html:active-view-transition-type(open)::view-transition-new(root) { animation: none; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: vt-leave .4s ease both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: vt-settle .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
/* homepage <-> ECS: the pages cross-fade while the card's animation and the cover morph into each other, both kept whole (contain) */
html:active-view-transition-type(home)::view-transition-old(root) { animation: vt-out .35s ease both; }
html:active-view-transition-type(home)::view-transition-new(root) { animation: vt-arrive .6s cubic-bezier(.2, .8, .2, 1) .12s both; }
html:active-view-transition-type(home)::view-transition-old(proj) { animation: vt-out .22s ease both; opacity: 1; object-fit: contain; }
html:active-view-transition-type(home)::view-transition-new(proj) { animation: vt-in .38s ease .04s both; object-fit: contain; }
html:active-view-transition-type(home)::view-transition-new(rail) { animation: vt-in .4s ease .35s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-recede { to { opacity: 0; transform: scale(1.14); filter: blur(6px); } }
@keyframes vt-arrive { from { opacity: 0; transform: translateY(18px); } }
@keyframes vt-leave { to { opacity: 0; transform: translateY(18px); } }
@keyframes vt-settle { from { opacity: 0; transform: scale(1.14); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}


/* Google type layer (2026-10-19) removed 2026-10-25 for the PhotoCraft reskin; saved in _archive/ac-google-type-layer.css */

/* two-column spec grid (case study "What's next") */
.spec-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .spec-grid.two { grid-template-columns: 1fr; } }
.aha blockquote { font-style: normal; }
.exhibit .ex-lab, .exhibit h3, .exhibit p { text-transform: none !important; }

/* ---------- site rail (rail.js): the site links and the projects grouped in a pill, docked left (bottom on small screens) ---------- */
.prail { position: fixed; z-index: 180; left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; view-transition-name: rail; }
.prail ul { list-style: none; margin: 0; padding: 14px 11px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 10px 34px rgba(16,16,20,.10), 0 1px 3px rgba(16,16,20,.08); }
.prail ul::-webkit-scrollbar { display: none; }
.prail-x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2);
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .2s, color .2s; }
.prail-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.prail-x:hover, .prail-x:focus-visible { background: var(--ink); color: var(--bg); }
.prail-it { position: relative; display: block; width: 46px; height: 46px; border-radius: 12px; outline: 2px solid transparent; outline-offset: 2px; transition: transform .25s var(--ease), outline-color .2s; }
.prail-it .ph { display: block; width: 100%; height: 100%; }
.prail-it img { width: 100%; height: 100%; display: block; object-fit: contain; }
.prail-it:hover, .prail-it:focus-visible { transform: scale(1.08); }
.prail-it.on { outline-color: var(--ink); }
.prail-lk { width: 46px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); transition: background .2s, color .2s; }
.prail-lk svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prail-lk:hover, .prail-lk:focus-visible { transform: none; background: var(--bg-sunken); color: var(--ink); }
.prail-lk.on { outline-color: transparent; background: var(--ink); color: var(--bg); }
.prail-sep { width: 26px; height: 1px; margin: 2px auto; background: var(--line); flex: none; }
.prail-tip { position: absolute; left: 0; top: 0; transform: translate(-4px, -50%); white-space: nowrap; pointer-events: none; opacity: 0;
  font: 500 13px/1 var(--display); color: var(--bg); background: var(--ink); padding: 7px 10px; border-radius: 8px; transition: opacity .15s, transform .15s; }
.prail-tip.show { opacity: 1; transform: translate(0, -50%); }
.prail-gathering .prail-it img { opacity: 0; }
.prail-fly { position: fixed; z-index: 190; margin: 0; pointer-events: none; transform-origin: 50% 50%; object-fit: contain; will-change: transform; background: none; }
::view-transition-group(rail) { animation-duration: .01s; z-index: 3; }
/* the snapshot of the outgoing rail is taken mid-gather (thumbs hidden, backdrop blur flattened to a white box), so never show it:
   the new page's rail is already in place and appears at once */
::view-transition-old(rail) { display: none; }
::view-transition-new(rail) { animation: none; }
/* keep the case study clear of the rail */
@media (min-width: 901px) and (max-width: 1455px) {
  body.has-rail main.wrap, body.has-rail .ac-cta, body.has-rail .ac-foot { margin-left: 88px; margin-right: auto; }
}
@media (min-width: 901px) { body.has-rail main.spread { margin-left: 74px; border-left: 1px solid var(--line); } }
/* the home spread gives the rail's width back from the portrait column, so the identity column keeps its width */
@media (min-width: 1181px) { body.has-rail main.spread { grid-template-columns: minmax(300px, 22fr) minmax(180px, 16fr) minmax(0, 58fr); } }
@media (max-width: 900px) {
  .prail { left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); flex-direction: row; max-width: calc(100vw - 24px); }
  .prail ul { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 10px 12px; gap: 9px; }
  .prail-it { width: 40px; height: 40px; flex: none; }
  .prail-lk { width: 40px; }
  .prail-sep { width: 1px; height: 26px; margin: auto 2px; }
  .prail-tip { display: none; }
  body.has-rail { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .prail-it, .prail-tip { transition: none; } }
.fig .img img { height: auto; } /* width/height attributes only reserve the ratio */

/* ---------- arrival from the loading transition (loader.js sets html.ld-arrive on the case study it opens) ----------
   the top bar, the cover and the hero load into view in order; sections further down keep their scroll reveal */
/* until loader.js puts the exit slices up, the page stays hidden on the ink ground (the head snippet opens it after 1.5 s regardless) */
html.ld-arrive { background: #101014; }
html.ld-arrive:not(.ld-open) body { visibility: hidden; }
/* the exit slices: the same six as the loading screen, leaving upward first in, first out */
.ld-exit { position: fixed; inset: 0; z-index: 1000; display: flex; pointer-events: none; visibility: visible; }
.ld-exit i { flex: 1; margin-right: -1px; background: #101014; animation: ld-exit .45s cubic-bezier(.7, 0, .3, 1) calc(var(--i) * 110ms + 60ms) forwards; }
@keyframes ld-exit { to { transform: translateY(-100%); } }
html.ld-arrive .hud { animation: ld-arr-in .5s ease-out .2s both; }
html.ld-arrive .case-cover.reveal { animation: ld-arr-up .9s var(--ease) .45s both; }
html.ld-arrive .case-hero .reveal { transition-delay: .5s; }
html.ld-arrive .case-hero .lede.reveal { transition-delay: .6s; }
html.ld-arrive .case-hero .press.reveal { transition-delay: .7s; }
@keyframes ld-arr-in { from { opacity: 0; } }
@keyframes ld-arr-up { from { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) { html.ld-arrive .hud, html.ld-arrive .case-cover.reveal { animation: none; } .ld-exit { display: none; } }

/* ---------- the project name comes first, above the cover, so it is on screen when a case study opens ---------- */
main.wrap > .case-title { padding: clamp(1.6rem, 5vh, 3rem) var(--pad) clamp(1.2rem, 3.5vh, 2rem); border-bottom: 1px solid var(--line); }
main.wrap > .case-title h1 { margin-top: 0; margin-bottom: 0; }
main.wrap > .case-title + .case-cover.ui { --ch: clamp(320px, 58vh, 780px); }
html.ld-arrive .case-title .reveal { transition-delay: .3s; }

/* ---------- project brief (case hero + Aggressive Pickup dialog): role, business impact, two specifics ---------- */
.case-brief { max-width: 62ch; margin: 2rem auto 0; text-align: left; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.case-brief-k { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.case-brief ul, .mdl-brief { list-style: disc; padding-left: 1.2em; margin: .8rem 0 0; display: grid; gap: .5rem; }
.case-brief li, .mdl-brief li { color: var(--ink-2); line-height: 1.55; }
.case-brief b, .mdl-brief b { color: var(--ink); font-weight: 600; }

/* ---------- case studies in four sections that match the brief: Role, Business impact, two specifics ----------
   Each .cgroup holds the old sections; inside it they lose their rule and big number and read as sub-parts. */
main.wrap > section.cgroup { border-top: 1px solid var(--line); padding-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: clamp(1rem, 3vh, 2rem); }
.cgroup-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: baseline; }
.cgroup-no { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ink); }
.cgroup-k { font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.cgroup-t { margin-top: .6rem; max-width: 48ch; font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
main .cgroup section.blk, main .cgroup section.plate { border-top: none; padding: clamp(2rem, 6vh, 4rem) 0; counter-increment: none; }
.cgroup .plate-no, .cgroup .eyebrow .accent { display: none; }
.cgroup .plate-head { grid-template-columns: minmax(0, 1fr); }
.case-brief a { color: inherit; text-decoration: none; }
.case-brief a:hover b { text-decoration: underline; text-underline-offset: 3px; }