/* ============================================================
   Miivo case study

   Geometry is taken verbatim from the Paper artboard "Miivo Case
   study": an 885px content column, 80px between top-level blocks,
   and exact child sizes within each block. Internal widths are
   expressed as `fr` ratios and `aspect-ratio` so the whole column
   scales down without losing the design's proportions.

   One intentional departure: the artboard puts the column 61.5px
   right of its own centreline. Here it is genuinely centred in the
   viewport, falling back to a fixed offset when the sidebar would
   otherwise crowd it.
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────── */

@font-face {
  font-family: 'Open Sauce Two';
  src: url('../fonts/open-sauce-two-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sauce Two';
  src: url('../fonts/open-sauce-two-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sauce Two';
  src: url('../fonts/open-sauce-two-500-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Open Sauce Two';
  src: url('../fonts/open-sauce-two-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sauce Two';
  src: url('../fonts/open-sauce-two-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sauce Two';
  src: url('../fonts/open-sauce-two-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inclusive Sans';
  src: url('../fonts/inclusive-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Host Grotesk';
  src: url('../fonts/host-grotesk-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────── */

:root {
  --ui: 'Open Sauce Two', system-ui, -apple-system, sans-serif;
  --eyebrow-face: 'Inclusive Sans', system-ui, sans-serif;

  --page: #FFFFFF;
  --card: #F5F5F5;          /* the light panels that hold imagery */
  --shot: #D9D9D9;          /* image placeholder fill */
  --ink: #000000;
  --ink-body: #171717;      /* only the overview meta copy */
  --ink-muted: #6A6A6A;
  --ink-faint: #929290;
  --hairline: rgba(0, 0, 0, .1);
  --navy: #1C1655;

  --content-w: 885px;
  --nav-inset: 48px;
  --nav-text-w: 155px;
  /* Nav text ends at 203; keep 64px clear of the column. */
  --nav-reserve: 267px;
  --edge: 40px;
  --block: 80px;            /* between divisions */
  --inner: 64px;            /* from a division's text to its imagery */
  --top: 98px;              /* artboard: H1 sits at y=98 */

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── Base ──────────────────────────────────────────────── */

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--ui);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  z-index: 10;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ── Sidebar ───────────────────────────────────────────── */

.side {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nav-reserve);
  height: 100vh;
  padding: var(--top) 0 40px var(--nav-inset);
}

.side__nav { display: flex; flex-direction: column; gap: 28px; }

.side__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: var(--nav-text-w);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  transition: opacity .3s var(--ease);
}
.side__back svg { flex-shrink: 0; }
.side__back:hover { opacity: .55; }

/* The list sits back in grey; only the section being read is inked. The
   marker is driven by the scroll-spy at the foot of the page — without JS
   every item simply stays grey, which still reads as a plain index. */
.side__list { display: flex; flex-direction: column; gap: 8px; }
.side__list a {
  display: block;
  width: var(--nav-text-w);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-transform: lowercase;
  transition: color .3s var(--ease);
}
.side__list a:hover,
.side__list a[aria-current="true"] { color: var(--ink); }

/* ── Content column ────────────────────────────────────── */

.content {
  /* Centred when there's room; parked clear of the nav when not. */
  width: min(var(--content-w), 100% - var(--nav-reserve) - var(--edge));
  margin-left: max((100% - var(--content-w)) / 2, var(--nav-reserve));
  /* The closing section still needs room to scroll up past the side index's
     reading line, but the footer below now contributes most of it. */
  padding: var(--top) 0 140px;
}

.section + .section { margin-top: var(--block); }

/* ── Shared type ───────────────────────────────────────── */

.eyebrow {
  font-family: var(--eyebrow-face);
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  text-transform: uppercase;
  color: var(--ink);
}

/* The claim carries the argument; the lede below it carries the evidence.
   Same family as the body (Open Sauce Two), just its heaviest cut — the
   register shift comes from weight and size, not a second typeface. */
.claim {
  margin-top: 14px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;   /* matched to the hero title — 800 outweighed the h1 */
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
}

.section__lede {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
  color: var(--ink);
}
.claim + .section__lede { margin-top: 14px; font-size: 16px; color: var(--ink-muted); }

/* Two supporting paragraphs, equal width, spanning the content column. */
.duo {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.duo p {
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}

.section__question {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  line-height: 145%;
  color: var(--ink);
}

/* Image stand-ins, sized per block below. */
.placeholder {
  background: var(--shot);
  border-radius: 4px;
}

/* ── Overview ──────────────────────────────────────────── */

.hero__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hero__shot {
  position: relative;
  margin: var(--inner) 0 0;
  aspect-ratio: 885 / 480;
  border-radius: 8px;
  overflow: clip;
  background: var(--card);
}
/* The slides are stacked, so they share the one slot rather than each
   claiming a row of their own. */
.hero__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Four screens on a 12s loop: each holds for 2.4s, then crossfades over
   0.6s. One keyframe set for all four — negative delays offset each slide
   by a quarter of the cycle, so slide n fades in exactly as n-1 fades out. */
.hero__slide {
  opacity: 0;
  animation: hero-cycle 12s var(--ease) infinite;
}
.hero__slide:nth-child(2) { animation-delay: -9s; }
.hero__slide:nth-child(3) { animation-delay: -6s; }
.hero__slide:nth-child(4) { animation-delay: -3s; }

@keyframes hero-cycle {
  0%,  20% { opacity: 1; }
  25%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}

/* The brief, as a bento: each fact and each number is its own tile, so the
   summary reads as a set of discrete cards rather than one slab. A 6-column
   base lets the 4 facts (span 3 → two per row) and the 3 numbers (span 2 →
   three per row) share one grid without nesting. */
.brief {
  --tile-pad: 24px;
  margin-top: var(--inner);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.brief__tile {
  grid-column: span 3;
  background: var(--card);
  border-radius: 8px;
  padding: var(--tile-pad);
}
.brief__tile--stat {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.meta__label {
  font-family: var(--eyebrow-face);
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.meta__copy {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-body);
}

/* Numbers get their own tiles — sized to read as a fact, not a billboard. */
.stats__value {
  font-family: var(--ui);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.stats__label {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 145%;
  color: var(--ink-muted);
}

/* The verdict: what a reviewer would otherwise have to read five sections
   to find out. Two short columns, no imagery — the claim is the point. */
.verdict {
  margin-top: var(--block);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.verdict--tight { margin-top: 32px; }

/* The four takeaways share the two-up grid; they only need to sit closer to
   their heading and breathe a little wider between columns. */
.verdict--quad {
  margin-top: 32px;
  gap: 32px 40px;
}
.verdict__item { display: flex; flex-direction: column; gap: 10px; }
.verdict__copy {
  font-size: 15px;
  font-weight: 500;
  line-height: 165%;
  color: var(--ink-muted);   /* same grey as the .duo prose */
}

/* With the outcome now told by the stat tiles above it, the problem no longer
   shares a row — it stands alone across the full width and takes the weight
   of a claim rather than a caption. Same step as .claim, so the two read as
   one register wherever they appear on the page. */
.verdict--solo { grid-template-columns: 1fr; }
.verdict__copy--lead {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
}

/* ── Observation & ideation ────────────────────────────── */

.sprint {
  margin-top: var(--inner);
  background: var(--card);
  border-radius: 8px;
  padding: 30px 29px 32px;
}
.sprint__shots {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 405fr 393fr;
  gap: 29px;
}
.sprint__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.sprint__shot:nth-child(1) { aspect-ratio: 405 / 336; }
.sprint__shot:nth-child(2) { aspect-ratio: 393 / 336; }
.sprint__caption {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}

/* ── Initial branding ──────────────────────────────────── */

.branding {
  margin-top: var(--inner);
  background: var(--card);
  border-radius: 8px;
  padding: 14px;
}
.branding__row {
  display: grid;
  gap: 11px;
}
.branding__row--top {
  margin-top: 21px;
  grid-template-columns: 377fr 468fr;
}
.branding__row--bottom {
  margin-top: 11px;
  grid-template-columns: 551fr 292fr;
}

/* The four bento cells are 2x exports of the brand artboards. */
.branding__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.branding__mark  { aspect-ratio: 377 / 244; }
.branding__blank { aspect-ratio: 468 / 244; }
.branding__promo { aspect-ratio: 292 / 288; }

/* The landing shot keeps the softer corner and hairline of a framed screen. */
.branding__wide {
  aspect-ratio: 551 / 288;
  border-radius: 8px;
  border: 1px solid var(--hairline);
}

/* ── Initial build ─────────────────────────────────────── */

.build-list {
  margin-top: var(--inner);
  background: var(--card);
  border-radius: 8px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.build-row {
  display: grid;
  grid-template-columns: 515fr 283fr;
  gap: 24px;
  align-items: center;
}
/* Each screenshot's own proportions match the slot the artboard reserved
   for it, so height follows from the intrinsic ratio — nothing is cropped
   or stretched, and swapping in a differently-shaped shot still works.
   The width/height attributes in the markup hold the space before load. */
.build-row__shot {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--hairline);
}
.build-row__caption {
  font-size: 14px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}

/* ── New product build ─────────────────────────────────── */

.tooling {
  margin-top: var(--inner);
  background: var(--card);
  border-radius: 8px;
  padding: 31px;
  display: grid;
  /* Third track is 225 + the note's own 27px indent, so the fr split
     still resolves the shots to their artboard widths. */
  grid-template-columns: 244fr 285fr 252fr;
  column-gap: 17px;
}
.tooling__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.tooling__shot:nth-child(1) { aspect-ratio: 244 / 301; }
.tooling__shot:nth-child(2) { aspect-ratio: 285 / 301; }
.tooling__note { margin-left: 27px; padding-top: 51px; }
.tooling__icons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.tooling__note p {
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  color: var(--ink-muted);
}

/* ── Design showcase ───────────────────────────────────── */

.showcase { margin-top: var(--block); }
.showcase__row {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.showcase__title {
  width: 325px;
  flex: 0 1 325px;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
  color: var(--ink);
}
.showcase__copy {
  flex: 0 1 346px;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}
.showcase__frame {
  margin-top: var(--inner);
  aspect-ratio: 885 / 493;
  background: var(--card);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Design 2/5 and 3/5 have no artifact yet, so their placeholder fills the
   frame edge to edge — unlike Design 1/5's video, which sits inset. */
.showcase__frame-fill {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.showcase__shot {
  display: block;
  width: 80.68%;             /* 714 of 885 */
  aspect-ratio: 1904 / 1080; /* the recording's own ratio — shown whole, not cropped */
  border-radius: 12px;
  object-fit: contain;
  background: var(--shot);
}

/* Lead Finder (1912x1080) loses 2px off each of the top and bottom edges:
   the box is set to the trimmed ratio and cover centres the frame, so the
   4px of surplus height splits evenly. Tied to this file's dimensions —
   re-measure if the clip is replaced. */
.showcase__shot--trim {
  aspect-ratio: 1912 / 1076;
  object-fit: cover;
}

/* ── Website ───────────────────────────────────────────── */

/* The mockup carries its own grey field, so the figure needs no plate of
   its own — just the shared corner radius. */
.website__shot {
  position: relative;
  margin: var(--inner) 0 0;
  border-radius: 8px;
  overflow: clip;
}
.website__shot img { display: block; width: 100%; height: auto; }

/* Opens the live site, so it sits on the mockup rather than beside it. */
.website__preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.website__preview:hover {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .16);
}
/* The arrow leaves the page, so it points out of it rather than along.
   Sized in em so it always matches the label's height. */
.website__preview svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.website__preview:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ── Stubs ─────────────────────────────────────────────── */


/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 980px) {
  :root { --nav-reserve: 0px; --top: 32px; }

  .side {
    position: static;
    width: 100%;
    height: auto;
    padding: 24px var(--edge) 0;
  }
  .side__nav { gap: 16px; }
  .side__back { width: auto; }
  .side__list { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .side__list a { width: auto; }

  .content {
    width: min(var(--content-w), 100% - 2 * var(--edge));
    margin-inline: auto;
  }

  .hero__title { font-size: clamp(28px, 4.4vw, 40px); }
}

@media (max-width: 700px) {
  /* Tighter rhythm: at this width the desktop's 80/64 gaps read as gaps in
     the argument rather than as breathing room between its parts. */
  :root { --edge: 20px; --block: 44px; --inner: 36px; }

  /* The section index is ten links wrapping to five lines above the title,
     and it cannot do its job here: there is no column beside the reading to
     hold it, so it scrolls away and never comes back. The Back link stays. */
  .side__list { display: none; }
  .side { padding-bottom: 0; }
  .side__nav { gap: 0; }

  /* The display sizes were set against a 885px column. Held at that size in
     a 335px one they take three lines to say what took one, so each steps
     down while the reading sizes stay where they are. */
  .hero__title { font-size: 26px; line-height: 128%; }
  .claim { font-size: 18px; line-height: 135%; }
  .section__lede { font-size: 17px; }
  .section__question { font-size: 17px; }
  .stats__value { font-size: 22px; }

  /* One tile per row; the 6-col spans collapse with it. */
  .brief { --tile-pad: 14px; grid-template-columns: 1fr; gap: 8px; }
  .brief__tile,
  .brief__tile--stat { grid-column: span 1; }

  /* Stacked, four of these ran to 600px before the page had said anything.
     The label's 28px line-height was holding a row it no longer shares with
     anything, and the padding was set for a two-up grid. */
  .brief .meta__label { line-height: 18px; }
  .brief .meta__copy { margin-top: 3px; line-height: 155%; }

  /* One reading size and one label size for the whole page at this width.
     Line-height is lifted as the size drops so the measure stays readable:
     a shorter line needs proportionally more leading, not less. */
  /* Both written at the specificity of the desktop rules they replace:
     `.claim + .section__lede` sets 16px, which outranked a bare
     `.section__lede` here and left that one paragraph at desktop size on
     178% leading meant for 13px. */
  .section__body,
  .claim + .section__lede,
  .lead + .section__lede { font-size: 14px; line-height: 172%; }

  .section__lede,
  .duo p,
  .showcase__copy,
  .meta__copy,
  .build-row p,
  .takeaway__copy,
  .tooling__note,
  .verdict__copy,
  .entry__points li,
  .entry__note { font-size: 13px; line-height: 178%; }

  .eyebrow,
  .meta__label,
  .stats__label,
  .slot__caption { font-size: 12px; }

  /* The problem statement is a claim, not body copy: the blanket
     `.verdict__copy` rule above had pulled it down to 13px. Written with both
     classes so it outranks that rule wherever it sits in the file. */
  .verdict__copy.verdict__copy--lead {
    font-size: 18px;
    line-height: 135%;
  }

  /* An h3 under a section claim was rendering larger than it: on desktop the
     claim scales up with the column, but at this width both hit their floors
     and the order inverted. Sits below the 18px claim, above the 14px body. */
  .showcase__title { font-size: 16px; line-height: 140%; }
  .verdict { grid-template-columns: 1fr; gap: 24px; }
  .sprint { padding: 20px; }
  .sprint__shots { grid-template-columns: 1fr; gap: 16px; }
  .duo { grid-template-columns: 1fr; gap: 20px; }

  .branding { padding: 12px; }
  .branding__row--top,
  .branding__row--bottom { grid-template-columns: 1fr; }

  .build-list { padding: 20px; gap: 24px; }
  .build-row { grid-template-columns: 1fr; gap: 14px; }

  .tooling { grid-template-columns: 1fr; row-gap: 16px; padding: 20px; }
  .tooling__note { margin-left: 0; padding-top: 0; }

  .showcase__row { flex-direction: column; gap: 14px; }
  .showcase__title, .showcase__copy { flex: 1 1 auto; width: auto; }

  /* The grey mount costs a fifth of the width to hold a recording that is
     already hard to read at this size. The shot goes edge to edge and the
     frame takes its height from it, so nothing is letterboxed. */
  .showcase__frame {
    aspect-ratio: auto;
    background: none;
    border-radius: 0;
  }
  .showcase__shot {
    width: 100%;
    border-radius: 4px;
  }
}

/* ── Next project ──────────────────────────────────────── */

/* The last thing in the column, so a reader who finishes has somewhere to go
   other than the back arrow. Ruled rather than boxed: it closes the document
   instead of adding one more card to it. */
.next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: var(--block);
  padding-top: 34px;
  box-shadow: inset 0 1px 0 var(--hairline);
  text-decoration: none;
  color: var(--ink);
}
.next__text { display: flex; flex-direction: column; }

.next__label {
  font-family: var(--eyebrow-face);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.next__title {
  margin-top: 10px;
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.next__desc {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 165%;
  color: var(--ink-muted);
}

/* The arrow carries the hover, so the type does not move under the cursor. */
.next__arrow {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.next:hover .next__arrow { transform: translateX(5px); color: var(--ink); }
.next:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

/* ── Footer ────────────────────────────────────────────── */

/* Runs the full width of the page rather than the content column, so the rule
   reaches both edges and the whole thing reads as the end of the document.
   Text is inset to the side index's own gutter so the left edge still lines
   up with the navigation above it. */
.foot {
  /* One inset drives both the padding and the wordmark's bleed, so they
     can't drift apart at the breakpoint. */
  --foot-inset: var(--nav-inset);
  margin-top: 96px;
  /* No bottom padding: the wordmark is the last thing on the page and sits
     flush against its edge. */
  padding: 26px var(--foot-inset) 0;
  border-top: 1px solid var(--hairline);
}

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The wordmark runs the full bleed, past the inset the credit row keeps,
   and its glyphs are cropped along the bottom edge. --dot is read by the
   canvas script so the ink stays in the stylesheet rather than in JS. */
/* No fixed height: the script measures the glyphs at the width available and
   sizes the canvas to their ink bounds, so the wordmark is always complete
   and always in the face's own proportions. --dot is read by that script, so
   the ink stays in the stylesheet. */
.foot__mark {
  --dot: #D2D2D2;
  margin: 34px calc(var(--foot-inset) * -1) 0;
  font-size: 0;         /* no inline-descender gap beneath the canvas */
}
.foot__mark canvas {
  display: block;
  width: 100%;
}

/* Set in the eyebrow face and tracked open, so the two ends of the bar read
   as one row of small caps rather than as a name and a menu. */
.foot__note,
.foot__links a {
  font-family: var(--eyebrow-face);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.foot__links {
  display: flex;
  gap: 28px;
}
.foot__links a {
  text-decoration: none;
  transition: color .3s var(--ease);
}
.foot__links a:hover { color: var(--ink); }

.foot__links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 700px) {
  /* The 96px above the rule was set against a wordmark that is no longer
     here, and it read as a gap rather than as the end of the document. */
  .foot { --foot-inset: var(--edge); margin-top: 44px; padding-bottom: 22px; }

  /* Credit and links share the row again rather than stacking. */
  .foot__bar { flex-direction: row; align-items: center; gap: 16px; }
  .foot__links { gap: 18px; }

  /* At this width the phrase spans 375px, which drops the cap height to
     28px — seven rows of a four-pixel grid, too few to hold a letter. It
     reads as noise rather than as a wordmark, so it is left to the desktop. */
  .foot__mark { display: none; }
}

/* ── Arrival ───────────────────────────────────────────── */

/* The card on the index expands to full bleed before handing over, so this
   page opens on the same white surface and only its contents need to arrive. */
@keyframes case-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.side { animation: case-enter .5s var(--ease) .06s both; }
.content { animation: case-enter .5s var(--ease) .12s both; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }

  .side, .content { animation: none; }

  /* No cycling — the first screen simply stays. */
  .hero__slide { animation: none; opacity: 0; }
  .hero__slide:first-child { opacity: 1; }
}