/* ============================================================
   TRAILER TRASH — themes.css
   Two directions sharing the same skeleton:
   .theme-marquee  → slick cinema-marquee (warm, credible-loud)
   .theme-zine     → punk-zine tabloid (black + highlighter, chaos)
   ============================================================ */

/* ===========================================================
   DIRECTION A — "NOW SHOWING" / Marquee
   =========================================================== */
.theme-marquee {
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --font-nav: "Archivo", system-ui, sans-serif;

  --bg:    oklch(0.155 0.013 62);
  --bg-2:  oklch(0.205 0.015 62);
  --bg-3:  oklch(0.255 0.016 62);
  --bg-glass: oklch(0.155 0.013 62 / 0.82);

  --ink:       oklch(0.955 0.012 85);
  --ink-dim:   oklch(0.755 0.012 80);
  --ink-faint: oklch(0.56 0.011 78);
  --read-ink:  oklch(0.87 0.01 84);

  --accent:    oklch(0.80 0.142 72);   /* incandescent amber */
  --accent-on: oklch(0.20 0.03 70);
  --accent-ink: oklch(0.84 0.13 74);

  --line:     oklch(0.31 0.012 68);
  --field-bg: oklch(0.205 0.014 62);

  --slot-a: oklch(0.225 0.022 64);
  --slot-b: oklch(0.265 0.028 60);
  --slot-ink: oklch(0.82 0.05 74);
  --slot-cap-bg: oklch(0.16 0.02 62 / 0.78);
  --slot-border: 1px solid oklch(0.33 0.02 66);

  --chip-radius: 6px; --card-radius: 7px; --img-radius: 5px;
  --head-tracking: 0.005em; --logo-tracking: 0.01em;
  --nav-tracking: .01em; --nav-transform: none;
}
/* projector glow behind the hero */
.theme-marquee .tt-hero::before {
  content: ""; position: absolute; inset: -40px -200px auto 50%;
  transform: translateX(-50%);
  height: 360px; width: 1100px; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, oklch(0.80 0.142 72 / 0.16), transparent 70%);
  filter: blur(6px);
}
.theme-marquee .tt-hero-grid { position: relative; z-index: 1; }

/* marquee bulb strip */
.deco-marquee-strip { display: none; }
.theme-marquee .deco-marquee-strip {
  display: block; height: 14px; margin: 0 0 4px;
  max-width: 1240px; margin-inline: auto; padding: 0 40px;
}
.theme-marquee .deco-marquee-strip .bulbs {
  height: 14px; border-radius: 7px;
  background-image: radial-gradient(circle, oklch(0.86 0.14 76) 0 3px, transparent 3.5px);
  background-size: 26px 14px; background-position: center;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 4px oklch(0.80 0.142 72 / 0.55));
  opacity: .85;
}
.theme-marquee .deco-zine-masthead { display: none; }

/* sprocket-hole footer flourish */
.theme-marquee .tt-footer { position: relative; }
.theme-marquee .tt-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background:
    repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 30px);
  opacity: .5;
}
.theme-marquee .tt-card .card-img { box-shadow: 0 14px 30px -20px rgba(0,0,0,.7); }
.theme-marquee .tt-card:hover .card-img .tt-img { border-color: var(--accent); }
.theme-marquee .tt-img { transition: border-color .2s; }

/* ===========================================================
   DIRECTION B — "TRASH" / Punk-zine tabloid
   =========================================================== */
.theme-zine {
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --font-nav: "Space Mono", ui-monospace, monospace;

  --bg:    oklch(0.145 0 0);
  --bg-2:  oklch(0.185 0 0);
  --bg-3:  oklch(0.235 0 0);
  --bg-glass: oklch(0.145 0 0 / 0.84);

  --ink:       oklch(0.975 0 0);
  --ink-dim:   oklch(0.72 0 0);
  --ink-faint: oklch(0.52 0 0);
  --read-ink:  oklch(0.88 0 0);

  --accent:    oklch(0.89 0.185 104);   /* highlighter yellow */
  --accent-on: oklch(0.14 0 0);
  --accent-ink: oklch(0.89 0.185 104);
  --accent-2:  oklch(0.66 0.255 358);    /* hot pink */

  --line:     oklch(0.30 0 0);
  --field-bg: oklch(0.18 0 0);

  --slot-a: oklch(0.20 0 0);
  --slot-b: oklch(0.255 0 0);
  --slot-ink: oklch(0.86 0 0);
  --slot-cap-bg: oklch(0.12 0 0 / 0.82);
  --slot-border: 2px solid oklch(0.97 0 0);

  --chip-radius: 0px; --card-radius: 0px; --img-radius: 0px;
  --head-tracking: -0.01em; --logo-tracking: -0.01em;
  --nav-tracking: .14em; --nav-transform: uppercase;
}
/* halftone grime over the whole page */
.theme-zine .tt-app::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(oklch(1 0 0 / 0.05) 0.5px, transparent 0.6px);
  background-size: 4px 4px; mix-blend-mode: screen; opacity: .5;
}
.theme-zine .tt-app > * { position: relative; z-index: 1; }

/* tabloid masthead rule under the nav */
.theme-zine .deco-marquee-strip { display: none; }
.deco-zine-masthead { display: none; }
.theme-zine .deco-zine-masthead {
  display: flex; align-items: center; gap: 14px;
  max-width: 1240px; margin: 0 auto; padding: 0 40px 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.theme-zine .deco-zine-masthead .bar { flex: 1; height: 2px; background: var(--accent); }
.theme-zine .deco-zine-masthead .pink { color: var(--accent-2); }

/* misregistered-print hero */
.theme-zine .tt-hero h1 { text-shadow: 4px 4px 0 var(--accent-2); }
.theme-zine .tt-eyebrow {
  background: var(--accent); color: var(--accent-on);
  padding: 4px 10px; transform: rotate(-1.2deg);
}
.theme-zine .tt-eyebrow .dot { background: var(--accent-on); }

/* nav links get a highlighter swipe on hover/active */
.theme-zine .tt-navlinks a, .theme-zine .tt-navlinks button { transition: color .12s, background .12s; }
.theme-zine .tt-navlinks a:hover, .theme-zine .tt-navlinks button:hover,
.theme-zine .tt-navlinks a[data-active="true"], .theme-zine .tt-navlinks button[data-active="true"] {
  background: var(--accent); color: var(--accent-on);
}
.theme-zine .tt-cta { transform: rotate(-1.5deg); border: 2px solid var(--accent-on); }
.theme-zine .tt-cta:hover { transform: rotate(-1.5deg) translateY(-1px); }

/* pillars become stamped blocks */
.theme-zine .tt-pillars { gap: 2px; background: var(--ink); border-color: var(--ink); }
.theme-zine .tt-pillar .plabel { color: var(--ink); }
.theme-zine .tt-pillar:hover { background: var(--accent); }
.theme-zine .tt-pillar:hover .plabel,
.theme-zine .tt-pillar:hover .pblurb,
.theme-zine .tt-pillar:hover .pnum { color: var(--accent-on); }

/* chaotic card rotations + sticker hot badge + tape */
.theme-zine .tt-card:nth-child(3n+1) { transform: rotate(-0.5deg); }
.theme-zine .tt-card:nth-child(3n+2) { transform: rotate(0.4deg); }
.theme-zine .tt-card:nth-child(3n+3) { transform: rotate(-0.3deg); }
.theme-zine .tt-card { transition: transform .18s; }
.theme-zine .tt-card:hover { transform: rotate(0deg) translateY(-3px); }
.theme-zine .tt-card .card-img .tt-img { box-shadow: 5px 5px 0 var(--accent-2); }
.theme-zine .tt-card:hover h3 { color: var(--accent); }
.theme-zine .tt-hot {
  background: var(--accent-2); color: oklch(0.99 0 0);
  transform: rotate(-7deg); border: 2px solid oklch(0.99 0 0);
  top: -8px; left: -8px;
}
/* "tape" on every image slot */
.theme-zine .tt-img::after {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 88px; height: 20px; z-index: 5;
  background: oklch(0.89 0.185 104 / 0.55);
  border-left: 1px dashed oklch(0 0 0 / .25); border-right: 1px dashed oklch(0 0 0 / .25);
}
.theme-zine .tt-section-head h2 { background: var(--accent); color: var(--accent-on); padding: 2px 12px; }
.theme-zine .tt-footer .f-logo span { color: var(--accent-2); }
.theme-zine .tt-article .pull { background: var(--accent); color: var(--accent-on); border-left: none; padding: 22px 26px 28px; transform: rotate(-0.6deg); }
.theme-zine .tt-back:hover { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }

/* shared: card image hover zoom feel via slot stripe shift (cheap, both themes) */
.tt-card .card-img { overflow: hidden; }