/* Dark world: a bunker-and-wasteland trade post. Applied when data-theme="fallout".
   Riveted steel and rust, lantern amber for headlines, phosphor green for terminals and controls,
   rust-red for buttons and placards. Tokens from DESIGN.md section 2. All art is original. */

[data-theme="fallout"] {
  --void: #070a07;
  --steel: #161b17;
  --steel-hi: #222a24;
  --rust: #6b3a22;
  --rust-red: #a8321f;
  --rust-red-hi: #c4412a;
  --amber: #e8a33a;
  --amber-deep: #b8741e;
  --phosphor: #4dff7a;
  --phosphor-dim: #2ba84f;
  --phosphor-ghost: #0f3b1d;
  --placard: #c9b992;
  --placard-ink: #1a1610;
  --bone: #e6dfc8;
  --hazard: #e0b020;

  --page-bg: var(--void);
  --header-bg: var(--steel);
  --hero-bg: var(--void);
  --hero-scrim: rgba(7, 10, 7, 0.93);
  --banner-scrim-end: rgba(7, 10, 7, 0.5);
  --footer-bg: #120d0a;
  --footer-text: var(--bone);
  --footer-heading: var(--bone);
  --footer-link: var(--bone);
  --text: var(--bone);
  --heading: var(--bone);
  --nav-link: var(--bone);
  --link: var(--phosphor);
  --link-hover: var(--amber);
  --rule: #3b7a45;
  --focus: #7dffa0;
  --focus-halo: var(--void);
  --skip-bg: var(--phosphor);
  --skip-fg: var(--void);
  --toggle-bg: #111a0e;
  --toggle-fg: #ffb000;
  --toggle-hover: #1d2e18;

  --heading-font: "Stardos Stencil", "Allerta Stencil", "Stencil", "Stencil Std", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --label-font: "Oswald", "DIN Condensed", "Bahnschrift", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body-font: "Source Sans 3", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono-font: "VT323", "IBM Plex Mono", "Menlo", "Consolas", monospace;

  /* Four corner rivets, reused on every plate. */
  --rivets:
    radial-gradient(circle at 14px 14px, #a8a89a 0 1.5px, #5b5f55 2px 4px, #0c0e0b 4.5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #a8a89a 0 1.5px, #5b5f55 2px 4px, #0c0e0b 4.5px, transparent 5.5px),
    radial-gradient(circle at 14px calc(100% - 14px), #a8a89a 0 1.5px, #5b5f55 2px 4px, #0c0e0b 4.5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #a8a89a 0 1.5px, #5b5f55 2px 4px, #0c0e0b 4.5px, transparent 5.5px);
}

[data-theme="fallout"] body {
  font-size: 1.05rem;
}

/* ---- Header: riveted dark steel ---- */
[data-theme="fallout"] .site-header {
  border-bottom: 3px solid var(--rust);
  box-shadow: 0 1px 0 #0c0e0b, 0 8px 18px rgba(0, 0, 0, 0.6);
}

[data-theme="fallout"] .site-name {
  padding: 0.6rem 1.1rem 0.55rem;
  border: 2px solid var(--rust);
  background-color: var(--steel-hi);
  box-shadow: inset 0 0 0 1px #0c0e0b, inset 0 2px 0 rgba(230, 223, 200, 0.08);
}

[data-theme="fallout"] .brand-main {
  font-size: 1.9rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--bone);
}

[data-theme="fallout"] .brand-sub {
  color: var(--amber);
  margin-top: 0.22rem;
  letter-spacing: 0.22em;
}

[data-theme="fallout"] .plaque {
  font-size: 0.875rem;
  letter-spacing: 0.14em;
}

[data-theme="fallout"] .plaque-left {
  padding-left: 1rem;
  border-left: 2px solid var(--rust);
  color: var(--bone);
}

/* Worn paper placard taped to the steel. */
[data-theme="fallout"] .plaque-right {
  max-width: 13rem;
  padding: 0.4rem 0.8rem;
  background: var(--placard);
  color: var(--placard-ink);
  font-weight: 700;
  text-align: center;
  transform: rotate(-1.5deg);
  clip-path: polygon(0 4%, 6% 0, 40% 3%, 72% 0, 100% 5%, 98% 50%, 100% 96%, 66% 100%, 30% 97%, 3% 100%, 1% 52%);
}

[data-theme="fallout"] .site-nav {
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Hover: amber text with a bracket pair sliding in; current page: a rust-red plate behind the link. */
[data-theme="fallout"] .site-nav a {
  transition: color 200ms ease;
}

[data-theme="fallout"] .site-nav a:hover,
[data-theme="fallout"] .site-nav a:focus-visible {
  color: var(--amber);
}

[data-theme="fallout"] .site-nav a::before,
[data-theme="fallout"] .site-nav a::after {
  position: absolute;
  top: 50%;
  margin-top: -0.65em;
  color: var(--amber);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}

[data-theme="fallout"] .site-nav a::before {
  content: "[";
  content: "[" / "";
  left: -0.2rem;
  transform: translateX(-6px);
}

[data-theme="fallout"] .site-nav a::after {
  content: "]";
  content: "]" / "";
  right: -0.2rem;
  transform: translateX(6px);
}

[data-theme="fallout"] .site-nav a:hover::before,
[data-theme="fallout"] .site-nav a:hover::after,
[data-theme="fallout"] .site-nav a:focus-visible::before,
[data-theme="fallout"] .site-nav a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

[data-theme="fallout"] .site-nav a[aria-current="page"] {
  background: var(--rust-red);
  color: #fff4e0;
  box-shadow: inset 0 0 0 1px #0c0e0b, inset 0 2px 0 rgba(255, 255, 255, 0.12);
}

/* ---- Buttons ---- */
[data-theme="fallout"] .btn {
  position: relative;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: 0.14em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background-color 150ms ease, color 150ms ease;
}

[data-theme="fallout"] .btn-primary,
[data-theme="fallout"] .btn-ghost {
  background: var(--rust-red);
  color: #fff4e0;
  border-color: #0c0e0b;
}

/* A scanline sweeps across on hover; a press gives a short rivet-click shake. */
[data-theme="fallout"] .btn-primary::after,
[data-theme="fallout"] .btn-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(255, 244, 224, 0.28) 50%, transparent 60%);
  transform: translateY(-100%);
  pointer-events: none;
}

[data-theme="fallout"] .btn-primary:hover,
[data-theme="fallout"] .btn-ghost:hover,
[data-theme="fallout"] .btn-primary:focus-visible,
[data-theme="fallout"] .btn-ghost:focus-visible {
  background: var(--rust-red-hi);
}

[data-theme="fallout"] .btn-primary:hover::after,
[data-theme="fallout"] .btn-ghost:hover::after,
[data-theme="fallout"] .btn-primary:focus-visible::after,
[data-theme="fallout"] .btn-ghost:focus-visible::after {
  animation: btn-scan 220ms linear 1 forwards;
}

@keyframes btn-scan {
  to { transform: translateY(100%); }
}

@keyframes btn-shake {
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}

[data-theme="fallout"] .btn:active {
  animation: btn-shake 150ms steps(4) 1;
}

/* Focus on clipped buttons: the outline would be cut, so draw it inside. */
[data-theme="fallout"] .btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -6px;
}

[data-theme="fallout"] .btn-soon {
  clip-path: none;
  background: transparent;
  color: var(--phosphor-dim);
  border-color: var(--phosphor-dim);
  font-family: var(--mono-font);
}

/* ---- Hero: soot scrim, bone headline with one amber line ---- */
[data-theme="fallout"] .hero,
[data-theme="fallout"] .page-banner {
  border-bottom: 3px solid var(--rust);
}

[data-theme="fallout"] .hero h1,
[data-theme="fallout"] .page-banner h1 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bone);
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(232, 163, 58, 0.15);
}

[data-theme="fallout"] .hero h1 em,
[data-theme="fallout"] .page-banner h1 em {
  color: var(--amber);
}

[data-theme="fallout"] .eyebrow {
  color: var(--amber);
  font-weight: 700;
}

[data-theme="fallout"] .hero-flourish {
  font-family: var(--mono-font);
  letter-spacing: 0.16em;
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(77, 255, 122, 0.55);
}

/* ---- Sections ---- */
[data-theme="fallout"] .section-head h2 {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.35rem;
  border-bottom: 4px solid var(--amber-deep);
}

[data-theme="fallout"] .section-sub {
  color: var(--bone);
  font-weight: 700;
}

/* ---- Cards: terminal readouts on riveted plates ---- */
[data-theme="fallout"] .card-hang {
  display: none;
}

[data-theme="fallout"] .card-sign {
  padding: 1.5rem 1.25rem 1.5rem;
  border: 2px solid var(--rust);
  background-color: var(--steel);
  box-shadow: inset 0 0 0 1px var(--steel-hi), 0 10px 20px rgba(0, 0, 0, 0.55);
}

[data-theme="fallout"] .card-art {
  border: 6px solid var(--steel-hi);
  border-radius: 14px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9), 0 0 0 2px #0c0e0b, 0 0 16px rgba(77, 255, 122, 0.12);
  transition: filter 250ms ease, box-shadow 250ms ease;
}

[data-theme="fallout"] .card:hover .card-art,
[data-theme="fallout"] .card:focus-within .card-art {
  filter: brightness(1.2) saturate(1.1);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9), 0 0 0 2px #0c0e0b, 0 0 22px rgba(77, 255, 122, 0.35);
  animation: crt-flicker 600ms steps(3, end) 1;
}

@keyframes crt-flicker {
  0% { opacity: 1; }
  33% { opacity: 0.92; }
  66% { opacity: 1; }
  100% { opacity: 0.96; }
}

/* Title on a torn paper placard. */
[data-theme="fallout"] .card-title {
  align-self: flex-start;
  padding: 0.3rem 0.9rem 0.35rem 0.7rem;
  background: var(--placard);
  color: var(--placard-ink);
  font-family: var(--label-font);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 3%, 97% 30%, 100% 62%, 98% 100%, 2% 96%, 0 60%);
}

[data-theme="fallout"] .board .card-title {
  justify-self: start;
}

[data-theme="fallout"] .card-desc {
  padding-left: 1.3em;
  font-family: var(--mono-font);
  font-size: 1.05rem;
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(77, 255, 122, 0.45);
}

/* The prompt sits outside the typed block so the typing overlay lines up with the real text. */
[data-theme="fallout"] .card-desc::before {
  content: ">";
  content: ">" / "";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--phosphor-dim);
}

[data-theme="fallout"] .card-desc .typeline {
  display: block;
}

[data-theme="fallout"] .card-detail {
  color: var(--bone);
}

[data-theme="fallout"] .card-meta {
  color: var(--amber);
  text-transform: uppercase;
}

[data-theme="fallout"] .board-placard {
  display: block;
  width: fit-content;
  margin: 0 0 0.75rem;
  padding: 0.35rem 1rem;
  background: var(--placard);
  color: var(--placard-ink);
  font-family: var(--heading-font);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

/* ---- Typing readout (js/world.js). The real text stays in the DOM for screen readers;
       a decorative copy types over it, then is removed. ---- */
/* Block-level so the absolute ghost wraps exactly like the real line (an inline box would not). */
.typeline {
  display: block;
  position: relative;
}

.typeline.is-typing {
  color: transparent;
  text-shadow: none;
}

.type-ghost {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(77, 255, 122, 0.45);
}

.type-ghost::after,
.crt-cursor {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 0.1em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: cursor-blink 1s steps(2, start) infinite;
}

@keyframes cursor-blink {
  to { visibility: hidden; }
}

/* ---- Band, story and contact plates ---- */
[data-theme="fallout"] .band-col,
[data-theme="fallout"] .story-text,
[data-theme="fallout"] .contact-aside {
  position: relative;
  border: 2px solid var(--rust);
  background-color: var(--steel);
  box-shadow: inset 0 0 0 1px var(--steel-hi), 0 10px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="fallout"] .band-about .vignette {
  order: 2;
}

[data-theme="fallout"] .vignette {
  border: 2px solid #0c0e0b;
  box-shadow: 0 0 0 2px var(--rust);
}

[data-theme="fallout"] .band-text h2,
[data-theme="fallout"] .contact-aside h2,
[data-theme="fallout"] .log h3 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="fallout"] .band-text .kicker,
[data-theme="fallout"] .log .kicker {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--mono-font);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--amber);
}

[data-theme="fallout"] .story-text {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

[data-theme="fallout"] .log li {
  padding-left: 1rem;
  border-left: 3px solid var(--amber-deep);
}

[data-theme="fallout"] .story-figure figcaption {
  font-family: var(--mono-font);
  color: var(--phosphor-dim);
}

[data-theme="fallout"] .footnote {
  font-family: var(--mono-font);
  color: var(--phosphor);
}

/* ---- Contact: a terminal session ---- */
[data-theme="fallout"] .contact-form {
  border: 6px solid var(--steel-hi);
  border-radius: 16px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #0c2a15 0, #041007 70%, #020603 100%);
  box-shadow: 0 0 0 2px #0c0e0b, inset 0 0 40px rgba(0, 0, 0, 0.8), 0 0 28px rgba(77, 255, 122, 0.12);
  font-family: var(--mono-font);
  color: var(--phosphor);
  text-shadow: 0 0 5px rgba(77, 255, 122, 0.4);
}

[data-theme="fallout"] .contact-form .salutation {
  color: var(--phosphor-dim);
  letter-spacing: 0.08em;
}

[data-theme="fallout"] .contact-form label {
  font-family: var(--mono-font);
  color: var(--phosphor);
  letter-spacing: 0.12em;
}

[data-theme="fallout"] .contact-form .req {
  color: var(--amber);
}

[data-theme="fallout"] .contact-form input,
[data-theme="fallout"] .contact-form textarea {
  border-bottom: 1px dashed var(--phosphor-dim);
  background: rgba(77, 255, 122, 0.04);
  color: var(--phosphor);
  caret-color: var(--phosphor);
  font-family: var(--mono-font);
  font-size: 1.1rem;
}

[data-theme="fallout"] .contact-form input:focus-visible,
[data-theme="fallout"] .contact-form textarea:focus-visible {
  background: rgba(77, 255, 122, 0.09);
}

[data-theme="fallout"] .btn-transmit {
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border: 2px solid var(--phosphor);
  background: transparent;
  color: var(--phosphor);
  font-family: var(--mono-font);
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-shadow: inherit;
}

[data-theme="fallout"] .btn-transmit:hover,
[data-theme="fallout"] .btn-transmit:focus-visible {
  background: var(--phosphor);
  color: var(--void);
  text-shadow: none;
}

[data-theme="fallout"] .form-ok {
  color: var(--phosphor);
}

[data-theme="fallout"] .form-error {
  color: var(--amber);
}

[data-theme="fallout"] .contact-aside {
  padding: 1.5rem;
}

/* ---- Footer: rusted strip with a hazard tick row and a blinking cursor ---- */
[data-theme="fallout"] .site-footer {
  border-top: 3px solid var(--rust);
  padding-top: 10px;
}

[data-theme="fallout"] .footer-brand {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-theme="fallout"] .footer-nav {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

[data-theme="fallout"] .footer-nav a {
  text-decoration: none;
}

[data-theme="fallout"] .footer-nav a:hover,
[data-theme="fallout"] .footer-nav a:focus-visible {
  color: var(--amber);
  text-decoration: underline;
}

[data-theme="fallout"] .footer-line {
  font-family: var(--mono-font);
  color: var(--phosphor);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="fallout"] .footer-line .crt-cursor {
  animation-duration: 1.4s;
}

[data-theme="fallout"] .footer-small {
  border-top: 1px solid rgba(107, 58, 34, 0.7);
  color: #cfc7ae;
}