/* =================================================================
   MAYURA STATION — FOUNDATIONS
   Reset, typography, buttons, containers, accessibility.
   Depends on tokens.css (load it FIRST).
   Layout / section styles live in main.css.

   Extracted and cleaned from the proven ui/v6 prototype, which
   follows design-system/mayura-station/MASTER.md exactly.
   ================================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;color-scheme:dark}

body{
  font-family:var(--roboto);font-size:16px;font-weight:300;
  line-height:1.75;color:var(--text);background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-feature-settings:"kern","liga","calt";
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul{list-style:none}

/* ---------- Selection ---------- */
::selection{background:var(--gold);color:var(--ink)}

/* ---------- Skip link (off-screen; focus reveals) ---------- */
.skip{
  position:absolute;top:-100%;left:var(--s2);
  background:var(--gold);color:var(--ink);
  padding:10px 16px;
  font-family:var(--mulish);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  z-index:999;
}
.skip:focus{top:var(--s2)}

/* =================================================================
   TYPOGRAPHIC SYSTEM
   Cinzel headings · Mulish structure/labels · Roboto body.
   ================================================================= */
h1,h2,h3{font-family:var(--cinzel);font-weight:500;letter-spacing:.02em;color:var(--text)}
h1{font-size:clamp(40px,6.5vw,110px);line-height:.95;font-weight:600}
h2{font-size:clamp(28px,3.6vw,56px);line-height:1.08}
h3{font-size:clamp(20px,1.8vw,26px);line-height:1.25;font-weight:500;letter-spacing:.05em;text-transform:uppercase}

.wordmark{
  font-family:var(--cinzel);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}

/* Chapter heading eyebrow (number + hairline) */
.chapter__no{
  font-family:var(--mulish);font-size:11px;font-weight:600;
  letter-spacing:.35em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:18px;margin-bottom:var(--s4);
}
.chapter__no::before{content:"";width:48px;height:1px;background:var(--gold)}

/* Data label */
.k{
  font-family:var(--mulish);font-size:10px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mute);
  display:block;
}

/* ---------- Body copy ---------- */
p{color:var(--text);font-weight:300}
.lede{font-size:clamp(17px,1.4vw,21px);line-height:1.65;color:var(--text);font-weight:300;max-width:58ch}
.body{color:var(--mute);max-width:62ch}
.body--wide{max-width:68ch}

/* Editorial drop-cap (optional — apply to a lede) */
.drop-cap::first-letter{
  font-family:var(--cinzel);font-weight:500;
  font-size:4.2em;line-height:.82;
  float:left;margin:.08em .14em -.08em 0;
  color:var(--gold);
}

/* Tabular numerics — stat numerals */
.num{
  font-family:var(--cinzel);font-weight:500;color:var(--gold);
  font-variant-numeric:tabular-nums lining-nums;
  line-height:.95;letter-spacing:.02em;
}

/* =================================================================
   BUTTONS
   Outline-gold (fill on hover) · solid-gold (invert) · ghost ·
   terracotta (Steakhouse chapter ONLY).
   ================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px;
  font-family:var(--mulish);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  border:1px solid;transition:all 240ms var(--ease);
  cursor:pointer;
}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.btn .arr{transition:transform 240ms var(--ease);font-size:14px}
.btn:hover .arr{transform:translateX(4px)}
.btn--gold{color:var(--gold);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold);color:var(--ink)}
.btn--solid{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
.btn--solid:hover{background:transparent;color:var(--gold)}
.btn--ghost{color:var(--text);border-color:var(--rule-soft)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
/* Steakhouse only — terracotta is reserved for the Steakhouse chapter. */
.btn--terra{background:var(--terra);color:var(--text);border-color:var(--terra)}
.btn--terra:hover{background:var(--terra-2);border-color:var(--terra-2)}

/* =================================================================
   CONTAINERS
   ================================================================= */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:900px}

/* =================================================================
   ACCESSIBILITY
   Respect reduced-motion. Focus is always visible (never removed
   without a replacement).
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}