/* ============================================================
   Cazzaran v2 — Editorial Tokens
   Source of truth — do not hard-code colour, type, or spacing.
   ============================================================ */

/* Websafe / native font stacks — no web-font payload, no FOIT/FOUT, zero
   load latency. Display stack leads with Avenir Next + Helvetica Neue
   (the closest system-resident match to Raleway's geometric-humanist
   character) and degrades through Segoe UI to a generic sans. Mono stack
   uses each OS's bundled coding font. */

:root {
  /* ---------- Surface ---------- */
  --charcoal:        #141414;
  --ink:             #0A0A0A;
  --ink-soft:        #2A2A2A;
  --paper:           #FAFAF7;
  --paper-2:         #F2F2EE;
  --paper-rule:      #E5E5E5;
  --white:           #FFF;
  --muted:           #6B6B6B;
  --muted-dark:      #888;
  --muted-darker:    #555;

  /* ---------- Brand accent ---------- */
  --blue:            #1414E0;     /* deep royal blue — softened from #0000FF to kill vibration */
  --blue-text:       #1414CC;
  --blue-on-dark:    #5A7BFF;

  /* ---------- Type families ---------- */
  --font-display:    "Avenir Next", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, blinkmacsystemfont, arial, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", menlo, consolas, "Liberation Mono", monospace;

  /* ---------- Type scale ---------- */
  --fs-xs:           0.75rem;
  --fs-sm:           0.875rem;
  --fs-base:         1rem;
  --fs-md:           1.125rem;
  --fs-lg:           1.375rem;
  --fs-xl:           1.75rem;
  --fs-2xl:          2.25rem;
  --fs-3xl:          3rem;
  --fs-4xl:          clamp(2.75rem, 6vw, 4.5rem);
  --fs-5xl:          clamp(3.5rem, 9vw, 7rem);
  --fs-6xl:          clamp(4rem, 12vw, 9.5rem);
  --fs-7xl:          clamp(5rem, 18vw, 16rem);

  /* ---------- Weights ---------- */
  --fw-thin:         200;
  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-black:        800;

  /* ---------- Tracking ---------- */
  --tr-display:      -0.04em;
  --tr-tight:        -0.03em;
  --tr-snug:         -0.02em;
  --tr-normal:       0;
  --tr-mono:         0.05em;
  --tr-eyebrow:      0.18em;
  --tr-eyebrow-wide: 0.20em;

  /* ---------- Line heights ---------- */
  --lh-display:      0.9;
  --lh-tight:        1.0;
  --lh-snug:         1.2;
  --lh-normal:       1.45;
  --lh-relaxed:      1.6;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* ---------- Radii ---------- */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hair:     1px solid var(--paper-rule);
  --border-strong:   2px solid var(--ink);

  /* ---------- Slash motif ----------
     Skew angle matches the brand logo SVG (atan(180/250) ≈ 36°). */
  --slash-skew:      -36deg;

  /* ---------- Motion ---------- */
  --ease-standard:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:        120ms;
  --dur-base:        200ms;
  --dur-slow:        400ms;
  --dur-reveal:      900ms;

  /* ---------- Layout ---------- */
  --gutter:          clamp(20px, 4vw, 64px);
  --container-max:   1280px;
  --container-wide:  1440px;
  --measure:         62ch;

  /* ---------- Boilerplate compat aliases (legacy blocks read these) ---------- */
  --background-color: var(--paper);
  --light-color:      var(--paper-2);
  --dark-color:       var(--ink-soft);
  --text-color:       var(--ink);
  --link-color:       var(--blue-text);
  --link-hover-color: var(--blue);
  --body-font-family: var(--font-display);
  --heading-font-family: var(--font-display);
  --body-font-size-m: var(--fs-base);
  --body-font-size-s: var(--fs-sm);
  --body-font-size-xs: var(--fs-xs);
  --heading-font-size-xxl: var(--fs-5xl);
  --heading-font-size-xl:  var(--fs-4xl);
  --heading-font-size-l:   var(--fs-2xl);
  --heading-font-size-m:   var(--fs-xl);
  --heading-font-size-s:   var(--fs-lg);
  --heading-font-size-xs:  var(--fs-md);
  --nav-height: 72px;
}

/* ============================================================
   Cazzaran v2 — Global styles
   ============================================================ */

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  min-height: 100%;
  scroll-padding-top: var(--nav-height);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

body { display: none; }

body.appear {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.appear > main { flex: 1 0 auto; }
body.appear > footer { flex-shrink: 0; }

/* ---------- Scroll-snap ----------
   Gentle section snapping. `proximity` lets the user free-scroll; the
   viewport only nudges to a section boundary when scroll motion slows.
   Off for reduced-motion users and inside long-form article layouts.
   Smooth scroll for hash-link clicks is also gated on no-preference. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; scroll-behavior: smooth; }
  main > .section { scroll-snap-align: start; }
  main > .section.cazz-article-section { scroll-snap-align: none; }
}

img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--blue); color: #fff; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--blue-text); }

p, dl, ol, ul, pre, blockquote { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  scroll-margin: 40px;
}

input, textarea, select, button { font: inherit; }

/* ---------- Header / Footer block visibility (boilerplate parity) ---------- */
header { min-height: var(--nav-height); }

header .header,
footer .footer { visibility: hidden; }

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] { visibility: visible; }

/* ---------- Sections ---------- */
main > .section {
  padding: var(--space-24) 0;
}
main > .section + .section { border-top: 1px solid var(--paper-rule); }
main > .section.dense { padding: var(--space-16) 0; }
main > .section.tight { padding: var(--space-12) 0; }

@media (width <= 720px) {
  main > .section { padding: var(--space-16) 0; }
  main > .section.dense { padding: var(--space-12) 0; }
  main > .section.tight { padding: var(--space-8) 0; }
}

main > .section > div {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Flush sections let blocks extend full-bleed (block decorates its own gutter). */
main > .section.flush > div {
  max-width: none;
  padding: 0;
}

/* surface modifiers via section metadata Style */
main > .section.charcoal,
main > .section.cazz-surface-charcoal,
.cazz-surface-charcoal {
  background-color: var(--charcoal);
  color: var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

main > .section.charcoal,
main > .section.cazz-surface-charcoal { border-top: 0; }

/* ---------- Aurora layer on charcoal surfaces ----------
   Two slow-orbiting blurred radial blobs make the bg breathe.
   Pseudo-elements ride at z-index 0/1; block content stays above via its
   own positioned children. Reduced-motion users get a static version. */
.cazz-surface-charcoal::before,
.cazz-surface-charcoal::after {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  will-change: transform;
}

.cazz-surface-charcoal::before {
  background:
    radial-gradient(circle at 28% 32%, rgb(90 123 255 / 28%), transparent 40%),
    radial-gradient(circle at 72% 68%, rgb(0 0 255 / 22%), transparent 45%);
  animation: cazz-aurora-1 18s ease-in-out infinite;
}

.cazz-surface-charcoal::after {
  background:
    radial-gradient(circle at 52% 18%, rgb(255 255 255 / 10%), transparent 38%),
    radial-gradient(circle at 18% 82%, rgb(90 123 255 / 18%), transparent 42%);
  animation: cazz-aurora-2 24s ease-in-out infinite;
}

@keyframes cazz-aurora-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8%, -6%, 0) scale(1.18); }
}

@keyframes cazz-aurora-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
  50% { transform: translate3d(-7%, 8%, 0) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .cazz-surface-charcoal::before,
  .cazz-surface-charcoal::after { animation: none; }
}

/* Kinetic hero entrance + shimmer on the emphasis text */
@keyframes cazz-hero-rise {
  from { opacity: 0; transform: translateY(48px); filter: blur(12px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes cazz-hero-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

body.appear .cazz-hero .cazz-display {
  animation: cazz-hero-rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body.appear .cazz-hero .cazz-display em,
body.appear .cazz-hero .cazz-display strong {
  background: linear-gradient(110deg, #5A7BFF 0%, #9EB4FF 30%, #FFFFFF 50%, #9EB4FF 70%, #5A7BFF 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cazz-hero-shimmer 7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.appear .cazz-hero .cazz-display {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  body.appear .cazz-hero .cazz-display em,
  body.appear .cazz-hero .cazz-display strong {
    animation: none;
    background: none;
    color: var(--blue-on-dark);
    -webkit-text-fill-color: var(--blue-on-dark);
  }
}

main > .section.paper-2,
main > .section.cazz-surface-paper-2 { background: var(--paper-2); color: var(--ink); }

main > .section.ink,
main > .section.cazz-surface-ink { background: var(--ink); color: var(--white); border-top: 0; }
main > .section.flush { padding: 0; }

/* ---------- Surface utilities ---------- */
.cazz-surface-paper { background: var(--paper); color: var(--ink); }
.cazz-surface-paper-2 { background: var(--paper-2); color: var(--ink); }
.cazz-surface-ink { background: var(--ink); color: var(--white); }

/* ---------- Layout primitives ---------- */
.cazz-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cazz-container.wide { max-width: var(--container-wide); }

/* ---------- Typography classes ---------- */
.cazz-display {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--fs-6xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

.cazz-display strong, .cazz-display em {
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--blue-text);
}

.cazz-surface-charcoal .cazz-display strong,
.cazz-surface-charcoal .cazz-display em,
.cazz-surface-ink .cazz-display strong,
.cazz-surface-ink .cazz-display em,
main > .section.charcoal .cazz-display strong,
main > .section.charcoal .cazz-display em,
main > .section.ink .cazz-display strong,
main > .section.ink .cazz-display em { color: var(--blue-on-dark); }

.cazz-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--fs-5xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

.cazz-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

.cazz-h2 strong, .cazz-h2 em {
  font-weight: var(--fw-bold);
  color: var(--blue-text);
  font-style: normal;
}

main > .section.charcoal .cazz-h2 strong,
main > .section.charcoal .cazz-h2 em,
main > .section.ink .cazz-h2 strong,
main > .section.ink .cazz-h2 em,
.cazz-surface-charcoal .cazz-h2 strong,
.cazz-surface-charcoal .cazz-h2 em { color: var(--blue-on-dark); }

.cazz-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

.cazz-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

.cazz-lede {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--ink-soft);
  max-width: var(--measure);
  letter-spacing: 0;
}

main > .section.charcoal .cazz-lede,
main > .section.ink .cazz-lede,
.cazz-surface-charcoal .cazz-lede { color: #BBB; }

.cazz-body {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.cazz-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-eyebrow);
  color: var(--muted);
}

/* ---------- Eyebrow ---------- */
.cazz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
.cazz-eyebrow .num { color: var(--blue-text); }

main > .section.charcoal .cazz-eyebrow,
main > .section.ink .cazz-eyebrow,
.cazz-surface-charcoal .cazz-eyebrow,
.cazz-surface-ink .cazz-eyebrow { color: #B5B5B5; }

main > .section.charcoal .cazz-eyebrow .num,
main > .section.ink .cazz-eyebrow .num,
.cazz-surface-charcoal .cazz-eyebrow .num,
.cazz-surface-ink .cazz-eyebrow .num { color: var(--blue-on-dark); }

.cazz-eyebrow.with-rule::before {
  content: "";
  display: inline-block;
  width: clamp(24px, 4vw, 56px);
  height: 1px;
  background: var(--blue);
  margin-right: var(--space-2);
}

/* ---------- Slash motif ---------- */
.cazz-slash {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  background: var(--blue);
  transform: skewX(var(--slash-skew));
  vertical-align: middle;
}
.cazz-slash.thin { width: 0.35em; }
.cazz-slash.thick { width: 0.8em; }

.cazz-slash-large {
  background: var(--blue);
  transform: skewX(var(--slash-skew));
  display: block;
}

/* ---------- Buttons ---------- */
.cazz-btn,
main a.button:any-link,
main button.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-standard);
  background: transparent;
  color: var(--ink);
  text-transform: none;
  white-space: nowrap;
  line-height: 1.25;
}

.cazz-btn--primary,
main a.button.primary,
main button.button.primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.cazz-btn--primary:hover,
main a.button.primary:hover,
main button.button.primary:hover {
  background: #0000D6;
  border-color: #0000D6;
  color: var(--white);
}

.cazz-btn--ghost,
main a.button.secondary,
main button.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.cazz-btn--ghost:hover,
main a.button.secondary:hover,
main button.button.secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

main > .section.charcoal .cazz-btn--ghost,
main > .section.ink .cazz-btn--ghost,
main > .section.charcoal a.button.secondary,
main > .section.charcoal button.button.secondary,
.cazz-surface-charcoal .cazz-btn--ghost,
.cazz-surface-charcoal a.button.secondary,
.cazz-surface-charcoal button.button.secondary,
.cazz-surface-ink a.button.secondary,
.cazz-surface-ink button.button.secondary,
.cazz-surface-ink .cazz-btn--ghost {
  color: var(--white);
  border-color: var(--white);
  background: transparent;
}

main > .section.charcoal .cazz-btn--ghost:hover,
main > .section.ink .cazz-btn--ghost:hover,
main > .section.charcoal a.button.secondary:hover,
main > .section.charcoal button.button.secondary:hover,
.cazz-surface-charcoal .cazz-btn--ghost:hover,
.cazz-surface-charcoal a.button.secondary:hover,
.cazz-surface-charcoal button.button.secondary:hover,
.cazz-surface-ink a.button.secondary:hover,
.cazz-surface-ink button.button.secondary:hover,
.cazz-surface-ink .cazz-btn--ghost:hover {
  background: var(--white);
  color: var(--ink);
}

.cazz-btn:focus-visible,
main a.button:focus-visible,
main button.button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
p.button-wrapper { margin: var(--space-3) 0; }

/* button containers (multiple buttons in a row) */
.button-container { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-10); }
p.button-container { margin-top: var(--space-10); }

/* ---------- Form elements ---------- */
.cazz-input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  background: var(--white);
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius-2);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.cazz-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(0 0 255 / 18%);
}

.cazz-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

/* ---------- Hairlines ---------- */
.cazz-rule { border-top: var(--border-hair); }
.cazz-rule-strong { border-top: var(--border-strong); }

/* ---------- Reveal animation ---------- */
@keyframes cazz-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cazz-reveal { animation: cazz-reveal var(--dur-reveal) var(--ease-emphasis) backwards; }
.cazz-reveal-1 { animation-delay: 0.05s; }
.cazz-reveal-2 { animation-delay: 0.20s; }
.cazz-reveal-3 { animation-delay: 0.35s; }
.cazz-reveal-4 { animation-delay: 0.50s; }
.cazz-reveal-5 { animation-delay: 0.65s; }

@media (prefers-reduced-motion: reduce) {
  .cazz-reveal { animation: none; }
  * { transition: none !important; animation: none !important; }
}

/* Query-param override (?motion=reduce) mirrors the @media reduce block
   for testing. The inline script in head.html toggles the html class
   and stubs matchMedia so JS-driven motion also halts. */
html.cazz-reduce-motion { scroll-snap-type: none; scroll-behavior: auto; }
html.cazz-reduce-motion main > .section { scroll-snap-align: none; }

html.cazz-reduce-motion .cazz-surface-charcoal::before,
html.cazz-reduce-motion .cazz-surface-charcoal::after { animation: none; }

html.cazz-reduce-motion body.appear .cazz-hero .cazz-display {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

html.cazz-reduce-motion body.appear .cazz-hero .cazz-display em,
html.cazz-reduce-motion body.appear .cazz-hero .cazz-display strong {
  animation: none;
  background: none;
  color: var(--blue-on-dark);
  -webkit-text-fill-color: var(--blue-on-dark);
}
html.cazz-reduce-motion .cazz-thoughts-grid__card { opacity: 1; transform: none; transition: none; }
html.cazz-reduce-motion .cazz-hero__flow { display: none; }
html.cazz-reduce-motion .cazz-reveal { animation: none; }
html.cazz-reduce-motion * { transition: none !important; animation: none !important; }

/* ---------- Icons ---------- */
.icon { display: inline-block; width: 24px; height: 24px; }
.icon img, .icon svg { width: 100%; height: 100%; }

/* ---------- Emphasis reveal ----------
   Bold + italic spans inside punchy headings start blurred and snap into
   focus once the heading hits the middle of the viewport. */
.cazz-reveal-emphasis strong,
.cazz-reveal-emphasis em {
  display: inline-block;
  filter: blur(3px);
  opacity: 0.75;
  transition:
    filter 600ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter;
}

.cazz-reveal-emphasis.is-resolved strong,
.cazz-reveal-emphasis.is-resolved em {
  filter: blur(0);
  opacity: 1;
}

/* ---------- Prose (article default content) ----------
   Looser rhythm + readable measure for body copy outside of blocks. */
main .default-content-wrapper {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Editorial article: section drops its container constraints; .cazz-article is the grid host. */
main > .section.cazz-article-section {
  padding-top: var(--space-12);
}

main > .section.cazz-article-section > div.cazz-article {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main > .section.cazz-article-section > .cazz-article .default-content-wrapper {
  max-width: none;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
main .default-content-wrapper > * + * { margin-top: var(--space-4); }

main .default-content-wrapper > .cazz-eyebrow + h1,
main .default-content-wrapper > .cazz-eyebrow + h2,
main .default-content-wrapper > .cazz-eyebrow + h3 { margin-top: var(--space-4); }

main .default-content-wrapper > h1,
main .default-content-wrapper > h2,
main .default-content-wrapper > h3 { margin-bottom: 0; }

@media (width <= 720px) {
  main .default-content-wrapper > * + * { margin-top: var(--space-3); }

  main .default-content-wrapper > .cazz-eyebrow + h1,
  main .default-content-wrapper > .cazz-eyebrow + h2,
  main .default-content-wrapper > .cazz-eyebrow + h3 { margin-top: var(--space-3); }
}

main .default-content-wrapper > h1,
main .default-content-wrapper > h2,
main .default-content-wrapper > h3,
main .default-content-wrapper > h4 {
  color: var(--ink);
  letter-spacing: var(--tr-snug);
}
main .default-content-wrapper > h1 { line-height: 1.05; margin-top: var(--space-12); margin-bottom: var(--space-2); }
main .default-content-wrapper > h2 { line-height: 1.1; margin-top: var(--space-10); margin-bottom: var(--space-2); font-size: clamp(2rem, 4vw, 2.75rem); }
main .default-content-wrapper > h3 { line-height: 1.2; margin-top: var(--space-8); margin-bottom: var(--space-1); font-weight: var(--fw-light); font-size: var(--fs-xl); }
main .default-content-wrapper > h4 { line-height: 1.25; margin-top: var(--space-6); font-weight: var(--fw-medium); font-size: var(--fs-md); }

main .default-content-wrapper > h2:first-child,
main .default-content-wrapper > h1:first-child { margin-top: 0; }

main .default-content-wrapper p { font-size: inherit; color: var(--ink-soft); }
main .default-content-wrapper p strong { color: var(--ink); font-weight: var(--fw-semibold); }

main .default-content-wrapper ul,
main .default-content-wrapper ol {
  padding-left: 1.5em;
  margin-top: var(--space-4);
}

main .default-content-wrapper li {
  margin-top: var(--space-2);
  padding-left: 0.25em;
}
main .default-content-wrapper li::marker { color: var(--blue-text); }
main .default-content-wrapper li > strong { color: var(--ink); font-weight: var(--fw-semibold); }

main .default-content-wrapper a {
  color: var(--blue-text);
  border-bottom: 1px solid currentcolor;
}
main .default-content-wrapper a:hover { color: var(--blue); }

main .default-content-wrapper code,
main .default-content-wrapper pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  border-radius: var(--radius-1);
}
main .default-content-wrapper code { padding: 1px 6px; }

main .default-content-wrapper pre {
  padding: var(--space-4);
  overflow-x: auto;
  margin-top: var(--space-4);
}
main .default-content-wrapper pre code { background: transparent; padding: 0; }

main .default-content-wrapper blockquote {
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--blue);
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- Editorial article (Approach B) ---------- */
.cazz-article {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

.cazz-article__rail {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
  align-self: start;
  font-family: var(--font-mono);
}

.cazz-article__eyebrow { margin-bottom: var(--space-6); }

.cazz-article__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--paper-rule);
}

.cazz-article__toc-item { display: block; }

.cazz-article__toc a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid var(--paper-rule);
  transition: color var(--dur-fast) var(--ease-standard);
  line-height: 1.4;
}

.cazz-article__toc a:hover { color: var(--ink); }

.cazz-article__toc a.active {
  color: var(--ink);
}

.cazz-article__toc a.active .cazz-article__toc-num {
  color: var(--blue-text);
}

.cazz-article__toc-num {
  color: var(--blue-text);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.cazz-article__toc-text {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
}

.cazz-article__body {
  max-width: 72ch;
  font-size: 1.125rem;       /* 18px reading size */
  line-height: 1.7;
  color: var(--ink-soft);
}

.cazz-article__body > * + * { margin-top: var(--space-4); }

.cazz-article__body > h1,
.cazz-article__body > h2,
.cazz-article__body > h3,
.cazz-article__body > h4 { color: var(--ink); }

.cazz-article__body > h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--fw-thin);
  letter-spacing: var(--tr-tight);
  line-height: 1.05;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.cazz-article__body > h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: var(--fw-thin);
  letter-spacing: var(--tr-snug);
  line-height: 1.15;
  margin-top: var(--space-12);
  margin-bottom: var(--space-2);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.cazz-article__body > h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  line-height: 1.3;
  margin-top: var(--space-8);
  margin-bottom: var(--space-1);
}

.cazz-article__body > p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: var(--fw-light);
}

.cazz-article__body p strong { color: var(--ink); font-weight: var(--fw-semibold); }

.cazz-article__body ul,
.cazz-article__body ol {
  padding-left: 1.4em;
  margin-top: var(--space-4);
}

.cazz-article__body li {
  margin-top: var(--space-3);
  padding-left: 0.25em;
}
.cazz-article__body li::marker { color: var(--blue-text); }
.cazz-article__body li > strong { color: var(--ink); font-weight: var(--fw-semibold); }

.cazz-article__body a {
  color: var(--blue-text);
  border-bottom: 1px solid currentcolor;
  text-decoration: none;
}
.cazz-article__body a:hover { color: var(--blue); }

.cazz-article__h2-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.45em;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--blue-text);
  vertical-align: middle;
  margin-right: 0.6em;
  transform: translateY(-0.25em);
}

@media (width <= 899px) {
  .cazz-article {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .cazz-article__rail {
    position: static;
    border-bottom: 1px solid var(--paper-rule);
    padding-bottom: var(--space-4);
  }
  .cazz-article__toc-list { display: none; }
}