/* Arcade layer: pixel labels, neon accents, cartridge project cards.
   Delete this file's <link> in index.html to get the clean theme back. */
:root {
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --neon-c: #3ee8ff;
  --neon-a: #ffc24b;
  --glow-c: 0 0 6px rgba(62, 232, 255, .55), 0 0 18px rgba(62, 232, 255, .25);
  --glow-a: 0 0 6px rgba(255, 194, 75, .55), 0 0 18px rgba(255, 194, 75, .25);
}

/* 1. Pixel font, only on small labels */
.brand { font-family: var(--pixel); font-size: 12px; font-weight: 400; letter-spacing: .02em; color: var(--neon-c); text-shadow: var(--glow-c); }
.eyebrow, .proof-k, .tl-tag, .tags span, .kind, .press-start, .coin {
  font-family: var(--pixel); font-weight: 400; letter-spacing: .02em; text-transform: uppercase;
}
.eyebrow { font-size: 10px; color: var(--neon-a); text-shadow: var(--glow-a); line-height: 1.8; }
.proof-k { font-size: 8px; color: var(--neon-c); }
.tl-tag { font-size: 8px; line-height: 1.6; padding: 5px 9px; background: transparent; color: var(--neon-c); border: 1px solid rgba(62, 232, 255, .45); border-radius: 4px; }
.tags span { font-size: 8px; padding: 5px 7px; border-radius: 3px; }
.kind { font-size: 8px; }

/* 2. Neon accents and hero scanlines */
html, body { overflow-x: clip; }
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
}
.hero h1 { text-shadow: 0 0 28px rgba(126, 166, 255, .25); }
.headshot { border: 2px solid var(--neon-a); box-shadow: var(--glow-a); }
.nav nav a:hover, .section-head a:hover, .more:hover { color: var(--neon-c); text-shadow: var(--glow-c); }
.press a:hover .title { color: var(--neon-c); text-shadow: var(--glow-c); }
.btn { transition: box-shadow .2s; }
.btn:hover { box-shadow: var(--glow-c); }
.btn.ghost:hover { border-color: var(--neon-c); }
.logos-text li:hover { border-color: var(--neon-a); box-shadow: var(--glow-a); }

/* 3. Projects: press start + cartridge cards */
.press-start { font-size: 10px; color: var(--neon-a); text-shadow: var(--glow-a); margin: 0 0 14px; animation: blink 1.4s steps(2, start) infinite; }
.cart {
  border: 2px solid #2a3766; border-radius: 18px 18px 8px 8px; padding-top: 14px;
  background:
    repeating-linear-gradient(to right, #2a3766 0 3px, transparent 3px 9px) top center / 40% 6px no-repeat,
    var(--surface);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cart .card-media { margin: 0 14px; border-radius: 6px; border: 2px solid #0a0f1f; }
.cart:hover { transform: translateY(-3px); border-color: var(--neon-c); box-shadow: var(--glow-c); }
.cart.wide .card-media { margin: 0 0 14px 14px; }
.more.coin { font-size: 9px; color: var(--neon-a); text-shadow: var(--glow-a); }

@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .press-start { animation: none; }
  .cart { transition: none; }
}
@media (max-width: 760px) {
  .cart.wide .card-media { margin: 0 14px; }
}

/* Arcade display font (Jersey 10) for headings and other large type; body text stays Inter.
   Jersey is narrow and has one weight, so sizes run larger and bold is never faked. */
:root { --serif: "Jersey 10", "Press Start 2P", ui-monospace, monospace; }
h1, h2, h3, .title, .card-media span { font-weight: 400; font-synthesis: none; letter-spacing: .01em; }
.hero h1 { font-size: clamp(54px, 8vw, 92px); line-height: .95; letter-spacing: .01em; }
.section-head h2 { font-size: 48px; }
.tl-body h3, .card-body h3, .invest h3 { font-size: 32px; }
.contact h2 { font-size: 60px; }
.title { font-size: 26px; line-height: 1.15; }
.card-media span { font-size: 40px; }
.hero-grid > div { min-width: 0; }
.m-br { display: none; }
@media (max-width: 760px) {
  .hero h1 { font-size: 40px; max-width: none; text-wrap: wrap; }
  .m-br { display: inline; }
  .hero h1.fit .l1 { white-space: nowrap; }
  .section-head h2 { font-size: 42px; }
}

/* Contact buttons as 8-bit arcade buttons: pixel label, hard offset shadow, press-down on click */
.cta { gap: 18px; }
.btn, .btn.ghost {
  font-family: var(--pixel); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  padding: 16px 20px; border-radius: 0; border: 3px solid var(--bg);
  outline: 2px solid currentColor; outline-offset: 0;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn { background: var(--neon-a); color: #1a1205; outline-color: var(--neon-a); box-shadow: 5px 5px 0 #8a5f12; }
.btn.ghost { background: var(--surface); color: var(--neon-c); outline-color: var(--neon-c); box-shadow: 5px 5px 0 #146b7a; }
.btn::before { content: "▶ "; opacity: 0; transition: opacity .1s; }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; }
.btn:hover { box-shadow: 5px 5px 0 #8a5f12, var(--glow-a); }
.btn.ghost:hover { box-shadow: 5px 5px 0 #146b7a, var(--glow-c); border-color: var(--bg); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #8a5f12; }
.btn.ghost:active { box-shadow: 0 0 0 #146b7a; }
.btn:focus-visible { outline-width: 3px; }
@media (prefers-reduced-motion: reduce) { .btn, .btn::before { transition: none; } }

/* Press list: collapsed shows the top six */
.press.collapsed .more-press { display: none; }
.press-toggle { margin-top: 28px; cursor: pointer; }