@font-face{font-family:"Oswald";src:url("assets/oswald.ttf") format("truetype");font-weight:200 700;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("assets/dm-serif.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Literata";src:url("assets/literata.ttf") format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/ibm-plex-mono.ttf") format("truetype");font-display:swap}

:root{
  --ink:#1b1a17;
  --wall:#b9b19e;
  --cream:#f3ecd8;
  --yellow:#f3e04a;
  --green:#1f3b2e;
  --red:#c8321f;
  --display:"Oswald","Arial Narrow",Impact,sans-serif;
  --serif:"DM Serif Display",Georgia,serif;
  --read:"Literata",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --marker:"Segoe Print","Bradley Hand","Marker Felt","Chalkboard SE","Comic Sans MS",cursive;
  --rot:1;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--read);font-size:17px;line-height:1.5;
  min-height:100vh;
  background:
    linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) 6% 22% / 170px 260px no-repeat,
    linear-gradient(rgba(70,50,30,.08),rgba(70,50,30,.08)) 71% 12% / 230px 190px no-repeat,
    linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)) 88% 58% / 150px 300px no-repeat,
    linear-gradient(rgba(70,50,30,.07),rgba(70,50,30,.07)) 22% 74% / 260px 160px no-repeat,
    radial-gradient(ellipse at 15% 5%,rgba(255,255,255,.28),transparent 50%),
    radial-gradient(ellipse at 85% 65%,rgba(60,40,20,.2),transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .2  0 0 0 0 .12  0 0 0 .38 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--wall);
  background-attachment:scroll;
}
body.locked{overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid #0a4fd6;outline-offset:3px;box-shadow:0 0 0 6px #fff}

#page{max-width:1360px;margin:0 auto;padding:28px 32px 56px}

/* ---------- masthead: a hand-painted shop sign ---------- */
.masthead{display:flex;align-items:flex-start;gap:28px;justify-content:space-between}
.sign{
  position:relative;flex:1;background:var(--green);color:var(--cream);
  padding:22px 34px 20px;border:6px solid var(--cream);outline:4px solid var(--green);
  box-shadow:0 14px 26px rgba(0,0,0,.35);transform:rotate(-.6deg);
}
.sign::before,.sign::after{content:"";position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#0d1e16;box-shadow:inset 1px 1px 0 rgba(255,255,255,.3)}
.sign::before{left:12px}.sign::after{right:12px}
.sign-name{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.88;letter-spacing:.04em;font-size:clamp(60px,10.5vw,148px)}
.letters{display:inline-block;white-space:nowrap}
.letters b{display:inline-block;font-weight:700}
.letters b:nth-child(1){transform:rotate(-3deg) translateY(2px)}
.letters b:nth-child(2){transform:rotate(2deg)}
.letters b:nth-child(3){transform:rotate(-1deg) translateY(-3px)}
.letters b:nth-child(4){transform:rotate(3deg) translateY(2px)}
.letters b:nth-child(5){transform:rotate(-2deg)}
.letters b.dash{transform:rotate(-8deg) scale(.8);margin:0 -.02em;color:var(--yellow)}
.letters b.up{color:var(--yellow)}
.letters b:nth-child(7){transform:rotate(2deg) translateY(-2px)}
.letters b:nth-child(8){transform:rotate(-3deg) translateY(3px)}
.sign-sub{margin:10px 0 0;font-family:var(--mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#e9dfc0}
.plaque{position:relative;flex:none;width:130px;margin-top:6px;transform:rotate(3deg)}
.enamel{background:#fbfaf4;border:4px solid #1d3f8f;border-radius:10px;padding:12px 8px;text-align:center;box-shadow:0 8px 14px rgba(0,0,0,.3);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1.05;color:#1d3f8f}
.enamel span{display:block}
.sticker{position:absolute;left:-26px;bottom:-26px;transform:rotate(-9deg);background:var(--yellow);border:2px solid var(--ink);padding:5px 10px;font-family:var(--marker);font-weight:700;font-size:17px;line-height:1.1;box-shadow:2px 3px 0 rgba(0,0,0,.3)}

/* ---------- controls: three notes taped up ---------- */
.controls{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:26px;margin:46px 0 12px;align-items:stretch}
.note{position:relative;padding:20px 20px 16px;background:var(--yellow);box-shadow:2px 4px 0 rgba(0,0,0,.18),8px 14px 20px rgba(0,0,0,.2)}
.note::before{content:"";position:absolute;top:-13px;left:50%;width:84px;height:26px;margin-left:-42px;background:rgba(238,228,190,.78);box-shadow:0 1px 2px rgba(0,0,0,.2);transform:rotate(-3deg)}
.note-search{transform:rotate(-1deg)}
.note-filter{background:#f6a7c5;transform:rotate(1.2deg)}
.note label{display:block;font-family:var(--marker);font-weight:700;font-size:22px;line-height:1.1;margin-bottom:6px}
.note input,.note select{width:100%;min-height:48px;padding:8px 12px;border:0;border-bottom:3px solid var(--ink);border-radius:0;background:rgba(255,255,255,.55);font-family:var(--mono);font-size:17px}
.note select{appearance:auto;cursor:pointer}
.pocket{
  position:relative;display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;
  background:var(--ink);color:var(--cream);border:0;padding:16px 20px;border-radius:2px 2px 26px 26px;
  box-shadow:0 10px 18px rgba(0,0,0,.3);transform:rotate(.8deg);font-family:var(--display);font-size:22px;line-height:1.15;text-transform:uppercase;letter-spacing:.04em;font-weight:500;
  transition:transform .2s,background .2s;
}
.pocket:hover{transform:rotate(-.4deg) translateY(-2px)}
.pocket b{font-family:var(--mono);font-weight:500;color:var(--yellow)}
.pocket-tabs{display:flex;gap:3px;flex:none}
.pocket-tabs i{display:block;width:12px;height:38px;background:var(--cream);border-radius:0 0 2px 2px;transition:transform .25s}
.pocket-tabs i:nth-child(2){transform:translateY(5px) rotate(4deg)}
.pocket-tabs i:nth-child(3){transform:translateY(-3px) rotate(-5deg)}
.pocket[aria-pressed="true"]{background:var(--red);color:#fff}
.pocket[aria-pressed="true"] b{color:#fff}
.pocket[aria-pressed="true"] .pocket-tabs i{background:var(--yellow)}
.pocket:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px #0a4fd6}

.tally{margin:22px 4px 8px;font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#2a2822}

/* ---------- the wall of bills ---------- */
.bills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 38px;align-items:start;padding:20px 0 10px}
.bills[hidden]{display:none}
.bill{
  --paper:var(--cream);--accent:var(--red);
  position:relative;background:var(--paper);padding:18px 22px 0;
  transform:translateY(calc(var(--dy,0) * 1px)) rotate(calc(var(--r,0) * var(--rot) * 1deg));
  box-shadow:1px 2px 0 rgba(0,0,0,.2),7px 12px 20px rgba(0,0,0,.28);
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s;
  background-image:linear-gradient(115deg,rgba(255,255,255,.28),transparent 30%,rgba(0,0,0,.05) 100%);
}
.bill::before{content:"";position:absolute;top:-12px;left:50%;width:78px;height:24px;margin-left:-39px;background:rgba(238,228,190,.8);box-shadow:0 1px 2px rgba(0,0,0,.2);transform:rotate(calc(var(--t,2) * 1deg));z-index:2}
.bill:hover,.bill:focus-within{transform:translateY(calc(var(--dy,0) * 1px - 8px)) rotate(0deg) scale(1.025);box-shadow:1px 2px 0 rgba(0,0,0,.2),12px 22px 30px rgba(0,0,0,.34);z-index:5}
.bill.pasting{animation:paste .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes paste{from{opacity:0;transform:translateY(-40px) rotate(calc(var(--r,0) * -3deg)) scale(1.12)}}

[data-cat="Culture"]{--paper:#f4a6c3;--accent:#b0124f}
[data-cat="Food"]{--paper:#f6efd9;--accent:#b8321f}
[data-cat="Movement"]{--paper:#f3e04a;--accent:#1d3f8f}
[data-cat="People"]{--paper:#f5a45d;--accent:#7a2a05}
[data-cat="Places"]{--paper:#a9d3df;--accent:#14455a}

.bill-top,.sheet-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.cat{display:inline-block;background:var(--ink);color:var(--paper);padding:2px 10px;font-weight:600}
.bill-title{margin:14px 0 10px;line-height:1.02;font-weight:400}
.open{all:unset;display:block;cursor:pointer}
.open::after{content:"";position:absolute;inset:0;z-index:3}
.open:focus-visible{outline:none}
.bill:has(.open:focus-visible){outline:3px solid #0a4fd6;outline-offset:5px}
.bill-sum{margin:0 0 14px;font-size:17px;line-height:1.45}
.bill-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 20px;font-family:var(--mono);font-size:14px}
.scrawl{font-family:var(--marker);font-weight:700;font-size:19px;color:var(--accent);transform:rotate(-3deg);margin-left:auto;white-space:nowrap}
.tabs{display:flex;margin:0 -22px;border-top:2px dashed rgba(27,26,23,.55)}
.tabs i{flex:1;height:60px;display:flex;align-items:center;justify-content:center;border-left:1px dashed rgba(27,26,23,.5);font-style:normal;overflow:hidden}
.tabs i:first-child{border-left:0}
.tabs u{display:block;writing-mode:vertical-rl;text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.bill .tabs i.gone,.sheet .tabs i.gone{visibility:hidden}
.stamp{position:absolute;top:50px;right:16px;z-index:1;transform:rotate(11deg);border:3px solid var(--red);color:var(--red);padding:2px 12px;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.35);display:none;pointer-events:none}
.bill[data-saved="true"] .stamp{display:block}
.bill[data-saved="true"] .tabs i:first-child{visibility:hidden}

/* category personalities */
.cat-Culture .bill-title .open{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,3.4vw,50px);line-height:.98;letter-spacing:.01em}
.cat-Culture{padding-top:22px;border-top:12px solid var(--ink)}
.cat-Culture .bill-top{margin-top:-4px}
.cat-Food{border:3px double var(--accent);outline:10px solid var(--paper);outline-offset:-14px}
.cat-Food{padding-left:30px;padding-right:30px}
.cat-Food .tabs{margin:0 -30px}
.cat-Food .bill-title .open{font-family:var(--serif);font-size:clamp(30px,2.8vw,40px);text-align:center;color:var(--accent)}
.cat-Food .bill-sum{text-align:center;font-style:italic}
.cat-Food .bill-by{justify-content:center}.cat-Food .scrawl{margin-left:0}
.cat-Movement{font-family:var(--mono);padding-left:54px}
.cat-Movement::after{content:"";position:absolute;left:24px;top:0;bottom:60px;width:0;border-left:6px solid var(--accent);background:none;pointer-events:none}
.cat-Movement .bill-top::before{content:"";position:absolute;left:15px;top:23px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:5px solid var(--accent);z-index:1}
.cat-Movement .tabs{margin-left:-54px}
.cat-Movement .bill-title .open{font-family:var(--display);font-weight:600;font-size:clamp(28px,2.7vw,38px);text-transform:uppercase;letter-spacing:.015em}
.cat-Movement .bill-sum,.cat-Movement .bill-by{font-family:var(--read)}
.cat-Movement .bill-by{font-family:var(--mono)}
.cat-People .bill-title .open{font-family:var(--read);font-weight:800;font-size:clamp(28px,2.6vw,36px);line-height:1.05;letter-spacing:-.01em}
.cat-People .bill-title::before{content:"HELP WANTED, HELP OFFERED";display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;border-bottom:3px solid var(--ink);margin-bottom:10px;padding-bottom:4px}
.cat-People .bill-title{margin-top:12px}
.cat-Places{text-align:center}
.cat-Places .bill-top{justify-content:space-between}
.cat-Places .bill-title .open{font-family:var(--serif);font-size:clamp(30px,2.9vw,42px);padding:10px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.cat-Places .bill-by{justify-content:center}.cat-Places .scrawl{margin-left:0}

.empty{max-width:560px;margin:30px auto 20px;padding:34px 30px 28px;background:var(--cream);transform:rotate(-1.4deg);box-shadow:8px 14px 24px rgba(0,0,0,.3);position:relative;text-align:center}
.empty::before{content:"";position:absolute;top:-13px;left:50%;width:84px;height:26px;margin-left:-42px;background:rgba(238,228,190,.85);box-shadow:0 1px 2px rgba(0,0,0,.2);transform:rotate(2deg)}
.empty[hidden]{display:none}
.empty-big{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(38px,6vw,60px);line-height:1}
.empty-msg{margin:12px 0 22px;font-size:18px}
.scrub{cursor:pointer;border:0;background:var(--red);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:22px;padding:12px 26px;box-shadow:3px 4px 0 var(--ink);transition:transform .15s}
.scrub:hover{transform:translate(-1px,-2px) rotate(-1deg)}

.foot{margin-top:56px;padding-top:18px;border-top:2px dashed rgba(27,26,23,.45);font-family:var(--mono);font-size:14px;max-width:700px}
.foot p{margin:0}

/* ---------- the story, lifted off the wall ---------- */
.layer{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,16,10,.62)}
.layer[hidden]{display:none}
.sheet{
  --paper:var(--cream);--accent:var(--red);
  position:relative;display:flex;flex-direction:column;width:min(780px,100%);max-height:min(94vh,940px);
  background:var(--paper);box-shadow:0 30px 60px rgba(0,0,0,.5);
  background-image:linear-gradient(115deg,rgba(255,255,255,.28),transparent 30%,rgba(0,0,0,.05) 100%);
  animation:lift .35s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes lift{from{opacity:0;transform:translateY(30px) rotate(-2deg) scale(.94)}}
.sheet:focus{outline:none}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px 14px}
.sheet-meta{justify-content:flex-start;gap:14px;align-items:center}
.close{cursor:pointer;display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:6px 16px;background:var(--ink);color:var(--paper);border:0;font-family:var(--display);font-size:19px;text-transform:uppercase;letter-spacing:.06em}
.close:hover{background:var(--red);color:#fff}
.roller{height:6px;background:rgba(27,26,23,.15)}
.roller i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}
.sheet-scroll{overflow-y:auto;padding:22px 40px 36px;overscroll-behavior:contain;flex:1;min-height:0}
.sheet-title{margin:0 0 12px;font-weight:400;line-height:1.02;font-family:var(--serif);font-size:clamp(34px,5vw,58px);letter-spacing:-.005em}
.sheet[data-cat="Culture"] .sheet-title,.sheet[data-cat="Movement"] .sheet-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(36px,5.4vw,64px);line-height:.98}
.sheet[data-cat="People"] .sheet-title{font-family:var(--read);font-weight:800;letter-spacing:-.02em;font-size:clamp(32px,4.6vw,52px)}
.sheet-by{margin:0 0 16px;font-family:var(--mono);font-size:15px;letter-spacing:.04em;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 0}
.sheet-sum{margin:0 0 24px;font-family:var(--marker);font-weight:700;font-size:20px;line-height:1.35;color:var(--accent);transform:rotate(-.8deg)}
.sheet-body{font-size:19px;line-height:1.7;max-width:62ch}
.sheet-body p{margin:0 0 1.15em}
.sheet-body p:first-child::first-letter{float:left;font-family:var(--serif);font-size:4.3em;line-height:.8;padding:6px 10px 0 0;color:var(--accent)}
.sheet-foot{border-top:2px dashed rgba(27,26,23,.6);background:rgba(0,0,0,.05)}
.save{
  display:block;width:100%;cursor:pointer;border:0;background:transparent;padding:0;text-align:center;
}
.save .tabs{margin:0;border-top:0}
.save .tabs i{height:50px;border-left:1px dashed rgba(27,26,23,.55);transition:transform .45s cubic-bezier(.5,0,1,.6),opacity .45s;transform-origin:top center}
.save:hover .tabs i:first-child{transform:rotate(-5deg)}
.save[aria-pressed="true"] .tabs i:first-child{transform:translateY(60px) rotate(22deg);opacity:0;visibility:hidden;transition:transform .5s cubic-bezier(.5,0,1,.6),opacity .5s,visibility 0s .5s}
.save-label{display:block;padding:12px 20px 14px;font-family:var(--display);font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--paper)}
.save[aria-pressed="true"] .save-label{background:var(--red);color:#fff}
.save:focus-visible{outline-offset:-6px;outline-color:#0a4fd6;box-shadow:inset 0 0 0 9px #fff}

/* ---------- small screens ---------- */
@media (max-width:1100px){
  .bills{grid-template-columns:repeat(2,minmax(0,1fr))}
  .controls{grid-template-columns:1fr 1fr}
  .pocket{grid-column:1 / -1}
}
@media (max-width:700px){
  :root{--rot:.45}
  body{font-size:16px}
  #page{padding:18px 16px 44px}
  .masthead{flex-direction:column;gap:10px}
  .sign{width:100%;padding:16px 16px 14px;border-width:4px;transform:none}
  .sign::before,.sign::after{display:none}
  .sign-sub{font-size:12px;letter-spacing:.08em}
  .plaque{width:auto;align-self:flex-end;margin:-6px 12px 0 0;transform:rotate(3deg)}
  .enamel{padding:6px 12px;font-size:17px}
  .enamel span br{display:none}
  .enamel span{display:block;white-space:nowrap}
  .sticker{left:auto;right:-4px;bottom:-30px;font-size:15px}
  .controls{grid-template-columns:1fr;gap:22px;margin-top:38px}
  .note{padding:16px 16px 14px}
  .pocket{font-size:19px;padding:14px 16px}
  .bills{grid-template-columns:1fr;gap:34px}
  .bill{padding:16px 18px 0}
  .tabs{margin:0 -18px}
  .cat-Food{padding-left:26px;padding-right:26px}.cat-Food .tabs{margin:0 -26px}
  .cat-Movement{padding-left:48px}.cat-Movement .tabs{margin-left:-48px}
  .layer{padding:0;align-items:stretch}
  .sheet{width:100%;max-height:none;height:100dvh;animation-name:liftm}
  .sheet-head{padding:12px 14px 10px}
  .sheet-scroll{padding:18px 20px 28px}
  .sheet-body{font-size:18px}
  .close{padding:6px 12px;font-size:17px}
  .save .tabs i{height:42px}
  .save-label{font-size:19px;padding:10px 12px 12px}
}
@keyframes liftm{from{opacity:0;transform:translateY(40px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}