/* SurfArr site styles: "Bedroom '91"
   Off-white paper, wood paneling, tube TVs and a pencil case worth of colors.
   Fonts: Permanent Marker (hand drawn), Bungee (signage), Nunito (body), VT323 (screens). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* paper + ink */
  --paper: #FFF6E6;
  --paper-2: #FFFDF6;
  --paper-3: #F6EAD3;
  --ink: #1E2744;
  --ink-2: #48527A;
  --muted: #8A8DA3;
  --line: #E4D6BC;
  --line-2: #D5C4A5;

  /* the color choices */
  --blue: #2F5BFF;
  --blue-deep: #1C2E8C;
  --blue-night: #121C5C;
  --teal: #0FB5A5;
  --pink: #FF4F93;
  --grape: #7B4DFF;
  --lime: #6ACB3F;
  --tomato: #FF5A4A;
  --sky: #5FD0FF;
  --sun: #FFCB3D;

  /* wood paneling */
  --wood-a: #7B4A24;
  --wood-b: #8C5A2E;
  --wood-c: #6B3F1E;
  --wood-seam: #4A2A12;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-pop: 4px 4px 0 var(--ink);
  --font-hand: 'Permanent Marker', 'Comic Sans MS', cursive;
  --font-display: 'Bungee', 'Nunito', system-ui, sans-serif;
  --font-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-screen: 'VT323', ui-monospace, Menlo, monospace;
  --font-mono: 'VT323', ui-monospace, Menlo, monospace;

  /* legacy names used by page scripts and inline styles */
  --bg: var(--paper);
  --surface: var(--paper-2);
  --surface-2: var(--paper-3);
  --surface-3: #EFE0C4;
  --border: var(--line);
  --border-subtle: var(--line);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --marigold: var(--blue);
  --on-marigold: #fff;
  --onair: var(--tomato);
  --phosphor: var(--teal);
  --primary: var(--blue);
  --on-primary: #fff;
  --error: var(--tomato);
  --text-secondary: var(--ink-2);
  --surface-container: var(--paper-3);
  --surface-high: #EFE0C4;
}

html { color-scheme: light; scroll-behavior: smooth; }
body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Memphis confetti on the paper */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke-width='4' stroke-linecap='round' opacity='.16'%3E%3Cpath d='M20 40 q10 -14 20 0 t20 0 t20 0' stroke='%23FF4F93'/%3E%3Cpath d='M170 200 q10 -14 20 0 t20 0' stroke='%230FB5A5'/%3E%3Cpath d='M190 40 l18 30 h-36z' stroke='%237B4DFF'/%3E%3Cpath d='M40 190 l22 -6 M44 204 l22 -6' stroke='%232F5BFF'/%3E%3Ccircle cx='120' cy='120' r='9' stroke='%23FF5A4A'/%3E%3C/g%3E%3Cg opacity='.18'%3E%3Ccircle cx='228' cy='120' r='4' fill='%236ACB3F'/%3E%3Ccircle cx='96' cy='230' r='4' fill='%23FFCB3D'/%3E%3Crect x='110' y='20' width='10' height='10' fill='%235FD0FF' transform='rotate(20 115 25)'/%3E%3C/g%3E%3C/svg%3E");
}
::selection { background: var(--pink); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.08; }
h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
h3 { font-family: var(--font-sans); font-weight: 900; letter-spacing: -0.01em; }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* ── Wood paneling ───────────────────────────────────────────────── */
.wood {
  background-color: var(--wood-b);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .22' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .18  0 0 0 0 .09  0 0 0 0 .03  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,
      var(--wood-a) 0 118px, var(--wood-seam) 118px 121px,
      var(--wood-b) 121px 236px, var(--wood-seam) 236px 239px,
      var(--wood-c) 239px 354px, var(--wood-seam) 354px 357px);
  color: var(--paper);
  box-shadow: inset 0 14px 20px -12px rgba(0,0,0,.45), inset 0 -14px 20px -12px rgba(0,0,0,.45);
}

/* ── Hand drawn ──────────────────────────────────────────────────── */
.hand { font-family: var(--font-hand); font-weight: 400; letter-spacing: .01em; }
.marker-title {
  font-family: var(--font-hand); font-weight: 400; line-height: .95; color: var(--paper);
  transform: rotate(-3deg);
  text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 rgba(0,0,0,.25);
}
.tape { position: absolute; width: 96px; height: 26px; background: rgba(255,246,230,.72); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.scribble-underline { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14'%3E%3Cpath d='M2 9 C 40 2, 80 14, 120 6 S 180 4, 198 8' fill='none' stroke='%23FF4F93' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 12px no-repeat; padding-bottom: 8px; }

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,246,230,.94); backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--ink);
}
.nav-inner { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-hand); font-size: 1.6rem; color: var(--ink); }
.nav-brand img { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--ink); }
.nav-brand b { color: var(--pink); font-weight: inherit; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-link { color: var(--ink); text-decoration: none; font-weight: 800; font-size: .95rem; padding: 7px 12px; border-radius: 10px; border: 2px solid transparent; transition: background .15s, border-color .15s; }
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--paper-2); border-color: var(--ink); }
.nav-clock { font-family: var(--font-screen); font-size: 1.35rem; line-height: 1; color: var(--sky); background: var(--blue-night); padding: 5px 10px 3px; border-radius: 8px; border: 2px solid var(--ink); text-shadow: 0 0 6px rgba(95,208,255,.7); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .hide-mobile { display: none !important; } }

/* ── Buttons (chunky, sticker shadow) ────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-family: var(--font-sans); font-weight: 900; font-size: 1rem; border-radius: 12px; padding: 12px 20px; border: 3px solid var(--ink); cursor: pointer; box-shadow: var(--shadow-pop); transition: transform .12s, box-shadow .12s; color: var(--ink); background: var(--paper-2); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-pink { background: var(--pink); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-secondary { background: var(--paper-2); color: var(--ink); }
.btn-sm { padding: 7px 12px; font-size: .88rem; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }

/* ── Bits ────────────────────────────────────────────────────────── */
.eyebrow { font-family: var(--font-hand); font-size: 1.15rem; color: var(--pink); display: inline-block; transform: rotate(-2deg); }
.on-air { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--tomato); padding: 3px 9px; border-radius: 999px; border: 2px solid var(--ink); }
.on-air::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.ch-num { display: inline-flex; align-items: center; justify-content: center; min-width: 2.7rem; height: 28px; padding: 2px 7px 0; font-family: var(--font-screen); font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; background: var(--blue); border: 2px solid var(--ink); border-radius: 8px; }
.smpte { height: 10px; border-radius: 99px; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--pink) 0 14.28%, var(--sun) 14.28% 28.56%, var(--teal) 28.56% 42.84%, var(--lime) 42.84% 57.12%, var(--grape) 57.12% 71.4%, var(--tomato) 71.4% 85.68%, var(--blue) 85.68% 100%); }
.scanlines { position: relative; }
.scanlines::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); border-radius: inherit; }
.leader { flex: 1; border-bottom: 2px dotted currentColor; opacity: .35; margin: 0 10px; transform: translateY(-4px); min-width: 16px; }

/* ── Tube TV ─────────────────────────────────────────────────────────
   <div class="tv" style="--shell: var(--teal)">
     <div class="tv-screen">…</div>
     <div class="tv-panel"><i class="tv-knob"></i><i class="tv-knob"></i><span class="tv-grille"></span></div>
   </div> */
.tv {
  --shell: var(--grape);
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--shell);
  border: 3px solid var(--ink); border-radius: 26px;
  padding: 16px 16px 12px;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.14), inset 0 4px 0 rgba(255,255,255,.28), 6px 6px 0 var(--ink);
}
.tv::before, .tv::after { /* little feet */
  content: ''; position: absolute; bottom: -12px; width: 26px; height: 10px; background: var(--ink); border-radius: 0 0 6px 6px;
}
.tv::before { left: 18%; } .tv::after { right: 18%; }
.tv-screen {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #243377 0%, #121C5C 55%, #0A1036 100%);
  color: #EAF2FF;
  border: 3px solid var(--ink);
  border-radius: 18% / 14%;
  box-shadow: inset 0 0 26px rgba(0,0,0,.65), inset 0 0 0 5px rgba(0,0,0,.25);
}
.tv-screen::before { /* glass glare */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(90% 60% at 25% 12%, rgba(255,255,255,.22), transparent 55%);
}
.tv-screen::after { /* scanlines */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
.tv-panel { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.tv-knob { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 10%, #d9d9d9 12%, #9a9a9a 100%); border: 2px solid var(--ink); flex-shrink: 0; }
.tv-grille { flex: 1; height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 3px, transparent 3px 7px); }
.tv-label { font-family: var(--font-sans); font-weight: 900; font-size: .85rem; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }

/* screen text */
.screen-text { font-family: var(--font-screen); font-size: 1.25rem; line-height: 1.2; color: #EAF2FF; text-shadow: 0 0 6px rgba(143,200,255,.55); }

/* rotate shell colors down a list */
.shells > :nth-child(7n+1) { --shell: var(--teal); }
.shells > :nth-child(7n+2) { --shell: var(--pink); }
.shells > :nth-child(7n+3) { --shell: var(--blue); }
.shells > :nth-child(7n+4) { --shell: var(--grape); }
.shells > :nth-child(7n+5) { --shell: var(--lime); }
.shells > :nth-child(7n+6) { --shell: var(--tomato); }
.shells > :nth-child(7n+7) { --shell: var(--sky); }

/* ── Paper cards / notebook ──────────────────────────────────────── */
.card { color: var(--ink); background: var(--paper-2); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 6px 6px 0 var(--ink); }
.notebook {
  position: relative; color: var(--ink); line-height: 32px; background-color: #FFFEF8;
  background-image: linear-gradient(90deg, transparent 58px, #FF8FB0 58px 60px, transparent 60px), repeating-linear-gradient(0deg, transparent 0 31px, #BFD7FF 31px 32px);
  border: 3px solid var(--ink); border-radius: 6px 18px 18px 6px; box-shadow: 6px 6px 0 var(--ink);
}

/* ── Sections ────────────────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-top: 8px; text-wrap: balance; }
.section-head p { color: var(--ink-2); margin-top: 12px; font-size: 1.08rem; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer { margin-top: 40px; padding: 48px 0 56px; border-top: 3px solid var(--ink); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand { font-family: var(--font-hand); font-size: 2rem; transform: rotate(-2deg); }
.footer-brand span { color: var(--pink); }
.footer-text { color: rgba(255,246,230,.8); font-size: .9rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-links a { color: var(--paper); text-decoration: none; font-weight: 800; font-size: .92rem; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.25); }
.footer-links a:hover { background: var(--pink); }
.signoff { margin-top: 26px; text-align: center; font-family: var(--font-hand); font-size: 1.2rem; color: var(--paper); transform: rotate(-1deg); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }