/* ============================================================
   BATON CORPORATION — v2
   Register: a corporate notice flyposted on a brick wall, with the
   evidence taped up next to it. The source artwork IS an evidence
   board; the page is the rest of that wall.
   Every colour sampled from the client's artwork.
   ============================================================ */

/* Metric-matched fallbacks: the webfonts swap in without reflowing the page.
   Tuned so Arial Narrow / Georgia / Courier New occupy the same space as the
   real faces during the swap window. */
@font-face{
  font-family:"TitanOne-fb";
  src:local("Arial Black"), local("Helvetica Bold"), local("Arial Bold");
  size-adjust:95.4%; ascent-override:104%; descent-override:26%; line-gap-override:0%;
}
@font-face{
  font-family:"InstrumentSerif-fb";
  src:local("Georgia"), local("Times New Roman");
  size-adjust:73.7%; ascent-override:130%; descent-override:32%; line-gap-override:0%;
}
@font-face{
  font-family:"CourierPrime-fb";
  src:local("Courier New"), local("Menlo");
  size-adjust:99.9%; ascent-override:88%; descent-override:24%; line-gap-override:0%;
}

:root{
  --wall:      #E6E2D6;
  --wall-dk:   #CFCCC6;
  --paper:     #FBF6E7;
  --paper-2:   #F3EDD9;
  --ink:       #16170F;
  --hard:      #16170F;   /* hard cartoon shadow, never blurred */
  --ink-2:     #3C3E34;
  --ink-3:     #5C5E53;

  --mint:      #78B788;
  --mint-hi:   #91C99F;
  --green:     #3F6B4D;
  --green-dk:  #2C4838;
  --green-ink: #16261C;
  --rust:      #D98A3F;
  --sun:       #F2C94C;

  --tape:      rgba(206,196,168,.72);
  --tape-edge: rgba(150,140,112,.30);

  --poster: "Titan One", "TitanOne-fb", "Arial Black", sans-serif;
  --hand:   "Caveat", "Caveat-fb", "Bradley Hand", cursive;
  --serif:  "Instrument Serif", "InstrumentSerif-fb", Georgia, serif;
  --tt:     "Courier Prime", "CourierPrime-fb", ui-monospace, monospace;

  --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:34px;
  --s6:52px; --s7:78px; --s8:112px; --s9:156px;

  --wrap:1200px;
  --gut:clamp(18px,5vw,52px);
  --ease:cubic-bezier(.22,.68,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  color:var(--ink);
  font-family:var(--tt);
  font-size:16px;
  line-height:1.55;
  background-color:var(--wall);
  /* plaster courses drawn in CSS: no tile, so nothing can repeat or seam.
     The real brick lives in the photograph, where it belongs. */
  /* brick DRAWN, not photographed: courses + staggered head joints, so the
     ground reads illustrated rather than rendered. Nothing tiles from a photo. */
  /* flat cream ground with a faint halftone. Drawn brick read as graph paper at
     scale, and the real wall already lives inside the photograph. */
  background-image:
    radial-gradient(rgba(22,23,15,.075) 1.5px, transparent 1.6px),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(22,23,15,.02));
  background-size:18px 18px, 100% 100%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* light print-grain so the wall never reads as flat CSS */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
h1,h2,h3,p,dl,dd,ol,figure{ margin:0; }
ol{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }

.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--ink); color:var(--paper); padding:var(--s3) var(--s4); }
.skip:focus{ left:var(--s3); top:var(--s3); }
:focus-visible{ outline:3px solid var(--green); outline-offset:3px; }
::selection{ background:var(--mint); color:var(--ink); }

.mute{ color:var(--ink-3); }
mark{ background:var(--mint); color:var(--ink); padding:.06em .26em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
mark.tt{ font-family:var(--tt); font-size:.94em; }

.live{
  width:8px; height:8px; border-radius:50%; background:#2E9E4B;
  display:inline-block; margin-right:8px;
  box-shadow:0 0 0 0 rgba(46,158,75,.6); animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(46,158,75,0);} 100%{ box-shadow:0 0 0 0 rgba(46,158,75,0);} }

/* ── tape strips ─────────────────────────────────────────── */
.tape{
  position:absolute; z-index:3;
  width:116px; height:29px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.05));
  background-color:var(--tape);
  border-left:1px solid var(--tape-edge);
  border-right:1px solid var(--tape-edge);
  box-shadow:0 2px 5px rgba(20,21,15,.16);
}
.tape--top{ top:-13px; left:50%; transform:translateX(-50%) rotate(-1.6deg); }
.tape--tl { top:-21px; left:-27px; transform:rotate(-38deg); }
.tape--tr { top:-21px; right:-27px; transform:rotate(38deg); }
.tape--br { bottom:-14px; right:-24px; transform:rotate(-38deg); }

/* ============================================================
   BAR
   ============================================================ */
.bar{
  position:sticky; top:0; z-index:40;
  background:rgba(20,21,15,.95);
  color:var(--paper);
  border-bottom:2px solid var(--green-ink);
}
.bar__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:10px var(--gut);
  display:flex; align-items:center; gap:var(--s3);
}
.mark{ display:flex; align-items:center; gap:9px; min-height:44px; min-width:44px; text-decoration:none; flex:0 0 auto; }

/* section links, centre of the bar */
.barnav{ display:flex; gap:26px; margin-inline:auto; }
.barnav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--tt); font-size:13px; letter-spacing:.02em;
  color:var(--paper); text-decoration:none; opacity:.82;
  border-bottom:2px solid transparent;
  transition:opacity .16s var(--ease), border-color .16s var(--ease);
}
.barnav a:hover{ opacity:1; border-bottom-color:var(--mint); }

/* the three that matter, right of the bar */
.baract{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.lk{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; min-width:44px; padding:0 13px;
  color:var(--paper); text-decoration:none;
  font-family:var(--poster); font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  border:2.5px solid rgba(251,246,231,.55); border-radius:7px;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.lk svg{ width:16px; height:16px; flex:0 0 auto; }
.lk:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-1px); }
.mark__glyph{ width:24px; height:24px; flex:0 0 auto; }
.mark__wm{
  font-family:var(--poster);
  font-size:14px; letter-spacing:.045em; text-transform:uppercase; line-height:1;
}
.ca{
  display:flex; align-items:center; gap:8px;
  min-height:44px;
  border:1px solid rgba(244,241,234,.36);
  padding:6px 12px; font-size:12px; color:var(--paper);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.ca:hover{ border-color:var(--mint); background:rgba(120,183,136,.16); }
.ca__k{ background:var(--mint); color:var(--ink); padding:2px 5px; font-weight:700; font-size:10px; letter-spacing:.1em; }
.ca__cp{ width:13px; height:13px; opacity:.8; }
.ca.is-copied{ border-color:#3ED47A; }
.ca.is-copied .ca__k{ background:#3ED47A; color:var(--ink); }
.buy{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 18px;
  background:var(--mint); color:var(--ink);
  font-family:var(--poster); font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; flex:0 0 auto;
  border:2.5px solid var(--paper); border-radius:7px;
  box-shadow:3px 3px 0 rgba(251,246,231,.5);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .18s var(--ease);
}
.buy:hover{ background:var(--sun); transform:translate(1.5px,1.5px); box-shadow:1px 1px 0 rgba(251,246,231,.5); }
/* the bar has to hold five things; it sheds text before it sheds links */
@media (max-width:1080px){ .barnav{ display:none; } .baract{ margin-inline-start:auto; } }
@media (max-width:820px){
  .lk__t{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .lk{ padding:0 11px; }
}
@media (max-width:600px){
  .ca__v{ display:none; }
  .bar__in{ gap:6px; padding-inline:12px; }
  .baract{ gap:6px; }
  .lk{ padding:0 9px; min-width:42px; }
  .buy{ padding:0 12px; font-size:13px; }
  .ca{ padding:6px 9px; }
}
/* five things will not fit a phone bar: the wordmark goes, the LINKS stay */
@media (max-width:470px){
  .mark__wm{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .mark{ margin-inline-end:auto; }
  .mark__glyph{ width:26px; height:26px; }
}

/* ============================================================
   HERO — a notice and a photograph, both pasted on the wall.
   No compositing: the photo is its own object with a paper border,
   so it never has to line up with the wall behind it.
   ============================================================ */
.hero{ position:relative; z-index:2; padding-block:clamp(36px,6vw,var(--s7)) clamp(48px,8vw,var(--s8)); }
.hero__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,4vw,var(--s7));
  align-items:start;
}

.notice{
  position:relative;
  padding:clamp(26px,3.4vw,44px);
  transform:rotate(-1.1deg);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:6px;
  box-shadow:11px 11px 0 var(--hard);
}
.notice__over{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3);
  padding-bottom:12px; margin-bottom:var(--s4);
  border-bottom:2px solid var(--ink);
}
.notice__h1{
  font-family:var(--poster);
  font-size:clamp(31px,4.05vw,58px);
  line-height:.95; letter-spacing:.004em; text-transform:uppercase;
  margin-bottom:var(--s4);
}
.notice__h1 span{ display:block; }
.notice__h1 i{
  font-family:var(--serif); font-style:italic; text-transform:none;
  font-size:1.02em; letter-spacing:-.01em; color:var(--green);
}
.notice__body{
  font-family:var(--serif);
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.38; color:var(--ink-2); max-width:46ch;
}
.notice__body b{ color:var(--ink); }
.notice__stamp{
  display:inline-block; margin-top:var(--s4);
  font-family:var(--poster);
  font-size:clamp(12px,1.05vw,14px);
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--green-dk);
  border:2.5px solid var(--green);
  padding:7px 12px 5px;
  transform:rotate(-1.5deg);
}
.notice__feet{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); }

/* the token facts live INSIDE the notice — nothing floats over the dog */
.facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s3) var(--s4);
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:2px solid var(--ink);
}
.facts dt{ font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
.facts dd{ font-family:var(--poster); font-size:clamp(13px,1.1vw,16px); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px;
  font-family:var(--poster);
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  padding:0 22px; text-decoration:none;
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:8px;
  box-shadow:5px 5px 0 var(--hard);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .16s var(--ease);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--hard); background:var(--sun); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--hard); }
.btn--go{ background:var(--mint); color:var(--ink); }
.btn--go:hover{ background:var(--mint-hi); color:var(--ink); }
.btn--dark{ background:var(--green-ink); color:var(--paper); border-color:var(--paper); box-shadow:5px 5px 0 rgba(251,246,231,.35); }
.btn--dark:hover{ background:var(--paper); color:var(--ink); box-shadow:2px 2px 0 rgba(251,246,231,.35); }

/* the dog, as a photograph taped to the wall */
.photo{
  position:relative;
  background:var(--paper);
  padding:12px 12px 0;
  transform:rotate(2.2deg);
  margin-top:clamp(10px,2vw,28px);
  border:3px solid var(--ink);
  border-radius:8px;
  box-shadow:11px 11px 0 var(--hard);
}
.photo img{ width:100%; height:auto; }
.photo figcaption{
  padding:12px 2px 14px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); text-align:center;
}

@media (max-width:980px){
  .hero__in{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
  .photo{ max-width:520px; margin-inline:auto; transform:rotate(-1.2deg); }
}

/* ============================================================
   RECEIPTS BOARD
   ============================================================ */
.board{ position:relative; z-index:2; padding-block:clamp(52px,8vw,var(--s8)); }
.board__in{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.board__head{ margin-bottom:var(--s7); max-width:46ch; }
.scrawl{
  font-family:var(--poster);
  font-size:clamp(26px,4.3vw,48px);
  line-height:1.02; letter-spacing:.006em; text-transform:uppercase;
  margin-bottom:var(--s3);
}
.scrawl i{
  font-family:var(--serif); font-style:italic; text-transform:none;
  color:var(--green); letter-spacing:-.01em;
}
.typed{
  position:relative;
  display:inline-block;
  font-size:14.5px; line-height:1.7; color:var(--ink-2);
  max-width:52ch;
  background:var(--sun);
  padding:var(--s3) var(--s4);
  transform:rotate(-1.6deg);
  border:3px solid var(--ink);
  border-radius:6px;
  box-shadow:7px 7px 0 var(--hard);
}
.typed::before{
  content:""; position:absolute; top:-11px; left:22px;
  width:74px; height:24px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.05));
  background-color:var(--tape);
  transform:rotate(-3deg);
  box-shadow:0 2px 5px rgba(20,21,15,.14);
}

.pins{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s5); }
@media (max-width:860px){ .pins{ grid-template-columns:minmax(0,1fr); gap:var(--s6); } }

.pin{
  position:relative;
  background:var(--paper);
  background-image:linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,.02));
  padding:42px var(--s4) var(--s4);
  transform:rotate(var(--r,0deg));
  border:3px solid var(--ink);
  border-radius:10px;
  box-shadow:9px 9px 0 var(--hard);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pin:hover{
  transform:rotate(0deg) translate(-3px,-3px);
  box-shadow:14px 14px 0 var(--hard);
}
.pin--key{ outline:2.5px solid var(--green); outline-offset:-2.5px; }

.pin__src{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:var(--s3); padding-bottom:6px; border-bottom:1px solid var(--wall-dk);
}
.pin__hed{
  font-family:var(--poster);
  font-size:clamp(18px,2.2vw,24px);
  line-height:1.14; letter-spacing:.006em; text-transform:uppercase;
  margin-bottom:var(--s3);
}
.pin__dek{ font-family:var(--serif); font-size:19px; line-height:1.36; color:var(--ink-2); }
.acct{ display:flex; align-items:center; gap:9px; margin-bottom:var(--s3); flex-wrap:wrap; }
.acct__pill{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(118deg, #F7F5F0 0 48%, var(--mint) 48%);
  border:1px solid var(--wall-dk); flex:0 0 auto;
}
.acct__name{ font-family:var(--poster); font-size:14px; letter-spacing:.03em; display:inline-flex; align-items:center; gap:5px; }
.vf{ width:14px; height:14px; color:var(--green); }
.acct__at{ font-size:13.5px; color:var(--ink-3); }
.pin__tw{ font-size:15.5px; line-height:1.55; }
.pin__tw--serif{ font-family:var(--serif); font-size:20px; line-height:1.36; }
.pin__note{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:2px dashed var(--ink);
  font-family:var(--hand);
  font-size:21.5px; line-height:1.2;
  color:var(--green-dk);
  transform:rotate(-.7deg);
}
.board__foot{
  margin-top:var(--s7); padding-top:var(--s3);
  border-top:2px solid var(--ink);
  font-size:12px; line-height:1.7; color:var(--ink-3); max-width:78ch;
}

/* ============================================================
   THE HANDOFF — a painted panel on the wall
   ============================================================ */
.paint{
  position:relative; z-index:2;
  margin-block:clamp(40px,7vw,var(--s8));
  padding-block:clamp(52px,8vw,var(--s8));
  background:var(--green-ink);
  color:var(--paper);
  box-shadow:0 26px 50px -34px rgba(20,21,15,.85);
}
.paint::before,.paint::after{
  content:""; position:absolute; left:0; right:0; height:18px;
  background:var(--green-ink);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='18' preserveAspectRatio='none'%3E%3Cpath d='M0 18 L0 11 C 60 6, 120 13, 190 9 C 260 5, 330 14, 400 10 C 470 6, 540 13, 600 8 L600 18 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='18' preserveAspectRatio='none'%3E%3Cpath d='M0 18 L0 11 C 60 6, 120 13, 190 9 C 260 5, 330 14, 400 10 C 470 6, 540 13, 600 8 L600 18 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:600px 18px; mask-size:600px 18px;
}
.paint::before{ top:-17px; }
.paint::after{ bottom:-17px; transform:scaleY(-1); }

.paint__in{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.paint__h{
  font-family:var(--poster);
  font-size:clamp(24px,4vw,45px);
  line-height:1.06; letter-spacing:.006em; text-transform:uppercase;
  margin-bottom:var(--s6);
}

.lane{ position:relative; height:54px; margin-bottom:var(--s6); }
.lane__line{
  position:absolute; inset-inline:0; top:50%; height:2px;
  background:repeating-linear-gradient(90deg, rgba(244,241,234,.42) 0 14px, transparent 14px 26px);
}
.lane__baton{
  position:absolute; top:50%; left:0; width:104px; height:16px;
  transform:translate3d(0,-50%,0) rotate(-5deg);
  display:flex; will-change:transform;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.55));
}
.lane__white{ flex:0 0 42%; background:linear-gradient(180deg,#FBF8F3,#D9D4CD); border-radius:8px 3px 3px 8px; }
.lane__grip{
  flex:1; border-radius:3px 8px 8px 3px;
  background:
    repeating-linear-gradient(90deg, rgba(22,38,28,.34) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, var(--mint-hi), var(--green));
}

.legs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
@media (max-width:860px){ .legs{ grid-template-columns:minmax(0,1fr); } }
.leg{ border-top:2px solid rgba(244,241,234,.28); padding-top:var(--s4); }
.leg__k{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mint); margin-bottom:var(--s3); }
.leg__h{
  font-family:var(--poster); font-size:clamp(21px,2.7vw,29px);
  line-height:1.06; letter-spacing:.01em; text-transform:uppercase; margin-bottom:6px;
}
.leg__y{ font-size:12px; letter-spacing:.08em; color:rgba(244,241,234,.72); margin-bottom:var(--s3); }
.leg__p{ font-family:var(--serif); font-size:18px; line-height:1.42; color:rgba(244,241,234,.92); }
.leg__p b{ color:var(--paper); }
.leg--now{ border-top-color:var(--mint); }
.leg--now .leg__h{ color:var(--mint); }

/* ============================================================
   FILING
   ============================================================ */
.filing{ position:relative; z-index:2; padding-block:clamp(52px,8vw,var(--s8)); }
.filing__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:var(--s7);
  align-items:start;
}
@media (max-width:940px){ .filing__in{ grid-template-columns:minmax(0,1fr); gap:var(--s6); } }

.sheet{
  position:relative;
  background:var(--paper);
  background-image:linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,.02));
  padding:clamp(24px,4vw,var(--s6));
  transform:rotate(-.9deg);
  border:3px solid var(--ink);
  border-radius:8px;
  box-shadow:11px 11px 0 var(--hard);
}
.sheet__k{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s2); }
.sheet__h{
  font-family:var(--poster); font-size:clamp(26px,3.6vw,40px);
  line-height:1.04; letter-spacing:.008em; text-transform:uppercase;
  margin-bottom:var(--s5); padding-bottom:var(--s3); border-bottom:3px solid var(--ink);
}
.rows > div{
  display:grid; grid-template-columns:minmax(130px,.4fr) minmax(0,1fr); gap:var(--s4);
  padding-block:11px; border-bottom:1px solid var(--wall-dk); align-items:baseline;
}
.rows dt{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rows dd{ font-size:15.5px; word-break:break-word; }
.rows dd a{
  display:inline-flex; align-items:center; min-height:40px;
  color:var(--green); text-decoration:none; border-bottom:2px solid var(--mint); font-weight:700;
}
.rows dd a:hover{ background:var(--mint); color:var(--ink); }
@media (max-width:560px){ .rows > div{ grid-template-columns:minmax(0,1fr); gap:5px; } }

.cabox{
  display:inline-flex; align-items:center; gap:9px; max-width:100%; min-height:44px;
  background:var(--mint); color:var(--ink);
  padding:7px 11px; font-size:12.5px;
  transition:background .16s var(--ease);
}
.cabox span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cabox svg{ width:13px; height:13px; flex:0 0 auto; }
.cabox:hover{ background:var(--mint-hi); }
.cabox.is-copied{ background:#2E9E4B; color:#fff; }
.sheet__foot{ margin-top:var(--s5); font-family:var(--hand); font-size:21px; line-height:1.2; color:var(--green-dk); transform:rotate(-.6deg); }

.frame{
  position:relative;
  background:var(--paper);
  padding:12px 12px 0;
  transform:rotate(1.1deg);
  box-shadow:0 20px 38px -24px rgba(20,21,15,.7), 0 2px 6px rgba(20,21,15,.10);
}
.frame img{ width:100%; height:auto; }
.frame figcaption{ padding:var(--s3) 2px var(--s4); font-size:12.5px; line-height:1.6; color:var(--ink-3); }
.frame figcaption b{ color:var(--ink); font-family:var(--poster); font-weight:400; letter-spacing:.04em; text-transform:uppercase; }

/* ============================================================
   LAST
   ============================================================ */
.last{
  position:relative; z-index:2;
  background:var(--ink); color:var(--paper);
  padding-block:clamp(52px,8vw,var(--s8));
}
.last__in{
  max-width:900px; margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.last__h{
  font-family:var(--poster);
  font-size:clamp(36px,7.6vw,88px);
  line-height:.96; letter-spacing:.01em; text-transform:uppercase;
  margin-bottom:var(--s5);
}
.cabig{
  width:100%;
  display:flex; flex-direction:column; gap:7px;
  background:var(--green-ink);
  border:2px solid var(--green);
  padding:var(--s4); margin-bottom:var(--s4);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.cabig:hover{ border-color:var(--mint); background:#0F1B13; }
.cabig__k{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mint); }
.cabig__v{ font-size:clamp(11px,2.5vw,17px); word-break:break-all; line-height:1.34; }
.cabig.is-copied{ border-color:#3ED47A; }
.last__p{ font-family:var(--serif); font-size:clamp(16px,2vw,20px); line-height:1.42; color:rgba(244,241,234,.8); max-width:50ch; margin-bottom:var(--s5); }
.last__row{ display:flex; gap:var(--s2); flex-wrap:wrap; justify-content:center; }

/* ============================================================
   FOOT
   ============================================================ */
.foot{ position:relative; z-index:2; background:var(--green-ink); color:var(--paper); padding-block:var(--s6) var(--s4); }
.foot__in{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.6fr); gap:var(--s5); }
@media (max-width:760px){ .foot__in{ grid-template-columns:minmax(0,1fr); } }
.foot__legal{ font-size:11.5px; line-height:1.7; color:rgba(244,241,234,.7); max-width:72ch; }
.foot__nav{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.foot__nav a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  font-size:14px; text-decoration:none; color:rgba(244,241,234,.88);
  border-bottom:1px solid transparent;
}
.foot__nav a:hover{ color:var(--mint); border-bottom-color:var(--mint); }
.foot__cr{ grid-column:1/-1; padding-top:var(--s4); border-top:1px solid rgba(244,241,234,.18); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(244,241,234,.64); }

/* ============================================================
   TOAST + REVEAL
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:60;
  transform:translate3d(-50%,16px,0);
  background:var(--ink); color:var(--paper); border:2px solid var(--mint);
  padding:11px 18px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate3d(-50%,0,0); }

.rv{ opacity:0; transform:translate3d(0,20px,0); }
.rv.is-in{ opacity:1; transform:translate3d(0,0,0); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.pin.rv{ transform:translate3d(0,24px,0) rotate(calc(var(--r,0deg) + 2.5deg)); }
.pin.rv.is-in{ transform:translate3d(0,0,0) rotate(var(--r,0deg)); transition:opacity .55s var(--ease), transform .7s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .rv,.pin.rv{ opacity:1 !important; transform:rotate(var(--r,0deg)) !important; }
  .live{ animation:none; }
  .btn:hover,.pin:hover,.buy:hover{ transform:none; }
}

/* ============================================================
   CARTOON FURNITURE
   Stickers, comic tails, halftone. Nothing here touches the
   photograph of the dog — the character is never restyled.
   ============================================================ */

@font-face{
  font-family:"Caveat-fb";
  src:local("Bradley Hand"), local("Segoe Script"), local("Comic Sans MS");
  size-adjust:72.7%; ascent-override:128%; descent-override:36%; line-gap-override:0%;
}

/* starburst sticker slapped on the notice */
.burst{
  position:absolute; z-index:6;
  top:-30px; right:-26px;
  width:112px; height:112px;
  display:grid; place-items:center;
  background:var(--sun);
  color:var(--ink);
  font-family:var(--poster);
  font-size:17px; line-height:1.02; text-align:center; text-transform:uppercase;
  transform:rotate(13deg);
  clip-path:polygon(50% 0%,60% 12%,74% 5%,78% 21%,93% 20%,90% 35%,104% 42%,94% 53%,104% 65%,89% 71%,92% 86%,77% 84%,72% 99%,59% 90%,50% 104%,41% 90%,28% 99%,23% 84%,8% 86%,11% 71%,-4% 65%,6% 53%,-4% 42%,10% 35%,7% 20%,22% 21%,26% 5%,40% 12%);
  filter:drop-shadow(4px 4px 0 var(--hard));
}
@media (max-width:620px){ .burst{ width:78px; height:78px; font-size:12px; top:-30px; right:-8px; } }

/* label stuck above the receipts heading */
.sticker{
  display:inline-block;
  font-family:var(--poster);
  font-size:clamp(13px,1.4vw,17px);
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--mint); color:var(--ink);
  border:3px solid var(--ink); border-radius:999px;
  padding:8px 18px 6px;
  transform:rotate(-2.4deg);
  box-shadow:5px 5px 0 var(--hard);
  margin-bottom:var(--s4);
}

/* the tweet cards get a comic speech tail; the press cutting does not */
.pin:has(.acct){ position:relative; }
.pin:has(.acct)::before,
.pin:has(.acct)::after{
  content:""; position:absolute; left:46px; bottom:-25px;
  width:0; height:0; border-style:solid;
}
.pin:has(.acct)::before{
  border-width:25px 22px 0 0;
  border-color:var(--ink) transparent transparent transparent;
}
.pin:has(.acct)::after{
  bottom:-19px; left:49px;
  border-width:19px 16px 0 0;
  border-color:var(--paper) transparent transparent transparent;
}

/* halftone behind the evidence board */
.board{
  background-color:#DCE8DC;
  background-image:radial-gradient(rgba(22,23,15,.11) 1.7px, transparent 1.8px);
  background-size:16px 16px;
  border-block:4px solid var(--ink);
}

/* the slogan reads as a stuck-on sticker, not a printed rule */
.notice__stamp{
  background:var(--mint);
  border:3px solid var(--ink) !important;
  border-radius:6px;
  color:var(--ink) !important;
  box-shadow:5px 5px 0 var(--hard);
  transform:rotate(-2.2deg) !important;
}

/* chunkier torn edge on the painted panel */
.paint{ border-block:4px solid var(--ink); }
.paint__h{ text-shadow:4px 4px 0 rgba(0,0,0,.35); }

/* the CA blocks get outlined too */
.cabox{ border:3px solid var(--ink); border-radius:6px; box-shadow:4px 4px 0 var(--hard); }
.cabox:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--hard); }
.cabig{ border-width:3px !important; border-radius:10px; box-shadow:8px 8px 0 rgba(251,246,231,.28); }
.ca{ border-width:2.5px !important; border-radius:7px; }

/* the tape sits on top of the new borders */
.tape{ z-index:8; }

/* ============================================================
   MARKER LAYER — the case file, gone over by hand.
   Circles overshoot and cross past themselves, arrows have open
   V heads, underlines are two divergent strokes. Nothing closes
   cleanly, because a marker doesn't. Each stroke draws itself
   when it scrolls into view.
   ============================================================ */
.mk{ position:relative; display:inline-block; }

.doodle{
  position:absolute; z-index:5; pointer-events:none;
  overflow:visible;
}
.doodle path{
  stroke:var(--green);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  opacity:.92;
  /* pathLength="1" normalises every stroke, so one rule draws them all */
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.doodle.is-drawn path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .62s cubic-bezier(.55,.06,.35,1);
}
.doodle.is-drawn path:nth-child(2){ transition-delay:.20s; }
.doodle.is-drawn path:nth-child(3){ transition-delay:.30s; }

.doodle--ring{
  left:-9%; top:50%; width:118%; height:auto;
  transform:translateY(-50%) rotate(-1.2deg);
}
.mk--tight .doodle--ring{ left:-7%; width:114%; }
/* hugs its own phrase so it can never strike through the line below */
.mk--u{ display:inline-block; }
.doodle--under{
  left:-3%; bottom:-7px; width:106%; height:auto;
}
.doodle--under path{ stroke-width:3.2; }

/* anchored inside the ringed span, so it always points AT the fact */
.doodle--up{
  left:52%; top:calc(100% - 2px);
  width:46px; height:auto;
  transform:rotate(-4deg);
}
.doodle--tick{
  display:inline-block; position:static;
  width:30px; height:auto; margin-left:10px;
  vertical-align:-2px;
}
.doodle--tick path{ stroke:var(--mint); stroke-width:6; }

@media (max-width:620px){
  .doodle--up{ width:34px; left:58%; }
  .doodle path{ stroke-width:3.4; }
  .doodle--tick{ width:24px; }
}
@media (prefers-reduced-motion:reduce){
  .doodle path{ stroke-dashoffset:0; }
  .doodle.is-drawn path{ transition:none; }
}

/* ============================================================
   TICKER BAND + LIFE
   ============================================================ */
.band{
  position:relative; z-index:3;
  background:var(--ink); color:var(--paper);
  border-block:4px solid var(--ink);
  overflow:hidden;
  padding-block:13px;
  transform:rotate(-.7deg) scaleX(1.04);
}
.band__run{
  display:flex; align-items:center; gap:22px;
  width:max-content; white-space:nowrap;
  font-family:var(--poster); font-size:16px; letter-spacing:.03em; text-transform:uppercase;
  animation:run 34s linear infinite;
}
.band__run b{ color:var(--mint); }
@keyframes run{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-50%,0,0);} }

/* stickers breathe so the page doesn't sit dead still */
.burst{ animation:wob 4.4s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes wob{
  0%,100%{ transform:rotate(13deg) scale(1); }
  50%{ transform:rotate(9deg) scale(1.045); }
}
.sticker{ animation:wob2 5.6s ease-in-out infinite; }
@keyframes wob2{
  0%,100%{ transform:rotate(-2.4deg); }
  50%{ transform:rotate(.6deg); }
}

/* entrance with a little overshoot — cartoon weight, not a fade */
.pin.rv.is-in, .notice.rv.is-in, .sheet.rv.is-in, .photo.rv.is-in{
  transition:opacity .4s var(--ease), transform .55s cubic-bezier(.22,.85,.3,1.06);
}

/* confetti on copy */
.conf{
  position:fixed; z-index:70; width:10px; height:14px;
  border:2px solid var(--ink); border-radius:2px;
  pointer-events:none;
  animation:pop .85s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes pop{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) rotate(var(--dr)); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .band__run{ animation:none; }
  .burst,.sticker{ animation:none; }
  .conf{ display:none; }
}
@media (max-width:620px){
  .band__run{ font-size:13px; gap:16px; }
}

/* ============================================================
   MOBILE REFINEMENT
   ============================================================ */
@media (max-width:620px){
  .notice{ padding:38px var(--s4) var(--s5); transform:rotate(-.6deg); }
  /* keep the eyebrow clear of the sticker instead of nudging the sticker again */
  .notice__over{ padding-right:74px; }
  .notice__h1{ font-size:clamp(40px,11.6vw,58px); line-height:.88; }
  .notice__body{ font-size:18px; }
  .notice__over{ font-size:10.5px; letter-spacing:.13em; }
  .notice__stamp{ font-size:12px; padding:6px 10px 4px; }
  .notice__feet .btn{ flex:1 1 auto; min-width:132px; }

  .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }

  .scrawl{ font-size:clamp(30px,8.6vw,40px); }
  .board__head{ margin-bottom:var(--s6); }
  .typed{ font-size:13.5px; padding:var(--s3); }

  .pin{ padding:38px var(--s3) var(--s4); }
  .pin__hed{ font-size:21px; }
  .pin__dek{ font-size:17px; }
  .pin__tw{ font-size:15px; }
  .pin__tw--serif{ font-size:18px; }

  /* tape hangs off the card edge; keep it inside the viewport on narrow screens */
  .tape{ width:76px; height:22px; }
  .tape--tl{ left:-8px; top:-18px; }
  .tape--tr{ right:-8px; top:-18px; }
  .tape--br{ right:-8px; bottom:-15px; }

  .paint__h{ font-size:clamp(26px,7.6vw,34px); margin-bottom:var(--s5); }
  .lane{ height:44px; margin-bottom:var(--s5); }
  .lane__baton{ width:82px; height:13px; }

  .sheet{ padding:38px var(--s4) 40px; transform:rotate(-.35deg); box-shadow:6px 6px 0 var(--hard); }
  .sheet__h{ font-size:clamp(30px,8.6vw,40px); }
  .rows dd{ font-size:15px; }
  .cabox{ font-size:11px; width:100%; }

  .last__h{ font-size:clamp(44px,14vw,68px); }
  .cabig__v{ font-size:12px; }
  .last__row{ width:100%; }
  .last__row .btn{ flex:1 1 auto; min-width:140px; }

  .frame{ transform:rotate(.5deg); box-shadow:6px 6px 0 var(--hard); }
  .photo{ transform:rotate(-.8deg); box-shadow:6px 6px 0 var(--hard); }
  .notice{ box-shadow:7px 7px 0 var(--hard); }
  .pin{ box-shadow:6px 6px 0 var(--hard); }
  .pin:hover{ box-shadow:8px 8px 0 var(--hard); }
  .burst{ right:-6px; }
}

@media (max-width:380px){
  .notice__h1{ font-size:38px; }
  .notice__feet .btn, .last__row .btn{ flex:1 1 100%; }
  .bar__in{ gap:var(--s2); }
  .buy{ padding:0 14px; }
}