/* ============================================================================
   HALINA'S BAKEHOUSE — Hamtramck, Detroit. Third generation.
   Built to DESIGN_SYSTEM.md v1.0.

   THE TRAP, NAMED FIRST.
   A neighborhood bakery is the single most dangerous brief in this series,
   because "warm, artisanal, minimal" IS the §12 Claude house style — cream
   ground, Fraunces or Playfair, terracotta accent, a tiny tracked-out label, a
   photograph of hands in flour, and the words "crafted with love since 2015".
   Every reflex points there. So the concept has to do the escaping, not the
   palette alone.

   THE ESCAPE — a real place and a real cultural aesthetic, per §12.0's
   instruction to name a concrete alternative rather than a negative.
   Hamtramck is a Polish city inside Detroit, its bakeries are an institution,
   and Pączki Day genuinely closes the street. The reference is therefore
   MID-CENTURY POLISH POSTER ART: flat saturated color, confident graphic
   shapes, printed matte ink on uncoated stock. Bold, not hushed. Warm because
   the FOOD is warm, not because the palette is beige.

   ONE LINE   the bread comes out when it comes out
   REGISTER   printed packaging and a poster hoarding. Not editorial, not
              hospitality, not "artisan".

   §12.0a COMPLIANCE — the model's own fingerprints, checked deliberately:
     · NO enumerated section markers. Nothing here is numbered, and no small
       label sits above a heading to name the section. Ground change, flat
       color panels and scale do that work (§4).
     · NO decorative background grid.
     · NO monospace face at all. Every previous build reached for one; four in
       a row is a default, so this one is set in two faces and no more.

   CONTEXT (§12)  A2 · B2 · C4 · D3 · E4  →  motion ceiling 3
     Low stakes, low urgency, a browsing session, phone-heavy. Motion is
     permitted; the discipline is that every interactive thing answers a real
     question — what is out of the oven right now, can I eat this, what will my
     box cost, when can I collect it.

   COLOR (§7) — four flat inks, printed
     ground  pale mint enamel        H 137 — 65° clear of the warm-cream band
     ink     green-black
     cherry  ACT — order, add, confirm
     pine    KNOW — allergens, times, quiet information
     butter  a PANEL ground only, never small text (it fails AA at that size)

   TYPE (§6) — ratio 1.25, nine steps. Distinct from 1.333 / 1.5 / 1.6.
     EXPRESSIVE CHANNEL: ALIGNMENT — centered, symmetrical setting, because a
     label is centered. It appears as the .label component, which is how every
     product is named. Previous builds used variable width, weight extremes and
     the numeral; this one uses the axis.

   TEXTURE — PAPER TOOTH. A fine uncoated-stock grain over flat color, with no
     gloss, no gradient sheen and no vignette. "Matte" is the brief's word and
     it is taken literally: the black floor is lifted in the imagery, and no
     surface on the page is allowed to look wet.

   INTERACTION SIGNATURE — "it rises."
   ========================================================================= */

:root {
  --ground:   #E5ECE7;   /* pale mint enamel */
  --ground-2: #D8E3DC;
  --ground-3: #C7D5CD;
  --ink:      #16201B;   /* 13.91:1 on ground */
  --ink-2:    #4A5A50;   /* 6.09 on ground, 5.56 on ground-2 */
  --paper:    #F4F7F4;

  --cherry:   #C31A3E;   /* 4.94 on ground · ACT */
  --cherry-2: #9E0F2F;
  --pine:     #1F5D46;   /* 6.45 on ground · KNOW */
  --butter:   #F0CB3F;   /* PANEL GROUND ONLY — 10.60 with ink on top */

  --f-display: 'Zilla Slab', Georgia, serif;
  --f-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ratio 1.25, nine steps — a shop has many small parts */
  --t-3xs: 0.75rem;   --t-2xs: 0.8125rem;  --t-xs:  0.875rem;
  --t-sm:  0.9375rem; --t-base: 1.0625rem; --t-md:  1.3125rem;
  --t-lg:  clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  /* floors set by measurement: 3.2rem measured 3.01x body on desktop
     (floor 4x) and 2.2rem measured 2.45x on a phone (floor 3x). */
  --t-xl:  clamp(3.2rem, 1.2rem + 4.2vw, 4.4rem);
  --t-2xl: clamp(3rem, 1.8rem + 5vw, 4.8rem);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --measure: 60ch;

  --ease:  cubic-bezier(.2, .9, .3, 1);
  --rise:  340ms;      /* dough is slow; so is this */
  --snap:  160ms;
}

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

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--f-body); font-size: var(--t-base); line-height: 1.65;
  overflow-x: hidden;
  /* TEXTURE — uncoated paper tooth. Fine, matte, and NOT a grid (§12.0a). */
  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='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--cherry); color: #fff; }

.shell { width: min(1240px, 100%); margin-inline: auto; padding-inline: clamp(var(--s-5), 4.5vw, var(--s-16)); }
.band { padding-block: clamp(var(--s-16), 6vw, var(--s-32)); }
.band--tight { padding-block: clamp(var(--s-10), 4vw, var(--s-16)); }

/* flat color panels — the page is divided by GROUND, not by rules or labels */
.panel--paper  { background: var(--paper); }
.panel--butter { background: var(--butter); color: var(--ink); }
.panel--pine   { background: var(--pine); color: var(--paper); }
.panel--ink    { background: var(--ink); color: var(--paper); }
.panel--pine a, .panel--ink a { color: inherit; }
.panel--pine .prose, .panel--ink .prose { color: #C8D6CE; }

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.012em; }
.h1 { font-size: var(--t-xl); }
.h2 { font-size: var(--t-lg); margin-bottom: var(--s-5); }
.h3 { font-size: var(--t-md); }
.display { font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.02em; }
.lede { font-size: var(--t-md); line-height: 1.5; max-width: 40ch; margin: 0; color: var(--ink-2); }
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose p { margin: 0 0 var(--s-5); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--cherry); text-underline-offset: 3px; }
/* cherry on butter is 3.76:1 — under AA for body-size text. On that panel
   links carry the ink color and lean on the underline instead. */
.panel--butter .prose a, .panel--butter a { color: var(--ink); text-decoration-thickness: 2px; }

/* THE LABEL — this project's expressive channel (§6, alignment).
   A product is named the way a jar is named: centered, boxed, symmetrical. It
   is NOT a section marker — it never sits above a heading to announce a
   section, it carries no number, and it only ever names the thing it is
   printed on. (§12.0a) */
.label {
  display: block; text-align: center;
  font-family: var(--f-display); font-weight: 700;
  border: 2px solid currentColor; padding: var(--s-3) var(--s-4);
}
.label__pl { display: block; font-size: var(--t-md); line-height: 1.1; }
.label__en { display: block; font-size: var(--t-2xs); font-family: var(--f-body); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; color: var(--ink-2); }
.panel--pine .label__en, .panel--ink .label__en { color: #A9BDB2; }

/* ---------------------------------------------------------------- actions
   INTERACTION SIGNATURE — "it rises."
   Everything interactive proofs: it grows very slightly and lifts on a soft
   matte shadow over 340ms, the way dough does — slow, and with no bounce.
   Pressing settles it back down flat. Nothing glows and nothing slides.
   Distinct from thickens (hollis), seats (ruiz), advances/lights (woodward). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm);
  text-decoration: none; cursor: pointer; text-align: center;
  padding: var(--s-4) var(--s-8); border: 0;
  background: var(--cherry); color: #fff;
  transform: translateY(0) scale(1);
  transition: transform var(--rise) var(--ease), box-shadow var(--rise) var(--ease), background var(--snap) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--cherry-2); transform: translateY(-3px) scale(1.018); box-shadow: 0 10px 0 -4px rgba(22,32,27,.16); }
.btn:active { transform: translateY(0) scale(.995); box-shadow: none; }
.btn[disabled] { background: var(--ground-3); color: var(--ink-2); cursor: not-allowed; transform: none; box-shadow: none; }
.btn--lg { font-size: var(--t-md); padding: var(--s-5) var(--s-10); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 2px var(--ink), 0 10px 0 -4px rgba(22,32,27,.16); }
.btn--pine { background: var(--pine); }
.btn--pine:hover, .btn--pine:focus-visible { background: #164533; }

.tlink { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ground-3); transition: text-decoration-color var(--snap) var(--ease); }
.tlink:hover, .tlink:focus-visible { text-decoration-color: var(--cherry); }

:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--cherry); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-5); z-index: 80; }
.skip:focus { left: var(--s-4); top: var(--s-4); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; }

/* ---------------------------------------------------------------- masthead */
.masthead { background: var(--ink); color: var(--paper); }
.masthead__in { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); align-items: center; justify-content: space-between; padding-block: var(--s-4); }
.wordmark { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); text-decoration: none; line-height: 1.05; display: flex; align-items: baseline; gap: var(--s-3); }
.wordmark small { font-family: var(--f-body); font-size: var(--t-3xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #A9BDB2; }
.nav { display: flex; flex-wrap: wrap; gap: var(--s-6); font-size: var(--t-sm); align-items: center; }
.nav a { text-decoration: none; color: #C8D6CE; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color var(--snap) var(--ease), border-color var(--snap) var(--ease); }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--butter); }
/* .nav a is (0,1,1) and out-specifies a bare .boxbtn (0,1,0), so the nav's
   pale link color was winning and the button rendered near-invisible. */
.nav a.boxbtn, .boxbtn { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--butter); color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); padding: var(--s-2) var(--s-4); text-decoration: none; border: 0; transition: transform var(--rise) var(--ease); }
.nav a.boxbtn { color: var(--ink); border-bottom-color: transparent; }
.nav a.boxbtn:hover, .nav a.boxbtn:focus-visible { color: var(--ink); transform: translateY(-2px); border-bottom-color: transparent; }
.boxbtn b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- imagery
   Locked: 1:1 · matte grade baked in · hard edge, sat on a flat panel. */
.shot { display: block; position: relative; overflow: hidden; background: var(--ground-3); }
.shot img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  transform: scale(1.001); transition: transform 620ms var(--ease); }
.card:hover .shot img, .card:focus-within .shot img { transform: scale(1.04); }
.shot--wide img { aspect-ratio: 3/2; }

/* ================================================================== HERO */
.hero { background: var(--butter); color: var(--ink); overflow: hidden; }
.hero__in { display: grid; gap: var(--s-10); padding-block: clamp(var(--s-16), 7vw, var(--s-32)); align-items: center; }
@media (min-width: 900px) { .hero__in { grid-template-columns: 1.05fr .95fr; gap: var(--s-16); } }
.hero__art { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.hero__art .shot:nth-child(1) { grid-column: 1 / -1; }

/* ============================================================ BAKE CLOCK
   The page's signature interaction, and the one thing a neighborhood bakery
   is actually asked all day: what is out right now. Driven by the visitor's
   clock, not by a CMS field. */
.clock { border: 2px solid var(--ink); background: var(--paper); }
.clock__head { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: baseline; justify-content: space-between; padding: var(--s-5) var(--s-6); border-bottom: 2px solid var(--ink); }
.clock__now { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); }
.clock__state { font-size: var(--t-sm); color: var(--ink-2); }
.clock__body { padding: var(--s-6); }
.clock__scale { position: relative; height: 22px; margin-bottom: var(--s-4); border-bottom: 2px solid var(--ground-3); }
.clock__tick { position: absolute; top: 0; font-size: var(--t-3xs); color: var(--ink-2); transform: translateX(-50%); }
.clock__tick::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 1px; height: 6px; background: var(--ground-3); }
.clock__marker { position: absolute; top: -4px; bottom: -10px; width: 2px; background: var(--cherry); transform: translateX(-50%); }
.clock__marker::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background: var(--cherry); border-radius: 50%; transform: translateX(-50%); }
.crow { display: grid; grid-template-columns: minmax(0,15ch) 1fr auto; gap: var(--s-3) var(--s-5); align-items: center; padding-block: var(--s-3); border-bottom: 1px solid var(--ground-3); }
.crow:last-child { border-bottom: 0; }
.crow__n { font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); }
.crow__bar { position: relative; height: 12px; background: var(--ground-2); }
.crow__seg { position: absolute; top: 0; bottom: 0; background: var(--pine); }
.crow__seg[data-state="gone"] { background: var(--ground-3); }
.crow__seg[data-state="soon"] { background: var(--pine); opacity: .38; }
.crow__seg[data-state="now"] { background: var(--cherry); }
.crow__s { font-size: var(--t-2xs); white-space: nowrap; font-weight: 600; }
.crow__s[data-state="now"]  { color: var(--cherry); }
.crow__s[data-state="soon"] { color: var(--pine); }
.crow__s[data-state="gone"] { color: var(--ink-2); }

/* ================================================================ FILTERS */
.filters { display: grid; gap: var(--s-5); padding: var(--s-6); background: var(--paper); border: 2px solid var(--ink); }
.frow { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.frow__l { font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { font-family: var(--f-body); font-weight: 600; font-size: var(--t-2xs); padding: var(--s-2) var(--s-4);
  cursor: pointer; background: transparent; color: var(--ink-2); border: 2px solid var(--ground-3);
  transition: color var(--snap) var(--ease), border-color var(--snap) var(--ease), background var(--snap) var(--ease), transform var(--rise) var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip--warn[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); }
.search { flex: 1; min-width: 200px; font-family: var(--f-body); font-size: var(--t-base); padding: var(--s-3) var(--s-4); background: var(--ground); border: 2px solid var(--ground-3); color: var(--ink); min-height: 46px; }
.search:focus { border-color: var(--ink); outline: 0; }
.fcount { font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); white-space: nowrap; margin: 0; }

/* ============================================================ SHOP CELLS */
.grid { display: grid; gap: var(--s-8) var(--s-6); margin-top: var(--s-10); }
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); }
.card[hidden] { display: none; }
.card__body { padding: var(--s-5); display: grid; gap: var(--s-3); }
.card__desc { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.card__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag { font-size: var(--t-3xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px var(--s-2); border: 1px solid var(--ground-3); color: var(--ink-2); }
.tag--in  { border-color: var(--pine); color: var(--pine); }
.tag--out { border-color: var(--ground-3); color: var(--ink-2); }
.card__foot { margin-top: auto; padding: var(--s-4) var(--s-5); border-top: 2px solid var(--ink); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.price { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.price small { font-family: var(--f-body); font-size: var(--t-3xs); font-weight: 500; color: var(--ink-2); }

/* stepper */
.step { display: inline-flex; align-items: stretch; border: 2px solid var(--ink); background: var(--ground); }
.step button { width: 40px; background: transparent; border: 0; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); line-height: 1; color: var(--ink); transition: background var(--snap) var(--ease); }
.step button:hover { background: var(--butter); }
/* a disabled control is exempt from the contrast minimum, but at 1.26:1 it
   read as missing rather than unavailable. ~3:1 says 'off', not 'gone'. */
.step button[disabled] { color: #768B7F; cursor: not-allowed;   /* 3.03:1 */ }
.step button[disabled]:hover { background: transparent; }
.step output { min-width: 40px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; border-inline: 2px solid var(--ink); }

.empty { padding: var(--s-20) 0; text-align: center; color: var(--ink-2); }
.empty[hidden] { display: none; }

/* ================================================================== BOX */
.boxlist { border-top: 2px solid var(--ink); }
.boxrow { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--s-4) var(--s-5); align-items: center; padding-block: var(--s-5); border-bottom: 1px solid var(--ground-3); }
/* both are spans inside a span; without display:block they set on one line */
.boxrow__n { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); line-height: 1.2; }
.boxrow__d { display: block; font-size: var(--t-2xs); color: var(--ink-2); }
.boxrow__r { display: flex; align-items: center; gap: var(--s-4); }
.boxrow__p { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 7ch; text-align: right; }
.rm { background: none; border: 0; cursor: pointer; color: var(--ink-2); font-size: var(--t-md); line-height: 1; padding: var(--s-2); }
.rm:hover { color: var(--cherry); }

.slots { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.slot { font-family: var(--f-body); font-weight: 600; font-size: var(--t-sm); padding: var(--s-3); cursor: pointer;
  background: var(--paper); border: 2px solid var(--ground-3); color: var(--ink);
  transition: transform var(--rise) var(--ease), border-color var(--snap) var(--ease), background var(--snap) var(--ease); }
.slot:hover:not([disabled]) { border-color: var(--ink); transform: translateY(-2px); }
.slot[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.slot[disabled] { color: var(--ground-3); border-style: dashed; cursor: not-allowed; background: transparent; }
.days { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.total { border-top: 2px solid var(--ink); margin-top: var(--s-8); padding-top: var(--s-5); }
.total__row { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); color: var(--ink-2); font-size: var(--t-sm); }
.total__row span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); }
.total__sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); }
.total__sum b { font-family: var(--f-display); font-weight: 700; font-size: var(--t-xl); font-variant-numeric: tabular-nums; line-height: 1; }
.is-recalc { animation: pop var(--rise) var(--ease); }
@keyframes pop { from { transform: translateY(-4px); } to { transform: none; } }

/* standing order */
.standing { display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--butter); color: var(--ink); }
.standing label { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: 600; cursor: pointer; }
.standing input { width: 20px; height: 20px; accent-color: var(--cherry); margin-top: 3px; }

/* ============================================================ EDITORIAL */
.rail { display: grid; gap: var(--s-10); }
@media (min-width: 940px) { .rail { grid-template-columns: 5fr 7fr; gap: var(--s-16); } }
.step-blk { padding-bottom: var(--s-8); }
.step-blk + .step-blk { border-top: 2px solid var(--ground-3); padding-top: var(--s-8); }
.step-blk h3 { margin-bottom: var(--s-3); }
.step-blk p { margin: 0; color: var(--ink-2); max-width: 58ch; }
.split { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }

/* ================================================================ FOOTER */
.foot { background: var(--ink); color: var(--paper); padding-block: var(--s-16) var(--s-10); }
.foot__grid { display: grid; gap: var(--s-10); }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-10); } }
.foot h2 { font-size: var(--t-sm); margin-bottom: var(--s-4); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.foot a { color: #C8D6CE; text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.foot .prose { color: #C8D6CE; }
.legal { margin-top: var(--s-12); padding-top: var(--s-5); border-top: 1px solid #34423A; font-size: var(--t-3xs); color: #A9BDB2; max-width: 88ch; line-height: 1.8; }
.legal p { margin: 0 0 var(--s-3); }
.legal strong { color: var(--paper); }
.legal a { color: #C8D6CE; }

/* ---------------------------------------------------------------- touch */
@media (pointer: coarse), (max-width: 760px) {
  .nav a, .foot ul a, .wordmark { min-height: 44px; display: inline-flex; align-items: center; }
  .btn, .chip, .slot, .boxbtn { min-height: 44px; }
  .chip, .slot { display: inline-flex; align-items: center; justify-content: center; }
  .step button { width: 48px; min-height: 48px; }
  .step output { min-width: 48px; }
  .rm { min-width: 44px; min-height: 44px; }
  .search { min-height: 48px; }
}

/* ---------------------------------------------------------------- reduced */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .btn:hover, .chip:hover, .slot:hover { transform: none !important; }
  .shot img { transform: none !important; }
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.hero-availability{margin-top:20px;padding-top:14px;border-top:1px solid currentColor;max-width:42ch;font-size:15px;line-height:1.5}