/* ============================================================================
   NORTH SPIRIT VODKA — COMPONENTS  v1.0
   Requires northspirit-tokens.css. No component declares a raw value.
   ========================================================================== */

/* ── RESET, the small honest kind ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(a) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* focus is visible everywhere, and it is never switched off */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.ns-skip {
  position: absolute; left: var(--space-4); top: -4rem; z-index: var(--z-gate);
  background: var(--ns-ink); color: var(--ns-white);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.ns-skip:focus { top: var(--space-4); }

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.ns-section { background: var(--bg); color: var(--fg-muted); padding-block: var(--section-y); }
.ns-container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.ns-container--wide { width: min(var(--container-wide), 100% - var(--gutter) * 2); }
.ns-container--text { width: min(var(--container-text), 100% - var(--gutter) * 2); }

.ns-grid { display: grid; gap: var(--space-5); }
@media (min-width: 40rem)  { .ns-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem)  { .ns-grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .ns-grid--4 { grid-template-columns: repeat(4, 1fr); }
                             .ns-grid--sidebar { grid-template-columns: 18rem 1fr; gap: var(--space-7); } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .ns-grid--4 { grid-template-columns: repeat(2, 1fr); } }

.ns-stack > * + * { margin-top: var(--space-4); }
.ns-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ── TYPE ───────────────────────────────────────────────────────────────── */
.ns-display {                       /* Black River — capitals only, by design */
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-display); line-height: var(--leading-tight);
  font-size: var(--text-4xl); color: var(--fg);
}
.ns-label {                         /* Colus — also capitals only */
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--fg);
}
.ns-kicker {
  font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  /* --accent, not --accent-strong: bright blue measures 3.06:1 on ice and is a
     graphics colour, never a text colour on a light ground. */
  color: var(--accent); margin-bottom: var(--space-3);
}
/* On blue, --accent-strong (#5B93B8) measures 3.99:1 and fails. --accent is
   #B9D3E4 on blue (8.5:1) and #5B93B8 on ink (5.4:1) — both pass. */
[data-ground] .ns-kicker { color: var(--accent); }
.ns-h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-semi); color: var(--fg); }
.ns-h2 { font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); font-weight: var(--weight-semi); color: var(--fg); }
.ns-h3 { font-size: var(--text-xl);  line-height: var(--leading-snug); font-weight: var(--weight-semi); color: var(--fg); }
.ns-h4 { font-size: var(--text-lg);  line-height: var(--leading-snug); font-weight: var(--weight-semi); color: var(--fg); }
.ns-lead { font-size: var(--text-lg); color: var(--fg-muted); max-width: 46ch; }
.ns-body { color: var(--fg-muted); max-width: 72ch; }
.ns-caption { font-size: var(--text-sm); color: var(--fg-subtle); }
.ns-legal { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-subtle); }
.ns-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum"; }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.ns-btn {
  --_bg: var(--ns-ink); --_fg: var(--ns-white); --_bd: var(--ns-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.75rem; padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm); font-weight: var(--weight-semi); letter-spacing: 0.02em;
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ns-btn:hover  { --_bg: var(--ns-blue-deep); --_bd: var(--ns-blue-deep); }
.ns-btn:active { transform: translateY(1px); }
.ns-btn[disabled], .ns-btn[aria-disabled="true"] {
  --_bg: var(--ns-slate-light); --_bd: var(--ns-slate-light); cursor: not-allowed; transform: none;
}
.ns-btn--secondary { --_bg: transparent; --_fg: var(--fg); --_bd: var(--border-strong); }
.ns-btn--secondary:hover { --_bg: var(--bg-recessed); --_bd: var(--accent-strong); }
.ns-btn--accent { --_bg: var(--ns-cork); --_fg: var(--ns-ink); --_bd: var(--ns-cork); }
.ns-btn--accent:hover { --_bg: #B98D57; --_bd: #B98D57; }
.ns-btn--ghost { --_bg: transparent; --_fg: var(--accent); --_bd: transparent; padding-inline: var(--space-2); }
.ns-btn--ghost:hover { --_bg: transparent; --_fg: var(--fg); text-decoration: underline; }
.ns-btn--lg { min-height: 3.25rem; padding: var(--space-4) var(--space-6); font-size: var(--text-base); }
.ns-btn--block { display: flex; width: 100%; }
[data-ground] .ns-btn { --_bg: var(--ns-white); --_fg: var(--ns-ink); --_bd: var(--ns-white); }
[data-ground] .ns-btn:hover { --_bg: var(--ns-blue-light); --_bd: var(--ns-blue-light); }
[data-ground] .ns-btn--secondary { --_bg: transparent; --_fg: var(--ns-white); --_bd: var(--border-strong); }
[data-ground] .ns-btn--secondary:hover { --_bg: rgba(255,255,255,.08); --_bd: var(--ns-white); }
[data-ground] .ns-btn--accent { --_bg: var(--ns-cork); --_fg: var(--ns-ink); --_bd: var(--ns-cork); }
/* ghost has to restate itself on a dark ground: the [data-ground] rule above
   has equal specificity and would otherwise fill it solid white */
[data-ground] .ns-btn--ghost { --_bg: transparent; --_fg: var(--fg); --_bd: transparent; }
[data-ground] .ns-btn--ghost:hover { --_bg: rgba(255,255,255,.08); --_fg: var(--ns-white); }

/* ── CARD · no shadow, ever. A hairline and a fill. ─────── manual p.27 ─── */
.ns-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.ns-card--recessed { background: var(--bg-recessed); }
.ns-card--warm { background: var(--ns-surface-warm); }
.ns-card--teal { background: var(--ns-surface-teal); }
.ns-card--rose { background: var(--ns-surface-rose); }
.ns-card--link { display: block; text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ns-card--link:hover { border-color: var(--accent-strong); transform: translateY(-2px); }

/* ── BADGE ──────────────────────────────────────────────────────────────── */
.ns-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.25rem var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--text-2xs); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  background: var(--bg-recessed); color: var(--fg-muted); border: 1px solid var(--border);
}
.ns-badge--teal { background: var(--ns-surface-teal); color: var(--ns-teal-ink); border-color: #9BD9CF; }
.ns-badge--cork { background: var(--ns-surface-warm); color: var(--ns-cork-ink); border-color: #DCC49F; }
.ns-badge--luna { background: var(--ns-surface-rose); color: var(--ns-luna-ink); border-color: #E0B9C9; }
.ns-badge--warn { background: var(--ns-warn-field); color: var(--ns-warn-ink); border-color: #E8C4A6; }
[data-ground] .ns-badge { background: rgba(255,255,255,.06); color: var(--fg-muted); border-color: var(--border); }
[data-ground] .ns-badge--teal { color: var(--ns-teal); border-color: #2E7F76; }
[data-ground] .ns-badge--cork { color: var(--ns-cork); border-color: #7A6240; }
/* the -ink role colours are tuned for light fills; on a dark ground the full
   role colour is the readable one */
[data-ground] .ns-card--teal b, [data-ground] .ns-card--teal strong { color: var(--ns-teal); }
[data-ground] .ns-card--warm b, [data-ground] .ns-card--warm strong { color: var(--ns-cork); }
[data-ground] .ns-card--rose b, [data-ground] .ns-card--rose strong { color: var(--ns-luna); }

/* ── FORM ───────────────────────────────────────────────────────────────── */
.ns-field { display: grid; gap: var(--space-2); }
.ns-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg); }
.ns-field__hint  { font-size: var(--text-xs); color: var(--fg-subtle); }
.ns-field__error { font-size: var(--text-xs); color: var(--ns-warn-ink); display: flex; gap: var(--space-2); align-items: center; }
.ns-input {
  width: 100%; min-height: 2.75rem; padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ns-input::placeholder { color: var(--ns-slate-light); }
.ns-input:hover { border-color: var(--border-strong); }
.ns-input:focus-visible { border-color: var(--focus); }
.ns-input[aria-invalid="true"] { border-color: var(--ns-warn); background: var(--ns-warn-field); }
.ns-input[disabled] { background: var(--bg-recessed); color: var(--ns-slate-light); cursor: not-allowed; }
select.ns-input { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.9rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--space-7); }

/* ── TABLE ──────────────────────────────────────────────────────────────── */
.ns-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ns-table th {
  text-align: left; font-weight: var(--weight-semi); color: var(--fg);
  background: var(--ns-header-fill); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
[data-ground] .ns-table th { background: rgba(255,255,255,.05); }
.ns-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; }
.ns-table tbody tr:hover { background: var(--bg-recessed); }
.ns-table--wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── HEADER & NAV ───────────────────────────────────────────────────────── */
.ns-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
}
.ns-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 4.25rem; }
.ns-header__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; margin-right: auto; }
.ns-nav { display: none; gap: var(--space-1); }
.ns-header__burger { display: inline-flex; }
@media (min-width: 64rem) { .ns-nav { display: flex; } .ns-header__burger { display: none; } }
.ns-nav__link {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--fg-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ns-nav__link:hover { color: var(--fg); background: var(--bg-recessed); }
.ns-nav__link[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent-strong); }

/* ── AGE GATE · one question, two buttons, no data capture ──────────────── */
.ns-gate {
  position: fixed; inset: 0; z-index: var(--z-gate);
  display: grid; place-items: center; padding: var(--gutter);
  background: var(--ns-ink);
}
.ns-gate__panel { max-width: 30rem; text-align: center; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.ns-footer { background: var(--ns-ink); color: var(--ns-fog); padding-block: var(--space-8) var(--space-6); }
.ns-footer a { color: var(--ns-blue-light); text-decoration: none; }
.ns-footer a:hover { text-decoration: underline; }
.ns-footer__cols { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .ns-footer__cols { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.ns-footer__title { font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ns-white); margin-bottom: var(--space-3); }
.ns-footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.ns-footer__legal { margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--ns-line-dark); font-size: var(--text-xs); color: var(--ns-dim-dark); }

/* ── UTILITIES ──────────────────────────────────────────────────────────── */
.ns-hairline { border: 0; border-top: 1px solid var(--border); }
.ns-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ns-scrim { position: relative; }
.ns-scrim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,18,25,.92) 0%, rgba(11,18,25,.55) 34%, rgba(11,18,25,0) 72%);
}
.ns-scrim > * { position: relative; z-index: 1; }