/* ══════════════════════════════════════════════════════════════════════
    freecoding.school · UNIFIED COMIC THEME
    one stylesheet shared by index.html, the 21 lane hubs and every one
    of the 1,168 static lesson pages — so the whole site is one look.

    art direction · GINTAMA (manga ink, screentone, focus lines)
                  × RICK AND MORTY (portal green, wobbly energy)
    ══════════════════════════════════════════════════════════════════ */
:root{
  /* manga paper + ink */
  --paper:#fffdf8; --paper-2:#fdf3e3; --card:#fffdf7;
  --ink:#1f1a17; --ink-2:#4a423c; --dim:#8c8177; --hairline:#e6dac6;
  /* gintama */
  --gin-red:#d1483f; --gin-silver:#cdd9e2; --gin-blue:#4a6b8a;
  /* rick and morty */
  --portal:#a8bf8f; --portal-2:#c2d4a5; --slime:#8fbf6f;
  --rm-cyan:#8fb8d4; --rm-yellow:#f2c14e; --rm-pink:#e08a9a; --rm-lab:#3a3330;
  /* platform accents */
  --g-blue:#7fa8c9; --g-red:#d1483f; --g-yellow:#f2c14e; --g-green:#a8bf8f;
  --ig-soft:linear-gradient(45deg,#fa7e1e,#d62976,#962fbf);
  --pow:#f2c14e; --ok:#6b9455;
  --done:#6b9455; --done-2:#7aa363; --done-bg:#eaf3de; --done-soft:#e2eed2; --done-txt:#5c8248;
  --dk-1:#2a2422; --dk-2:#3a322e; --dk-3:#4d443e; --dk-txt:#f5ede0; --dk-dim:#b5a99a; --dk-dim-2:#8c8177;
  --tint-warm:#fdf1d8; --tint-rose:#f7e0dd; --tint-grey:#efe8dc; --bulb-2:#e8a33f;
  --frame:14px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --comic-font:'Bangers','Arial Black','Segoe UI',cursive;
  --mono:ui-monospace,'Cascadia Code','Consolas',Menlo,monospace;
  /* legacy aliases · older markup on these pages still names these */
  --bg:var(--paper); --panel:var(--card); --line:var(--ink);
  --text:var(--ink); --muted:var(--dim); --acc:var(--gin-blue);
  --good:var(--ok); --warn:var(--gin-red);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;padding:var(--frame);background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(13,13,13,.055) 1.1px,transparent 1.1px);background-size:7px 7px}
::selection{background:var(--portal);color:var(--ink)}

/* the fixed comic page frame, same as the app */
body::before{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;
  border:var(--frame) solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 5.5px var(--ink), inset 0 0 70px rgba(13,13,13,.09)}

.wrap{max-width:880px;margin:0 auto;padding:26px 20px 70px}
a{color:var(--gin-blue);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline;text-decoration-thickness:2px}

/* site bar */
.sitebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:3.5px solid var(--ink);border-radius:14px;background:var(--card);
  padding:9px 16px;box-shadow:5px 5px 0 var(--ink);margin-bottom:20px}
.sitebar .logo-dots{display:flex;gap:3px}
.sitebar .logo-dots i{width:9px;height:9px;border-radius:50%;display:block;border:1.5px solid var(--ink)}
.sitebar .logo-dots i:nth-child(1){background:var(--g-blue)} .sitebar .logo-dots i:nth-child(2){background:var(--g-red)}
.sitebar .logo-dots i:nth-child(3){background:var(--g-yellow)} .sitebar .logo-dots i:nth-child(4){background:var(--g-green)}
.sitebar .bn{font-weight:900;letter-spacing:-.02em;font-size:16px;color:var(--ink)}
.sitebar .bn b{background:var(--ig-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.sitebar .sp{flex:1}
.sitebar .tagpill{font-family:var(--comic-font);font-size:13px;letter-spacing:.08em;background:var(--pow);
  color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:1px 12px;box-shadow:2px 2px 0 var(--ink)}

/* breadcrumb */
nav.crumb{font-size:12.5px;color:var(--dim);margin-bottom:16px;font-weight:700}
nav.crumb a{color:var(--ink-2)} nav.crumb a:hover{color:var(--gin-red)}

/* headings */
h1{font-family:var(--comic-font);font-weight:400;font-size:clamp(30px,5.6vw,50px);line-height:1.02;
  letter-spacing:.02em;margin:0 0 14px;text-transform:uppercase;
  text-shadow:3px 3px 0 rgba(13,13,13,.19)}
h2{font-family:var(--comic-font);font-weight:400;font-size:26px;letter-spacing:.04em;text-transform:uppercase;
  margin:32px 0 10px;color:var(--ink)}
h3.chap{font-family:var(--comic-font);font-weight:400;font-size:21px;color:var(--ink);
  margin:28px 0 8px;text-transform:uppercase;letter-spacing:.05em}

/* issue plate (the comic cover strip on lesson pages) */
.plate{border:4px solid var(--ink);border-radius:20px;background:var(--lg,var(--ig-soft));color:#fff;
  position:relative;overflow:hidden;box-shadow:8px 8px 0 var(--ink);padding:22px 24px;margin:0 0 24px}
.plate::before{content:'';position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.95) 1.5px,transparent 1.5px);background-size:12px 12px}
.plate .row{position:relative;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.plate .series{font-family:var(--comic-font);font-size:15px;letter-spacing:.08em;background:#fff;color:var(--ink);
  padding:1px 13px;border-radius:999px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.plate .issue{font-family:var(--comic-font);font-size:14px;letter-spacing:.07em;background:var(--pow);color:var(--ink);
  padding:1px 12px;border-radius:999px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(2deg)}
.plate h1{position:relative;margin:0;color:#fff;text-shadow:3px 3px 0 var(--ink),6px 6px 0 rgba(0,0,0,.22)}
.plate .cast{position:relative;margin-top:12px;font-size:12.5px;font-weight:800}
.plate .cast .vs{font-family:var(--comic-font);font-size:18px;color:var(--pow);margin:0 6px}

/* tl;dr as the hero's speech bubble */
.tldr{position:relative;background:var(--card);border:4px solid var(--ink);border-radius:18px;
  padding:16px 20px;margin:20px 0;box-shadow:6px 6px 0 var(--ink);font-size:15.5px;font-weight:600;line-height:1.65}
.tldr b{display:block;font-family:var(--comic-font);font-weight:400;font-size:15px;letter-spacing:.09em;
  color:var(--gin-red);margin-bottom:4px;text-transform:uppercase}

/* story article = comic panel */
article{background:var(--card);border:4px solid var(--ink);border-radius:16px;box-shadow:7px 7px 0 var(--ink);
  padding:22px 24px;margin:26px 0;position:relative;font-size:15.5px;line-height:1.8;font-weight:500}
article::before{content:'THE STORY';position:absolute;top:-15px;left:16px;font-family:var(--comic-font);
  font-size:15px;letter-spacing:.08em;background:var(--pow);color:var(--ink);border:3px solid var(--ink);
  border-radius:8px;padding:0 13px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg)}
article p{margin:12px 0} article p:first-child{margin-top:4px} article p:last-child{margin-bottom:0}
article code,.pts code{background:var(--rm-lab);color:var(--slime);padding:2px 8px;border-radius:6px;
  font-size:.87em;font-family:var(--mono)}
article em{font-style:normal;color:var(--gin-blue);font-weight:800}
article b{color:var(--gin-red)}

/* key points = power-ups */
ul.pts{margin:10px 0;padding:0;list-style:none}
ul.pts li{margin:9px 0;padding-left:30px;position:relative;font-size:14.5px;font-weight:600;line-height:1.6}
ul.pts li::before{content:'\26A1';position:absolute;left:0;top:0;font-size:17px}
h2+ul.pts{border:4px solid var(--ink);border-radius:18px;background:linear-gradient(150deg,var(--tint-warm),var(--card));
  box-shadow:7px 7px 0 var(--ink);padding:18px 22px}
/* common mistakes = villain attack */
ul.pts.mistakes{background:linear-gradient(150deg,#1a0710,#0d1a12);color:var(--tint-rose);
  border:4px solid var(--ink);box-shadow:7px 7px 0 var(--gin-red);border-radius:18px;padding:18px 22px}
ul.pts.mistakes li{font-weight:500}
ul.pts.mistakes li::before{content:'\1F4A5'}
ul.pts.mistakes code{background:#000;color:var(--slime)}

/* try-it = boss battle */
.challenge{border:5px solid var(--ink);border-radius:20px;padding:22px 24px;margin:26px 0;position:relative;
  color:#fff;background:var(--lg,linear-gradient(135deg,#962fbf,#d62976));box-shadow:9px 9px 0 var(--ink);
  overflow:hidden;font-size:15.5px;font-weight:600;line-height:1.7}
.challenge::before{content:'';position:absolute;inset:0;opacity:.17;
  background-image:radial-gradient(#fff 1.4px,transparent 1.4px);background-size:11px 11px}
.challenge b{position:relative;display:inline-block;font-family:var(--comic-font);font-weight:400;font-size:16px;
  letter-spacing:.08em;background:var(--gin-red);color:#fff;border:3px solid var(--ink);border-radius:8px;
  padding:0 12px;box-shadow:3px 3px 0 var(--ink);margin-right:8px;text-transform:uppercase}

/* example code = training ground */
pre{background:var(--dk-1);border:4px solid var(--ink);border-radius:16px;box-shadow:7px 7px 0 var(--ink);
  padding:18px;overflow-x:auto;font-size:13px;line-height:1.6;color:var(--dk-txt);font-family:var(--mono);
  position:relative;margin:22px 0}
pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}

/* CTA */
.cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,var(--portal),var(--slime));
  color:var(--ink);font-weight:800;font-size:15px;padding:12px 24px;border:3.5px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);margin:22px 0 8px;transition:transform .12s,box-shadow .12s}
.cta:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.cta:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

/* prev / next */
.pn{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:18px;
  border-top:3px dashed var(--ink);font-size:14px;font-weight:700;flex-wrap:wrap}
.pn a{display:inline-block;background:var(--card);border:3px solid var(--ink);border-radius:12px;
  padding:8px 14px;box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
.pn a:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

/* lane / chapter cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:16px 0}
.card{background:var(--card);border:3px solid var(--ink);border-radius:13px;padding:12px 14px;font-size:14px;
  font-weight:700;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(-2px,-2px) rotate(-.7deg);box-shadow:6px 6px 0 var(--ink)}
.card a{color:var(--ink)}
.card .n{color:var(--gin-red);font-family:var(--comic-font);font-size:15px;letter-spacing:.04em;font-weight:400}

/* lane hub specifics */
.lane-plate{border:5px solid var(--ink);border-radius:24px;background:var(--lg);color:#fff;position:relative;
  overflow:hidden;box-shadow:10px 10px 0 var(--ink);padding:30px 28px;margin:0 0 26px}
.lane-plate::before{content:'';position:absolute;inset:0;opacity:.2;
  background-image:radial-gradient(rgba(255,255,255,.95) 1.5px,transparent 1.5px);background-size:12px 12px}
.lane-plate .lw{position:relative;font-family:var(--comic-font);font-size:15px;letter-spacing:.13em;
  text-transform:uppercase;background:rgba(0,0,0,.4);display:inline-block;padding:2px 14px;border-radius:999px;
  border:2.5px solid #fff}
.lane-plate h1{position:relative;color:#fff;margin:12px 0 8px;text-shadow:4px 4px 0 var(--ink)}
.lane-plate p{position:relative;font-size:15px;font-weight:600;max-width:600px;margin:0;line-height:1.6}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 24px}
.stat-row .s{background:var(--card);border:3px solid var(--ink);border-radius:13px;padding:10px 16px;
  box-shadow:4px 4px 0 var(--ink);text-align:center;min-width:104px}
.stat-row .s .v{font-family:var(--comic-font);font-size:26px;line-height:1;color:var(--gin-red)}
.stat-row .s .k{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:2px}

/* the crawlable all-lanes index every page carries */
.lanenav{border:3.5px dashed var(--ink);border-radius:18px;background:var(--card);padding:18px 20px;margin:32px 0 0;
  box-shadow:5px 5px 0 rgba(13,13,13,.16)}
.lanenav h2{margin:0 0 10px;font-size:20px}
.lanenav ul{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:6px}
.lanenav li{margin:0}
.lanenav a{font-size:13px;font-weight:700;color:var(--ink-2);display:block;padding:4px 8px;border-radius:8px}
.lanenav a:hover{background:var(--pow);color:var(--ink);text-decoration:none}

footer{color:var(--dim);font-size:12.5px;margin-top:36px;border-top:3px dashed var(--ink);padding-top:18px;
  font-weight:600;line-height:1.8}
footer b{color:var(--gin-red)}

@media(max-width:640px){
  h1{font-size:clamp(26px,8vw,38px)}
  article,.tldr,.challenge{padding:16px 16px}
  .plate,.lane-plate{padding:20px 18px}
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* ══════════════════════════════════════════════════════════════════════
   COZY INDIE COMIC PASS
   The reference page is flat: white gutters, thin even ink outlines,
   near-square panel corners, NO screentone wash, NO hard drop shadows on
   the comic itself. Depth stays where it was asked for (the catalog
   cards); the comic page goes flat and clean, like something printed.
   ══════════════════════════════════════════════════════════════════ */
body{background-image:none;background:var(--paper)}
.comic-page{background:var(--paper);background-image:none}

/* panels · thin outline, barely-rounded corners, real white gutters */
.comic-wrap{--gutter:13px}
.comic-grid{gap:var(--gutter)}
.panel,.powerups,.villain,.boss,.art,.bubble,.tasks,.training,.stub{
  border-width:2.5px;border-radius:5px;box-shadow:none}
.panel{padding:18px 20px;--tilt:0deg;transform:none}
.panel.tilt-l,.panel.tilt-r{--tilt:0deg}
.panel.splash{border-width:3px;box-shadow:none}
.comic-grid>.sp-4,.comic-grid>.sp-5,.comic-grid>.sp-7,.comic-grid>.sp-8{--tilt:0deg}
/* caption boxes sit INSIDE the corner, like a printed caption box */
.caption{top:0;left:0;border-radius:0 0 5px 0;border-width:0 2.5px 2.5px 0;
  transform:none;box-shadow:none;padding:2px 12px 1px;font-size:14px}
.powerups{background:var(--tint-warm)}
.villain{background:var(--dk-1);color:var(--tint-rose);box-shadow:none}
.villain::before{opacity:.07}
.boss{box-shadow:none;border-width:3px}
.boss::before{opacity:.13}
.art{box-shadow:none}
.art .art-cap{border-radius:3px;box-shadow:none;border-width:2.5px;transform:none}
/* SFX letters break OUT of the panel, the way they do on the page */
.art .art-sfx{top:-12px;right:-6px;z-index:5;-webkit-text-stroke:4px var(--ink);
  text-shadow:3px 3px 0 var(--ink)}
/* speech bubbles: rounder, softer, hand-lettered feel */
.bubble{border-radius:22px;box-shadow:none;border-width:2.5px}
.bubble::before{border-right-width:15px;left:-15px}
.bubble::after{border-right-width:11px;left:-9px}
.bubble .who{font-size:14px;letter-spacing:.06em}
.bubble-row .avatar{border-width:2.5px;border-radius:5px;box-shadow:none}
/* the issue cover: flat colour block, thin frame, no glow */
.cover{border-width:3px;border-radius:6px;box-shadow:none}
.cover .clines{display:none}
.cover::before{opacity:.12}
.cover .series,.cover .issue-no{box-shadow:none;border-width:2.5px;transform:none;border-radius:4px}
.cover h1{text-shadow:3px 3px 0 var(--ink)}
.lane-hero{border-width:3px;border-radius:6px;box-shadow:none}
.lane-hero::before{opacity:.12}
.tasks,.training,.narrator{border-radius:5px;box-shadow:none;border-width:2.5px}
.task,.ep,.sr,.cbtn,.btn,.npill{border-radius:5px;box-shadow:none;border-width:2.5px}
.task.done,.ep.done{box-shadow:none}
.cbtn:hover,.btn:hover,.task:hover,.ep:hover,.sr:hover{transform:translate(-1px,-1px);
  box-shadow:2px 2px 0 var(--ink)}
.cbtn:active,.btn:active{transform:translate(1px,1px);box-shadow:none}
.pow{box-shadow:none;border-width:3px}
.stat,.badge,.why .w,.masthead,.marquee,.item,.sitenav,.cmp-wrap,.cat-rail,.cat-bar{
  border-radius:6px;box-shadow:none;border-width:2.5px}
.stat:hover,.badge:hover{transform:translateY(-3px)}
.strip3{border-width:3px;padding:0;gap:3px;box-shadow:none;border-radius:6px}
.pn3{border-radius:3px}
.pn3 .tone{display:none}
.pn3 .no{box-shadow:none;border-radius:0 0 4px 0;align-self:flex-start;margin:-16px 0 12px -16px;
  border-width:0 2.5px 2.5px 0;padding:2px 11px}
.pn3 .say{border-radius:20px;box-shadow:none;border-width:2.5px}
/* the lane cards keep a soft lift, the catalog keeps its float */
.lane-card{border-width:2.5px;border-radius:8px;box-shadow:0 4px 10px -4px rgba(31,26,23,.22)}
.lane-card:hover{transform:translateY(-5px) rotate(0deg);box-shadow:0 12px 22px -8px rgba(31,26,23,.30)}
.lane-top{border-bottom-width:2.5px}
.lane-top .issue{box-shadow:none;border-width:2.5px;transform:none;border-radius:4px}
.ccard{border-width:2.5px;border-radius:8px;
  box-shadow:0 6px 14px -6px rgba(31,26,23,.26), 0 16px 28px -18px rgba(31,26,23,.28)}
.ccard:hover,.ccard:focus-visible{transform:translateY(-7px) rotate(0deg);
  box-shadow:0 14px 24px -8px rgba(31,26,23,.30), 0 28px 48px -22px rgba(31,26,23,.32)}
.cc-art{border-bottom-width:2.5px}
.cc-issue{box-shadow:none;border-width:2px;transform:none;border-radius:4px}
.cc-art::before{opacity:.10}
.pick-card{border-width:3px;border-radius:10px;box-shadow:0 8px 18px -8px rgba(31,26,23,.26)}
.pick-card:hover{transform:translateY(-4px);box-shadow:0 16px 28px -10px rgba(31,26,23,.30)}
.pick-card .who{border-width:2.5px;border-radius:6px;box-shadow:none}
.pick-card .why{box-shadow:none;border-width:2px}
.hero .eyebrow{box-shadow:none;border-width:2.5px;transform:none}
.sec-kicker{box-shadow:none;border-width:2.5px;transform:none;border-radius:4px}
.page-frame{border-width:10px;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3.5px var(--ink)}
.page-frame .cnr,.page-frame .tick{display:none}
.nav{border-bottom-width:2.5px;box-shadow:none;background:rgba(255,253,248,.93)}
.turn-page{background:var(--paper);background-image:none}
.frow{border-radius:5px}