/* Symphony Works — the letter.
 *
 * SOURCE OF TRUTH: docs/brand/symphony-works/README.md (the delivered handoff,
 * direction 5a) and its reference prototype beside it. Fidelity is "high" — the
 * colours, type, spacing and motion values below are transcribed from that
 * document, not invented here. When the two disagree, the handoff wins.
 *
 * This is the COMPANY brand and shares nothing with Octet's (docs/brand/): rust
 * instead of green, Newsreader / Instrument Serif / JetBrains Mono instead of
 * Inter / IBM Plex Mono. That is deliberate — do not "correct" it toward the
 * product's palette, and do not add this directory to check_design_tokens.mjs.
 *
 * Every declaration lives in this file rather than a style attribute: the CSP in
 * _headers ships without 'unsafe-inline', which blocks inline style attributes.
 */

/* ---- Fonts — self-hosted, no CDN. Licences beside the files in fonts/. ---- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/newsreader-300.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/newsreader-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
}

/* ---- Tokens ---- */

:root {
  --paper: #faf8f3;
  --ink: #1c1b18;
  --ink-body: #2b2a23;
  --ink-muted: #6f6a5c;
  --ink-faint: #9a9384;
  --meta: #a89f8d;
  --rule: #e4ded1;
  --rust: #8a3f26;

  --sky-top: #f0ebe0;
  --sky-mid: #e7e1d4;
  --sky-bottom: #ded8ca;

  --city-far: #c2bbaa;
  --city-mid: #b3ab98;
  --city-near: #a49b87;
  --city-near-stripe: #9d947f;

  --serif: "Newsreader", Georgia, serif;
  --display: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- Stage ---- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  /* The desk. The sheet is the only lit thing on it. */
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 46%,
    var(--sky-bottom) 100%
  );
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ---- Cityscape ----
 *
 * Deliberately abstract, built from plain rectangles. Never a photograph and
 * never a detailed illustration — it must read as a faint paper-toned
 * suggestion of a skyline.
 *
 * THE SCROLL IS A LOOP, so every layer is a seamless tile repeated twice and
 * translated modulo its own tile width. The two copies exist in the markup
 * rather than being cloned by script, because the page has to render correctly
 * with JavaScript off — one copy would leave half the city missing. Each layer
 * wraps on its own period (2400 / 2800 / 3200), which is what stops the three
 * of them ever lining up into a visible repeat.
 *
 * DEPTH IS OCCLUSION, NOT TRANSPARENCY. #near is fully opaque and draws over
 * everything behind it; only the two background layers are faint. An earlier
 * version made all three translucent, and the buildings behind a bridge showed
 * straight through its towers and cables until the bridge stopped reading as a
 * bridge at all. If #near ever gets an opacity again, that returns.
 *
 * The background layers are also kept SHORT — their tops sit at or below the
 * bridge decks — so a bridge's towers, cables and hangers are always drawn
 * against clean sky. That is the other half of the same fix.
 *
 * transform-origin/will-change are here rather than in the script because the
 * script only ever writes `transform`.
 */

.layer {
  position: absolute;
  display: flex;
  align-items: flex-end;
  transform-origin: 0 100%;
  will-change: transform;
}

.layer .tile {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
}

.layer .tile > i {
  display: block;
  flex: 0 0 auto;
}

#far {
  left: 0;
  bottom: 150px;
  height: 200px;
  opacity: 0.3;
}
#far .tile {
  flex: 0 0 2400px;
  gap: 26px;
}
#mid {
  left: 0;
  bottom: 70px;
  height: 300px;
  opacity: 0.5;
}
#mid .tile {
  flex: 0 0 2800px;
  gap: 22px;
}
/* No opacity. See the note above — this layer occludes. */
#near {
  left: 0;
  bottom: 0;
  height: 460px;
}
#near .tile {
  flex: 0 0 3200px;
  gap: 20px;
}

#far .tile > i { background: var(--city-far); }
#mid .tile > i { background: var(--city-mid); }
#near .tile > i { background: var(--city-near); }

/* The stripe reads as windows at low contrast — it is not decoration. */
#near .tile > i.striped {
  background: repeating-linear-gradient(
    90deg,
    var(--city-near) 0 12px,
    var(--city-near-stripe) 12px 24px
  );
}

#far .tile > i:nth-child(1) { width: 88px; height: 110px; }
#far .tile > i:nth-child(2) { width: 52px; height: 160px; }
#far .tile > i:nth-child(3) { width: 120px; height: 85px; }
#far .tile > i:nth-child(4) { width: 64px; height: 135px; }
#far .tile > i:nth-child(5) { width: 96px; height: 180px; }
#far .tile > i:nth-child(6) { width: 44px; height: 100px; }
#far .tile > i:nth-child(7) { width: 132px; height: 120px; }
#far .tile > i:nth-child(8) { width: 70px; height: 165px; }
#far .tile > i:nth-child(9) { width: 58px; height: 90px; }
#far .tile > i:nth-child(10) { width: 110px; height: 145px; }
#far .tile > i:nth-child(11) { width: 80px; height: 105px; }
#far .tile > i:nth-child(12) { width: 46px; height: 175px; }
#far .tile > i:nth-child(13) { width: 126px; height: 95px; }
#far .tile > i:nth-child(14) { width: 68px; height: 140px; }
#far .tile > i:nth-child(15) { width: 100px; height: 115px; }
#far .tile > i:nth-child(16) { width: 54px; height: 160px; }
#far .tile > i:nth-child(17) { width: 140px; height: 90px; }
#far .tile > i:nth-child(18) { width: 74px; height: 150px; }
#far .tile > i:nth-child(19) { width: 92px; height: 125px; }
#far .tile > i:nth-child(20) { width: 116px; height: 80px; }
#far .tile > i:nth-child(21) { width: 60px; height: 155px; }

#mid .tile > i:nth-child(1) { width: 104px; height: 150px; }
#mid .tile > i:nth-child(2) { width: 60px; height: 210px; }
#mid .tile > i:nth-child(3) { width: 132px; height: 120px; }
#mid .tile > i:nth-child(4) { width: 78px; height: 180px; }
/* The pyramid: the only tapered thing in the skyline. A second taper anywhere
   reads as a second pyramid. */
#mid .tile > i:nth-child(5) {
  width: 96px;
  height: 270px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
#mid .tile > i:nth-child(6) { width: 118px; height: 135px; }
#mid .tile > i:nth-child(7) { width: 56px; height: 200px; }
#mid .tile > i:nth-child(8) { width: 146px; height: 110px; }
#mid .tile > i:nth-child(9) { width: 84px; height: 230px; }
#mid .tile > i:nth-child(10) { width: 112px; height: 145px; }
#mid .tile > i:nth-child(11) { width: 66px; height: 190px; }
#mid .tile > i:nth-child(12) { width: 158px; height: 125px; }
#mid .tile > i:nth-child(13) { width: 90px; height: 220px; }
#mid .tile > i:nth-child(14) { width: 124px; height: 130px; }
#mid .tile > i:nth-child(15) { width: 72px; height: 175px; }
#mid .tile > i:nth-child(16) { width: 136px; height: 105px; }
#mid .tile > i:nth-child(17) { width: 100px; height: 160px; }
#mid .tile > i:nth-child(18) { width: 140px; height: 115px; }
#mid .tile > i:nth-child(19) { width: 80px; height: 205px; }
#mid .tile > i:nth-child(20) { width: 120px; height: 140px; }
#mid .tile > i:nth-child(21) { width: 64px; height: 185px; }
#mid .tile > i:nth-child(22) { width: 150px; height: 100px; }

/* Slots 7 and 8 are the bridges; the numbering skips them deliberately. */
#near .tile > i:nth-child(1) { width: 150px; height: 250px; }
#near .tile > i:nth-child(2) { width: 92px; height: 300px; }
#near .tile > i:nth-child(3) { width: 186px; height: 190px; }
#near .tile > i:nth-child(4) { width: 110px; height: 280px; }
#near .tile > i:nth-child(5) { width: 74px; height: 300px; }
#near .tile > i:nth-child(6) { width: 160px; height: 210px; }
#near .tile > i:nth-child(9) { width: 120px; height: 220px; }

/* ---- The two bridges ----
 *
 * The handoff drew one generic suspension bridge in the near layer. It is now
 * two named ones, at the owner's request: the Bay Bridge's western span (four
 * towers around one enormous central anchorage) and the Golden Gate (paired
 * legs, three portal braces, a stepped cap). Still plain rectangles and border
 * arcs at the same flat tones — never a photograph, never a detailed
 * illustration.
 *
 * FIVE RULES, each of them learned by breaking it. A bridge at this size, tone
 * and opacity reads as a bridge only if all five hold:
 *
 *   1. Nothing translucent. The bridge is drawn in the opaque layer, over a
 *      faint city. Let the city show through the structure and the structure
 *      stops being a structure.
 *   2. Clean sky above the deck. The background layers are short enough that a
 *      bridge's towers, cables and hangers never have a building behind them.
 *   3. The deck is the loudest thing on it — one unbroken horizontal bar across
 *      the full width, thicker than any cable. Lose the deck and the towers
 *      read as masts standing in a field.
 *   4. No building shares a bridge's stretch of the layer. The city run ends
 *      before the first bridge and does not resume between them.
 *   5. The hangers are what name the type. A cable alone is an arc; a cable
 *      with the vertical hangers under it is a suspension bridge. They are
 *      background layers on one element, each height solved off the cable's
 *      ellipse, so a whole span of them costs a single span.
 *
 * Cables are a border on a box with one lopsided corner radius, so an arc costs
 * one element.
 */

.bridge {
  position: relative;
  flex: 0 0 auto;
  /* The open water either side. Rule 4 depends on this margin. */
  margin: 0 100px;
}
.bridge span {
  position: absolute;
  background: var(--city-near);
}

/* Rule 3: the roadway, full width, thicker than anything else drawn. */
.bridge .deck {
  left: 0;
  right: 0;
}

/* Three cable shapes, carrying no position of their own — each span pairs one
 * of these with a placement class.
 *   .arc-sag   both ends high, floor at midspan  — a main span
 *   .arc-up    low at the left, steep into a tower at the right
 *   .arc-down  steep off a tower at the left, low at the right
 */
.bridge .arc-sag,
.bridge .arc-up,
.bridge .arc-down {
  background: none;
}
.bridge .arc-sag {
  border-bottom: 7px solid var(--city-near);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
/* Both side spans are a BOTTOM border on a single rounded corner, not a top
 * border. A rounded corner always bulges away from the box, so a top border
 * gives an arc that domes up over the tower — an arch bridge, which is the
 * opposite structure. Taking the bottom border of the opposite corner puts the
 * bulge underneath: flat where the cable meets its anchorage, steepening into
 * the tower, which is how a suspension cable actually hangs.
 */
.bridge .arc-up {
  border-bottom: 7px solid var(--city-near);
  border-radius: 0 0 100% 0 / 0 0 100% 0;
}
.bridge .arc-down {
  border-bottom: 7px solid var(--city-near);
  border-radius: 0 0 0 100% / 0 0 0 100%;
}

/* Rule 5. One element per bridge; every hanger is a background layer, and its
 * height is the cable's ellipse solved at that offset from midspan:
 *   y(u) = sag_floor + sag_depth * (1 - sqrt(1 - (u/half_span)^2))
 * If a span's geometry changes, re-solve these — they will not follow it.
 */
.bridge .hangers {
  background-color: transparent;
  background-repeat: no-repeat;
}

/* -- Golden Gate: 900 × 430 --
 * Towers are 52 wide on a 400 span and carry three portal braces, a solid base
 * and a stepped cap. Legs at 15px and braces at 13px are deliberately heavy:
 * thinner and denser reads as a ladder, which is the mistake this replaced.
 */

.gg {
  width: 900px;
  height: 430px;
}
.gg .deck {
  bottom: 196px;
  height: 10px;
}
.gg .anchor-l,
.gg .anchor-r {
  bottom: 0;
  width: 64px;
  height: 216px;
}
.gg .anchor-l { left: 0; }
.gg .anchor-r { left: 836px; }

.gg .tower {
  bottom: 0;
  width: 52px;
  height: 420px;
  background-color: transparent;
  background-image:
    /* left leg */ linear-gradient(var(--city-near), var(--city-near)),
    /* right leg */ linear-gradient(var(--city-near), var(--city-near)),
    /* pier base */ linear-gradient(var(--city-near), var(--city-near)),
    /* brace 1 */ linear-gradient(var(--city-near), var(--city-near)),
    /* brace 2 */ linear-gradient(var(--city-near), var(--city-near)),
    /* brace 3 */ linear-gradient(var(--city-near), var(--city-near)),
    /* cap */ linear-gradient(var(--city-near), var(--city-near));
  background-size:
    15px 100%,
    15px 100%,
    100% 40px,
    100% 13px,
    100% 13px,
    100% 13px,
    100% 20px;
  background-position:
    left bottom,
    right bottom,
    left bottom 0,
    left bottom 240px,
    left bottom 300px,
    left bottom 360px,
    left bottom 400px;
  background-repeat: no-repeat;
}
.gg .tower-a { left: 224px; }
.gg .tower-b { left: 624px; }

.gg .span-main {
  left: 250px;
  bottom: 232px;
  width: 400px;
  height: 188px;
}
.gg .span-l {
  left: 32px;
  bottom: 216px;
  width: 218px;
  height: 204px;
}
.gg .span-r {
  left: 650px;
  bottom: 216px;
  width: 218px;
  height: 204px;
}

/* Thirteen hangers, 30px apart, solved for sag_floor 232, sag_depth 188,
   half_span 200, deck top 206. They run the full span — stopping short of the
   towers leaves a bald patch exactly where the cable is steepest. */
.gg .hangers {
  left: 0;
  bottom: 206px;
  width: 900px;
  height: 220px;
  background-image:
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near));
  background-size:
    3px 132px,
    3px 90px,
    3px 64px,
    3px 46px,
    3px 35px,
    3px 28px,
    3px 26px,
    3px 28px,
    3px 35px,
    3px 46px,
    3px 64px,
    3px 90px,
    3px 132px;
  background-position:
    left 270px bottom 0,
    left 300px bottom 0,
    left 330px bottom 0,
    left 360px bottom 0,
    left 390px bottom 0,
    left 420px bottom 0,
    left 450px bottom 0,
    left 480px bottom 0,
    left 510px bottom 0,
    left 540px bottom 0,
    left 570px bottom 0,
    left 600px bottom 0,
    left 630px bottom 0;
}

/* -- Bay Bridge, western span: 800 × 340 --
 * Four towers, two sagging main spans, and the central anchorage they all
 * terminate in — the one feature that tells this bridge from any other.
 * Slimmer legs and a shallower profile than the Golden Gate, so the two read as
 * different structures at the same low contrast.
 */

.bay {
  width: 800px;
  height: 340px;
}
.bay .deck {
  bottom: 150px;
  height: 9px;
}
.bay .anchor-l,
.bay .anchor-r {
  bottom: 0;
  width: 46px;
  height: 170px;
}
.bay .anchor-l { left: 0; }
.bay .anchor-r { left: 754px; }
/* The central anchorage: both spans die into this block. */
.bay .anchor-c {
  left: 370px;
  bottom: 0;
  width: 60px;
  height: 235px;
}

.bay .tower {
  bottom: 0;
  width: 40px;
  height: 300px;
  background-color: transparent;
  background-image:
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near));
  background-size:
    11px 100%,
    11px 100%,
    100% 30px,
    100% 10px,
    100% 10px,
    100% 12px;
  background-position:
    left bottom,
    right bottom,
    left bottom 0,
    left bottom 190px,
    left bottom 245px,
    left bottom 288px;
  background-repeat: no-repeat;
}
.bay .tower-1 { left: 100px; }
.bay .tower-2 { left: 280px; }
.bay .tower-3 { left: 480px; }
.bay .tower-4 { left: 660px; }

.bay .span-main-l {
  left: 120px;
  bottom: 196px;
  width: 180px;
  height: 104px;
}
.bay .span-main-r {
  left: 500px;
  bottom: 196px;
  width: 180px;
  height: 104px;
}
.bay .span-l {
  left: 23px;
  bottom: 170px;
  width: 97px;
  height: 130px;
}
.bay .span-r {
  left: 680px;
  bottom: 170px;
  width: 97px;
  height: 130px;
}
/* The two short runs from the inner towers down into the central anchorage. */
.bay .span-c-l {
  left: 300px;
  bottom: 235px;
  width: 100px;
  height: 65px;
}
.bay .span-c-r {
  left: 400px;
  bottom: 235px;
  width: 100px;
  height: 65px;
}

/* Seven hangers per span, solved for sag_floor 196, sag_depth 104,
   half_span 90, deck top 159. */
.bay .hangers {
  left: 0;
  bottom: 159px;
  width: 800px;
  height: 150px;
  background-image:
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near)),
    linear-gradient(var(--city-near), var(--city-near));
  background-size:
    3px 84px, 3px 55px, 3px 41px, 3px 37px, 3px 41px, 3px 55px, 3px 84px,
    3px 84px, 3px 55px, 3px 41px, 3px 37px, 3px 41px, 3px 55px, 3px 84px;
  background-position:
    left 135px bottom 0,
    left 160px bottom 0,
    left 185px bottom 0,
    left 210px bottom 0,
    left 235px bottom 0,
    left 260px bottom 0,
    left 285px bottom 0,
    left 515px bottom 0,
    left 540px bottom 0,
    left 565px bottom 0,
    left 590px bottom 0,
    left 615px bottom 0,
    left 640px bottom 0,
    left 665px bottom 0;
}

#haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 400px;
  background: linear-gradient(
    180deg,
    rgba(238, 233, 222, 0) 0%,
    rgba(238, 233, 222, 0.72) 46%,
    rgba(238, 233, 222, 0.96) 100%
  );
  opacity: 0.4;
  pointer-events: none;
}

/* ---- The scroll track ----
 *
 * 3400px of track drives the parallax while the sticky row holds the sheet
 * perfectly still. Changing the track height changes when the bridge lands.
 */

#scroller {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#scroller::-webkit-scrollbar {
  width: 0;
  display: none;
}
/* Focusable so the stage can be scrolled from the keyboard, but only ringed
   when focus is actually keyboard-driven. */
#scroller:focus {
  outline: none;
}
#scroller:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: -2px;
}

/* Tall only to give the recentring room to hide in — nothing lands at a
 * particular scroll position any more, because there is no end of the track to
 * land at. parallax.js returns scrollTop to the middle whenever it nears an
 * edge, so this height sets how far you travel between those silent resets. */
.track {
  height: 6000px;
  position: relative;
}

.stick {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- The sheet ----
 * Paper, not a card: no border, no radius, a contact shadow plus a soft cast.
 */

.sheet {
  width: 820px;
  height: 690px;
  padding: 60px 84px 34px;
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(60, 50, 30, 0.14),
    0 30px 60px -20px rgba(60, 50, 30, 0.4);
  display: flex;
  flex-direction: column;
  animation: swRise 900ms var(--ease) both;
}

@keyframes swRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.dateline {
  align-self: flex-end;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--ink-faint);
}

.body {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.74;
  color: var(--ink-body);
  text-wrap: pretty;
}

.body-open {
  margin-top: 34px;
}

.closing {
  text-indent: 2.2em;
}

.dropcap {
  float: left;
  font-family: var(--display);
  font-size: 110px;
  line-height: 0.72;
  padding: 10px 13px 0 0;
  margin-left: -3px;
  color: var(--rust);
}

.sig {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yours {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  color: var(--ink-muted);
}

.signature {
  font-family: var(--display);
  font-style: italic;
  font-size: 42px;
  line-height: 1.24;
}

/* The letterhead: legal name, registered form, postal address, phone, email.
 * Three mono lines under the signature — the same voice the entity line always
 * used, carrying the detail a business-verification reviewer comes here for.
 * Each `address > span` block starts a new line, which is what keeps this to
 * three lines without any of it being a separate element per line.
 */
.entity {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 14px;
}

.entity .care-of,
.entity [itemprop="address"],
.entity .reach {
  display: block;
}

.entity a {
  color: var(--meta);
  transition: color 160ms var(--ease);
}
.entity a:hover,
.entity a:focus-visible {
  color: var(--ink);
}

.foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 22px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--meta);
}

.foot-links {
  display: flex;
  gap: 22px;
}

.foot a {
  transition: color 160ms var(--ease);
}
.foot a:hover,
.foot a:focus-visible {
  color: var(--ink);
}

.foot .mail {
  color: var(--rust);
  transition: opacity 160ms var(--ease);
}
.foot .mail:hover,
.foot .mail:focus-visible {
  color: var(--rust);
  opacity: 0.65;
}

#hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8d8574; /* token-exempt: the hint sits on the desk, not on paper —
                     it is between --meta and --ink-muted and named nowhere. */
}

/* ---- Legal pages ----
 * Same paper, no cityscape. Set a little smaller than the letter so a long
 * document stays comfortable.
 */

body.doc {
  overflow: auto;
  background: var(--sky-mid);
}

.doc .sheet {
  width: min(820px, 100%);
  height: auto;
  margin: 48px auto;
  padding: 64px 84px 34px;
  animation: none;
}

.doc h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.doc h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 23px;
  line-height: 1.4;
  margin: 34px 0 8px;
}

.doc p,
.doc li {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-body);
  text-wrap: pretty;
}

.doc p + p {
  margin-top: 14px;
}

.doc ul {
  margin: 12px 0 0 1.2em;
}

.doc li + li {
  margin-top: 8px;
}

.doc a:not(.foot a) {
  color: var(--rust);
}

.doc .updated {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 40px;
}

.doc em {
  font-style: italic;
}

/* Conspicuous under UCC §2-316: a warranty disclaimer has to stand out from
 * the paragraphs around it. The usual answer is a block of capitals in the body
 * face, which this brand cannot do — only one weight of Newsreader is
 * self-hosted, so bold would be synthesised, and a wall of capital serif on
 * this paper looks like a mistake. Instead the two clauses that must be
 * conspicuous take the company's other voice: mono, uppercase, against a rust
 * rule. Different face, different case, different colour of rule from anything
 * else in the document.
 */
.doc .conspicuous {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.85;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-body);
  border-left: 2px solid var(--rust);
  padding-left: 18px;
  margin-top: 14px;
}

/* The postal block — the address a verifier copies out. Mono, so it reads as a
 * record rather than as prose, and left as-is by the wrapping rules above. */
.doc .postal {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--ink-body);
  margin-top: 16px;
}

/* The legal name never breaks across a line. */
.doc .nowrap {
  white-space: nowrap;
}

.doc .foot {
  margin-top: 56px;
}

/* ---- Responsive ----
 *
 * The handoff leaves this "not yet designed, recommended" and names the moves:
 * full-width sheet, smaller drop cap and body, stacked footer, gentler
 * parallax. Below 900px the sticky row is also dropped so a sheet taller than
 * the viewport can simply be scrolled — the letter is the whole site, and it
 * must always be reachable.
 */

@media (max-width: 900px) {
  .track {
    height: auto;
  }

  /* The side margin lives on the row, not the sheet: the sheet is a flex item,
     so a width of 100% plus its own margins would overflow by exactly that
     much. */
  .stick {
    position: static;
    height: auto;
    padding: 32px 24px 48px;
  }

  .sheet {
    width: 100%;
    height: auto;
    padding: 40px 28px 28px;
  }

  .body {
    font-size: 19px;
    line-height: 1.7;
  }

  .dropcap {
    font-size: 72px;
    padding: 8px 10px 0 0;
  }

  .signature {
    font-size: 34px;
  }

  .sig {
    margin-top: 44px;
  }

  /* The letterhead wraps here no matter what; loosening the tracking only
     makes it wrap in more places. */
  .entity {
    letter-spacing: 0.1em;
    line-height: 2;
  }

  .doc .conspicuous {
    font-size: 11.5px;
    padding-left: 14px;
  }

  .doc .postal {
    font-size: 11px;
  }

  .foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 40px;
  }

  /* Block-level here, so auto width fills the containing block minus margins. */
  .doc .sheet {
    width: auto;
    margin: 24px;
    padding: 40px 28px 28px;
  }

  #hint {
    display: none;
  }
}

/* ---- Reduced motion ----
 * No entrance, and the script drops the parallax multipliers to ~0.15x.
 */

@media (prefers-reduced-motion: reduce) {
  .sheet {
    animation: none;
  }

  .foot a,
  .foot .mail {
    transition: none;
  }
}