/* Forthwith: site stylesheet, version 4 (10 October 2026). Direction D, "A day, told as a film".
   Source: design/2026-10-06_directions/d/index.src.html, built by site-build/2026-10-10_d/build_site.py. */
/* Direction D, "A day, told as a film". Second pass, 6 October 2026.
   One idea: the home page is one Thursday at a company that works with us. The clock is the only image.
   The day is told in the brand's own four colours: ink is night, green is first light,
   paper is the working day, yellow is the evening.
   Rules: directions-kit/TELLS-banned-list.md and DESIGN_RULES section 10.
   10 Oct 2026: Mika picked Archivo, set wide, for the headlines and what the page says (option 7).
   Source Serif stays for the clock and the footer definition, the same family the logo is drawn from. */

@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-v2.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* Archivo by Omnibus-Type, SIL Open Font License. Cut to Latin, width 100-116% and weight 400-600, the range the site uses. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-v1.woff2") format("woff2"); font-weight: 400 600; font-stretch: 100% 116%; font-display: swap; }

:root {
  --ink: #0f1f1a;
  --green: #0b3d2e;
  --paper: #f2f4ef;
  --yellow: #f2c14e;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1320px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --head: 76px;
  --rule-dark: rgba(15, 31, 26, .16);
  --rule-light: rgba(242, 244, 239, .2);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head); }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
img, svg { display: block; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* Buttons: one shape, a 4 px corner, no arrows. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 4px; background: var(--paper); color: var(--ink); font: 600 16px/1 var(--sans); text-decoration: none; transition: background-color .3s, color .3s, transform .2s; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Header: takes the ground and ink of whatever is under it ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--head); color: var(--fg, var(--paper)); background: var(--bg, transparent); transition: transform .35s ease, color .35s; }
.top.is-hidden { transform: translateY(-100%); }
.top .wrap { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { position: relative; display: block; width: 182px; height: 30px; flex: none; }
.brand img, .brand .on-light { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s; }
.brand .on-light svg { display: block; width: 100%; height: 100%; }
.brand .on-light { opacity: 0; }
.top[data-tone="light"] .brand .on-dark, .top[data-tone="dusk"] .brand .on-dark { opacity: 0; }
.top[data-tone="light"] .brand .on-light, .top[data-tone="dusk"] .brand .on-light { opacity: 1; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 30px; font: 500 15px/1 var(--sans); }
.top nav a:not(.button) { text-decoration: none; }
.top nav a:not(.button):hover { text-decoration: underline; }
.top .button { min-height: 42px; padding: 0 18px; font-size: 15px; }
.top[data-tone="light"] .button, .top[data-tone="dusk"] .button { background: var(--ink); color: var(--paper); }
.top .short { display: none; }

/* ---------- The day: hero, credits, film and closing title share one ground that JS moves through the day ---------- */
.day { background: var(--day-bg, var(--ink)); color: var(--paper); }

.open { min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--head) + 40px) 0 0; }
.open > .wrap { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(32px, 6vh, 72px); }
.open h1 { font: 560 clamp(46px, 7.6vw, 118px)/.98 var(--display); font-stretch: 116%; letter-spacing: -.022em; max-width: 13.5em; }
.open h1 span { display: block; }
.open-row { margin-top: clamp(36px, 5.5vh, 64px); display: grid; grid-template-columns: minmax(0, 40em) auto; justify-content: space-between; align-items: end; gap: 40px 64px; }
.open-row p { font-size: 20px; line-height: 1.55; color: rgba(242, 244, 239, .84); max-width: 34em; }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta small { font-size: 15px; line-height: 1.5; color: rgba(242, 244, 239, .7); }

.credits { padding: 0 0 clamp(36px, 6vh, 56px); }
.credits .wrap { display: flex; align-items: center; gap: clamp(32px, 6vw, 96px); flex-wrap: wrap; }
.credits h2 { font: 400 15px/1.4 var(--sans); color: rgba(242, 244, 239, .66); }
.credits ul { display: flex; align-items: center; gap: clamp(36px, 6vw, 88px); flex-wrap: wrap; color: var(--paper); }
.credits svg { height: 24px; width: auto; }
.credits .logo-mendo svg { height: 20px; }
.credits .logo-vanjunge svg { height: 21px; }
.credits .more { font: 500 17px/1 var(--sans); letter-spacing: .01em; color: rgba(242, 244, 239, .66); white-space: nowrap; }

/* The film. Without JS, or with reduced motion, every scene is its own screen with its own clock. */
.scene { --g: var(--ink); --t: var(--paper); --c: var(--paper); background: var(--g); color: var(--t); padding: clamp(72px, 14vh, 140px) 0; }
.scene .wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.time, .clock { font: 300 clamp(112px, 23.5vw, 344px)/.86 var(--serif); font-variation-settings: "opsz" 60; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -.035em; color: var(--c); margin-left: -.04em; white-space: nowrap; }
.where { font: 500 15px/1.4 var(--sans); opacity: .72; margin-bottom: 18px; }
.say { font: 400 clamp(25px, 2.75vw, 40px)/1.24 var(--display); font-stretch: 106%; letter-spacing: -.012em; text-wrap: pretty; }
.fact { margin-top: 22px; font-size: 18px; line-height: 1.55; opacity: .8; max-width: 30em; text-wrap: pretty; }
.caption { padding-top: 28px; font-size: 14px; line-height: 1.45; opacity: .7; }

html.film .scenes-static-caption { display: none; }
html.film { scroll-snap-type: y proximity; }
html.film .film { position: relative; height: calc(var(--n) * 105svh); }
.snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
html.film .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--sky, var(--ink)); }
html.film .stage > .wrap { height: 100%; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
html.film .clock-box { align-self: center; }
html.film .clock { color: var(--clock, var(--paper)); }
html.film .scenes { position: relative; display: grid; align-items: center; }
html.film .scene { grid-area: 1 / 1; background: none; padding: 0; color: var(--t); opacity: 0; visibility: hidden; transform: translateY(18px); will-change: opacity, transform; }
html.film .scene.on { visibility: visible; }
html.film .scene .wrap { display: block; padding: 0; max-width: none; }
html.film .scene .time { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.film .caption { position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vh, 40px); padding: 0; color: var(--fg, var(--paper)); }
html:not(.film) .clock-box, html:not(.film) .stage > .caption { display: none; }
html:not(.film) .stage > .wrap { max-width: none; padding: 0; }

.closing { padding: clamp(120px, 22vh, 220px) 0 clamp(120px, 20vh, 200px); }
.closing h2 { font: 560 clamp(36px, 5.4vw, 82px)/1.02 var(--display); font-stretch: 116%; letter-spacing: -.022em; max-width: 12em; }
.closing p { margin-top: clamp(32px, 5vh, 52px); margin-left: auto; max-width: 31em; font-size: 20px; line-height: 1.6; color: rgba(242, 244, 239, .84); }
.closing p strong { color: var(--yellow); font-weight: 600; }

/* ---------- After the day: plain paper for the facts ---------- */
.paper { background: var(--paper); color: var(--ink); }
.section { padding: clamp(96px, 15vh, 168px) 0; }
.section + .section { padding-top: 0; }
.heading { font: 560 clamp(36px, 4.4vw, 64px)/1.06 var(--display); font-stretch: 110%; letter-spacing: -.018em; }
.intro { margin-top: 18px; font-size: 20px; color: rgba(15, 31, 26, .72); }

.method-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(48px, 7vh, 72px); }
.method-head .intro { margin: 0; justify-self: end; max-width: 22em; text-align: right; }
.steps { border-top: 1px solid var(--ink); }
.step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 6fr); gap: 16px clamp(24px, 4vw, 56px); padding: 30px 0 34px; border-bottom: 1px solid var(--rule-dark); }
.step h3 { font: 500 clamp(24px, 2.2vw, 30px)/1.15 var(--display); font-stretch: 106%; }
.step .terms { font-weight: 500; font-size: 17px; line-height: 1.5; padding-top: 4px; }
.step .body { font-size: 17px; line-height: 1.6; color: rgba(15, 31, 26, .8); max-width: 38em; padding-top: 4px; }

.work .heading { margin-bottom: clamp(40px, 6vh, 64px); }
.case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 20px clamp(24px, 4vw, 56px); padding: 40px 0 48px; border-top: 1px solid var(--ink); }
.case + .case { border-top-color: var(--rule-dark); }
.case-meta { font-size: 15px; line-height: 1.5; color: rgba(15, 31, 26, .7); }
.case-meta svg { height: 22px; width: auto; color: var(--ink); margin-bottom: 18px; }
.case-meta .client { font: 600 17px/1.3 var(--sans); color: var(--ink); margin-bottom: 14px; }
.case h3 { font: 500 clamp(26px, 2.9vw, 42px)/1.14 var(--display); font-stretch: 106%; letter-spacing: -.016em; max-width: 21em; text-wrap: balance; }
.case p.body { margin-top: 18px; font-size: 18px; color: rgba(15, 31, 26, .8); max-width: 40em; }

.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); }
.about .prose p { font: 400 clamp(19px, 1.6vw, 22px)/1.6 var(--sans); max-width: 34em; }
.about .prose p + p { margin-top: 1em; }
.promises { grid-column: 2; margin-top: clamp(24px, 4vh, 40px); padding-top: 28px; border-top: 1px solid var(--rule-dark); }
.promises h3 { font: 600 17px/1.4 var(--sans); margin-bottom: 14px; }
.promises li { font-size: 17px; line-height: 1.6; color: rgba(15, 31, 26, .8); padding-left: 1.1em; text-indent: -1.1em; }
.promises li + li { margin-top: 8px; }
.promises li::before { content: "\2013\00a0\00a0"; }

/* ---------- Contact: the green of first light ---------- */
.contact { background: var(--green); color: var(--paper); padding: clamp(104px, 17vh, 176px) 0 clamp(96px, 15vh, 152px); }
.contact h2 { font: 560 clamp(40px, 5.8vw, 90px)/1 var(--display); font-stretch: 116%; letter-spacing: -.022em; }
.contact-row { margin-top: clamp(36px, 6vh, 60px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
.contact-row p { font-size: 20px; line-height: 1.6; color: rgba(242, 244, 239, .84); max-width: 30em; text-wrap: pretty; }
.contact .cta { margin-top: 32px; }
.mail { justify-self: end; text-align: right; }
.mail small { display: block; font-size: 15px; color: rgba(242, 244, 239, .7); margin-bottom: 8px; }
.mail a { font: 400 clamp(24px, 2.6vw, 38px)/1.2 var(--display); font-stretch: 106%; text-decoration: none; border-bottom: 1px solid rgba(242, 244, 239, .4); }
.mail a:hover { border-bottom-color: var(--paper); }

footer { background: var(--ink); color: rgba(242, 244, 239, .72); font-size: 14px; }
footer .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 32px; padding-block: 36px; }
footer img { width: 141px; height: 20px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .def { margin-left: auto; color: rgba(242, 244, 239, .72); }
footer .def b { font: 600 15px/1 var(--serif); color: var(--paper); }

/* ---------- Narrow screens ---------- */
@media (max-width: 980px) {
  .scene .wrap, html.film .stage > .wrap { grid-template-columns: minmax(0, 1fr); }
  html.film .stage > .wrap { grid-template-rows: auto auto; align-content: center; gap: clamp(20px, 4vh, 40px); }
  .time, .clock { font-size: clamp(104px, 30vw, 240px); }
  .say { font-size: clamp(25px, 4.6vw, 34px); }
  .open-row, .method-head, .contact-row, .about { grid-template-columns: minmax(0, 1fr); }
  .method-head .intro { justify-self: start; text-align: left; }
  .mail { justify-self: start; text-align: left; }
  .promises { grid-column: 1; }
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .step .body { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --head: 64px; }
  body { font-size: 17px; }
  .brand { width: 152px; height: 25px; }
  .top nav { gap: 0; }
  .top nav a:not(.button) { display: none; }
  .top .long { display: none; } .top .short { display: inline; }
  .top .button { min-height: 40px; padding: 0 16px; }
  .open h1 { font-size: clamp(40px, 11.2vw, 58px); line-height: 1.02; }
  .open-row p, .closing p, .contact-row p, .intro { font-size: 18px; }
  .credits .wrap { gap: 14px; }
  .credits ul { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 18px 32px; }
  .credits svg { height: 15px; } .credits .logo-mendo svg { height: 14px; } .credits .logo-vanjunge svg { height: 15px; }
  .credits .more { font-size: 14px; }
  .say { font-size: 25px; line-height: 1.3; }
  .fact { font-size: 16px; margin-top: 16px; }
  .where { margin-bottom: 12px; }
  html.film .caption { font-size: 13px; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0 28px; }
  .case { grid-template-columns: minmax(0, 1fr); padding: 32px 0 36px; }
  footer .def { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .button, .top, .brand img { transition: none; } }

/* ---------- Skip link, and the parts that used to be inline ---------- */
.skip { position: fixed; left: 16px; top: 16px; z-index: 60; padding: 12px 16px; border-radius: 4px; background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none; transform: translateY(calc(-100% - 32px)); }
.skip:focus-visible { transform: none; }
.caption .wrap { display: block; }
html.diag-open { overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }

/* ---------- The diagnostic: five questions in a dialog, set on paper ---------- */
.diag { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: hidden; }
@media (min-width: 768px) { .diag { width: min(760px, calc(100% - 64px)); height: min(760px, calc(100% - 64px)); margin: auto; border-radius: 6px; } }
.diag::backdrop { background: rgba(15, 31, 26, .74); }
.diag[open] { animation: diag-in .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes diag-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.diag a { color: inherit; }
.diag-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.diag-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 20px 24px 0; }
@media (min-width: 768px) { .diag-top { padding: 32px 48px 0; } }
.diag-title { font: 600 15px/1.3 var(--sans); }
.diag-count { grid-column: 1; font-size: 15px; line-height: 1.4; color: rgba(15, 31, 26, .66); }
.diag-close { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; display: grid; place-items: center; }
.diag-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }
@media (hover: hover) { .diag-close:hover { background: rgba(15, 31, 26, .07); } }
.diag-steps { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 32px 24px 24px; }
@media (min-width: 768px) { .diag-steps { padding: 44px 48px 32px; } }
.diag-step { display: none; margin: 0; padding: 0; border: 0; min-width: 0; }
.diag-step.is-current { display: block; animation: step-in .3s cubic-bezier(.2, .7, .2, 1); }
.diag-step.is-back { animation-name: step-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes step-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.diag-q { display: block; padding: 0; font: 500 clamp(26px, 3.2vw, 36px)/1.14 var(--display); font-stretch: 106%; letter-spacing: -.016em; max-width: 18em; text-wrap: balance; }
.diag-help { margin-top: 12px; font-size: 17px; color: rgba(15, 31, 26, .72); }
.options { display: grid; gap: 8px; margin-top: 28px; }
@media (min-width: 768px) { .options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .options-2 .other-input { grid-column: 1 / -1; } }
.option { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 18px; border: 1px solid rgba(15, 31, 26, .24); border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { .option:hover { border-color: rgba(15, 31, 26, .55); } }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-box { flex: none; width: 20px; height: 20px; border: 1.5px solid rgba(15, 31, 26, .5); border-radius: 50%; display: grid; place-items: center; }
.option input[type="checkbox"] + .option-box { border-radius: 3px; }
.option input:checked + .option-box { border-color: var(--ink); }
.option input[type="radio"]:checked + .option-box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.option input[type="checkbox"]:checked + .option-box { background: var(--ink); }
.option input[type="checkbox"]:checked + .option-box::after { content: ""; width: 10px; height: 5px; border-left: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper); transform: translateY(-1px) rotate(-45deg); }
.option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.option-label { line-height: 1.3; }
.text-input { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid rgba(15, 31, 26, .32); border-radius: 4px; background: #fff; color: var(--ink); }
textarea.text-input { min-height: 96px; resize: vertical; line-height: 1.5; }
.text-input:focus-visible { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.text-input[aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.other-input { margin-top: 8px; }
.field-group { display: grid; gap: 18px; margin-top: 28px; }
.field-row { display: grid; gap: 6px; }
.field-row label { font-size: 16px; font-weight: 500; }
.field-row label small { font-size: 15px; font-weight: 400; color: rgba(15, 31, 26, .66); }
.field-error { font-size: 16px; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.diag-privacy { margin-top: 20px; font-size: 15px; color: rgba(15, 31, 26, .7); }
.diag-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px 20px; border-top: 1px solid var(--rule-dark); background: var(--paper); }
@media (min-width: 768px) { .diag-bottom { padding: 20px 48px 28px; } }
.diag .button { border: 0; background: var(--ink); color: var(--paper); cursor: pointer; }
.diag .button:disabled { opacity: .35; cursor: default; transform: none; }
.diag-back { min-height: 44px; padding: 0 4px; border: 0; background: none; color: rgba(15, 31, 26, .72); font-size: 16px; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.diag-back[hidden] { display: inline-block; visibility: hidden; }
.diag-hint { margin-left: auto; font-size: 15px; color: rgba(15, 31, 26, .62); }
.diag-done:focus { outline: none; }
.diag-done h2 { font: 560 clamp(30px, 4vw, 44px)/1.08 var(--display); font-stretch: 110%; letter-spacing: -.018em; }
.diag-done > p { margin-top: 14px; max-width: 32em; font-size: 18px; color: rgba(15, 31, 26, .8); }
.next-steps { margin-top: 28px; border-top: 1px solid var(--rule-dark); }
.next-steps li { padding: 14px 0; border-bottom: 1px solid var(--rule-dark); font-size: 17px; line-height: 1.5; }
.summary { margin-top: 28px; font-size: 15px; color: rgba(15, 31, 26, .72); }
.summary summary { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-weight: 500; cursor: pointer; list-style: none; }
.summary summary::-webkit-details-marker { display: none; }
.summary summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.summary[open] summary::before { transform: rotate(45deg); }
.summary dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 0; }
.summary dd { margin: 0; color: var(--ink); }

/* ---------- Legal pages and the 404: the page's title on ink, the text on paper ---------- */
.page-head { background: var(--ink); color: var(--paper); padding: calc(var(--head) + clamp(64px, 12vh, 120px)) 0 clamp(56px, 9vh, 96px); }
.page-head h1 { font: 560 clamp(40px, 6vw, 84px)/1.02 var(--display); font-stretch: 116%; letter-spacing: -.022em; }
.page-head p { margin-top: 20px; max-width: 36em; font-size: 20px; line-height: 1.55; color: rgba(242, 244, 239, .84); }
.legal { padding: clamp(56px, 9vh, 96px) 0 clamp(96px, 15vh, 160px); }
.legal .wrap > * { max-width: 44em; }
.legal section + section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--rule-dark); }
.legal h2 { font: 500 clamp(22px, 2vw, 26px)/1.2 var(--display); font-stretch: 106%; letter-spacing: -.01em; }
.legal p, .legal ul, .legal address { margin-top: 12px; font-size: 18px; line-height: 1.6; color: rgba(15, 31, 26, .86); }
.legal address { font-style: normal; }
.legal ul li { position: relative; padding-left: 1.1em; }
.legal ul li::before { content: "\2013"; position: absolute; left: 0; }
.legal .updated { margin-top: 48px; font-size: 15px; color: rgba(15, 31, 26, .6); }
@media (max-width: 640px) { .page-head p, .legal p, .legal ul, .legal address { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .diag[open], .diag-step.is-current { animation: none; } }