/* Page compositions and per-case media modules (REDESIGN-PLAN.md §6.5, §8).
   One marked block per page. A work package edits only its own block. */

@layer pages {
  /* ==== Home (WP13, REDESIGN-PLAN.md §9.2): fill inside this block only ==== */
  /* ==== end home ==== */
}

@layer pages {
  /* ==== C.S. Lewis (WP14, REDESIGN-PLAN.md §9.3): cover fan, tools board; fill inside this block only ==== */
  /* The tools board is the c-tools component itself (title, stat, two rows, result); this case
     adds only its media module, the cover fan, in .c-tools-media.

     Cover fan: the three publisher covers fanned out in front of an arch, the case's signature
     form (a doorway; the covers are portrait). The arch is placed by cluster-pair-b (top centre,
     behind), never by this block. The covers sit on a 7-column track, three columns each, so
     neighbours overlap by one column; the middle one stands a step higher and in front. The
     tilt is the `rotate` property, set once: transform stays free for motion. Each cover is a
     viewer link (C36); it comes to the front on hover and focus, so its ring is never under a
     neighbour. Without JS the link opens the file. */
  /* Room for the arch above the covers (padding), and for the part of it that rises above the
     fan's own box (the cluster sets it at -7% of the height), so it stays clear of the title. */
  .c-csl-fan { margin-block-start: var(--s6); padding-block-start: var(--s7); }
  .c-csl-fan-covers {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    padding-inline: var(--s4);
  }
  .c-csl-cover {
    position: relative;
    grid-row: 1;
    display: block;
    overflow: hidden;
    border-radius: var(--s1);
    background-color: var(--placeholder);
  }
  .c-csl-cover > img { inline-size: 100%; block-size: auto; aspect-ratio: 2 / 3; object-fit: cover; }
  .c-csl-cover:nth-child(1) { grid-column: 1 / span 3; rotate: -6deg; }
  .c-csl-cover:nth-child(2) { grid-column: 3 / span 3; z-index: 1; margin-block-end: var(--s6); }
  .c-csl-cover:nth-child(3) { grid-column: 5 / span 3; rotate: 6deg; }
  .c-csl-cover:focus-visible { z-index: 2; outline-offset: var(--focus-offset); }
  @media (hover: hover) {
    .c-csl-cover:hover { z-index: 2; }
  }
  /* The same lift as every image that opens in the viewer (components.css, linked frames):
     a step up on hover and focus, with motion allowed. */
  @media (prefers-reduced-motion: no-preference) {
    :root:not(.is-reduced-motion) .c-csl-cover { transition: translate var(--d-base) var(--ease-out); }
    :root:not(.is-reduced-motion) .c-csl-cover:is(:focus-visible, .is-hover) { translate: 0 calc(-1 * var(--s2)); }
  }
  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
    :root:not(.is-reduced-motion) .c-csl-cover:hover { translate: 0 calc(-1 * var(--s2)); }
  }
  /* ==== end C.S. Lewis ==== */
}

@layer pages {
  /* ==== Nobel (WP15, REDESIGN-PLAN.md §9.3): museum site, quote; fill inside this block only ==== */
  /* The museum site is the Museum's About page in a soft screen frame at its own ratio
     (1440 × 760, so nothing is cropped), on the start side of a flipped figure chapter. The frame
     is a linked frame, so it lifts like every image that opens in the viewer (components.css).
     The quote is the c-quote component (saffron quarter mark). Only the frame's placeholder
     changes: on bone the screenshot's pale header would melt into cobalt-soft while it loads. */
  .c-nobel-museum .l-frame { background-color: var(--surface); }
  /* The landscape frame is much shorter than the text beside it: it stands centred against the
     text, so the space falls above and below it rather than in one hole under it (T8). Its
     quarter is cluster-sun-b's top-start slot. */
  @container c-case (width >= 692px) {
    .c-nobel-museum { align-self: center; }
  }
  /* ==== end Nobel ==== */
}

@layer pages {
  /* ==== Good Housekeeping (WP15, REDESIGN-PLAN.md §9.3): process image, quote; fill inside this block only ==== */
  /* The paper prototype photo has black edges in the asset; it is scaled a little inside its
     arch, which clips, so the edges fall outside the frame (T11). */
  .c-ghk-photo > img { scale: 1.08; transform-origin: 45% 50%; }
  /* ==== end Good Housekeeping ==== */
}

@layer pages {
  /* ==== Pomli (WP15, REDESIGN-PLAN.md §9.3): device composition, process list; fill inside this block only ==== */
  /* Device composition: the Today and Cookbook screens stand on a moon (cluster-pair-a places it
     and the quarter), Today a step higher (the pair's own offset). The composition adds room above
     the pair for the quarter, which stands 10% above it, so it never meets the title row.
     The process list is the c-process component on the cobalt field: no extra CSS.
     The marketing page is a plain link to the live site (not the viewer, so it does not lift):
     a block link holding a soft frame, with the focus ring on the frame's curve. */
  .c-pomli-devices { margin-block-start: var(--s6); }
  /* The onboarding screen keeps its top (the question and both actions) in a 9:16 frame; its
     lower third is empty cream (T9). The viewer still shows the whole file. */
  .c-pomli-onboarding .c-phone { aspect-ratio: 9 / 16; }
  .c-pomli-onboarding .c-phone > img { block-size: 100%; object-fit: cover; object-position: 50% 0; }
  .c-pomli-site { display: block; border-radius: var(--r-soft); }
  .c-pomli-site > picture { display: block; }
  /* The phone source of the marketing page is 390 × 952: on a phone it shows its first screen at
     4:5 from the top, so the focused link fits the window (T4). */
  @media (max-width: 900px) {
    .c-pomli-site > picture { aspect-ratio: 4 / 5; overflow: hidden; }
    .c-pomli-site > picture > img { block-size: 100%; object-fit: cover; object-position: 50% 0; }
  }
  .c-pomli-site:focus-visible { outline-offset: var(--focus-offset); }
  /* ==== end Pomli ==== */
}

@layer pages {
  /* ==== Care to Cure (WP15, REDESIGN-PLAN.md §9.3): hero pair, panel carousel; fill inside this block only ==== */
  /* Hero pair: the community story and the lived-experience article stand on a moon
     (cluster-pair-a places it and the quarter). Both screens take the story's ratio, as on the
     live page; the article (390 × 3844) shows its top and opens whole in the viewer (C18). The
     moon shares the home panel's gradient (C49): a lighter middle of the base, the tone at the
     rim. The opener's media is narrow (cols 9–12), so the pair keeps its gap small. */
  .c-care-pair { margin-block-start: var(--s6); gap: var(--s4); }
  /* The pair takes the device stage's width (cols 8–12, T10), so the screens read at a size and
     the moon (cluster-pair-a in a case stage) shows round them. */
  @container c-case (width >= 692px) {
    .c-care-hero { grid-column: 8 / span 5; }
  }
  /* On phones the pair takes all four columns (the screens were 101px wide in three) */
  @container c-case (width < 692px) {
    .c-care-hero { grid-column: 1 / -1; }
  }
  .c-care-pair > .c-phone { aspect-ratio: 358 / 659; }
  .c-care-pair > .c-phone > img { block-size: 100%; object-fit: cover; object-position: 50% 0; }
  .c-care-pair > .sh-moon {
    --sh-paint: radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--sh-tone) 70%, var(--surface)), var(--sh-tone) 85%);
  }
  /* Panel carousel: the carousel component in panels mode, inside the page's bleed and rhythm.
     The live page's gallery sat between the two chapters with a section's space round it. */
  .c-care-panels { padding-block-end: var(--space-section); }
  /* No stage fill: the blush arch below is the case's one field (T10), so the panels stand on bone */
  .c-care-panels .c-carousel-track { background-color: transparent; }
  /* ==== end Care to Cure ==== */
}

@layer pages {
  /* ==== Rapha (WP16, REDESIGN-PLAN.md §9.3): deck group, link carousel; fill inside this block only ==== */
  /* The deck group is the opener intro: the lede, then support text (WP15–16 fixes, T13c).
     Stage (T13a, b): the links carousel (components.css, 8.4) in cluster-pair-a, with no card and
     no tile: both screens stand on the moon. The rail's foot is the screens' foot, and the moon's
     base is on it (above the controls when they show). From a 360px carousel the two screens
     share one height that fits the stage (their two ratios add up to 0.988 of that height, plus
     the gap and the stage padding), so they show as a still pair and carousel.js hides the
     controls (C1); below it one screen shows at a time and the controls browse. */
  .c-rapha-stage .c-carousel-track { background-color: transparent; }
  .c-rapha-stage .c-carousel-rail { padding-block-end: 0; }
  .c-rapha-stage .c-carousel-frame { background-color: transparent; }
  .c-rapha-stage > .sh-moon { inset-block-end: 0; }
  .c-rapha-stage:has(.c-carousel-controls:not([hidden])) > .sh-moon { inset-block-end: calc(var(--target) + var(--s3)); }
  @container c-carousel (width >= 360px) {
    .c-rapha-stage .c-carousel-frame > img { block-size: min(30rem, (100cqi - var(--c-carousel-gap) - 2 * var(--c-carousel-pad)) / 0.99); }
  }
  /* On phones a stage holding a carousel spans all four columns (T13d; request: the WP8 rule) */
  @container c-case (width < 692px) {
    .c-opener--stage .c-opener-media:has(> .c-rapha-stage) { grid-column: 1 / -1; }
    /* The stage now reaches both page margins, so its two small accents step inside the screen
       (§5.4: only L and XL shapes leave the edge) */
    .c-rapha-stage > .sh-quarter { inset-inline-end: 0; }
    .c-rapha-stage > .sh-wedge { inset-inline-start: 0; }
  }
  /* The ink chapter's wedge stands just inside the arch's top edge, beside the heading (T13e),
     instead of low in the end columns. On phones the outcome slot already puts it there. */
  @media (width >= 761px) {
    .c-rapha-outcome > .sh-wedge { inset-block: var(--s7) auto; inset-inline-end: calc(var(--c-bleed-pad, var(--margin)) + 25%); }
  }
  /* The ink field's empty end columns hold a blush quarter at the window's edge (C79), XL from
     1180px; below it the prose comes nearer the edge, so it is L (at XL it touched the text at
     900). Phones have no empty columns: none there (u-wide-only). */
  @media (761px <= width < 1180px) {
    .c-rapha-outcome > .edge-right { --sh-size: var(--sh-l); }
  }
  /* ==== end Rapha ==== */
}

@layer pages {
  /* ==== POLITICO (WP16, REDESIGN-PLAN.md §9.3): integration, secondary; fill inside this block only ==== */
  /* Both images are transparent device mock-ups, so they stand on the page without a frame. From a
     692px container the opener's pair takes eight columns (3–10), so it stays under a screen tall and a
     focused link fits the window; the PRO screens, wider than tall, take ten (3–12). */
  @container c-case (width >= 692px) {
    /* Room above for the quarter, which rises out of the top-start corner (cluster-sun-b) */
    .c-politico-hero { grid-column: 3 / span 8; margin-block-start: calc(var(--space-before-h2) + var(--s7)); }
    .c-politico-secondary .c-chapter-media { grid-column: 3 / span 10; }
  }
  /* The figure's one track never grows to an image's natural width (1500px), even before it loads:
     one run at 600px measured a 1527px page. */
  :is(.c-politico-hero, .c-politico-secondary .c-figure) { grid-template-columns: minmax(0, 1fr); }
  .c-politico-device { display: block; color: inherit; border-radius: var(--r-soft); }
  .c-politico-device > img { inline-size: 100%; block-size: auto; }
  .c-politico-device:focus-visible { outline-offset: var(--focus-offset); }
  /* The same lift as every image that opens in the viewer (components.css, linked frames). */
  @media (prefers-reduced-motion: no-preference) {
    :root:not(.is-reduced-motion) .c-politico-device { transition: translate var(--d-base) var(--ease-out); }
    :root:not(.is-reduced-motion) .c-politico-device:is(:focus-visible, .is-hover) { translate: 0 calc(-1 * var(--s2)); }
  }
  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
    :root:not(.is-reduced-motion) .c-politico-device:hover { translate: 0 calc(-1 * var(--s2)); }
  }
  /* Integration: the Trello–WordPress note, the newsroom's tooling, set apart at Lede size under a
     rule, in the chapter's text columns. */
  .c-politico-integration { padding-block-start: 0; }
  .c-politico-integration .c-chapter-text {
    margin-block-start: 0;
    padding-block-start: var(--s5);
    border-block-start: var(--ring) solid var(--line);
    font-size: var(--t-lede);
    line-height: calc(var(--lh-lede) + var(--lh-adjust));
    letter-spacing: calc(var(--tr-lede) + var(--tr-adjust));
  }
  /* The closing reflection, the last word of the case: Lede size. */
  .c-politico-closing {
    font-size: var(--t-lede);
    line-height: calc(var(--lh-lede) + var(--lh-adjust));
    letter-spacing: calc(var(--tr-lede) + var(--tr-adjust));
  }
  /* ==== end POLITICO ==== */
}

@layer pages {
  /* ==== Ayala Land (WP16, REDESIGN-PLAN.md §9.3): mission design; fill inside this block only ==== */
  /* Mission design: the landscape design material stands in the opener's arch, contained, never
     cropped (§4.5). A square arch fits it with the frame's screen inset above. The file's ground is
     transparent and its "Our Mission" text is dark, drawn for the live page's light ground, so the
     arch is light (T12; on ink the heading disappeared): cobalt-soft, as home stages the same
     file, since paper melted into the bone page and the arch barely read (C78). The viewer
     shows it on paper. */
  .c-ayala-mission { background-color: var(--c-cobalt-soft); }
  /* The triangle straddles the arch's start edge; on phones it stops at the window's edge (T12:
     it was 16px past it at 390, and only L and XL shapes may leave the edge, §5.4). */
  .c-ayala-hero > .sh-triangle { inset-inline-start: max(-14%, var(--s1) - var(--margin)); }
  /* The blush arch ends on the triangle at M (T12). The outcome slot was sized for an S sun: from
     761px the M triangle takes columns 11–12, right of the prose (cols 4–10), at most their width,
     so it stays clear of the text at 1024 and 761 too. On phones the slot keeps it in the arch's
     top padding. */
  @media (width >= 761px) {
    .c-ayala-outcome > .shape {
      inset-inline-end: var(--c-bleed-pad, var(--margin));
      --sh-cap: calc((100% - 2 * var(--c-bleed-pad, var(--margin))) / 6 - var(--gutter));
    }
  }
  /* Below 1180px it is one column, as every closing shape there (C76). */
  @media (761px <= width < 1180px) {
    .c-ayala-outcome > .shape { --sh-cap: var(--sh-s); }
  }
  /* The brand list under each chapter title: a quiet caps line, as the live page sets it apart. */
  .c-ayala-brands {
    font-size: var(--t-label);
    line-height: calc(var(--lh-label) + var(--lh-adjust));
    letter-spacing: calc(var(--tr-label) + var(--tr-adjust));
    font-weight: calc(var(--w-label) + var(--w-adjust));
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  /* ==== end Ayala Land ==== */
}

@layer pages {
  /* ==== Monocle (WP16, REDESIGN-PLAN.md §9.3): panorama, window, morning concept; fill inside this block only ==== */
  /* Window: the c-window component (its CSS scroll on hover and focus is the C8 exception), ten
     columns wide in the opener, standing across the ink field's foot. */
  @container c-case (width >= 692px) {
    /* Room above for the quarter, which rises out of the top-start corner (cluster-sun-b) */
    .c-monocle-hero { grid-column: 2 / span 10; margin-block-start: calc(var(--space-before-h2) + var(--s7)); }
    .c-monocle-live .c-chapter-media { grid-column: 2 / span 10; }   /* the window's columns (T14) */
  }
  /* On phones a 16:10 window showed only the masthead: below the 692px container it is 4:5 (T14) */
  @container c-case (width < 692px) {
    .c-monocle-hero .c-window { --c-window-ratio: 1.25; }
    /* The taller frame would lift the quarter (8% of the media's height above it) into the intro */
    .c-monocle-hero .cluster-sun-b > .sh-quarter { inset-block-start: -4%; }
  }
  /* Panorama: the morning concept across the window (chapter variant 2). It fits the width on wide
     screens; on narrow ones it keeps a readable width and scrolls sideways, as its live label says.
     scroller.js keeps it a tab stop only while it scrolls (S1). */
  .c-monocle-panorama {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    background-color: var(--placeholder);
  }
  .c-monocle-panorama > img { inline-size: 100%; min-inline-size: calc(var(--s10) * 5); block-size: auto; }
  /* The region runs to the window edges, so its focus ring is drawn inside it. */
  .c-monocle-panorama:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
  /* The live site: its label row sits above the screenshot, like the caption below it. */
  .c-monocle-live .c-figure-caption:first-child { align-items: center; }
  /* ==== end Monocle ==== */
}

@layer pages {
  /* ==== Me & AI (WP17, REDESIGN-PLAN.md §9.4–9.5): timeline, Generative UI tile; fill inside this block only ==== */
  /* Opener: on wide screens the lede stands in cols 1–6 beside the other three paragraphs
     (cols 8–12), as the live page sets them; on phones they stack. */
  @container c-case (width >= 692px) {
    .c-me-ai-intro {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      row-gap: var(--space-stack);
      align-items: start;
    }
    .c-me-ai-intro > * { grid-column: 8 / span 5; }
    .c-me-ai-intro > * + * { margin-block-start: 0; }
    .c-me-ai-intro > .c-opener-lede { grid-column: 1 / span 6; grid-row: 1 / span 3; }
    /* The line starts under the lede (C69): cluster-line-orbit in cols 1–6, from the row of the
       second paragraph, its top (the orbit's) level with that paragraph's, so it fills the space
       the short lede leaves. */
    .c-me-ai-intro:has(> .cluster-line-orbit) { grid-template-rows: auto auto auto 1fr; }
    .c-me-ai-intro > .cluster-line-orbit { grid-column: 1 / span 6; grid-row: 2 / span 3; align-self: start; }
  }
  /* Wide screens only: where the intro is one column the start and the opener's line SVG are not
     shown, so the opener is as before and the line starts at the timeline (line.js skips an SVG
     that is not shown). On the opener the line is full ink, as it is on the timeline it runs into. */
  @container c-case (width < 692px) {
    .c-me-ai-intro > .cluster-line-orbit, .c-opener:has(.cluster-line-orbit) > .c-line { display: none; }
  }
  .c-opener:has(.cluster-line-orbit) > .c-line .c-line-path { stroke: var(--fg); }
  /* Its ring is a node on the line (§5.2): it scales through --line-node as the line arrives, as
     a node's mark does (line.js; transform only). With scripts and motion it starts small, so it
     never shrinks on arrival before the line draws through it; line.js puts it at full size
     whenever motion is off. Without scripts, or with reduced motion, it is full size. */
  .c-me-ai-intro > .cluster-line-orbit > [data-line-stop] { scale: var(--line-node, 1); }
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .c-me-ai-intro > .cluster-line-orbit > [data-line-stop] { --line-node: 0.6; }
  }

  /* C.S. Lewis covers: three books fanned in the card's visual, the middle one a step up and in
     front. Contained, never cropped (§4.5). */
  .c-me-ai-covers {
    aspect-ratio: 16 / 10;   /* a composition, not one image: it keeps its own box (M1) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--s5);
  }
  .c-me-ai-covers > img {
    inline-size: auto;
    block-size: 82%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--s1);
    box-shadow: 0 var(--s2) var(--s4) color-mix(in srgb, var(--c-ink) 22%, transparent);
  }
  .c-me-ai-covers > img:first-child { rotate: -8deg; translate: var(--s4) var(--s2); }
  .c-me-ai-covers > img:nth-child(2) { position: relative; z-index: 1; translate: 0 calc(-1 * var(--s2)); }
  .c-me-ai-covers > img:last-child { rotate: 8deg; translate: calc(-1 * var(--s4)) var(--s2); }
  /* Pomli's wordmark is not shown, as on the live page (its text stays in the markup) */
  .c-me-ai-wordmark { display: none; }

  /* ==== end Me & AI ==== */
}

@layer pages {
  /* ==== Contact (WP18, REDESIGN-PLAN.md §9.4–9.5): cobalt header, form on paper; fill inside this block only ==== */
  /* A cobalt field holds the back link, the heading and the form's paper panel (c-form-panel
     f-bone). The panel hangs out of the field's foot by --c-foot, as a field opener's media does
     (WP15), so the field reads as the page's header and the form stands across its edge. The
     field ends --c-foot above the panel's foot; the page keeps that much room below it. Wide:
     intro in cols 1–5, panel in cols 7–12 (l-span classes). The sun stands across the field's
     foot, half off the window's start edge, in the cluster-field-foot slot (shapes.css, S1). */
  .c-contact-page {
    --c-foot: var(--s8);
    padding-block: var(--s6) 0;
    margin-block-end: calc(var(--c-foot) + var(--space-component));
  }
  .c-contact-page-back { margin-block-end: var(--s7); }
  .c-contact-page-layout { row-gap: var(--s8); }
  .c-contact-page-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-after-heading);
  }
  .c-contact-page-text { max-inline-size: var(--measure); }
  .c-contact-page-link { margin-block-start: var(--s2); }
  .c-contact-page-panel { margin-block-end: calc(-1 * var(--c-foot)); }
  @media (width >= 761px) {
    .c-contact-page { --c-foot: var(--s10); padding-block-start: var(--s7); }
    .c-contact-page-back { margin-block-end: var(--s8); }
  }
  /* While sending is unavailable (no JS, a static preview, a 503), LinkedIn is the only working
     route, so its go link takes the button's shape: a paper pill on the cobalt field, the label
     then the arrow, the arrow passing on hover as the button's does (F1). contact.js marks the
     form data-sending once sending works; then it is the quiet go link again. Same words, same
     link: only its look changes. */
  .c-contact-page-layout:not(:has(.c-form[data-sending])) .c-contact-page-link {
    --go-size: var(--icon);
    flex-direction: row-reverse;
    min-block-size: calc(var(--target) + var(--s1));
    padding: var(--s2) var(--s5) var(--s2) var(--s6);
    border-radius: var(--r-pill);
    background-color: var(--surface);
    color: var(--c-ink);
    transition: background-color var(--d-fast) var(--ease-out);
  }
  .c-contact-page-layout:not(:has(.c-form[data-sending])) .c-contact-page-link .c-go-circle { border: 0; scale: none; }
  .c-contact-page-layout:not(:has(.c-form[data-sending])) .c-contact-page-link .c-go-circle::before { content: none; }
  .c-contact-page-layout:not(:has(.c-form[data-sending])) .c-contact-page-link .c-go-arrow { color: currentColor; }
  .c-contact-page-layout:not(:has(.c-form[data-sending])) .c-contact-page-link:is(:focus-visible, .is-hover, .is-focus) { background-color: var(--action); }
  .c-contact-page-layout:not(:has(.c-form[data-sending])) .c-contact-page-link:is(:active, .is-active) { translate: 0 1px; }
  @media (hover: hover) {
    .c-contact-page-layout:not(:has(.c-form[data-sending])) .c-contact-page-link:hover { background-color: var(--action); }
  }
  /* ==== end Contact ==== */
}

@layer pages {
  /* ==== Legal (WP18, REDESIGN-PLAN.md §9.4–9.5): Impressum and privacy; fill inside this block only ==== */
  /* The page is the c-legal component (WP8) in the page grid's content column, so its one shape
     (a small blush quarter beside the title) keeps to the content edge. The closing links are
     quiet text links in one row under a rule, at the legal measure. */
  .c-legal-page { padding-block-start: var(--s6); }
  .c-legal-back { justify-self: start; }
  .c-legal-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s7);
    max-inline-size: var(--measure);
    margin-block-start: var(--space-before-h2);
    padding-block-start: var(--s4);
    border-block-start: var(--ring) solid var(--line);
  }
  /* The arrows stand 8px from their labels on both links (C87): the prose link's 0.2em looked
     cramped at this size and on its own line. */
  .c-legal-end > .c-text-link { display: inline-flex; align-items: center; gap: var(--s2); min-block-size: var(--target); }
  .c-legal-end > .c-text-link > .c-icon { margin-inline: 0; }
  @container c-case (width >= 692px) {
    .c-legal-end { max-inline-size: min(var(--measure), calc((100% + var(--gutter)) / 12 * 10 - var(--gutter))); }
  }
  /* ==== end Legal ==== */
}

@layer pages {
  /* ==== 404 (WP18, REDESIGN-PLAN.md §9.4–9.5): sun, ways onward; fill inside this block only ==== */
  /* One band. A large sun stands at the window's left edge, 40% off screen, flush with the band's
     top (edge-left edge-top-flush, shapes.css), and the line starts behind it: on wide screens
     the sun is the route's first stop (data-line-dip), so the line leaves from its middle; on
     phones the route starts in the left margin, which the sun covers at the top. The line runs
     past the ways onward and ends with its dot beside the two projects (data-line-end on
     c-lost-next). It is drawn in full on load: this page loads no ScrollTrigger (N1). Wide: text
     in cols 5–12, clear of the sun. Phones: the text starts below the sun (S there: one column,
     C86). */
  .c-lost {
    margin-block-start: var(--s6);
    padding-block: calc(var(--col) + var(--s6)) var(--space-section);
    row-gap: var(--s7);
  }
  .c-lost-head { display: grid; gap: var(--space-after-heading); }
  .c-lost-head > p { max-inline-size: var(--measure); }
  /* The list's line height is the go link's height, so line.js puts the end dot level with the
     first circle's middle. */
  .c-lost-ways {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3) var(--s6);
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: var(--target);
  }
  /* The two projects are links like the four above, one step up: names at Component size, the
     go link's own 44px circle (N1). The block's line height puts line.js's end dot level with the
     first project's label (rule, padding, then half the label's line), beside its saffron mark.
     Nothing inside inherits it: the go link sets its own. */
  .c-lost-next {
    container: c-case / inline-size;
    display: grid;
    gap: var(--s5) var(--gutter);
    padding-block-start: var(--s6);
    border-block-start: var(--ring) solid var(--line);
    line-height: calc(2 * (var(--ring) + var(--s6)) + var(--t-label) * (var(--lh-label) + var(--lh-adjust)));
  }
  .c-lost-next > .c-next-link { grid-column: auto; }   /* not the next-story bar's columns */
  .c-lost-next .c-next-name {
    font-size: var(--t-component);
    line-height: calc(var(--lh-component) + var(--lh-adjust));
    letter-spacing: calc(var(--tr-component) + var(--tr-adjust));
    font-weight: calc(var(--w-component) + var(--w-adjust));
  }
  .c-lost-next .c-go-circle { --go-size: var(--target); }
  .c-lost-next .c-go-arrow { inline-size: var(--icon); block-size: var(--icon); }
  @media (width >= 761px) {
    .c-lost { padding-block-start: var(--s7); }
    .c-lost-ways { flex-direction: row; flex-wrap: wrap; }
  }
  /* Four ways in eight columns wrapped 3 + 1 at 1024: a 2 × 2 grid until they fit one row */
  @media (761px <= width < 1100px) {
    .c-lost-ways { display: grid; grid-template-columns: repeat(2, max-content); }
  }
  /* ==== end 404 ==== */
}