/* ========================================================================
   GoPassion — one stylesheet, one look.

   The 2026 direction is no longer a layer that overrides an older design:
   it is the design. Bang & Olufsen supplies the calm and the generosity,
   Braun and Vitsœ the order and the usability. One light page; the few dark
   areas are surfaces inside it, never a second theme.

   Layers, in cascade order:
     reset       normalisation, nothing opinionated
     tokens      fonts, scales, palette, role tokens
     base        element defaults that read the tokens
     components  chrome, primitives, form, home, case, index + legal
     utilities   the two motion blocks

   Rules of the house, so this file stays one system
   (documentation/design-system.md has the tables):
   - components read the role tokens (--bg, --fg, --fg-mute, --accent-ink,
     --data, --rule, --focus …) and never a primitive, so a surface is one
     remap: `sec--dark`, `sec--proof`, `sec--accent`;
   - type is a Figma text style: --t-*, --lh-*, --track-*, --weight-*; no
     literal size or line height outside `tokens`;
   - vertical sizes snap to the baseline unit (0.25rlh), fluid sizes run
     `clamp()` in `vi` between the Figma samples 375 and 1440;
   - one raster, `.grid`: 12 / 8 / 4 columns, a child names its columns in
     `--col` / `--col-m` / `--col-s`;
   - no viewport media query. Layouts break on container queries: `page`
     (main) at 48rem and 64rem, plus `navpill`, `footer`;
   - a stage is a full plane with the notch (`.stage`);
   - nothing is set below 12px.
   ======================================================================== */

@layer reset, tokens, base, components, utilities;

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

  /* Both ends, not just the top: every layout of this site is a grid or a flex
     row that owns its gap, so a trailing UA margin would be added on top of it.
     The two places that set text in flow — the eyebrow and the prose of the
     legal pages — set their own rhythm in the components layer, which outranks
     this `:where()` in any case. */
  :where(h1, h2, h3, h4, p, figure, blockquote) {
    margin-block: 0;
  }

  /* figure keeps a 40px inline margin from the UA sheet if only the block
     axis is reset, which insets every mounted picture inside its frame. */
  :where(figure, ul, ol) {
    margin: 0;
  }

  :where(img, picture, svg) {
    display: block;
    max-inline-size: 100%;
  }

  :where(button, input, textarea) {
    font: inherit;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer tokens {
  /* Values come from the Figma file „Website-GoPassion", page „01 Website
     (Redesign, verbindlich)". Every Figma variable carries its CSS name here
     as code syntax, so a name in Dev Mode is a name in this layer.

     Three levels, and components read only the last two:
       primitives   --color-<ramp>-<step>, --font-family-*
       roles        --bg, --fg, … remapped once per surface below
       type + size  --t-*, --lh-*, --track-*, --weight-*, --space-*, layout

     Figma samples three widths (modes 1440, 768, 375). CSS runs a line through
     the 375 and 1440 samples with `clamp()` in `vi` and stays flat outside.
     Vertical sizes snap to the baseline unit, a quarter of a body line
     (`0.25rlh`). documentation/design-system.md has the tables. */

  /* Two families, self-hosted, OFL text next to the files. /assets/fonts/ is
     served without `immutable` (public/.htaccess) because these URLs carry no
     ?v: a replaced cut gets a new file name.

     Hanken Grotesk for text and UI: one variable file per unicode range.
     Fraunces for headings, figures and numerals: four static cuts of the
     variable family, subset to Latin (SOFT 0, WONK as in Figma). One family
     name, the weight picks the optical size: 400 is the display cut, 460 and
     420 italic are the text cuts. */
  @font-face {
    font-family: "Hanken Grotesk";
    src: url("/assets/fonts/HankenGrotesk-Variable-v2-latin.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
      U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Hanken Grotesk";
    src: url("/assets/fonts/HankenGrotesk-Variable-v2-latin-ext.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
      U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
    font-family: "Fraunces";
    src: url("/assets/fonts/fraunces-display-400-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Fraunces";
    src: url("/assets/fonts/fraunces-display-400-italic-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Fraunces";
    src: url("/assets/fonts/fraunces-text-460-latin.woff2") format("woff2");
    font-weight: 460;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Fraunces";
    src: url("/assets/fonts/fraunces-text-420-italic-latin.woff2") format("woff2");
    font-weight: 420;
    font-style: italic;
    font-display: swap;
  }

  :root {
    color-scheme: light;

    /* --- primitives ------------------------------------------------------ */
    --color-white: #ffffff;
    --color-neutral-100: #f6f2f6;
    --color-neutral-200: #ebe6ea;
    --color-neutral-600: #7f787e;
    --color-neutral-700: #5a4f58;
    --color-neutral-900: #1d1c1d;
    --color-purple-200: #efe3f3;
    --color-purple-400: #d9a1d8;
    --color-purple-800: #5e2b5f;
    --color-purple-900: #4a154b;
    --color-orange-300: #fec5b5;
    --color-orange-400: #fe987c;
    --color-orange-500: #f05428;
    --color-orange-600: #d53b01;
    --color-teal-400: #70cabc;
    --color-green-700: oklch(0.45 0.11 152);

    --font-family-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --font-family-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

    /* --- families and weights -------------------------------------------- */
    --font-display: var(--font-family-serif);
    --font-text: var(--font-family-sans);

    --weight-body: 400;
    --weight-display: 400;
    --weight-caption: 420;
    --weight-lead: 450;
    --weight-title: 460;
    --weight-medium: 550;
    --weight-strong: 650;

    /* --- type sizes: Figma type/size/*, 375 -> 1440 ---------------------- */
    --t-display: clamp(2.5rem, 1.6197rem + 3.7559vi, 5rem);          /* 40    -> 80    */
    --t-h1: clamp(2.125rem, 1.6408rem + 2.0657vi, 3.5rem);           /* 34    -> 56    */
    --t-h2: clamp(1.75rem, 1.4859rem + 1.1268vi, 2.5rem);            /* 28    -> 40    */
    --t-h3: clamp(1.375rem, 1.1989rem + 0.7512vi, 1.875rem);         /* 22    -> 30    */
    --t-title: clamp(1.2637rem, 1.1722rem + 0.3906vi, 1.5237rem);    /* 20.22 -> 24.38 */
    --t-lead: clamp(1.1875rem, 1.0995rem + 0.3756vi, 1.4375rem);     /* 19    -> 23    */
    --t-body: clamp(1.0675rem, 1.0307rem + 0.1568vi, 1.1719rem);     /* 17.08 -> 18.75 */
    --t-body-small: 1.0625rem;                                       /* 17 */
    --t-ui: 1rem;                                                    /* 16 */
    --t-meta: 0.9375rem;                                             /* 15 */
    --t-label: clamp(0.8775rem, 0.859rem + 0.0789vi, 0.93rem);       /* 14.04 -> 14.88 */
    --t-meta-heading: 0.875rem;                                      /* 14 */
    --t-figure-unit: 1.25rem;                                        /* 20 */
    --t-figure-label: 1.125rem;                                      /* 18 */

    /* --- tracking: Figma per cent / 100 --------------------------------- */
    --track-display: -0.02em;
    --track-h1: -0.025em;
    --track-h2: -0.022em;
    --track-h3: -0.0025em;
    --track-title: -0.002em;
    --track-numeral: -0.012em;
    --track-label: 0.01em;

    /* --- baseline --------------------------------------------------------
       One unit is a quarter of a body line. `rlh` reads the line height of
       `html`, which base sets to the body line; font-size of `html` stays
       100%, so every rem token keeps its value. */
    --baseline-unit: 0.25rlh;
    --baseline-line: 1rlh;

    /* Line heights: ratio x size, rounded up to whole units. Small type
       (up to 18px) rounds to half units, or it turns airy. `em` resolves on
       the element that sets the line height, so one token serves every size
       of its style. No literal line height below this layer. */
    --lh-display: round(up, 0.95em, 0.25rlh);
    --lh-figure: round(up, 0.9em, 0.25rlh);
    --lh-h1: round(up, 0.97em, 0.25rlh);
    --lh-h2: round(up, 1.06em, 0.25rlh);
    --lh-h3: round(up, 1.1em, 0.25rlh);
    --lh-quote: round(up, 1.2em, 0.25rlh);
    --lh-lead: round(up, 1.39em, 0.25rlh);
    --lh-body: round(up, 1.55em, 0.25rlh);
    --lh-title: round(up, 1.15em, 0.25rlh);
    --lh-numeral: round(up, 0.96em, 0.25rlh);
    --lh-numeral-large: round(up, 1em, 0.25rlh);
    --lh-numeral-small: round(up, 0.98em, 0.25rlh);
    --lh-body-small: round(up, 1.45em, 0.125rlh);
    --lh-label: round(up, 1.3em, 0.125rlh);
    --lh-ui: round(up, 1.3em, 0.125rlh);
    --lh-meta: round(up, 1.45em, 0.125rlh);

    /* --- space: Figma space/*, rounded to whole units, at least one ------
       xs and s run their line through 375 and 768, the samples where they
       change; the others through 375 and 1440. Units at 375 / 768 / 1440. */
    --space-2xs: 0.25rlh;                                                                       /*  1  1  1 */
    --space-xs: round(nearest, clamp(0.4138rem, -0.0097rem + 1.8066vi, 0.9082rem), 0.25rlh);    /*  1  2  2 */
    --space-s: round(nearest, clamp(0.8275rem, 0.3898rem + 1.8677vi, 1.3625rem), 0.25rlh);      /*  2  3  3 */
    --space-m: round(nearest, clamp(1.6544rem, 1.4374rem + 0.9258vi, 2.2706rem), 0.25rlh);      /*  4  4  5 */
    --space-l: round(nearest, clamp(2.4819rem, 1.9167rem + 2.4113vi, 4.0869rem), 0.25rlh);      /*  6  7  9 */
    --space-xl: round(nearest, clamp(4.1363rem, 2.8744rem + 5.384vi, 7.72rem), 0.25rlh);        /* 10 13 17 */
    --space-2xl: round(nearest, clamp(5.3775rem, 3.5934rem + 7.6122vi, 10.4444rem), 0.25rlh);   /* 13 17 23 */

    /* --- layout ----------------------------------------------------------
       --page        the content width, one value for every page (1152px)
       --page-margin the outer margin below that width, 5% of the viewport;
                     at 1440 the centred page leaves 144px on each side
       --gutter      the column gap, three units
       --columns     12 / 8 / 4, set per band in base
       --stage-inset text inside a stage or box starts one column further;
                     set per band in base, one --space-l in the narrow band
       --notch       the 45-degree corner of a stage, top left */
    --page: 72rem;
    --page-margin: 5vi;
    --gutter: 0.75rlh;
    --columns: 4;
    --stage-inset: var(--space-l);
    --notch: max(2.25rem, 7vi);
    --radius-control: 0.25rem;
    --measure: 62ch;
    --measure-short: 40ch;

    /* --- roles, light (the default surface) ----------------------------- */
    --bg: var(--color-white);
    --card-bg: var(--color-white);
    --fg: var(--color-neutral-900);
    --fg-mute: var(--color-neutral-700);
    --accent-ink: var(--color-orange-600);
    --data: var(--color-orange-500);
    --rule: rgb(29 28 29 / 0.12);
    --focus: var(--color-orange-600);
    --form-line: var(--color-neutral-600);
    --mark-bg: var(--color-orange-400);
    --placeholder: var(--color-neutral-100);
    --chip-bg: var(--color-teal-400);
    --chart-band: var(--color-neutral-200);
    --portrait-tone: var(--color-purple-900);
    --ok: var(--color-green-700);
  }

  /* Surfaces, one per Figma mode of the collection `Color`. Each remaps the
     roles once, so nothing below overrides a colour of its own. A stage sets
     the class on its own frame; the notch then shows the ground around it. */
  .sec--dark {
    --bg: var(--color-purple-900);
    --card-bg: var(--color-purple-800);
    --fg: var(--color-white);
    --fg-mute: var(--color-purple-200);
    --accent-ink: var(--color-orange-400);
    --data: var(--color-orange-300);
    --rule: rgb(255 255 255 / 0.2);
    --focus: var(--color-white);
  }

  .sec--proof {
    --bg: var(--color-purple-400);
    --card-bg: var(--color-white);
  }

  /* Orange as a surface carries ink only. The focus ring turns to ink,
     orange on orange would not show. */
  .sec--accent {
    --bg: var(--color-orange-500);
    --card-bg: var(--color-white);
    --focus: var(--color-neutral-900);
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
    /* The bar is fixed over the content, so an anchor has to stop below it.
       One declaration for every anchor on the site; no section repeats it as
       a scroll-margin of its own. */
    scroll-padding-block-start: calc(var(--nav-h) + var(--space-s));
    /* The body line, and with it the baseline unit: every `rlh` token of
       this site reads it. font-size stays at 100%, so rem is untouched. */
    line-height: calc(var(--t-body) * 1.55);
    background: var(--bg);
  }

  body {
    margin: 0;
    color: var(--fg);
    background: var(--bg);
    font-family: var(--font-text);
    font-size: var(--t-body);
    font-weight: var(--weight-body);
    font-kerning: normal;
    font-optical-sizing: auto;
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* The query container every layout of this site breaks on. It sits on the
     element, not on a wrapper class, because both page types have exactly
     one <main> and none of them needs a second one. */
  main {
    container: page / inline-size;
  }

  /* The bands of the raster: 4 columns, 8 from 48rem, 12 from 64rem. A
     container query never styles its own container, so the values sit on
     the children of <main> and inherit from there. --stage-inset is one
     column plus a gutter from 48rem on, and has to be computed where
     --columns is known. */
  @container page (inline-size >= 48rem) {
    main > * {
      --columns: 8;
      --stage-inset: calc((min(100cqi - 2 * var(--page-margin), var(--page)) - (var(--columns) - 1) * var(--gutter)) / var(--columns) + var(--gutter));
    }
  }

  @container page (inline-size >= 64rem) {
    main > * {
      --columns: 12;
    }
  }

  a {
    color: inherit;
  }

  :where(h1, h2, h3, h4) {
    color: var(--fg);
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    letter-spacing: var(--track-h2);
    line-height: var(--lh-h2);
    text-wrap: balance;
    hyphens: none;
    overflow-wrap: normal;
  }

  :where(p, li, figcaption, blockquote) {
    text-wrap: pretty;
    hyphens: auto;
  }

  /* --focus rather than the accent token itself: the ring has to stay visible
     on the dark surfaces too, and every one of them remaps this (see above). */
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 0;
  }
}

@layer components {
  /* =====================================================================
     Chapter order inside `components` is fixed: chrome, primitives, form,
     home, case, index + legal. Tokens and primitives are shared and are not
     edited from a chapter.
     ===================================================================== */

  /* --- components: chrome ------------------------------------------------
     skip link, nav, .btn, footer */

  :root {
    /* What the fixed bar occupies at the top of the viewport: the 44px
       button and --space-xs above and below it (Figma Nav, 73px at 1440,
       57px at 375). One row at every width. `html` reads it for
       scroll-padding and every page opening reserves it. */
    --nav-h: calc(2.75rem + 2 * var(--space-xs));
  }

  .skip {
    position: fixed;
    z-index: 100;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: var(--space-xs) var(--space-s);
    color: var(--bg);
    background: var(--fg);
    text-decoration: none;
    transform: translateY(-160%);
  }

  .skip:focus {
    transform: none;
  }

  /* Figma Nav: a white bar without a rule, the wordmark on the left, the
     links and the button on the right. Below 40rem only the wordmark and
     the button stay (Layout=Compact); the footer carries every link. */
  .nav {
    position: fixed;
    z-index: 80;
    inset: 0 0 auto;
    background: var(--color-white);
    container: navpill / inline-size;
  }

  .nav-bar {
    inline-size: 100%;
    max-inline-size: calc(var(--page) + 2 * var(--page-margin));
    min-block-size: var(--nav-h);
    padding: var(--space-xs) var(--page-margin);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--space-m);
  }

  /* The wordmark: 28px tall, 22px in the compact bar. */
  .nav-brand {
    margin-inline-end: auto;
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

  .nav-brand img {
    block-size: 1.75rem;
    inline-size: auto;
    display: block;
  }

  .nav-links {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-m);
    list-style: none;
  }

  /* `UI/Control`. */
  .nav-links a {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--fg);
    font-size: var(--t-ui);
    font-weight: var(--weight-strong);
    line-height: var(--lh-ui);
    text-decoration: none;
    white-space: nowrap;
  }

  /* The section the reader is in, set by site.js as [aria-current]. */
  .nav-links a:is(:hover, [aria-current="true"]) {
    text-decoration: underline;
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }

  .nav .btn {
    min-block-size: 2.75rem;
    padding-inline: var(--space-xs);
    font-size: var(--t-ui);
    line-height: var(--lh-ui);
  }

  @container navpill (inline-size < 64rem) {
    .nav-links {
      gap: var(--space-s);
    }
  }

  @container navpill (inline-size < 40rem) {
    .nav-links {
      display: none;
    }

    .nav-brand img {
      block-size: 1.375rem;
    }
  }

  /* Figma `Button`: the one button type. A plane of --fg with --bg on it —
     the inversion of the surface it stands on, so it needs no role of its
     own. 56px in the content, 48px in a form (`.btn--form`), 44px in the
     nav. A fixed height breaks the baseline on purpose (design-system.md). */
  .btn {
    min-block-size: 3.5rem;
    padding: 0 var(--space-s);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    border: 0;
    color: var(--bg);
    background: var(--fg);
    font-family: var(--font-text);
    font-size: var(--t-body-small);
    font-weight: var(--weight-strong);
    line-height: var(--lh-label);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .btn:hover {
    background: var(--accent-ink);
  }

  .btn--form {
    min-block-size: 3rem;
  }

  /* Below 48rem a button in the content takes the full column. */
  @container page (inline-size < 48rem) {
    .btn {
      inline-size: 100%;
    }
  }

  /* Kept for the markup that still names it; `.btn` is dark by itself. */
  .btn--dark {
    color: var(--bg);
    background: var(--fg);
  }

  .btn--dark:hover {
    background: var(--accent-ink);
  }

  /* The one button that stands alone on a page rather than in a row of
     chrome: the fallback call to action of the error page. */
  /* The one button that carries body size rather than the meta size of the
     chrome, because it stands alone in a column of prose. */
  .btn--lg {
    padding: var(--space-xs) var(--space-m);
    font-size: var(--t-body);
  }

  /* Figma Footer: an orange stage with the notch and the closing line, then
     the wordmark and three lists. The footer stands outside <main> and so
     outside the `page` container; it keeps a query of its own at the same
     edges, 48rem and 64rem. */
  .footer {
    padding-block: var(--space-xl) var(--space-l);
    container: footer / inline-size;
  }

  .footer-stage {
    padding-block: var(--space-xl) var(--space-l);
  }

  /* `Heading/H2` on orange: ink only. */
  .footer-quote {
    max-inline-size: calc(13em + var(--space-m));
    padding-inline-start: var(--space-m);
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: var(--weight-display);
    letter-spacing: var(--track-h2);
    line-height: var(--lh-h2);
    text-wrap: balance;
  }

  .footer-inner {
    margin-block-start: var(--space-l);
    display: grid;
    gap: var(--space-m);
  }

  .footer-brand {
    margin: 0;
  }

  .footer-brand img {
    block-size: 1.75rem;
    inline-size: auto;
  }

  .footer-cols {
    display: grid;
    gap: var(--space-m);
  }

  .footer ul {
    margin: 0;
    padding: 0;
    display: grid;
    align-content: start;
    gap: var(--space-2xs);
    list-style: none;
  }

  /* `Body/Medium`, the copyright `Meta/Regular`. */
  .footer li {
    font-size: var(--t-body);
    font-weight: var(--weight-medium);
    line-height: var(--lh-body);
  }

  .footer a {
    color: inherit;
    text-decoration: none;
  }

  .footer a:hover {
    text-decoration: underline;
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
  }

  .footer .footer-copy {
    color: var(--fg-mute);
    font-size: var(--t-meta);
    font-weight: var(--weight-body);
    line-height: var(--lh-meta);
  }

  @container footer (inline-size >= 48rem) {
    /* The quote starts on column 4 of 8, the lists share the row. */
    .footer-quote {
      --quote-start: calc(3 * (100% - 7 * var(--gutter)) / 8 + 3 * var(--gutter));
      max-inline-size: calc(var(--quote-start) + 13em);
      padding-inline-start: var(--quote-start);
    }

    .footer-cols {
      grid-template-columns: repeat(3, auto);
      justify-content: space-between;
    }
  }

  @container footer (inline-size >= 64rem) {
    /* Quote on column 5 of 12, lists on 7-12, wordmark on 1. */
    .footer-quote {
      --quote-start: calc(4 * (100% - 11 * var(--gutter)) / 12 + 4 * var(--gutter));
    }

    .footer-inner {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gutter);
    }

    .footer-brand {
      grid-column: 1 / span 6;
    }

    .footer-cols {
      grid-column: 7 / -1;
    }
  }

  /* --- components: primitives -------------------------------------------
     wrap, grid, sec, eyebrow, headlines and marks, chip, link, stage.

     Everything here is shared by the home page and the case studies. Each of
     them reads the role tokens only, which is what makes a dark surface one
     remap instead of an override per component. */

  /* Two measures on one component, because the site has two kinds of page and
     no more: the reading measure, and the editorial spread of the home page.
     A prose column is no third wrap — it is columns of `.grid`. */
  .wrap {
    inline-size: 100%;
    max-inline-size: calc(var(--page) + 2 * var(--page-margin));
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  /* The page raster of the redesign: 12 / 8 / 4 columns (--columns, set per
     band in base), the gutter of three baseline units. A child says which
     columns it takes in a custom property, never in a class of its own:

       --col    >= 64rem, of 12
       --col-m  48-64rem, of 8
       --col-s  < 48rem, of 4; without it a child runs the full width */
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .grid > * {
    min-inline-size: 0;
    grid-column: var(--col-s, 1 / -1);
  }

  @container page (inline-size >= 48rem) {
    .grid > * {
      grid-column: var(--col-m, 1 / -1);
    }
  }

  @container page (inline-size >= 64rem) {
    .grid > * {
      grid-column: var(--col, 1 / -1);
    }
  }

  /* Rhythm. A section of a case study names its padding tier and its
     surface as classes (snippets/case-section.php, map in
     templates/casestudy.php):

       tier     `sec--s` --space-l · `sec--m` --space-xl · `sec--l` --space-2xl
       surface  none (the white page) · `sec--dark` · `sec--proof` ·
                `sec--accent`

     A surface class paints full bleed; `.wrap` inside does the insetting.
     The home page sections set their padding in their own rules. */
  .sec {
    padding-block: var(--space-xl);
  }

  .sec--s {
    padding-block: var(--space-l);
  }

  .sec--m {
    padding-block: var(--space-xl);
  }

  .sec--l {
    padding-block: var(--space-2xl);
  }

  /* The tone travels with the section: the roles are remapped in `tokens`,
     this only paints the plane. */
  .sec--dark,
  .sec--proof,
  .sec--accent {
    color: var(--fg);
    background: var(--bg);
  }

  /* Figma `Eyebrow`, text style `Label`: the line of context above a
     heading. The heading follows one --space-xs below; a head that is a
     grid or a flex stack sets its own gap and zeroes this. */
  .eyebrow {
    margin-block-end: var(--space-xs);
    color: var(--fg);
    font-family: var(--font-text);
    font-size: var(--t-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-label);
    line-height: var(--lh-label);
  }

  /* Three heading classes, and the class now says which role it is:
     `.h-display` the one display size of the site (the home hero H1),
     `.h-page` the H1 of a reading page — case study overview, index, legal,
     error, fallback — and `.h-sec` a section heading. The class carries the
     role, so no selector here has to name a page type to find its size. */
  /* Figma text styles `Display`, `Heading/H1`, `Heading/H2`, all Fraunces
     at the display cut. The element is chosen by the outline, the class by
     the size — a section heading on a stage is an <h2> set as H1. */
  .h-display {
    font-family: var(--font-display);
    font-size: var(--t-display);
    font-weight: var(--weight-display);
    letter-spacing: var(--track-display);
    line-height: var(--lh-display);
  }

  .h-page {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    font-weight: var(--weight-display);
    letter-spacing: var(--track-h1);
    line-height: var(--lh-h1);
  }

  .h-sec {
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: var(--weight-display);
    letter-spacing: var(--track-h2);
    line-height: var(--lh-h2);
  }

  /* The two lines of snippets/headline.php run as one sentence. */
  :is(.h-display, .h-page, .h-sec) :is(.l1, .l2) {
    display: inline;
  }

  /* The three Writer marks of a heading (fields/headline.yml). */
  :is(h1, h2, h3) em {
    color: var(--accent-ink);
    font-style: italic;
  }

  :is(h1, h2, h3) s {
    color: var(--fg-mute);
    text-decoration-thickness: 0.06em;
  }

  /* The highlight: a band of --mark-bg a little lower than the line, reaching
     a hair past the first letter. `clone` repeats the band on every line the
     phrase wraps onto. */
  :is(h1, h2, h3) strong,
  .mark {
    padding-inline: 0.08em;
    margin-inline: -0.08em;
    background: linear-gradient(var(--mark-bg), var(--mark-bg)) 0 60% / 100% 0.92em no-repeat;
    font-weight: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* Figma `Chip`: a plane of --chip-bg with a `Label` on it. 2rem is the row
     a chip needs to read as a label; a thumb needs more, so below the S edge
     it takes the 44px minimum — see the band at the end of this chapter. */
  .chip {
    min-block-size: 2rem;
    padding: var(--space-2xs) var(--space-xs);
    display: inline-flex;
    align-items: center;
    color: var(--color-neutral-900);
    background: var(--chip-bg);
    font-family: var(--font-text);
    font-size: var(--t-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-label);
    line-height: var(--lh-label);
    text-decoration: none;
  }

  a.chip:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* A link that stands on its own: `Body/Strong`, underlined in --data. */
  .link-more {
    font-family: var(--font-text);
    font-size: var(--t-body);
    font-weight: var(--weight-strong);
    line-height: var(--lh-body);
    text-decoration: underline;
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
  }

  .link-more:hover {
    text-decoration-color: currentcolor;
  }

  /* A stage: a full plane of its surface with the notch, the 45-degree
     corner top left. The surface class (`sec--dark`, `sec--proof`,
     `sec--accent`) goes on the same element; the notch shows the ground
     around it. */
  .stage {
    color: var(--fg);
    background: var(--bg);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
  }

  /* Touch targets. On a phone every standalone link of this site is operated
     with a thumb, so below the S edge it takes the 44px minimum — height
     only, because the width is the column and the column is wide enough.
     Links inside running copy are left alone: a target in a sentence is
     exempt, and padding around one would open holes in the paragraph.

     The rule stands here, among the primitives, because it is about the
     smallest parts of the page and not about one chapter of it. */
  @container page (inline-size < 48rem) {
    :is(a.chip, .toc-list a) {
      min-block-size: 44px;
      display: inline-flex;
      align-items: center;
    }
  }

  /* The footer is its own container, so it names the same minimum itself. */
  @container footer (inline-size < 48rem) {
    .footer a {
      min-block-size: 44px;
      display: inline-flex;
      align-items: center;
    }
  }

  /* --- components: form -------------------------------------------------
     One form (snippets/form-contact.php) in one reading. The fields are
     underlines, not boxes: the page has no rounded corners and no shadows, so
     a filled input would be the only object of its kind. */

  /* Figma Field: boxed controls, 48px (the textarea 128px), a 2px line in
     --form-line, the control radius, the card ground. */
  .form {
    display: grid;
    gap: var(--space-s);
    --form-text: var(--fg);
    --form-note: var(--fg-mute);
    --form-error: var(--accent-ink);
  }

  /* Two fields to a row, one field to a row below the S edge. The form never
     sits on the page raster itself — it lives inside one column group of it —
     so this is the one grid of the site that counts its own two tracks. */
  .form__row {
    display: grid;
    gap: var(--space-s) var(--gutter);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__field {
    display: grid;
    gap: var(--space-2xs);
  }

  /* `UI/Control`, the hint `Label` in the muted tone. */
  .form__field label {
    color: var(--fg);
    font-size: var(--t-ui);
    font-weight: var(--weight-strong);
    line-height: var(--lh-ui);
  }

  .form__hint {
    margin-inline-start: var(--space-2xs);
    color: var(--fg-mute);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    line-height: var(--lh-label);
  }

  .form__field :is(input, textarea, select) {
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0 var(--space-xs);
    border: 2px solid var(--form-line);
    border-radius: var(--radius-control);
    color: var(--form-text);
    background: var(--card-bg);
    font-size: var(--t-body-small);
    line-height: var(--lh-body-small);
  }

  .form__field textarea {
    block-size: 8rem;
    min-block-size: 8rem;
    padding-block: var(--space-xs);
    resize: vertical;
  }

  /* The select keeps the underline of the inputs and the font of the page;
     the native arrow stays, it is the one affordance the field has. */
  .form__field select {
    font: inherit;
    border-radius: 0;
  }

  .form__field :is(input, textarea, select):focus-visible {
    border-color: var(--fg);
    outline: 3px solid var(--focus);
    outline-offset: 1px;
  }

  .form__field :is(input, textarea, select)[aria-invalid="true"] {
    border-color: var(--form-error);
  }

  /* Off-screen instead of display:none — some bots skip what is not rendered. */
  .form__trap {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .form__privacy {
    max-inline-size: 28rem;
    margin: 0;
    color: var(--form-note);
    font-size: var(--t-meta);
    line-height: var(--lh-meta);
  }

  .form__privacy a {
    color: var(--fg);
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }

  .form__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
  }

  .form-error {
    margin: 0;
    color: var(--form-error);
    font-size: var(--t-meta);
    line-height: var(--lh-ui);
  }

  .form-error--summary {
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid currentcolor;
  }

  /* The success message replaces the whole form, so it carries its colour
     itself instead of reading the --form-* set. */
  .form-success {
    margin: 0;
    padding: var(--space-s);
    border: 1px solid currentcolor;
    color: var(--ok);
  }

  /* --- components: home -------------------------------------------------
     hero, team, contact, plus the work grid the case index shares.

     The section rhythm and the hero's room for the fixed nav live here;
     the home composition (home.css) builds on these for team and contact. */

  /* The rhythm of the home page, as built. Tier and surface are classes on
     the <section> (the block snippets set them); what stands here is only
     what a class cannot say.

       Hero      L  paper  inset
       Logos     S  paper  inset, hairline top and bottom
       Services  M  paper  inset
       Belege    M  panel  full bleed
       Haltung   L  paper  inset
       Team      S  paper  inset, hairline on top
       Kontakt   L  panel  full bleed */


  /* Hero (Figma Section/Home/Hero) -------------------------------------- */

  /* The bar is fixed over the page, so the first section reserves its room
     on top of the padding the section takes anyway: --space-xl at 1440,
     --space-l below 64rem. */
  .hero {
    padding-block: calc(var(--nav-h) + var(--space-l)) var(--space-l);
  }

  @container page (inline-size >= 64rem) {
    .hero {
      padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-xl);
    }
  }

  /* Head, body and picture are three children of one raster, so each band
     can place them on its own: stacked below 48rem, head over a row of copy
     and picture at 768, copy beside the picture from 64rem on. */
  .hero-grid {
    row-gap: var(--space-m);
    align-items: center;
  }

  .hero-head .eyebrow {
    margin-block-end: var(--space-s);
  }

  /* The lead line and the carrying line run as one sentence; the carrying
     line takes the highlight, and only when there is a lead to set it off. */
  .hero .l1 + .l2 {
    padding-inline: 0.08em;
    margin-inline: -0.08em;
    background: linear-gradient(var(--mark-bg), var(--mark-bg)) 0 60% / 100% 0.92em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hero-body {
    display: grid;
    grid-template-columns: subgrid;
    row-gap: var(--space-m);
  }

  .hero-body > * {
    grid-column: 1 / -1;
  }

  .hero-intro {
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .hero-intro p {
    margin: 0;
  }

  .hero-actions {
    margin: 0;
  }

  /* 4:5, fixed, so the placeholder and the photograph take the same room. */
  .hero-media {
    --col-s: 1 / span 3;
    --col-m: 6 / span 3;
    --col: 8 / span 5;
    aspect-ratio: 4 / 5;
    background: var(--placeholder);
    overflow: hidden;
  }

  .hero-media picture,
  .hero-media img {
    inline-size: 100%;
    block-size: 100%;
    display: block;
    object-fit: cover;
  }

  @container page (inline-size >= 48rem) {
    .hero-body {
      --col-m: 1 / span 4;
      grid-row: 2;
    }

    .hero-media {
      grid-row: 2;
    }
  }

  /* Copy and picture side by side, the copy centred on the picture: the
     two outer rows take the slack. */
  @container page (inline-size >= 64rem) {
    .hero-grid {
      grid-template-rows: 1fr auto auto 1fr;
    }

    .hero-head {
      --col: 1 / span 7;
      grid-row: 2;
    }

    .hero-body {
      --col: 1 / span 7;
      grid-row: 3;
    }

    .hero-intro {
      grid-column: 1 / span 5;
    }

    .hero-media {
      grid-row: 1 / -1;
    }
  }

  /* Case card (snippets/work-card.php) --------------------------------- */

  /* The shared base of the card: the tile of the home page and the row of the
     index. One link, on the title, whose overlay makes the whole card the
     target; a picture in a 16:10 mount. */
  .wcard {
    position: relative;
  }

  .wcard-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--placeholder);
    overflow: hidden;
  }

  .wcard-media picture {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  .wcard-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .wcard-body {
    display: flex;
    flex-direction: column;
  }

  .wcard-title {
    font-family: var(--font-display);
  }

  .wcard-link {
    color: inherit;
    text-decoration: none;
  }

  .wcard-link::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    content: "";
  }

  .wcard:has(.wcard-link:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .wcard-link:focus-visible {
    outline: none;
  }

  /* The customer over the title: `Label`. */
  .wcard-tag {
    font-size: var(--t-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-label);
    line-height: var(--lh-label);
  }

  .wcard-more {
    font-weight: var(--weight-strong);
    text-decoration: underline;
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
  }

  /* Team ----------------------------------------------------------------- */

  /* Figma Section/Home/Team, Team Member. */
  .team {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .team-head {
    row-gap: var(--space-s);
  }

  .team-lead {
    --col-m: 1 / span 5;
    --col: 1 / span 5;
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .team-lead p {
    margin: 0;
  }

  .team-list {
    margin: var(--space-l) 0 0;
    padding: 0;
    row-gap: var(--space-l);
    list-style: none;
  }

  /* Portrait and name in one row, the text under both; from 64rem the
     portrait stands beside name and text. */
  .person {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs) var(--space-s);
  }

  .person-portrait {
    position: relative;
    aspect-ratio: 1;
    background: var(--card-bg);
    overflow: hidden;
  }

  .person-portrait img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: grayscale(1);
  }

  .person-portrait::after {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--portrait-tone);
    mix-blend-mode: lighten;
  }

  .person-identity {
    display: grid;
    gap: var(--space-2xs);
  }

  .person-name {
    font-size: var(--t-title);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-title);
    line-height: var(--lh-title);
  }

  .person-role {
    font-size: var(--t-ui);
    font-weight: var(--weight-strong);
    line-height: var(--lh-ui);
  }

  .person-text {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-2xs);
  }

  .person-focus {
    font-size: var(--t-body-small);
    line-height: var(--lh-body-small);
  }

  .person-evidence {
    color: var(--fg-mute);
    font-size: var(--t-meta);
    line-height: var(--lh-meta);
  }

  @container page (inline-size >= 48rem) {
    .team {
      padding-block: var(--space-xl);
    }

    .team-list > .person {
      --col-m: span 4;
    }

    .person {
      grid-template-columns: 5.5rem minmax(0, 1fr);
    }
  }

  @container page (inline-size >= 64rem) {
    .team-list > .person {
      --col: span 6;
    }

    .person {
      grid-template-columns: 12.5rem minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      align-items: start;
      row-gap: var(--space-xs);
    }

    .person-portrait {
      grid-row: 1 / span 2;
    }

    .person-text {
      grid-column: 2;
    }
  }

  /* Contact (Figma Section/Home/Contact, Contact Person) ---------------- */

  .contact {
    padding-block: var(--space-xl);
  }

  .contact-grid {
    row-gap: var(--space-l);
    align-items: start;
  }

  .contact-head .eyebrow {
    margin-block-end: var(--space-s);
  }

  .contact-intro {
    margin-block-start: var(--space-s);
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .contact-intro p {
    margin: 0;
  }

  .contact-head .contact-person {
    margin-block-start: var(--space-l);
  }

  /* The person: portrait and text in a row. Home 160 / 112 / 88px. */
  .contact-person {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .contact-person .person-portrait {
    flex: none;
    inline-size: 5.5rem;
  }

  .contact-person__text {
    display: grid;
    gap: var(--space-2xs);
  }

  .contact-person .eyebrow {
    margin: 0;
  }

  .contact-person__name,
  .contact-person__title {
    font-family: var(--font-display);
    font-size: var(--t-title);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-title);
    line-height: var(--lh-title);
  }

  .contact-person__role {
    font-size: var(--t-ui);
    font-weight: var(--weight-strong);
    line-height: var(--lh-ui);
  }

  /* Form: the small portrait, 4:5, sitting on the baseline of the text. */
  .contact-person--form {
    align-items: end;
  }

  .contact-person--form .person-portrait {
    inline-size: 5rem;
    aspect-ratio: 4 / 5;
  }

  @container page (inline-size < 48rem) {
    .form__row {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @container page (inline-size >= 48rem) {
    .contact-person--home .person-portrait {
      inline-size: 7rem;
    }
  }

  @container page (inline-size >= 64rem) {
    .contact-head {
      --col: 1 / span 5;
    }

    .contact-form {
      --col: 7 / span 6;
    }

    .contact-person--home .person-portrait {
      inline-size: 10rem;
    }

    .contact-person--form .person-portrait {
      inline-size: 4.4444rem;
    }
  }

  /* Logos (Figma Section/Home/Logos) ------------------------------------ */

  /* A quiet band under the hero: --space-m above and below, no rule. */
  .logos {
    padding-block: var(--space-m);
  }

  .logos .eyebrow {
    margin-block-end: var(--space-s);
    color: var(--fg-mute);
  }

  /* One row across the page from 48rem, the marks spread edge to edge; two
     rows of three below it. */
  .logos-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: var(--space-m) var(--gutter);
    list-style: none;
  }

  /* --logo-area is the height of a square mark; --logo-scale (1 / √ratio)
     comes from the file (snippets/blocks/homeLogos.php). A mark wider than
     its cell shrinks with its proportions intact. */
  .logos-list img {
    --logo-area: clamp(2.75rem, 2.5081rem + 1.0329vi, 3.4375rem);
    inline-size: auto;
    block-size: calc(var(--logo-area) * var(--logo-scale, 0.5));
    max-inline-size: 100%;
    object-fit: contain;
    /* Figma sets the marks in black; the files carry client colours, so the
       row reads as one mark in grey rather than as a rainbow. */
    filter: grayscale(1);
  }

  @container page (inline-size >= 48rem) {
    .logos-list {
      display: flex;
      justify-content: space-between;
    }
  }

  /* Services (Figma Section/Home/Services, Service Row) ------------------ */

  .services {
    padding-block: var(--space-xl);
  }

  /* Head and button in columns 1-5, the list in 6-12 from 64rem; the list
     spans both rows, so the button hangs under the head. Below 64rem the
     three run in DOM order: head, list, button. */
  .services-grid {
    row-gap: var(--space-l);
  }

  .services-head {
    display: grid;
    grid-template-columns: subgrid;
  }

  .services-head > * {
    grid-column: 1 / -1;
  }

  .services-lead {
    margin-block-start: var(--space-s);
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .services-lead p {
    margin: 0;
  }

  .services-cta {
    margin: 0;
  }

  /* The rows bleed --space-s into the margin, so the figure stands on the
     column edge and the row's own padding keeps the text on the raster. */
  .services-list {
    margin: 0 0 0 calc(-1 * var(--space-s));
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
    list-style: none;
  }

  .service {
    padding: var(--space-m) 0 calc(var(--space-m) + var(--space-xs)) var(--space-s);
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: var(--space-s);
  }

  /* Figma `Numeral/Upright`. */
  .service-num {
    padding-block-start: var(--space-xs);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: var(--weight-display);
    letter-spacing: var(--track-numeral);
    line-height: var(--lh-numeral);
  }

  .service-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-s);
  }

  .service-title {
    font-size: var(--t-h2);
    letter-spacing: var(--track-h2);
    line-height: var(--lh-h2);
  }

  /* Title and benefit are one group, one --space-xs apart. */
  /* Figma sets the benefit at a fixed measure (449px at 1440). */
  .service-benefit {
    max-inline-size: 19.5em;
    margin-block-start: calc(var(--space-xs) - var(--space-s));
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .chips {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    list-style: none;
  }

  /* Service Row, Layout=Stacked: the figure above the title. */
  @container page (inline-size < 48rem) {
    .service {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-2xs);
    }

    .service-num {
      padding-block-start: 0;
    }
  }

  @container page (inline-size >= 48rem) {
    .services-lead {
      grid-column: 1 / span 4;
    }
  }

  @container page (inline-size >= 64rem) {
    .services-grid {
      grid-template-rows: auto 1fr;
      row-gap: var(--space-l);
    }

    .services-head {
      --col: 1 / span 5;
      grid-row: 1;
    }

    .services-list {
      --col: 6 / span 7;
      grid-row: 1 / span 2;
    }

    .services-cta {
      --col: 1 / span 5;
      grid-row: 2;
      align-self: start;
    }
  }

  /* Proof (Figma Section/Home/Proof, Case Card Tile/Compact) ------------- */

  /* A purple stage with the notch. The head holds still beside the cards
     from 64rem on, while the two columns of tiles pass it. */
  .proof {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .proof-grid {
    row-gap: var(--space-l);
    align-items: start;
  }

  .proof-head .eyebrow {
    margin-block-end: var(--space-xs);
  }

  .proof-lead {
    margin-block-start: var(--space-s);
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .proof-cards {
    display: grid;
    gap: var(--space-m);
  }

  /* Below 48rem the two columns dissolve into one list; the inline `order`
     of each item restores the order of the Panel. */
  .proof-col {
    display: contents;
  }

  .proof-item {
    display: grid;
  }

  /* The tile: a white plane, the picture in a passe-partout, the copy under
     it. The picture is never cropped: the mount is 16:10 and the picture
     fits into it. */
  .wcard--tile {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
  }

  .wcard--tile .wcard-media {
    margin: var(--space-2xs);
    background: var(--card-bg);
  }

  .wcard--tile .wcard-media img {
    object-fit: contain;
    object-position: center;
  }

  .wcard--tile .wcard-body {
    min-block-size: 0;
    padding: var(--space-xs) var(--space-s) 0;
    gap: var(--space-xs);
  }

  .wcard--tile .wcard-tag {
    order: 0;
    color: var(--fg);
    font-size: var(--t-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-label);
    line-height: var(--lh-label);
  }

  .wcard--tile .wcard-title {
    margin: 0;
    font-size: var(--t-h3);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-h3);
    line-height: var(--lh-h3);
  }

  .wcard--tile .wcard-body p:not(.wcard-tag) {
    color: var(--fg);
    font-size: var(--t-body);
    line-height: var(--lh-body);
  }

  /* Looks like the standalone link; the title carries the real one. */
  .wcard--tile .wcard-more {
    margin: 0;
    padding: var(--space-xs) var(--space-s) var(--space-s);
    border: 0;
    align-self: start;
    font-size: var(--t-body);
    font-weight: var(--weight-strong);
    line-height: var(--lh-body);
    text-decoration: underline;
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
  }

  /* Below 48rem, Case Card Compact: a 6rem thumbnail beside customer and
     title, the copy and the link below. The body gives up its box so its
     parts can take the rows of the card. */
  @container page (inline-size < 48rem) {
    .wcard--tile {
      padding: var(--space-s);
      display: grid;
      grid-template-columns: 6rem minmax(0, 1fr);
      column-gap: var(--space-s);
      row-gap: var(--space-2xs);
    }

    .wcard--tile .wcard-media {
      grid-row: 1 / span 2;
      margin: 0;
      aspect-ratio: 7 / 5;
    }

    .wcard--tile .wcard-body {
      display: contents;
    }

    .wcard--tile .wcard-tag {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
    }

    .wcard--tile .wcard-title {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
    }

    .wcard--tile .wcard-body p:not(.wcard-tag),
    .wcard--tile .wcard-more {
      grid-column: 1 / -1;
      padding: 0;
    }

    .wcard--tile .wcard-body p:not(.wcard-tag) {
      margin-block-start: var(--space-xs);
    }
  }

  @container page (inline-size >= 48rem) {
    .proof {
      padding-block: var(--space-xl);
    }

    .proof-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--gutter);
    }

    .proof-col {
      display: grid;
      align-content: start;
      gap: var(--space-s);
    }

    /* The right column sits one --space-l lower. */
    .proof-col + .proof-col {
      padding-block-start: var(--space-l);
    }

    .wcard--tile .wcard-media {
      margin: var(--space-s);
      margin-block-end: 0;
    }

    .wcard--tile .wcard-title {
      font-size: var(--t-title);
      letter-spacing: var(--track-title);
      line-height: var(--lh-title);
    }

    .wcard--tile .wcard-body p:not(.wcard-tag) {
      font-size: var(--t-body-small);
      line-height: var(--lh-body-small);
    }
  }

  @container page (inline-size >= 64rem) {
    .proof-head {
      --col: 1 / span 5;
      position: sticky;
      inset-block-start: calc(var(--nav-h) + var(--space-l));
    }

    .proof-cards {
      --col: 6 / span 7;
    }

    .wcard--tile .wcard-media {
      margin: var(--space-xs);
      margin-block-end: 0;
    }
  }

  /* Stance (Figma Section/Home/Stance, Manifest Item Tone=Dark) --------- */

  /* The aubergine stage with the notch. The heading runs the full width,
     the lead and the principles share the row below it. */
  .stance {
    padding-block: var(--space-xl);
  }

  .stance-grid {
    row-gap: var(--space-l);
    align-items: start;
  }

  .stance-head .eyebrow {
    margin-block-end: var(--space-s);
    color: var(--accent-ink);
  }

  .stance-text {
    color: var(--fg-mute);
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .stance-text p {
    margin: 0;
  }

  .stance-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-s);
    counter-reset: stance;
    list-style: none;
  }

  /* Figure and sentence share one baseline. */
  .stance-list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-m);
    counter-increment: stance;
    font-family: var(--font-display);
    font-size: var(--t-title);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-title);
    line-height: var(--lh-title);
  }

  /* Figma `Numeral/Italic S`. */
  .stance-list li::before {
    content: counter(stance);
    flex: none;
    min-inline-size: 1ch;
    color: var(--accent-ink);
    font-style: italic;
    font-weight: var(--weight-display);
    line-height: var(--lh-numeral-small);
  }

  @container page (inline-size >= 48rem) {
    .stance-text {
      --col-m: 1 / span 5;
    }
  }

  @container page (inline-size >= 64rem) {
    .stance-text {
      --col: 1 / span 4;
    }

    .stance-list {
      --col: 6 / span 7;
      gap: var(--space-xs);
    }
  }

  /* --- components: case -------------------------------------------------
     overview, toc, chapter, media, insight, transform, metrics, spectrum,
     close, next.

     One reading for every study. The overview, the chapters and the sections
     below all stand on the same eight columns; what distinguishes one study
     from another is its pictures and its text, never an editorial mode. */

  /* Overview (Figma Section/Case/Overview, Fact) ------------------------ */

  .chero {
    padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-l);
  }

  .chero-grid {
    row-gap: var(--space-m);
    align-items: start;
  }

  .chero-title .eyebrow {
    margin-block-end: var(--space-s);
  }

  .chero-cover picture,
  .chero-cover img {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }

  .chero-info {
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
  }

  .chero-info > * {
    grid-column: 1 / -1;
  }

  .chero-lead {
    font-size: var(--t-body);
    line-height: var(--lh-body);
  }

  .facts {
    margin: var(--space-l) 0 0;
    display: grid;
    gap: var(--space-s);
  }

  .fact {
    display: grid;
    gap: var(--space-2xs);
  }

  .fact dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-title);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-title);
    line-height: var(--lh-title);
  }

  /* `Meta/Heading` and `Label`, both in the muted tone. */
  .fact dt {
    color: var(--fg-mute);
    font-size: var(--t-meta-heading);
    font-weight: var(--weight-strong);
    line-height: var(--lh-label);
  }

  .chero-services {
    margin-block-start: var(--space-m);
  }

  .chero-label {
    margin-block-end: var(--space-xs);
    color: var(--fg-mute);
    font-size: var(--t-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-label);
    line-height: var(--lh-label);
  }

  .phases {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    list-style: none;
  }

  @container page (inline-size >= 48rem) {
    .chero-cover {
      --col-m: 2 / span 7;
    }

    .chero-lead {
      grid-column: 1 / span 5;
    }
  }

  /* Three facts in a row between 48 and 64rem. */
  @container page (48rem <= inline-size < 64rem) {
    .facts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container page (inline-size >= 64rem) {
    .chero-title {
      --col: 1 / span 10;
    }

    .chero-cover {
      --col: 7 / span 6;
      grid-row: 2;
    }

    .chero-info {
      --col: 1 / span 5;
      grid-row: 2;
    }
  }

  /* Chapter navigation (Figma Section/Case/TOC) --------------------------
     A white band that sticks under the bar: „Kapitel" in the first column,
     the links from the second. Below 48rem the label goes and the links
     wrap; nothing scrolls sideways. */
  .toc-holder {
    position: sticky;
    z-index: 5;
    inset-block-start: var(--nav-h);
    border-block-end: 1px solid var(--rule);
    background: var(--bg);
  }

  .toc {
    padding-block: var(--space-s);
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
  }

  .toc-title {
    display: none;
    color: var(--fg-mute);
    font-size: var(--t-meta-heading);
    font-weight: var(--weight-strong);
    line-height: var(--lh-label);
  }

  .toc-list {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-s);
    list-style: none;
  }

  /* `UI/Control`; the chapter in view takes the underline of the links. */
  .toc-list a {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--fg);
    font-size: var(--t-ui);
    font-weight: var(--weight-strong);
    line-height: var(--lh-ui);
    text-decoration: none;
  }

  .toc-list a:is(:hover, [aria-current]) {
    text-decoration: underline;
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }

  @container page (inline-size >= 48rem) {
    .toc {
      padding-block: var(--space-xs);
    }

    .toc-title {
      display: block;
      grid-column: 1;
    }

    .toc-list {
      grid-column: 2 / -1;
    }
  }

  /* Chapters (Figma Section/Case/Chapter *) ------------------------------ */

  /* The head of a case section on the raster: eyebrow, then the heading one
     --space-xs below, the content one --space-m below that. A block names
     the columns of its parts; without that they run the full width. */
  .chapter {
    row-gap: var(--space-m);
  }

  .chapter-head {
    display: grid;
    align-content: start;
  }

  .chapter-head > .eyebrow {
    margin-block-end: var(--space-xs);
  }

  .prose {
    max-inline-size: var(--measure);
    display: grid;
    gap: var(--space-s);
  }

  .prose p {
    line-height: var(--lh-body);
  }

  /* The lesson opens with its point: the first paragraph set as `Quote`. */
  .chapter--lesson {
    row-gap: var(--space-l);
  }

  .chapter--lesson .prose {
    gap: var(--space-m);
  }

  .chapter--lesson .prose > p:first-child {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-h3);
    line-height: var(--lh-quote);
  }

  @container page (inline-size >= 48rem) {
    .chapter-head {
      --col-m: 1 / -1;
    }

    .chapter > .prose {
      --col-m: 1 / span 7;
    }
  }

  @container page (inline-size >= 64rem) {
    .chapter-head {
      --col: 1 / span 8;
    }

    /* Figma: Ausgangslage and Vorgehen, head 3-9, text 3-8. */
    .chapter--indent > .chapter-head {
      --col: 3 / span 7;
    }

    .chapter--indent > .prose {
      --col: 3 / span 6;
    }

    /* Figma: Umsetzung, head 1-8, text 1-6. */
    .chapter--flush > .prose {
      --col: 1 / span 6;
    }

    /* Figma: Lektion, head 1-9, quote and text from column 3. */
    .chapter--lesson > .chapter-head {
      --col: 1 / span 9;
    }

    .chapter--lesson > .prose {
      --col: 3 / span 7;
    }

    .chapter--lesson .prose > p:first-child {
      max-inline-size: calc(6 / 7 * 100%);
    }
  }

  /* Media (Figma Section/Case/Gallery, Chapter Approach, Figure) -------- */

  /* „Abb. n": `Caption/Number`, Fraunces italic. */
  .fig-num {
    font-family: var(--font-display);
    font-size: var(--t-body-small);
    font-style: italic;
    font-weight: var(--weight-caption);
    line-height: var(--lh-body-small);
  }

  .zoom {
    display: block;
    cursor: zoom-in;
  }

  .zoom:focus-visible {
    outline-offset: -3px;
  }

  /* Gallery: justified rows. Every picture grows with its own proportion
     (--ar) from a row height, so the pictures of a row stand equally tall
     and none is cropped. The spacer keeps a lone last picture from growing
     across the row. */
  .media-sec .gallery {
    --row-h: 11rem;
    margin-block-start: var(--space-l);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-xs);
  }

  .gallery::after {
    flex-grow: 999;
    content: "";
  }

  .gallery-item {
    flex: var(--ar) 1 calc(var(--ar) * var(--row-h));
    display: grid;
    gap: var(--space-2xs);
  }

  .gallery-item :is(picture, img),
  .single :is(picture, img),
  .margin-fig :is(picture, img) {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }

  .gallery-item img {
    aspect-ratio: var(--ar);
    background: var(--placeholder);
  }

  .gallery-legend {
    margin: var(--space-m) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-xs);
    color: var(--fg-mute);
    font-size: var(--t-meta);
    line-height: var(--lh-meta);
    list-style: none;
  }

  .gallery-legend .fig-num {
    color: var(--fg);
  }

  .gallery-hint {
    color: var(--fg);
    font-size: var(--t-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-label);
    line-height: var(--lh-label);
  }

  /* One picture in its own proportion, never higher than the screen. */
  .single {
    margin-block-start: var(--space-l);
    display: grid;
    gap: var(--space-2xs);
    justify-items: start;
  }

  .single img {
    inline-size: auto;
    max-inline-size: 100%;
    max-block-size: min(70svh, 44rem);
  }

  .single figcaption,
  .margin-fig figcaption {
    max-inline-size: 36rem;
    color: var(--fg-mute);
    font-size: var(--t-meta);
    line-height: var(--lh-meta);
  }

  .single--object {
    padding: var(--space-l);
    justify-items: center;
    background: var(--placeholder);
  }

  .single--object img {
    object-fit: contain;
  }

  /* Small pictures at the margin: at most 22rem wide each. */
  .margin-figs {
    margin-block-start: var(--space-l);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  .margin-fig {
    flex: 0 1 min(22rem, 66%);
    display: grid;
    gap: var(--space-2xs);
  }

  /* Backdrop: the picture as a light plane under the head, from the first
     column to the right edge of the window at 64rem, the full width below.
     The plane reads the focus point of the file for its crop. */
  .has-backdrop {
    padding-block-start: var(--space-m);
  }

  .backdrop {
    position: relative;
  }

  .backdrop-image {
    position: absolute;
    inset: 0;
    background: var(--placeholder);
    overflow: hidden;
  }

  .backdrop-image :is(picture, img) {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  .backdrop-image img {
    object-fit: cover;
    object-position: var(--focus, 50% 100%);
    opacity: 0.5;
    mix-blend-mode: multiply;
  }

  .backdrop-stage {
    position: relative;
    padding-block: var(--space-l);
  }

  .backdrop-stage .chapter-head {
    padding-inline-start: var(--space-s);
  }

  .backdrop-cap p {
    margin-block-start: var(--space-xs);
    max-inline-size: 36rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-xs);
  }

  .backdrop-caption {
    flex-basis: 100%;
    color: var(--fg-mute);
    font-size: var(--t-meta);
    line-height: var(--lh-meta);
  }

  .zoom-link {
    font-size: var(--t-meta);
    font-weight: var(--weight-strong);
    line-height: var(--lh-label);
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
  }

  .has-backdrop .chapter {
    margin-block-start: var(--space-l);
  }

  @container page (inline-size >= 48rem) {
    .media-sec .gallery {
      --row-h: 13rem;
      column-gap: var(--space-xs);
    }

    .backdrop-stage .chapter-head {
      padding-inline-start: var(--stage-inset);
    }
  }

  @container page (inline-size >= 64rem) {
    .media-sec .gallery,
    .gallery-legend {
      max-inline-size: calc(10 / 12 * 100% + var(--gutter) / 6);
    }

    .media-sec .gallery {
      --row-h: 15rem;
    }

    .gallery-legend {
      display: block;
      columns: 2;
      column-gap: calc(100% / 10 + var(--gutter));
    }

    .gallery-legend li {
      margin-block-end: var(--space-xs);
      break-inside: avoid;
    }

    .media-sec--gallery .chapter-head {
      --col: 1 / span 9;
    }

    .single--inline,
    .margin-figs {
      margin-inline-start: calc(2 * (100% - 11 * var(--gutter)) / 12 + 2 * var(--gutter));
    }

    .backdrop-image {
      inset-inline-start: max(var(--page-margin), (100% - var(--page)) / 2);
    }

    .backdrop-stage {
      padding-block: var(--space-xl);
    }

    .backdrop-stage .chapter-head {
      --col: 3 / span 8;
      padding-inline-start: 0;
    }

    .backdrop-cap p {
      grid-column: 3 / span 8;
    }
  }

  /* The lightbox of case-study.js: the picture on the dark ground, the
     controls in the corners. No transition. */
  .lightbox {
    inline-size: 100vw;
    max-inline-size: 100vw;
    block-size: 100svh;
    max-block-size: 100svh;
    margin: 0;
    padding: var(--space-l) var(--page-margin);
    border: 0;
    color: var(--color-white);
    background: rgb(29 28 29 / 0.94);
  }

  .lightbox::backdrop {
    background: rgb(29 28 29 / 0.6);
  }

  .lightbox[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-s);
  }

  .lightbox-bar {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
  }

  .lightbox-bar button {
    min-block-size: 2.75rem;
    padding: 0 var(--space-xs);
    border: 1px solid rgb(255 255 255 / 0.4);
    color: inherit;
    background: none;
    font-size: var(--t-ui);
    font-weight: var(--weight-strong);
    cursor: pointer;
  }

  .lightbox img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  /* Insights (Figma Section/Case/Insights, Insight) --------------------- */

  .insights {
    margin: var(--space-l) 0 0;
    padding: 0;
    row-gap: var(--space-l);
    counter-reset: insight;
    list-style: none;
  }

  .insight {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-m);
    counter-increment: insight;
  }

  /* `Numeral/Italic L`: the figure stands on the first line of the title. */
  .insight::before {
    grid-row: 1 / span 2;
    content: counter(insight);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-style: italic;
    font-weight: var(--weight-display);
    letter-spacing: var(--track-numeral);
    line-height: var(--lh-numeral-large);
  }

  .insight-title {
    margin-block-end: var(--space-2xs);
    font-size: var(--t-title);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-title);
    line-height: var(--lh-title);
  }

  .insight p {
    max-inline-size: var(--measure);
    line-height: var(--lh-body);
  }

  /* From 64rem the figure hangs in column 2, right aligned, the text starts
     on column 3 — the column of the head above it. */
  @container page (inline-size >= 64rem) {
    .insights-sec .chapter-head {
      --col: 3 / span 8;
    }

    .insight {
      --col: 2 / span 7;
      grid-template-columns: subgrid;
      column-gap: var(--gutter);
    }

    .insight::before {
      grid-column: 1;
      justify-self: end;
    }

    .insight > * {
      grid-column: 2 / -1;
    }
  }

  /* Transformation (Figma Section/Case/Transformation) ------------------- */

  .transform-sec .chapter-head .h-sec {
    font-size: var(--t-h1);
    letter-spacing: var(--track-h1);
    line-height: var(--lh-h1);
  }

  .transform {
    margin-block-start: var(--space-l);
  }

  .transform-side--before {
    padding-block: var(--space-s) var(--space-m);
  }

  .transform-label {
    margin-block-end: var(--space-xs);
    font-size: var(--t-label);
    font-weight: var(--weight-strong);
    letter-spacing: var(--track-label);
    line-height: var(--lh-label);
  }

  /* „Vorher" in `Title`, muted; „Nachher" in `Quote` on the orange box. */
  .transform-side--before .transform-text {
    max-inline-size: 19em;
    color: var(--fg-mute);
    font-family: var(--font-display);
    font-size: var(--t-title);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-title);
    line-height: var(--lh-title);
  }

  .transform-side--after {
    padding: var(--space-l) var(--space-m) var(--space-l) var(--stage-inset);
  }

  .transform-side--after .transform-text {
    max-inline-size: 16em;
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-h3);
    line-height: var(--lh-quote);
  }

  @container page (inline-size >= 48rem) {
    .transform-side--after {
      --col-m: 2 / -1;
    }
  }

  @container page (inline-size >= 64rem) {
    .transform-sec .chapter-head {
      --col: 1 / -1;
    }

    .transform-side--before {
      --col: 1 / span 6;
    }

    .transform-side--after {
      --col: 4 / -1;
      padding: var(--space-xl) var(--space-l) var(--space-xl) var(--stage-inset);
    }
  }

  /* Result (Figma Section/Case/Metrics, Key Figure) --------------------- */

  .metrics {
    margin: var(--space-l) 0 0;
    padding: 0;
    row-gap: var(--space-l);
    list-style: none;
  }

  .metric {
    --col-s: span 2;
    display: grid;
    align-content: start;
    gap: var(--space-xs);
  }

  .metric-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2xs);
    color: var(--data);
  }

  /* `Figure/Value`. */
  .metric-value b {
    font-family: var(--font-display);
    font-size: var(--t-display);
    font-weight: var(--weight-display);
    letter-spacing: var(--track-display);
    line-height: var(--lh-figure);
  }

  /* `Figure/Unit`. */
  .metric-unit {
    font-size: var(--t-figure-unit);
    font-weight: var(--weight-strong);
    line-height: var(--lh-label);
  }

  /* `Figure/Label`. */
  .metric-label {
    font-size: var(--t-figure-label);
    line-height: var(--lh-body);
  }

  .metrics-note {
    max-inline-size: var(--measure);
    margin-block-start: var(--space-l);
  }

  @container page (inline-size >= 48rem) {
    .metric {
      --col-m: span 4;
    }
  }

  @container page (inline-size >= 64rem) {
    .metric {
      --col: span 3;
    }

    .metric-value {
      column-gap: var(--space-xs);
    }
  }

  /* Services of the study (Figma Section/Case/Entrypoints, Spec Row,
     Radar) ------------------------------------------------------------ */

  /* Head and lead are one group: --space-s between them, not --space-m. */
  :is(.spectrum-sec, .close) .chapter {
    row-gap: var(--space-s);
  }

  .spectrum-lead {
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .spectrum {
    margin-block-start: var(--space-l);
    row-gap: var(--space-l);
    align-items: start;
  }

  .spec-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
    list-style: none;
  }

  .spec-row {
    padding-block: var(--space-s);
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: var(--space-s);
  }

  .spec-num {
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-size: var(--t-title);
    font-weight: var(--weight-title);
    line-height: var(--lh-title);
  }

  .spec-body {
    display: grid;
    gap: var(--space-2xs);
  }

  .spec-title {
    font-size: var(--t-title);
    letter-spacing: var(--track-title);
    line-height: var(--lh-title);
  }

  .spec-title a {
    text-decoration: underline;
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }

  .spec-body p {
    line-height: var(--lh-body);
  }

  .spectrum-more {
    margin: 0;
  }

  /* The radar: the chart in the middle cell of a 3 × 3 grid, the four axis
     labels around it (`Chart/Axis`). */
  .radar {
    max-inline-size: 23rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) minmax(0, 1fr);
    grid-template-areas:
      ". top ."
      "left chart right"
      ". bottom .";
    align-items: center;
    gap: var(--space-2xs);
  }

  .radar-chart {
    grid-area: chart;
    inline-size: 100%;
    block-size: auto;
  }

  .radar-axis {
    font-size: var(--t-meta);
    font-weight: var(--weight-strong);
    line-height: var(--lh-label);
    text-align: center;
  }

  .radar-axis--top { grid-area: top; }
  .radar-axis--bottom { grid-area: bottom; hyphens: manual; }
  .radar-axis--left { grid-area: left; text-align: end; }
  .radar-axis--right { grid-area: right; text-align: start; }

  .radar-band {
    fill: var(--chart-band);
  }

  .radar-gap {
    fill: var(--bg);
  }

  .radar-shape {
    fill: var(--data);
  }

  @container page (inline-size >= 48rem) {
    .spec-body p {
      max-inline-size: calc(6 / 8 * 100%);
    }
  }

  @container page (inline-size >= 64rem) {
    .spectrum-sec .chapter-head {
      --col: 1 / span 7;
    }


    .spectrum {
      grid-template-rows: auto 1fr;
    }

    .spec-list,
    .spectrum-more {
      --col: 1 / span 5;
    }

    .spec-body p {
      max-inline-size: none;
    }

    .spectrum-radar {
      --col: 6 / span 4;
      grid-row: 1 / span 2;
      padding-block-start: var(--space-s);
    }
  }

  /* Next step (Figma Section/Case/Close, Contact Person Layout=Form) ----- */

  .close .chapter-head .h-sec {
    font-size: var(--t-h1);
    letter-spacing: var(--track-h1);
    line-height: var(--lh-h1);
  }

  .close-lead {
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  .close-form {
    margin-block-start: var(--space-l);
    display: grid;
    gap: var(--space-m);
  }

  .contact-person__title {
    font-size: var(--t-title);
  }

  @container page (inline-size >= 48rem) {
    :is(.spectrum-lead, .close-lead) {
      --col-m: 1 / span 5;
      --col: 1 / span 5;
    }
  }

  /* From 64rem head on 1-6, the form on 8-12, side by side. */
  @container page (inline-size >= 64rem) {
    .close > .wrap {
      display: grid;
      grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
      column-gap: var(--gutter);
      align-items: start;
    }

    .close > .wrap > .chapter {
      grid-column: 1 / span 6;
      grid-template-columns: subgrid;
    }

    .close .chapter-head {
      --col: 1 / -1;
    }

    .close-form {
      grid-column: 8 / -1;
      margin-block-start: 0;
    }
  }

  /* Next project: a purple stage with the notch, inside the content width. */
  .next-sec {
    padding-block-end: var(--space-xl);
  }

  .next {
    position: relative;
    padding: var(--space-xl) var(--space-m) var(--space-xl) var(--stage-inset);
  }

  .next .eyebrow {
    margin-block-end: var(--space-s);
  }

  .next-link {
    text-decoration: none;
  }

  .next-link::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  .next:has(.next-link:hover) .next-link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }

  /* Inside the box: the clip-path of the notch would cut an outer ring. */
  .next:has(.next-link:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: -6px;
  }

  .next-link:focus-visible {
    outline: none;
  }

  @container page (inline-size >= 64rem) {
    .next {
      padding: var(--space-2xl) var(--space-l) var(--space-xl) var(--stage-inset);
    }
  }

  /* --- components: index + legal ----------------------------------------
     page head, legal text, the index list. */

  /* Page head (Figma Section/Page/Head): eyebrow, H1, a lead on five
     columns. The bar is fixed over the page, so the head reserves its room. */
  .page-head {
    padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-l);
  }

  .page-head-grid {
    row-gap: var(--space-s);
  }

  .page-head-title .eyebrow {
    margin-block-end: var(--space-s);
  }

  .page-lead {
    --col-m: 1 / span 5;
    --col: 1 / span 5;
    font-size: var(--t-lead);
    font-weight: var(--weight-lead);
    line-height: var(--lh-lead);
  }

  /* Legal text (Figma Section/Legal/Body): subheads in `Heading/H3`, a
     group one --space-xs apart inside, --space-l between groups. */
  .legal-sec {
    padding-block-end: var(--space-xl);
  }

  .legal-body {
    --col-m: 1 / span 7;
    --col: 3 / span 6;
    display: grid;
    gap: var(--space-xs);
    max-inline-size: var(--measure);
  }

  .legal-body :is(h2, h3) {
    font-family: var(--font-display);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-h3);
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .legal-body h2 {
    font-size: var(--t-h3);
    line-height: var(--lh-h3);
  }

  .legal-body h3 {
    font-size: var(--t-title);
    line-height: var(--lh-title);
  }

  .legal-body > :is(h2, h3):not(:first-child) {
    margin-block-start: calc(var(--space-l) - var(--space-xs));
  }

  .legal-body :is(p, li) {
    line-height: var(--lh-body);
  }

  .legal-body :is(ul, ol) {
    margin: 0;
    padding-inline-start: 1.2em;
  }

  .legal-body a {
    text-decoration-color: var(--data);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
  }

  .page-cta {
    margin: 0;
  }

  /* Index (Figma Section/Index/List, Case Card Row/Row Reversed/Vertical):
     one row per study from 64rem, the picture on seven columns and the text
     on four, every second row mirrored; two cards side by side from 48rem;
     one column below. */
  .index-sec {
    padding-block-end: var(--space-xl);
  }

  .index-list {
    display: grid;
    gap: var(--space-l) var(--gutter);
  }

  .wcard--row {
    display: grid;
    align-content: start;
    gap: var(--space-s);
  }

  .wcard--row .wcard-body {
    gap: var(--space-xs);
  }

  .wcard--row .wcard-title {
    font-size: var(--t-title);
    font-weight: var(--weight-title);
    letter-spacing: var(--track-title);
    line-height: var(--lh-title);
  }

  .wcard--row .wcard-body p:not(.wcard-tag) {
    font-size: var(--t-body-small);
    line-height: var(--lh-body-small);
  }

  .wcard--row .phases {
    margin-block-start: var(--space-2xs);
  }

  .wcard--row .wcard-more {
    justify-self: start;
    font-size: var(--t-body);
    line-height: var(--lh-body);
  }

  @container page (inline-size >= 48rem) {
    .index-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container page (inline-size >= 64rem) {
    .index-list {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-xl);
    }

    .wcard--row {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: 1fr auto auto 1fr;
      column-gap: var(--gutter);
      row-gap: var(--space-s);
    }

    .wcard--row .wcard-media {
      grid-column: 1 / span 7;
      grid-row: 1 / -1;
    }

    .wcard--row :is(.wcard-body, .wcard-more) {
      grid-column: 9 / span 4;
    }

    .wcard--row .wcard-body {
      grid-row: 2;
    }

    .wcard--row .wcard-more {
      grid-row: 3;
    }

    .wcard--row:nth-child(even) .wcard-media {
      grid-column: 6 / span 7;
    }

    .wcard--row:nth-child(even) :is(.wcard-body, .wcard-more) {
      grid-column: 1 / span 4;
    }

    .wcard--row .wcard-title {
      font-size: var(--t-h3);
      letter-spacing: var(--track-h3);
      line-height: var(--lh-h3);
    }

    .wcard--row .wcard-body p:not(.wcard-tag) {
      font-size: var(--t-body);
      line-height: var(--lh-body);
    }
  }
}

@layer utilities {
  /* All motion of this site, declared under `no-preference` rather than
     switched off later, so the reduced-motion default is no motion at all. */
  @media (prefers-reduced-motion: no-preference) {
    .skip,
    .btn,
    .chip,
    .nav-links a,
    .footer a,
    .toc-list a,
    .next-link {
      transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
    }

    .wcard-media img {
      transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .wcard:has(.wcard-link:hover) .wcard-media img {
      transform: scale(1.018);
    }
  }
}