/* ---------------------------------------------------------------
   case.css — layout for a case study page.
   Loaded after style.css and uses its tokens, so a case study inherits
   the site's type, colour and spacing without touching the main sheet.
   --------------------------------------------------------------- */

.case {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ===== Top bar: one link back, nothing else ===== */
.case__bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad-x);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 12px;
}
.case__bar a { color: var(--ink-soft); }
.case__bar a:hover { color: var(--accent); }

/* ===== Head ===== */
.case__head { padding: clamp(56px, 9vw, 110px) 0 clamp(32px, 5vw, 56px); display: grid; gap: 20px; }
.case__title {
  font-family: var(--f-display);
  font-variation-settings: "wght" 380;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.case__lede { max-width: 62ch; font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); }

.case__facts {
  display: grid; gap: 18px 40px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.case__facts dt {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.case__facts dd { margin-top: 6px; font-size: 14.5px; color: var(--ink); }

/* ===== Body ===== */
.case__section { padding: clamp(40px, 6vw, 72px) 0; display: grid; gap: 18px; }
.case__section h2 {
  font-family: var(--f-display);
  font-variation-settings: "wght" 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.01em;
}
.case__section h3 { font-size: 16px; font-weight: 600; margin-top: 8px; }
.case__section p, .case__section li { max-width: 68ch; color: var(--ink-soft); font-size: 15.5px; }
.case__section ul { display: grid; gap: 10px; padding-left: 18px; list-style: disc; }
.case__section strong { color: var(--ink); font-weight: 600; }

/* A grid's implicit column is auto, which grows to its widest item's
   min-content. The 16:9 media frame's is 805px, so on a phone the whole page
   laid out at 825px and zoomed out. minmax(0, 1fr) caps the column instead. */
.case__head, .case__section, .case__media { grid-template-columns: minmax(0, 1fr); }

/* ===== Media slots: a diagram and a demo video ===== */
.case__media { display: grid; gap: 12px; margin: 8px 0; }
.case__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  display: grid; place-items: center;
  background: var(--bg-deep);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  color: var(--ink-mute);
  font-family: var(--f-mono); font-size: 12px; text-align: center;
  padding: 24px;
}
.case__frame video, .case__frame img, .case__frame svg { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.case__caption { font-family: var(--f-mono); font-size: 11px; color: var(--ink-mute); }

/* A diagram is drawn at a fixed size, not a 16:9 slot: squeezed onto a phone
   its labels would fall to about 6px, so below its natural width it keeps a
   readable size and scrolls sideways inside the frame instead. */
.case__frame--diagram { aspect-ratio: auto; display: block; place-items: normal; text-align: left; overflow-x: auto; padding: 16px; border-style: solid; }
.case__frame--diagram svg { display: block; min-width: 640px; width: 100%; height: auto; }

/* ===== Numbers ===== */
.case__numbers { display: grid; gap: 26px 22px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); padding: 8px 0; }
.case__number { display: grid; gap: 6px; min-width: 0; }
/* A value wider than its column used to run under the next one: 1,000/mo over 83%. */
.case__number b { font-family: var(--f-display); font-size: clamp(24px, 2.5vw, 34px); font-weight: 400; line-height: 1.15; color: var(--ink); overflow-wrap: break-word; }
/* Values and labels line up across a row rather than each tile setting its own. */
@supports (grid-template-rows: subgrid) {
  .case__numbers { grid-auto-rows: auto; }
  .case__number { grid-row: span 2; grid-template-rows: subgrid; }
}
.case__number span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

/* ===== Foot ===== */
.case__foot {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: clamp(40px, 6vw, 72px) 0 80px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 12px; color: var(--ink-mute);
}

/* A template placeholder. Delete the class with the placeholder text. */
.case__todo {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--f-mono); font-size: 11px;
}

@media (max-width: 600px) {
  .case__facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ===== Print ===== */
/* style.css already turns the page into black on white. A case study only
   needs its own blocks kept whole: printed from Chrome, a Numbers tile put its
   figure at the foot of one page and its label at the top of the next, because
   a grid row splits at a page edge instead of moving. */
@media print {
  .case__bar { position: static; }
  .case__numbers { display: block; }
  .case__number {
    display: inline-block; vertical-align: top;
    width: 30%; margin: 0 2% 5mm 0;
  }
  .case__number b, .case__number span { display: block; }
  /* Screen spacing is sized for a viewport; on paper it left the footer alone
     on the last page. */
  .case__head { padding: 0 0 6mm; }
  .case__section { padding: 6mm 0; }
  .case__foot { padding: 6mm 0 0; }
  .case__facts > div, .case__number, .case__media, .case__section li,
  .case__section:has(.case__numbers) { break-inside: avoid; }
  .case__section h2 { break-after: avoid; }
  .case__head .btn[href^="http"]::after {
    content: " " attr(href);
    font-family: var(--f-mono); font-size: 9pt; color: var(--ink-mute);
    text-transform: none; letter-spacing: 0;
  }
}