/* ============================================================
   Case study template
   ============================================================ */

.case-back { padding-top: clamp(6rem, 12vh, 8rem); }
.case-back a { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); transition: color .2s, gap .2s; }
.case-back a:hover { color: var(--ink); gap: .8em; }

/* ---------- Case hero ---------- */
.case-hero { padding-top: 1.6rem; padding-bottom: clamp(2.5rem,5vw,4rem); }
.case-hero .eyebrow { margin-bottom: 1.4rem; }
.case-hero h1 { font-size: clamp(2.3rem, 1rem + 5.4vw, 5rem); letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.case-hero .summary { font-size: var(--fs-lead); color: var(--ink-2); max-width: 56ch; margin-top: 1.6rem; line-height: 1.45; }

.case-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: clamp(2.5rem,5vw,3.6rem); border-top: 1px solid var(--line); padding-top: 1.6rem; }
@media (max-width: 720px) { .case-facts { grid-template-columns: repeat(2,1fr); gap: 1.6rem 1rem; } }
.case-facts .k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .4rem; }
.case-facts .v { font-weight: 600; font-size: .98rem; line-height: 1.35; }

/* ---------- Cover image ---------- */
.case-cover { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); margin-top: clamp(1rem,3vw,2rem); }
.case-cover img { width: 100%; display: block; }

/* ---------- Body sections ---------- */
.case-body { max-width: 1000px; margin: 0 auto; }
.case-section { padding-block: clamp(2.6rem, 5vw, 4.2rem); }
.case-section .lede-grid { display: grid; grid-template-columns: 200px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 760px) { .case-section .lede-grid { grid-template-columns: 1fr; gap: 1rem; } }
.case-section .sec-label { font-family: var(--font-body); font-weight: 600; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: .5em 1em; border-radius: 2px; box-shadow: 2px 2px 0 var(--stone); display: inline-block; justify-self: start; position: sticky; top: 100px; }
.case-section h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); letter-spacing: -.02em; margin-bottom: 1.2rem; max-width: 22ch; }
.case-section h3 { font-size: var(--fs-h3); margin: 2rem 0 .8rem; }
.case-prose p { color: var(--ink); font-size: 1.08rem; line-height: 1.7; max-width: 64ch; }
.case-prose p + p { margin-top: 1.2rem; }
.case-prose .muted { color: var(--ink-2); }
.case-prose strong { font-weight: 600; }
.case-prose em { color: var(--ink); font-style: normal; font-weight: 600; }
.case-prose ul { margin: 1.1rem 0; display: flex; flex-direction: column; gap: .7rem; max-width: 62ch; }
.case-prose li { position: relative; padding-left: 1.5rem; color: var(--ink); line-height: 1.6; }
.case-prose li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--stone); }

/* ---------- Figures ---------- */
.case-figure { margin-block: clamp(1.6rem, 4vw, 3rem); }
.case-figure img, .case-figure video { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: block; }
.case-figure.bleed { max-width: 1240px; margin-inline: auto; }
.case-figure figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-2); margin-top: .8rem; text-align: center; }
.fig-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.fig-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
/* Stacked figures: desktop mocks are never paired 50/50 (they get too small to read);
   full-width one above the other. Phones/tablets can pair via .fig-2/.fig-3. */
.fig-stack { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.fig-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
/* a video/image that already carries its own device mockup — no extra frame */
.proto-bare { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 640px) { .fig-2, .fig-3 { grid-template-columns: 1fr; } .fig-4 { grid-template-columns: 1fr 1fr; } }

/* Tall full-page screenshot in a scrollable frame (auto-scrolls, pauses on hover).
   Shared by driver-guardian and manchester-airport. */
.scrollframe { height: 560px; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); position: relative; }
.scrollframe img { width: 100%; display: block; animation: pageScroll 26s ease-in-out infinite alternate; }
.scrollframe:hover img { animation-play-state: paused; }
@keyframes pageScroll { 0%,12% { transform: translateY(0); } 88%,100% { transform: translateY(calc(-100% + 560px)); } }
@media (prefers-reduced-motion: reduce){ .scrollframe { height: auto; } .scrollframe img { animation: none; } }
.scrollframe::after { content: "scroll"; position: absolute; bottom: 10px; right: 12px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); background: color-mix(in srgb, var(--surface) 85%, transparent); padding: .3rem .6rem; border-radius: 100px; }

/* Figure width control — tag a figure with data-w so the template sizes it, instead of every
   image defaulting to full column width. Absence of data-w = full width (the default).
   Pick the size from the image's real proportions: wide landscape → full; tall / phone / small
   crops → 1/2, 1/3 or 1/4 so they never upscale or dominate the page. Fractions centre themselves.
   On narrow screens everything relaxes back toward full width so nothing becomes a postage stamp. */
.case-figure[data-w] { margin-inline: auto; }
.case-figure[data-w="full"] { max-width: 100%; }
.case-figure[data-w="1/2"] { max-width: 520px; }
.case-figure[data-w="1/3"] { max-width: 380px; }
.case-figure[data-w="1/4"] { max-width: 280px; }
@media (max-width: 640px) {
  .case-figure[data-w="1/2"] { max-width: 460px; }
  .case-figure[data-w="1/3"], .case-figure[data-w="1/4"] { max-width: 320px; }
}
.phone-shot { background: var(--paper-2); border-radius: var(--radius); padding: 0; overflow: hidden; border: 1px solid var(--line); }
.phone-shot img { border: none; border-radius: 0; }

/* compare before/after */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 640px){ .compare { grid-template-columns: 1fr; } }
.compare .tag, .fig-tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .6rem; display: inline-flex; align-items: center; gap: .5em; }
.compare .tag.bad::before, .fig-tag.bad::before { content:""; width:8px;height:8px;border-radius:50%;background:var(--err); }
.compare .tag.good::before, .fig-tag.good::before { content:""; width:8px;height:8px;border-radius:50%;background:var(--ok); }

/* ---------- Pull quote ---------- */
.case-quote { padding-block: clamp(2.5rem,5vw,4rem); }
.case-quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem); line-height: 1.18; letter-spacing: -.02em; max-width: 22ch; }
.case-quote blockquote .em { font-weight: 700; }

/* ---------- Metric band ---------- */
/* Inverted (ink) band; --m-ink is the band's foreground so dark mode can flip it back
   to readable text on the dark surface (was dark-on-dark, WCAG fail). */
.case-metrics { --m-ink: var(--paper); background: var(--ink); color: var(--m-ink); border-radius: var(--radius-lg); padding: clamp(2rem,4vw,3.2rem); margin-bottom: clamp(3rem, 7vw, 5.5rem); }
[data-theme="dark"] .case-metrics { background: var(--surface); border: 1px solid var(--line); --m-ink: var(--ink); }
.case-metrics .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
@media (max-width: 680px){ .case-metrics .grid { grid-template-columns: 1fr; gap: 1.6rem; } }
.case-metrics .m .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem,1.4rem+4vw,4rem); line-height: .95; letter-spacing: -.03em; }
.case-metrics .m .n .suf { color: var(--stone); }
/* dark mode puts the band on --surface, where --stone drops below 3:1 */
[data-theme="dark"] .case-metrics .m .n .suf { color: var(--ink-2); }
.case-metrics .m .l { color: color-mix(in srgb, var(--m-ink) 72%, transparent); margin-top: .6rem; font-size: .95rem; max-width: 30ch; }

/* ---------- Next project ---------- */
.case-next { border-top: 1px solid var(--line); }
.case-next a { display: block; padding-block: clamp(3rem,7vw,5.5rem); transition: padding-left .35s; }
.case-next a:hover { padding-left: 1rem; }
.case-next .k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.case-next .t { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem,1rem+5vw,4.5rem); letter-spacing: -.02em; margin-top: 1rem; display: flex; align-items: center; gap: .4em; transition: color .25s; }
.case-next a:hover .t { color: var(--ink-2); }

/* tighten generic section padding inside case body */
.case-section:first-of-type { padding-top: clamp(1.5rem,3vw,2.5rem); }

/* ==========================================================================
   Device collage — reusable component (cover cluster + breadth strip).
   Screenshots sit in CSS device frames; frames provide the border/radius so
   collage imgs must NOT inherit .case-figure img styling — hence .case-collage.
   All colour/spacing/radii from tokens. See DESIGN.md Decisions Log 2026-07-13.
   ========================================================================== */
.case-collage { margin-block: clamp(1.8rem, 4vw, 3.2rem); }
.case-collage figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-2); margin-top: .9rem; text-align: center; }

/* stage panels — mirror the case-page treatments */
.stage { border-radius: var(--radius-lg); padding: clamp(24px,5vw,64px); overflow: hidden; }
.stage--cover  { background: var(--paper-2); border: 1px solid var(--line); }   /* == .case-cover */
.stage--ink    { background: var(--ink); }                                      /* == .case-metrics */
.stage--figure { background: var(--surface); border: 1px solid var(--line); }   /* == .case-figure */

/* device primitives */
.dv { margin: 0; }
.dv img, .dv video { display: block; width: 100%; height: auto; }
.dv--laptop .dv-browser { border-radius: 12px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.dv-bar { height: 32px; background: var(--paper-2); display: flex; align-items: center; gap: 7px; padding: 0 13px; border-bottom: 1px solid var(--line-soft); }
.dv-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--stone); opacity: .55; }
.dv-url { margin-left: 10px; font-size: 11px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-soft); border-radius: 20px; padding: 3px 12px; flex: 1; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv--tablet .dv-slab, .dv--phone .dv-slab { position: relative; background: var(--ink-deep); box-shadow: var(--shadow); }
.dv--tablet .dv-slab { border-radius: 20px; padding: 9px; }
.dv--tablet .dv-slab img, .dv--tablet .dv-slab video { border-radius: 10px; }
.dv--phone .dv-slab { border-radius: 30px; padding: 7px; }
.dv--phone .dv-slab img, .dv--phone .dv-slab video { border-radius: 24px; }
.dv--phone .dv-notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 40%; height: 17px; background: var(--ink-deep); border-radius: 0 0 13px 13px; z-index: 2; }

/* layout A — cover cluster */
.collage--cluster { position: relative; max-width: 780px; margin: 0 auto; min-height: clamp(280px, 42vw, 440px); }
.collage--cluster .cl-laptop { width: 70%; position: absolute; left: 0; top: 4%; z-index: 2; }
.collage--cluster .cl-tablet { width: 34%; position: absolute; right: 0; top: 0; z-index: 1; }
.collage--cluster .cl-phone  { width: 19%; position: absolute; right: 16%; bottom: 0; z-index: 3; }

/* layout B — breadth strip */
.collage--strip { display: flex; align-items: center; gap: clamp(18px,3vw,36px); overflow-x: auto; padding: 16px 4px 22px; scroll-snap-type: x mandatory; }
.collage--strip .dv { flex: 0 0 auto; scroll-snap-align: center; }
.collage--strip .dv--phone { width: 150px; }
.collage--strip .dv--tablet { width: 300px; }
.collage--strip .dv--laptop { width: 450px; }
.collage--strip::-webkit-scrollbar { height: 8px; }
.collage--strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 20px; }

@media (max-width: 640px) {
  .collage--cluster { min-height: 0; display: flex; padding: 8px 0 24px; }
  .collage--cluster .cl-laptop { position: static; width: 90%; }
  .collage--cluster .cl-tablet { display: none; }
  .collage--cluster .cl-phone  { width: 32%; right: 0; bottom: -14px; }
}
@media (prefers-reduced-motion: reduce) { .collage--strip { scroll-behavior: auto; } }

/* ==========================================================================
   Theme compare — §03a. CSS-only (radio) tab switcher: one large image shown
   at a time with V1/V2/V3 tabs, so brand skins are actually comparable.
   No JS, works over file://. Tokens only.
   ========================================================================== */
.theme-compare .tc { position: relative; }
.tc-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tc-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tc-tab { cursor: pointer; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: .5em 1em; box-shadow: 2px 2px 0 var(--stone); transition: transform .12s, box-shadow .12s; }
.tc-tab:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--stone); }
.tc-stage { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.tc-stage .tc-img { display: none; width: 100%; }
#usp-v1:checked ~ .tc-stage .tc-img:nth-child(1),
#usp-v2:checked ~ .tc-stage .tc-img:nth-child(2),
#usp-v3:checked ~ .tc-stage .tc-img:nth-child(3),
#ao-fridge:checked ~ .tc-stage .tc-img:nth-child(1),
#ao-tv:checked ~ .tc-stage .tc-img:nth-child(2),
#ao-laundry:checked ~ .tc-stage .tc-img:nth-child(3) { display: block; }
#usp-v1:checked ~ .tc-tabs label[for="usp-v1"],
#usp-v2:checked ~ .tc-tabs label[for="usp-v2"],
#usp-v3:checked ~ .tc-tabs label[for="usp-v3"],
#ao-fridge:checked ~ .tc-tabs label[for="ao-fridge"],
#ao-tv:checked ~ .tc-tabs label[for="ao-tv"],
#ao-laundry:checked ~ .tc-tabs label[for="ao-laundry"] { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--stone); }
#usp-v1:focus-visible ~ .tc-tabs label[for="usp-v1"],
#usp-v2:focus-visible ~ .tc-tabs label[for="usp-v2"],
#usp-v3:focus-visible ~ .tc-tabs label[for="usp-v3"],
#ao-fridge:focus-visible ~ .tc-tabs label[for="ao-fridge"],
#ao-tv:focus-visible ~ .tc-tabs label[for="ao-tv"],
#ao-laundry:focus-visible ~ .tc-tabs label[for="ao-laundry"] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   Process map — §02 infographic. Horizontal numbered stepper with a
   connector line + arrowheads; stacks vertically on mobile. Tokens only.
   ========================================================================== */
.process { margin-block: clamp(1.8rem, 4vw, 3.2rem); }
/* align the process map with the §02 prose column (lede-grid is 200px + 2.5rem gap)
   so it reads as part of the narrative rather than sitting hard against the left */
@media (min-width: 761px) { .process { margin-left: calc(200px + 2.5rem); } }
.process-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.p-step { position: relative; padding-right: .4rem; }
/* connector: line + arrowhead from this node toward the next */
.p-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 40px; right: -1.2rem; height: 2px; background: var(--line); }
.p-step:not(:last-child)::before { content: ""; position: absolute; top: 12px; right: -1.2rem; width: 8px; height: 8px; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: rotate(45deg); z-index: 1; }
.p-node { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: .9rem; position: relative; z-index: 1; }
.p-body { margin-top: .9rem; }
.p-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
.p-body p { color: var(--ink-2); font-size: .9rem; line-height: 1.45; margin: 0; max-width: 22ch; }
.p-tools { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.p-tool { display: inline-flex; align-items: center; gap: .3em; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .02em; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: .28em .5em; }
.p-tool svg { width: 12px; height: 12px; flex: none; }
.process figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-2); margin-top: 1.4rem; text-align: center; }

/* ==========================================================================
   Infinite image field — §06 "everything shipped". Dense canvas grid of live
   template screenshots that pans toward the cursor (js/vendor/infinite-image-
   field.js). Full-bleed dark panel; soft edge vignette for depth.
   ========================================================================== */
.shipped-field { position: relative; width: 100%; height: clamp(380px, 56vw, 600px); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-deep); cursor: grab; }
.shipped-field:active { cursor: grabbing; }
.shipped-field .iif-canvas { display: block; width: 100%; height: 100%; }
/* vignette + top/bottom fade so the grid reads as depth, not a flat wall */
.shipped-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 55%, color-mix(in srgb, var(--ink-deep) 60%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink-deep) 55%, transparent), transparent 18% 82%, color-mix(in srgb, var(--ink-deep) 55%, transparent)); }
.shipped-field .iif-hint { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--on-ink-deep) 72%, transparent); background: color-mix(in srgb, var(--ink-deep) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-ink-deep) 16%, transparent);
  border-radius: 20px; padding: .4em .9em; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .shipped-field .iif-hint { display: none; } }
@media (max-width: 760px) {
  .process-flow { grid-template-columns: 1fr; gap: 0; }
  .p-step { padding: 0 0 1.8rem 3rem; }
  .p-node { position: absolute; left: 0; top: 0; }
  .p-body { margin-top: 4px; }
  .p-body p { max-width: none; }
  /* vertical connector */
  .p-step:not(:last-child)::after { top: 40px; bottom: 0; left: 16px; right: auto; width: 2px; height: auto; }
  .p-step:not(:last-child)::before { top: auto; bottom: -2px; left: 12px; right: auto; transform: rotate(135deg); }
}