/* Cajun Reaux's Cafe. One shape runs the page: the circle of their badge and their red plates.
   Palette from the badge (parchment, bayou ink, badge red), their photos (the navy cloth they shoot on, red plates),
   their printed menu (white paper) and the porch light (cheese yellow, used only for "lit" and "open").
   Type: Ultra, the fat wood-type Clarendon of the badge lettering and the printed menu's headers, and Archivo for
   reading, with its condensed bold cut for names, prices and buttons. Seven size tokens (--fs-*) do all the work.
   The header, the first screen and the intro are styled inline in index.html; this file is everything below. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body { --focus: var(--cheese); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; color: inherit; }
h2 { font: 400 var(--fs-l)/1 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.small { font-size: var(--fs-small); }
.top nav a:hover, .top .menu-link:hover { background: var(--night-2); }
.pill.red:hover { background: var(--red-deep); }
.pill.cream:hover { background: #fff6e4; }
.pill.line:hover { background: rgba(239, 225, 198, .14); }

/* ---------- Favorites: plates ---------- */
.favs { position: relative; padding: clamp(80px, 11vw, 140px) var(--gutter); }
.plates { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 64px; }
.plate-item { display: grid; justify-items: center; gap: 22px; text-align: center; }
.plate { position: relative; width: min(80vw, 400px); aspect-ratio: 1; border-radius: 50%; background: var(--red); }
.plate::before { content: ""; position: absolute; inset: 4.6%; border-radius: 50%; background: #a51216; }
.plate > img, .plate > svg { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 50%; object-fit: cover; }
.plate .dim { position: absolute; inset: 0; border-radius: 50%; background: var(--night); opacity: 0; pointer-events: none; }
.price { position: absolute; right: -1%; top: 5%; z-index: 2; width: 27%; aspect-ratio: 1; border-radius: 50%; background: var(--parch); color: var(--ink);
  display: grid; place-content: center; text-align: center; transform: rotate(9deg); }
.price b { font: 400 var(--fs-lead)/1 var(--display); white-space: nowrap; }
.price small { font: condensed 800 var(--fs-micro)/1.1 var(--cond); }
.drawn-tag { position: absolute; left: 50%; bottom: 7%; z-index: 2; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: var(--night); color: var(--parch); font: condensed 800 var(--fs-micro)/1.2 var(--cond); }
.plate-copy h3 { font: 400 var(--fs-m)/1.05 var(--display); text-wrap: balance; }
.plate-copy p { max-width: 34ch; margin: 10px auto 0; font-size: var(--fs-small); }
.dots { display: none; }

/* Pinned and stacked (added by app.js when motion is allowed): one plate at a time is served onto the stack.
   The heading scrolls away first; the pinned stage holds only the plates and the words for the one on top. */
.favs.stacked { padding: clamp(80px, 11vw, 140px) 0 0; }
.favs.stacked > h2 { padding: 0 var(--gutter); }
.favs.stacked .favs-stage { position: relative; height: 100svh; min-height: 540px; overflow: hidden;
  padding: calc(var(--head-h) + 12px) var(--gutter) calc(84px + env(safe-area-inset-bottom)); }
.favs.stacked .plates { position: relative; height: 100%; margin: 0; display: block; }
.favs.stacked .plate-item { position: absolute; inset: 0; align-content: center; gap: 18px; pointer-events: none; }
.favs.stacked .plate { width: min(84vw, 46svh, 470px); will-change: transform; }
.favs.stacked .plate-copy { min-height: 7.4em; }
.favs.stacked .dots { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(239, 225, 198, .35); transition: background-color .25s, transform .25s; }
.dots i.on { background: var(--red); transform: scale(1.35); }

/* ---------- Build your combo: their counter ---------- */
.build { --focus: #fff; background: var(--red); color: var(--parch); padding: clamp(80px, 11vw, 140px) var(--gutter); }
.build-head p { max-width: 46ch; margin-top: 16px; font-size: var(--fs-lead); }
.builder { display: grid; gap: 30px; margin-top: 40px; align-items: start; }
.steps { display: grid; gap: 34px; min-width: 0; }
.step { border: 0; padding: 0; min-width: 0; }
.step legend { padding: 0; margin-bottom: 12px; font: 400 var(--fs-m)/1.1 var(--display); }
.step .hint { margin: -4px 0 14px; font-size: var(--fs-small); }
.groups { display: grid; gap: 22px; }
.gh { margin: 0 0 6px 4px; font: condensed 800 var(--fs-small)/1.2 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.rows-opt { display: grid; gap: 4px; }
.opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 18px 8px 14px; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt .tick { position: relative; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; }
.opt .nm { flex: 1 1 auto; font: condensed 800 var(--fs-body)/1.15 var(--cond); }
.opt .pr { flex: 0 0 auto; font: condensed 800 var(--fs-body)/1 var(--cond); font-variant-numeric: tabular-nums; }
.opt:hover { background: rgba(239, 225, 198, .16); }
.opt:has(input:checked) { background: var(--parch); color: var(--ink); }
.opt:has(input:checked) .tick { border-color: var(--red); }
.opt:has(input:checked) .tick::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--red); }
.opt:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .opt { padding-right: 20px; border: 2px solid rgba(239, 225, 198, .75); }
.chips .opt:has(input:checked) { border-color: var(--parch); }
.chips .pr { font-size: var(--fs-small); }

.ticket { position: relative; background: var(--parch); color: var(--ink); padding: 34px clamp(20px, 3vw, 30px) 26px; border-radius: 0 0 22px 22px; display: grid; gap: 14px; --focus: var(--ink); }
.ticket::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; background: url(media/perf-red.svg) 0 50% / 22px 16px repeat-x; }
.t-top { display: flex; gap: 14px; align-items: center; }
.t-top img { width: 56px; height: 56px; border-radius: 50%; }
.t-top h3 { font: 400 var(--fs-m)/1.05 var(--display); }
.t-top p { font: condensed 800 var(--fs-small)/1.3 var(--cond); color: var(--ink-2); }
.t-name { font: 400 var(--fs-m)/1.1 var(--display); padding-top: 4px; }
.t-lines { list-style: none; padding: 0; display: grid; }
.t-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 3px dotted rgba(36, 23, 15, .28); font-size: var(--fs-small); }
.t-lines li span:last-child { font: condensed 800 var(--fs-small)/1.3 var(--cond); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.t-total span { font: condensed 800 var(--fs-body)/1.2 var(--cond); }
.t-total b { display: grid; place-items: center; width: 7.4rem; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--red); color: var(--red-deep); font: 400 var(--fs-m)/1 var(--display); transform: rotate(-7deg); }
.t-say { background: #e7d3ac; border-radius: 18px; padding: 14px 18px 16px; }
.t-say-h { font: condensed 800 var(--fs-small)/1.2 var(--cond); color: var(--ink); margin-bottom: 4px; }
.t-say p:last-child { font-size: var(--fs-body); line-height: 1.5; }
.t-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.t-acts .pill.line { color: var(--ink); }
.t-acts .pill.line:hover { background: rgba(36, 23, 15, .08); }
.t-note { font-size: var(--fs-small); color: var(--ink-2); }
.mini { display: none; }

/* ---------- The menu: their printed menu, on white like the real one ---------- */
.menu { --focus: var(--ink); background: var(--paper); color: var(--ink); padding: clamp(80px, 11vw, 140px) var(--gutter); }
.menu-head p { max-width: 52ch; margin-top: 16px; font-size: var(--fs-lead); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 30px 0 40px; }
.tabs button { min-height: 48px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; font: condensed 800 var(--fs-body)/1.1 var(--cond); cursor: pointer; transition: background-color .15s; }
.tabs button:hover { background: rgba(36, 23, 15, .07); }
.tabs button[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.panel { display: grid; gap: 64px; }
.panel[hidden] { display: none; }
.msec { position: relative; padding: 34px clamp(18px, 4vw, 40px) 30px; border: 3px dashed var(--red); border-radius: 10px; }
.msec.drawn { border-color: transparent; }
.dash { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); overflow: visible; pointer-events: none; }
.mhead { display: flex; align-items: center; justify-content: center; gap: .45em; isolation: isolate; text-align: center; color: var(--red);
  font: 400 var(--fs-m)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.mhead::before, .mhead::after { content: ""; flex: 0 0 auto; width: .34em; height: .34em; border-radius: 50%; background: var(--red); }
.mhead span { position: relative; }
.mhead span::before { content: attr(data-t); position: absolute; left: .07em; top: .07em; z-index: -1; color: transparent;
  background: url(media/hatch.svg) 0 0 / 5px 5px; -webkit-background-clip: text; background-clip: text; } /* taste-skill-ignore: their printed menu's hatched shadow, an SVG line pattern clipped to the letters, not a gradient */
.mnote { max-width: 62ch; margin: 14px auto 0; text-align: center; font-size: var(--fs-small); color: var(--ink-2); }
.rows { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 16px 48px; }
.rows li { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: baseline; }
.rows b { font: condensed 800 var(--fs-body)/1.2 var(--cond); }
.rows .price-t { font: condensed 800 var(--fs-body)/1.2 var(--cond); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows p { grid-column: 1 / -1; margin-top: 2px; font-size: var(--fs-small); color: var(--ink-2); }
.veg { display: inline-block; margin-left: 8px; padding: 2px 8px 3px; border-radius: 999px; border: 2px solid var(--ink-2); font: condensed 800 var(--fs-micro)/1 var(--cond); vertical-align: 2px; }
.mphoto { position: absolute; right: -10px; top: -58px; width: clamp(104px, 26vw, 156px); aspect-ratio: 1; padding: 5px; border-radius: 50%; background: var(--red); transform: rotate(7deg); }
.mphoto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.msec.has-photo { padding-top: 64px; }
.fine { max-width: 70ch; margin: 44px 0 22px; font-size: var(--fs-small); color: var(--ink-2); }
.menu-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.menu-acts .pill.line { color: var(--ink); }
.menu-acts .pill.line:hover { background: rgba(36, 23, 15, .07); }

/* ---------- Story: the badge's bayou as a printed band ---------- */
.story { padding-bottom: clamp(80px, 11vw, 140px); }
.bayou { height: clamp(190px, 48vw, 380px); background: var(--parch); overflow: hidden; }
.bayou svg { width: 100%; height: 100%; }
.bayou .wheel, .bayou .sway { animation-play-state: paused; }
/* the band's windmill turns twice when it comes into view and stops (under 5 s, so no pause control is needed) */
.bayou.on .wheel, .bayou.on .sway { animation-play-state: running; animation-iteration-count: 2; }
.tabs button:active, .opt:active { transform: scale(.97); }
.story-in { display: grid; gap: 34px; padding: clamp(56px, 8vw, 96px) var(--gutter) 0; }
.story-copy p { max-width: 54ch; margin-top: 14px; font-size: var(--fs-lead); }
.story-copy p:first-child { margin-top: 0; }
.when { list-style: none; padding: 0; display: grid; gap: 26px; align-content: start; }
.when li { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; }
.when li::before { content: ""; grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: var(--red); border: 5px solid var(--night); outline: 3px solid var(--parch); margin-top: 2px; }
.when b { font: condensed 800 var(--fs-body)/1.2 var(--cond); color: var(--parch); }
.when span { font-size: var(--fs-body); }

/* ---------- Visit: a ticket stub ---------- */
.visit { --focus: var(--ink); background: var(--parch); color: var(--ink); padding: clamp(80px, 11vw, 140px) var(--gutter); }
.stub { --focus: var(--cheese); position: relative; display: grid; margin-top: 38px; background: var(--night); color: var(--parch); border-radius: 28px; }
.stub > div { padding: clamp(26px, 4vw, 44px); }
.stub h3 { font: 400 var(--fs-m)/1.05 var(--display); margin-bottom: 14px; }
.stub .status { margin: 0 0 12px; }
.hours { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.hours td { padding: 10px 0; border-bottom: 3px dotted rgba(239, 225, 198, .22); }
.hours td + td { text-align: right; font: condensed 800 var(--fs-body)/1.2 var(--cond); }
.hours tr.today td { color: var(--cheese); font-weight: 700; }
.hours tr.today td + td { font-weight: 800; }
.hours tr.today td:first-child::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--cheese); vertical-align: 1px; }
.stub .small { margin-top: 14px; color: var(--dim); }
.stub-find { position: relative; border-top: 4px dotted rgba(239, 225, 198, .45); }
.stub-find::before, .stub-find::after { content: ""; position: absolute; top: -20px; width: 36px; height: 36px; border-radius: 50%; background: var(--parch); }
.stub-find::before { left: -18px; } .stub-find::after { right: -18px; }
address { font: 400 var(--fs-m)/1.2 var(--display); font-style: normal; }
.find-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.h-deliver { margin-top: 30px; }
.deliver { list-style: none; padding: 0; display: grid; }
.deliver a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; min-height: 52px; padding: 10px 0; border-bottom: 3px dotted rgba(239, 225, 198, .22); text-decoration: none; }
.deliver a b { font: condensed 800 var(--fs-body)/1.2 var(--cond); }
.deliver a small { font-size: var(--fs-small); color: var(--dim); }
.deliver a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.social { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 20px; }
.social a { display: inline-flex; align-items: center; min-height: 44px; font: condensed 800 var(--fs-body)/1 var(--cond); text-underline-offset: 4px; }

/* ---------- Footer: the badge, big ---------- */
.foot { display: grid; justify-items: center; gap: 12px; text-align: center; padding: clamp(80px, 11vw, 120px) var(--gutter) calc(120px + env(safe-area-inset-bottom)); }
.foot-badge { width: min(62vw, 300px); height: auto; border-radius: 50%; }
.bye { margin-top: 10px; font: 400 var(--fs-l)/1.02 var(--display); text-wrap: balance; }
.nap { font: condensed 800 var(--fs-body)/1.4 var(--cond); }
.credit { max-width: 62ch; font-size: var(--fs-small); color: var(--dim); }

/* ---------- Phones: the running total rides along while you pick ---------- */
@media (max-width: 899px) {
  .mini { position: sticky; top: calc(var(--head-h) + 8px); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; padding: 0 22px;
    border-radius: 999px; background: var(--ink); color: var(--parch); text-decoration: none; font: condensed 800 var(--fs-body)/1.1 var(--cond); }
  .mini b { font: 400 var(--fs-m)/1 var(--display); color: var(--parch); }
  /* the sticky total never covers the option you're on */
  .build .step, .build .opt, .build .t-say { scroll-margin-top: calc(var(--head-h) + 74px); }
}

@media (min-width: 700px) {
  .plates { grid-template-columns: 1fr 1fr; }
  .groups { grid-template-columns: 1fr 1fr; gap: 30px; }
  .rows.two { grid-template-columns: 1fr 1fr; }
  /* wide enough for one row of tabs: it stays in reach while you read the menu */
  .tabs { position: sticky; top: var(--head-h); z-index: 6; display: flex; flex-wrap: wrap; margin: 30px calc(-1 * var(--gutter)) 34px; padding: 12px var(--gutter); background: var(--paper); }
  .tabs button { padding: 0 18px; }
}

@media (min-width: 900px) {
  .plates { grid-template-columns: repeat(3, 1fr); }
  .plate { width: min(26vw, 380px); }
  .favs.stacked .favs-stage { padding: calc(var(--head-h) + 24px) var(--gutter) 40px; }
  .favs.stacked .plate-item { grid-template-columns: auto minmax(0, 30rem); align-content: center; justify-content: center; align-items: center; gap: 5vw; text-align: left; }
  .favs.stacked .plate { width: min(74svh, 46vw, 680px); }
  .favs.stacked .price b { font-size: var(--fs-m); }
  .favs.stacked .plate-copy p { margin: 14px 0 0; font-size: var(--fs-lead); }
  .favs.stacked .dots { left: auto; right: var(--gutter); bottom: 40px; transform: none; }
  .builder { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .8fr); gap: 56px; }
  .ticket { position: sticky; top: calc(var(--head-h) + 28px); }
  .panel { gap: 76px; }
  .story-in { grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: start; }
  .stub { grid-template-columns: .9fr 1.1fr; }
  .stub-find { border-top: 0; border-left: 4px dotted rgba(239, 225, 198, .45); }
  .stub-find::before { left: -20px; top: -18px; } .stub-find::after { left: -20px; right: auto; top: auto; bottom: -18px; }
  .foot { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}