/* ══════════════════════════════════════════════════════════════
   caseStudy-light.css — shared LIGHT EDITORIAL theme
   For the case studies built on the generic caseStudyNew.css classes
   (Metle, University, Portfolio). Scoped to body.csLight. Loads LAST.

   Mirrors the Daily 10 light system (Newsreader serif headings at 400/
   -0.02em, Geist Mono labels, Geist 15px body, white ground, 768 centred
   column, sticky TOC rail) but targets the generic class system, and
   redefines the dark theme variables so inline var(--ink)/var(--soft)/…
   styles flip automatically.
   ══════════════════════════════════════════════════════════════ */

body.csLight {
  /* ── Re-point the dark theme variables to the light palette ── */
  --ink:      #32404f;               /* was #e8e5d9 — primary text (now slate) */
  --ink-deep: #32404f;
  --body:     rgba(50,64,79,0.82);   /* body text (darker/readable, per D10.pdf) */
  --mute:     rgba(50,64,79,0.55);   /* faint labels */
  --canvas:   #ffffff;               /* band bg */
  --soft:     #ffffff;               /* band bg */
  --primary:  #32404f;               /* step numbers, misc accents → slate */
  --primary-pale:    rgba(50,64,79,0.05);
  --primary-neutral: rgba(50,64,79,0.22);

  /* ── Light-system tokens (matched to D10.pdf) ── */
  --l-bg:#ffffff; --l-ink:#32404f; --l-head:#2b3644;
  --l-body:rgba(50,64,79,0.82); --l-muted:rgba(50,64,79,0.55); --l-faint:rgba(50,64,79,0.40);
  --l-line:rgba(50,64,79,0.14); --l-hair:rgba(50,64,79,0.08); --l-panel:#ececec;
  --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;

  background:#ffffff;
  color:var(--l-ink);
  zoom:1;                            /* drop the shared 0.9 case-study zoom */
}

.csLight #progress { background: var(--l-ink) !important; }

/* ══ Editorial header — matches the case-study PDFs:
   logo + "Product Designer + Illustrator" left, mono nav right, no dropdown ══ */
.csLight header { background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--l-line); padding: 0 var(--gutter-x); }
.csLight .headerInner { align-items: center; min-height: 74px; gap: 16px; }
.csLight .headerLogoLink { margin-top: 0; align-items: center; }
.csLight .headerLogo { height: 38px; }
.csLight .headerWordmark {
  position: static; width: auto; height: auto; padding: 0; margin: 0 0 0 16px;
  clip: auto; overflow: visible; white-space: nowrap; border: 0;
  font: 400 13px/1.4 var(--l-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--l-muted);
}
.csLight .headerLogoLink:hover .headerWordmark { opacity: 1; color: var(--l-ink); }
.csLight .sectionTabs {
  margin: 0 0 0 auto; background: none; border-radius: 0; padding: 0; gap: 34px;
}
.csLight .sectionTab {
  padding: 0; border-radius: 0; background: none;
  color: var(--l-muted);
  font: 400 13px/1 var(--l-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.csLight .sectionTab.is-active,
.csLight .sectionTab:hover:not(.is-active),
.csLight .sectionTab:focus-visible { background: none; color: var(--l-ink); }
.csLight .contactsCard { display: none; }
.csLight .menuBtn { color: var(--l-ink); opacity: 0.75; }
@media (max-width: 680px) { .csLight .headerWordmark { display: none; } }

/* ══ Sticky TOC rail — reference style: no star icons, plain text items,
   small uppercase mono "Back" ══ */
.csLight .csTOC__ico { display: none; }
.csLight .headerBack {
  font: 400 13px/1 var(--l-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--l-muted);
  text-decoration: none;
}
.csLight .headerBack:hover,
.csLight .headerBack:focus-visible { color: var(--l-ink); opacity: 1; }
.csLight .csTOC__link {
  font-family: var(--l-sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--l-faint);
  padding: 9px 0;
}
.csLight .csTOC__link:hover { color: var(--l-body); }
.csLight .csTOC__link.is-active { color: var(--l-ink); }

/* ══ Bands → white, no divider lines ══ */
.csLight .bw,
.csLight .bs,
.csLight .bd { background: #ffffff; border-top: none; }

/* ══ Reading column: 768 centred in the viewport, TOC rail in the left margin ══ */
@media (min-width: 1100px) {
  .csLight .cs-hero-split,
  .csLight .inner {
    padding-left:  max(calc(var(--gutter-x) + 200px + 40px), calc((100% - 768px) / 2));
    padding-right: max(calc(var(--gutter-x) + 200px + 40px), calc((100% - 768px) / 2));
  }
}
/* Tighter vertical band padding → ~48px between sections */
.csLight .inner { padding-top: 24px; padding-bottom: 24px; }

/* ══ Hero ══ */
.csLight .cs-hero-split { background: #ffffff; }
.csLight .cs-hero-split .hero-eyebrow,
.csLight .hero-eyebrow {
  font: 400 15px/1 var(--l-mono);
  text-transform: uppercase;
  color: var(--l-muted) !important;
  letter-spacing: normal;
  margin: 0 0 18px;
}
.csLight .hero-title,
.csLight .cs-hero-split .hero-title {
  font-family: var(--l-serif);
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--l-head);
  margin: 0 0 10px;
}
.csLight .hero-title span { color: var(--l-head) !important; }
.csLight .cs-hero-split .hero-sub,
.csLight .hero-sub { font: 400 15px/1.6 var(--l-sans); color: var(--l-body); }
.csLight .cs-hero-split__visual { box-shadow: 0 24px 60px rgba(50,64,79,0.14); border: 1px solid var(--l-hair); }
.csLight .cs-hero-stat__num {
  font: 400 clamp(28px, 3vw, 40px)/1 var(--l-serif);
  letter-spacing: -0.01em;
  color: var(--l-head) !important;
}
.csLight .cs-hero-stat__label {
  font: 500 11px/1.3 var(--l-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-muted);
}

/* ══ Case-study hero — Rachel Chen layout:
   eyebrow · serif title · full-width image · ROLE/TIMELINE/TEAM/SKILLS text row ══ */
.csLight .csHero {
  padding: 40px var(--gutter-x) 24px;
  padding-top: calc(var(--header-h, 110px) + 30px);
}
@media (min-width: 1100px) {
  .csLight .csHero {
    padding-left:  max(calc(var(--gutter-x) + 200px + 40px), calc((100% - 768px) / 2));
    padding-right: max(calc(var(--gutter-x) + 200px + 40px), calc((100% - 768px) / 2));
  }
}
.csLight .csHero__eyebrow {
  font: 400 13px/1.4 var(--l-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--l-muted);
  margin: 0 0 16px;
}
.csLight .csHero__title {
  font: 400 2.75rem/1.1 var(--l-serif);
  letter-spacing: -0.02em;
  color: var(--l-head);
  margin: 0 0 28px;
}
.csLight .csHero__title:has(+ .csHero__lead) { margin-bottom: 16px; }
.csLight .csHero__lead {
  font: 400 clamp(1.05rem, 1.5vw, 1.2rem)/1.55 var(--l-sans);
  color: var(--l-body);
  max-width: 64ch;
  margin: 0 0 28px;
}
.csLight .csHero__img { border-radius: 12px; overflow: hidden; margin: 0 0 28px; }
.csLight .csHero__img img { width: 100%; display: block; }
/* Panel variant for portrait / small hero art (centres it on a grey panel) */
.csLight .csHero__img--panel {
  background: var(--l-panel);
  padding: 36px;
  display: flex;
  justify-content: center;
}
.csLight .csHero__img--panel img { width: auto; max-width: 320px; max-height: 460px; border-radius: 8px; }
.csLight .csHero__meta { display: flex; flex-wrap: wrap; gap: 32px; }
.csLight .csHero__meta > div { flex: 1 1 150px; min-width: 0; }
.csLight .csHero__metaLabel {
  font: 400 12px/1.3 var(--l-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--l-muted);
  margin: 0 0 8px;
}
.csLight .csHero__metaVal { font: 400 15px/1.5 var(--l-sans); color: var(--l-body); margin: 0; }
@media (max-width: 600px) { .csLight .csHero__meta { gap: 24px; } .csLight .csHero__meta > div { flex-basis: 40%; } }

/* ══ Section eyebrows → mono uppercase label above each heading
   (matches the Daily 10 .cs2-eyebrow so all case studies stay consistent) ══ */
.csLight .eyebrow,
.csLight .eyebrow-g {
  display: block;
  font: 400 13px/1.4 var(--l-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  color: var(--l-muted) !important;
  margin: 0 0 14px !important;
}

/* ══ Section headings → serif, weight 400, -0.02em (D10.pdf scale) ══ */
.csLight .stitle,
.csLight .stitle-g {
  font-family: var(--l-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--l-head) !important;
  margin-bottom: 22px;
}
/* Inline sub-headings (many are inline-styled sans-900) → serif slate 400 */
.csLight .inner h3 {
  font-family: var(--l-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--l-head) !important;
}

/* ══ Body copy → Geist 15px, one size ══ */
.csLight .lead,
.csLight .lead-l {
  font: 400 16px/1.7 var(--l-sans);
  color: var(--l-body) !important;
  margin-bottom: 16px;
}
.csLight .lead strong,
.csLight .lead-l strong { color: var(--l-ink) !important; font-weight: 600; }
.csLight .body,
.csLight .body-l,
.csLight .sbody,
.csLight .cb,
.csLight .cb-l {
  font-family: var(--l-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--l-body) !important;
}
.csLight .body, .csLight .body-l { margin-bottom: 16px; }

/* ══ Generic components ══ */
/* Cards → light panels, hairline border, no heavy fills */
.csLight .card,
.csLight .card-dk,
.csLight .card-g {
  background: var(--l-panel) !important;
  border: none !important;
  border-radius: 16px;
  box-shadow: none !important;
}
.csLight .ch,
.csLight .ch-g { color: var(--l-ink) !important; font-family: var(--l-sans); }

/* Steps */
.csLight .step { border-bottom: 1px solid var(--l-hair); }
.csLight .snum { color: var(--l-faint) !important; }
.csLight .stitle2 { color: var(--l-ink) !important; font-family: var(--l-sans); }

/* Pills / meta / chips */
.csLight .pill { border: 1.5px solid var(--l-line); color: var(--l-body); }
.csLight .meta-label { color: var(--l-faint) !important; font-family: var(--l-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.csLight .meta-val { color: var(--l-ink) !important; }

/* Blockquote */
.csLight .bq {
  font-family: var(--l-serif) !important;
  font-weight: 400 !important;
  color: var(--l-head) !important;
  border-top: 1px solid var(--l-hair) !important;
  border-bottom: 1px solid var(--l-hair) !important;
  letter-spacing: -0.01em !important;
}

/* ══ Media panels: faint grey, gentle rounding, no border/shadow ══ */
.csLight .moodDemo { border-radius: 10px; overflow: hidden; }
.csLight .moodStep__shot { border: none; box-shadow: none; background: var(--l-panel); border-radius: 10px; }

/* ══ Metle components ══ */
.csLight .personaCard { background: var(--l-panel); border: none; border-radius: 16px; }
.csLight .personaCard__name { color: var(--l-ink) !important; font-family: var(--l-serif); font-weight: 400; }
.csLight .personaCard__role { color: var(--l-muted) !important; font-family: var(--l-mono); }
.csLight .personaCard__desc { color: var(--l-body); }

.csLight .moodStep__num { color: var(--l-muted) !important; font-family: var(--l-mono); font-weight: 400; }
.csLight .moodStep__num::before { background: var(--l-faint); }
.csLight .moodStep__cap { color: var(--l-body); }

.csLight .stratCard { background: var(--l-panel); border: none; border-radius: 16px; }
.csLight .stratCard__num { color: var(--l-faint) !important; }
.csLight .stratCard__title { color: var(--l-ink) !important; font-family: var(--l-serif); font-weight: 400; }
.csLight .stratCard__body { color: var(--l-body); }

.csLight .critChip { border-color: var(--l-line) !important; color: var(--l-ink) !important; }

/* Tables → dark header row (matches Daily 10 .cs2-table) */
.csLight .emTable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin: 16px 0;
}
.csLight .emTable th {
  text-align: left;
  font: 400 11px/1.3 var(--l-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff !important;
  background: var(--l-head);
  padding: 11px 14px;
}
.csLight .emTable td {
  font: 400 14px/1.5 var(--l-sans);
  color: var(--l-body);
  padding: 12px 14px;
  border-bottom: 1px solid var(--l-hair);
  vertical-align: top;
}
.csLight .emTable td:first-child { color: var(--l-ink) !important; }
.csLight .emTable tr:last-child td { border-bottom: none; }

.csLight .pcList li { color: var(--l-body); }

.csLight .wordmarkCard { background: var(--l-panel); }
.csLight .typeSpec { color: var(--l-body); }
.csLight .typeSpec strong { color: var(--l-ink); }

/* ══ University components ══ */
.csLight .wCard { background: var(--l-panel); border: none; border-radius: 16px; }
.csLight .wCard h4 { color: var(--l-muted) !important; font-family: var(--l-mono); font-weight: 400; }
.csLight .wCard li { color: var(--l-body); }

.csLight .swotCard { background: var(--l-panel); border: none; border-radius: 16px; }
.csLight .swotCard__name { color: var(--l-ink) !important; font-family: var(--l-serif); font-weight: 400; }
.csLight .swotQuad li { color: var(--l-body); }
/* swotQuad h5 keeps its semantic S/W/O/T colours */

.csLight .statChartRow img { border-radius: 10px; }

/* Survey carousel */
.csLight .surveyCarousel .cs-carousel__track-wrap { background: var(--l-panel); border: none; }
.csLight .cs-carousel__count { color: var(--l-muted); background: rgba(255,255,255,0.85); }
.csLight .cs-carousel__btn,
.csLight .bw .cs-carousel__btn,
.csLight .bs .cs-carousel__btn { background: var(--l-ink); color: #fff; }
.csLight .cs-carousel__dot,
.csLight .bw .cs-carousel__dot,
.csLight .bs .cs-carousel__dot { background: rgba(50,64,79,0.2); }
.csLight .cs-carousel__dot--active,
.csLight .bw .cs-carousel__dot--active,
.csLight .bs .cs-carousel__dot--active { background: var(--l-ink); }

/* multi-item demo video → gentle rounding */
.csLight .multiItemDemo { border-radius: 10px; overflow: hidden; }

/* ── Footer + More Work → white ── */
.csLight .moreWork { background: #ffffff; }
.csLight .footer { background: #ffffff !important; }