/* ══════════════════════════════════════════════════════════════
   hub-light.css — LIGHT theme for the hub pages
   (uxui.html, index.html, about.html, illustrations.html)

   Loaded LAST on hub pages only, so the dark case-study insulation isn't
   affected. Flips the dark tokens to the case studies' light editorial
   palette (white ground, slate ink, neutral grey #ececec panels,
   Newsreader serif / Geist / Geist Mono) and fixes the hardcoded darks.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Light palette */
  --bg:         #ffffff;
  --fg:         #32404f;
  --muted:      rgba(50,64,79,0.55);
  --accent:     #32404f;
  --accent50:   rgba(50,64,79,0.5);
  --accent-ink: #ffffff;

  --card:       #ececec;
  --surface-0:  #ffffff;
  --surface-1:  #ececec;
  --surface-2:  #e4e4e4;

  --line-weak:  rgba(50,64,79,0.08);
  --line-mid:   rgba(50,64,79,0.14);

  --grad-a:     #ffffff;
  --grad-b:     #f4f4f4;

  --scrim:      rgba(20,24,28,0.55);
  --thumb-bg:   #ececec;

  --shadow:     0 10px 30px rgba(50,64,79,0.10);
  --hire-bg:    #32404f;
  --hire-fg:    #ffffff;

  /* Type system (matches the case studies) */
  --l-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --l-mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --l-sans:  "Geist", "Inter", system-ui, sans-serif;
}

body {
  background: #ffffff;
  color: var(--fg);
  font-family: var(--l-sans);
}

/* Render the hub at 100% to match the case studies (drops home.css's 0.9 zoom) */
body:not(.gate-open) { zoom: 1; }

/* ══ Header (light) ══ */
header { background: rgba(255,255,255,0.85) !important; border-bottom: 1px solid var(--line-mid); }
.headerWordmark { color: var(--fg); }
.menuBtn { color: var(--fg); opacity: 0.75; }
.contactsCard { border: 1px solid var(--line-mid); }

/* ══ Editorial intro ══ */
.editorialIntro__eyebrow {
  font-family: var(--l-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.editorialIntro__text { font-family: var(--l-sans); color: var(--fg); }

/* ══ Section / case-study header ══ */
.csHeader__label,
.sectionHeader .csHeader__label {
  font-family: var(--l-mono);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--muted);
}
.csHeader__title { font-family: var(--l-serif); font-weight: 400; color: var(--fg); }
.csHeader__title em { font-style: italic; }
.csHeader__sub { color: var(--muted); }

/* ══ Case-study list cards ══ */
.csCard__num { font-family: var(--l-serif); color: rgba(50,64,79,0.22); }
.csCard:hover .csCard__num { color: var(--fg); }
.csCard__meta { font-family: var(--l-mono); color: var(--muted); }
.csCard__title { font-family: var(--l-sans); color: var(--fg); }
.csCard__overview { color: var(--muted); }
.csCard__cta { color: var(--fg); }
.csCard__cta-icon { border-color: var(--line-mid); color: var(--fg); }
.csCard__link:hover .csCard__cta-icon,
.csCard__link:focus-visible .csCard__cta-icon { border-color: var(--fg); }
.csCard__link:focus-visible { outline-color: var(--fg); }
.csCard__img { background: var(--thumb-bg); }
.csCard:nth-child(even) .csCard__title { color: var(--fg); }
.csCard:nth-child(even) .csCard__overview { color: var(--muted); }
.csCard:nth-child(even) .csCard__cta { color: var(--fg); }
.csCard:nth-child(even) .csCard__num { color: rgba(50,64,79,0.22); }
.csCard:nth-child(even) .csCard__cta-icon { border-color: var(--line-mid); color: var(--fg); }

/* ══ Intro gate (home landing) → light ══ */
.introGate { background: #ffffff; }
.introGate__intro {
  font-family: var(--l-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
}
.introGate__intro span { color: var(--muted); }
.introGate__choice { color: var(--fg); border-bottom-color: var(--line-mid); }
.introGate__choice:first-child { border-top-color: var(--line-mid); }
.introGate__choiceIndex { color: var(--muted); }
.introGate__choice:hover .introGate__choiceIndex { color: var(--fg); }
.introGate__choiceName { font-family: var(--l-serif); font-weight: 400; letter-spacing: -0.02em; }
.introGate__choiceTag { color: var(--muted); }
.introGate__choice:hover .introGate__choiceTag { color: var(--fg); }
.introGate__choiceLead::after { color: var(--fg); }
.introGate__choice--featured { background: rgba(50,64,79,0.05); }
.introGate__choice--featured:hover { background: rgba(50,64,79,0.09); }
.introGate__choice--featured .introGate__choiceName,
.introGate__choice--featured .introGate__choiceIndex { color: var(--fg); }
.introGate__choice--featured .introGate__choiceTag { color: var(--muted); }
.introGate__image { background: var(--thumb-bg); border-color: var(--line-mid); box-shadow: 0 24px 60px rgba(50,64,79,0.14); }
.introGate__contact { background: var(--card); }
.introGate__contactLabel { color: var(--muted); }
.introGate__socials a { color: var(--fg); }
.introGate__resume { color: var(--fg); border-top-color: var(--line-mid); }

/* ══ Hero image headline → serif ══ */
.heroImg__headline { font-family: var(--l-serif); }

/* ══ About page ══ */
.aboutPoint { border-bottom-color: var(--line-mid); }
.aboutPoint__num { color: var(--muted); font-family: var(--l-mono); }
.aboutPoint__title { font-family: var(--l-serif); font-weight: 400; letter-spacing: -0.01em; color: var(--fg); }
.aboutPoint__desc { color: var(--muted); }
.aboutPoint__tag { color: var(--fg); }
.aboutClosing { border-top-color: var(--line-mid); }
.aboutClosing__text { color: var(--fg); }
.aboutClosing__cta { background: var(--fg); color: #ffffff; }
.aboutSection { background: var(--card); }
.aboutSection__headline { color: var(--fg); font-family: var(--l-serif); font-weight: 400; }
.aboutSection__body { color: var(--muted); }
.aboutSection__cta { background: var(--fg); color: #ffffff; }

/* ══ Footer (light) ══ */
.footer { background: #ffffff !important; border-top: 1px solid var(--line-mid); }
.footerBrand { color: var(--muted); }
.footerSocials a { border-color: var(--line-mid); color: var(--muted); }
.footerSocials a:hover,
.footerSocials a:focus-visible { color: var(--fg); border-color: var(--fg); }
.footerBottom { color: var(--muted); border-top-color: var(--line-mid); }
.kicker,
.footerContact .kicker { color: var(--muted) !important; }
.emailAddress { color: var(--fg) !important; }
.footerAbout { border-bottom-color: var(--line-mid); }
.footerAbout__text { color: var(--muted); }