/* ═══════════════════════════════════════════════════════════════
   HPC SCIENCE DEEP DIVE — SITE-WIDE MAGAZINE CSS
   Version: 1.0 · March 2026
   Source: SDD-LUXURY-MAGAZINE-v2.2.html
   Deploy: mu-plugin enqueue on SDD post type
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   RESET
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─────────────────────────────────────────────
   CORE PRIMITIVES
───────────────────────────────────────────── */
:root {
  --void: #050810;
  --deep: #0A0F1E;
  --surface: #111827;
  --elevated: #1E2D4A;
  --surface-2: #162238;

  --white: #F0F0F0;
  --parchment: #F5F0EB;

  --grey-950: #0C1018;
  --grey-900: #141A28;
  --grey-800: #1F2937;
  --grey-700: #2D3A4E;
  --grey-600: #3F4F66;
  --grey-500: #546580;
  --grey-400: #7A8BA3;
  --grey-300: #A3B1C4;
  --grey-200: #C8D1DC;
  --grey-100: #E5E9EF;
  --grey-50:  #F3F5F7;

  --gold-900: #8B6508;
  --gold-800: #B87D0A;
  --gold-700: #D4A012;
  --gold-500: #E8B828;
  --gold-300: #F5D76E;
  --gold-100: #FDE9A1;
  --maize:    #FFCB05;

  --navy:     #00274C;
  --blue-950: #0F172A;
  --blue-800: #1A2D6B;
  --blue-700: #1E3A8A;
  --blue-500: #3B82F6;
  --blue-400: #60A5FA;

  --teal:        #2DA494;
  --teal-safe:   #3BC4B2;
  --claret:      #D46A6A;
  --claret-safe: #E88585;
  --copper:      #D4956A;

  /* ── Category tokens ── */
  --c-bio:        #73B191;
  --c-flow:       #60A5FA;
  --c-dec:        #CCC06F;
  --c-habits:     #96A67A;
  --c-learn:      #988CB5;
  --c-identity:   #B88892;
  --c-lead:       #8898A0;
  --c-arena:      #C47358;
  --c-nutrition:  #A89F68;
  --c-connection: #C99BB4;

  /* ── Default pillar (overridden by body class) ── */
  --page-accent:       var(--c-bio);
  --page-accent-soft:  #8FC7A7;
  --page-accent-rgb:   115,177,145;
  --page-accent-muted: rgba(115,177,145,0.30);

  /* ── Semantic tokens ── */
  --color-text-primary:   var(--white);
  --color-text-secondary: var(--grey-300);
  --color-text-tertiary:  var(--grey-400);
  --color-text-disabled:  var(--grey-600);
  --color-text-brand:     var(--maize);
  --color-text-success:   var(--teal);
  --color-text-danger:    var(--claret);
  --color-text-warning:   var(--gold-500);
  --color-text-info:      var(--blue-400);

  --color-text-muted:      rgba(240,240,240,0.58);
  --color-text-quaternary: rgba(240,240,240,0.46);
  --color-text-soft:       rgba(240,240,240,0.38);
  --color-text-faint:      rgba(240,240,240,0.28);
  --color-text-ghost:      rgba(240,240,240,0.20);
  --color-text-dim:        rgba(240,240,240,0.14);

  --color-bg-primary:        var(--void);
  --color-bg-secondary:      var(--surface);
  --color-bg-elevated:       var(--elevated);
  --color-bg-overlay:        rgba(5,8,16,0.82);
  --color-bg-brand-subtle:   rgba(255,203,5,0.06);
  --color-bg-success-subtle: rgba(45,164,148,0.15);
  --color-bg-danger-subtle:  rgba(212,106,106,0.15);
  --color-bg-warning-subtle: rgba(255,203,5,0.08);
  --color-bg-info-subtle:    rgba(30,58,138,0.18);

  --color-bg-tint:        rgba(240,240,240,0.020);
  --color-bg-tint-subtle: rgba(240,240,240,0.014);
  --color-bg-tint-ghost:  rgba(240,240,240,0.008);
  --color-bg-hover:       rgba(240,240,240,0.05);

  --color-border-default: rgba(240,240,240,0.07);
  --color-border-subtle:  rgba(240,240,240,0.04);
  --color-border-strong:  rgba(240,240,240,0.14);
  --color-border-brand:   rgba(255,203,5,0.18);
  --color-border-success: rgba(45,164,148,0.25);
  --color-border-danger:  rgba(212,106,106,0.25);
  --color-border-info:    rgba(30,58,138,0.30);
  --color-border-focus:   var(--maize);

  /* ── Editorial bridge aliases ── */
  --void-warm: var(--deep);

  --t1:       var(--white);
  --t1-warm:  var(--parchment);
  --t1-cream: var(--grey-200);
  --t2:       var(--color-text-secondary);
  --t3:       var(--color-text-tertiary);
  --t4:       var(--color-text-faint);
  --t5:       var(--color-text-dim);

  --rule:      var(--color-border-default);
  --rule-soft: var(--color-border-subtle);
  --panel:     var(--color-bg-tint);
  --panel-soft: var(--color-bg-tint-subtle);

  --maize-soft:  var(--gold-500);
  --maize-muted: rgba(255,203,5,0.40);
  --maize-faint: rgba(255,203,5,0.14);

  --jade:       var(--page-accent);
  --jade-soft:  var(--page-accent-soft);
  --jade-muted: var(--page-accent-muted);

  --cyan-soft: #8BBED8;
  --red-soft:  #D98282;

  --shadow-soft:      0 10px 28px rgba(0,0,0,0.14);
  --shadow-editorial: 0 1px 0 rgba(240,240,240,0.02), 0 18px 40px rgba(0,0,0,0.18);

  --gold-line: linear-gradient(90deg, transparent 0%, rgba(255,203,5,0.32) 18%, rgba(255,203,5,0.12) 52%, transparent 100%);
  --panel-sheen: linear-gradient(180deg, rgba(240,240,240,0.03) 0%, rgba(240,240,240,0.008) 42%, rgba(240,240,240,0.00) 100%);
  --glow-gold: 0 0 0 1px rgba(255,203,5,0.04), 0 18px 50px rgba(0,0,0,0.16);
  --glow-jade: 0 0 24px rgba(var(--page-accent-rgb),0.08);

  --prose-max: 720px;
  --page-max: 1120px;

  --ease-lux: cubic-bezier(0.25, 0.8, 0.25, 1);

  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
}

/* ─────────────────────────────────────────────
   PILLAR BODY CLASSES
───────────────────────────────────────────── */
body.pillar-bio {
  --page-accent: var(--c-bio); --page-accent-soft: #8FC7A7;
  --page-accent-rgb: 115,177,145; --page-accent-muted: rgba(115,177,145,0.30);
}
body.pillar-flow {
  --page-accent: var(--c-flow); --page-accent-soft: #8FC4FF;
  --page-accent-rgb: 96,165,250; --page-accent-muted: rgba(96,165,250,0.30);
}
body.pillar-dec {
  --page-accent: var(--c-dec); --page-accent-soft: #DDD28A;
  --page-accent-rgb: 204,192,111; --page-accent-muted: rgba(204,192,111,0.30);
}
body.pillar-habits {
  --page-accent: var(--c-habits); --page-accent-soft: #AAB88D;
  --page-accent-rgb: 150,166,122; --page-accent-muted: rgba(150,166,122,0.30);
}
body.pillar-learn {
  --page-accent: var(--c-learn); --page-accent-soft: #AEA3C9;
  --page-accent-rgb: 152,140,181; --page-accent-muted: rgba(152,140,181,0.30);
}
body.pillar-identity {
  --page-accent: var(--c-identity); --page-accent-soft: #C59CA5;
  --page-accent-rgb: 184,136,146; --page-accent-muted: rgba(184,136,146,0.30);
}
body.pillar-lead {
  --page-accent: var(--c-lead); --page-accent-soft: #9EADB5;
  --page-accent-rgb: 136,152,160; --page-accent-muted: rgba(136,152,160,0.30);
}
body.pillar-arena {
  --page-accent: var(--c-arena); --page-accent-soft: #D2866E;
  --page-accent-rgb: 196,115,88; --page-accent-muted: rgba(196,115,88,0.30);
}
body.pillar-nutrition {
  --page-accent: var(--c-nutrition); --page-accent-soft: #B9B07A;
  --page-accent-rgb: 168,159,104; --page-accent-muted: rgba(168,159,104,0.30);
}
body.pillar-connection {
  --page-accent: var(--c-connection); --page-accent-soft: #D7A9C2;
  --page-accent-rgb: 201,155,180; --page-accent-muted: rgba(201,155,180,0.30);
}

/* ─────────────────────────────────────────────
   BODY & PAGE SURFACE
───────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(ellipse at top center, rgba(255,203,5,0.025) 0%, transparent 34%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--page-accent-rgb),0.018) 0%, transparent 32%),
    var(--void);
  color: var(--t2);
  font-family: var(--f-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.012;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
}

/* ─────────────────────────────────────────────
   LAYOUT WRAPPERS
───────────────────────────────────────────── */
.sdd-wrap-narrow {
  max-width: var(--prose-max);
  width: 100%;
  padding: 0 clamp(24px, 4vw, 48px);
  margin: 0 auto;
}

.sdd-wrap-wide {
  max-width: var(--page-max);
  width: 100%;
  padding: 0 clamp(24px, 4vw, 48px);
  margin: 0 auto;
}

/* ─────────────────────────────────────────────
   REVEAL ANIMATION
───────────────────────────────────────────── */
.sdd-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.05s var(--ease-lux), transform 1.05s var(--ease-lux);
}

.sdd-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   EVIDENCE FLAGS
───────────────────────────────────────────── */
.sdd-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.sdd-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 0.5px solid var(--rule);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 0.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t4);
}

.sdd-flag--mechanism    { color: var(--maize-soft); border-color: rgba(255,203,5,0.14); }
.sdd-flag--controlled   { color: var(--jade); border-color: rgba(var(--page-accent-rgb),0.14); }
.sdd-flag--cohort       { color: var(--cyan-soft); border-color: rgba(139,190,216,0.14); }
.sdd-flag--interpretation { color: var(--red-soft); border-color: rgba(217,130,130,0.14); }

/* ─────────────────────────────────────────────
   SUMMARY LINE
───────────────────────────────────────────── */
.sdd-summary-line {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--t3);
  padding-left: 14px;
  border-left: 1px solid rgba(240,240,240,0.06);
  max-width: 620px;
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────
   PROSE SYSTEM
───────────────────────────────────────────── */
.sdd-prose {
  position: relative;
  padding-left: 28px;
}

.sdd-prose::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0.5px;
  background: linear-gradient(180deg, transparent 0%, rgba(240,240,240,0.035) 2%, rgba(240,240,240,0.04) 98%, transparent 100%);
}

.sdd-cluster {
  margin-bottom: 54px;
}

.sdd-lead {
  font-size: 1.14rem;
  line-height: 1.95;
  color: var(--t1-warm);
  margin-bottom: 24px;
  text-wrap: pretty;
}

.sdd-lead::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 5.2rem;
  line-height: 0.65;
  margin-right: 14px;
  margin-top: 14px;
  font-weight: 500;
  background: linear-gradient(180deg, var(--maize) 0%, var(--maize-soft) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sdd-para {
  font-size: 1.03rem;
  line-height: 1.95;
  color: var(--t2);
  margin-bottom: 22px;
  text-indent: 2em;
  text-wrap: pretty;
}

.sdd-para:first-of-type,
.sdd-para--no-indent {
  text-indent: 0;
}

.sdd-para strong { color: var(--t1); font-weight: 600; }
.sdd-para em     { color: var(--t1-warm); font-style: italic; }

.sdd-sc {
  font-variant: small-caps;
  font-size: 1.05em;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.sdd-term {
  color: var(--t1);
  font-weight: 600;
  font-style: normal;
  background: linear-gradient(180deg, transparent 58%, rgba(255,203,5,0.06) 58%, rgba(255,203,5,0.06) 90%, transparent 90%);
  padding: 0 3px;
}

.sdd-cite {
  font-family: var(--f-mono);
  font-size: 0.55em;
  color: var(--maize-muted);
  vertical-align: super;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease-lux), border-color 0.3s var(--ease-lux);
  opacity: 0.88;
  padding-bottom: 1px;
}

.sdd-cite:hover {
  color: var(--maize);
  border-bottom-color: var(--maize-faint);
  opacity: 1;
  text-shadow: 0 0 10px rgba(255,203,5,0.15);
}

.sdd-hinge {
  color: var(--t1);
  font-weight: 600;
}

.sdd-margin-note {
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--t4);
  padding: 14px 0 14px 20px;
  border-left: 0.5px solid rgba(255,203,5,0.08);
  margin: 0 0 40px;
  max-width: 470px;
}

.sdd-margin-note strong { color: var(--t3); font-weight: 600; }

/* ─────────────────────────────────────────────
   EDITORIAL PAUSE
───────────────────────────────────────────── */
.sdd-pause {
  position: relative;
  margin: 44px 0 14px;
  padding: 30px 0 0;
}

.sdd-pause::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 82px;
  height: 0.5px;
  background: var(--gold-line);
}

.sdd-pause__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.sdd-pause__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--maize-soft);
  box-shadow: 0 0 10px rgba(255,203,5,0.22);
  flex-shrink: 0;
}

.sdd-pause__label {
  font-family: var(--f-mono);
  font-size: 0.42rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--maize-muted);
}

.sdd-pause__text {
  max-width: 640px;
  color: var(--t1-warm);
  font-family: var(--f-display);
  font-size: clamp(1.04rem, 1.9vw, 1.32rem);
  line-height: 1.52;
  font-style: italic;
}

.sdd-pause__text strong {
  color: var(--maize-soft);
  font-style: normal;
}

/* ─────────────────────────────────────────────
   PULL QUOTE
───────────────────────────────────────────── */
.sdd-pull {
  text-align: center;
  margin: 96px 0;
  padding: 0 clamp(24px, 6vw, 80px);
}

.sdd-pull::before {
  content: '\201C';
  display: block;
  margin-bottom: 14px;
  font-family: var(--f-display);
  font-size: 4rem;
  line-height: 1;
  font-weight: 300;
  color: rgba(255,203,5,0.20);
}

.sdd-pull__text {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.8vw, 3.1rem);
  line-height: 1.28;
  color: var(--t1);
  font-style: italic;
  max-width: 920px;
  margin: 0 auto;
  text-shadow: 0 10px 34px rgba(0,0,0,0.14);
}

.sdd-pull__rule {
  width: 54px; height: 0.5px;
  margin: 26px auto;
  background: var(--gold-line);
}

.sdd-pull__attr {
  font-family: var(--f-body);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t4);
}

/* ─────────────────────────────────────────────
   BIG STAT
───────────────────────────────────────────── */
.sdd-stat {
  text-align: center;
  margin: 40px 0 64px;
  padding: 84px 24px;
  position: relative;
}

.sdd-stat::before,
.sdd-stat::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}

.sdd-stat::before { top: 0; }
.sdd-stat::after  { bottom: 0; }

.sdd-stat__num {
  font-family: var(--f-display);
  font-size: clamp(5.8rem, 13vw, 10rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--jade-soft);
  text-shadow: 0 0 40px rgba(var(--page-accent-rgb),0.06), var(--glow-jade);
}

.sdd-stat__unit {
  font-size: 0.4em;
  color: var(--jade-muted);
}

.sdd-stat__desc {
  max-width: 460px;
  margin: 6px auto 14px;
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--t3);
}

.sdd-stat__source {
  font-family: var(--f-mono);
  font-size: 0.46rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t5);
}

/* ─────────────────────────────────────────────
   END MARK
───────────────────────────────────────────── */
.sdd-end {
  display: flex;
  justify-content: center;
  padding: 48px 0 clamp(80px, 10vw, 160px);
}

.sdd-end__mark {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--maize-faint);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — SHARED COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body::after {
    opacity: 0.008;
    background-size: 420px 420px;
  }

  .sdd-wrap-narrow,
  .sdd-wrap-wide {
    padding: 0 24px;
  }

  .sdd-prose {
    padding-left: 0;
  }

  .sdd-prose::before {
    display: none;
  }

  .sdd-lead {
    font-size: 1.02rem;
  }

  .sdd-lead::first-letter {
    font-size: 3.8rem;
    margin-right: 10px;
    margin-top: 10px;
  }

  .sdd-para {
    font-size: 0.98rem;
    text-indent: 0;
    margin-bottom: 18px;
  }

  .sdd-cluster {
    margin-bottom: 42px;
  }

  .sdd-pause {
    margin: 34px 0 8px;
  }

  .sdd-pull {
    margin: 72px 0;
    padding: 0 20px;
  }

  .sdd-pull__text {
    font-size: clamp(1.72rem, 7vw, 2.4rem);
  }

  .sdd-stat {
    padding: 62px 18px;
    margin: 22px 0 42px;
  }

  .sdd-stat__num {
    font-size: clamp(3.7rem, 12vw, 5.4rem);
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sdd-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */

@media print {
  body,
  body::after {
    background: #fff !important;
    color: #333 !important;
  }

  body::after { display: none !important; }

  .sdd-lead::first-letter {
    -webkit-text-fill-color: #000 !important;
    background: none !important;
  }

  .sdd-pause__text {
    color: #333 !important;
  }

  .sdd-pull__text {
    color: #000 !important;
    text-shadow: none !important;
  }

  .sdd-stat__num {
    color: #333 !important;
    text-shadow: none !important;
  }

  .sdd-term {
    background: none !important;
    text-decoration: underline !important;
  }

  .sdd-cite {
    color: #666 !important;
  }
}