/* ============================================================
   GEN ATM NGK 2.0 — Subpage chrome
   Page masthead · spec tables · matrix · forms · 404
   ============================================================ */

.masthead {
  position: relative; overflow: hidden;
  padding-block: clamp(70px, 9vw, 116px) clamp(44px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 100% at 12% 0%, rgba(43,224,138,0.10), transparent 68%),
    radial-gradient(ellipse 60% 90% at 90% 20%, rgba(78,168,255,0.08), transparent 70%);
}
.masthead h1 { max-width: 18ch; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.masthead p { max-width: 62ch; }
.crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
         text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; }
.crumb a { color: var(--ink-faint); }
.crumb a:hover { color: var(--live); }

/* ---------- Spec table ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec caption {
  text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint); padding-bottom: 12px;
}
.spec th, .spec td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec thead th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
  border-bottom: 1px solid var(--line-strong);
}
.spec tbody th { color: var(--ink); font-weight: 600; font-family: var(--font-display);
                 font-size: 15px; width: 30%; }
.spec td { color: var(--ink-dim); }
.spec tbody tr:hover td, .spec tbody tr:hover th { background: rgba(43,224,138,0.03); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .spec { min-width: 620px; }

/* ---------- Feature list ---------- */
.flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flist li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start;
            font-size: 14.5px; color: var(--ink-dim); }
.flist li::before {
  content: ""; width: 7px; height: 7px; margin-top: 8px; border-radius: 1px;
  background: var(--live); box-shadow: 0 0 8px var(--live-soft);
}
.flist--warn li::before { background: var(--warn); }
.flist--link li::before { background: var(--link); }

/* ---------- Numbered cards ---------- */
.num { counter-reset: n; display: grid; gap: 16px; }
.num__item { counter-increment: n; position: relative; padding-left: 58px; }
.num__item::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 13px; color: var(--live);
  border: 1px solid var(--line-strong); border-radius: 2px;
  width: 40px; height: 32px; display: grid; place-items: center;
}
.num__item h3 { font-size: 1.08rem; margin-bottom: 6px; }
.num__item p { font-size: 14.5px; margin-bottom: 0; }

/* ---------- Form ---------- */
.form { display: grid; gap: 16px; }
@media (min-width: 680px) { .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.field label {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 12px 14px; font-family: var(--font-body); font-size: 15px;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--live); box-shadow: 0 0 0 3px var(--live-soft);
}
.form__note { font-size: 13px; color: var(--ink-faint); }

/* ---------- 404 ---------- */
.lost { min-height: 74vh; display: grid; place-items: center; text-align: center; }
.lost__code {
  font-family: var(--font-mono); font-size: clamp(3.4rem, 12vw, 8rem);
  color: var(--fault); letter-spacing: 0.06em; line-height: 1;
  text-shadow: 0 0 40px rgba(255,92,92,0.3);
}
.lost__msg { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
             text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 26px; }

/* ============================================================
   THE FILM — genatm
   A recording, not a hero. Square corners, a timecode HUD and a
   scan line, because everything on this site is an instrument.
   ============================================================ */
.film { background: var(--bg-raise); border-block: 1px solid var(--line); }
.film__grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;
}
.film__stage { min-width: 0; }
.film__screen { position: relative; background: #0B1116; border: 1px solid var(--line-strong); }
.film__art { display: block; width: 100%; height: auto; }
.film__scan { fill: url(#none); }
.film__scan {
  fill: var(--live); opacity: .10;
  animation: film-scan 5.2s linear infinite;
}
@keyframes film-scan { from { transform: translateX(0); } to { transform: translateX(660px); } }
.film__hud {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border: 1px solid var(--line); border-top: 0;
  font-size: 11px; letter-spacing: .12em; color: var(--ink-faint);
}
.film__run { margin-left: auto; color: var(--ink-dim); }
.film__rec { display: inline-flex; align-items: center; gap: 6px; color: var(--fault); }
.film__rec i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--fault);
  animation: film-rec 1.6s ease-in-out infinite;
}
@keyframes film-rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.film__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.film__soon {
  margin: 0; align-self: center; font-size: 11px; letter-spacing: .1em;
  color: var(--warn); border: 1px dashed var(--warn); padding: 10px 14px;
}
.film__eyebrow { font-size: 11px; letter-spacing: .16em; color: var(--live); margin: 0 0 10px; }
.film__shots h2 { margin: 0 0 12px; }
.film__lead { color: var(--ink-dim); max-width: 46ch; }
.film__list { list-style: none; margin: 22px 0 0; padding: 0; }
.film__list li {
  display: grid; grid-template-columns: 54px 1fr; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-dim);
}
.film__list li span:first-child { color: var(--live); font-size: 12px; }
@media (max-width: 900px) { .film__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .film__scan, .film__rec i { animation: none; }
  .film__scan { transform: translateX(300px); }
}

/* ---------- Exit panel ---------- */
.exitp { max-width: 520px; }
.exitp__eyebrow { font-size: 11px; letter-spacing: .16em; color: var(--live); margin: 0 0 10px; }
.exitp h3 { margin: 0 0 10px; }
.exitp p { color: var(--ink-dim); margin: 0; font-size: 14.5px; }
.exitp__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }