/* turbozine landing. Composition only; tokens and effects come from theme.css. */

:root { --pixel: "Press Start 2P", "Space Mono", monospace; }

html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--tz-bg); color: var(--tz-ink); }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- running head ---------- */
.runhead { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,0.92); backdrop-filter: blur(6px); align-items: center; }
.runhead-brand { font-family: var(--tz-font-display); font-size: 1.1rem; letter-spacing: 0.02em; text-decoration: none; text-transform: uppercase; }
.runhead-mid { color: var(--tz-signal); }
@media (max-width: 600px) { .runhead-mid { display: none; } }

/* ---------- poster ---------- */
.poster { isolation: isolate; align-content: center; min-height: calc(100svh - 3rem); row-gap: 1.2rem; }
@media (max-width: 900px) { .poster { min-height: 0; padding-top: calc(var(--tz-margin) + 4.5rem); padding-bottom: calc(var(--tz-margin) * 1.5); } }
.poster > * { position: relative; z-index: 1; }
.poster-top { position: absolute; top: calc(var(--tz-margin) + 0.25rem); left: var(--tz-margin); right: calc(var(--tz-margin) + 2.5rem); display: flex; justify-content: space-between; gap: 1em; margin: 0; }
@media (max-width: 600px) { .poster-top { flex-direction: column; gap: 0.3em; } }
.poster-spine { position: absolute; right: var(--tz-margin); top: 50%; translate: 0 -50%; margin: 0; font-size: clamp(0.9rem, 2vw, 1.5rem); color: var(--tz-signal); }
@media (max-width: 900px) { .poster-spine { display: none; } }
.poster-title { display: grid; font-size: clamp(5.4rem, 23vw, 24rem); line-height: 0.82; margin: 0; text-transform: uppercase; }
.poster-sub { max-width: 52ch; margin: 0; font-size: 1rem; }
.poster-ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.poster .counter { margin: 0.5rem 0 0; }
@media (min-width: 900px) {
  .poster-title { grid-template-columns: auto auto; justify-content: start; column-gap: 0.08em; align-items: end; }
}

/* ---------- 90s furniture ---------- */
.badge {
  position: absolute; z-index: 5; top: calc(var(--tz-margin) + 2.6rem); right: var(--tz-margin);
  font-family: var(--pixel); font-size: 0.75rem; text-transform: uppercase; padding: 0.7em 0.9em;
  background: var(--tz-accent); color: #fff; border: 3px solid #fff; box-shadow: 5px 5px 0 #000; transform: rotate(-4deg);
}
@media (max-width: 600px) { .badge { top: calc(var(--tz-margin) + 3.4rem); right: var(--tz-margin); } }

.cta {
  display: inline-flex; align-items: center; gap: 0.9em;
  padding: 0.45em 0.9em 0.45em 0.6em;
  background: var(--tz-signal-2); color: #000; text-decoration: none; cursor: pointer; border: 0;
  font-family: var(--tz-font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em;
  border-top: 4px solid #fff; border-left: 4px solid #fff; border-bottom: 4px solid #6b7000; border-right: 4px solid #6b7000;
  box-shadow: 6px 6px 0 var(--tz-signal);
  transition: transform 0.08s, box-shadow 0.08s;
}
.tz a.cta, .tz a.cta:hover, .tz a.cta:focus-visible, .tz a.cta:visited { color: #000; text-decoration: none; }
.cta:hover, .cta:focus-visible { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--tz-signal); }
.cta:active { transform: translate(6px, 6px); box-shadow: none; }
.cta-label { font-family: var(--pixel); font-size: 0.55rem; text-transform: uppercase; background: #000; color: var(--tz-signal-2); padding: 0.7em 0.8em; white-space: nowrap; }
.cta--green { background: var(--tz-signal); border-bottom-color: #0d6b00; border-right-color: #0d6b00; box-shadow: 6px 6px 0 var(--tz-signal-2); }
.cta--green .cta-label { color: var(--tz-signal); }
.cta--green:hover { box-shadow: 3px 3px 0 var(--tz-signal-2); }

.counter, .hits { display: inline-flex; align-items: center; gap: 0.6em; text-transform: uppercase; font-size: var(--tz-size-xs); letter-spacing: 0.06em; }
.digits { display: inline-flex; gap: 2px; }
.digits span { background: #111; color: var(--tz-signal); border: 1px solid #333; font-family: var(--tz-font-mono); font-size: 1.1rem; line-height: 1; padding: 0.15em 0.35em; }

.starburst {
  position: absolute; z-index: 5; width: 9.5rem; height: 9.5rem; display: grid; place-items: center; text-align: center;
  font-family: var(--tz-font-display); font-size: 1.35rem; line-height: 0.92; text-transform: uppercase; color: #000;
  background: var(--tz-signal-2);
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 79% 21%, 94% 22%, 89% 37%, 100% 50%, 89% 63%, 94% 78%, 79% 79%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 21% 79%, 6% 78%, 11% 63%, 0% 50%, 11% 37%, 6% 22%, 21% 21%, 25% 6%, 39% 12%);
  transform: rotate(10deg);
}
.starburst--red { background: var(--tz-accent); color: #fff; }

/* ---------- what ---------- */
.what { color: var(--tz-ink-on-paper); padding-block: calc(var(--tz-margin) * 1.5); }
.what .tz-credit, .what .tz-pagenum { color: var(--tz-ink-on-paper); }
.what .tz-credit b { color: #000; background: var(--tz-signal); padding: 0 0.3em; }
.what-head { display: grid; gap: 0.6em; margin-bottom: 1.5rem; }
.what-title { margin: 0; line-height: 0.85; text-transform: uppercase; font-size: clamp(4rem, 12vw, 10rem); color: var(--tz-ink-on-paper); -webkit-text-stroke: 0; }
@media (min-width: 900px) { .what-title { font-size: clamp(6rem, 11vw, 11rem); } }
.what-cols { color: var(--tz-ink-on-paper); }
.what-cols p:first-child::first-letter { color: #000; }
@media (min-width: 900px) { .what-cols { column-count: 2; column-gap: calc(var(--tz-gutter) * 2); } }

/* ---------- how ---------- */
.how { padding-block: calc(var(--tz-margin) * 2); }
.how-head { margin-bottom: 2em; }
.how ol { counter-reset: none; }
.how .tz-index-credit { max-width: 44ch; margin-inline: auto; opacity: 0.85; color: var(--tz-ink); }
@media (min-width: 900px) { .how .tz-index-title { font-size: 4.2rem; } }
.how-cli { margin: 3rem auto 0; max-width: 72ch; text-align: left; background: #0a0a0a; border: 1px solid #222; padding: 1rem 1.2rem; overflow-x: auto; color: var(--tz-signal); font-size: 0.8rem; white-space: pre; }

/* ---------- proof ---------- */
.proof { padding: var(--tz-margin); background: #000; }
.proof-head { display: grid; gap: 1rem; margin-bottom: 1.5rem; justify-items: start; }
.proof-title { margin: 0; text-transform: uppercase; font-size: clamp(4rem, 14vw, 12rem); line-height: 0.85; }
.proof-sub { max-width: 56ch; margin: 0; }
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.proof-grid figure { margin: 0; position: relative; overflow: hidden; background: #111; }
.proof-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.proof-grid .proof-big { grid-column: span 2; }
.proof-grid .proof-big img { aspect-ratio: 16 / 10; object-position: top; }
.proof-grid figcaption { position: absolute; left: 0; bottom: 0; margin: 0; padding: 4px 8px; background: var(--tz-signal); color: #000; opacity: 1; }
@media (min-width: 900px) {
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
  .proof-grid .proof-big { grid-column: span 2; }
}

/* ---------- eap ---------- */
.eap { padding: var(--tz-margin); background: #000; }
.eap-frame { position: relative; max-width: 72rem; margin: 0 auto; padding: clamp(1.2rem, 4vw, 3rem); border: 3px solid var(--tz-signal); box-shadow: 10px 10px 0 var(--tz-signal-2); }
.eap .starburst { top: -2.2rem; right: -1rem; }
@media (max-width: 600px) { .eap .starburst { width: 7rem; height: 7rem; font-size: 1rem; top: -2.4rem; right: -0.6rem; } }
.eap-head { margin: 0 0 0.6em; }
.eap-title { margin: 0; text-transform: uppercase; font-size: clamp(4.5rem, 16vw, 13rem); line-height: 0.82; }
.eap-sub { max-width: 60ch; margin: 1rem 0 2rem; }
.eap-form { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .eap-form { grid-template-columns: 1fr 1fr; } .field--wide, .consent, .form-error, .cta--submit { grid-column: 1 / -1; } }
.field { display: grid; gap: 0.4em; }
.field-label { color: var(--tz-signal); }
.field-label b { color: var(--tz-accent); font-weight: 400; }
.field-label i { font-style: normal; opacity: 0.6; text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; box-sizing: border-box; background: #0a0a0a; color: var(--tz-ink); border: 2px solid #333; padding: 0.8em 0.9em;
  font-family: var(--tz-font-mono); font-size: 1rem; line-height: 1.3; border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: #555; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--tz-signal); box-shadow: 0 0 0 3px rgba(57,255,20,0.25); }
.field input:user-invalid { border-color: var(--tz-accent); }
.field--honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 0.8em; align-items: flex-start; font-size: var(--tz-size-xs); line-height: 1.5; cursor: pointer; }
.consent input { width: 1.2rem; height: 1.2rem; margin: 0.1em 0 0; accent-color: var(--tz-signal); flex: none; }
.form-error { margin: 0; color: var(--tz-accent); }
.cta--submit { justify-self: start; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.eap-done { padding: 1rem 0; }
.eap-done-title { margin: 0 0 0.4em; text-transform: uppercase; font-size: clamp(3.5rem, 12vw, 8rem); line-height: 0.85; }
.eap-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6em 1.5em; margin: 2.5rem 0 0; opacity: 0.8; }

/* ---------- colophon ---------- */
.colophon { position: relative; padding: calc(var(--tz-margin) * 1.5) var(--tz-margin) calc(var(--tz-margin) * 2); border-top: 1px solid #222; display: grid; gap: 0.8em; }
.colophon a { color: var(--tz-signal); text-decoration: none; }
.colophon a:hover { text-decoration: underline; }
.colophon-main { margin: 0; }
.colophon-links { margin: 0; font-size: var(--tz-size-xs); text-transform: uppercase; }
.colophon-links b { color: var(--tz-signal); font-weight: 400; margin: 0 0.4em; }
.colophon-spine { position: absolute; right: var(--tz-margin); bottom: var(--tz-margin); margin: 0; font-size: 1rem; color: var(--tz-signal); opacity: 0.6; }
@media (max-width: 600px) { .colophon-spine { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-ticker > span, .fx-vhs, .fx-cursor::after { animation: none !important; }
}