/* ============================================================
   Cooked Apps — "food menu" theme design system.
   Shared by every restyled page. Linked alongside
   /assets/js/checker-grid.js, which drives the checker
   background and panel snapping this file lays out.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- 1.1 colour tokens ---------- */
  --cream: #FAF8EE;
  --orange: #F24E12;       /* checker dark squares, rules, 24px+ display type only */
  --orange-ink: #C73C0A;   /* orange text under 24px (4.8:1 on cream) */
  --rust: #A93408;         /* body copy, button fill (6.2:1 on cream) */
  --stamp: #2D6A80;        /* stamp + focus outlines */
  --stamp-2: #8A3568;      /* sticker ink, "small batch only" */
  --stamp-3: #3B7A3F;      /* sticker ink, "kitchen approved" */
  --stamp-4: #B23A3A;      /* sticker ink, "shipped with love" */
  --shade-top: #F6EEDC;
  --shade-side: #EEDFC6;
  --shade-deep: #E6D2B4;

  --btn-fill: var(--rust);  /* button fill — a distinct "fun" hue in dark mode */
  --btn-ink: var(--cream);  /* button text, contrasts against --btn-fill */

  /* ---------- 1.2 type ---------- */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.2 0 0 0 0 0.03 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- 1.3 checker grid ---------- */
  /* --s and --checker-offset-x are written in px by checker-grid.js,
     snapped to whole device pixels so panel edges never drift off
     the grid at fractional zoom or high-density screens. */
  --s: 22px;
  --checker-offset-x: 0px;
}

/* ---------- dark mode ----------
   Off by default; html[data-theme="dark"] is set by theme-toggle.js
   (localStorage, falling back to prefers-color-scheme) before first
   paint. The checker/grid-bg tile artwork below is a separate dark
   SVG rather than a token swap — --orange stays orange (rules,
   display type) rather than becoming the checker colour the way it
   does in light mode, so the checkerboard itself goes quiet dark
   grey on black while text/rules keep their warmth. */
html[data-theme="dark"] {
  color-scheme: dark;
  --cream: #2A2521;
  --orange: #FF6A3D;
  --orange-ink: #FF9269;
  --rust: #EFE3D3;
  --stamp: #6BBBDA;
  --stamp-2: #E896C9;
  --stamp-3: #8FE39A;
  --stamp-4: #FF9B8A;
  --shade-top: #322C27;
  --shade-side: #251F1B;
  --shade-deep: #171310;
  --btn-fill: #FF4F81;
  --btn-ink: #1A1410;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--cream);
  /* 2x2 SVG tile, crispEdges — not a conic-gradient, which leaves
     notches at fractional sizes. background-size/position are set by
     checker-grid.js once --s and --checker-offset-x are known. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23F24E12'/%3E%3Crect width='1' height='1' fill='%23FAF8EE'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23FAF8EE'/%3E%3C/svg%3E");
  background-size: calc(var(--s) * 2) calc(var(--s) * 2);
  background-position: var(--checker-offset-x) 0;
}

/* Secondary (text) pages swap the bold checkerboard for a quiet
   thin-line grid — same square size and offset, so it still snaps
   to the panel edges, just a lot less visual noise behind a long
   read. */
html.grid-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23FAF8EE'/%3E%3Cpath d='M0 0H1M0 0V1' stroke='%23C73C0A' stroke-opacity='.2' stroke-width='.035'/%3E%3C/svg%3E");
  background-size: var(--s) var(--s);
  background-position: var(--checker-offset-x) 0;
}

html[data-theme="dark"] {
  background-color: #0D0B0A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%230D0B0A'/%3E%3Crect width='1' height='1' fill='%232A2521'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232A2521'/%3E%3C/svg%3E");
}
html[data-theme="dark"].grid-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' width='1' height='1'%3E%3Crect width='1' height='1' fill='%230D0B0A'/%3E%3Cpath d='M0 0H1M0 0V1' stroke='%23FF9269' stroke-opacity='.22' stroke-width='.035'/%3E%3C/svg%3E");
}

body {
  display: flow-root;
  margin: 0;
  color: var(--rust);
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: 1.1875rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
}

h1, h2, h3, .price, .signoff, .dish, .stamp text {
  font-variation-settings: "SOFT" 100, "WONK" 0;
}

a { color: inherit; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 1.4 panels ---------- */
.panel, .hero, .sheet {
  position: relative;
  background-color: var(--cream);
  background-image: var(--grain);
  box-shadow: inset 0 0 0 2px var(--orange);
  /* checker-grid.js reveals these once the first snapped layout has
     run, so there is no visible jump as squares/margins settle. */
  visibility: hidden;
}
.grid-ready .panel,
.grid-ready .hero,
.grid-ready .sheet {
  visibility: visible;
}

.hero {
  display: grid;
  place-content: center;
  padding: 3rem 1.25rem;
  text-align: center;
}

/* Title block for a "solo" panel (support/privacy/terms/design-system):
   sits at the top of the one merged .sheet panel, with a divider
   rule separating it from the body content below instead of being
   its own separate boxed panel. */
.panel-title {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1.5px solid var(--orange);
  text-align: left;
}
.panel-title .pill { margin-top: 0; margin-bottom: 1.5rem; }
.panel-title .section-title { margin-bottom: 0; text-align: left; justify-content: flex-start; }
.panel-title .section-title::before { flex: 0 0 0; border-top: 0; }
.panel-title .section-title::after { flex: 1; }

/* ---------- theme toggle ---------- */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--orange);
  border: 0;
  border-radius: 50%;
  color: var(--orange-ink);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), background-color .15s ease, color .15s ease;
}
.theme-toggle:hover { transform: scale(1.08); }
.theme-toggle:active { transform: scale(.96); }
.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme="dark"] .theme-toggle .moon,
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun,
.theme-toggle .moon { display: block; }

.sheet {
  padding: 4rem clamp(1.25rem, 5vw, 3.5rem) 3rem;
}
@media (max-width: 640px) {
  .sheet { padding: 3rem 1.1rem 2.5rem; }
}

.menu, .content { max-width: 44rem; margin: 0 auto; }
.content { max-width: 70ch; }
.content p, .content ul, .content ol { max-width: 70ch; }

/* ---------- oval label / link pill ---------- */
.pill {
  display: inline-block;
  padding: .3rem 1.1rem .25rem;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--orange-ink);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .2s cubic-bezier(.2, 1.4, .4, 1);
}
.hero-cue {
  position: relative;
  justify-self: center;
  margin-top: 2.25rem;
  text-decoration: none;
  border-color: transparent;
}
.hero-cue:hover { background: var(--orange); color: var(--cream); transform: scale(1.05); }
.hero-cue:active { transform: scale(.98); }

/* The oval border is drawn by pill-draw.js as an SVG rect instead of
   the CSS border above (which is kept, just made transparent, so the
   box's size is identical either way) — pathLength="1" normalises the
   dash length regardless of the pill's actual size, the same trick
   the shopfront's line draw-in uses, so one keyframe animates any
   pill from an empty outline to fully drawn. */
.pill-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pill-stroke rect {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.hero-cue.is-drawing .pill-stroke rect {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cooked-pill-draw .7s ease forwards;
}
@keyframes cooked-pill-draw {
  to { stroke-dashoffset: 0; }
}

/* ---------- info table ---------- */
.info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--orange);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--orange-ink);
  text-align: center;
}
.info > * {
  padding: .6rem .5rem;
  border-left: 1.5px solid var(--orange);
  border-top: 1.5px solid var(--orange);
}
.info > .wide { grid-column: 1 / -1; border-top: 0; border-left: 0; }
.info > :nth-child(2) { border-left: 0; }
@media (max-width: 640px) {
  .info { font-size: .7rem; }
  .info > * { padding: .55rem .3rem; }
}

/* ---------- stamp ---------- */
.stamp {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  display: block;
  color: var(--stamp-ink, var(--stamp));
  --stamp-rotate: -12deg;
  --stamp-scale: 1;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  opacity: 0;
  transform: rotate(var(--stamp-rotate)) scale(var(--stamp-scale));
}
.stamp svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }

/* On the two round sticker designs, the ring of curved copy spins
   slowly and continuously around the fixed centre wordmark — the
   hexagon and ribbon designs have no ring, so this only ever targets
   the circular ones. */
.stamp-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: cooked-stamp-ring-spin 26s linear infinite;
}
@keyframes cooked-stamp-ring-spin {
  to { transform: rotate(360deg); }
}

/* A click cycles the sticker: lift off, swap the SVG, stamp back
   down at the new design's own angle/size (set via --stamp-rotate/
   --stamp-scale in stamp.js). Idle gets a slow, barely-there sway
   so the corner doesn't go completely static between clicks. */
.stamp.is-entering { animation: cooked-stamp-in .4s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.stamp.is-idle { opacity: 1; animation: cooked-stamp-idle 6s ease-in-out infinite; }
.stamp.is-lifting { opacity: 1; animation: cooked-stamp-lift .16s ease-in forwards; }
.stamp.is-landing { opacity: 1; animation: cooked-stamp-land .38s cubic-bezier(.2, 1.5, .4, 1) forwards; }

@keyframes cooked-stamp-in {
  from { opacity: 0; transform: rotate(calc(var(--stamp-rotate) - 12deg)) scale(calc(var(--stamp-scale) * 1.7)); }
  to   { opacity: 1; transform: rotate(var(--stamp-rotate)) scale(var(--stamp-scale)); }
}
@keyframes cooked-stamp-idle {
  0%, 100% { transform: rotate(var(--stamp-rotate)) scale(var(--stamp-scale)); }
  50%      { transform: rotate(calc(var(--stamp-rotate) + 3deg)) scale(var(--stamp-scale)); }
}
@keyframes cooked-stamp-lift {
  to { opacity: 0; transform: rotate(calc(var(--stamp-rotate) + 8deg)) scale(calc(var(--stamp-scale) * 1.15)) translateY(-8px); }
}
@keyframes cooked-stamp-land {
  from { opacity: 0; transform: rotate(calc(var(--stamp-rotate) - 18deg)) scale(calc(var(--stamp-scale) * 1.6)); }
  to   { opacity: 1; transform: rotate(var(--stamp-rotate)) scale(var(--stamp-scale)); }
}

.masthead-foot .stamp { left: -5.5rem; top: -3rem; }
@media (max-width: 640px) {
  .stamp { width: 5.25rem; height: 5.25rem; }
  .masthead-foot .stamp { left: -.5rem; top: -2.2rem; }
}

/* Small sticker badges pinned to a menu card's own corner (see
   .item, which sets position:relative + visible overflow so these
   can hang half off the card edge like something slapped on). */
.stamp--sm { width: 6.4rem; height: 6.4rem; }
.item-sticker--tr { right: -3rem; top: -3rem; }
.item-sticker--bl { left: -3rem; bottom: -3rem; }
.item-sticker--r { right: -3rem; bottom: -3rem; }
@media (max-width: 640px) {
  .stamp--sm { width: 5.2rem; height: 5.2rem; }
  .item-sticker--tr { right: -2.1rem; top: -2.1rem; }
  .item-sticker--bl { left: -2.1rem; bottom: -2.1rem; }
  .item-sticker--r { right: -2.1rem; bottom: -2.1rem; }
}

/* ---------- section title ---------- */
.section-title {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1.75rem;
  font-weight: 650;
  font-size: clamp(2.25rem, 7vw, 3rem);
  line-height: 1;
  color: var(--orange);
  white-space: nowrap;
  text-transform: lowercase;
}
.section-title::before,
.section-title::after {
  content: "";
  flex: 1;
  border-top: 1.5px solid var(--orange);
}
.section { margin-top: 4.5rem; }
.section:first-child { margin-top: 0; }

/* ---------- menu grid ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.menu-grid .item--featured { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .menu-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Groups a card (or a pair of cards) under a running label, e.g.
   "house special" over the featured card, "most popular" over the
   two-up pair — spans the full grid row regardless of column count. */
.menu-group-label {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.menu-group-label:not(:first-child) { margin-top: .5rem; }
.menu-group-label.is-centered { text-align: center; }

/* Each letter is its own span carrying a --i index (written inline in
   the HTML); hovering the label scales every letter up with a colour
   shift, staggered by index so the effect ripples across the word
   instead of popping all at once. */
.menu-group-label span {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), color .35s ease;
  transition-delay: calc(var(--i, 0) * 30ms);
}
.menu-group-label:hover span {
  transform: translateY(-.15em) scale(1.35);
  color: var(--orange);
}

/* ---------- menu item ---------- */
.item {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "plate head" "body body";
  column-gap: 1.4rem;
  row-gap: 1rem;
  padding: 1.75rem;
  background-image: var(--grain);
  box-shadow: inset 0 0 0 1.5px var(--orange);
}

.item--featured {
  padding: 2rem 2.25rem;
  grid-template-columns: 6.5rem 1fr;
}
.item--featured .plate { width: 6.5rem; height: 6.5rem; }
@media (max-width: 640px) {
  .item--featured { padding: 1.5rem 1.35rem; grid-template-columns: 3.75rem 1fr; }
  .item--featured .plate { width: 3.75rem; height: 3.75rem; }
}

.plate {
  grid-area: plate;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 22%;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: inset 0 0 0 1.5px var(--orange), inset 0 0 0 6px var(--cream), inset 0 0 0 7.5px var(--orange);
}
.plate svg, .plate img { width: 100%; height: 100%; border-radius: 22%; display: block; object-fit: cover; }

.item-head { grid-area: head; align-self: center; min-width: 0; container-type: inline-size; }
.item-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  min-width: 0;
  container-type: inline-size;
}

/* Empty, grows to soak up whatever height a stretched card has left
   over its own content — keeps .item-actions sitting at the same row
   across a pair of two-up cards even when one has more copy than the
   other (see .menu-grid, which stretches paired cards to equal
   height, and .item's own grid-template-rows: auto 1fr). Sits inert
   on the featured card, which is alone in its row and never stretched. */
.item-spacer { flex: 1; }

.rating {
  margin-top: .35rem;
  font-size: 1.05rem;
  letter-spacing: .14em;
  color: var(--orange);
}

.line {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-width: 0;
}
.dish {
  margin: 0;
  font-weight: 650;
  font-size: clamp(1.9rem, 5.5vw, 2.5rem);
  line-height: 1.05;
  color: var(--orange);
}
.leader {
  flex: 1;
  min-width: 1.5rem;
  height: 6px;
  background: radial-gradient(circle, var(--orange) 1.5px, transparent 2px) left center / 9px 6px repeat-x;
}
.price {
  font-weight: 650;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  line-height: 1;
  color: var(--orange);
  white-space: nowrap;
}

/* Inside a menu card, size the dish/price line off the card's own
   width (container query units) rather than the viewport — a
   featured full-width card and a narrow two-up card need different
   type scales at the very same viewport width. */
.item .dish { font-size: clamp(1.3rem, 11cqi, 2.5rem); }
.item .price { font-size: clamp(1.1rem, 9cqi, 2.1rem); }

/* The two-up cards are too narrow for the dish name, dotted leader
   and price to ever comfortably share one line at any type size —
   let the leader+price wrap to their own line under the dish name
   instead of squeezing the dish text into a mid-word wrap. */
@container (max-width: 220px) {
  .line { flex-wrap: wrap; row-gap: .15rem; }
  .line .dish { flex-basis: 100%; }
  .line .leader { display: none; }
}

.desc { margin: .6rem 0 0; max-width: 52ch; }
.note { margin: .3rem 0 0; font-style: italic; font-size: 1.05rem; }

.extra { margin-top: 1rem; }
.extra .name {
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--orange-ink);
}
.extra .price { font-size: 1.3rem; color: var(--orange-ink); white-space: nowrap; }

/* Two (or three, for a split store link) equal cells in one bordered
   bar — same fill-from-bottom hover language as the footer's
   Support/Privacy/Terms links (.footer .info a), reused here so a
   card's own actions read as the same kind of thing. */
.item-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1.4rem;
  border: 1.5px solid var(--orange);
}
.item-actions--split { grid-template-columns: 1fr 1fr 1fr; }

/* A button carries its own content's natural size instead of a fixed
   padding inflating it, so the bar fills its row edge to edge; the
   grid row stretches every cell in it to match the tallest. */
.item-action {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 0;
  padding: .3rem;
  overflow: hidden;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--orange-ink);
  transition: color .25s ease .05s;
}
.item-action:not(:first-child) { border-left: 1.5px solid var(--orange); }
.item-action::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.item-action:hover,
.item-action:focus-visible { color: var(--cream); }
.item-action:hover::before,
.item-action:focus-visible::before { transform: scaleY(1); }

.item-action.is-primary {
  background: var(--orange);
  color: var(--cream);
}
.item-action.is-primary::before { background: var(--rust); }

@media (max-width: 640px) {
  .dish { font-size: 1.75rem; }
  .item { grid-template-columns: 3.75rem 1fr; column-gap: .9rem; row-gap: .85rem; padding: 1.35rem; }
  .plate { width: 3.75rem; height: 3.75rem; }
  .item-action { font-size: .72rem; }
}

/* ---------- button ---------- */
.btn {
  position: relative;
  display: inline-block;
  padding: .7rem 1.2rem .65rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-ink);
  background: var(--btn-fill);
  border: 1.5px solid var(--btn-fill);
  border-radius: 0;
  transform: translateY(0);
  box-shadow: 0 0 0 0 rgba(169, 52, 8, 0);
  transition: background-color .15s ease, color .15s ease,
    transform .28s cubic-bezier(.2, 1.4, .4, 1),
    box-shadow .28s cubic-bezier(.2, 1.4, .4, 1);
}
.btn:hover {
  background: var(--cream);
  color: var(--btn-fill);
  transform: translateY(-3px);
  box-shadow: 0 5px 0 0 var(--btn-fill);
}
.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 0 0 var(--btn-fill);
  transition-duration: .08s;
}

.text-link {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--orange-ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.text-link:hover { color: var(--rust); }

/* ---------- redacted row ---------- */
.redact {
  display: inline-block;
  width: 11rem;
  height: 1.5rem;
  border: 1.5px solid var(--orange);
  background: repeating-linear-gradient(-45deg, var(--orange) 0 4px, transparent 4px 9px);
  opacity: .6;
}
.redact.short { width: 7.5rem; }
@media (max-width: 640px) {
  .redact { width: 7rem; }
  .redact.short { width: 4.5rem; }
}

.soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.soon-list .price { opacity: .6; }
.soon-copy { margin: 1.75rem 0 0; text-align: center; font-style: italic; }

/* ---------- bordered content block (in the oven / kitchen) ---------- */
.panel-block {
  padding: 1.75rem 2rem;
  background-image: var(--grain);
  box-shadow: inset 0 0 0 1.5px var(--orange);
}
@media (max-width: 640px) {
  .panel-block { padding: 1.35rem 1.25rem; }
}

/* ---------- kitchen / footer ---------- */
.kitchen p { margin: 0 auto; max-width: 44ch; text-align: center; }
.kitchen p + p { margin-top: 1rem; }

.footer { margin-top: 5rem; text-align: center; }
.signoff {
  margin: 0;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  line-height: 1.05;
  color: var(--orange);
  text-transform: lowercase;
}
.footer .info { max-width: 26rem; margin: 2rem auto 0; color: var(--orange-ink); }
.footer .info a {
  position: relative;
  z-index: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--orange-ink);
  transition: color .25s ease .05s;
}
.footer .info a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.footer .info a:hover,
.footer .info a:focus-visible { color: var(--cream); }
.footer .info a:hover::before,
.footer .info a:focus-visible::before { transform: scaleY(1); }
.footer .info > :first-child { border-left: 0; }
.footer .info > * { border-top: 0; }
.footer .info > :nth-child(2) { border-left: 1.5px solid var(--orange); }
.legal { margin: 1rem 0 0; font-size: .95rem; }

/* ---------- long-form legal copy (tasks 4-6) ---------- */
.content h2:not(.section-title) {
  margin: 3rem 0 1rem;
  font-weight: 650;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  color: var(--orange);
}
.content h2:not(.section-title):first-child { margin-top: 0; }
.content h3 {
  margin: 2rem 0 .75rem;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--rust);
}
.content p { margin: 1rem 0; }
.content a { color: var(--orange-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.content a:hover { color: var(--rust); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .stamp-ring { animation: none; }
  .stamp, .stamp.is-idle, .stamp.is-entering, .stamp.is-lifting, .stamp.is-landing {
    animation: none;
    opacity: 1;
    transform: rotate(var(--stamp-rotate)) scale(var(--stamp-scale));
  }
  .btn { transition: background-color .15s ease, color .15s ease; }
  .btn:hover, .btn:active { transform: none; box-shadow: none; }
  .pill { transition: background-color .15s ease, color .15s ease; }
  .hero-cue:hover, .hero-cue:active { transform: none; }
  .footer .info a::before { transition: none; }
  .item-action { transition: color .15s ease; }
  .item-action::before { transition: none; }
  .menu-group-label span { transition: color .15s ease; transition-delay: 0s; }
  .menu-group-label:hover span { transform: none; }
  .theme-toggle { transition: background-color .15s ease, color .15s ease; }
  .theme-toggle:hover, .theme-toggle:active { transform: none; }
}