/* ================================================================
   CARECAY · DESIGN POLISH LAYER
   Two-mode system: Light (white + navy + coral) · Dark (black + white + coral)
   Plus: font pairings, accent swatches, section rhythm, nav controls
   ================================================================ */

/* ---------- TONE PALETTES ---------- */
/* LIGHT — pure, clean, no cream tint */
body[data-tone="cream"]{
  --cream:#ffffff;
  --cream-2:#f4f4f4;
  --paper:#ffffff;
  --ink:#0f1a3d;
  --ink-2:#243066;
  --coral:#e87862;
  --coral-deep:#cf5c45;
  --muted:#6a6877;
  --rule:rgba(15,26,61,.10);
  --rule-2:rgba(15,26,61,.06);
  --shadow:0 14px 40px -22px rgba(15,26,61,.35);
}

/* DARK — black + white + coral; no muddy greys leaking */
body[data-tone="ink"],
body[data-tone="navy"]{
  --cream:#0a0a0d;
  --cream-2:#15151b;
  --paper:#0f0f14;
  --ink:#ffffff;
  --ink-2:#dfe2ee;
  --coral:#ff8b73;
  --coral-deep:#e87862;
  --muted:#8e8e9a;
  --rule:rgba(255,255,255,.10);
  --rule-2:rgba(255,255,255,.06);
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
}

/* Other tones (kept for tweaks panel) */
body[data-tone="slate"]{--cream:#eef0f4;--cream-2:#dde1e9;--paper:#f4f6fa;--ink:#1c2438;--ink-2:#2c354a;--muted:#7a8194;--rule:rgba(28,36,56,.12);--shadow:0 14px 40px -22px rgba(28,36,56,.35)}
body[data-tone="olive"]{--cream:#eeebde;--cream-2:#dad9c4;--paper:#f3f1e3;--ink:#2a2e1f;--ink-2:#3a4030;--muted:#7d7e63;--rule:rgba(42,46,31,.14);--shadow:0 14px 40px -22px rgba(42,46,31,.35)}
body[data-tone="mocha"]{--cream:#f0e8e0;--cream-2:#ddd1c4;--paper:#f5edd9;--ink:#2d201a;--ink-2:#3f2e25;--muted:#857466;--rule:rgba(45,32,26,.15);--shadow:0 14px 40px -22px rgba(45,32,26,.35)}

/* ---------- ACCENT SWATCHES ---------- */
body[data-accent="coral"]{--coral:#e87862}
body[data-tone="ink"][data-accent="coral"],body[data-tone="navy"][data-accent="coral"]{--coral:#ff8b73}
body[data-accent="olive"]{--coral:#8aa550}
body[data-accent="marine"]{--coral:#3d80b8}
body[data-accent="plum"]{--coral:#a86fa1}
body[data-accent="amber"]{--coral:#d99748}

/* ---------- BODY / GLOBAL ELEVATION ---------- */
body{background:var(--cream);color:var(--ink);transition:background .35s ease,color .35s ease}
body[data-tone="ink"] .grain,
body[data-tone="navy"] .grain{opacity:0 !important}
body[data-tone="cream"] .grain{opacity:.04 !important}

/* Selection color */
::selection{background:var(--coral);color:#0f0f14}
body[data-tone="ink"] ::selection,body[data-tone="navy"] ::selection{background:var(--coral);color:#0a0a0d}

/* ================================================================
   DARK MODE — comprehensive overrides for accumulated cream-tinted
   sections. Surgical, no !important spam where not needed.
   ================================================================ */
body[data-tone="ink"] section,
body[data-tone="ink"] main,
body[data-tone="ink"] footer,
body[data-tone="navy"] section,
body[data-tone="navy"] main,
body[data-tone="navy"] footer{background-color:transparent}

/* Sections that previously used var(--cream) backgrounds */
body[data-tone="ink"] .wrap,
body[data-tone="ink"] .cta,
body[data-tone="ink"] .next,
body[data-tone="ink"] .partners,
body[data-tone="ink"] .editorial,
body[data-tone="ink"] .ev,
body[data-tone="ink"] .sellform,
body[data-tone="ink"] .contactform,
body[data-tone="ink"] .deliv,
body[data-tone="ink"] .spec,
body[data-tone="ink"] .story{background-color:var(--cream)}

/* Partners rail uses cream-2 in light */
body[data-tone="ink"] .phlong{background-color:var(--cream-2)}

/* Pre-loader cover */
body[data-tone="ink"] .pre,
body[data-tone="ink"] .pre__inner,
body[data-tone="ink"] .pre__top,
body[data-tone="ink"] .pre__bot{background-color:var(--cream) !important}

/* Card surfaces — slightly lifted from page bg */
body[data-tone="ink"] .next__c,
body[data-tone="ink"] .dep,
body[data-tone="ink"] .story__stat,
body[data-tone="ink"] .quote,
body[data-tone="ink"] .deliv__c,
body[data-tone="ink"] .phlong__c,
body[data-tone="ink"] .hpin__card,
body[data-tone="ink"] .partners__grid .p,
body[data-tone="ink"] .gal .it{background:var(--cream-2);color:var(--ink);border-color:var(--rule)}

body[data-tone="ink"] .partners__grid{border-color:var(--rule)}

body[data-tone="ink"] .gal .it--add{background:repeating-linear-gradient(135deg,var(--cream-2) 0 12px,var(--cream) 12px 24px);color:var(--muted)}

/* Nav scrolled state */
body[data-tone="ink"] .nav.scrolled{background:rgba(10,10,13,.85);color:var(--ink);border-bottom-color:var(--rule)}
body[data-tone="ink"] .nav.scrolled .nav__logo .lg-navy{opacity:0}
body[data-tone="ink"] .nav.scrolled .nav__logo .lg-cream{opacity:1}

/* Form inputs */
body[data-tone="ink"] input,
body[data-tone="ink"] select,
body[data-tone="ink"] textarea{background:var(--cream-2);color:var(--ink);border-color:var(--rule)}
body[data-tone="ink"] input:focus,
body[data-tone="ink"] select:focus,
body[data-tone="ink"] textarea:focus{border-color:var(--coral);outline:none}
body[data-tone="ink"] select option{background:#0a0a0d;color:#fff}

/* Footer */
body[data-tone="ink"] footer{background-color:var(--cream-2);color:var(--ink)}
body[data-tone="ink"] .foot a,
body[data-tone="ink"] .foot p{color:rgba(255,255,255,.78)}
body[data-tone="ink"] .foot h4{color:rgba(255,255,255,.55)}
body[data-tone="ink"] .foot__bot{color:rgba(255,255,255,.35)}

/* Departments — invert hover surfaces in dark */
body[data-tone="ink"] .deps > .dep:not(.dep--lg){background:var(--cream-2);color:var(--ink);border-color:var(--rule)}
body[data-tone="ink"] .deps > .dep:nth-child(odd):not(.dep--lg){background:#0c0c10}
body[data-tone="ink"] .deps > .dep--lg{background:#15151b;border-color:var(--rule)}
body[data-tone="ink"] .deps > .dep:hover .dep__inner{color:#0a0a0d}

/* Banner/cinematic veil — keep dark but soften */
body[data-tone="ink"] .cin__veil{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.8) 100%)}

/* Ticker */
body[data-tone="ink"] .dticker{background:var(--cream);color:var(--ink);border-color:var(--rule)}
body[data-tone="ink"] .dticker__t{color:rgba(255,255,255,.7)}

/* Story / phlong */
body[data-tone="ink"] .story__num{color:var(--ink)}
body[data-tone="ink"] .phlong__head h2{color:var(--ink)}
body[data-tone="ink"] .phlong__meta h4{color:var(--ink)}
body[data-tone="ink"] .phlong__meta .role,
body[data-tone="ink"] .phlong__head p{color:var(--ink-2)}

/* Crumbs / index labels on dept pages */
body[data-tone="ink"] .crumbs,
body[data-tone="ink"] .idx{color:rgba(255,255,255,.85)}

/* Quotes (testimonials) — keep them inverted-on-dark so they pop */
body[data-tone="ink"] .quote{background:var(--cream-2);color:var(--ink)}
body[data-tone="ink"] .quote__name{color:var(--ink)}
body[data-tone="ink"] .quote__role{color:var(--muted)}

/* Spec rows */
body[data-tone="ink"] .spec__row{background:var(--cream-2);color:var(--ink);border-color:var(--rule)}
body[data-tone="ink"] .spec__row:hover{background:#1f1f28;color:var(--ink)}

/* HPin gallery */
body[data-tone="ink"] .hpin{background:var(--cream)}
body[data-tone="ink"] .hpin__intro p,
body[data-tone="ink"] .story__copy p,
body[data-tone="ink"] .intro p{color:var(--ink-2)}

/* Service rails / panels on dept pages */
body[data-tone="ink"] .inv,
body[data-tone="ink"] .cfg,
body[data-tone="ink"] .fit{background:var(--cream)}
body[data-tone="ink"] .inv__c,
body[data-tone="ink"] .cfg__breakdown,
body[data-tone="ink"] .cfg__m,
body[data-tone="ink"] .fit__c{background:var(--cream-2);color:var(--ink);border-color:var(--rule)}

/* ================================================================
   GLOBAL POLISH — applies in all modes
   ================================================================ */

/* Sharper buttons + cards */
.pill{transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease}
.pill:hover{transform:translateY(-1px)}

/* Cleaner section transitions */
section{position:relative}

/* Better focus rings */
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.cap__row:focus-visible,.dep:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ---------- NAVY BAND — per-section navy treatment ---------- */
.navy-band{background:var(--ink) !important;color:var(--cream) !important;position:relative}
.navy-band *:not(svg):not(path):not(circle):not(rect):not(line):not(.italic):not(i):not([style*="color:var(--coral)"]):not([style*="coral"]):not([class*="coral"]):not(.pill):not(button.cta__btn):not(.spec__row:hover *):not(.next__c:hover *){color:var(--cream)}
.navy-band p{color:rgba(255,255,255,.78) !important}
.navy-band .eyebrow,.navy-band .mono,.navy-band [class*="mono"]{color:rgba(255,255,255,.7) !important}
.navy-band .eyebrow .dash{background:rgba(255,255,255,.6) !important}
.navy-band .italic,.navy-band i,.navy-band .ital{color:var(--coral) !important}

/* spec rows on navy: glass surface with white border */
.navy-band .spec__list{border-color:rgba(255,255,255,.18) !important}
.navy-band .spec__row{background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.12) !important;color:var(--cream) !important}
.navy-band .spec__row:hover{background:var(--cream) !important;color:var(--ink) !important}
.navy-band .spec__row:hover *{color:var(--ink) !important}
.navy-band .spec__row:hover .spec__t,.navy-band .spec__row:hover .spec__t .ital{color:var(--coral) !important}
.navy-band .spec__no{color:rgba(255,255,255,.55) !important}
.navy-band .spec__row:hover .spec__no{color:var(--coral) !important}

/* next (other departments) tiles on navy */
.navy-band .next h4{color:rgba(255,255,255,.55) !important}
.navy-band .next__c{background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.12) !important;color:var(--cream) !important}
.navy-band .next__c:hover{background:var(--cream) !important;color:var(--ink) !important}
.navy-band .next__c:hover h5{color:var(--ink) !important}
.navy-band .next__c:hover h5 .italic,.navy-band .next__c:hover h5 i{color:var(--coral) !important}
.navy-band .next__c .no{color:rgba(255,255,255,.5) !important}
.navy-band .next__c:hover .no{color:var(--coral) !important}

/* CTA section navy */
.navy-band.cta h2,.navy-band .cta__sub{color:var(--cream) !important}
.navy-band .cta__sub{color:rgba(255,255,255,.7) !important}
.navy-band .cta__btn{background:var(--coral) !important;color:var(--ink) !important}
.navy-band .cta__btn::before{background:var(--cream) !important}
.navy-band .cta__btn:hover{color:var(--ink) !important}
.navy-band .cta__btn .arr{background:var(--ink) !important;color:var(--coral) !important}
.navy-band .cta__btn:hover .arr{background:var(--coral) !important;color:var(--ink) !important}

/* Gallery section navy — image tiles get coral overlay */
.navy-band .gal .it{background:rgba(255,255,255,.04)}
.navy-band .gal .it--add{background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px) !important;color:rgba(255,255,255,.55) !important}
.navy-band .intro__l .num{color:var(--cream) !important}
.navy-band .intro__l .num sup,.navy-band .intro__l .lbl{color:rgba(255,255,255,.55) !important}
.navy-band .intro__meta{border-color:rgba(255,255,255,.18) !important}
.navy-band .intro__meta .m .v{color:var(--cream) !important}
.navy-band .intro__meta .m .v .italic,.navy-band .intro__meta .m .v i{color:var(--coral) !important}

/* Phlong (partners) on navy — the HEAD sits on the navy band so it stays
   light, but each partner CARD is a white polaroid frame, so its name/mono
   must stay dark (otherwise the names vanish on the white card). */
.navy-band.phlong .phlong__head h2{color:var(--cream) !important}
.navy-band.phlong .phlong__head h2 .italic,.navy-band.phlong .phlong__head h2 i{color:var(--coral) !important}
.navy-band.phlong .phlong__head p{color:rgba(255,255,255,.7) !important}
.navy-band.phlong .phlong__c{color:var(--ink)}
.navy-band.phlong .phlong__meta h4{color:var(--ink) !important}
.navy-band.phlong .phlong__meta h4 .italic,.navy-band.phlong .phlong__meta h4 i{color:var(--coral) !important}
.navy-band.phlong .phlong__meta .mono{color:var(--muted) !important}
.navy-band.phlong .phlong__meta .role{color:var(--ink-2) !important}

/* ---------- SECTION RHYTHM (subtle alternation) ---------- */
body[data-rhythm="on"] > section:nth-of-type(even),
body[data-rhythm="on"] main > section:nth-of-type(even){position:relative}
body[data-rhythm="on"] > section:nth-of-type(even)::before,
body[data-rhythm="on"] main > section:nth-of-type(even)::before{
  content:'';position:absolute;inset:0;background:var(--cream-2);
  pointer-events:none;z-index:0;opacity:.5;
}
body[data-rhythm="on"] > section:nth-of-type(even) > *,
body[data-rhythm="on"] main > section:nth-of-type(even) > *{position:relative;z-index:1}

body[data-rhythm="bold"] > section:nth-of-type(even)::before,
body[data-rhythm="bold"] main > section:nth-of-type(even)::before{
  content:'';position:absolute;inset:0;background:var(--cream-2);
  pointer-events:none;z-index:0;
}
body[data-rhythm="bold"] > section:nth-of-type(even) > *,
body[data-rhythm="bold"] main > section:nth-of-type(even) > *{position:relative;z-index:1}

/* === NAVY RHYTHM — true navy/white alternation between top-level sections === */
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even),
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even){background:var(--ink);color:var(--cream)}
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) *:not(svg):not(path):not(circle):not(rect):not(line):not([class*="coral"]):not(.pill):not(button):not(.dep__new),
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) *:not(svg):not(path):not(circle):not(rect):not(line):not([class*="coral"]):not(.pill):not(button):not(.dep__new){color:var(--cream)}
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) .ital,
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) i,
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) .italic,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) .ital,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) i,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) .italic{color:var(--coral)}
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) p,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) p{color:rgba(255,255,255,.78) !important}
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) .eyebrow,
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) .mono,
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) [class*="mono"],
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) .eyebrow,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) .mono,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) [class*="mono"]{color:rgba(255,255,255,.7) !important}
/* Cards inside navy bands need to keep their own white/cream surface */
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) .dep,
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) .next__c,
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) .quote,
body[data-rhythm="navy"][data-tone="cream"] > section:nth-of-type(even) .story__stat,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) .dep,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) .next__c,
body[data-rhythm="navy"][data-tone="cream"] main > section:nth-of-type(even) .quote{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}

/* Don't overlay on dark/image sections */
body[data-rhythm] > section.hero::before,
body[data-rhythm] > section.banner::before,
body[data-rhythm] > section.cin::before,
body[data-rhythm] > section.testi::before,
body[data-rhythm] > section.diag::before,
body[data-rhythm] > section.coat::before,
body[data-rhythm] > section.emi::before,
body[data-rhythm] > section.prem::before,
body[data-rhythm] > section.locator::before,
body[data-rhythm] main > section.hero::before,
body[data-rhythm] main > section.cin::before,
body[data-rhythm] main > section.testi::before{display:none !important}
/* For navy rhythm, also skip sections that are already navy */
body[data-rhythm="navy"][data-tone="cream"] > section.hero,
body[data-rhythm="navy"][data-tone="cream"] > section.banner,
body[data-rhythm="navy"][data-tone="cream"] > section.cin,
body[data-rhythm="navy"][data-tone="cream"] > section.testi,
body[data-rhythm="navy"][data-tone="cream"] main > section.hero,
body[data-rhythm="navy"][data-tone="cream"] main > section.cin,
body[data-rhythm="navy"][data-tone="cream"] main > section.testi{background:initial;color:initial}

/* ================================================================
   FONT PAIRINGS
   ================================================================ */
body[data-font="editorial"],body[data-font="editorial"] p,body[data-font="editorial"] span,body[data-font="editorial"] a,body[data-font="editorial"] button,body[data-font="editorial"] input,body[data-font="editorial"] select,body[data-font="editorial"] textarea,body[data-font="editorial"] li{font-family:'Work Sans',sans-serif !important}
body[data-font="editorial"] h1,body[data-font="editorial"] h2,body[data-font="editorial"] h3,body[data-font="editorial"] h4,body[data-font="editorial"] h5,body[data-font="editorial"] h6,body[data-font="editorial"] .italic,body[data-font="editorial"] i,body[data-font="editorial"] [style*="Instrument Serif"]{font-family:'Playfair Display',serif !important}
body[data-font="editorial"] .mono,body[data-font="editorial"] [class*="mono"],body[data-font="editorial"] code,body[data-font="editorial"] [style*="JetBrains Mono"]{font-family:'IBM Plex Mono',monospace !important}

body[data-font="modern"],body[data-font="modern"] p,body[data-font="modern"] span,body[data-font="modern"] a,body[data-font="modern"] button,body[data-font="modern"] input,body[data-font="modern"] select,body[data-font="modern"] textarea,body[data-font="modern"] li{font-family:'DM Sans',sans-serif !important}
body[data-font="modern"] h1,body[data-font="modern"] h2,body[data-font="modern"] h3,body[data-font="modern"] h4,body[data-font="modern"] h5,body[data-font="modern"] h6,body[data-font="modern"] .italic,body[data-font="modern"] i,body[data-font="modern"] [style*="Instrument Serif"]{font-family:'Bricolage Grotesque',sans-serif !important;font-style:normal}
body[data-font="modern"] .mono,body[data-font="modern"] [class*="mono"],body[data-font="modern"] code,body[data-font="modern"] [style*="JetBrains Mono"]{font-family:'Space Mono',monospace !important}

body[data-font="classic"],body[data-font="classic"] p,body[data-font="classic"] span,body[data-font="classic"] a,body[data-font="classic"] button,body[data-font="classic"] input,body[data-font="classic"] select,body[data-font="classic"] textarea,body[data-font="classic"] li{font-family:'IBM Plex Sans',sans-serif !important}
body[data-font="classic"] h1,body[data-font="classic"] h2,body[data-font="classic"] h3,body[data-font="classic"] h4,body[data-font="classic"] h5,body[data-font="classic"] h6,body[data-font="classic"] .italic,body[data-font="classic"] i,body[data-font="classic"] [style*="Instrument Serif"]{font-family:'EB Garamond',serif !important}

body[data-font="newsprint"],body[data-font="newsprint"] p,body[data-font="newsprint"] span,body[data-font="newsprint"] a,body[data-font="newsprint"] button,body[data-font="newsprint"] input,body[data-font="newsprint"] select,body[data-font="newsprint"] textarea,body[data-font="newsprint"] li{font-family:'Manrope',sans-serif !important}
body[data-font="newsprint"] h1,body[data-font="newsprint"] h2,body[data-font="newsprint"] h3,body[data-font="newsprint"] h4,body[data-font="newsprint"] h5,body[data-font="newsprint"] h6,body[data-font="newsprint"] .italic,body[data-font="newsprint"] i,body[data-font="newsprint"] [style*="Instrument Serif"]{font-family:'Newsreader',serif !important;font-optical-sizing:auto}
body[data-font="newsprint"] .mono,body[data-font="newsprint"] [class*="mono"],body[data-font="newsprint"] code,body[data-font="newsprint"] [style*="JetBrains Mono"]{font-family:'Courier Prime',monospace !important}

/* ================================================================
   HEADER CONTROLS — Light/Dark toggle + Font swatch
   ================================================================ */
.cc-mode{
  display:inline-flex;align-items:center;margin:0 12px;
  border:1px solid currentColor;border-radius:999px;overflow:hidden;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  cursor:none;
}
.cc-mode button{
  background:transparent;border:none;padding:7px 14px;color:inherit;cursor:none;
  font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .25s ease,color .25s ease;
}
.cc-mode button svg{width:11px;height:11px;flex:0 0 auto}
.cc-mode button.on{background:var(--coral);color:#0f0f14}
.cc-mode button:not(.on):hover{background:rgba(255,255,255,.1)}
.nav:not(.on-dark) .cc-mode button:not(.on):hover{background:rgba(15,26,61,.08)}
@media (max-width:1180px){.cc-mode{display:none}}

.cc-tweaks-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin:0 8px;
  background:transparent;border:1px solid currentColor;color:inherit;
  border-radius:50%;cursor:none;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .35s var(--ease);
}
.cc-tweaks-btn svg{width:14px;height:14px}
.cc-tweaks-btn:hover{background:var(--coral);border-color:var(--coral);color:#0f0f14;transform:rotate(45deg)}
@media (max-width:1180px){.cc-tweaks-btn{display:none}}

/* Admin-only design tools must never appear on the public site. tweaks.js
   injects .cc-fontpop / .cc-mode / .cc-tweaks-btn into nav.nav on first
   paint; TweaksBoot then parks them in a hidden holder and AdminBar
   teleports them into the admin "Typography" menu. That parking is async
   (setTimeout-based) and can be slow or fail on some devices, leaking the
   "Aa Font" pill under the header. Hard-hide them while they live in the nav
   so there is never a public flash; they re-appear only once moved into the
   admin menu, which is not inside nav.nav. */
nav.nav .cc-fontpop,
nav.nav .cc-mode,
nav.nav .cc-tweaks-btn{display:none !important}

.cc-fontpop{position:relative;display:inline-flex;align-items:center;margin:0 10px 0 0}
.cc-fontpop__btn{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;
  background:transparent;border:1px solid currentColor;color:inherit;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  cursor:none;transition:background .25s ease,color .25s ease,border-color .25s ease;border-radius:999px;
}
.cc-fontpop__btn:hover,.cc-fontpop:hover .cc-fontpop__btn{background:var(--coral);border-color:var(--coral);color:#0f0f14}
.cc-fontpop__btn .aa{font-family:'Instrument Serif',serif;font-style:italic;font-size:13px;line-height:1}
.cc-fontpop__menu{
  position:absolute;top:calc(100% + 10px);right:0;
  background:#0f0f14;color:#fff;
  border:1px solid rgba(255,255,255,.12);
  padding:6px;min-width:280px;border-radius:6px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .25s,transform .3s cubic-bezier(.16,1,.3,1);
  z-index:100;max-height:60vh;overflow-y:auto;
}
.cc-fontpop:hover .cc-fontpop__menu,.cc-fontpop__menu.on{opacity:1;pointer-events:auto;transform:none}
.cc-fontpop__menu button{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:11px 14px;background:transparent;border:none;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  cursor:none;text-align:left;transition:background .2s ease,color .2s ease;border-radius:3px;
}
.cc-fontpop__menu button:hover{background:rgba(255,255,255,.06)}
.cc-fontpop__menu button.on{background:var(--coral);color:#0f0f14}
.cc-fontpop__menu button .preview{font-size:22px;letter-spacing:-.01em;text-transform:none;font-style:italic;line-height:1}
.cc-fontpop__menu button[data-v="house"] .preview{font-family:'Instrument Serif',serif}
.cc-fontpop__menu button[data-v="editorial"] .preview{font-family:'Playfair Display',serif}
.cc-fontpop__menu button[data-v="modern"] .preview{font-family:'Bricolage Grotesque',sans-serif;font-style:normal;font-weight:700}
.cc-fontpop__menu button[data-v="classic"] .preview{font-family:'EB Garamond',serif}
.cc-fontpop__menu button[data-v="newsprint"] .preview{font-family:'Newsreader',serif}
.cc-fontpop__menu button[data-v="fraunces"] .preview{font-family:'Fraunces',serif}
.cc-fontpop__menu button[data-v="cormorant"] .preview{font-family:'Cormorant Garamond',serif}
.cc-fontpop__menu button[data-v="lora"] .preview{font-family:'Lora',serif}
.cc-fontpop__menu button[data-v="bigshoulders"] .preview{font-family:'Big Shoulders Display',sans-serif;font-style:normal;font-weight:700}
.cc-fontpop__menu button[data-v="spectral"] .preview{font-family:'Spectral',serif}
.cc-fontpop__menu button[data-v="italiana"] .preview{font-family:'Italiana',serif}
.cc-fontpop__menu button[data-v="tinos"] .preview{font-family:'Tinos',serif}
.cc-fontpop__menu button[data-v="syne"] .preview{font-family:'Syne',sans-serif;font-style:normal;font-weight:700}
.cc-fontpop__menu button[data-v="monodisplay"] .preview{font-family:'JetBrains Mono',monospace;font-style:normal}
.cc-fontpop__menu button[data-v="playfaireditorial"] .preview{font-family:'Playfair Display',serif;font-weight:700}

/* === Extra font pairings (10 more — fraunces/cormorant/lora/bigshoulders/spectral/italiana/tinos/syne/monodisplay/playfaireditorial) === */
body[data-font="fraunces"] p,body[data-font="fraunces"] span,body[data-font="fraunces"] a,body[data-font="fraunces"] button,body[data-font="fraunces"] input,body[data-font="fraunces"] select,body[data-font="fraunces"] textarea,body[data-font="fraunces"] li{font-family:'Inter',sans-serif !important}
body[data-font="fraunces"] h1,body[data-font="fraunces"] h2,body[data-font="fraunces"] h3,body[data-font="fraunces"] h4,body[data-font="fraunces"] h5,body[data-font="fraunces"] h6,body[data-font="fraunces"] .italic,body[data-font="fraunces"] i,body[data-font="fraunces"] [style*="Instrument Serif"]{font-family:'Fraunces',serif !important}
body[data-font="fraunces"] .mono,body[data-font="fraunces"] [class*="mono"],body[data-font="fraunces"] code,body[data-font="fraunces"] [style*="JetBrains Mono"]{font-family:'Space Mono',monospace !important}

body[data-font="cormorant"] p,body[data-font="cormorant"] span,body[data-font="cormorant"] a,body[data-font="cormorant"] button,body[data-font="cormorant"] input,body[data-font="cormorant"] select,body[data-font="cormorant"] textarea,body[data-font="cormorant"] li{font-family:'Karla',sans-serif !important}
body[data-font="cormorant"] h1,body[data-font="cormorant"] h2,body[data-font="cormorant"] h3,body[data-font="cormorant"] h4,body[data-font="cormorant"] h5,body[data-font="cormorant"] h6,body[data-font="cormorant"] .italic,body[data-font="cormorant"] i,body[data-font="cormorant"] [style*="Instrument Serif"]{font-family:'Cormorant Garamond',serif !important}

body[data-font="lora"] p,body[data-font="lora"] span,body[data-font="lora"] a,body[data-font="lora"] button,body[data-font="lora"] input,body[data-font="lora"] select,body[data-font="lora"] textarea,body[data-font="lora"] li{font-family:'Inter Tight',sans-serif !important}
body[data-font="lora"] h1,body[data-font="lora"] h2,body[data-font="lora"] h3,body[data-font="lora"] h4,body[data-font="lora"] h5,body[data-font="lora"] h6,body[data-font="lora"] .italic,body[data-font="lora"] i,body[data-font="lora"] [style*="Instrument Serif"]{font-family:'Lora',serif !important}

body[data-font="bigshoulders"] p,body[data-font="bigshoulders"] span,body[data-font="bigshoulders"] a,body[data-font="bigshoulders"] button,body[data-font="bigshoulders"] input,body[data-font="bigshoulders"] select,body[data-font="bigshoulders"] textarea,body[data-font="bigshoulders"] li{font-family:'Roboto',sans-serif !important}
body[data-font="bigshoulders"] h1,body[data-font="bigshoulders"] h2,body[data-font="bigshoulders"] h3,body[data-font="bigshoulders"] h4,body[data-font="bigshoulders"] h5,body[data-font="bigshoulders"] h6,body[data-font="bigshoulders"] .italic,body[data-font="bigshoulders"] i,body[data-font="bigshoulders"] [style*="Instrument Serif"]{font-family:'Big Shoulders Display',sans-serif !important;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:-.005em}

body[data-font="spectral"] p,body[data-font="spectral"] span,body[data-font="spectral"] a,body[data-font="spectral"] button,body[data-font="spectral"] input,body[data-font="spectral"] select,body[data-font="spectral"] textarea,body[data-font="spectral"] li{font-family:'DM Sans',sans-serif !important}
body[data-font="spectral"] h1,body[data-font="spectral"] h2,body[data-font="spectral"] h3,body[data-font="spectral"] h4,body[data-font="spectral"] h5,body[data-font="spectral"] h6,body[data-font="spectral"] .italic,body[data-font="spectral"] i,body[data-font="spectral"] [style*="Instrument Serif"]{font-family:'Spectral',serif !important}

body[data-font="italiana"] p,body[data-font="italiana"] span,body[data-font="italiana"] a,body[data-font="italiana"] button,body[data-font="italiana"] input,body[data-font="italiana"] select,body[data-font="italiana"] textarea,body[data-font="italiana"] li{font-family:'Montserrat',sans-serif !important}
body[data-font="italiana"] h1,body[data-font="italiana"] h2,body[data-font="italiana"] h3,body[data-font="italiana"] h4,body[data-font="italiana"] h5,body[data-font="italiana"] h6,body[data-font="italiana"] .italic,body[data-font="italiana"] i,body[data-font="italiana"] [style*="Instrument Serif"]{font-family:'Italiana',serif !important;font-style:normal;letter-spacing:.01em}

body[data-font="tinos"] p,body[data-font="tinos"] span,body[data-font="tinos"] a,body[data-font="tinos"] button,body[data-font="tinos"] input,body[data-font="tinos"] select,body[data-font="tinos"] textarea,body[data-font="tinos"] li{font-family:'Lato',sans-serif !important}
body[data-font="tinos"] h1,body[data-font="tinos"] h2,body[data-font="tinos"] h3,body[data-font="tinos"] h4,body[data-font="tinos"] h5,body[data-font="tinos"] h6,body[data-font="tinos"] .italic,body[data-font="tinos"] i,body[data-font="tinos"] [style*="Instrument Serif"]{font-family:'Tinos',serif !important}

body[data-font="syne"] p,body[data-font="syne"] span,body[data-font="syne"] a,body[data-font="syne"] button,body[data-font="syne"] input,body[data-font="syne"] select,body[data-font="syne"] textarea,body[data-font="syne"] li{font-family:'Inter',sans-serif !important}
body[data-font="syne"] h1,body[data-font="syne"] h2,body[data-font="syne"] h3,body[data-font="syne"] h4,body[data-font="syne"] h5,body[data-font="syne"] h6,body[data-font="syne"] .italic,body[data-font="syne"] i,body[data-font="syne"] [style*="Instrument Serif"]{font-family:'Syne',sans-serif !important;font-style:normal;font-weight:700;letter-spacing:-.02em}

body[data-font="monodisplay"] p,body[data-font="monodisplay"] span,body[data-font="monodisplay"] a,body[data-font="monodisplay"] button,body[data-font="monodisplay"] input,body[data-font="monodisplay"] select,body[data-font="monodisplay"] textarea,body[data-font="monodisplay"] li{font-family:'Manrope',sans-serif !important}
body[data-font="monodisplay"] h1,body[data-font="monodisplay"] h2,body[data-font="monodisplay"] h3,body[data-font="monodisplay"] h4,body[data-font="monodisplay"] h5,body[data-font="monodisplay"] h6,body[data-font="monodisplay"] .italic,body[data-font="monodisplay"] i,body[data-font="monodisplay"] [style*="Instrument Serif"]{font-family:'JetBrains Mono',monospace !important;font-style:normal;letter-spacing:-.04em}

body[data-font="playfaireditorial"] p,body[data-font="playfaireditorial"] span,body[data-font="playfaireditorial"] a,body[data-font="playfaireditorial"] button,body[data-font="playfaireditorial"] input,body[data-font="playfaireditorial"] select,body[data-font="playfaireditorial"] textarea,body[data-font="playfaireditorial"] li{font-family:'Inter Tight',sans-serif !important}
body[data-font="playfaireditorial"] h1,body[data-font="playfaireditorial"] h2,body[data-font="playfaireditorial"] h3,body[data-font="playfaireditorial"] h4,body[data-font="playfaireditorial"] h5,body[data-font="playfaireditorial"] h6,body[data-font="playfaireditorial"] .italic,body[data-font="playfaireditorial"] i,body[data-font="playfaireditorial"] [style*="Instrument Serif"]{font-family:'Playfair Display',serif !important;font-weight:700}

body[data-font="prata"] p,body[data-font="prata"] span,body[data-font="prata"] a,body[data-font="prata"] button,body[data-font="prata"] input,body[data-font="prata"] select,body[data-font="prata"] textarea,body[data-font="prata"] li{font-family:'Inter',sans-serif !important}
body[data-font="prata"] h1,body[data-font="prata"] h2,body[data-font="prata"] h3,body[data-font="prata"] h4,body[data-font="prata"] h5,body[data-font="prata"] h6,body[data-font="prata"] .italic,body[data-font="prata"] i,body[data-font="prata"] [style*="Instrument Serif"]{font-family:'Prata',serif !important;font-style:normal;letter-spacing:.005em}

body[data-font="dmserif"] p,body[data-font="dmserif"] span,body[data-font="dmserif"] a,body[data-font="dmserif"] button,body[data-font="dmserif"] input,body[data-font="dmserif"] select,body[data-font="dmserif"] textarea,body[data-font="dmserif"] li{font-family:'DM Sans',sans-serif !important}
body[data-font="dmserif"] h1,body[data-font="dmserif"] h2,body[data-font="dmserif"] h3,body[data-font="dmserif"] h4,body[data-font="dmserif"] h5,body[data-font="dmserif"] h6,body[data-font="dmserif"] .italic,body[data-font="dmserif"] i,body[data-font="dmserif"] [style*="Instrument Serif"]{font-family:'DM Serif Display',serif !important}
body[data-font="dmserif"] .mono,body[data-font="dmserif"] [class*="mono"],body[data-font="dmserif"] code,body[data-font="dmserif"] [style*="JetBrains Mono"]{font-family:'Space Mono',monospace !important}

body[data-font="abril"] p,body[data-font="abril"] span,body[data-font="abril"] a,body[data-font="abril"] button,body[data-font="abril"] input,body[data-font="abril"] select,body[data-font="abril"] textarea,body[data-font="abril"] li{font-family:'Source Sans 3',sans-serif !important}
body[data-font="abril"] h1,body[data-font="abril"] h2,body[data-font="abril"] h3,body[data-font="abril"] h4,body[data-font="abril"] h5,body[data-font="abril"] h6,body[data-font="abril"] .italic,body[data-font="abril"] i,body[data-font="abril"] [style*="Instrument Serif"]{font-family:'Abril Fatface',serif !important;font-style:normal;letter-spacing:-.005em}

body[data-font="josefin"] p,body[data-font="josefin"] span,body[data-font="josefin"] a,body[data-font="josefin"] button,body[data-font="josefin"] input,body[data-font="josefin"] select,body[data-font="josefin"] textarea,body[data-font="josefin"] li{font-family:'Josefin Sans',sans-serif !important}
body[data-font="josefin"] h1,body[data-font="josefin"] h2,body[data-font="josefin"] h3,body[data-font="josefin"] h4,body[data-font="josefin"] h5,body[data-font="josefin"] h6,body[data-font="josefin"] .italic,body[data-font="josefin"] i,body[data-font="josefin"] [style*="Instrument Serif"]{font-family:'Josefin Slab',serif !important}

body[data-font="crimson"] p,body[data-font="crimson"] span,body[data-font="crimson"] a,body[data-font="crimson"] button,body[data-font="crimson"] input,body[data-font="crimson"] select,body[data-font="crimson"] textarea,body[data-font="crimson"] li{font-family:'Inter',sans-serif !important}
body[data-font="crimson"] h1,body[data-font="crimson"] h2,body[data-font="crimson"] h3,body[data-font="crimson"] h4,body[data-font="crimson"] h5,body[data-font="crimson"] h6,body[data-font="crimson"] .italic,body[data-font="crimson"] i,body[data-font="crimson"] [style*="Instrument Serif"]{font-family:'Crimson Pro',serif !important}

body[data-font="rozha"] p,body[data-font="rozha"] span,body[data-font="rozha"] a,body[data-font="rozha"] button,body[data-font="rozha"] input,body[data-font="rozha"] select,body[data-font="rozha"] textarea,body[data-font="rozha"] li{font-family:'Inter',sans-serif !important}
body[data-font="rozha"] h1,body[data-font="rozha"] h2,body[data-font="rozha"] h3,body[data-font="rozha"] h4,body[data-font="rozha"] h5,body[data-font="rozha"] h6,body[data-font="rozha"] .italic,body[data-font="rozha"] i,body[data-font="rozha"] [style*="Instrument Serif"]{font-family:'Rozha One',serif !important;font-style:normal}

body[data-font="bodoni"] p,body[data-font="bodoni"] span,body[data-font="bodoni"] a,body[data-font="bodoni"] button,body[data-font="bodoni"] input,body[data-font="bodoni"] select,body[data-font="bodoni"] textarea,body[data-font="bodoni"] li{font-family:'Inter Tight',sans-serif !important}
body[data-font="bodoni"] h1,body[data-font="bodoni"] h2,body[data-font="bodoni"] h3,body[data-font="bodoni"] h4,body[data-font="bodoni"] h5,body[data-font="bodoni"] h6,body[data-font="bodoni"] .italic,body[data-font="bodoni"] i,body[data-font="bodoni"] [style*="Instrument Serif"]{font-family:'Bodoni Moda',serif !important}

body[data-font="unbounded"] p,body[data-font="unbounded"] span,body[data-font="unbounded"] a,body[data-font="unbounded"] button,body[data-font="unbounded"] input,body[data-font="unbounded"] select,body[data-font="unbounded"] textarea,body[data-font="unbounded"] li{font-family:'Inter',sans-serif !important}
body[data-font="unbounded"] h1,body[data-font="unbounded"] h2,body[data-font="unbounded"] h3,body[data-font="unbounded"] h4,body[data-font="unbounded"] h5,body[data-font="unbounded"] h6,body[data-font="unbounded"] .italic,body[data-font="unbounded"] i,body[data-font="unbounded"] [style*="Instrument Serif"]{font-family:'Unbounded',sans-serif !important;font-style:normal;letter-spacing:-.015em}
body[data-font="unbounded"] .mono,body[data-font="unbounded"] [class*="mono"],body[data-font="unbounded"] code,body[data-font="unbounded"] [style*="JetBrains Mono"]{font-family:'Space Mono',monospace !important}

body[data-font="plexserif"] p,body[data-font="plexserif"] span,body[data-font="plexserif"] a,body[data-font="plexserif"] button,body[data-font="plexserif"] input,body[data-font="plexserif"] select,body[data-font="plexserif"] textarea,body[data-font="plexserif"] li{font-family:'IBM Plex Sans',sans-serif !important}
body[data-font="plexserif"] h1,body[data-font="plexserif"] h2,body[data-font="plexserif"] h3,body[data-font="plexserif"] h4,body[data-font="plexserif"] h5,body[data-font="plexserif"] h6,body[data-font="plexserif"] .italic,body[data-font="plexserif"] i,body[data-font="plexserif"] [style*="Instrument Serif"]{font-family:'IBM Plex Serif',serif !important}
body[data-font="plexserif"] .mono,body[data-font="plexserif"] [class*="mono"],body[data-font="plexserif"] code,body[data-font="plexserif"] [style*="JetBrains Mono"]{font-family:'IBM Plex Mono',monospace !important}

body[data-font="anton"] p,body[data-font="anton"] span,body[data-font="anton"] a,body[data-font="anton"] button,body[data-font="anton"] input,body[data-font="anton"] select,body[data-font="anton"] textarea,body[data-font="anton"] li{font-family:'Inter',sans-serif !important}
body[data-font="anton"] h1,body[data-font="anton"] h2,body[data-font="anton"] h3,body[data-font="anton"] h4,body[data-font="anton"] h5,body[data-font="anton"] h6,body[data-font="anton"] .italic,body[data-font="anton"] i,body[data-font="anton"] [style*="Instrument Serif"]{font-family:'Anton',sans-serif !important;font-style:normal;text-transform:uppercase;letter-spacing:.005em}

body[data-font="literata"] p,body[data-font="literata"] span,body[data-font="literata"] a,body[data-font="literata"] button,body[data-font="literata"] input,body[data-font="literata"] select,body[data-font="literata"] textarea,body[data-font="literata"] li{font-family:'Inter',sans-serif !important}
body[data-font="literata"] h1,body[data-font="literata"] h2,body[data-font="literata"] h3,body[data-font="literata"] h4,body[data-font="literata"] h5,body[data-font="literata"] h6,body[data-font="literata"] .italic,body[data-font="literata"] i,body[data-font="literata"] [style*="Instrument Serif"]{font-family:'Literata',serif !important;font-optical-sizing:auto}

body[data-font="majormono"] p,body[data-font="majormono"] span,body[data-font="majormono"] a,body[data-font="majormono"] button,body[data-font="majormono"] input,body[data-font="majormono"] select,body[data-font="majormono"] textarea,body[data-font="majormono"] li{font-family:'Inter',sans-serif !important}
body[data-font="majormono"] h1,body[data-font="majormono"] h2,body[data-font="majormono"] h3,body[data-font="majormono"] h4,body[data-font="majormono"] h5,body[data-font="majormono"] h6,body[data-font="majormono"] .italic,body[data-font="majormono"] i,body[data-font="majormono"] [style*="Instrument Serif"]{font-family:'Major Mono Display',monospace !important;font-style:normal;letter-spacing:-.04em;text-transform:lowercase}

/* ================================================================
   TWEAKS PANEL (full picker via toolbar)
   ================================================================ */
.cc-tweaks{
  position:fixed;right:24px;bottom:24px;z-index:200;
  width:340px;max-width:calc(100vw - 48px);
  background:#fff;color:#0f1a3d;
  border:1px solid rgba(15,26,61,.18);border-radius:8px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45);
  font-family:'Manrope',sans-serif !important;
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s;
  max-height:calc(100vh - 48px);overflow-y:auto;
}
.cc-tweaks.on{transform:none;opacity:1;pointer-events:auto}
.cc-tweaks__bar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(15,26,61,.1);position:sticky;top:0;background:#fff;z-index:2;border-radius:8px 8px 0 0}
.cc-tweaks__bar .t{font-family:'JetBrains Mono',monospace !important;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.cc-tweaks__bar .t i{font-style:italic;color:#e87862}
.cc-tweaks__x{width:28px;height:28px;border:1px solid rgba(15,26,61,.2);background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:18px;line-height:0;color:#0f1a3d;transition:background .2s,color .2s}
.cc-tweaks__x:hover{background:#0f1a3d;color:#fff;border-color:#0f1a3d}
.cc-tweaks__sec{padding:18px;border-bottom:1px solid rgba(15,26,61,.06)}
.cc-tweaks__sec:last-of-type{border-bottom:none}
.cc-tweaks__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-family:'JetBrains Mono',monospace !important;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(15,26,61,.55)}
.cc-tweaks__h .v{color:#e87862;letter-spacing:.04em;text-transform:none;font-size:11px;font-style:italic;font-family:'Instrument Serif',serif !important}
.cc-tweaks__row{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.cc-tweaks__btn{padding:11px 6px;background:transparent;border:1px solid rgba(15,26,61,.16);font-family:'JetBrains Mono',monospace !important;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:#0f1a3d;transition:all .25s;text-align:center;line-height:1.2;border-radius:3px}
.cc-tweaks__btn:hover{background:rgba(15,26,61,.06)}
.cc-tweaks__btn.on{background:#0f1a3d;color:#fff;border-color:#0f1a3d}
.cc-tweaks__sw{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:6px;background:transparent;border:none}
.cc-tweaks__sw .dot{width:34px;height:34px;border-radius:50%;border:2px solid transparent;transition:border-color .25s,transform .25s}
.cc-tweaks__sw:hover .dot{transform:scale(1.08)}
.cc-tweaks__sw.on .dot{border-color:#0f1a3d}
.cc-tweaks__sw .lbl{font-family:'JetBrains Mono',monospace !important;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,26,61,.6)}
.cc-tweaks__sw.on .lbl{color:#0f1a3d}
.cc-tweaks__reset{margin:8px 18px 18px;padding:11px;width:calc(100% - 36px);background:transparent;border:1px solid rgba(15,26,61,.2);font-family:'JetBrains Mono',monospace !important;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;color:#0f1a3d;transition:all .25s;border-radius:3px}
.cc-tweaks__reset:hover{background:#e87862;color:#0f1a3d;border-color:#e87862}
@media (max-width:600px){.cc-tweaks{right:12px;bottom:12px;left:12px;width:auto}.cc-fontpop{display:none}}
@media print{.cc-tweaks,.cc-fontpop,.cc-mode{display:none !important}}

/* ---------- DARK MODE — ensure ALL text reads white ---------- */
body[data-tone="ink"],
body[data-tone="ink"] *:not(svg):not(path):not(circle):not(rect):not(line):not(.cc-tweaks):not(.cc-tweaks *):not(.cc-fontpop__menu):not(.cc-fontpop__menu *):not([style*="background:var(--coral)"]):not([style*="color:var(--coral)"]){color:#ffffff}
body[data-tone="ink"] .muted,body[data-tone="ink"] .dep__desc,body[data-tone="ink"] .quote__role,body[data-tone="ink"] .foot a,body[data-tone="ink"] .foot p,body[data-tone="ink"] .hero__lede,body[data-tone="ink"] p,body[data-tone="ink"] .story__copy p,body[data-tone="ink"] .intro p,body[data-tone="ink"] .hpin__intro p{color:rgba(255,255,255,.78)}
body[data-tone="ink"] .eyebrow,body[data-tone="ink"] .mono,body[data-tone="ink"] [class*="mono"],body[data-tone="ink"] .foot h4,body[data-tone="ink"] .nav__links a{color:rgba(255,255,255,.7)}
body[data-tone="ink"] .nav.scrolled,body[data-tone="ink"] .nav.scrolled *:not(svg):not(path):not(.pill):not([class*="coral"]){color:#ffffff}
body[data-tone="ink"] .coral,body[data-tone="ink"] i,body[data-tone="ink"] .italic,body[data-tone="ink"] .dep__title .italic,body[data-tone="ink"] h2 .ital,body[data-tone="ink"] .ital{color:var(--coral)}
body[data-tone="ink"] .story__stat .n,body[data-tone="ink"] .story__num{color:#ffffff}
body[data-tone="ink"] .story__num sup{color:var(--coral)}
body[data-tone="ink"] .pill{color:#ffffff;border-color:rgba(255,255,255,.5)}
body[data-tone="ink"] .pill:hover{background:var(--coral);border-color:var(--coral);color:#0a0a0d}
body[data-tone="ink"] input::placeholder,body[data-tone="ink"] textarea::placeholder{color:rgba(255,255,255,.4)}

/* === DARK MODE — DEEP FIX for previously invisible content === */
/* Inline style overrides using var(--ink) hardcoded — force light */
body[data-tone="ink"] [style*="color:var(--ink)"]:not(.coral):not([class*="coral"]){color:#ffffff !important}
body[data-tone="ink"] [style*="color:#1a2143"]:not(.coral):not([class*="coral"]){color:#ffffff !important}
body[data-tone="ink"] [style*="color:#0f1a3d"]:not(.coral):not([class*="coral"]){color:#ffffff !important}
body[data-tone="ink"] [style*="color:var(--ink-2)"]{color:rgba(255,255,255,.78) !important}
body[data-tone="ink"] [style*="color:var(--muted)"]{color:rgba(255,255,255,.55) !important}

/* Headings, spans, breadcrumbs, idx labels, ALL hero text */
body[data-tone="ink"] .hero,body[data-tone="ink"] .hero *:not(svg):not(path):not(.italic):not(i):not(.ital):not([class*="coral"]){color:#ffffff !important}
body[data-tone="ink"] .crumbs,body[data-tone="ink"] .crumbs a,body[data-tone="ink"] .idx,body[data-tone="ink"] .hero__kicker,body[data-tone="ink"] .hero__crest{color:#ffffff !important}
body[data-tone="ink"] .crumbs a:hover,body[data-tone="ink"] .crumbs .sep{color:var(--coral) !important;opacity:.6}

/* Spec rows (the 3-up "How it actually works" cards) */
body[data-tone="ink"] .spec{background:var(--cream-2) !important;color:#ffffff}
body[data-tone="ink"] .spec__row{background:var(--cream-2);color:#ffffff;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .spec__row:hover{background:#1f1f28;color:#ffffff}
body[data-tone="ink"] .spec__row .spec__t,body[data-tone="ink"] .spec__row p{color:#ffffff !important}
body[data-tone="ink"] .spec__row p{opacity:.78}
body[data-tone="ink"] .spec__row .spec__no{color:rgba(255,255,255,.55) !important}
body[data-tone="ink"] .spec__row:hover .spec__no{color:var(--coral) !important}

/* Coating tiers (detailing) */
body[data-tone="ink"] .coat__col{background:rgba(255,255,255,.04);color:#ffffff;border-color:rgba(255,255,255,.15)}
body[data-tone="ink"] .coat__col h3,body[data-tone="ink"] .coat__name,body[data-tone="ink"] .coat__feat li,body[data-tone="ink"] .coat__px .v{color:#ffffff !important}
body[data-tone="ink"] .coat__col--dark{background:#15151b;color:#ffffff;border-color:rgba(255,255,255,.18)}
body[data-tone="ink"] .coat__col--dark *{color:#ffffff !important}

/* Premium insurer panel */
body[data-tone="ink"] .prem__panel,body[data-tone="ink"] .prem__form{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
body[data-tone="ink"] .prem__panel .insurer,body[data-tone="ink"] .prem__panel .insurer .name,body[data-tone="ink"] .prem__panel .insurer .idv{color:#ffffff}
body[data-tone="ink"] .prem__panel .insurer{border-bottom-color:rgba(255,255,255,.08)}
body[data-tone="ink"] .prem__panel .insurer .name span{color:rgba(255,255,255,.45)}

/* Inventory cards (used car) */
body[data-tone="ink"] .inv{background:var(--cream-2)}
body[data-tone="ink"] .inv__c{background:#15151b;color:#ffffff;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .inv__c h4,body[data-tone="ink"] .inv__c h4 .v,body[data-tone="ink"] .inv__c .y,body[data-tone="ink"] .inv__c .meta,body[data-tone="ink"] .inv__c .price .e span{color:#ffffff !important}
body[data-tone="ink"] .inv__c .y span,body[data-tone="ink"] .inv__c .price .p{color:var(--coral) !important}
body[data-tone="ink"] .inv__c .band .scale{background:rgba(255,255,255,.08)}
body[data-tone="ink"] .inv__c .band .scale .fill{background:rgba(255,255,255,.18)}
body[data-tone="ink"] .inv__c .band .lbl{color:rgba(255,255,255,.55)}
body[data-tone="ink"] .inv__filters .chip{color:#ffffff;border-color:rgba(255,255,255,.18)}
body[data-tone="ink"] .inv__filters .chip.on{background:#ffffff;color:#0a0a0d;border-color:#ffffff}
body[data-tone="ink"] .inv__fl,body[data-tone="ink"] .inv__sort{color:rgba(255,255,255,.65)}

/* Configurator (new car) */
body[data-tone="ink"] .cfg{background:var(--cream-2)}
body[data-tone="ink"] .cfg__m{background:#15151b;color:#ffffff;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .cfg__m.on{background:#ffffff;color:#0a0a0d;border-color:#ffffff}
body[data-tone="ink"] .cfg__m .lbl{color:inherit}
body[data-tone="ink"] .cfg__variants button{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.2)}
body[data-tone="ink"] .cfg__variants button.on{background:#ffffff;color:#0a0a0d;border-color:#ffffff}
body[data-tone="ink"] .cfg__breakdown{background:#15151b;color:#ffffff;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .cfg__line{color:rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.08)}
body[data-tone="ink"] .cfg__line .v{color:#ffffff}
body[data-tone="ink"] .cfg__total{border-top-color:#ffffff}
body[data-tone="ink"] .cfg__bh{color:#ffffff;border-bottom-color:rgba(255,255,255,.18)}
body[data-tone="ink"] .cfg__cn{color:var(--coral)}
body[data-tone="ink"] .cfg__addons .chip{color:#ffffff;border-color:rgba(255,255,255,.18)}
body[data-tone="ink"] .cfg__l{color:rgba(255,255,255,.6)}

/* Fitment (accessories) */
body[data-tone="ink"] .fit{background:var(--cream-2)}
body[data-tone="ink"] .fit__c{background:#15151b;color:#ffffff;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .fit__c h4,body[data-tone="ink"] .fit__c .meta,body[data-tone="ink"] .fit__c .cat{color:#ffffff !important}
body[data-tone="ink"] .fit__c .cat{opacity:.6}
body[data-tone="ink"] .fit__c .img{background:rgba(255,255,255,.04);color:rgba(255,255,255,.4)}
body[data-tone="ink"] .fit__btn{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.2)}
body[data-tone="ink"] .fit__btn:hover{background:#ffffff;color:#0a0a0d;border-color:#ffffff}
body[data-tone="ink"] .fit__bar{background:rgba(255,255,255,.04)}
body[data-tone="ink"] .fit__bar .mono{color:rgba(255,255,255,.7)}

/* EMI calculator (finance) */
body[data-tone="ink"] .emi__lender{background:#0a0a0d;color:#ffffff}
body[data-tone="ink"] .emi__lender:hover{background:rgba(255,255,255,.04)}
body[data-tone="ink"] .emi__lender .name{color:#ffffff}

/* Sell form (sell page) */
body[data-tone="ink"] .sellform{background:var(--cream-2)}
body[data-tone="ink"] .sellform__card{background:#15151b;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .sellform__card label,body[data-tone="ink"] .sellform__head .steps{color:rgba(255,255,255,.65)}
body[data-tone="ink"] .sellform__head .steps li.on{color:#ffffff}

/* Contact form */
body[data-tone="ink"] .contactform{background:var(--cream-2)}
body[data-tone="ink"] .contactform__card{background:#15151b;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .contactform__card label,body[data-tone="ink"] .contactform__head .reach .r .k{color:rgba(255,255,255,.6)}
body[data-tone="ink"] .contactform__head .reach .r .v{color:#ffffff}
body[data-tone="ink"] .contactform__card .interests .chip{color:#ffffff;border-color:rgba(255,255,255,.18)}
body[data-tone="ink"] .contactform__card .interests .chip.on{background:#ffffff;color:#0a0a0d;border-color:#ffffff}

/* News / editorial cards */
body[data-tone="ink"] .editorial{background:var(--cream)}
body[data-tone="ink"] .ev{background:var(--cream-2)}
body[data-tone="ink"] .ev__c{background:#15151b;color:#ffffff;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .ev__c h4,body[data-tone="ink"] .ev__c p,body[data-tone="ink"] .ev__c .no{color:#ffffff !important}
body[data-tone="ink"] .ev__c p{opacity:.78}
body[data-tone="ink"] .ev__c .no{opacity:.5}

/* Gallery captions, intro panels */
body[data-tone="ink"] .gal .it .cap,body[data-tone="ink"] .gal .it .no{color:#ffffff}
body[data-tone="ink"] .intro,body[data-tone="ink"] .intro__l .num{color:#ffffff}
body[data-tone="ink"] .intro__l .num sup,body[data-tone="ink"] .intro__l .lbl{color:rgba(255,255,255,.55)}
body[data-tone="ink"] .intro__meta .m .k{color:rgba(255,255,255,.55)}
body[data-tone="ink"] .intro__meta .m .v{color:#ffffff}

/* Story stats / numbers */
body[data-tone="ink"] .story{background:var(--cream)}
body[data-tone="ink"] .story__copy h2,body[data-tone="ink"] .story__copy p{color:#ffffff}
body[data-tone="ink"] .story__copy p{opacity:.78}

/* Navy-band sections in dark mode — don't override since they're already navy */
body[data-tone="ink"] .navy-band{background:#0f0f14 !important;color:#ffffff !important}
body[data-tone="ink"] .navy-band .spec__row,body[data-tone="ink"] .navy-band .next__c{background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.12) !important}

/* Phlong (partners) */
body[data-tone="ink"] .phlong{background:var(--cream-2)}
body[data-tone="ink"] .phlong__c,body[data-tone="ink"] .phlong__meta h4{color:#ffffff !important}
body[data-tone="ink"] .phlong__meta .mono{color:rgba(255,255,255,.55)}

/* Other depts grid (next section) */
body[data-tone="ink"] .next h4{color:rgba(255,255,255,.55)}
body[data-tone="ink"] .next__c{background:#15151b;color:#ffffff;border-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .next__c h5{color:#ffffff !important}

/* CTA section */
body[data-tone="ink"] .cta{background:var(--cream)}
body[data-tone="ink"] .cta h2,body[data-tone="ink"] .cta__sub{color:#ffffff !important}
body[data-tone="ink"] .cta__sub{opacity:.78}
body[data-tone="ink"] .cta__btn{background:#ffffff;color:#0a0a0d}
body[data-tone="ink"] .cta__btn:hover{color:#0a0a0d}
body[data-tone="ink"] .cta__btn .arr{background:var(--coral);color:#0a0a0d}
body[data-tone="ink"] .cta__btn::before{background:var(--coral)}

/* Footer */
body[data-tone="ink"] footer{background:#0a0a0d !important;color:#ffffff;border-top-color:rgba(255,255,255,.08)}
body[data-tone="ink"] .foot a,body[data-tone="ink"] .foot p{color:rgba(255,255,255,.78) !important}
body[data-tone="ink"] .foot__brand p{color:rgba(255,255,255,.6)}
body[data-tone="ink"] .foot__bot{color:rgba(255,255,255,.4)}
body[data-tone="ink"] .foot{border-bottom-color:rgba(255,255,255,.1)}

/* Pill (Book a viewing CTA) — make sure text always visible in both modes */
.nav .pill{color:inherit !important;border-color:currentColor}
body[data-tone="ink"] .pill,body[data-tone="ink"] .nav .pill{color:#ffffff !important;border-color:rgba(255,255,255,.55) !important;background:transparent}
body[data-tone="ink"] .pill:hover{background:var(--coral) !important;border-color:var(--coral) !important;color:#0a0a0d !important}
body[data-tone="ink"] .nav.scrolled .pill{color:#ffffff !important;border-color:rgba(255,255,255,.55) !important}
.nav.scrolled .pill{color:var(--ink) !important;border-color:var(--ink) !important}
.nav.scrolled .pill:hover{background:var(--coral) !important;border-color:var(--coral) !important;color:#0a0a0d !important}

/* === SECTION DISTINGUISHING — chapter pills + top accent strip === */
section{position:relative}
.sec-chapter{
  position:absolute;top:28px;right:36px;z-index:5;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--coral);padding:6px 12px 6px 28px;
  border:1px solid var(--coral);border-radius:99px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:0;
  pointer-events:none;
}
.sec-chapter::before{
  content:'';position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 3px rgba(232,120,98,.18);
}
.navy-band .sec-chapter{color:#ffffff;border-color:rgba(255,255,255,.6);background:rgba(0,0,0,.3)}
.navy-band .sec-chapter::before{background:#ffffff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
body[data-tone="ink"] .sec-chapter{background:rgba(0,0,0,.35);color:var(--coral)}

/* Top-left accent strip on each "chapter" section */
main > section.cct-tag::before,
body > section.cct-tag::before{
  content:'';position:absolute;top:0;left:36px;width:64px;height:3px;background:var(--coral);z-index:4;
}
.navy-band.cct-tag::before{background:#ffffff !important}

/* Vary the heading marker — h2 inside sections gets a tiny coral square anchor */
.cct-tag .eyebrow .dash{background:var(--coral) !important;width:24px}
.cct-tag .eyebrow{color:var(--ink-2)}
body[data-tone="ink"] .cct-tag .eyebrow{color:rgba(255,255,255,.78)}
.navy-band.cct-tag .eyebrow{color:rgba(255,255,255,.78)}

/* h2 sizing variance per section to break monotony */
section.wrap h2,section.cta h2,section.spec h2,section.next h4,section.phlong h2{position:relative}
section.spec h2::before,section.cfg h2::before,section.inv h2::before,section.fit h2::before,section.coat h2::before,section.emi h2::before,section.prem h2::before,section.locator h2::before,section.deliv h2::before,section.sellform h2::before,section.contactform h2::before,section.editorial h2::before,section.ev h2::before,section.editorial h2::before{
  content:'';display:inline-block;width:14px;height:14px;background:var(--coral);margin-right:14px;vertical-align:0;border-radius:2px;
}

/* === SECTION BOUNDARIES — stronger hairlines + nudged padding now
   that the end-of-chapter strip below has been retired. === */
main > section.cct-tag,
body > section.cct-tag{
  border-top:2px solid rgba(26,33,67,.22);
  margin-top:0;
  padding-bottom:80px;position:relative;
}
/* Bottom hairline — thicker, slightly darker so divisions read at a glance */
main > section.cct-tag::after,
body > section.cct-tag::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:2px;background:rgba(26,33,67,.22);
  z-index:1;
}
/* Top-left coral accent — slightly wider/taller to match the heavier rule */
main > section.cct-tag::before,
body > section.cct-tag::before{
  content:'';position:absolute;top:-2px;left:36px;width:64px;height:4px;background:var(--coral);z-index:5;
}
/* Navy variant uses a brighter cream rule so the heavier weight reads on dark too */
.navy-band.cct-tag{border-top-color:rgba(255,255,255,.28) !important}
.navy-band.cct-tag::after{background:rgba(255,255,255,.28) !important}
.navy-band.cct-tag::after,
body[data-tone="ink"] main > section.cct-tag::after,
body[data-tone="ink"] body > section.cct-tag::after,
.navy-band.cct-tag,
body[data-tone="ink"] main > section.cct-tag,
body[data-tone="ink"] body > section.cct-tag{border-top-color:var(--rule)}

/* Subtle alternating bg tint */
body[data-tone="cream"] main > section.cct-tag:nth-of-type(odd):not(.navy-band),
body[data-tone="cream"] body > section.cct-tag:nth-of-type(odd):not(.navy-band){
  background:linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
}
body[data-tone="ink"] main > section.cct-tag:nth-of-type(odd):not(.navy-band),
body[data-tone="ink"] body > section.cct-tag:nth-of-type(odd):not(.navy-band){
  background:rgba(255,255,255,.02);
}

/* End-of-chapter banner — minimal, refined */
.sec-end{
  position:absolute;bottom:0;left:0;right:0;transform:none;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;
  padding:22px 36px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  z-index:3;pointer-events:none;
  border-top:1px solid var(--rule);
}
.sec-end > span:first-child,.sec-end > span:last-child{font-variant-numeric:tabular-nums;flex:0 0 auto;font-weight:600}
.sec-end::before,.sec-end::after{content:none}
.sec-end strong{color:var(--coral);font-style:normal;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;line-height:1;text-align:center;flex:1;display:flex;align-items:center;justify-content:center;gap:14px}
.sec-end strong::before,.sec-end strong::after{content:'';display:inline-block;height:1px;flex:1;max-width:80px;background:var(--rule)}
.navy-band .sec-end{color:rgba(255,255,255,.65);border-top-color:rgba(255,255,255,.18)}
.navy-band .sec-end strong{color:#ffffff}
.navy-band .sec-end strong::before,.navy-band .sec-end strong::after{background:rgba(255,255,255,.25)}
body[data-tone="ink"] .sec-end{color:rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.1)}
body[data-tone="ink"] .sec-end strong{color:var(--coral)}
body[data-tone="ink"] .sec-end strong::before,body[data-tone="ink"] .sec-end strong::after{background:rgba(255,255,255,.1)}

/* === COVERFLOW INSIDE NAVY BAND — adapt for dark surroundings === */

/* === COVERFLOW INSIDE NAVY BAND — adapt for dark surroundings === */

/* === COVERFLOW INSIDE NAVY BAND — adapt for dark surroundings === */
.navy-band .cf__banner span{background:var(--coral) !important;color:#0f0f14 !important;box-shadow:0 18px 50px -20px rgba(232,120,98,.55) !important}
.navy-band .cf__banner span i{color:#ffffff !important}
.navy-band .cf__btn{color:#ffffff !important;border-color:rgba(255,255,255,.35) !important}
.navy-band .cf__btn:hover{background:var(--coral) !important;border-color:var(--coral) !important;color:#0f0f14 !important}
.navy-band .cf__counter{color:rgba(255,255,255,.78) !important}
.navy-band .cf__counter span:first-child{color:var(--coral) !important}
.navy-band .cf__c{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18) !important;box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.navy-band .cf__c.on{box-shadow:0 38px 90px -22px rgba(232,120,98,.55) !important;border-color:var(--coral) !important}

/* ================================================================
   CURSOR — smarter visibility on dark sections (no mix-blend
   which can render oddly on iOS / cause flicker)
   ================================================================ */
@media (hover:hover) and (pointer:fine){
  .cur-dot{background:var(--ink) !important;transition:background .3s ease,transform .35s var(--ease),width .35s var(--ease),height .35s var(--ease),opacity .25s ease}
  .cur-ring{border-color:var(--ink) !important;opacity:.55;transition:border-color .3s ease,transform .35s var(--ease),width .45s var(--ease),height .45s var(--ease),background .35s,opacity .35s}
  body[data-tone="ink"] .cur-dot{background:#ffffff !important}
  body[data-tone="ink"] .cur-ring{border-color:#ffffff !important}
}

/* hwheel polish */
.hwheel{touch-action:pan-y}
.hwheel__stage{touch-action:pan-y}
.hwheel__c{border-radius:6px;box-shadow:0 14px 36px -22px rgba(15,15,20,.5)}
.hwheel__c.on{box-shadow:0 30px 80px -20px rgba(232,120,98,.4)}
.hwheel__c:not(.on){filter:saturate(.85) brightness(.92)}
.hwheel__c:not(.on):hover{filter:none}
/* Make sure .next section doesn't trap scroll */
.next{overflow-x:clip;overflow-y:visible}

/* Cursor inverts to white over dark/navy sections (light theme) */
@media (hover:hover) and (pointer:fine){
  body.cur-on-dark .cur-dot{background:#ffffff !important}
  body.cur-on-dark .cur-ring{border-color:#ffffff !important;opacity:.85 !important}
}

/* ---------- NAV · keep the whole header on one line, every screen
   The 9-link header was only handled at two extremes — full size above
   1180px or hidden below it — with nothing in between. On laptops /
   MacBooks (~1280-1440px) the links + logo + "Book a viewing" pill ran
   past the right edge and got clipped. Make the link spacing, type size
   and horizontal padding fluid so the full nav always fits the viewport.
   clamp() caps at the original values, so wide screens are unchanged and
   only narrower ones tighten up. Higher specificity (.nav .nav__links)
   guarantees this wins over the per-page styles.css regardless of load
   order. */
@media (min-width:1181px){
  .nav .nav__links{gap:clamp(10px,1.3vw,20px);min-width:0;flex-shrink:1}
  .nav .nav__links a{font-size:clamp(12px,1.02vw,14.5px);letter-spacing:clamp(.1em,0.14vw,.16em)}
  .nav,.nav.scrolled{padding-left:clamp(20px,2.4vw,36px);padding-right:clamp(20px,2.4vw,36px)}
}