/* Dragons Crack — site stylesheet.
 *
 * The palette is not here. tokens.css is generated from branding/brand.py and
 * web.content.strata(), so the eight colours come from the mark and the five
 * band grounds come from the same rock model that draws the ascent map.
 *
 * The page is a cross-section. A section is a STRATUM: it carries its band's
 * ground, its band's edge colour, and the light that band actually has, and
 * everything inside it is painted out of those three tokens rather than out
 * of a fixed accent. Scroll down and the stone warms, because it does.
 *
 * One rule from BRAND.md governs the rest: the device is load-bearing exactly
 * once per surface. The fault is in the hero on the front page and nowhere
 * else on the site. No cracked panel edges, no jagged rules.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--face-text);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--glow); text-decoration-color: color-mix(in srgb, var(--glow) 38%, transparent); text-underline-offset: .2em; }
a:hover { color: var(--bone); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--crystal); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--glow) 30%, transparent); color: var(--bone); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ember); color: var(--void); padding: .6rem 1rem;
  font-family: var(--face-mono); font-size: var(--t-xs);
}
.skip:focus { left: 0; }

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

h1, h2 {
  font-family: var(--face-display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .002em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  color: var(--bone);
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }

h3, h4 {
  font-family: var(--face-sub);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .005em;
  text-wrap: balance;
  margin: 0;
  color: var(--bone);
}
h3 { font-size: var(--t-md); }
h4 { font-size: 1.05rem; }

p { margin: 0; }

code, kbd, samp {
  font-family: var(--face-mono); font-size: .84em;
  color: var(--crystal);
  background: color-mix(in srgb, var(--crystal) 9%, transparent);
  padding: .06em .34em; border-radius: 2px;
}
strong, b { font-weight: 500; color: var(--bone); }
em { font-style: italic; }

.eyebrow {
  font-family: var(--face-mono);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--glow);
  margin: 0;
}
.eyebrow.quiet { color: var(--quiet); }

.lede {
  font-size: var(--t-md); font-weight: 200; line-height: 1.48;
  color: color-mix(in srgb, var(--bone) 90%, var(--ash));
  max-width: var(--measure-wide);
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose p { color: color-mix(in srgb, var(--bone) 84%, var(--ash)); }

.dim { color: var(--muted); }
.small { font-size: var(--t-sm); }

.pullquote {
  font-family: var(--face-display); font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1.02; letter-spacing: .004em;
  color: var(--glow);
  max-width: 22ch;
  margin-block: 1.4rem;
  text-wrap: balance;
}

/* Every auto-fill track is written minmax(min(N, 100%), 1fr) rather than
   minmax(N, 1fr). A bare minimum is a hard floor: a 26rem track in a 24rem
   viewport does not shrink, it overflows, and the whole page scrolls
   sideways. min() lets the track give way on a narrow screen and keeps the
   ideal everywhere else. */

/* --------------------------------------------------------------- layout --- */

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }

.stratum, .band {
  position: relative;
  padding-block: var(--band-pad);
  background: var(--ground);
  isolation: isolate;
}
/* The light in this band sits below it, because the hotter band always does.
   It is a bleed, not a border: a hard line at the bottom would read as a
   floor, and none of these have one. */
.stratum::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 26vh;
  background: linear-gradient(to bottom, transparent 38%,
              color-mix(in srgb, var(--glow) 8%, transparent));
  pointer-events: none; z-index: -1;
}
.band--pit { background: var(--pit); }

.bleed {
  width: 100vw; margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

.stack { display: flex; flex-direction: column; gap: 1.5rem; }
.stack--lg { gap: 3rem; }
.stack--sm { gap: .75rem; }

.grid { display: grid; gap: 1.8rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.split {
  display: grid; gap: clamp(1.8rem, 4vw, 3.8rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
.split--rail { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.split--map { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
@media (max-width: 62rem) {
  .split, .split--rail, .split--map { grid-template-columns: 1fr; }
}

.head {
  margin-bottom: 2.8rem; max-width: var(--measure-wide);
  display: flex; flex-direction: column; gap: 1.1rem;
}

/* ------------------------------------------------------------- masthead --- */

.masthead {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid color-mix(in srgb, var(--bone) 10%, transparent);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 3.9rem;
}
.nav { display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2vw, 2rem); }
.nav-link {
  font-family: var(--face-sub); font-size: .9rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding-block: .3rem; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-link:hover { color: var(--bone); border-bottom-color: var(--ash); }
.nav-link.is-active { color: var(--bone); border-bottom-color: var(--ember); }

@media (max-width: 48rem) {
  .masthead .wrap { flex-direction: column; align-items: flex-start; gap: .5rem; padding-block: .7rem; }
  .nav { font-size: var(--t-xs); }
}

/* -------------------------------------------------- the mark and the crack --- */

.wm-link { text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.wm-link:hover { color: inherit; }
.wm-icon { width: 28px; height: 28px; flex: none; }

.wordmark {
  position: relative; display: inline-block;
  font-family: var(--face-display); font-weight: 400;
  letter-spacing: var(--track-wordmark);
  line-height: .9; color: var(--bone);
  white-space: nowrap; padding-block: .2em;
}
.wordmark--sm { font-size: 1.32rem; }
/* Sized so the widest fallback still fits a 360 px viewport on one line.
   Anton is far narrower than the condensed fallback, so on a browser that
   gets the webfont this leaves clear space rather than filling to the edge —
   which is the right way round: BRAND.md's clear space is a minimum. */
.wordmark--lg { font-size: clamp(2.2rem, 10.8vw, 9.6rem); }
.wordmark--plain { padding-block: 0; }
.wm-a11y { visibility: hidden; }

.wm-half {
  position: absolute; inset: 0; display: flex; align-items: center;
  overflow: hidden; will-change: transform;
}
.wm-half--up   { transform: translateY(calc(var(--wm-spread, 0em) * -1)); }
.wm-half--down { transform: translateY(var(--wm-spread, 0em)); }
.wm-word { display: block; }
.wm-fault {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: var(--wm-glow, 1);
}
.wordmark.is-igniting .wm-half { transition: transform 1000ms cubic-bezier(.16,.9,.2,1); }
.wordmark.is-igniting .wm-fault { transition: opacity 1200ms ease-out; }

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

.hero {
  padding-block: clamp(3.5rem, 13vh, 8rem) clamp(2rem, 5vh, 3.5rem);
  background: var(--void);
  position: relative; overflow: hidden;
}
.hero-inner { position: relative; z-index: 1; }
.hero .wordmark--lg { margin-bottom: 1.4rem; }
.hero-tagline {
  font-family: var(--face-text); font-style: italic; font-weight: 200;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: color-mix(in srgb, var(--bone) 82%, var(--ash));
  margin-bottom: 2.2rem;
}
.hero .lede { font-size: clamp(1.15rem, 1.9vw, 1.5rem); max-width: 34ch; }
.hero-status {
  margin-top: 2.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--edge);
  font-family: var(--face-mono); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------ home lead film --- */

.home-lead {
  background: var(--void);
  padding-block: clamp(1rem, 3vw, 2.4rem) clamp(3.5rem, 8vw, 6rem);
}
.home-lead-film { display: grid; gap: 1.4rem; margin: 0; }
.home-lead-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--void); border: 1px solid var(--edge);
}
.home-lead-video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  background: var(--void);
}
.home-lead-caption {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem clamp(2rem, 6vw, 5rem); align-items: start;
}
.home-lead-heading, .home-lead-copy { display: grid; gap: .8rem; }
.home-lead-copy { color: var(--muted); max-width: var(--measure-wide); }

@media (max-width: 40rem) {
  .home-lead { padding-top: .5rem; }
  /* A taller phone window makes the traversal legible without changing its
     encoded master. The centre crop keeps the map route and the active reach. */
  .home-lead-frame { aspect-ratio: 4 / 3; }
  .home-lead-video { object-position: center center; }
  .home-lead-caption { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- seams --- */

.seam {
  border-top: 1px solid var(--edge);
  padding-top: 1.5rem; margin-bottom: 2.6rem;
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.6rem);
  flex-wrap: wrap;
}
.seam-depth {
  font-family: var(--face-mono); font-size: var(--t-sm);
  letter-spacing: .14em; color: var(--glow); white-space: nowrap;
}
.seam-name {
  font-family: var(--face-display); font-weight: 400;
  text-transform: uppercase; line-height: .86;
  font-size: var(--t-3xl); letter-spacing: .004em;
  color: var(--bone); margin: 0;
}
.seam-stage {
  font-family: var(--face-mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-left: auto; white-space: nowrap;
}

/* ------------------------------------------------------- band index (home) --- */

.depths { display: grid; gap: 1px; background: var(--edge); border-block: 1px solid var(--edge); }
.depth-row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.4rem; align-items: baseline;
  padding: 1.15rem .2rem; background: var(--ground);
  text-decoration: none; color: inherit;
  transition: background 160ms;
}
.depth-row:hover { background: var(--haze); color: inherit; }
.depth-row:hover h3 { color: var(--glow); }
.depth-n {
  font-family: var(--face-mono); font-size: var(--t-sm);
  color: var(--glow); text-align: right;
  font-variant-numeric: tabular-nums;
}
.depth-body p { font-size: var(--t-sm); color: var(--muted); margin-top: .25rem; }
@media (max-width: 40rem) {
  .depth-row { grid-template-columns: 1fr; gap: .3rem; }
  .depth-n { text-align: left; }
}

/* ----------------------------------------------------------------- loop --- */

.loop {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--edge);
  border: 1px solid var(--edge);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.loop-step {
  background: var(--ground); padding: 1.6rem 1.4rem 1.8rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.loop-n {
  font-family: var(--face-mono); font-size: var(--t-xs);
  letter-spacing: .16em; color: var(--glow);
}
.loop-step h3 {
  font-family: var(--face-display); font-weight: 400;
  text-transform: uppercase; font-size: 1.9rem; line-height: .95;
}
.loop-step p { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }

/* ---------------------------------------------------------------- picks --- */

.picks { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.pick {
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: inherit;
}
.pick-plate {
  background: var(--void); border: 1px solid var(--edge);
  aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: .5rem;
  transition: border-color 180ms;
}
.pick-plate img { width: 100%; height: 100%; object-fit: contain; }
.pick:hover .pick-plate { border-color: var(--glow); }
.pick h3 {
  font-family: var(--face-display); font-weight: 400;
  text-transform: uppercase; font-size: 1.75rem; line-height: .95;
}
.pick:hover h3 { color: var(--glow); }
.pick-route {
  font-family: var(--face-mono); font-size: var(--t-xs);
  letter-spacing: .05em; color: var(--glow);
}
.pick p.small { color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- cards --- */

.card {
  background: var(--haze); border: 1px solid var(--edge);
  padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem;
}
.card p { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.card--link { text-decoration: none; color: inherit; transition: border-color 160ms, background 160ms; }
.card--link:hover { border-color: var(--glow); color: inherit; }
.card--link:hover h3 { color: var(--glow); }
.card-num { font-family: var(--face-mono); font-size: var(--t-xs); color: var(--glow); letter-spacing: .12em; }

.scale-figure {
  border: 1px solid var(--edge); background: var(--void);
  aspect-ratio: 4 / 5; overflow: hidden;
}
.scale-figure img { width: 100%; height: 100%; object-fit: contain; }
.scale-figure--tall { aspect-ratio: 3 / 4; }
.is-plate { mix-blend-mode: screen; }

/* ---------------------------------------------------------------- notes --- */

.note {
  border-left: 2px solid var(--edge); padding: .1rem 0 .1rem 1.3rem;
  font-size: var(--t-sm); color: var(--muted); max-width: var(--measure-wide);
}
.note--warn { border-left-color: var(--glow); }
.note--gate { border-left-color: var(--crystal); }
.note strong { color: var(--bone); }

/* --------------------------------------------------------------- tables --- */

.scroller { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-family: var(--face-sub); }
table.data caption {
  text-align: left; padding-bottom: .9rem;
  font-family: var(--face-mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
table.data th {
  text-align: left; font-weight: 500; color: var(--muted);
  font-family: var(--face-mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 0 1.2rem .7rem 0; border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}
table.data td {
  padding: .8rem 1.2rem .8rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--edge) 55%, transparent);
  vertical-align: top; color: color-mix(in srgb, var(--bone) 82%, var(--ash));
}
table.data td:first-child { color: var(--bone); font-weight: 600; }
table.data .num { font-family: var(--face-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.data .wide { min-width: 20rem; max-width: 40rem; font-family: var(--face-text); }
table.data tr:hover td { background: color-mix(in srgb, var(--haze) 70%, transparent); }

/* ----------------------------------------------------------- reaches --- */

.reach {
  padding: 1.4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--edge) 55%, transparent);
  display: grid; gap: .6rem 2.4rem;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
}
@media (max-width: 48rem) { .reach { grid-template-columns: 1fr; } }
.reach-name {
  font-family: var(--face-sub); font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .02em;
}
.reach-held {
  display: block; font-family: var(--face-mono); font-size: var(--t-xs);
  color: var(--glow); letter-spacing: .07em; margin-top: .3rem;
}
.reach-note { font-size: var(--t-sm); color: color-mix(in srgb, var(--bone) 78%, var(--ash)); }

.creature {
  margin-top: 1rem; padding: 1.1rem 1.3rem;
  background: var(--haze); border: 1px solid var(--edge);
  display: grid; gap: .5rem;
}
/* With a model, the loop leads and the text sits beside it. The loop is the
   animal doing the one thing its magic is named for, so it is the entry's
   illustration rather than an ornament next to one. */
.creature--plated {
  grid-template-columns: minmax(min(11rem, 40%), 13rem) minmax(0, 1fr);
  gap: .5rem 1.4rem; align-items: start;
}
.creature-plate {
  background: var(--void); border: 1px solid var(--edge);
  aspect-ratio: 1 / 1; overflow: hidden;
}
.creature-plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.creature-body { display: grid; gap: .5rem; }

/* A people with a face. The portraits are rendered characters, so they get
   the same well and the same screen blend as a dragon plate. */
.people--faced {
  display: grid; gap: .6rem 1.3rem; align-items: start;
  grid-template-columns: minmax(min(7.5rem, 34%), 9rem) minmax(0, 1fr);
}
.people-face {
  background: var(--void); border: 1px solid var(--edge);
  aspect-ratio: 3 / 4; overflow: hidden;
}
.people-face img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.people-body { display: grid; gap: .5rem; }
@media (max-width: 40rem) {
  .people--faced { grid-template-columns: 1fr; }
  .people-face { aspect-ratio: 16 / 9; }
  /* The separate Fairy plate is a full-body 3:4 composition. At the shared
     top crop its antennae consume the mobile window and the face is cut in
     half; 35% keeps antennae, eyes, wings and held token in the 16:9 card. */
  .people-portrait--fairy { object-position: center 35%; }
}
@media (max-width: 40rem) {
  .creature--plated { grid-template-columns: 1fr; }
  .creature-plate { aspect-ratio: 16 / 10; }
}
.creature-name {
  font-family: var(--face-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; font-size: 1.5rem;
  line-height: 1;
}
.creature-magic { color: var(--glow); font-family: var(--face-mono); font-size: var(--t-xs); letter-spacing: .08em; }
.creature dl { display: grid; grid-template-columns: 5.4rem 1fr; gap: .35rem .9rem; margin: 0; font-size: var(--t-sm); }
.creature dt { font-family: var(--face-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-top: .2em; }
.creature dd { margin: 0; color: color-mix(in srgb, var(--bone) 80%, var(--ash)); }

/* ---------------------------------------------------------------- story --- */

.gauge { position: sticky; top: 5.5rem; display: none; font-family: var(--face-mono); font-size: var(--t-xs); }
@media (min-width: 76rem) { .gauge { display: block; } }
.gauge-label { color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.gauge-bar { position: relative; width: 3px; height: 15rem; background: var(--edge); margin-left: .4rem; }
.gauge-fill { position: absolute; left: 0; top: 0; width: 100%; background: linear-gradient(var(--ember), var(--flare)); height: var(--gauge, 0%); }
.gauge-now { position: absolute; left: 1rem; transform: translateY(-50%); top: var(--gauge, 0%); color: var(--bone); white-space: nowrap; }

.partlist { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .6rem; }
.partlist a {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: .1rem .7rem;
  text-decoration: none; color: var(--muted); padding: .2rem 0 .2rem .9rem;
  border-left: 1px solid var(--edge);
}
.partlist a:hover { color: var(--bone); border-left-color: var(--glow); }
.partlist b { font-weight: 600; color: inherit; font-family: var(--face-sub); }
.partlist .rail-depth { grid-column: 2; color: var(--quiet); }

.story-part { scroll-margin-top: 5.5rem; padding-block: clamp(3rem, 8vh, 5.5rem); }
.story-part + .story-part { border-top: 1px solid color-mix(in srgb, var(--edge) 60%, transparent); }
.story-head { margin-bottom: 2.2rem; }
.story-n { font-family: var(--face-mono); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--glow); }
.story-head h2 { margin-top: .6rem; }
.story-height { font-family: var(--face-mono); font-size: var(--t-sm); color: var(--muted); margin-top: .6rem; }
.story-body { max-width: var(--measure); font-size: 1.16rem; line-height: 1.74; }
.story-body > p + p { margin-top: 1.1em; }
.story-body > p:first-of-type::first-line { font-variant-caps: small-caps; letter-spacing: .045em; color: var(--bone); }
.story-break { border: 0; height: 1px; background: var(--edge); width: 4rem; margin: 2.6rem auto; }

/* -------------------------------------------------------------- lineages --- */

.dragon { scroll-margin-top: 5.5rem; }
.dragon + .dragon { margin-top: var(--band-pad); padding-top: var(--band-pad); border-top: 1px solid var(--edge); }
.dragon-plate { background: var(--void); border: 1px solid var(--edge); }
.dragon-plate img { width: 100%; }
.dragon-name { font-size: var(--t-2xl); }
.dragon-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plate-well { background: var(--void); border: 1px solid var(--edge); aspect-ratio: 4 / 3; overflow: hidden; }
.plate-well img { width: 100%; height: 100%; object-fit: contain; }
.underhood {
  font-family: var(--face-mono); font-size: var(--t-xs);
  color: var(--quiet); letter-spacing: .04em;
  border-top: 1px solid color-mix(in srgb, var(--edge) 60%, transparent);
  padding-top: .9rem; margin-top: 1.4rem;
}
.underhood b { color: var(--muted); font-weight: 500; }

.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: 1.4rem 1rem; margin-block: 1.9rem; }
.spec div { border-top: 1px solid var(--edge); padding-top: .7rem; }
.spec dt { font-family: var(--face-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .35rem; }
.spec dd { margin: 0; font-family: var(--face-mono); font-size: var(--t-md); font-variant-numeric: tabular-nums; color: var(--bone); }

.clips { display: flex; flex-wrap: wrap; gap: .5rem; }
.clip {
  font-family: var(--face-mono); font-size: var(--t-xs);
  padding: .35rem .65rem; border: 1px solid var(--edge);
  color: var(--muted); letter-spacing: .04em;
}
.clip.is-magic { border-color: var(--glow); color: var(--glow); }

.ladder { display: flex; align-items: flex-end; gap: 1rem; margin-block: 1.5rem; }
.rung { text-align: center; font-family: var(--face-mono); font-size: var(--t-xs); color: var(--muted); }
.rung-bar { width: 2.4rem; background: linear-gradient(var(--glow), color-mix(in srgb, var(--glow) 25%, var(--haze))); margin-bottom: .55rem; }

/* ---------------------------------------------------------------- media --- */

.film-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.film-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); }
.film { display: flex; flex-direction: column; gap: .8rem; }
.film-frame { position: relative; background: var(--void); border: 1px solid var(--edge); }
.film video { width: 100%; background: var(--void); }
.film p { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.film-facts {
  font-family: var(--face-mono); font-size: var(--t-xs);
  color: var(--quiet); letter-spacing: .05em;
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
}
.film-facts b { color: var(--muted); font-weight: 500; }

.rejected { margin-top: .3rem; font-size: var(--t-xs); font-family: var(--face-mono); color: var(--muted); }
.rejected summary { cursor: pointer; color: var(--glow); letter-spacing: .05em; }
.rejected ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .35rem; }
.rejected a { color: var(--muted); }

/* --------------------------------------------------------------- studio --- */

.stack-diagram { display: grid; gap: .6rem; font-family: var(--face-mono); font-size: var(--t-sm); margin-block: 2rem; max-width: 58rem; }
.layer {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: .4rem 1.5rem; align-items: baseline;
  padding: .95rem 1.2rem; border: 1px solid var(--edge); background: var(--haze);
  border-left: 2px solid var(--crystal);
}
.layer b { color: var(--crystal); font-weight: 500; letter-spacing: .04em; }
.layer span { color: var(--muted); font-family: var(--face-text); font-size: var(--t-sm); }
@media (max-width: 48rem) { .layer { grid-template-columns: 1fr; } }

.state { display: inline-block; font-family: var(--face-mono); font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; padding: .2rem .55rem; border: 1px solid; }
.state--current { color: var(--crystal); border-color: color-mix(in srgb, var(--crystal) 50%, transparent); }
.state--partial { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 55%, transparent); }

.shapes { columns: 2; column-gap: 2.6rem; font-size: var(--t-sm); list-style: none; margin: 0; padding: 0; }
@media (max-width: 54rem) { .shapes { columns: 1; } }
.shapes li { break-inside: avoid; margin-bottom: .6rem; color: color-mix(in srgb, var(--bone) 78%, var(--ash)); }
.shapes b { font-family: var(--face-mono); font-size: var(--t-xs); color: var(--quiet); margin-right: .55rem; }

.swatches { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.swatch { background: var(--ground); }
.swatch-chip { height: 6rem; }
.swatch-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .35rem; }
.swatch-name { font-family: var(--face-sub); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--t-sm); }
.swatch-hex, .swatch-src { font-family: var(--face-mono); font-size: var(--t-xs); color: var(--muted); line-height: 1.45; }

.copyblock { border: 1px solid var(--edge); background: var(--haze); padding: 1.4rem 1.5rem; display: grid; gap: .8rem; }
.copyblock-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.copyblock h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .09em; font-family: var(--face-mono); font-weight: 500; color: var(--muted); }
.copyblock-count { font-family: var(--face-mono); font-size: var(--t-xs); color: var(--quiet); font-variant-numeric: tabular-nums; }
.copyblock-count.is-tight { color: var(--ember); }
.copyblock p { font-size: var(--t-sm); color: color-mix(in srgb, var(--bone) 84%, var(--ash)); }
.copyblock p + p { margin-top: .7em; }

.assets { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
.asset { display: grid; gap: .5rem; }
.asset-frame { background: var(--void); border: 1px solid var(--edge); display: grid; place-items: center; padding: .9rem; }
.asset-frame img { max-height: 9rem; width: auto; }
.asset-name { font-family: var(--face-mono); font-size: var(--t-xs); color: var(--quiet); letter-spacing: .04em; line-height: 1.5; }

/* ---------------------------------------------------------------- misc --- */

.pill-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.pill {
  font-family: var(--face-mono); font-size: var(--t-xs); letter-spacing: .05em;
  padding: .32rem .68rem; border: 1px solid var(--edge); color: var(--muted);
}
.pill b { color: var(--quiet); font-weight: 400; }

.linkrow { display: flex; flex-wrap: wrap; gap: 1.6rem; font-family: var(--face-sub); font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.linkrow a { text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--glow) 45%, transparent); padding-bottom: .15rem; }
.linkrow a:hover { border-bottom-color: var(--glow); }

/* -------------------------------------------------------------- colophon --- */

.colophon {
  border-top: 1px solid var(--edge); padding-block: 3rem 4rem;
  background: var(--pit); font-size: var(--t-sm); color: var(--muted);
}
.foot-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot-mark { font-family: var(--face-display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; color: var(--bone); letter-spacing: .02em; }
.foot-status {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--edge) 60%, transparent);
  font-family: var(--face-mono); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--quiet);
}
.provenance { margin-top: 1.6rem; font-size: var(--t-xs); }
.provenance summary { cursor: pointer; color: var(--quiet); font-family: var(--face-mono); letter-spacing: .05em; }
.provenance summary:hover { color: var(--muted); }
.colophon-lede { font-family: var(--face-mono); font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1rem; }
.colophon-list { list-style: none; margin: 1rem 0 1.4rem; padding: 0; display: grid; gap: .4rem; max-width: var(--measure-wide); }
.colophon-list li { padding-left: 1.1rem; position: relative; }
.colophon-list li::before { content: '·'; position: absolute; left: .2rem; color: var(--edge); }
.colophon-list code, .provenance code { background: none; padding: 0; color: var(--quiet); }
.colophon-rule { max-width: var(--measure); }

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