@font-face{font-family:"Bagel Fat One";src:url(/assets/fonts/BagelFatOne-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/HankenGrotesk-400.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Gochi Hand";src:url(/assets/fonts/GochiHand-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --kunyit:#f7b801;   /* turmeric: the studio's sign colour */
  --tinta:#17174a;    /* indigo ink: all text */
  --kertas:#fffdf6;   /* plain page */
  --buku:#f6efdd;     /* the game's sketchbook paper */
  --garis:#c9d4e6;    /* ruled line */
  --pinggir:#e9a9a0;  /* margin line */
  --pena:#2b5cb8;     /* the game's blue pen */
  --sign:"Bagel Fat One",system-ui,sans-serif;
  --text:"Hanken Grotesk",system-ui,sans-serif;
  --hand:"Gochi Hand",cursive;
  --gutter:clamp(16px,3.2vw,44px);
  --edge:max(var(--gutter),calc((100vw - 1500px) / 2));
  --mark:min(21.6vw,50svh,380px);  /* wordmark size. The whole hero scales from this. 380px matches the 1500px content column. */
  --mark-edge:max(var(--gutter),calc((100vw - var(--mark) * 3.94) / 2));  /* where the wordmark starts */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--tinta);font:400 1.125rem/1.55 var(--text);overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:4px}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:2px}
.on-ink :focus-visible{outline-color:var(--kunyit)}

/* ---------- the sign: home page top. The wordmark itself is what's talking. ---------- */
.sign{position:relative;background:var(--kunyit);min-height:min(100svh,920px);display:flex;flex-direction:column;overflow:hidden}
.sign nav{display:flex;justify-content:flex-end;gap:1.5em;padding:var(--gutter) var(--mark-edge);font-weight:600}
.sign-say{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,5vh,4rem) var(--mark-edge) 0}
.bubble{align-self:flex-start;position:relative;margin:0 0 .62em calc(var(--mark) * .78);padding:.3em .72em .36em;background:var(--tinta);color:var(--kunyit);font:400 max(2rem,calc(var(--mark) * .28))/1.05 var(--sign);border-radius:.62em .8em .7em .24em;transform-origin:12% 100%;animation:pop .45s cubic-bezier(.2,1.5,.4,1)}
.bubble::after{content:"";position:absolute;left:.5em;top:calc(100% - 2px);width:.62em;height:.62em;background:var(--tinta);clip-path:polygon(0 0,100% 0,8% 100%)}
.bubble-note{position:absolute;top:var(--gutter);left:var(--mark-edge);margin:0;max-width:min(27em,calc(100vw - var(--mark-edge) * 2 - 20rem));font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.4;font-weight:600}
@keyframes pop{from{transform:scale(.72) rotate(-5deg)}}
.wordmark{margin:0;padding:0 0 .25em;font:400 var(--mark)/.86 var(--sign);letter-spacing:-.015em;text-align:center;white-space:nowrap}

/* ---------- home page: what we made ---------- */
.made{padding:clamp(3rem,8vw,7rem) var(--edge);overflow-x:clip}
.made h2{margin:0 0 .5em;font:400 clamp(2.2rem,6vw,5rem)/1 var(--sign)}
.game-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.game-row a.shot{display:block;transform:rotate(-1.1deg);transition:transform .18s}
.game-row a.shot:hover{transform:rotate(.4deg) scale(1.01)}
.game-row img{outline:3px solid var(--tinta)}
.game-row h3{margin:0 0 .3em;font:400 clamp(1.8rem,3.6vw,3rem)/1.05 var(--sign)}
.game-row p{margin:0 0 1em;max-width:30em}
.status{font-weight:700}
.game-row+.game-row{margin-top:clamp(3.5rem,8vw,7rem)}
.game-row.flip{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.game-row.flip a.shot{order:2;transform:rotate(1.1deg)}
.game-row.flip a.shot:hover{transform:rotate(-.4deg) scale(1.01)}

/* ---------- foot ---------- */
.foot{background:var(--tinta);color:var(--kunyit);padding:clamp(2rem,5vw,4rem) var(--edge);display:flex;flex-wrap:wrap;gap:1em 2.2em;align-items:baseline;font-weight:600}
.foot .name{font:400 clamp(1.8rem,4vw,3rem)/1 var(--sign);text-decoration:none;margin-right:auto}
.foot small{font-size:.9rem;font-weight:400;flex-basis:100%}

/* ---------- inner pages: slim sign ---------- */
.bar{background:var(--kunyit);padding:.7rem var(--edge);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2em 1.2em;font-weight:600}
.bar .name{font:400 1.75rem/1.1 var(--sign);text-decoration:none}
.bar nav{display:flex;flex-wrap:wrap;gap:0 1.2em}
.subnav{display:flex;flex-wrap:wrap;gap:0 1.2em;padding:1rem var(--edge) 0;font-weight:600}
[aria-current=page]{text-decoration:none}

/* ---------- reading pages ---------- */
.read{max-width:43rem;padding:clamp(2rem,6vw,4.5rem) var(--gutter) clamp(3rem,8vw,6rem);margin-left:calc(var(--edge) - var(--gutter) + clamp(0px,9vw,11rem))}
.read h1{margin:0 0 .2em;font:400 clamp(2.5rem,7vw,4.6rem)/1.02 var(--sign)}
.read h2{margin:2em 0 .35em;font:700 1.4rem/1.2 var(--text)}
.read .date{margin:0 0 2em;font-size:1rem}
.read p{margin:0 0 1em}
.read dt{font-weight:700;margin-top:1.3em}
.read dd{margin:.15em 0 0}
.table-scroll{overflow-x:auto;margin:1em 0 1.5em}
.read table{border-collapse:collapse;min-width:34rem;font-size:1rem;line-height:1.45}
.read th,.read td{text-align:left;vertical-align:top;padding:.65em .9em .65em 0;border-bottom:2px solid var(--tinta)}
.read tr:not(:first-child) td{border-bottom-width:1px}
.todo{background:#ffc9d6;padding:0 .25em}

/* ---------- Oops I Drew: its own world. Everything sits on a 28px ruled line. ---------- */
.book{--gutter:var(--edge);--rule:28px;--ink:#2b2620;color:var(--ink);min-height:calc(100svh - 3.6rem);overflow:hidden;background-color:var(--buku);background-image:linear-gradient(90deg,transparent calc(var(--gutter) + 18px),var(--pinggir) calc(var(--gutter) + 18px),var(--pinggir) calc(var(--gutter) + 20px),transparent calc(var(--gutter) + 20px)),linear-gradient(transparent 27px,var(--garis) 27px);background-size:100% 100%,100% var(--rule);background-position:0 0,0 -6px;padding:calc(var(--rule) * 2) var(--gutter) calc(var(--rule) * 3) calc(var(--gutter) + 44px);font-size:1.0625rem;line-height:var(--rule)}
.book h1{margin:0;font:400 5.2rem/84px var(--hand)}
.book .scrawl{display:block;width:min(70vw,34rem);height:var(--rule);color:#d8473b}
.book .tagline{margin:0;color:var(--pena);font:400 1.7rem/var(--rule) var(--hand)}
.book p{margin:0 0 var(--rule);max-width:38rem}
.book p.tagline{max-width:none}
.pages{display:flex;gap:clamp(1rem,2.6vw,2.2rem);overflow-x:auto;scroll-snap-type:x proximity;padding:var(--rule) .4rem;margin:0 calc(var(--gutter) * -1) var(--rule) 0;list-style:none}
.pages li{flex:0 0 auto;scroll-snap-align:start}
.pages li:nth-child(odd){transform:rotate(-1.4deg)}
.pages li:nth-child(even){transform:rotate(1deg)}
.pages img{width:auto;max-width:none;height:calc(var(--rule) * 14);outline:3px solid var(--ink)}
.book h2{margin:0;font:400 1.65rem/calc(var(--rule) * 2) var(--hand)}
.book ul.plain{max-width:38rem;margin:0 0 var(--rule);padding:0;list-style:none}
.book ul.plain li{padding-left:1.3em;text-indent:-1.3em}
.book ul.plain li::before{content:"~";display:inline-block;width:1.3em;text-indent:0;color:var(--pena);font-weight:700}
.book .links{display:flex;flex-wrap:wrap;gap:0 1.4em;font:400 1.6rem/calc(var(--rule) * 2) var(--hand)}
@media (min-width:700px){
  .book h1{font-size:7rem;line-height:calc(var(--rule) * 4)}
  .book .tagline{font-size:2.5rem;line-height:calc(var(--rule) * 2)}
  .book h2{font-size:2.6rem}
  .pages img{height:calc(var(--rule) * 21)}
}
@media (min-width:1100px){
  .book h1{font-size:10rem;line-height:calc(var(--rule) * 6)}
}

/* ---------- not found ---------- */
.lost{min-height:100svh;background:var(--kunyit);padding:var(--gutter);display:flex;flex-direction:column;justify-content:center}
.lost h1{margin:0;font:400 clamp(3rem,13vw,10rem)/.95 var(--sign)}
.lost p{font-weight:600;font-size:1.25rem}

/* Tall screens: fit the content, or the spare height collects above the bubble. */
@media (max-aspect-ratio:1/1){
  .sign{min-height:0}
  .sign-say{padding-top:clamp(2.5rem,7vw,4rem)}
}
@media (max-width:760px){
  .game-row,.game-row.flip{grid-template-columns:1fr}
  .game-row.flip a.shot{order:0}
  .bubble-note{position:static;padding:0 var(--mark-edge);max-width:none}
  .sign nav{padding-bottom:.8rem}
  .bubble{margin-left:0;font-size:1.85rem}
  .read{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}