/* toasty — B: Street Flyer (risograph poster)
   Single token source. report.html consumes this; no inline drift. */
:root{
  color-scheme:light;
  --paper:#F2EAD8;
  --ink:#201409;
  --ink-2:#7A4A21;
  --vermilion:#C93A26;
  --gold:#E9B44C;
  --off:#FFFBF2;
  /* legacy aliases for JS/report inline */
  --bg:var(--paper);
  --card:var(--off);
  --mallow:var(--off);
  --line:var(--ink);
  --muted:var(--ink-2);
  --crust:var(--ink-2);
  --crumb:var(--gold);
  --accent:var(--vermilion);
  --error:#B3261E;
  --error-bg:#FDECEA;
  --font-display:"Bebas Neue","Fraunces",Impact,system-ui,sans-serif;
  --font-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box}
html{background:#1a120a}
body{
  margin:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #3a2812 0%, #1a120a 70%),
    #1a120a;
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  padding:24px 0 40px;
}
.sheet, .card{
  max-width:560px;
  margin:0 auto;
  background:var(--paper);
  background-image:
    radial-gradient(rgba(32,20,9,.06) 1px, transparent 1px),
    radial-gradient(rgba(122,74,33,.05) 1px, transparent 1px);
  background-size:22px 22px, 14px 14px;
  background-position:0 0, 7px 11px;
  box-shadow:0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
  padding:0 0 44px;
  position:relative;
  overflow:hidden;
  text-align:left;
  border:0;
  border-radius:0;
}
.sheet::before{
  content:""; position:absolute; inset:0 0 auto 0; height:10px;
  background:var(--paper);
  clip-path:polygon(0 100%,4% 20%,9% 80%,15% 30%,22% 90%,30% 10%,38% 70%,46% 25%,55% 85%,63% 15%,71% 75%,80% 30%,88% 90%,94% 20%,100% 60%,100% 100%,0 100%);
  z-index:2; pointer-events:none;
}
.utility{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 16px 12px; border-bottom:3px solid var(--ink); position:relative;
}
.utility::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:6px; background:var(--gold); opacity:.85; clip-path:polygon(0 0,100% 0,99% 100%,1% 100%)}
.back{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none; border:2px solid var(--ink); padding:8px 12px; background:var(--off); box-shadow:3px 3px 0 var(--ink)}
.utility .meta{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); text-align:right; line-height:1.4}
.utility .meta b{color:var(--vermilion)}
.masthead{padding:22px 18px 0}
.kicker-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px}
.kicker{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:6px 10px}
.kicker--vermilion{background:var(--vermilion); transform:rotate(-1.2deg)}
.kicker--gold{background:var(--gold); color:var(--ink); transform:rotate(1deg); border:2px solid var(--ink)}
h1{margin:0; font-family:var(--font-display); font-size:clamp(72px,19vw,126px); line-height:.82; letter-spacing:.01em; text-transform:uppercase; color:var(--ink); text-shadow:3px 3px 0 var(--gold), 6px 6px 0 rgba(201,58,38,.22)}
h1 .q{color:var(--vermilion)}
.voice{margin:16px 0 0; font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:clamp(18px,5vw,24px); line-height:1.18; letter-spacing:-.01em}
.voice em{font-style:normal; color:var(--vermilion)}
.voice .bardot{background:var(--gold); padding:1px 6px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); display:inline-block; transform:rotate(-.6deg)}
.subline{margin:12px 0 0; font-family:var(--font-mono); font-size:12px; line-height:1.6; color:var(--ink-2)}
.subline strong{color:var(--ink)}
.hero{padding:18px 18px 0; position:relative}
.hero-frame{position:relative; background:var(--off); padding:10px 10px 12px; border:4px solid var(--ink); box-shadow:8px 8px 0 var(--ink), 10px 10px 0 var(--vermilion); transform:rotate(-.8deg); margin:0}
.hero-frame img{display:block; width:100%; height:auto; aspect-ratio:4/4.1; object-fit:cover}
.hero-caption{display:flex; justify-content:space-between; gap:10px; padding:12px 2px 4px}
.hero-caption .hand{font-family:"Caveat",cursive; font-size:26px; font-weight:700; line-height:1.1}
.hero-caption .mono{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap}
.stamp{position:absolute; font-family:var(--font-display); letter-spacing:.06em; text-transform:uppercase; border:3px solid var(--vermilion); color:var(--vermilion); background:rgba(255,251,242,.92); padding:4px 10px 3px; font-size:20px; line-height:1; box-shadow:2px 2px 0 var(--ink)}
.stamp--a{top:16px; right:14px; transform:rotate(6deg)}
.stamp--b{top:58px; left:14px; transform:rotate(-4deg); border-color:var(--ink); color:var(--ink); font-size:16px}
.stamp--c{top:46%; right:14px; transform:rotate(-7deg); border-color:var(--ink-2); color:var(--ink-2); font-size:15px; background:var(--gold)}
.chips{padding:16px 18px 0; display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border:2px solid var(--ink); background:var(--off); padding:7px 10px; box-shadow:3px 3px 0 var(--ink)}
.chip:nth-child(1){transform:rotate(-1.4deg)}
.chip:nth-child(2){transform:rotate(1.2deg); background:var(--gold)}
.chip:nth-child(3){transform:rotate(-.8deg)}
.chip:nth-child(4){transform:rotate(1.6deg); border-color:var(--vermilion); color:var(--vermilion)}
.actions{padding:18px 18px 0; display:grid; gap:12px}
.btn-report{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:14px 18px; background:var(--vermilion); color:var(--off); text-decoration:none; font-family:var(--font-display); font-size:34px; letter-spacing:.04em; line-height:1; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink)}
.btn-report small{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.btn-report:active{transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink)}
.calls{display:grid; gap:10px}
.btn-call{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:12px 16px; background:var(--off); color:var(--ink); text-decoration:none; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--font-mono); font-weight:700}
.btn-call .label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.btn-call .num{font-size:19px}
.hint{margin:0; font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--ink-2); text-align:center}
.sheet-label{padding:26px 18px 0}
.sheet-label h2{margin:0; font-family:var(--font-display); font-size:38px; line-height:.9; letter-spacing:.03em; text-transform:uppercase}
.sheet-label h2 span{color:var(--vermilion)}
.sheet-label p{margin:6px 0 0; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.contact{padding:14px 18px 0; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.cell{background:var(--off); border:3px solid var(--ink); padding:8px 8px 10px; margin:0; box-shadow:5px 5px 0 var(--ink)}
.cell:nth-child(1){transform:rotate(-1.2deg)}
.cell:nth-child(2){transform:rotate(1deg); box-shadow:5px 5px 0 var(--vermilion)}
.cell:nth-child(3){transform:rotate(.9deg); box-shadow:5px 5px 0 var(--gold), 8px 8px 0 var(--ink)}
.cell:nth-child(4){transform:rotate(-.9deg)}
.cell img{display:block; width:100%; height:220px; object-fit:cover; border:2px solid var(--ink); background:#e8dcc4}
.cell figcaption{font-family:"Caveat",cursive; font-size:21px; font-weight:700; line-height:1.05; padding-top:8px}
.cell figcaption b{font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; display:block; color:var(--vermilion); margin-bottom:2px}
.flyer-foot{margin:22px 18px 0; border:3px solid var(--ink); background:var(--ink); color:var(--paper); padding:16px; box-shadow:6px 6px 0 var(--vermilion); position:relative; overflow:hidden}
.flyer-foot p{margin:0; font-family:"Fraunces",serif; font-weight:900; font-size:19px; line-height:1.25}
.flyer-foot .save{display:inline-flex; margin-top:12px; min-height:48px; align-items:center; gap:8px; background:var(--gold); color:var(--ink); text-decoration:none; border:2px solid var(--paper); font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:12px 16px}
.flyer-foot .fine{margin-top:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(242,234,216,.9)}
/* Generic fallbacks so existing page classes still work */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 18px; background:var(--off); color:var(--ink); text-decoration:none; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-weight:700; cursor:pointer}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.btn-primary{background:var(--vermilion); color:var(--off)}
.btn-primary:disabled,.btn:disabled{opacity:.55; cursor:not-allowed}
.field{display:flex; flex-direction:column; gap:6px; margin:16px 0; text-align:left; font-weight:700}
.field input,.field textarea,.field select{width:100%; padding:12px 14px; font:inherit; color:var(--ink); background:var(--off); border:3px solid var(--ink); border-radius:0}
.field textarea{min-height:96px; resize:vertical}
.btn:focus-visible,.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,#photo:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.signin-panel{background:var(--off); border:3px solid var(--ink); padding:24px; margin:24px 18px 0; box-shadow:5px 5px 0 var(--ink); text-align:left}
.status-pill{display:flex; align-items:center; gap:8px; margin:16px 18px 0; padding:10px 14px; background:var(--gold); border:3px solid var(--ink); font-family:var(--font-mono); font-size:12px; font-weight:700}
.status-pill .dot{width:9px; height:9px; border-radius:50%; background:var(--ink); flex:0 0 auto}
.tagline{font-family:var(--font-mono); font-size:.9rem; color:var(--ink-2)}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin:0 18px; color:var(--ink-2)}
.card h1{font-size:clamp(56px,14vw,84px)}
.card h2{font-family:var(--font-display); letter-spacing:.03em; text-transform:uppercase}
.card--owner{text-align:left}
#sightings-list{list-style:none; margin:16px 18px 0; padding:0; display:grid; gap:14px}
.sighting{background:var(--off); border:3px solid var(--ink); padding:16px; box-shadow:5px 5px 0 var(--ink)}
.sighting p{margin:4px 0; font-family:var(--font-mono); font-size:.9rem}
@media(max-width:480px){
  body{padding:0}
  .sheet,.card{margin:0; box-shadow:none}
  .contact{gap:12px; padding-left:16px; padding-right:16px}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}