/* ============================================================
   haKC.Codes landing - design tokens (copied verbatim from
   haKCCodes-design/tokens/*.css) + page styles. Single source.
   ============================================================ */

/* haKC.Codes - type. IBM Plex Sans for UI chrome, IBM Plex Mono for
   anything a machine produced: scores, times, ranks, hashes, code, flags. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* scale */
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 46px;
  --text-4xl: 62px;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* semantic */
  --font-display: var(--font-mono);   /* headlines are mono - terminal heritage */
  --font-body: var(--font-sans);
  --font-data: var(--font-mono);
}

/* haKC.Codes - color tokens. Palette lifted from the PCB-raven badge:
   warm black substrate, brass/gold traces, phosphor-green LED matrix. */
:root {
  /* base - warm blacks */
  --bg-0: #0A0A08;
  --bg-1: #11100C;
  --surface-1: #171510;
  --surface-2: #1E1B14;
  --surface-3: #262215;
  --border-1: #2B2718;
  --border-2: #3E371F;
  --text-1: #EDE7D6;
  --text-2: #A69E88;
  --text-3: #6E6753;

  /* gold - brass traces */
  --gold-200: #F8E6A8;
  --gold-300: #F4D97B;
  --gold-400: #E4BC4F;
  --gold-500: #C99E2E;
  --gold-600: #A87F1E;
  --gold-700: #7A5C13;

  /* green - phosphor LED */
  --green-200: #A8FFCB;
  --green-300: #7CFFAF;
  --green-400: #4EF08A;
  --green-500: #2ED96F;
  --green-600: #1FA355;
  --green-700: #14663A;

  /* semantic */
  --accent: var(--gold-400);
  --accent-strong: var(--gold-300);
  --accent-muted: var(--gold-600);
  --live: var(--green-400);
  --success: var(--green-400);
  --danger: #F25E4E;
  --warning: #FFB454;
  --info: #6FB8D9;

  /* semantic surfaces */
  --surface-card: var(--surface-1);
  --surface-raised: var(--surface-2);
  --surface-input: var(--bg-1);
  --surface-accent-tint: rgba(228, 188, 79, 0.08);
  --surface-green-tint: rgba(78, 240, 138, 0.07);
  --surface-danger-tint: rgba(242, 94, 78, 0.09);
  --text-body: var(--text-1);
  --text-muted: var(--text-2);
  --text-faint: var(--text-3);
  --text-on-accent: #14110A;
  --text-accent: var(--gold-400);
  --text-live: var(--green-400);

  /* rank medals */
  --rank-1: #E4BC4F;
  --rank-2: #C6CBD4;
  --rank-3: #C07A45;

  /* glows */
  --glow-green: 0 0 12px rgba(78, 240, 138, 0.35);
  --glow-gold: 0 0 14px rgba(228, 188, 79, 0.28);
}

[data-theme="light"] {
  --bg-0: #F1EDDE;
  --bg-1: #F6F3E7;
  --surface-1: #FCFAF1;
  --surface-2: #FFFFFF;
  --surface-3: #EFE9D4;
  --border-1: #DAD2B8;
  --border-2: #C2B891;
  --text-1: #17140B;
  --text-2: #5C553F;
  --text-3: #8C846A;

  --accent: var(--gold-600);
  --accent-strong: var(--gold-500);
  --accent-muted: var(--gold-700);
  --live: var(--green-600);
  --success: var(--green-600);
  --danger: #C93A2B;
  --warning: #B06A00;
  --info: #2E7A9E;

  --surface-card: var(--surface-1);
  --surface-raised: var(--surface-2);
  --surface-input: #FFFFFF;
  --surface-accent-tint: rgba(168, 127, 30, 0.09);
  --surface-green-tint: rgba(31, 163, 85, 0.08);
  --surface-danger-tint: rgba(201, 58, 43, 0.08);
  --text-body: var(--text-1);
  --text-muted: var(--text-2);
  --text-faint: var(--text-3);
  --text-on-accent: #FFFDF4;
  --text-accent: var(--gold-600);
  --text-live: var(--green-600);

  --rank-1: #B8912A;
  --rank-2: #8E959F;
  --rank-3: #A05F2C;

  --glow-green: 0 0 0 rgba(0,0,0,0);
  --glow-gold: 0 0 0 rgba(0,0,0,0);
}

/* haKC.Codes - spacing, radii, borders, shadows, motion */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* sharp corners; radius is earned, not default */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  --border-w: 1px;
  --border-card: 1px solid var(--border-1);
  --border-strong: 1px solid var(--border-2);
  --border-accent: 1px solid var(--gold-600);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --blink: hakc-blink 1.1s steps(2, start) infinite;
}

@keyframes hakc-blink { to { visibility: hidden; } }
@keyframes hakc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hakc-glitch {
  0%, 92%, 100% { transform: translate(0, 0); clip-path: none; }
  93% { transform: translate(2px, -1px); clip-path: inset(10% 0 60% 0); }
  95% { transform: translate(-2px, 1px); clip-path: inset(60% 0 15% 0); }
  97% { transform: translate(1px, 0); clip-path: inset(30% 0 40% 0); }
}

/* ============================================================
   Page + component styles - LORE landing. Border-defined cards,
   1px hairlines, sharp corners, glows only on dark, gold=structure,
   phosphor-green=live/solved only. Pure #000 behind the hero raven.
   ============================================================ */

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

html { background: #000; }

body {
  margin: 0;
  background: #000;                 /* pure #000 - hosts the raven logo imagery */
  color: var(--text-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
a:hover { color: var(--gold-300) !important; }
img { display: block; }

/* ---- header ---- */
.site-header {
  min-height: 82px;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px;
}
.site-header__mark { height: 26px; width: auto; }
.site-nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.site-nav a { color: var(--text-2); text-decoration: none; }

/* ============================================================
   HERO - the raven is the dominating force. Static. Centered. Huge.
   ============================================================ */
.hero {
  background: #000;
  height: calc(100vh - 82px);       /* fill the window beneath the 82px header */
  min-height: 360px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
}
.hero__raven {
  width: auto;
  height: auto;
  max-height: 100%;                 /* whole raven always visible within the hero */
  max-width: 92vw;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(228, 188, 79, 0.12));
}
.hero__title {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--gold-300);
}
/* blinking phosphor-green BLOCK cursor as the trailing underscore */
.hero__title .cursor-green {
  color: transparent;
  position: relative;
}
.hero__title .cursor-green::after {
  content: "";
  position: absolute;
  left: 0.06em;
  bottom: 0.06em;
  width: 0.62em;
  height: 0.9em;
  background: var(--green-400);
  box-shadow: var(--glow-green);
  animation: var(--blink);
}
.hero__lede {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-2);
}
.hero__cta { display: flex; gap: 12px; margin-top: 30px; justify-content: center; }
.hero__prompt {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: var(--tracking-wide);
}

.blink-block {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: var(--green-400);
  vertical-align: -1px;
  animation: var(--blink);
}

/* ---- Button ---- */
.btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  border-radius: var(--radius-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 13px 28px; font-size: 14px; }
.btn--sm { padding: 5px 12px; font-size: 11px; }
.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid transparent;
}
.btn--primary:hover { background: var(--accent-strong); color: var(--text-on-accent) !important; }
.btn--secondary {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border-2);
}
.btn--secondary:hover { background: var(--surface-2); border-color: var(--gold-600); color: var(--text-1) !important; }
.btn__glyph { line-height: 1; }

/* ============================================================
   STATS strip - real numbers only
   ============================================================ */
.stats {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
}
.stats__grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.stat { padding: 12px 16px; }
.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-3);
}
.stat__row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.stat__value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat__value--sm { font-size: 18px; letter-spacing: var(--tracking-wide); }
.stat__value--gold { color: var(--gold-300); }
.stat__value--green { color: var(--green-400); }

/* ============================================================
   23 LORE
   ============================================================ */
.lore {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px 40px;
}
.lore__intro { max-width: 720px; margin-bottom: 44px; }
.lore__heading {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-300);
}
.lore__sub {
  margin: 14px 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-2);
}

.lore-block {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2);
  background: var(--surface-card);
  margin-bottom: 24px;
  overflow: hidden;
}
.lore-block__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
}
.lore-block__idx {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  color: var(--text-on-accent);
  background: var(--gold-400);
  padding: 4px 8px;
  border-radius: var(--radius-1);
}
.lore-block__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-1);
}
.lore-block__meta {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.lore-block__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  padding: 24px 20px;
  align-items: start;
}
.lore-block__art {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.lore-block__art--coins { align-items: center; }

.lore-img {
  width: 100%;
  max-width: 148px;
  height: auto;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-1);
  background: #000;
}
.lore-img--coin {
  max-width: 138px;
  border-radius: var(--radius-pill);
  border-color: var(--gold-600);
  box-shadow: var(--glow-gold);
}

.pwn-fig { margin: 0; }
.pwn-fig figcaption {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

/* audio card - the 23isReal WAV IS the puzzle */
.lore-block__art--audio { display: block; }
.audio-card {
  border: 1px solid var(--green-700);
  border-radius: var(--radius-2);
  background: var(--surface-green-tint);
  padding: 16px;
  box-shadow: var(--glow-green);
  width: 100%;
}
.audio-card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--green-400);
  margin-bottom: 12px;
}
.lore-audio { width: 100%; height: 40px; }
.audio-card__hint {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  color: var(--text-3);
}

.lore-block__body p {
  margin: 0 0 14px;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-2);
}
.lore-block__body p:last-of-type { margin-bottom: 0; }
.lore-note {
  border-left: 2px solid var(--green-600);
  padding-left: 12px;
  color: var(--text-1) !important;
}
.lore-note__mark { color: var(--green-400); font-family: var(--font-mono); margin-right: 4px; }

.lore-block__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.lore-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-300);
  border: 1px solid var(--border-2);
  padding: 3px 9px;
  border-radius: var(--radius-1);
}

/* ---- per-puzzle WORKFLOW (no-spoiler stage list) ---- */
.wf {
  margin-top: 22px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2);
  background: var(--bg-1);
  overflow: hidden;
}
.wf__head {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-300);
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-accent-tint);
}
.wf__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  counter-reset: wf;
}
.wf__stage {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
}
.wf__stage:last-child { border-bottom: none; }
.wf__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 7px;
}
.wf__was, .wf__hint, .wf__act {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: var(--leading-snug);
  color: var(--text-2);
  padding-left: 12px;
  border-left: 1px solid var(--border-2);
  margin-top: 5px;
}
.wf__k {
  display: inline-block;
  min-width: 34px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-right: 6px;
}
.wf__act { color: var(--text-1); }
.wf__act .wf__k { color: var(--green-400); }

/* ---- REVEAL SOLUTION spoiler (native <details>) ---- */
.reveal {
  margin-top: 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-2);
  background: var(--bg-1);
  overflow: hidden;
}
.reveal__summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--green-400);
  padding: 11px 14px;
  border-left: 2px solid var(--green-600);
  transition: background var(--dur-fast) var(--ease-out);
  user-select: none;
}
.reveal__summary::-webkit-details-marker { display: none; }
.reveal__summary:hover { background: var(--surface-green-tint); }
.reveal[open] .reveal__summary {
  border-bottom: 1px solid var(--border-2);
  color: var(--green-300);
  background: var(--surface-green-tint);
}
.reveal__body { padding: 14px 16px; }
.reveal__pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--border-1); margin-top: 32px; }
.site-footer__row {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.site-footer__row a { color: var(--text-3); text-decoration: none; }
.site-footer__flag { margin-left: auto; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .hero { min-height: 58vh; padding-bottom: 48px; }
  .hero__raven { height: clamp(340px, 52vh, 620px); }
  .hero__title { font-size: var(--text-3xl); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .lore-block__grid { grid-template-columns: 1fr; gap: 20px; }
  .site-nav { display: none; }
}

/* ============ randomized tdfiglet wordmark (header) ============ */
.site-header__brand { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark { display: inline-flex; align-items: flex-end; gap: 14px; min-height: 46px; line-height: 0; }
.wordmark__word, .wordmark .wm__word {
  margin: 0; padding: 0; line-height: 1;
  font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
  white-space: pre; letter-spacing: 0;
}
.wordmark__fallback { font-family: var(--font-mono); font-weight: 600; font-size: 21px; letter-spacing: 1px; color: var(--gold-400); }
.wordmark__dot { color: var(--text-2); }
.wordmark--live { filter: drop-shadow(0 0 10px rgba(0,0,0,0.6)); }


/* intro block below the full-height logo hero */
.intro { background: #000; text-align: center; padding: 8px 24px 72px; }
.intro .hero__lede { margin: 0 auto; max-width: 620px; }
.intro .hero__cta { margin-top: 30px; }
.intro .hero__prompt { margin-top: 26px; }

/* ==================== APP SHELL (siderail + routed pages + density) ==================== */
:root { --rail-w: 66px; --topbar-h: 78px; --content-max: 1040px; }
html[data-dens="tight"]       { --content-max: 720px; }
html[data-dens="comfortable"] { --content-max: 1040px; }
html[data-dens="wide"]        { --content-max: 1560px; }
body { margin: 0; }
.app { display: flex; min-height: 100vh; background: var(--bg-0); }

/* ---- siderail: collapsed by default, expands on hover/focus ---- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 50;
  background: var(--bg-1); border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0;
  transition: width var(--dur-med) var(--ease-out); overflow: hidden;
}
.rail:hover, .rail:focus-within { width: 210px; align-items: stretch; box-shadow: 8px 0 26px rgba(0,0,0,.55); }
.rail__brand { display: flex; justify-content: center; padding: 4px 0 16px; }
.rail__bird { height: 44px; width: auto; object-fit: contain; filter: drop-shadow(0 0 8px rgba(228,188,79,.25)); transition: height var(--dur-med) var(--ease-out); }
.rail:hover .rail__bird, .rail:focus-within .rail__bird { height: 66px; }
.rail__nav { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.rail__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; justify-content: center; text-decoration: none;
  color: var(--text-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-left: 2px solid transparent; }
.rail:hover .rail__item, .rail:focus-within .rail__item { justify-content: flex-start; padding-left: 20px; }
.rail__ico { font-size: 15px; color: var(--gold-400); width: 22px; text-align: center; flex: none; }
.rail__label { white-space: nowrap; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.rail:hover .rail__label, .rail:focus-within .rail__label { opacity: 1; }
.rail__item:hover { color: var(--text-1); border-left-color: var(--border-2); background: var(--surface-2); }
.rail__item.is-active { color: var(--gold-300); border-left-color: var(--gold-400); }
.rail__foot { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; }
.rail__denslabel { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-3); opacity: 0; white-space: nowrap; }
.rail:hover .rail__denslabel, .rail:focus-within .rail__denslabel { opacity: 1; }
.rail__density { display: flex; gap: 4px; align-items: center; justify-content: center; }
.dens { background: transparent; border: 1px solid var(--border-2); border-radius: 2px; padding: 6px 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 26px; transition: border-color var(--dur-fast); }
.dens i { display: block; height: 10px; background: var(--text-3); transition: background var(--dur-fast); }
.dens:hover i { background: var(--text-1); }
.dens.is-active { border-color: var(--gold-500); }
.dens.is-active i { background: var(--gold-400); box-shadow: var(--glow-gold); }

/* ---- main column ---- */
.main { flex: 1; margin-left: var(--rail-w); min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-1); background: var(--bg-1); position: sticky; top: 0; z-index: 40; }
.topbar__brand { display: inline-flex; text-decoration: none; }
.content { flex: 1; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; transition: max-width var(--dur-med) var(--ease-out); }

/* ---- host-based page routing (no hash). Set by inline <head> script. ---- */
.page[hidden] { display: none; }
.page { display: none; }
html[data-host="home"] .page--home { display: block; }
html[data-host="lore"] .page--lore { display: block; }
/* default (no data-host yet) falls back to home so nothing is ever blank */
html:not([data-host]) .page--home { display: block; }
/* active rail item, marked by host instead of hash */
html[data-host="home"] .rail__item[data-host-item="home"],
html[data-host="lore"] .rail__item[data-host-item="lore"] { color: var(--gold-300); border-left-color: var(--gold-400); }

/* hero lives inside main now: fills the viewport below the topbar */
.hero { background: #000; height: calc(100vh - var(--topbar-h)); min-height: 340px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 18px 24px; }
.hero__raven { width: auto; height: auto; max-height: 100%; max-width: 90%; object-fit: contain; filter: drop-shadow(0 0 40px rgba(228,188,79,.12)); }
.page--lore .wrap { padding-top: 40px; padding-bottom: 76px; }

/* ---- responsive: rail becomes a bottom bar on narrow screens ---- */
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .rail { top: auto; bottom: 0; right: 0; width: 100% !important; height: 56px; flex-direction: row; border-right: none; border-top: 1px solid var(--border-1); padding: 0; align-items: center; box-shadow: none !important; }
  .rail:hover, .rail:focus-within { width: 100% !important; box-shadow: none !important; }
  .rail__brand { display: none; }
  .rail__nav { flex-direction: row; justify-content: space-around; }
  .rail__item { flex-direction: column; gap: 2px; padding: 6px 8px !important; justify-content: center; border-left: none; }
  .rail__label { opacity: 1 !important; font-size: 9px; }
  .rail__foot { margin: 0; flex-direction: row; width: auto; padding: 0 10px; }
  .rail__denslabel { display: none; }
  .main { margin-left: 0; margin-bottom: 56px; }
}

/* ==================== iteration: thinner rail, no separators, transparent topbar, NFO ==================== */
:root { --rail-w: 44px; }
.rail { border-right: none !important; padding: 10px 0; }
.rail:hover, .rail:focus-within { box-shadow: 10px 0 30px rgba(0,0,0,.6); }
.rail__brand { padding: 2px 0 12px; }
.rail__bird { height: 30px; }
.rail:hover .rail__bird, .rail:focus-within .rail__bird { height: 58px; }
.rail__item { padding: 13px 0; justify-content: center; }
.rail__ico { width: 100%; text-align: center; font-size: 17px; color: var(--gold-400); }
.rail:hover .rail__item, .rail:focus-within .rail__item { justify-content: flex-start; padding-left: 14px; }
.rail:hover .rail__ico, .rail:focus-within .rail__ico { width: 22px; }
.rail__density { flex-wrap: wrap; }

/* no separation lines anywhere in the shell */
.topbar { background: transparent !important; border-bottom: none !important; }
.site-footer { border-top: none !important; }
.main { border: none !important; }

/* NFO host routing (explicit for all three hosts) */
html[data-host="home"] .page--home { display: block !important; }
html[data-host="home"] .page--lore, html[data-host="home"] .page--nfo { display: none !important; }
html[data-host="lore"] .page--lore { display: block !important; }
html[data-host="lore"] .page--home, html[data-host="lore"] .page--nfo { display: none !important; }
html[data-host="nfo"] .page--nfo { display: block !important; }
html[data-host="nfo"] .page--home, html[data-host="nfo"] .page--lore { display: none !important; }
.rail__item[data-host-item="nfo"] { } /* active handled by data-host below */
html[data-host="nfo"] .rail__item[data-host-item="nfo"] { color: var(--gold-300); border-left-color: var(--gold-400); }

/* .nfo file styling */
.wrap--nfo { padding-top: 44px; padding-bottom: 80px; max-width: 760px; }
.nfo { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--text-2); background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-2); padding: 26px 30px; overflow-x: auto; white-space: pre; margin: 0; }
.nfo__b { color: var(--gold-600); }
.nfo__g { color: var(--green-400); }
.nfo__gold { color: var(--gold-400); }
.nfo__p { color: var(--green-400); }
.nfo__d { color: var(--text-3); }

/* submitter solution link inside a reveal */
.reveal__submitter { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 12px; text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--green-400); border: 1px solid var(--green-700); border-radius: var(--radius-1); background: rgba(78,240,138,.05); }
.reveal__submitter:hover { border-color: var(--green-400); color: var(--green-300); box-shadow: var(--glow-green); }

/* ==================== iteration: modernize/flatten lore, big coin, ascii headings ==================== */
/* flatter, rounder lore cards - no hairlines, soft filled surface */
.lore-block { border: none !important; border-radius: 18px !important; background: var(--surface-1) !important; margin-bottom: 22px; overflow: hidden; }
.lore-block__head { border-bottom: none !important; background: transparent !important; padding: 22px 26px 2px !important; align-items: center; }
.lore-block__idx { display: none; }
.lore-block__meta { color: var(--text-3); }
.lore-block__grid { grid-template-columns: minmax(240px, 0.9fr) 1.4fr !important; gap: 32px !important; padding: 10px 26px 28px !important; align-items: center !important; }
.lore-block__body { min-width: 0; }

/* BIG dynamic coin - fills its column, round, flat */
.lore-block__art--coins { align-items: center; justify-content: center; }
.lore-img { border: none !important; border-radius: 16px !important; background: #000; box-shadow: none !important; }
.lore-img--coin { max-width: 100% !important; width: 100% !important; border-radius: 50% !important; box-shadow: 0 0 0 1px var(--border-2), 0 0 40px rgba(228,188,79,.12) !important; }
.pwn-fig img { border-radius: 12px !important; }

/* flatten wf + reveal - rounder, no hairline */
.wf { border: none !important; border-radius: 14px !important; background: var(--bg-1) !important; }
.reveal { border: none !important; border-radius: 14px !important; background: var(--bg-1) !important; overflow: hidden; }
.reveal__summary { border-radius: 14px !important; }
.reveal__submitter { border-radius: 10px !important; }
.audio-card { border-radius: 12px !important; border: none !important; background: var(--surface-2) !important; }
.btn { border-radius: 10px !important; }
.lore-tag { border-radius: 8px !important; }

/* ascii-art headings */
.arthead { margin: 0; white-space: pre; line-height: 1; font-family: "DejaVu Sans Mono","Menlo","Consolas",monospace; overflow-x: auto; }
.arthead-wrap { display: flex; align-items: center; gap: 12px; }
.arthead-slash { color: var(--gold-500); font-family: var(--font-mono); font-size: 22px; font-weight: 700; }
.lore-block__title.arthead-wrap { margin: 0; }