/* ============================================================================
   FOODSTAMP.PLUG — "RATION / GOVERNMENT-ISSUE" design system.
   Manila paper + ink stamps + monospace form-fields (A) · colossal poster type
   + streetwear (B) · neon-green LIVE + highlighter marker (C).
   Hand-authored foundation. Pages compose the documented components below.
   ============================================================================ */

/* ---- tokens ---- */
:root{
  --paper:#e7dfcb; --paper2:#ded4bc; --paper3:#d6cbb0;
  --ink:#16130c; --ink2:#403a2c;
  --red:#bb3320; --red-soft:#bb332022;
  --green:#12b866; --green-deep:#0a7a44;
  --hi:#eae03a;
  --line:#16130c;
  --pad:clamp(20px,4.6vw,68px);      /* page side padding */
  --rule:clamp(28px,3.4vw,52px);     /* left margin-rule offset from padding */
  --maxw:1400px;
  --mono:'Space Mono',ui-monospace,monospace;
  --disp:'Anton',Impact,sans-serif;
  --black:'Archivo',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.6;
  overflow-x:hidden; position:relative; min-height:100vh;
}
@media (pointer:fine){ body{cursor:none} }        /* replaced by the registration cursor */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--hi);color:var(--ink)}

/* ---- global texture layers (injected once by app.js) ---- */
.fx-grain,.fx-dots{position:fixed;inset:0;pointer-events:none;z-index:1}
.fx-grain{opacity:.5;mix-blend-mode:multiply;
  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='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.fx-dots{opacity:.06;background-image:radial-gradient(var(--ink) 1px,transparent 1.5px);background-size:7px 7px}
.fx-rule{position:fixed;top:0;bottom:0;left:calc(var(--pad) + var(--rule));width:1.5px;
  background:var(--red);opacity:.28;z-index:2;pointer-events:none}
@media (max-width:720px){ .fx-rule{display:none} }

/* ---- registration-mark cursor (app.js) ---- */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;width:22px;height:22px;
  margin:-11px 0 0 -11px;mix-blend-mode:multiply;will-change:transform}
.cursor::before,.cursor::after{content:"";position:absolute;background:var(--ink)}
.cursor::before{left:10px;top:0;width:1.5px;height:22px}
.cursor::after{top:10px;left:0;height:1.5px;width:22px}
.cursor.hot{width:30px;height:30px;margin:-15px 0 0 -15px}
.cursor.hot::before{height:30px}.cursor.hot::after{width:30px}
.cursor.hot i{position:absolute;inset:5px;border:1.5px solid var(--red);border-radius:50%}
@media (pointer:coarse){ .cursor{display:none} }

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:calc(var(--pad) + var(--rule) + 20px);padding-right:var(--pad);position:relative;z-index:3}
.section{padding:clamp(56px,9vh,120px) 0;position:relative;z-index:3}
.section--tight{padding:clamp(30px,5vh,64px) 0}

/* ---- marquee / ticker ---- */
.tick{background:var(--ink);color:var(--paper);position:relative;z-index:4;overflow:hidden;white-space:nowrap;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:8px 0}
.tick__track{display:inline-block;will-change:transform;animation:tick 34s linear infinite}
.tick span{padding:0 20px}
.tick .g{color:var(--green)} .tick .y{color:var(--hi)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---- form header rule (FS-01 line) ---- */
.formrow{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:3px double var(--ink);padding:16px 0 10px}
.formrow .rx{color:var(--red);font-weight:700}

/* ---- type ---- */
.eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);font-weight:700}
.disp{font-family:var(--disp);text-transform:uppercase;line-height:.82;letter-spacing:.5px;font-weight:400}
.mast{font-family:var(--disp);text-transform:uppercase;line-height:.8;letter-spacing:.5px;
  font-size:clamp(72px,17vw,232px)}
.h-sec{font-family:var(--disp);text-transform:uppercase;font-size:clamp(38px,7vw,104px);line-height:.86;letter-spacing:.5px}
.lede{font-size:clamp(14px,1.5vw,17px);line-height:1.65;max-width:62ch}
.mark{background:var(--hi);padding:0 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.redact{background:var(--ink);color:transparent;user-select:none;padding:0 3px;border-radius:1px}

/* ---- section head (numbered, field-manual) ---- */
.sec-head{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:clamp(24px,4vh,48px);flex-wrap:wrap}
.sec-head .no{font-family:var(--black);font-weight:900;font-size:13px;letter-spacing:.1em;color:var(--red)}
.sec-head .ttl{font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,4.4vw,58px);line-height:.9;letter-spacing:.5px}
.sec-head .meta{margin-left:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}

/* ---- ink stamp ---- */
.stamp{display:inline-block;border:3px solid var(--red);color:var(--red);border-radius:6px;
  font-family:var(--black);font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  padding:9px 16px;line-height:1.02;text-align:center;opacity:.9;box-shadow:inset 0 0 0 2px var(--red-soft)}
.stamp small{display:block;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.18em;margin-top:3px}
.stamp--rot{transform:rotate(-9deg)}

/* ---- perforation divider ---- */
.perf{border:0;border-top:2px dashed var(--ink);opacity:.55;position:relative}
.perf::before,.perf::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:2px dashed var(--ink);opacity:1}
.perf::before{left:-8px}.perf::after{right:-8px}

/* ---- buttons (stamp-style) ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--black);font-weight:900;
  text-transform:uppercase;letter-spacing:.05em;font-size:14px;padding:13px 22px;border:2.5px solid var(--ink);
  background:var(--paper);box-shadow:4px 4px 0 var(--ink);transition:transform .12s var(--ease),box-shadow .12s var(--ease);cursor:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--red{background:var(--red);color:var(--paper);border-color:var(--ink)}
.btn--green{background:var(--green);color:var(--ink);border-color:var(--green-deep);box-shadow:4px 4px 0 var(--green-deep)}
.btn--green:hover{box-shadow:6px 6px 0 var(--green-deep)}
.btn--ghost{background:transparent;box-shadow:none}
.btn--ghost:hover{box-shadow:none;background:var(--ink);color:var(--paper)}

/* ---- ration coupon (app tile) ---- */
.grid{display:grid;gap:0;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.coupon{border:2px solid var(--ink);margin:-1px 0 0 -1px;padding:18px 20px 18px 30px;position:relative;
  background:var(--paper);display:flex;flex-direction:column;min-height:210px;transition:background .2s,transform .2s var(--ease)}
.coupon::before{content:"";position:absolute;left:11px;top:12px;bottom:12px;border-left:2px dashed var(--ink);opacity:.5}
.coupon:hover{background:var(--paper2);transform:translateY(-2px);z-index:2}
.coupon__ser{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.coupon__nm{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,3.2vw,42px);line-height:.86;margin-top:8px}
.coupon__cat{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.coupon__blurb{font-size:12.5px;line-height:1.5;margin-top:10px;color:var(--ink)}
.coupon__foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.coupon--soon{opacity:.72}

/* ---- status tag ---- */
.tag{font-family:var(--black);font-weight:900;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border:2px solid var(--ink)}
.tag--live{background:var(--green);border-color:var(--green-deep);box-shadow:0 0 0 2px #12b86622,0 0 14px #12b86655}
.tag--soon{color:var(--ink2);border-style:dashed}
.tag--build{background:var(--hi);border-color:var(--ink)}
.play{font-family:var(--black);font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.04em;
  border-bottom:3px solid var(--red);padding-bottom:1px}

/* ---- data list (form fields / specs) ---- */
.fields{border-top:2px solid var(--ink)}
.field{display:flex;gap:16px;border-bottom:1px solid var(--ink2);padding:11px 0;font-size:13px}
.field dt{flex:0 0 34%;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);font-size:11px}
.field dd{flex:1}

/* ---- filter chips ---- */
.filters{display:flex;gap:0;flex-wrap:wrap;margin-bottom:22px}
.chip{font-family:var(--black);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;
  padding:9px 16px;border:2px solid var(--ink);margin:0 -2px -2px 0;background:var(--paper);cursor:none}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---- note / sticker ---- */
.note{font-style:italic;font-size:12px;color:var(--red);display:inline-block}
.sticker{display:inline-block;background:var(--hi);border:2.5px solid var(--ink);padding:8px 12px;
  font-family:var(--black);font-weight:900;text-transform:uppercase;box-shadow:5px 5px 0 var(--ink);transform:rotate(4deg)}

/* ---- footer ---- */
.foot{background:var(--ink);color:var(--paper);position:relative;z-index:4;padding:clamp(40px,7vh,80px) 0 34px}
.foot a{border-bottom:2px solid transparent}
.foot a:hover{border-color:var(--green)}
.foot .formrow{border-color:var(--paper);color:var(--paper)}
.foot .formrow .rx{color:var(--green)}

/* ---- reveals (app.js IntersectionObserver adds .in) ---- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stamp-in{opacity:0;transform:scale(1.5) rotate(-9deg)}
.stamp-in.in{opacity:.9;transform:rotate(-9deg);transition:opacity .18s,transform .18s cubic-bezier(.3,1.6,.5,1)}

/* ---- focus ---- */
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---- nav ---- */
.nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0}
.nav__brand{font-family:var(--black);font-weight:900;font-size:19px;letter-spacing:-.01em}
.nav__brand b{color:var(--red)}
.nav__links{display:flex;gap:20px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.nav__links a{border-bottom:2px solid transparent}
.nav__links a:hover{border-color:var(--red)}
@media (max-width:640px){ .nav__links{display:none} }

/* ---- responsive ---- */
@media (max-width:720px){
  .wrap{padding-left:var(--pad)}
  .formrow{font-size:10px;gap:8px}
  .sec-head .meta{width:100%;margin:6px 0 0}
  .field dt{flex-basis:44%}
}
@media (prefers-reduced-motion:reduce){
  .tick__track{animation:none}
  .reveal,.stamp-in{opacity:1;transform:none;transition:none}
  .btn,.coupon{transition:none}
}