/* Find the Nerd Kids, as a comic book.
   Chosen by Alf on 2026-10-16 from preview concept "Kids 08. Comic strip".
   Colours sampled from the Kids stills, named by source:
     --ground  #af3e27  Octa Relay found screen ground
     --ink     #010315  Kids title screen sky
     --yellow  #ffed32  Kids found screen headline, You found your nerd!
     --white   #fcfbfc  Kids logo lettering
     --cyan    #27c9ec  Octa Relay cyan buildings (dots, numbers and focus rings, never small text)
   Fonts are self-hosted from assets/fonts/: Luckiest Guy (Apache 2.0) and
   Comic Neue Bold (SIL OFL 1.1). Licence texts sit beside the font files. */
@font-face{font-family:"Luckiest Guy";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/luckiest-guy-400-latin.woff2) format("woff2")}
@font-face{font-family:"Comic Neue";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/comic-neue-700-latin.woff2) format("woff2")}

:root{
  --ground:#af3e27; --ink:#010315; --yellow:#ffed32; --white:#fcfbfc; --cyan:#27c9ec;
  --pop:"Luckiest Guy","Arial Black",Impact,sans-serif;
  --say:"Comic Neue","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--white);font:700 19px/1.5 var(--say);overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
/* Luckiest Guy reads best in capitals */
.issue,.cap b,.bub,.burst,.h h3,.diff li,.btn{text-transform:uppercase}

/* Halftone dots behind everything, drifting slowly with scroll. Decoration only. */
.dots{position:fixed;inset:-200px 0;z-index:0;pointer-events:none;opacity:.22;will-change:transform;
  background-image:radial-gradient(var(--ink) 2.2px,transparent 2.6px);background-size:16px 16px}

.crumbs{position:relative;z-index:3;max-width:1160px;margin:0 auto;padding:14px 16px 0;font:700 15px/1.3 var(--say)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}

.book{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:16px 16px 60px}

/* Masthead: A comic cover, title left, cover art leaning right */
.mast{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center;background:var(--ink);
  border:6px solid var(--ink);box-shadow:10px 10px 0 var(--ink);outline:4px solid var(--white);outline-offset:-14px;
  padding:40px 44px;position:relative;overflow:hidden}
.issue{display:inline-flex;flex-wrap:wrap;border:3px solid var(--white);font:400 15px/1.15 var(--pop);letter-spacing:.06em;margin:0 0 20px}
.issue span{padding:9px 12px}
.issue span:first-child{background:var(--yellow);color:var(--ink)}
.issue .ver{border-left:3px solid var(--white);color:var(--white)}
.issue .ver:empty{display:none}
h1{font:400 clamp(52px,8.6vw,118px)/.9 var(--pop);margin:0;color:var(--yellow);text-transform:uppercase;
  transform:rotate(-3deg);transform-origin:left bottom;
  text-shadow:4px 4px 0 var(--ground),8px 8px 0 var(--ink)}
h1 small{display:block;font-size:.42em;color:var(--white);text-shadow:3px 3px 0 var(--ground)}
.blurb{margin:26px 0 0;max-width:34ch;font-size:clamp(19px,1.9vw,23px);line-height:1.45}
.mast .cover{transform:rotate(6deg)}
.mast .cover img{filter:drop-shadow(8px 8px 0 var(--ground))}

/* Panels page */
h2{font:400 clamp(30px,4.4vw,52px)/1 var(--pop);text-transform:uppercase;margin:64px 0 22px;color:var(--white);
  text-shadow:4px 4px 0 var(--ink);letter-spacing:.02em}
.shots-from{margin:-10px 0 18px;max-width:60ch;color:var(--white);font-size:16px;line-height:1.45}
.page{display:grid;gap:14px;grid-template-columns:repeat(6,1fr);background:var(--white);padding:14px;
  border:6px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.panel{position:relative;margin:0;border:5px solid var(--ink);background:var(--ink);overflow:hidden;min-height:220px}
.panel picture{display:block;height:100%}
.panel img{width:100%;height:100%;object-fit:cover}
.p1{grid-column:1/4}.p2{grid-column:4/7}
.p3{grid-column:1/5}.p4{grid-column:5/7}
.p5{grid-column:1/3}.p6{grid-column:3/7}
.p4 img{object-position:30% 50%}.p5 img{object-position:70% 50%}
.note{margin:14px 0 0;font-size:16px}

/* Narration box, top left of a panel */
.cap{position:absolute;top:0;left:0;max-width:78%;margin:0;padding:10px 14px;background:var(--yellow);color:var(--ink);
  border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);font:700 17px/1.3 var(--say)}
.cap b{font:400 15px/1 var(--pop);letter-spacing:.05em;margin-right:6px}
/* Speech bubble, quoting words from the game */
.bub{position:absolute;right:14px;bottom:18px;max-width:62%;padding:12px 18px;background:var(--white);color:var(--ink);
  border:4px solid var(--ink);border-radius:50% / 42%;font:400 clamp(18px,2vw,24px)/1.1 var(--pop);text-align:center;letter-spacing:.02em}
.bub::after{content:"";position:absolute;left:22%;bottom:-20px;width:24px;height:22px;background:var(--white);
  border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:skewX(-30deg) rotate(30deg)}
.bub.left{right:auto;left:14px}
.burst{position:absolute;right:3%;bottom:6%;width:clamp(150px,22vw,230px);aspect-ratio:1;display:grid;place-items:center;text-align:center;
  background:var(--yellow);color:var(--ink);font:400 clamp(20px,2.4vw,28px)/1 var(--pop);padding:28px;
  clip-path:polygon(50% 0,61% 22%,85% 8%,78% 34%,100% 40%,80% 56%,95% 80%,68% 74%,60% 100%,47% 78%,26% 96%,26% 70%,0 74%,16% 52%,2% 30%,27% 30%,22% 6%,41% 20%)}
.burst span{transform:rotate(-8deg)}

/* Helpers: Three tall panels with sound effects */
.helpers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:var(--white);padding:14px;border:6px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.h{position:relative;border:5px solid var(--ink);background:var(--ink);padding:26px 22px 24px;color:var(--white);overflow:hidden;min-height:250px}
.h::before{content:"";position:absolute;inset:0;opacity:.35;background-image:radial-gradient(var(--cyan) 2px,transparent 2.5px);background-size:12px 12px;
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 60%);mask-image:linear-gradient(135deg,#000,transparent 60%)}
.h h3{position:relative;font:400 clamp(34px,4.4vw,54px)/1 var(--pop);color:var(--yellow);transform:rotate(-6deg);transform-origin:left center;
  text-shadow:3px 3px 0 var(--ground);margin:12px 0 22px}
.h p{position:relative;margin:0 0 12px;font-size:19px}
.cost{position:relative;display:inline-flex;align-items:baseline;gap:8px;border:3px solid var(--white);padding:6px 12px;font:700 17px/1 var(--say)}
.cost b{font:400 26px/1 var(--pop);color:var(--cyan)}
.earn{margin:18px 0 0;padding:16px 20px;background:var(--yellow);color:var(--ink);border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);max-width:760px}

/* Made for younger players: A plain list in a panel */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--white);padding:14px;border:6px solid var(--ink);box-shadow:10px 10px 0 var(--ink);color:var(--ink)}
.diff > div{border:5px solid var(--ink);padding:24px 26px}
.diff ul{list-style:none;margin:0;padding:0}
.diff li{font:400 clamp(22px,2.4vw,30px)/1.2 var(--pop);padding:10px 0;border-bottom:3px dashed var(--ink);letter-spacing:.02em}
.diff li:last-child{border:0}
.diff p{margin:0 0 12px}.diff p:last-child{margin:0}

/* To be continued: Where it stands */
.tbc{margin-top:64px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;background:var(--ink);border:6px solid var(--ink);
  outline:4px solid var(--white);outline-offset:-14px;padding:42px 44px;box-shadow:10px 10px 0 var(--ink)}
.tbc h2{margin:0 0 16px;color:var(--yellow);text-shadow:4px 4px 0 var(--ground)}
.tbc p{margin:0 0 12px;max-width:52ch}
.tbc p:last-child{margin:0}
.acts{display:flex;flex-direction:column;gap:14px;min-width:280px}
.btn{display:block;padding:18px 22px;min-height:60px;border:4px solid var(--white);background:var(--ground);color:var(--white);
  font:400 21px/1.1 var(--pop);letter-spacing:.04em;text-decoration:none;text-align:left;box-shadow:6px 6px 0 var(--white);
  transition:transform .12s,box-shadow .12s}
.btn.main{background:var(--yellow);color:var(--ink)}
.btn:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--white)}
a:focus-visible{outline:4px dashed var(--cyan);outline-offset:4px}

footer{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:0 16px 48px;font-size:16px}
footer ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{text-underline-offset:3px}
footer .fine{margin:14px 0 0}

/* Pop in: Panels land one after another */
.pop{opacity:0;transform:scale(.9) rotate(-1.5deg);transition:opacity .35s ease var(--d,0ms),transform .5s cubic-bezier(.2,1.6,.4,1) var(--d,0ms)}
.pop.in{opacity:1;transform:none}
.pop .bub,.pop .burst{transform:scale(0);transition:transform .45s cubic-bezier(.2,1.8,.4,1) calc(var(--d,0ms) + 350ms)}
.pop.in .bub,.pop.in .burst{transform:none}
.no-js .pop,.no-js .pop .bub,.no-js .pop .burst{opacity:1;transform:none}

@media (max-width:820px){
  body{font-size:18px}
  .mast{grid-template-columns:1fr;padding:30px 26px 34px;box-shadow:6px 6px 0 var(--ink)}
  .mast .cover{order:-1;width:min(220px,62%);justify-self:end;margin-bottom:-10px}
  .page{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--ink);padding:10px}
  .page .panel{grid-column:1/-1;min-height:0}
  .panel picture{height:auto}
  .panel img{aspect-ratio:16/9;height:auto}
  .cap{position:relative;max-width:none;border-right:0}
  .bub{position:relative;right:auto;left:auto;bottom:auto;display:block;max-width:none;margin:14px 14px 22px;border-radius:30px}
  .bub::after{bottom:-16px;transform:skewX(-30deg) rotate(30deg) scale(.8)}
  .bub.left{left:auto}
  .p6 .burst{position:relative;right:auto;bottom:auto;width:150px;margin:12px auto 16px;padding:22px;font-size:20px}
  .helpers,.diff{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--ink);padding:10px}
  .h{min-height:0}
  .earn{box-shadow:5px 5px 0 var(--ink)}
  .tbc{grid-template-columns:1fr;padding:32px 26px;box-shadow:6px 6px 0 var(--ink)}
  .acts{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pop,.pop .bub,.pop .burst{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .btn:hover{transform:none}
  .dots{transform:none !important}
}