/* Components. Each block is one thing; its name is its class. Tokens only, no raw values
   except hairline widths and the odd optical nudge (commented where they appear). */

/* ── wordmark ─────────────────────────────────────────────── */

/* The name is friendly, so the wordmark is set in the story face, italic, not in shouty caps.
   The mark is a curly fry seen end-on: a gold spiral. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.wordmark__mark {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgb(220 170 82 / 0.45));
  transition: transform var(--duration-slow) var(--ease-out);
}
.wordmark:hover .wordmark__mark { transform: rotate(-90deg); }

/* ── nav ──────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    backdrop-filter var(--duration) var(--ease);
}
.nav.is-scrolled,
.nav.is-open {
  background-color: rgb(15 13 17 / 0.78);
  border-bottom-color: var(--border);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 68px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav__link {
  font-size: var(--text-sm);
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.5em;
}
.nav__toggle { display: none; }

@media (max-width: 767px) {
  .nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-right: -10px;          /* optical: align the icon, not its hit area, to the gutter */
    color: var(--text);
  }
  .nav__toggle svg { width: 20px; height: 20px; }
  .nav__links {
    position: absolute;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-6);
    background: rgb(15 13 17 / 0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity var(--duration) var(--ease),
      transform var(--duration) var(--ease),
      visibility 0s linear var(--duration);
  }
  .nav.is-open .nav__links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .nav__link { padding: var(--space-4) 0; font-size: var(--text-lg); border-bottom: 1px solid var(--border); }
  .nav__links .btn { margin-top: var(--space-6); justify-content: center; }
}

/* ── buttons ──────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}
.btn:hover { --btn-border: var(--text-muted); transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: var(--duration-instant); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-text);
  --btn-border: var(--accent);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-border: var(--accent-hover); }

.btn--sm { min-height: 36px; padding: 0 var(--space-4); }

.btn__arrow { transition: transform var(--duration-fast) var(--ease); }
.btn:hover .btn__arrow,
.link-arrow:hover .btn__arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.link-arrow:hover { color: var(--accent-hover); }

/* ── home hero ────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: grid;
  align-items: end;
  padding-block: 140px var(--space-16);
  isolation: isolate;
  overflow: hidden;
}
.hero__art {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(72%, 1100px);
  z-index: -2;
}
.hero__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
/* the art dissolves into the canvas on its left and lower edges */
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--canvas) 0%, rgb(15 13 17 / 0.72) 22%, rgb(15 13 17 / 0) 56%),
    linear-gradient(0deg, var(--canvas) 0%, rgb(15 13 17 / 0) 38%),
    linear-gradient(180deg, rgb(15 13 17 / 0.7) 0%, rgb(15 13 17 / 0) 22%);
}
.hero__motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;                 /* a canvas is a replaced element: inset alone won't stretch it */
  z-index: -1;
  pointer-events: none;
}
.hero__content { max-width: 760px; }
.hero__title { margin-top: var(--space-5); }
.hero__title em { font-style: italic; color: var(--accent); }
.hero__lead { margin-top: var(--space-6); }
.hero__actions { margin-top: var(--space-10); }
.hero__caption {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-8);
  text-align: right;
}

@media (max-width: 900px) {
  .hero { padding-top: 55vw; }
  .hero__art { width: 100%; height: 78vw; inset: 0 0 auto 0; }
  .hero__art::after {
    background:
      linear-gradient(0deg, var(--canvas) 0%, rgb(15 13 17 / 0) 55%),
      linear-gradient(180deg, rgb(15 13 17 / 0.75) 0%, rgb(15 13 17 / 0) 30%);
  }
  .hero__caption { display: none; }
}

/* ── proof strip: the facts, in mono, right under the fold ── */

.facts-strip {
  border-block: 1px solid var(--border);
  background: var(--surface-sunk);
}
.facts-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-10);
  padding-block: var(--space-5);
}
.facts-strip__list li { display: flex; gap: var(--space-3); align-items: baseline; }
.facts-strip__list .label { color: var(--text-muted); }
.facts-strip__value { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); }

/* ── art frame: a hairline and four corner ticks, like a game UI panel ── */

.frame {
  position: relative;
  background: var(--surface-sunk);
  box-shadow: var(--shadow-art);
  border-radius: var(--radius-sm);
}
.frame img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.frame::before {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  --tick: 10px;
  --c: var(--accent);
  background:
    linear-gradient(var(--c) 0 0) top left / var(--tick) 1px,
    linear-gradient(var(--c) 0 0) top left / 1px var(--tick),
    linear-gradient(var(--c) 0 0) top right / var(--tick) 1px,
    linear-gradient(var(--c) 0 0) top right / 1px var(--tick),
    linear-gradient(var(--c) 0 0) bottom left / var(--tick) 1px,
    linear-gradient(var(--c) 0 0) bottom left / 1px var(--tick),
    linear-gradient(var(--c) 0 0) bottom right / var(--tick) 1px,
    linear-gradient(var(--c) 0 0) bottom right / 1px var(--tick);
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--duration) var(--ease), inset var(--duration) var(--ease-out);
}
.frame:hover::before,
.frame--lit::before { opacity: 0.9; inset: -7px; }
.frame__caption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: rgb(10 9 12 / 0.78);
  border-radius: var(--radius-sm);
}

/* ── feature: Thornwall on the home page ──────────────────── */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.feature__copy .lead { margin-top: var(--space-5); }
.feature__copy .disclosure-line { margin-top: var(--space-8); }
.feature__copy .cluster { margin-top: var(--space-8); }

/* unequal tiles: the chapel carries the set, the rest support it */
.art-bento {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  aspect-ratio: 3 / 2;
}
.art-bento > :first-child { grid-row: 1 / 4; }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: var(--space-10); }
}
@media (max-width: 560px) {
  .art-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .art-bento > :first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 1; }
  .art-bento > :not(:first-child) { aspect-ratio: 1; }
  .art-bento > :last-child { display: none; }
}

/* one line of disclosure, beside the button, never in a footnote */
.disclosure-line {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-2);
  max-width: var(--measure);
}

/* ── pillars: numbered rows, not three equal cards ────────── */

.pillars { border-top: 1px solid var(--border); }
.pillar {
  display: grid;
  grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.pillar__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); }
.pillar__title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); }
.pillar__body { color: var(--text-2); max-width: 52ch; }
@media (max-width: 767px) {
  .pillar { grid-template-columns: 40px 1fr; row-gap: var(--space-3); padding-block: var(--space-8); }
  .pillar__body { grid-column: 2; }
}

/* ── section heads ────────────────────────────────────────── */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-12);
}
.section-head .h2 { margin-top: var(--space-4); }
.section-head__aside { color: var(--text-2); max-width: 46ch; justify-self: end; }
@media (max-width: 767px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head__aside { justify-self: start; }
}

/* ── the loop: who does each step ─────────────────────────── */

.loop {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  counter-reset: step;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.loop__step {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-8);
  counter-increment: step;
}
.loop__step + .loop__step { border-left: 1px solid var(--border); }
.loop__step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}
.loop__title { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text); }
.loop__body { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; }
.loop__step .tag { margin-top: var(--space-5); }
@media (max-width: 960px) {
  .loop { grid-template-columns: 1fr; }
  .loop__step + .loop__step { border-left: 0; border-top: 1px solid var(--border); }
  .loop__step { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-4); padding: var(--space-5); }
  .loop__step::before { margin: 0; grid-row: span 3; padding-top: 5px; }
}

/* who did it: a person (gold) or a model (quiet) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-2);
  justify-self: start;
}
.tag::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.tag--person { color: var(--accent); }
.tag--model { color: var(--text-muted); }
.tag--model::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.tag--both { color: var(--text-2); }
.tag--both::before { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--accent); }

/* ── split: text beside a panel, alternating sides ────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-16);
  align-items: center;
}
.split--flip > :first-child { order: 2; }
.split .lead { margin-top: var(--space-5); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .split--flip > :first-child { order: 0; }
}

/* ── CTA band ─────────────────────────────────────────────── */

.cta-band {
  position: relative;
  padding: clamp(40px, 6vw, 80px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(220 170 82 / 0.10), transparent 55%),
    var(--surface);
  overflow: hidden;
}
.cta-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-10);
  align-items: end;
}
.cta-band .lead { margin-top: var(--space-4); }
@media (max-width: 767px) { .cta-band__grid { grid-template-columns: 1fr; } }

/* ── sub-page hero ────────────────────────────────────────── */

.page-hero { padding-block: 168px var(--space-16); }
.page-hero .h1,
.page-hero .display { margin-top: var(--space-5); max-width: 16ch; }
.page-hero .lead { margin-top: var(--space-6); }

/* game hero: art full-bleed behind the title */
.game-hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: grid;
  align-items: end;
  padding-block: 160px var(--space-16);
  isolation: isolate;
  overflow: hidden;
}
.game-hero__art { position: absolute; inset: 0; z-index: -1; }
.game-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.game-hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--canvas) 0%, rgb(15 12 19 / 0.55) 45%, rgb(15 12 19 / 0.25) 70%, rgb(15 12 19 / 0.7) 100%);
}
.game-hero .display { margin-top: var(--space-4); }
.game-hero .lead { margin-top: var(--space-5); color: var(--text); }

/* ── spec sheet: facts beside the button ──────────────────── */

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--border);
}
.spec > div {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.spec dt { margin-bottom: var(--space-2); }
.spec dd { font-size: var(--text-base); color: var(--text); }

/* ── places: the four locations ───────────────────────────── */

.places {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.place .frame { aspect-ratio: 1; }
.place__name { margin-top: var(--space-4); font-weight: var(--weight-medium); }
.place__line { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-2); }
@media (max-width: 960px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── cast: typographic, no portraits ──────────────────────── */

.cast { border-top: 1px solid var(--border); }
.cast__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: var(--space-6);
  align-items: baseline;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.cast__name { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; letter-spacing: var(--tracking-heading); }
.cast__line { color: var(--text-2); }
.cast__row--shade .cast__name { color: var(--accent-2, var(--accent)); font-style: italic; }
@media (max-width: 767px) {
  .cast__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ── disclosure table ─────────────────────────────────────── */

.ledger { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ledger caption { text-align: left; padding-bottom: var(--space-4); }
.ledger th, .ledger td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.ledger thead th { border-bottom-color: var(--border-strong); }
.ledger tbody th { font-weight: var(--weight-medium); color: var(--text); width: 22%; }
.ledger td { color: var(--text-2); }
.ledger td:nth-child(2) { width: 18%; }
@media (max-width: 640px) {
  .ledger thead { display: none; }
  .ledger tr { display: grid; grid-template-columns: 1fr auto; padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
  .ledger th, .ledger td { border: 0; padding: 0; width: auto !important; }
  .ledger td:last-child { grid-column: 1 / -1; margin-top: var(--space-2); }
}

/* ── quote / aside ────────────────────────────────────────── */

.pull {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: var(--tracking-heading);
  max-width: 24ch;
}
.pull em { color: var(--accent); }

/* ── footer: a dense index ────────────────────────────────── */

.footer {
  margin-top: var(--section-y);
  border-top: 1px solid var(--border);
  background: var(--surface-sunk);
  padding-block: var(--space-16) var(--space-10);
  font-size: var(--text-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}
.footer__about { margin-top: var(--space-4); color: var(--text-2); max-width: 36ch; }
.footer__col h2 { margin-bottom: var(--space-4); }
.footer__col li + li { margin-top: var(--space-2); }
.footer__col a { color: var(--text-2); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
.footer__col a:hover { color: var(--text); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}