/* ============================================================
   legal.css — the shared chrome for /privacy, /terms, /support
   ============================================================

   WHY THIS FILE EXISTS
   Those three pages each carried a ~285-line inline <style> block
   with an almost identical selector set (verified: same selectors
   across all three, plus `.contact` on /support alone). Three
   hand-synced copies is a drift trap — a fix to one silently missed
   the other two. This is now the single source; the pages link it.

   WHAT CHANGED VISUALLY
   The pages read as plain documentation on a flat ground: a narrow
   column stranded in wide empty margins, a fifteen-item link list as
   the only way to navigate a long policy, and none of the night-sky
   atmosphere the main site is built on. This gives them:
     · an atmospheric masthead (copper bloom + star scatter)
     · a sticky contents rail with scroll-spy on desktop
     · section numerals pulled into the margin, like the site's
       chapter numbers
     · framed tables instead of edge-to-edge rows
     · a reading measure and rhythm meant for long-form
     · a scroll-progress hairline and a back-to-top control

   Dark-only, deliberately: these pages ship a #0e0d0b theme-color and
   the brand's ground is night. A light theme here would be a new
   decision, not a port.
   ============================================================ */

/* ============================================================
   Fonts - bundled, not fetched from Google
   ============================================================
   These pages previously pulled EB Garamond and Manrope from
   fonts.googleapis.com. On a PRIVACY POLICY that means Google receives the
   IP address of every person who comes to read how we handle their data -
   a third-party request we do not disclose and do not need.

   Both files are VARIABLE fonts carrying a real weight axis, verified by
   measurement rather than assumption: Manrope renders 903.9 / 921.0 / 938.2
   / 955.3 / 972.4 px for weights 300-700 on the same string, and EB Garamond
   822.1 / 843.4 / 865.4 for 500-700 (300 and 400 measure identically because
   EB Garamond's axis floor is 400). So ONE file per family covers every
   weight these pages use - no synthetic bolding, and 72KB total.

   Worth knowing: frontend/public/fonts/ holds fifteen files that are only
   THREE distinct fonts - EBGaramond-400/500/600/700(.woff2) are byte-identical
   (md5 3268e3c9...), as are all seven Manrope weights (md5 938c6e80...). They
   are copies of the variable font saved under static names. Copying that
   pattern here would have shipped the same bytes five times.
   ============================================================ */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;        /* the file's real axis range */
  font-display: swap;
  src: url("/assets/fonts/EBGaramond-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/Manrope-variable.woff2") format("woff2");
}

:root {
  --deepstone: 14 13 11;
  --void: 8 7 6;
  --plate: 6 4 3;
  --stone: 26 24 22;
  --stone-light: 42 38 34;

  --copper: 139 90 60;
  --copper-light: 196 149 106;

  --bone: 232 220 200;
  --ash: 107 101 96;
  --border: 58 53 48;
  --primordial: 61 92 78;

  --serif: "EB Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;

  --ease-magnetic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-meditative: cubic-bezier(0.25, 0.1, 0.25, 1);

  --measure: 70ch;
  --rail-w: 236px;
  --bar-h: 3.25rem;
}

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

html {
  scroll-behavior: smooth;
  background: rgb(var(--void));
}

body {
  margin: 0;
  background: rgb(var(--deepstone));
  color: rgb(var(--bone) / 0.74);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* A fixed, barely-there vignette. The old pages sat on flat #0e0d0b,
   which reads as "unstyled dark" rather than as a ground with depth. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      rgb(var(--copper) / 0.05),
      transparent 60%
    ),
    radial-gradient(
      100% 100% at 50% 100%,
      rgb(var(--void) / 0.65),
      transparent 55%
    );
}

a {
  color: rgb(var(--copper-light));
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid rgb(var(--copper-light) / 0.75);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Scroll progress — a copper hairline, mirroring the main site's
   ScrollProgress so a long policy tells you how far you have to go.
   ============================================================ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    rgb(var(--copper) / 0.5),
    rgb(var(--copper-light))
  );
  transform-origin: left center;
  transition: width 90ms linear;
}

/* ============================================================
   Sticky bar
   ============================================================ */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(var(--deepstone) / 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgb(var(--border) / 0.45);
}
.bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--bar-h);
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgb(var(--bone) / 0.68);
  transition: color 300ms var(--ease-magnetic);
}
.back:hover {
  color: rgb(var(--copper-light));
  text-decoration: none;
}
.back svg {
  transition: transform 300ms var(--ease-magnetic);
}
.back:hover svg {
  transform: translateX(-3px);
}

.bar-mark {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.bar-mark span {
  font-family: var(--serif);
  font-size: 0.98rem;
  color: rgb(var(--bone) / 0.62);
}
.bar-spacer {
  width: 3.4rem;
}

/* ============================================================
   Masthead — the atmospheric opening plate.
   Previously the page opened on a bare h1 against flat black. This
   gives the document a threshold to cross, using the same night-sky
   vocabulary as the main site (copper bloom, scattered stars, a
   horizon fade into the body).
   ============================================================ */
.masthead {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem 3.5rem;
  border-bottom: 1px solid rgb(var(--border) / 0.35);
  isolation: isolate;
}
.masthead::before {
  /* copper bloom */
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 150%;
  background: radial-gradient(
    60% 55% at 50% 30%,
    rgb(var(--copper) / 0.16),
    transparent 70%
  );
  pointer-events: none;
  z-index: -2;
}
.masthead::after {
  /* star scatter — pure CSS, no image request */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  background-image:
    radial-gradient(
      1.4px 1.4px at 12% 22%,
      rgb(var(--bone) / 0.5),
      transparent
    ),
    radial-gradient(
      1.2px 1.2px at 28% 68%,
      rgb(var(--bone) / 0.34),
      transparent
    ),
    radial-gradient(
      1.6px 1.6px at 44% 14%,
      rgb(var(--bone) / 0.42),
      transparent
    ),
    radial-gradient(
      1.1px 1.1px at 61% 52%,
      rgb(var(--bone) / 0.3),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 74% 26%,
      rgb(var(--copper-light) / 0.45),
      transparent
    ),
    radial-gradient(
      1.2px 1.2px at 87% 62%,
      rgb(var(--bone) / 0.36),
      transparent
    ),
    radial-gradient(
      1.3px 1.3px at 19% 84%,
      rgb(var(--bone) / 0.28),
      transparent
    ),
    radial-gradient(
      1.1px 1.1px at 53% 88%,
      rgb(var(--bone) / 0.24),
      transparent
    ),
    radial-gradient(
      1.4px 1.4px at 92% 12%,
      rgb(var(--bone) / 0.32),
      transparent
    );
}
/* The title lines up with the reading column, not the page gutter, so the
   masthead and the document share one vertical spine instead of the title
   floating 300px left of everything it introduces (see the padding-left
   rule in the 1080px block below). */
.masthead-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.masthead-mark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(var(--copper-light) / 0.8);
}
.masthead h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: rgb(var(--bone));
  margin: 0;
  text-wrap: balance;
}
.masthead .meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgb(var(--bone) / 0.45);
  margin: 0.35rem 0 0;
}
.masthead .meta span {
  display: inline-flex;
  align-items: center;
}
.masthead .meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(var(--copper-light) / 0.5);
  margin-right: 0.9rem;
}

/* masthead entrance */
.masthead-inner > * {
  opacity: 0;
  transform: translateY(12px);
  animation: mh-rise 800ms var(--ease-magnetic) both;
}
.masthead-inner > *:nth-child(1) {
  animation-delay: 60ms;
}
.masthead-inner > *:nth-child(2) {
  animation-delay: 150ms;
}
.masthead-inner > *:nth-child(3) {
  animation-delay: 240ms;
}
@keyframes mh-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Shell — sticky rail + document, centred as a pair.
   ============================================================ */
.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

/* The two-column shell exists ONLY when a rail was actually built.
   `has-rail` is set by legal.js after it verifies the page has a table of
   contents whose targets exist. Scoping to it matters twice over:
     · /support has no contents list, so it stays one centred column
       instead of being squeezed into the 236px rail track
     · with JS off, every page falls back to the same centred column and
       the inline table of contents it already shipped. */
@media (min-width: 1080px) {
  body.has-rail .masthead-inner {
    /* indent by exactly the rail track + gutter, so the title sits
       directly above the document's first line */
    padding-left: calc(var(--rail-w) + 4rem);
  }

  body.has-rail .shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }

  body.has-rail main {
    margin-inline: 0;
  }

  /* No rail (e.g. /support): narrow the masthead to the reading measure so it
     centres over the centred document instead of hanging off the far gutter. */
  body:not(.has-rail) .masthead-inner {
    max-width: var(--measure);
  }
}

/* ---- the contents rail ---- */
.rail {
  display: none; /* JS-built; shown only at desktop width */
  position: sticky;
  top: calc(var(--bar-h) + 2rem);
  max-height: calc(100vh - var(--bar-h) - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2.75rem 0 2rem;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--border)) transparent;
}
.rail::-webkit-scrollbar {
  width: 6px;
}
.rail::-webkit-scrollbar-thumb {
  background: rgb(var(--border));
  border-radius: 3px;
}

@media (min-width: 1080px) {
  .rail.ready {
    display: block;
  }
}

.rail-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgb(var(--bone) / 0.34);
  padding-left: 1rem;
  margin-bottom: 0.9rem;
}
.rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rail li {
  margin: 0;
}
/* Flex row rather than inline text: the numeral gets its own fixed column,
   so 1-9 and 10-15 share a left edge AND a wrapped title hangs under the
   title rather than under the number. */
.rail a {
  position: relative;
  display: flex;
  gap: 0.45rem;
  padding: 0.42rem 0.5rem 0.42rem 1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgb(var(--bone) / 0.44);
  border-left: 1px solid rgb(var(--border) / 0.65);
  transition:
    color 300ms var(--ease-magnetic),
    border-color 300ms var(--ease-magnetic);
}
.rail a:hover {
  color: rgb(var(--bone) / 0.85);
  text-decoration: none;
}
.rail a .n {
  flex: 0 0 1.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--bone) / 0.3);
  transition: color 300ms var(--ease-magnetic);
}
.rail a.current {
  color: rgb(var(--copper-light));
  border-left-color: rgb(var(--copper-light) / 0.85);
}
.rail a.current .n {
  color: rgb(var(--copper-light) / 0.75);
}

/* ============================================================
   The document
   ============================================================ */
main {
  max-width: var(--measure);
  margin-inline: auto; /* centred when there is no rail */
  padding: 2.75rem 0 4rem;
  position: relative;
}
@media (min-width: 1080px) {
  main {
    padding-top: 2.75rem;
  }
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  line-height: 1.25;
  color: rgb(var(--bone));
  margin: 3.5rem 0 1.1rem;
  scroll-margin-top: calc(var(--bar-h) + 1.5rem);
  position: relative;
  text-wrap: balance;
}
h2:first-of-type {
  margin-top: 1rem;
}

/* Section numeral pulled into the margin — the same device the main
   site uses for chapter numbers. JS wraps the leading "N." of each
   heading in <span class="sec-n">; if JS never runs the heading
   simply reads "1. Scope and Applicability" as it always did. */
.sec-n {
  font-family: var(--serif);
  color: rgb(var(--copper-light) / 0.55);
  font-variant-numeric: tabular-nums;
  /* Below 1080px the numeral is an inline sibling of the title, and the JS
     that lifts it out of the heading text consumes the space that followed
     the period — without this the heading reads "1.Scope and Applicability". */
  margin-right: 0.34em;
}
@media (min-width: 1080px) {
  .sec-n {
    position: absolute;
    right: calc(100% + 1.15rem);
    top: 0.05em;
    font-size: 0.92em;
    color: rgb(var(--copper-light) / 0.4);
    white-space: nowrap;
    margin-right: 0; /* out of flow — the gap is `right:` above */
  }
}

h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: rgb(var(--bone) / 0.94);
  margin: 2.1rem 0 0.65rem;
  scroll-margin-top: calc(var(--bar-h) + 1.5rem);
}

p {
  margin: 0 0 1.15rem;
  font-size: 1.02rem;
}
ul,
ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
  font-size: 1.02rem;
}
li {
  margin-bottom: 0.5rem;
}
li::marker {
  color: rgb(var(--copper-light) / 0.55);
}
strong {
  color: rgb(var(--bone) / 0.94);
  font-weight: 600;
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgb(var(--border) / 0.7),
    rgb(var(--border) / 0.15)
  );
  margin: 3rem 0;
}

/* ---- inline table of contents (the no-JS / mobile fallback) ---- */
.toc {
  margin: 2rem 0 2.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgb(var(--border) / 0.6);
  border-radius: 12px;
  background: rgb(var(--stone) / 0.35);
}
.toc-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgb(var(--copper-light) / 0.75);
  margin-bottom: 0.85rem;
}
.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
}
.toc li {
  margin-bottom: 0.15rem;
}
.toc a {
  display: block;
  padding: 0.32rem 0;
  color: rgb(var(--bone) / 0.66);
  transition: color 260ms var(--ease-magnetic);
}
.toc a:hover {
  color: rgb(var(--copper-light));
  text-decoration: none;
}

/* Once the rail exists, the inline copy is redundant on desktop. */
@media (min-width: 1080px) {
  body.has-rail .toc {
    display: none;
  }
}

/* ---- callout boxes ---- */
.box {
  border-radius: 12px;
  padding: 1.3rem 1.45rem;
  margin: 0 0 1.4rem;
}
.box p:last-child,
.box ul:last-child {
  margin-bottom: 0;
}
.box-stone {
  background: rgb(var(--stone) / 0.55);
  border: 1px solid rgb(var(--border) / 0.6);
}
.box-flag {
  background: rgb(var(--primordial) / 0.12);
  border: 1px solid rgb(var(--primordial) / 0.38);
}
.box-copper {
  background: rgb(var(--copper) / 0.07);
  border: 1px solid rgb(var(--copper) / 0.28);
}
.lede {
  color: rgb(var(--copper-light));
  font-weight: 500;
}
.preamble {
  margin-bottom: 2rem;
}

/* ---- tables ----
   Previously ran edge-to-edge with no frame, so a long data table
   dissolved into the page. Now a contained card with a header band. */
.table-wrap {
  margin: 0 0 1.6rem;
  border: 1px solid rgb(var(--border) / 0.6);
  border-radius: 12px;
  overflow: auto; /* wide tables scroll inside, never the page */
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgb(var(--stone));
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--copper-light) / 0.85);
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgb(var(--border));
  white-space: nowrap;
}
tbody td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid rgb(var(--border) / 0.4);
  vertical-align: top;
  line-height: 1.6;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr {
  transition: background 240ms var(--ease-magnetic);
}
tbody tr:hover {
  background: rgb(var(--stone) / 0.4);
}
tbody td:first-child {
  color: rgb(var(--bone) / 0.94);
  font-weight: 500;
}

/* ---- third-party provider blocks (privacy §6) ---- */
.provider {
  border: 1px solid rgb(var(--border) / 0.55);
  border-left: 2px solid rgb(var(--copper) / 0.45);
  border-radius: 10px;
  padding: 1.05rem 1.2rem;
  margin: 0 0 0.9rem;
  background: rgb(var(--stone) / 0.28);
}
.provider p {
  font-size: 0.93rem;
  margin-bottom: 0.35rem;
}
.provider p:last-child {
  margin-bottom: 0;
}
.provider .lbl {
  color: rgb(var(--bone) / 0.45);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 0.3rem;
}

/* ---- /support contact block ---- */
.contact {
  text-align: center;
  background: rgb(var(--stone) / 0.5);
  border: 1px solid rgb(var(--copper) / 0.3);
  border-radius: 14px;
  padding: 2rem 1.35rem;
  margin: 0 0 1.6rem;
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  inset: -50% 0 auto 0;
  height: 160%;
  background: radial-gradient(
    50% 50% at 50% 30%,
    rgb(var(--copper) / 0.14),
    transparent 70%
  );
  pointer-events: none;
}
.contact > * {
  position: relative;
}
.contact .lbl {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--copper-light) / 0.85);
  margin-bottom: 0.75rem;
}
.contact .email {
  font-family: var(--serif);
  font-size: 1.65rem;
  color: rgb(var(--bone));
  display: inline-block;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgb(var(--copper-light) / 0);
  transition:
    border-color 320ms var(--ease-magnetic),
    color 320ms var(--ease-magnetic);
}
.contact .email:hover {
  text-decoration: none;
  color: rgb(var(--copper-light));
  border-bottom-color: rgb(var(--copper-light) / 0.5);
}
.contact .note {
  font-size: 0.88rem;
  color: rgb(var(--bone) / 0.58);
  margin: 0;
}

/* ============================================================
   Back to top
   ============================================================ */
.totop {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 45;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(var(--copper) / 0.4);
  background: rgb(var(--deepstone) / 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgb(var(--bone) / 0.8);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 360ms var(--ease-magnetic),
    transform 360ms var(--ease-magnetic),
    visibility 360ms,
    border-color 360ms,
    color 360ms;
}
.totop.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.totop:hover {
  border-color: rgb(var(--copper-light) / 0.75);
  color: rgb(var(--copper-light));
}

/* ============================================================
   COLOPHON — the closing plate, shared with the main site footer
   (components/v5/welcome-v5.css .colophon*).
   ============================================================ */
.colophon {
  background: rgb(var(--plate));
  border-top: 1px solid rgb(var(--copper) / 0.1);
  padding: 4.5rem 1.5rem 3rem;
  position: relative;
  text-align: center;
  z-index: 1;
}
.colophon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 90%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--copper) / 0.38),
    transparent
  );
  pointer-events: none;
}
.colophon-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.colophon-inner > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 760ms var(--ease-magnetic),
    transform 760ms var(--ease-magnetic);
}
.colophon.in .colophon-inner > * {
  opacity: 1;
  transform: none;
}
.colophon.in .colophon-inner > *:nth-child(1) {
  transition-delay: 0ms;
}
.colophon.in .colophon-inner > *:nth-child(2) {
  transition-delay: 90ms;
}
.colophon.in .colophon-inner > *:nth-child(3) {
  transition-delay: 165ms;
}
.colophon.in .colophon-inner > *:nth-child(4) {
  transition-delay: 250ms;
}
.colophon.in .colophon-inner > *:nth-child(5) {
  transition-delay: 340ms;
}
.colophon.in .colophon-inner > *:nth-child(6) {
  transition-delay: 420ms;
}
.colophon.in .colophon-inner > *:nth-child(7) {
  transition-delay: 490ms;
}
.colophon.in .colophon-inner > *:nth-child(8) {
  transition-delay: 560ms;
}

.colo-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 1.15rem;
  animation: colo-breathe 9s var(--ease-meditative) infinite;
}
@keyframes colo-breathe {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.045);
  }
}
.colo-name {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.012em;
  color: rgb(var(--bone));
}
.colo-tag {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgb(var(--bone) / 0.42);
  margin-top: 0.85rem;
}
.colo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.4rem;
  padding: 0.9rem 2.05rem;
  border: 1px solid rgb(var(--copper) / 0.42);
  border-radius: 9999px;
  background: rgb(var(--copper) / 0.05);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--bone) / 0.92);
  text-decoration: none;
  transition:
    border-color 420ms var(--ease-magnetic),
    background 420ms var(--ease-magnetic),
    color 420ms var(--ease-magnetic),
    box-shadow 420ms var(--ease-magnetic),
    transform 420ms var(--ease-magnetic);
}
.colo-cta:hover,
.colo-cta:focus-visible {
  border-color: rgb(var(--copper-light) / 0.72);
  background: rgb(var(--copper) / 0.12);
  color: rgb(var(--bone));
  box-shadow: 0 0 20px rgb(139 90 60 / 0.18);
  transform: translateY(-2px);
  text-decoration: none;
}
.colo-cta svg {
  transition: transform 420ms var(--ease-magnetic);
}
.colo-cta:hover svg {
  transform: translateX(3px);
}

.colo-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: min(340px, 80%);
  margin-top: 2.9rem;
}
.colo-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--copper) / 0.3));
}
.colo-rule > .colo-rule-line:last-child {
  background: linear-gradient(90deg, rgb(var(--copper) / 0.3), transparent);
}
.colo-rule-glyph {
  font-size: 0.9rem;
  line-height: 1;
  color: rgb(var(--copper-light) / 0.7);
}

.colo-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.colo-links a {
  position: relative;
  padding: 0.7rem 1.05rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--bone) / 0.6);
  text-decoration: none;
  transition: color 360ms var(--ease-magnetic);
}
.colo-links a::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 0.45rem;
  height: 1px;
  background: rgb(var(--copper-light) / 0.75);
  transform: scaleX(0);
  transition: transform 420ms var(--ease-magnetic);
}
.colo-links a:hover,
.colo-links a:focus-visible {
  color: rgb(var(--copper-light));
  text-decoration: none;
}
.colo-links a:hover::after,
.colo-links a:focus-visible::after {
  transform: scaleX(1);
}
.colo-sep {
  width: 1px;
  height: 11px;
  background: rgb(var(--bone) / 0.16);
}

.colo-mail {
  margin-top: 1.15rem;
  font-family: var(--serif);
  font-size: 0.98rem;
  color: rgb(var(--copper-light) / 0.88);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--copper-light) / 0);
  padding-bottom: 2px;
  transition:
    color 360ms var(--ease-magnetic),
    border-color 360ms var(--ease-magnetic);
}
.colo-mail:hover,
.colo-mail:focus-visible {
  color: rgb(var(--copper-light));
  text-decoration: none;
  border-bottom-color: rgb(var(--copper-light) / 0.5);
}
.colo-legal {
  margin-top: 2.5rem;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgb(var(--ash));
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1079px) {
  .rail {
    display: none !important;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 15.5px;
  }
  .bar-inner {
    padding: 0.7rem 1rem;
  }
  .masthead {
    padding: 3.25rem 1rem 2.5rem;
  }
  .masthead .meta {
    gap: 0.7rem;
  }
  .masthead .meta span + span::before {
    margin-right: 0.7rem;
  }
  .shell {
    padding: 0 1rem;
  }
  main {
    padding: 2rem 0 3rem;
  }
  h2 {
    margin-top: 2.75rem;
  }
  p,
  ul,
  ol {
    font-size: 1rem;
  }
  .box {
    padding: 1.1rem 1.15rem;
  }
  .toc {
    padding: 1.2rem 1.15rem;
  }
  table {
    min-width: 480px;
    font-size: 0.86rem;
  }
  thead th,
  tbody td {
    padding: 0.6rem 0.7rem;
  }
  .contact {
    padding: 1.6rem 1.1rem;
  }
  .contact .email {
    font-size: 1.3rem;
  }
  .colophon {
    padding: 3.5rem 1.25rem 2.5rem;
  }
  .colo-name {
    font-size: 1.45rem;
  }
  .colo-tag {
    letter-spacing: 0.26em;
    font-size: 0.6rem;
  }
  .colo-cta {
    margin-top: 2rem;
    padding: 0.85rem 1.7rem;
  }
  .colo-links a {
    padding: 0.7rem 0.8rem;
  }
  .totop {
    right: 1rem;
    bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .masthead-inner > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .colophon-inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .colo-mark {
    animation: none;
    opacity: 1;
  }
  .colo-cta:hover {
    transform: none;
  }
  .colo-links a::after {
    transition: none;
  }
  .progress-bar {
    transition: none;
  }
  .totop {
    transition:
      opacity 1ms,
      visibility 1ms;
    transform: none;
  }
}

/* iOS 27 WebKit crash workaround — mirrors the rule in welcome-v5.css.
   iOS 27 beta SIGKILLs the render process while painting glyphs inside a
   live SVG <text>. Nothing on these pages uses SVG text (the divider
   diamond is a real character in a <span>), so this is belt-and-braces. */
@media (hover: none) and (pointer: coarse) {
  svg text,
  svg tspan {
    display: none !important;
  }
}