@font-face{font-family:"Aceh Soft";src:url(assets/fonts/AcehSoft-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Aceh Soft";src:url(assets/fonts/AcehSoft-Medium.otf) format("opentype");font-weight:500;font-display:swap}
:root{--g0:#F4EA04;--g1:#FACB09;--grad:linear-gradient(90deg,var(--g0) 0%,var(--g1) 100%);--y:#F7D506;--y-hi:#FFE873;--y-mid:#F9D71C;--y-lo:#EDBE00;--y-deep:#C99A00;--ink:#111}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:"Aceh Soft",system-ui,sans-serif;color:var(--y-deep);
 background:var(--grad);-webkit-font-smoothing:antialiased}
.stop{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;
 /* the real Artistic gradient, sampled from the logo: left #F4EA04 to right #FACB09 */
 background:var(--grad)}
#wall{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:auto}
#stage{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
#stage.on{opacity:1}
#stage canvas{display:block;width:100%;height:100%;cursor:var(--pen) 3 21,crosshair;touch-action:pan-y}
#stage canvas.hand{cursor:pointer}
.stop{--pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1.2-4.4L15.8 5a2 2 0 0 1 2.8 0l.4.4a2 2 0 0 1 0 2.8L8.4 18.8z' fill='%23F7D506' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")}
#still{position:absolute;inset:0;pointer-events:none}
#stillImg{position:absolute;left:50%;bottom:max(9%,64px);transform:translateX(-50%);width:min(100%,1100px);height:auto;display:block;user-select:none;-webkit-user-drag:none}
.sidepost{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;transition:opacity 1.2s ease;pointer-events:none;backface-visibility:hidden}
.sidepost.cur{opacity:1}
.scr{position:absolute;overflow:hidden;pointer-events:none}
.scr img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill}
.peek{position:absolute;pointer-events:none;background-repeat:no-repeat;background-position:0 0}
.hot{position:absolute;pointer-events:auto;background:transparent;border:0;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hot:focus-visible{outline:3px solid var(--y-deep)}
#labels{position:absolute;inset:0;pointer-events:none}
#labels span{position:absolute;transform:translate(-50%,0);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--y-deep);white-space:nowrap;opacity:0;transition:opacity .35s ease}
#labels.on span{opacity:1}
[hidden]{display:none!important}
.tools{position:absolute;z-index:5;left:clamp(14px,2.2vw,30px);top:clamp(14px,2.4vh,26px);display:flex;gap:8px}
.tool{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 11px;border-radius:999px;border:2px solid var(--y-deep);
 background:rgba(255,240,140,.55);color:var(--y-deep);font:700 14px/1 "Aceh Soft",system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;
 transition:background .15s,color .15s,transform .15s;-webkit-tap-highlight-color:transparent}
.tool svg{width:18px;height:18px}
.tool:hover{background:rgba(255,246,190,.85)}
.tool.on{background:var(--y-deep);color:var(--y-hi)}
.tool:active{transform:scale(.96)}
.tool:focus-visible{outline:3px solid var(--y-deep);outline-offset:2px}
.stop.pen #wall,.stop.pen #stage canvas{touch-action:none}
/* overlays */
.sheet{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(249,215,28,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet[hidden],.box[hidden],.fly[hidden]{display:none}
.x{position:absolute;top:10px;right:12px;width:44px;height:44px;border:0;background:none;font-size:34px;line-height:1;color:var(--y-deep);cursor:pointer}
.sheet-in{position:relative;width:min(560px,92vw);padding:56px 0 24px}
.issues{display:grid;gap:18px}
.issues a{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;text-decoration:none;color:var(--y-deep);font-weight:700;font-size:17px}
.issues img{width:96px;height:96px;border-radius:10px;object-fit:cover;box-shadow:0 10px 22px -10px rgba(140,95,0,.6)}
/* v5: posters open as paper. 3D: the sheet itself flies off the table (#fly). Phones and screens: a CSS 3D card that rises from where it was tapped (#box) */
.box,.fly{position:fixed;inset:0;z-index:20}
.box-dim,.fly-dim{position:absolute;inset:0;background:rgba(104,72,0,.2);opacity:0;transition:opacity .55s ease}
.box-dim{backdrop-filter:blur(7px) saturate(.92);-webkit-backdrop-filter:blur(7px) saturate(.92)}
.box.on .box-dim,.fly.on .fly-dim{opacity:1}
.box-in{position:absolute;inset:0;display:grid;place-items:center;perspective:1500px;pointer-events:none}
.card{position:relative;transform-style:preserve-3d;pointer-events:auto;will-change:transform}
.card .face{display:block;max-width:min(900px,calc(100vw - 170px));max-height:82vh;max-height:82svh;border-radius:4px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 box-shadow:0 34px 60px -24px rgba(70,46,0,.62),0 6px 14px -6px rgba(70,46,0,.35)}
.card .back{position:absolute;inset:0;border-radius:4px;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;
 background:linear-gradient(115deg,#FDF4CF 0%,#F6E7A6 100%);box-shadow:0 34px 60px -24px rgba(70,46,0,.62)}
#flyCanvas{position:fixed;pointer-events:none}
#flyImg{position:fixed;display:block;opacity:0;pointer-events:none;transition:opacity .2s ease;user-select:none;-webkit-user-drag:none}
#flyImg.on{opacity:1}
.box .x,.fly .x,.box .nav,.fly .nav{position:fixed;z-index:2;display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;border:2px solid var(--y-deep);
 background:rgba(255,240,140,.92);color:var(--y-deep);font:700 34px/1 "Aceh Soft",system-ui,sans-serif;cursor:pointer;opacity:0;transition:opacity .35s ease .25s,transform .15s;-webkit-tap-highlight-color:transparent}
.box.on .x,.fly.ready .x,.box.on .nav,.fly.ready .nav{opacity:1}
.fly:not(.ready) .x,.fly:not(.ready) .nav{pointer-events:none;transition-delay:0s}
.box .x,.fly .x{top:18px;right:18px;font-size:32px}
.box .nav,.fly .nav{top:50%;margin-top:-26px;font-size:40px;padding-bottom:4px}
.box .prev{left:22px}.box .next{right:22px}
.box .nav:active,.fly .nav:active,.box .x:active,.fly .x:active{transform:scale(.94)}
.box .x:focus-visible,.fly .x:focus-visible,.nav:focus-visible{outline:3px solid var(--y-deep);outline-offset:2px}
#stage{transition:opacity .9s ease,filter .6s ease}
#wall{transition:filter .6s ease}
.stop.dimmed #stage,.stop.dimmed #wall{filter:blur(5px)}
.hot.post{border-radius:6px}
.wipefade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (max-aspect-ratio:1/1){#stillImg{top:47%;bottom:auto;transform:translate(-50%,-50%)}}
@media (max-width:700px){.card .face{max-width:90vw;max-height:66vh;max-height:66svh}.box .nav,.fly .nav{top:auto;bottom:calc(26px + env(safe-area-inset-bottom));margin-top:0}.box .prev{left:calc(50% - 70px)}.box .next{right:calc(50% - 70px)}.tools{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}.tool{height:44px;padding:0 16px 0 13px;font-size:15px}}
@media (prefers-reduced-motion:reduce){#stage{transition:none}.box-dim,.fly-dim,#flyImg{transition:none}}