/* =========================================================================
   Alchemaidens — site styles

   A DELIBERATE SINGLE-THEME SITE, for the same reason the in-game Field
   Manual is one: it sits beside a game whose entire world is deep violet,
   gold and cyan, and a light variant would read as a different product.
   Every colour is painted explicitly from a token so the page holds its own
   ground rather than borrowing the browser's.

   The palette is the game's, unchanged:
     void #0a0812 · gold #f2d488 · magenta #ff5cc8 · cyan #5fe3f2 · violet #b98cff
   ========================================================================= */

/* The game's default UI face. It has DIGITS, which the wordmark font does not
   -- a headline reading "81 Charms" silently loses its number in that one.
   Every stack ends in a real fallback so a font that fails to load degrades to
   something with the same monospaced, blocky rhythm instead of to Times. */
@font-face {
  font-family: "AlchemaidensUI";
  src: url("/assets/fonts/CyberpunkCraftpixPixel.otf") format("opentype");
  font-display: swap;
}

:root {
  --ground: #0b0715;
  --ground-2: #0f0a1d;
  --panel: #150d26;
  --panel-2: #1c1233;
  --edge: #2c1f4a;
  --edge-lit: #4a3578;

  --gold: #f0ce7e;
  --cyan: #6fe3f5;
  --rose: #ff7bc8;
  --violet: #b98cff;
  --lime: #b8e86a;

  --text: #e9e3f6;
  --dim: #a092c2;
  --faint: #6f6390;

  --display: "AlchemaidensUI", ui-monospace, "Courier New", monospace;
  --body: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype",
    Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 4px;      /* the game's UI is angular; nothing here is round */
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* The same faint vertical wash the game's screens have under their art.
     Fixed so it does not slide against the content as the page scrolls. */
  background-image:
    radial-gradient(1100px 620px at 50% -10%, rgba(111, 227, 245, .07), transparent 70%),
    radial-gradient(900px 500px at 12% 108%, rgba(255, 123, 200, .06), transparent 70%);
  background-attachment: fixed;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan); text-decoration-color: rgba(111, 227, 245, .35); text-underline-offset: 3px; }
a:hover { color: var(--gold); text-decoration-color: rgba(240, 206, 126, .6); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--panel); color: var(--text);
  padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* --- shared type ------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 5.4vw, 54px); color: var(--gold); }
h2 { font-size: clamp(24px, 3.4vw, 34px); color: var(--gold); }
h3 { font-size: clamp(18px, 2.2vw, 22px); color: var(--cyan); }
h4 { font-size: 17px; color: var(--violet); }

p { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .8em;
}
.eyebrow a { color: inherit; }
.eyebrow .sep { color: var(--faint); }

.standfirst {
  font-size: clamp(18px, 2.1vw, 21px);
  color: var(--dim);
  max-width: var(--measure);
  margin-bottom: 1.4em;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: .1em .38em;
  color: var(--gold);
}
pre {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; color: var(--text); }

hr { border: 0; border-top: 1px solid var(--edge); margin: 2.4em 0; }

blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--rose);
  color: var(--dim);
}
blockquote p:last-child { margin-bottom: 0; }

.table-scroll { overflow-x: auto; margin: 1.6em 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
}
th {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
tbody tr:hover { background: rgba(111, 227, 245, .04); }

figure { margin: 1.8em 0; }
figcaption {
  font-size: 14px;
  color: var(--faint);
  margin-top: .7em;
  font-style: italic;
}

/* --- call to action ----------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ground);
  background: linear-gradient(180deg, var(--gold), #d9ad55);
  border: 1px solid #ffe9b0;
  border-radius: var(--radius);
  padding: 12px 22px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  /* Glow from a bright edge on a dark field, never a blurred halo -- the same
     rule the game's own StyleBoxes follow. */
  box-shadow: 0 0 0 1px rgba(240, 206, 126, .25), 0 6px 22px rgba(0, 0, 0, .5);
}
.cta:hover { color: var(--ground); transform: translateY(-2px); filter: brightness(1.08); }
.cta:active { transform: translateY(0); }
.cta-mark { font-size: .8em; opacity: .8; }
.cta-lg { font-size: 17px; padding: 15px 30px; }

/* The pre-App-ID state. Deliberately still looks like a plate rather than
   disappearing: the page's layout should not change shape on the day the Steam
   link goes in. */
.cta-pending {
  background: none;
  color: var(--dim);
  border: 1px dashed var(--edge-lit);
  box-shadow: none;
  cursor: default;
}
.cta-pending:hover { transform: none; filter: none; color: var(--dim); }

.cta-ghost {
  background: none;
  color: var(--cyan);
  border: 1px solid var(--edge-lit);
  box-shadow: none;
}
.cta-ghost:hover { color: var(--gold); border-color: var(--gold); }

/* --- top bar ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 7, 21, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.topbar-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}
.brand { flex: 0 0 auto; line-height: 0; }
.brand img { width: clamp(140px, 20vw, 210px); height: auto; }

.mainnav {
  display: flex;
  gap: clamp(12px, 2.2vw, 26px);
  margin-left: auto;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mainnav a {
  color: var(--dim);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.mainnav a:hover { color: var(--text); }
.mainnav a.current { color: var(--gold); border-bottom-color: var(--gold); }

.topbar-cta .cta { font-size: 13px; padding: 9px 16px; }
@media (max-width: 900px) { .topbar-cta { display: none; } }
@media (max-width: 620px) {
  .topbar-in { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  .mainnav { margin-left: 0; width: 100%; justify-content: space-between; font-size: 12px; }
}

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(76vh, 680px);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--edge);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The footage is a busy UI screen. Without this the headline sits on top of
     moving numbers and neither is readable. */
  filter: saturate(.85) brightness(.5);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11, 7, 21, .55) 0%, rgba(11, 7, 21, .78) 55%, var(--ground) 100%),
    radial-gradient(700px 420px at 22% 50%, rgba(11, 7, 21, .8), transparent 75%);
}
.hero-in {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) var(--gutter);
  width: 100%;
}
.hero-wordmark {
  width: min(560px, 100%);
  margin-bottom: clamp(18px, 3vw, 30px);
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .7));
}
.hero-pitch {
  font-size: clamp(19px, 2.5vw, 25px);
  line-height: 1.5;
  color: var(--text);
  max-width: 30ch;
  margin-bottom: 1.3em;
  text-wrap: balance;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hero-meta {
  margin-top: 1.6em;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.hero-meta span { white-space: nowrap; }

/* --- generic section ---------------------------------------------------- */

.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-alt { background: var(--ground-2); border-block: 1px solid var(--edge); }
.section-head { max-width: var(--measure); margin-bottom: clamp(28px, 4vw, 44px); }

.page-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(46px, 7vw, 84px) var(--gutter) clamp(24px, 4vw, 40px);
}

/* --- the three-beat pitch ----------------------------------------------- */

.beats {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.beat {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  position: relative;
}
.beat::before {
  /* the tight cyan rim the game's panels have -- an edge, not a halo */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  border-top-color: rgba(111, 227, 245, .32);
  pointer-events: none;
}
.beat h3 { margin-bottom: .5em; }
.beat p { color: var(--dim); margin-bottom: 0; }
.beat .num {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--faint);
  display: block;
  margin-bottom: 1em;
}

/* --- the equation plate -------------------------------------------------- */

.equation {
  text-align: center;
  border: 1px solid var(--edge-lit);
  border-radius: var(--radius);
  background: var(--panel);
  padding: clamp(26px, 4vw, 40px);
  margin: clamp(28px, 4vw, 40px) auto 0;
  max-width: 640px;
}
.equation .eq {
  font-family: var(--display);
  font-size: clamp(20px, 3.6vw, 32px);
  color: var(--gold);
  margin-bottom: .5em;
}
.equation .eq .op { color: var(--rose); }
.equation p { color: var(--dim); margin: 0; font-size: 16px; }

/* --- counts strip -------------------------------------------------------- */

/* There are EIGHT counts, and the column count must divide eight.
   `auto-fit, minmax(150px, 1fr)` fitted seven across and dropped the eighth
   onto its own row, where the 1px grid gap's background showed through the
   seven empty cells beside it as one enormous purple slab. Fixed tracks, and
   both step values keep the rows full: 4x2, then 2x4. */
.counts {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 720px) {
  .counts { grid-template-columns: repeat(2, 1fr); }
}
.count {
  background: var(--panel);
  padding: clamp(18px, 2.6vw, 26px) 16px;
  text-align: center;
}
.count b {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .35em;
}
.count span {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --- gallery ------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: clamp(12px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery li { margin: 0; }
.shot {
  display: block;
  width: 100%;
  padding: 0;
  /* The whole tile is an <a>, so the caption inherited link underlining and
     read as though every word of it were clickable. The tile signals itself
     with its border and lift on hover instead. */
  text-decoration: none;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: zoom-in;
  overflow: hidden;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.shot:hover { border-color: var(--cyan); transform: translateY(-2px); text-decoration: none; }
.shot:hover figcaption { color: var(--text); }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot figcaption {
  padding: 12px 14px 14px;
  font-size: 14px;
  font-style: normal;
  color: var(--dim);
  margin: 0;
}

/* lightbox */
/* The display rule MUST be scoped to [open].
   A bare `.lightbox { display: grid }` overrides the user agent's
   `dialog:not([open]) { display: none }`, so the closed dialog renders as a
   small floating box of naked controls that tracks the scroll, because it is
   also position:fixed. That shipped once; don't unscope this. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 4, 12, .94);
  padding: clamp(16px, 4vw, 48px);
  border: 0;
}
.lightbox[open] {
  display: grid;
  place-items: center;
}
.lightbox::backdrop { background: rgba(6, 4, 12, .9); }
.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  border: 1px solid var(--edge-lit);
  border-radius: var(--radius);
}
.lightbox figcaption { text-align: center; color: var(--dim); font-style: normal; }
.lightbox-close {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: 1px solid var(--edge-lit);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(21, 13, 38, .8);
  border: 1px solid var(--edge-lit);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--display);
  font-size: 20px;
  padding: 14px 16px;
  cursor: pointer;
}
.lightbox-nav:hover { border-color: var(--gold); color: var(--gold); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

/* --- trailer ------------------------------------------------------------- */

.trailer {
  border: 1px solid var(--edge-lit);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  position: relative;
  aspect-ratio: 16 / 9;
}
.trailer video { width: 100%; height: 100%; object-fit: contain; }
.trailer-poster {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  display: grid;
  place-items: center;
}
.trailer-poster img { width: 100%; height: 100%; object-fit: cover; }
.trailer-play {
  position: absolute;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--ground);
  background: linear-gradient(180deg, var(--gold), #d9ad55);
  border: 1px solid #ffe9b0;
  border-radius: var(--radius);
  padding: 14px 26px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
.trailer-poster:hover .trailer-play { filter: brightness(1.08); }

/* --- how to play --------------------------------------------------------- */

.toc {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 20px 24px;
  margin-bottom: clamp(34px, 5vw, 54px);
}
.toc h2 { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: .9em; }
.toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 34px; }
.toc li { margin-bottom: .35em; }
.toc a { color: var(--dim); text-decoration: none; }
.toc a:hover { color: var(--gold); }
@media (max-width: 560px) { .toc ol { columns: 1; } }

.chapter {
  padding-top: clamp(34px, 5vw, 52px);
  margin-top: clamp(34px, 5vw, 52px);
  border-top: 1px solid var(--edge);
  scroll-margin-top: 90px;
}
.chapter:first-of-type { border-top: 0; margin-top: 0; }
.chapter > .n {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--rose);
  display: block;
  margin-bottom: .7em;
}
.chapter .prose { max-width: var(--measure); }

.steps { list-style: none; margin: 1.6em 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  margin-bottom: 1.5em;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--display);
  font-size: 14px;
  color: var(--gold);
  border: 1px solid var(--edge-lit);
  border-radius: var(--radius);
  width: 36px;
  height: 30px;
  display: grid;
  place-items: center;
}
.steps b { color: var(--text); display: block; font-family: var(--display); font-size: 15px; margin-bottom: .25em; }
.steps p { color: var(--dim); margin: 0; }

.note {
  border: 1px solid var(--edge-lit);
  border-left: 3px solid var(--rose);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px 22px;
  margin: 1.8em 0;
}
.note b { color: var(--rose); font-family: var(--display); font-size: 14px; display: block; margin-bottom: .4em; }
.note p:last-child { margin-bottom: 0; }
.note.cyan { border-left-color: var(--cyan); }
.note.cyan b { color: var(--cyan); }

.term { color: var(--gold); font-style: normal; }

/* A how-to figure: the slot a demo GIF drops into. It holds its aspect ratio
   before the media exists so adding one never reflows the page around it. */
.demo {
  /* Break out of the prose measure. The surrounding .prose is capped at 68ch
     (~495px) for readability, which is right for text and far too small for a
     gameplay clip -- these are the whole point of the page. The chapter's own
     container is 1180px, so widening here extends into space that already
     exists and cannot cause a horizontal scrollbar. */
  width: min(820px, 100%);
  max-width: none;
  margin: 1.8em 0;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.demo img, .demo video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.demo figcaption { padding: 12px 16px; font-size: 14px; font-style: normal; color: var(--dim); margin: 0; }
.demo-placeholder {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  color: var(--faint);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg, rgba(74, 53, 120, .12) 0 12px, transparent 12px 24px),
    var(--panel-2);
}

/* --- patch notes (list + single entry) ----------------------------------- */

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.post-card a {
  display: block;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.post-card a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.post-card time {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: .6em;
}
.post-card h3 { color: var(--gold); margin-bottom: .4em; }
.post-card p { color: var(--dim); margin-bottom: .8em; }
.post-card .more { font-family: var(--display); font-size: 13px; color: var(--cyan); }

.post { max-width: 820px; margin: 0 auto; padding: clamp(46px, 7vw, 80px) var(--gutter); }
.post-head { margin-bottom: clamp(28px, 4vw, 44px); }
.post-date { font-family: var(--display); font-size: 13px; letter-spacing: .12em; color: var(--faint); }
.post .prose { max-width: var(--measure); }
.post .prose h2 { margin-top: 1.8em; }
.post .prose h3 { margin-top: 1.6em; }
.post .prose img { border: 1px solid var(--edge); border-radius: var(--radius); }
.post-foot { margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--edge); }
.back { font-family: var(--display); font-size: 14px; text-decoration: none; }

/* --- press kit ----------------------------------------------------------- */

.fact-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px clamp(20px, 3vw, 36px);
  margin: 0 0 2.4em;
  font-size: 16px;
}
.fact-grid dt {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-top: .3em;
}
.fact-grid dd { margin: 0; color: var(--text); }
@media (max-width: 560px) {
  .fact-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .fact-grid dd { margin-bottom: 1.1em; }
}

.asset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 1.6em 0 0;
}

.logo-strip {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 1.6em 0;
}
.logo-strip figure {
  margin: 0;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px;
  text-align: center;
}
.logo-strip img { margin: 0 auto 12px; max-height: 130px; width: auto; }
.logo-strip figcaption { font-size: 13px; font-style: normal; margin: 0; }

.copyable {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 1.4em 0;
}
.copyable p:last-child { margin-bottom: 0; }
.copy-btn {
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--panel-2);
  border: 1px solid var(--edge-lit);
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
}
.copy-btn:hover { color: var(--gold); border-color: var(--gold); }

/* --- footer -------------------------------------------------------------- */

/* No margin-top. Every page already ends in a .section with its own generous
   bottom padding, so a margin here stacked on top of that and left a band of
   empty ground between the last words and the footer rule. */
.sitefoot {
  border-top: 1px solid var(--edge);
  background: var(--ground-2);
}
.sitefoot-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) var(--gutter);
  display: grid;
  gap: 18px;
}
.foot-title { font-family: var(--display); color: var(--gold); margin: 0 0 .3em; }
.foot-note { color: var(--faint); font-size: 14px; margin: 0; }
.foot-nav, .socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .06em;
}
.foot-nav a, .socials a { color: var(--dim); text-decoration: none; }
.foot-nav a:hover, .socials a:hover { color: var(--gold); }
.copyright { color: var(--faint); font-size: 13px; margin: 0; }

/* --- content gate ------------------------------------------------------- */

/* The mature-content interstitial. It is CSS-hidden by default and only shown
   by JS -- so a viewer with JS off gets the site rather than a permanent wall,
   and a crawler indexes the page rather than the gate. */
.gate[hidden] { display: none; }
.gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--ground);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  text-align: center;
}
.gate-in { max-width: 460px; }
.gate img { width: 260px; margin: 0 auto 28px; }
.gate p { color: var(--dim); }
.gate .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* Visually hidden but still read by screen readers -- used for table captions
   that would be redundant on screen because a heading already says it. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}