:root {
  color-scheme: dark;
  --bg: #101216;
  --bg-raised: #171a20;
  --bg-card: #1d2129;
  --bg-inset: #14171c;
  --line: #303641;
  --line-strong: #414a59;
  --line-gold: rgba(229, 185, 83, 0.42);
  --text: #f0eee9;
  --text-dim: #abb1bc;
  --text-faint: #7e8794;
  --gold: #f0be28;
  --gold-soft: #d6a72b;
  --gold-deep: #8b650e;
  --gold-ink: #211803;
  --live: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --radius-lg: 22px;
  --radius-md: 14px;
  --page: min(1160px, calc(100% - 40px));
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 2%, rgba(240, 190, 40, 0.08), transparent 30rem),
    radial-gradient(circle at 90% 18%, rgba(104, 89, 51, 0.12), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  pointer-events: none;
}

/* The emblem is a stationary backdrop anchored to the top centre of the
   window, with the page scrolling over it and the base colour everywhere the
   emblem does not reach. It is taller than the window on purpose, so its lower
   edge is always cropped and the shape is only ever hinted at. The layer is
   positioned fixed rather than given a fixed background attachment: it is the
   same effect, it matches the stationary grid layer above, and it avoids the
   repaint cost that a fixed attachment carries. Small screens and readers who
   ask for less motion get the scrolling version instead, further down.
   The url below carries a hand-written stamp because the packager only
   rewrites stamps inside html attributes; a test holds it to the asset bytes.

   The size is width-driven so the emblem spans the page rather than standing as
   a narrow column down the middle of a wide monitor. The art is 1600x2000, so
   height is always width x 1.25: at 115vw the emblem stands 143.75vw tall, far
   past the bottom of any normal window, which is what keeps the crop hint
   strong. The vh floor only bites on a window taller than it is wide, where
   115vw alone could fit end to end and expose the lower edge; 88vh of width
   carries 110vh of height, so the emblem outruns the window everywhere. */
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("assets/watermark-tome.png?v=b323572c8c1c");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: max(115vw, 88vh) auto;
  opacity: 0.026;
  content: "";
  pointer-events: none;
}

a {
  color: inherit;
}

code {
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 0.88em;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform 140ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--page);
  margin: 0 auto;
  padding: 14px 0;
  border-bottom: 1px solid rgba(229, 185, 83, 0.2);
  background: rgba(16, 18, 22, 0.86);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  text-decoration: none;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-gold);
  border-radius: 12px;
  background: var(--bg-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  object-fit: cover;
}

.brand > span:last-child {
  display: grid;
  line-height: 1.1;
}

.brand strong {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.01em;
}

.brand small {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

nav {
  display: flex;
  gap: 6px;
}

nav a {
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

nav a:hover,
nav a:focus-visible {
  background: var(--bg-card);
  color: var(--text);
}

main,
footer {
  width: var(--page);
  margin-inline: auto;
}

main {
  overflow-x: clip;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.8fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
  min-height: 650px;
  padding: 82px 0 72px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.13;
}

h1,
h2 {
  font-family: var(--serif);
}

h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(45px, 5.5vw, 76px);
  letter-spacing: -0.045em;
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -0.035em;
}

h3 {
  margin-bottom: 10px;
  font-size: 21px;
  letter-spacing: -0.015em;
}

.hero-lede {
  max-width: 700px;
  margin-bottom: 30px;
  color: var(--text-dim);
  font-size: clamp(17px, 2vw, 20px);
}

.hero-actions,
.release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.button-primary {
  background: var(--gold);
  box-shadow: 0 8px 30px rgba(240, 190, 40, 0.13);
  color: var(--gold-ink);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #ffd04a;
  transform: translateY(-1px);
}

.button-secondary {
  border-color: var(--line);
  background: var(--bg-raised);
  color: var(--text);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--line-gold);
  background: var(--bg-card);
}

.button-disabled {
  border-color: var(--line);
  background: var(--bg-inset);
  color: var(--text-faint);
  cursor: not-allowed;
}

.text-link {
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  text-underline-offset: 4px;
}

.hero-preview {
  position: relative;
}

.hero-preview::before {
  position: absolute;
  inset: -50px -35px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 190, 40, 0.12), transparent 64%);
  content: "";
}

/* The hero art is an illustration, not a UI card, so it carries no chrome of
   its own beyond the shared corner radius. */
.hero-illustration {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.hero-preview > p {
  margin: 16px 0 0;
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid rgba(229, 185, 83, 0.2);
}

.trust-strip div {
  display: grid;
  gap: 2px;
  padding: 20px 18px;
  border-left: 1px solid rgba(229, 185, 83, 0.14);
}

.trust-strip div:first-child {
  border-left: 0;
}

.trust-strip strong {
  font-size: 13px;
}

.trust-strip span {
  color: var(--text-faint);
  font-size: 11px;
}

.section {
  padding: clamp(72px, 9vw, 118px) 0;
  scroll-margin-top: 72px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 38px;
}

.section-heading > p:last-child {
  color: var(--text-dim);
  font-size: 17px;
}

.release-section {
  padding-top: 94px;
}

.release-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(240, 190, 40, 0.07), rgba(29, 33, 41, 0.96) 34%);
  box-shadow: var(--shadow);
}

.release-main,
.release-identity {
  padding: clamp(26px, 4vw, 42px);
}

.release-main {
  border-right: 1px solid var(--line);
}

.status-pill,
.choice-tag {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  padding: 6px 10px;
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.08);
  color: var(--warn);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.release-main h3 {
  font-family: var(--serif);
  font-size: 30px;
}

.release-main p {
  max-width: 620px;
  color: var(--text-dim);
}

.release-identity summary {
  color: var(--gold);
  cursor: pointer;
  font-weight: 800;
}

.release-identity dl {
  display: grid;
  gap: 13px;
  margin: 20px 0 0;
}

.release-identity dl div {
  display: grid;
  gap: 4px;
}

.release-identity dt {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.release-identity dd {
  margin: 0;
}

.release-identity code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text-dim);
  line-height: 1.5;
}

.setup-intro {
  border-bottom: 1px solid rgba(229, 185, 83, 0.14);
}

.part-grid,
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.part-grid article,
.choice-grid article {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(29, 33, 41, 0.72);
}

.part-grid p,
.choice-grid p {
  margin-bottom: 0;
  color: var(--text-dim);
  font-size: 14px;
}

.part-number {
  display: grid;
  width: 31px;
  height: 31px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid var(--line-gold);
  border-radius: 9px;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 800;
}

.control-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 22px 25px;
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: var(--radius-md);
  background: rgba(74, 222, 128, 0.06);
}

.control-icon {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--live);
  color: #07240f;
  font-weight: 900;
}

.control-note p {
  margin: 3px 0 0;
  color: var(--text-dim);
}

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

.step {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
  padding: 54px 0;
  border-top: 1px solid var(--line);
}

.step > * {
  min-width: 0;
  max-width: 100%;
}

.step-label {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.step h3 {
  font-family: var(--serif);
  font-size: clamp(27px, 3.2vw, 37px);
}

.step-copy > p,
.step li {
  color: var(--text-dim);
}

.step-copy ul,
.step-copy ol {
  display: grid;
  gap: 7px;
  margin: 16px 0 0;
  padding-left: 21px;
}

/* A closing line after a list is a new thought, not the next list item. */
.step-copy ol + p,
.step-copy ul + p {
  margin-top: 16px;
}

.step-copy code,
.help-grid code {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-inset);
  color: var(--text);
}

.inline-warning {
  padding: 12px 14px;
  border-left: 3px solid var(--warn);
  background: rgba(251, 191, 36, 0.06);
  color: #e8d6a6 !important;
  font-size: 14px;
}

.guide-shot {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* The thumbnail frame is a deliberate presentation box. Its width comes from the
   step column and its height from these declarations only, so the pixel size of
   the shot inside it has no influence on page layout. Nothing here can grow from
   content, which is what keeps stricter grid engines in line. */
.shot-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 240px;
  max-height: 400px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: zoom-in;
  transition: border-color 140ms ease;
}

.shot-frame:hover,
.shot-frame:focus-visible {
  border-color: var(--line-gold);
}

/* One variant for a near-square capture. It keeps every rule of the card above
   and only trades the 3:2 box for an upright one, so a tall shot reads at a
   useful size without letting its pixels influence the step row. */
.shot-frame-tall {
  aspect-ratio: 1 / 1;
  min-height: 280px;
  max-height: 520px;
}

/* Every shot is fitted inside the frame instead of sizing it. Wide and tall
   captures both read as one tidy card, and the backdrop fills what is left.
   contain fits any shape into the frame; scale-down additionally refuses to
   enlarge a small shot past its own pixels, so nothing is blurred by upscaling.
   The two agree for every shot larger than the frame, and older engines that do
   not know scale-down keep the contain behavior. */
.shot-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-fit: scale-down;
  object-position: center;
}

.guide-shot figcaption {
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
}

.shot-zoom {
  display: block;
  margin-top: 2px;
  color: var(--gold-soft);
  font-weight: 700;
}

.sharing-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 12px;
}

.sharing-key span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.sharing-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}

.sharing-swatch-red {
  background: rgb(205, 48, 48);
}

.sharing-swatch-amber {
  background: rgb(232, 181, 35);
}

.sharing-swatch-green {
  background: rgb(45, 190, 78);
}

.choice-section {
  border-block: 1px solid rgba(229, 185, 83, 0.14);
}

.choice-grid {
  grid-template-columns: repeat(2, 1fr);
}

.choice-grid article {
  min-height: 210px;
  padding: 30px;
}

.choice-grid h3 {
  font-family: var(--serif);
  font-size: 30px;
}

.choice-tag {
  color: var(--gold);
}

.placement-note {
  margin: 18px 0 0;
  color: var(--text-faint);
  font-size: 13px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.help-grid details {
  min-height: 74px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(29, 33, 41, 0.65);
}

.help-grid summary {
  padding: 21px 0;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.help-grid p {
  padding: 0 0 20px;
  color: var(--text-dim);
  font-size: 14px;
}

.support-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 18px;
  padding: 30px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(240, 190, 40, 0.08), transparent 52%), var(--bg-card);
}

.support-card p,
.privacy-list li {
  color: var(--text-dim);
  font-size: 14px;
}

.privacy-list ul {
  margin-bottom: 0;
  padding-left: 20px;
}

/* text-align centres the lines inside this section; margin-inline centres the
   section itself. Without the second one the 820px box sits flush against the
   left of the 1160px column and the whole closing call to action reads as
   left-biased on a wide monitor, with the copy centred inside a box that is not.
   The paragraph rule below has always centred itself the same way. */
.final-cta {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.final-cta p:not(.eyebrow) {
  max-width: 650px;
  margin-inline: auto;
  color: var(--text-dim);
}

footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 30px 0 42px;
  border-top: 1px solid rgba(229, 185, 83, 0.2);
  color: var(--text-faint);
  font-size: 11px;
}

.footer-brand {
  display: grid;
  color: var(--text-dim);
  line-height: 1.2;
}

.footer-brand strong {
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
}

/* The site version is a cache sanity check rather than footer copy, so it is
   the quietest line here: smaller and dimmer than both brand lines above it
   and than the notice beside them, while staying legible to anyone who looks
   for it on purpose. The color is --text-faint held back a little further. */
.footer-brand > span:last-child {
  margin-top: 3px;
  color: rgba(126, 135, 148, 0.9);
  font-size: 10px;
  letter-spacing: 0.02em;
}

footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: flex-end;
}

.footer-links a {
  color: var(--gold);
  font-weight: 800;
  text-underline-offset: 3px;
}

.subpage-main {
  padding: 62px 0 104px;
}

.subpage-hero {
  max-width: 840px;
  padding: 32px 0 54px;
}

.subpage-hero h1 {
  max-width: 820px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.subpage-hero > p:last-child {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--text-dim);
  font-size: 18px;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.support-grid > .support-card {
  display: block;
  margin: 0;
  padding: 28px;
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(240, 190, 40, 0.055), transparent 52%),
    var(--bg-card);
}

.support-grid > .support-card h2 {
  margin: 10px 0 12px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
}

.support-grid > .support-card p,
.support-grid > .support-card li {
  color: var(--text-dim);
  font-size: 14px;
}

.support-grid > .support-card ol {
  display: grid;
  gap: 7px;
  margin: 16px 0 0;
  padding-left: 21px;
}

/* The card list carries no bottom margin, so a closing line after it sat flush
   against the last step. Every card closer is the paragraph after that list,
   so one rule gives them all the same air. */
.support-grid > .support-card ol + p {
  margin-top: 16px;
}

.support-number {
  color: var(--gold);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

/* Each card is linkable, and its number is the handle. It reads as the number
   it already was until a pointer or the keyboard reaches it. */
a.support-number {
  color: var(--gold);
  text-decoration: none;
}

a.support-number:hover,
a.support-number:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A reader arriving from a shared card link sees which card was meant. The
   ring is a second hairline rather than a thicker border, so nothing shifts. */
.support-grid > .support-card {
  scroll-margin-top: 90px;
}

.support-grid > .support-card:target {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 1px rgba(214, 167, 43, 0.35);
}

/* The header spans the card and the machinery splits below it. The two sides
   used to be columns of one row, which only worked while both were short; the
   collection recipe made the right side several times the left and left the
   title floating over a tall empty gap. */
.report-card {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  margin-top: 28px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

/* The header block spans the card, but its text keeps a readable measure
   instead of running the whole width of a wide monitor. */
.report-header {
  max-width: 62ch;
}

.report-card h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
}

.report-card p,
.report-card li {
  color: var(--text-dim);
}

.report-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px clamp(30px, 4vw, 60px);
}

.report-columns h3 {
  margin-top: 0;
}

/* A column now stacks more than one headed block. The first heading takes its
   air from the header above the columns; a later one has to ask for its own,
   or it collides with the list it follows. */
.report-columns h3 ~ h3 {
  margin-top: 30px;
}

.report-columns ul,
.report-columns ol {
  display: grid;
  gap: 7px;
  padding-left: 20px;
}

/* A file named in a card closer jumps to its definition here. The page already
   speaks gold for a link in policy copy; this keeps the hue, drops the weight,
   and carries a faint underline so it reads as clickable without shouting. */
.support-card a:not(.support-number),
.report-columns a {
  color: var(--gold-soft);
  text-decoration-color: rgba(214, 167, 43, 0.5);
  text-underline-offset: 2px;
}

.support-card a:not(.support-number):hover,
.support-card a:not(.support-number):focus-visible,
.report-columns a:hover,
.report-columns a:focus-visible {
  color: var(--gold);
  text-decoration-color: currentColor;
}

/* The jumped-to file, marked only by its name warming to gold. */
.file-entry {
  scroll-margin-top: 96px;
}

.file-entry:target strong {
  color: var(--gold);
}

.policy-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  gap: clamp(34px, 7vw, 90px);
  align-items: start;
}

.policy-nav {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(23, 26, 32, 0.88);
}

.policy-nav a {
  padding: 8px 10px;
  font-size: 12px;
}

.policy-copy {
  display: grid;
  gap: 42px;
}

.policy-copy section {
  scroll-margin-top: 96px;
}

.policy-copy h2 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-gold);
  font-family: var(--serif);
  font-size: 30px;
}

.policy-copy p,
.policy-copy li {
  color: var(--text-dim);
}

.policy-copy ul {
  display: grid;
  gap: 10px;
  padding-left: 22px;
}

.policy-copy a {
  color: var(--gold);
  font-weight: 700;
}

/* The figure overlay. It is inert markup until guide.js binds it, so a page
   without JavaScript keeps the plain open-in-new-tab behavior. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

.lightbox-panel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 1400px;
  max-height: 100%;
}

/* Close sits above the panel corner rather than in the grid, so the picture
   keeps its full height and the caption is never pushed off screen. */
.lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.lightbox-prev {
  grid-area: 1 / 1 / 2 / 2;
}

.lightbox-stage {
  display: flex;
  grid-area: 1 / 2 / 2 / 3;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.lightbox-next {
  grid-area: 1 / 3 / 2 / 4;
}

.lightbox-caption {
  grid-area: 2 / 1 / 3 / -1;
  max-width: 760px;
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

.lightbox-caption-step {
  color: var(--text);
}

.lightbox-image {
  display: block;
  max-width: min(100%, 1400px);
  max-height: calc(100vh - 110px);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  object-fit: contain;
}

.lightbox-button {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(23, 26, 32, 0.92);
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.lightbox-button:hover,
.lightbox-button:focus-visible {
  border-color: var(--line-gold);
  background: var(--bg-card);
  color: var(--gold);
}

.lightbox-nav {
  font-size: 26px;
}

.lightbox-open {
  overflow: hidden;
}

.lightbox-open body {
  padding-right: var(--lightbox-gutter, 0px);
}

:focus-visible {
  outline: 3px solid rgba(240, 190, 40, 0.72);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 70px;
  }

  .hero-copy {
    max-width: 780px;
  }

  .hero-preview {
    width: min(620px, 100%);
  }

  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-strip div:nth-child(3) {
    border-left: 0;
  }

  .release-card {
    grid-template-columns: 1fr;
  }

  .policy-layout {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 34px;
  }

  .release-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .guide-shot {
    max-width: 680px;
    margin-inline: auto;
  }
}

@media (max-width: 680px) {
  :root {
    --page: min(100% - 28px, 1160px);
  }

  /* A stationary backdrop is expensive to repaint on a phone, so here the
     emblem scrolls away with the top of the page instead. One column also
     means text crosses the whole width, so the emblem is smaller.
     Sizing goes back to height-driven here. Width-driven sizing exists to stop
     the emblem shrinking into a middle column, and a phone has no room for a
     middle column in the first place: 110vh of height already carries 88vh of
     width, which on any phone is far wider than the screen. Driving from the
     width instead would tie the emblem to the narrowest side and shrink it. */
  body::after {
    position: absolute;
    inset: 0 0 auto;
    height: 120vh;
    background-size: auto 110vh;
  }

  .site-header {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .brand small {
    display: none;
  }

  .site-header nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    padding-top: 7px;
    border-top: 1px solid rgba(229, 185, 83, 0.12);
  }

  nav a {
    padding: 6px 4px;
    font-size: 11px;
    text-align: center;
  }

  .hero {
    gap: 46px;
    padding: 58px 0 52px;
  }

  .hero-preview::before {
    inset: -28px 0;
  }

  h1 {
    font-size: clamp(40px, 13vw, 58px);
  }

  .hero-actions .button,
  .release-actions .button {
    width: 100%;
  }

  .trust-strip,
  .part-grid,
  .choice-grid,
  .help-grid,
  .support-card {
    grid-template-columns: 1fr;
  }

  .trust-strip div,
  .trust-strip div:nth-child(3) {
    border-top: 1px solid rgba(229, 185, 83, 0.14);
    border-left: 0;
  }

  .trust-strip div:first-child {
    border-top: 0;
  }

  .section {
    padding: 72px 0;
  }

  .step {
    padding: 42px 0;
  }

  .support-card {
    gap: 12px;
  }

  .subpage-main {
    padding: 34px 0 72px;
  }

  .subpage-hero {
    padding-bottom: 40px;
  }

  .support-grid,
  .report-columns,
  .policy-layout {
    grid-template-columns: 1fr;
  }

  .policy-nav {
    position: static;
  }

  .lightbox {
    padding: 12px;
  }

  .lightbox-panel {
    gap: 8px 6px;
  }

  .lightbox-button {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .lightbox-nav {
    font-size: 22px;
  }

  .lightbox-image {
    max-height: calc(100vh - 150px);
  }

  footer {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* A page sliding over a stationary emblem is relative motion, so here the
     emblem travels with the page and nothing moves against anything.
     The width-driven size carries over from the base rule, so the emblem spans
     the page here too; the 135vh box below is what crops it, and the art stands
     143.75vw tall, so on any window wider than it is tall the crop is tighter
     than the stationary version rather than looser. */
  body::after {
    position: absolute;
    inset: 0 0 auto;
    height: 135vh;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #fff;
    color: #111;
  }

  .site-header,
  .hero-preview,
  .hero-actions,
  .release-actions,
  .final-cta,
  footer {
    display: none;
  }

  .hero {
    display: block;
    min-height: 0;
    padding: 30px 0;
  }

  .section {
    padding: 28px 0;
  }

  .step {
    break-inside: avoid;
  }

  .part-grid article,
  .choice-grid article,
  .help-grid details,
  .support-card,
  .release-card {
    border-color: #777;
    background: #fff;
    box-shadow: none;
    color: #111;
  }

  p,
  li,
  .step-copy > p,
  .step li,
  .section-heading > p:last-child {
    color: #333 !important;
  }
}