/* Pass version · case studies.
   Same content as /work/, restyled after a clean editorial layout: Geist type, mono labels, a two-column reading
   grid (label left, story right), tinted "part" bands, screenshots framed on tinted panels and a floating section nav.
   Loaded after styles.css so the existing case-study components keep working.
   Variables live on body because the page's brand colour is set there. */
body {
  --bg: #ffffff; --surface: #ffffff; --sunken: #f4f4f5; --ink: #18181b; --muted: #4b4b53; --faint: #8b8b93; --line: #e4e4e7;
  --accent: var(--brand, #c2502e); --accent-soft: var(--tint, #f4f4f5); --accent-ink: #fff; --mint: var(--brand); --mint-soft: var(--tint);
  --display: "Geist", system-ui, sans-serif; --body: "Geist", system-ui, sans-serif; --serif: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --radius: 12px; --shadow: none; --read: 1120px; --wide: 1120px;
  --tint: color-mix(in srgb, var(--brand) 9%, #fff); --tint2: color-mix(in srgb, var(--brand) 16%, #fff);
}
html, body { background: #fff; }
body { font: 400 16.8px/1.55 var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; }
html { overflow-x: clip; }

/* Pill nav (same as the Pass home page) */
.pnav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 70; }
.pnav ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 5px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 24px -10px rgba(0,0,0,.18); }
.pnav a { display: block; padding: 8px 14px; border-radius: 999px; font: 500 14px var(--body); color: #3f3f46; text-decoration: none; }
.pnav a:hover { background: #f4f4f5; color: var(--ink); }
.pnav .logo { padding: 2px 8px 2px 2px; } .pnav .logo img { width: 30px; height: 30px; max-width: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink); }
.pnav .cta { background: var(--ink); color: #fff; } .pnav .cta:hover { background: #000; color: #fff; }
.nav, .cs-toc, .cs-progress, .quick-end, [data-quick-end], .view-toggle, .act-steps { display: none !important; }

main.wrap { max-width: none; width: 100%; padding: 0; }
main > * { max-width: none; }

/* ---------- Header ---------- */
.ph { width: min(1120px, 100% - 40px); margin: 0 auto; padding: 116px 0 0; }
.ph .back { display: inline-block; font: 400 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); text-decoration: none; }
.ph .back:hover { color: var(--ink); }
.ph h1 { margin: 14px 0 0; font: 600 clamp(42px, 5.4vw, 64px)/.95 var(--display); letter-spacing: -.055em; max-width: none; }
.ph .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.ph .chip { font: 500 13.5px var(--body); padding: 6px 12px; border-radius: 999px; background: #f0f0f1; color: #27272a; border: 0; }
.ph .chip.st { background: var(--tint); color: color-mix(in srgb, var(--brand) 80%, #000); display: inline-flex; gap: 7px; align-items: center; }
.ph .chip.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ph .yrs { font: 400 12.5px var(--mono); color: var(--faint); margin-left: 6px; }
.ph .claim { margin-top: 26px; font: 500 clamp(21px, 2vw, 25px)/1.3 var(--body); letter-spacing: -.025em; max-width: 34ch; color: var(--ink); }
.ph .claim .serif { font: inherit; color: inherit; }
.ph .lead { margin-top: 14px; font-size: 17.3px; color: var(--muted); max-width: 62ch; }
.ph .metag { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ph .metag > div { padding: 18px 18px 20px 0; } .ph .metag > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.ph .metag dt { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ph .metag dd { margin: 8px 0 0; font: 500 15.5px/1.4 var(--body); color: var(--ink); }
.ph .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px 0 48px; }
.ph .stats b { display: block; font: 400 clamp(30px, 3.2vw, 40px)/1 var(--body); letter-spacing: -.04em; }
.ph .stats b .up { color: #15803d; }
.ph .stats span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.cs-hero, .results-top { display: none !important; }

/* Hero image on a dark brand band, full width */
.hero-band { position: relative; padding: clamp(36px, 6vw, 70px) 20px; background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--brand) 55%, #000) 0%, #0a0a0b 75%); }
.hero-band > * { max-width: 920px; margin: 0 auto !important; }
.hero-band img, .hero-band video { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); border: 0 !important; }
.hero-band figcaption { display: none; }
.hero-band .hero-video { background: transparent; border: 0; }

/* ---------- Parts: tinted band, mono label left ---------- */
main > .act { display: grid !important; grid-template-columns: 200px 1fr; column-gap: 40px; width: 100%; max-width: none; margin: 96px 0 0 !important; padding: 64px max(20px, calc((100% - 1120px) / 2)) !important;
  background: var(--tint) !important; border: 0 !important; border-radius: 0 !important; color: var(--ink) !important; box-shadow: none !important; }
main > .act::before, main > .act::after { display: none !important; }
.act .act-n { grid-row: 1 / 3; align-self: start; padding-top: 10px; font: 400 12px var(--mono) !important; letter-spacing: .14em !important; text-transform: uppercase; color: color-mix(in srgb, var(--brand) 85%, #000) !important; background: none !important; border: 0 !important; }
.act .act-t { margin: 0 !important; font: 500 clamp(26px, 2.6vw, 32px)/1.15 var(--display) !important; letter-spacing: -.035em !important; color: var(--ink) !important; max-width: 28ch; }
.act .act-b { margin: 12px 0 0 !important; font: 400 17px/1.5 var(--body) !important; color: var(--muted) !important; max-width: 60ch; opacity: 1 !important; }

/* ---------- Sections: label left, story right ---------- */
main > .cs-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; width: min(1120px, 100% - 40px); max-width: none; margin: 88px auto 0; padding: 0; border: 0; }
.cs-sec > h2 { grid-column: 1; margin: 0; padding-top: 6px; font: 400 12px/1.5 var(--mono) !important; letter-spacing: .14em !important; text-transform: uppercase; color: color-mix(in srgb, var(--brand) 85%, #000); align-self: start; }
.cs-sec > h2 .cs-num { display: none; }
.cs-sec > .c { grid-column: 2; min-width: 0; max-width: 820px; }
.cs-sec .c > p, .cs-sec .c li { font-size: 16.8px; line-height: 1.62; color: var(--muted); }
.cs-sec .c > p { max-width: 640px; }
.cs-sec .c p b, .cs-sec .c li b { color: var(--ink); font-weight: 600; }
.cs-sec .c > .q:first-child, .cs-sec .c > .q { margin: 0 0 16px; font: 500 24px/1.18 var(--display) !important; letter-spacing: -.035em; color: var(--ink) !important; max-width: 24ch; border: 0; padding: 0; background: none; }
.cs-sec .c > .q::before { display: none; }
.cs-sec h3, .cs-h3 { font: 500 21px/1.2 var(--display); letter-spacing: -.03em; color: var(--ink); margin: 44px 0 10px; }
.cs-sec a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.hint { font-size: 14px; color: var(--faint); }

/* Wide visuals span the whole section (under the label column too) */
.cs-sec .c > :is(figure, .fig, .fig-row, .stage, .ia, .journeys, .roadmap, .deck, .cs-impact, .compare, .tl, .proto-grid, .inventory, .color-groups, .stage-split,
  .proto-embed:not(.mobile), .proto-row, .charts, .evidence, .fb-loop, .fb-table-wrap, .board, .decide, .scope, .insight-list, .features, .doc-grid, .doc-steps, .spec,
  .tokflow, .gov, .lib, .usage-wrap, .hero-video, .type-scale, .ds-grid, .cols3, table) {
  margin-left: -240px !important; margin-right: 0 !important; width: auto; max-width: none !important; }

/* Screenshots: white frame on a tinted panel */
.cs-sec figure.fig, .cs-sec .fig-row { padding: clamp(18px, 3vw, 34px); background: var(--tint); border-radius: 18px; margin-top: 30px; margin-bottom: 30px; }
.cs-sec .fig-row .fig { padding: 0; background: none; margin: 0; }
.cs-sec figure img, .cs-sec .ui-frame img { border: 0 !important; border-radius: 12px !important; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px -24px rgba(0,0,0,.28); }
.cs-sec .ui-frame { border: 0; background: none; box-shadow: none; padding: 0; }
.cs-sec figcaption { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 70ch; }
.cs-sec figcaption b { display: block; font: 500 17px var(--display); letter-spacing: -.02em; color: var(--ink); margin-bottom: 2px; }
.fig.narrow img { max-width: 480px; margin-inline: auto; }

/* Metrics + generic cards lean on the zinc palette */
.impact, .cs-impact { border-color: var(--line) !important; background: transparent !important; }
.impact b, .cs-impact b { font-family: var(--body) !important; font-weight: 400 !important; }
.chip { font-family: var(--mono); }
code { font-family: var(--mono); font-size: .88em; }
.problem-statement { border-left: 2px solid var(--brand) !important; background: var(--sunken) !important; border-radius: 0 12px 12px 0 !important; color: var(--ink) !important; padding: 20px 24px !important; max-width: none !important; font-weight: 500; }

/* Floating section nav */
.secnav { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(140%); z-index: 65; max-width: calc(100vw - 24px); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.secnav.on { transform: translateX(-50%); }
.secnav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 5px; background: #18181b; border-radius: 999px; overflow-x: auto; scrollbar-width: none; box-shadow: 0 16px 40px -14px rgba(0,0,0,.45); }
.secnav ul::-webkit-scrollbar { display: none; }
.secnav a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font: 500 13.5px var(--body); color: #d4d4d8; text-decoration: none; transition: background .25s, color .25s; }
.secnav a:hover { color: #fff; } .secnav a.on { background: #fff; color: var(--ink); }

/* Next project + footer */
.nextp { width: min(1120px, 100% - 40px); margin: 120px auto 0; padding: 34px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; text-decoration: none; color: var(--ink); }
.nextp small { display: block; font: 400 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.nextp b { display: block; margin-top: 6px; font: 600 clamp(28px, 3.4vw, 44px)/1 var(--display); letter-spacing: -.045em; }
.nextp span { font-size: 28px; transition: transform .3s; } .nextp:hover span { transform: translateX(6px); }
footer.wrap { width: min(1120px, 100% - 40px); max-width: none; margin: 0 auto; padding: 26px 0 90px; border-top: 1px solid var(--line); font: 400 12px var(--mono); color: var(--faint); }
footer.wrap a { color: var(--faint); }

@media (max-width: 900px) {
  .ph .metag, .ph .stats { grid-template-columns: 1fr 1fr; }
  .ph .metag > div:nth-child(3) { border-left: 0; padding-left: 0; }
  main > .act, main > .cs-sec { grid-template-columns: 1fr; }
  .act .act-n { grid-row: auto; padding: 0 0 8px; }
  .cs-sec > h2 { position: static; margin-bottom: 14px; }
  .cs-sec > .c { grid-column: 1; }
  .cs-sec .c > :is(figure, .fig, .fig-row, .stage, .ia, .journeys, .roadmap, .deck, .cs-impact, .compare, .tl, .proto-grid, .inventory, .color-groups, .stage-split,
    .proto-embed:not(.mobile), .proto-row, .charts, .evidence, .fb-loop, .fb-table-wrap, .board, .decide, .scope, .insight-list, .features, .doc-grid, .doc-steps, .spec,
    .tokflow, .gov, .lib, .usage-wrap, .hero-video, .type-scale, .ds-grid, .cols3, table) { margin-left: 0 !important; }
  .pnav li:nth-child(2) { display: none; } .pnav a { padding: 7px 10px; font-size: 13px; }
}
/* Phone clamp for very tall blocks (cs.js) */
.mclamp.is-clamped { max-height: 1100px; overflow: hidden; -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
.mclamp-btn { display: block; margin: 8px auto 0; padding: 11px 22px; border: 1px solid var(--line, #e4e4e7); border-radius: 999px; background: #fff; font: 600 14px var(--body, system-ui); color: var(--ink, #18181b); cursor: pointer; }

/* Design Lab link: a different visual language on purpose */
.pnav .lab-link { display: inline-flex; align-items: center; gap: 7px; margin: 0 4px; padding: 6px 12px 6px 8px; border-radius: 8px; background: #FBF8F2; color: #1B1512; border: 1.5px solid #1B1512; box-shadow: 2px 2px 0 #1B1512; font: 600 13px "Geist Mono", ui-monospace, monospace; }
.pnav .lab-link:hover { background: #F2C14E; color: #1B1512; }
.pnav .lab-link i { width: 14px; height: 14px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 6h16v4h-3v14.5l15.6 24.8C55.2 53.5 52.3 58 47.4 58H16.6c-4.9 0-7.8-4.5-5.2-8.7L27 24.5V10h-3z' fill='%23fff' stroke='%2318181b' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M18.3 40h27.4l6 9.6c1 1.7-.1 3.9-2.1 3.9H14.4c-2 0-3.1-2.2-2.1-3.9z' fill='%233B8FD9'/%3E%3C/svg%3E"); }
@media (max-width: 560px) { .pnav li:nth-child(4) { display: none; } .pnav .lab-link { padding: 5px 8px; font-size: 12px; } }

/* Sound toggle in the pill nav */
.pnav .snd { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: #3f3f46; cursor: pointer; }
.pnav .snd:hover { background: #f4f4f5; color: #18181b; } .pnav .snd svg { width: 17px; height: 17px; } .pnav .snd .x { display: none; } .pnav .snd.muted .x { display: block; } .pnav .snd.muted .w1, .pnav .snd.muted .w2 { display: none; }

/* Quick-UI pages: a 2-up screen gallery and a row of phone screens */
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.gal figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid #e4e4e7; background: #fff; }
.gal img { display: block; width: 100%; height: auto; }
.phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.phones img { width: 100%; height: auto; border-radius: 18px; border: 6px solid #111; box-shadow: 0 20px 40px -24px rgba(0,0,0,.45); }
@media (max-width: 700px) { .gal { grid-template-columns: 1fr; } .phones { grid-template-columns: 1fr 1fr; } }