/* Printable food list — the lead magnet the videos point at.
   Same identity as the site, but built so the printed sheet is the point:
   navigation, buttons and the signup form all disappear on paper. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/fraunces-latin-400_700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/plex-latin-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/plex-latin-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/plex-latin-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/plexar-arabic-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/plexar-arabic-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/plexar-arabic-700.woff2') format('woff2');}

:root{
  --bg:#F9F7F7; --surface:#FFFFFF; --surface-2:#FBFCFA;
  --ink:#16211B; --ink-soft:#5A6B60; --ink-faint:#647268;
  --line:#E4E7E2; --line-strong:#CDD2CA;
  --brand:#26533A; --brand-soft:#3E7052; --brand-shadow:#173626; --bad:#9C3B2E;
  --btn:#65DCD5; --btn-top:#7FE4DE; --btn-shadow:#2E9C95; --on-btn:#0B2B29;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'IBM Plex Sans', system-ui, sans-serif;
}
[dir="rtl"]{--font-display:'IBM Plex Sans Arabic', system-ui, sans-serif;
            --font-body:'IBM Plex Sans Arabic', system-ui, sans-serif;}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px 70px;}

.top{display:flex; align-items:center; gap:14px; padding:14px 22px;
  border-bottom:1px solid var(--line); background:var(--surface-2);}
.brand{font-family:var(--font-display); font-optical-sizing:auto; font-weight:700;
  font-size:17px; text-decoration:none; color:var(--ink);}
.langs{margin-inline-start:auto; display:flex; gap:2px; background:var(--surface);
  border:1px solid var(--line); border-radius:99px; padding:3px;}
.langs a{padding:6px 11px; border-radius:99px; text-decoration:none;
  font-size:12.5px; font-weight:700; color:var(--ink-soft); line-height:1;}
.langs a[aria-current]{background:var(--btn); color:var(--on-btn);}

h1{font-family:var(--font-display); font-optical-sizing:auto; font-weight:700;
   font-size:clamp(27px,4.4vw,40px); margin:34px 0 10px; line-height:1.14; text-wrap:balance;}
.lede{font-size:17px; color:var(--ink-soft); max-width:62ch; margin:0 0 20px;}

/* Every button carries a shadow, so it reads as something you press rather
   than a coloured rectangle. Matches the homepage: a hard offset underneath for
   the body of the button, a soft one for the lift, and an inset highlight. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:99px; border:none;
  background:linear-gradient(180deg,var(--btn-top) 0%, var(--btn) 100%);
  color:var(--on-btn); cursor:pointer;
  box-shadow:0 4px 0 var(--btn-shadow), 0 9px 18px rgba(22,33,27,.14),
             inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .12s cubic-bezier(.3,1.4,.5,1), box-shadow .12s ease;
  font-family:var(--font-body); font-size:14.5px; font-weight:700; text-decoration:none;}
.btn:hover{transform:translateY(-2px);
  box-shadow:0 6px 0 var(--btn-shadow), 0 14px 26px rgba(22,33,27,.18),
             inset 0 1px 0 rgba(255,255,255,.5);}
.btn:active{transform:translateY(4px);
  box-shadow:0 0 0 var(--btn-shadow), 0 2px 5px rgba(22,33,27,.16),
             inset 0 2px 5px rgba(22,33,27,.14);}
.btn-primary{background:linear-gradient(180deg,var(--btn-top) 0%, var(--btn) 100%);
  color:var(--on-btn);
  box-shadow:0 4px 0 var(--btn-shadow), 0 10px 22px rgba(22,33,27,.28),
             inset 0 1px 0 rgba(255,255,255,.45);}
.btn-primary:hover{box-shadow:0 6px 0 var(--btn-shadow), 0 15px 30px rgba(22,33,27,.32),
             inset 0 1px 0 rgba(255,255,255,.5);}
.btn-primary:active{box-shadow:0 0 0 var(--btn-shadow), 0 2px 6px rgba(22,33,27,.26),
             inset 0 2px 6px rgba(0,0,0,.16);}

/* The language pills are buttons too. */
.langs{box-shadow:0 1px 2px rgba(22,33,27,.05), 0 2px 8px rgba(22,33,27,.06);}
.langs a[aria-current]{box-shadow:0 1px 0 var(--btn-shadow), 0 2px 6px rgba(22,33,27,.22);}

.cols{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; align-items:start;}
@media (max-width:820px){ .cols{grid-template-columns:1fr;} }
.col{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px;}
.col h2{font-family:var(--font-display); font-optical-sizing:auto; font-weight:700;
  font-size:20px; margin:0 0 4px; display:flex; align-items:center; gap:9px;}
.col h2 em{margin-inline-start:auto; font-style:normal; font-size:14px;
  color:var(--ink-faint); font-family:var(--font-body); font-variant-numeric:tabular-nums;}
.tick{color:var(--brand);} .cross{color:var(--bad);}

.grp{margin-top:17px;}
.grp h3{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; margin:0 0 7px;
  border-bottom:1px solid var(--line); padding-bottom:5px;}
[dir="rtl"] .grp h3{letter-spacing:0;}
.foods{list-style:none; margin:0; padding:0;}
.foods li{display:flex; gap:12px; align-items:baseline; padding:3px 0;
  break-inside:avoid; page-break-inside:avoid;}
.fn{font-weight:600; font-size:14.5px;}
.fq{margin-inline-start:auto; font-size:11.5px; color:var(--ink-faint);
  white-space:nowrap; font-variant-numeric:tabular-nums;}
.fw{margin-inline-start:auto; font-size:11.5px; color:var(--bad); text-align:end; max-width:52%;}
.caution{background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:18px 22px; margin-top:22px;}

.capture{margin-top:32px; background:var(--surface); border:1.5px solid var(--brand);
  border-radius:14px; padding:24px;}
.capture h2{font-family:var(--font-display); font-optical-sizing:auto;
  font-size:21px; margin:0 0 6px;}
.capture p{color:var(--ink-soft); margin:0 0 14px; max-width:56ch;}
.capture form{display:flex; gap:9px; flex-wrap:wrap;}
.capture input[type=email]{flex:1; min-width:220px; padding:12px 15px;
  border:1px solid var(--line); border-radius:99px; font-family:var(--font-body); font-size:15px;}
.hp{position:absolute; width:1px; height:1px; overflow:hidden;
     clip-path:inset(50%); white-space:nowrap;}

.safety{margin-top:28px; font-size:12.5px; color:var(--ink-soft);
  border-inline-start:3px solid var(--line); padding-inline-start:14px; max-width:80ch;}
.more{margin-top:20px; font-size:14px;}
.more a{color:var(--brand); font-weight:600;}

/* On paper the list is the product: strip everything that isn't it. */
@media print{
  @page{ margin:12mm; }
  body{background:#FFF; font-size:10.5pt; line-height:1.35;}
  .top,.langs,.print,.capture,.more{display:none !important;}
  .wrap{max-width:none; padding:0;}
  h1{font-size:19pt; margin:0 0 4pt;}
  .lede{font-size:9.5pt; margin-bottom:10pt;}
  .cols{grid-template-columns:1fr 1fr; gap:10mm; margin-top:6pt;}
  .col,.caution{border:none; padding:0; background:none;}
  .col h2{font-size:12.5pt;}
  .grp{margin-top:9pt; break-inside:avoid;}
  .grp h3{font-size:8pt;}
  .fn{font-size:9.5pt;} .fq,.fw{font-size:8pt;}
  .safety{font-size:7.5pt; margin-top:10pt; border:none; padding:0;}
  a[href]::after{content:"";}
}

/* Generated from the manuscripts by book-source/build_site_facts.py — the
   chapter list is the book's own table of contents, in the reader's language. */
.bookfacts{margin:18px 0 0; padding-left:1.35em; columns:2; column-gap:38px;}
.bookfacts li{margin:0 0 9px; color:var(--ink-soft); font-size:15.5px; break-inside:avoid;}
[dir="rtl"] .bookfacts{padding-left:0; padding-right:1.35em;}
@media (max-width:640px){ .bookfacts{columns:1;} }