/* ============================================================
   RED TEAMING MY LIFE — FULL PAGE THEME (HERO + CONTENT)
   - Fullscreen hero
   - Two-column content on wide screens (non-overwhelming)
   - Markdown-ish highlight colors + code styling
   - "Situational" title treatment (terminal/essay hybrid)
   ============================================================ */

:root{
  --bg: #0b0e14;
  --panel: #0f1420;
  --panel2:#0c111a;

  --fg: #e7eaf0;
  --text: #e7eaf0;          /* ✅ keep a consistent “primary text” var */
  --muted: #9aa3ad;
  --muted2:#7f8a96;

  /* “Markdown-ish” accents */
  --h: #9aa4ff;        /* headings */
  --a: #7dd3fc;        /* links */
  --code: #a5ffd6;     /* inline code */
  --quote: #f0abfc;    /* blockquote bar */
  --warn: #fbbf24;     /* emphasis / highlights */
  --tag: #22d3ee;      /* pill tags */

  /* "Markdown-ish" accents (subtle, readable) */
  --md-blue:  #60a5fa;
  --md-green: #34d399;
  --md-amber: #fbbf24;
  --md-red:   #fb7185;
  --md-violet:#a78bfa;
  --md-cyan:  #22d3ee;

  --border: #1f2937;
  --border2:#2b3443;

  --sans: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;

  --shadow: 0 18px 50px rgba(0,0,0,0.35);
  --radius: 16px;
}

/* base: don't affect inline <code>, only fenced blocks */
pre code .kw { font-weight: 650; }

/* Dark mode token colors */
:root:not([data-theme="light"]) pre code .kw-return,.diff { color: var(--md-violet); } /* return = purple */
:root:not([data-theme="light"]) pre code .kw-commit, .kw-checkout, .kw-merge  { color: var(--md-amber); } /* commit = light yellow */
:root:not([data-theme="light"]) pre code .kw-git { color: var(--md-green); } /* return = purple */

:root:not([data-theme="light"]) pre code .prompt-user{ color: var(--md-red); } /* return = red */

/* Light mode versions (optional: still readable, less neon) */
:root[data-theme="light"] pre code .kw-return,.diff { color: color-mix(in srgb, var(--md-violet) 80%, #000); }
:root[data-theme="light"] pre code .kw-commit, .kw-checkout, .kw-merge{ color: color-mix(in srgb, var(--md-amber) 80%, #000); }


/* Light theme (manual toggle) */
:root[data-theme="light"]{
  --bg: #f7f8fb;
  --panel: #ffffff;
  --panel2:#f3f4f6;

  --fg: #0b1220;
  --text:#0b1220;
  --muted: rgba(11,18,32,0.72);
  --muted2: rgba(11,18,32,0.62);

  /* darker “synthetic markdown” accents (less neon on white) */
  --md-blue:   #1d4ed8;  /* deep blue */
  --md-green:  #047857;  /* deep green */
  --md-amber:  #b45309;  /* warm amber */
  --md-red:    #be123c;  /* deep rose/red */
  --md-violet: #6d28d9;  /* deep violet */
  --md-cyan:   #0e7490;  /* deep cyan */

  /* match your heading/link vars to the same family */
  --h: #3730a3;   /* indigo-ish headings */
  --a: #1d4ed8;   /* links */
  --tag: #b45309; /* pills */
  --code: #6d28d9;/* inline code text */



  --border: rgba(11,18,32,0.14);
  --border2: rgba(11,18,32,0.10);

  --shadow: 0 12px 30px rgba(11,18,32,0.12);
}

/* Auto light preference  */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc;
    --panel:#ffffff;
    --panel2:#f3f4f6;

    --fg:#0b1220;
    --text:#0b1220;
    --muted:#556070;
    --muted2:#6b7280;

    --border:#e5e7eb;
    --border2:#d1d5db;

    --shadow: 0 10px 30px rgba(0,0,0,0.10);
  }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

main{
  width: 100%;
  margin: 0 auto;
}

/* =========================
   CONTENT LAYOUT
   ========================= */
.container{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem 4rem;

  /* columns (README vibe) */
  column-count: 2;
  column-gap: 4rem;
  column-fill: balance;
}

@media (max-width: 1100px){
  .container{
    column-count: 1;
    max-width: 920px;
  }
}

.container hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.25rem 0;
  column-span: all;
}

.container h2,
.container h3,
.container h4,
.container pre,
.container blockquote{
  column-span: all;
}


/* =========================
   HEADERS
   ========================= */

/* h4 base (neutral by default) */
.container h4{
  margin-top: 1.35rem;
  margin-bottom: 0.4rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--text);
  font-variant-numeric: lining-nums;
}

/* If an h4 is followed by a list, treat it like a subsection title */
.container h4 + ul{
  margin-top: 0.35rem;
  margin-bottom: 1rem;
}

/* List item spacing (keeps subsystem blocks tight and readable) */
.container ul li,
.container ol li{
  margin: 0.35rem 0;
}

/* Section-label h4: if an h4 is immediately followed by another h4, it’s a label (e.g., "Subsystems (Parts of Self)") */
.container h4:has(+ h4){
  color: var(--muted2);
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-top: 1.75rem;
  margin-bottom: 0.65rem;
}

/* Subsystem titles: h4 that is followed by a ul, but NOT a section-label */
.container h4:has(+ ul):not(:has(+ h4)){
  color: color-mix(in srgb, var(--fg) 88%, var(--md-cyan));
}

/* “Markdown-ish” typography */
.container h2{
  color: var(--h);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.container p{ color: var(--muted); }
.container strong{ color: var(--text); }

.container a{
  color: var(--a);
  text-decoration: none;
  border-bottom: 1px dashed rgba(125,211,252,0.45);
}
.container a:hover{
  border-bottom-style: solid;
}

.container code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 0.95em;
  color: var(--code);
  background: var(--panel);
  padding: 0.15em 0.35em;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.container pre{
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  overflow: auto;
  box-shadow: 0 8px 16px rgba(0,0,0,0.20);
}

:root[data-theme="light"] .container pre{
  background: rgba(11,18,32,0.05);
  box-shadow: 0 8px 18px rgba(11,18,32,0.08);
}

.container pre code{
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(255,255,255,0.88);
}

:root[data-theme="light"] .container pre code{
  color: rgba(11,18,32,0.88);
}

.container blockquote{
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--quote);
  background: var(--panel);
  border-radius: 10px;
  color: var(--muted);
}

/* Keep lists sane */
.container ul,
.container ol{
  column-span: all;
  padding-left: 1.25rem;
  color: var(--muted);
}


/* Tags / highlight pills (for your [BRACKET] vibe) */
.pill{
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,0.35);
  color: var(--tag);
  background: rgba(34,211,238,0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 0.82rem;
}

/* Mobile / narrow screens */
@media (max-width: 1024px){
  .container{
    column-count: 1;
    max-width: 860px;
  }
}

/* ============================================================
   HERO (FULLSCREEN)
   ============================================================ */

.hero-image{
  position: relative;
  height: 100vh;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #0b0e14;
}

/* the actual <img> wrapper */
.hero-img{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 85%;
  display: block;
}

/* dark overlay */
.hero-image::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,0,0,0.25), rgba(0,0,0,0.72)),
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.70));
  z-index: 1;
}

/* Title overlay */
.hero-text{
  position: absolute;
  inset: 0;
  z-index: 2;

  display: grid;
  place-content: start center;
  text-align: center;

  padding: 2rem 1.25rem;
  padding-top: 10vh; /* increase = lower, decrease = higher */

  color: #fff;
  max-width: 980px;
  margin: 0 auto;
}

@media (max-width: 768px){
  .hero-text{
    padding-top: 12vh;
  }
}

/* "Situational" title treatment */
.hero-text h1{
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw + 0.9rem, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.65);
  position: relative;
  padding: 1.0rem 1.1rem 1.05rem;
  border-radius: 16px;
  background: rgba(10,14,22,0.45);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
}

.hero-text h1::before{
  content: "[Someone Handed me the [://source/code] instead of the [userManuel():]";
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin-bottom: 0.55rem;
}

.hero-text h1::after{
  content:"";
  position:absolute;
  left: 12%;
  right: 12%;
  bottom: -10px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(96,165,250,0.95),
    rgba(167,139,250,0.90),
    transparent
  );
  opacity: 0.85;
}

.hero-text p{
  margin: 1.05rem auto 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  font-style: italic;
  max-width: 48rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65);
}

/* Mobile hero tuning */
@media (max-width: 768px){
  .hero-text{
    padding: 1.25rem;
    padding-top: 14vh;
  }
  .hero-text h1{
    font-size: clamp(1.25rem, 4.6vw, 2.05rem);
    padding: 0.85rem 0.9rem 0.95rem;
  }
  .hero-img img{
    object-position: 50% 88%;
  }
}

/* ============================================================
   TYPOGRAPHY + MARKDOWN-LIKE STYLES
   ============================================================ */

h1,h2,h3{
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h2{
  font-size: 1.55rem;
  margin: 2.25rem 0 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

h3{
  font-size: 1.05rem;
  margin: 1.75rem 0 0.65rem;
  color: var(--muted);
  font-weight: 650;
}

p{ margin: 0.95rem 0; color: var(--fg); }
em{ color: var(--muted); }

.hero-text .subtitle,
.hero-text .subtitle em{
  color: #fff;
  opacity: 1;
}

hr{
  border: none;
  border-top: 1px dashed var(--border);
  margin: 2rem 0;
}

/* Links like GitHub-ish */
a{
  color: var(--md-blue);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* Inline code like Markdown */
code{
  font-family: var(--mono);
  font-size: 0.92em;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--border);
  padding: 0.16rem 0.35rem;
  border-radius: 7px;
  color: color-mix(in srgb, var(--fg) 92%, var(--md-cyan));
}

/* Code blocks */
pre{
  background: #0a0e16;
  color: #e6edf3;
  border: 1px solid color-mix(in srgb, var(--border) 70%, #000);
  border-radius: 14px;
  padding: 1.05rem 1.15rem;
  overflow-x: auto;
  margin: 1.2rem 0 1.6rem;
  box-shadow: var(--shadow);
}
pre code{
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Blockquotes as Markdown callouts */
blockquote{
  margin: 1.2rem 0;
  padding: 0.95rem 1.05rem;
  background: color-mix(in srgb, var(--panel2) 85%, transparent);
  border: 1px solid var(--border);
  border-left: 4px solid var(--md-violet);
  border-radius: 12px;
  color: color-mix(in srgb, var(--fg) 92%, var(--muted));
}

/* Lists */
ul,ol{ margin: 1rem 0 1rem 1.25rem; padding: 0; }
li{ margin: 0.45rem 0; }

/* Selection color */
::selection{
  background: color-mix(in srgb, var(--md-blue) 30%, transparent);
}

/* ============================================================
   TWO-COLUMN CONTENT (WIDE SCREENS ONLY)
   ============================================================ */

.content{
  /* default: single column */
}

@media (min-width: 1180px){
  .content{
    column-count: 2;
    column-gap: 3.25rem;
    column-fill: balance;
  }

  .content h2,
  .content h3,
  .content hr,
  .content pre,
  .content blockquote{
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-span: all;
  }

  .content p,
  .content ul,
  .content ol{
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* ============================================================
   THEME HIGHLIGHTS (Markdown-ish “color format” vibes)
   ============================================================ */

.hl{
  padding: 0.08rem 0.35rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  font-weight: 650;
}

.hl.blue{   color: var(--md-blue);   background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.22); }
.hl.green{  color: var(--md-green);  background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.22); }
.hl.amber{  color: var(--md-amber);  background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.22); }
.hl.red{    color: var(--md-red);    background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.22); }
.hl.violet{ color: var(--md-violet); background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.22); }
.hl.cyan{   color: var(--md-cyan);   background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.22); }

.h2.blue{   color: var(--md-blue);   background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.22); }
.h2.green{  color: var(--md-green);  background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.22); }
.h2.amber{  color: var(--md-amber);  background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.22); }
.h2.red{    color: var(--md-red);    background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.22); }
.h2.violet{ color: var(--md-violet); background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.22); }
.h2.cyan{   color: var(--md-cyan);   background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.22); }





/* =========================
   FOOTER
   ========================= */

/* Footer wrapper */
.footer{
  width: 100%;
}

/* HARD RESET: footer container must NOT behave like the main .container */
.footer .container{
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.25rem 2rem 2.5rem;

  /* kill the 2-column layout inherited from .container */
  column-count: 1 !important;
  column-gap: 0 !important;
  column-fill: auto !important;

  /* normal centered stack layout */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Final commit block inside footer */
.footer .footer-final{
  width: 100%;
  max-width: 1320px;
  align-self: stretch;     /* override flex centering */
  margin: 0.25rem 0 0.85rem;
}

/* Social / outro section */
.footer .social-media{
  width: 100%;
  max-width: 720px;
  margin: 1.75rem auto 1.25rem;
  text-align: center;

  /* safety */
  column-span: all;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.footer .social-media .outro{
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Center the icon row as a unit */
.footer .social-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;

  width: fit-content;
  margin: 0 auto;

  /* safety */
  column-span: all;
}

/* Base icon button */
.footer .social-links a{
  width: 46px;
  height: 46px;
  border-radius: 14px;

  display: grid;
  place-items: center;

  font-size: 1.1rem;
  color: var(--text);

  background: color-mix(in srgb, var(--panel2) 85%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  text-decoration: none !important;
  border-bottom: none !important;

  transition:
    transform 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.footer .social-links a i{
  display: inline-block;
  width: 1.25em;        /* fixed icon box */
  text-align: center;   /* center glyph within box */
  line-height: 1;       /* prevent baseline wobble */
}

/* hover = subtle lift */
.footer .social-links a:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}

/* per-platform accents */
.footer .social-links a.port:hover{
  color: var(--md-cyan);
  border-color: color-mix(in srgb, var(--md-cyan) 55%, var(--border));
}

.footer .social-links a.linkedin:hover{
  color: #0a66c2;
  border-color: rgba(10,102,194,0.45);
}

.footer .social-links a.github:hover{
  color: var(--md-violet);
  border-color: color-mix(in srgb, var(--md-violet) 55%, var(--border));
}

/* light mode tuning */
:root[data-theme="light"] .footer .social-links a{
  background: #fff;
}

/* Copyright line */
.footer .copyright{
  width: 100%;
  text-align: center;

  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 65%, transparent);

  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* if any old bullet pseudo-element exists, kill it */
.footer .copyright::before{
  content: none !important;
}
.hero-text h1{
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}


/* =========================
   TERMINAL PROMPT
   ========================= */

   .footer .term-err.flash{
  animation: errFlash 1800ms ease 4 forwards;
  opacity: 0.4;
}

.footer .footer-final{
  position: relative;
  overflow: hidden; /* keeps overlay clipped */
}

/* overlay layer */
.footer .footer-final::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* subtle terminal phosphor wash */
  background:
    linear-gradient(
      120deg,
      rgba(34, 211, 238, 0.06),
      rgba(167, 139, 250, 0.04),
      rgba(34, 211, 238, 0.06)
    );

  opacity: 0;
  transition: opacity 180ms ease;
}
/* =========================
   FAKE TERMINAL ERROR LINE
   ========================= */

.footer .term-line{
  display: block;
  margin-top: 0.25rem;
  font-family: var(--mono);
  white-space: pre-wrap;
}

.footer .term-err{
  color: color-mix(in srgb, var(--md-red) 85%, #fff);
}

@keyframes errFlash{
  0%   { opacity: 0; transform: translateY(-1px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(0); }
}

.footer .term-err.flash{
  animation: errFlash 900ms ease 1;
}

/* optional: block selection highlight looking weird */
.footer .term-input::selection{
  background: color-mix(in srgb, var(--md-green) 25%, transparent);
}

/* block cursor (separate from your prompt blink) */
.footer .cursor{
  display: inline-block;
  margin-left: 0.15rem;
  opacity: 0.85;
  animation: cursorBlink 1.1s steps(1,end) infinite;
}

@keyframes cursorBlink{
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 0.85; }
}

/* activate on hover */
.footer .footer-final:hover::after{
  opacity: 1;
}
.footer .prompt{
  font-family: var(--mono);
  opacity: 0.95;
}

.footer .prompt-user{ color: color-mix(in srgb, var(--md-green) 90%, #fff); }
.footer .prompt-sep { color: color-mix(in srgb, var(--fg) 80%, transparent); }
.footer .prompt-host{ color: color-mix(in srgb, var(--md-cyan) 85%, #fff); }
.footer .prompt-path{ color: color-mix(in srgb, var(--md-violet) 85%, #fff); }
.footer .prompt-sym { color: color-mix(in srgb, var(--fg) 90%, #fff); margin-right: 0.35rem; }


@keyframes promptBlink{
  0%   { opacity: 0; }
  49%  { opacity: 0; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.9; }
}

/* more obvious "glitch jitter" */
@keyframes promptJitter{
  0%, 84% { transform: translate3d(0,0,0) rotate(0); }

  /* quick 3-hit shake */
  85% { transform: translate3d( 2px, 0px, 0) rotate(0.6deg); }
  86% { transform: translate3d(-3px, 1px, 0) rotate(-0.7deg); }
  87% { transform: translate3d( 2px,-1px, 0) rotate(0.4deg); }

  /* settle */
  88%, 100% { transform: translate3d(0,0,0) rotate(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .footer .prompt{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* you already like this behavior; keep it */
.footer .footer-final:hover .prompt{
  /* slows BOTH animations on hover */
  animation-duration: 2.5s, 8s;
}


/* =========================
   FLOATING UI (toggle + scrolltop)
   ========================= */
.fab-wrap{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  z-index: 9999;
}

.fab{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(20,24,34,0.55);
  color: var(--text);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 140ms ease, opacity 140ms ease, background 140ms ease;
}

:root[data-theme="light"] .fab{
  background: rgba(255,255,255,0.82);
  color: var(--text);
}

.fab:hover{ transform: translateY(-2px); }
.fab:active{ transform: translateY(0px) scale(0.98); }

#scrollTopBtn{
  opacity: 0;
  pointer-events: none;
}
#scrollTopBtn.show{
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   PHASE 4: allow content to flow in columns (your working fix)
   ============================================================ */

@supports selector(.container:has(#phase-4-0-differentiation-integration)){

  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration ~ *{
    column-span: none;
  }

  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration,
  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration + p,
  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration ~ pre{
    column-span: all;
  }

  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration ~ h3,
  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration ~ h4,
  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration ~ ul{
    column-span: none;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration ~ h4{
    margin-top: 1.25rem;
    margin-bottom: 0.35rem;
    color: color-mix(in srgb, var(--fg) 88%, var(--md-cyan));
    font-weight: 750;
  }

  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration ~ ul{
    margin: 0.4rem 0 1.1rem 1.15rem;
  }

  .container:has(#phase-4-0-differentiation-integration)
    #phase-4-0-differentiation-integration ~ ul li{
    margin: 0.35rem 0;
  }
}

/* ============================================================
   INTRO BLOCK: force SINGLE centered column (no split)
   ============================================================ */

.container > p:first-of-type{
  column-span: all;
  max-width: 860px;
  margin: 2.25rem auto 0;
  text-align: center;
  text-wrap: balance;
}

.container > hr:first-of-type{
  column-span: all;
  max-width: 860px;
  margin: 1.75rem auto 2.25rem;
}

.container > h2#phase-1-finding-the-signal-through-the-noise{
  column-span: all;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}