@font-face{font-family:'ACI Display';src:url(/assets/fonts/alfa-slab-one-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:'ACI Sign';src:url(/assets/fonts/oswald-latin-var.woff2) format('woff2');font-weight:200 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:'ACI Text';src:url(/assets/fonts/libre-franklin-latin-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212}

/* ── TOKENS ─────────────────────────────────────────────────────────────────
   Every colour, font, radius and shadow value in this file is declared here
   and nowhere else. Colours are SAMPLED PIXELS from American Coney Island's
   own assets, not chosen:
     --red        #FF1821  dominant saturated hue, images/smbanner.gif (their
                           stars-and-stripes site banner) and the script in
                           images/signsm.gif (their wordmark)
     --blue       #0000C6  dominant saturated hue, same two files
     --red-deep   #A61616  booth vinyl / valance red, images/inside.JPG
     --red-shadow #710A0D  same photo, shadowed vinyl
     --blue-ink   #201671  deep blue, images/kit logo.png
   Contrast, measured and recorded:
     --blue on --paper          11.6:1  AA/AAA — links and body-weight text
     --red  on --paper           3.9:1  large display text only (>=24px/19px bold)
     --paper on --red-deep       7.6:1  AA — small white text on a red field
     --paper on --blue          11.6:1  AA/AAA — buttons
   Their own stylesheet used #0000C8 for footer text; the sampled #0000C6 from
   the logo pixels is used instead, per rules/20-theming.md.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --red:#FF1821;
  --red-deep:#A61616;
  --red-shadow:#710A0D;
  --blue:#0000C6;
  --blue-ink:#201671;
  --paper:#FFFFFF;
  --paper-warm:#FBF7F0;
  --paper-edge:#EDE6DA;
  --ink:#141010;
  --ink-soft:#4B4341;
  --rule:#D8CFC2;
  --chrome-1:#F2F3F5;
  --chrome-2:#C9CDD3;
  --shade:rgba(20,16,16,.55);

  --font-display:'ACI Display',Rockwell,'Roboto Slab',Georgia,serif;
  --font-sign:'ACI Sign','Oswald','Arial Narrow',system-ui,sans-serif;
  --font-text:'ACI Text','Libre Franklin','Helvetica Neue',Arial,system-ui,sans-serif;

  --r-sm:3px; --r-md:6px; --r-lg:10px;
  --lift:0 2px 0 rgba(20,16,16,.18);
  --plate:0 1px 2px rgba(20,16,16,.14),0 8px 24px rgba(20,16,16,.10);
  --sunk:inset 0 0 0 1px rgba(20,16,16,.10);

  --wrap:1140px;
  --wrap-wide:1340px;
  --gut:clamp(1rem,4vw,2.5rem);
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper-warm);color:var(--ink);
  font:400 clamp(1rem,.96rem + .22vw,1.125rem)/1.68 var(--font-text);
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3,h4{margin:0;line-height:1.02;text-wrap:balance}
p{margin:0 0 1.1em}
ul{margin:0;padding:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--paper);color:var(--blue);
  padding:.7rem 1rem;font:600 1rem/1 var(--font-sign);box-shadow:var(--plate)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── THE ENAMEL BAND ─────────────────────────────────────────────────────────
   Their images/smbanner.gif — a blue star band over red-and-white stripes —
   rebuilt in CSS so it is crisp at any width and weighs nothing. */
.band{height:16px;background:
  repeating-linear-gradient(90deg,var(--red) 0 16px,var(--paper) 16px 32px)}
.band--stars{height:22px;background:var(--blue);
  background-image:
    radial-gradient(circle at 50% 46%,var(--paper) 2.6px,transparent 2.7px);
  background-size:26px 22px}
.band--stack{height:auto}
.band--stack>*{display:block}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:40;background:var(--paper);
  box-shadow:0 1px 0 var(--rule),0 6px 18px rgba(20,16,16,.06)}
/* One bar: brand, nav and the phone button share a single centred row at
   desktop. Below 62rem the nav drops to its own full-width line and the brand
   and phone button stay on the first, still centred against each other. */
.masthead__row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.25rem;
  padding-block:.6rem;max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;flex:0 0 auto;line-height:0;order:1;margin-right:auto}
.brand img{width:clamp(148px,30vw,236px);height:auto;aspect-ratio:358/129;display:block}
.callbtn{order:2;flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--blue);color:var(--paper);text-decoration:none;
  font:600 clamp(.82rem,.74rem + .3vw,.98rem)/1 var(--font-sign);
  letter-spacing:.06em;text-transform:uppercase;
  padding:.86rem 1rem;min-height:46px;border-radius:var(--r-md);box-shadow:var(--lift);
  white-space:nowrap}
.callbtn:hover{background:var(--blue-ink)}
.callbtn svg{width:1em;height:1em;fill:currentColor;flex:0 0 auto}

.nav{order:3;flex:1 0 100%;min-width:0}
.navtoggle{display:none;align-items:center;gap:.45rem;cursor:pointer;
  font:600 .82rem/1 var(--font-sign);letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);background:none;border:0;padding:.85rem 0;min-height:46px;
  border-radius:var(--r-sm)}
.js .navtoggle{display:inline-flex}
.navtoggle span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;
  width:20px;height:2px;background:currentColor}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.nav[data-open] .navtoggle span{background:transparent}
.nav[data-open] .navtoggle span::before{top:0;transform:rotate(45deg)}
.nav[data-open] .navtoggle span::after{top:0;transform:rotate(-45deg)}
.nav__panel{background:var(--paper);border-top:1px solid var(--rule);
  padding:.5rem var(--gut) 1.2rem}
.js .nav__panel{display:none;position:absolute;left:0;right:0;
  box-shadow:0 14px 30px rgba(20,16,16,.14)}
.js .nav[data-open] .nav__panel{display:block}
.nav__list{display:grid;gap:.1rem;list-style:none;max-width:var(--wrap);margin-inline:auto}
.nav__list a{display:block;text-decoration:none;color:var(--ink);
  font:600 1.02rem/1 var(--font-sign);letter-spacing:.05em;text-transform:uppercase;
  padding:.85rem .25rem;border-bottom:1px solid var(--paper-edge)}
.nav__list a:hover,.nav__list a[aria-current]{color:var(--red-deep)}
.nav__list a[aria-current]{border-bottom-color:var(--red)}

@media (min-width:62rem){
  .masthead__row{flex-wrap:nowrap;gap:1rem;padding-block:.7rem}
  .brand{order:1;margin-right:0}
  .brand img{width:184px}
  .callbtn{padding:.8rem .8rem;font-size:.84rem}
  .nav{order:2;flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end}
  .callbtn{order:3}
  .navtoggle,.js .navtoggle{display:none}
  .nav__panel,.js .nav__panel,.js .nav[data-open] .nav__panel{
    display:block;position:static;box-shadow:none;border:0;padding:0;width:100%}
  .nav__list{display:flex;flex-wrap:wrap;gap:0 .1rem;justify-content:flex-end;align-items:center}
  /* the active underline is drawn inside the padding so it cannot shift the row */
  .nav__list a{padding:.5rem .38rem;font-size:.76rem;letter-spacing:.02em;
    border-bottom:0;position:relative;line-height:1.1;white-space:nowrap}
  .nav__list a[aria-current]::after{content:"";position:absolute;left:.38rem;right:.38rem;
    bottom:.02rem;height:3px;background:var(--red)}
}
@media (min-width:78rem){ .nav__list a{font-size:.8rem;padding:.5rem .46rem;letter-spacing:.03em}
  .brand img{width:212px} .callbtn{padding:.86rem 1rem;font-size:.9rem} }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero{background:var(--red-deep);color:var(--paper);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:var(--red)}
.hero__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(2.2rem,6vw,4.4rem) var(--gut) clamp(2rem,5vw,3.4rem);
  display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:56rem){.hero__inner{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);align-items:center}}
.hero__kicker{font:600 clamp(.78rem,.72rem + .25vw,.92rem)/1.3 var(--font-sign);
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 1rem;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.hero__kicker::before{content:"";width:34px;height:3px;background:var(--paper);flex:0 0 auto}
.hero h1{font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.45rem,1.3rem + 6.4vw,5.1rem);letter-spacing:-.015em;
  text-shadow:0 3px 0 var(--red-shadow)}
.hero__sub{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);margin:1.15rem 0 0;max-width:38ch;
  color:var(--paper)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.hero__shot{position:relative}
.hero__shot img{border-radius:var(--r-md);box-shadow:0 18px 40px rgba(20,16,16,.4);
  border:5px solid var(--paper);width:100%}
.hero__credit{font:500 .74rem/1.45 var(--font-sign);letter-spacing:.08em;text-transform:uppercase;
  margin:.6rem 0 0;color:var(--paper)}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font:600 clamp(.85rem,.8rem + .2vw,.96rem)/1 var(--font-sign);
  letter-spacing:.09em;text-transform:uppercase;
  padding:.95rem 1.25rem;min-height:48px;border-radius:var(--r-md);border:0;cursor:pointer;
  box-shadow:var(--lift)}
.btn svg{width:1.05em;height:1.05em;fill:currentColor;flex:0 0 auto}
.btn--white{background:var(--paper);color:var(--blue)}
.btn--white:hover{background:var(--chrome-1)}
.btn--blue{background:var(--blue);color:var(--paper)}
.btn--blue:hover{background:var(--blue-ink)}
.btn--red{background:var(--red-deep);color:var(--paper)}
.btn--red:hover{background:var(--red-shadow)}
.btn--ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px var(--paper)}
.btn--ghost:hover{background:var(--paper);color:var(--red-shadow)}
.btn--ghostdark{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.btn--ghostdark:hover{background:var(--blue);color:var(--paper)}

/* ── PAGE HEAD (inner pages) ─────────────────────────────────────────────── */
.phead{background:var(--red-deep);color:var(--paper)}
.phead__inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(1.6rem,4.5vw,3rem) var(--gut) clamp(1.5rem,4vw,2.6rem)}
.phead h1{font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,1.2rem + 4.2vw,3.7rem);letter-spacing:-.01em}
.phead p{margin:1rem 0 0;max-width:56ch;font-size:clamp(1rem,.97rem + .25vw,1.16rem)}
.crumbs{font:500 .78rem/1.5 var(--font-sign);letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;color:var(--paper)}
.crumbs a{color:var(--paper);display:inline-block;padding:.25rem 0}
.phead a:not(.btn){color:var(--paper)}
.crumbs li::after{content:"›";margin-left:.45rem;opacity:.7}
.crumbs li:last-child::after{content:none}
.crumbs [aria-current]{opacity:.9;text-decoration:none}

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
.sec{padding-block:clamp(2.6rem,7vw,5rem)}
.sec--paper{background:var(--paper)}
.sec--warm{background:var(--paper-warm)}
/* Measured 2026-09-14: #0000C6 occurs in quantity in only two of their own
   assets — the star band of images/smbanner.gif (22,719 px) and the wordmark in
   images/signsm.gif (3,660 px). It is a band-and-lettering colour in this brand,
   never a field. Full-bleed blocks therefore use the red family, and blue is
   kept for the enamel band's stars, the phone button, links and prices. */
.sec--blue{background:var(--red-shadow);color:var(--paper)}
.sec--blue a:not(.btn){color:var(--paper)}
.sec--ink{background:var(--red-shadow);color:var(--paper)}
.sec--ink a:not(.btn){color:var(--paper)}
.sec--tight{padding-block:clamp(1.8rem,4vw,3rem)}

.eyebrow{font:600 clamp(.74rem,.7rem + .18vw,.85rem)/1.3 var(--font-sign);
  letter-spacing:.24em;text-transform:uppercase;margin:0 0 .85rem;color:var(--red-deep);
  display:flex;align-items:center;gap:.65rem}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--red);flex:0 0 auto}
.sec--blue .eyebrow,.sec--ink .eyebrow{color:var(--paper)}
.sec--blue .eyebrow::before,.sec--ink .eyebrow::before{background:var(--paper)}

h2.big{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.85rem,1.15rem + 3.4vw,3.15rem);letter-spacing:-.012em}
h3.mid{font-family:var(--font-sign);font-weight:600;letter-spacing:.02em;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);text-transform:uppercase}
.lede{font-size:clamp(1.08rem,1rem + .45vw,1.32rem);max-width:60ch;margin-top:1.1rem}
.prose{max-width:66ch}
.prose p{margin-bottom:1.25em}
.prose h2{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.5vw,2.1rem);margin:2.2rem 0 .8rem;letter-spacing:-.01em}
.prose h3{font-family:var(--font-sign);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.12rem;margin:2rem 0 .6rem}

/* ── GRIDS & CARDS ───────────────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(1.1rem,3vw,2rem)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media (min-width:44rem){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:56rem){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid--split{align-items:center}

.card{background:var(--paper);border-radius:var(--r-md);box-shadow:var(--plate);
  padding:clamp(1.25rem,3vw,1.8rem);border-top:5px solid var(--red)}
.card--blue{border-top-color:var(--blue)}
.card h3{margin-bottom:.55rem}
.card p:last-child{margin-bottom:0}
.card__num{font:400 2.1rem/1 var(--font-display);color:var(--red);display:block;margin-bottom:.4rem}

/* ── MENU ────────────────────────────────────────────────────────────────── */
.menu-grid{display:grid;gap:clamp(1.2rem,3vw,2.2rem)}
@media (min-width:52rem){.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.menu-card{background:var(--paper);box-shadow:var(--plate);border-radius:var(--r-md);
  padding:clamp(1.3rem,3vw,2rem);border:2px solid var(--red)}
.menu-card h2{font-family:var(--font-sign);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:1rem;color:var(--blue);
  padding-bottom:.6rem;margin-bottom:.9rem;border-bottom:2px solid var(--red);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.menu-list{list-style:none;display:grid;gap:.1rem}
.menu-list li{padding:.5rem 0;border-bottom:1px dotted var(--rule);
  font:500 1.04rem/1.35 var(--font-text)}
.menu-list li:last-child{border-bottom:0}
.menu-list .note{display:block;font:400 .88rem/1.45 var(--font-text);color:var(--ink-soft);
  margin-top:.15rem}
.menu-list .star{color:var(--red-deep);font-weight:700}
.menu-row{display:flex;align-items:baseline;gap:.6rem;justify-content:space-between}
.menu-name{flex:1 1 auto}
.menu-row::before{content:"";flex:0 1 auto;order:1;border-bottom:1px dotted var(--rule);
  min-width:1.2rem;align-self:flex-end;margin-bottom:.28rem;flex-grow:1}
.menu-name{order:0}
.price{order:2;flex:0 0 auto;font-family:var(--font-sign);font-weight:600;
  font-variant-numeric:tabular-nums;font-size:1.02rem;color:var(--blue);white-space:nowrap}
.price--ask{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep)}
.menu-card--quiet{border-color:var(--rule);border-width:1px}
.menu-card--quiet h3{font-family:var(--font-sign);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:1rem;color:var(--blue);
  padding-bottom:.6rem;margin-bottom:.9rem;border-bottom:2px solid var(--rule)}
.menu-card--quiet .menu-list li{font-weight:400}
.menu-card--quiet .menu-row::before{display:none}
.pricetag{display:inline-flex;align-items:baseline;gap:.4rem;
  font:600 .74rem/1 var(--font-sign);letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);margin-top:.6rem}
.pricetag b{font-size:1.5rem;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--blue)}
.pricetag span{font-weight:600;letter-spacing:.1em;color:var(--ink-soft)}
.card--blue .pricetag span,.sec--ink .pricetag span{color:var(--ink-soft)}

/* ── QUOTE / PULL ────────────────────────────────────────────────────────── */
.pull{border:0;margin:0;padding:0}
.pull p{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.55rem,1rem + 2.6vw,2.7rem);line-height:1.12;letter-spacing:-.01em;
  margin:0}
.pull footer{font:500 .86rem/1.5 var(--font-sign);letter-spacing:.14em;text-transform:uppercase;
  margin-top:1.3rem}
.tmt{background:var(--paper);border-radius:var(--r-md);box-shadow:var(--plate);
  padding:clamp(1.3rem,3vw,1.9rem);border-left:6px solid var(--red);margin:0}
.tmt p{font-size:1.06rem;font-style:italic}
.tmt footer{font:600 .82rem/1.4 var(--font-sign);letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-deep)}

/* ── PRESS ───────────────────────────────────────────────────────────────── */
.press{list-style:none;display:grid;gap:0}
.press li{border-bottom:1px solid var(--rule)}
.press li:first-child{border-top:1px solid var(--rule)}
.sec--blue .press li,.sec--blue .press li:first-child{border-color:rgba(255,255,255,.28)}
.press a{display:grid;gap:.35rem;padding:1.15rem 0;text-decoration:none}
.press__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem}
.press a:hover .press__head{text-decoration:underline}
.press__outlet{font:600 .76rem/1.3 var(--font-sign);letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-deep)}
.sec--blue .press__outlet{color:var(--paper);opacity:.92}
.press__head{font:400 clamp(1.05rem,1rem + .5vw,1.4rem)/1.25 var(--font-display);
  color:var(--ink);letter-spacing:-.005em}
.sec--blue .press__head{color:var(--paper)}
.press__date{font:500 .82rem/1.3 var(--font-sign);letter-spacing:.08em;color:var(--ink-soft);
  white-space:nowrap}
.sec--blue .press__date{color:var(--paper);opacity:.92}

/* ── FACT STRIP ──────────────────────────────────────────────────────────── */
.facts{list-style:none;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
@media (min-width:44rem){.facts{grid-template-columns:repeat(3,1fr)}}
.facts li{background:var(--paper);padding:1.25rem 1.2rem}
.facts dt{font:600 .74rem/1.3 var(--font-sign);letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:.35rem}
.facts dd{margin:0;font:400 1.7rem/1.05 var(--font-display);color:var(--ink)}
.facts dd small{display:block;font:400 .9rem/1.5 var(--font-text);color:var(--ink-soft);
  margin-top:.4rem}
/* .facts tiles keep a paper ground inside dark sections, so links inside them
   must not inherit the section's white link colour or they vanish. */
.sec--blue .facts a,.sec--ink .facts a,.foot .facts a,.facts a{color:var(--blue)}
.facts dd.sm{font-size:1.15rem;line-height:1.25}

/* ── HOURS ───────────────────────────────────────────────────────────────── */
.hours{list-style:none;display:grid;gap:0;margin:0 0 1.2rem;max-width:26rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px dotted var(--rule);font:500 1rem/1.4 var(--font-text)}
.hours li:last-child{border-bottom:0}
.hours dt,.hours .d{font-family:var(--font-sign);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:.92rem}
.hours .t{font-variant-numeric:tabular-nums}
.hours li[data-today]{color:var(--red-deep);font-weight:700}
.caveat{font-size:.92rem;color:var(--ink-soft);max-width:46ch}
.sec--blue .caveat,.sec--ink .caveat,.foot .caveat{color:var(--paper);opacity:.92}

/* ── FIGURES ─────────────────────────────────────────────────────────────── */
figure{margin:0}
.fig img{border-radius:var(--r-md);box-shadow:var(--plate);width:100%}
.fig figcaption{font:500 .84rem/1.5 var(--font-sign);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem}
.sec--blue .fig figcaption,.sec--ink .fig figcaption{color:var(--paper);opacity:.95}
.fig--plate img{background:var(--paper);padding:1rem;border:1px solid var(--rule)}
.fig--native{max-width:274px}
.fig--native img{width:100%}

/* ── FORM ────────────────────────────────────────────────────────────────── */
.form{display:grid;gap:1.1rem;max-width:38rem}
.field{display:grid;gap:.4rem}
.field label{font:600 .8rem/1.3 var(--font-sign);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue)}
.field input,.field textarea{font:400 1rem/1.5 var(--font-text);color:var(--ink);
  background:var(--paper);border:2px solid var(--rule);border-radius:var(--r-sm);
  padding:.8rem .85rem;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--blue)}
.field textarea{min-height:9rem;resize:vertical}
.req{color:var(--red-deep)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formnote{font-size:.9rem;color:var(--ink-soft)}
.formmsg{padding:1rem 1.1rem;border-radius:var(--r-sm);font-size:.98rem;
  border-left:5px solid var(--blue);background:var(--chrome-1);color:var(--ink)}
.formmsg[data-tone=bad]{border-left-color:var(--red-deep)}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.foot{background:var(--red-shadow);color:var(--paper);padding-block:clamp(2.4rem,5vw,3.6rem)}
.foot a:not(.btn){color:var(--paper)}
.foot__grid{display:grid;gap:clamp(1.6rem,4vw,2.6rem)}
@media (min-width:52rem){.foot__grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot h2{font:600 .8rem/1.3 var(--font-sign);letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 .9rem;opacity:.95}
.foot ul{list-style:none;display:grid;gap:.45rem}
.foot__plate{background:var(--paper);border-radius:var(--r-md);padding:.9rem 1rem;
  display:inline-block;line-height:0;margin-bottom:1.1rem}
.foot__plate img{width:200px}
.foot address{font-style:normal;line-height:1.7}
.foot__legal{margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.22);font-size:.86rem;opacity:.95;
  display:grid;gap:.4rem}

/* ── UTILITIES ───────────────────────────────────────────────────────────── */
.stack>*+*{margin-top:1.1rem}
.mt0{margin-top:0}
.center{text-align:center}
.linklist{list-style:none;display:grid;gap:.55rem}
.linklist a{font:600 1rem/1.4 var(--font-sign);letter-spacing:.04em;text-transform:uppercase}
/* --red is 3.89:1 against white: large display only. Badges are small caps,
   so they take --red-deep (7.64:1). */
.tag{display:inline-block;background:var(--red-deep);color:var(--paper);
  font:600 .72rem/1 var(--font-sign);letter-spacing:.18em;text-transform:uppercase;
  padding:.45rem .6rem;border-radius:var(--r-sm)}
.tag--blue{background:var(--blue)}
.checker{height:24px;background-image:
  linear-gradient(45deg,var(--ink) 25%,transparent 25% 75%,var(--ink) 75%),
  linear-gradient(45deg,var(--ink) 25%,transparent 25% 75%,var(--ink) 75%);
  background-size:24px 24px;background-position:0 0,12px 12px;background-color:var(--paper);
  box-shadow:inset 0 1px 0 var(--rule),inset 0 -1px 0 var(--rule)}