/* ===========================================================================
   OnDuhGo — onduhgo.com
   Typography: Baloo 2 only (brand instructions §2). Kannada: Baloo Tamma 2.
   Colour: the six approved values in §3. No other hues anywhere in this file.
     Espresso #4A2A18 · Cream #F7E7C6 · Coral #E38361
     Tan #C89B6C · Ink #2B2118 · Paper #FFFBF2
   The proposed Sage green is NOT approved and is deliberately absent; veg and
   non-veg marks are drawn in Tan and Espresso instead. Confirm before adding it.
   =========================================================================== */

:root {
  /* brand constants */
  --espresso: #4A2A18;
  --cream:    #F7E7C6;
  --coral:    #E38361;
  --tan:      #C89B6C;
  --ink:      #2B2118;
  --paper:    #FFFBF2;

  /* light ("counter") theme — the default */
  --bg:        var(--cream);
  --surface:   var(--paper);
  --band:      var(--espresso);
  --on-band:   var(--cream);
  --text:      var(--ink);
  --text-dim:  rgba(43, 33, 24, 0.66);
  --head:      var(--espresso);
  --rule:      rgba(200, 155, 108, 0.55);
  /* 0.6 alpha, not less: form controls and buttons need 3:1 against the ground */
  --rule-firm: rgba(74, 42, 24, 0.60);
  --accent:    var(--coral);
  --on-accent: var(--ink);
  --shadow:    0 1px 0 rgba(74, 42, 24, 0.10), 0 10px 26px -18px rgba(74, 42, 24, 0.55);
  --gauge-track: rgba(74, 42, 24, 0.12);

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.40vw, 1.38rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.90rem);
  --step-3:  clamp(1.90rem, 1.55rem + 1.75vw, 2.90rem);
  --step-4:  clamp(2.40rem, 1.70rem + 3.40vw, 4.30rem);

  --wrap: 1140px;
  --gut: 20px;
  --radius: 14px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        var(--ink);
    --surface:   var(--espresso);
    --band:      var(--espresso);
    --on-band:   var(--cream);
    --text:      var(--cream);
    --text-dim:  rgba(247, 231, 198, 0.68);
    --head:      var(--paper);
    --rule:      rgba(200, 155, 108, 0.32);
    --rule-firm: rgba(200, 155, 108, 0.70);
    --shadow:    0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 30px -18px rgba(0, 0, 0, 0.9);
    --gauge-track: rgba(247, 231, 198, 0.16);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        var(--ink);
  --surface:   var(--espresso);
  --band:      var(--espresso);
  --on-band:   var(--cream);
  --text:      var(--cream);
  --text-dim:  rgba(247, 231, 198, 0.68);
  --head:      var(--paper);
  --rule:      rgba(200, 155, 108, 0.32);
  --rule-firm: rgba(200, 155, 108, 0.70);
  --shadow:    0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 30px -18px rgba(0, 0, 0, 0.9);
  --gauge-track: rgba(247, 231, 198, 0.16);
  color-scheme: dark;
}

/* --------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters: with width/height attributes present, max-width alone
   shrinks the width and leaves the attribute height, which squashes the
   picture. Rules that set their own height (.film__poster, .tile img,
   .brand img) are class selectors and still win. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 700; }

p { margin: 0; }

a { color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--coral); color: var(--ink); }

/* No true italic exists in Baloo 2 — never synthesise one. */
i, em, cite { font-style: normal; font-weight: 600; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

.tagline {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 62ch;
}

.kn { font-family: "Baloo Tamma 2", "Baloo 2", sans-serif; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--coral); color: var(--ink);
  padding: 10px 16px; border-radius: 8px; font-weight: 700;
  transition: top .15s;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------- chrome */

.masthead {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--band);
  color: var(--on-band);
  border-bottom: 2px solid rgba(200, 155, 108, 0.35);
}

.masthead__in {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding-block: 8px;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--on-band);
  margin-inline-end: auto;
}
.brand img { width: 40px; height: 40px; }
.brand__name { font-weight: 800; font-size: 1.16rem; letter-spacing: -0.01em; line-height: 1; }
.brand__tag {
  display: block; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.22em; opacity: 0.75; margin-top: 2px;
  white-space: nowrap;
}
@media (max-width: 430px) { .brand__tag { display: none; } }

.nav { display: none; gap: 4px; }
@media (min-width: 900px) { .nav { display: flex; } }

.nav a {
  text-decoration: none;
  color: var(--on-band);
  padding: 8px 13px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  opacity: 0.82;
}
.nav a:hover { opacity: 1; background: rgba(247, 231, 198, 0.12); }
.nav a[aria-current="page"] {
  opacity: 1;
  background: rgba(247, 231, 198, 0.14);
  box-shadow: inset 0 -3px 0 var(--coral);
}

.icon-btn {
  appearance: none; border: 1.6px solid rgba(200, 155, 108, 0.5);
  background: transparent; color: var(--on-band);
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 0;
}
.icon-btn:hover { background: rgba(247, 231, 198, 0.12); }

.cart-btn {
  position: relative; width: auto; padding-inline: 14px;
  font-weight: 700; font-size: 0.9rem; gap: 8px;
  display: inline-flex; align-items: center;
}
.cart-btn__n {
  background: var(--coral); color: var(--ink);
  border-radius: 999px; min-width: 22px; height: 22px;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 800;
  padding-inline: 6px;
}

/* bottom tab bar, phones only */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--band);
  border-top: 2px solid rgba(200, 155, 108, 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 900px) { .tabbar { display: none; } }

.tabbar a {
  text-decoration: none; color: var(--on-band);
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 2px 9px;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.66;
}
.tabbar a[aria-current="page"] { opacity: 1; }
.tabbar a[aria-current="page"] .tabbar__ic { color: var(--coral); }
.tabbar__ic {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

main { display: block; padding-bottom: 96px; }
@media (min-width: 900px) { main { padding-bottom: 40px; } }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--band);
  color: var(--on-band);
  overflow: hidden;
}
.hero__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: 58% 62%;
  opacity: 0.30;
}
:root[data-theme="dark"] .hero__photo { opacity: 0.22; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__photo { opacity: 0.22; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(74,42,24,0.96) 0%, rgba(74,42,24,0.80) 46%, rgba(74,42,24,0.42) 100%);
}
.hero__in {
  position: relative;
  display: grid; gap: 26px;
  padding-block: clamp(34px, 6vw, 72px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__in { grid-template-columns: 1.35fr 0.65fr; align-items: center; gap: 40px; }
}
.hero h1 { color: var(--cream); }
.hero h1 span { color: var(--tan); display: block; }
.hero .lede { color: rgba(247, 231, 198, 0.82); }
.hero__badge { justify-self: center; width: min(280px, 62vw); }
@media (max-width: 899px) { .hero__badge { display: none; } }
.hero__tag {
  color: var(--coral);
  font-size: var(--step--1);
  margin-bottom: 14px;
}

.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent; background: transparent;
  font-family: inherit;
}
.btn--go { background: var(--coral); color: var(--ink); }
.btn--go:hover { filter: brightness(1.06); }
.btn--line { border-color: rgba(200, 155, 108, 0.65); color: var(--on-band); }
.btn--line:hover { background: rgba(247, 231, 198, 0.12); }
.btn--ink { border-color: var(--rule-firm); color: var(--text); }
.btn--ink:hover { background: var(--surface); }
.btn--wide { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------------ section */

.sec { padding-block: clamp(34px, 5vw, 62px); }
.sec--tint { background: var(--surface); border-block: 1px solid var(--rule); }
.sec__head { display: grid; gap: 8px; margin-bottom: 26px; max-width: 64ch; }

/* the service strip under the hero */
.strip {
  background: var(--coral);
  color: var(--ink);
}
.strip__in {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  align-items: center; padding-block: 11px;
  font-weight: 600; font-size: 0.93rem;
}
.strip b { font-weight: 800; }
.strip a { color: var(--ink); }

/* ---------------------------------------------------------------- stat rail */

.stats {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg); padding: 18px 16px; }
.sec--tint .stat { background: var(--surface); }
.stat__n {
  font-size: var(--step-2); font-weight: 800; color: var(--head);
  line-height: 1; letter-spacing: -0.02em;
}
.stat__n small { font-size: 0.5em; font-weight: 700; }
.stat__l { font-size: var(--step--1); color: var(--text-dim); margin-top: 6px; font-weight: 600; }

/* --------------------------------------------------------------- menu board */

.board { display: grid; gap: 26px; }

.board__cat { scroll-margin-top: 90px; }

.board__bar {
  background: var(--band); color: var(--on-band);
  border-radius: 10px 10px 0 0;
  padding: 11px 18px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.board__bar h3 {
  color: var(--cream); font-size: var(--step-1); letter-spacing: 0.01em;
}
.board__bar span { font-size: var(--step--1); opacity: 0.72; font-weight: 600; margin-inline-start: auto; }

.board__note {
  font-size: var(--step--1); color: var(--text-dim);
  padding: 11px 18px 2px; margin: 0;
  background: var(--surface);
  border-inline: 1px solid var(--rule);
}
.board__note > span { display: block; max-width: 74ch; }
.sec--tint .board__note { background: var(--bg); }

.board__list {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 10px 10px;
}
.sec--tint .board__list { background: var(--bg); }

.subhead {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 18px 4px;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 13px 18px;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.board__list > .subhead + .row { border-top: 0; }

.row--out .row__name,
.row--out .row__meta,
.row--out .price { opacity: 0.5; }
.row--out .row__gauge { opacity: 0.35; }

.row__main { min-width: 0; }
.row__name {
  font-weight: 700; font-size: 1.04rem; line-height: 1.25;
  color: var(--head);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.row__meta {
  font-size: var(--step--1); color: var(--text-dim);
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px;
}
.row__meta b { color: var(--text); font-weight: 700; }

.row__right { display: grid; justify-items: end; gap: 7px; }
.price { font-weight: 800; font-size: 1.12rem; color: var(--head); line-height: 1; }
.price::before { content: "₹"; font-weight: 700; opacity: 0.6; margin-inline-end: 1px; }

.row__gauge { grid-column: 1 / -1; max-width: 460px; }

/* veg / non-veg marks — drawn in approved colours only */
.mark {
  width: 13px; height: 13px; flex: none;
  border: 1.8px solid currentColor; border-radius: 3px;
  display: grid; place-items: center;
}
.mark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mark--veg { color: var(--tan); }
.mark--non { color: var(--espresso); }
:root[data-theme="dark"] .mark--non { color: var(--tan); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark--non { color: var(--tan); }
}
.mark--non { border-radius: 3px; }
.mark--non::after { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  background: var(--coral); color: var(--ink);
}
.badge--quiet { background: transparent; color: var(--text-dim); border: 1px solid var(--rule); }

/* three-segment fuel gauge: protein / carbs / fat by calorie share */
.gauge { display: grid; gap: 4px; margin-top: 8px; }
.gauge__bar {
  display: flex; height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--gauge-track);
}
.gauge__seg { height: 100%; }
.gauge__seg--p { background: var(--coral); }
/* Coral and Tan sit within 1.1:1 of each other in luminance, so the carbs band
   is also hatched — the three segments stay tellable apart without colour, and
   every figure is written out in the row above regardless. */
.gauge__seg--c {
  background: repeating-linear-gradient(115deg,
    var(--tan) 0 4px, rgba(74, 42, 24, 0.30) 4px 7px);
}
.gauge__seg--f { background: var(--espresso); }
:root[data-theme="dark"] .gauge__seg--f { background: rgba(247, 231, 198, 0.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gauge__seg--f { background: rgba(247, 231, 198, 0.55); }
}
.gauge__key {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 0.72rem; font-weight: 600; color: var(--text-dim);
}
.gauge__key span { display: inline-flex; align-items: center; gap: 5px; }
.gauge__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* --------------------------------------------------------------------- step */

.stepper {
  display: inline-flex; align-items: center;
  border: 1.6px solid var(--rule-firm); border-radius: 9px; overflow: hidden;
}
.stepper button {
  appearance: none; border: 0; background: transparent; color: var(--head);
  font-family: inherit; font-size: 1.1rem; font-weight: 800;
  width: 32px; height: 32px; cursor: pointer; line-height: 1;
}
.stepper button:hover { background: var(--gauge-track); }
.stepper output { min-width: 26px; text-align: center; font-weight: 800; font-size: 0.95rem; }
.add {
  appearance: none; border: 1.6px solid var(--rule-firm); background: transparent;
  color: var(--head); font-family: inherit; font-weight: 800; font-size: 0.86rem;
  padding: 6px 13px; border-radius: 9px; cursor: pointer; letter-spacing: 0.02em;
}
.add:hover { background: var(--coral); color: var(--ink); border-color: var(--coral); }

/* ------------------------------------------------------------------ filters */

.filters { display: grid; gap: 12px; margin-bottom: 22px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  appearance: none; font-family: inherit; cursor: pointer;
  border: 1.6px solid var(--rule-firm); background: transparent; color: var(--text);
  padding: 7px 14px; border-radius: 999px;
  font-size: 0.86rem; font-weight: 600;
}
.chip:hover { border-color: var(--tan); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] {
  background: var(--band); color: var(--on-band); border-color: var(--band);
}
.field { display: grid; gap: 5px; }
.field > span {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
}
input, select, textarea {
  font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface);
  border: 1.6px solid var(--rule-firm); border-radius: 10px;
  padding: 10px 12px; width: 100%;
  accent-color: var(--coral);
}
.card input, .card select, .card textarea { background: var(--bg); }
.sec--tint .card input, .sec--tint .card select, .sec--tint .card textarea { background: var(--surface); }
input[type="range"] {
  padding: 0; border: 0; background: transparent; height: 26px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
select { cursor: pointer; }

/* -------------------------------------------------------------------- cards */

.grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
  display: grid; gap: 8px; align-content: start;
}
.sec--tint .card { background: var(--bg); }
.card--link { text-decoration: none; box-shadow: var(--shadow); }
.card--link:hover { border-color: var(--tan); }
.card h4 { margin-bottom: 2px; }
.card p { color: var(--text-dim); font-size: 0.96rem; line-height: 1.55; }

/* numbered process — a real sequence, so it is numbered */
.steps { counter-reset: s; display: grid; gap: 14px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding-bottom: 14px; border-bottom: 1px dashed var(--rule);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step::before {
  counter-increment: s; content: counter(s);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--band); color: var(--on-band);
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.86rem;
}
.step h4 { font-size: 1.04rem; }
.step p { color: var(--text-dim); font-size: 0.95rem; }

/* ------------------------------------------------------- story: film + feed */

/* One pulled line from the film, in their own words. */
.pull {
  margin: 26px auto 0;
  max-width: 44ch;
  text-align: center;
  border: 0; padding: 0;
}
.pull p {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--head);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pull cite {
  display: block;
  margin-top: 10px;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ig { vertical-align: -3px; margin-inline-end: 7px; }
.eyebrow .ig { vertical-align: -4px; }

/* The film. Holds a poster and a play button until someone presses it, then
   the same box is handed to a YouTube iframe — framing unchanged either way. */
.film {
  position: relative;
  margin: 30px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  max-width: min(100%, 760px);
  margin-inline: auto;
  background: var(--band);
}
.film iframe { width: 100%; height: 100%; display: block; border: 0; }

/* The facade is a real button, so it is keyboard-reachable and announces
   itself as "Play: ..." rather than being a decorative image. */
.film__btn {
  appearance: none; border: 0; padding: 0; margin: 0;
  display: block; width: 100%; height: 100%;
  background: transparent; cursor: pointer; font: inherit;
  position: relative;
}
.film__btn:hover .film__play { transform: scale(1.06); }
.film__btn:hover .film__poster { transform: scale(1.02); }
.film__poster {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 60%;
  transition: transform .4s ease;
}
.film__veil {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(43, 33, 24, 0.86) 0%, rgba(43, 33, 24, 0.42) 55%, rgba(43, 33, 24, 0.30) 100%);
}
.film__body {
  position: absolute; inset: auto 0 0 0;
  display: grid; justify-items: center; gap: 6px;
  padding: 0 20px clamp(18px, 4vw, 34px);
  text-align: center;
}
.film__title, .film__note { display: block; }
.film__play {
  transition: transform .25s ease;
  width: clamp(48px, 7vw, 66px); height: clamp(48px, 7vw, 66px);
  border-radius: 50%;
  background: var(--coral); color: var(--ink);
  display: grid; place-items: center;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  padding-inline-start: 4px;
  margin-bottom: 6px;
}
.film__title {
  color: var(--cream); font-weight: 800;
  font-size: var(--step-1); letter-spacing: -0.01em;
}
.film__note {
  color: rgba(247, 231, 198, 0.66);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.gallery {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 4px;
}
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  background: var(--gauge-track);
  border: 1px solid var(--rule);
  text-decoration: none;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile:hover img { opacity: 0.88; }
.tile__vid {
  position: absolute; top: 7px; right: 8px;
  color: var(--cream); font-size: 0.8rem;
  text-shadow: 0 1px 3px rgba(43, 33, 24, 0.8);
}

/* Placeholder tiles say what will go there, rather than sitting empty. */
.tile--empty {
  border: 1.6px dashed var(--rule-firm);
  background: transparent;
  display: grid; place-items: center;
  padding: 10px;
}
.tile--empty span {
  color: var(--text-dim);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.06em; text-align: center; line-height: 1.35;
}
.tile--empty:hover { border-color: var(--tan); }
.tile--empty:hover span { color: var(--head); }

/* --------------------------------------------------------------- fuel lab */

.dials { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .dials { grid-template-columns: 1.1fr 1fr; } }

.ring { display: grid; place-items: center; gap: 4px; }
.ring svg { width: min(190px, 52vw); height: auto; }
.ring__n { font-size: var(--step-2); font-weight: 800; fill: var(--head); }
.ring__l { font-size: 0.74rem; font-weight: 600; fill: var(--text-dim); }

.macro { display: grid; gap: 10px; }
.macro__row { display: grid; gap: 4px; }
.macro__top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.88rem; font-weight: 700;
}
.macro__top span:last-child { color: var(--text-dim); font-weight: 600; }
.macro__track { height: 9px; border-radius: 999px; background: var(--gauge-track); overflow: hidden; }
.macro__fill { height: 100%; border-radius: 999px; background: var(--coral); }
.macro__fill--c {
  background: repeating-linear-gradient(115deg,
    var(--tan) 0 4px, rgba(74, 42, 24, 0.30) 4px 7px);
}
.macro__fill--f { background: var(--espresso); }
:root[data-theme="dark"] .macro__fill--f { background: rgba(247, 231, 198, 0.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .macro__fill--f { background: rgba(247, 231, 198, 0.55); }
}

.log { list-style: none; margin: 0; padding: 0; }
.log li {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px dashed var(--rule);
}
.log li:last-child { border-bottom: 0; }
.log__x {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--text-dim); font-family: inherit; font-size: 1.1rem; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
}
.log__x:hover { color: var(--head); background: var(--gauge-track); }

.empty {
  border: 1.6px dashed var(--rule); border-radius: var(--radius);
  padding: 26px 20px; text-align: center; color: var(--text-dim);
}

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week__d {
  display: grid; gap: 5px; justify-items: center;
  font-size: 0.68rem; font-weight: 700; color: var(--text-dim);
}
.week__bar {
  width: 100%; height: 54px; border-radius: 6px;
  background: var(--gauge-track); display: grid; align-content: end; overflow: hidden;
}
.week__fill { background: var(--coral); border-radius: 6px 6px 0 0; }
.week__d--today .week__bar { outline: 2px solid var(--tan); outline-offset: 1px; }

/* --------------------------------------------------------------- order bar */

.orderbar {
  position: fixed; left: 0; right: 0; z-index: 44;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  background: var(--band); color: var(--on-band);
  border-top: 2px solid var(--coral);
}
@media (min-width: 900px) { .orderbar { bottom: env(safe-area-inset-bottom, 0px); } }
.orderbar__in {
  display: flex; align-items: center; gap: 14px; padding-block: 10px;
  font-size: 0.92rem; font-weight: 600;
}
.orderbar__sum { margin-inline-end: auto; line-height: 1.3; }
.orderbar__sum b { font-weight: 800; font-size: 1.02rem; display: block; }
.orderbar__sum small { opacity: 0.75; font-size: 0.78rem; }

/* ------------------------------------------------------------------ receipt */

.receipt {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
}
.receipt__tot {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--rule-firm); margin-top: 12px; padding-top: 12px;
  font-weight: 800; font-size: var(--step-1); color: var(--head);
}
.note {
  font-size: var(--step--1); color: var(--text-dim); line-height: 1.6;
}

/* Long-form legal and policy copy. Narrow measure, generous leading — these
   are read carefully or not at all. */
.prose { max-width: 68ch; }
.prose h3 {
  font-size: var(--step-1);
  margin: 30px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.prose h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { margin-bottom: 12px; line-height: 1.75; }
.prose ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 7px; }
.prose li { line-height: 1.65; }
.prose b { font-weight: 700; color: var(--head); }
.prose a { color: var(--head); text-underline-offset: 3px; }

.banner {
  border: 1.6px solid var(--rule-firm);
  border-left: 5px solid var(--coral);
  border-radius: 10px;
  background: var(--surface);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 0.96rem;
  line-height: 1.55;
}
.sec--tint .banner { background: var(--bg); }
.banner b { color: var(--head); }

/* The basket code — the one thing on the page that has to be read aloud,
   typed by hand, or spotted across a room. Selector is .card p.code, not
   .code, because .card p would otherwise out-specify it and reset the size. */
.card p.code, .code {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--head);
  line-height: 1.1;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.pre {
  white-space: pre-wrap; font-family: inherit; font-size: 0.92rem;
  background: var(--bg); border: 1px dashed var(--rule);
  border-radius: 10px; padding: 14px; color: var(--text); line-height: 1.6;
  margin: 0;
}
.sec--tint .pre { background: var(--surface); }

/* A button that has to read as part of a sentence, for an aside inside body
   copy. Underlined rather than coloured, because Coral on Cream is only
   2.24:1 and would fail as the sole signal that this is pressable. */
.linky {
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; font-weight: 700; color: var(--head);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.linky:hover { color: var(--accent); }

/* ------------------------------------------------------------------- footer */

.foot {
  background: var(--band); color: var(--on-band);
  padding-block: 34px 26px; margin-top: 10px;
}
.foot__in { display: grid; gap: 22px; }
@media (min-width: 760px) { .foot__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { color: var(--cream); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; }
.foot ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: rgba(247, 231, 198, 0.82); text-decoration: none; font-size: 0.95rem; }
.foot a:hover { color: var(--cream); text-decoration: underline; }
.foot__fine {
  border-top: 1px solid rgba(200, 155, 108, 0.3);
  margin-top: 26px; padding-top: 16px;
  font-size: 0.8rem; color: rgba(247, 231, 198, 0.6);
  display: flex; flex-wrap: wrap; gap: 6px 20px;
}

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 122px);
  z-index: 60;
  background: var(--coral); color: var(--ink);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.5);
}
@media (min-width: 900px) { .toast { bottom: 88px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}