/* ─────────────────────────────────────────────────────────────────────────
   CITELIGHT · CANONICAL CHROME
   One definition of the nav, the footer and the brand lockup. Every page
   links this file and none of them redefine what is in it. An audit found
   six pages carrying four navs, five footers and four brand treatments,
   all passing chrome-scan, because presence is not sameness.

   WORDMARK POLARITY, and the reason it is a token.
   The lockup is dark on light grounds and light on dark ones. That was
   previously done by overriding colour on a more specific selector, which
   is a race: the moment any rule reaches (0,1,1) the override loses and the
   lockup renders dark ink on a dark card. Escalating specificity again just
   moves the race one step along.
   So the ink is a TOKEN, and a dark ground REBINDS it. There is nothing to
   out-specify, because there is only one declaration. Ink and ground are
   declared together, which is the rule everywhere else in this system.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* The canonical chrome is SELF-SUFFICIENT. It shipped depending on page tokens
     (--aurum-300, --ink-0) and on a page that names its tokens differently the
     gold disk and the CTA pill both vanished: an undefined custom property makes
     the whole declaration invalid and it falls back silently. Chrome that only
     works on pages that happen to share a vocabulary is not canonical.
     A page defining these later still wins, which is the intended layering. */
  --aurum-300:#F6D378; --aurum-500:#E5B53E; --aurum-600:#B8913A;
  --aurum-glow:rgba(229,181,62,.30);
  --ink-0:#1A1613; --ink-2:#6E685E; --bone-0:#F1EEE8;
  --font-sans:'Söhne',-apple-system,BlinkMacSystemFont,sans-serif;
  --r-pill:999px; --gut:clamp(20px,5vw,40px); --max:1200px;
  --d-micro:.16s; --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1);

  --chrome-ink:      #1A1613;              /* lockup on a light ground */
  --chrome-ink-soft: #6E685E;
  --chrome-line:     rgba(26,22,19,.12);
  --chrome-seam:     #EAE7E0;   /* the ground the footer rises out of */
  --chrome-radius:   22px;      /* --r-lg, the value the card always had */
}
/* any dark ground rebinds the token; no selector here is more specific than
   .brand, so nothing can win a fight it is not having */
.on-dark{
  --chrome-ink:      rgba(255,248,236,.95);
  --chrome-ink-soft: rgba(255,248,236,.72);
  --chrome-line:     rgba(255,248,236,.18);
}

/* ── brand lockup ───────────────────────────────────────────────────────── */
.brand{
  display:inline-flex;align-items:center;gap:.55em;min-height:44px;
  padding-block:8px;font-family:'Söhne',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;font-size:.98rem;
  letter-spacing:-.01em;color:var(--chrome-ink);text-decoration:none;
}
.brand__disk{
  width:16px;height:16px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 30%,var(--aurum-300),var(--aurum-500) 46%,var(--aurum-600) 78%);
  box-shadow:0 0 10px 1px var(--aurum-glow),0 1px 2px rgba(26,22,19,.35);
}

/* ── floating pill nav ──────────────────────────────────────────────────────
   Two variants, one structure. The default sits on light grounds. Adding
   .nav--on-dark alongside .on-dark rebinds the ink and the glass; the
   geometry, the spacing and the motion are identical in both. */
.nav{
  position:fixed;inset:16px 0 auto 0;z-index:60;display:flex;justify-content:center;
  padding-inline:clamp(20px,5vw,40px);pointer-events:none;
}
.nav__bar{
  pointer-events:auto;display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  width:100%;max-width:760px;padding:9px 9px 9px 18px;border-radius:var(--r-pill,999px);
  background:rgba(241,238,232,.72);border:1px solid var(--chrome-line);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px -14px rgba(26,22,19,.32);
  transition:background var(--d-micro,.16s) var(--ease,ease),box-shadow var(--d-micro,.16s) var(--ease,ease);
}
.nav.scrolled .nav__bar{
  background:rgba(241,238,232,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 40px -14px rgba(26,22,19,.4);
}
.nav--on-dark .nav__bar{background:rgba(28,23,16,.62);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 40px -18px rgba(0,0,0,.6)}
.nav--on-dark.scrolled .nav__bar{background:rgba(28,23,16,.78)}
.nav__links{display:flex;gap:clamp(12px,1.6vw,22px);margin-left:auto;font-size:.9rem;color:var(--chrome-ink-soft)}
.nav__links a{color:var(--chrome-ink-soft);text-decoration:none;transition:color var(--d-micro,.16s) var(--ease-soft,ease)}
.nav__links a:hover{color:var(--chrome-ink)}
.nav__cta{
  font-size:.88rem;font-weight:500;min-height:44px;display:inline-flex;align-items:center;
  padding:11px .95em;border-radius:var(--r-pill,999px);text-decoration:none;
  color:var(--bone-0);background:var(--ink-0);
  transition:transform var(--d-micro,.16s) var(--ease,ease),background var(--d-micro,.16s) var(--ease,ease);
}
.nav--on-dark .nav__cta{background:var(--aurum-300);color:#1A1409}
.nav__cta:hover{transform:translateY(-1px)}
.nav__links a:focus-visible,.nav__cta:focus-visible,.brand:focus-visible{
  outline:none;border-radius:8px;box-shadow:0 0 0 2px var(--bone-0),0 0 0 4px var(--aurum-500);
}
@media (max-width:640px){ .nav__links{display:none}
  /* with the links hidden the bar's gap left the CTA floating beside the
     wordmark with 150px of dead space to its right. Spread the two ends. */
  .nav__bar{justify-content:space-between;gap:12px}
 }
@media (prefers-reduced-motion: reduce){ .nav__cta:hover{transform:none} }

/* ── glass footer over the dusk scene ───────────────────────────────────── */
.footer{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(64px,8vw,116px) 0}
/* THE SEAM. The page ground met the dusk scene as a hard horizontal cut, cream
   straight to sky, measured at a 37-level luminance step in one pixel row. The
   scene now emerges from the page's own ground over a band instead of starting
   at it. --chrome-seam is a token because the ground differs per page; a page
   with a different ground rebinds it rather than the footer guessing. */
.footer::before{
  content:"";position:absolute;inset:0 0 auto 0;z-index:-1;pointer-events:none;
  height:clamp(96px,13vw,180px);
  background:linear-gradient(180deg,var(--chrome-seam) 0%,var(--chrome-seam) 8%,
    color-mix(in srgb,var(--chrome-seam) 62%,transparent) 44%,transparent 100%);
}
.footer__scene{position:absolute;inset:0;z-index:-2}
.footer__media{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.footer__media--still{display:none}
.footer__scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--chrome-seam) 0%,rgba(201,211,214,.75) 13%,rgba(203,206,205,.35) 34%,rgba(40,36,30,.55) 78%,rgba(26,22,19,.86) 100%);
}
.footer__grid{position:relative;z-index:2;max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;
  background:linear-gradient(180deg,rgba(15,17,26,.38),rgba(15,17,26,.52));
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,244,214,.13);border-radius:22px;padding:clamp(26px,3.5vw,46px);
  box-shadow:0 24px 60px -30px rgba(10,12,20,.55)}
.footer__wordmark{position:relative;z-index:1;margin-top:clamp(36px,5vw,72px);text-align:center;
  font-size:clamp(96px,21vw,360px);line-height:.78;font-weight:500;letter-spacing:-.045em;white-space:nowrap;
  color:rgba(255,244,214,.8);mix-blend-mode:overlay;text-shadow:0 0 60px rgba(246,211,120,.35);user-select:none;pointer-events:none;padding-bottom:.04em}
/* The canonical footer uses .btn--primary, which lived only in page stylesheets.
   On a page without one it rendered as a raw blue underlined link. Same lesson as
   the tokens: chrome that depends on the page is not canonical. Scoped to the
   footer so a page's own buttons are untouched. */
.footer .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:13px 22px;border-radius:var(--r-pill,999px);text-decoration:none;border:none;
  font-family:'Söhne',-apple-system,BlinkMacSystemFont,sans-serif;font-size:.95rem;font-weight:500;letter-spacing:-.004em;
  transition:transform var(--d-micro,.16s) var(--ease,ease),background var(--d-micro,.16s) var(--ease,ease)}
/* the footer card IS the dark ground, so an ink button vanishes into it. Same
   treatment the nav CTA already uses on dark: the accent carries it. */
/* DARK TEXT IS DELIBERATE. White on this gold measures 1.45:1, which is an
   invisible label on the primary conversion button; dark measures 12.64:1.
   White only reaches 4.5:1 on a fill around #8A6B1F, which is a brown pill
   rather than aurum. Asked for, measured, and declined on the numbers - the
   brand colour is not darkened past recognition to carry white text. */
.footer .btn--primary{background:var(--aurum-300);color:#1A1409}
.footer .btn--primary:hover{transform:translateY(-1px);background:#F6D378}
.footer .btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 0 4px var(--aurum-500)}
@media (prefers-reduced-motion: reduce){.footer .btn:hover{transform:none}}
.footer__brandcol{grid-column:1;display:flex;flex-direction:column;gap:15px;max-width:36ch}
.footer__tag{color:var(--chrome-ink-soft);font-size:.96rem;line-height:1.55}
.footer__meta{font-family:'Söhne',-apple-system,BlinkMacSystemFont,sans-serif;font-size:.792rem;color:rgba(255,248,236,.62);line-height:1.7;margin-top:6px}
.footer__col{display:flex;flex-direction:column;gap:11px;font-size:.92rem}
.footer__col b{color:rgba(255,248,236,.92);font-weight:500;font-size:.896rem;letter-spacing:0;text-transform:none;margin-bottom:2px}
.footer__col a{color:rgba(255,248,236,.85);text-decoration:none;transition:color var(--d-micro,.16s) var(--ease,ease)}
.footer__col a:hover{color:#FFF6E4}
.footer__col a:focus-visible{outline:none;border-radius:6px;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 0 4px var(--aurum-500)}
@media (max-width:860px){ .footer__grid{grid-template-columns:1fr 1fr} .footer__brandcol{grid-column:1 / -1} }
@media (max-width:560px){ .footer__grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){
  .footer__media{display:none}
  .footer__media--still{display:block}
}

/* ─────────────────────────────────────────────────────────────────────────
   TYPOGRAPHIC RAGGING · site-wide, and deliberately not per string.
   An audit found short last lines on nine of ten pages at both breakpoints.
   The brittle fix is a <br> or a &nbsp; per sentence, which is sediment: it
   survives until the copy changes by one word and then breaks somewhere new.
   The browser can do this, so let it.
     balance · headings and short blocks, evens the lines
     pretty   · body copy, specifically avoids a one-word last line
   Both degrade to normal wrapping where unsupported, so nothing depends on it.
   ───────────────────────────────────────────────────────────────────────── */
h1,h2,h3,.dek,.lede,.card__t,.rp__glead{text-wrap:balance}
p,li,.card__d,.footer__tag,.footer__meta,blockquote{text-wrap:pretty}