/* ===========================================================
   THE JAUNTY SPOT — base.css

   Dark, editorial, lit from behind.

   The interface is a stack of frosted glass panels floating over
   two large coloured light sources. Those lights are the identity
   you're shopping as — change identity, the atmosphere behind the
   glass changes colour. That's the product thesis rendered as
   literal light rather than as a badge in the corner.
   =========================================================== */

:root{
  /* Matte black, warmed. The brand palette is ivory, black, matte
     neutrals, burgundy and warm nude — none of which are cool, so the
     base carries a little warmth rather than a blue undertone. */
  --void:        #0A0807;
  --ink:         #16120F;
  /* Text is warm and deliberately *not* white. Pure white on near-black
     is the harshest pairing on the web; this sits around 11:1 — plainly
     legible, nothing like reading a torch. */
  --bone:        #E4DCCC;          /* ivory */
  --bone-soft:   #CFC5B1;          /* large display type, one step back */
  --bone-dim:    rgba(228,220,204,.62);
  --bone-faint:  rgba(228,220,204,.36);
  --nude:        #BFA98F;          /* warm nude, for quiet accents */

  /* glass */
  --glass:       rgba(255,255,255,.055);
  --glass-lift:  rgba(255,255,255,.085);
  --edge:        rgba(255,255,255,.11);
  --edge-lift:   rgba(255,255,255,.20);
  --blur:        blur(22px) saturate(140%);

  /* identity — overridden per identity below */
  --accent:      #A4405A;
  --accent-wash: color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 34%, transparent);

  /* type scale */
  --t-xs:12px; --t-sm:13.5px; --t-base:16px; --t-lg:19px; --t-xl:30px;

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:76px;

  --r:14px;
  --r-lg:22px;
  --maxw:1140px;
}

/* Identity colour is set at runtime from the identity record — see
   applyTheme() in ui.js. Only --accent is supplied; the wash and the
   glow are derived from it here, so adding an identity never means
   touching CSS. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

body{
  background:var(--void);
  color:var(--bone);
  font-family:"Manrope","Helvetica Neue",system-ui,-apple-system,sans-serif;
  font-size:var(--t-base);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* ---------- the signature: ambient identity light ----------
   Two blurred pools of the identity's colour, fixed behind
   everything. This is what makes the glass read as glass. */
body::before,
body::after{
  content:"";
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  filter:blur(90px);
  transition:background 900ms cubic-bezier(.4,0,.2,1);
}
body::before{
  width:min(64vw,760px); aspect-ratio:1;
  top:-20vh; left:-12vw;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 68%);
}
body::after{
  width:min(52vw,620px); aspect-ratio:1;
  bottom:-24vh; right:-14vw;
  background:radial-gradient(circle,var(--accent-wash) 0%,transparent 70%);
}

/* ---------- typography ---------- */
h1,h2,h3{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.005em;
  margin:0;
}
h1{font-weight:500}

/* Masthead treatment — wide-tracked uppercase, the way a magazine
   sets its own name and its section headers. */
.masthead{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  letter-spacing:.30em;
  text-transform:uppercase;
}
.navlink{
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.mono{
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:var(--t-xs);
  letter-spacing:.04em;
}
.kicker{
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--bone-faint);
}
.muted{color:var(--bone-dim)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
.hidden{display:none !important}

/* ---------- glass utility ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
}

/* Browsers without backdrop-filter get a solid panel rather than
   an unreadable transparent one. */
/* Older engines without color-mix fall back to a flat translucent
   accent rather than losing the tint entirely. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  :root{ --accent-wash:rgba(255,255,255,.10); --accent-glow:rgba(255,255,255,.14); }
}

@supports not (backdrop-filter:blur(1px)){
  .glass,.topbar,.chip,.pop,.card .thumb{background:rgba(20,21,27,.94)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}