/* RejectedAlts Studios - site stylesheet.
   Tokens copied from brand-export/tokens.css; recipes from brand-export/components.md.
   Dark is canonical. Square corners everywhere. Red stays under 10% of any surface.
   Contrast (fix round R1): every text under 18px uses Steel 300 #9CA1AA or lighter (7.4:1 on the canvas,
   7.0:1 on the surface); Steel 400 #6E747E (4.3:1) is no longer used for text. Buttons: white on Ember Deep
   #C00000 (6.5:1), hover Ember 600 #E00000 (5.0:1) - the kit's white-on-#FF0000 button at 13px is 4.0:1,
   which the kit's own contrast table limits to 18px and up. Creed separators use Ember Glow #FF4A4A (6.1:1).
   Fix round R2: print overrides every hard-coded light text to Steel 900 (#0E0F12 on white 17.4:1); under 400px the
   side padding drops to 16px, every grid track may shrink to the container width, buttons and the status pill wrap. */

:root {
  /* Ember - primary */
  --ember-50: #FFF1F1;
  --ember-100: #FFDCDC;
  --ember-200: #FFB8B8;
  --ember-300: #FF8A8A;
  --ember-400: #FF4A4A;
  --ember-500: #FF0000;
  --ember-600: #E00000;
  --ember-700: #C00000;
  --ember-800: #9A0008;
  --ember-900: #7A0010;
  --ember-950: #4A0009;

  /* Steel - neutrals */
  --steel-0: #FFFFFF;
  --steel-50: #F4F5F7;
  --steel-100: #E5E7EA;
  --steel-200: #C9CCD2;
  --steel-300: #9CA1AA;
  --steel-400: #6E747E;
  --steel-500: #4B5058;
  --steel-600: #33373D;
  --steel-700: #23262B;
  --steel-800: #16181C;
  --steel-900: #0E0F12;
  --steel-950: #0A0A0C;

  /* Support - status only */
  --status-success: #2ED573;
  --status-warning: #FFB020;
  --status-info: #38BDF8;

  /* Semantic - dark (default) */
  --bg-canvas: #050506;
  --bg-surface: #0E0F12;
  --bg-raised: #16181C;
  --border: #23262B;
  --border-accent: #7A0010;
  --text-primary: #FFFFFF;
  --text-secondary: #9CA1AA;
  --text-muted: #6E747E;
  --accent: #FF0000;
  --accent-hover: #FF4A4A;
  --accent-press: #C00000;
  --on-accent: #FFFFFF;

  /* Type */
  --font-display: 'Chakra Petch', 'Segoe UI', Arial, sans-serif;
  --font-body: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

/* Fonts are self-hosted (OFL 1.1; licence texts beside the files in assets/fonts/). The site makes no
   third-party request. Files are the latin subsets served by Google Fonts for these six faces. */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; src: url('fonts/ChakraPetch-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; src: url('fonts/ChakraPetch-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; src: url('fonts/ChakraPetch-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; src: url('fonts/IBMPlexMono-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; src: url('fonts/IBMPlexMono-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; src: url('fonts/IBMPlexMono-600.woff2') format('woff2'); font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg-canvas);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 64px);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
}
img, svg { display: block; max-width: 100%; height: auto; border-radius: 0; }
a {
  color: var(--steel-100);
  text-decoration: underline;
  text-decoration-color: var(--ember-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease-out;
}
a:hover { color: var(--ember-400); }
:focus-visible { outline: 2px solid var(--ember-400); outline-offset: 3px; }
.skip {
  position: absolute; left: 24px; top: -100px;
  background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--ember-500);
  padding: 12px 18px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; z-index: 10;
}
.skip:focus { top: 16px; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text-primary);
  text-transform: uppercase;
  margin: 0 0 20px;
}
h1 { font-size: clamp(40px, 7.4vw, 118px); line-height: .9; font-weight: 700; letter-spacing: -.005em; }
h1.page { font-size: clamp(30px, 5vw, 64px); line-height: 1; letter-spacing: .01em; }
h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.05; font-weight: 700; letter-spacing: .01em; }
h2.sub { font-size: clamp(22px, 2.6vw, 32px); margin-top: 56px; }
h3 { font-size: clamp(17px, 2vw, 21px); line-height: 1.25; font-weight: 600; letter-spacing: .04em; margin-top: 40px; }
p { margin: 0 0 20px; text-wrap: pretty; }
strong { color: var(--steel-100); font-weight: 600; }
code { font-family: var(--font-body); color: var(--steel-100); background: var(--bg-raised); padding: 1px 6px; font-size: .95em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0; }

.prose { max-width: 720px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 20px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--steel-300); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 16px;
}
.meta { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-secondary); }
.lede { font-size: 18px; max-width: 640px; color: var(--steel-200); }

/* ---------- header ---------- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding: 28px 48px; border-bottom: 1px solid var(--steel-800);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text-primary); min-height: 44px; }
.brand:hover { color: var(--text-primary); }
.brand img { width: 38px; height: 38px; }
.wordmark { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.wordmark span { color: var(--text-secondary); font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: .22em; margin-left: 10px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--steel-300);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text-primary); }

/* ---------- layout ---------- */
.section { padding: 120px 48px; }
.section.tight { padding: 72px 48px; }
.section + .section { border-top: 1px solid var(--steel-800); }
.container { max-width: 1120px; margin: 0 auto; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 64px; }
.two-col > * { min-width: 0; }
.hazard { height: 14px; background-image: repeating-linear-gradient(135deg, #FF0000 0 20px, #0A0A0C 20px 40px); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; min-height: 72vh; display: flex; align-items: center; }
.hero .container { position: relative; }
.bloom {
  position: absolute; width: 720px; height: 720px; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,0,0,.22), rgba(255,0,0,0) 68%);
  pointer-events: none; animation: raBloom 7s ease-in-out infinite;
}
.hero-mark { width: 112px; height: 112px; margin-bottom: 32px; }
.status {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--steel-300);
  border: 1px solid var(--steel-700); padding: 10px 16px;
}
.status .dot { width: 8px; height: 8px; background: var(--ember-500); animation: raBlink 2.4s steps(1, end) infinite; }
.creed {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 32px 0;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--steel-300); white-space: nowrap;
}
.creed .sep { color: var(--ember-400); }
.ghost { position: absolute; right: -8%; top: 50%; width: 46%; max-width: 560px; transform: translateY(-50%); opacity: .045; pointer-events: none; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 16px 30px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  border: 1px solid var(--ember-700); background: var(--ember-700); color: #FFFFFF;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.btn:hover { background: var(--ember-600); border-color: var(--ember-600); color: #FFFFFF; }
.btn:active { background: var(--ember-800); border-color: var(--ember-800); }
.btn.secondary { background: transparent; border-color: var(--steel-700); color: var(--steel-100); }
.btn.secondary:hover { background: var(--steel-900); border-color: var(--ember-500); color: #FFFFFF; }
.btn.disabled { background: transparent; border-color: var(--steel-700); color: var(--steel-300); cursor: default; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.card { background: var(--bg-surface); border: 1px solid var(--border); padding: 26px; min-width: 0; }
.card h3, .footer-legal p, .lede a, .prose a { overflow-wrap: anywhere; }
.card.featured { border-left: 3px solid var(--ember-500); }
.card-head {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-secondary);
}
.card-head .right { color: var(--steel-300); text-align: right; }
.card h2, .card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
blockquote { margin: 0 0 20px; padding: 4px 0 4px 22px; border-left: 3px solid var(--ember-500); color: var(--steel-100); }
blockquote p:last-child { margin-bottom: 0; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 0 0 28px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.6; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid var(--steel-700); }
th { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-secondary); background: var(--bg-surface); }
td { color: var(--steel-200); }

/* ---------- legal pages ---------- */
.legal h2 { font-size: clamp(20px, 2.4vw, 28px); margin-top: 56px; }
.legal h3 { margin-top: 32px; }
.toc { background: var(--bg-surface); border: 1px solid var(--border); padding: 22px 26px; margin: 0 0 40px; }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }
.toc a { text-decoration: none; color: var(--steel-200); }
.toc a:hover { color: var(--ember-400); }
.notice { border: 1px solid var(--border); border-left: 3px solid var(--ember-500); background: var(--bg-surface); padding: 18px 22px; margin: 0 0 28px; color: var(--steel-100); }
.notice p:last-child { margin-bottom: 0; }

/* ---------- press ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 24px; margin: 0 0 40px; }
.swatch { background: var(--bg-surface); border: 1px solid var(--border); padding: 0 0 18px; }
.swatch .tile { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 28px; }
.swatch .tile.on-ember { background: var(--ember-500); }
.swatch .tile.on-white { background: #FFFFFF; }
.swatch .tile img { width: 64%; height: auto; }
.swatch .label { padding: 14px 18px 0; font-size: 12px; letter-spacing: .12em; }
.swatch .label strong { display: block; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; margin-bottom: 4px; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; margin: 0 0 40px; }
.art-grid figure { margin: 0; background: var(--bg-surface); border: 1px solid var(--border); }
.art-grid figcaption { padding: 14px 18px; font-size: 12px; letter-spacing: .12em; }
.art-grid figcaption strong { display: block; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; margin-bottom: 4px; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--steel-800); padding: 48px 48px 56px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
}
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--steel-300); }
.footer-nav a:hover { color: var(--text-primary); }
.footer-legal p { margin: 0 0 8px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.footer-legal a { color: var(--steel-200); }

/* ---------- motion ---------- */
@keyframes raBlink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: .25; } }
@keyframes raBloom {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bloom, .status .dot { animation: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .site-header { padding: 20px 24px; }
  .section { padding: 72px 24px; }
  .section.tight { padding: 48px 24px; }
  .site-footer { padding: 40px 24px; }
  .two-col { gap: 40px; }
  .creed { white-space: normal; }
  .toc ol { columns: 1; }
  .hero { min-height: 0; }
  .ghost { display: none; }
}
/* 320 CSS px (the narrowest phones): 16px gutters leave 288px; nothing fixed-width is wider than that. */
@media (max-width: 400px) {
  .site-header { padding: 16px; gap: 12px 20px; }
  .brand { gap: 10px; }
  .site-nav { gap: 0 18px; }
  .section { padding: 56px 16px; }
  .section.tight { padding: 40px 16px; }
  .site-footer { padding: 32px 16px; }
  .two-col { gap: 32px; }
  .cards, .swatches, .art-grid { gap: 16px; }
  .card { padding: 20px; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; padding: 14px 16px; white-space: normal; }
  .status { white-space: normal; max-width: 100%; }
  .hero-mark { width: 88px; height: 88px; }
  .toc { padding: 18px; }
  .notice { padding: 16px; }
  th, td { padding: 10px; }
}

/* ---------- print (legal pages come out readable on paper) ---------- */
@media print {
  :root {
    --bg-canvas: #FFFFFF; --bg-surface: #F4F5F7; --bg-raised: #FFFFFF; --border: #C9CCD2;
    --text-primary: #0E0F12; --text-secondary: #33373D; --text-muted: #4B5058;
  }
  body { background-image: none; font-size: 12pt; }
  .site-nav, .footer-nav, .hazard, .bloom, .actions, .skip, .ghost { display: none; }
  a { color: #C00000; text-decoration: none; }
  td { color: #0E0F12; }
  /* These selectors carry hard-coded light Steel values for the dark screen; on white they are 1.2-1.6:1. */
  strong, .notice, blockquote, .lede, .toc a, .footer-legal a, .footer-legal p, code, .creed, .status,
  h1, h2, h3, .eyebrow, .meta, .card-head, .card-head .right, .wordmark, .wordmark span, .site-footer, .services,
  .swatch .label, .art-grid figcaption, .btn.disabled, .prose li::marker, body { color: #0E0F12; }
  .btn.secondary, .btn.disabled { color: #0E0F12; border-color: #C9CCD2; }
}