:root{
  --paper:#f4ebd6;
  --paper-warm:#ede1bd;
  --paper-edge:#d8c898;
  --cork:#8c6a3f;
  --cork-deep:#6a4f2c;
  --cork-shadow:rgba(60,40,15,.55);
  --ink:#1a1410;
  --ink-warm:#3a2f24;
  --marker-red:#b81e2d;
  --marker-blue:#2a4d8b;
  --tape:rgba(241,216,120,.78);
  --tape-edge:rgba(170,138,55,.5);
  --sticky:#fff58a;
  --sticky-edge:#e6d870;
  --polaroid:#f9f5e8;
  --aged:#d6c89a;
  --flame:#ff9b3b;
  --f-poster:"Alfa Slab One",Georgia,serif;
  --f-hand:"Architects Daughter","Comic Sans MS",cursive;
  --f-type:"Cutive Mono",Courier,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{
  background:var(--cork-deep);
  color:var(--ink);
  font-family:var(--f-type);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{
  min-height:100vh;
  /* the cork-board: warm-brown gradient + cork-particle dot pattern */
  background:
    radial-gradient(circle at 15% 22%, rgba(0,0,0,.18) 1px, transparent 2.2px),
    radial-gradient(circle at 72% 38%, rgba(0,0,0,.14) 1px, transparent 2.2px),
    radial-gradient(circle at 38% 78%, rgba(0,0,0,.16) 1px, transparent 2.4px),
    radial-gradient(circle at 88% 86%, rgba(0,0,0,.12) 1px, transparent 2.2px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0.8px, transparent 1.8px),
    radial-gradient(circle at 8% 60%, rgba(0,0,0,.1) 1px, transparent 2px),
    radial-gradient(ellipse at 50% 0%, rgba(255,235,200,.12), transparent 60%),
    linear-gradient(170deg, var(--cork) 0%, var(--cork-deep) 100%);
  background-size:90px 90px, 70px 70px, 110px 110px, 80px 80px, 40px 40px, 60px 60px, auto auto, auto auto;
}
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
:focus-visible{ outline:2px dashed var(--marker-red); outline-offset:4px }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ============ THE BOARD ============ */
.board{
  position:relative;
  max-width:1320px;
  margin:0 auto;
  padding:50px 40px 80px;
  min-height:100vh;
}

/* ============ MASKING TAPE (shared) ============ */
.tape{
  position:absolute;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 8px, transparent 8px 12px),
    var(--tape);
  border-left:1px solid var(--tape-edge);
  border-right:1px solid var(--tape-edge);
  box-shadow:0 2px 4px rgba(0,0,0,.18);
  width:100px; height:26px;
  z-index:6;
  pointer-events:none;
}

/* ============ MAIN FLYER ============ */
.flyer{
  position:relative;
  z-index:5;
  max-width:760px;
  margin:30px auto 0;
  padding:54px 52px 0;
  background:
    radial-gradient(rgba(0,0,0,.025) 0.8px, transparent 1.6px),
    radial-gradient(rgba(0,0,0,.02) 0.6px, transparent 1.4px),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  background-size:4px 4px, 7px 7px, auto;
  transform:rotate(-1.1deg);
  box-shadow:
    0 24px 46px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.25),
    inset 0 0 30px rgba(168,140,80,.1);
  text-align:center;
}
/* tape corners on the flyer */
.flyer .tape.c-tl{ top:-12px; left:-22px; transform:rotate(-30deg); width:110px }
.flyer .tape.c-tr{ top:-10px; right:-26px; transform:rotate(32deg); width:118px }
.flyer .tape.c-bl{ bottom:60px; left:-30px; transform:rotate(28deg); width:104px; z-index:8 }
.flyer .tape.c-br{ bottom:64px; right:-24px; transform:rotate(-26deg); width:108px; z-index:8 }

/* torn bottom edge: zigzag mask */
.flyer::after{
  content:""; position:absolute; left:0; right:0; bottom:-12px;
  height:14px;
  background-image:
    linear-gradient(135deg, transparent 50%, var(--paper-warm) 50%),
    linear-gradient(225deg, transparent 50%, var(--paper-warm) 50%);
  background-size:14px 14px;
  background-position:0 0, 7px 0;
  background-repeat:repeat-x;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.18));
}

.flyer .missing{
  font-family:var(--f-poster);
  font-size:clamp(64px, 9.6vw, 130px);
  line-height:.9;
  letter-spacing:-1px;
  color:var(--ink);
  text-shadow:1px 1px 0 rgba(0,0,0,.12), 3px 3px 0 rgba(168,120,40,.15);
  margin-bottom:0;
}
.flyer .kicker{
  font-family:var(--f-hand);
  font-size:18px;
  color:var(--marker-red);
  transform:rotate(-1deg);
  margin:6px 0 18px;
}
.flyer .name{
  font-family:var(--f-hand);
  font-size:clamp(52px, 8vw, 96px);
  line-height:1;
  color:var(--marker-red);
  text-shadow:2px 2px 0 rgba(184,30,45,.1);
  transform:rotate(-1.4deg);
  margin-bottom:14px;
}
.flyer .name::before, .flyer .name::after{
  content:"~"; color:var(--ink-warm); padding:0 14px; vertical-align:middle;
  font-family:var(--f-hand); font-size:.5em;
}

.flyer .photo{
  display:inline-block;
  padding:10px 10px 38px;
  background:var(--polaroid);
  box-shadow:0 6px 12px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.08);
  margin:6px 0 22px;
  transform:rotate(.6deg);
  max-width:78%;
}
.flyer .photo img{
  width:100%; height:auto;
  filter:contrast(1.05) saturate(.92) brightness(.97);
}
.flyer .photo figcaption{
  font-family:var(--f-hand);
  font-size:17px;
  color:var(--marker-blue);
  margin-top:8px;
  transform:rotate(-.8deg);
}

.flyer .case{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 36px;
  max-width:560px;
  margin:0 auto 22px;
  text-align:left;
  font-family:var(--f-type);
  font-size:15px;
  line-height:1.65;
  color:var(--ink-warm);
}
.flyer .case > div{
  display:flex; align-items:baseline; gap:10px;
  padding:3px 0;
  border-bottom:1px dotted rgba(58,47,36,.3);
}
.flyer .case dt{
  flex-shrink:0; width:90px;
  color:var(--marker-red);
  font-style:italic;
  text-transform:lowercase;
}
.flyer .case dd{
  flex:1; color:var(--ink);
  text-transform:lowercase;
  letter-spacing:.5px;
}
.flyer .case dd.em{ color:var(--marker-red); font-weight:700 }

.flyer .note{
  position:relative;
  font-family:var(--f-hand);
  font-size:22px;
  line-height:1.45;
  color:var(--ink);
  max-width:46ch;
  margin:14px auto 24px;
  transform:rotate(-.5deg);
}
.flyer .note::before, .flyer .note::after{
  content:"\""; font-family:var(--f-poster); color:var(--marker-red);
  font-size:48px; line-height:0; vertical-align:-22px;
}
.flyer .note::before{ margin-right:6px }
.flyer .note::after{ margin-left:6px }

.ca-line{
  margin:18px auto 6px;
  font-family:var(--f-hand);
  font-size:20px;
  color:var(--ink);
  cursor:pointer;
  padding:8px 14px;
  display:inline-block;
  transition:color .2s ease;
  position:relative;
}
.ca-line .ca-prefix{
  font-family:var(--f-poster);
  font-size:.7em;
  color:var(--marker-red);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-right:8px;
}
.ca-line .ca{
  display:inline-block;
  border-bottom:2px dashed var(--marker-red);
  padding-bottom:2px;
  word-break:break-all;
  color:var(--ink);
}
.ca-line .ca-hint{
  display:block;
  font-size:14px;
  color:var(--marker-blue);
  margin-top:8px;
  transform:rotate(-.8deg);
}
.ca-line:hover .ca{ color:var(--marker-red) }
.ca-line.is-copied .ca{ color:var(--marker-red); border-color:var(--ink) }
.ca-line.is-copied .ca-hint{ color:var(--marker-red); font-weight:700 }

/* ============ TEAR-OFF STRIPS (the differentiator) ============ */
.strips{
  display:flex;
  justify-content:center;
  gap:0;
  margin:20px -10px 0;
  padding-top:18px;
  border-top:2px dashed rgba(58,47,36,.4);
  position:relative;
  flex-wrap:wrap;
}
.strips::before{
  content:"\2702  cut along the line  \2702";
  position:absolute; top:-12px; left:50%;
  transform:translateX(-50%) rotate(-1deg);
  background:var(--paper);
  padding:0 14px;
  font-family:var(--f-hand);
  font-size:13px;
  color:var(--marker-blue);
  letter-spacing:1px;
}
.strip{
  flex:1 1 130px;
  min-width:130px;
  max-width:170px;
  margin:0 4px;
  padding:18px 12px 24px;
  text-align:center;
  border-left:1px dashed rgba(58,47,36,.4);
  border-right:1px dashed rgba(58,47,36,.4);
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  position:relative;
  cursor:pointer;
  transform-origin:top center;
  transition:transform .7s cubic-bezier(.4,0,.7,.4), opacity .7s ease;
}
.strip:first-child{ border-left:none }
.strip:last-child{ border-right:none }
.strip::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:8px;
  background:
    linear-gradient(135deg, transparent 50%, var(--paper-warm) 50%),
    linear-gradient(225deg, transparent 50%, var(--paper-warm) 50%);
  background-size:8px 8px;
  background-position:0 0, 4px 0;
  background-repeat:repeat-x;
}
.strip-title{
  display:block;
  font-family:var(--f-poster);
  font-size:14px;
  letter-spacing:1px;
  color:var(--ink);
  margin-bottom:4px;
  text-transform:uppercase;
}
.strip-sub{
  display:block;
  font-family:var(--f-type);
  font-size:11px;
  color:var(--ink-warm);
  letter-spacing:1px;
  margin-bottom:10px;
}
.strip-tear{
  display:block;
  font-family:var(--f-hand);
  font-size:11px;
  color:var(--marker-red);
  letter-spacing:1px;
}
.strip:hover:not(.is-torn){ background:linear-gradient(180deg, #fff5dc 0%, var(--paper) 100%); transform:translateY(-3px) rotate(.6deg) }
.strip.is-torn{
  transform:rotateZ(28deg) translateY(220px) translateX(40px);
  opacity:0;
  pointer-events:none;
}
.strip.disabled{ opacity:.45; cursor:not-allowed }
.strip.disabled:hover{ transform:none; background:linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%) }

/* ============ POLAROID (top-left scrap) ============ */
.polaroid{
  position:absolute;
  z-index:3;
  top:80px; left:30px;
  width:200px;
  padding:12px 12px 44px;
  background:var(--polaroid);
  box-shadow:0 8px 16px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2);
  transform:rotate(-7deg);
}
.polaroid img{
  width:100%; height:180px; object-fit:cover;
  filter:contrast(1.1) saturate(.55) brightness(.85);
}
.polaroid figcaption{
  font-family:var(--f-hand);
  font-size:16px;
  color:var(--marker-blue);
  text-align:center;
  margin-top:12px;
}
.polaroid .tape{
  top:-12px; left:50%;
  transform:translateX(-50%) rotate(-4deg);
  width:64px; height:22px;
}

/* ============ STICKY NOTE (top-right scrap) ============ */
.sticky{
  position:absolute;
  z-index:3;
  top:90px; right:30px;
  width:220px;
  padding:24px 22px 26px;
  background:linear-gradient(165deg, var(--sticky) 0%, var(--sticky-edge) 100%);
  box-shadow:0 8px 14px rgba(0,0,0,.32), 0 1px 0 rgba(0,0,0,.06);
  transform:rotate(5deg);
  font-family:var(--f-hand);
  font-size:18px;
  line-height:1.4;
  color:var(--ink);
}
.sticky::before{
  content:""; position:absolute;
  top:0; right:0; width:30px; height:30px;
  background:linear-gradient(225deg, transparent 50%, rgba(0,0,0,.12) 50%);
}
.sticky b{ color:var(--marker-red); font-weight:normal }

/* ============ NEWSPAPER CLIPPING (bottom-left scrap) ============ */
.clipping{
  position:absolute;
  z-index:3;
  bottom:140px; left:18px;
  width:260px;
  padding:18px 18px 16px;
  background:
    radial-gradient(rgba(0,0,0,.03) 0.8px, transparent 1.5px),
    linear-gradient(180deg, var(--aged) 0%, #c8b97f 100%);
  background-size:4px 4px, auto;
  box-shadow:0 8px 14px rgba(0,0,0,.3);
  transform:rotate(-4deg);
  /* torn edges via clip-path zigzag */
  clip-path:polygon(
    0 4%, 6% 0, 14% 3%, 22% 1%, 32% 4%, 44% 2%, 56% 5%, 68% 1%, 78% 4%, 88% 2%, 96% 5%, 100% 0,
    100% 96%, 94% 100%, 86% 96%, 76% 99%, 66% 95%, 54% 99%, 42% 95%, 30% 99%, 20% 96%, 10% 99%, 0 96%
  );
}
.clipping .src{
  display:block;
  font-family:var(--f-type);
  font-size:10px;
  color:var(--ink-warm);
  letter-spacing:1px;
  margin-bottom:8px;
}
.clipping h3{
  font-family:var(--f-poster);
  font-weight:400;
  font-size:15px;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:8px;
}
.clipping p{
  font-family:var(--f-type);
  font-size:11px;
  line-height:1.5;
  color:var(--ink-warm);
  margin-bottom:8px;
}
.clipping a{
  font-family:var(--f-hand);
  font-size:14px;
  color:var(--marker-red);
  border-bottom:1px solid var(--marker-red);
  padding-bottom:1px;
}
.clipping a:hover{ color:var(--ink) }

/* ============ PHONE MOCKUP WITH IG (bottom-right scrap) ============ */
.phone{
  position:absolute;
  z-index:3;
  bottom:80px; right:24px;
  width:280px;
  padding:14px 10px 18px;
  background:#1c1814;
  border-radius:28px;
  box-shadow:0 14px 24px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.04);
  transform:rotate(3deg);
}
.phone::before{
  content:""; position:absolute;
  top:8px; left:50%;
  transform:translateX(-50%);
  width:60px; height:6px;
  background:#0a0805; border-radius:4px;
}
.phone-screen{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  padding:6px;
  min-height:200px;
}
.phone-screen blockquote.instagram-media{ max-width:100% !important; min-width:100% !important; width:100% !important; margin:0 !important; padding:0 !important }
.ig-fallback{
  display:block;
  padding:30px 16px;
  font-family:var(--f-type);
  font-size:12px;
  line-height:1.5;
  color:var(--ink-warm);
  text-align:center;
}
.ig-fallback .src{
  display:block;
  font-family:var(--f-poster);
  font-size:11px;
  color:var(--marker-red);
  letter-spacing:1.5px;
  margin-bottom:10px;
}
.ig-fallback .open{
  display:inline-block;
  margin-top:10px;
  font-family:var(--f-hand);
  font-size:14px;
  color:var(--marker-red);
  border-bottom:1px solid var(--marker-red);
  padding-bottom:1px;
}
.phone-caption{
  font-family:var(--f-hand);
  font-size:13px;
  color:#e8dcb8;
  text-align:center;
  margin-top:8px;
  transform:rotate(-1deg);
}

/* ============ CANDLE SPOT (single physical object) ============ */
.candle-spot{
  position:absolute;
  z-index:3;
  bottom:30px; left:50%;
  transform:translateX(-50%) rotate(1deg);
  text-align:center;
  width:180px;
}
.candle-spot svg{
  width:62px;
  height:auto;
  margin:0 auto;
  display:block;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.candle-flame{
  transform-origin:50% 90%;
  opacity:0;
  transition:opacity .4s ease;
}
.candle-spot.is-lit .candle-flame{
  opacity:1;
  animation:flicker 2.4s ease-in-out infinite;
}
@keyframes flicker{
  0%, 100%{ transform:scale(1) rotate(-2deg) }
  25%{ transform:scale(1.08) rotate(2deg) }
  50%{ transform:scale(.94) rotate(-1deg) }
  75%{ transform:scale(1.04) rotate(1deg) }
}
.candle-btn{
  font-family:var(--f-hand);
  font-size:14px;
  color:#fff5dc;
  text-decoration:underline wavy var(--flame);
  text-underline-offset:3px;
  cursor:pointer;
  margin-top:6px;
  display:block;
  width:100%;
}
.candle-btn:hover{ color:var(--flame) }
.candle-spot.is-lit .candle-btn{ color:var(--flame) }

/* ============ FOOTER (small disclaimer in margin) ============ */
footer{
  position:relative;
  z-index:2;
  text-align:center;
  padding:40px 24px 60px;
  font-family:var(--f-type);
  font-size:11px;
  line-height:1.7;
  color:rgba(255,235,200,.55);
  max-width:680px;
  margin:0 auto;
}
footer .stamp{
  display:inline-block;
  font-family:var(--f-poster);
  font-size:13px;
  color:#fff5dc;
  letter-spacing:1.5px;
  border:2px solid #fff5dc;
  padding:5px 12px;
  margin-bottom:14px;
  transform:rotate(-2deg);
  opacity:.65;
}

/* ============ INLINE STATUS (replaces bottom-pill toast) ============ */
.status-note{
  position:fixed;
  top:24px; left:50%;
  transform:translateX(-50%) translateY(-60px) rotate(-2deg);
  background:var(--sticky);
  border:1px solid var(--sticky-edge);
  padding:10px 18px;
  font-family:var(--f-hand);
  font-size:16px;
  color:var(--ink);
  box-shadow:0 6px 14px rgba(0,0,0,.3);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
  z-index:200;
  pointer-events:none;
  max-width:80vw;
  text-align:center;
}
.status-note.is-on{ opacity:1; transform:translateX(-50%) translateY(0) rotate(-2deg) }

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  /* float scattered scraps inline above/below the flyer instead of absolute */
  .polaroid, .sticky, .clipping, .phone{ position:relative; top:auto; left:auto; right:auto; bottom:auto; margin:24px auto; display:block }
  .polaroid{ transform:rotate(-3deg) }
  .sticky{ transform:rotate(2deg) }
  .clipping{ transform:rotate(-2deg) }
  .phone{ transform:rotate(1deg) }
  .candle-spot{ position:relative; bottom:auto; left:auto; transform:rotate(1deg); margin:30px auto 10px }
}
@media (max-width:680px){
  .board{ padding:30px 16px 60px }
  .flyer{ padding:36px 24px 0; transform:rotate(-.6deg) }
  .flyer .tape.c-tl, .flyer .tape.c-tr{ display:none }
  .flyer .tape.c-bl, .flyer .tape.c-br{ width:80px }
  .flyer .case{ grid-template-columns:1fr; gap:2px 0 }
  .flyer .case dt{ width:80px }
  .strips{ flex-direction:column; margin:20px -6px 0 }
  .strip{ max-width:none; margin:6px 0; border-left:1px dashed rgba(58,47,36,.4); border-right:1px dashed rgba(58,47,36,.4); border-top:2px dashed rgba(58,47,36,.4) }
  .strip:first-child{ border-left:1px dashed rgba(58,47,36,.4) }
  .strip.is-torn{ transform:rotateZ(14deg) translateY(80px) }
  .polaroid, .sticky, .clipping, .phone{ width:min(280px, 88vw) }
}

@media (prefers-reduced-motion: reduce){
  .candle-spot.is-lit .candle-flame{ animation:none }
  .strip{ transition:opacity .3s ease }
}