/* Shared by every page: fonts, colour tokens, reset, layout helpers, buttons and the nav. */

/* ---------- fonts (self-hosted; the site makes no external requests) ---------- */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url('../assets/fonts/anton-latin.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2'); }
/* the latin subsets have no ₹, so it comes from these one-glyph files */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url('../assets/fonts/anton-rupee.woff2') format('woff2'); unicode-range: U+20B9; }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-rupee.woff2') format('woff2'); unicode-range: U+20B9; }
@font-face { font-family: 'Reenie Beanie'; font-weight: 400; font-display: swap; src: url('../assets/fonts/reenie-beanie-latin.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --green: #013b01; --shadow: #140d08; --cream: #f6e7c1; --paper: #faf3e3; --lilac: #c9a8dd;
  --red: #a42323; --orange: #dd682b; --gold: #c98a2b;   /* intro colours */
  --ink: #20261c; --muted: #5b6352; --line: #e4d8bc;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --hand: 'Reenie Beanie', 'Bradley Hand', cursive;
  color-scheme: light;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.6; }
:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }
/* bold is 800 everywhere: the approved designs were built with 400 / 600 / 800 only */
b, strong { font-weight: 800; }
/* --hdr is the nav's height, set by js/core.js */
section, footer { scroll-margin-top: var(--hdr, 60px); }

/* ---------- layout helpers ---------- */
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1120px; margin: 0 auto; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; line-height: 1.02; }
.grad { background: linear-gradient(178deg, var(--cream) 30%, var(--lilac) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kick { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { border: 0; border-radius: 999px; background: var(--cream); color: var(--ink); font: 800 .95rem var(--body); padding: 14px 28px; cursor: pointer; }

/* ---------- nav ---------- */
.nav { background: var(--green); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; border-bottom: 1px solid rgba(246,231,193,.12); }
.nav .wrap { display: flex; align-items: center; gap: 16px; padding-block: 8px; }
.nav-home { display: block; }
.nav-logo { height: 40px; width: auto; display: block; }
.nav-links { margin-left: auto; display: flex; gap: 22px; }
.nav-links a { color: var(--cream); text-decoration: none; font-weight: 800; font-size: .9rem; }
.nav-links a:hover { color: var(--lilac); }
/* phones get a lone Shop link instead of the full list */
.nav-shop { display: none; color: var(--cream); text-decoration: none; font-weight: 800; font-size: .9rem; margin-left: auto; padding: 8px 4px; }
.nav-links a[aria-current="page"], .nav-shop[aria-current="page"] { color: var(--lilac); }
.nav-cart { border: 0; border-radius: 999px; background: var(--cream); color: var(--green); font: 800 .85rem var(--body); padding: 9px 16px; cursor: pointer; white-space: nowrap; }
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-shop { display: inline-block; }
  .nav-logo { height: 34px; }
}
@media (min-width: 820px) { .nav-logo { height: 52px; } }