/* TourFrame — committed world: "The Title Sequence."
   The site is built like the opening of a film about the house. Cinema black as the ground,
   the footage as the only light, a projector-gold for titles and the one action, Fraunces as
   the title-card voice, and a monospace "slate" for the film-craft marks (scene, timecode).
   Browser surfaces are themed from the world, not left on defaults. */
:root {
  --black:   #0A0908;      /* true warm cinema black — the theater */
  --screen:  #100E0B;      /* a surface lifted off black */
  --bone:    #ECE5D6;      /* projected light / title text */
  --mist:    #8E8674;      /* muted copy on black */
  --gold:    #C79A54;      /* projector gold — titles, the one action */
  --gold-lo: #E3CA92;      /* lighter gold for small marks */
  --line:    rgba(236,229,214,.13);
  --line-2:  rgba(236,229,214,.22);
  --measure: 66ch;
  --gutter:  clamp(1.25rem, 5vw, 4.5rem);
  --bar: clamp(1.5rem, 4.5vw, 3.25rem);   /* letterbox bar height */
  --display: "Fraunces", Georgia, serif;
  --body: "Mulish", system-ui, sans-serif;
  --slate: "Space Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--black); }
body { margin: 0; background: var(--black); color: var(--bone);
  font: 400 1.0625rem/1.65 var(--body); letter-spacing: .005em; -webkit-font-smoothing: antialiased; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Browser surfaces wear the world. */
::selection { background: var(--gold); color: #140f06; }
:root { caret-color: var(--gold); accent-color: var(--gold); color-scheme: dark; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; }
* { scrollbar-width: thin; scrollbar-color: #2a261d var(--black); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #2a261d; border: 3px solid var(--black); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3a3426; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; margin: 0;
  font-optical-sizing: auto; }

.wrap { max-width: 75rem; margin: 0 auto; padding: 0 var(--gutter); }

/* The slate — monospace film-craft marks (scene, timecode, format). Carries information, so it is
   not the banned eyebrow: it names the scene. */
.slate { font-family: var(--slate); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-lo); display: inline-flex; align-items: center; gap: .7rem; }
.slate::before { content: ""; width: 1.4rem; height: 1px; background: var(--gold); opacity: .7; }

/* Letterbox bars — the cinematic frame. */
.bars { position: fixed; left: 0; right: 0; height: var(--bar); background: var(--black); z-index: 50; pointer-events: none; }
.bars.top { top: 0; } .bars.bot { bottom: 0; }

/* The one action — a title-card plate, not a pill. */
.act { display: inline-flex; align-items: baseline; gap: .8rem; cursor: pointer; border: 1px solid var(--gold);
  background: transparent; color: var(--gold-lo); font: 500 .9rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  padding: 1.05rem 1.6rem; transition: background .3s, color .3s; }
.act:hover { background: var(--gold); color: #140f06; }
.act .n { font-family: var(--slate); font-size: .8rem; letter-spacing: .04em; opacity: .75; text-transform: none; }
.act-fill { background: var(--gold); color: #140f06; border-color: var(--gold); }
.act-fill:hover { background: var(--gold-lo); border-color: var(--gold-lo); }
.act-ghost { border-color: var(--line-2); color: var(--bone); }
.act-ghost:hover { background: transparent; border-color: var(--bone); color: #fff; }
.act[disabled] { opacity: .4; cursor: not-allowed; }

/* The screening frame — how any finished film is shown on the page. */
.frame { position: relative; background: #000; border: 1px solid var(--line-2); }
.frame iframe, .frame video { width: 100%; border: 0; display: block; background: #000; }

.wordmark { font-family: var(--display); font-size: 1.35rem; letter-spacing: .04em; }
.wordmark b { font-weight: 500; color: var(--gold-lo); }
.masthead { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; }
.nav-link { font-family: var(--slate); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bone); }
.nav-link:hover { color: var(--gold-lo); }

.muted { color: var(--mist); }
.lead { font-size: 1.2rem; line-height: 1.55; color: #cfc8b8; max-width: 40ch; }

/* Reduced motion: still, no footage autoplay. */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Operate surfaces (funnel, delivery, admin) ----
   The world in precise details only; controls stay standard and consistent. One Fraunces
   title per screen, everything else Mulish/mono, fixed rem scale, projector-gold for the
   one action + focus + state. */
.panel { max-width: 42rem; margin: 0 auto; }
.surface { background: var(--screen); border: 1px solid var(--line); }
.ptitle { font-family: var(--display); font-size: 1.85rem; letter-spacing: -.02em; margin: 0 0 .4rem; }
.phint { color: var(--mist); font-size: .95rem; margin: 0 0 1.75rem; max-width: 46ch; }

/* Stepper — a real sequence, mono marks joined by a hairline. */
.stepper { display: flex; align-items: center; gap: .7rem; margin-bottom: 2rem; font-family: var(--slate); font-size: .78rem; letter-spacing: .12em; }
.stepper .dot { color: #6b6453; }
.stepper .dot.on { color: var(--gold-lo); }
.stepper .dot.done { color: var(--bone); }
.stepper .seg { flex: 1; height: 1px; background: var(--line); }

/* Fields — standard, consistent. Mono label, quiet underline, gold focus. */
.field { display: block; margin-bottom: 1.35rem; }
.field > span { display: block; font-family: var(--slate); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: .5rem; }
.field input, .field textarea {
  width: 100%; font: 400 1.05rem/1.5 var(--body); color: var(--bone); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: .55rem 0; transition: border-color .18s; }
.field input::placeholder, .field textarea::placeholder { color: #857c68; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field input:disabled { opacity: .5; }
.field textarea { resize: vertical; min-height: 4rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

.err { color: #c98b82; font-size: .9rem; min-height: 1.3em; margin-top: .4rem; }
.nav-row { display: flex; align-items: center; justify-content: space-between; margin-top: 1.75rem; }

/* Status pills — standardized states. */
.state-pill { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--slate); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.state-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.state-pill.wait { color: var(--gold-lo); }
.state-pill.live { color: #86b58f; }
.state-pill.fail { color: #c98b82; }