/* zakka layer: the booth table after four days. Graph paper, tape, stickers, post-its, crooked everything.
   Loaded after each page's own <style>, shared by / and /ja/. */
:root{
  --grid:rgba(35,66,200,.075);
  --tape:rgba(255,204,46,.75);
  --tape2:rgba(255,95,158,.55);
  --tape3:rgba(34,179,146,.5);
  --note:#ffe680;
  --note-ink:#15192c;
  --stamp-ink:#15192c;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --grid:rgba(123,146,255,.09);--tape:rgba(255,217,92,.62);--tape2:rgba(255,127,178,.5);--tape3:rgba(79,215,181,.45);
  --note:#ffe27a;--note-ink:#15192c;--stamp-ink:#15192c}}
:root[data-theme="dark"]{
  --grid:rgba(123,146,255,.09);--tape:rgba(255,217,92,.62);--tape2:rgba(255,127,178,.5);--tape3:rgba(79,215,181,.45);
  --note:#ffe27a;--note-ink:#15192c;--stamp-ink:#15192c}

body{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  overflow-x:clip;
}
section,.hero{position:relative}

/* kickers become stamped labels */
.kicker{display:inline-block;background:var(--ink);color:var(--paper);padding:3px 10px;border-radius:3px;transform:rotate(-2deg)}
section:nth-of-type(even) .kicker{background:var(--pink);color:var(--stamp-ink);transform:rotate(1.5deg)}
section:nth-of-type(3n) .kicker{background:var(--mint);color:var(--stamp-ink);transform:rotate(-1deg)}
.ask .kicker{background:var(--sun)!important;color:var(--stamp-ink)!important}

/* headings sit a little off-axis */
section h2{transform:rotate(-.6deg);transform-origin:left center}
section:nth-of-type(even) h2{transform:rotate(.5deg)}
.contact h2{transform:rotate(-1deg);transform-origin:center}

/* scrolling ribbon */
.ticker{width:100vw;margin-left:calc(50% - 50vw);background:var(--sun);color:var(--stamp-ink);border-block:2.5px solid var(--stamp-ink);overflow:hidden;transform:rotate(-1.2deg);position:relative;z-index:2;margin-block:8px 20px}
.ticker.pink{background:var(--pink);transform:rotate(1deg);margin-block:24px}
.ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker.pink .ticker-track{animation-direction:reverse;animation-duration:46s}
.ticker span{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.2;padding:9px 0;white-space:nowrap}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* photos: polaroids with tape */
.hero-photo img,.story img,.manc img,.gallery img,.about img,.album img{background:var(--surface);padding:10px;border-radius:3px!important;box-shadow:0 16px 30px -18px rgba(0,0,0,.55)}
.hero-photo,.manc figure,.gallery figure,.album figure,.story .photo,.about .photo{position:relative}
.hero-photo::before,.manc figure::before,.gallery figure::before,.album figure::before,.story .photo::before,.about .photo::before{
  content:"";position:absolute;top:-13px;left:50%;width:112px;height:28px;background:var(--tape);
  transform:translateX(-50%) rotate(-4deg);z-index:2;pointer-events:none}
.gallery figure:nth-child(even)::before,.album figure:nth-child(even)::before,.manc figure:nth-child(even)::before{background:var(--tape2);left:22%;transform:rotate(7deg)}
.gallery figure:nth-child(3n)::before,.album figure:nth-child(3n)::before{background:var(--tape3);left:auto;right:-10px;transform:rotate(38deg)}
.hero-photo img{transform:rotate(-.8deg)}
.story .photo,.about .photo{margin:0;transform:rotate(-2deg)}
.manc .big{transform:rotate(-1deg)}
.manc .stack figure{transform:rotate(1.4deg)}
.gallery figure:nth-child(3n+1),.album figure:nth-child(3n+1){transform:rotate(-2.2deg)}
.gallery figure:nth-child(3n+2),.album figure:nth-child(3n+2){transform:rotate(1.6deg)}
.gallery figure:nth-child(3n),.album figure:nth-child(3n){transform:rotate(-.6deg)}

/* cards: hard sticker shadows, nothing quite straight */
.checks li,.entry,.box,.work,.fact,.req .card{box-shadow:5px 5px 0 var(--ink)}
.checks li:nth-child(odd){transform:rotate(-.8deg)}
.checks li:nth-child(even){transform:rotate(.7deg) translateX(10px)}
.entry{transform:rotate(-1deg)}
.two .box:first-child{transform:rotate(-1deg)}
.box.oendan{transform:rotate(1.2deg)}
.req .card:nth-child(1){transform:rotate(-1.2deg)}
.req .card:nth-child(2){transform:rotate(1deg);background:var(--mint-soft)}
.req .card:nth-child(3){transform:rotate(-.4deg);background:var(--happi-soft)}
.works .work:nth-child(odd){transform:rotate(-1deg)}
.works .work:nth-child(even){transform:rotate(1.2deg)}
.works .work:nth-child(2){background:var(--mint-soft)}
.works .work:nth-child(3){background:var(--happi-soft)}
.fact:nth-child(2){transform:rotate(1.5deg);background:var(--mint-soft)}
.proof li:nth-child(odd){transform:rotate(-2deg);background:var(--sun);color:var(--stamp-ink);border-color:var(--stamp-ink)}
.proof li:nth-child(even){transform:rotate(1.5deg)}
.links .btn:nth-child(2){transform:rotate(-2deg)}
.links .btn:nth-child(3){transform:rotate(3deg)}
.links .btn:nth-child(4){transform:rotate(-1deg)}

/* stickers, post-its and scrawls */
.deco{position:absolute;z-index:3;pointer-events:none}
.stk{display:grid;place-items:center;text-align:center;width:96px;height:96px;border-radius:50%;border:2.5px solid var(--stamp-ink);color:var(--stamp-ink);font-family:var(--display);font-weight:800;font-size:14px;line-height:1.15;box-shadow:3px 3px 0 var(--stamp-ink)}
.stk.sun{background:var(--sun)}
.stk.pink{background:var(--pink)}
.stk.mint{background:var(--mint)}
.stk.square{border-radius:10px;width:auto;height:auto;padding:8px 14px}
.star{width:64px;height:64px;background:var(--sun);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star.pink{background:var(--pink)}
.postit{display:block;background:var(--note);color:var(--note-ink);font-family:var(--hand);font-size:20px;line-height:1.45;padding:16px 18px 20px;max-width:280px;transform:rotate(3deg);box-shadow:4px 8px 14px -8px rgba(0,0,0,.45);position:relative}
.postit::before{content:"";position:absolute;top:-10px;left:30%;width:70px;height:20px;background:var(--tape2);transform:rotate(-6deg)}
.postit.left{transform:rotate(-3deg)}
.scrawl{display:flex;align-items:flex-start;gap:4px;font-family:var(--hand);font-size:22px;line-height:1.3;color:var(--pink);margin-top:6px}
.scrawl svg{flex:none;color:var(--pink)}

/* photo album */
.album{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px;margin-top:44px;align-items:start}
.album figure{margin:0;min-width:0}
.album img{width:100%;aspect-ratio:4/5;object-fit:cover}
.album figcaption{font-family:var(--hand);font-size:19px;line-height:1.35;color:var(--ink);text-align:center;margin-top:6px}

@media (max-width:860px){
  .checks li:nth-child(even){transform:rotate(.7deg)}
}
@media (max-width:640px){
  .deco.hide-sm{display:none}
  .stk{width:76px;height:76px;font-size:12px}
  .ticker span{font-size:15px}
  .album{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .album figcaption{font-size:16px}
  .album img{padding:6px}
}