/* ============================================================
   core.css - everything the three pages share.

   Load order on every page:
     <link rel="stylesheet" href="/css/core.css">
     <link rel="stylesheet" href="/css/<page>.css">

   Page stylesheets carry only what is genuinely specific to that
   page, plus a short "page deltas" block where a page still
   diverges from the shared component. Those deltas are the drift
   left over from the three pages having been built separately;
   they are listed deliberately so they can be removed as a
   design decision rather than disappearing inside a refactor.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* ground: warm near-black, biased toward the sunset hue, never pure black */
  --bg-0: #0d0a08;
  --bg-1: #151009;
  --surface: #1a1410;
  --surface-2: #221a14;

  /* ink */
  --text: #f0eadf;
  --text-dim: #b3a99a;
  --text-faint: #948b7c;

  /* brand */
  --teal: #7fd8dc;
  --teal-deep: #2f8f96;
  --gold: #d9c15f;
  --gold-bright: #edd87f;
  --purple: #c9a2e8;
  --saber: #efe6f7;

  /* paper: the one warm surface, used by the art frames */
  --paper: #efe8da;
  --paper-edge: #d9d0be;
  --graphite: #5a5245;

  /* lines */
  --line: rgba(240, 234, 223, 0.08);
  --line-strong: rgba(127, 216, 220, 0.28);

  --radius: 14px;
  --radius-sm: 10px;

  --font-display: 'Pathway Gothic One', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 48px);
  --content: 1080px;
  --nav-h: 59px;

  /* section rhythm and grounds. Pages override these, not the rules. */
  --section-py: clamp(72px, 11vw, 128px);
  /* Light scrim: the ambient scene reads through every plain section.
     Held at .25 rather than 0 because fully transparent drops the thinnest
     copy to 4.53:1, and AA (4.5) is a hard rule. At .25 the worst block
     measures 4.90:1. See docs/DESIGN-BRIEF.md and the contrast note in CLAUDE.md. */
  --ground-base: rgba(13, 10, 8, .25);
  --ground-tint: rgba(21, 16, 9, .80);
  --ground-head: radial-gradient(84% 66% at 50% 44%, rgba(9, 7, 6, .70), rgba(13, 10, 8, .44) 66%);
}

/* ---------- reset and base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg-0); }

body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

::selection { background: rgba(201, 162, 232, .3); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- ambient scene: the logo's world, rebuilt as light ----------
   Colours sampled from the clean regions of the original logo artwork.
   Fixed behind everything; content sits on translucent scrims above it. */
.atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    /* sun, low and well to the right so it never sits behind the copy */
    radial-gradient(90% 46% at 82% 66%, rgba(176,96,64,.42) 0%, rgba(128,66,46,.18) 36%, transparent 64%),
    /* sky, dusk to horizon */
    linear-gradient(180deg,
      #140e11 0%,
      #1d1418 18%,
      #2b1c1c 38%,
      #3d2622 54%,
      #4d2f26 64%,
      #24160f 70%,
      #120d0a 80%,
      #0d0a08 100%);
}
/* haze sitting on the horizon line */
.atmos::before {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  top: 62%; height: 10%;
  background: linear-gradient(180deg, transparent, rgba(196,128,92,.22) 45%, transparent);
  filter: blur(20px);
}
/* ground haze so the ridge sits in air, not pasted on */
.atmos::after {
  content: "";
  position: absolute;
  inset: 68% 0 0 0;
  background: linear-gradient(180deg, rgba(110,60,38,.16), transparent 44%);
  filter: blur(12px);
}
.atmos-ridge {
  position: absolute;
  left: 0; right: 0;
  top: 54%;
  width: 100%;
  height: 48%;
  display: block;
  opacity: .96;
}
/* Atmospheric perspective. Air between the viewer and each ridge softens
   its edge and lifts it toward the sky, so the layers read as distance
   rather than as stacked cut-outs. The nearest canopy stays crisp. */
.atmos-ridge .r-far         { filter: blur(3.2px);  opacity: .62; }
.atmos-ridge .r-temple-far  { filter: blur(2.4px);  opacity: .74; }
.atmos-ridge .r-temple-near { filter: blur(1.4px);  opacity: .90; }
.atmos-ridge .r-near        { filter: blur(0.5px); }
/* Embers. Two tiled fields at different depths so they rise at different
   rates, masked so each ember dims as it climbs away from the fires.
   The tile repeats, and the rise is exactly one tile, so it never seams. */
.atmos-embers,
.atmos-embers::before {
  content: "";
  position: absolute;
  inset: 62% 0 0 0;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 42%, transparent 88%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 42%, transparent 88%);
}
/* near field: larger, warmer, fewer */
.atmos-embers {
  background-size: 340px 300px;
  background-image:
    radial-gradient(2px 2px at 14% 46%, rgba(236,150,80,.72) 50%, transparent 51%),
    radial-gradient(2px 2px at 63% 78%, rgba(236,150,80,.58) 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 22%, rgba(224,132,68,.52) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 37% 12%, rgba(236,150,80,.44) 50%, transparent 51%);
}
/* far field: smaller, dimmer, denser */
.atmos-embers::before {
  inset: 0;
  background-size: 220px 210px;
  background-image:
    radial-gradient(1.5px 1.5px at 23% 62%, rgba(224,132,68,.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 34%, rgba(224,132,68,.34) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 74% 58%, rgba(224,132,68,.32) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 18%, rgba(236,150,80,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 84%, rgba(224,132,68,.28) 50%, transparent 51%);
}

/* ambient starfield, very quiet */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(240,234,223,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(240,234,223,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 34%, rgba(201,162,232,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, rgba(240,234,223,.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 58%, rgba(127,216,220,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 86%, rgba(240,234,223,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 82%, rgba(240,234,223,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 8%, rgba(240,234,223,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 33%, rgba(217,193,95,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 45%, rgba(240,234,223,.2) 50%, transparent 51%);
}

/* ---------- layout ---------- */
main, .site-footer { position: relative; z-index: 1; }

.wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Sections come in three grounds. The values live in custom properties
   so a page can retune its own world without forking the rule. */
.section {
  padding-block: var(--section-py);
  background: var(--ground-base);
}
.section--tint {
  padding-block: var(--section-py-tint, var(--section-py));
  background: var(--ground-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--head {
  padding-block:
    var(--section-py-head-top, var(--section-py))
    var(--section-py-head-bottom, var(--section-py));
  background: var(--ground-head);
}

.section-head {
  display: grid;
  margin-bottom: clamp(36px, 5vw, 56px);
}

/* ---------- type ---------- */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold);
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 1.05;
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  text-wrap: balance;
}
p { color: var(--text-dim); }
.lead { color: var(--text); }
.meta { font-size: .8rem; color: var(--text-faint); }
.num { font-variant-numeric: tabular-nums; }

/* Small uppercase tracked label. Used for in-component labels only.
   Not a section eyebrow: those were deliberately removed. */
.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--teal);
}

/* ---------- saber rule (the one signature device) ---------- */
.saber {
  position: relative;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--purple) 30%, var(--purple) 70%, transparent);
  box-shadow: 0 0 12px rgba(201, 162, 232, .45);
}
.saber::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0.5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--saber), transparent);
}
/* the centred divider between major sections */
.saber--divider {
  width: min(320px, 62%);
  margin-inline: auto;
}
.saber-divider { position: relative; z-index: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #241c06;
  box-shadow: 0 2px 12px rgba(217, 193, 95, .25);
}
.btn-primary:hover { box-shadow: 0 4px 20px rgba(217, 193, 95, .38); }
.btn-primary:active { box-shadow: 0 2px 12px rgba(217, 193, 95, .25); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--teal);
  padding: 13px 25px; /* compensate 1px border for identical outer size */
}
.btn-ghost:hover { border-color: var(--teal); background: rgba(127, 216, 220, .07); }
.btn-sm { padding: 9px 16px; font-size: .85rem; }
.btn-ghost.btn-sm { padding: 8px 15px; }
.btn:focus-visible { border-radius: var(--radius-sm); }
.btn:disabled { opacity: .7; cursor: default; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(240, 234, 223, .05);
}
.card--sm { border-radius: var(--radius-sm); }

/* ---------- nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 10, 8, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.brand img {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.brand .wordmark {
  font-size: 1.1rem;
  letter-spacing: .2em;
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.navlink {
  position: relative;
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  padding: 6px 0;
}
.navlink:hover { color: var(--text); }
.navlink[aria-current="page"] { color: var(--text); }
/* the small saber, reused as the active-page underline */
.navlink[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple) 30%, var(--purple) 70%, transparent);
  box-shadow: 0 0 12px rgba(201, 162, 232, .45);
}
.navlink[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0.5px;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--saber), transparent);
}

/* ---------- commissions banner, above the header ---------- */
.promo-bar {
  position: relative;
  z-index: 51;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px var(--gutter);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #241c06;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.promo-bar:hover { background: var(--gold-bright); }
.promo-bar:focus-visible { outline-color: #241c06; outline-offset: -4px; border-radius: 0; }
.promo-bar .promo-short { display: none; }
.promo-arrow { font-weight: 400; }
@media (max-width: 640px) {
  .promo-bar { font-size: .875rem; }
  .promo-bar .promo-long,
  .promo-bar .promo-arrow { display: none; }
  .promo-bar .promo-short { display: inline; }
}

/* ---------- mobile sticky Whatnot bar ---------- */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 10, 8, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.mobile-cta-bar .btn { width: 100%; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(21, 16, 9, .88);
}
.social-row a,
.footer-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
}
.social-row a:hover,
.footer-nav a:hover { color: var(--teal); }
.footer-links { font-size: .85rem; }
.footer-links a { text-decoration: none; }
.fine-print {
  font-size: .8rem;
  color: var(--text-faint);
  line-height: 1.7;
}
.fine-print .site { color: var(--text-dim); }

/* ---------- motion ----------
   Everything that moves lives in here, so a reduced-motion visitor
   gets the page fully rendered and completely still. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .atmos-embers { animation: emberRiseNear 34s linear infinite; }
  .atmos-embers::before { animation: emberRiseFar 61s linear infinite; }
  @keyframes emberRiseNear { from { background-position: 0 0; } to { background-position: 0 -300px; } }
  @keyframes emberRiseFar  { from { background-position: 0 0; } to { background-position: 0 -210px; } }

  .btn-primary:hover { transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); }

  .card { transition: border-color 200ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease; }

  .navlink,
  .social-row a,
  .footer-nav a,
  .footer-links a { transition: color 160ms ease; }

  /* The saber ignite: the site's one signature motion.
     Each rule strikes out from its centre the first time it is seen.
     Guarded on .js so a scripted-off page draws every rule at once,
     and it lives in here so reduced motion never sees it at all. */
  .js .saber {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 460ms cubic-bezier(.16, .84, .34, 1);
  }
  .js .saber.lit { transform: scaleX(1); }
}