/* ============================================================
   SHIKAR SIKER — design tokens, reset, base typography
   The single source of truth for colour, type and spacing.
   Spec: DESIGN_DIRECTION.md
   ============================================================ */

/* ---------- fonts (self-hosted, latin + latin-ext) ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-v38-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/fraunces-v38-latin_latin-ext-italic.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-v38-latin_latin-ext-600.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/fraunces-v38-latin_latin-ext-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2')}

:root{
  /* ---------- colour ---------- */
  --forest-deep:#14201A;   /* darkest ground */
  --forest:#23412F;        /* panels on dark */
  --forest-soft:#1B2E23;   /* between the two */
  --moss:#5C7355;
  --sage:#8FA08E;          /* muted text on dark */
  --copper:#C08A52;        /* THE accent — earned, never decorative */
  --copper-deep:#8A5A30;   /* copper for small text on light (AA) */
  --amber:#D9A45E;         /* accent on dark */
  --cream:#F1EBDE;         /* light ground */
  --parchment:#E7DFCC;     /* cards / bands on light */
  --ink:#1B1914;           /* text on light */
  --stone:#6B665A;         /* muted text on light (AA on cream) */

  --line-dark:rgba(217,164,94,.18);
  --line-light:rgba(27,25,20,.14);
  --line-solid:rgba(241,235,222,.10);

  /* ---------- type ---------- */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',Consolas,'Courier New',monospace;

  /* ---------- rhythm (8u) ---------- */
  --u:8px;
  --wrap:1240px;
  --wrap-narrow:820px;
  --pad:clamp(20px,4vw,48px);

  /* ---------- motion ---------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.18s;
  --slow:.5s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
/* a `hidden` element stays hidden even if a component sets its own display —
   without this, any `display:flex` silently defeats the attribute */
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- base type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:.005em}
h1{font-size:clamp(34px,5.2vw,62px);font-weight:400;line-height:1.08}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(20px,2.2vw,27px)}
h4{font-size:clamp(17px,1.5vw,20px)}
p{max-width:68ch}

/* the display full-stop — copper, echoing the mark's base point.
   LOCKED: display headlines are single-colour; only the period is accent. */
.dot{color:var(--copper)}
.on-dark .dot,.is-dark .dot{color:var(--amber)}

/* ---------- shared atoms ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:var(--wrap-narrow)}

.eyebrow{
  font-family:var(--mono);font-weight:500;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--copper-deep);
}
.is-dark .eyebrow{color:var(--amber)}

.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--stone)}
.is-dark .lede{color:var(--sage)}

/* placeholder marker — content that must be replaced with the real thing */
.minta{
  display:inline-block;font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;
  color:var(--copper-deep);border:1px solid currentColor;
  padding:2px 7px;vertical-align:middle;
}
.is-dark .minta{color:var(--amber)}

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