/*  CASE PAGES
 *  ------------------------------------------------------------------
 *  Built from the "Portfolio case page" canvas in Claude Design, which
 *  uses the Ernest design system: cream ground, blue ink, rust for large
 *  accents only; Instrument Sans in sentence case for titles and
 *  labels (Oswald is gone since 2026-10-13), Newsreader for everything
 *  you read. Square corners, except the videos and the factsheet (16px).
 *
 *  Desktop values are the 1512px artboard; phone values the 390px one.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream: #F5F4EC;
  --blue:  #002FA7;
  --rust:  #CC5215;
  --muted: #4566BA;   /* ink-muted: 72% blue over cream, made solid (4.9:1) */
  --grey:  #6E6C64;   /* figure captions, a warm grey (4.7:1 on cream) */

  /* Instrument Sans and Newsreader, and the text styles, are in type.css. */

  --gutter: 48px;
  --measure: min(720px, 100% - 2 * var(--gutter));
  --wide: min(1080px, 100vw - 2 * var(--gutter));
  --full: min(1416px, 100vw - 2 * var(--gutter));
}

body {
  background: var(--cream);
  color: var(--blue);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .18s ease;
}
a:hover { opacity: .68; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* Labels: Instrument Sans 500, sentence case, like the eyebrow. */
.case-figure__ph span,
.case-next__label,
.case-next__meta { font: var(--heading-xs); font-weight: 500; }

/* Sizes come from the type scale (type.css): one `font: var(--…)` per rule.
   Headings are Instrument Sans 600 in sentence case, as in the case videos. */
.case-head__title,
.case-body h2,
.case-next__title,
.case-facts__title { letter-spacing: var(--tracking-head); }

/* The top bar is in topbar.css. */

/* ── Title block ─────────────────────────────────────────────────────── */

.case-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 96px var(--gutter) 0;
  text-align: center;
}

.case-head__eyebrow { font: var(--heading-xs); font-weight: 500; }

.case-head__title {
  max-width: 1100px;
  font: var(--heading-xxl);
  text-wrap: balance;
}

/* No single word alone on the last line: case.html glues the last two
   words together ( ), and pretty evens out the rest. */
.case-head__lede {
  max-width: 900px;
  margin-top: 8px;
  font: var(--body-l);
  text-wrap: pretty;
}

/* On case pages the body reads from the left edge of the text column
   (Ernest, 2026-10-13); the title block above it is centred, phones
   included (below). The lede stays within 25em of body-l, at most 65
   characters a line (measured 63). */
.case .case-head {
  width: var(--measure);
  margin: 0 auto;
  padding: 96px 0 0;
  align-items: flex-start;
  text-align: left;
}

/* The title is the exception: centred on the page and as wide as the
   widest figures (1416px), so it runs well past the text column and breaks
   only when it really doesn't fit, not into balanced halves (2026-10-13). */
.case .case-head__title {
  align-self: center;
  width: min(var(--full), 100vw - 2 * var(--gutter));
  max-width: none;
  text-align: center;
  text-wrap: wrap;
}

/* Eyebrow and lede go with the title, centred (Ernest, 2026-10-13). */
.case .case-head__eyebrow { align-self: center; text-align: center; }

.case .case-head__lede { max-width: 25em; align-self: center; text-align: center; }

@media (max-width: 700px) {
  .case .case-head { padding-top: 48px; }
}

/* ── Factsheet ───────────────────────────────────────────────────────── */

/* "About this project": a blue block at the top of the text (Ernest,
   2026-10-13: not floating, normal type sizes). The blue reaches 32px past
   the column on both sides, so its text lines up with the column's edges.
   Every line on the 8px grid; each hairline eats one pixel of the padding
   above it (7 + 1). Label left, value right; stacked on phones. */
.case-facts {
  margin: 0 -32px 48px;
  padding: 32px;
  border-radius: 16px;
  background: var(--blue);
  color: var(--cream);
}

/* Two classes deep, to win over `.case-body h2`. */
.case-facts .case-facts__title {
  margin: 0 0 8px;
  font: var(--heading-s);
  letter-spacing: var(--tracking-head);
}

.case-facts dl > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: 24px;
  padding: 8px 0;
}

.case-facts dl > div + div {
  padding-top: 7px;
  border-top: 1px solid rgba(245, 244, 236, .22);
}

/* Labels and values share the body's 32px line, so they sit on one baseline. */
.case-facts dt {
  font: 500 var(--fs-heading-xs)/var(--lh-body-m) var(--head);
  color: rgba(245, 244, 236, .72);
}

/* Cream on blue looks bigger than the same type in blue on cream (light
   bleeds into the dark around it): computed it was the body's 20px, but
   Ernest saw it as larger (2026-10-13). 6% smaller compensates; the line
   stays the body's 32px, on the grid. */
.case-facts dd { font: var(--body-m); font-size: calc(var(--fs-body-m) * .94); }

/* A fact that is a list (My contribution): one item per line, with dots. */
.case-facts__list { padding-left: 1.1em; }
.case-facts__list li::marker { color: rgba(245, 244, 236, .72); }

/* The text after the block: the block's own 48px margin is the gap. */
.case-body > .case-facts + * { margin-top: 0; }

/* ── Body ────────────────────────────────────────────────────────────── */

.case-body {
  width: var(--measure);
  margin: 96px auto round(clamp(96px, 10vw, 160px), 8px);
  font: var(--body-m);
}

.case-body > * + * { margin-top: 24px; }

/* Bold carries the scan path: headings plus bold should tell the story.
   Reading text is Newsreader Regular; semibold marks the scan path. */
.case-body strong { font-weight: 600; }

.case-body h2 {
  margin-top: 72px;
  font: var(--heading-m);
}

/* Numbered lists (e.g. the jobs-to-be-done): reading text, numbers in the margin. */
.case-body ol {
  padding-left: 1.4em;
}

.case-body ol li + li { margin-top: 8px; }
.case-body ol li::marker { font-family: var(--head); font-weight: 600; }

/* A sentence that carries the argument, set as a standfirst:
   <p class="case-key">…</p> */
.case-body .case-key {
  font: var(--body-l);
  font-style: italic;
}

/* Pull quote: rust is fine here, it's 24px and up. Left-aligned in the
   text column, like everything else on a case page. */
.case-body blockquote {
  margin: 40px 0;
  font: italic 400 var(--fs-heading-l)/var(--lh-heading-l) var(--serif);
  color: var(--rust);
  text-wrap: balance;
}

.case-body blockquote p { margin: 0; }

/* ── Figures ─────────────────────────────────────────────────────────── */

/* Inside the 720px column a figure breaks out to 1080px (or 1416px for
   "full"), centred on the column. */
.case-figure {
  --fig: var(--wide);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Wide figures start below a floating card or figure, never beside it. */
.case-body .case-figure,
.case-body blockquote { clear: both; }

.case-body .case-figure {
  width: var(--fig);
  margin: 64px 0 64px calc((100% - var(--fig)) / 2);
}


.case-figure--full { --fig: var(--full); }
.case-figure--narrow { --fig: var(--measure); }
/* One phone screen (a recording or a still): phone-sized, no frame, rounded like a screen. */
.case-figure--phone { --fig: min(360px, 100%); }
.case-figure--phone video,
.case-figure--phone img { border: 0; border-radius: 40px; }

.case-figure--bleed { margin-top: 96px; }
.case-figure--hero { width: var(--full); margin: 72px auto 0; }
.case-figure--bleed figcaption { padding: 0 var(--gutter); }

.case-figure img,
.case-figure video {
  display: block;
  width: 100%;
  height: auto;
}

/* The case videos are cream with blue headlines, like the page itself; without
   an edge they read as part of the text. A heavy blue frame with rounded
   corners makes them an object you watch, like a screen. */
.case-figure video {
  border: 8px solid var(--blue);
  border-radius: 16px;
}

/* A video whose own picture has the margins it needs (the T-Mobile brand
   loop): no frame, the picture the full width of the figure. */
.case-figure--bare video { border: 0; border-radius: 0; }

/* Captions: short, centred under the picture, quiet; body-s size in
   Instrument Sans, 16px below the picture (8px gap + 8px) (2026-10-13). */
.case-figure figcaption {
  margin-top: 8px;
  text-align: center;
  font: 500 var(--fs-body-s)/var(--lh-body-s) var(--head);
  color: var(--grey);
}

/* Two pictures side by side, each with its own caption (before / after). */
.case-figure__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: round(clamp(16px, 3vw, 40px), 8px);
}

.case-figure__pair figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-figure__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--cream);
  background-image: radial-gradient(rgba(0, 47, 167, .30) 1.1px, transparent 1.6px);
  background-size: 7px 7px;
}

.case-figure__ph span {
  max-width: 32em;
  padding: 8px 16px;
  background: var(--cream);
  text-align: center;
}

/* ── Next case ───────────────────────────────────────────────────────── */

/* Centred, the one block on a case page besides the captions
   (Ernest, 2026-10-13). */
.case-next {
  width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 0 round(clamp(72px, 8vw, 120px), 8px);
  text-align: center;
}


.case-next__title {
  font: var(--heading-xl);
  text-wrap: balance;
}

.case-next__meta { color: var(--muted); }

/* The blue bands (clients, footer) are in band.css. */

/* ── Phone ───────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  :root {
    --gutter: 24px;
    --wide: 100vw;
    --full: 100vw;
  }

  /* Eight centred lines of lede are tiring to read: on a phone the title
     block lines up left, with the body text. */
  .case-head { gap: 16px; padding-top: 48px; align-items: flex-start; text-align: left; }
  .case-head__lede { margin-top: 4px; }

  .case-facts { margin-inline: -16px; padding: 24px 16px; }
  .case-facts dl > div { grid-template-columns: minmax(0, 1fr); }

  .case-body { margin-top: 64px; }
  .case-body > * + * { margin-top: 24px; }
  .case-body h2 { margin-top: 48px; }
  .case-body .case-figure { margin-top: 32px; margin-bottom: 32px; }


  /* Side by side, two screens are too small to read on a phone: stack them. */
  .case-figure__pair { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .case-figure figcaption { padding: 0 var(--gutter); }
  .case-figure--bleed { margin-top: 48px; }

  /* --measure takes the gutters off a second time inside the column (294px
     at 390): narrow figures (the T-Mobile brand loop) take the column. */
  .case-figure--narrow { --fig: 100%; }
  /* A wide web page that should line up with the text, not bleed. */
  .case-figure--phone-column { --fig: 100%; }

  /* Figures with `slides`: the wide picture gives way to the carousel. */
  .case-figure--slides > picture,
  .case-figure--slides > img,
  .case-figure--slides > .case-figure__pair { display: none; }
}

/* ── Phone carousel ───────────────────────────────────────────────────
   Several screens side by side are unreadable at 390px, so on a phone a
   figure with `slides` shows them one at a time, nearly full width, with
   the next one peeking in and dots below (2026-10-14). Scroll snapping
   does the swiping; assets/js/case-figure.js only moves the dots. */
@media (min-width: 701px) {
  .case-carousel { display: none; }
}

.case-carousel {
  /* edge to edge, so the next slide peeks in from the screen's edge */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.case-carousel__track {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gutter);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.case-carousel__track::-webkit-scrollbar { display: none; }

.case-carousel__slide {
  flex: 0 0 84%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-carousel__slide img { display: block; width: 100%; height: auto; }
/* Web pages: each slide the full column, no peek (the dots say there's more). */
.case-carousel--wide .case-carousel__slide { flex-basis: 100%; }

/* Like every figure caption (see .case-figure figcaption). */
.case-carousel__caption {
  margin-top: 8px;
  text-align: center;
  font: 500 var(--fs-body-s)/var(--lh-body-s) var(--head);
  color: var(--grey);
}

.case-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.case-carousel__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  opacity: .25;
  transition: opacity .2s;
}
.case-carousel__dots span.is-active { opacity: 1; }

/* ── The ladder (_includes/case-ladder.html) ─────────────────────────
   Desktop: the drawn staircase. Phone: the steps as text, 1 at the top,
   each bar wider than the one before: filled where we started, outlined
   for the steps between, dashed for the dream (as in the drawing). */
.case-ladder { display: none; }

@media (max-width: 700px) {
  .case-figure .case-ladder__wide { display: none; }
  .case-body .case-ladder {
    display: flex;
    flex-direction: column;
    gap: 32px;
    list-style: none;
    padding: 0 var(--gutter);   /* not the indent of the text's own lists */
  }
  .case-body .case-ladder li + li { margin-top: 0; }
  .case-ladder__title { font: var(--heading-s); letter-spacing: var(--tracking-head); }
  .case-ladder__n { color: var(--muted); margin-right: 4px; }
  .case-ladder__text { font: var(--body-s); margin-top: 4px; }
  .case-ladder__bar {
    height: 48px;
    margin-top: 12px;
    border: 3px solid var(--blue);
    display: flex;
    align-items: center;
    padding: 0 16px;
  }
  .case-ladder__step--1 .case-ladder__bar { width: 40%; background: var(--blue); color: var(--cream); }
  .case-ladder__step--2 .case-ladder__bar { width: 70%; }
  .case-ladder__step--3 .case-ladder__bar { width: 85%; }
  .case-ladder__step--4 .case-ladder__bar { width: 100%; border-style: dashed; }
  .case-ladder__bar span {
    font: 600 var(--fs-body-xs)/var(--lh-body-xs) var(--head);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* The first bar is short, but never shorter than its tag. */
  .case-ladder__step--1 .case-ladder__bar { width: fit-content; min-width: 40%; }
}

/* ── Tap to enlarge ───────────────────────────────────────────────────
   A web page squeezed to a phone can't be read; a tap opens it full screen
   at its own size, to scroll around in and pinch. */
.case-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.case-zoom__icon {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--cream);
}

.case-zoom-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cream);
}
.case-zoom-dialog::backdrop { background: var(--cream); }
.case-zoom-dialog__scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.case-zoom-dialog__scroll img { display: block; width: auto; max-width: none; height: auto; }
.case-zoom-dialog__close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  z-index: 1;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--cream);
  font: 600 28px/1 var(--head);
  cursor: pointer;
}