/* ============================================================
   KHAMACO — Dried Tropical Fruit v2
   Concept: SUN-CURED PROVENANCE — The Export Dossier
   base.css — self-hosted fonts + design tokens + reset + typography
   Palette lock: 1 loud accent = mango amber. Zero-italic. lining-nums.
   ============================================================ */

/* ---------- Self-hosted fonts (CSP font-src 'self' data:) ---------- */
/* ORDER MATTERS: for each family the subsets are declared latin → latin-ext →
   vietnamese. Overlapping unicode-ranges resolve to the LAST matching @font-face, and
   latin-ext (U+0100-02AF, U+1EF2-1EFF) overlaps most of vietnamese. With vietnamese
   declared first, every Vietnamese page pulled the large latin-ext file as well —
   288 KB of font against 136 KB on the English pages. Do not reorder these. */
/* Fraunces Variable — display (has vietnamese subset ✓) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/fraunces-vietnamese-wght-normal.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Inter Variable — body (has vietnamese subset ✓) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-vietnamese-wght-normal.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* JetBrains Mono — used for EVERY mono label: eyebrows, data-band, table headers,
   card tags, footer column heads, spec terms.
   🚨 It was self-hosted with the LATIN subset ONLY, whose unicode-range stops at
   U+00FF. So on the Vietnamese pages every accented character in those labels — the
   Ế in "NẾU", Ý in "QUÝ", Ọ in "CHỌN" — fell out of the @font-face and was drawn by
   whatever mono font the OS happened to have. Result: mismatched glyph shapes and
   uneven spacing inside a single word. Same failure class as the Sora/Space Grotesk
   incident: ALWAYS confirm a display font ships a `vietnamese` subset before adopting
   it, then declare that subset. JetBrains Mono does ship one — it was simply never
   downloaded. */
@font-face {
  font-family: 'JBMono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JBMono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-vietnamese-400-normal.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'JBMono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JBMono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/jetbrains-mono-vietnamese-500-normal.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'JBMono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}
@font-face {
  font-family: 'JBMono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}

/* ---------- Design tokens ---------- */
:root {
  /* 60% base */
  --bone: #F7F2E9;
  --paper: #EFE7D8;
  --espresso: #1E1610;
  --chestnut: #3A2A1C;
  /* 30% ink + botanical */
  --ink: #2A2018;
  --ink-soft: #5A4C3E;
  --bone-on-dark: #F3ECDE;
  --bone-on-dark-soft: #C9BDA8;
  --olive: #5C6047;        /* darkened for AA text contrast on bone/paper (>=4.5:1) */
  --olive-on-dark: #A9B08A;/* olive is 1.9:1 on espresso — this is the dark-band twin, 7.87:1 */
  --hairline: rgba(42, 32, 24, 0.14);
  --hairline-dark: rgba(243, 236, 222, 0.16);   /* decorative rules only — 1.56:1 */
  --hairline-dark-strong: rgba(243, 236, 222, 0.42); /* FUNCTIONAL borders on dark (WCAG 1.4.11 needs 3:1) — 3.65:1 */
  /* 10% accent — mango amber (1 loud only) */
  --amber: #A8660F;      /* SURFACES only (button fills, rules, dots). #fff on it = 4.59:1.
                            As TEXT it is 4.12:1 on bone / 3.74:1 on paper = fails AA. */
  --amber-text: #8A5410; /* inline text emphasis on light bands — 5.61:1 bone · 5.09:1 paper */
  --amber-hover: #7C4B0E;/* #fff on it = 7.32:1 */
  --mango: #F2A93B;      /* bright — dark bg only. 8.93:1 on espresso · 6.88:1 on chestnut */
  --amber-tint: rgba(168, 102, 15, 0.10);

  /* type */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JBMono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* spacing scale */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-6: 3rem; --sp-8: 4rem; --sp-12: 6rem; --sp-16: 8rem;
  --band-y: clamp(4rem, 9vw, 8rem);       /* macro whitespace between bands */
  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* radii — restrained, not "loạn bo góc" */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* No global smooth scrolling: it also animates the jump the browser makes when focus
   moves, so a keyboard user Tabbing down the page kept receiving focus on an element
   that was still off-screen (measured 19 of 30 tab stops). Anchor links do their own
   smoothing in main.js, which is the only place it was ever wanted. */
html { -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 84px; }  /* fixed-header offset for anchor jumps + focus */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  /* 🚨 lining + tabular nums from the START (Fraunces has oldstyle figs) */
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
/* Two-tone focus ring. A single amber ring measured 2.99:1 against --chestnut, i.e.
   below the 3:1 that SC 2.4.11 requires of a focus indicator — and one colour cannot
   clear 3:1 against BOTH the bone and espresso halves of this palette. Pairing a mango
   core with an espresso halo means whichever half is low-contrast, the other carries
   it, on any background on the site. */
:focus-visible {
  outline: 2px solid var(--mango);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(30, 22, 16, 0.85);
  border-radius: 2px;
}
/* on a dark band the halo would vanish into the band — invert it there */
.on-dark :focus-visible, .band-dark :focus-visible, .footer :focus-visible {
  box-shadow: 0 0 0 5px rgba(247, 242, 233, 0.35);
}
/* Zero-italic universal — emphasis by COLOR only */
em, i, cite, address { font-style: normal; }

/* ---------- Typography ---------- */
.display, h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 380;
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-feature-settings: 'lnum' 1, 'tnum' 1, 'ss01' 1;
  color: var(--ink);
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem); font-weight: 340; }
h2, .h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 400; }
h3, .h3 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); font-weight: 460; letter-spacing: -0.01em; }
p { max-width: 62ch; }
strong, b { font-weight: 600; }
.lede { font-size: clamp(1.15rem, 1.02rem + 0.7vw, 1.4rem); line-height: 1.55; color: var(--ink); max-width: 60ch; }

/* amber emphasis (color, never italic) — text amber, not surface amber, for AA */
.em { color: var(--amber-text); font-weight: 500; }
.em-on-dark { color: var(--mango); font-weight: 500; }

/* eyebrow / label — NOT numbered (avoid AI-slop 01/02) */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.eyebrow::before {
  content: ""; width: 1.6em; height: 1px; background: var(--olive); opacity: 0.7;
}
.on-dark .eyebrow { color: var(--mango); }
.on-dark .eyebrow::before { background: var(--mango); opacity: 0.6; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1440px; }
.band { padding-block: var(--band-y); position: relative; }
.band-bone { background: var(--bone); color: var(--ink); }
.band-paper { background: var(--paper); color: var(--ink); }
.band-dark { background: var(--espresso); color: var(--bone-on-dark); }
/* ---------- Dark-section text cascade (contrast contract) ----------
   Every text-bearing element inside ANY dark band gets a light colour. The previous
   version only covered h1-h3/p, so h4-h6, list items, table cells, captions, <small>,
   <strong>, dt/dd and bare <span>/<div> text kept --ink (#2A2018) on --espresso
   (#1E1610) = 1.12:1, i.e. invisible. Measured floor for every pair below is >= 7:1.
     --bone-on-dark      #F3ECDE on espresso = 15.17:1
     --bone-on-dark-soft #C9BDA8 on espresso =  9.62:1  · on chestnut = 7.41:1
     --mango             #F2A93B on espresso =  8.93:1  · on chestnut = 6.88:1
   NOTE: --amber (#A8660F) is only 3.88:1 on espresso — it must NEVER be used for text
   on a dark band. Accents on dark use --mango. */
.on-dark, .band-dark { color: var(--bone-on-dark-soft); }
.on-dark h1, .on-dark h2, .on-dark h3,
.on-dark h4, .on-dark h5, .on-dark h6,
.on-dark .h1, .on-dark .h2, .on-dark .h3,
.on-dark .display, .on-dark dt, .on-dark strong, .on-dark b,
.on-dark .lede { color: var(--bone-on-dark); }
.on-dark p, .on-dark li, .on-dark dd, .on-dark td, .on-dark th,
.on-dark small, .on-dark figcaption, .on-dark blockquote, .on-dark label,
.on-dark span, .on-dark div, .on-dark a { color: var(--bone-on-dark-soft); }
/* accents: amber is too dark on espresso — always step up to mango */
.on-dark .em, .on-dark .em-on-dark, .on-dark .accent { color: var(--mango); }

/* Light "islands" that sit INSIDE a dark band keep their own dark-on-light palette.
   Without this the broadened cascade above would paint bone text onto bone cards. */
.on-dark .form-card, .on-dark .cmp-wrap, .on-dark .prod-card, .on-dark .cert,
.on-dark .deck-card, .on-dark .reason, .on-dark .mobile-menu, .on-dark .sticky-cta,
.on-dark .island-light { color: var(--ink); }
.on-dark .form-card :is(h1,h2,h3,h4,h5,h6,strong,b,dt,.lede),
.on-dark .cmp-wrap  :is(h1,h2,h3,h4,h5,h6,strong,b,dt,.lede),
.on-dark .prod-card :is(h1,h2,h3,h4,h5,h6,strong,b,dt,.lede),
.on-dark .cert      :is(h1,h2,h3,h4,h5,h6,strong,b,dt,.lede),
.on-dark .deck-card :is(h1,h2,h3,h4,h5,h6,strong,b,dt,.lede),
.on-dark .reason    :is(h1,h2,h3,h4,h5,h6,strong,b,dt,.lede),
.on-dark .mobile-menu :is(h1,h2,h3,h4,h5,h6,strong,b,dt,.lede),
.on-dark .island-light :is(h1,h2,h3,h4,h5,h6,strong,b,dt,.lede) { color: var(--ink); }
.on-dark .form-card :is(p,li,dd,small,figcaption,label,span,div,td,th),
.on-dark .cmp-wrap  :is(p,li,dd,small,figcaption,label,span,div,td,th),
.on-dark .prod-card :is(p,li,dd,small,figcaption,label,span,div,td,th),
.on-dark .cert      :is(p,li,dd,small,figcaption,label,span,div,td,th),
.on-dark .deck-card :is(p,li,dd,small,figcaption,label,span,div,td,th),
.on-dark .reason    :is(p,li,dd,small,figcaption,label,span,div,td,th),
.on-dark .island-light :is(p,li,dd,small,figcaption,label,span,div,td,th) { color: var(--ink-soft); }
/* accents inside a light island step back DOWN to the AA-safe text amber */
.on-dark .form-card .em, .on-dark .cmp-wrap .em, .on-dark .prod-card .em,
.on-dark .cert .em, .on-dark .deck-card .em, .on-dark .reason .em,
.on-dark .island-light .em { color: var(--amber-text); }

/* Buttons keep their own contract regardless of band — .btn-primary is a solid amber
   surface, so its label is always #fff (4.59:1). Both `.on-dark a` and `.footer a`
   out-specify a bare `.btn-primary`, and both were repainting the label
   --bone-on-dark-soft on --amber = 2.48:1. Name them explicitly. */
.btn-primary, .on-dark .btn-primary, .footer .btn-primary { color: #fff; }

/* ---------- Data-band spine ★ (signature) ---------- */
.data-band {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bone);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  overflow: hidden;
}
.data-band.on-dark, .band-dark + .data-band, .data-band-dark {
  background: var(--espresso); color: var(--bone-on-dark-soft);
  border-color: var(--hairline-dark);
}
.data-band__row {
  max-width: 1440px; margin-inline: auto; padding: 0.85rem var(--gutter);
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: center; justify-content: space-between;
}
.data-band__item { display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap; }
.data-band__item::before {
  content: ""; width: 5px; height: 5px; background: var(--olive); border-radius: 50%; flex: none;
}
/* the dot had no dark-band variant at all — olive on espresso is 2.73:1 */
.data-band.on-dark .data-band__item::before,
.band-dark + .data-band .data-band__item::before,
.data-band-dark .data-band__item::before { background: var(--olive-on-dark); }
.data-band__item .k { color: var(--olive); }
.data-band.on-dark .data-band__item .k, .data-band-dark .data-band__item .k { color: var(--mango); opacity: 0.85; }

/* ---------- Buttons / CTA ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-body); font-weight: 500; font-size: 0.98rem;
  letter-spacing: 0.005em;
  padding: 0.95rem 1.7rem; border-radius: var(--r-md);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn-primary { background: var(--amber); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.btn-primary:hover { background: var(--amber-hover); transform: translateY(-2px); box-shadow: 0 10px 28px -12px rgba(168,102,15,0.6); }
.btn-ghost { border: 1px solid var(--hairline); color: var(--ink); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }
/* A ghost button's border IS its boundary — the only thing that says "this is a
   control". WCAG 1.4.11 therefore requires 3:1, and --hairline-dark is 1.56:1. */
.on-dark .btn-ghost { border-color: var(--hairline-dark-strong); color: var(--bone-on-dark); }
.on-dark .btn-ghost:hover { border-color: var(--mango); color: var(--mango); }
.btn-sub { font-size: 0.78rem; color: var(--ink-soft); display: block; margin-top: 0.55rem; }
.on-dark .btn-sub { color: var(--bone-on-dark-soft); }
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Hairline / dividers ---------- */
.hairline { height: 1px; background: var(--hairline); border: 0; }
.on-dark .hairline, .hairline-dark { background: var(--hairline-dark); }

/* ---------- Utility ---------- */
.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.on-dark .muted { color: var(--bone-on-dark-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* Skip-to-content link — hidden until keyboard focus */
.skip-link { position: fixed; top: 0; left: 0; z-index: 200; transform: translateY(-120%); background: var(--amber); color: #fff; padding: 0.8rem 1.3rem; border-radius: 0 0 var(--r-md) 0; font-weight: 500; transition: transform 0.2s var(--ease); }
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: -4px; }
.nowrap { white-space: nowrap; }

/* ---------- Reduced motion: everything visible, no transform ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}