/* =========================================================================
   KITCHEN v3 — "Atölye"
   Mobile first. Light structure, generous air, warm paper.
   Colour still carries meaning: every ingredient family owns one.
   developed by emreyakut
   ========================================================================= */

:root {
  /* paper and ink */
  --paper: #fdfcfa;
  --card: #ffffff;
  --sand: #f4f1ea;
  --sand-2: #ebe6db;
  --hair: #e3ded2;
  --ink: #16150f;
  --ink-2: #55514a;
  --ink-3: #8b857a;

  /* workshop accents */
  --ember: #d9501e;
  --ember-soft: #fdf0e9;
  --herb: #1f6b4a;
  --saffron: #e8a300;
  --sky: #1f5fbf;

  /* ingredient families */
  --f-grain: #2b62ff;
  --f-acid: #d99400;
  --f-protein: #d9251c;
  --f-fat: #e2711d;
  --f-leavener: #12a05c;
  --f-aromatic: #7c2fb0;
  --f-sugar: #e0357f;
  --f-produce: #0e9aa7;
  --f-dairy: #4a7fb5;
  --f-mineral: #6b7280;

  --gut: 20px;
  --maxw: 1280px;
  --r: 14px;
  --r-sm: 9px;

  --sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --shadow: 0 1px 2px rgba(22,21,15,.04), 0 8px 24px -12px rgba(22,21,15,.14);
  --shadow-lift: 0 2px 6px rgba(22,21,15,.06), 0 18px 40px -18px rgba(22,21,15,.24);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--ember); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 780px; }

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.028em; line-height: 1.08; }
.t-hero { font-size: clamp(33px, 8.4vw, 76px); letter-spacing: -.038em; line-height: 1.02; }
.t-sec  { font-size: clamp(26px, 5.4vw, 44px); }
.t-card { font-size: clamp(18px, 3.4vw, 23px); letter-spacing: -.022em; }

.lede { font-size: clamp(16px, 3.2vw, 19px); line-height: 1.6; color: var(--ink-2); margin: 14px 0 0; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 12px;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.3,1), background .2s, box-shadow .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--ember); border-color: var(--ember); box-shadow: var(--shadow-lift); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; background: var(--sand);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-2);
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc, var(--ember)); }

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253,252,250,.86);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.nav.stuck { border-bottom-color: var(--hair); }
.nav-in { display: flex; align-items: center; gap: 12px; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .mark { width: 26px; height: 26px; flex: none; display: block; }
.brand .wordmark { font-size: 20px; }

/* The name is Mutfak + sim, and the wordmark says so: the room is set in the display
   face, what the site does to it in the data face. brandMark() supplies the split. */
.wordmark { font-weight: 800; letter-spacing: -.03em; }
.wordmark i { font-family: var(--mono); font-style: normal; font-weight: 500; font-size: .84em; letter-spacing: -.01em; color: var(--ember); }
.nav-links { display: none; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang-switch {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  padding: 7px 11px; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink-2);
}
.lang-switch:hover { border-color: var(--ink); color: var(--ink); }
.burger { width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 999px; background: none; display: grid; place-items: center; cursor: pointer; }
.burger span { width: 15px; height: 1.5px; background: var(--ink); border-radius: 2px; position: relative; display: block; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; background: var(--ink); border-radius: 2px; }
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }

.drawer {
  position: fixed; inset: 62px 0 auto 0; z-index: 59;
  background: var(--paper); border-bottom: 1px solid var(--hair);
  padding: 6px var(--gut) 20px;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s cubic-bezier(.2,.8,.3,1);
}
.drawer.open { opacity: 1; transform: none; pointer-events: auto; }
.drawer a { display: block; padding: 13px 0; border-bottom: 1px solid var(--hair); font-size: 17px; font-weight: 700; }
.drawer a:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; }
.hero-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--sand); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-media video.on { opacity: 1; }
/* Once the first clip is rolling the still has done its job. Fading it out for good is
   what stops it flashing through every transition between clips. */
.hero-media img { transition: opacity .9s ease .3s; }
.hero-media.rolling img { opacity: 0; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,21,15,.34) 0%, rgba(22,21,15,.06) 40%, rgba(253,252,250,.1) 72%, var(--paper) 100%);
}
.hero-copy { position: relative; z-index: 2; margin-top: -20vw; }
/* The copy block is pulled up over the photograph on purpose, which lands the eyebrow on
   whatever the image is doing there. A paper halo keeps it readable without moving it. */
.hero-copy .eyebrow { text-shadow: 0 1px 7px rgba(253,252,250,.9); }
.hero h1 { margin-bottom: 12px; }
.hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

/* the readout: three measured constants, set as instrument output rather than as prose.
   The prose above stays warm; the numbers live in the data face, where they belong. */
.readout {
  list-style: none; margin: 20px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 4px 0;
}
.readout li { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--hair); }
.readout li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.readout b { display: block; font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--ink); }
.readout span { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

/* the three doors */
.doors { display: grid; gap: 10px; margin-top: 28px; }
.door {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: var(--r); background: var(--card);
  border: 1px solid var(--hair); box-shadow: var(--shadow);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; }
.door .ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 21px; background: var(--dc, var(--ember-soft)); }
.door b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.door span { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.door .go { margin-left: auto; color: var(--ink-3); font-size: 19px; flex: none; }

/* ------------------------------------------------------------- sections */
.sec { padding: 54px 0; }
.sec-head { margin-bottom: 24px; }
.sec-head .lede { max-width: 58ch; }
.sec-tint { background: var(--sand); }
.sec-ink { background: var(--ink); color: #fff; }
.sec-ink .lede { color: rgba(255,255,255,.72); }
.sec-ink .eyebrow { color: var(--saffron); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }

.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* horizontal scroller — the mobile answer to a wide grid */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px var(--gut) 16px; margin: 0 calc(var(--gut) * -1);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ----------------------------------------------------------------- card */
.card {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card .ph { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--sand); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.3,1); }
.card:hover .ph img { transform: scale(1.05); }
.card .ph .badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  background: rgba(255,255,255,.94); border-radius: 999px; padding: 5px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--ink);
}
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.card-foot { margin-top: auto; padding-top: 6px; display: flex; gap: 7px; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; }

.easy-card .myth { font-size: 13px; color: var(--ink-3); }
.easy-card .myth s { text-decoration-color: var(--ember); }

/* belief vs truth — a labelled contrast, never a strikethrough */
.claim { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.claim b {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.claim.truth { color: var(--ink); font-weight: 500; margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--herb); }
.claim.truth b { color: var(--herb); }

/* ----------------------------------------------------------- ingredients */
.fam-filter { display: flex; gap: 7px; overflow-x: auto; padding: 2px var(--gut) 14px; margin: 0 calc(var(--gut) * -1); scrollbar-width: none; }
.fam-filter::-webkit-scrollbar { display: none; }
.fam-chip {
  flex: none; border: 1px solid var(--hair); background: var(--card); border-radius: 999px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; transition: background .18s, color .18s, border-color .18s;
}
.fam-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc, var(--ink-3)); }
.fam-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* what a dish is made of: a full card per ingredient rather than a chip with a name,
   because the question "why is this in here" needs three lines to answer. */
.ing-grid { gap: 12px; }
.ing-card {
  display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start;
  padding: 14px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--card);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.ing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--fc); }
/* Ingredient photographs are cut-outs on white, so they are contained rather than
   cropped — the same decision the ingredient page makes with its own .ing-shot. */
.ing-card .shot {
  position: relative; display: block; width: 84px; height: 84px; border-radius: var(--r-sm);
  background: var(--sand); overflow: hidden;
}
.ing-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ing-card .shot img[src$=".svg"] { object-fit: contain; opacity: .45; padding: 18%; }
.ing-card .ing-sym {
  position: absolute; top: 5px; left: 5px; z-index: 1;
  font-family: var(--mono); font-size: 9.5px; line-height: 1; padding: 3px 5px;
  border-radius: 4px; background: var(--fc); color: #fff;
}
.ing-text { display: grid; gap: 5px; }
.ing-text b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.ing-fact { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.ing-gives { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ing-tip { font-size: 13px; line-height: 1.5; color: var(--ink-2); border-left: 2px solid var(--fc); padding-left: 9px; }

@media (min-width: 700px) {
  .ing-card { grid-template-columns: 96px 1fr; }
  .ing-card .shot { width: 96px; height: 96px; }
}

/* the pantry filter */
.pick-search { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pick-search input {
  flex: 1; min-width: 0; padding: 13px 16px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--card); font-family: inherit;
  font-size: 15px; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
}
.pick-search input:focus { border-color: var(--ink-3); }
.pick-search input::placeholder { color: var(--ink-3); }
.pick-search .mono { flex: none; font-size: 11px; color: var(--ink-3); }

/* the command palette: Ctrl+K, or the button that tells you Ctrl+K exists */
.palette-open {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 10px 7px 11px; border: 1px solid var(--hair); border-radius: 999px;
  background: var(--card); color: var(--ink-3); font-size: 13px; font-family: inherit;
}
.palette-open:hover { border-color: var(--ink-3); color: var(--ink); }
.palette-open-icon {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 1.6px solid currentColor; position: relative;
}
.palette-open-icon::after {
  content: ""; position: absolute; right: -4px; bottom: -3px;
  width: 5px; height: 1.6px; background: currentColor; transform: rotate(45deg);
}
.palette-open-text { display: none; }
.palette-open kbd, .palette-foot kbd {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  padding: 2px 5px; border-radius: 4px; background: var(--sand); color: var(--ink-3);
}

/* Visibility is driven by the class, not by the hidden attribute: `display: flex` here
   outranks the user agent's `[hidden] { display: none }`, so the dialog was painted open
   on every page and closing it changed nothing. */
.palette {
  position: fixed; inset: 0; z-index: 60; padding: 12vh 16px 16px;
  background: rgba(22,21,15,.38); backdrop-filter: blur(3px);
  display: none; justify-content: center; align-items: flex-start;
}
.palette.on { display: flex; }
.palette-box {
  width: 100%; max-width: 620px; background: var(--card); border-radius: var(--r);
  border: 1px solid var(--hair); box-shadow: var(--shadow-lift); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
}
.palette-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--hair); background: none;
  padding: 18px 20px; font-family: inherit; font-size: 17px; color: var(--ink);
  outline: none; -webkit-appearance: none; appearance: none;
}
.palette-input::placeholder { color: var(--ink-3); }
.palette-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; max-height: 52vh; }
.palette-hit {
  display: grid; grid-template-columns: 38px 68px 1fr; align-items: center;
  gap: 10px; padding: 8px 12px; border-radius: var(--r-sm);
}
.palette-hit.no-shot { grid-template-columns: 68px 1fr; }
.palette-hit.no-shot .palette-detail { grid-column: 2; }
.palette-shot {
  grid-row: span 2; width: 38px; height: 38px; border-radius: var(--r-sm);
  object-fit: cover; background: var(--sand); display: block;
}
.palette-hit.on { background: var(--sand); }
.palette-type {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.palette-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.palette-detail {
  grid-column: 3; font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.palette-empty { margin: 0; padding: 22px; font-size: 14px; color: var(--ink-3); }
.palette-foot {
  display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--hair);
  font-size: 11px; color: var(--ink-3);
}
.palette-foot span { display: inline-flex; align-items: center; gap: 5px; }

@media (min-width: 700px) {
  .palette-open-text { display: inline; }
}

/* the taste profile: eight bars, read as a shape rather than eight numbers. The tick on
   each track is the database average, which is what turns a bar into a comparison. */
.taste { border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); padding: 16px 18px; }
.taste-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.taste-bars li { display: grid; grid-template-columns: 74px 1fr 30px; align-items: center; gap: 10px; }
.taste-label { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.taste-track {
  position: relative; height: 8px; border-radius: 999px; background: var(--sand);
  overflow: visible;
}
.taste-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--tc); transition: width .5s cubic-bezier(.2,.8,.3,1);
}
.taste-norm {
  position: absolute; top: -3px; bottom: -3px; width: 1px;
  background: var(--ink-3); opacity: .55;
}
.taste-value { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); text-align: right; }
.taste-foot { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

/* the one-line summary, used on cards where a chart would not fit */
.taste-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.taste-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; background: var(--sand); color: var(--ink-2);
}
.taste-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--tc, var(--ink-3)); }

@media (min-width: 700px) {
  .taste-bars li { grid-template-columns: 86px 1fr 34px; }
}

/* the pager: two doors at the end of a page, so there is never a dead end. The image is
   the clip's first frame again, which makes the destination recognisable before arrival. */
.pager { display: grid; gap: 10px; }
.pager-side {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--card);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.pager-side:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--ink-3); }
.pager-side img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.pager-side span { display: grid; gap: 3px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.pager-side b {
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.pager-side.next { text-align: right; }

@media (min-width: 700px) {
  .pager { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* hover clips: the video is generated from the still underneath it, so the two are the
   same picture and the cross-fade has nothing to align. Opacity alone does the work. */
.ph { position: relative; }
video.clip {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
video.clip.on { opacity: 1; }
/* A card that has one gets a quiet mark, so the affordance is discoverable rather than
   a secret. It fades out while the clip is running. */
.ph.has-clip::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 7px; height: 7px;
  border-radius: 50%; background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 3px rgba(22,21,15,.18); transition: opacity .3s; pointer-events: none;
}
/* Fades whether the pointer is over the card (index, home rail) or over the picture
   itself (detail hero, which has no card around it). */
.card:hover .ph.has-clip::after,
.ph.has-clip:hover::after { opacity: 0; }

/* the filter panel: two axes and a readout, set as an instrument rather than a toolbar */
.lab-filters {
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--card);
  padding: 14px 16px; margin-bottom: 22px; display: grid; gap: 12px;
}
.lab-row { display: grid; gap: 8px; }
.lab-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.lab-chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lab-chips::-webkit-scrollbar { display: none; }
.lab-chip {
  flex: none; border: 1px solid var(--hair); background: var(--paper); border-radius: 999px;
  padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; color: var(--ink);
  transition: background .18s, color .18s, border-color .18s;
}
.lab-chip:hover { border-color: var(--ink-3); }
.lab-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.lab-readout {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3);
  border-top: 1px solid var(--hair); padding-top: 10px;
}
.lab-readout #easyCount { color: var(--ink); font-weight: 500; }

/* The level dot is the one place colour carries meaning outside the families:
   green runs to ember as the number of ways to fail goes up. */
/* Also sets --pc, because inside a .pill the dot's colour comes from that variable and
   a bare background here would lose to the more specific `.pill i` rule. */
.lvl { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.lvl[data-lvl="1"] { --pc: var(--herb);    background: var(--herb); }
.lvl[data-lvl="2"] { --pc: var(--saffron); background: var(--saffron); }
.lvl[data-lvl="3"] { --pc: var(--ember);   background: var(--ember); }
.lab-chip[aria-pressed="true"] .lvl { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

/* One rule for everything a filter hides — tiles, cards, rows. */
.hide { display: none !important; }

@media (min-width: 700px) {
  .lab-filters { padding: 16px 18px; }
  .lab-row { grid-template-columns: 80px 1fr; align-items: center; gap: 14px; }
  .lab-label { padding-top: 0; }
}

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile {
  position: relative; display: block; border: 1px solid var(--hair); border-radius: var(--r-sm);
  background: var(--card); overflow: hidden; text-align: left; cursor: pointer; padding: 0; width: 100%;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--fc); }
.tile-img { display: block; aspect-ratio: 1; position: relative; background: #fff; }
.tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-sym {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .03em;
  background: var(--fc); color: #fff; padding: 2px 5px; border-radius: 4px;
}
.tile-name { display: block; padding: 8px 9px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.tile-fact { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--ink-3); margin-top: 3px; line-height: 1.3; letter-spacing: 0; }

/* -------------------------------------------------------------- workshop */

.verdict { border-radius: var(--r-sm); background: var(--sand); padding: 15px; margin-top: 14px; }
.verdict h4 { font-size: 19px; margin-bottom: 5px; }
.verdict p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.rx-list { display: grid; gap: 9px; margin-top: 13px; }
.rx { border-left: 3px solid var(--rc, var(--ember)); padding: 3px 0 3px 11px; animation: slidein .45s cubic-bezier(.2,.8,.3,1) both; }
@keyframes slidein { from { opacity: 0; transform: translateX(-6px); } }
.rx b { display: block; font-size: 14px; }
.rx span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.rx em { font-family: var(--mono); font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.warn { margin-top: 13px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ember-soft); border: 1px solid #f6d5c3; font-size: 13.5px; line-height: 1.5; color: #8a3210; }

.meters { display: grid; gap: 9px; margin-top: 14px; }
.meter { display: grid; grid-template-columns: 66px 1fr 30px; align-items: center; gap: 10px; }
.meter label { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.meter .track { height: 7px; border-radius: 999px; background: var(--sand-2); overflow: hidden; }
.meter .track i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ink); transition: width .55s cubic-bezier(.2,.8,.3,1); }
.meter var { font-family: var(--mono); font-size: 10.5px; font-style: normal; text-align: right; color: var(--ink-2); }

.dials { display: grid; gap: 14px; }
.dial-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 700; }
.dial-top span { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-2); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--sand-2); outline: none; margin: 8px 0 0; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow); cursor: grab; transition: transform .16s; }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); cursor: grab; }

.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.seg button { border: 1px solid var(--hair); background: var(--card); border-radius: 999px; padding: 10px 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .18s, color .18s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --------------------------------------------------------------- pantry */
.pk {
  border: 1px solid var(--hair); background: var(--card); border-radius: 999px;
  padding: 7px 13px 7px 7px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: background .16s, color .16s, border-color .16s;
}
.pk img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; background: var(--sand); flex: none; }
.pk[aria-pressed="true"] { background: var(--herb); color: #fff; border-color: var(--herb); }
.picks { display: flex; flex-wrap: wrap; gap: 7px; }

/* --- workshop amounts ---------------------------------------------------
   One row per ingredient in the pot: what it is, how much, in which unit. The
   row only exists in advanced mode, so the basic page is exactly as simple as
   it was before amounts were a thing. */
.mode-seg { max-width: 220px; margin-bottom: 14px; }
.amounts { display: grid; gap: 8px; margin-top: 16px; }
.amt { display: grid; grid-template-columns: 1fr 74px 118px; gap: 8px; align-items: center; }
.amt > label { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amt input, .amt select {
  border: 1px solid var(--hair); background: var(--card); border-radius: 10px;
  padding: 8px 9px; font-family: var(--mono); font-size: 13px; color: inherit; width: 100%;
}
.amt input { text-align: right; font-variant-numeric: tabular-nums; }
.amt input:focus-visible, .amt select:focus-visible { outline: 2px solid var(--herb); outline-offset: 1px; }
.amt .amt-grams { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); grid-column: 2 / -1; margin-top: -3px; text-align: right; }
.amt .amt-state { grid-column: 1 / -1; }
.amt .amt-note { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-top: -2px; }
.measure-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; }

/* --- the server's answer ------------------------------------------------
   Deliberately plainer than the apparatus. This is the part that is allowed
   to say "I do not know yet", and it must never look like a reassurance
   while it is still waiting. */
.verify { margin-top: 18px; border-top: 1px solid var(--hair); padding-top: 14px; }
.verify-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hair); border-radius: 999px; padding: 5px 11px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  background: var(--card); color: var(--ink-2);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge[data-tone="waiting"] { color: var(--ink-2); }
.badge[data-tone="good"]    { color: #2f7d4f; border-color: #bfd9c8; }
.badge[data-tone="partial"] { color: #9a6b12; border-color: #e3d3a8; }
.badge[data-tone="bad"]     { color: #b4291c; border-color: #e8c0bb; }
.safety-item {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid #e8c0bb; background: #fdf5f4; font-size: 13.5px; line-height: 1.5;
}
.safety-item[data-severity="warning"] { border-color: #e3d3a8; background: #fdfaf2; }
.safety-item b { display: block; font-size: 11.5px; font-family: var(--mono); color: var(--ink-2); margin-bottom: 3px; }
.verify-note { font-size: 12px; line-height: 1.55; color: var(--ink-2); margin-top: 12px; }

/* --- the timeline ------------------------------------------------------- */
.timeline { margin-top: 22px; border-top: 1px solid var(--hair); padding-top: 16px; }
.timeline-head { display: flex; align-items: center; gap: 12px; }
.timeline-head h3 { font-size: 17px; margin: 0; }
.timeline-head .btn { margin-left: auto; }
.timeline-lede { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; }
.steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.step {
  border: 1px solid var(--hair); border-radius: 12px; background: var(--card); padding: 10px 12px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center;
}
.step[data-dragging="true"] { opacity: .45; }
.step[data-over="true"] { border-color: var(--herb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--herb) 25%, transparent); }
.step-grip {
  cursor: grab; border: 0; background: none; padding: 4px 2px; line-height: 1;
  font-family: var(--mono); font-size: 15px; color: var(--ink-3);
}
.step-grip:active { cursor: grabbing; }
.step-when { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.step-controls { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 84px 84px; gap: 8px; }
.step-controls select, .step-controls input {
  border: 1px solid var(--hair); background: var(--paper); border-radius: 9px;
  padding: 7px 8px; font-family: var(--mono); font-size: 12.5px; color: inherit; width: 100%;
}
.step-adds { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.step-add {
  border: 1px solid var(--hair); background: var(--paper); border-radius: 999px;
  padding: 4px 9px; font-size: 12px; cursor: pointer;
}
.step-add[aria-pressed="true"] { background: var(--herb); color: #fff; border-color: var(--herb); }
.step-fired { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.step-fired b { color: var(--ink); }
.step-drop { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 16px; line-height: 1; padding: 4px 6px; }
.carried { margin-top: 12px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--hair); background: var(--sand); font-size: 13px; line-height: 1.55; }
.carried b { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-bottom: 4px; }

/* --- calculated nutrition ----------------------------------------------- */
.nutri-grid { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.nutri-grid li { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 6px; text-align: center; background: var(--paper); }
.nutri-grid b { display: block; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.nutri-grid span { display: block; font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.nutri-note { font-size: 12px; line-height: 1.55; color: var(--ink-2); margin-top: 10px; }

/* --- diet verdicts on a recipe ------------------------------------------ */
.diet-verdicts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 9px; }
.diet-verdicts li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.diet-verdicts a { font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; }
.diet-verdicts a:hover { text-decoration: underline; }
.diet-verdicts em { grid-column: 1 / -1; font-style: normal; font-size: 12px; line-height: 1.5; color: var(--ink-2); }

/* --- the engine's reading under a written step -------------------------- */
.step-reading { margin-top: 10px; display: grid; gap: 6px; }
.step-reading p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); padding-left: 11px; border-left: 2px solid var(--herb); }
.step-reading b { color: var(--ink); font-weight: 700; }
.step-reading em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.step-reading .step-warn { border-left-color: var(--ember); }

/* --- what a swap costs --------------------------------------------------- */
.swap-costs { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 11px; }
.swap-costs li { display: grid; gap: 3px; }
.swap-costs b { font-size: 13.5px; }
.swap-loss { font-size: 12.5px; line-height: 1.5; color: var(--ember); }
.swap-ok { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.swap-figures { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --- the remembered pantry ---------------------------------------------- */
.pantry-state { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; color: var(--ink-2); min-height: 30px; }
.pantry-state .btn { margin-left: auto; }
.pantry-match { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin: 6px 0 0; }
.pantry-match b { color: var(--ink); }
.ing-list li[data-have="yes"] > b { position: relative; }
.ing-list li[data-have="yes"] > b::after { content: "✓"; margin-left: 6px; color: var(--herb); font-size: 11px; }
.pantry-toggle { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.craving-clear { margin: 12px 0 0; font-size: 13px; }

/* --- account forms -------------------------------------------------------
   Plain, because these pages have to work when everything else has failed. */
.stack { display: grid; gap: 14px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 13px; font-weight: 600; }
.field > em { font-style: normal; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.field input, .field select, .field textarea {
  border: 1px solid var(--hair); background: var(--card); border-radius: 10px;
  padding: 10px 11px; font: inherit; font-size: 14px; color: inherit; width: 100%;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--herb); outline-offset: 1px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.notify-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.notify-table th { font-size: 11px; font-family: var(--mono); color: var(--ink-3); font-weight: 500; text-align: center; padding: 6px 4px; }
.notify-table th:first-child { text-align: left; }
.notify-table td { padding: 7px 4px; text-align: center; border-top: 1px solid var(--hair); }
.notify-table td:first-child { text-align: left; }
.session-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.session-list li { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.session-list li > span { display: grid; gap: 2px; }
.session-list em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.session-list form { margin-left: auto; }
.flash { position: sticky; top: 0; z-index: 40; padding: 11px 16px; font-size: 14px; text-align: center; }
.flash[data-kind="ok"] { background: #eef6f0; color: #2f7d4f; }
.flash[data-kind="error"] { background: #fdf1ef; color: #b4291c; }
.payload { background: var(--sand); border-radius: 10px; padding: 10px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; overflow-x: auto; margin-top: 10px; max-height: 240px; }

/* --- the week, and the list that falls out of it ------------------------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.plan-day { border: 1px solid var(--hair); border-radius: 12px; background: var(--card); padding: 12px; }
.plan-day h3 { font-size: 14px; margin: 0 0 8px; display: flex; gap: 6px; align-items: baseline; }
.plan-day h3 .mono { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.plan-slot { display: grid; gap: 3px; margin-bottom: 8px; }
.plan-slot label { font-size: 11px; font-family: var(--mono); color: var(--ink-3); }
.plan-slot select { border: 1px solid var(--hair); background: var(--paper); border-radius: 8px; padding: 6px 7px; font-size: 12.5px; color: inherit; width: 100%; }
.shop-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; }
.shop-list li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.shop-list li[data-checked="yes"] > span { text-decoration: line-through; color: var(--ink-3); }
.shop-list button { border: 0; background: none; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; color: inherit; }

/* --- finding one ingredient among a hundred and seventy ------------------ */
.shelf-find { display: grid; gap: 8px; margin-bottom: 12px; }
.shelf-find input[type="search"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--hair);
  border-radius: var(--r-sm); background: var(--card); font: inherit; font-size: 14px;
  color: var(--ink);
}
.shelf-find input[type="search"]:focus-visible { outline: 2px solid var(--herb); outline-offset: 1px; }

.shelf-fams { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.shelf-fams::-webkit-scrollbar { display: none; }
.shelf-fam {
  flex: none; padding: 5px 11px; border: 1px solid var(--hair); border-radius: 999px;
  background: var(--card); font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.shelf-fam[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.shelf-fam:focus-visible { outline: 2px solid var(--herb); outline-offset: 2px; }

.shelf-count { margin: 0; font-size: 11px; color: var(--ink-3); }

/* A tile whose photograph does not exist keeps its name and loses the broken frame. */
.pk-bare { padding-top: 14px; padding-bottom: 14px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- an easy record, as the engine reads it ------------------------------ */
.ing-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin: 24px 0 6px;
}

.read-as { margin-top: 20px; }
.read-as > summary {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--ink-3); cursor: pointer; padding: 6px 0;
}
.read-as > summary:focus-visible { outline: 2px solid var(--herb); outline-offset: 2px; }

.read-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.read-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; vertical-align: top; }
.read-table td:first-child { width: 62px; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.read-table td:last-child { width: 1%; white-space: nowrap; font-size: 11px; color: var(--ink-3); text-align: right; }
/* A line the engine could not identify is marked in the margin, so the gaps in the sum
   are visible without reading every row. */
.read-loose td:first-child { box-shadow: inset 2px 0 0 var(--saffron); padding-left: 8px; }

.ing-tag {
  font-style: normal; font-size: 11px; padding: 1px 6px; margin-left: 6px;
  border-radius: 999px; background: var(--sand); color: var(--ink-2); white-space: nowrap;
}

/* --- guidance about the reader, not the dish ----------------------------- */
.guide { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.guide-head {
  margin: 14px 0 0; font-size: 13px; font-weight: 700;
}
.guide-head:first-of-type { margin-top: 8px; }

.guide-row {
  display: grid; grid-template-columns: 104px 1fr; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--hair);
}
.guide-row:last-child { border-bottom: 0; }
.guide-values { display: flex; flex-direction: column; gap: 3px; }
.guide-values b { font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.guide-row p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.guide-rung {
  display: inline-block; margin-left: 7px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-3);
}
.guide-cite { font-size: 11px !important; color: var(--ink-3) !important; }

@media (max-width: 560px) {
  .guide-row { grid-template-columns: 1fr; gap: 6px; }
  .guide-values { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}

/* --- a submission being read --------------------------------------------- */
.sub-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.sub-lines li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 7px 0 7px 11px; border-left: 3px solid var(--hair); font-size: 14px;
}
/* Which lines the engine can see is the first thing a moderator needs to know, so it
   is a mark down the left edge rather than a word at the end of each row. */
.sub-lines .sub-bound { border-left-color: var(--herb); }
.sub-lines .sub-loose { border-left-color: var(--saffron); }
.sub-lines .mono:first-child { min-width: 72px; color: var(--ink-2); font-size: 12.5px; }
.sub-lines em { font-style: normal; font-size: 11px; color: var(--ink-3); }

.sub-steps { margin: 8px 0 0; padding-left: 20px; }
.sub-steps li { font-size: 14px; line-height: 1.6; margin-top: 8px; }
.sub-steps em { display: block; font-style: normal; font-size: 13px; color: var(--ink-2); margin-top: 3px; }

/* --- a wide table -------------------------------------------------------- */

/* .grill-table carries min-width: 620px, so on a phone it is wider than the screen.
   Every view that uses one already wrapped it in .t-scroll — the class simply had no
   rule behind it, and the page scrolled sideways instead of the table. */
.t-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- the contribution form ----------------------------------------------- */
.field-bad {
  font-style: normal; font-size: 12.5px; line-height: 1.5; color: #8a3210;
}

.lines { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* Amount, unit, the line as the author writes it, and the ingredient it binds to.
   The binding box is given as much room as the written name because it is the half
   that does the work, and a form that made it look secondary would be arguing against
   the page it sits on. */
.line {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: 84px 104px 1fr 1fr 34px;
}
.line input {
  width: 100%; padding: 10px 11px; border: 1px solid var(--hair);
  border-radius: var(--r-sm); background: var(--card); font: inherit; font-size: 14px;
  color: var(--ink); min-width: 0;
}
.line input:focus-visible { outline: 2px solid var(--herb); outline-offset: 1px; }
.line .line-key { font-family: var(--mono); font-size: 12.5px; }
/* A bound line is marked, so the difference between the two kinds of row is visible
   down the column rather than only in the panel underneath. */
.line .line-key:not(:placeholder-shown) { border-color: var(--herb); background: #f2f8f5; }

.line-drop {
  border: 1px solid var(--hair); background: var(--card); border-radius: var(--r-sm);
  width: 34px; height: 34px; font-size: 17px; line-height: 1; cursor: pointer;
  color: var(--ink-3); padding: 0;
}
.line-drop:hover { color: #8a3210; border-color: #f6d5c3; background: var(--ember-soft); }

.steps { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.step-edit { display: grid; grid-template-columns: 30px 1fr 34px; gap: 10px; align-items: start; }
.step-no { font-size: 12px; color: var(--ink-3); padding-top: 12px; }
.step-edit textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--hair);
  border-radius: var(--r-sm); background: var(--card); font: inherit; font-size: 14px;
  line-height: 1.55; color: var(--ink); resize: vertical;
}
.step-edit textarea:focus-visible { outline: 2px solid var(--herb); outline-offset: 1px; }
.step-edit .step-why { background: var(--sand); font-size: 13.5px; }

.pills { display: flex; flex-wrap: wrap; gap: 7px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.notes { margin: 8px 0 0; padding-left: 18px; }
.notes li { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin-top: 6px; }

@media (max-width: 700px) {
  /* Two rows rather than five squeezed columns: amount and unit together, then the
     written name, then what it binds to. */
  .line { grid-template-columns: 84px 1fr 34px; grid-template-areas: "amount unit drop" "name name name" "key key key"; }
  .line .line-amount { grid-area: amount; }
  .line .line-unit   { grid-area: unit; }
  .line .line-name   { grid-area: name; }
  .line .line-key    { grid-area: key; }
  .line .line-drop   { grid-area: drop; }
  .line { padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
}

/* --- a threshold with more than one number ------------------------------- */
.split-rows { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }

.split-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 18px;
  padding: 18px 0; border-top: 1px solid var(--hair);
}
.split-row:last-child { border-bottom: 1px solid var(--hair); }

/* The one number with nothing behind it is marked in the margin rather than in the
   prose, so a reader scanning the column sees which value is the site's own before
   reading a word of it. */
.split-row-bare { border-left: 3px solid var(--saffron); padding-left: 15px; }

.split-values { display: flex; flex-direction: column; gap: 4px; }
.split-values b { font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; }

.split-title { display: block; font-size: 16px; }
.split-rung {
  display: inline-block; margin-top: 3px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-3);
}
.split-body p { margin: 7px 0 0; font-size: 15px; line-height: 1.55; }

.split-quote {
  margin: 10px 0 0; padding: 9px 0 9px 13px; border-left: 2px solid var(--hair);
  font-size: 14px; line-height: 1.5; font-style: italic; color: var(--ink-2);
}
.split-cite { margin: 6px 0 0 !important; font-size: 12px; color: var(--ink-3); }

@media (max-width: 620px) {
  .split-row { grid-template-columns: 1fr; gap: 8px; }
  .split-values { flex-direction: row; flex-wrap: wrap; gap: 10px; }
}

/* --- rating ------------------------------------------------------------- */
.rating { display: flex; gap: 3px; margin-top: 8px; }
.rating button {
  border: 0; background: none; cursor: pointer; padding: 2px 3px;
  font-size: 24px; line-height: 1; color: var(--hair);
}
.rating button[aria-pressed="true"], .rating button[aria-pressed="true"] ~ button { color: var(--hair); }
.rating:hover button { color: var(--hair); }
/* Every star up to and including the chosen one is filled. The sibling selector fills
   from the left, which is the only direction a star rating reads in. */
.rating button[aria-pressed="true"] { color: #e8a300; }
.rating button:has(~ button[aria-pressed="true"]) { color: #e8a300; }
.rating button:focus-visible { outline: 2px solid var(--herb); outline-offset: 1px; border-radius: 4px; }


@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

a.pk[aria-pressed="true"] { background: var(--herb); color: #fff; border-color: var(--herb); }
a.pk { text-decoration: none; }


/* --- cook mode -----------------------------------------------------------
   Read from a metre away with wet hands. Everything is larger than the rest of
   the site on purpose, and nothing on the screen is smaller than the thing you
   are supposed to press next. */
.cook {
  position: fixed; inset: 0; z-index: 60; background: var(--paper);
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 0;
  padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
}
.cook-bar { display: flex; align-items: center; gap: 12px; }
.cook-bar .mono { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.cook-close { margin-left: auto; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink-2); padding: 4px 10px; }
.cook-body { overflow-y: auto; padding: 18px 0; }
.cook-text { font-size: clamp(20px, 4.4vw, 30px); line-height: 1.38; margin: 0; }
.cook-why { margin-top: 16px; font-size: clamp(14px, 2.4vw, 16px); line-height: 1.6; color: var(--ink-2); border-left: 2px solid var(--herb); padding-left: 13px; }
.cook-timer { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
.cook-clock { font-size: clamp(30px, 8vw, 46px); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cook-clock[data-state="done"] { color: var(--ember); }
.cook-timer .btn { margin-left: auto; }
.cook-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; }
body.cooking { overflow: hidden; }







@media (max-width: 420px) {
  .step-controls { grid-template-columns: 1fr 70px 70px; }
}


@media (max-width: 420px) {
  .amt { grid-template-columns: 1fr 66px 104px; }
}

.match { font-family: var(--mono); font-size: 11px; color: var(--herb); }
.match.short { color: var(--ember); }

/* ---------------------------------------------------------------- faults */
.fault { border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.fault + .fault { margin-top: 10px; }
.fault summary { list-style: none; cursor: pointer; padding: 16px; display: flex; align-items: center; gap: 12px; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.fault summary::-webkit-details-marker { display: none; }
.fault summary .n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 400; flex: none; }
.fault summary .chev { margin-left: auto; color: var(--ink-3); transition: transform .25s; flex: none; }
.fault[open] summary .chev { transform: rotate(180deg); }
.fault-a { padding: 0 16px 18px; display: grid; gap: 14px; }
.fault-a section { border-left: 3px solid var(--c); padding-left: 12px; }
.fault-a h5 { margin: 0 0 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); font-weight: 500; }
.fault-a p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.fault-a .cause { --c: var(--f-protein); }
.fault-a .fix { --c: var(--sky); }
.fault-a .hand { --c: var(--herb); }

/* --------------------------------------------------------------- recipe */
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--card); padding: 14px; }
.stat b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.stat span { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

.serve-bar { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); }
.stepper { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair); background: var(--card); font-size: 18px; font-weight: 700; cursor: pointer; }
.stepper button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.stepper output { min-width: 32px; text-align: center; font-size: 18px; font-weight: 800; }

.ing-list { list-style: none; padding: 0; margin: 14px 0 0; }
.ing-list li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; }
.ing-list li b { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 84px; }
.ing-list li em { font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-left: auto; text-align: right; }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 13px; }
.steps li::before {
  content: counter(s); width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; font-family: var(--mono);
}
.steps p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.steps .why { margin-top: 8px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--ember-soft); font-size: 13.5px; line-height: 1.5; color: #7d3313; }
.steps .why b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }

.stars { display: inline-flex; gap: 2px; }
.stars button { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--sand-2); padding: 0 1px; transition: color .15s, transform .15s; }
.stars button.on { color: var(--saffron); }
.stars button:hover { transform: scale(1.16); }

/* the invented dish disclaimer — playful, but honest about being invented */
.invented-note {
  display: inline-block; margin: 14px 0 0; padding: 12px 16px;
  border-radius: var(--r-sm); background: var(--saffron); color: #16150f;
  font-size: 15px; font-weight: 600; line-height: 1.45; max-width: 58ch;
}
a.pk { text-decoration: none; }
a.pk:hover { border-color: var(--ink); }

/* graph pages: ingredient hero, nutrition strip, pair and swap cards */
.ing-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ing-shot {
  width: 118px; height: 118px; flex: none; padding: 3px;
  border-radius: var(--r); border: 1px solid var(--hair);
  background: var(--sand); overflow: hidden;
}
.ing-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r) - 3px); }
.ing-meta { flex: 1 1 320px; min-width: 0; }
.fact-line {
  margin: 14px 0 0; font-family: var(--mono); font-size: 14px; line-height: 1.5;
  color: var(--fc); padding-left: 12px; border-left: 3px solid var(--fc);
}

.nutri { margin-top: 22px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); overflow: hidden; }
.nutri-head {
  display: block; padding: 9px 14px; background: var(--sand);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.nutri-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.nutri-cell { padding: 12px 10px; border-left: 1px solid var(--hair); }
.nutri-cell:first-child { border-left: 0; }
.nutri-cell b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.nutri-cell b small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.nutri-cell span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.sub-head {
  margin: 30px 0 14px; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 9px;
}

.pair-card { border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.pair-card.clash { border-color: #f6c9c3; }
.pair-top {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border-bottom: 1px solid var(--hair); background: var(--sand);
}
.pair-top img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.pair-top b { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.pair-top .go { margin-left: auto; color: var(--ink-3); }
.pair-card p { margin: 0; padding: 13px 14px 15px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* glossary: expert prose, annotated vocabulary */
abbr.term {
  text-decoration: none; border-bottom: 1px dashed var(--sky);
  cursor: help; color: inherit;
}
.glossary {
  margin-top: 22px; padding: 18px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--hair);
}
.glossary dl { margin: 8px 0 0; display: grid; gap: 0; }
.glossary dt {
  font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  padding: 11px 0 2px; border-top: 1px solid var(--hair);
}
.glossary dt:first-of-type { border-top: 0; padding-top: 2px; }
.glossary dd { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 700px) {
  .glossary dl { grid-template-columns: 190px 1fr; column-gap: 22px; }
  .glossary dt { grid-column: 1; }
  .glossary dd { grid-column: 2; border-top: 1px solid var(--hair); padding-top: 11px; margin-bottom: 0; }
  .glossary dt:first-of-type + dd { border-top: 0; padding-top: 2px; }
}

/* an ingredient whose photo has not been shot yet */
.tile img[src$=".svg"], .ing-shot img[src$=".svg"], .pk img[src$=".svg"] { opacity: .45; object-fit: contain; }
.tile img[src$=".svg"] { padding: 22%; }

ul.tick { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 9px; }
ul.tick li { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); padding-left: 17px; position: relative; }
ul.tick li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 2px; border-radius: 2px; background: var(--ember); }

.swaps { display: grid; gap: 10px; }
.swap { border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); padding: 15px 16px; }
.swap-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.swap-from { font-size: 15px; font-weight: 700; color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--hair); }
.swap-arrow { color: var(--ink-3); }
.swap-to { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; color: var(--herb); }
.swap p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

a.pill { text-decoration: none; }
a.pill:hover { background: var(--sand-2); }

@media (max-width: 700px) {
  .nutri-row { grid-template-columns: repeat(3, 1fr); }
  .nutri-cell:nth-child(4) { border-left: 0; }
}

/* --------------------------------------------------------------- science */
.science { border-radius: var(--r); border: 1px solid var(--hair); background: var(--card); padding: 18px; box-shadow: var(--shadow); }
.science h3 { font-size: 18px; margin-bottom: 8px; }
.science p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-2); }
/* the threshold ladder — the centrepiece of a technique page.
   Values sit in the data face against an ember rule, so the page can be skimmed as a
   list of numbers before a word of prose is read. */
.ladder {
  list-style: none; counter-reset: none; margin: 0; padding: 0;
  display: grid; gap: 0; border-top: 1px solid var(--hair);
}
.ladder li {
  display: grid; gap: 2px 18px; align-items: baseline;
  padding: 14px 0 14px 16px; border-bottom: 1px solid var(--hair); position: relative;
}
.ladder li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ember);
}
.ladder b {
  font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--ink);
  letter-spacing: -.01em; white-space: nowrap;
}
.ladder span { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 700px) {
  .ladder li { grid-template-columns: 160px 1fr; padding-left: 18px; }
}

/* reading the same number without an instrument */
.hand-note { border-left: 3px solid var(--herb); }

/* storage and shelf life */
.storage { border-left: 3px solid var(--herb); }
.keep { margin: 12px 0 0; display: grid; gap: 0; }
.keep dt {
  font-size: 14px; font-weight: 700; padding: 10px 0 2px;
  border-top: 1px solid var(--hair);
}
.keep dt:first-of-type { border-top: 0; padding-top: 2px; }
.keep dd {
  margin: 0 0 8px; font-family: var(--mono); font-size: 12.5px;
  color: var(--herb); letter-spacing: .01em;
}
.toss {
  margin: 14px 0 0; padding: 12px 13px; border-radius: var(--r-sm);
  background: #fdecea; border: 1px solid #f6c9c3;
  font-size: 13.5px; line-height: 1.5; color: #8c2318;
}
.toss b {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px;
}

.note-history { border-radius: var(--r); background: var(--ink); color: rgba(255,255,255,.82); padding: 20px; font-size: 15px; line-height: 1.62; }
.note-history h3 { color: #fff; font-size: 18px; margin-bottom: 8px; }
.note-history .eyebrow { color: var(--saffron); }

.crumbs { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- footer */
footer { background: var(--ink); color: rgba(255,255,255,.62); padding: 44px 0 26px; }
.foot-grid { display: grid; gap: 26px; padding-bottom: 30px; }
footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; font-weight: 400; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; }
footer a:hover { color: #fff; }
.foot-brand { color: #fff; margin-bottom: 6px; }
.foot-brand .wordmark { font-size: 26px; }
/* Ember sits too dark on the ink panel to read at this size, so the footer takes a lift. */
.foot-brand .wordmark i { color: #f07a48; }
.foot-slogan {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: rgba(255,255,255,.9); margin: 0 0 10px;
}
.disclaimer { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.4); margin: 0 0 20px; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; }
.sig b { color: #fff; font-weight: 600; }
.sig a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: 3px; }
.sig a:hover { text-decoration-color: #fff; }

/* =========================================================== breakpoints */
@media (min-width: 700px) {
  :root { --gut: 32px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(5, 1fr); }
  .rail { grid-auto-columns: 44%; }
  .doors { grid-template-columns: repeat(3, 1fr); }
  .door { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .door .go { margin: 0; }
  .hero-media { aspect-ratio: 21/9; }
  .hero-copy { margin-top: -13vw; }
  .hero-actions { flex-direction: row; }
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .fault-a { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  :root { --gut: 44px; }
  body { font-size: 17px; }
  .nav-links { display: flex; align-items: center; gap: 2px; margin-left: 18px; }
  .nav-links a { padding: 9px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); transition: background .16s, color .16s; }
  .nav-links a:hover { background: var(--sand); color: var(--ink); }
  .burger, .drawer { display: none; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .tiles { grid-template-columns: repeat(8, 1fr); }
  .rail { grid-auto-columns: 30%; }
  .sec { padding: 88px 0; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; }
  .split-wide { display: grid; grid-template-columns: 1.2fr .8fr; gap: 38px; align-items: start; }
  .ing-shot { width: 190px; height: 190px; padding: 16px; }
  .ing-head { gap: 34px; }
  .hero-media { aspect-ratio: 2.4/1; }
  .hero-copy { margin-top: -9vw; max-width: 780px; }
}

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


/* ------------------------------------------------------------------ consent */
/* Sits above everything, out of the way of the content, and only ever shown once. */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: grid; gap: 12px;
  padding: 16px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--hair);
  box-shadow: var(--shadow-lift);
  animation: consent-in .35s cubic-bezier(.2,.8,.3,1) both;
}
.consent p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes consent-in { from { opacity: 0; transform: translateY(14px); } }
@media (min-width: 760px) {
  .consent { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}

/* Keyboard users reach the content without walking the whole header. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ workshop */
/* The bench header: the atelier still, with the clip fading in over it once it is
   actually on screen. The still is not wasted here the way it was in the hero — this
   is the one place a photograph of a workbench belongs. */
.shop-head { position: relative; padding-bottom: 8px; }
.shop-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--sand); }
.shop-media img, .shop-media video { width: 100%; height: 100%; object-fit: cover; }
.shop-clip { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.shop-clip.on { opacity: 1; }
.shop-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,21,15,.30) 0%, rgba(22,21,15,.05) 42%, rgba(253,252,250,.12) 74%, var(--paper) 100%);
}
.shop-copy { position: relative; z-index: 2; margin-top: -16vw; }
.shop-copy .lede { max-width: 60ch; }

/* the apparatus */
.rig-stage { border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); overflow: hidden; }
.rig-top { padding: 14px 16px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rig-top .mono { color: var(--ink-3); }

.rig { position: relative; padding: 10px 12px 0; }
.rig-svg { display: block; width: 100%; height: auto; }
.rig-svg text { font-family: var(--mono); }
.rig-empty {
  position: absolute; inset: auto 0 14px 0; text-align: center;
  font-size: 14px; color: var(--ink-3); padding: 0 26px; margin: 0;
}

/* A crossed threshold lights up on the instrument and in the legend at the same time,
   so the eye can start at either one and find the other. */
#ticks .tick line { transition: stroke .2s; }
#ticks .tick text { transition: fill .2s, font-weight .2s; }
#ticks .tick.hit line { stroke: var(--ember); }
#ticks .tick.hit text { fill: var(--ember); font-weight: 600; }

.wisp { animation: wisp 3.4s ease-in-out infinite; transform-origin: center bottom; }
.wisp:nth-child(2) { animation-delay: .5s; }
.wisp:nth-child(3) { animation-delay: 1.1s; }
@keyframes wisp {
  0%, 100% { opacity: .25; transform: translateY(4px) scaleY(.9); }
  50%      { opacity: .7;  transform: translateY(-6px) scaleY(1.08); }
}

.bub { animation: bub 1.6s ease-in infinite; }
@keyframes bub {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: .7; }
  100% { transform: translateY(calc(var(--rise, 60px) * -1)); opacity: 0; }
}

/* A single quiet flash when the conclusion changes — enough to notice, not enough to
   turn dragging a slider into a fireworks display. */
.rig.pulse { animation: rig-pulse .5s ease-out; }
@keyframes rig-pulse {
  0%   { background: var(--ember-soft); }
  100% { background: transparent; }
}

.scale { list-style: none; margin: 4px 0 0; padding: 12px 16px 14px; display: grid; gap: 6px; }
.scale li {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13px; color: var(--ink-3);
  padding: 4px 9px; border-radius: 999px; border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.scale li b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; min-width: 40px; }
.scale li.hit { color: var(--ink); background: var(--ember-soft); border-color: #f6d5c3; }
.scale li.hit b { color: var(--ember); font-weight: 600; }

.rig-actions {
  padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--hair);
}
.rig-actions .mono { font-size: 12px; color: var(--ember); }

@media (min-width: 700px) {
  .scale { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .shop-media { aspect-ratio: 21/9; }
  .shop-copy { margin-top: -9vw; }
  .scale { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .wisp, .bub, .rig.pulse { animation: none; }
}

/* ------------------------------------------------------- ingredient search */
.tile-search { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tile-search input {
  flex: 1; min-width: 0;
  padding: 12px 15px; font: inherit; font-size: 15px;
  border-radius: 999px; border: 1px solid var(--hair); background: var(--card); color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color .16s, box-shadow .16s;
}
.tile-search input::placeholder { color: var(--ink-3); }
.tile-search input:focus { outline: none; border-color: var(--ink); box-shadow: var(--shadow-lift); }
.tile-search .mono { font-size: 11.5px; color: var(--ink-3); flex: none; }
.tile-none { text-align: center; color: var(--ink-3); font-size: 14.5px; padding: 30px 0; }

/* Present to a screen reader, absent to the eye. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A source link under a claim. Quiet by default: the claim is the content, the link is
   the receipt for anyone who wants it. */
.src { margin: 10px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; }
.src a { color: var(--ink-3); border-bottom: 1px dotted var(--hair); }
.src a:hover { color: var(--sky); border-bottom-color: var(--sky); }

/* =========================================================================
   THE MANGAL BLOCK

   Only the grill technique page uses these. It is the one page with five
   independent decisions on it, so it needs a jump bar the other pages do not,
   and a genuine table — the meat rows are compared across columns, and a
   column that reflows into a stack can no longer be compared.
   ========================================================================= */

.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--card); color: var(--ink-3);
  transition: color .16s, border-color .16s;
}
.jump a:hover { color: var(--ember); border-color: var(--ember); }

/* Each fuel is a specification before it is an argument: the three numbers a
   cook compares sit at the top in the data face, the prose underneath. */
.fuel-card {
  border-radius: var(--r); border: 1px solid var(--hair); background: var(--card);
  padding: 20px; box-shadow: var(--shadow);
}
.fuel-card h3 { margin-bottom: 12px; }
.fuel-card p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.fuel-spec {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.fuel-spec dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); align-self: center;
}
.fuel-spec dd { margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
/* Deliberately neutral. The warning underneath it is the red one, and two red
   boxes stacked on each other read as one long warning instead of an
   instruction followed by a caution. */
.fuel-when {
  padding: 12px 13px; border-radius: var(--r-sm);
  background: var(--sand); border: 1px solid var(--hair); color: var(--ink-2);
  font-size: 13.5px; line-height: 1.5;
}
.fuel-when b {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}

.table-scroll { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--hair); background: var(--card); }
.grill-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.grill-table th {
  text-align: left; padding: 13px 16px; background: var(--sand);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
  border-bottom: 1px solid var(--hair);
}
.grill-table td { padding: 14px 16px; border-bottom: 1px solid var(--hair); font-size: 14.5px; line-height: 1.5; vertical-align: top; }
.grill-table tbody tr:last-child td { border-bottom: 0; }
.grill-table tbody tr:hover { background: var(--paper); }
/* The internal temperature is the only number on the row that is not negotiable,
   so it is the only one that carries the ember. */
.grill-table td:nth-child(2) { color: var(--ember); white-space: nowrap; }
.grill-table td:nth-child(3) { color: var(--ink-3); white-space: nowrap; }

/* =========================================================================
   DIET VERDICTS

   A dish on a diet hub used to be a bare card: it was on the list, so presumably it
   qualified. The list was wrong seven times out of thirty and the card had no way to
   say how. The card now carries the verdict and, under it, the reason — which form
   of the dish, or what on the packet still has to be read.

   Colour does real work here and none of it is the site's accent, so a verdict never
   competes with the page for attention.
   ========================================================================= */
.pill-as-is        { --pc: var(--herb); }
.pill-with-variant { --pc: var(--sky); }
.pill-caution      { --pc: var(--saffron); }

.verdict-why {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  padding-left: 11px; border-left: 2px solid var(--hair);
}

/* =========================================================================
   SOURCES AND METHOD

   The page that takes the place of the outbound links this site does not give.
   A citation here is a record, not a link, so it is set like one: the kind and
   the weight it carries at the top, the full citation under the title, and the
   date it was read last — which is the part that actually matters, because an
   authority's guidance changes under its own address.
   ========================================================================= */
.sources { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.source-card {
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--card);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.source-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.source-kind, .source-count {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.source-kind  { color: var(--ember); }
.source-count { color: var(--ink-3); flex: none; }

.source-card h3 { margin-bottom: 6px; }
.source-org  { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.source-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.source-meta {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--hair);
  font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3);
}

/* An ingredient with no measured nutrition says so in words. A dash on its own left the
   reader to decide whether it meant zero or unknown, and those are very different. */
.nutri-empty { border-style: dashed; }
.nutri-from {
  margin-left: 8px; padding: 1px 5px; border: 1px solid currentColor;
  font-size: 9px; letter-spacing: .1em; color: var(--ink-3);
}
.nutri-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.nutri-link {
  display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; color: var(--ember);
}

/* =========================================================================
   SCENARIOS

   A scenario page has three jobs the rest of the site does not: it takes real
   amounts as input, it shows a timeline rather than a list, and it says how
   firm its own answer is. Each of those gets its own treatment, and the
   timeline gets the most — because the whole argument for modelling a recipe
   as points in time rather than positions in a list is only visible if the
   page actually shows the time.
   ========================================================================= */
.scenario-inputs { display: grid; gap: 18px; }

.scenario-input { display: grid; gap: 6px; }
.scenario-input-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.scenario-input-head b { font-size: 15px; }
.scenario-input-head output { font-size: 13px; color: var(--ember); }
.scenario-input-range { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; }
.scenario-input input[type="range"] { width: 100%; accent-color: var(--ember); }

.scenario-band {
  margin-top: 22px; padding: 18px 20px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow);
}
.scenario-band h3 { margin: 4px 0 8px; }
.scenario-band p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* The timeline. The minute column is fixed-width so the times line up down the
   page and the gaps between steps are legible as gaps. */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.timeline-step {
  display: grid; grid-template-columns: 84px 1fr; gap: 0 20px;
  padding: 20px 0; border-bottom: 1px solid var(--hair);
}
.timeline-when { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.timeline-when b { font-size: 13px; color: var(--ink); font-weight: 500; }
.timeline-when span { font-size: 11.5px; color: var(--ember); }

/* The one step where the outcome is decided gets a rule down its side. */
.timeline-step.is-critical { background: linear-gradient(90deg, var(--ember-soft), transparent 60%); }
.timeline-step.is-critical .timeline-body { border-left: 2px solid var(--ember); padding-left: 14px; margin-left: -14px; }

.timeline-flag {
  display: inline-block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember);
}
.timeline-text { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.timeline-why  { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.timeline-watch {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--sand); font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.timeline-watch b {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}

@media (max-width: 560px) {
  .timeline-step { grid-template-columns: 1fr; gap: 8px; }
  .timeline-when { flex-direction: row; gap: 10px; }
}