/* ============================================================================
   El Sanatorio · LA CARTA  (carta.css)
   ----------------------------------------------------------------------------
   The BROWSE-ONLY menu at /menu/ and /en/menu/. Generated by
   scripts/build-kiosk.mjs → cartaPage(). Edit the generator, never the output.

   Andrew, 2026-08-14: "The menu should be for looking, and no need for an ADD
   button or a shopping trolley — it's just for looking. If people click to buy,
   the kiosk opens. The menu is for looking only, so bigger photos and shit
   like that."

   So this stylesheet is deliberately NOT kiosk.css and does not load alongside
   it. Nothing here styles an Add button, a stepper, a cart bar, a drawer or a
   table strip, because the page emits none of them — the only transactional
   affordance on the whole surface is ONE route into /menu/kiosk/ (the fixed
   .c-orderbar plus the closing .c-cta, same href, same table carry-through).
   Keeping the two stylesheets apart is the cheap structural guarantee that
   ordering chrome cannot drift back onto the carta by inheritance.

   Photography is the point. Every card that has a committed
   /images/menu/<sku>.webp shows it at 4:3 and full column width — one column
   on a phone, two from 700px, three from 1400px. Sections where NO sku has
   been photographed (the shots: Muestras, Dosis, La Vitrina) do not render a
   wall of monogram placeholders; they get .c-list, a typeset lab-sheet with
   dotted leaders. That is a design choice, not a fallback: 17 identical
   branded bands would read as broken, and a printed drinks list does not
   carry photos anyway. The generator picks the treatment from the photo
   coverage of the section, so the moment the tubes are shot the section
   promotes itself to the photo grid with no CSS change.

   Floors carried over from kiosk.css because the same guest reads this page in
   the same dark bar: TYPE 0.75rem (12px), TAP 44x44px.
   ========================================================================= */

:root {
  --c-bg:          #0B0908;
  --c-bg-deep:     #060504;
  --c-surface:     #14110D;
  --c-surface-2:   #1B1712;
  --c-line:        rgba(239, 230, 213, 0.10);
  --c-line-2:      rgba(239, 230, 213, 0.18);

  --c-cream:       #EFE6D5;
  --c-cream-dim:   rgba(239, 230, 213, 0.74);
  --c-cream-muted: rgba(239, 230, 213, 0.62);

  --c-ember:       #E1701A;
  --c-ember-text:  #E88A3C;
  --c-ember-deep:  #B7550F;
  --c-crimson:     #B7372D;

  --c-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --c-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --c-font-mono:    "Share Tech Mono", "IBM Plex Mono", Consolas, monospace;

  --c-r-sm: 8px;
  --c-r-md: 14px;
  --c-r-lg: 22px;

  --c-safe-b: env(safe-area-inset-bottom, 0px);
  /* 10px top pad + 56px button + 34px gesture-strip pad = 100; the extra 2 is
     the slack this figure has always carried. Grows with .c-orderbar's bottom
     padding or the footer's legal line goes back under the bar. */
  --c-orderbar-h: 102px;
  --c-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── page shell ─────────────────────────────────────────────────────── */
.c-carta {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-cream);
  font-family: var(--c-font-body);
  -webkit-font-smoothing: antialiased;
  /* Room for the fixed order bar so the footer legal line is never trapped
     underneath it (it was, at 320px, in the first pass). */
  padding-bottom: calc(var(--c-orderbar-h) + var(--c-safe-b) + 10px);
  overflow-x: hidden;
}

.c-wrap { max-width: 1240px; margin-inline: auto; padding-inline: 18px; }
@media (min-width: 700px) { .c-wrap { padding-inline: 28px; } }

/* Skip link — the carta is long, and the first tab stop must not be the
   contents index 40 rows in. */
.c-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--c-ember); color: #120A03; font-weight: 700;
  padding: 12px 18px; min-height: 44px; border-radius: 0 0 var(--c-r-sm) 0;
  font-size: 0.875rem; text-decoration: none;
}
.c-skip:focus { left: 0; }

/* ── hero ───────────────────────────────────────────────────────────── */
.c-hero {
  position: relative;
  text-align: center;
  padding: 30px 0 26px;
}
/* Percentage insets here (-30% either side) pushed the glow 355px past the
   1240px wrap and gave the whole document a 272px horizontal scroll at 1440 —
   invisible to the eye, fatal to a phone that then rubber-bands sideways.
   Bounded to the wrap; the radial fades out long before the box edge, so
   there is no seam. */
.c-hero::before {
  content: ""; position: absolute; inset: -30px 0 auto 0; height: 320px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(225,112,26,0.16), transparent 70%);
  pointer-events: none;
}
.c-hero__eyebrow {
  position: relative;
  margin: 0 0 12px; font-family: var(--c-font-mono);
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-ember-text);
}
.c-hero__title {
  position: relative;
  margin: 0; font-family: var(--c-font-display); font-weight: 600;
  font-size: clamp(2.5rem, 13vw, 5.5rem); line-height: 0.94;
  letter-spacing: -0.015em;
}
.c-hero__title b { font-weight: 700; font-style: italic; color: var(--c-cream); }
.c-hero__tag {
  position: relative;
  margin: 16px auto 0; max-width: 34ch;
  font-size: 1rem; line-height: 1.5; color: var(--c-cream-dim);
}
@media (min-width: 700px) { .c-hero { padding: 46px 0 34px; } .c-hero__tag { font-size: 1.075rem; max-width: 46ch; } }

.c-hero__meta {
  position: relative;
  margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
/* Static hours, NOT a live open/closed gate. The kiosk gates ordering on
   opening hours because you cannot cook at 3pm; a carta has no reason to.
   A guest reading this at midday, or a traveller three timezones away
   planning the trip, must still see the whole menu. */
.c-hero__chip {
  font-family: var(--c-font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--c-cream-muted);
  border: 1px solid var(--c-line); border-radius: 999px;
  padding: 7px 13px; background: rgba(239,230,213,0.03);
}

/* ── contents index ─────────────────────────────────────────────────── */
.c-index {
  margin: 26px 0 4px; padding: 18px 16px 10px;
  border: 1px solid var(--c-line); border-radius: var(--c-r-md);
  background: linear-gradient(180deg, rgba(239,230,213,0.035), rgba(239,230,213,0.012));
}
.c-index__t {
  margin: 0 0 12px; font-family: var(--c-font-mono);
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-cream-muted); text-align: center;
}
.c-index__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
@media (min-width: 700px) { .c-index__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .c-index__cols { grid-template-columns: repeat(4, 1fr); } }
.c-index a {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 4px 2px;
  color: var(--c-cream-dim); text-decoration: none;
  font-size: 0.875rem; line-height: 1.25;
  border-bottom: 1px solid rgba(239,230,213,0.05);
}
.c-index a:last-child { border-bottom: 0; }
.c-index a:hover, .c-index a:focus-visible { color: var(--c-ember-text); }
.c-index__ico { font-size: 1rem; width: 1.25em; text-align: center; flex: none; }

/* ── chapter (a venue: the kitchen, the bar) ────────────────────────── */
/* #site-nav is sticky and ~74px tall, so an in-page jump from the contents
   index lands the heading UNDER it unless every anchor target reserves the
   bar's height. Measured at 320/390/1440; 84px clears it at all three. */
.c-chapter { margin-top: 54px; scroll-margin-top: 84px; }
.c-chapter__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 2px solid var(--c-ember);
}
.c-chapter__eyebrow {
  font-family: var(--c-font-mono); font-size: 0.75rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--c-ember-text);
  flex-basis: 100%; margin: 0 0 4px;
}
.c-chapter__name {
  margin: 0; font-family: var(--c-font-display); font-weight: 600;
  font-size: clamp(1.75rem, 7.5vw, 2.75rem); line-height: 1.02; letter-spacing: -0.01em;
}
.c-chapter__tag {
  margin: 0; font-size: 0.9375rem; color: var(--c-cream-muted); line-height: 1.45;
  flex: 1 1 16ch; min-width: 0;
}
@media (min-width: 700px) { .c-chapter { margin-top: 74px; } }

/* ── section ────────────────────────────────────────────────────────── */
.c-sec { margin-top: 36px; scroll-margin-top: 84px; }
.c-sec__head { display: flex; align-items: baseline; gap: 10px; }
.c-sec__ico { font-size: 1.125rem; line-height: 1; flex: none; }
.c-sec__title {
  margin: 0; font-family: var(--c-font-display); font-weight: 600;
  font-size: clamp(1.375rem, 5.6vw, 1.875rem); line-height: 1.12;
}
.c-sec__intro {
  margin: 10px 0 0; max-width: 62ch;
  font-size: 0.9375rem; line-height: 1.6; color: var(--c-cream-dim);
}
/* Allergen / honesty note. Never decorative — it carries the egg, gluten and
   meat-broth disclosure, and the deliberate absence of a "vegetariano" claim
   (the Zenu bean tin and the sachets are unconfirmed for meat content). */
.c-sec__note {
  margin: 12px 0 0; padding: 11px 13px; max-width: 68ch;
  border-left: 3px solid var(--c-crimson);
  background: rgba(183,55,45,0.09);
  border-radius: 0 var(--c-r-sm) var(--c-r-sm) 0;
  font-size: 0.8125rem; line-height: 1.55; color: var(--c-cream-dim);
}
.c-sec__note b { color: var(--c-cream); font-weight: 600; }

/* ── photo grid ─────────────────────────────────────────────────────── */
.c-grid {
  margin-top: 20px;
  display: grid; grid-template-columns: 1fr; gap: 26px 22px;
}
@media (min-width: 700px)  { .c-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; } }
@media (min-width: 1400px) { .c-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 30px; } }

.c-item { display: flex; flex-direction: column; min-width: 0; }

/* ── the whole card is the door to the kiosk ─────────────────────────
   .c-item and .c-row are <a> elements since 2026-08-16 (Andrew: "no order
   buttons on the menu — touch the item"). Everything below is about making a
   link stop LOOKING like a link: the carta is a shop window, and 60 blue
   underlined cards would be transactional chrome by another name.
   The affordance is motion on press, not a button. */
a.c-item, a.c-row {
  color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
}
a.c-item:hover .c-item__media, a.c-item:focus-visible .c-item__media {
  border-color: var(--c-ember-text);
}
a.c-item:active { transform: scale(0.985); }
a.c-row:active  { opacity: 0.72; }
a.c-item:focus-visible, a.c-row:focus-visible {
  outline: 2px solid var(--c-ember-text); outline-offset: 4px; border-radius: var(--c-r-md);
}
@media (prefers-reduced-motion: reduce) {
  a.c-item, a.c-row { transition: none; }
  a.c-item:active { transform: none; }
}

.c-item__media {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--c-r-md); overflow: hidden;
  background: linear-gradient(150deg, var(--c-surface-2), var(--c-bg-deep));
  border: 1px solid var(--c-line);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
.c-item__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.001); /* kills the 1px hairline some browsers leave on cover */
}
/* A quiet vignette so cream type over the photo's bottom edge stays legible
   and the moody charcoal shots keep their contrast on a bright laptop. */
.c-item__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(6,5,4,0.42));
}

.c-item__badges {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px);
}
.c-badge {
  font-family: var(--c-font-mono); font-size: 0.75rem; letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
  /* Opaque, NOT backdrop-filter. A blurred badge over a photo costs a real
     compositing pass per badge; with 40-odd cards on screen that is a
     measurable stall on a cheap Android in a dark bar — and it hung headless
     Chrome outright while shooting the 12-card beer grid at 1440. The plate
     is already 88% opaque, so the blur was buying nothing visible. */
  background: rgba(6,5,4,0.88); color: var(--c-cream-dim);
  border: 1px solid var(--c-line-2);
}
.c-badge--firma { background: rgba(225,112,26,0.92); color: #140A02; border-color: transparent; font-weight: 700; }
.c-badge--popular { background: rgba(239,230,213,0.92); color: #140A02; border-color: transparent; font-weight: 700; }

.c-item__head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 14px 0 0;
}
.c-item__name {
  margin: 0; font-family: var(--c-font-display); font-weight: 600;
  font-size: 1.1875rem; line-height: 1.22; letter-spacing: -0.005em;
  color: var(--c-cream); flex: 1 1 auto; min-width: 0;
}
.c-item__lead {
  flex: 1 1 12px; min-width: 12px; height: 1px; align-self: center;
  margin-bottom: 3px;
  background-image: radial-gradient(circle, rgba(239,230,213,0.34) 1px, transparent 1px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
/* THE price. One class, one shape, on every priced line of the carta — the
   CI sweep in price-parity.test.js pairs each data-sku with the next
   .c-item__price and demands cop(priceOf(sku)), i.e. the full "$25.900" form.
   Bare integers ("23", "88") shipped live once; they cannot come back
   silently. Do not reuse this class for anything that is not a sku price. */
.c-item__price {
  font-family: var(--c-font-mono); font-size: 1.0625rem; line-height: 1.1;
  color: var(--c-ember-text); white-space: nowrap; flex: none;
  font-variant-numeric: tabular-nums;
}
.c-item__ing {
  margin: 7px 0 0; font-family: var(--c-font-mono);
  font-size: 0.75rem; letter-spacing: 0.05em; line-height: 1.5;
  color: var(--c-cream-muted); text-transform: uppercase;
}
.c-item__desc {
  margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.62;
  color: var(--c-cream-dim); max-width: 46ch;
}
@media (min-width: 700px) {
  .c-item__name { font-size: 1.25rem; }
  .c-item__desc { font-size: 0.95rem; }
}

/* Text card — a sku inside a PHOTOGRAPHED section that has no photo of its
   own. Ramen Botanico is the standing case and it is deliberate: the one
   ramen shot is unmistakably the dark black-garlic broth of Ramen Sanatorio,
   and putting it on the clear-broth dish would misrepresent what arrives at
   the table. So the card drops the media slot entirely rather than showing a
   monogram band pretending to be a photograph. It reads as an editorial
   pull-quote next to its photographed neighbours instead of a hole. */
.c-item--text .c-item__body {
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-ember-deep);
  border-radius: var(--c-r-md);
  background: linear-gradient(160deg, rgba(239,230,213,0.045), rgba(239,230,213,0.012));
  padding: 20px 18px;
  height: 100%;
  /* The cell is as tall as the PHOTOGRAPHED cards beside it (grid rows stretch
     to the tallest item), and this card has no 4:3 image to spend that height
     on. Left to itself the type stacked at the top and the bottom ~250px of
     the box was dead black — at 1440 that read as a failed image load, not as
     a decision. Centring the type in the panel spends the height on purpose:
     the box lines up with its neighbours top and bottom, and the copy sits on
     the optical centre like a pull-quote. Mobile is one column, so the row is
     this card's own height and centring is a no-op there. */
  display: flex; flex-direction: column; justify-content: center;
}
.c-item--text .c-item__head { margin-top: 0; }
.c-item--text .c-item__badges {
  position: static; margin-bottom: 12px;
}

/* ── typeset list (sections with NO photography at all) ─────────────── */
.c-list {
  margin-top: 20px;
  border: 1px solid var(--c-line); border-radius: var(--c-r-md);
  background: linear-gradient(180deg, rgba(239,230,213,0.04), rgba(239,230,213,0.012));
  padding: 6px 16px;
}
@media (min-width: 1100px) {
  /* Two typeset columns once there is room; the rack of tubes reads like a
     lab sheet rather than one 17-row ribbon down a 1440px screen. */
  .c-list { columns: 2; column-gap: 40px; padding: 10px 22px; }
  .c-list .c-row { break-inside: avoid; }
}
/* display:block is load-bearing now that .c-row is an <a>: an inline anchor
   inside the two-column .c-list would fragment across the column break and
   lose its bottom rule. */
.c-row { display: block; padding: 15px 0; border-bottom: 1px solid rgba(239,230,213,0.07); }
.c-row:last-child { border-bottom: 0; }
.c-row__head { display: flex; align-items: baseline; gap: 10px; }
.c-row__name {
  margin: 0; font-family: var(--c-font-display); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.25; color: var(--c-cream);
  flex: 0 1 auto; min-width: 0;
}
.c-row__desc {
  margin: 6px 0 0; font-size: 0.875rem; line-height: 1.58; color: var(--c-cream-dim);
  max-width: 52ch;
}
.c-row__rx {
  margin: 6px 0 0; font-family: var(--c-font-mono); font-size: 0.75rem;
  letter-spacing: 0.04em; line-height: 1.5; color: var(--c-cream-muted);
}
.c-row__rx::before { content: "Rx · "; color: var(--c-ember-text); }
.c-row .c-badge { margin-top: 8px; display: inline-block; }
.c-row--star .c-row__name { color: var(--c-ember-text); }

/* ── the experience block (ticket) ──────────────────────────────────── */
.c-exp {
  display: block; margin-top: 30px; text-decoration: none; color: inherit;
  border: 1px solid var(--c-line-2); border-radius: var(--c-r-lg);
  background:
    linear-gradient(180deg, rgba(11,9,8,0.36), rgba(11,9,8,0.86)),
    radial-gradient(120% 100% at 0% 0%, rgba(225,112,26,0.22), transparent 62%);
  padding: 22px 20px;
}
.c-exp__eyebrow {
  margin: 0 0 8px; font-family: var(--c-font-mono); font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-ember-text);
}
.c-exp__name {
  margin: 0; font-family: var(--c-font-display); font-weight: 600;
  font-size: clamp(1.5rem, 6.4vw, 2.25rem); line-height: 1.06;
}
.c-exp__desc { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--c-cream-dim); max-width: 52ch; }
.c-exp__price {
  margin: 14px 0 0; font-family: var(--c-font-mono); font-size: 0.9375rem;
  color: var(--c-cream); letter-spacing: 0.03em;
}
.c-exp__cta {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px;
  padding: 10px 20px; border-radius: 999px;
  background: var(--c-ember); color: #150B02; font-weight: 700; font-size: 0.9375rem;
  text-decoration: none;
}
@media (min-width: 700px) { .c-exp { padding: 30px 28px; } }

/* ── the ONE route into ordering ────────────────────────────────────── */
/* Fixed bar. Not a cart bar: no count, no total, no trolley, no state. It is
   a door, and it is the only one on the page. */
.c-orderbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  /* The bottom padding is the iOS home-indicator gesture strip, not decoration.
     At `10px + safe-b` the button's own pixels sat inside the strip on any
     device reporting NO inset — a home-button iPhone, most Android, and the
     headless audit — so the first upward swipe over "Pedir en la mesa" went to
     the system instead of to the only door on the page.
     `max()`, not `34px + safe-b`: the inset IS the strip, so adding both would
     double-count it and push the button 68px up a notched screen for nothing.
     This reads "at least clear the strip, and never less than you already
     were". 36 rather than 34 keeps two pixels off the audit's boundary so a
     font metric shifting under us cannot flip it.
     The bar's background still runs to the screen edge; only the pressable
     target is lifted clear. 2026-08-14, caught by scripts/kiosk-audit.mjs. */
  padding: 10px 14px max(36px, calc(10px + var(--c-safe-b)));
  background: linear-gradient(180deg, rgba(6,5,4,0.88), rgba(6,5,4,0.99) 40%);
  border-top: 1px solid var(--c-line);
}
/* Solid ember, not a gradient, and the same solid ember as .c-cta__btn — the
   other door into ordering on this page. The gradient this replaces ran down
   to --c-ember-deep (#B7550F), and against that end NO text colour reaches
   WCAG AA 4.5:1 for 16px — pure black tops out at 4.32:1. The subtitle, being
   smaller and lower in the button, sat deepest in it. Flat ember clears 4.5
   comfortably for both lines and makes the page's two CTAs finally match. */
.c-orderbar__btn {
  display: flex; align-items: center; gap: 12px;
  max-width: 620px; margin-inline: auto;
  min-height: 56px; padding: 9px 14px 9px 20px;
  border-radius: 999px; text-decoration: none;
  background: var(--c-ember);
  color: #150B02;
  box-shadow: 0 10px 28px rgba(225,112,26,0.28);
  transition: transform 180ms var(--c-ease);
}
.c-orderbar__btn:active { transform: translateY(1px); }
.c-orderbar__txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.c-orderbar__lbl { font-weight: 700; font-size: 1rem; line-height: 1.18; letter-spacing: -0.005em; }
/* 0.85, not 0.78: at 12px this line needs the full 4.5:1, and opacity is a
   contrast cut the audit cannot see (it reads `color`, which opacity does not
   change). 0.78 measured 4.57:1 against flat ember — passing on paper and one
   rounding away from not. */
.c-orderbar__sub {
  font-size: 0.75rem; line-height: 1.25; opacity: 0.85; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* At 320 the second line ellipsised in both languages ("…pago Womp…",
   "…Wompi checko…"). A truncated subtitle looks like a bug; the label alone
   is the whole message anyway. */
@media (max-width: 359px) { .c-orderbar__sub { display: none; } }
.c-orderbar__arrow {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.125rem;
  background: rgba(23,12,2,0.16);
}

/* Closing CTA — same href, same table carry-through, for the guest who has
   read to the bottom and never looked at the fixed bar. */
.c-cta {
  display: block; margin: 46px 0 30px; padding: 26px 20px;
  border: 1px solid var(--c-line-2); border-radius: var(--c-r-lg);
  background:
    linear-gradient(180deg, rgba(11,9,8,0.30), rgba(11,9,8,0.85)),
    radial-gradient(120% 120% at 100% 0%, rgba(225,112,26,0.24), transparent 62%);
  text-align: center; text-decoration: none; color: inherit;
}
.c-cta__t {
  margin: 0; font-family: var(--c-font-display); font-weight: 600;
  font-size: clamp(1.375rem, 6vw, 2rem); line-height: 1.1;
}
.c-cta__s { margin: 10px auto 0; max-width: 44ch; font-size: 0.9375rem; line-height: 1.55; color: var(--c-cream-dim); }
.c-cta__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 18px;
  padding: 12px 26px; border-radius: 999px;
  background: var(--c-ember); color: #150B02; font-weight: 700; font-size: 1rem;
}

/* ── footer ─────────────────────────────────────────────────────────── */
.c-foot {
  margin-top: 10px; padding: 26px 0 34px;
  border-top: 1px solid var(--c-line);
  text-align: center; font-size: 0.8125rem; line-height: 1.75; color: var(--c-cream-muted);
}
.c-foot a { color: var(--c-cream-dim); }
.c-foot__legal { margin-top: 10px; font-size: 0.75rem; }
.c-foot__links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.c-foot__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8125rem; }

/* ── motion / print ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media print {
  .c-orderbar, .c-cta, .c-skip, #site-nav { display: none !important; }
  .c-carta { padding-bottom: 0; background: #fff; color: #111; }
  .c-item__desc, .c-row__desc, .c-sec__intro { color: #333; }
}