/* indike.org/diet — on top of /assets/style.css */
:root {
  --toc-w: 28rem;
  --article-w: 42rem;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* headings in the same face as the text: Iowan/Georgia/Palatino lack ṅ ḍ ṃ ṣ, which then come from another font */
  --display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --paper: #fdfbf7;
  --ink-soft: #3a3631;
  --saffron: #b5510c;
  --saffron-deep: #8a3b12;
  --saffron-wash: #fbf2e6;
  --saffron-line: rgba(181, 81, 12, 0.26);
  --hair: rgba(60, 45, 30, 0.12);
  --green: #4f7f3a;
  --card: #ffffff;
}

body.diet { background: var(--paper); }
.diet .site-header { background: rgba(253, 251, 247, 0.9); }

img { max-width: 100%; height: auto; display: block; }

.site-title-sep { color: var(--muted); }
.site-header a.site-title-diet { color: var(--saffron); font-weight: 600; }

.diet a { text-decoration-color: var(--saffron-line); }
.diet a:hover { color: var(--saffron-deep); text-decoration-color: var(--saffron); }
.diet ::selection { background: #f6d9b4; }

/* article + contents panel; the panel's width is adjustable (--toc-w, set by diet.js) */
.diet .site-header-inner,
.diet main.diet-shell { width: min(calc(100% - 2rem), calc(var(--article-w) + 3rem + var(--toc-w))); }

.diet-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toc-w);
  gap: 3rem;
  align-items: start;
}

.diet-article { max-width: var(--article-w); min-width: 0; overflow-wrap: break-word; }

.ic { width: 1.3em; height: 1.3em; flex: none; vertical-align: -0.28em; }
.diet-article p, .diet-article li { font-size: 1.07rem; color: var(--ink-soft); }
.diet-article { font-variant-numeric: oldstyle-nums proportional-nums; hanging-punctuation: first; }
.diet-article strong, .diet-article b { color: var(--ink); font-weight: 650; }

/* ---------- head */
.diet-head { margin: 2.4rem 0 2.6rem; }

.diet-kicker {
  margin: 0 0 1.8rem;
  max-width: 46ch;
  font-style: italic;
  color: #5d564e;
  font-size: 1.12rem;
  line-height: 1.6;
}

.diet-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5.2vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  font-weight: 650;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

.diet-title span { color: var(--saffron); }

.diet-title::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-top: 1.5rem;
  background: var(--saffron);
}

.diet-byline { margin: 1.1rem 0 0; font-style: italic; color: #7a736a; font-size: 1rem; }

.hero-icons { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.hero-icons .ic { width: 1.75rem; height: 1.75rem; transition: transform 200ms ease; }
.hero-icons .ic:hover { transform: translateY(-3px) rotate(-6deg); }

.diet-warning {
  margin: 0 0 2.2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  font-family: var(--body);
  font-style: italic;
  font-size: 1rem !important;
  line-height: 1.6;
  text-align: center;
  color: #6b4a2b !important;
}

/* the opening list of slop-peddlers */
.diet-article ul.slop-list { margin: 0.2rem 0 1.4rem; padding: 0; list-style: none; }
.diet-article .slop-list li { position: relative; padding-left: 1.5rem; }
.diet-article .slop-list li + li { margin-top: 0.55rem; }
.slop-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.72em;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--saffron);
  transform: rotate(45deg);
}

/* drop cap on the opening paragraph: two lines deep */
.diet-warning + p::first-letter {
  float: left;
  margin: 0.12em 0.08em 0 0;
  font-family: var(--display);
  font-size: 3.35em;
  line-height: 0.8;
  font-weight: 600;
  color: var(--saffron);
}
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .diet-warning + p::first-letter {
    float: none;
    margin: 0 0.12em 0 0;
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 2;
    initial-letter: 2;
  }
}

/* ---------- headings */
.diet-article h2,
.diet-article h3 {
  font-family: var(--display);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

.diet-article h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 1.2rem;
  font-size: 1.95rem;
  font-weight: 600;
  scroll-margin-top: 5rem;
}

/* sections are set apart by a small ornament rather than boxes */
.diet-article > section:not(.footnotes):not(.part) { margin-top: 3.6rem; }
.diet-article > section:not(.footnotes):not(.part)::before {
  content: "";
  display: block;
  height: 9px;
  margin: 0 0 3.2rem;
  background:
    linear-gradient(var(--hair), var(--hair)) left 50% / calc(50% - 1.1rem) 1px no-repeat,
    linear-gradient(var(--hair), var(--hair)) right 50% / calc(50% - 1.1rem) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%23b5510c'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}

.diet-article h3 { margin: 2.4rem 0 0.75rem; font-size: 1.32rem; font-weight: 600; scroll-margin-top: 5rem; }

.diet-article section { scroll-margin-top: 5rem; }

.sec-mark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1.5px solid var(--saffron);
  border-radius: 50%;
  color: var(--saffron);
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(-0.25rem);
}

.sec-mark-wide {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  transform: none;
  color: var(--ink);
  font-size: inherit;
  font-style: normal;
}

.best-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.8rem; align-items: center; overflow-wrap: anywhere; }
.best-h > :not(.best-ic) { grid-column: 2; }
.best-ic { grid-row: span 2; display: flex; gap: 0.1rem; }
.best-ic .ic { width: 2.2rem; height: 2.2rem; }
.h3-ic { width: 1.6rem; height: 1.6rem; margin-right: 0.4rem; vertical-align: -0.3rem; }
.best-tag {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--saffron);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- lists */
.diet-article ul { padding-left: 1.3rem; }
.diet-article ul li::marker { color: var(--saffron); }
.diet-article li + li { margin-top: 0.3rem; }

.tiles {
  list-style: none;
  counter-reset: tile;
  margin: 1.6rem 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.2rem;
}

.diet-article .tiles li {
  counter-increment: tile;
  margin: 0;
  padding: 1.1rem 0 1.15rem;
  border-top: 1px solid var(--hair);
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink);
}

.diet-article .tiles li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.25rem 0.85rem; }
.tile-ic { display: flex; gap: 0.15rem; grid-row: span 2; }
.tile-ic .ic { width: 2.1rem; height: 2.1rem; }
.tile-text::before {
  content: counter(tile, upper-roman);
  display: block;
  margin-bottom: 0.15rem;
  color: var(--saffron);
  font-family: var(--display);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.diet-article ul.ic-list { list-style: none; padding: 0; }
.diet-article .ic-list li { display: flex; align-items: flex-start; gap: 0.7rem; }
.ic-list .ic { width: 1.6rem; height: 1.6rem; margin-top: 0.05rem; }

.tiles small { display: block; margin-top: 0.3rem; color: #7a736a; font-family: var(--body); font-style: italic; font-size: 0.9rem; }

.minor { color: #7a736a !important; font-style: italic; font-size: 1rem !important; }

.pull-ic { display: block; width: 1.7rem; height: 1.7rem; margin: 0 auto 0.7rem; }
.pull {
  margin: 2.4rem 0;
  padding: 0 1.5rem;
  border: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 1.42rem !important;
  line-height: 1.42;
  font-style: italic;
  color: var(--ink) !important;
  text-wrap: balance;
}

.bad-list {
  counter-reset: bad;
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}

.diet-article .bad-list li {
  counter-increment: bad;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0.7rem 0.1rem;
  border-bottom: 1px solid var(--hair);
}

.diet-article .bad-list li { align-items: center; }
.bad-ic { position: relative; display: flex; gap: 0.1rem; min-width: 3.3rem; }
.bad-ic .ic { width: 1.6rem; height: 1.6rem; }
.bad-ic::after {
  content: "";
  position: absolute;
  left: -0.15rem;
  top: 50%;
  width: 1.9rem;
  height: 1.5px;
  background: rgba(176, 52, 28, 0.75);
  transform: rotate(-35deg);
  border-radius: 1px;
}

.swaps { margin: 1.1rem 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.swaps > div { display: grid; grid-template-columns: 6.3rem 1fr; gap: 0 0.9rem; align-items: start; padding: 1rem 0.1rem; border-bottom: 1px solid var(--hair); }
.swaps > div > dt, .swaps > div > dd { grid-column: 2; }
.swap-ic { grid-row: span 2; display: flex; align-items: center; gap: 0.25rem; }
.swap-ic .ic { width: 1.55rem; height: 1.55rem; }
.swap-from .ic { filter: grayscale(1); opacity: 0.45; }
.swap-arrow { color: var(--saffron); font-family: var(--display); font-size: 0.95rem; }
.swaps dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; font-weight: 600; color: var(--ink); }
.swaps .from { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: rgba(164, 58, 29, 0.55); }
.swaps .arrow { color: var(--saffron); font-family: var(--display); }
.swaps .to small { font-weight: 400; color: var(--muted); }
.swaps dd { margin: 0.35rem 0 0; font-size: 1rem; color: var(--ink-soft); }

.whine {
  margin: 1.6rem 0 1.4rem;
  padding: 0 0 0 1.3rem;
  border-left: 2px solid var(--saffron-line);
  background: none;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: #5d564e;
}

.points { margin: 0; padding: 0; list-style: none; }
.diet-article .points li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 0.9rem; margin-top: 1.6rem; }
.point-ic { grid-row: span 2; padding-top: 0.1rem; }
.point-ic .ic { width: 2.2rem; height: 2.2rem; }
.diet-article .points h3 { margin: 0.2rem 0 0.35rem; font-size: 1.17rem; }

.callout {
  padding: 1rem 1.2rem;
  border-radius: 0.2rem;
  background: var(--saffron-wash);
  border: 0;
  border-left: 2px solid var(--saffron);
}

.amla { color: var(--green); }
.hl-green { color: var(--green); font-weight: 600; }

.finale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 3rem 0 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  text-align: center;
  font-family: var(--display);
  font-size: 1.5rem !important;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--saffron-deep) !important;
}

/* ---------- macro diagram */
.macro-chart {
  margin: 1.8rem 0;
  display: grid;
  gap: 0.55rem;
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
}

.macro {
  padding: 0.85rem 0.85rem 0.8rem;
  border-radius: 0.35rem;
  border: 1px solid var(--hair);
  background: var(--card);
}

.macro-carbs { border-top: 2px solid #e9b67c; }
.macro-protein { border-top: 2px solid #c9773a; }
.macro-fats { border-top: 2px solid #8a3b12; }

.macro-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0.2rem 0.55rem;
}

.macro-head span .ic, .macro-cell .ic { width: 1.5rem; height: 1.5rem; margin-right: 0.35rem; }
.macro-cell .ic { margin: 0 0 0.15rem; }
.ic-pair { display: flex; gap: 0.15rem; }
.ic-pair .ic { margin: 0 0 0.15rem; }
.macro-head span {
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.macro-head b,
.macro-cell b {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--saffron-deep);
}

.macro-protein .macro-head { margin-bottom: 0; }
.diet-article .macro-note { margin: 0.15rem 0.2rem 0; font-family: var(--body); font-size: 0.9rem; color: #6b4a2b; }

.macro-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; }

.macro-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 3.6rem;
  padding: 0.65rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--paper);
  border: 0;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.macro-cell small { font-family: var(--body); font-weight: 400; font-size: 0.8rem; color: var(--muted); }

.macro-pufa { padding: 0.5rem; background: transparent; border: 1px dashed var(--hair); justify-content: flex-start; }
.macro-pufa .macro-row { width: 100%; }
.macro-pufa .macro-cell { min-height: 2.9rem; background: var(--paper); }
.macro-sub { margin-bottom: 0.4rem; font-size: 0.92rem; }

.macro-other .macro-cell { background: transparent; border: 1px solid var(--hair); color: #6b6560; font-family: var(--sans); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82rem; font-weight: 600; }

.grams {
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr;
  gap: 0;
  margin: 1.2rem 0 1.3rem;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.grams > div {
  padding: 0.9rem 1.1rem 1rem;
  border: 0;
  background: none;
}
.grams > div + div { border-left: 1px solid var(--hair); }

.grams b { display: block; font-family: var(--display); font-size: 1.85rem; font-weight: 500; line-height: 1.1; color: var(--saffron-deep); font-variant-numeric: lining-nums; }
.grams span { color: #7a736a; font-style: italic; }
.diet-article .grams ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.diet-article .grams li { font-size: 0.95rem; margin: 0; }

/* ---------- food groups */
.groups { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.4rem; font-size: 1.04rem; }
.groups th, .groups td { padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; color: var(--ink-soft); }
.groups tr:first-child th, .groups tr:first-child td { border-top: 1px solid var(--hair); }
.groups th { width: 42%; font-family: var(--display); font-weight: 600; color: var(--ink); }
.fg-ic { display: inline-flex; width: 2.1rem; vertical-align: top; }
.fg-ic .ic { width: 1.4rem; height: 1.4rem; margin-top: 0.05rem; }
.row-note { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.92rem; }
.diet-article .row-notes { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.diet-article .row-notes li { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.25rem 0 0; color: #7a736a; font-size: 0.95rem; line-height: 1.45; }
.diet-article .row-notes li::before { content: ""; flex: none; width: 0.32rem; height: 0.32rem; margin-top: 0.6rem; border-radius: 50%; background: var(--saffron); }
.rn-ic { flex: none; display: flex; width: 3.3rem; }
.row-notes .ic { width: 1.35rem; height: 1.35rem; margin-top: -0.05rem; }
.row-notes .ic + .ic { margin-left: -0.35rem; }

/* ---------- figures */
.chart { margin: 1.8rem 0 2rem; }
.chart img { width: 100%; }
.chart figcaption,
.maps figcaption {
  margin-top: 0.6rem;
  color: #847c72;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.45;
}

.maps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; }
.maps figcaption { grid-column: 1 / -1; margin-top: 0; }

.videos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 1.3rem 0 1.8rem; }

.video {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0.3rem;
  text-decoration: none;
  background: transparent;
  transition: transform 180ms ease;
}

.video:hover { transform: translateY(-2px); }
.video:hover img { box-shadow: 0 8px 22px rgba(60, 40, 20, 0.16); }
.video img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: 0.3rem; box-shadow: 0 2px 10px rgba(60, 40, 20, 0.08); transition: box-shadow 180ms ease; }
.video span { display: flex; flex-direction: column; padding: 0.55rem 0.1rem 0; }
.video b { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.video small { color: #847c72; font-family: var(--sans); font-size: 0.82rem; }

/* ---------- meals */
.meals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1.6rem 0 1.8rem; }

.meal {
  padding: 1.2rem 1.4rem 1.15rem;
  border: 1px solid var(--hair);
  border-radius: 0.35rem;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.03);
}

.meal-ic { display: flex; gap: 0.2rem; float: right; margin: -0.2rem 0 0 0.5rem; }
.meal-ic .ic { width: 1.7rem; height: 1.7rem; }
.diet-article .meal h3 { margin: 0 0 0.85rem; font-size: 1.22rem; line-height: 1.25; font-weight: 600; }
.meal h3 span { display: block; color: var(--saffron); font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.25rem; }
.diet-article .meal ul { margin: 0; padding-left: 1.05rem; }
.diet-article .meal li { font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.meal:last-child { grid-column: 1 / -1; }
.diet-article .meal ul.ing { list-style: none; padding: 0; }
.diet-article .meal .ing li { display: flex; align-items: flex-start; gap: 0.5rem; }
.diet-article .meal .ing li + li { margin-top: 0.45rem; }
.ing-ic { flex: none; display: flex; justify-content: flex-end; gap: 0.1rem; width: 4.1rem; }
.ing-ic .ic { width: 1.25rem; height: 1.25rem; margin-top: 0.02rem; }

/* ---------- part 2 */
.part { margin-top: 5rem; padding-top: 3.2rem; border-top: 1px solid var(--hair); position: relative; }
.part::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--saffron);
  transform: rotate(45deg);
  box-shadow: 0 0 0 6px var(--paper);
}
.diet-article .part-title { display: block; margin: 0 auto; max-width: 30ch; text-align: center; font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 600; }
.diet-article .part h3 { font-size: 1.55rem; margin-top: 3rem; }
.also { margin-top: -0.35rem; color: #847c72 !important; font-family: var(--sans); font-size: 0.85rem !important; font-style: normal; }
.tweet-list { padding-left: 1.5rem; }
.tweet-list li::marker { color: var(--saffron); font-family: var(--display); font-weight: 600; font-variant-numeric: lining-nums; }
.tweet-lines { margin: 1.3rem 0; padding-left: 1.3rem; border-left: 2px solid var(--saffron-line); }
.tweet-lines p { margin-bottom: 0.45rem; }
.mock { font-family: var(--mono); font-size: 0.95em; }

/* ---------- footnotes */
.fn-ref { line-height: 0; font-family: var(--sans); font-size: 0.7em; font-weight: 600; font-variant-numeric: lining-nums; }
.fn-ref a { color: var(--saffron); text-decoration: none; padding: 0 0.1em; }
.fn-ref a:hover { text-decoration: underline; }

.footnotes { margin-top: 4.5rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); color: #5d564e; }
.diet-article .footnotes h2 { display: block; margin: 0 0 0.9rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #847c72; }
.footnotes ol { padding-left: 1.4rem; }
.footnotes li::marker { color: var(--saffron); font-family: var(--sans); font-size: 0.85rem; font-weight: 600; }
.diet-article .footnotes p, .diet-article .footnotes li { font-size: 0.96rem; color: #5d564e; }
.footnotes li { scroll-margin-top: 5rem; }
.footnotes li:target { background: var(--saffron-wash); border-radius: 0.4rem; }
.fn-back { text-decoration: none; color: var(--saffron); }

.fn-pop {
  position: absolute;
  z-index: 30;
  max-width: min(26rem, calc(100vw - 1.5rem));
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--hair);
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 14px 34px rgba(60, 40, 20, 0.16);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.fn-pop p { margin: 0 0 0.5rem; }
.fn-pop p:last-child { margin-bottom: 0; }
.fn-pop .fn-back { display: none; }


/* ---------- carousels (swipe, arrows, tabs) */
.carousel { margin: 1.8rem 0 2.1rem; }
.car-tabs { display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 0.8rem; padding: 0 0.1rem; border-bottom: 1px solid var(--hair); }
.car-tabs::-webkit-scrollbar { display: none; }
.car-tab {
  flex: none;
  margin-bottom: -1px;
  padding: 0.35rem 0 0.5rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: #7a736a;
  font: 500 0.88rem/1.2 var(--sans);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.car-tab:hover { color: var(--saffron-deep); }
.car-tab[aria-selected="true"] { border-bottom-color: var(--saffron); color: var(--ink); font-weight: 600; }
.car-view { position: relative; }
.car-track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border: 1px solid var(--hair);
  border-radius: 0.35rem;
  background: #fff;
  outline: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { border-color: var(--saffron); }
.car-slide { flex: 0 0 100%; scroll-snap-align: start; padding: 0.9rem 0.8rem 0.6rem; }
.car-slide img { width: 100%; }
.diet-article .car-cap { margin: 0.4rem 0 0; text-align: center; font: 600 0.92rem/1.4 var(--sans); color: var(--ink); }
.car-cap span { font-weight: 400; color: var(--muted); }
.car-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-top: -1.15rem;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.12);
  color: var(--saffron);
  font: 400 1.5rem/1 var(--display);
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease;
}
.car-arrow:hover { transform: scale(1.06); }
.car-arrow[disabled] { opacity: 0; pointer-events: none; }
.car-prev { left: -1.15rem; }
.car-next { right: -1.15rem; }
.carousel figcaption { margin-top: 0.6rem; color: #847c72; font-size: 0.88rem; font-style: italic; }

/* ---------- contents: a summary of the whole thing */
.diet-toc { position: sticky; top: 4.4rem; align-self: start; margin-top: 0.4rem; }
.diet-toc-inner {
  max-height: calc(100vh - 5.2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.3rem 0.5rem 1.4rem 1.7rem;
  scrollbar-width: thin;
  scrollbar-color: #e2ddd6 transparent;
}
.diet-toc h2 { margin: 0; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.toc-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.45rem;
  width: 0.9rem;
  cursor: col-resize;
  touch-action: none;
}
.toc-resize::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.45rem;
  width: 1px;
  background: var(--line);
  transition: background-color 140ms ease, width 140ms ease;
}
.toc-resize::after {
  content: "";
  position: absolute;
  top: 2.2rem;
  left: 0.2rem;
  width: 0.5rem;
  height: 2.4rem;
  border-radius: 999px;
  background: #d9d3cb;
  opacity: 0;
  transition: opacity 140ms ease;
}
.diet-toc:hover .toc-resize::after, .toc-resize:focus-visible::after, .is-resizing .toc-resize::after { opacity: 1; }
.toc-resize:hover::before, .toc-resize:focus-visible::before, .is-resizing .toc-resize::before { width: 2px; background: var(--saffron); }
.is-resizing, .is-resizing * { cursor: col-resize !important; user-select: none; }

.toc { font-family: var(--sans); color: #3d3a36; }
.toc ol, .toc ul { list-style: none; margin: 0; padding: 0; }
.toc a { text-decoration: none; color: inherit; }
.toc .ic { width: 1.4em; height: 1.4em; }

.toc-part {
  display: flex;
  gap: 0.55rem;
  margin: 0 0 0.4rem;
  padding-left: 0.55rem;
  font: 700 0.74rem/1.45 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink) !important;
}
.toc-part + .toc-secs { margin-bottom: 1.2rem; }
.toc-secs + .toc-part { padding-top: 1rem; border-top: 1px solid var(--line); }
.toc-num { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: italic 600 0.8rem/1 var(--display); letter-spacing: 0; }

.toc-sec { padding: 0.55rem 0 0.15rem; }
.toc-sec + .toc-sec { border-top: 1px solid rgba(60, 45, 30, 0.07); }
.toc-h { display: flex; align-items: center; gap: 0.55rem; padding-left: 0.55rem; font-size: 0.98rem; font-weight: 600; line-height: 1.3; color: var(--ink) !important; }
.toc-h .ic { width: 1.35em; height: 1.35em; margin-right: 0.3rem; vertical-align: -0.3em; }
.toc-letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1.25px solid var(--saffron);
  border-radius: 50%;
  background: transparent;
  color: var(--saffron);
  font: italic 600 0.84rem/1 var(--display);
}
.toc-letter-blank { background: transparent; width: 0; margin-right: -0.55rem; }

.toc-rows { margin: 0.4rem 0 0.3rem 0 !important; }
.toc-swaps .ti { width: auto; margin-left: 0; }
.toc-rows a { display: flex; align-items: flex-start; gap: 0; padding: 0.22rem 0.35rem; margin-left: -0.35rem; border-radius: 0.4rem; font-size: 0.88rem; line-height: 1.35; }
.toc-rows .ti { flex: none; display: flex; justify-content: flex-end; gap: 0.1rem; width: 2.6rem; padding-right: 0.5rem; }
.toc-rows .ti .ic { margin-top: -0.05rem; }
.toc-chips li { display: flex; }
.toc-rows b { font-weight: 600; color: var(--ink); }

.toc-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.45rem 0 0.35rem 2.6rem !important; }
.toc-chips a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem 0.2rem 0.4rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
}
.toc-bads li { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 0.4rem; }
.toc-bads li > a { margin-left: 0; }
.toc-bads .toc-bad-item { margin-left: -0.35rem; }
.toc-bads .toc-bad-item > span:last-child { color: var(--green); }
.toc-bads .sw-arrow { padding-top: 0.2rem; line-height: 1.35; }
.toc-good { display: inline-flex !important; gap: 0.3rem !important; color: var(--saffron) !important; }
.toc-good .ic { margin-top: -0.05rem; }
.toc-good:hover { background: var(--saffron-wash) !important; }
.toc-bads .toc-bad-item:hover { background: #eef5e9; }

.toc-more { margin: 0.25rem 0 0.3rem 2.6rem; }
.toc-more summary { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; font-size: 0.88rem; font-weight: 600; color: #4f7f3a; }
.toc-more summary::-webkit-details-marker { display: none; }
.toc-more summary::before { content: "▸"; font-size: 0.75rem; transition: transform 140ms ease; }
.toc-more[open] > summary::before { transform: rotate(90deg); }
.toc-more .toc-rows { margin-left: -1.2rem !important; }
.toc-swaps a { gap: 0.25rem; }
.toc-swaps a { font-size: 0.84rem; }
.toc-swaps .ic:first-child { filter: grayscale(1); opacity: 0.5; }
.sw-arrow { color: var(--saffron); font-family: var(--display); font-size: 0.85rem; }

.toc a:hover { color: var(--saffron-deep); }
.toc-rows a:hover, .toc-chips a:hover { background: var(--saffron-wash); }
.toc-chips a:hover { border-color: var(--saffron-line); }
.toc a.is-current { color: var(--saffron-deep) !important; }
.toc-rows a.is-active, .toc-chips a.is-active { background: var(--saffron-wash); color: var(--saffron-deep); box-shadow: inset 2px 0 0 var(--saffron); }
.toc-chips a.is-active { box-shadow: none; border-color: var(--saffron); }
.toc-h.is-active { color: var(--saffron) !important; }

.diet-toc-inline { display: none; }

/* ---------- small screens */
@media (max-width: 1000px) {
  .diet .site-header-inner, .diet main.diet-shell { width: min(calc(100% - 2rem), calc(var(--article-w) + 2rem)); }
  .diet-shell { display: block; }
  .diet-toc { display: none; }
  .diet-toc-inline {
    display: block;
    margin: 0 0 1.6rem;
    border: 1px solid var(--hair);
    border-radius: 0.35rem;
    background: var(--card);
  }
  .diet-toc-inline > summary {
    cursor: pointer;
    padding: 0.8rem 1rem;
    font: 600 0.8rem/1 var(--sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .diet-toc-inline [data-toc-copy] { padding: 0.2rem 1rem 1rem; max-height: 75vh; overflow-y: auto; }
  .car-prev { left: 0.3rem; }
  .car-next { right: 0.3rem; }
}

@media (max-width: 640px) {
  .diet .site-header-inner, .diet main.diet-shell { width: calc(100% - 1.2rem); }
  .tiles, .meals, .videos, .maps { grid-template-columns: minmax(0, 1fr); }
  .grams { grid-template-columns: 1fr 1fr; }
  .grams-fat { grid-column: 1 / -1; }
  .diet-article h2 { font-size: 1.55rem; gap: 0.6rem; }
  .sec-mark { width: 1.85rem; height: 1.85rem; font-size: 1rem; }
  .sec-mark-wide { width: auto; height: auto; }
  .tiles { gap: 0; }
  .grams > div { padding: 0.8rem 0.7rem; }
  .macro-cell { font-size: 0.9rem; padding: 0.5rem 0.3rem; }
  .macro-fats > .macro-row { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .macro-fats > .macro-row > .macro-pufa { grid-column: 1 / -1; }
  .groups th { width: 46%; }
  .swaps > div { grid-template-columns: 1fr; }
  .swaps > div > dt, .swaps > div > dd { grid-column: 1; }
  .swap-ic { grid-row: auto; margin-bottom: 0.4rem; }
  .car-slide { padding: 0.6rem 0.3rem 0.5rem; }
  .car-arrow { width: 2rem; height: 2rem; margin-top: -1rem; font-size: 1.3rem; }
  .toc-chips, .toc-more { margin-left: 0 !important; }
  .best-ic .ic { width: 1.7rem; height: 1.7rem; }
  .tile-ic .ic { width: 1.9rem; height: 1.9rem; }
}

.diet-article [id] { scroll-margin-top: 5rem; }

/* ---------- camera: contents as an image */
.toc-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.8rem; }
.toc-top-inline { justify-content: flex-end; margin: -0.2rem 0 0.4rem; }
.toc-snap {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: #fff;
  color: #6b6762;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.toc-snap svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.toc-snap:hover, .toc-snap:focus-visible { color: var(--saffron); border-color: var(--saffron-line); background: var(--saffron-wash); }
.toc-snap.is-busy { opacity: 0.5; cursor: progress; }

html.snap-open { overflow: hidden; }
.snap-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(23, 20, 17, 0.55);
  backdrop-filter: blur(3px);
}
.snap-dialog {
  display: flex;
  flex-direction: column;
  width: min(820px, 100%);
  max-height: calc(100vh - 2rem);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.snap-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); }
.snap-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--ink);
  font: 500 0.85rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.snap-btn:first-child { background: var(--saffron); border-color: var(--saffron); color: #fff; }
.snap-btn:first-child:hover { background: var(--saffron-deep); color: #fff; }
.snap-btn:hover { border-color: var(--saffron-line); color: var(--saffron-deep); }
.snap-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snap-close { margin-left: auto; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 400 1.5rem/1 var(--sans); cursor: pointer; }
.snap-close:hover { background: #f1efeb; color: var(--ink); }
.snap-stage { overflow: auto; background: #efebe5; padding: 1rem; }
.snap-stage img { display: block; width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); }
.snap-close:focus:not(:focus-visible) { outline: none; }