/* Persian.restaurant — stylesheet
   Build: PR-2026-08-13-P20

   ONE PLACE TO CHANGE THINGS
   Everything visual is a custom property in the :root block below. Change a
   font stack or a colour there and it cascades through every one of the
   1,700 pages. No rule below hard-codes a colour, a font family or a size
   step; if you find one that does, it is a bug.

   Persian overrides live in the [dir="rtl"] block: the display face, the
   letter-spacing and the uppercasing all switch there, because none of the
   three are appropriate for Arabic script.

   Mobile-first: base rules target the 320 px column. Media queries only ever
   add, never undo. */

@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Faustina";src:url("fonts/Faustina-var.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  /* --- text colours. Every one is contrast-checked against --color-paper.
         Ratios in comments; do not introduce a text colour below 4.5:1. --- */
  --color-ink:#0E2A2C;            /* 13.5:1  body text                */
  --color-ink-2:#3C5457;          /*  7.2:1  secondary text           */
  --color-primary:#1E625D;        /*  6.3:1  links, primary controls  */
  --color-primary-strong:#12403D;
  --color-accent-text:#8C6209;    /*  4.9:1  accent text, focus ring  */
  --color-alert:#8E2C3B;          /*  7.3:1  reference-only marker    */

  /* --- surfaces --- */
  --color-paper:#F5F2EA;
  --color-card:#FFFDF8;
  --color-rule:#DED7C7;
  --color-inverse:#F5F2EA;        /* text on --color-ink              */
  --color-inverse-2:#CFD8D6;      /* footer body on --color-ink       */
  --color-inverse-3:#A9B8B6;      /* footer fine print                */
  --color-white:#fff;
  --color-tile-fallback:#EDE7D8;

  /* --- decorative only. Never use these for text. --- */
  --color-accent:#D5A021;         /*  2.1:1 on paper — ornament only  */
  --color-deco-lapis:#1B3A8C;
  --color-deco-turquoise:#2E9CB8;

  /* map density ramp, tinted from --color-primary */
  --map-1:#DCE6E4;
  --map-2:#B6CECB;
  --map-3:#7FA9A5;
  --map-4:#3F7C77;

  /* --- type --- */
  --font-body:"Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display-latin:"Faustina","Vazirmatn",Georgia,serif;
  --font-display:var(--font-display-latin);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --weight-display:600;
  --tracking-display:-0.01em;
  --tracking-caps:.09em;
  --caps-transform:uppercase;

  --size-step:clamp(1rem,0.94rem + 0.3vw,1.0625rem);
  --size-small:.875rem;
  --size-fine:.8125rem;
  --size-micro:.75rem;
  --size-h1:clamp(1.75rem,1.35rem + 2vw,2.75rem);
  --size-h2:clamp(1.25rem,1.1rem + .8vw,1.6rem);
  --size-h3:1.0625rem;
  --leading:1.65;
  --leading-tight:1.2;

  /* --- layout --- */
  --measure:38rem;
  --page:72rem;
  --gap:clamp(1rem,3vw,1.75rem);
  --space-section:clamp(1.75rem,5vw,2.75rem);
  --radius:3px;
  --tap:44px;
  --ad-min:96px;
  --ad-min-live:280px;
  --tile-size:120px;
  --tile-hero-h:clamp(170px,26vw,300px);
}

[dir="rtl"]{
  /* Faustina has no Arabic. Letter-spacing and uppercasing are Latin
     typographic devices and are switched off rather than reduced. */
  --font-display:var(--font-body);
  --weight-display:700;
  --tracking-display:0;
  --tracking-caps:0;
  --caps-transform:none;
}

*,*::before,*::after{box-sizing:border-box}
/* At 400% text a rem-sized box can exceed the viewport and force horizontal
   scrolling, which WCAG 1.4.10 forbids. Nothing may be wider than the
   viewport; long words break only in Latin, where breaking is safe. */
body,main,section,article,figure,table,ul,ol,dl,p,div{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--size-step);line-height:var(--leading);
}
/* Arabic script must never break inside a word: the shaper keeps the joining
   across the break and the last letter on the line renders in medial form.
   Latin gets break-word; Persian gets word boundaries only, and long URLs
   opt in explicitly with .brk. */
/* "anywhere", not "break-word": only the former reduces a box's min-content
   size, which is what lets grid and flex tracks shrink below a long word at
   extreme text sizes. Latin only -- breaking Arabic mid-word corrupts the
   letter forms. */
[dir="ltr"] body,[dir="ltr"]{overflow-wrap:anywhere}
[dir="rtl"] body,[dir="rtl"]{overflow-wrap:normal;word-break:normal}
.brk{overflow-wrap:anywhere;word-break:break-all}

img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-underline-offset:0.18em;text-decoration-thickness:from-font}
a:hover{color:var(--color-primary-strong)}
:focus-visible{outline:3px solid var(--color-accent-text);outline-offset:2px;border-radius:2px}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.skip:focus{position:static;width:auto;height:auto;clip-path:none;display:inline-block;
  margin:.5rem;padding:.6rem 1rem;background:var(--color-ink);color:var(--color-inverse)}

.display{font-family:var(--font-display);font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display)}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2rem,var(--page));margin-inline:auto}
.col{max-width:var(--measure)}
main{padding-block:clamp(1.25rem,4vw,2.5rem) 3rem}
section + section{margin-block-start:var(--space-section)}
.hr{border:0;border-block-start:1px solid var(--color-rule);margin-block:1.75rem}

/* ---------- masthead ---------- */
.masthead{background:var(--color-ink);color:var(--color-inverse)}
.masthead a{color:var(--color-inverse)}
/* At 200% text on a narrow viewport the brand and nav overflowed the bar.
   Both are allowed to shrink and wrap instead of forcing the page wider. */
.masthead .bar{display:flex;align-items:center;gap:.5rem;min-height:56px;flex-wrap:wrap}
.masthead .bar>*{min-width:0}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-weight:600;padding-block:.5rem;flex-wrap:wrap;min-width:0;max-width:100%;
  font-size:clamp(0.9rem,0.85rem + 0.3vw,1.0625rem)}
.brand .mark{width:26px;height:26px;flex:none}
.brand b,.brand span{unicode-bidi:isolate;min-width:0}
[dir="ltr"] .brand b,[dir="ltr"] .brand span,
[dir="ltr"] .pchip__n,[dir="ltr"] .chip,[dir="ltr"] .card__title,
[dir="ltr"] .r-name,[dir="ltr"] .daily__name{overflow-wrap:anywhere}
.pchip__n{min-width:0}
.brand span{color:var(--color-accent);font-weight:500}  /* 6.4:1 on --color-ink */
.masthead nav{display:flex;gap:.25rem;flex-wrap:wrap;min-width:0;max-width:100%;
  flex:1 1 100%}
.masthead nav a{unicode-bidi:isolate;display:inline-flex;align-items:center;
  min-height:var(--tap);padding-inline:.7rem;text-decoration:none;
  border-radius:var(--radius);font-size:var(--size-small);max-width:100%;min-width:0}
.masthead nav a:hover{background:rgb(255 255 255 / .12)}
.masthead nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--color-accent)}
.langswap{border:1px solid rgb(255 255 255 / .45)}

/* ---------- headings ---------- */
h1,h2,h3{line-height:var(--leading-tight);margin:0 0 .5rem;text-wrap:balance}
h1{font-size:var(--size-h1)}
h2{font-size:var(--size-h2);margin-block-start:0}
h3{font-size:var(--size-h3)}
.eyebrow{font-size:var(--size-micro);letter-spacing:var(--tracking-caps);
  text-transform:var(--caps-transform);font-weight:600;
  color:var(--color-accent-text);margin:0 0 .35rem}
.lede{font-size:var(--size-h3);color:var(--color-ink-2);max-width:var(--measure)}

/* ---------- tile motifs ----------
   Ornament standing in for photography. The tile file is chosen per record
   in build_site.py; --t-img and --t-bg arrive as inline properties. */
.tile{position:relative;aspect-ratio:16/9;border:1px solid var(--color-rule);
  border-radius:var(--radius);background-color:var(--t-bg,var(--color-tile-fallback));
  background-image:var(--t-img);background-size:var(--tile-size) var(--tile-size);
  overflow:hidden}
.tile--sq{aspect-ratio:1}
.tile--band{aspect-ratio:auto;height:64px}
.tile--hero{aspect-ratio:auto;height:var(--tile-hero-h);width:100%}
.tile__note{position:absolute;inset-block-end:0;inset-inline-start:0;
  background:var(--color-ink);color:var(--color-inverse);font-size:var(--size-micro);
  padding:.25rem .5rem;border-start-end-radius:var(--radius)}

/* ---------- dish of the day ---------- */
.daily__card{display:grid;grid-template-columns:minmax(0,1fr);max-width:100%;text-decoration:none;
  color:var(--color-ink);background:var(--color-card);
  border:1px solid var(--color-rule);border-radius:var(--radius);overflow:hidden}
.daily__art{display:block;min-height:180px;max-width:100%;background-color:var(--t-bg);
  background-image:var(--t-img);background-size:var(--tile-size) var(--tile-size)}
.daily__body{display:block;padding:1rem 1.15rem 1.25rem}
.daily__name{display:block;font-family:var(--font-display);
  font-weight:var(--weight-display);font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem);
  line-height:1.15;margin-block-end:.3rem}
.daily__name,.daily__meta{unicode-bidi:isolate}
.daily__meta{display:block;color:var(--color-ink-2);font-size:var(--size-small)}
.daily__card:hover{border-color:var(--color-primary)}
.daily__card:hover .daily__name{text-decoration:underline}
@media (min-width:40rem){
  .daily__card{grid-template-columns:minmax(0,14rem) minmax(0,1fr);align-items:stretch}
  .daily__art{min-height:100%}
}

/* ---------- province map ---------- */
.iranmap{margin:0 0 1.25rem}
.iranmap--locator{max-width:24rem}
.iranmap--locator .maplegend{display:none}
.iranmap__svg{width:100%;height:auto;display:block;max-height:70vh}
.iranmap path{fill:var(--f,var(--color-card));stroke:var(--color-ink);
  stroke-width:1;stroke-linejoin:round}
.iranmap a{cursor:pointer}
.iranmap a:hover path,.iranmap a:focus path{fill:var(--color-primary)}
.iranmap a:focus{outline:none}
.iranmap a:focus-visible path{stroke:var(--color-accent-text);stroke-width:3}
.iranmap a.is-current path{fill:var(--color-accent-text)}
.iranmap figcaption{margin-block-start:.5rem}
.maplegend{display:flex;align-items:center;gap:.35rem;margin:0 0 .35rem;
  font-size:var(--size-micro)}
.maplegend span{unicode-bidi:isolate}
.maplegend i{width:1.5rem;height:.75rem;background:var(--f);
  border:1px solid var(--color-rule);display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .iranmap path{transition:fill .12s ease}
}

/* ---------- cards ---------- */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr))}
.card{background:var(--color-card);border:1px solid var(--color-rule);
  border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}
.card__body{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.card__title{font-size:var(--size-h3);font-weight:600;margin:0}
.card__title a{text-decoration:none;color:var(--color-ink)}
.card__title a:hover{text-decoration:underline;color:var(--color-primary-strong)}
.card__meta{font-size:var(--size-fine);color:var(--color-ink-2);margin:0}
.card .tile{border:0;border-block-end:1px solid var(--color-rule);border-radius:0}

/* ---------- province ribbon ---------- */
.pribbon{list-style:none;margin:.75rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;
  max-width:100%}
.pribbon li,.pchip{max-width:100%}
.pchip{display:inline-flex;align-items:baseline;gap:.45rem;background:var(--color-card);
  padding:.45rem .85rem;min-height:var(--tap);border:1px solid var(--color-rule);
  border-radius:100px;text-decoration:none;color:var(--color-ink)}
.pchip:hover{background:var(--color-white);color:var(--color-primary-strong);
  border-color:var(--color-primary)}
.pchip__n{unicode-bidi:isolate;font-weight:500}
.pchip--all{background:var(--color-ink);color:var(--color-inverse);
  border-color:var(--color-ink);font-weight:600}
.pchip--all .pchip__c{color:var(--color-accent)}
.pchip--all:hover{background:var(--color-primary-strong);color:var(--color-inverse);
  border-color:var(--color-primary-strong)}
.pchip__c{unicode-bidi:isolate;color:var(--color-accent-text);font-weight:600;font-size:var(--size-small)}

/* ---------- chips & badges ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.5rem 0;list-style:none;
  max-width:100%}
.chips li{max-width:100%}
.chip{max-width:100%}
.chip{unicode-bidi:isolate;display:inline-flex;align-items:center;gap:.3rem;font-size:var(--size-fine);
  border:1px solid var(--color-rule);background:var(--color-card);border-radius:100px;
  padding:.3rem .7rem;color:var(--color-ink-2);text-decoration:none}
a.chip{min-height:var(--tap)}
a.chip:hover{border-color:var(--color-primary);color:var(--color-primary-strong)}
.badge{unicode-bidi:isolate;display:inline-flex;align-items:center;gap:.35rem;font-size:var(--size-micro);
  font-weight:600;padding:.22rem .55rem;border-radius:var(--radius);border:1px solid currentColor}
.badge--ref{color:var(--color-alert)}

/* ---------- provenance ribbon ---------- */
.ribbon>*{unicode-bidi:isolate}
.ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;
  border-block:1px solid var(--color-rule);padding-block:.6rem;margin-block:1rem;
  font-size:var(--size-fine);color:var(--color-ink-2)}
.rid{font-family:var(--font-mono);font-size:var(--size-fine);background:var(--color-ink);
  color:var(--color-inverse);padding:.18rem .45rem;border-radius:var(--radius);
  letter-spacing:.04em;unicode-bidi:isolate}

/* ---------- dish page ---------- */
.dishhead h1{margin-block-end:.15rem}
.dishhead .altname{color:var(--color-ink-2);margin:0 0 .5rem}
.dishhead .othername{font-size:var(--size-h3);color:var(--color-ink-2);
  margin:0 0 .75rem;text-align:start}
.dishhead .othername bdi{unicode-bidi:isolate}

.factstrip{display:grid;gap:.75rem;max-width:100%;
  grid-template-columns:repeat(auto-fit,minmax(min(8rem,100%),1fr));
  background:var(--color-card);border:1px solid var(--color-rule);
  border-radius:var(--radius);padding:.9rem 1rem;margin-block:1.25rem}
.fact dt{font-size:var(--size-micro);letter-spacing:var(--tracking-caps);
  text-transform:var(--caps-transform);color:var(--color-ink-2);margin:0 0 .15rem}
.fact dd{margin:0;font-weight:600}
.fact dd small{font-weight:400;color:var(--color-ink-2)}

.yield{margin:.25rem 0 1rem;color:var(--color-ink)}
.ingredients{list-style:none;padding:0;margin:0;border-block-start:1px solid var(--color-rule)}
.ingredients li{display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:baseline;
  justify-content:space-between;
  padding:.6rem .25rem;border-block-end:1px solid var(--color-rule)}
.ingredients .nm,.ingredients .qty{unicode-bidi:isolate}
.ingredients .qty{color:var(--color-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ingredients .nm{font-weight:500}
/* Isolation, not margin, is what stops Arabic joining across the boundary:
   the shaper does not see margins. */
.allergen{font-size:var(--size-micro);color:var(--color-alert);
  margin-inline-start:.4rem;unicode-bidi:isolate}

/* Step numbers come from the markup, not a CSS counter, so Persian pages
   can carry Persian numerals. */
.steps{list-style:none;padding:0;margin:0}
.steps li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.85rem;padding-block:.85rem;
  border-block-end:1px solid var(--color-rule)}
.steps li::before{content:attr(data-n);grid-column:1;font-family:var(--font-display);
  font-weight:600;font-size:1.25rem;color:var(--color-accent-text);line-height:1.35}
.steps p{margin:0}

.nutrition{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;
  font-size:var(--size-small)}
.nutrition caption{max-width:100%}
.nutrition th,.nutrition td{text-align:start;padding:.5rem .25rem;
  border-block-end:1px solid var(--color-rule)}
.nutrition td{font-variant-numeric:tabular-nums}
.nutrition caption{text-align:start;color:var(--color-ink-2);font-size:var(--size-fine);
  padding-block-end:.5rem}

.note{background:var(--color-card);border:1px solid var(--color-rule);
  border-inline-start:3px solid var(--color-accent-text);border-radius:var(--radius);
  padding:.85rem 1rem;margin-block:1rem}
.note--ref{border-inline-start-color:var(--color-alert)}
.note--dev{border-inline-start-color:var(--color-primary);
  background:var(--color-paper)}
.note--dev ul{margin:.35rem 0 0;padding-inline-start:1.1rem}
.note p:last-child{margin-block-end:0}
.note p:first-child{margin-block-start:0}

.unitswap{display:inline-flex;flex-wrap:wrap;max-width:100%;
  border:1px solid var(--color-rule);border-radius:100px;
  overflow:hidden;background:var(--color-card)}
.unitswap button{flex:1 1 auto;min-width:0}
.unitswap button{font:inherit;font-size:var(--size-fine);min-height:var(--tap);
  padding-inline:.85rem;border:0;background:transparent;color:var(--color-ink-2);cursor:pointer}
.unitswap button[aria-pressed="true"]{background:var(--color-primary);color:var(--color-white)}

/* ---------- search ---------- */
.searchbox{display:flex;gap:.5rem;flex-wrap:wrap;margin-block:1rem}
.searchbox{max-width:100%}
.searchbox input[type="search"]{flex:1 1 100%;min-width:0;max-width:100%;
  min-height:var(--tap);font:inherit;padding:.5rem .75rem;
  border:1px solid var(--color-ink-2);border-radius:var(--radius);
  background:var(--color-card);color:var(--color-ink)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.75rem}
.filters{max-width:100%}
.filters select{min-height:var(--tap);font:inherit;font-size:var(--size-small);
  padding:.4rem .6rem;border:1px solid var(--color-ink-2);border-radius:var(--radius);
  background:var(--color-card);color:var(--color-ink);max-width:100%;min-width:0;
  flex:1 1 min(14rem,100%)}
.count{color:var(--color-ink-2);font-size:var(--size-small);margin-block:.5rem}
.results{list-style:none;padding:0;margin:0}
.results li{padding-block:.75rem;border-block-end:1px solid var(--color-rule)}
.results .r-name{font-weight:600;font-size:var(--size-h3);text-decoration:none;color:var(--color-ink)}
.results .r-name:hover{text-decoration:underline}
.results .r-meta{font-size:var(--size-fine);color:var(--color-ink-2);margin:.15rem 0 0}
.empty{padding:1.25rem;background:var(--color-card);border:1px dashed var(--color-rule);
  border-radius:var(--radius)}

/* ---------- gateway ---------- */
.gateway{min-height:100svh;display:grid;grid-template-rows:1fr auto;
  background-color:var(--t-bg);background-image:var(--t-img);
  background-size:var(--tile-size) var(--tile-size)}
.gateway__panel{align-self:center;width:min(100% - 1rem,34rem);margin:2rem auto;
  max-width:100%;
  background:var(--color-paper);border-radius:var(--radius);padding:clamp(1.5rem,5vw,2.5rem);
  box-shadow:0 18px 50px rgb(13 21 38 / .35)}
.gateway__mark{width:56px;height:56px;margin-block-end:1rem}
.gateway h1{font-size:clamp(1.35rem,1.1rem + 1.4vw,2rem);margin-block-end:.25rem}
.gateway h1 + h1{margin-block-end:1rem}
.gateway__choices{display:grid;gap:.75rem;margin-block:1.5rem 1rem;list-style:none;padding:0}
.gateway__choices a{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;max-width:100%;min-width:0;
  min-height:var(--tap);padding:.85rem 1.1rem;border:1px solid var(--color-ink);
  border-radius:var(--radius);text-decoration:none;color:var(--color-ink);
  background:var(--color-card);font-weight:600}
.gateway__choices a:hover{background:var(--color-ink);color:var(--color-inverse)}
.gateway__choices small{font-weight:400;color:var(--color-ink-2);font-size:var(--size-fine)}
.gateway__choices a:hover small{color:var(--color-inverse)}
.gateway__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;
  border-block-start:1px solid var(--color-rule);padding-block-start:1rem;margin:0}
.gateway__stats div{margin:0}
.gateway__stats dt{font-size:1.35rem;overflow-wrap:anywhere;font-weight:700;font-family:var(--font-display);
  color:var(--color-primary)}
.gateway__stats dd{margin:0;font-size:var(--size-fine);color:var(--color-ink-2)}
.gateway__foot{background:rgb(13 21 38 / .72);color:var(--color-inverse);
  padding:.75rem 1rem;font-size:var(--size-fine);text-align:center}

/* ---------- ads ----------
   Space is reserved only when ads can actually load. config.js adds .ads-on
   in <head>, before first paint, so enabling ads cannot shift the layout. */
.adslot{margin-block:2rem;min-height:var(--ad-min);display:flex;align-items:center;
  justify-content:center;border-block:1px solid var(--color-rule)}
.ads-on .adslot{min-height:var(--ad-min-live)}
.adslot[data-state="off"]::after{content:attr(data-label);font-size:var(--size-micro);
  color:var(--color-ink-2);letter-spacing:var(--tracking-caps);
  text-transform:var(--caps-transform)}
.adslot ins{display:block;width:100%}

/* ---------- consent ---------- */
.consent{position:fixed;inset-inline:0;inset-block-end:0;z-index:60;
  max-height:80svh;overflow-y:auto;
  background:var(--color-ink);color:var(--color-inverse);padding:1rem;
  box-shadow:0 -8px 24px rgb(14 42 44 / .25)}
.consent[hidden]{display:none}
.consent .inner{width:min(100% - .5rem,60rem);margin-inline:auto;display:grid;gap:.75rem}
.consent p{margin:0;font-size:var(--size-small);line-height:1.55}
.consent a{color:var(--color-accent)}
.consent .btns{display:flex;gap:.5rem;flex-wrap:wrap}
.consent .btns button{flex:1 1 min(14rem,100%);min-width:0}
.consent button{font:inherit;font-size:var(--size-small);min-height:var(--tap);
  padding-inline:1.1rem;border-radius:var(--radius);border:1px solid var(--color-inverse);
  background:transparent;color:var(--color-inverse);cursor:pointer}
.consent button.primary{background:var(--color-accent);border-color:var(--color-accent);
  color:var(--color-ink);font-weight:600}

/* ---------- footer ---------- */
.foot{background:var(--color-ink);color:var(--color-inverse-2);margin-block-start:3rem;padding-block:2rem}
.foot a{color:var(--color-inverse)}
.foot .cols{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.foot h2{font-size:var(--size-fine);letter-spacing:var(--tracking-caps);
  text-transform:var(--caps-transform);color:var(--color-accent)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem;font-size:var(--size-small)}
.foot .fine{margin-block-start:1.5rem;font-size:var(--size-fine);color:var(--color-inverse-3);max-width:48rem}

/* ---------- breadcrumbs / pagination ---------- */
.crumbs{font-size:var(--size-fine);color:var(--color-ink-2);margin-block:.75rem 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem .5rem;
  margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-inline-end:.5rem;opacity:.6}
.crumbs a{color:var(--color-ink-2)}
.gateway__choices a.is-last{box-shadow:inset 0 0 0 2px var(--color-primary)}
.pager{display:flex;gap:.5rem;flex-wrap:wrap;margin-block-start:1.5rem}
.pager a,.pager span{min-height:var(--tap);display:inline-flex;align-items:center;
  padding-inline:.85rem;border:1px solid var(--color-rule);border-radius:var(--radius);
  text-decoration:none;background:var(--color-card)}

/* At extreme text sizes a single Persian word can be wider than a 320 px
   viewport, and Arabic must not be broken mid-word to fit. Rather than let
   one chip scroll the whole page sideways, the strips that hold short
   labels scroll within themselves. WCAG permits scrolling in one direction
   for content that genuinely requires it; the page itself never does. */
.pribbon,.chips,.masthead nav,.crumbs ol,.gateway__choices,.ribbon,
.filters,.searchbox,.unitswap,.card,.daily__body,.results li,.ingredients li,
.steps li,.pager{overflow-x:auto;scrollbar-width:thin}
.card,.card__body,.card__title,.daily__body,.results li{min-width:0}

/* ---------- utility ---------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.stack>*+*{margin-block-start:.75rem}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--color-ink-2)}
.small{font-size:var(--size-small)}

@media (min-width:34rem){
  .gateway__stats{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:40rem){
  .masthead nav{flex:0 1 auto;margin-inline-start:auto}
}
@media (min-width:48rem){
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .card{transition:border-color .15s ease}
  .card:hover{border-color:var(--color-primary)}
}

@media print{
  .masthead nav,.adslot,.consent,.foot .cols,.pager,.searchbox,.filters,
  .unitswap,.skip,.tile{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  a[href]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .steps li,.ingredients li{break-inside:avoid}
  .masthead{background:#fff;color:#000;border-block-end:1pt solid #000}
  .masthead a,.brand span{color:#000}
}