/* Qwith — site styles
   The design-system tokens (black, gold, white, Didot, 2px radius) carry over unchanged.
   On top of them sits a cartographic layer: a map neatline around the viewport, engraved
   hairlines, parchment folios, and halftone screens (CSS dot bands here, canvas dots in site.js). */

/* ---------- Fonts ---------- */

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

@font-face {
  font-family: "IM Fell English";
  src: url("../fonts/IMFellEnglish-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IM Fell English";
  src: url("../fonts/IMFellEnglish-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --black: #000000;
  --gold: #c4a652;
  --gold-soft: rgba(196, 166, 82, 0.55);
  --gold-faint: rgba(196, 166, 82, 0.22);
  --white: #f6f5f1;
  --white-soft: rgba(246, 245, 241, 0.72);
  --white-faint: rgba(246, 245, 241, 0.42);
  --hairline: rgba(246, 245, 241, 0.16);

  /* Parchment folios: the design-system white, aged a little, printed in warm ink. */
  --paper: #ebe6d8;
  --ink: #15130f;
  --ink-soft: rgba(21, 19, 15, 0.72);
  --ink-faint: rgba(21, 19, 15, 0.4);
  --ink-line: rgba(21, 19, 15, 0.2);

  --radius: 2px;

  --font: "Didot", "Bodoni 72", "Bodoni MT", "Didot LT STD", Georgia, serif;
  --fell: "IM Fell English", "Didot", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --frame: 14px;
  --gutter: clamp(28px, 5.4vw, 88px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);

  /* Stippled night sky: single dots on tiles of coprime sizes, so the pattern never visibly repeats. */
  --stars:
    radial-gradient(circle at 23px 41px, rgba(246, 245, 241, 0.55) 0.6px, transparent 1.3px) 0 0 / 173px 173px,
    radial-gradient(circle at 131px 87px, rgba(246, 245, 241, 0.32) 0.5px, transparent 1.1px) 0 0 / 211px 211px,
    radial-gradient(circle at 71px 199px, rgba(246, 245, 241, 0.6) 0.8px, transparent 1.5px) 0 0 / 263px 263px,
    radial-gradient(circle at 190px 29px, rgba(196, 166, 82, 0.55) 0.7px, transparent 1.4px) 0 0 / 317px 317px,
    radial-gradient(circle at 300px 260px, rgba(246, 245, 241, 0.4) 1px, transparent 1.8px) 0 0 / 389px 389px,
    radial-gradient(circle at 50px 330px, rgba(246, 245, 241, 0.28) 0.5px, transparent 1px) 0 0 / 431px 431px,
    radial-gradient(circle at 420px 120px, rgba(246, 245, 241, 0.7) 1.1px, transparent 2px) 0 0 / 523px 523px,
    radial-gradient(circle at 77px 512px, rgba(196, 166, 82, 0.4) 0.6px, transparent 1.2px) 0 0 / 601px 601px;

  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html {
  background: var(--black);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Print grain over everything. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg,
canvas {
  display: block;
}

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

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
}

em {
  font-style: normal;
}

::selection {
  background: var(--gold);
  color: var(--black);
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.skip {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Shared type ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 48px;
  height: 1px;
  background: currentColor;
}

.eyebrow span {
  color: var(--white-faint);
}

/* Fell italic is the hand that writes in the margins. */
.fell,
.hand {
  font-family: var(--fell);
  font-style: italic;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Buttons and links ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px 14px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease);
}

/* Fill rises as a halftone screen, not a flat wipe. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle, var(--gold) 2.2px, transparent 2.6px) 0 0 / 6px 6px,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 0 no-repeat;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease), opacity 0.3s ease, background-size 0.5s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  color: var(--black);
}

.btn:hover::before,
.btn:focus-visible::before {
  opacity: 1;
  transform: none;
  background-size: 6px 6px, 100% 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 19px;
  color: var(--white-soft);
  transition: color 0.3s ease;
}

.link-arrow::after {
  content: "";
  width: 34px;
  height: 7px;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat,
    radial-gradient(circle, currentColor 1.6px, transparent 2px) 100% 50% / 7px 7px no-repeat;
  transition: width 0.4s var(--ease);
}

.link-arrow:hover {
  color: var(--gold);
}

.link-arrow:hover::after {
  width: 52px;
}

/* ---------- Map neatline ---------- */

.frame {
  position: fixed;
  inset: var(--frame);
  z-index: 60;
  pointer-events: none;
  color: rgba(246, 245, 241, 0.5);
  mix-blend-mode: difference;
}

.frame__side {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
}

.frame__side::before,
.frame__side::after {
  content: "";
  flex: 1;
  align-self: stretch;
}

.frame__side--top,
.frame__side--bottom {
  left: 0;
  right: 0;
  height: 9px;
}

.frame__side--top {
  top: 0;
}

.frame__side--bottom {
  bottom: 0;
  align-items: flex-end;
}

.frame__side--top::before,
.frame__side--top::after {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 30px, transparent 30px 60px) 0 5px / 100% 2px no-repeat;
}

.frame__side--bottom::before,
.frame__side--bottom::after {
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 30px, transparent 30px 60px) 0 2px / 100% 2px no-repeat;
}

.frame__side--left,
.frame__side--right {
  top: 0;
  bottom: 0;
  width: 9px;
  flex-direction: column;
}

.frame__side--left {
  left: 0;
}

.frame__side--right {
  right: 0;
}

.frame__side--left::before,
.frame__side--left::after {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, currentColor 0 30px, transparent 30px 60px) 5px 0 / 2px 100% no-repeat;
}

.frame__side--right::before,
.frame__side--right::after {
  background:
    linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, currentColor 0 30px, transparent 30px 60px) 2px 0 / 2px 100% no-repeat;
}

.frame__side span {
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.frame__side--bottom span {
  transform: translateY(4px);
}

.frame__side--top span {
  transform: translateY(-1px);
}

.frame__side--left span,
.frame__side--right span {
  writing-mode: vertical-rl;
}

.frame__side--left span {
  transform: rotate(180deg) translateX(-1px);
}

.frame__side--right span {
  transform: translateX(1px);
}

/* Corner blocks where the rules meet. */
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 9px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 9px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 9px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 9px 9px no-repeat;
  opacity: 0.6;
}

.frame::after {
  display: none;
}

/* ---------- Masthead ---------- */

.masthead {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: calc(var(--frame) + 26px) var(--gutter) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand__mark {
  width: 46px;
  height: 46px;
  transition: transform 1.2s var(--ease-io);
}

.brand:hover .brand__mark {
  transform: rotate(90deg);
}

.brand__name {
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.brand__llc {
  margin-left: -4px;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.3em;
  color: var(--gold);
  align-self: flex-start;
  margin-top: 13px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-soft);
  transition: color 0.3s ease;
}

.nav__no {
  font-family: var(--fell);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold);
}

/* A hairline with a bead, drawn out from the bead on hover. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.3em;
  bottom: 0;
  height: 5px;
  background:
    radial-gradient(circle, var(--gold) 1.6px, transparent 2px) 50% 50% / 5px 5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 50% / 0 1px no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease, background-size 0.5s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--white);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  opacity: 1;
  background-size: 5px 5px, 100% 1px;
}

.chart-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
}

.chart-toggle__icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  transition: transform 0.8s var(--ease-io);
}

.chart-toggle__icon path {
  fill: var(--gold);
  stroke: none;
}

.chart-toggle[aria-expanded="true"] .chart-toggle__icon {
  transform: rotate(225deg);
}

/* ---------- Chart (small-screen menu) ---------- */

.chart {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  align-content: center;
  padding: 120px var(--gutter) 64px;
  background: var(--stars), var(--black);
  clip-path: circle(0 at var(--cx, 90%) var(--cy, 40px));
  transition: clip-path 0.8s var(--ease-io);
  overflow-y: auto;
}

.chart[hidden] {
  display: none;
}

.chart.is-open {
  clip-path: circle(150% at var(--cx, 90%) var(--cy, 40px));
}

.chart__rose {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(118vw, 640px);
  height: min(118vw, 640px);
  margin: calc(min(118vw, 640px) / -2) 0 0 calc(min(118vw, 640px) / -2);
  color: var(--white);
  opacity: 0.13;
  --rose-paper: var(--black);
  pointer-events: none;
}

.chart__pointer {
  opacity: 1;
}

.chart__needle {
  transform: rotate(var(--bearing, 0deg));
  transition: transform 1s var(--ease-io);
}

.chart__nav {
  position: relative;
  display: grid;
  gap: 4px;
}

.chart__nav a {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.chart__deg {
  grid-row: span 2;
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.chart__name {
  font-size: clamp(34px, 10vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chart__note {
  font-family: var(--fell);
  font-style: italic;
  font-size: 17px;
  color: var(--white-faint);
}

.chart__nav a[aria-current="page"] .chart__name {
  color: var(--gold);
}

.chart__motto {
  position: relative;
  margin-top: 36px;
  font-family: var(--fell);
  font-style: italic;
  color: var(--white-faint);
}

/* ---------- Halftone (canvas) ---------- */

.ht {
  position: relative;
}

.ht > img {
  width: 100%;
  height: 100%;
}

.ht__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ht.is-halftone > img {
  visibility: hidden;
}

/* If the canvas can't read the image (e.g. opened from file://), show the photograph
   through a CSS dot screen instead. */
.ht.is-fallback > img {
  filter: grayscale(1) contrast(1.15);
  -webkit-mask: radial-gradient(circle, #000 1.4px, transparent 1.9px) 0 0 / 4px 4px;
  mask: radial-gradient(circle, #000 1.4px, transparent 1.9px) 0 0 / 4px 4px;
}

/* ---------- Halftone bands (CSS) ---------- */

/* Ten rows of dots, each smaller than the last; alternate rows offset half a cell. */
.ht-band {
  --c: 11px;
  --dot: var(--black);
  position: relative;
  z-index: 2;
  height: calc(var(--c) * 10);
  margin-bottom: calc(var(--c) * -10);
  pointer-events: none;
  background:
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.7), transparent calc(var(--c) * 0.7 + 0.6px)) 0 0 / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.6), transparent calc(var(--c) * 0.6 + 0.6px)) calc(var(--c) / 2) var(--c) / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.52), transparent calc(var(--c) * 0.52 + 0.6px)) 0 calc(var(--c) * 2) / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.45), transparent calc(var(--c) * 0.45 + 0.6px)) calc(var(--c) / 2) calc(var(--c) * 3) / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.38), transparent calc(var(--c) * 0.38 + 0.6px)) 0 calc(var(--c) * 4) / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.31), transparent calc(var(--c) * 0.31 + 0.6px)) calc(var(--c) / 2) calc(var(--c) * 5) / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.25), transparent calc(var(--c) * 0.25 + 0.6px)) 0 calc(var(--c) * 6) / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.19), transparent calc(var(--c) * 0.19 + 0.6px)) calc(var(--c) / 2) calc(var(--c) * 7) / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.13), transparent calc(var(--c) * 0.13 + 0.6px)) 0 calc(var(--c) * 8) / var(--c) var(--c) repeat-x,
    radial-gradient(circle, var(--dot) calc(var(--c) * 0.08), transparent calc(var(--c) * 0.08 + 0.6px)) calc(var(--c) / 2) calc(var(--c) * 9) / var(--c) var(--c) repeat-x;
}

/* Flipped: dots grow toward the bottom edge. */
.ht-band--up {
  transform: scaleY(-1);
  margin-bottom: 0;
  margin-top: calc(var(--c) * -10);
}

/* ---------- Veil: the opening seal and page wipes ---------- */

.veil {
  display: none;
}

.js .veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: block;
  background: var(--black);
  /* Failsafe: if the script never takes over, lift the veil anyway. */
  animation: veil-failsafe 0.6s ease 6s forwards;
}

.js .veil.is-live {
  animation: none;
}

.veil.is-screen {
  background: transparent;
}

.veil.is-gone {
  visibility: hidden;
  pointer-events: none;
}

@keyframes veil-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.veil__screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.veil__cross {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.veil__cross--h {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 30%, var(--white) 50%, var(--gold-soft) 70%, transparent);
  transform: scaleX(0);
}

.veil__cross--v {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft) 30%, var(--white) 50%, var(--gold-soft) 70%, transparent);
  transform: scaleY(0);
}

.seal {
  --s: min(54vmin, 320px);
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 1.62);
  height: calc(var(--s) * 1.62);
  margin: calc(var(--s) * -0.81) 0 0 calc(var(--s) * -0.81);
  display: none;
}

.seal__dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  opacity: 0;
}

.seal__ring {
  stroke: var(--hairline);
  stroke-width: 1;
}

.seal__ticks {
  stroke: var(--white-faint);
  stroke-width: 7;
}

.seal__ticks--major {
  stroke: var(--gold);
  stroke-width: 12;
}

.seal__motto {
  fill: var(--white-soft);
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.3em;
}

/* Material's indeterminate CircularProgress, drawn as a hairline orbit. */
.seal__arc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 1.22);
  height: calc(var(--s) * 1.22);
  margin: calc(var(--s) * -0.61) 0 0 calc(var(--s) * -0.61);
  fill: none;
  animation: mui-rotate 1.4s linear infinite;
}

.seal__arc--inner {
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 1.1);
  margin: calc(var(--s) * -0.55) 0 0 calc(var(--s) * -0.55);
  animation-duration: 2.1s;
  animation-direction: reverse;
}

.seal__track {
  stroke: var(--gold-faint);
  stroke-width: 0.12;
}

.seal__spin {
  stroke: var(--gold);
  stroke-width: 0.42;
  stroke-linecap: round;
  stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0;
  animation: mui-dash 1.4s ease-in-out infinite;
}

.seal__arc--inner .seal__spin {
  stroke: var(--white-soft);
  stroke-width: 0.2;
  animation-duration: 2.1s;
}

@keyframes mui-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mui-dash {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }
  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}

/* Locked: the arc closes into a full ring. */
.veil.is-locked .seal__arc {
  animation-play-state: paused;
}

.veil.is-locked .seal__spin {
  animation: mui-close 0.5s var(--ease-io) forwards;
}

@keyframes mui-close {
  to {
    stroke-dasharray: 127px, 0;
    stroke-dashoffset: 0;
  }
}

.seal__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
}

.seal__turn,
.seal__logo .ht {
  width: 100%;
  height: 100%;
}

.veil__hud {
  position: absolute;
  inset: calc(var(--frame) + 22px) calc(var(--frame) + 26px);
  display: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-faint);
  font-variant-numeric: tabular-nums;
}

.veil__hud > * {
  position: absolute;
  opacity: 0;
}

.veil__tag {
  top: 0;
  left: 0;
}

.veil__coords {
  top: 0;
  right: 0;
}

.veil__count {
  left: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.veil__count b {
  font-weight: 400;
  font-family: var(--font);
  font-size: 44px;
  letter-spacing: 0.04em;
  color: var(--white);
}

.veil__year {
  right: 0;
  bottom: 0;
}

.veil.is-seal .seal,
.veil.is-seal .veil__hud {
  display: block;
}

.veil.is-seal .seal__dial {
  animation: dial-in 1.6s var(--ease) 0.15s forwards, dial-turn 60s linear infinite;
}

.veil.is-seal .veil__hud > * {
  animation: fade-in 0.9s ease forwards;
}

.veil.is-seal .veil__coords { animation-delay: 0.2s; }
.veil.is-seal .veil__count { animation-delay: 0.35s; }
.veil.is-seal .veil__year { animation-delay: 0.5s; }

.veil.is-seal .veil__cross--h {
  animation: cross-h 1.6s var(--ease-io) 0.3s forwards;
}

.veil.is-seal .veil__cross--v {
  animation: cross-v 1.6s var(--ease-io) 0.45s forwards;
}

@keyframes dial-in {
  from {
    opacity: 0;
    transform: scale(0.86) rotate(-40deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dial-turn {
  to {
    rotate: -360deg;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes cross-h {
  to {
    opacity: 0.55;
    transform: scaleX(1);
  }
}

@keyframes cross-v {
  to {
    opacity: 0.4;
    transform: scaleY(1);
  }
}

/* Leaving: everything but the logo dissolves outward while the dots open. */
.veil.is-leaving .seal__dial,
.veil.is-leaving .seal__arc,
.veil.is-leaving .veil__hud,
.veil.is-leaving .veil__cross {
  transition: opacity 0.7s ease, transform 1.1s var(--ease);
  opacity: 0;
}

.veil.is-leaving .seal__dial,
.veil.is-leaving .seal__arc {
  transform: scale(1.35);
}

/* Short wait between pages: a lone arc, shown only if loading drags. */
.veil__wait {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  fill: none;
  opacity: 0;
  animation: mui-rotate 1.4s linear infinite;
}

.veil__wait circle {
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  animation: mui-dash 1.4s ease-in-out infinite;
}

.veil.is-waiting .veil__wait {
  opacity: 1;
  transition: opacity 0.3s ease 0.35s;
}

/* Hold the masthead mark back while the seal flies into its place. */
.is-sealing .masthead .brand__mark {
  opacity: 0;
}

.is-sealing,
.is-sealing body {
  overflow: hidden;
}

/* ---------- Reveal on scroll ---------- */

.ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Hero (home) ---------- */

.hero {
  /* The stage is sized from the statue's width; every layer inside is placed in multiples of it. */
  --w: max(230px, min(30vw, calc((100svh - 220px) / 2.05), 470px));
  --hx: calc(var(--w) * 0.4224);
  --hy: calc(var(--w) * 0.3621);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: end;
  min-height: 100svh;
  padding: 140px var(--gutter) 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--stars), var(--black);
}

.hero__copy {
  position: relative;
  z-index: 4;
  align-self: center;
  padding: 40px 0 72px;
}

.hero__title {
  font-size: clamp(46px, 6.6vw, 112px);
  line-height: 0.96;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hero__title .line {
  display: block;
}

.hero__title em {
  font-family: var(--fell);
  font-style: italic;
  text-transform: none;
  color: var(--gold);
  letter-spacing: 0;
  margin-right: 0.08em;
}

.hero__lede {
  max-width: 27ch;
  margin: 34px 0 44px;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.5;
  color: var(--white-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 34px;
}

.stage {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: var(--w);
  aspect-ratio: 1160 / 2340;
}

.stage > * {
  position: absolute;
}

/* Celestial diagram centred on where the head would be. */
.stage__chart {
  --d: calc(var(--w) * 2.2);
  left: calc(var(--hx) - var(--d) / 2);
  top: calc(var(--hy) - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  z-index: 0;
  overflow: visible;
}

.chart-svg {
  fill: none;
}

.chart-svg .c-ring {
  stroke: var(--gold-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-svg .c-ring--faint {
  stroke: var(--gold-faint);
}

.chart-svg .c-ring--white {
  stroke: var(--hairline);
}

.chart-svg .c-dash {
  stroke: var(--hairline);
  stroke-dasharray: 2 6;
  vector-effect: non-scaling-stroke;
}

.chart-svg .c-ticks {
  stroke: rgba(246, 245, 241, 0.35);
  stroke-width: 9;
}

.chart-svg .c-ticks--major {
  stroke: var(--gold);
  stroke-width: 16;
}

.chart-svg text {
  fill: var(--white-faint);
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: 0.32em;
}

.chart-svg .c-deg {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--white-faint);
  text-anchor: middle;
}

.chart-svg .c-quarter {
  font-family: var(--fell);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.06em;
  fill: var(--gold);
  text-anchor: middle;
}

.chart-svg .c-node {
  fill: var(--black);
  stroke: var(--gold-soft);
  vector-effect: non-scaling-stroke;
}

.chart-svg .c-node-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  fill: var(--gold);
  text-anchor: middle;
  dominant-baseline: central;
}

.chart-svg .c-planet {
  fill: var(--gold);
}

.chart-svg .c-planet--white {
  fill: var(--white);
}

.spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: turn 220s linear infinite;
}

.spin--rev {
  animation-direction: reverse;
  animation-duration: 160s;
}

.spin--fast {
  animation-duration: 48s;
}

.spin--faster {
  animation-duration: 30s;
  animation-direction: reverse;
}

@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}

/* Halftone sun behind the head. */
.stage__sun {
  --g: calc(var(--w) * 1.5);
  left: calc(var(--hx) - var(--g) / 2);
  top: calc(var(--hy) - var(--g) / 2);
  width: var(--g);
  height: var(--g);
  z-index: 1;
}

.stage__statue {
  inset: 0;
  z-index: 2;
}

/* Long crosshair through the head, as in an observatory plate. */
.stage__cross {
  z-index: 1;
  pointer-events: none;
}

.stage__cross--h {
  left: -200vw;
  width: 400vw;
  top: var(--hy);
  height: 1px;
  background: linear-gradient(90deg, transparent 40%, var(--gold-faint) 47%, rgba(246, 245, 241, 0.55) 50%, var(--gold-faint) 53%, transparent 60%);
}

.stage__cross--v {
  top: -200vh;
  height: 400vh;
  left: var(--hx);
  width: 1px;
  background: linear-gradient(180deg, transparent 45%, var(--gold-faint) 48.5%, rgba(246, 245, 241, 0.5) 50%, var(--gold-faint) 51.5%, transparent 55%);
}

/* Marginal annotation with a leader line to the wing. */
.stage__note {
  z-index: 3;
  right: calc(100% + 10px);
  top: calc(var(--w) * 1.16);
  width: 210px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 16px;
  line-height: 1.35;
  text-align: right;
  color: var(--white-soft);
  text-shadow: 0 0 10px #000, 0 0 3px #000;
}

.stage__note b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.stage__note::after {
  content: "";
  position: absolute;
  top: 9px;
  left: calc(100% + 10px);
  width: calc(var(--w) * 0.2);
  height: 5px;
  background:
    linear-gradient(var(--gold-soft), var(--gold-soft)) 0 50% / 100% 1px no-repeat,
    radial-gradient(circle, var(--gold) 2px, transparent 2.5px) 100% 50% / 5px 5px no-repeat;
}

.hero__legend {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: calc(var(--frame) + 26px);
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
}

.hero__legend i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold), transparent);
  animation: plumb 2.4s var(--ease-io) infinite;
  transform-origin: top;
}

@keyframes plumb {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Folio (parchment section) ---------- */

.paper {
  position: relative;
  background-color: var(--paper);
  color: var(--ink);
  isolation: isolate;
}

/* Foxing and a hand-drawn sea of wavy lines, as on an old chart. */
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(140, 110, 50, 0.1), transparent 45%),
    radial-gradient(ellipse at 88% 82%, rgba(120, 90, 40, 0.12), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180' fill='none' stroke='%2315130f' stroke-opacity='.13' stroke-linecap='round'%3E%3Cpath d='M14 30c6-5 10 5 16 0s10-5 16 0 10 5 16 0'/%3E%3Cpath d='M150 18c6-5 10 5 16 0s10-5 16 0'/%3E%3Cpath d='M92 76c6-5 10 5 16 0s10-5 16 0 10 5 16 0 10 5 16 0'/%3E%3Cpath d='M24 122c6-5 10 5 16 0s10-5 16 0'/%3E%3Cpath d='M176 128c6-5 10 5 16 0s10-5 16 0 10 5 16 0'/%3E%3Cpath d='M70 166c6-5 10 5 16 0s10-5 16 0'/%3E%3C/svg%3E") 0 0 / 260px 180px;
}

.folio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px clamp(40px, 7vw, 120px);
  padding: 190px var(--gutter) 200px;
  overflow: hidden;
}

.folio .eyebrow {
  color: #8a6f2a;
}

.folio .eyebrow span {
  color: var(--ink-faint);
}

.folio__statement {
  max-width: 19ch;
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.16;
  letter-spacing: 0.005em;
}

.folio__statement em {
  font-family: var(--fell);
  font-style: italic;
}

.folio__gloss {
  max-width: 34ch;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--fell);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.folio__gloss sup {
  margin-right: 4px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  color: #8a6f2a;
}

.contents {
  position: relative;
  z-index: 1;
  align-self: end;
}

.contents__title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.contents__title::after {
  content: "";
  flex: 1;
  height: 5px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink-line);
}

.contents__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contents__list li {
  border-bottom: 1px solid var(--ink-line);
}

.contents__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 0 6px;
  transition: color 0.3s ease;
}

.contents__no {
  flex: none;
  width: 34px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 18px;
  color: #8a6f2a;
}

.contents__name {
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.contents__dots {
  flex: 1;
  min-width: 24px;
  height: 1em;
  background: radial-gradient(circle, var(--ink-faint) 1px, transparent 1.4px) 0 calc(100% - 3px) / 8px 8px repeat-x;
}

.contents__pg {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.contents__note {
  padding: 0 0 18px 48px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

.contents__list a:hover {
  color: #7a5f1c;
}

.contents__list a:hover .contents__dots {
  background-image: radial-gradient(circle, #7a5f1c 1.2px, transparent 1.6px);
}

.folio__rose {
  position: absolute;
  z-index: -1;
  right: -14vw;
  top: 50%;
  width: min(62vw, 860px);
  height: min(62vw, 860px);
  transform: translateY(-50%);
  color: var(--ink);
  opacity: 0.08;
  --rose-paper: var(--paper);
  pointer-events: none;
}

/* ---------- Compass rose (shared symbol) ---------- */

.rose__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.rose__ring--faint {
  stroke-dasharray: 2 5;
}

.rose__ticks {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
}

.rose__ticks--major {
  stroke-width: 13;
}

.rose__dark {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
}

.rose__light {
  fill: var(--rose-paper, transparent);
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
}

.rose__hub {
  fill: var(--rose-paper, #000);
  stroke: currentColor;
  stroke-width: 1.4;
}

/* ---------- Interior page head ---------- */

.plate-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 40px;
  min-height: min(92svh, 860px);
  padding: 170px var(--gutter) 90px;
  background: var(--stars), var(--black);
  overflow: hidden;
  isolation: isolate;
}

.plate-title {
  font-size: clamp(48px, 7.2vw, 124px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.plate-title em {
  font-family: var(--fell);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
}

.plate-title .line {
  display: block;
}

.plate-lede {
  max-width: 36ch;
  margin-top: 36px;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--white-soft);
}

.plate-fig {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(100%, 520px);
  aspect-ratio: 1;
}

.plate-fig > * {
  position: absolute;
}

.plate-fig figcaption,
.fig-caption {
  font-family: var(--fell);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--white-faint);
}

.plate-fig figcaption {
  left: 0;
  right: 0;
  bottom: -40px;
  text-align: center;
}

.fig-caption b,
.plate-fig figcaption b {
  margin-right: 8px;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- About ---------- */

.eclipse__dots {
  inset: 0;
}

.eclipse__cage {
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  overflow: visible;
}

.eclipse__cage .cage {
  stroke: var(--black);
  stroke-width: 6;
  stroke-linecap: round;
}

.eclipse__cage .cage--thin {
  stroke-width: 3.5;
}

.eclipse__cage .cage-ticks {
  stroke: var(--gold-soft);
  stroke-width: 8;
}

.eclipse__cage .cage-pole {
  fill: var(--gold);
}

.meridians--slow ellipse {
  animation-duration: 14s;
}

.eclipse__cage .cage-hair {
  stroke: var(--gold-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.eclipse__cage .flare {
  stroke: url(#flare);
  stroke-width: 1.4;
}

.eclipse__cage .wanderer {
  fill: var(--black);
}

.treatise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 0.62fr);
  gap: 0 clamp(32px, 4vw, 64px);
  padding: 110px var(--gutter) 130px;
  border-top: 1px solid var(--hairline);
}

.treatise__text {
  grid-column: span 2;
  columns: 2;
  column-gap: clamp(32px, 4vw, 64px);
  column-rule: 1px solid var(--hairline);
}

.treatise__text p {
  margin-bottom: 1.1em;
  font-size: 19px;
  line-height: 1.65;
  color: var(--white-soft);
  hyphens: auto;
}

.treatise__text p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  font-size: 5.6em;
  line-height: 0.78;
  color: var(--gold);
}

.treatise__text sup,
.gloss sup {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
}

.treatise__margin {
  display: grid;
  align-content: start;
  gap: 32px;
  padding-left: 24px;
  border-left: 1px solid var(--hairline);
}

.gloss {
  font-family: var(--fell);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--white-faint);
}

.gloss sup {
  margin-right: 6px;
  font-style: normal;
}

.quarters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  padding: 170px var(--gutter) 190px;
  overflow: hidden;
}

.quarters .eyebrow {
  color: #8a6f2a;
}

.quarters .eyebrow span {
  color: var(--ink-faint);
}

.quarters__fig {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  justify-self: center;
}

.quarters__fig > * {
  position: absolute;
}

.quarters__svg {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.quarters__svg .q-sector {
  fill: transparent;
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.4s ease;
}

.quarters__svg .q-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.quarters__svg .q-ring--faint {
  stroke: var(--ink-line);
}

.quarters__svg .q-ticks {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 8;
}

.quarters__svg text {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  letter-spacing: 0.34em;
}

.quarters__svg .q-dir {
  font-family: var(--fell);
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0;
  fill: #8a6f2a;
  text-anchor: middle;
  dominant-baseline: central;
}

.quarters__fig[data-active="n"] .q-sector[data-q="n"],
.quarters__fig[data-active="e"] .q-sector[data-q="e"],
.quarters__fig[data-active="s"] .q-sector[data-q="s"],
.quarters__fig[data-active="w"] .q-sector[data-q="w"] {
  fill: rgba(196, 166, 82, 0.28);
}

.quarters__sphere {
  top: 31%;
  left: 31%;
  width: 38%;
  height: 38%;
}

.quarters__title {
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.quarters__title em {
  font-family: var(--fell);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

.quarters__intro {
  max-width: 40ch;
  margin: 24px 0 34px;
  font-size: 19px;
  color: var(--ink-soft);
}

.quarters__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.quarters__list li {
  display: grid;
  grid-template-columns: 40px minmax(120px, 0.6fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--ink-line);
  cursor: default;
  transition: background-color 0.4s ease;
}

.quarters__list li.is-active {
  background: linear-gradient(90deg, rgba(196, 166, 82, 0.22), transparent 80%);
}

.quarters__list .q-dir {
  font-family: var(--fell);
  font-style: italic;
  font-size: 22px;
  color: #8a6f2a;
  padding-left: 6px;
}

.quarters__list h3 {
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.quarters__list p {
  font-size: 17px;
  color: var(--ink-soft);
}

.chronicle {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px clamp(40px, 6vw, 100px);
  padding: 170px var(--gutter) 150px;
}

.chronicle__title {
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.chronicle__intro {
  max-width: 30ch;
  margin-top: 22px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 19px;
  color: var(--white-faint);
}

/* The route: a dotted course with waypoints, like a voyage drawn on a chart. */
.route {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 9px;
  width: 2px;
  background: radial-gradient(circle, var(--gold) 0.9px, transparent 1.2px) 50% 0 / 2px 7px repeat-y;
}

.route li {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 28px;
  padding: 0 0 44px 48px;
}

.route li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 2.4px, var(--black) 3px);
}

.route li:last-child::before {
  background: var(--black);
  border-style: dashed;
}

.route__year {
  font-size: 22px;
  letter-spacing: 0.16em;
}

.route__year small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.route p {
  font-size: 18px;
  color: var(--white-soft);
}

.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 var(--gutter);
  padding: 56px 0 120px;
  border-top: 1px solid var(--hairline);
}

.closing p {
  max-width: 30ch;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.2;
}

.closing p em {
  font-family: var(--fell);
  font-style: italic;
  color: var(--gold);
}

/* ---------- Software ---------- */

.orrery-fig .ht {
  position: absolute;
}

.instrument-svg {
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  overflow: visible;
}

.instrument-svg .i-line {
  stroke: var(--gold-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.instrument-svg .i-line--white {
  stroke: rgba(246, 245, 241, 0.5);
}

.instrument-svg .i-line--faint {
  stroke: var(--hairline);
}

.instrument-svg .i-dash {
  stroke: var(--hairline);
  stroke-dasharray: 2 6;
  vector-effect: non-scaling-stroke;
}

.instrument-svg .i-ticks {
  stroke: rgba(246, 245, 241, 0.4);
  stroke-width: 6;
}

.instrument-svg .i-fill {
  fill: var(--gold);
}

.instrument-svg .i-fill--white {
  fill: var(--white);
}

.instrument-svg .i-fill--black {
  fill: var(--black);
  stroke: var(--gold-soft);
  vector-effect: non-scaling-stroke;
}

.instrument-svg text {
  fill: var(--white-faint);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.instrument-svg .i-letter {
  font-family: var(--fell);
  font-style: italic;
  font-size: 18px;
  fill: var(--gold);
  text-anchor: middle;
  dominant-baseline: central;
}

.meridians ellipse {
  transform-box: fill-box;
  transform-origin: center;
  animation: meridian 9s linear infinite;
}

@keyframes meridian {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

.needle {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: needle 9s var(--ease) infinite;
}

@keyframes needle {
  0%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-24deg); }
  18% { transform: rotate(14deg); }
  28% { transform: rotate(-7deg); }
  38% { transform: rotate(3deg); }
  48% { transform: rotate(0deg); }
}

.catalogue {
  padding: 40px var(--gutter) 60px;
}

.instrument {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 40px clamp(40px, 7vw, 120px);
  padding: 90px 0;
  border-top: 1px solid var(--hairline);
}

.instrument:nth-child(even) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.instrument:nth-child(even) .instrument__fig {
  order: 2;
}

.instrument__fig {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  justify-self: center;
  margin: 0;
}

.instrument__fig > * {
  position: absolute;
}

.instrument__fig .ht {
  inset: 14%;
}

.instrument__plate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.instrument__plate span:last-child {
  color: var(--white-faint);
}

.instrument__name {
  font-size: clamp(44px, 5.4vw, 88px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.instrument__motto {
  margin-top: 14px;
  font-family: var(--fell);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--gold);
}

.instrument__desc {
  max-width: 44ch;
  margin-top: 22px;
  font-size: 18.5px;
  color: var(--white-soft);
}

.specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0 clamp(24px, 3vw, 48px);
  margin: 30px 0 0;
}

.specs div {
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.specs dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
}

.specs dd {
  margin: 6px 0 0;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 166, 82, 0.18);
}

.status--bench::before {
  background: transparent;
  border: 1px dashed var(--gold);
  box-shadow: none;
}

.instrument .link-arrow {
  margin-top: 30px;
}

.commission {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 40px;
  padding: 190px var(--gutter) 200px;
  overflow: hidden;
}

.commission .eyebrow {
  color: #8a6f2a;
}

.commission__title {
  font-size: clamp(40px, 5.2vw, 84px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.commission__title em {
  font-family: var(--fell);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: #7a5f1c;
}

.commission__text {
  max-width: 38ch;
  font-size: 19px;
  color: var(--ink-soft);
}

.commission .btn {
  margin-top: 30px;
  color: var(--ink);
  border-color: var(--ink);
}

.commission .btn::before {
  background:
    radial-gradient(circle, var(--ink) 2.2px, transparent 2.6px) 0 0 / 6px 6px,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 0 no-repeat;
}

.commission .btn:hover,
.commission .btn:focus-visible {
  color: var(--paper);
}

.commission__rose {
  position: absolute;
  z-index: -1;
  left: -12vw;
  bottom: -30%;
  width: min(70vw, 900px);
  height: min(70vw, 900px);
  color: var(--ink);
  opacity: 0.07;
  --rose-paper: var(--paper);
  pointer-events: none;
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 60px clamp(40px, 6vw, 110px);
  padding: 170px var(--gutter) 150px;
  background: var(--stars), var(--black);
}

.faq__head {
  margin-bottom: 80px;
}

.questions {
  border-top: 1px solid var(--white-faint);
}

.q {
  border-bottom: 1px solid var(--hairline);
}

.q summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 30px;
  align-items: baseline;
  gap: 16px;
  padding: 30px 0 28px;
  cursor: pointer;
  list-style: none;
}

.q summary::-webkit-details-marker {
  display: none;
}

.q__no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.q__text {
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.q summary:hover .q__text {
  color: var(--gold);
}

/* A small cross that turns to a saltire when open. */
.q__mark {
  position: relative;
  width: 22px;
  height: 22px;
  align-self: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: transform 0.6s var(--ease-io), border-color 0.3s ease;
}

.q__mark::before,
.q__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  margin: -0.5px 0 0 -5px;
  background: var(--gold);
}

.q__mark::after {
  transform: rotate(90deg);
}

.q[open] .q__mark {
  transform: rotate(135deg);
  border-color: var(--gold);
}

.q.is-closing .q__mark {
  transform: none;
  border-color: var(--hairline);
}

.q__body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 30px;
  gap: 16px;
  overflow: hidden;
}

.q__body > div {
  grid-column: 2;
  padding-bottom: 34px;
}

.q__body p {
  max-width: 56ch;
  font-size: 19px;
  line-height: 1.65;
  color: var(--white-soft);
}

.q__body .gloss {
  margin-top: 16px;
  font-size: 16px;
}

.faq__aside {
  position: relative;
}

.faq__aside {
  padding-top: 40px;
}

.bearing {
  position: sticky;
  top: 90px;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.bearing__dial {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
}

.bearing__dial > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bearing__rose {
  color: var(--white);
  opacity: 0.34;
  --rose-paper: var(--black);
}

.bearing__needle {
  overflow: visible;
  transform: rotate(var(--bearing, 0deg));
  transition: transform 1.4s cubic-bezier(0.3, 1.5, 0.4, 1);
}

.bearing__readout {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
  font-variant-numeric: tabular-nums;
}

.bearing__readout b {
  font-weight: 400;
  color: var(--gold);
}

.faq__more {
  margin-top: 40px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 20px;
  color: var(--white-faint);
}

.faq__more a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-faint);
  transition: border-color 0.3s ease;
}

.faq__more a:hover {
  border-color: var(--gold);
}

/* ---------- Contact ---------- */

.plate-head--short {
  min-height: 0;
  padding-bottom: 70px;
}

.seal-fig {
  width: min(100%, 380px);
}

.seal-fig__ring {
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  overflow: visible;
}

.seal-fig__hair {
  stroke: var(--gold-faint);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.seal-fig__ring text {
  fill: var(--white-faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.seal-fig__logo {
  inset: 12%;
}

.dispatch__note {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--fell);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--white-faint);
}

.dispatch__note em {
  color: var(--gold);
}

.correspondence {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 60px clamp(40px, 6vw, 110px);
  padding: 40px var(--gutter) 160px;
}

/* The letter: ruled paper on the dark desk. */
.letter {
  position: relative;
  padding: clamp(32px, 5vw, 68px) clamp(24px, 5vw, 72px) clamp(36px, 5vw, 64px);
  border-radius: var(--radius);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(196, 166, 82, 0.25);
}

/* A clean sheet: keep the foxing, drop the sea. */
.letter.paper::before {
  background:
    radial-gradient(ellipse at 90% 8%, rgba(140, 110, 50, 0.12), transparent 40%),
    radial-gradient(ellipse at 6% 96%, rgba(120, 90, 40, 0.1), transparent 45%);
}

.letter__head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 38px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.letter__salutation {
  margin-bottom: 26px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 28px;
}

.field {
  position: relative;
  display: grid;
  margin-bottom: 26px;
}

.field label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  margin: 0;
  padding: 8px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--ink-faint);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--fell);
  font-size: 22px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field select {
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2315130f'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat;
}

.field textarea {
  min-height: calc(36px * 6);
  resize: vertical;
  /* Ruled lines that scroll with the text. */
  background: repeating-linear-gradient(transparent 0 35px, var(--ink-line) 35px 36px);
  background-attachment: local;
  line-height: 36px;
  padding-top: 0;
  border-bottom: 0;
}

.field input:focus,
.field select:focus {
  border-bottom-color: #8a6f2a;
}

.field textarea:focus {
  outline: 1px solid rgba(138, 111, 42, 0.4);
  outline-offset: 6px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.field__error {
  min-height: 0;
  margin-top: 6px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 16px;
  color: #8d2d1c;
}

.field.is-invalid input,
.field.is-invalid textarea {
  border-bottom-color: #8d2d1c;
}

.fields-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 32px;
}

.letter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}

.letter__sign {
  font-family: var(--fell);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-soft);
}

/* The wax seal is the send button. */
.wax {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  color: var(--ink);
}

.wax__disc {
  position: absolute;
  inset: 0;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background:
    radial-gradient(circle at 34% 30%, #e2c977, transparent 46%),
    radial-gradient(circle at 70% 76%, #7a5f1c, transparent 55%),
    var(--gold);
  box-shadow:
    inset 0 0 0 5px rgba(122, 95, 28, 0.55),
    inset 0 0 0 9px rgba(226, 201, 119, 0.4),
    0 6px 14px -4px rgba(0, 0, 0, 0.5);
  transition: transform 0.6s var(--ease-io);
}

.wax__mark {
  position: relative;
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 1px 0 rgba(255, 240, 200, 0.55)) drop-shadow(0 -1px 0 rgba(60, 40, 0, 0.35));
  transition: transform 0.9s var(--ease-io);
}

.wax__label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wax:hover .wax__disc,
.wax:focus-visible .wax__disc {
  transform: rotate(-12deg) scale(1.04);
}

.wax:hover .wax__mark,
.wax:focus-visible .wax__mark {
  transform: rotate(90deg);
}

.wax.is-stamping .wax__disc {
  animation: stamp 0.7s var(--ease-io);
}

@keyframes stamp {
  0% { transform: scale(1); }
  35% { transform: scale(1.25) translateY(-10px); box-shadow: 0 30px 30px -10px rgba(0, 0, 0, 0.35); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.letter__status {
  margin-top: 26px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 19px;
  color: #6b551c;
}

.letter__status:empty {
  display: none;
}

.dispatch,
.dispatch dl {
  display: grid;
  align-content: start;
  gap: 40px;
  margin: 0;
}

.dispatch__item {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.dispatch__item dt {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.dispatch__item dd {
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
}

.dispatch__item dd a {
  border-bottom: 1px solid var(--gold-faint);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.dispatch__item dd a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.dispatch__item small {
  display: block;
  margin-top: 6px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 16px;
  color: var(--white-faint);
}

.dispatch__seal {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin-top: 10px;
}

/* ---------- Colophon (footer) ---------- */

.colophon {
  position: relative;
  padding: 90px var(--gutter) calc(var(--frame) + 36px);
  border-top: 1px solid var(--hairline);
  background: var(--stars), var(--black);
}

.paper + .colophon,
.ht-band--up + .colophon {
  border-top: 0;
}

.colophon__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: end;
  gap: 48px clamp(32px, 5vw, 80px);
}

.colophon__mark {
  display: flex;
  align-items: center;
  gap: 18px;
}

.colophon__mark img {
  width: 64px;
  height: 64px;
}

.colophon__name {
  font-size: 18px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.colophon__motto {
  margin-top: 4px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 17px;
  color: var(--white-faint);
}

/* Scale bar, as printed in the corner of a chart. */
.scalebar {
  max-width: 420px;
}

.scalebar__bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 7px;
  border: 1px solid var(--white-faint);
}

.scalebar__bar i:nth-child(odd) {
  background: var(--white-soft);
}

.scalebar__bar i:first-child {
  background: repeating-linear-gradient(90deg, var(--white-soft) 0 25%, transparent 25% 50%);
}

.scalebar__labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--white-faint);
}

.scalebar__labels span:last-child {
  display: flex;
  justify-content: space-between;
}

.scalebar__caption {
  margin-top: 10px;
  font-family: var(--fell);
  font-style: italic;
  font-size: 16px;
  color: var(--white-faint);
}

.colophon__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 36px;
  justify-content: end;
}

.colophon__nav a {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white-soft);
  transition: color 0.3s ease;
}

.colophon__nav a:hover {
  color: var(--gold);
}

.colophon__base {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 64px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-faint);
}

.colophon__base i {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* ---------- Medium screens ---------- */

@media (max-width: 1100px) {
  .treatise {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr);
  }

  .treatise__text {
    grid-column: auto;
    columns: 1;
  }

  .stage__note {
    display: none;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  :root {
    --frame: 8px;
  }

  .frame__side--left span,
  .frame__side--right span,
  .frame__side--top span {
    display: none;
  }

  .frame__side::before,
  .frame__side::after {
    flex: 1;
  }

  .frame__side--left,
  .frame__side--right,
  .frame__side--top {
    gap: 0;
  }

  .nav {
    display: none;
  }

  .chart-toggle {
    display: inline-flex;
    position: relative;
    z-index: 40;
  }

  .masthead {
    position: absolute;
  }

  .is-chart-open .masthead {
    position: fixed;
  }

  .hero {
    --w: min(52vw, 300px);
    grid-template-columns: minmax(0, 1fr);
    padding-top: 128px;
    row-gap: 0;
  }

  .hero__copy {
    padding: 20px 0 30px;
  }

  .stage {
    margin-top: calc(var(--w) * 0.7);
  }

  .hero__legend {
    display: none;
  }

  .folio {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 150px;
    padding-bottom: 160px;
  }

  .folio__rose {
    right: -40vw;
    top: 22%;
    width: 110vw;
    height: 110vw;
  }

  .plate-head {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: 140px;
    padding-bottom: 100px;
  }

  .plate-fig {
    width: min(86%, 420px);
  }

  .treatise {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 80px;
    padding-bottom: 90px;
  }

  .treatise__margin {
    margin-top: 24px;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  .quarters,
  .chronicle,
  .commission,
  .correspondence,
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .quarters {
    padding-top: 140px;
    padding-bottom: 150px;
  }

  .quarters__list li {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .quarters__list li p {
    grid-column: 2;
  }

  .chronicle {
    padding-top: 110px;
    padding-bottom: 90px;
  }

  .instrument,
  .instrument:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    padding: 64px 0;
  }

  .instrument:nth-child(even) .instrument__fig {
    order: 0;
  }

  .instrument__fig {
    width: min(78%, 360px);
  }

  .commission {
    padding-top: 140px;
    padding-bottom: 150px;
  }

  .faq {
    padding-top: 140px;
  }

  .faq__head {
    margin-bottom: 50px;
  }

  /* On small screens the compass rides in the corner and still swings to each question. */
  .faq__aside {
    position: fixed;
    right: calc(var(--frame) + 14px);
    bottom: calc(var(--frame) + 14px);
    z-index: 20;
    width: 64px;
    padding: 0;
    pointer-events: none;
  }

  .bearing {
    position: static;
  }

  .bearing__dial {
    width: 64px;
    border-radius: 50%;
    background: var(--black);
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.6);
  }

  .bearing__readout {
    display: none;
  }

  .colophon__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .colophon__nav {
    justify-content: start;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 17px;
  }

  .masthead {
    padding-top: calc(var(--frame) + 18px);
  }

  .brand__mark {
    width: 38px;
    height: 38px;
  }

  .brand__name {
    font-size: 16px;
  }

  .chart-toggle span {
    display: none;
  }

  .veil__tag {
    display: none;
  }

  .veil__count b {
    font-size: 34px;
  }

  .hero__title {
    font-size: clamp(40px, 12.4vw, 60px);
  }

  .eyebrow::before {
    width: 28px;
  }

  .fields-row,
  .specs {
    grid-template-columns: minmax(0, 1fr);
  }

  .specs {
    gap: 14px;
  }

  .q summary,
  .q__body {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    gap: 10px;
  }

  .route li {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 40px;
  }

  /* A clean sheet: keep the foxing, drop the sea. */
.letter.paper::before {
  background:
    radial-gradient(ellipse at 90% 8%, rgba(140, 110, 50, 0.12), transparent 40%),
    radial-gradient(ellipse at 6% 96%, rgba(120, 90, 40, 0.1), transparent 45%);
}

.letter__head {
    flex-direction: column;
    gap: 4px;
  }

  .colophon__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .colophon__base i {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */

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

  .ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}