@font-face{font-family:"League Gothic";src:url(assets/fonts/league-gothic.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(assets/fonts/courier-prime-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(assets/fonts/courier-prime-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url(assets/fonts/reenie-beanie.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --cork:#a3764a;--cork-dark:#6e4c2c;--paper:#f2efe7;--ink:#141412;--red:#b8231b;--sticky:#f1e07c;
  --type:"Courier Prime","Courier New",Courier,monospace;
  --poster:"League Gothic","Impact","Arial Narrow Bold",sans-serif;
  --hand:"Reenie Beanie","Bradley Hand","Segoe Print",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cork);color:var(--ink);font:400 16px/1.45 var(--type);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}

/* the corkboard: flat cork colour, two layers of flecks, darker edges from an inset shadow */
.board{
  position:relative;isolation:isolate;min-height:100vh;min-height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,540px) minmax(0,330px);
  grid-template-areas:"flyer note" "flyer photo" "flyer card" "small small";
  grid-template-rows:auto auto 1fr auto;
  justify-content:center;column-gap:clamp(48px,8vw,128px);row-gap:28px;
  padding:76px 24px 28px;
  background-color:var(--cork);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .06 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .76 0 0 0 0 .55 0 0 0 1.5 -.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 160px rgba(40,22,8,.55);
}
.strings{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.strings path{fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round}
.strings .tack{fill:#c22a20;stroke:rgba(0,0,0,.25);stroke-width:1}
.strings .shade{stroke:rgba(40,20,6,.35);stroke-width:2.2}

.pin{position:absolute;z-index:5;top:-7px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:#c22a20;box-shadow:inset -3px -4px 0 rgba(0,0,0,.25),inset 3px 3px 0 rgba(255,255,255,.28),2px 4px 3px rgba(30,14,4,.45)}


.tape{position:absolute;z-index:3;top:24px;left:clamp(16px,4vw,48px);margin:0;padding:9px 20px 8px;
  background:#e6dcc0;color:#2c2820;font:700 14px/1 var(--type);letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-2deg);box-shadow:0 1px 2px rgba(40,22,8,.3);
  clip-path:polygon(2% 0,98% 6%,100% 30%,97% 55%,100% 82%,97% 100%,3% 94%,0 70%,3% 45%,0 18%)}
.tape b{margin-left:.6em;color:var(--red)}

/* ---- the flyer: a photocopied sheet, pinned ---- */
.flyer{grid-area:flyer;position:relative;z-index:2;align-self:start;margin:0;padding:28px 36px 0;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform:rotate(-.5deg);box-shadow:0 2px 0 rgba(0,0,0,.08),6px 14px 22px -10px rgba(35,18,4,.6)}
.flyer-head{margin:0;font:400 clamp(58px,6.4vw,92px)/.86 var(--poster);text-transform:uppercase;letter-spacing:.004em;text-align:center}
.evidence{margin:16px 0 0}
.cat{position:relative;display:block;width:100%;padding:0;border:0;background:none;overflow:visible;touch-action:manipulation;-webkit-touch-callout:none}
.cat img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 16%;filter:grayscale(1) contrast(1.45) brightness(1.06);mix-blend-mode:multiply;user-select:none;pointer-events:none}
.ring{position:absolute;left:23%;top:-4%;width:56%;height:56%;overflow:visible;pointer-events:none}
.ring path{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:640;stroke-dashoffset:0}
.drawn .ring path{animation:draw 1.1s .35s cubic-bezier(.6,.1,.3,1) both}
@keyframes draw{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}
.burst{position:absolute;left:50%;top:14%;width:30%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none}
.zapped .burst{animation:burst .9s ease-out both}
@keyframes burst{0%{box-shadow:0 0 0 0 rgba(20,20,18,.5),0 0 0 0 rgba(20,20,18,.35)}70%{box-shadow:0 0 0 2rem rgba(20,20,18,0),0 0 0 3.6rem rgba(20,20,18,0)}100%{box-shadow:none}}
.zapped .cat img{animation:jitter .32s steps(4) both}
@keyframes jitter{25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}
.logbook{display:flex;justify-content:space-between;gap:12px;margin:8px 0 0;font-size:13px;color:#4a463e}
.tally b{font-variant-numeric:tabular-nums}
.flyer-sub{margin:18px 0 0;font:400 clamp(40px,4.6vw,62px)/.9 var(--poster);text-transform:uppercase;text-align:center}
.hl{padding:0 .08em;background:linear-gradient(100deg,rgba(241,224,90,0) 1%,rgba(241,224,90,.9) 4%,rgba(241,224,90,.85) 94%,rgba(241,224,90,0) 98%);background-size:100% 62%;background-position:0 72%;background-repeat:no-repeat}
.facts{list-style:none;margin:22px 0 0;padding:16px 0 0;border-top:2px solid var(--ink);font-size:17px;line-height:1.5}
.facts li{padding-left:1.4em;text-indent:-1.4em}
.facts li::before{content:"*";display:inline-block;width:1.4em;text-indent:0;font-weight:700}

/* tear-off tabs along the bottom edge */
.tabs{display:flex;margin:26px -36px 0;border-top:1px dashed #6d685d}
.tab{flex:1 1 0;min-width:0;height:132px;padding:10px 0;border:0;border-left:1px dashed #6d685d;background:transparent;
  display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform-origin:50% 0;
  font:700 12px/1.1 var(--type);letter-spacing:.06em;color:var(--ink);transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .45s}
.tab:first-child{border-left:0}
.tab span{transform:rotate(180deg);white-space:nowrap}
.tab small{display:block;font:400 11px/1.1 var(--type);color:#555;margin-right:3px}
.tab:hover{background:rgba(0,0,0,.035)}
.tab.gone{transform:translateY(36px) rotate(9deg);opacity:0;pointer-events:none}
.tab.took{visibility:hidden}

/* ---- sticky note with the CA ---- */
.note{grid-area:note;position:relative;z-index:3;align-self:start;justify-self:start;width:min(100%,250px);margin:28px 0 0;padding:26px 22px 22px;
  background:var(--sticky);transform:rotate(1.5deg);box-shadow:3px 10px 14px -8px rgba(35,18,4,.55)}
.note p{margin:0}
.note-label{font:400 44px/.8 var(--hand)}
.note-ca{margin-top:6px;font:400 34px/.95 var(--hand);color:#1f1d17;overflow-wrap:anywhere}
.ca-copy{display:block;width:100%;margin:6px 0 0;padding:6px 0 2px;border:0;border-bottom:1px solid rgba(0,0,0,.35);background:none;text-align:left;font:700 16px/1.25 var(--type);word-break:break-all}
.ca-copy small{display:block;margin-top:4px;font:400 12px/1 var(--type);color:#5b5430}
.note-links{display:flex;gap:18px;margin-top:12px!important;font:400 30px/1 var(--hand)}
.note-links:empty{display:none}
.note-links a{text-decoration:none;border-bottom:0;color:#1f1d17}
.note-links a::after{content:" \2197";font-size:.7em}

/* ---- polaroid ---- */
.polaroid{grid-area:photo;position:relative;z-index:1;align-self:start;justify-self:end;width:min(100%,290px);margin:12px 0 0;padding:12px 12px 0;background:#fbfaf6;
  transform:rotate(-2deg);box-shadow:3px 12px 18px -8px rgba(35,18,4,.6)}
.polaroid img{width:100%;aspect-ratio:1}
.polaroid figcaption{padding:10px 4px 12px;font:400 30px/1 var(--hand);color:#2a2824;text-align:center}

.card{grid-area:card;position:relative;z-index:2;align-self:start;justify-self:start;width:min(100%,330px);margin:18px 0 0 -10px;padding:22px 22px 18px 34px;
  background-color:#fbfaf5;background-image:linear-gradient(90deg,transparent 22px,rgba(196,48,40,.55) 22px,rgba(196,48,40,.55) 23.5px,transparent 23.5px),repeating-linear-gradient(180deg,transparent 0 25px,rgba(70,110,170,.28) 25px 26px);
  background-position:0 0,0 18px;transform:rotate(.6deg);box-shadow:3px 10px 16px -8px rgba(35,18,4,.55)}
.card .pin{left:20%}
.card h2{margin:0 0 4px;font:700 13px/26px var(--type);letter-spacing:.14em;text-transform:uppercase}
.card ol{margin:0;padding-left:1.5em;font-size:14px;line-height:26px}
.small{grid-area:small;position:relative;z-index:2;margin-top:28px;text-align:center;font-size:12px;line-height:1.6;color:#f4e9d8;text-shadow:0 1px 2px rgba(40,20,4,.8)}
.small p{margin:0}
.small a{margin:0 .5em;text-decoration:none;font-weight:700}
.small a:hover{color:#fff}

@media (max-width:900px){
  .board{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"note photo" "flyer flyer" "card card" "small small";grid-template-rows:auto auto auto auto;
    max-width:560px;margin:0 auto;padding:72px 16px 24px;column-gap:18px;row-gap:22px;box-shadow:inset 0 0 90px rgba(40,22,8,.5)}
  .tape{top:20px;left:16px}
  .flyer{padding:26px 20px 0;transform:none}
  .tabs{margin-left:-20px;margin-right:-20px}
  .tab{height:112px}
  .facts{font-size:15px}
  .note{width:100%;margin-top:14px;padding:20px 14px 16px}
  .note-label{font-size:38px}
  .note-ca{font-size:28px}
  .note-links{flex-direction:column;gap:4px;font-size:26px}
  .ca-copy{font-size:13px}
  .polaroid{width:100%;margin-top:4px;padding:8px 8px 0}
  .polaroid figcaption{font-size:24px;padding:8px 2px 10px}
  .card{width:100%;margin:6px 0 0}
  .small{margin-top:8px}
}
@media (max-width:900px) and (min-width:561px){.board{max-width:none;grid-template-columns:minmax(0,260px) minmax(0,260px);justify-content:center}.flyer{grid-column:1/-1;max-width:560px;justify-self:center}}
@media (max-width:360px){.flyer-head{font-size:52px}.facts{font-size:15px}.tab{font-size:11px}.logbook{flex-direction:column;gap:2px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}