/* POUR CORNER — base: reset, type, masthead, tabs, components. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);
  font-size:16px;line-height:1.55;min-height:100dvh;-webkit-tap-highlight-color:transparent}
/* weave-paper: the woven textile laid over the ink ground. v19: the brown
   hue is turned DOWN — the linework is now light warm tan instead of dark
   brown, so the woven geometry actually reads on the deep espresso ground
   instead of vanishing into it. Clearly visible, still quiet behind content.
   Fixed layer; normal blending so the light linework reads predictably on
   the dark ground — soft-light barely moved the needle on near-black.
   Opacity tuned so the weave is unmistakable but still quiet behind text. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url('../assets/texture/weave-page.png') center/cover no-repeat;
  opacity:.14}
#grain{position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* type scale — the chasm: monumental display vs whisper metadata */
.display{font-family:var(--disp);font-weight:700;line-height:1.04;letter-spacing:.005em;
  font-size:clamp(2.6rem,8.5vw,5.6rem);margin:0;color:var(--paper);text-wrap:balance}
.display-sm{font-family:var(--disp);font-weight:700;line-height:1.08;
  font-size:clamp(1.7rem,4.5vw,2.6rem);margin:0}
/* section titles — vermilion accent, small-caps/label style */
.kicker{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--verm);margin:0 0 .6rem}
/* true section titles — real typographic presence, cream (vermilion is for accents only) */
.sect{font-family:var(--disp);font-weight:700;line-height:1.12;margin:0 0 1.3rem;
  font-size:clamp(1.9rem,5vw,2.9rem);color:var(--paper);text-wrap:balance}
h2.sect.mt{margin-top:3rem}
.rule{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.prose{max-width:62ch}
.prose p{margin:.7em 0;color:var(--paper-faint)}
.meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* masthead — fixed top header: small Arabic masthead left (aligned with the
   content gutter via .mast-inner), tabs top-right. */
html,body{overflow-x:clip}
#masthead{position:sticky;top:0;z-index:1100;background:var(--mast-tint);
  /* (v54) above Leaflet's map controls (z 1000) so they slide under the
     header on scroll; still below sheets (1500+), grain (2000), toast (3000) */
  /* (v38) slightly translucent so scrolling content moves behind the banner;
     the sticky header keeps the cream/vermilion text fully legible */
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)}
.mast-inner{max-width:var(--max);margin:0 auto;padding:10px var(--pad);
  /* (v68) always reserve the flags' lane at the physical right: the row is
     absolutely positioned at the banner's far right in every language, and
     the five-tab nav now reaches it at any width. The 560px query below
     overrides this with its smaller lane. */
  padding-right:calc(var(--pad) + 124px);
  /* (v63) the language flags now live at the banner's far right (direct
     child of #masthead), so the content column needs no reservation on
     desktop; the mobile media query below keeps one, where the column
     is full-width and the flags overlay the nav row. */
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem}
#wordmark{text-decoration:none;display:flex;align-items:baseline}
.wm-ar{font-family:var(--disp);font-size:1.45rem;line-height:1.25;color:var(--verm)}
.mast-right{display:flex;align-items:center;gap:1.3rem}
#topnav{display:flex;align-items:center;gap:1.35rem}
#topnav a{position:relative;text-decoration:none;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:.45rem 0}
#topnav a:hover{color:var(--crema)}
/* active tab: vermilion text alone marks it — no underline */
#topnav a.active{color:var(--verm)}

/* (v63) language flags — far right of the banner in every language
   (including RTL), vertically centered so they never touch the masthead
   seam. The row is a direct child of #masthead (sticky = positioned), so
   it anchors to the banner's physical right edge, outside the centered
   content column. 20×14px; active flag full opacity, the rest dimmed;
   no outline. */
#lang-flags{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;z-index:2;
  /* (v64) the flag order is fixed bz/gq/st/km in EVERY language — RTL must
     not mirror the row, so pin the row itself to LTR. */direction:ltr}
#lang-flags .flagbtn{background:none;border:0;padding:2px;line-height:0;cursor:pointer;
  border-radius:3px;opacity:.35;transition:opacity .15s}
#lang-flags .flagbtn img{display:block;width:20px;height:14px;border-radius:2px}
#lang-flags .flagbtn:hover{opacity:.8}
#lang-flags .flagbtn[aria-pressed="true"]{opacity:1}
#lang-flags .flagbtn:focus-visible{outline:2px solid var(--verm);outline-offset:2px}
@media(max-width:560px){
  /* compact mobile masthead: smaller flags (16x11, tighter gaps) and a
     tighter nav so brand + 4 links + flags all fit a 390px viewport.
     On mobile the content column is full-width, so keep the physical
     right reservation here: the flags (anchored to #masthead's far
     right) overlay the nav row. */
  .mast-inner{--flagsw:88px;gap:.6rem;padding-right:calc(var(--pad) + var(--flagsw))}
  #lang-flags{gap:3px}
  #lang-flags .flagbtn{padding:1px}
  #lang-flags .flagbtn img{width:16px;height:11px}
  /* (v68) five tabs now: tighten the row so brand + 5 links + flags fit 390px */
  #topnav{gap:.5rem}
  #topnav a{font-size:10px;letter-spacing:.06em;padding:.4rem 0}
  .mast-right{gap:.8rem}
  .wm-ar{font-size:1.15rem}
}

/* unified theme: one app, one palette (Brew scheme everywhere).
   The per-tab color schemes are gone — Atlas/Recipes/Stats all share the
   deep espresso ground, greenish ink tones, and vermilion accents. */

/* view */
#view{max-width:var(--max);margin:0 auto;padding:calc(var(--pad)*1.2) var(--pad) calc(var(--pad)*1.6)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--tap);
  padding:.7rem 1.4rem;border:1px solid var(--line-strong);border-radius:var(--r);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:var(--paper);background:transparent;transition:border-color .15s,color .15s}
.btn:active{transform:translateY(1px)}
.btn:hover{border-color:var(--crema);color:var(--crema)}
.btn-solid:hover{background:var(--cherry);border-color:var(--cherry);color:#fff}
.btn-paper:hover{background:var(--crema);border-color:var(--crema)}
.btn-solid{background:var(--verm);border-color:var(--verm);color:#fff}
.btn-paper{background:var(--paper);border-color:var(--paper);color:var(--on-paper)}
.btn-quiet{border-color:transparent;color:var(--mute)}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0}

/* fields */
.field{margin:0 0 1rem}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.45rem}
.input,select.input,textarea.input{width:100%;background:var(--ink-3);border:1px solid var(--line-strong);
  border-radius:var(--r);color:var(--paper);font:inherit;padding:.8rem .9rem;min-height:var(--tap)}
.input:focus{outline:2px solid var(--verm);outline-offset:-2px;border-color:var(--verm)}
textarea.input{min-height:96px;resize:vertical}

/* cards / panels — flat ink, hairline rules, no shadows */
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}
.panel + .panel{margin-top:1rem}
.stamp{display:inline-block;border:1px solid var(--line-strong);border-radius:2px;padding:.25rem .6rem;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

/* (v55) Koraïchi card — the dark-green + antique-gold calligraphy ground,
   shared by the Atlas bag banner, recipe cards, and stats cards. A dark
   veil keeps text readable (variant B, user-chosen); a hairline cream
   outline rims every card. Content must sit above the veil: each card's
   inner wrapper gets position:relative in its own stylesheet. */
.kora-card{position:relative;overflow:hidden;color:var(--paper);
  background:#0d1812 url('../assets/texture/koraichi-tab-bg.jpg') center/cover no-repeat;
  border:1px solid var(--crema);border-radius:20px}
.kora-card::before{content:'';position:absolute;inset:0;background:rgba(6,10,7,.65);
  pointer-events:none} /* (v56) a tad fainter: the calligraphy sits quieter */

/* toast */
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:32px;z-index:3000;
  background:var(--paper);color:var(--on-paper);padding:.7rem 1.2rem;border-radius:var(--r);
  font-size:13px;font-weight:500;letter-spacing:.04em;opacity:0;pointer-events:none;transition:.25s;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* rating dots 1-10 */
.rate{display:flex;gap:6px;flex-wrap:wrap}
.rate button{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;
  font-weight:700;font-size:15px;color:var(--mute)}
.rate button.on{background:var(--verm);border-color:var(--verm);color:#fff}

/* tag chips */
.tags{display:flex;gap:.5rem;flex-wrap:wrap}
.tag{border:1px solid var(--line-strong);border-radius:999px;padding:.45rem 1rem;font-size:13px;color:var(--paper-faint)}
.tag.on{background:var(--paper);color:var(--on-paper);border-color:var(--paper);font-weight:500}

/* ledger rows */
.rowline{display:flex;align-items:center;gap:1rem;padding:1rem .2rem;border-top:1px solid var(--line)}
.rowline:last-child{border-bottom:1px solid var(--line)}

/* utility */
.mt{margin-top:1.6rem}.mb{margin-bottom:1.6rem}
.dim{color:var(--mute)}
.small{font-size:13px}
.ar{direction:rtl;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}