/* shared/comic.css — the Gutterwork house style: an old comic book, printed a little off register.
   Fonts: Bangers (display), Luckiest Guy (bursts), Kalam (hand lettering), Comic Neue (body), Special Elite (indicia). */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Luckiest+Guy&family=Kalam:wght@400;700&family=Comic+Neue:ital,wght@0,400;0,700;1,400&family=Special+Elite&display=swap');

:root{
  --paper:#f1e6c8; --paper-2:#e5d7b0; --paper-3:#d9c79a; --ink:#1b1512; --ink-2:#4a3d33; --rule:#b9a77c;
  --c:#3a9fcf; --m:#c9487f; --y:#e9c64a; --k:#1b1512;               /* muted process inks */
  --red:#c8452d; --blue:#2f5f9e; --green:#5f8a5a; --purple:#6f4b8a; --orange:#d9853b; --teal:#3a8c86;
  --bubble:#fbf6e6; --caption:#f2d666; --shadow:6px 6px 0 var(--ink);
  --fd:"Bangers","Luckiest Guy",Impact,sans-serif; --fb:"Luckiest Guy","Bangers",Impact,sans-serif; --fh:"Kalam","Comic Neue",cursive; --fc:"Comic Neue","Comic Sans MS",system-ui,sans-serif; --fm:"Special Elite","Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fc);font-size:17px;line-height:1.5}
a{color:inherit}
::selection{background:var(--y);color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}

/* backdrop canvas (muted halftone shader) sits behind everything */
#backdrop{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
.paperize{position:relative}
.paperize:before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(circle at 20% 10%, rgba(255,255,255,.35), transparent 40%),
  repeating-radial-gradient(circle at 0 0, rgba(0,0,0,.035) 0 1px, transparent 1px 4px);}

/* ---- comic type */
.display{font-family:var(--fd);letter-spacing:.02em;text-transform:uppercase;line-height:.92;font-weight:400}
.hand{font-family:var(--fh)}
.mono{font-family:var(--fm);font-size:.82em;letter-spacing:.02em}
.ink-outline{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.offreg{position:relative;display:inline-block;color:var(--paper)}
.offreg:before,.offreg:after{content:attr(data-text);position:absolute;inset:0;z-index:-1;mix-blend-mode:multiply}
.offreg:before{color:var(--c);transform:translate(-4px,2px)} .offreg:after{color:var(--m);transform:translate(4px,-2px)}

/* ---- panels: thick ink borders, hard shadows, a nudge of rotation */
.panel{background:var(--bubble);border:3px solid var(--ink);box-shadow:var(--shadow);padding:22px 24px;position:relative}
.panel.tilt-l{transform:rotate(-.6deg)} .panel.tilt-r{transform:rotate(.7deg)}
.panel.paper{background:var(--paper)} .panel.yellow{background:var(--caption)} .panel.blue{background:#cfe3f0} .panel.pink{background:#f3d6df} .panel.mint{background:#d8ebd3}
.panel.dots{background-image:radial-gradient(rgba(27,21,18,.16) 1.2px, transparent 1.3px);background-size:6px 6px;background-color:var(--paper-2)}
.panel-grid{display:grid;gap:26px}

/* ---- caption box (the yellow rectangle at the top of a panel) */
.caption{display:inline-block;background:var(--caption);border:3px solid var(--ink);padding:6px 12px;font-family:var(--fh);font-weight:700;font-size:1.05em;box-shadow:4px 4px 0 var(--ink);transform:rotate(-1deg);text-transform:uppercase;letter-spacing:.02em}
.caption.small{font-size:.9em;padding:3px 9px}

/* ---- speech bubble and thought bubble */
.bubble{position:relative;background:var(--bubble);border:3px solid var(--ink);border-radius:30px 34px 28px 36px / 34px 28px 36px 30px;padding:20px 30px;font-family:var(--fh);font-weight:700;font-size:1.08em;line-height:1.35;box-shadow:4px 5px 0 var(--ink);display:inline-block;max-width:44ch;text-align:center;overflow-wrap:anywhere}
.bubble.oval{border-radius:46% 54% 52% 48% / 55% 45% 55% 45%;padding:22px 13%;max-width:30ch}   /* ellipses only for one or two short lines */
.bubble.rect{border-radius:14px}
.bubble:after,.bubble:before{content:"";position:absolute;width:0;height:0;border-style:solid}
.bubble.tail-bl:before{left:22%;bottom:-24px;border-width:26px 6px 0 18px;border-color:var(--ink) transparent transparent transparent}
.bubble.tail-bl:after{left:calc(22% + 3px);bottom:-17px;border-width:20px 4px 0 13px;border-color:var(--bubble) transparent transparent transparent}
.bubble.tail-br:before{right:22%;bottom:-24px;border-width:26px 18px 0 6px;border-color:var(--ink) transparent transparent transparent}
.bubble.tail-br:after{right:calc(22% + 3px);bottom:-17px;border-width:20px 13px 0 4px;border-color:var(--bubble) transparent transparent transparent}
.bubble.shout{border-radius:6px;clip-path:polygon(2% 12%,10% 0,22% 8%,34% 0,46% 9%,58% 0,70% 8%,82% 0,94% 10%,100% 24%,96% 40%,100% 56%,95% 72%,100% 88%,88% 100%,76% 92%,64% 100%,52% 92%,40% 100%,28% 92%,16% 100%,4% 90%,0 74%,5% 58%,0 42%,4% 26%);box-shadow:none;background:var(--caption);font-family:var(--fb);font-weight:400;letter-spacing:.02em}
.thought{border-radius:40px 46px 42px 48px / 46px 40px 48px 42px;box-shadow:4px 5px 0 var(--ink);padding:24px 34px}
.thought:after{content:"";position:absolute;left:14%;bottom:-22px;width:16px;height:16px;border:3px solid var(--ink);border-radius:50%;background:var(--bubble)}

/* ---- burst (POW!) */
.burst{display:inline-grid;place-items:center;font-family:var(--fb);color:var(--ink);background:var(--y);padding:26px 30px;text-transform:uppercase;font-size:1.6em;line-height:1;clip-path:polygon(50% 0,58% 14%,72% 4%,74% 20%,90% 14%,84% 30%,100% 34%,88% 46%,100% 60%,84% 64%,92% 82%,74% 76%,72% 96%,58% 84%,50% 100%,42% 84%,28% 96%,26% 76%,8% 82%,16% 64%,0 60%,12% 46%,0 34%,16% 30%,10% 14%,26% 20%,28% 4%,42% 14%);transform:rotate(-6deg)}
.burst.red{background:var(--red);color:var(--paper)} .burst.blue{background:var(--blue);color:var(--paper)} .burst.pink{background:var(--m);color:var(--paper)}

/* ---- buttons, chips, seal, price */
.btn{appearance:none;font:inherit;font-family:var(--fh);font-weight:700;font-size:15px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:8px 14px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .08s, box-shadow .08s;text-transform:uppercase;letter-spacing:.02em}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)} .btn:active,.btn[aria-pressed=true]{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);background:var(--caption)}
.btn.red{background:var(--red);color:var(--paper)} .btn.blue{background:var(--blue);color:var(--paper)} .btn.small{font-size:13px;padding:5px 10px;box-shadow:3px 3px 0 var(--ink)}
.chip{display:inline-block;font-family:var(--fm);font-size:12px;border:2px solid var(--ink);padding:2px 8px;background:var(--paper);letter-spacing:.04em}
.seal{width:112px;height:112px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;text-align:center;font-family:var(--fb);font-size:11px;line-height:1.1;text-transform:uppercase;background:var(--paper);box-shadow:inset 0 0 0 6px var(--paper), inset 0 0 0 8px var(--ink);padding:14px;transform:rotate(8deg)}
.price{display:inline-grid;place-items:center;border:3px solid var(--ink);background:var(--paper);font-family:var(--fb);padding:6px 10px;line-height:1}
.price b{font-size:1.6em} .price small{font-family:var(--fm);font-size:10px;letter-spacing:.06em}

/* ---- comic page header strip */
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.masthead h1{margin:0}
.masthead .issue{display:flex;gap:12px;align-items:center}

/* ---- top nav bar as a comic strip title strip */
header.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:3px solid var(--ink);box-shadow:0 3px 0 rgba(27,21,18,.15)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{font-family:var(--fd);font-size:26px;letter-spacing:.03em;text-decoration:none;display:flex;gap:10px;align-items:center;text-transform:uppercase}
.brand i{display:inline-grid;grid-template-columns:repeat(2,10px);gap:2px;transform:rotate(-8deg)}
.brand i b{width:10px;height:10px;display:block;border:2px solid var(--ink)}
.brand small{font-family:var(--fh);font-size:13px;font-weight:700;background:var(--caption);border:2px solid var(--ink);padding:1px 6px;transform:rotate(-3deg)}
nav a{text-decoration:none;font-family:var(--fh);font-weight:700;font-size:16px;margin-left:18px;padding:3px 6px;border:2px solid transparent}
nav a:hover{border-color:var(--ink);background:var(--caption);transform:rotate(-1.5deg)}

/* ---- gutters between "pages" */
.gutter-rule{height:0;border-top:3px dashed var(--ink);opacity:.5;margin:40px 0}
.sr{position:absolute;left:-9999px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}