/* ============================================================
   SANTOS-MORALES® DESIGN SYSTEM
   styles.css — Shared tokens, reset, and component library
   ============================================================ */


/* ─── 1. DESIGN TOKENS ────────────────────────────────────── */
:root {

  /* Core palette */
  --color-brand:                  #F15A30;
  --color-brand-hover:            #D94B26;
  --color-brand-disabled:         rgba(241, 90, 48, 0.3);
  --color-on-brand:               #EDEBD8;
  --color-bg-outer:               #F15A30;

  /* Surfaces */
  --color-surface:                #EDEBD8;
  --color-surface-elevated:       #E5E3D0;
  --color-surface-dark:           #1A1714;
  --color-surface-elevated-dark:  #242220;

  /* Text */
  --color-text-primary:           #F15A30;
  --color-text-on-dark:           #EDEBD8;
  --color-text-muted:             #A29F8B;
  --color-text-muted-dark:        #6B6860;

  /* Borders */
  --color-border:                 rgba(241, 90, 48, 0.2);
  --color-border-strong:          rgba(241, 90, 48, 0.3);
  --color-border-dark:            rgba(237, 235, 216, 0.1);
  --color-border-dark-strong:     rgba(237, 235, 216, 0.2);
  --color-border-dark-subtle:     rgba(237, 235, 216, 0.06);

  /* Font families */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Display scale */
  --type-display-hero:    clamp(60px, 10vw, 140px);
  --type-display-xl:      clamp(48px, 8vw, 120px);
  --type-display-lg:      clamp(44px, 7vw, 96px);
  --type-display-md:      clamp(40px, 6vw, 80px);
  --type-display-sm:      64px;
  --type-display-stat:    clamp(36px, 5vw, 72px);
  --type-display-stat-sm: 48px;

  /* Heading scale */
  --type-heading-xl:  48px;
  --type-heading-lg:  40px;
  --type-heading-md:  32px;
  --type-heading-sm:  24px;
  --type-heading-xs:  18px;

  /* UI / body scale */
  --type-body-lg:    18px;
  --type-body-md:    16px;
  --type-body-sm:    14px;
  --type-nav:        15px;
  --type-button:     14px;
  --type-button-lg:  18px;
  --type-meta:       13px;
  --type-label-lg:   12px;
  --type-label-md:   11px;
  --type-label-sm:   10px;

  /* Shape */
  --radius-lg:        24px;
  --radius-sm:        16px;
  --radius-button:    8px;
  --radius-button-lg: 12px;
  --radius-pill:      100px;
  --radius-avatar:    50%;
  --border-width:     1.5px;

  /* 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-15:  60px;
  --space-20:  80px;
  --space-25:  100px;

  /* Motion */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:      0.2s;
  --duration-medium:    0.3s;
  --duration-slow:      0.4s;
  --duration-entrance:  0.9s;
  --duration-progress:  2.5s;

  /* Noise texture */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}


/* ─── 2. RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-brand);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
sup { font-size: 0.55em; vertical-align: super; }

::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(26, 23, 20, 0.35); border-radius: 3px; }


/* ─── 3. CANVAS SYSTEM ────────────────────────────────────── */
.page-wrap {
  padding: 2vw;
  padding-top: calc(3vw + 68px);
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.canvas {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
}
.canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background-image: var(--noise);
  background-size: 200px 200px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}
.canvas--dark {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
}
.canvas--dark::before  { mix-blend-mode: screen; }
.canvas--light {
  background: var(--color-surface);
  color: var(--color-surface-dark);
}
.canvas--light::before { mix-blend-mode: multiply; }

.canvas > * { position: relative; z-index: 1; }


/* ─── 4. NAVIGATION ──────────────────────────────────────── */
.nav {
  position: fixed;
  top: 1vw;
  left: 2vw;
  right: 2vw;
  z-index: 200;
  border-radius: var(--radius-sm);
  background: var(--color-surface-dark);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: background var(--duration-slow) var(--ease-standard),
              box-shadow var(--duration-slow) var(--ease-standard),
              left 0.5s var(--ease-out-quint),
              right 0.5s var(--ease-out-quint);
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 200px 200px;
  opacity: 0.03;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.nav.is-scrolled {
  left: calc(2vw + 10px);
  right: calc(2vw + 10px);
  background: rgba(26, 23, 20, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 40px;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-on-dark);
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.logo:hover { opacity: 0.7; }
.logo-hyphen { color: var(--color-brand); }
.logo-short  { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-link {
  font-family: var(--font-ui);
  font-size: var(--type-nav);
  font-weight: 500;
  color: rgba(237, 235, 216, 0.75);
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-link:hover { color: var(--color-text-on-dark); }
.nav-link--active {
  color: var(--color-text-on-dark);
  background: rgba(237, 235, 216, 0.1);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin: -6px -14px;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  grid-column: 3;
}
.nav-cta-icon { display: none; }

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 18px;
  color: var(--color-text-on-dark);
  line-height: 1;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.nav-hamburger:hover { opacity: 0.65; }

.nav-mobile-menu {
  display: none;
  flex-direction: column;
  padding: 4px 24px 20px;
  border-top: 1px solid rgba(237, 235, 216, 0.08);
}
.nav.nav-open .nav-mobile-menu { display: flex; }

.nav-mobile-link {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 0;
  color: rgba(237, 235, 216, 0.7);
  border-bottom: 1px solid rgba(237, 235, 216, 0.07);
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-mobile-link:last-child { border-bottom: none; padding-bottom: 0; }
.nav-mobile-link:hover      { color: var(--color-text-on-dark); }
.nav-mobile-link--active    { color: var(--color-text-on-dark); }
.nav-mobile-link--cta       { color: var(--color-brand); font-weight: 600; }


/* ─── 5. BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: 12px 24px;
  border-radius: var(--radius-button);
  font-size: var(--type-button);
}
.btn--primary:hover { background: var(--color-brand-hover); }

.btn--primary-lg {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: 20px 48px;
  border-radius: var(--radius-button-lg);
  font-size: var(--type-button-lg);
}
.btn--primary-lg:hover { background: var(--color-brand-hover); transform: scale(1.02); }

.btn--ghost {
  background: transparent;
  color: rgba(237, 235, 216, 0.7);
  padding: 12px 24px;
  border-radius: var(--radius-button);
  border: var(--border-width) solid rgba(237, 235, 216, 0.3);
  font-size: var(--type-button);
}
.btn--ghost:hover { color: var(--color-text-on-dark); border-color: rgba(237, 235, 216, 0.7); }

.btn--ghost-dark {
  background: transparent;
  color: var(--color-surface-dark);
  padding: 12px 24px;
  border-radius: var(--radius-button);
  border: var(--border-width) solid rgba(26, 23, 20, 0.25);
  font-size: var(--type-button);
}
.btn--ghost-dark:hover { border-color: rgba(26, 23, 20, 0.6); }

.btn--cream {
  background: var(--color-surface);
  color: var(--color-surface-dark);
  padding: 20px 48px;
  border-radius: var(--radius-button-lg);
  font-size: var(--type-button-lg);
}
.btn--cream:hover { background: var(--color-surface-elevated); transform: scale(1.02); }

.btn-pair {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.arrow-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: var(--border-width) solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--duration-medium) var(--ease-out-expo),
              background var(--duration-medium) var(--ease-out-expo),
              color var(--duration-medium) var(--ease-out-expo);
  flex-shrink: 0;
}
.arrow-btn:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-dark);
  transform: rotate(-45deg);
}
.arrow-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.arrow-btn--sm { width: 36px; height: 36px; font-size: 14px; }
.arrow-btn--xs { width: 28px; height: 28px; font-size: 12px; }


/* ─── 6. TYPOGRAPHY BASE ──────────────────────────────────── */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--type-label-md);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.text-link {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--duration-fast) var(--ease-out-expo),
              opacity var(--duration-fast) var(--ease-standard);
}
.text-link:hover      { gap: 14px; }
.text-link--dark      { color: var(--color-surface-dark); }
.text-link--cream     { color: var(--color-text-on-dark); }


/* ─── 7. SECTION LABELS ───────────────────────────────────── */
.label {
  font-family: var(--font-ui);
  font-size: var(--type-label-md);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
}
.label--obsidian   { color: var(--color-brand); }
.label--cream      { color: var(--color-brand); }
.label--vermillion { color: var(--color-brand); }


/* ─── 8. GRIDS ────────────────────────────────────────────── */
.vgrid {
  display: grid;
  gap: var(--border-width);
  background: rgba(241, 90, 48, 0.3);
  border: var(--border-width) solid rgba(241, 90, 48, 0.3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.vgrid--2 { grid-template-columns: repeat(2, 1fr); }
.vgrid--3 { grid-template-columns: repeat(3, 1fr); }
.vgrid--4 { grid-template-columns: repeat(4, 1fr); }
.vgrid--dark > .cell { background: var(--color-surface-elevated-dark); }
.vgrid > .cell {
  background: var(--color-surface);
  padding: 40px;
}


/* ─── 9. SM-02 COMPONENT PATTERNS ────────────────────────── */

/* Pillar layout */
.pillar {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  align-items: start;
  padding: 56px 0;
  border-top: var(--border-width) solid rgba(26, 23, 20, 0.1);
}
.pillar:last-child { border-bottom: var(--border-width) solid rgba(26, 23, 20, 0.1); }

.pillar-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  color: rgba(26, 23, 20, 0.08);
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.04em;
}
.pillar-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-surface-dark);
  margin-bottom: 12px;
}
.pillar-body {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 23, 20, 0.65);
}
.pillar-proof {
  background: rgba(241, 90, 48, 0.05);
  border: var(--border-width) solid rgba(241, 90, 48, 0.14);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 28px;
  max-width: 760px;
}
.pillar-proof-label {
  font-family: var(--font-ui);
  font-size: var(--type-label-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 8px;
}
.pillar-proof-text {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(26, 23, 20, 0.65);
}

/* Dimension grid */
.dim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 760px;
}
.dim-box {
  background: rgba(26, 23, 20, 0.04);
  border: var(--border-width) solid rgba(26, 23, 20, 0.08);
  border-radius: 10px;
  padding: 18px 20px;
}
.dim-label {
  font-family: var(--font-ui);
  font-size: var(--type-label-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 8px;
}
.dim-text {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26, 23, 20, 0.6);
}

/* Phase block */
.phase-block {
  background: rgba(237, 235, 216, 0.04);
  border: var(--border-width) solid rgba(237, 235, 216, 0.1);
  border-radius: var(--radius-sm);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.phase-tag {
  font-family: var(--font-ui);
  font-size: var(--type-label-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.phase-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--color-text-on-dark);
  line-height: 1.1;
}
.phase-body {
  font-family: var(--font-ui);
  font-size: var(--type-body-md);
  line-height: 1.65;
  color: rgba(237, 235, 216, 0.58);
}

/* Sticky CTA — visual only; IntersectionObserver trigger is page-specific */
.sticky-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  z-index: 150;
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: 14px 20px 14px 16px;
  border-radius: 10px 0 0 10px;
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.5s var(--ease-out-quint),
              background-color var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
}
.sticky-cta.is-visible { transform: translateY(-50%) translateX(0); }
.sticky-cta:hover { background: var(--color-brand-hover); }
.sticky-cta i { font-size: 11px; opacity: 0.8; }


/* ─── SHARED SECTION: FOOTER CTA ──────────────────────────── */
.footer-cta {
  padding: 120px 56px;
  text-align: center;
}
.footer-cta-inner {
  max-width: 800px;
  margin: 0 auto;
}


/* ─── 10. GLOBAL FOOTER ───────────────────────────────────── */
.site-footer { padding: 48px 56px; }
.site-footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 40px;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-on-dark);
  display: block;
  margin-bottom: 6px;
}
.footer-tagline {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  color: rgba(237, 235, 216, 0.4);
  letter-spacing: 0.01em;
}
.footer-nav { display: flex; gap: 28px; }
.footer-nav-link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: rgba(237, 235, 216, 0.5);
  transition: color var(--duration-fast);
}
.footer-nav-link:hover { color: var(--color-text-on-dark); }
.footer-copy {
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  color: rgba(237, 235, 216, 0.3);
}


/* ─── 11. ENTRANCE ANIMATIONS ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease-out-quint),
                transform 0.8s var(--ease-out-quint);
  }
  .fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ─── 12. RESPONSIVE — SHARED COMPONENTS ──────────────────── */
@media (max-width: 1280px) {
  .sticky-cta { display: none; }
}

@media (max-width: 1024px) {
  .nav-inner    { padding: 18px 32px; }
  .site-footer  { padding: 40px; }
  .footer-cta   { padding: 80px 40px; }
  .vgrid--4     { grid-template-columns: repeat(2, 1fr); }
  .pillar       { grid-template-columns: 72px 1fr; gap: 24px; padding: 48px 0; }
}

@media (max-width: 768px) {
  .page-wrap {
    padding: 3vw;
    padding-top: calc(6vw + 64px);
    gap: 3vw;
  }
  .nav             { top: 2vw; left: 3vw; right: 3vw; }
  .nav.is-scrolled { left: calc(3vw + 10px); right: calc(3vw + 10px); }
  .nav-inner       { padding: 16px 24px; }
  .nav-links       { display: none; }
  .logo-full       { display: none; }
  .logo-short      { display: inline; }
  .nav-hamburger   { display: block; }
  .nav-cta-label   { display: none; }
  .nav-cta-icon    { display: inline; }
  .btn.nav-cta     { padding: 10px 14px; }
  .vgrid--2        { grid-template-columns: 1fr; }
  .vgrid--3        { grid-template-columns: 1fr; }
  .vgrid--4        { grid-template-columns: 1fr; }
  .vgrid > .cell   { padding: 28px; }
  .pillar          { grid-template-columns: 1fr; gap: 0; padding: 40px 0; }
  .dim-grid        { grid-template-columns: 1fr; }
  .phase-block     { padding: 28px; }
  .footer-cta      { padding: 64px 28px; }
  .site-footer     { padding: 32px 28px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .footer-nav      { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 480px) {
  .btn-pair     { flex-direction: column; align-items: flex-start; }
  .pillar-proof { padding: 16px 18px; }
  .dim-box      { padding: 14px 16px; }
}


/* ─── 13. SHARED CONTENT COMPONENTS ───────────────────────── */
.cat-pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  border: var(--border-width) solid var(--color-brand);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}


/* ─── 14. ARTICLE LAYOUT ──────────────────────────────────── */

/* ArticleHeader */
.art-header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 80px 56px 56px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
}
.art-header-inner .cat-pill {
  margin-bottom: 20px;
  align-self: flex-start;
}
.art-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 4.5vw, 72px);
  letter-spacing: -0.045em;
  line-height: 1.0;
  color: var(--color-text-on-dark);
  max-width: 760px;
  margin: 0 0 20px;
}
.art-deck {
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(237, 235, 216, 0.62);
  max-width: 600px;
  margin: 0 0 24px;
}
.art-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: rgba(237, 235, 216, 0.45);
}
.art-byline-sep { opacity: 0.4; }

/* ArticleBody */
.article-body-canvas { padding: 0; }
.article-col {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 56px 80px;
}
.art-body {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-surface-dark);
  margin: 0 0 28px;
}
.art-body:last-of-type { margin-bottom: 0; }
.art-section-head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-brand);
  margin: 56px 0 24px;
}
.art-section-head:first-child { margin-top: 0; }
.art-pullquote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-brand);
  text-align: center;
  border-top: 1.5px solid var(--color-brand);
  border-bottom: 1.5px solid var(--color-brand);
  padding: 28px 0;
  margin: 48px 0;
}
.art-closing {
  border-top: 1.5px solid rgba(26,23,20,0.1);
  margin-top: 48px;
  padding-top: 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-style: italic;
  color: rgba(26,23,20,0.5);
}
.art-closing a { color: var(--color-brand); text-decoration: none; }
.art-closing a:hover { text-decoration: underline; }

/* ArticleFooter */
.art-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 56px 88px;
}
.art-related-label { margin-bottom: 28px; padding-left: 32px; }
.art-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-brand);
  gap: var(--border-width);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 48px;
}
.art-related-card {
  background: var(--color-surface);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  min-height: 160px;
}
.art-related-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-surface-dark);
}
.art-related-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(26,23,20,0.4);
}
.art-cta-bar {
  background: rgba(26,23,20,0.04);
  border: var(--border-width) solid rgba(26,23,20,0.1);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.art-cta-question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -0.01em;
  color: var(--color-surface-dark);
}
.art-email-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.art-email-label {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-surface-dark);
  white-space: nowrap;
}
.art-email-form {
  display: flex;
  flex: 1;
  border-radius: var(--radius-button);
  overflow: hidden;
  border: var(--border-width) solid rgba(26,23,20,0.15);
}
.art-email-input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 10px 14px;
  border: none;
  outline: none;
  background: var(--color-surface);
  color: var(--color-surface-dark);
  min-width: 0;
}
.art-email-input::placeholder { color: rgba(26,23,20,0.35); }
.art-email-submit {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-on-dark);
  background: var(--color-brand);
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out);
}
.art-email-submit:hover { background: var(--color-brand-hover); }

/* ArtDiagram */
.art-diagram {
  margin: 48px 0;
  width: 100%;
}
.art-diagram figcaption {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-surface-dark);
  opacity: 0.5;
  letter-spacing: 0.04em;
}

/* Article Layout — Responsive */
@media (max-width: 768px) {
  .art-header-inner   { padding: 56px 24px 44px; min-height: 320px; }
  .article-col        { padding: 48px 24px 64px; }
  .art-footer-inner   { padding: 48px 24px 64px; }
  .art-related-grid   { grid-template-columns: 1fr; }
  .art-cta-bar        { flex-direction: column; align-items: flex-start; gap: 16px; }
  .art-email-row      { flex-direction: column; align-items: flex-start; width: 100%; gap: 8px; }
  .art-email-form     { width: 100%; }
}


/* ─── 15. UTILITIES ───────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}