/* User-selected illustrated comic reference, v2.
   Print theme and inset black masthead intentionally mirror the reference.
   Supplied local display fonts are preview-only pending web-license review.
   Decorative handwritten notes are explicitly requested comic storytelling.
   DESIGN_VARIANCE 8 / MOTION_INTENSITY 2 / VISUAL_DENSITY 6. */
/* Approved open-license replacement; alias keeps existing comic styles intact. */
@font-face{font-family:Cocoa;src:url('./RubikDirt-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#f4f1e7;--ink:#171915;--yellow:#ffdb25}
body{padding:10px;background:var(--ink)}
.masthead{height:76px;max-width:1540px;padding:0 28px;background:var(--ink);border:1px solid #ffffff22;padding-right:270px}
.wordmark{font-family:Cocoa,Onest,sans-serif;font-weight:400;font-size:clamp(28px,3.2vw,45px);color:var(--yellow);letter-spacing:-1px;transform:rotate(-2deg);line-height:1}
.wordmark span{display:none}
.gm-sign{width:48px;height:48px;transform:none;border:0;box-shadow:none}
.gm-sign img{transform:none}
.telegram{top:24px;right:max(37px,calc((100vw - 1484px)/2));background:var(--yellow);border-color:var(--yellow);box-shadow:none;font-weight:800}
.telegram-arrow{display:block;width:24px;height:24px;flex:none}
main{max-width:1540px;padding:7px;min-height:calc(100dvh - 96px);border:2px solid var(--ink);background:var(--paper);display:block}
.hero{grid-template-columns:1.5fr 1fr;gap:0;align-items:stretch;min-height:0}
.comic-art{position:relative;min-width:0;overflow:hidden;border:3px solid var(--ink);background:#363e30;align-self:stretch;aspect-ratio:1.2}
.illustration{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}
.handnote{position:absolute;color:#f7f2df;font-family:Cocoa,Onest,sans-serif;font-size:clamp(14px,1.6vw,23px);line-height:1.07;transform:rotate(-9deg);text-shadow:1px 2px 3px #111;pointer-events:none}
.handnote:after{content:'';display:block;margin-top:6px;background:var(--yellow);width:72%;height:4px;transform:rotate(-3deg)}
.note-one{left:4%;top:5%;background:#171915a6;padding:5px 8px}
.note-two{left:4%;bottom:5%;background:#171915a6;padding:5px 8px}
.note-three{top:5%;left:69%;color:var(--ink);text-shadow:1px 1px 1px #f4f1e7;background:#f4f1e7c4;padding:4px}
.note-four{left:68%;bottom:5%;max-width:29%;font-size:clamp(13px,1.5vw,22px);background:#171915b3;padding:5px}
.copy{position:relative;padding:clamp(25px,3vw,46px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;background:var(--paper)}
.copy:before{content:'';position:absolute;z-index:-1;inset:0;background-image:radial-gradient(#4f513c28 .7px,transparent .9px);background-size:4px 4px;mask-image:linear-gradient(120deg,transparent 55%,#000);pointer-events:none}
h1{font-family:Onest,Arial,sans-serif;font-size:clamp(38px,4.8vw,73px);font-weight:900;letter-spacing:-.07em;line-height:.99;margin:0 0 24px;text-transform:none;position:relative}
h1 span{white-space:normal;transform:none}h1 .before{margin-bottom:6px;transform:none}
.now{border:0;background:none;box-shadow:none;padding:0;margin:0;width:auto;transform:none}
h1:after{content:'';display:block;width:48%;height:8px;background:var(--yellow);transform:rotate(-4deg);margin:18px 0 0 38%;clip-path:polygon(0 25%,96% 0,100% 62%,3% 100%)}
.narration{font-size:clamp(14px,1.27vw,18px);line-height:1.5;max-width:460px}
.narration .personal{font-size:.94em;margin-top:18px;color:#42453b}
.story-button{align-self:flex-start;min-width:85%;justify-content:space-between;border:2px solid var(--ink);box-shadow:3px 3px 0 #343729;font-size:clamp(14px,1.25vw,18px);margin-top:30px;padding:15px 20px;white-space:nowrap}
.margin-note{font-family:Cocoa,Onest,sans-serif;font-size:17px;line-height:1.05;position:absolute;right:9px;bottom:13px;transform:rotate(-10deg);opacity:.7}
@media(min-width:1024px) and (max-height:800px){h1{font-size:clamp(44px,4.8vw,68px);margin-bottom:22px}.copy{padding:22px 30px 48px}.narration{font-size:15px}.story-button{margin-top:24px}.margin-note{font-size:14px;bottom:7px}}
@media(min-width:768px) and (max-width:1023px){.hero{grid-template-columns:1.5fr 1fr}.copy{padding:18px 20px 38px}h1{font-size:38px}.narration{font-size:12px}.story-button{padding:10px;font-size:11px;min-width:100%;min-height:44px;gap:8px;margin-top:18px}.margin-note{font-size:12px}.masthead{padding-left:15px}.wordmark{font-size:32px}.handnote{font-size:15px}.note-four{font-size:12px}.comic-art{aspect-ratio:auto;min-height:440px}.illustration{object-fit:fill}}
@media(max-width:767px){
  body{height:100dvh;min-height:0;overflow:hidden;padding:5px;background:var(--ink)}
  .masthead{height:48px;padding:0 12px}.wordmark{font-size:26px;letter-spacing:-1px}.gm-sign{width:30px;height:30px}.gm-sign img{width:26px;height:26px}
  main{height:calc(100dvh - 110px - env(safe-area-inset-bottom));max-height:none;min-height:0;overflow-y:auto;padding:4px}
  .hero{display:flex;gap:0;min-height:0;max-width:none}.comic-art{width:100%;aspect-ratio:1.2;min-height:0;flex-shrink:0;border:2px solid var(--ink)}
  .illustration{object-fit:cover}.handnote{font-size:16px}.note-one{left:3%;top:4%;padding:4px}.note-two{left:3%;bottom:4%;padding:4px}.note-three{font-size:14px}.note-four{font-size:12px;padding:3px;bottom:4%}
  .note-three{display:none}
  .copy{padding:24px 18px 35px;display:block}h1{font-size:clamp(32px,9.5vw,48px);line-height:1;letter-spacing:-.065em;margin:0 0 22px}
  h1 span{white-space:normal}h1 br{display:none}.now{padding:0;margin:4px 0 0;box-shadow:none;border:0;transform:none;background:none}
  h1:after{height:6px;margin-top:12px;margin-left:43%;width:50%}.narration{font-size:14px;line-height:1.55}.narration .personal{font-size:13px;margin-top:12px}
  .story-button{width:100%;margin-top:24px;font-size:14px;padding:13px 12px;gap:10px;min-height:50px}.margin-note{display:none}
  .telegram{left:5px;right:5px;bottom:0;top:auto;height:calc(52px + env(safe-area-inset-bottom));padding:0 14px;border:4px solid var(--ink);border-bottom-width:calc(4px + env(safe-area-inset-bottom));box-shadow:none;background:var(--yellow);font-size:14px;gap:14px}
  .telegram:hover,.telegram:active{transform:none;box-shadow:none}
}
@media(max-width:359px){.wordmark{font-size:23px}.copy{padding:20px 13px 28px}.handnote{font-size:13px}.note-three{font-size:12px}.note-four{font-size:10px}.narration{font-size:13px}.story-button{font-size:13px}}