:root {
  --ink: #140c0a;
  --paper: #f3dcc0;
  --ticket: #f7e6cd;
  --fixer: #d63a28;
  --safelight: #e8b03a;
  --emulsion: #3a241c;
  --rule: #c9a882;
  --type: #1c100c;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 10% -10%, #3a1c14 0%, transparent 50%),
    var(--ink);
  color: var(--paper);
  font-family: Figtree, system-ui, sans-serif;
  padding: 2.5rem 1.25rem 4rem 3.5rem;
}

.sprocket-rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 2.1rem;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 18px,
      #0a0604 18px 22px,
      transparent 22px 52px
    ),
    #1a100c;
  border-right: 1px solid #2a1a14;
  box-shadow: inset -8px 0 16px #0008;
}

.mast h1, h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0.15rem 0 0.6rem;
}
.mast h1 { font-size: clamp(3.2rem, 8vw, 6.4rem); line-height: 0.9; color: var(--paper); }
.eid {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--safelight);
  margin: 0;
}
.lede { max-width: 40rem; color: #e8d2b4; line-height: 1.45; }
.mast.compact h1 { font-size: 3rem; }

.banner {
  background: var(--fixer);
  color: #fff8f0;
  padding: 0.75rem 1rem;
  max-width: 44rem;
}

.ticket {
  background: var(--ticket);
  color: var(--type);
  max-width: 52rem;
  padding: 1.4rem 1.4rem 1.2rem;
  margin: 1.6rem 0;
  border: 1px dashed #8a6240;
  box-shadow: 8px 10px 0 #0006;
  background-image: repeating-linear-gradient(
    -12deg,
    transparent,
    transparent 11px,
    #ead3b433 11px,
    #ead3b433 12px
  );
}
.ticket legend {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ticket label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
}
.ticket label span { color: var(--fixer); font-weight: 500; }
.ticket input, .ticket textarea, .ticket select {
  font: 500 1rem/1.35 Figtree, system-ui, sans-serif;
  border: 0;
  border-bottom: 1.5px solid var(--emulsion);
  background: transparent;
  padding: 0.45rem 0.1rem;
  color: var(--type);
}
.ticket textarea { resize: vertical; width: 100%; }
.lead-field { border: 0; padding: 0; margin: 0 0 1rem; }
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.2rem;
  margin-top: 0.8rem;
}
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

.onboarding summary {
  cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.actions { margin-top: 1.3rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
button, .btn {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--fixer);
  color: #fffaf4;
  border: 0;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: #b22e20; }
.ghost { color: var(--safelight); margin-left: 0.8rem; }
.hint { font-size: 0.82rem; color: #5a3a28; margin: 0; max-width: 22rem; }

.strip {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  max-width: 52rem;
}
.strip li {
  border: 1px solid #5a3a2c;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  flex: 1 1 10rem;
  background: #1c120e;
}
.strip b { font-family: "IBM Plex Mono", monospace; color: var(--safelight); display: block; }

.frames h2 { font-size: 1.4rem; color: var(--safelight); margin-top: 1.6rem; }
.film {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
  overflow-x: auto;
}
@media (max-width: 900px) { .film { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.film figure { margin: 0; background: #000; }
.film img { width: 100%; height: auto; display: block; }
.film figcaption {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  padding: 0.3rem;
  color: #c9a882;
}
.copy-sheet {
  max-width: 52rem;
  background: var(--ticket);
  color: var(--type);
  padding: 1rem 1.2rem;
  margin-top: 1.6rem;
}
.copy-sheet pre {
  white-space: pre-wrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
}