/* ════════════════════════════════════════════════════════════════════════
   THEATER SKIN - Stage 1
   ────────────────────────────────────────────────────────────────────────
   Re-paints the legacy chrome (body, headings, header, sidebar, gallery
   cards, footer) in the theater palette so pages like /all, /help,
   /blog feel consistent with /theater.html. Loaded AFTER base.css from
   _includes/style.html so it wins the cascade without modifying the
   base stylesheet.

   The theater page itself (theater.html) overrides {% block styler %}
   and skips _includes/style.html entirely, so this file does not load
   there - no conflict.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Special+Elite&family=Roboto+Mono:wght@400;500&family=Bungee&display=swap');

:root {
  --sky-top: #2a1a3e;
  --sky-mid: #6a3a4a;
  --sky-warm: #d97a4a;
  --sky-glow: #f4b06a;
  --horizon: #3a2620;
  --asphalt: #0c0a14;

  --steel: #2a2826;
  --steel-light: #4a4644;
  --steel-deep: #1a1816;
  --rivet: #14100c;
  --enamel: #c8c2a0;
  --bulb-yellow: #ffd24a;
  --cream: #f0e8d4;
  --hi-vis: #ff8a3a;
  --rust: #a04828;
  --ink: #14101a;
}

/* ── Body / page background ─────────────────────────────────────────── */
html {
  background-color: var(--sky-top);
}
body {
  background:
    radial-gradient(ellipse 1000px 200px at 50% 90%, rgba(217,122,74,.18), transparent 70%),
    linear-gradient(180deg,
      var(--sky-top) 0%,
      #4a2640 30%,
      var(--sky-mid) 55%,
      var(--sky-warm) 78%,
      var(--sky-glow) 88%,
      var(--horizon) 94%,
      var(--asphalt) 100%);
  background-attachment: fixed;
  color: var(--cream);
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.55;
}

/* ── Title bar (top of every page) ──────────────────────────────────── */
.title-area {
  background: linear-gradient(180deg, rgba(20,16,26,.92) 0%, rgba(42,26,62,.85) 100%);
  border-bottom: 1px solid rgba(240,232,212,.10);
  padding: 10px 20px;
  /* Put the wordmark and the #header bar on one line. The legacy
     markup stacks them as two block divs by default. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.title-area .head-titles,
.title-area .head-title {
  flex: 0 0 auto;
  line-height: 1;
}
.title-area #header {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}
.title-area #header .inner {
  padding: 0;
}
.head-titles a,
.head-title a {
  /* Restrained label rather than a marquee. Reads as a small chapter
     header at the top of the page; the theatrical wordmark lives in
     the hero of /theater.html, not here.
     The !important + reset of -webkit-text-stroke / background-clip /
     background-image is to undo base.css line 247-261, which paints
     the wordmark as transparent text filled with a JPG and stroked
     in pink. */
  font-family: 'Roboto Mono', ui-monospace, monospace !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--cream) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  -webkit-text-fill-color: var(--cream) !important;
}
.head-titles a:hover,
.head-title a:hover { color: var(--bulb-yellow); }

#header {
  background: transparent;
  margin: 0;
  padding: 0;
}
#header .inner {
  padding: 6px 24px;
}
#header a {
  color: var(--cream);
  text-decoration: none;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#header a:hover {
  color: var(--bulb-yellow);
}
#searchform input[type="text"] {
  background: rgba(20,16,26,.6);
  border: 1px solid rgba(240,232,212,.25);
  color: var(--cream);
  padding: 4px 8px;
  font-family: 'Roboto Mono', monospace;
}

/* ── Content panels (.mgroup / .mtitle / .mbody) ────────────────────── */
.mgroup {
  margin: 22px 0;
}
.mtitle {
  border-bottom: 1px dashed rgba(240,232,212,.18);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.mtitle h2 {
  font-family: 'Anton', sans-serif !important;
  font-size: 32px !important;
  font-weight: 400;
  color: var(--cream);
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0;
}
/* The rainbowize() script wraps every character of h1/h2 in an inline-
   styled span. Force them back to one cream color so the headings
   match the theater palette. */
h1 span[style*="color"],
h2 span[style*="color"] {
  color: var(--cream) !important;
}
h1, h2 {
  color: var(--cream);
  font-family: 'Anton', sans-serif;
}
h3 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  color: var(--bulb-yellow);
  letter-spacing: 0.04em;
}

.mbody {
  font-size: 14px;
  color: rgba(240,232,212,.9);
  /* base.css line 1114-1125 paints a white linear-gradient as the
     background-image of .mbody, which makes cream text invisible.
     Drop it so the dusk page background shows through. */
  background-image: none !important;
  background: transparent !important;
}
.mbody p,
.mbody .txt {
  margin-bottom: 12px;
  color: var(--cream);
}
.mbody b,
.mbody strong {
  color: var(--bulb-yellow);
  font-weight: 500;
}
/* The generator-page section title row (".mtitle h2" inside ".mtitle")
   in base.css has a translucent dark background - fine on white, but
   on our dusk it just adds a smudge. Clear it. */
.mtitle h2 {
  background: transparent !important;
}

/* ── Links (defaults; specific buttons keep their own styles) ───────── */
a {
  color: var(--bulb-yellow);
}
a:hover {
  color: var(--hi-vis);
}

/* ── Gallery / unitdesign cards ─────────────────────────────────────── */
div.unitdesign {
  background: rgba(20,16,26,.45);
  border: 1px solid rgba(74,44,94,.7);
  padding: 8px;
  margin: 0 6px 14px 0;
  transition: border-color .12s ease, transform .12s ease;
}
div.unitdesign:hover {
  border-color: var(--bulb-yellow);
  transform: translateY(-2px);
}
.unitdesign-part img {
  display: block;
}
.unitdesign-part a,
.unitdesign a {
  color: var(--cream);
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.unitdesign-part a:hover,
.unitdesign a:hover {
  color: var(--bulb-yellow);
  border-bottom-color: var(--bulb-yellow);
}
.unitdesign.more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px dashed rgba(240,232,212,.25);
  min-height: 175px;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.unitdesign.more a {
  color: var(--bulb-yellow);
  border: 1px solid var(--bulb-yellow);
  padding: 6px 14px;
}
.unitdesign.more a:hover {
  background: var(--bulb-yellow);
  color: var(--asphalt);
}

/* ── Share page (share/show2.html) ──────────────────────────────────
   The .description block is a museum placard under the framed media -
   classically dark text on cream paper. show.css originally set
   #eee on black which gets that right; theater-skin's cream h1 rule
   then re-painted the title cream-on-cream so it disappeared.
   Restore the placard look: warmer paper, ink type, dark Anton title.
   The h1 overrides here have higher specificity than the global
   cream-on-h1 rules. */
.description {
  background: #e8dcc0 !important;
  color: var(--ink) !important;
  border: 1px solid #a8a080 !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.5) !important;
  font-family: 'Special Elite', monospace !important;
  font-size: 13px !important;
  padding: 14px 22px !important;
}
.description h1 {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  color: var(--ink) !important;
  /* The global cream h1 rule applies via inheritance to the rainbowize
     spans inside; an explicit color here doesn't reach them. The
     selector below catches the rainbow chars directly. */
}
.description h1 a {
  color: var(--ink) !important;
  text-decoration: none;
}
.description h1 a:hover { color: var(--rust) !important; }
/* Beat the rainbowize char-spans inside the placard h1 back to ink.
   Two selectors so both the [style*="color"] match AND any descendant
   span gets the ink color. */
.description h1 span,
.description h1 span[style*="color"],
.description h1 a span,
.description h1 a span[style*="color"] {
  color: var(--ink) !important;
}
.description p {
  color: rgba(20,16,26,.7);
  margin: 2px 0;
  font-family: 'Special Elite', monospace;
}
.description p a {
  color: var(--rust) !important;
  text-decoration: none;
  border-bottom: 1px dotted var(--rust);
}
.description p a:hover { color: var(--ink) !important; border-bottom-color: var(--ink); }
/* show.css gives #download_area text-align: right, which pushes the
   button to the right edge of the placard. Center it. */
#download_area {
  text-align: center !important;
  margin-top: 8px;
}
#download_link {
  display: inline-block;
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: none !important;
  border-radius: 0 !important;
  font: 500 12px 'Roboto Mono', monospace !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 16px !important;
  margin: 0 !important;
}
#download_link:hover { background: var(--rust) !important; }

/* ── Sidebar (legacy #side block) ───────────────────────────────────── */
#side {
  /* base.css forces #side { background: rgba(255,255,255,1) } - clear it. */
  background: transparent !important;
  color: var(--cream);
  padding: 12px 8px;
}
#side .inner > p {
  background: rgba(20,16,26,.55) !important;
  border: 1px solid rgba(240,232,212,.15);
  padding: 12px 14px !important;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px !important;
  color: rgba(240,232,212,.8) !important;
  letter-spacing: 0.04em;
}
#side .inner > p span,
#side .inner > p a {
  color: var(--cream) !important;
  background: transparent !important;
}
#side .inner > p a {
  color: var(--bulb-yellow) !important;
  border-bottom: 1px dotted var(--bulb-yellow);
  text-decoration: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ── Footer (#footer .copyline) ─────────────────────────────────────── */
#footer {
  background: linear-gradient(180deg, transparent 0%, rgba(20,16,26,.8) 60%);
  margin-top: 60px;
  padding: 28px 24px;
  border-top: 1px solid rgba(240,232,212,.15);
}
#footer .copyline,
#footer .inner {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,232,212,.5);
  text-align: center;
}
#footer a {
  color: rgba(240,232,212,.7);
  text-decoration: none;
  margin: 0 6px;
}
#footer a:hover {
  color: var(--bulb-yellow);
}