/* ============================================================================
   Beasticard — Field Archive landing page.

   The apex-domain page for the app at beasticard-field-archive. Every token,
   motif and prohibition here is taken from that repo's DESIGN.md and
   public/shared/arc.css so the two surfaces are the same book: gold hairlines,
   engraved plates with two corner ticks, dotted leaders, tick rows, Cinzel
   capitals, and a photographic stage under a veil.

   The app is authored at a 402pt canvas. A landing page is not, so the scale
   here is larger — but only the scale. No motif, colour or shape is invented.
   ========================================================================== */

:root {
  --gold: #d7b579;
  --gold-dim: #8d7448;
  --gold-hair: rgba(215, 181, 121, 0.28);
  --gold-hair-soft: rgba(215, 181, 121, 0.14);
  --cream: #f2e9d8;
  --cream-2: #b9ac94;
  --cream-3: #7d7361;
  --ink-plate: rgba(9, 11, 16, 0.46);
  --ink-deep: rgba(6, 8, 13, 0.9);
  --surface: #08090d;

  --font-title: Cinzel, "Perpetua Titling MT", Georgia, serif;
  --font-body: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --tide: #00c9b7;
  --spark: #ffd338;
  --stone: #d08b3e;
  --moss: #4fc45a;
  --ember: #ff4f2e;
  --frost: #40d9f2;
  --dusk: #c44c9b;
  --moon: #c8c5ff;
  --wind: #349bff;

  --common: #c4c7cd;
  --uncommon: #7fe0ca;
  --rare: #93bfff;
  --celestial: #dd9dff;
  --singular: #fff0a6;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* --el-rgb carries the same colour for the glows, matching arc.css. */
.el-tide { --el: var(--tide); --el-rgb: 0, 201, 183; }
.el-spark { --el: var(--spark); --el-rgb: 255, 211, 56; }
.el-stone { --el: var(--stone); --el-rgb: 208, 139, 62; }
.el-moss { --el: var(--moss); --el-rgb: 79, 196, 90; }
.el-ember { --el: var(--ember); --el-rgb: 255, 79, 46; }
.el-frost { --el: var(--frost); --el-rgb: 64, 217, 242; }
.el-dusk { --el: var(--dusk); --el-rgb: 196, 76, 155; }
.el-moon { --el: var(--moon); --el-rgb: 200, 197, 255; }
.el-wind { --el: var(--wind); --el-rgb: 52, 155, 255; }

/* ------------------------------------------------------------------- base */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow-x: hidden;
  background: var(--surface);
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  overflow-x: hidden;
  background: var(--surface);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

button {
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 0.5rem;
  left: 50%;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--gold-hair);
  background: var(--ink-deep);
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translate(-50%, -220%);
  transition: transform 160ms;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------ stage
   Nothing in this system stands on a flat colour. The plate is the
   atmosphere; the chrome floats on top of it under a veil that is lightest at
   the top and densest at the bottom. */

.stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The layer is taller than the viewport by exactly twice the parallax travel
   main.js is allowed, so drifting it can never expose the surface underneath.
   --drift is the clamp both sides agree on. */
.stage-bg {
  --drift: 160px;
  position: absolute;
  top: calc(var(--drift) * -1);
  right: -4%;
  bottom: calc(var(--drift) * -1);
  left: -4%;
  background: url("/assets/img/stage/page-stage.webp") center center / cover no-repeat;
  will-change: transform;
}

.stage-motes {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255, 240, 190, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 15%, rgba(200, 225, 255, 0.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 62%, rgba(255, 235, 175, 0.8), transparent 60%),
    radial-gradient(1.1px 1.1px at 86% 48%, rgba(255, 245, 205, 0.65), transparent 60%),
    radial-gradient(1.3px 1.3px at 12% 74%, rgba(190, 220, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 88%, rgba(255, 238, 190, 0.7), transparent 60%);
  animation: mote-drift 14s ease-in-out infinite alternate;
}

@keyframes mote-drift {
  from { opacity: 0.5; translate: 0 0; }
  to { opacity: 1; translate: -8px -14px; }
}

/* The veil makes the plate survivable as a background; it is not optional.
   The app ramps it hard toward the bottom because its plate ends at the nav.
   Here the stage is fixed behind a long page, so the ramp is gentler — a hard
   bottom would put flat black behind every band below the fold. */
.stage-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 45% at 50% 2%, rgba(155, 195, 255, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(4, 7, 14, 0.4) 0%, rgba(4, 7, 14, 0.56) 48%, rgba(3, 5, 10, 0.68) 100%);
}

/* ------------------------------------------------------------------ plate
   1px gold hairline, translucent fill, 24px backdrop blur, and a 9px gold
   corner tick at top-left and bottom-right only. The asymmetry is the single
   most recognisable detail in the system — never all four. */

.plate {
  position: relative;
  border: 1px solid var(--gold-hair);
  background: var(--ink-plate);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}

.plate::before,
.plate::after {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

.plate::before {
  top: 5px;
  left: 5px;
  border-right: 0;
  border-bottom: 0;
}

.plate::after {
  right: 5px;
  bottom: 5px;
  border-top: 0;
  border-left: 0;
}

/* --------------------------------------------------------------- lettering */

h1,
h2,
h3,
.title-line {
  font-family: var(--font-title);
  font-weight: 600;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.4rem, 2.9vw, 2.35rem);
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-indent: 0.13em;
}

h2 {
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-indent: 0.2em;
}

h3 {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.lede {
  max-width: 46ch;
  color: var(--cream-2);
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  line-height: 1.72;
}

.micro {
  color: var(--cream-3);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.diamond {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  background: var(--gold);
  opacity: 0.75;
  transform: rotate(45deg);
}

/* Centred title with a rule row beneath: rule, diamond, caption, diamond,
   rule. Never a plain bold heading. */
.rule-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 0.85rem;
}

.rule-row i {
  display: block;
  width: clamp(2rem, 6vw, 4rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hair));
}

.rule-row i + i {
  background: linear-gradient(90deg, var(--gold-hair), transparent);
}

.rule-row span {
  color: var(--cream-3);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* The flanking rules have no room once the caption wraps, and a two-line
   caption between two hairlines reads as a mistake. */
@media (max-width: 30rem) {
.rule-row i { display: none; }
}

/* Section head: Cinzel gold label, hairline rule filling the remaining width,
   small faint caption right-aligned. */
.sec {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.sec h2 {
  color: var(--gold);
  font-size: clamp(0.78rem, 1.1vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1;
  text-indent: 0.26em;
  white-space: nowrap;
}

.sec i {
  flex: 1;
  height: 1px;
  background: var(--gold-hair);
}

.sec b {
  color: var(--cream-3);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

/* The dotted leader — the archive's signature list form. */
.led-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.68rem 0;
}

.led-row + .led-row {
  border-top: 1px solid var(--gold-hair-soft);
}

.led-row span {
  color: var(--cream-2);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.led-row i {
  flex: 1;
  height: 0;
  border-bottom: 1px dotted rgba(215, 181, 121, 0.24);
  transform: translateY(-3px);
}

.led-row b {
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 600;
}

.led-row b em {
  color: var(--cream-3);
  font-size: 0.72rem;
  font-style: normal;
}

/* --------------------------------------------------------------- controls
   The shutter from arc.css, verbatim in shape: a dark fill, an element-tinted
   hairline, and a soft glow instead of a filled gold slab. Square-cornered,
   no gradient. */

.btn {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.9rem;
  border: 1px solid color-mix(in srgb, var(--el, var(--gold)) 55%, transparent);
  background: rgba(8, 10, 15, 0.72);
  box-shadow: 0 0 26px rgba(var(--el-rgb, 215, 181, 121), 0.22);
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-decoration: none;
  text-indent: 0.3em;
  text-transform: uppercase;
  transition: color 320ms, border-color 320ms, box-shadow 320ms;
}

.btn:hover,
.btn:focus-visible {
  color: var(--gold);
  box-shadow: 0 0 30px rgba(var(--el-rgb, 215, 181, 121), 0.42);
}

.btn-quiet {
  border-color: var(--gold-hair);
  box-shadow: none;
  color: var(--cream-2);
}

.btn-quiet:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--gold);
}

/* Coming soon wears the shutter's disabled state — present, legible, and
   refusing the cursor. It is a status, not a destination. */
.badge-soon {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.6rem;
  border: 1px solid var(--gold-hair);
  color: var(--cream-3);
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
}

.badge-soon i {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  background: var(--gold-dim);
  transform: rotate(45deg);
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.actions.centred {
  justify-content: center;
}

/* ----------------------------------------------------------------- header */

.topbar {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid transparent;
  transition: background 300ms, border-color 300ms;
}

.topbar.settled {
  border-bottom-color: var(--gold-hair);
  background: var(--ink-deep);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.topbar-inner {
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* The shutter's 0.3em tracking is generous for a header slot; trim it there
   so it never crowds the last nav item. */
.topbar-inner .btn {
  min-height: 2.6rem;
  padding: 0.5rem 1.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  white-space: nowrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 1.35rem;
}

.nav {
  display: none;
  gap: 1.5rem;
}

.nav a {
  position: relative;
  color: var(--cream-2);
  font-family: var(--font-title);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms;
}

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

/* The active/hovered page is marked with a struck diamond — the archive's own
   punctuation, not an underline. */
.nav a::after {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--gold);
  content: "";
  opacity: 0;
  transform: translateX(-50%) rotate(45deg);
  transition: opacity 200ms;
}

.nav a:hover::after {
  opacity: 1;
}

.menu-btn {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--gold-hair);
  background: var(--ink-plate);
}

.menu-btn i,
.menu-btn i::before,
.menu-btn i::after {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--cream);
  transition: transform 240ms var(--ease), opacity 160ms;
}

.menu-btn i::before,
.menu-btn i::after {
  position: absolute;
  content: "";
}

.menu-btn i::before { transform: translateY(-5px); }
.menu-btn i::after { transform: translateY(5px); }
.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: rotate(-45deg); }

.drawer[hidden] {
  display: none;
}

.drawer {
  display: grid;
  padding: 0.25rem var(--gutter) 1.25rem;
  border-top: 1px solid var(--gold-hair-soft);
  background: var(--ink-deep);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.drawer a:not(.btn) {
  padding: 0.85rem 0.15rem;
  border-bottom: 1px solid var(--gold-hair-soft);
  color: var(--cream-2);
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}

.drawer .btn {
  margin-top: 1rem;
}

@media (min-width: 62rem) {
.nav { display: flex; }
  .menu-btn { display: none; }
  .drawer { display: none !important; }
}

@media (max-width: 61.99rem) {
.topbar-inner > .btn { display: none; }
}

/* ---------------------------------------------------------------- sections */

main {
  position: relative;
  z-index: 1;
}

.band {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.band-head {
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.band-head.centred {
  text-align: center;
}

.band-head.centred .lede {
  margin-inline: auto;
}

.band-head .lede {
  margin-top: 1rem;
}

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

.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 5vw, 4.5rem);
}

.hero-grid {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 62rem) {
.hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

.hero h1 {
  margin-bottom: 1.15rem;
}

.hero h1 em {
  display: block;
  color: var(--gold);
  font-style: normal;
}

.hero .rule-row {
  justify-content: flex-start;
  margin-bottom: 1.5rem;
}

.hero-note {
  margin-top: 1.15rem;
  color: var(--cream-3);
  font-size: 0.78rem;
}

/* Three counts of record on one line, divided the way the app divides its
   card stats. The group is content-sized, not stretched across three equal
   columns — equal columns put the hairlines at arbitrary distances from the
   numerals they separate. */
.hero-ledger {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: stretch;
  margin-top: 2.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--gold-hair);
}

.hero-ledger div {
  padding-inline: clamp(1.1rem, 3vw, 2.1rem);
}

/* No outer padding, so the rule above ends flush with the first and last
   counts rather than overshooting them. */
.hero-ledger div:first-child {
  padding-left: 0;
}

.hero-ledger div:last-child {
  padding-right: 0;
}

.hero-ledger div + div {
  border-left: 1px solid var(--gold-hair-soft);
}

.hero-ledger b {
  display: block;
  color: var(--cream);
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1;
}

.hero-ledger span {
  display: block;
  margin-top: 0.45rem;
  color: var(--cream-3);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ------------------------------------------------- hero: the exhibit
   One plate, shown whole and leaning toward the pointer. The geometry is the
   app's card page: perspective on the wrapper so the plate itself only ever
   rotates, and a radius derived from the plate width so the printed corner
   never shows through the mount. */

.exhibit {
  perspective: 1100px;
}

.exhibit-frame {
  --plate-w: min(100%, 23rem);
  position: relative;
  width: var(--plate-w);
  margin-inline: auto;
  aspect-ratio: 1052 / 1495;
  overflow: hidden;
  border-radius: calc(var(--plate-w) * 0.054);
  background: #05070c;
  box-shadow:
    0 0 0 1px rgba(215, 181, 121, 0.22),
    0 28px 56px -20px rgba(0, 0, 0, 0.95);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.exhibit-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------- plates: opposing rows */

.marquee {
  position: relative;
  display: grid;
  gap: clamp(0.55rem, 1.2vw, 0.85rem);
  /* Rows are wider than the viewport by design; clip here so the document
     never gains horizontal scroll. */
  overflow: hidden;
}

.marquee-row {
  --gap: clamp(0.55rem, 1.2vw, 0.85rem);
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: travel-x var(--speed, 76s) linear infinite;
  will-change: transform;
}

.marquee-row.back {
  animation-direction: reverse;
}

@keyframes travel-x {
  to { transform: translate3d(calc(-50% - var(--gap) / 2), 0, 0); }
}

.marquee:hover .marquee-row,
.marquee:focus-within .marquee-row {
  animation-play-state: paused;
}

.plate-btn {
  position: relative;
  display: block;
  width: clamp(7.5rem, 12vw, 10.5rem);
  flex: 0 0 auto;
  border: 1px solid var(--gold-hair);
  transition: border-color 240ms;
}

.plate-btn img {
  width: 100%;
  aspect-ratio: 1052 / 1495;
  object-fit: cover;
}

.plate-btn:hover {
  border-color: var(--gold);
}

/* The caption is struck under the plate on hover — a filed label, not a
   floating tooltip. */
.plate-btn figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.4rem 0.35rem 0.3rem;
  background: linear-gradient(transparent, rgba(6, 9, 15, 0.92));
  color: var(--cream);
  font-family: var(--font-title);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  opacity: 0;
  text-align: center;
  transition: opacity 240ms;
}

.plate-btn:hover figcaption,
.plate-btn:focus-visible figcaption {
  opacity: 1;
}

.marquee-edge {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 8vw, 8rem);
  pointer-events: none;
}

.marquee-edge.left {
  left: 0;
  background: linear-gradient(90deg, var(--surface), transparent);
}

.marquee-edge.right {
  right: 0;
  background: linear-gradient(270deg, var(--surface), transparent);
}

.marquee-note {
  margin-top: 1.25rem;
  text-align: center;
}

/* ------------------------------------------------------------- the sequence */

.steps {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
.steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
.steps { grid-template-columns: repeat(4, 1fr); }
}

.step {
  padding: 1.15rem;
}

.step-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.step-head b {
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.step-head i {
  flex: 1;
  height: 1px;
  background: var(--gold-hair);
}

.step figure {
  margin-bottom: 1rem;
  border: 1px solid var(--gold-hair-soft);
}

.step figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.step h3 {
  margin-bottom: 0.5rem;
  color: var(--cream);
}

.step p {
  color: var(--cream-2);
  font-size: 0.85rem;
  line-height: 1.65;
}

/* --------------------------------------------------- seals of affinity
   The app draws these as bare circles on the plate, not as tiles in boxes:
   a hairline ring over a dark fill, the medallion large inside it. An element
   colour appears only on its own medallion and a single halo — never on a
   panel or body text. */

.seals {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem) 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

@media (min-width: 48rem) {
  .seals { grid-template-columns: repeat(9, 1fr); }
}

.seal {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  text-align: center;
}

.seal-ring {
  display: grid;
  width: clamp(4.5rem, 7vw, 5.75rem);
  height: clamp(4.5rem, 7vw, 5.75rem);
  place-items: center;
  border: 1px solid var(--gold-hair);
  border-radius: 50%;
  background: rgba(8, 10, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 320ms, box-shadow 320ms;
}

.seal img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.seal:hover .seal-ring {
  border-color: color-mix(in srgb, var(--el) 60%, transparent);
  box-shadow: 0 0 26px rgba(var(--el-rgb), 0.5);
}

.seal b {
  color: var(--el);
  font-family: var(--font-title);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.seal small {
  margin-top: -0.35rem;
  color: var(--cream-3);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------- finishes
   A finish is a material, so the band shows five plates rather than naming
   five rows. The tier caption stays a small tracked-caps line under the
   plate — never a badge, ribbon or glowing frame on the art itself. */

.finishes {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
}

@media (min-width: 48rem) {
  .finishes { grid-template-columns: repeat(5, 1fr); }
}

.finishes > li:last-child {
  grid-column: span 2;
}

@media (min-width: 48rem) {
  .finishes > li:last-child { grid-column: auto; }
}

.finish {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  text-align: center;
}

.finish img {
  width: 100%;
  aspect-ratio: 1052 / 1495;
  border: 1px solid var(--gold-hair);
  object-fit: cover;
}

.finish dt {
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.finish dd {
  margin-top: -0.5rem;
  color: var(--cream-3);
  font-size: 0.66rem;
}

.finish b {
  color: var(--cream-2);
  font-family: var(--font-title);
  font-size: 0.86rem;
  font-weight: 600;
}

.f-common dt { color: var(--common); }
.f-uncommon dt { color: var(--uncommon); }
.f-rare dt { color: var(--rare); }
.f-celestial dt { color: var(--celestial); }
.f-singular dt { color: var(--singular); }

/* --------------------------------------------------------------- closing */

.closing {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}

.closing img.emblem {
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 auto 1.35rem;
  object-fit: contain;
}

.closing .lede {
  margin-inline: auto;
  margin-top: 1.15rem;
}

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

.foot {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--gold-hair);
  background: var(--ink-deep);
}

.foot-inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.foot img {
  width: min(100%, 11rem);
  opacity: 0.8;
}

.foot nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem 1.4rem;
}

.foot nav a {
  color: var(--cream-2);
  font-family: var(--font-title);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms;
}

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

.foot p {
  color: var(--cream-3);
  font-size: 0.68rem;
}

/* --------------------------------------------------------------- lightbox */

.viewer {
  position: relative;
  width: min(92vw, 26rem);
  max-height: 94vh;
  padding: 0.75rem;
  border: 1px solid var(--gold-hair);
  background: var(--ink-deep);
  color: var(--cream);
  overflow: visible;
}

.viewer::backdrop {
  background: rgba(3, 5, 9, 0.9);
  backdrop-filter: blur(8px);
}

.viewer img {
  width: auto;
  max-width: 100%;
  max-height: 76vh;
  margin-inline: auto;
}

.viewer figcaption {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.85rem;
  text-align: center;
}

.viewer figcaption b {
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.viewer figcaption span {
  color: var(--cream-3);
  font-size: 0.7rem;
  font-style: italic;
}

.viewer-close {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid var(--gold-hair);
  background: var(--ink-deep);
  color: var(--cream-2);
  font-size: 1.1rem;
  line-height: 1;
}

.viewer-close:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ---------------------------------------------------------------- reveal */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease) var(--d, 0ms),
    transform 700ms var(--ease) var(--d, 0ms);
}

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

/* --------------------------------------------------------- reduced motion */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

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

  .marquee-row {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

}