/* ═══════════════════════════════════════════════════════════════
   NOVRA FOODS — base.css
   Modern reset, self-hosted @font-face declarations, base typography,
   layout primitives (container, grid, prose). Loaded second, after
   system.css. Adds zero rules for components — those live in
   components.css.
═══════════════════════════════════════════════════════════════ */


/* ─── @font-face — Cloudinary-hosted variable fonts ──────────────
   Fonts are mirrored to Cloudinary's raw/upload from fontsource.
   Mapping documented in docs/CLOUDINARY.md. _headers must include
   https://res.cloudinary.com in font-src.
   Amiri remains a TODO — upload an Arabic VF + add a Cloudinary
   src here when Arabic copy ships.
─────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('https://res.cloudinary.com/dy4svmr4n/raw/upload/novra/fonts/cormorant-garamond-vf-latin-wght-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('https://res.cloudinary.com/dy4svmr4n/raw/upload/novra/fonts/cormorant-garamond-vf-latin-wght-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('https://res.cloudinary.com/dy4svmr4n/raw/upload/novra/fonts/outfit-vf-latin-wght-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Amiri';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('https://res.cloudinary.com/dy4svmr4n/raw/upload/novra/fonts/amiri-arabic-wght-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family:'Amiri';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('https://res.cloudinary.com/dy4svmr4n/raw/upload/novra/fonts/amiri-arabic-700-normal.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}


/* ─── RESET ────────────────────────────────────────────────────── */

*, *::before, *::after{
  margin:0; padding:0; box-sizing:border-box;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -moz-tab-size:4;
  tab-size:4;
  scroll-behavior:smooth;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-weight:var(--w-regular);
  font-size:var(--t-16);
  line-height:var(--lh-default);
  color:var(--ink);
  background:var(--surface);
  font-feature-settings:var(--otf-body);
  overflow-x:hidden;
}
img, picture, video, canvas, svg{
  display:block;
  max-width:100%;
  height:auto;
}
input, button, textarea, select{
  font:inherit;
  color:inherit;
  background:none;
  border:none;
  appearance:none;
  -webkit-appearance:none;
}
button{cursor:pointer}
a{
  color:inherit;
  text-decoration:none;
}
::selection{
  background:var(--gold);
  color:var(--cream);
}


/* ─── BASE TYPOGRAPHY ──────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6{
  font-family:var(--font-display);
  font-weight:var(--w-light);
  line-height:var(--lh-display);
  letter-spacing:var(--track-display);
  font-feature-settings:var(--otf-display);
  color:inherit;
  text-wrap:balance;
}
h1{ font-size:clamp(var(--t-40), 7vw, var(--t-104)); }
h2{ font-size:clamp(var(--t-32), 5vw, var(--t-80));  }
h3{ font-size:clamp(var(--t-26), 3.5vw, var(--t-52)); }
h4{ font-size:clamp(var(--t-21), 2.4vw, var(--t-32)); line-height:var(--lh-snug); }
h5{ font-size:var(--t-21); line-height:var(--lh-snug); }
h6{ font-size:var(--t-18); line-height:var(--lh-snug); }

em, i{ font-style:italic; }

p{
  font-size:var(--t-16);
  line-height:var(--lh-loose);
  color:var(--ink);
  text-wrap:pretty;
}

small, .text-small{ font-size:var(--t-14); }

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--t-12);
  font-weight:var(--w-regular);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--ink-muted);
}

/* Drop cap — first letter of a marked paragraph */
.drop-cap::first-letter{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:var(--w-light);
  float:left;
  font-size:5.2em;
  line-height:0.82;
  margin:0.04em 0.12em 0 -0.04em;
  color:var(--accent-deep);
}

/* Arabic body — when content is in [lang="ar"], swap typeface */
[lang="ar"], body.ar{
  font-family:var(--font-arabic);
  letter-spacing:var(--track-arabic);
  line-height:var(--lh-loose);
}
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3,
body.ar h1, body.ar h2, body.ar h3{
  font-family:var(--font-arabic);
  font-weight:var(--w-regular);
}


/* ─── LAYOUT PRIMITIVES ────────────────────────────────────────── */

.container{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--prose{ max-width:var(--max-w-prose); }
.container--narrow{ max-width:var(--max-w-narrow); }

.section{
  padding-block:var(--section-y);
}
.section--charcoal{
  background:var(--surface-deep);
  color:var(--ink-inverse);
}
.section--cream{
  background:var(--surface);
  color:var(--ink);
}
.section--soft{
  background:var(--surface-soft);
  color:var(--ink);
}

/* Generic 12-col grid for layout asymmetry */
.grid{
  display:grid;
  gap:var(--s-3);
}
.grid--12{ grid-template-columns:repeat(12, 1fr); }
.grid--prose{ grid-template-columns:minmax(0,1fr); max-width:var(--max-w-prose); }

@media(max-width:768px){
  .grid--12{ grid-template-columns:1fr; }
}


/* ─── UTILITIES ────────────────────────────────────────────────── */

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

.flow > * + *{ margin-block-start:var(--flow-space, 1em); }

[data-stagger]{ --stagger-delay:0ms; }