/* Chrome for the four brand pages (/brands/<slug>).
 *
 * ONE stylesheet, not four inline copies. index.html carries its CSS inline
 * because it is a single self-contained page; four pages sharing one file is
 * the opposite situation, and four copies of ~250 lines is four places for a
 * token to drift. index.html is deliberately NOT changed to use this file —
 * it stays self-contained and this is additive.
 *
 * Every custom property below is copied VERBATIM from index.html's :root and
 * [data-theme="precise"] blocks so the two surfaces are the same site. If a
 * token changes there, change it here.
 *
 * Written by hand; the PAGES are generated (apps/www/scripts/build-brand-pages.mjs).
 */

:root{
  /* Default theme = "obsidian" — mirrors the shop's dark surface */
  --bg:#0a0b0e;
  --surface:#13161e;
  --surface-2:#191d28;
  --line:#232636;
  --line-strong:#2e3346;
  --ink:#f4f5f7;
  --ink-dim:#a8aebd;
  --ink-faint:#6b7280;
  --glow-blue:#1470ef33;
  --glow-purple:#6927da33;
  --aurora:linear-gradient(110deg,#21ccee 0%,#1470ef 28%,#6927da 58%,#f23d94 100%);
  --selection-bg:#1470ef99;
  --selection-fg:#fff;
  --font-sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius:14px;
}
[data-theme="precise"]{
  --bg:hsl(0 0% 100%);
  --surface:hsl(0 0% 98%);
  --surface-2:hsl(0 0% 95%);
  --line:rgba(0,0,0,0.08);
  --line-strong:rgba(0,0,0,0.16);
  --ink:hsl(0 0% 9%);
  --ink-dim:hsl(0 0% 30%);
  --ink-faint:hsl(0 0% 56%);
  --glow-blue:#06b6d418;
  --glow-purple:#06b6d40c;
  --selection-bg:#06b6d4;
  --selection-fg:#fff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100dvh}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--selection-bg);color:var(--selection-fg)}

.aurora{
  position:fixed;
  top:env(safe-area-inset-top, 0);
  left:0;right:0;height:3px;z-index:50;
  background:var(--aurora);background-size:200% 100%;
  animation:auroraShift 8s ease-in-out infinite;
}
@keyframes auroraShift{0%,100%{background-position:0%}50%{background-position:100%}}
@media (prefers-reduced-motion:reduce){.aurora{animation:none}}

.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
@media (max-width:560px){.wrap{padding:0 20px}}

/* Header — same markup and same measurements as index.html */
header{padding:28px 0 20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{
  font-family:var(--font-sans);font-weight:800;font-size:18px;
  letter-spacing:-0.02em;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
}
.wordmark .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--aurora);background-size:200% 100%;
  animation:auroraShift 6s ease-in-out infinite;
  flex-shrink:0;
}
@media (prefers-reduced-motion:reduce){.wordmark .dot{animation:none}}
nav{display:flex;gap:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
nav a{transition:color .18s ease}
.header-end{display:flex;align-items:center;gap:18px}
@media (max-width:640px){nav{gap:16px;font-size:10px}}
@media (max-width:540px){header nav{display:none}}
@media (max-width:560px){.header-end{gap:12px}}

.theme-toggle{
  width:44px;height:44px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink-dim);cursor:pointer;
  display:grid;place-items:center;flex-shrink:0;
  transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .t-light{display:block}
.theme-toggle .t-dark{display:none}
[data-theme="precise"] .theme-toggle .t-light{display:none}
[data-theme="precise"] .theme-toggle .t-dark{display:block}

/* Breadcrumb — the way back up, said in words as well as in JSON-LD */
.crumbs{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);
  padding:12px 0 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.crumbs a{transition:color .18s ease}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--ink-dim)}

/* Hero */
/* Contain the decorative glows. They are absolutely positioned 560px circles
   deliberately hung outside the hero box, and `overflow-x:clip` on <body>
   does NOT stop them widening the document: at a 390px viewport the page
   measures 480px and pans 90px to the right, onto empty background. Clipping
   on the hero — the glows' own containing block — is where it belongs.
   `overflow-x:clip` rather than `overflow:clip` so vertical bleed, which is
   part of the effect, is untouched. */
.hero{padding:56px 0 56px;position:relative;overflow-x:clip}
@media (max-width:640px){.hero{padding:40px 0 40px}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);
  margin-bottom:24px;
  padding:6px 12px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);
}
.eyebrow .swatch{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
h1{
  font-size:clamp(40px, 7vw, 72px);
  font-weight:700;letter-spacing:-0.035em;line-height:1.02;
  margin:0 0 16px;
}
.tagline{
  font-size:clamp(18px, 2vw, 22px);color:var(--accent);
  font-weight:600;margin:0 0 20px;
}
.lede{
  font-size:clamp(16px, 1.5vw, 19px);
  color:var(--ink-dim);max-width:620px;margin:0 0 32px;line-height:1.6;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:12px;font-weight:600;font-size:14px;
  border:1px solid var(--line-strong);color:var(--ink);
  background:var(--surface);transition:all .18s ease;cursor:pointer;
}
.btn-primary{
  background:var(--accent);border:0;color:var(--accent-ink);font-weight:700;
}
.btn svg{width:14px;height:14px;flex-shrink:0}

.glow{
  position:absolute;top:-200px;right:-100px;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle, var(--glow-blue), transparent 60%);
  filter:blur(80px);z-index:-1;pointer-events:none;
}
.glow.glow-2{
  top:auto;bottom:-200px;left:-100px;right:auto;
  background:radial-gradient(circle, var(--glow-purple), transparent 60%);
}

/* Sections */
.section{padding:40px 0}
.section-eyebrow{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px;
}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.fact{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;
}
.fact .label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;
}
.fact .value{font-size:15px;color:var(--ink);font-weight:500}
.fact .value a{border-bottom:1px solid var(--line-strong);transition:all .18s ease}

.links{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:99px;font-size:13px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink-dim);transition:all .18s ease;
}
.chip svg{width:14px;height:14px;flex-shrink:0}

/* Footer */
footer{padding:48px 0 60px;border-top:1px solid var(--line);margin-top:32px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot-left{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);letter-spacing:.04em;text-transform:uppercase}
.foot-left a{border-bottom:1px solid transparent;transition:all .18s ease}

/* Hover states gated to hover-capable, fine-pointer devices — same rule
   index.html uses, and for the same reason: a touch device reports
   `hover: none` and would otherwise keep a "stuck hover" after a tap. */
@media (hover:hover) and (pointer:fine){
  nav a:hover{color:var(--ink)}
  .crumbs a:hover{color:var(--ink)}
  .btn:hover{border-color:var(--line-strong);transform:translateY(-2px)}
  .btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
  .chip:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}
  .fact .value a:hover{color:var(--accent);border-color:var(--accent)}
  .foot-left a:hover{color:var(--ink-dim);border-bottom-color:var(--line-strong)}
  .theme-toggle:hover{color:var(--ink);border-color:var(--line-strong);transform:rotate(15deg)}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn-primary:hover,.chip:hover,.theme-toggle:hover{transform:none}
}

/* Keyboard focus — the pages are mostly links, so losing the caret is the
   whole navigation. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:6px;
}