/* padrial.com, built from sketch A (The Letter). Every colour, size and space comes from tokens.css.
   Dark mode: the sketch has none, so at night the whole page takes the deep band's own tokens. */

/* ── Roles the page uses on top of the tokens (light) ───────────────── */
:root {
  color-scheme: light dark;
  --btn-bg: var(--primary);
  --btn-fg: var(--primary-foreground);
  --btn-hover: var(--deep);
  --field-bg: var(--card);
  --panel-bg: var(--secondary);
  --panel-line: var(--secondary);
  --tbd-bg: var(--status-reserved);
  --foot-line: var(--terracotta);
  --band-end: transparent;
  --scrim: rgb(var(--shade-rgb) / 0.62);
}

/* ── Night: the deep band carries the page ──────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--deep);
    --foreground: var(--deep-foreground);
    --card: var(--primary);
    --secondary: var(--primary);
    --muted-foreground: var(--deep-muted);
    --accent: var(--primary);
    --border: var(--deep-border);
    --ring: var(--deep-accent);
    --link: var(--deep-accent);
    --btn-bg: var(--deep-accent);
    --btn-fg: var(--deep);
    --btn-hover: var(--deep-foreground);
    --field-bg: var(--primary);
    --panel-bg: var(--deep);
    --panel-line: var(--deep-border);
    --tbd-bg: var(--deep-border);
    --foot-line: var(--deep-border);   /* terracotta only on light grounds (brand book) */
    --band-end: var(--deep-border);    /* the line that closes the first screen at night */
    --scrim: rgb(10 20 27 / 0.74);     /* the ink token (#0A141B): deep on deep would not dim */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.i18n-wait body { visibility: hidden; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  font-size: var(--t-16);
  line-height: var(--l-16);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4 { margin: 0; }
a { color: var(--link); text-decoration: none; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius); }
.on-deep :focus-visible { outline-color: var(--deep-accent); }
.nw { white-space: nowrap; }
.dot { margin: 0 0.15em; }
[hidden] { display: none !important; }

.vh, .hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hp { left: -10000px; }

mark.tbd { background: var(--tbd-bg); color: inherit; padding: 0; border-radius: var(--radius); }

.skip { position: absolute; left: var(--edge); top: -60px; z-index: 50; background: var(--card); color: var(--foreground); padding: var(--s-2) var(--s-3); }
.skip:focus { top: var(--s-3); }

.wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--edge)); margin: 0 auto; padding: 0 var(--edge); }

/* ── The deep band: the whole first screen ─────────────────────────── */

.band {
  background: var(--deep);
  color: var(--deep-foreground);
  display: flex;
  flex-direction: column;
}

.mast { height: var(--head); flex: none; }
.mast-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); }
.logo { display: inline-flex; padding: var(--s-2) 0; }
.logo img { height: 20px; width: auto; max-width: none; aspect-ratio: 570.1 / 70; }
.lang { display: flex; gap: var(--s-2); margin-right: calc(-1 * var(--s-2)); font-size: var(--t-14); line-height: var(--l-14); font-weight: 600; letter-spacing: 0.02em; }
.lang button, .lang a {
  color: var(--deep-muted); background: none; border: 0; margin: 0;
  padding: var(--s-2); font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.lang button[aria-pressed="true"], .lang a[aria-current="page"] { color: var(--deep-foreground); }
.lang button:hover, .lang a:hover { color: var(--deep-foreground); }

.hero {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-6);
  align-content: center;
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}
.hero > * { grid-column: 1 / -1; }

.pass-from {
  grid-column: 1 / span 9;
  margin-bottom: var(--s-4);
  font-size: var(--t-16); line-height: var(--l-16);
  font-weight: 500;
  color: var(--deep-foreground);
}
/* lang.js sets has-ref when the address carries a code: the line keeps its place from the first
   paint and only becomes visible when site.js has the name. */
html.has-ref .pass-from { display: block !important; }
html.has-ref .pass-from[hidden] { visibility: hidden; }
.kicker {
  grid-column: 1 / span 9;
  font-size: var(--t-18); line-height: var(--l-18);
  font-weight: 500;
  color: var(--deep-muted);
  text-wrap: balance;
}
.headline {
  grid-column: 1 / span 10;
  margin-top: var(--s-5);
  margin-left: -0.04em;                 /* optical: the S sits on the same edge as the kicker */
  font-size: var(--t-60);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--deep-foreground);
}
.subline {
  grid-column: 1 / span 6;
  margin-top: var(--s-6);
  font-size: var(--t-20); line-height: 1.5;
  color: var(--deep-foreground);
  text-wrap: pretty;
}

/* The three doors, one quiet row. Developers first, and the only one with a light rule. */
.doors {
  margin-top: var(--s-12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--s-6);
}
.door {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4) 0 var(--s-2);
  border-top: 1px solid var(--deep-border);
  color: var(--deep-foreground);
  transition: border-color var(--fast) var(--ease);
}
.door-dev { border-top-color: var(--deep-foreground); }
.door-who { font-size: var(--t-14); line-height: var(--l-14); font-weight: 500; color: var(--deep-muted); }
.door-do { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-20); line-height: var(--l-20); font-weight: 600; letter-spacing: -0.01em; }
.arrow { flex: none; width: 20px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--fast) var(--ease); }
.door:hover { border-top-color: var(--deep-accent); }
.door:hover .arrow { transform: translateX(3px); }
.door:focus-visible { outline-offset: 4px; }

/* The wave at the foot of the band: four rows. On the first screen they drift slowly, each at its
   own pace, and a length of light sea glides along one of them (wave.js, transforms only). On the
   404 page the light sea travels once. Still under reduced motion. */
.band-wave { flex: none; overflow: hidden; height: 48px; margin-bottom: var(--s-6); contain: strict; }
.wave svg { display: block; max-width: none; overflow: hidden; }

/* ── Below the fold, on near-white ─────────────────────────────────── */

.light { background: var(--background); padding-top: var(--s-16); border-top: 1px solid var(--band-end); }
.light:focus { outline: none; }

/* The letter, at reading width, set in from the left by three of the twelve columns. */
.letter {
  max-width: 36rem;
  margin-left: calc((100% + var(--s-6)) / 12 * 3);
  font-size: var(--t-18); line-height: var(--l-18);
}
.letter p + p { margin-top: var(--s-5); }
.letter p { text-wrap: pretty; }
.letter .sign { margin-top: var(--s-8); font-weight: 600; }
.letter .sign .dot { color: var(--muted-foreground); }
.letter .who { margin-top: var(--s-2); font-size: var(--t-14); line-height: var(--l-14); color: var(--muted-foreground); max-width: 34em; }
.letter .sign + .who { margin-top: var(--s-3); }
.letter .place { margin-top: var(--s-3); font-size: var(--t-14); line-height: var(--l-14); color: var(--muted-foreground); }
.letter .sign + .place { margin-top: 0; }

/* The letter opens in place. With JavaScript (html.js, set in the head) it is drawn closed on its
   first paragraph, under it one door like the three on the first screen: a rule, the words, the
   arrow, pointing down. Opened, the rest unfolds from that rule; at its end the same door points up.
   Without JavaScript the whole letter shows and neither door is drawn. */
.letter-toggle { display: none; }
html.js .letter-toggle {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-width: min(100%, 20rem);
  margin: var(--s-8) 0 0; padding: var(--s-4) 0 var(--s-2);
  background: none; border: 0; border-top: 1px solid var(--foreground); border-radius: 0;
  color: var(--foreground); font-size: var(--t-20); line-height: var(--l-20); font-weight: 600; letter-spacing: -0.01em;
  text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
html.js .letter-toggle .arrow { transform: rotate(90deg); }
html.js .letter-close .arrow { transform: rotate(-90deg); }
html.js .letter-toggle:hover { border-top-color: var(--link); color: var(--link); }
html.js .letter-open:hover .arrow { transform: rotate(90deg) translateX(3px); }
html.js .letter-close:hover .arrow { transform: rotate(-90deg) translateX(3px); }
html.js .letter-toggle:focus-visible { outline-offset: 4px; }
html.js .letter:not(.is-open) .letter-more { display: none; }
html.js .letter.is-open .letter-open { display: none; }
.letter-more { padding-top: var(--s-5); }
.letter-more.is-moving { overflow: hidden; }
.letter-more > p:focus { outline: none; }
html.js .letter-close { display: flex; margin-top: var(--s-12); width: fit-content; }
.letter-door { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.letter-door:hover { text-decoration-thickness: 2px; }

/* The three doors in full: what the door says on the left, its form on the right. */
.full-doors {
  margin-top: var(--s-16);
  padding-top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}
.fd {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-6);
  row-gap: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--foreground);
  scroll-margin-top: var(--s-6);
}
.fd-say { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s-3); }
.fd-act { grid-column: 7 / span 6; padding-top: var(--s-1); }
.fd-who { font-size: var(--t-24); line-height: var(--l-24); font-weight: 600; letter-spacing: -0.01em; }
.fd-lead { font-size: var(--t-20); line-height: var(--l-20); font-weight: 500; text-wrap: balance; }
.fd-text { font-size: var(--t-16); line-height: var(--l-16); color: var(--muted-foreground); max-width: 30em; text-wrap: pretty; }

/* ── Forms ─────────────────────────────────────────────────────────── */

.field { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-size: var(--t-14); line-height: var(--l-14); font-weight: 600; color: var(--foreground); }
.field .opt { font-weight: 400; color: var(--muted-foreground); }
.field input {
  display: block; width: 100%; height: 48px; margin: 0;
  padding: 0 var(--s-3);
  background: var(--field-bg); color: var(--foreground);
  border: 1px solid var(--input); border-radius: var(--radius);
  font-size: var(--t-16); line-height: var(--l-16);
  transition: border-color var(--fast) var(--ease);
}
.field input:hover { border-color: var(--foreground); }
.field input:focus-visible { outline-offset: 1px; border-color: var(--ring); }
.field input[aria-invalid="true"] { border-color: var(--foreground); border-width: 2px; padding: 0 calc(var(--s-3) - 1px); }
.field-err { font-size: var(--t-14); line-height: var(--l-14); font-weight: 600; color: var(--foreground); }
.field-err:empty { display: none; }
/* A small mark before every error, in ink: Lucide's circle-alert, the kit's icon set, stroke 2 under 16 px. */
.field-err, .req-status { display: flex; gap: var(--s-2); align-items: flex-start; }
.field-err::before, .req-status::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 3px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.req .button { margin-top: var(--s-6); }
.req-status { margin-top: var(--s-3); font-size: var(--t-14); line-height: var(--l-14); font-weight: 600; color: var(--foreground); max-width: 34em; }
.req-status:empty { display: none; }
/* Data protection: a small fold under the button, closed by default (native details/summary). */
.data-fold { margin-top: var(--s-4); }
.data-fold > summary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) 0; cursor: pointer; list-style: none;
  font-size: var(--t-14); line-height: var(--l-14); font-weight: 500; color: var(--muted-foreground);
  transition: color var(--fast) var(--ease);
}
.data-fold > summary::-webkit-details-marker { display: none; }
.data-fold > summary::after {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--fast) var(--ease), margin var(--fast) var(--ease);
}
.data-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.data-fold > summary:hover { color: var(--foreground); }
.data-fold > summary:focus-visible { outline-offset: 2px; }
.data-line { margin-top: var(--s-2); font-size: var(--t-14); line-height: var(--l-14); color: var(--muted-foreground); max-width: 34em; }
.data-line a { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.data-line a:hover { text-decoration-thickness: 2px; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--s-6); margin: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: var(--radius);
  font-size: var(--t-16); line-height: 1; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.button[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.button-quiet { background: var(--card); color: var(--foreground); border-color: var(--input); }
.button-quiet:hover { background: var(--accent); border-color: var(--foreground); }

/* ── Thank-you and the pass-on link ─────────────────────────────────── */

.thanks { display: flex; flex-direction: column; gap: var(--s-3); }
.thanks-h { font-size: var(--t-24); line-height: var(--l-24); font-weight: 600; letter-spacing: -0.01em; }
.thanks-h:focus { outline: none; }
.thanks-h:focus-visible { outline: 2px solid var(--ring); }
.pass {
  margin-top: var(--s-5);
  padding: var(--s-6);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.pass-h { font-size: var(--t-18); line-height: var(--l-18); font-weight: 600; }
.pass-p { font-size: var(--t-16); line-height: var(--l-16); color: var(--muted-foreground); max-width: 32em; }
/* The link on its own full-width line, the button under it, so the whole address shows. */
.pass-row { margin-top: var(--s-3); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.pass-row .pass-link { width: 100%; flex: none; }
.pass-link {
  flex: 1 1 auto; min-width: 0; height: 48px; margin: 0;
  padding: 0 var(--s-3);
  background: var(--field-bg); color: var(--foreground);
  border: 1px solid var(--input); border-radius: var(--radius);
  font-size: var(--t-16); font-weight: 500;
}
.pass-link:focus-visible { outline-offset: 1px; }
.pass-copy { flex: none; }

/* ── The doors as dialogs ───────────────────────────────────────────
   site.js moves each door's article into a native <dialog> (showModal: focus stays inside, Escape
   closes). A light piece over the dimmed page, straight edges, no shadow, the terracotta line at its
   foot as at the foot of the page. On a phone it is a full-height sheet. */
html.js .full-doors { display: none; }
html.js.no-dialog .full-doors { display: flex; }
html.has-modal { overflow: hidden; }
.sheet-close { display: none; }

.sheet {
  width: min(60rem, calc(100% - 2 * var(--edge)));
  max-width: none;
  max-height: calc(100vh - 2 * var(--s-12));
  max-height: calc(100dvh - 2 * var(--s-12));
  margin: auto; padding: 0;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border); border-bottom: 4px solid var(--foot-line); border-radius: var(--radius);
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: var(--scrim); }
.sheet[open] { animation: sheet-in 280ms var(--ease); }
.sheet[open]::backdrop { animation: scrim-in 280ms var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes scrim-in { from { opacity: 0; } }

.sheet .sheet-close {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  width: 44px; height: 44px; margin: 0; padding: 0;
  background: var(--background); color: var(--foreground);
  border: 0; border-radius: var(--radius); cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.sheet .sheet-close:hover { background: var(--accent); }

.sheet .fd {
  position: relative;
  border-top: 0; padding: var(--s-12) var(--s-12) var(--s-8);
  column-gap: var(--s-8); row-gap: var(--s-6);
}
.sheet .fd-say { grid-column: 1 / span 5; gap: var(--s-3); }
.sheet .fd-act { grid-column: 6 / span 7; padding-top: 0; max-width: none; }
.sheet .fd-who { font-size: var(--t-14); line-height: var(--l-14); font-weight: 600; letter-spacing: 0; color: var(--muted-foreground); }
.sheet .fd-who:focus { outline: none; }
.sheet .fd-lead { font-size: var(--t-24); line-height: var(--l-24); font-weight: 500; letter-spacing: -0.01em; }
.sheet .fd-text { font-size: var(--t-16); line-height: var(--l-16); }
/* One field per row, full width, so a long email address shows whole (Tommie, 6 October). */
.sheet .req { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sheet .req > .field { margin-top: var(--s-4); }
.sheet .req .button { justify-self: start; margin-top: var(--s-5); }
.sheet .data-fold { margin-top: var(--s-3); }
.sheet .data-line { margin-top: var(--s-2); font-size: var(--t-12); line-height: var(--l-12); max-width: none; }
.sheet .thanks-h { padding-right: var(--s-12); }

/* ── Foot ──────────────────────────────────────────────────────────── */

.foot-line { height: 4px; background: var(--foot-line); margin-top: var(--s-16); }
.foot { background: var(--deep); color: var(--deep-foreground); padding: var(--s-12) 0; }
.foot-in { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; }
.foot-logo { height: 18px; width: auto; aspect-ratio: 570.1 / 70; padding: 0; margin-top: 3px; }
.foot-say { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); text-align: right; }
.foot-mail { font-size: var(--t-16); line-height: var(--l-16); font-weight: 600; }
.foot-mail a { color: var(--deep-foreground); text-decoration: underline; text-decoration-color: var(--deep-border); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.foot-mail a:hover { text-decoration-color: var(--deep-accent); }
.foot-links { font-size: var(--t-14); line-height: var(--l-14); color: var(--deep-muted); }
.foot-links a { color: var(--deep-foreground); text-decoration: underline; text-decoration-color: var(--deep-border); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.foot-links a:hover { text-decoration-color: var(--deep-accent); }
.foot-links a[aria-current="page"] { text-decoration: none; color: var(--deep-muted); }
.foot-company { font-size: var(--t-14); line-height: var(--l-14); color: var(--deep-muted); }
/* The legal line never breaks beside a dot: one line where it fits, one part per line where it does not. */
@media (max-width: 1199px) {
  .foot-company .nw { display: block; }
  .foot-company .dot { display: none; }
}

/* ── The small pages: 404 ──────────────────────────────────────────── */

.page-band { min-height: 100svh; }
.page-short .band { min-height: 0; }
.page-band .hero { align-content: center; }
.page-band .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-note { max-width: 36rem; margin-left: calc((100% + var(--s-6)) / 12 * 3); font-size: var(--t-24); line-height: var(--l-24); font-weight: 500; }

/* ── The privacy policy and the legal notice ───────────────────────── */

.page-legal .light { padding-top: var(--s-8); }
.legal { margin-left: calc((100% + var(--s-6)) / 12 * 2); max-width: 62rem; }
.legal > p, .legal > ul, .legal > h1, .legal > h2, .legal-box { max-width: 42rem; }
.legal p, .legal li { text-wrap: wrap; }
.legal > p + p, .legal > ul + p, .legal > p + ul, .legal > ul + ul { margin-top: var(--s-4); }
.legal ul { margin-bottom: 0; padding-left: 1.25em; }
.legal li + li { margin-top: var(--s-1); }
.legal a { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal strong { font-weight: 600; }
.legal em { font-style: normal; }
.legal-h1 { margin-top: var(--s-6); font-size: var(--t-38); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.legal-note + .legal-h1 { margin-top: var(--s-6); }
.legal > .legal-date { margin-top: var(--s-3); font-size: var(--t-14); line-height: var(--l-14); color: var(--muted-foreground); }
.legal > .legal-date + p { margin-top: var(--s-8); }
.legal-note { font-size: var(--t-14); line-height: var(--l-14); color: var(--muted-foreground); }
.legal h2 { margin-top: var(--s-12); margin-bottom: var(--s-3); font-size: var(--t-20); line-height: var(--l-20); font-weight: 600; letter-spacing: -0.01em; }
.legal-box { margin-top: var(--s-5); padding: var(--s-5); background: var(--panel-bg); border: 1px solid var(--panel-line); border-radius: var(--radius); }
.legal-table { margin-top: var(--s-5); }
.legal-table + p, .legal-box + p, .legal-table + .legal-box, .legal-box + .legal-table { margin-top: var(--s-5); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--t-14); line-height: var(--l-14); }
.legal th { text-align: left; vertical-align: bottom; font-weight: 600; padding: 0 var(--s-4) var(--s-2) 0; border-bottom: 1px solid var(--foreground); }
.legal td { vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--border); }
.legal td:first-child { font-weight: 500; color: var(--foreground); }
.legal-back { font-size: var(--t-14); line-height: var(--l-14); font-weight: 600; }
.legal .legal-back a { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.legal .legal-back a:hover span { text-decoration: underline; text-underline-offset: 0.18em; }
.legal .legal-back-end { margin-top: var(--s-12); }
.legal-back .arrow-back { transition: transform var(--fast) var(--ease); }
.legal-back a:hover .arrow-back { transform: translateX(-3px); }

/* ── Sizes ─────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  /* The band stops short of the screen so the near-white page shows under it. */
  .band { min-height: calc(100svh - var(--s-12)); }
  .band.page-band { min-height: 100svh; }
}

@media (max-width: 1023px) {
  .headline { grid-column: 1 / -1; font-size: var(--t-48); }
  .subline { grid-column: 1 / span 9; }
  .letter, .page-note, .legal { margin-left: 0; }
  .fd-say, .fd-act { grid-column: 1 / -1; }
  .fd-act { max-width: 36rem; }
  .sheet { width: min(40rem, calc(100% - 2 * var(--edge))); }
  .sheet .fd { padding: var(--s-12) var(--s-8) var(--s-8); }
  .sheet .fd-say, .sheet .fd-act { grid-column: 1 / -1; }
}

@media (max-width: 759px) {
  .hero { padding-top: var(--s-6); padding-bottom: var(--s-6); align-content: start; }
  .hero > *, .pass-from, .kicker, .subline { grid-column: 1 / -1; }
  .kicker { font-size: var(--t-14); line-height: var(--l-14); }
  .headline { margin-top: var(--s-3); font-size: var(--t-38); line-height: 1.06; letter-spacing: -0.024em; }
  .subline { margin-top: var(--s-4); font-size: var(--t-16); line-height: var(--l-16); }

  /* On the phone the doors become three rows: who on the left, what on the right. */
  .doors, .page-band .doors { margin-top: var(--s-6); grid-template-columns: 1fr; border-bottom: 1px solid var(--deep-border); }
  .door { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; padding: var(--s-2) 0; }
  .door-do { font-size: var(--t-16); line-height: var(--l-16); gap: var(--s-2); text-align: right; }
  .band-wave { margin-bottom: var(--s-4); }

  .light { padding-top: var(--s-12); }
  .letter { font-size: var(--t-16); line-height: var(--l-16); }
  .letter .sign { margin-top: var(--s-6); }
  .full-doors { margin-top: var(--s-12); padding-top: 0; gap: var(--s-12); }
  .fd-lead { font-size: var(--t-18); line-height: var(--l-18); }
  .req .button { width: 100%; }
  .pass { padding: var(--s-4); }
  .pass-row { flex-direction: column; }
  .pass-copy { width: 100%; }
  .page-note { font-size: var(--t-20); line-height: var(--l-20); }
  .foot-say { align-items: flex-start; text-align: left; }

  /* The dialog becomes a full-height sheet that rises from the foot of the screen. */
  .sheet { width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .sheet[open] { animation: sheet-up 320ms var(--ease); }
  .sheet .fd { display: block; padding: var(--s-2) var(--edge) var(--s-8); }
  .sheet .sheet-close { position: sticky; top: 0; display: flex; margin: 0 calc(-1 * var(--s-3)) -36px auto; }
  .sheet .fd-say { padding-top: var(--s-2); }
  .sheet .fd-who { padding-right: var(--s-12); }
  .sheet .fd-say + .fd-act { margin-top: var(--s-6); }
  .sheet .fd-lead { font-size: var(--t-20); line-height: var(--l-20); }
  .sheet .req { display: block; }
  .sheet .req .button { width: 100%; }
  html.js .letter-toggle { min-width: 100%; font-size: var(--t-18); line-height: var(--l-18); }
  html.js .letter-close { width: 100%; }

  /* Legal pages on the phone: each table row becomes a small block, every cell under its heading. */
  .legal-h1 { font-size: var(--t-30); line-height: var(--l-30); }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal tr { padding: var(--s-3) 0; border-top: 1px solid var(--border); }
  .legal tr:first-child { border-top-color: var(--foreground); }
  .legal tr:last-child { border-bottom: 1px solid var(--border); }
  .legal td { padding: 0; border: 0; }
  .legal td:first-child { font-weight: 600; }
  .legal td + td { margin-top: var(--s-2); }
  .legal td + td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--muted-foreground); }
}

/* Short screens (a laptop at 768 px high, tablets on their side, 200 per cent zoom): less air in
   the first screen, so the three doors are still on it. */
@media (min-width: 760px) and (max-height: 799px) {
  .hero { padding-top: var(--s-4); padding-bottom: var(--s-4); }
  .headline { margin-top: var(--s-3); }
  .subline { margin-top: var(--s-4); }
  .doors { margin-top: var(--s-6); }
  .band-wave { margin-bottom: var(--s-4); }
}
@media (max-width: 759px) and (max-height: 500px) {
  .hero { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .headline { margin-top: var(--s-2); }
  .subline { margin-top: var(--s-3); }
  .doors { margin-top: var(--s-4); }
}

/* Spanish words are longer: "pretty" leaves short ragged lines there, so Spanish body text wraps plainly. */
:lang(es) .letter p, :lang(es) .fd-text, :lang(es) .subline, :lang(es) .pass-p, :lang(es) .data-line { text-wrap: wrap; }

@keyframes sheet-up { from { transform: translateY(100%); } }

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

/* A short page still reaches the bottom of the screen. */
.page-short { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.page-short > .light { flex: 1 0 auto; display: flex; flex-direction: column; }
.page-short > .light > .foot-line { margin-top: auto; }
.page-short > .light > .wrap { padding-bottom: var(--s-16); }

/* The letter's first paragraph ends in an ellipsis while the letter is closed (Tommie, 6 Oct). */
.l01-more { display: none; }
.js .letter:not(.is-open) .l01-stop { display: none; }
.js .letter:not(.is-open) .l01-more { display: inline; }