/* ============================================================
   PRIZM PROPERTY PARTNERS — shared stylesheet
   One house, two registers.
   - FIRM register  (.register-firm) : Home + Advisory. FT-paper.
   - FIRE register  (.register-fire) : the platform. Dark command-centre.
   Both share the SAME type families, spacing scale, nav + footer
   skeleton — the shift is intentional, not a different site.
   ============================================================ */

/* ---- Design tokens -------------------------------------------------- */
:root {
  /* Type families — shared across both registers */
  --serif: "Source Serif 4", "EB Garamond", Garamond, Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale (8px base) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 16px;  --s-4: 24px;
  --s-5: 40px; --s-6: 64px;  --s-7: 96px;  --s-8: 144px;

  /* Shared structure */
  --maxw: 1080px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 64px;

  /* Signal accents (one per register) */
  --gold: #C8A96E;        /* firm signal — hairlines, hovers, one underline */
  --green: #4FA85A;       /* FIRE live signal (brightened for AA on charcoal) */
  --green-deep: #2E7D32;  /* FIRE live signal, borders on lighter fields */
}

/* ---- FIRM register: institutional, restrained. Gold signal. --------- *
   Themeable: DARK is the default; light is the FT-paper variant.        */
.register-firm { --accent: var(--signal-live); }
.register-firm[data-theme="dark"] {
  --bg: #1A1A18;          /* warm charcoal */
  --panel: #211F1C;       /* raised card surface */
  --panel-2: #26241F;
  --text: #ECEAE4;        /* light text (AA on charcoal) */
  --text-soft: #B4AFA4;   /* muted, lifted for legibility */
  --grey: #8B867B;
  --hairline: #34322D;
  --signal-live: #4FA85A; /* same green as FIRE (AA on charcoal) */
}
.register-firm[data-theme="light"] {
  --bg: #F5F6F8;          /* cool paper */
  --panel: #FFFFFF;       /* white cards lift on cool paper */
  --panel-2: #ECEEF1;
  --text: #1A1A18;        /* near-black text */
  --text-soft: #46433D;   /* body grey */
  --grey: #6E6A61;        /* muted secondary */
  --hairline: #DCDFE4;    /* cool hairline */
  --signal-live: #2E7D32; /* same deeper green as FIRE light */
}

/* ---- FIRE register: command-centre terminal. Green LIVE signal. ----- *
   Themeable: DARK default (the splash); light mirrors the command-centre.*/
.register-fire[data-theme="dark"] {
  --bg: #1A1A18;          /* warm charcoal */
  --panel: #201F1C;       /* card surface */
  --panel-2: #26241F;
  --text: #ECEAE4;
  --text-soft: #B4AFA4;
  --grey: #8B867B;
  --hairline: #34322D;
  --signal-live: #4FA85A; /* brightened green for AA on charcoal */
  --state-live:   #4FA85A; /* LIVE — green */
  --state-flight: #82C58A; /* IN FLIGHT — lighter green */
  --state-prod:   #E0A14C; /* IN PRODUCTION — amber */
  --state-dev:    #E27069; /* IN DEVELOPMENT — coral red */
}
.register-fire[data-theme="light"] {
  --bg: #F5F6F8;          /* cool paper (matches firm light) */
  --panel: #FFFFFF;
  --panel-2: #ECEEF1;
  --text: #111111;
  --text-soft: #46433D;
  --grey: #6E6A61;
  --hairline: #DCDFE4;
  --signal-live: #2E7D32; /* deeper green reads better on light paper */
  --state-live:   #2E7D32;
  --state-flight: #5BAE6B;
  --state-prod:   #B8741F;
  --state-dev:    #C2453E;
}
.register-fire { --accent: var(--signal-live); }

/* ---- Reset / base --------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Visible focus for keyboard users (both registers) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Type scale (shared) ------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

.display {            /* hero headline */
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.h-section { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.h-card    { font-size: clamp(1.25rem, 2vw, 1.5rem); }

/* Eyebrow / label — letter-spaced small-caps in the sans */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--text-soft); }
.measure { max-width: 60ch; }

/* The logo's bold-name / light-descriptor device, reused in type */
.lockup-bold { font-weight: 700; }
.lockup-light { font-weight: 300; color: var(--text-soft); }

/* ---- Layout helpers ------------------------------------------------- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 120px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* Skip link for accessibility */
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--text); color: var(--bg); padding: 10px 16px;
  font-size: 0.85rem; border-radius: 2px;
}
.skip-link:focus { left: 8px; }

/* ---- Navigation (shared skeleton) ---------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-nav .container {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.nav-brand { display: flex; align-items: center; gap: 11px; }
.nav-brand .nav-mark { height: 30px; width: auto; flex: none; }
.nav-wordmark { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.nav-wordmark .nw-name {
  font-family: var(--sans); font-weight: 700; font-size: 1.18rem;
  letter-spacing: 0.005em; color: var(--text);
}
.nav-wordmark .nw-sub {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-soft);
  padding-left: 0.06em; white-space: nowrap;
}
@media (max-width: 480px) { .nav-wordmark .nw-sub { display: none; } }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
.nav-links a {
  font-size: 0.92rem; font-weight: 500; color: var(--text-soft);
  padding-block: 6px; position: relative; transition: color .18s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
}

/* ---- Buttons / links ------------------------------------------------ */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Firm: quiet, gold-underline contact link */
.link-underline {
  font-weight: 600; color: var(--text);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px; transition: color .18s, border-color .18s;
}
.link-underline:hover { color: var(--accent); }

/* Firm primary button — restrained ink */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  padding: 13px 24px; border: 1px solid var(--text); color: var(--text);
  background: transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* FIRE primary button — solid light on dark */
.register-fire .btn-solid {
  background: var(--text); color: var(--bg); border-color: var(--text);
}
.register-fire .btn-solid:hover { background: transparent; color: var(--text); }

/* ---- Footer (shared skeleton) -------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-5);
}
.site-footer .container {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
}
.site-footer img { height: 30px; width: auto; }
.footer-meta { font-size: 0.82rem; color: var(--grey); }
.footer-meta a { color: var(--text-soft); border-bottom: 1px solid var(--hairline); }
.footer-meta a:hover { color: var(--text); border-color: var(--accent); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .fb-text { font-family: var(--serif); font-size: 0.95rem; }

/* ============================================================
   FIRM REGISTER — page sections
   ============================================================ */

/* Hero */
/* Hero background watermark (Home) */
.firm-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 12vh, 150px) clamp(48px, 8vw, 100px);
}
.firm-hero .eyebrow { margin-bottom: var(--s-4); }
.firm-hero .display { margin-bottom: var(--s-4); max-width: 16ch; }
.firm-hero .lede { margin-bottom: var(--s-5); max-width: 46ch; }
.firm-hero .container { position: relative; z-index: 1; }
.hero-watermark {
  position: absolute; top: 50%; right: clamp(-90px, -3vw, -20px);
  transform: translateY(-50%);
  width: clamp(300px, 44vw, 660px); height: auto;
  opacity: 0.05; pointer-events: none; user-select: none; z-index: 0;
}
@media (max-width: 700px) { .hero-watermark { opacity: 0.035; right: -30%; width: 90vw; } }

/* About — two-column on wide, hairline divider */
.about-grid {
  display: grid; gap: clamp(24px, 5vw, 72px);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .about-grid { grid-template-columns: 0.7fr 1.3fr; } }
.about-grid .h-section { letter-spacing: -0.01em; }
.about-grid p + p { margin-top: var(--s-3); }

/* Two specialities — equal sibling cards */
.spec-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.spec-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--hairline);
  background: var(--panel);
  transition: border-color .2s ease, transform .2s ease;
  position: relative; min-height: 230px;
}
.spec-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.spec-card .eyebrow { color: var(--grey); }
.spec-card .h-card { margin-top: var(--s-1); }
.spec-card .spec-desc { color: var(--text-soft); flex: 1; }
.spec-card .spec-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.92rem;
}
.spec-card .spec-go .arrow { transition: transform .2s ease; }
.spec-card:hover .spec-go .arrow { transform: translateX(4px); }
.spec-card .spec-go { color: var(--text); }
.spec-card:hover .spec-go { color: var(--accent); }

/* Advisory — numbered solutions list */
.solutions { border-top: 1px solid var(--hairline); }
.solution {
  display: grid; gap: clamp(8px, 3vw, 40px);
  grid-template-columns: 1fr;
  padding-block: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
@media (min-width: 760px) { .solution { grid-template-columns: 88px 1fr; } }
.solution .sol-num {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  color: var(--accent); line-height: 1;
}
.solution .sol-title { margin-bottom: var(--s-2); }
.solution .sol-desc { color: var(--text-soft); max-width: 64ch; }

/* Contact block (shared in firm register) */
.contact-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-list { display: flex; flex-direction: column; gap: var(--s-3); }
.contact-item { display: flex; flex-direction: column; gap: 3px; }
.contact-item .ci-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.contact-item a, .contact-item span { font-size: 1.05rem; color: var(--text); }
.contact-item a { border-bottom: 1px solid var(--hairline); width: fit-content; transition: border-color .18s; }
.contact-item a:hover { border-color: var(--accent); }

/* ---- Capital-stack diagram (Advisory) ------------------------------ */
.struct-grid {
  display: grid; gap: clamp(32px, 6vw, 72px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) { .struct-grid { grid-template-columns: 0.85fr 1.15fr; } }
.struct-intro .eyebrow { margin-bottom: var(--s-3); }
.struct-intro .h-section { margin-bottom: var(--s-4); max-width: 14ch; }
.struct-lede { color: var(--text-soft); margin-bottom: var(--s-4); }
.struct-tags {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey); font-weight: 600;
}
.struct-tags b { color: var(--accent); font-weight: 600; }

.struct-stack { display: flex; flex-direction: column; }
.tier {
  display: grid; align-items: center;
  grid-template-columns: 1fr clamp(94px, 13vw, 152px);
}
.tier-bar {
  border: 1px solid var(--hairline); border-bottom: none;
  background: var(--panel); padding: clamp(13px, 2vw, 18px) clamp(16px, 2.5vw, 24px);
}
.tier:last-child .tier-bar { border-bottom: 1px solid var(--hairline); }
.tier-name { font-family: var(--serif); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.35rem); display: block; }
.tier-sub { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
/* Foundation tier carries the single gold signal */
.tier--foundation .tier-bar { border-left: 3px solid var(--accent); }
.tier--foundation .tier-name { color: var(--accent); }
.tier-annot {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey); display: flex; align-items: center; gap: 9px;
  padding-left: 12px; font-weight: 600;
}
.tier-annot .annot-line { width: 16px; height: 1px; background: var(--hairline); flex: none; }
@media (max-width: 520px) {
  .tier { grid-template-columns: 1fr; }
  .tier-annot { padding: 4px 0 12px 2px; }
  .tier-annot .annot-line { display: none; }
}

/* ---- FIRE Command-Centre snapshot ---------------------------------- */
.snapshot {
  display: block; position: relative; width: 100%;
  border: 1px solid var(--hairline);
  background: var(--panel);
  padding: 0; margin-top: var(--s-4);
  cursor: zoom-in;
  font: inherit; color: inherit; text-align: left;
  transition: border-color .2s ease, transform .2s ease;
}
.snapshot:hover { border-color: color-mix(in srgb, var(--state-live) 60%, var(--hairline)); }
.snapshot img { display: block; width: 100%; height: auto; }
.snapshot .snap-frame {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey);
}
.snapshot .snap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--state-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-live) 25%, transparent); }
.snapshot .snap-caption { color: var(--text-soft); }
.snapshot .snap-zoom {
  margin-left: auto; font-size: 0.65rem; letter-spacing: 0.16em;
  color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px;
}
.snapshot .snap-caption-row {
  padding: 12px 14px; font-size: 0.85rem; color: var(--text-soft);
  border-top: 1px solid var(--hairline);
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--bg) 92%, black);
  display: none; align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  cursor: zoom-out;
}
.lightbox[data-open="true"] { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; box-shadow: 0 30px 80px rgba(0,0,0,.5); border: 1px solid var(--hairline); }
.lightbox-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--bg);
  color: var(--text); cursor: pointer; font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { border-color: var(--state-live); color: var(--state-live); }

/* ---- Founder portrait (About) — floats inline with bio text -------- */
.portrait {
  width: clamp(140px, 22vw, 200px); aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  border: 1px solid var(--hairline);
  float: right;
  margin: 4px 0 var(--s-3) var(--s-4);
  shape-outside: margin-box;
}
@media (max-width: 640px) {
  .portrait { float: none; margin: 0 0 var(--s-3); }
}

/* ---- "We work with" list (About) ----------------------------------- */
.audience-list { border-top: 1px solid var(--hairline); margin-top: var(--s-4); }
.audience-item {
  display: grid; grid-template-columns: 1fr;
  gap: 4px var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 640px) { .audience-item { grid-template-columns: 220px 1fr; align-items: baseline; } }
.audience-item .au-key { font-weight: 600; color: var(--text); font-size: 1rem; }
.audience-item .au-val { color: var(--text-soft); font-size: 0.98rem; }

/* ============================================================
   FIRE REGISTER — platform sections
   ============================================================ */

/* Hero — left-aligned to match the firm pages (same container gutter) */
.fire-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 12vh, 150px) clamp(40px, 7vw, 90px);
}
.fire-hero .container { position: relative; z-index: 1; }
.fire-hero .eyebrow { margin-bottom: var(--s-3); }
.fire-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: 0.12em;       /* wide letter-spaced serif, per splash */
  line-height: 1;
  margin: 0 0 var(--s-3);
  color: var(--text);
}
.fire-subtitle {
  font-family: var(--sans);
  font-size: clamp(0.76rem, 1.3vw, 0.95rem);
  letter-spacing: 0.32em;       /* letter-spaced small-caps grey */
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  padding-left: 0.03em;
}

/* Sub-hero + problem statements — left-aligned with a readable measure */
.fire-statement { max-width: 64ch; }
.fire-statement .lede { color: var(--text); }
.fire-block-label {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey); font-weight: 600; margin-bottom: var(--s-3);
}

/* Module cards — vertical stack */
.modules { display: flex; flex-direction: column; gap: var(--s-3); }
.module {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-4);
  align-items: start;
  padding: clamp(20px, 3vw, 30px);
  background: var(--panel);
  border: 1px solid var(--hairline);
  transition: border-color .2s ease;
}
@media (max-width: 620px) {
  .module { grid-template-columns: 44px 1fr; }
  .module .build-state { grid-column: 1 / -1; justify-self: start; }
}
.module .mod-num {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
  color: var(--grey); line-height: 1; font-variant-numeric: tabular-nums;
}
.module .mod-name { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; margin-bottom: 6px; }
.module .mod-desc { color: var(--text-soft); font-size: 0.98rem; max-width: 58ch; }

/* Build-state label */
.build-state {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey);
  border: 1px solid var(--hairline);
  padding: 6px 12px; white-space: nowrap;
}
.build-state .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Module build-state signals — four states, one styling rule */
.module[data-state] { border-color: color-mix(in srgb, var(--state-color) 55%, var(--hairline)); }
.module[data-state] .mod-name { color: var(--text); }
.module[data-state] .build-state {
  color: var(--state-color);
  border-color: color-mix(in srgb, var(--state-color) 60%, transparent);
  background: color-mix(in srgb, var(--state-color) 12%, transparent);
}
.module[data-state] .build-state .dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-color) 25%, transparent);
}
.module[data-state="live"]   { --state-color: var(--state-live); }
.module[data-state="flight"] { --state-color: var(--state-flight); }
.module[data-state="prod"]   { --state-color: var(--state-prod); }
.module[data-state="dev"]    { --state-color: var(--state-dev); }

/* Why-infrastructure proof list */
.proof-list { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.proof-item {
  display: grid; grid-template-columns: 1fr; gap: 4px var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 640px) { .proof-item { grid-template-columns: 210px 1fr; } }
.proof-item .pf-key {
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  color: var(--text); min-width: 0;
}
.proof-item .pf-val { color: var(--text-soft); font-size: 0.98rem; }
.proof-item.is-egress .pf-key { color: var(--accent); }

/* FIRE CTA — left-aligned */
.fire-cta .btn-solid { font-size: 1rem; padding: 15px 32px; }
.fire-secondary {
  display: inline-block; margin-top: var(--s-4);
  font-size: 0.85rem; color: var(--text-soft);
  border-bottom: 1px solid var(--hairline); padding-bottom: 2px;
  transition: color .18s, border-color .18s;
}
.fire-secondary:hover { color: var(--text); border-color: var(--accent); }

/* ---- Theme toggle + logo swap -------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--text-soft); cursor: pointer; padding: 0;
  transition: color .18s ease, border-color .18s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Show the correct logo for the active theme (no flash, no JS needed) */
[data-theme="dark"] .theme-light-only { display: none !important; }
[data-theme="light"] .theme-dark-only { display: none !important; }

/* Reduced-motion: disable transforms/transitions for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}