/* ==========================================================================
   DEVEXA — Design system v2
   Editorial design × data journalism × analytical report × technology
   portfolio. Two theme environments: night (system/engineering/brand) and
   paper (data/analysis/evidence). Editorial red is a typographic highlight
   — "editor's red ink on a printed report" — not a UI brand color: used
   sparingly (~5-10% of the page), never as a section background.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

:root {
  /* ---- color: night (dark — brand, technology, systems, AI) ---- */
  --night: #161616;
  --night-surface: #1D1D1D;
  --night-text: #E8E5DF;
  --night-muted: #A9A69F;
  --night-rule: #343434;

  /* ---- color: paper (light — analysis, data, evidence) ---- */
  --paper: #F2F0EA;
  --paper-light: #F8F7F3;
  --ink: #1B1B19;        /* headings on paper */
  --ink-soft: #3D3C38;   /* body copy on paper — never --muted for long text */
  --muted: #696762;      /* metadata, secondary labels */
  --tertiary: #99968E;   /* tertiary / lowest-emphasis text */
  --rule: #D7D4CD;

  /* ---- editorial accent — "look here", not a UI brand color ---- */
  --editorial-red: #C83A32;
  --editorial-red-ink: #F8F7F3; /* text placed on a red fill, e.g. skip-link */

  /* ---- type families (three roles only) ---- */
  --font-display: "Instrument Serif", "Iowan Old Style", "Georgia", serif;
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- display type — tighter tracking/line-height as size grows ---- */
  --fs-h1: clamp(3.375rem, 1.1rem + 6.5vw, 6.5rem);   /* 54–104px */
  --lh-h1: 0.94;
  --ls-h1: -0.045em;

  --fs-h2: clamp(2.375rem, 1.35rem + 4vw, 4rem);       /* 38–64px */
  --lh-h2: 1.02;
  --ls-h2: -0.035em;

  --fs-h3: clamp(1.5625rem, 1.28rem + 2.4vw, 2.25rem); /* 25–36px */
  --lh-h3: 1.15;
  --ls-h3: -0.025em;

  /* ---- lead — its own level of hierarchy, not "slightly bigger body" ---- */
  --fs-lead: clamp(1.375rem, 1.06rem + 2vw, 1.875rem); /* 22–30px */
  --lh-lead: 1.42;
  --ls-lead: -0.018em;

  /* ---- body — comfortable long-form reading ---- */
  --fs-body: 1.125rem;   /* 18px */
  --lh-body: 1.68;
  --ls-body: -0.006em;

  --fs-small: 0.9375rem; /* 15px — secondary UI text, not metadata */

  /* ---- mono / eyebrow / metadata — positive tracking ---- */
  --fs-mono: 0.6875rem;  /* 11px */
  --lh-mono: 1.3;
  --ls-mono: 0.09em;

  /* ---- big metric numbers — editorial, never boxed in a dashboard card ---- */
  --fs-metric: clamp(2.625rem, 1.2rem + 5vw, 4.75rem); /* 42–76px */
  --lh-metric: 0.95;
  --ls-metric: -0.055em;

  /* ---- content widths — pick the one that matches the content's job ---- */
  --content-narrow: 660px;   /* body, interpretation, methodology, long-form */
  --content-reading: 780px;  /* lead, larger intros, explanatory blocks */
  --content-wide: 1100px;    /* charts, tables, findings, pipelines */
  --content-full: 1320px;    /* hero, special visualizations, editorial moments */

  --container-width: var(--content-full);
  --container-pad: clamp(20px, 5vw, 64px);
  --measure: var(--content-narrow);

  /* ---- spacing system — fixed steps, not one letter-spacing for everything ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 160px;
  --space-10: 200px;

  /* ---- misc ---- */
  --radius-sm: 2px;
  --ease: cubic-bezier(0.16, 0.8, 0.24, 1);
  --dur-fast: 160ms;
  --dur-med: 400ms;
  --header-h: 76px;
}

/* Scale the biggest spacing steps down on mobile — every component that
   references --space-7 through --space-10 shrinks automatically, so the
   overall rhythm survives without per-component mobile overrides. */
@media (max-width: 767px) {
  :root {
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 88px;
    --space-9: 112px;
    --space-10: 140px;
  }
}

html {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  background: var(--night);
  color: var(--night-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-3);
  z-index: 200;
  background: var(--editorial-red);
  color: var(--editorial-red-ink);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-3);
}

a:focus-visible,
button:focus-visible,
.nav-toggle-label:focus-visible,
input:focus-visible {
  outline: 2px solid var(--editorial-red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Three content widths (see :root) — pick by what the content is, not by
   habit. .measure is an alias for the narrow (body-copy) width, kept for
   continuity with existing markup. */
.measure { max-width: var(--content-narrow); }
.content-reading { max-width: var(--content-reading); }
.content-wide { max-width: var(--content-wide); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--local-muted, var(--night-muted));
  margin-bottom: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
}

.hero__eyebrow-sep { opacity: 0.6; }

.section-heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  max-width: 16ch;
  margin-bottom: var(--space-4);
}

/* Editorial accent word within a heading or lead — e.g. the second half of
   a hero headline, or a single emphasized word in a statement moment. */
.accent-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* Arrow / underline link component, reused across CTAs */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  padding-bottom: 2px;
  width: fit-content;
}

.link-arrow__text {
  position: relative;
}

.link-arrow__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  opacity: 0.5;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}

.link-arrow:hover .link-arrow__text::after {
  transform: scaleX(1);
  opacity: 1;
}

.link-arrow__glyph {
  transition: transform var(--dur-med) var(--ease);
  color: var(--editorial-red);
}

.link-arrow:hover .link-arrow__glyph { transform: translateX(4px); }
.link-arrow--down:hover .link-arrow__glyph { transform: translateY(4px); }

/* ==========================================================================
   Theme scoping — sections declare local surface tokens
   ========================================================================== */

[data-theme="dark"] {
  --local-bg: var(--night);
  --local-surface: var(--night-surface);
  --local-text: var(--night-text);
  --local-muted: var(--night-muted);
  --local-border: var(--night-rule);
  background: var(--local-bg);
  color: var(--local-text);
}

[data-theme="light"] {
  --local-bg: var(--paper);
  --local-surface: var(--paper-light);
  --local-text: var(--ink);
  --local-muted: var(--muted);
  --local-border: var(--rule);
  background: var(--local-bg);
  color: var(--local-text);
}

[data-theme] .eyebrow { color: var(--local-muted); }

/* ==========================================================================
   Reveal-on-scroll (progressive enhancement — visible by default, no JS required)
   ========================================================================== */

.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-med) var(--ease),
              color var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--local-bg, var(--night));
  opacity: 0.92;
  z-index: -1;
  backdrop-filter: blur(10px);
}

.site-header[data-theme="light"] { border-bottom-color: var(--rule); }
.site-header[data-theme="dark"] { border-bottom-color: var(--night-rule); }

.site-header__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-header__logo {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.site-header__reg {
  font-size: 0.6em;
  vertical-align: super;
  opacity: 0.7;
}

.site-header__status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--local-muted, var(--night-muted));
  letter-spacing: var(--ls-mono);
  white-space: nowrap;
}

.site-header__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--editorial-red);
  flex-shrink: 0;
}

.site-nav__list {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.07em;
}

.site-nav__list a {
  position: relative;
  padding-bottom: 3px;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.site-nav__list a:hover::after { transform: scaleX(1); }

.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label { display: none; }

/* ==========================================================================
   Hero — reads like a publication cover, not a report header
   ========================================================================== */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-8);
}

.hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
}

.hero__field-svg {
  width: 100%;
  height: 100%;
  transition: transform 600ms var(--ease);
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}

.hero__axis { stroke: var(--night-rule); stroke-width: 1.5; }
.hero__dots circle { fill: var(--night-muted); opacity: 0.55; }
.hero__dot--accent { fill: var(--editorial-red) !important; opacity: 0.9 !important; }
.hero__trend { fill: none; stroke: var(--night-rule); stroke-width: 1; stroke-dasharray: 3 5; }

.hero__container { position: relative; z-index: 1; }

.hero__headline {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  margin-bottom: var(--space-4);
  max-width: 16ch;
}

.hero__headline-sans {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
}

.hero__headline-serif {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--night-muted);
}

.hero__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--night-muted);
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
  max-width: var(--content-reading);
}

.hero__eyebrow { margin-bottom: var(--space-5); }

/* ==========================================================================
   Manifest + Pipeline component
   ========================================================================== */

.manifest { padding-block: var(--space-9); }

.manifest__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  max-width: 14ch;
  margin-bottom: var(--space-4);
}

.manifest__body {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--night-muted);
  max-width: var(--content-reading);
  margin-bottom: var(--space-8);
}

.manifest__body p + p { margin-top: var(--space-3); }

.pipeline {
  margin-block: var(--space-4);
}

.pipeline__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
}

.pipeline__step span {
  display: inline-block;
  font-size: clamp(0.8125rem, 0.74rem + 0.4vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--local-border, var(--night-rule));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* Red marks the border only — text stays in the neutral local color so it
   keeps AA contrast on dark backgrounds (editorial red text on --night is
   ~3.5:1, below the 4.5:1 body-text minimum; red as a border/rule is a
   non-text UI boundary, held to 3:1, which it clears). */
.pipeline__step--accent span {
  border-color: var(--editorial-red);
}

.pipeline__arrow {
  color: var(--local-muted, var(--night-muted));
  font-size: 1.25rem;
}

/* ==========================================================================
   Selected work — dark → light transition zone
   ========================================================================== */

.selected-work {
  position: relative;
  padding-block: var(--space-9);
  background: var(--night);
}

/* Stops are tuned to the project list: 2 dark entries, then 2 light ones
   (free gap between entry 02 and 03 ≈ 50–53.7% of the section, 390–1440 px).
   Re-check after adding or removing an entry. */
.selected-work__backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--night) 0%,
    var(--night) 50.5%,
    var(--paper) 53.5%,
    var(--paper) 100%
  );
  z-index: 0;
}

.selected-work .container { position: relative; z-index: 1; }

[data-theme-text="dark"] { color: var(--night-text); }
[data-theme-text="dark"].eyebrow { color: var(--night-muted); }

.selected-work__eyebrow { color: var(--night-muted); }

.project-index {
  display: flex;
  flex-direction: column;
}

.project {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.project--dark { color: var(--night-text); }
.project--light { color: var(--ink); }

.project__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-mono);
}

.project__number {
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--editorial-red);
}

.project__category {
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.project--dark .project__category { color: var(--night-muted); }
.project--light .project__category { color: var(--muted); }

.project__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin-bottom: var(--space-3);
  max-width: 22ch;
}

.project__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-3);
}

.project--dark .project__desc { color: var(--night-muted); }
.project--light .project__desc { color: var(--ink-soft); }

.project__stack {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-3);
}

.project--dark .project__stack { color: var(--night-muted); }
.project--light .project__stack { color: var(--muted); }

/* ==========================================================================
   Process — From raw data to action
   ========================================================================== */

.process { padding-block: var(--space-9); }

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7) var(--space-4);
}

.process__step {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}

.process__number {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--editorial-red);
  margin-bottom: var(--space-3);
}

.process__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-bottom: var(--space-2);
}

.process__desc { color: var(--ink-soft); line-height: var(--lh-body); }

/* ==========================================================================
   AI system
   ========================================================================== */

.ai-system { padding-block: var(--space-9); }

.ai-system__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.ai-system__body {
  color: var(--night-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}
.ai-system__body p + p { margin-top: var(--space-3); }

.ai-schema {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  padding: var(--space-5);
  border: 1px solid var(--night-rule);
  border-radius: var(--radius-sm);
}

.ai-schema__node {
  border: 1px solid var(--night-rule);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-align: center;
  white-space: nowrap;
}

.ai-schema__node--top { color: var(--night-muted); }

/* Red marks the border only — see .pipeline__step--accent note above. */
.ai-schema__node--accent {
  border-color: var(--editorial-red);
}

.ai-schema__arrow { color: var(--night-muted); font-size: 1.1rem; }

.ai-schema__chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.ai-schema__chain-arrow { color: var(--night-muted); }

/* ==========================================================================
   Lab / Experiments
   ========================================================================== */

.lab { padding-block: var(--space-9); }

.lab__intro {
  color: var(--night-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  max-width: var(--content-reading);
  margin-bottom: var(--space-6);
}

.lab__list {
  border-top: 1px solid var(--night-rule);
}

.lab__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--night-rule);
  transition: padding-left var(--dur-med) var(--ease);
}

.lab__item:hover {
  padding-left: var(--space-2);
}

.lab__index {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--night-muted);
  flex-shrink: 0;
  width: 3ch;
  transition: color var(--dur-med) var(--ease);
}

.lab__item:hover .lab__index { color: var(--editorial-red); }

.lab__label {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
}

/* ==========================================================================
   Stack
   ========================================================================== */

.stack { padding-block: var(--space-9); }

.stack__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-7) var(--space-4);
}

.stack__category {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--night-text);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--editorial-red);
}

.stack__list li {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--night-muted);
  padding-block: var(--space-1);
}

/* ==========================================================================
   About
   ========================================================================== */

.about { padding-block: var(--space-9); }

.about__body {
  color: var(--night-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  max-width: var(--content-reading);
}
.about__body p + p { margin-top: var(--space-3); }

/* ==========================================================================
   Closing / contact
   ========================================================================== */

.closing { padding-block: var(--space-9); }

.closing__desc {
  color: var(--night-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  margin-bottom: var(--space-6);
}

.closing__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-block: var(--space-5);
  border-top: 1px solid var(--night-rule);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-footer__logo {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.site-footer__tagline,
.site-footer__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--night-muted);
  letter-spacing: var(--ls-mono);
}

/* ==========================================================================
   Editorial moments — occasional full-breath statement between sections.
   Not used by default; available for a case study that wants a pause
   between "read" beats. Keep copy short: this is composition, not prose.
   ========================================================================== */

.statement {
  padding-block: var(--space-9);
}

.statement__text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  max-width: 18ch;
}

/* Pull the most important word/line into Instrument Serif italic — pair
   with .statement__text or inline within a heading/lead. No quote marks,
   no card, no background box. */
.statement__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--editorial-red);
}

/* ==========================================================================
   Case study layout (analyses/*) — shared shell for every case study.
   Chart-specific rules live in css/charts.css.
   ========================================================================== */

.case-hero { padding-block: var(--space-7); }

.case-hero__back {
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  opacity: 0.8;
}

.case-hero__back:hover { opacity: 1; }

.case-hero__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 32ch;
  margin-bottom: var(--space-4);
}

.case-hero__dek {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--night-muted);
  max-width: var(--content-reading);
  margin-bottom: var(--space-3);
}

.case-hero__range {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--night-muted);
  font-variant-numeric: tabular-nums;
}

.case-body { padding-block: var(--space-7) var(--space-9); }

.case-intro {
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-7);
}

.case-intro__lede {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  max-width: 24ch;
  margin-bottom: var(--space-4);
}

.case-intro__body {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--ink-soft);
  max-width: var(--content-reading);
}

.case-intro__body p + p { margin-top: var(--space-3); }

.case-section__body ul,
.case-intro__body ul {
  margin-top: var(--space-3);
  padding-left: 1.25em;
}

.case-section__body li,
.case-intro__body li {
  margin-top: var(--space-1);
}

/* Sections are separated by generous whitespace, not a rule on every one —
   a line should mark a real structural change (see .case-intro above),
   not every numbered subsection. */
.case-section {
  padding-block: var(--space-8);
}

.case-section__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin-bottom: var(--space-4);
}

.case-section__body {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
.case-section__body p + p { margin-top: var(--space-3); }

/* Sub-heading inside a case section (second beat under one H2). */
.case-section__subheading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead, 1.42);
  letter-spacing: -0.018em;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* Reader quote: Instrument Serif italic, red rule on the left, no card. */
.case-quote {
  margin-block: var(--space-5);
  padding-left: var(--space-3);
  border-left: 2px solid var(--editorial-red);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--ink);
}

/* "Rola AI" methodology note inside the narrative: mono label, thin ink rule,
   no card or background. Signals process, not a finding. */
.ai-callout {
  margin-block: var(--space-4);
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 1px solid var(--ink);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.ai-callout__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

/* Working hypothesis (H1a, H2...). */
.hypothesis {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.hypothesis__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.09em;
  color: var(--ink);
  font-weight: 600;
  margin-right: var(--space-1);
}
.hypothesis { border-left: 2px solid var(--editorial-red); }

/* Group of reader quotes: stacked, one red rule for the whole group. */
.case-quotes {
  margin-block: var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--editorial-red);
  display: grid;
  gap: var(--space-2);
}
.case-quotes .case-quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.case-hero__byline {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--night-muted);
}

.model-list__quote {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1875rem;
  color: var(--ink);
}
.model-list__note { margin-top: var(--space-1); color: var(--muted); font-size: var(--fs-small); }
.model-list__item p + p { margin-top: var(--space-1); }

/* Numbered editorial list (e.g. reception models). */
.model-list {
  list-style: none;
  counter-reset: model;
  margin-top: var(--space-5);
  padding: 0;
}
.model-list__item {
  counter-increment: model;
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.model-list__title {
  font-family: var(--font-sans);
  font-weight: 550;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.model-list__title::before {
  content: counter(model, decimal-leading-zero) " ";
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.09em;
  color: var(--muted);
  vertical-align: 0.25em;
  margin-right: var(--space-1);
}

.case-section__note {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--space-4);
}

.repro-list {
  display: grid;
  gap: 0;
}

.repro-list__item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid var(--rule);
}

.repro-list__item dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
}

.repro-list__item dd {
  font-family: var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.repro-list__pending {
  color: var(--muted);
  font-style: italic;
}

.case-next { padding-block: var(--space-9); }

.case-next__cta { margin-top: var(--space-5); }

@media (max-width: 767px) {
  .repro-list__item { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .stack__grid { grid-template-columns: repeat(3, 1fr); }
  .ai-system__row { grid-template-columns: 1fr; gap: var(--space-6); }
  .ai-system__row .ai-schema { order: -1; }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }

  .site-header__status { display: none; }

  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
  }

  .nav-toggle-bar {
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }

  .nav-toggle-input:checked ~ .nav-toggle-label .nav-toggle-bar:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }
  .nav-toggle-input:checked ~ .nav-toggle-label .nav-toggle-bar:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--local-bg, var(--night));
    padding: var(--space-8) var(--container-pad);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  }

  .nav-toggle-input:checked ~ .site-nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-4);
    font-size: 1.5rem;
  }

  .hero { min-height: auto; padding-block: var(--space-7) var(--space-8); }
  .hero__headline { max-width: none; }

  .project {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .process__grid { grid-template-columns: 1fr; }
  .stack__grid { grid-template-columns: repeat(2, 1fr); }

  .ai-schema { padding: var(--space-4); width: 100%; }
  .ai-schema__chain { flex-direction: column; }
  .ai-schema__chain-arrow { transform: rotate(90deg); }

  .pipeline__list { flex-direction: column; align-items: flex-start; }
  .pipeline__arrow { transform: rotate(90deg); margin-left: var(--space-3); }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 479px) {
  .stack__grid { grid-template-columns: 1fr; }
}

.case-section__body + .case-section__body { margin-top: var(--space-3); }

/* Minor sub-heading (third level inside a case section). */
.case-section__subheading--minor {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 550;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

/* Pull quote / key takeaway: editorial moment inside the reading column.
   No card, no quote marks; the accent line is large display type, so the
   editorial red passes the 3:1 large-text contrast threshold. */
.pullquote {
  max-width: var(--content-reading);
  margin-block: var(--space-6);
  padding-block: var(--space-4);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.pullquote__lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--ink);
}
.pullquote__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--editorial-red);
}
.pullquote__body {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  max-width: var(--content-narrow);
}

/* Nav logo: two vector versions (assets/images/devexa-logo-{dark,light}-nav.svg),
   swapped with the header theme that main.js sets from the section below. */
.site-header__logo { display: inline-flex; align-items: center; line-height: 0; }
.site-header__logo-img {
  display: block;
  height: 36px;
  width: auto;
}
.site-header__logo-img--light { display: none; } /* also has the [hidden] attribute as a no-CSS fallback */
.site-header[data-theme="light"] .site-header__logo-img--dark { display: none; }
.site-header[data-theme="light"] .site-header__logo-img--light { display: block; }
@media (max-width: 767px) {
  .site-header__logo-img { height: 30px; }
}

/* WHAT IS DEVEXA: short list of "connections". */
.manifest__examples {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  border-top: 1px solid var(--night-rule);
}
.manifest__examples li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--night-rule);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--night-text);
}

/* In WHAT IS DEVEXA the intro sentence leads straight into the list; the
   closing sentence carries the section's point, so it reads in full-contrast text. */
.manifest__body:has(+ .manifest__examples) { margin-bottom: 0; }
.manifest__examples + .manifest__body { margin-bottom: 0; color: var(--night-text); }

/* Screen-reader-only text (headings that the design shows only as an eyebrow). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   AREAS OF WORK: the central section of the homepage. Editorial 2×2 grid,
   separated by rules, not cards (brief: no cards/shadows).
   ========================================================================== */
.areas { padding-block: var(--space-8); }

.areas__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  margin-top: var(--space-5);
  border-top: 1px solid var(--night-rule);
}

.area {
  padding-block: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--night-rule);
}

.area__index {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--night-muted);
  margin-bottom: var(--space-3);
}
.area__num,
.area__verb { color: var(--night-text); }

.area__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--night-text);
  margin-bottom: var(--space-3);
}

.area__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--night-muted);
  max-width: 52ch;
}


@media (max-width: 767px) {
  .areas__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BETWEEN TOOLS: systems-thinking statement + SOURCE → … → ACTION flow.
   Reuses .manifest__heading / __examples / __body; the flow is a typed
   sequence with details under each step (arrows are CSS, not content).
   ========================================================================== */
.between { padding-block: var(--space-8); }
.between .manifest__examples + .manifest__body { margin-bottom: 0; }

.flow { margin: var(--space-7) 0 0; }

.flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--flow-gap);
  --flow-gap: var(--space-5);
}

.flow__step {
  position: relative;
  padding-top: var(--space-3);
  border-top: 1px solid var(--night-rule);
}
.flow__step--accent { border-top-color: var(--editorial-red); }

.flow__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--night-text);
  margin-bottom: var(--space-2);
}

/* arrow between steps, sitting in the gap at label height */
.flow__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: calc(var(--space-3) + 0.1em);
  left: calc(100% + var(--flow-gap) / 2);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.875rem);
  line-height: 1.1;
  color: var(--night-muted);
}

.flow__detail {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--night-muted);
}

@media (max-width: 900px) {
  .flow__list { grid-template-columns: 1fr; gap: 0; }
  .flow__step { padding-block: var(--space-3); }
  .flow__step:not(:last-child)::after {
    content: "↓";
    top: auto;
    bottom: -0.65em;
    right: auto;
    left: 0;
    transform: none;
    background: var(--night);
    padding-right: 0.3em;
    z-index: 1;
  }
}

/* About: text + portrait. The portrait's near-black background is blended
   into the section with `lighten`, so there is no visible photo rectangle. */
.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: var(--space-7);
  align-items: center;
}
.about__photo { margin: 0; }
.about__photo img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: lighten;
  /* fade the photo's own (slightly lighter) vignette into the section */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 8%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 8%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 767px) {
  .about__layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .about__photo { max-width: 360px; }
}