/* hankelsner.com — FOR HOME (theater)
   System: "dark room, lit rule." The work side is paper and ink; this side is the same
   drawing office with the lights down and one warm key light on the gear.

   Loaded AFTER css/site.css. Everything here is scoped under body.theater so it can
   never reach index.html or work.html. It overrides COLOR, not STRUCTURE:
   .wrap stays 1080px, the header stays 60px, buttons keep their 1.5px/3px shape. */

/* ---------- the ground ---------- */
body.theater {
  /* re-point the shared tokens site.css already draws with — the header, footer,
     buttons and modal follow the page into the dark automatically */
  --paper: #0a0b0c;   /* void — never pure black, it crushes the falloff */
  --ink:   #f2f0ec;   /* chalk — warm white, same family as the paper side */
  --muted: #9aa2a8;   /* grey body copy */
  --accent: #ff7a1a;  /* ember — the safety-orange lifted for a dark ground */
  --line:  #24282c;   /* hairline */
  --band:  #121417;   /* deck */
  --label: #121417;
  --shadow: none;

  /* theater-only tokens */
  --void: #0a0b0c;
  --deck: #121417;
  --well: #191c1f;
  --hair: #24282c;
  --hair-2: #33383d;
  --ember: #ff7a1a;
  --ember-deep: #e4570a;                    /* inherited verbatim from the work side */
  --ember-wash: rgba(255, 122, 26, 0.13);
  --ember-line: rgba(255, 122, 26, 0.30);
  --chalk: #f2f0ec;
  --grey: #9aa2a8;
  --dim: #8f979e;
  --mat: #fcfcfa;

  background: var(--void);
  color: var(--grey);
  overflow-x: hidden;
}

body.theater main { display: block; }
body.theater img { max-width: 100%; }

/* the two hairline weights that exist on this page */
body.theater hr { border: 0; }

/* ---------- header ---------- */
body.theater header.site {
  background: rgba(10, 11, 12, 0.92);
  border-bottom: 1px solid var(--hair);
}
body.theater .wordmark { color: var(--chalk); }
body.theater .wordmark em { color: var(--ember-deep); }   /* the signature dot */
body.theater nav.main a { color: var(--dim); }
body.theater nav.main a:hover,
body.theater nav.main a:focus-visible { color: var(--ember); }
body.theater nav.main a.back { color: var(--grey); }

/* ---------- links + buttons ---------- */
body.theater a { color: var(--chalk); text-decoration-color: var(--ember); }
body.theater a:hover { color: var(--ember); }
body.theater :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

body.theater .btn { border-color: var(--ember); color: var(--ember); background: transparent; }
body.theater .btn:hover { background: var(--ember); border-color: var(--ember); color: var(--void); }
body.theater .btn.solid { background: var(--ember); border-color: var(--ember); color: var(--void); }
body.theater .btn.solid:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--void); }

/* ---------- THE LIT RULE — the only structural divider on this page ----------
   brightest at centre, dead at both edges: the page reads lit, not drawn. */
body.theater .rule {
  height: 1px;
  border: 0;
  margin: 44px 0;
  opacity: 0.7;
  background: linear-gradient(to right,
    transparent 0%,
    var(--ember-line) 22%,
    var(--ember) 50%,
    var(--ember-line) 78%,
    transparent 100%);
}

/* ---------- type ---------- */
body.theater .sig {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember);
  margin-bottom: 14px;
}
body.theater h2 {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  letter-spacing: -0.02em; line-height: 1.1; color: var(--chalk);
}
body.theater h3 {
  font-family: var(--disp); font-weight: 800;
  font-size: 1.28rem; letter-spacing: -0.012em; color: var(--chalk); line-height: 1.25;
}
body.theater p { color: var(--grey); }
body.theater p strong, body.theater strong { color: var(--chalk); font-weight: 600; }
body.theater .note {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--dim); line-height: 1.8;
}
body.theater section { padding: 72px 0; }
body.theater .lede { font-size: 1.2rem; line-height: 1.65; color: var(--grey); max-width: 56ch; }
body.theater .prose { max-width: 62ch; }
body.theater .prose p + p { margin-top: 14px; }

/* ---------- hero ---------- */
body.theater .theater-hero {
  position: relative;
  padding: 92px 0 72px;
  overflow: hidden;
}
body.theater .theater-hero::before {
  /* one broad key light, anchored partly off-canvas, bleeding from above the fold */
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 150%;
  background: radial-gradient(58% 42% at 34% 28%, var(--ember-wash), transparent 68%);
  pointer-events: none;
}
body.theater .theater-hero::after {
  /* grain — large soft radials band on 8-bit panels; this is the difference
     between "lit room" and "cheap gradient" */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.02;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 2px),
              repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 3px);
}
body.theater .theater-hero .wrap { position: relative; z-index: 1; }
body.theater .theater-hero h1 {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(2.6rem, 7.2vw, 5rem);
  line-height: 0.98; letter-spacing: -0.03em;   /* light-on-dark optically widens */
  color: var(--chalk); max-width: 14ch;
}
body.theater .theater-hero h1 .dot { color: var(--ember); }
body.theater .theater-hero .lede { margin-top: 26px; }
body.theater .theater-hero .cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

body.theater .caplet {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  list-style: none;
}
body.theater .caplet li::before { content: "· "; color: var(--ember); }

/* ---------- the plate ----------
   All five product renders (and the schematic) are light drafting plates on paper,
   so every one of them gets the --mat cut: a paper drawing pinned up in a dark room.
   The ember pool sits UNDER the mat as spill, not behind a white square. */
body.theater .plate {
  position: relative;
  background: var(--mat);
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  padding: 28px;
  box-shadow: 0 18px 60px rgba(255, 122, 26, 0.08), 0 2px 10px rgba(0, 0, 0, 0.5);
}
body.theater .plate img {
  display: block; width: 100%; height: auto;
  object-fit: contain;
}
body.theater .plate.tall img { max-height: 460px; margin: 0 auto; width: auto; }

/* the floor pool the plate stands on */
body.theater .pool {
  position: relative;
  padding-bottom: 26px;
}
body.theater .pool::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 90px;
  background: radial-gradient(58% 60% at 50% 0%, var(--ember-wash), transparent 70%);
  pointer-events: none;
}

/* ---------- spec rows — every claim on this page is a spec row ---------- */
body.theater .spec { margin: 0; }
body.theater .spec > div {
  display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px 18px; padding: 10px 0; border-top: 1px solid var(--hair);
}
body.theater .spec > div:first-child { border-top: 0; }
body.theater .spec dt {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  line-height: 1.9;
}
body.theater .spec dd {
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.75;
  letter-spacing: 0.04em; color: var(--grey); margin: 0;
}
body.theater .spec .lit dt { color: var(--ember); }
body.theater .spec .lit dd { color: var(--chalk); }

/* ---------- two-column blocks ---------- */
body.theater .split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px; align-items: start;
}
body.theater .split.wide-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

/* ---------- the cue block ---------- */
body.theater .cue {
  background: var(--well); border-radius: 4px; padding: 26px 28px;
}
body.theater .cue .cue-name {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember);
  margin-bottom: 16px;
}
body.theater .cue ol { list-style: none; margin: 0; }
body.theater .cue li {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--chalk); padding: 9px 0; border-top: 1px solid var(--hair);
}
body.theater .cue li:first-child { border-top: 0; }
body.theater .cue li span { color: var(--dim); }

/* ---------- command list (the remote) ---------- */
body.theater .commands { list-style: none; margin: 0; max-width: 46ch; }
body.theater .commands li {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--grey); padding: 9px 0; border-top: 1px solid var(--hair);
}
body.theater .commands li:first-child { border-top: 0; }
body.theater .commands li b { color: var(--chalk); font-weight: 600; }

/* ---------- schematic mat ---------- */
body.theater .schematic {
  background: var(--mat); border: 1px solid var(--hair-2); border-radius: 4px;
  padding: 28px;
  box-shadow: 0 22px 70px rgba(255, 122, 26, 0.09), 0 2px 10px rgba(0, 0, 0, 0.5);
}
body.theater .schematic img { display: block; width: 100%; height: auto; }
body.theater .schematic + .note { margin-top: 16px; }

/* ---------- catalog ---------- */
body.theater .flagship {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px; align-items: start;
}
body.theater .price {
  font-family: var(--mono); font-weight: 600; font-size: 1.15rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ember);
}
body.theater .tagline { font-size: 1rem; color: var(--grey); max-width: 46ch; }
body.theater .prodhead { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
body.theater .buy { margin-top: 22px; display: inline-block; }

body.theater .nodes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px;
}
body.theater .node {
  border-top: 1px solid var(--hair-2);   /* a top hairline, never a full border */
  padding-top: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
body.theater .node .plate { padding: 20px; }
body.theater .node h3 { font-size: 1.15rem; }
body.theater .node .buy { margin-top: auto; align-self: flex-start; }

/* ---------- closing ---------- */
body.theater .closing {
  position: relative; overflow: hidden;
  min-height: 46vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 84px 0;
  background: var(--void);
}
body.theater .closing::before {
  content: ""; position: absolute; inset: auto -20% -30% -20%; height: 110%;
  background: radial-gradient(50% 46% at 50% 100%, var(--ember-wash), transparent 70%);
  pointer-events: none;
}
body.theater .closing::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.02;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 2px),
              repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 3px);
}
body.theater .closing .wrap { position: relative; z-index: 1; }
body.theater .closing blockquote {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.12;
  letter-spacing: -0.025em; color: var(--chalk);
  max-width: 20ch; margin: 0 auto;
}
body.theater .closing blockquote .dot { color: var(--ember); }
body.theater .closing .attrib {
  margin-top: 34px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey);
  display: flex; gap: 10px 22px; flex-wrap: wrap; justify-content: center;
}
body.theater .closing .attrib a { text-decoration: none; }
body.theater .closing .backlink { margin-top: 26px; }

/* ---------- footer ---------- */
body.theater footer.site {
  border-top: 2px solid var(--ember-deep);   /* the work side's registration colour signs the page */
  background: var(--void);
}
body.theater footer.site .who { color: var(--chalk); }
body.theater footer.site .mail { color: var(--grey); }
body.theater footer.site nav a { color: var(--dim); }
body.theater footer.site nav a:hover { color: var(--ember); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  body.theater .split,
  body.theater .split.wide-left,
  body.theater .flagship { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 760px) {
  body.theater .theater-hero { padding: 60px 0 48px; }
  body.theater section { padding: 56px 0; }
  body.theater .rule { margin: 40px 0; }
  body.theater .spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body.theater .spec dt { line-height: 1.6; }
  body.theater .plate, body.theater .schematic { padding: 16px; }
  body.theater .nodes { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  body.theater * { transition: none !important; animation: none !important; }
}

/* Call button follows the page into the dark: ember on void, still the primary. */
body.theater .btn.call { background: var(--ember); border-color: var(--ember); color: var(--void); }
body.theater .btn.call:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--void); }

/* Radio strip + popup on the dark page. */
body.theater .radiobar { background: var(--deck); border-bottom: 1px solid var(--ember-line); color: var(--chalk); }
body.theater .radiobar em { color: var(--ember); }
body.theater .radiobar .dotlive { background: var(--ember); box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.7); }
body.theater .modal { background: var(--well); color: var(--chalk); }
body.theater .modal h3 { color: var(--chalk); }
body.theater .modal p, body.theater .modal li { color: var(--dim); }
body.theater .modal.radio .rk { color: var(--ember); }
body.theater .modal.radio li { border-bottom-color: rgba(255, 122, 26, 0.16); }
body.theater .modal.radio li::before { color: var(--ember); }

/* ---------- capabilities: what I can put under control ---------- */
body.theater .caps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px 34px; margin-top: 34px;
}
body.theater .capgroup h3 {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--ember); padding-bottom: 8px;
  border-bottom: 1px solid var(--ember-line); margin-bottom: 12px;
}
body.theater .capgroup ul { list-style: none; }
body.theater .capgroup li {
  color: var(--dim); font-size: 0.97rem; line-height: 1.5; padding: 5px 0;
}

/* The personal note: warmer and set apart from the product copy around it. */
body.theater .lede.personal {
  border-left: 2px solid var(--ember-line);
  padding-left: 18px; margin-top: 22px;
  font-size: 1.02rem; color: var(--dim);
}
body.theater .lede.personal strong { color: var(--chalk); }