/* ============================================================
   TSR — THE SCREENWRITER'S ROOM · storefront stylesheet (2026-10-12, step 1, closed)
   The SRV register carried into the dark: SRV's SCREENING ROOM near-black and golden-hour
   brass become the whole house here, and the screenplay page (cream paper, Courier, the
   industry indents) is the one motif. No webfont, no CDN, no external request: system type only.

   CONTRAST, COMPUTED (WCAG AA, body >= 4.5:1)
     --text   #F4EDE0 on --night #100D0B   17.2:1 · on --panel #1C1713  15.4:1
     --soft   #CDBFA6 on --night           11.0:1 · on --panel          9.9:1
     --brass-lit #E0B45F on --night         9.9:1 · on --panel          8.9:1
     --paper-ink #1D1A16 on --paper #F6F0E2 15.9:1
     button: --night on --brass-lit         9.9:1
   DARK AND LIGHT SAFE: the page declares color-scheme: dark and paints every surface itself,
   so a reader's light or dark system setting renders the same page.
   ============================================================ */
:root {
  color-scheme: dark;
  --night: #100D0B;
  --screening: #171310;
  --panel: #1C1713;
  --panel-2: #241E18;
  --text: #F4EDE0;
  --soft: #CDBFA6;
  --brass: #C08A2E;
  --brass-lit: #E0B45F;
  --rule: rgba(224, 180, 95, 0.28);
  --paper: #F6F0E2;
  --paper-ink: #1D1A16;
  --paper-soft: #5A4E3E;
  --ember: #E08A5A;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --courier: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  --gutter: 16px;
  --measure: 66ch;
  --radius: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0; background: var(--night); color: var(--text);
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7;
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brass-lit); text-underline-offset: 0.18em; }
a:hover { color: var(--text); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 3px; }
h1, h2, h3 { font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; text-wrap: balance; margin: 0 0 0.6em; }
h1 { font-size: clamp(2rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.3rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 44rem; margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--brass-lit); color: var(--night); padding: 0.5rem 1rem; z-index: 1000; }
.skip-link:focus { left: var(--gutter); }

/* ---------- the slug: the section kicker, set as a scene heading ---------- */
.slug {
  display: block; font-family: var(--courier); font-size: 0.82rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brass-lit); margin: 0 0 1rem;
}
.lede { font-size: 1.2rem; color: var(--soft); max-width: var(--measure); }
.soft { color: var(--soft); }

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--rule); background: var(--screening); }
.masthead { max-width: 68rem; margin: 0 auto; padding: 1rem var(--gutter) 0.4rem; }
.masthead-title { margin: 0; font-size: 1.25rem; letter-spacing: 0.04em; }
.masthead-title a { color: var(--text); text-decoration: none; }
.masthead-sub { margin: 0; font-family: var(--courier); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.site-nav { max-width: 68rem; margin: 0 auto; padding: 0.4rem var(--gutter) 0.8rem; }
.nav-toggle {
  font: 600 0.85rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; color: var(--text); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.55rem 1rem; min-height: 44px; cursor: pointer;
}
.nav-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: none; flex-direction: column; gap: 0.1rem; }
.nav-list.open { display: flex; }
.nav-list a { display: block; padding: 0.55rem 0; color: var(--soft); text-decoration: none; font-family: var(--sans); font-size: 0.95rem; }
.nav-list a[aria-current="page"] { color: var(--brass-lit); }
.nav-list a:hover { color: var(--text); }
.nav-cta { margin-top: 0.4rem; }
.no-js .nav-list { display: flex; }
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.2rem; margin: 0; }
  .nav-list a { padding: 0.3rem 0; font-size: 0.88rem; }
  .nav-cta { margin: 0 0 0 auto; }
}

/* ---------- the call to action (closed: it leads to the notify line only) ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0.75rem 1.4rem; border-radius: 999px; background: var(--brass-lit); color: var(--night);
  font: 700 0.92rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--brass-lit);
}
.cta:hover { background: var(--text); color: var(--night); }
.nav-list a.cta { color: var(--night); padding: 0.5rem 1rem; display: inline-flex; }
.cta--small { min-height: 40px; font-size: 0.78rem; }

/* ---------- bands ---------- */
.band { padding: clamp(3rem, 9vw, 6rem) 0; border-bottom: 1px solid var(--rule); }
.band--panel { background: var(--panel); }
.band--screening { background: var(--screening); }
.center { text-align: center; }
.center .lede, .center p { margin-left: auto; margin-right: auto; }

/* ---------- the hero: the owner's poster, kept, in a screening-room frame ---------- */
.hero { padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(3rem, 9vw, 6rem); text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #2A2016 0%, var(--night) 62%); }
.fade-in { font-family: var(--courier); font-size: 0.85rem; letter-spacing: 0.14em; color: var(--soft); margin: 0 0 1.5rem; }
.poster { margin: 0 auto 2rem; max-width: min(360px, 78vw); }
.poster img { border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, 0.65); }
.welcome { font-style: italic; font-size: 1.6rem; color: var(--soft); margin: 0 0 0.2rem; }
.room-name { font-family: var(--courier); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-lit); font-size: 0.95rem; margin: 0 0 1.8rem; }
.hero h1 { max-width: 20ch; margin: 0 auto 0.6em; }
.hero .promise { font-size: 1.25rem; color: var(--soft); max-width: 38ch; margin: 0 auto 1rem; }
.hero .owner-line { font-size: 1.02rem; line-height: 1.55; color: var(--soft); opacity: .88; max-width: 46ch; margin: 0 auto 1.8rem; font-style: italic; }
.status-line { font-family: var(--courier); font-size: 0.82rem; color: var(--soft); border: 1px dashed var(--rule); border-radius: var(--radius); padding: 0.7rem 1rem; max-width: 44rem; margin: 1.6rem auto 0; }

/* ---------- the progression ---------- */
.progression { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.progression li { counter-increment: step; position: relative; padding: 1rem 1rem 1rem 3.4rem; background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.progression li::before { content: counter(step); position: absolute; left: 1rem; top: 0.95rem; font-family: var(--courier); color: var(--brass-lit); font-size: 1.2rem; }
.progression li.gate { border-color: var(--brass-lit); box-shadow: 0 0 0 1px var(--brass-lit) inset; }
.progression strong { display: block; color: var(--text); }
@media (min-width: 900px) { .progression { grid-template-columns: repeat(5, 1fr); } .progression li { padding: 3rem 1rem 1rem; } .progression li::before { top: 0.9rem; } }

/* ---------- cards and grids ---------- */
.grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.3rem 1.2rem; }
.card h3 { color: var(--text); }
.card p:last-child { margin-bottom: 0; }
.card--flagship { border-color: var(--brass-lit); background: linear-gradient(180deg, #2B2117, var(--panel-2)); }
.flag { display: inline-block; font-family: var(--courier); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--night); background: var(--brass-lit); padding: 0.15rem 0.5rem; border-radius: 3px; margin-bottom: 0.7rem; }
.parts { counter-reset: part; list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.parts li { counter-increment: part; padding: 0.6rem 0.8rem 0.6rem 3rem; position: relative; border-left: 2px solid var(--brass); background: rgba(255, 255, 255, 0.02); }
.parts li::before { content: "Part " counter(part); position: absolute; left: 0.6rem; top: 0.75rem; font-family: var(--courier); font-size: 0.65rem; color: var(--brass-lit); width: 2.2rem; line-height: 1.1; }

/* ---------- the pen ---------- */
.pen { margin: 2rem 0; padding: 1.4rem 1.3rem; border-left: 3px solid var(--brass-lit); background: var(--panel-2); font-size: 1.25rem; font-style: italic; color: var(--text); border-radius: 0 var(--radius) var(--radius) 0; }
.pen p { margin: 0; }
.center .pen { text-align: left; max-width: 44rem; margin-left: auto; margin-right: auto; }

/* ---------- the decision signature ---------- */
.signature { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1.2rem 0; }
.signature li { font-family: var(--courier); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45rem 0.9rem; border: 1px solid var(--brass-lit); border-radius: 999px; color: var(--brass-lit); }
.center .signature { justify-content: center; }

/* ---------- the screenplay page: the one motif ---------- */
.page {
  background: var(--paper); color: var(--paper-ink); font-family: var(--courier);
  font-size: clamp(0.78rem, 3.3vw, 0.98rem); line-height: 1.5; padding: 1.6rem 1.1rem 1.8rem;
  border-radius: 2px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); max-width: 40rem; margin: 1.5rem auto;
}
.page p { margin: 0 0 1em; }
.sp-heading, .sp-transition, .sp-fade { text-transform: uppercase; }
.sp-transition { text-align: right; }
.sp-cue { margin: 0 0 0 36% !important; text-transform: uppercase; }
.sp-paren { margin: 0 0 0 28% !important; }
.sp-dial { margin: 0 14% 1em 20% !important; }
@media (max-width: 420px) { .sp-cue { margin-left: 30% !important; } .sp-dial { margin: 0 4% 1em 12% !important; } }
.manuscript { background: #EFE7D6; color: var(--paper-ink); font-family: var(--serif); padding: 1.4rem 1.2rem; border-radius: 2px; max-width: 40rem; margin: 1.5rem auto; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }
.manuscript p { text-indent: 1.5em; margin: 0 0 0.4em; }
.sample-label { font-family: var(--sans); font-size: 0.8rem; color: var(--paper-soft); font-style: italic; text-indent: 0 !important; border-bottom: 1px solid rgba(29, 26, 22, 0.15); padding-bottom: 0.5rem; margin-bottom: 1rem !important; }
.trail { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 0.7rem; }
.trail li { background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1rem; }
.trail .tag { font-family: var(--courier); font-size: 0.75rem; color: var(--brass-lit); letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 0.25rem; }

/* ---------- FIRST DRAFT ---------- */
.first-draft-mark { font-family: var(--courier); font-weight: 700; letter-spacing: 0.3em; color: var(--brass-lit); font-size: clamp(1.4rem, 6vw, 2.4rem); margin: 0 0 0.5rem; }
.isnt { display: grid; gap: 0.8rem; margin: 1.5rem 0; }
.isnt p { margin: 0; padding: 1rem 1.1rem; background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius); }

/* ---------- the stages ---------- */
.stages { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.6rem; }
.stages li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.8rem; padding: 0.8rem 0.9rem; background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.stages .code { font-family: var(--courier); color: var(--brass-lit); font-size: 0.9rem; }
.stages li.gate-a { border: 2px solid var(--brass-lit); background: #2B2117; }
.stages h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.stages p { margin: 0; color: var(--soft); }

/* ---------- price, rights, tables ---------- */
.price { font-size: 1.3rem; color: var(--text); border: 1px solid var(--brass-lit); border-radius: var(--radius); padding: 1rem 1.2rem; background: var(--panel-2); max-width: 44rem; }
.center .price { margin-left: auto; margin-right: auto; }
.rights-step { border: 2px solid var(--brass-lit); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: var(--panel-2); margin: 1.5rem 0; }
.rights-kicker { font-family: var(--courier); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-lit); margin: 0 0 0.4rem; }
.rights-line { font-size: 1.15rem; margin: 0 0 0.5rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border: 1px solid var(--rule); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 0.9rem; }
caption { text-align: left; padding: 0.8rem 1rem; font-family: var(--serif); font-size: 1.05rem; color: var(--text); }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.9rem; border-top: 1px solid var(--rule); }
th { color: var(--brass-lit); font-weight: 600; }
.status, .gate-status { font-family: var(--courier); font-size: 0.8rem; white-space: nowrap; }
.status--coming, .gate-status { color: var(--soft); }
.status--testing { color: var(--brass-lit); }
.status--proven { color: #9FD3A5; }
.status--declined { color: var(--ember); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--rule); padding: 0.4rem 0; }
.faq-item summary { cursor: pointer; padding: 0.7rem 0; font-size: 1.1rem; color: var(--text); min-height: 44px; }
.faq-item summary:hover { color: var(--brass-lit); }
.faq-answer { color: var(--soft); padding: 0 0 0.8rem; }

/* ---------- footer ---------- */
.site-foot { background: var(--screening); padding: 3rem 0 6.5rem; font-family: var(--sans); font-size: 0.92rem; color: var(--soft); }
.notify { border: 1px solid var(--brass-lit); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 2rem; background: var(--panel); }
.notify-head { font-family: var(--courier); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-lit); }
.notify-mail { font-size: 1.05rem; }
.care-line { border-left: 3px solid var(--ember); padding: 0.6rem 0.9rem; background: rgba(224, 138, 90, 0.08); color: var(--text); }
.foot-brand { font-family: var(--serif); font-size: 1.2rem; color: var(--text); margin: 1.6rem 0 0; }
.foot-cat { margin: 0 0 1rem; }
.foot-nav { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.foot-nav a { color: var(--soft); }
.foot-support { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.foot-support-head { font-size: 1.1rem; color: var(--text); }
.foot-support-choices { display: grid; gap: 1rem; }
@media (min-width: 760px) { .foot-support-choices { grid-template-columns: 1fr 1fr; } }
.foot-support-choice h3 { font-family: var(--sans); font-size: 0.95rem; color: var(--text); margin-bottom: 0.3rem; }
.foot-support-btn { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--brass-lit); border-radius: 999px; text-decoration: none; }
.foot-fine, .build-stamp, .foot-legal { font-size: 0.8rem; }
.house-line { color: var(--text); margin-top: 1.4rem; }
.build-stamp { font-family: var(--courier); }

/* ---------- the answer window (built from the FAQ page; no network call) ---------- */
.aw-open { position: fixed; z-index: 900; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  min-height: 52px; min-width: 5.5rem; padding: 0.75rem 1.4rem; border-radius: 999px; border: 2px solid var(--night);
  background: var(--brass-lit); color: var(--night); font: 800 1.05rem var(--sans); letter-spacing: 0.08em; cursor: pointer;
  box-shadow: 0 0 0 2px var(--brass-lit), 0 10px 26px rgba(0, 0, 0, 0.5); }
.aw-panel { position: fixed; z-index: 901; right: 1rem; bottom: 1rem; width: min(25rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100vh - 2rem));
  display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--brass-lit); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); }
.aw-panel[hidden], .aw-open[hidden] { display: none; }
.aw-head { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.85rem 1rem; background: var(--screening); border-bottom: 1px solid var(--rule); }
.aw-title { margin: 0; font-size: 1.1rem; }
.aw-note { margin: 0.15rem 0 0; font: 0.8rem var(--sans); color: var(--soft); }
.aw-close { margin-left: auto; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 1.4rem; cursor: pointer; }
.aw-body { padding: 0.9rem 1rem; overflow-y: auto; font: 0.95rem/1.55 var(--sans); }
.aw-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.aw-chip { font: inherit; text-align: left; background: var(--panel-2); color: var(--text); border: 1px solid var(--rule); border-radius: 999px; padding: 0.4rem 0.75rem; cursor: pointer; }
.aw-chip:hover { border-color: var(--brass-lit); }
.aw-answer { background: var(--panel-2); border-radius: 8px; padding: 0.8rem; margin: 0.6rem 0; white-space: pre-line; }
.aw-form { display: flex; gap: 0.5rem; padding: 0.8rem 1rem; border-top: 1px solid var(--rule); }
.aw-input { flex: 1; min-width: 0; min-height: 44px; font: 1rem var(--sans); padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--rule); background: var(--night); color: var(--text); }
.aw-send { min-height: 44px; padding: 0 1rem; border: 0; border-radius: 8px; background: var(--brass-lit); color: var(--night); font: 700 0.95rem var(--sans); cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }