/* ==========================================================================
   Chef Lynn Michelle · Recipes · "Lowcountry daylight" liquid glass
   Glass primitive (tint + hi/lo sheen + gradient specular edge + blur/saturate
   + inset highlight shadow, with @supports fallback) follows the shared pattern
   in /workspace/weblab/styles.css and pickers-rock-dashboard/src/styles.css,
   re-tuned for a light, sunny theme in Chef Lynn's brand colors.
   ========================================================================== */
:root {
  /* brand: Elementor global kit (post-12.css) + logo pixels */
  --orange: #E27225;   /* kit primary · logo plate arc #E37124 */
  --navy:   #06113C;   /* kit secondary (headings, nav) */
  --blue:   #297BBF;   /* kit accent · logo deep-water arc #287AC0 */
  --sky:    #53BCE9;   /* logo light-water arc */
  --teal:   #76C8B5;   /* kit + logo knife #75C7B4 */
  --amber:  #F39A12;   /* kit */
  --yellow: #FBEF3C;   /* logo fork */
  --red:    #D12E26;   /* logo plate */
  --leaf:   #49B649;   /* logo herb sprig */
  --lilac:  #A968AA;   /* kit + logo buds */
  --cream:  #FFF7F1;   /* kit section bg */
  --text:   #3c4257;
  --muted:  #707070;   /* kit text */
  --rainbow: linear-gradient(90deg, var(--red), var(--orange) 20%, var(--yellow) 38%, var(--teal) 58%, var(--sky) 76%, var(--blue) 90%, var(--lilac));

  --glass-tint: rgba(255, 252, 247, .46);
  --glass-hi: rgba(255, 255, 255, .62);
  --glass-lo: rgba(255, 255, 255, .14);
  --glass-edge: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 30%, rgba(255,255,255,.15) 60%, rgba(226,114,37,.45) 100%);
  --glass-blur: blur(22px) saturate(180%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), inset 0 0 0 .5px rgba(255,255,255,.4), 0 24px 60px -28px rgba(6,17,60,.45), 0 2px 8px -2px rgba(6,17,60,.12);
  --lx: .3; --ly: .2;
  --radius: 26px;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --head: "Rufina", Georgia, "Times New Roman", serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--cream); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body { font-family: var(--body); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--head); color: var(--navy); line-height: 1.18; margin: 0; font-weight: 700; }
a { color: var(--blue); }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 12px; }
::selection { background: rgba(118,200,181,.45); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 99; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 999px; }
.skip:focus { top: 1rem; }

/* ---------- living sky (sea, sand and sunset orbs) ---------- */
.sky { position: fixed; inset: 0; z-index: -2; overflow: hidden; background:
  radial-gradient(1200px 700px at 10% -10%, #ffe6cf 0%, transparent 60%),
  radial-gradient(900px 700px at 110% 20%, #d6f1f9 0%, transparent 60%),
  radial-gradient(1000px 800px at 40% 120%, #dff4ee 0%, transparent 60%), var(--cream); }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.o1 { width: 44vmax; height: 44vmax; left: -14vmax; top: -12vmax; background: radial-gradient(circle, var(--orange), transparent 65%); opacity: .38; animation: d1 28s ease-in-out infinite alternate; }
.o2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 14vh; background: radial-gradient(circle, var(--sky), transparent 65%); opacity: .42; animation: d2 33s ease-in-out infinite alternate; }
.o3 { width: 42vmax; height: 42vmax; left: 18vw; bottom: -22vmax; background: radial-gradient(circle, var(--teal), transparent 62%); opacity: .45; animation: d3 38s ease-in-out infinite alternate; }
.o4 { width: 22vmax; height: 22vmax; left: 58vw; top: 4vh; background: radial-gradient(circle, var(--yellow), transparent 65%); opacity: .35; animation: d2 24s ease-in-out infinite alternate-reverse; }
.o5 { width: 26vmax; height: 26vmax; left: 4vw; top: 55vh; background: radial-gradient(circle, var(--lilac), transparent 65%); opacity: .22; animation: d1 30s ease-in-out infinite alternate-reverse; }
@keyframes d1 { to { transform: translate3d(16vw, 12vh, 0) scale(1.12); } }
@keyframes d2 { to { transform: translate3d(-20vw, 10vh, 0) scale(.88); } }
@keyframes d3 { to { transform: translate3d(-12vw, -16vh, 0) scale(1.08); } }
.grain { position: absolute; inset: -50%; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- glass primitive ---------- */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--glass-hi), var(--glass-lo)) padding-box,
              linear-gradient(var(--glass-tint), var(--glass-tint)) padding-box,
              var(--glass-edge) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}
.glass.sheen { overflow: hidden; }
.glass.sheen::after { content: ''; position: absolute; inset: -60%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, transparent 70%),
              linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 49%, rgba(251,239,60,.12) 51%, transparent 58%);
  transform: translate3d(calc((var(--lx) - .5) * 55%), calc((var(--ly) - .5) * 55%), 0); will-change: transform; }
.glass-inset { background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 2px 6px rgba(6,17,60,.08), 0 1px 0 rgba(255,255,255,.8); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.4)) padding-box, linear-gradient(rgba(255,250,244,.96), rgba(255,250,244,.96)) padding-box, var(--glass-edge) border-box; }
}

/* ---------- top bar ---------- */
.topbar { position: sticky; top: max(10px, env(safe-area-inset-top)); z-index: 20; margin: 10px auto 0; width: min(1200px, calc(100% - 20px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 16px; border-radius: 999px; }
.brand img { height: 44px; width: auto; }
.topnav { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: .45em; border-radius: 999px; padding: .5em .95em; border: 1px solid rgba(255,255,255,.95);
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.4)); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(6,17,60,.45);
  cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--navy); text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease-spring), background .25s, box-shadow .25s; touch-action: manipulation; }
.chip:hover { background: #fff; }
.chip:active { transform: scale(.94); }
.chip .dot { width: .62em; height: .62em; border-radius: 50%; background: var(--c, var(--orange)); box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.chip[aria-pressed="true"] { background: var(--c, var(--navy)); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 22px -10px var(--c, var(--navy)); }
.chip[aria-pressed="true"] .dot { background: #fff; }
.chip.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.chip .n { font-weight: 500; opacity: .65; font-size: .8em; }
.btn-book { display: inline-flex; align-items: center; padding: .62em 1.15em; border-radius: 999px; background: linear-gradient(180deg, #f08a43, var(--orange)); color: #fff;
  font-weight: 600; font-size: .9rem; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -10px rgba(226,114,37,.9); white-space: nowrap; transition: transform .3s var(--ease-spring); }
.btn-book:hover { transform: translateY(-1px); }

/* ---------- hero ---------- */
main { width: min(1200px, calc(100% - 20px)); margin: 0 auto; outline: none; }
.hero { position: relative; margin-top: 14px; border-radius: 34px; overflow: hidden; min-height: clamp(420px, 62vh, 600px); display: grid; align-items: end; padding: clamp(14px, 3vw, 34px); box-shadow: 0 30px 70px -36px rgba(6,17,60,.6); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transform: scale(1.03); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,17,60,0) 30%, rgba(6,17,60,.35)); }
.hero-card { max-width: 640px; padding: clamp(18px, 3vw, 30px); --glass-tint: rgba(255,252,247,.5); }
.eyebrow { margin: 0 0 .4rem; font-family: var(--head); color: var(--teal); font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.8); filter: saturate(1.3) brightness(.8); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.rainbow { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; filter: saturate(1.1) brightness(.92); }
.lede { margin: .7rem 0 1.1rem; font-size: clamp(.95rem, 1.8vw, 1.06rem); color: #2a3150; }
.search { display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 8px 6px 16px; }
.search svg { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .7rem 0; font-size: 1rem; color: var(--navy); outline: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { outline: 3px solid rgba(41,123,191,.5); outline-offset: 2px; }
.q-clear { border: 0; background: rgba(6,17,60,.08); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.awards { display: flex; gap: 10px; margin-top: 14px; }
.awards img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(6,17,60,.25)); }

/* ---------- filters + grid ---------- */
.filters { margin: -28px auto 0; width: calc(100% - 24px); padding: 12px; display: grid; gap: 8px; z-index: 2; position: relative; border-radius: 24px; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip { scroll-snap-align: start; }
.chip-row.small .chip { font-size: .78rem; padding: .38em .8em; }
.list-head { display: flex; justify-content: space-between; align-items: center; margin: 22px 6px 10px; gap: 10px; }
#count { margin: 0; font-weight: 600; color: var(--navy); }
.sort { font-size: .85rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.sort select { border: 1px solid rgba(6,17,60,.15); background: rgba(255,255,255,.7); border-radius: 999px; padding: .35em .8em; color: var(--navy); }
.grid { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card { padding: 8px; height: 100%; display: flex; flex-direction: column; transition: transform .45s var(--ease-spring), box-shadow .3s; border-radius: 24px; }
.card:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow), 0 30px 60px -30px var(--c, rgba(226,114,37,.8)); }
.card a.cover { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--c, var(--orange)), var(--teal)); text-decoration: none; }
.card a.cover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.card:hover img { transform: scale(1.05); }
.card .noimg { position: absolute; inset: 0; display: grid; place-items: center; }
.card .noimg img { width: 40%; height: auto; opacity: .9; }
.badge { position: absolute; left: 10px; top: 10px; z-index: 1; padding: .25em .7em; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--navy);
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #fff; display: inline-flex; gap: .4em; align-items: center; }
.badge .dot { width: .55em; height: .55em; border-radius: 50%; background: var(--c); }
.badge.warn { left: auto; right: 10px; background: rgba(255,240,200,.9); }
.card-body { padding: 12px 8px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h2 { font-size: 1.16rem; }
.card h2 a { color: inherit; text-decoration: none; }
.card h2 a::after { content: ''; position: absolute; inset: 0; border-radius: 24px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .8rem; color: var(--muted); margin-top: auto; }
.meta span { display: inline-flex; gap: .35em; align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: .7rem; font-weight: 600; padding: .15em .6em; border-radius: 999px; background: rgba(118,200,181,.22); color: #1d6b5a; text-transform: capitalize; }
.empty { padding: 20px; text-align: center; }
.link { background: none; border: 0; color: var(--blue); text-decoration: underline; cursor: pointer; padding: 0; }

/* ---------- recipe view ---------- */
#view-recipe { margin: 14px 0 40px; }
.r-back { margin: 4px 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.r-hero { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: stretch; }
.r-photo { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -30px rgba(6,17,60,.6); background: linear-gradient(135deg, var(--c, var(--orange)), var(--teal)); }
.r-photo img { width: 100%; height: 100%; object-fit: cover; }
.r-photo .noimg { position: absolute; inset: 0; display: grid; place-items: center; }
.r-photo .noimg img { width: 34%; height: auto; }
.r-head { padding: clamp(18px, 3vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.r-head .crumb { margin: 0; font-size: .85rem; font-weight: 600; color: var(--c, var(--orange)); filter: brightness(.85); }
.r-head h1 { font-size: clamp(1.8rem, 4.2vw, 2.8rem); }
.r-head .summary { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 4px 0; }
.stat { padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 #fff; text-align: center; }
.stat b { display: block; font-family: var(--head); font-size: 1.2rem; color: var(--navy); }
.stat small { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice { padding: 12px 14px; border-radius: 16px; background: rgba(251,239,60,.25); border: 1px solid rgba(243,154,18,.4); font-size: .9rem; }
.r-body { display: grid; gap: 18px; margin-top: 18px; grid-template-columns: 1fr; }
.panel { padding: clamp(18px, 3vw, 28px); }
.panel h2 { font-size: 1.5rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.panel h2::before { content: ''; width: 26px; height: 6px; border-radius: 6px; background: var(--rainbow); }
.panel h3 { font-family: var(--body); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); margin: 16px 0 6px; }
.ing { list-style: none; padding: 0; margin: 0; }
.ing li { border-bottom: 1px dashed rgba(6,17,60,.12); }
.ing label { display: flex; gap: 12px; align-items: flex-start; padding: 9px 2px; cursor: pointer; }
.ing input { appearance: none; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 7px; border: 2px solid var(--teal); background: rgba(255,255,255,.7); display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.ing input:checked { background: var(--teal); }
.ing input:checked::after { content: '✓'; color: #fff; font-size: 14px; font-weight: 700; }
.ing input:checked + span { opacity: .5; text-decoration: line-through; }
.ing .amt { font-weight: 600; color: var(--navy); }
.ing .note { color: var(--muted); font-size: .88em; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { counter-increment: s; position: relative; padding: 12px 14px 12px 54px; border-radius: 18px; background: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 #fff; cursor: pointer; transition: opacity .2s, background .2s; }
.steps li::before { content: counter(s); position: absolute; left: 12px; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff; background: var(--sc, var(--orange)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.steps li.done { opacity: .5; }
.steps li.done::before { content: '✓'; background: var(--teal); }
.extra { display: grid; gap: 14px; }
.extra ul { margin: 0; padding-left: 1.1em; }
.src { font-size: .88rem; }
.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); padding: .7rem 1.2rem; border-radius: 999px; z-index: 50; transition: transform .45s var(--ease-spring); font-weight: 600; color: var(--navy); }
.toast.show { transform: translate(-50%, 0); }

/* ---------- footer ---------- */
.foot { width: min(1200px, calc(100% - 20px)); margin: 0 auto 30px; }
.foot-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 22px; }
.foot-card p { flex: 1 1 300px; margin: 0; }
.fine { text-align: center; font-size: .78rem; color: var(--muted); }

@media (min-width: 860px) {
  .r-hero { grid-template-columns: 1.1fr 1fr; }
  .r-photo { aspect-ratio: auto; min-height: 420px; }
  .r-body { grid-template-columns: minmax(280px, .8fr) 1.2fr; align-items: start; }
  .r-body .ing-panel { position: sticky; top: 90px; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .brand img { height: 34px; }
  .topbar { padding-left: 12px; }
  .topnav .chip[data-nav] { display: none; }
  .btn-book { padding: .55em .95em; font-size: .82rem; }
  .hero { border-radius: 26px; }
  .filters { width: 100%; margin-top: 12px; }
  /* many glass cards on phones: drop per-card blur for scroll performance */
  .card { -webkit-backdrop-filter: none; backdrop-filter: none; --glass-tint: rgba(255,252,247,.78); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ==========================================================================
   Readability + finger-friendly sizing (client feedback, Oct 2026)
   Modest step up for older eyes; tap targets >= 48px on touch screens.
   ========================================================================== */
html { font-size: calc(106.25% * var(--ts, 1)); }  /* 17px base (was 16px), scaled by the reader's text size (.9 / 1 / 1.2 / 1.4) */
body { line-height: 1.65; }
:root { --muted: #5a5f6e; }                        /* darker meta text: ~6.3:1 on cream (was #707070 ~4.6:1) */
.topbar { padding: 10px 12px 10px 20px; border-radius: 32px; gap: 14px; }
.brand img { height: 64px; }                       /* was 44px */
.chip { font-size: .95rem; padding: .62em 1.15em; min-height: 46px; }
.btn-book { font-size: 1rem; padding: .78em 1.35em; min-height: 48px; }
.filters { padding: 14px; gap: 12px; }
.chip-row { gap: 12px; padding: 3px; }             /* was 8px */
.chip-row .chip { min-height: 48px; font-size: 1rem; padding: .65em 1.25em; }   /* was .88rem, ~36px tall */
.chip-row.small .chip { min-height: 44px; font-size: .92rem; padding: .55em 1.1em; } /* was .78rem, ~30px tall */
.chip .dot { width: .7em; height: .7em; }
.lede { font-size: clamp(1.05rem, 1.9vw, 1.15rem); }
.search { padding: 6px 8px 6px 20px; min-height: 60px; }
.search svg { width: 24px; height: 24px; }
.search input { font-size: 1.12rem; padding: .55rem 0; min-height: 44px; }  /* was 1rem / 16px */
.q-clear { width: 44px; height: 44px; font-size: 1.5rem; }
#count { font-size: 1.08rem; }
.sort { font-size: 1rem; gap: 8px; }
.sort select { font-size: 1rem; min-height: 48px; padding: .5em 1.1em; }
.grid { gap: 22px; }
.badge { font-size: .82rem; padding: .32em .8em; }
.card h2 { font-size: 1.38rem; }                   /* was 1.16rem */
.meta { font-size: .92rem; gap: 8px 14px; }        /* was .8rem */
.tag { font-size: .8rem; padding: .22em .7em; }
.r-back .chip { min-height: 48px; }
.r-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.r-head .summary { font-size: 1.05rem; }
.stat b { font-size: 1.35rem; }
.stat small { font-size: .8rem; }
.actions { gap: 10px; }
.actions .chip { min-height: 48px; font-size: 1rem; }
.notice { font-size: 1rem; }
.panel h2 { font-size: 1.7rem; }
.panel h3 { font-size: .9rem; }
.ing label { gap: 14px; padding: 12px 4px; min-height: 52px; align-items: center; font-size: 1.06rem; }
.ing input { width: 30px; height: 30px; border-radius: 9px; margin-top: 0; }    /* was 22px */
.ing input:checked::after { font-size: 18px; }
.steps { gap: 12px; }
.steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 14px 18px 14px 14px; font-size: 1.06rem; min-height: 64px; }
/* badge sits in its own fixed column, so it can never overlap the text */
.steps li::before { position: static; width: 38px; height: 38px; font-size: 1.05rem; flex: none; }   /* was 30px */
.src, .fine { font-size: .92rem; }
.foot-card p { font-size: 1.02rem; }
@media (max-width: 640px) {
  html { font-size: calc(106.25% * var(--ts, 1)); }
  .topbar { padding: 8px 10px 8px 14px; border-radius: 28px; }
  .brand img { height: 52px; }                     /* was 34px */
  .btn-book { font-size: .95rem; padding: .7em 1.1em; }
  .filters { padding: 12px 10px; }
  .chip-row .chip { min-height: 50px; }
  .chip-row.small .chip { min-height: 48px; }
  .card h2 { font-size: 1.42rem; }
  .meta { font-size: .95rem; }
  .ing label, .steps li { font-size: 1.08rem; }
}
@media (max-width: 380px) {
  .brand img { height: 44px; }
  .btn-book { font-size: .9rem; padding: .65em .9em; }
}


/* chip rows: room inside the scroller so chip shadows aren't clipped by overflow-x
   (overflow-x:auto forces overflow-y to clip); negative margins keep the layout unchanged */
.chip-row { padding: 6px 8px 18px; margin: -6px -8px -16px; scroll-padding-inline: 8px; touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.chip-row + .chip-row { margin-top: 0; }   /* ~20px visible gap between rows (was ~10px) */
/* sticky glass header: a touch more opaque once content scrolls beneath it */
.topbar { transition: box-shadow .3s, background .3s; }
.topbar.scrolled { --glass-tint: rgba(255, 250, 244, .72); box-shadow: var(--glass-shadow), 0 14px 34px -18px rgba(6,17,60,.45); }


/* 390px swipe affordance: tuned so the next chip visibly peeks past the right edge
   (category row ~40px of "Salads", dietary row ~half of "gluten free"); no arrows/fades */
@media (max-width: 640px) {
  #cat-chips { gap: 12px; }
  #cat-chips .chip { padding-left: .85em; padding-right: .85em; }
  #diet-chips { gap: 14px; }
  #diet-chips .chip { font-size: 1rem; padding-left: 1.3em; padding-right: 1.3em; }
}
/* ---------- recipe-page booking call-to-action ---------- */
.cta { margin: 26px 0 8px; padding: clamp(28px, 5vw, 52px) clamp(20px, 5vw, 56px); text-align: center; display: grid; justify-items: center; gap: 12px;
  --glass-tint: rgba(255, 249, 240, .58);
  --glass-edge: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 30%, rgba(118,200,181,.35) 65%, rgba(226,114,37,.6) 100%); }
.cta::before { content: ''; position: absolute; left: 50%; top: 0; width: min(220px, 50%); height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: var(--rainbow); }
.cta-mark { width: 64px; height: 64px; filter: drop-shadow(0 6px 12px rgba(6,17,60,.2)); }
.cta h2 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); max-width: 18em; }
.cta p { margin: 0 0 8px; max-width: 34em; font-size: 1.08rem; color: #2a3150; }
.cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; min-width: min(100%, 340px); padding: .8em 2.2em; border-radius: 999px;
  font-size: 1.25rem; font-weight: 700; letter-spacing: .01em; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #f39250, var(--orange) 60%, #cf6119); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 16px 34px -14px rgba(226,114,37,.95);
  transition: transform .35s var(--ease-spring), box-shadow .3s; touch-action: manipulation; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 22px 40px -14px rgba(226,114,37,1); }
.cta-btn:active { transform: scale(.97); }
body[data-view="recipe"] .foot-card { display: none; }       /* the CTA replaces the footer pitch on recipe pages */
@media (max-width: 640px) { .cta-btn { width: 100%; min-height: 62px; font-size: 1.22rem; } .cta { margin-top: 22px; } }
.card-sum { margin: 0; font-size: .95rem; line-height: 1.5; color: #3c4257; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-head .summary { font-size: 1.1rem; line-height: 1.65; color: #2a3150; }
.jump-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; align-self: flex-start; min-height: 56px; padding: .7em 1.7em; border-radius: 999px;
  font-size: 1.12rem; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(180deg, #2f89d1, var(--blue) 55%, #1f66a3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 28px -14px rgba(41,123,191,.95); transition: transform .35s var(--ease-spring); touch-action: manipulation; }
.jump-btn:hover { transform: translateY(-1px); }
.jump-btn:active { transform: scale(.97); }
@media (max-width: 640px) { .jump-btn { align-self: stretch; min-height: 58px; font-size: 1.15rem; } }
/* ---------- print: just the recipe, ink-friendly ---------- */
@media print {
  .sky, .topbar, .foot, .r-back, .actions, .skip, .toast, .cta, .jump-btn, #view-list { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { width: 100%; }
  .glass, .stat, .steps li { background: none !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .r-hero { grid-template-columns: 1fr 1.4fr; }
  .r-photo { min-height: 0; aspect-ratio: 4/3; box-shadow: none; max-height: 220px; }
  .r-body { grid-template-columns: 1fr 1.5fr; }
  .r-body .ing-panel { position: static; }
  .ing input { border-color: #000; }
  .steps { gap: 6px; }
  .steps li { grid-template-columns: 26px minmax(0, 1fr); column-gap: 11px; padding: 3px 0; min-height: 0; font-size: 10.5pt; line-height: 1.45; break-inside: avoid; page-break-inside: avoid; }
  .steps li::before { width: 24px; height: 24px; font-size: 9pt; margin-top: 1px; }
  .ing li { break-inside: avoid; page-break-inside: avoid; }
  .ing label { padding: 3px 0; min-height: 0; gap: 10px; font-size: 10.5pt; line-height: 1.35; align-items: flex-start; }
  .ing input { width: 15px; height: 15px; border-radius: 4px; border-width: 1.5px; margin-top: 2px; flex: none; }
  .panel { padding: 8px 0 !important; }
  .panel h2 { font-size: 15pt; margin-bottom: 4px; }
  .panel h3 { margin: 8px 0 2px; }
  .r-body { gap: 22px; margin-top: 8px; }
  .r-head { padding: 0 !important; gap: 6px; }
  .r-head h1 { font-size: 22pt; }
  .r-photo { max-height: 180px; }
  .stats { display: flex; gap: 16px; }
  .stat { padding: 0; text-align: left; }
  .extra, .src { font-size: 9.5pt; }
  .glass.sheen::after { display: none !important; }
  body, html { background: #fff !important; }
  .steps li::before { background: none !important; color: #000; border: 1.5px solid #000; }
  .panel h2::before { background: #000; }
  .print-brand { display: block !important; }
}
.print-brand { display: none; height: 40px; width: auto; max-width: 260px; object-fit: contain; align-self: flex-start; margin-bottom: 10px; }

/* programmatic focus targets (route title, Ingredients heading) should not show a ring */
[tabindex="-1"]:focus { outline: none; }

/* ==========================================================================
   Oct 2026 round 3: status bar, swipe cue, reader settings, favorites,
   recently viewed, opt-in dark theme, portrait print
   ========================================================================== */
/* iPhone status bar / overscroll: brand orange above the glass header */
html { background-color: var(--cream); }
body { background: transparent; min-height: 100vh; }
.status-strip { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--orange); z-index: 30; pointer-events: none; }

/* header chrome keeps fixed pixel sizes so it never breaks at 140% text */
.topbar .chip, .topbar .btn-book { font-size: 16px; }
.icon-btn { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; padding: 0;
  font: 700 20px/1 var(--head); color: var(--navy); border: 1px solid rgba(255,255,255,.95);
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.45)); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(6,17,60,.45);
  transition: transform .35s var(--ease-spring); touch-action: manipulation; }
.icon-btn:active { transform: scale(.92); }
.icon-btn[aria-expanded="true"] { background: var(--navy); color: #fff; border-color: transparent; }
.logo-for-dark { display: none; }
.show-xs { display: none; }
@media (max-width: 640px) { .topbar .btn-book { font-size: 15px; } .topnav { gap: 8px; } .topbar { gap: 8px; } }
@media (max-width: 430px) { .hide-xs { display: none; } .show-xs { display: inline; } .topbar .btn-book { padding: .7em 1.05em; } }

/* static swipe cue: category row only, not tappable */
.swipe-cue { margin: -2px 2px -6px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); pointer-events: none; user-select: none; }

/* favorites */
.fav { position: absolute; top: 16px; right: 16px; z-index: 3; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(6,17,60,.5); transition: transform .35s var(--ease-spring); touch-action: manipulation; }
.fav svg, .fav-btn svg, .saved-chip svg { width: 24px; height: 24px; fill: none; stroke: #D12E26; stroke-width: 2; stroke-linejoin: round; }
.fav[aria-pressed="true"] svg, .fav-btn[aria-pressed="true"] svg { fill: #D12E26; }
.fav:active { transform: scale(.88); }
.badge.warn { top: auto; bottom: 10px; right: auto; left: 10px; }
.fav-btn svg { width: 22px; height: 22px; }
.fav-btn[aria-pressed="true"] { background: rgba(209,46,38,.1); border-color: rgba(209,46,38,.35); }
.saved-chip svg { width: 20px; height: 20px; fill: currentColor; stroke: none; color: #D12E26; }
.saved-chip[aria-pressed="true"] svg { color: #fff; }
.actions .aa { font: 700 1.1em/1 var(--head); }

/* recently viewed */
.recent { margin: 22px 0 0; }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 6px 8px; }
.recent-head h2 { font-size: 1.3rem; }
.recent-clear { font-size: .95rem; font-weight: 600; padding: 10px 6px; min-height: 44px; }
.recent-row { list-style: none; margin: -6px -10px -14px; padding: 6px 10px 14px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; touch-action: pan-x; overscroll-behavior-x: contain; }
.recent-row::-webkit-scrollbar { display: none; }
.recent-row li { flex: none; scroll-snap-align: start; }
.mini { display: flex; align-items: center; gap: 10px; width: 236px; min-height: 76px; padding: 6px 12px 6px 6px; border-radius: 20px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.mini img, .mini-noimg { width: 64px; height: 64px; flex: none; border-radius: 14px; object-fit: cover; }
.mini-noimg { display: grid; place-items: center; background: linear-gradient(135deg, var(--c), var(--teal)); }
.mini-noimg img { width: 40px; height: 40px; }
.mini > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .mini { -webkit-backdrop-filter: none; backdrop-filter: none; --glass-tint: rgba(255,252,247,.8); } }

/* diet tags that need her listed swaps */
.tag.opt { background: rgba(243,154,18,.16); color: #8a4b06; }

/* reader settings popover (pixel sizes so it holds still while text size changes) */
.prefs { position: fixed; z-index: 45; width: min(340px, calc(100vw - 20px)); padding: 16px; border-radius: 26px; font-size: 16px; --glass-tint: rgba(255,250,244,.86); }
.prefs h2 { font: 700 13px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 2px 4px 10px; }
.prefs h2 + div { margin-bottom: 16px; }
.ts-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ts-opts button, .theme-opts button, .prefs-done { cursor: pointer; border-radius: 18px; border: 1px solid rgba(6,17,60,.12); background: rgba(255,255,255,.66); color: var(--navy);
  box-shadow: inset 0 1px 0 #fff; touch-action: manipulation; transition: transform .3s var(--ease-spring); }
.ts-opts button { min-height: 72px; display: grid; place-items: center; gap: 2px; padding: 8px 4px; }
.ts-opts b { font-family: var(--head); line-height: 1; }
.ts-opts small { font-size: 14px; font-weight: 600; }
.theme-opts button { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; }
.theme-opts svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ts-opts [aria-pressed="true"], .theme-opts [aria-pressed="true"] { background: var(--navy); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(6,17,60,.8); }
.prefs-done { width: 100%; min-height: 50px; font-size: 16px; font-weight: 700; background: linear-gradient(180deg, #f08a43, var(--orange)); color: #fff; border-color: transparent; }
.prefs button:active { transform: scale(.96); }

/* long words at 140% text never push the layout sideways */
h1, h2, .card h2 a, .mini span { overflow-wrap: anywhere; }
html[data-ts="140"] .stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
html[data-ts="140"] .list-head { flex-wrap: wrap; }

/* ---------- dark theme: opt-in only (never follows the OS), screen only so print stays light ---------- */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --cream: #06113C; --text: #E8EBF4; --muted: #B3BBD0;
    --glass-tint: rgba(16, 30, 82, .52); --glass-hi: rgba(255,255,255,.10); --glass-lo: rgba(255,255,255,.02);
    --glass-edge: linear-gradient(140deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 32%, rgba(255,255,255,.04) 62%, rgba(226,114,37,.38));
    --glass-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 .5px rgba(255,255,255,.07), 0 24px 60px -26px rgba(0,0,0,.75), 0 2px 8px -2px rgba(0,0,0,.4);
  }
  html[data-theme="dark"] [style*="--cd"] { --c: var(--cd) !important; }
  html[data-theme="dark"] [style*="--scd"] { --sc: var(--scd) !important; }
  html[data-theme="dark"] body { color: var(--text); }
  html[data-theme="dark"] .sky { background:
    radial-gradient(1200px 700px at 10% -10%, rgba(226,114,37,.20) 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 20%, rgba(83,188,233,.16) 0%, transparent 60%),
    radial-gradient(1000px 800px at 40% 120%, rgba(118,200,181,.14) 0%, transparent 60%), #06113C; }
  html[data-theme="dark"] .orb { opacity: .16 !important; }
  html[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .035; }
  html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: #F6F1E9; }
  html[data-theme="dark"] .src a, html[data-theme="dark"] .notice a, html[data-theme="dark"] .empty a, html[data-theme="dark"] noscript a { color: #8CC4F2; }
  html[data-theme="dark"] .card h2 a { color: inherit; }
  html[data-theme="dark"] .btn-book, html[data-theme="dark"] .cta-btn, html[data-theme="dark"] .jump-btn { color: #fff; }
  html[data-theme="dark"] :focus-visible { outline-color: #8CC4F2; }
  html[data-theme="dark"] .logo-for-light { display: none; }
  html[data-theme="dark"] .logo-for-dark { display: block; }
  html[data-theme="dark"] .topbar.scrolled { --glass-tint: rgba(10, 22, 66, .82); }
  html[data-theme="dark"] .chip, html[data-theme="dark"] .icon-btn { color: #EEF1F8; border-color: rgba(255,255,255,.16);
    background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.8); }
  html[data-theme="dark"] .chip:hover { background: rgba(255,255,255,.16); }
  html[data-theme="dark"] .chip.ghost { background: transparent; border-color: transparent; box-shadow: none; }
  html[data-theme="dark"] .chip .dot { box-shadow: 0 0 0 2px rgba(6,17,60,.85); }
  html[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--c); color: #06113C; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -12px var(--c); }
  html[data-theme="dark"] .chip[aria-pressed="true"] .dot { background: #06113C; box-shadow: none; }
  html[data-theme="dark"] .saved-chip[aria-pressed="true"] svg { color: #06113C; }
  html[data-theme="dark"] .icon-btn[aria-expanded="true"] { background: #F4EFE6; color: #06113C; }
  html[data-theme="dark"] .hero::before { background: linear-gradient(180deg, rgba(6,17,60,.15) 20%, rgba(6,17,60,.6)); }
  html[data-theme="dark"] .hero-card { --glass-tint: rgba(8, 20, 62, .62); }
  html[data-theme="dark"] .eyebrow { color: #8AD8C6; filter: none; text-shadow: none; }
  html[data-theme="dark"] .rainbow { filter: saturate(1.05) brightness(1.15); }
  html[data-theme="dark"] .lede, html[data-theme="dark"] .r-head .summary, html[data-theme="dark"] .cta p, html[data-theme="dark"] .card-sum { color: #D5DAE8; }
  html[data-theme="dark"] .glass-inset { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: inset 0 2px 6px rgba(0,0,0,.3); }
  html[data-theme="dark"] .search svg { stroke: #E8EBF4; }
  html[data-theme="dark"] .search input { color: #F6F1E9; }
  html[data-theme="dark"] .search input::placeholder { color: #9EA7C0; }
  html[data-theme="dark"] .q-clear { background: rgba(255,255,255,.12); }
  html[data-theme="dark"] #count, html[data-theme="dark"] .mini, html[data-theme="dark"] .toast { color: #F6F1E9; }
  html[data-theme="dark"] .sort select { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #F6F1E9; }
  html[data-theme="dark"] .sort option { background: #0d1b4f; }
  html[data-theme="dark"] .card, html[data-theme="dark"] .mini { --glass-tint: rgba(16, 30, 82, .78); }
  html[data-theme="dark"] .badge { background: rgba(6,17,60,.72); color: #F6F1E9; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
  html[data-theme="dark"] .badge.warn { background: #F7B851; color: #06113C; }
  html[data-theme="dark"] .fav { background: rgba(6,17,60,.66); border-color: rgba(255,255,255,.2); }
  html[data-theme="dark"] .fav svg, html[data-theme="dark"] .fav-btn svg { stroke: #F47D77; }
  html[data-theme="dark"] .fav[aria-pressed="true"] svg, html[data-theme="dark"] .fav-btn[aria-pressed="true"] svg { fill: #F47D77; }
  html[data-theme="dark"] .saved-chip svg { color: #F47D77; }
  html[data-theme="dark"] .tag { background: rgba(118,200,181,.16); color: #A6E6D6; }
  html[data-theme="dark"] .tag.opt { background: rgba(247,184,81,.14); color: #F7C978; }
  html[data-theme="dark"] .r-head .crumb { filter: none; }
  html[data-theme="dark"] .stat { background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  html[data-theme="dark"] .stat b, html[data-theme="dark"] .ing .amt { color: #F6F1E9; }
  html[data-theme="dark"] .notice { background: rgba(251,239,60,.08); border-color: rgba(247,184,81,.45); }
  html[data-theme="dark"] .panel h3 { color: #F5A06A; }
  html[data-theme="dark"] .ing li { border-bottom-color: rgba(255,255,255,.12); }
  html[data-theme="dark"] .ing input { background: rgba(255,255,255,.06); border-color: #8AD8C6; }
  html[data-theme="dark"] .ing input:checked { background: #8AD8C6; }
  html[data-theme="dark"] .ing input:checked::after { color: #06113C; }
  html[data-theme="dark"] .steps li { background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  html[data-theme="dark"] .steps li::before { color: #06113C; box-shadow: none; }
  html[data-theme="dark"] .steps li.done::before { background: #8AD8C6; }
  html[data-theme="dark"] .cta { --glass-tint: rgba(16, 30, 82, .6); }
  html[data-theme="dark"] .link { color: #8CC4F2; }
  html[data-theme="dark"] .prefs { --glass-tint: rgba(10, 22, 66, .9); }
  html[data-theme="dark"] .prefs h2 { color: #B3BBD0; }
  html[data-theme="dark"] .ts-opts button, html[data-theme="dark"] .theme-opts button { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #F6F1E9; box-shadow: none; }
  html[data-theme="dark"] .ts-opts [aria-pressed="true"], html[data-theme="dark"] .theme-opts [aria-pressed="true"] { background: #F4EFE6; color: #06113C; }
  html[data-theme="dark"] .prefs-done { background: linear-gradient(180deg, #f08a43, var(--orange)); color: #fff; }
  html[data-theme="dark"] .awards img { filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
  @media (max-width: 640px) { html[data-theme="dark"] .card { --glass-tint: rgba(16, 30, 82, .86); } }
}

/* ---------- print v3: portrait letter, real page margins, no bleed ---------- */
@page { size: letter portrait; margin: 0.6in 0.6in 0.7in; }
@media print {
  html, body { background: #fff !important; }
  .status-strip, .prefs, .fav, .recent, .swipe-cue { display: none !important; }
  main { width: auto !important; max-width: none; margin: 0 !important; padding: 0; }
  #view-recipe { margin: 0; }
  .r-hero { display: grid; grid-template-columns: 2.5in minmax(0, 1fr); gap: .3in; align-items: start; }
  .r-photo { width: 100%; aspect-ratio: 4 / 3; min-height: 0; max-height: none; border-radius: 12px; margin: 0; overflow: hidden; }
  .r-photo img { width: 100%; height: 100%; object-fit: cover; transform: none; }
  .r-head { padding: 0 !important; gap: 6px; }
  .r-head h1 { font-size: 22pt; }
  .r-head .summary { font-size: 10.5pt; line-height: 1.45; color: #222; }
  .print-brand { height: 30px; margin-bottom: 2px; }
  .tag { background: none !important; border: 1px solid #999; color: #222 !important; font-size: 8.5pt; }
  .r-body { display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: .3in; margin-top: .22in; align-items: start; }
  .r-body .ing-panel { position: static; }
  .panel { padding: 0 !important; margin: 0; }
  .ing { padding: 0 2px; margin: 0; }
  .ing li { border-bottom: 1px dashed #bbb; }
  .ing label { padding: 4px 0; }
  .steps li { margin: 0; }
  .src { margin-top: 10px; color: #333; }
  .src a { color: #000; text-decoration: none; font-weight: 600; }
  a[href]::after { content: none !important; }
  .chip-row, .recent-row { margin: 0 !important; }
}
.recent-row { margin: -6px 0 -14px; padding: 6px 0 14px; scroll-padding-inline: 0; }
.toast { white-space: nowrap; }
/* body paints the page background (cream, or navy in dark); the orange html canvas only shows in rubber-band overscroll.
   body is its own stacking context so the fixed sky still sits above this background */
body { position: relative; z-index: 0; background: var(--cream); }
@media print { body { position: static; } }
body { display: flow-root; }   /* stop the footer margin collapsing through body onto the orange canvas */

/* ==========================================================================
   Round 4 (Oct 21): condensed hero, food marquee, auto sheen on touch,
   dark-mode hero that lets the photo show through
   ========================================================================== */
/* hero: marquee pinned to the top, condensed glass card at the bottom */
.hero { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 16px; min-height: clamp(440px, 64vh, 620px); }
.hero-card { max-width: 600px; align-self: flex-start; width: 100%; }
.food-strip { min-width: 0; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: .35rem; }
.hero-top .eyebrow { margin: 0; }
.hero-top .awards { margin: 0; flex: none; gap: 8px; }
.hero-top .awards img { width: 52px; height: 52px; }
.hero h1 { line-height: 1.08; }
.lede { margin: .55rem 0 1rem; max-width: 30em; }

.food-strip { margin: 0 calc(-1 * clamp(14px, 3vw, 34px)) auto; overflow: hidden; padding: 6px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.strip-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; will-change: transform; }   /* moved by JS (stripMotion) */
.strip-track li { flex: none; margin-right: 12px; }
.strip-track a { display: block; width: 96px; height: 96px; border-radius: 22px; overflow: hidden; border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 24px -12px rgba(6,17,60,.7), 0 0 0 1px rgba(6,17,60,.06); transition: transform .35s var(--ease-spring); }
.strip-track img { width: 100%; height: 100%; object-fit: cover; }
.strip-track a:hover, .strip-track a:focus-visible { transform: translateY(-3px) scale(1.04); }
.strip-track a:focus-visible { outline-offset: 2px; }
.food-strip { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* page still scrolls vertically; horizontal drags are ours */
.strip-track a, .strip-track img { -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) { .food-strip { cursor: grab; } .food-strip.dragging { cursor: grabbing; } }
.food-strip.dragging .strip-track a { transform: none; }
@media (max-width: 640px) { .strip-track a { width: 84px; height: 84px; border-radius: 20px; } .strip-track li { margin-right: 10px; } }
/* reduced motion: stripMotion() skips the auto drift; drag and flick still work */


/* sheen: mouse-reactive glare on desktop (html.glare-follow); slow automatic drift on touch screens */
@media (hover: none), (pointer: coarse) {
  .glass.sheen::after { animation: sheen-drift 14s ease-in-out infinite alternate; }
}
@keyframes sheen-drift {   /* same glare shape as the mouse version; travels its full range (--lx/--ly 0 to 1), corner to corner */
  from { transform: translate3d(-27.5%, -27.5%, 0); }
  to   { transform: translate3d(27.5%, 27.5%, 0); }
}



/* dark-mode hero: clear thin glass, scrim only behind the words, text shadows for AA */
@media screen {
  html[data-theme="dark"] .hero::before { background: linear-gradient(180deg, rgba(6,17,60,0) 45%, rgba(6,17,60,.35) 100%); }
  html[data-theme="dark"] .hero-img { filter: brightness(.92) saturate(1.08); }
  html[data-theme="dark"] .hero-card {
    --glass-tint: rgba(6, 17, 60, .16); --glass-hi: rgba(255,255,255,.07); --glass-lo: rgba(255,255,255,0);
    -webkit-backdrop-filter: blur(5px) saturate(130%); backdrop-filter: blur(5px) saturate(130%);
    background: linear-gradient(180deg, rgba(6,17,60,.52), rgba(6,17,60,.58)) padding-box, linear-gradient(160deg, var(--glass-hi), var(--glass-lo)) padding-box,
      linear-gradient(var(--glass-tint), var(--glass-tint)) padding-box, var(--glass-edge) border-box; }
  html[data-theme="dark"] .hero-card .eyebrow,
  html[data-theme="dark"] .hero h1,
  html[data-theme="dark"] .hero .lede { text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 10px rgba(6,17,60,.9), 0 0 22px rgba(6,17,60,.75); }
  html[data-theme="dark"] .hero .lede { color: #F2F4FA; }
  html[data-theme="dark"] .hero-card .eyebrow { color: #E6F9F4; }
  html[data-theme="dark"] .hero .rainbow { text-shadow: none; filter: saturate(1.1) brightness(1.25) drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
  html[data-theme="dark"] .hero .glass-inset { background: rgba(6,17,60,.62); border-color: rgba(255,255,255,.26); }
  html[data-theme="dark"] .hero-card.sheen::after { opacity: .35; }
  html[data-theme="dark"] .strip-track a { border-color: rgba(255,255,255,.35); }
}
@media print { .food-strip { display: none !important; } }

/* light hero eyebrow: deeper teal so it reads on the glass (was brightened #76C8B5 at ~2:1) */
.hero-card .eyebrow { color: #17705d; filter: none; }

/* recipe header (.r-head, holds Jump to Recipe) on touch screens:
   ::after = the auto sheen, drifting forever (never pauses, non-interactive);
   ::before = the same glare following the finger, fading in only while a finger is on the card */
@media (hover: none), (pointer: coarse) {
  .r-head.sheen::before { content: ''; position: absolute; inset: -60%; pointer-events: none; z-index: -1;
    background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, transparent 70%),
                linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 49%, rgba(251,239,60,.12) 51%, transparent 58%);
    transform: translate3d(calc((var(--tx, .5) - .5) * 55%), calc((var(--ty, .5) - .5) * 55%), 0);
    opacity: 0; transition: opacity .35s ease; will-change: transform, opacity; }
  .r-head.sheen.touching::before { opacity: .7; }
  html[data-theme="dark"] .r-head.sheen.touching::before { opacity: .35; }
}
@media print { .r-head.sheen::before { display: none !important; } }

/* recipe header readability: slightly firmer glass behind the words + a soft text shadow (light halo on light, dark drop on dark) */
.r-head { --glass-tint: rgba(255, 252, 247, .62); }
.r-head h1, .r-head .summary, .r-head .crumb, .r-head .stat b, .r-head .stat small { text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 1px 6px rgba(255,255,255,.55); }
@media screen {
  html[data-theme="dark"] .r-head { --glass-tint: rgba(12, 24, 72, .66); }
  html[data-theme="dark"] .r-head h1, html[data-theme="dark"] .r-head .summary, html[data-theme="dark"] .r-head .crumb,
  html[data-theme="dark"] .r-head .stat b, html[data-theme="dark"] .r-head .stat small { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 10px rgba(6,17,60,.55); }
}
@media print { .r-head h1, .r-head .summary, .r-head .crumb, .r-head .stat b, .r-head .stat small { text-shadow: none !important; } }

/* award badge: ~2x bigger, breaking out over the card's top-right corner (outside the card so overflow can't clip it) */
.hero-card-wrap { position: relative; align-self: flex-start; width: 100%; max-width: 600px; }
.hero-card-wrap .hero-card { max-width: none; }
.hero-badge { position: absolute; z-index: 3; top: -66px; right: -6px; width: 106px; height: 106px; pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(6,17,60,.38)) drop-shadow(0 2px 4px rgba(6,17,60,.25)); }
.hero-card-wrap .hero-card { padding-top: 46px; }          /* eyebrow starts below the badge's lower edge */
.hero-top { padding-right: 0; }
@media (min-width: 641px) {
  .hero-badge { width: 124px; height: 124px; top: -70px; right: -14px; }
  .hero-card-wrap .hero-card { padding-top: clamp(18px, 3vw, 30px); }
  .hero-top { padding-right: 100px; }                     /* wide card: eyebrow fits beside the badge */
}
@media screen { html[data-theme="dark"] .hero-badge { filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.35)); } }
@media print { .hero-badge { display: none; } }
/* guaranteed clear space between the food strip and the badge's top edge */
.hero-card-wrap { margin-top: 80px; }
@media (min-width: 641px) { .hero-card-wrap { margin-top: 88px; } }

/* light mode only: crisp 1px edge under the rainbow word (filter drop-shadow follows the clipped gradient glyphs, which
   text-shadow does not do reliably with background-clip:text on iOS Safari); no blur radius */
html:not([data-theme="dark"]) .hero .rainbow { text-shadow: none; filter: saturate(1.1) brightness(.92) drop-shadow(1px 1px 0 rgba(6, 17, 60, .75)); }

/* ---------- live search suggestions (lives on <body>, positioned under the search field) ---------- */
.q-suggest { position: absolute; z-index: 19; padding: 6px; border-radius: 24px; overflow: auto; overscroll-behavior: contain;
  --glass-tint: rgba(255, 251, 246, .9); box-shadow: var(--glass-shadow), 0 26px 50px -20px rgba(6,17,60,.55); }
.q-suggest ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.qs-item, .qs-all, .qs-none { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px 8px 8px; border-radius: 18px; cursor: pointer; color: var(--navy); }
.qs-item img { width: 48px; height: 48px; flex: none; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px rgba(6,17,60,.08), 0 4px 10px -6px rgba(6,17,60,.5); }
.qs-text { display: grid; gap: 1px; min-width: 0; }
.qs-title { font-weight: 600; font-size: 1.02rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qs-title mark { background: rgba(243,154,18,.28); color: inherit; border-radius: 4px; padding: 0 1px; }
.qs-cat { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4em; }
.qs-cat .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--c); }
.qs-item[aria-selected="true"], .qs-all[aria-selected="true"], .qs-item:hover, .qs-all:hover { background: rgba(41,123,191,.12); }
.qs-all { justify-content: center; min-height: 54px; font-weight: 700; color: var(--blue); border-top: 1px solid rgba(6,17,60,.08); border-radius: 0 0 18px 18px; margin-top: 2px; }
.qs-none { cursor: default; color: var(--muted); justify-content: center; }
@media screen {
  html[data-theme="dark"] .q-suggest { --glass-tint: rgba(10, 22, 66, .94); box-shadow: var(--glass-shadow), 0 26px 50px -20px rgba(0,0,0,.8); }
  html[data-theme="dark"] .qs-item, html[data-theme="dark"] .qs-none { color: #F6F1E9; }
  html[data-theme="dark"] .qs-title mark { background: rgba(247,184,81,.3); }
  html[data-theme="dark"] .qs-item[aria-selected="true"], html[data-theme="dark"] .qs-all[aria-selected="true"], html[data-theme="dark"] .qs-item:hover, html[data-theme="dark"] .qs-all:hover { background: rgba(255,255,255,.09); }
  html[data-theme="dark"] .qs-all { color: #8CC4F2; border-top-color: rgba(255,255,255,.1); }
}
@media print { .q-suggest { display: none !important; } }

/* ---------- status bar / safe area (Safari 26 and Home Screen web apps) ----------
   Colour is the page base (cream, navy in dark), painted SOLID so scrolled content never shows or blurs through.
   iOS 26 ignores theme-color. It tints (and soft-blurs) the status-bar area from the background-color of a
   position:fixed or sticky element at the top edge (within ~4px, >=1px tall, >=80% wide), falling back to the html/body
   background. So: the ONLY fixed element touching the top with a background-color is this plain solid orange strip,
   html and body are orange too (the fallback, and the colour iOS caches for its own status band), the fixed .sky paints
   its cream with a gradient layer (images are not sampled) and the sticky glass header keeps its blur on a pseudo-element.
   --sat can be overridden for tests. */
:root { --sat: env(safe-area-inset-top, 0px); }
.status-strip { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: max(var(--sat), 1px); z-index: 1000;
  background-color: var(--cream); pointer-events: none; }
.topbar { top: calc(var(--sat) + 10px); }
.q-suggest { z-index: 19; }
@media (display-mode: standalone) {
  :root { --sat: max(env(safe-area-inset-top, 0px), 2px); }
  html { overscroll-behavior-y: none; }   /* no rubber-band reveal above the strip */
  /* park the header 18px below the inset so its contents sit clear of the iOS 26 top-edge blur zone (fix confirmed on device in the Picker's Rock app) */
  .topbar { top: calc(var(--sat) + 18px); margin-top: 18px; }
  .topbar .brand { transform: translateZ(0); }   /* logo on its own compositing layer: renders crisp under iOS edge effects */
  /* the logo sits ABOVE the header's ::before blur (that only blurs what's behind the bar), so softness there comes from
     content showing through: make the bar nearly opaque with a lighter blur so the logo reads crisp */
  .topbar.glass, .topbar.glass.scrolled { --glass-tint: rgba(255, 250, 244, .94); --glass-hi: rgba(255,255,255,.55); --glass-lo: rgba(255,255,255,.3); }
  .topbar.glass::before { -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }
  html[data-theme="dark"] .topbar.glass, html[data-theme="dark"] .topbar.glass.scrolled { --glass-tint: rgba(10, 22, 66, .94); --glass-hi: rgba(255,255,255,.08); --glass-lo: rgba(255,255,255,.03); }
}
@media print { .status-strip { display: none !important; } }
body { padding-top: var(--sat); }   /* at the very top the header already sits below the inset, same spot it sticks to */
@media print { body { padding-top: 0; } }

/* status-bar sampling (see above): the fixed sky paints with gradient layers only, so the plain strip/root colour is what iOS reads */
html, body { background-color: var(--cream); }   /* light #FFF7F1, dark #06113C */
.sky { background-color: transparent; background-image:
  radial-gradient(1200px 700px at 10% -10%, #ffe6cf 0%, transparent 60%),
  radial-gradient(900px 700px at 110% 20%, #d6f1f9 0%, transparent 60%),
  radial-gradient(1000px 800px at 40% 120%, #dff4ee 0%, transparent 60%), linear-gradient(var(--cream), var(--cream)); }
@media screen { html[data-theme="dark"] .sky { background-color: transparent; background-image:
  radial-gradient(1200px 700px at 10% -10%, rgba(226,114,37,.20) 0%, transparent 60%),
  radial-gradient(900px 700px at 110% 20%, rgba(83,188,233,.16) 0%, transparent 60%),
  radial-gradient(1000px 800px at 40% 120%, rgba(118,200,181,.14) 0%, transparent 60%), linear-gradient(#06113C, #06113C); } }
/* sticky header: the frosted blur moves to a pseudo-element, which the tint sampler ignores */
.topbar.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar.glass::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@media print { html, body { background-color: #fff !important; } }

/* ---------- "Add to Home Screen" banner (js/a2hs.js) ----------
   Liquid glass sheet floating just above the bottom safe area. Painted with gradient layers (no background-color), so
   Safari 26's toolbar tint sampler ignores it. Slides up gently; reduced motion just fades. */
.a2hs { position: fixed; z-index: 40; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: min(460px, calc(100vw - 20px)); display: grid; grid-template-columns: auto 1fr 44px; align-items: center; column-gap: 12px; row-gap: 10px;
  padding: 12px 10px 12px 12px;
  border-radius: 24px; font-size: 16px; line-height: 1.35; color: var(--navy); --glass-tint: rgba(255,250,244,.86);
  box-shadow: var(--glass-shadow), 0 22px 44px -20px rgba(6,17,60,.55);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; visibility: hidden;
  transition: transform .55s var(--ease-out), opacity .4s ease, visibility 0s linear .55s; }
.a2hs.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .6s var(--ease-out), opacity .4s ease, visibility 0s; }
.a2hs.show.away { transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; }
.a2hs-icon { grid-column: 1; grid-row: 1; align-self: start; width: 52px; height: 52px; border-radius: 13px; box-shadow: 0 6px 14px -6px rgba(6,17,60,.5), 0 0 0 .5px rgba(6,17,60,.12); }
.a2hs-text { grid-column: 2; grid-row: 1; min-width: 0; }
.a2hs-title { margin: 0; font-family: var(--head); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--navy); }
.a2hs-body { margin: 3px 0 0; font-size: 14.5px; color: var(--text); }
.a2hs-body b { color: var(--navy); font-weight: 600; }
.a2hs-key { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 5px; margin: 0 1px;
  border-radius: 7px; vertical-align: -5px; font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--blue);
  background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(6,17,60,.12); }
.a2hs-key-plain { background: none; box-shadow: none; min-width: 0; padding: 0; color: var(--navy); }
.a2hs-share { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a2hs-install { grid-column: 2 / 4; grid-row: 2; justify-self: start; min-width: 132px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation;
  font: 700 15px/1 var(--body); color: #fff; background: linear-gradient(180deg, #f08a43, var(--orange));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px -10px rgba(226,114,37,.95); transition: transform .3s var(--ease-spring); }
.a2hs-copy { background: linear-gradient(180deg, #2f89d1, var(--blue) 55%, #1f66a3); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px -10px rgba(41,123,191,.95); padding: 0 14px; }
.a2hs-close { grid-column: 3; grid-row: 1; align-self: start; width: 44px; height: 44px; margin: -6px -4px -6px -6px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; touch-action: manipulation; }
.a2hs-close:hover { background: rgba(6,17,60,.06); color: var(--navy); }
.a2hs-install:active, .a2hs-close:active { transform: scale(.94); }
.a2hs-wide { grid-column: 1 / 4; grid-row: 2; margin: 0 2px; padding-top: 10px; border-top: 1px solid rgba(6,17,60,.08); line-height: 1.6; }
.a2hs-ios { row-gap: 8px; }
@media screen { html[data-theme="dark"] .a2hs-wide { border-top-color: rgba(255,255,255,.1); }
  html[data-theme="dark"] .a2hs-key.a2hs-key-plain { background: none; box-shadow: none; color: #F6F1E9; } }
@media (max-width: 360px) { .a2hs { column-gap: 10px; } .a2hs-icon { width: 44px; height: 44px; border-radius: 11px; } .a2hs-title { font-size: 16px; } }
/* keep the footer and toasts clear of it while it's up */
html.a2hs-on .foot { padding-bottom: calc(var(--a2hs-h, 80px) + 24px); }
html.a2hs-on .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--a2hs-h, 80px) + 24px); }
@media screen {
  html[data-theme="dark"] .a2hs { color: #F6F1E9; --glass-tint: rgba(10, 22, 66, .9); box-shadow: var(--glass-shadow), 0 22px 44px -18px rgba(0,0,0,.85); }
  html[data-theme="dark"] .a2hs-title, html[data-theme="dark"] .a2hs-body b, html[data-theme="dark"] .a2hs-key-plain { color: #F6F1E9; }
  html[data-theme="dark"] .a2hs-body { color: #DDE2EE; }
  html[data-theme="dark"] .a2hs-key { color: #8CC4F2; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
  html[data-theme="dark"] .a2hs-close { color: #B3BBD0; }
  html[data-theme="dark"] .a2hs-close:hover { background: rgba(255,255,255,.1); color: #fff; }
  html[data-theme="dark"] .a2hs-icon { box-shadow: 0 6px 14px -6px rgba(0,0,0,.8), 0 0 0 .5px rgba(255,255,255,.18); }
}
@media (prefers-reduced-motion: reduce) { .a2hs, .a2hs.show, .a2hs.show.away { transform: translate(-50%, 0) !important; } }
@media print { .a2hs { display: none !important; } html.a2hs-on .foot { padding-bottom: 0; } }

/* ---------- home-page booking card (footer): same family as the recipe-page .cta ----------
   Phones: centered stack (big mark, serif heading, copy, wide button). Wider: mark | copy | button, all vertically centered. */
.foot-card { position: relative; display: grid; justify-items: center; text-align: center; gap: 12px; padding: 34px 22px 26px;
  --glass-tint: rgba(255, 249, 240, .58);
  --glass-edge: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 30%, rgba(118,200,181,.35) 65%, rgba(226,114,37,.6) 100%); }
.foot-card::before { content: ''; position: absolute; left: 50%; top: 0; width: min(200px, 50%); height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: var(--rainbow); }
.foot-mark { width: 84px; height: 84px; filter: drop-shadow(0 8px 14px rgba(6,17,60,.22)); }
.foot-copy { display: grid; gap: 8px; max-width: 34em; }
.foot-title { font-size: clamp(1.45rem, 4.6vw, 1.9rem); line-height: 1.15; }
.foot-card p { flex: none; margin: 0; font-size: 1.04rem; line-height: 1.6; color: #2a3150; }
.foot-btn { margin-top: 6px; width: min(100%, 300px); min-width: 0; min-height: 58px; font-size: 1.15rem; padding: .7em 1.6em; }
@media (min-width: 760px) {
  .foot-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; text-align: left; gap: 26px; padding: 30px 34px; }
  .foot-card::before { left: 34px; transform: none; }
  .foot-mark { width: 96px; height: 96px; }
  .foot-btn { margin: 0; width: auto; min-width: 240px; justify-self: end; }
}
@media screen {
  html[data-theme="dark"] .foot-card { --glass-tint: rgba(16, 30, 82, .6); }
  html[data-theme="dark"] .foot-card p { color: #D5DAE8; }
  html[data-theme="dark"] .foot-card strong { color: #F6F1E9; }
}
/* recipe-page CTA: same mark size so the two cards read as one component */
.cta-mark { width: 84px; height: 84px; }