/* Notebook: 24px squared paper. Every line box, margin and block height is a multiple of --g,
   and each text style is nudged down so its baseline sits on a grid line (top: L/2 - 0.3F). */
@font-face{font-family:"MH Caps";src:url(fonts/MaciejHand-Caps.ttf) format("truetype");font-display:block;ascent-override:95%;descent-override:35%;line-gap-override:0%}
@font-face{font-family:"MH Raw";src:url(fonts/MaciejHand-Raw.ttf) format("truetype");font-display:block;ascent-override:95%;descent-override:35%;line-gap-override:0%}
@font-face{font-family:"MH Clean";src:url(fonts/MaciejHand-Clean.ttf) format("truetype");font-display:block;ascent-override:95%;descent-override:35%;line-gap-override:0%}
:root{
  --g:24px;
  --paper:#f6f8f6; --grid:#d9e2ea; --ink:#23308f; --ink-soft:#4b56a6; --note:#fffbe8; --print:#fff; --red:#d8394f;
  --hand:"MH Raw",cursive; --head:"MH Caps","MH Raw",cursive; --body:"MH Clean","MH Raw",cursive;
  --ui:"Poppins",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:var(--g) var(--g);color:var(--ink);font-family:var(--hand)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{display:block;width:100%;height:auto}
p,h1,h2,h3,ul{margin:0}
.wrap{max-width:1056px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:var(--g) calc(var(--g)*2)}

/* ---- baseline helper: every text style sets --f and --l ---- */
.logo b,.logo small,nav.menu a,.hi,.sig,h2.sec,.tile .cap,.post time,.post h3,.post p,.lite b,.lite span,.lite .tag,
.links a,.game h1,.game .lead,.game .when,.desc p,ul.feat li,.reviews h3,.reviews a,.back{
  font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3);font-weight:400}

/* header */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--g) 20px;flex-wrap:wrap}
.logo{text-decoration:none;display:block}
.logo b{display:block;font-family:var(--head);--f:clamp(46px,9vw,84px);--l:96px}
.logo small{display:block;font-family:var(--hand);--f:24px;--l:24px}
.top.slim .logo b{--f:clamp(34px,6vw,46px);--l:48px}
svg.wave{display:block;width:min(420px,100%);height:var(--g)}
.top.slim svg.wave{width:min(260px,100%)}
nav.menu{display:flex;gap:0 20px;flex-wrap:wrap}
nav.menu a{text-decoration:none;--f:24px;--l:24px}
nav.menu a:hover{text-decoration:underline;text-underline-offset:3px}

/* intro + memo (the memo is a separate slip of paper, so it may tilt) */
.intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--g) 28px;margin-top:calc(var(--g)*2);align-items:start}
.hi{--f:25px;--l:24px;max-width:31ch}
.sig{font-family:var(--head);--f:32px;--l:48px}
.memo{background:var(--note);box-shadow:inset 0 0 0 1.5px var(--ink),3px 4px 0 #23308f22;border-radius:3px;padding:16px 18px;transform:rotate(1.2deg)}
.memo h2{font:400 30px/1 var(--head);margin:0 0 4px}
.memo p{font:400 20px/1.25 var(--hand);margin:0 0 12px}
form.sub{display:flex;gap:8px;flex-wrap:wrap}
form.sub input{flex:1 1 160px;min-width:0;font:400 15px var(--ui);padding:9px 12px;background:#fff;border:1.5px solid var(--ink);color:var(--ink);border-radius:4px}
form.sub button{font:400 20px var(--hand);padding:6px 16px;background:var(--ink);color:#fff;border:0;border-radius:4px;cursor:pointer}
.note{font:400 18px var(--hand);margin-top:8px}
.note:empty{display:none}

/* sections: heading baseline sits on the dashed line */
h2.sec{font-family:var(--head);--f:40px;--l:48px;margin-top:calc(var(--g)*2);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h2.sec small{font:400 22px var(--hand);color:var(--ink-soft)}
.rule{height:var(--g);background:repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 13px) 0 0/100% 1.5px no-repeat;opacity:.7}

/* stamps are inline so they never grow a line box */
.stamp{font:400 16px/1 var(--hand);font-style:normal;color:var(--red);border:1.5px solid var(--red);border-radius:4px;padding:1px 6px;white-space:nowrap}

/* pasted prints: the picture tilts, its caption stays on the line */
.print{background:var(--print);padding:8px;box-shadow:0 1px 2px #0002,0 6px 18px #23308f14}
.print img{object-fit:cover}
.grid{columns:3 240px;column-gap:24px}
.tile{break-inside:avoid;display:block;text-decoration:none;padding-bottom:var(--g)}
.tile .print{transition:transform .2s}
.tile:nth-child(3n+1) .print{transform:rotate(-1.1deg)}
.tile:nth-child(3n+2) .print{transform:rotate(.8deg)}
.tile:nth-child(3n) .print{transform:rotate(-.4deg)}
.tile:hover .print{transform:rotate(0) translateY(-3px)}
.tile .cap{display:block;--f:27px;--l:24px;padding-left:4px}

/* news */
.news{display:grid;gap:var(--g);max-width:768px}
.post{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 16px;align-items:start}
.post time{--f:21px;--l:24px;color:var(--ink-soft)}
.post h3{--f:26px;--l:24px}
.post p{font-family:var(--body);--f:21px;--l:24px}
.post a{text-underline-offset:3px}

/* itch lite */
.lite{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--g) 18px;align-items:start}
.lite a{text-decoration:none;display:block}
.lite .print{padding:5px}
.lite b{display:block;--f:20px;--l:24px}
.lite span{display:block;--f:17px;--l:24px;color:var(--ink-soft)}
.lite .tag{display:block;font-style:normal;--f:16px;--l:24px}

/* footer */
footer.foot{margin-top:calc(var(--g)*2)}
.links{display:flex;flex-wrap:wrap;gap:0 22px}
.links a{--f:22px;--l:24px}

/* game page */
.game{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--g) 36px;margin-top:calc(var(--g)*2);align-items:start}
.game h1{font-family:var(--head);--f:clamp(48px,9vw,88px);--l:96px}
.game h1 .stamp{font-size:22px;vertical-align:middle}
.game .lead{--f:26px;--l:24px;margin-bottom:var(--g)}
.game .when{--f:23px;--l:24px;margin-bottom:var(--g)}
.desc p{font-family:var(--body);--f:21px;--l:24px;margin-bottom:var(--g);max-width:42ch}
ul.feat{padding-left:22px;margin-bottom:var(--g)}
ul.feat li{font-family:var(--body);--f:21px;--l:24px}
.stores{display:flex;flex-wrap:wrap;gap:var(--g) 12px;margin-bottom:var(--g)}
.stores a{display:block;height:calc(var(--g)*2);line-height:calc(var(--g)*2);font:400 22px/48px var(--hand);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:5px;padding:0 14px;background:var(--note)}
.stores a:hover,.stores a.main{background:var(--ink);color:#fff}
.reviews h3{--f:26px;--l:48px}
.reviews a{--f:21px;--l:24px;text-underline-offset:3px}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g);align-items:start}
.shots .print:nth-child(3n+1){transform:rotate(-1deg)}
.shots .print:first-child:nth-last-child(2n+1){grid-column:1/-1}
.shots .print:nth-child(3n+2){transform:rotate(1.1deg)}
.shots .print:nth-child(3n){transform:rotate(-.6deg)}
.back{display:inline-block;--f:22px;--l:24px;margin-top:calc(var(--g)*2)}

@media (max-width:760px){
  .intro,.game{grid-template-columns:1fr}
  .logo b{--l:72px}
  .game h1{--l:72px}
  .post{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.tile .print{transition:none}}

/* ---- pens and pencil ---- */
:root{
  --blue:#23308f; --black:#1c1c22; --red:#c4314a; --green:#1d6a47; --pencil:#5d5e66;
  --u1:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 8%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22p%22 x=%220%22 y=%22-50%25%22 width=%22100%25%22 height=%22200%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.4%22 numOctaves=%222%22 seed=%223%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.6%22/%3E%3C/filter%3E%3Cpath d=%22M3 4.8 C 50 3.4 120 5.9 197 3.6%22 stroke=%22%2355565e%22 stroke-opacity=%220.8%22 stroke-width=%221.5%22 fill=%22none%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3Cpath d=%22M8 5.3 C 70 4.2 140 5.4 190 4.4%22 stroke=%22%2355565e%22 stroke-opacity=%220.35%22 stroke-width=%221.1%22 fill=%22none%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3C/svg%3E");
  --u2:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 8%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22p%22 x=%220%22 y=%22-50%25%22 width=%22100%25%22 height=%22200%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.4%22 numOctaves=%222%22 seed=%223%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.6%22/%3E%3C/filter%3E%3Cpath d=%22M2 3.9 C 60 5.8 130 2.6 196 4.7%22 stroke=%22%2355565e%22 stroke-opacity=%220.8%22 stroke-width=%221.5%22 fill=%22none%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3Cpath d=%22M10 4.6 C 80 5.4 150 3.4 199 5.2%22 stroke=%22%2355565e%22 stroke-opacity=%220.3%22 stroke-width=%221.1%22 fill=%22none%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3C/svg%3E");
  --u3:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 8%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22p%22 x=%220%22 y=%22-50%25%22 width=%22100%25%22 height=%22200%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.4%22 numOctaves=%222%22 seed=%223%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.6%22/%3E%3C/filter%3E%3Cpath d=%22M4 3.4 Q 100 6.6 198 3.9%22 stroke=%22%2355565e%22 stroke-opacity=%220.8%22 stroke-width=%221.6%22 fill=%22none%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3Cpath d=%22M2 4.4 Q 90 5.9 185 4.8%22 stroke=%22%2355565e%22 stroke-opacity=%220.3%22 stroke-width=%221%22 fill=%22none%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3C/svg%3E");
  --rule:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 8%22 preserveAspectRatio=%22none%22%3E%3Cfilter id=%22p%22 x=%220%22 y=%22-50%25%22 width=%22100%25%22 height=%22200%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.4%22 numOctaves=%222%22 seed=%223%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.6%22/%3E%3C/filter%3E%3Cpath d=%22M3 2.8 C 300 1.6 650 4.4 992 2.2%22 stroke=%22%2355565e%22 stroke-opacity=%220.75%22 stroke-width=%221.4%22 fill=%22none%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3Cpath d=%22M14 3.6 C 330 2.6 640 4.1 968 3.1%22 stroke=%22%2355565e%22 stroke-opacity=%220.35%22 stroke-width=%221.1%22 fill=%22none%22 stroke-linecap=%22round%22 filter=%22url%28%23p%29%22/%3E%3C/svg%3E");
}
/* black pen for titles, red for dates and stamps, green for reviews, pencil for side notes */
.logo b,h2.sec,.game h1,.sig{color:var(--black)}
.post time,.game .when{color:var(--red)}
.stamp{color:var(--red);border-color:var(--red)}
.reviews{color:var(--green)}
h2.sec small,.lite span,.post time{font-family:var(--hand)}
h2.sec small,.lite span{color:var(--pencil)}

/* pencil rule under section headings, never quite straight or full width */
.rule{background:var(--rule) 0 -1px/calc(100% - 6px) 8px no-repeat;opacity:1}

/* pencil underlines */
a{text-decoration:none}
.post p a,.desc a{background:var(--u2) 0 calc(100% - 2px)/100% 6px no-repeat}
.links a,.reviews a,.back,nav.menu a{position:relative}
.links a::after,.reviews a::after,.back::after,nav.menu a::after{content:"";position:absolute;left:-3px;right:-4px;bottom:-2px;height:7px;background:var(--u1) 0 0/100% 100% no-repeat}
.links a:nth-child(3n+2)::after,.reviews a:nth-of-type(3n+2)::after{background-image:var(--u2)}
.links a:nth-child(3n)::after,.reviews a:nth-of-type(3n)::after{background-image:var(--u3)}
nav.menu a::after{opacity:0;transition:opacity .15s}
nav.menu a:hover{text-decoration:none}
nav.menu a:hover::after,nav.menu a:focus-visible::after{opacity:1}

/* ---- media: trailer, screenshots, lightbox ---- */
.media{display:grid;gap:var(--g)}
button.print{display:block;width:100%;border:0;font:inherit;color:inherit;cursor:zoom-in;text-align:left}
.video{position:relative;display:block;transform:rotate(.6deg)}
.video .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#fffbe8;box-shadow:inset 0 0 0 2.5px var(--black),2px 3px 0 #0003;transition:transform .15s}
.video .play::after{content:"";position:absolute;left:31px;top:23px;border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent var(--red)}
.video:hover .play{transform:scale(1.07)}
.more{justify-self:start;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font-family:var(--hand);--f:22px;--l:24px;font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3)}
.more::after{content:"";position:absolute;left:-3px;right:-4px;bottom:-2px;height:7px;background:var(--u3) 0 0/100% 100% no-repeat}
.press{margin-top:var(--g)}
.press h3{color:var(--red);font-family:var(--hand);font-weight:400;--f:26px;--l:48px;font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3)}
.press p{font-family:var(--hand);--f:21px;--l:24px;font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3)}
.press a{background:var(--u1) 0 calc(100% - 2px)/100% 6px no-repeat}
.press small{font-size:17px;color:var(--pencil)}
.lb{position:fixed;inset:0;z-index:50;background:#14151bf2;display:grid;place-items:center;padding:calc(56px + env(safe-area-inset-top,0px)) max(56px,env(safe-area-inset-right,0px)) calc(56px + env(safe-area-inset-bottom,0px)) max(56px,env(safe-area-inset-left,0px))}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 10px 40px #0008;background:#fff;padding:8px}
.lb button{position:absolute;background:none;border:0;color:#fffbe8;font:400 54px/1 var(--hand);cursor:pointer;padding:8px 14px}
.lb-x{top:calc(8px + env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px))}
.lb-p{left:max(4px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb-n{right:max(4px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:#fffbe8;font:400 22px var(--hand)}
@media (max-width:560px){.lb{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}.lb-p,.lb-n{top:auto;bottom:calc(4px + env(safe-area-inset-bottom,0px));transform:none}}

/* ---- news years ---- */
.years{display:inline-flex;gap:0 14px;flex-wrap:wrap;margin-left:10px}
.yr{background:none;border:0;padding:0 2px;cursor:pointer;font:400 22px/1 var(--hand);color:var(--pencil);position:relative}
.yr[aria-pressed="true"]{color:var(--red)}
.yr[aria-pressed="true"]::after{content:"";position:absolute;left:-4px;right:-5px;bottom:-2px;height:7px;background:var(--u2) 0 0/100% 100% no-repeat}
.yr:hover{color:var(--ink)}
.post ul{margin:0;padding-left:20px}
.post li{font-family:var(--body);--f:21px;--l:24px;font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3)}
.post p+p{margin-top:0}
.nimgs{display:flex;flex-wrap:wrap;gap:var(--g) 18px;margin-top:var(--g);align-items:flex-start}
.nimgs .print{width:min(260px,100%);padding:5px}
.nimgs .print:nth-child(odd){transform:rotate(-.8deg)}
.nimgs .print:nth-child(even){transform:rotate(.9deg)}
.older{display:inline-block;margin-top:var(--g);background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font-family:var(--hand);--f:22px;--l:24px;font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3)}
.older::after{content:"";position:absolute;left:-3px;right:-4px;bottom:-2px;height:7px;background:var(--u1) 0 0/100% 100% no-repeat}

[hidden]{display:none!important}

/* ---- mobile menu: always underlined in pencil, like old hyperlinks ---- */
@media (max-width:760px),(hover:none) and (pointer:coarse){
  nav.menu{gap:var(--g) 18px}
  nav.menu a::after{opacity:1;background:var(--ink);-webkit-mask:var(--u1) 0 0/100% 100% no-repeat;mask:var(--u1) 0 0/100% 100% no-repeat}
  nav.menu a:nth-child(3n+2)::after{-webkit-mask-image:var(--u2);mask-image:var(--u2)}
  nav.menu a:nth-child(3n)::after{-webkit-mask-image:var(--u3);mask-image:var(--u3)}
}

/* ---- headings wrap in whole 48px lines (no flex row-gap), so text stays on the grid ---- */
h2.sec{display:block}
h2.sec small{margin-left:14px}
.years{display:inline;margin-left:14px}
.yr{margin-right:14px;vertical-align:baseline}
@media (max-width:760px){
  .grid{columns:2;column-gap:14px}
  .tile .cap{--f:22px;padding-left:2px}
  .tile .print{padding:5px}
}

/* ---- section dividers: long pencil line between sections, headings without underline ---- */
h2.sec{margin-bottom:var(--g)}
.rule.sep{margin-top:calc(var(--g)*2)}
.rule.sep+h2.sec{margin-top:var(--g)}

/* ---- link underlines in blue pen (news keeps pencil) ---- */
.links a::after,.reviews a::after,.back::after,nav.menu a::after,.more::after,.press a::after{background:currentColor;-webkit-mask:var(--u1) 0 0/100% 100% no-repeat;mask:var(--u1) 0 0/100% 100% no-repeat}
.links a:nth-child(3n+2)::after,.reviews a:nth-of-type(3n+2)::after,nav.menu a:nth-child(3n+2)::after{-webkit-mask-image:var(--u2);mask-image:var(--u2)}
.links a:nth-child(3n)::after,.reviews a:nth-of-type(3n)::after,nav.menu a:nth-child(3n)::after,.more::after{-webkit-mask-image:var(--u3);mask-image:var(--u3)}
.press a{background:none;position:relative}
.press a::after{content:"";position:absolute;left:-3px;right:-4px;bottom:-2px;height:7px}

/* ---- signature: blue pen, right under the end of the intro text ---- */
.intro>div:first-child{width:fit-content;max-width:100%}
.intro .sig{color:var(--ink);text-align:right}

/* ---- privacy page ---- */
.policy{margin-top:calc(var(--g)*2);max-width:46rem}
.policy .ph{font-family:var(--head);font-weight:400;color:var(--black);--f:clamp(36px,6vw,52px);--l:72px;font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3);margin:0}
.policy .plang{font-family:var(--hand);--f:22px;--l:24px;font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3);margin-bottom:var(--g)}
.policy .ps{font-family:var(--hand);font-weight:400;color:var(--black);--f:28px;--l:48px;font-size:var(--f);line-height:var(--l);position:relative;top:calc(var(--l)/2 - var(--f)*.3);margin:var(--g) 0 0}
.policy p{max-width:none}
.policy .when{margin-bottom:var(--g)}
.policy a{text-underline-offset:3px}

/* ---- links in the signup slip ---- */
.memo .follow{font:400 19px/1.35 var(--hand);margin:10px 0 0}
.memo .follow a{text-underline-offset:3px}
.memo .follow a{position:relative;white-space:nowrap}
.memo .follow a::after{content:"";position:absolute;left:-2px;right:-3px;bottom:-1px;height:6px;background:currentColor;-webkit-mask:var(--u1) 0 0/100% 100% no-repeat;mask:var(--u1) 0 0/100% 100% no-repeat}
.memo .follow a:nth-of-type(3n+2)::after{-webkit-mask-image:var(--u2);mask-image:var(--u2)}
.memo .follow a:nth-of-type(3n)::after{-webkit-mask-image:var(--u3);mask-image:var(--u3)}

/* ---- desktop: signup slip sits right under the menu, next to the logo + intro ---- */
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"logo nav" "logo memo" "text memo";grid-template-rows:calc(var(--g)*4) auto 1fr;column-gap:28px;align-items:start}
  .hero .top,.hero .intro{display:contents}
  .hero .top>div{grid-area:logo}
  .hero nav.menu{grid-area:nav;justify-self:end;margin-top:calc(var(--g)*2);flex-wrap:nowrap;white-space:nowrap}
  .hero .intro>div:first-child{grid-area:text;margin-top:calc(var(--g)*2)}
  .hero .memo{grid-area:memo}
}

/* ---- studio paper (replaces the squared notebook): blank ivory sheet, coffee ring, graphite, tape, one pencil sketch ---- */
body{background-color:#f7f3ea;background-image:url(img/paper/ivory.jpg);background-size:512px 512px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;background:radial-gradient(ellipse at 50% 40%,transparent 55%,#8a6a3a14 100%)}
.wrap{position:relative}
.wrap:has(.hero)::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:multiply;background:
  url(img/paper/coffee.png) right 0 top 250px/230px no-repeat,
  url(img/paper/thumb.png) right 180px top 1650px/90px no-repeat,
  url(img/paper/thumb.png) left 60px top 3100px/80px no-repeat}
.wrap:has(.hero)::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;background:
  linear-gradient(#6b6d7633,#6b6d7633) left 0 top 300px/100% 1px no-repeat,
  linear-gradient(90deg,#6b6d7626,#6b6d7626) left 49% top 0/1px 420px no-repeat}
.tile .print,.lite .print{position:relative}
.tile .print::before,.lite .print::before{content:"";position:absolute;z-index:2;pointer-events:none;top:0;left:50%;width:92px;height:28px;
  transform:translate(-50%,-12px) rotate(-3deg);background:url(img/paper/tape.png) center/100% 100% no-repeat;opacity:.9}
.tile:nth-child(2n) .print::before{transform:translate(-50%,-12px) rotate(4deg);left:40%}
.memo{box-shadow:inset 0 0 0 1.5px var(--ink),2px 3px 0 #23308f1a}
.hero::after{content:"";position:absolute;top:-22px;right:0;width:330px;height:100px;pointer-events:none;z-index:0;opacity:.6;mix-blend-mode:multiply;background:
  url(img/doodles/jumps.png) right 4px top 4px/124px auto no-repeat,
  url(img/doodles/lamp.png) right 150px top 0/40px auto no-repeat,
  url(img/doodles/numbers.png) right 212px top 10px/34px auto no-repeat}
.wrap:has(.hero) .foot{position:relative;padding-bottom:calc(var(--g)*5)}
.wrap:has(.hero) .foot::before{content:"";position:absolute;left:-8px;bottom:0;width:300px;height:110px;pointer-events:none;opacity:.55;mix-blend-mode:multiply;background:
  url(img/doodles/people.png) left 0 bottom 0/130px auto no-repeat,
  url(img/doodles/triangle.png) left 150px bottom 6px/130px auto no-repeat}
@media (max-width:899px){.hero::after{top:-22px;right:-6px;transform:scale(.75);transform-origin:top right}}