/* Guess & Click — shared styles. The design system for every page; each page
   adds only its own small bits inline. Neon-studio dark, raspberry + purple + cyan. */

:root{
  --bg:#0A0912; --bg-2:#0E0C18; --surface:#151122; --surface-2:#1C1730;
  --ink:#F4F0FA; --muted:#A79FB8; --line:#272036;
  --magenta:#FF3DA6; --purple:#9B5CFF; --cyan:#35C6E8; --raspberry:#E11D66;
  --glow:0 0 18px rgba(255,61,166,.55), 0 0 40px rgba(155,92,255,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(155,92,255,.18), transparent 70%),
    radial-gradient(50% 45% at 12% 20%, rgba(255,61,166,.14), transparent 70%),
    radial-gradient(60% 60% at 50% 110%, rgba(53,198,232,.10), transparent 70%);
}
a{color:inherit}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px}
.script{font-family:"Kaushan Script",cursive}
.neon{color:#fff; text-shadow:var(--glow)}
h1,h2,h3{font-family:Sora,Inter,sans-serif; letter-spacing:-.02em; line-height:1.05; text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* nav */
nav{position:sticky; top:0; z-index:30; backdrop-filter:blur(10px); background:rgba(10,9,18,.72); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 24px; max-width:1100px; margin:0 auto}
.brand{display:inline-flex; align-items:center; gap:9px; font-family:Sora,Inter,sans-serif; font-weight:800; font-size:19px; color:#fff; text-decoration:none; letter-spacing:-.02em; white-space:nowrap}
.brand .mark{width:30px; height:30px; display:block}
.brand .amp{font-family:"Kaushan Script",cursive; font-weight:400; color:var(--magenta); text-shadow:0 0 14px rgba(255,61,166,.45); padding:0 2px}
.logo{font-family:"Kaushan Script",cursive; font-size:26px; color:#fff; text-shadow:var(--glow)}
.nav-links{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.nav-links a{color:var(--muted); text-decoration:none; font-size:15px; padding:8px 12px; border-radius:8px}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current=page]{color:#fff}
.nav-links .btn{margin-left:8px}
.btn{display:inline-block; border:0; cursor:pointer; font-family:Inter,sans-serif; font-weight:600; font-size:15px; padding:12px 20px; border-radius:999px; color:#fff; background:linear-gradient(120deg,var(--magenta),var(--purple)); box-shadow:0 8px 24px -8px rgba(255,61,166,.6); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 30px -8px rgba(255,61,166,.75)}
.btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.ghost{display:inline-block; font-weight:600; font-size:15px; padding:12px 20px; border-radius:999px; color:var(--ink); text-decoration:none; border:1px solid var(--line); background:var(--surface)}
.ghost:hover{border-color:var(--purple)}

/* hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:70px 0 54px}
/* The site's one authored motion moment: the hero settles into place on arrival.
   Everything else on the page holds still — that stillness is what makes this land. */
@media (prefers-reduced-motion:no-preference){
  .hero>div:first-child{animation:hero-settle .6s cubic-bezier(.16,1,.3,1) both}
  .hero .shot{animation:hero-settle .6s cubic-bezier(.16,1,.3,1) .12s both}
  @keyframes hero-settle{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
}
.eyebrow{font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin:0 0 18px}
.hero h1{font-size:clamp(36px,5.8vw,66px); font-weight:800; margin:0}
.hero .sub{font-size:clamp(16px,2vw,19px); color:var(--muted); margin:20px 0 0; max-width:52ch}
.hero .sub b{color:var(--ink)}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.shot{position:relative}
.shot img{width:100%; height:auto; border-radius:18px; border:1px solid var(--line); box-shadow:0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(155,92,255,.15)}
.shot .tagchip{position:absolute; left:16px; bottom:16px; background:rgba(10,9,18,.8); border:1px solid var(--line); backdrop-filter:blur(6px); padding:8px 13px; border-radius:999px; font-size:13px; color:var(--muted)}

/* page head (subpages) */
.page-head{padding:64px 0 10px; max-width:70ch}
.page-head h1{font-size:clamp(30px,4.6vw,44px); font-weight:800; margin:0}
.page-head p{color:var(--muted); font-size:clamp(15.5px,1.8vw,18px); margin:16px 0 0}
.page-head p b{color:var(--ink)}

/* signup */
.signup{margin:30px 0 0; scroll-margin-top:90px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; max-width:480px}
.signup form{display:flex; gap:10px; flex-wrap:wrap}
.signup input[type=email]{flex:1 1 220px; min-width:0; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:13px 15px; font-size:15px; font-family:inherit}
.signup input[type=email]:focus{outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(255,61,166,.18)}
.signup .fine{margin:12px 2px 0; font-size:12.5px; color:var(--muted)}
.signup .fine b{color:var(--ink)}
/* The beehiiv loader is async AND lazy — until the form is scrolled into view its iframe
   sits at 2000px while this box holds whatever we reserve. Reserve the form's real settled
   height or the page shows a void, then jumps when the form resolves. beehiiv renders it
   fixed-height: 47px measured live 2026-08-10 (single-row form; was 315px before beehiiv's
   redesign). Re-measure here if the box ever shows a void again. */
.signup .embed{min-height:47px}
.signup .embed iframe{width:100%!important; border:0; color-scheme:dark}

/* sections */
section{padding:56px 0; border-top:1px solid var(--line)}
.sec-head{text-align:center; max-width:60ch; margin:0 auto 34px}
.sec-head h2{font-size:clamp(24px,3.4vw,34px); font-weight:800; margin:0}
.sec-head p{color:var(--muted); margin:12px 0 0}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px}
.card .ico{font-size:26px}
.card h3{font-size:19px; margin:12px 0 6px}
.card p{color:var(--muted); font-size:14.5px; margin:0}
.card a{color:var(--ink)}

/* the index — the "what's here" section as full-width rows instead of three
   identical boxes: big Sora titles left, the promise right, hairline-divided.
   Linked rows glow neon on hover; the arrow is the affordance. */
.index{border-top:1px solid var(--line)}
.index-row{display:grid; grid-template-columns:1fr 1.2fr; gap:28px; align-items:center; padding:30px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit}
.index-row h3{font-family:Sora,Inter,sans-serif; font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.02em; margin:0; color:var(--ink); display:flex; align-items:center; gap:14px; transition:color .15s ease, text-shadow .15s ease}
.index-row h3 .ico{font-size:24px}
.index-row p{color:var(--muted); font-size:15px; margin:0}
.index-row p b{color:var(--ink)}
.index-row .go{color:var(--muted); font-weight:600; white-space:nowrap; margin-left:10px; transition:transform .15s ease, color .15s ease; display:inline-block}
a.index-row:hover h3{color:#fff; text-shadow:var(--glow)}
a.index-row:hover .go{color:var(--magenta); transform:translateX(4px)}
a.index-row:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
@media (max-width:820px){ .index-row{grid-template-columns:1fr; gap:8px; padding:24px 2px} }

/* snack / feature card */
.snack{background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:18px; padding:26px; max-width:720px; margin:0 auto}
.snack .label{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:600}
.snack h2,.snack h3{font-family:Sora,sans-serif; font-size:19px; margin:12px 0 8px; color:#fff}
.snack p{color:var(--muted); margin:0 0 8px}
.snack .src{font-size:13px; color:var(--muted)}
.snack .src a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--magenta); text-underline-offset:3px}
.snack .src a:hover{color:#fff; text-decoration-thickness:2px}

/* value band */
.band{background:radial-gradient(80% 120% at 20% 0%, rgba(155,92,255,.16), transparent 60%),var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:38px; text-align:center}

/* the subscribe peak — the one section that gets the full neon treatment:
   the band material at full strength, the ask in display scale, the script
   glowing. Everything else on the page stays quieter so this reads as the peak. */
.subscribe-band{background:radial-gradient(90% 130% at 50% 0%, rgba(155,92,255,.20), transparent 60%), radial-gradient(60% 90% at 15% 100%, rgba(255,61,166,.12), transparent 70%), var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:52px 28px 44px; text-align:center}
.subscribe-band .sec-head{margin-bottom:26px}
.subscribe-band .sec-head h2{font-size:clamp(30px,4.6vw,44px); color:#fff; text-shadow:0 0 24px rgba(155,92,255,.35)}
.subscribe-band .sec-head .script{display:block; font-size:clamp(26px,4vw,38px); margin-top:6px; color:var(--magenta); text-shadow:0 0 14px rgba(255,61,166,.45)}
.subscribe-band .signup{border:0; background:transparent; padding:0}
.band h2{font-size:clamp(23px,3.4vw,32px); margin:0 auto; max-width:24ch}
.band .script{color:var(--magenta); text-shadow:0 0 14px rgba(255,61,166,.45)}

/* sponsor strip */
.sponsor{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 26px}
.sponsor p{margin:0; color:var(--muted)} .sponsor b{color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--line); padding:40px 0 60px; color:var(--muted); font-size:14px; margin-top:56px}
.foot-in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
footer a{color:var(--muted); text-decoration:none; margin-right:16px; display:inline-block; padding:8px 0}
footer a:hover{color:var(--ink)}
footer a:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; color:var(--ink)}
.disc{margin-top:18px; font-size:12px; color:var(--muted); max-width:70ch}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:30px; padding:48px 0 36px}
  .shot{order:-1}
  .cards{grid-template-columns:1fr}
  /* when the nav wraps to two rows, balance them instead of ragged-left */
  .nav-in{justify-content:center}
  .nav-links{justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} html{scroll-behavior:auto} }

/* comic strips (comics.html)
   Deliberately NOT rounded and NOT shadowed like .shot — comic/README.md: "Comics do not
   have rounded corners." The art carries its own white ground, so the frame is a hairline
   only, and the strip runs full width because the joke is in panel three. */
.strip{margin:0 0 40px}
.strip figure{margin:0}
.strip img{width:100%; height:auto; display:block; border:1px solid var(--line)}
.strip .label{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin:0 0 8px}
.strip h3{font-family:Sora,sans-serif; font-size:19px; margin:0 0 14px; color:#fff}
.strip details{margin-top:12px; border-top:1px solid var(--line); padding-top:12px}
.strip summary{cursor:pointer; color:var(--muted); font-size:14px; list-style:none}
.strip summary::-webkit-details-marker{display:none}
.strip summary::before{content:"▸ "; color:var(--cyan)}
.strip details[open] summary::before{content:"▾ "}
.strip summary:hover{color:var(--ink)}
.strip summary:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.strip .script-lines{margin:12px 0 0; color:var(--muted); font-size:14.5px}
.strip .script-lines p{margin:0 0 8px}
.strip .script-lines b{color:var(--ink)}