/* Hollowmarch website — hand-authored. No framework, no component library.
   Import order: tokens.css first, then this file. */

/* ============================== fonts ============================== */

@font-face {
  font-family: 'Metamorphous';
  src: url('/static/fonts/Metamorphous-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('/static/fonts/EBGaramond-Variable.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

/* ============================== base ============================== */

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

html {
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* nothing may ever widen the page — any overflow is a bug, not a scroll axis */
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }

h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--sp-3);
}

h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--arcane-300); }

strong { font-weight: 700; }

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

::selection { background: rgba(217, 99, 31, 0.35); }

:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 2px;
  box-shadow: var(--glow-focus);
}

/* ============================== primitives ============================== */

/* -- eyebrow: letterspaced uppercase kicker above headings -- */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-2);
}

.eyebrow--ember { color: var(--ember-400); }
.eyebrow--rune { color: var(--arcane-400); }

/* -- rule: gradient hairline divider -- */
.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: var(--sp-6) 0;
}

/* -- wordmark: ash→ember gradient, display face -- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--ash-100) 0%, var(--ash-300) 45%, var(--ember-400) 78%, var(--ember-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.btn--primary {
  background: var(--accent);
  border-color: #a34a15;
  color: var(--accent-ink);
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-ember);
}

.btn--ghost {
  background: transparent;
  border-color: var(--stone-600);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ember-400);
  color: var(--ember-300);
}

.btn--danger {
  background: var(--danger);
  border-color: #5c1c17;
  color: var(--ash-100);
}

.btn--danger:hover { background: #93312a; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--wide { width: 100%; }

/* -- plate: the signature panel. Stone slab, double frame, ember breath at the top -- */
.plate {
  position: relative;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(217, 99, 31, 0.12), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-plate);
  padding: var(--sp-7) var(--sp-6);
}

.plate::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(139, 145, 153, 0.16);
  pointer-events: none;
}

.plate > * { position: relative; }

/* -- form field -- */
.field { margin-bottom: var(--sp-5); }

.field__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-2);
}

.field__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--stone-950);
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field__input::placeholder { color: var(--stone-600); }

.field__input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--glow-focus);
}

.field__input[aria-invalid="true"] { border-color: var(--blood-400); }

.field__input--area { min-height: 10rem; resize: vertical; line-height: var(--leading-body); }

/* honeypot: visually removed but present for bots that fill every field. Not display:none —
   some bots skip fields the computed style hides; off-screen catches more of them. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 1px;
  overflow: hidden;
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: var(--sp-2);
}

.field__error {
  font-size: var(--text-sm);
  color: var(--danger-ink);
  margin-top: var(--sp-2);
}

/* -- flash messages -- */
.flash {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-5);
}

.flash--error { border-left-color: var(--blood-400); color: var(--danger-ink); }
.flash--ok { border-left-color: var(--arcane-400); }

/* ============================== nav ============================== */

.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--nav-h);
  padding: 0 var(--sp-6);
  max-width: var(--page-max);
  margin: 0 auto;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  margin-right: auto;
}

.nav__brand img { width: 30px; height: auto; }

.nav__brand .wordmark { font-size: 1.15rem; }

.nav__link {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}

.nav__link:hover { color: var(--ember-300); }

.nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* nav-sized buttons (Sign in / Play now) — a class, not inline styles, so the
   mobile media query below can actually shrink them */
.btn--nav {
  padding: 0.4rem 1.1rem;
  font-size: var(--text-sm);
}

/* -- mobile menu: burger + drop panel. Hidden entirely on desktop, where the
   inline text links are visible instead -- */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--stone-600);
  cursor: pointer;
}

.nav__toggle-bar {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--ink);
  transition: background-color 120ms ease;
}

.nav__toggle:hover .nav__toggle-bar,
.nav__toggle[aria-expanded="true"] .nav__toggle-bar { background: var(--ember-400); }

.nav__toggle[aria-expanded="true"] { border-color: var(--ember-400); }

.nav__menu { display: none; }

/* ============================== hero ============================== */

.hero {
  position: relative;
  min-height: 82vh;
  min-height: 82svh; /* mobile: exclude the browser chrome so the CTA isn't pushed off-screen */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.hero__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
}

/* scrims: keep the knight visible, sink the edges into the page ground */
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 18, 20, 0.75) 0%, rgba(16, 18, 20, 0.15) 35%, rgba(16, 18, 20, 0.2) 65%, var(--stone-950) 100%),
    radial-gradient(90% 60% at 50% 45%, transparent 40%, rgba(16, 18, 20, 0.55) 100%);
}

.hero__body {
  position: relative;
  margin: auto;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.hero__emblem {
  width: clamp(96px, 14vw, 150px);
  filter: drop-shadow(0 0 32px rgba(217, 99, 31, 0.35));
}

.hero__title {
  font-size: var(--text-hero);
  margin: 0;
}

.hero__tagline {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--arcane-300);
  margin: 0;
}

.hero__cta {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================== layout ============================== */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
}

.page--narrow { max-width: 30rem; }

.auth-card { margin: var(--sp-9) auto; }

.auth-card .plate { padding: var(--sp-7) var(--sp-6) var(--sp-6); }

.auth-card__head {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.auth-card__head img {
  width: 72px;
  margin-bottom: var(--sp-3);
  filter: drop-shadow(0 0 20px rgba(217, 99, 31, 0.3));
}

.auth-card__foot {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: var(--sp-5);
}

/* ============================== landing sections ============================== */

.section { padding-top: var(--sp-8); }

/* the three trades: peers, not a ranking — columns divided by hairlines, no card boxes */
.trades {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: var(--sp-6);
}

.trade {
  padding: 0 var(--sp-5);
  border-left: 1px solid transparent;
  border-image: linear-gradient(180deg, transparent, var(--line), transparent) 1;
}

.trade:first-child { padding-left: 0; border-left: none; }
.trade:not(:first-child) { border-left-width: 1px; border-left-style: solid; }

.trade h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-md);
  margin-bottom: var(--sp-2);
}

.trade p { font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }

@media (max-width: 40rem) {
  .trades { grid-template-columns: 1fr; gap: var(--sp-5); }
  .trade { padding: 0; border-left: none !important; }
  .trade:not(:first-child) { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
}

/* event roster: dispatch-line list, not bullet points */
.events { list-style: none; margin: var(--sp-5) 0 0; padding: 0; max-width: var(--measure); }

.events li {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.events li:last-child { border-bottom: 1px solid var(--line); }

.events .events__name {
  flex: 0 0 11rem;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 40rem) {
  .events li { flex-direction: column; gap: var(--sp-1); }
  .events .events__name { flex-basis: auto; }
}

/* ============================== account area ============================== */

/* head row: identity left, session action right — logout is an action on the
   session, not a section, so it lives above the two-column layout */
.account-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.account-head h1 { margin-bottom: var(--sp-1); }

.account-head__meta {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.account-layout {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--sp-7);
  margin-top: var(--sp-6);
  align-items: start;
}

/* left subnav: same visual language as the mobile menu — letterspaced labels,
   hairline dividers, ember edge on the active entry */
.subnav {
  position: sticky;
  top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.subnav a {
  display: block;
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
}

.subnav a:hover { color: var(--ember-300); }

.subnav a[aria-current="page"] {
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--sp-3) - 3px);
}

.subnav a.subnav--danger { color: var(--danger-ink); }
.subnav a.subnav--danger:hover { color: var(--blood-400); }
.subnav a.subnav--danger[aria-current="page"] { border-left-color: var(--blood-400); color: var(--danger-ink); }

.account-content h2:first-child { margin-top: 0; }

/* lead: the section's help intro — the whole point of giving each part its own room */
.account-content .lead {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  max-width: 52ch;
}

/* help-note: a quiet rune-edged aside for the "what does this mean" details */
.help-note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--arcane-400);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 52ch;
  margin: var(--sp-5) 0;
}

/* overview status rows */
.status-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; max-width: 34rem; }

.status-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.status-list li:last-child { border-bottom: 1px solid var(--line); }
.status-list .status-list__label { font-weight: 700; }
.status-list a { white-space: nowrap; }

@media (max-width: 48rem) {
  /* subnav becomes a horizontally scrollable pill row above the content */
  .account-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .subnav {
    position: static;
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    border-top: none;
    padding-bottom: var(--sp-2);
  }
  .subnav a {
    white-space: nowrap;
    border: 1px solid var(--line);
    padding: var(--sp-2) var(--sp-3);
  }
  .subnav a[aria-current="page"] {
    border: 1px solid var(--accent);
    border-left-width: 1px;
    padding-left: var(--sp-3);
    color: var(--ink);
  }
  .subnav a.subnav--danger[aria-current="page"] { border-color: var(--blood-400); }
}

/* ============================== playtest phases ============================== */

.phases { list-style: none; margin: var(--sp-4) 0 0; padding: 0; max-width: 26rem; }

.phases li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}

.phases li:last-child { border-bottom: 1px solid var(--line); }

.phases__name { font-weight: 700; font-size: var(--text-sm); }

/* phase rows can now carry a build list, so the head is its own flex row */
.phases__row { display: block; }
.phases__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}

.builds { list-style: none; margin: var(--sp-3) 0 0; padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--ember-500); }
.builds li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
}
.builds li + li { border-top: 1px solid var(--line); }
.builds__plat { font-weight: 700; font-size: var(--text-sm); }
.builds__ver { font-size: var(--text-sm); color: var(--ink-soft); margin-left: var(--sp-2); font-variant-numeric: tabular-nums; }
.builds__meta { display: block; font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; }
.builds__empty { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--sp-2) 0 0 var(--sp-4); }

.chip {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  padding: 2px 10px;
}

.chip--granted { color: var(--arcane-300); border-color: var(--arcane-400); }
.chip--down { color: var(--blood-400); border-color: var(--blood-400); }

/* status page service board */
.svc { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }

.svc li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
}

.svc li:last-child { border-bottom: 1px solid var(--line); }

.svc__name { display: block; font-weight: 700; }

.svc__desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ============================== screenshots ============================== */

.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.shots figure {
  margin: 0;
  grid-column: span 1;
}

/* the lead shot carries the row alone */
.shots figure:first-child { grid-column: 1 / -1; }

.shots img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
}

.shots figcaption {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  padding: var(--sp-2) var(--sp-1) 0;
}

@media (max-width: 40rem) {
  .shots { grid-template-columns: 1fr; }
}

/* ============================== chronicle ============================== */

.dispatch { max-width: var(--measure); margin-top: var(--sp-7); }

.dispatch__date {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ember-400);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--sp-2);
}

.dispatch h2 { margin-bottom: var(--sp-3); }

.dispatch + .dispatch {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}

/* ============================== download ============================== */

.dl-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; max-width: 38rem; }

.dl-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface);
}

.dl-list li + li { border-top: none; }

.dl-list .dl-platform { font-weight: 700; }

.dl-list .dl-status {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================== legal ============================== */

.legal { max-width: var(--measure); }

.legal h2 { font-size: var(--text-md); margin-top: var(--sp-6); }

.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: var(--sp-2); font-size: var(--text-sm); color: var(--ink-soft); }

.draft-banner {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember-400);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--sp-6);
  max-width: var(--measure);
}

/* ============================== footer ============================== */

.footer {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-9);
}

.footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.footer a { color: var(--ink-muted); }
.footer a:hover { color: var(--ember-300); }

/* ============================== motion ============================== */

.embers-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .embers-canvas { display: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ============================== responsive ============================== */

@media (max-width: 40rem) {
  /* nav: emblem + wordmark + two compact buttons + burger must fit 360px */
  .nav { padding: 0 var(--sp-3); gap: var(--sp-3); }
  .nav__link:not(.nav__link--keep) { display: none; }
  .nav__brand { gap: var(--sp-2); }
  .nav__brand img { width: 24px; }
  .nav__brand .wordmark { font-size: 0.95rem; letter-spacing: 0.06em; }
  .btn--nav { padding: 0.35rem 0.7rem; font-size: 0.8rem; }

  /* burger replaces the hidden text links; panel drops below the header bar */
  .nav__toggle { display: inline-flex; }
  .nav__menu:not([hidden]) {
    display: block;
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .nav__menu a {
    display: block;
    padding: 0.9rem var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-soft);
  }
  .nav__menu a + a { border-top: 1px solid var(--line); }
  .nav__menu a:hover { color: var(--ember-300); }
  .nav__menu a[aria-current="page"] {
    color: var(--ink);
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--sp-4) - 3px);
  }

  /* hero: tighter tracking — the gradient wordmark is the widest thing on the page */
  .hero__title { letter-spacing: 0.05em; }
  .hero__body { padding: var(--sp-7) var(--sp-4); }
}

/* very small phones: the brand text can't share a row with two buttons — emblem alone carries it */
@media (max-width: 26rem) {
  .nav__brand .wordmark { display: none; }

  .page { padding: var(--sp-6) var(--sp-4); }
  .plate { padding: var(--sp-6) var(--sp-4); }
  .auth-card { margin: var(--sp-7) auto; }
}