:root{
    --navy-950:#0f0e2a;
    --navy-900:#161442;
    --navy-800:#211f5c;
    --navy-700:#332f7d;
    --orange-500:#f5791f;
    --orange-600:#e2660f;
    --orange-rgb:245,121,31;
    --orange-glow:rgba(245,121,31,.35);
    --indigo-500:#736fc9;
    --indigo-rgb:135,131,201;
    --indigo-glow:rgba(115,111,201,.35);
    --bg:#f5f4fb;
    --surface:#ffffff;
    --surface-2:#ebe9f7;
    --border:#dcd9ee;
    --ink:#161442;
    --ink-soft:#4b4879;
    --ink-faint:#7f7ba8;
    --accent:var(--orange-500);
    --accent-ink:#7a3d0c;
    --focus:#2a63ff;
    --shadow: 0 1px 2px rgba(22,20,66,.05), 0 1px 1px rgba(22,20,66,.04), 0 16px 32px -20px rgba(22,20,66,.22);
    --shadow-lg: 0 1px 2px rgba(22,20,66,.06), 0 24px 48px -20px rgba(22,20,66,.28);
    --pill-bg-active:var(--navy-950);
    --pill-fg-active:#ffffff;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0b0a22;
      --surface:#15133a;
      --surface-2:#1c1a49;
      --border:#2c2966;
      --ink:#f2f0fb;
      --ink-soft:#bcb8e0;
      --ink-faint:#8a86bb;
      --accent:#ff8c3d;
      --accent-ink:#ffd9b3;
      --orange-rgb:255,140,61;
      --indigo-500:#a29dff;
      --indigo-rgb:162,157,255;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.6);
      --shadow-lg: 0 1px 2px rgba(0,0,0,.5), 0 28px 56px -24px rgba(0,0,0,.7);
      --pill-bg-active:#ff8c3d;
      --pill-fg-active:#1a0f04;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0b0a22;
    --surface:#15133a;
    --surface-2:#1c1a49;
    --border:#2c2966;
    --ink:#f2f0fb;
    --ink-soft:#bcb8e0;
    --ink-faint:#8a86bb;
    --accent:#ff8c3d;
    --accent-ink:#ffd9b3;
    --orange-rgb:255,140,61;
    --indigo-500:#a29dff;
    --indigo-rgb:162,157,255;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.6);
    --shadow-lg: 0 1px 2px rgba(0,0,0,.5), 0 28px 56px -24px rgba(0,0,0,.7);
    --pill-bg-active:#ff8c3d;
    --pill-fg-active:#1a0f04;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Archivo', ui-sans-serif, system-ui, sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }

  a{color:inherit;}
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:3px;
    border-radius:4px;
  }

  h1,h2,h3{
    font-family:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
    font-weight:700;
    letter-spacing:-.02em;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }

  .eyebrow{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent-ink, var(--accent));
  }

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding-inline:24px;
  }

  /* ---------- masthead ---------- */
  .masthead{
    background:var(--navy-950);
    color:#f2f0fb;
    position:relative;
    overflow:hidden;
  }
  .masthead::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--orange-500) 20%, var(--indigo-500) 55%, transparent 85%);
    opacity:.7;
  }
  .masthead-top{ position:relative; z-index:2; }
  .masthead-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-block:16px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
  }
  .brand svg{ flex:none; }
  .brand-word{
    font-family:'Hanken Grotesk', sans-serif;
    font-weight:700;
    letter-spacing:-.01em;
    font-size:1.14rem;
    line-height:1.1;
    color:#fff;
  }
  .brand-word b{ color:var(--orange-500); font-weight:800; }
  .brand-sub{
    font-family:'IBM Plex Mono', monospace;
    font-size:.62rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#a9a5d9;
  }
  nav.primary{
    display:flex;
    align-items:center;
    gap:28px;
  }
  nav.primary a{
    text-decoration:none;
    font-size:.9rem;
    font-weight:500;
    color:#cfccec;
  }
  nav.primary a:hover{ color:#fff; }
  .cta-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(180deg, var(--orange-500), var(--orange-600));
    color:#1a0f04;
    font-weight:700;
    font-size:.86rem;
    padding:10px 18px;
    border-radius:9px;
    text-decoration:none;
    box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px var(--orange-glow);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .cta-btn:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 14px 28px -8px var(--orange-glow); }

  .masthead-strapline{
    position:relative;
    z-index:2;
    padding-block:52px 44px;
    text-align:left;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .hero-glow{
    position:absolute; inset:0; z-index:1; pointer-events:none;
  }
  .hero-glow span{ position:absolute; border-radius:50%; filter:blur(64px); }
  .hero-glow .g1{
    width:420px; height:420px; right:-120px; top:-160px;
    background:radial-gradient(circle, rgba(var(--orange-rgb),.5), transparent 70%);
  }
  .hero-glow .g2{
    width:360px; height:360px; left:8%; bottom:-220px;
    background:radial-gradient(circle, rgba(var(--indigo-rgb),.45), transparent 70%);
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:.72rem;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--orange-500); margin-bottom:16px;
  }
  .hero-eyebrow::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--orange-500); box-shadow:0 0 0 4px rgba(var(--orange-rgb),.25);
  }
  .masthead-strapline h1{
    color:#fff;
    font-size:clamp(2.3rem, 4.6vw, 3.4rem);
    letter-spacing:-.03em;
    max-width:17ch;
  }
  .masthead-strapline h1 em{
    font-style:normal;
    background:linear-gradient(90deg, var(--orange-500), #ffb06b);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .masthead-strapline p{
    margin:16px 0 0;
    color:#bcb8e0;
    max-width:52ch;
    font-size:1.05rem;
  }
  .hero-stats{
    display:flex; flex-wrap:wrap; gap:0;
    margin-top:34px;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:22px;
  }
  .hero-stats .stat{
    padding-right:28px; margin-right:28px;
    border-right:1px solid rgba(255,255,255,.1);
  }
  .hero-stats .stat:last-child{ border-right:none; margin-right:0; padding-right:0; }
  .hero-stats .stat-value{
    font-family:'Hanken Grotesk', sans-serif; font-weight:800; font-size:1.3rem;
    color:#fff; letter-spacing:-.02em; display:block;
    font-variant-numeric:tabular-nums;
  }
  .hero-stats .stat-label{
    font-family:'IBM Plex Mono', monospace; font-size:.68rem;
    letter-spacing:.06em; color:#8a86bb; display:block; margin-top:4px;
  }
  @media (max-width:640px){
    .hero-stats .stat{ padding-right:16px; margin-right:16px; }
  }

  /* mobile nav simplification */
  @media (max-width:760px){
    nav.primary{ display:none; }
  }

  /* ---------- featured post ---------- */
  main{ background:var(--bg); }
  .section{ padding-block:48px; }
  .featured{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
  }
  @media (max-width:820px){
    .featured{ grid-template-columns:1fr; }
  }
  .featured-art{
    position:relative;
    background:linear-gradient(160deg, var(--navy-900), var(--navy-950) 60%);
    min-height:280px;
    display:flex;
    align-items:flex-end;
  }
  .featured-art svg{ width:100%; height:auto; display:block; overflow:visible; }

  @keyframes sunPulse{
    0%,100%{ opacity:.9; transform:scale(1); }
    50%{ opacity:.62; transform:scale(1.1); }
  }
  @keyframes ringPulse{
    0%,100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.06); opacity:.7; }
  }
  @keyframes driftBack{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(-7px); }
  }
  @keyframes driftFront{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(6px); }
  }
  @keyframes strokeDraw{
    from{ stroke-dashoffset:220; }
    to{ stroke-dashoffset:0; }
  }
  .sun-glow{ transform-box:fill-box; transform-origin:center; animation:sunPulse 7s ease-in-out infinite; }
  .sun-ring{ transform-box:fill-box; transform-origin:center; animation:ringPulse 7s ease-in-out infinite; animation-delay:.3s; }
  .mtn-back{ transform-box:fill-box; transform-origin:center; animation:driftBack 17s ease-in-out infinite; }
  .mtn-front{ transform-box:fill-box; transform-origin:center; animation:driftFront 13s ease-in-out infinite; }
  .draw-icons path{ stroke-dasharray:220; stroke-dashoffset:220; animation:strokeDraw 1.6s ease-out forwards; }
  .draw-icons.g-delay path{ animation-delay:.45s; }
  .featured-body{
    padding:38px 40px;
    display:flex;
    flex-direction:column;
    gap:16px;
    justify-content:center;
  }
  .featured-body h2{
    font-size:clamp(1.5rem, 2.6vw, 1.9rem);
  }
  .featured-body p.excerpt{
    margin:0;
    color:var(--ink-soft);
    font-size:1rem;
    max-width:46ch;
  }
  .meta-row{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:'IBM Plex Mono', monospace;
    font-size:.74rem;
    color:var(--ink-faint);
  }
  .meta-row .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-faint); }
  .read-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:700;
    font-size:.92rem;
    text-decoration:none;
    color:var(--ink);
    margin-top:4px;
  }
  .read-link svg{ transition:transform .15s ease; }
  .read-link:hover svg{ transform:translateX(3px); }

  /* ---------- category rail ---------- */
  .cat-rail{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding-block:8px 4px;
  }
  .pill{
    font-family:'IBM Plex Mono', monospace;
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.04em;
    padding:7px 14px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  }
  .pill:hover{ border-color:var(--accent); color:var(--ink); transform:translateY(-1px); }
  .pill[aria-pressed="true"]{
    background:var(--pill-bg-active);
    border-color:var(--pill-bg-active);
    color:var(--pill-fg-active);
  }

  /* ---------- article grid ---------- */
  .grid-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:22px;
    flex-wrap:wrap;
    gap:10px;
  }
  .grid-head h3{ font-size:1.4rem; }
  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  @media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px){ .grid{ grid-template-columns:1fr; } }

  .card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--card-accent, var(--orange-500));
    transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(var(--card-accent-rgb,var(--orange-rgb)),.4); }
  .card:hover::before{ transform:scaleX(1); }
  .card-art{
    height:132px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(var(--card-accent-rgb, var(--orange-rgb)), .1);
    border-bottom:1px solid var(--border);
  }
  .card-art svg{ width:52px; height:52px; }
  .card-body{
    padding:20px 20px 22px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
  }
  .card-body h4{
    font-family:'Hanken Grotesk', sans-serif;
    font-weight:700;
    letter-spacing:-.01em;
    font-size:1.08rem;
    line-height:1.32;
    margin:0;
    color:var(--ink);
  }
  .card-body p{
    margin:0;
    color:var(--ink-soft);
    font-size:.9rem;
    flex:1;
  }

  /* ---------- CTA band ---------- */
  .cta-band{
    background:var(--navy-950);
    color:#fff;
    border-radius:18px;
    padding:40px 44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;
  }
  .cta-band::after{
    content:"";
    position:absolute;
    right:-60px; top:-60px;
    width:220px; height:220px;
    border-radius:50%;
    background:radial-gradient(circle, var(--orange-glow), transparent 70%);
    filter:blur(4px);
  }
  .cta-band::before{
    content:"";
    position:absolute;
    left:-80px; bottom:-100px;
    width:260px; height:260px;
    border-radius:50%;
    background:radial-gradient(circle, var(--indigo-glow), transparent 70%);
    filter:blur(4px);
  }
  .cta-band h3{ color:#fff; font-size:1.5rem; max-width:20ch; position:relative; }
  .cta-band p{ color:#bcb8e0; margin:8px 0 0; max-width:38ch; position:relative; }
  .cta-band .actions{ position:relative; display:flex; gap:12px; flex-wrap:wrap; }
  .btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:8px;
    border:1px solid rgba(255,255,255,.28);
    color:#fff; text-decoration:none; font-weight:600; font-size:.88rem;
  }
  .btn-ghost:hover{ border-color:#fff; }

  /* ---------- footer ---------- */
  footer{
    background:var(--navy-950);
    color:#a9a5d9;
    margin-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:32px;
    padding-block:44px 28px;
  }
  @media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-grid h5{
    font-family:'IBM Plex Mono', monospace;
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#7f7ba8;
    margin:0 0 14px;
  }
  .footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .footer-grid a{ text-decoration:none; color:#cfccec; font-size:.9rem; }
  .footer-grid a:hover{ color:#fff; }
  .compliance{
    border-top:1px solid rgba(255,255,255,.08);
    padding-block:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    font-family:'IBM Plex Mono', monospace;
    font-size:.74rem;
    color:#8a86bb;
  }
  .compliance strong{ color:#cfccec; font-weight:500; }
  .eho-badge{ display:flex; align-items:center; gap:8px; }

  .visually-hidden{
    position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0;
  }

  [hidden]{ display:none !important; }
  .post-page{ max-width:760px; margin:0 auto; padding-block:44px 64px; }
  .back-link{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono', monospace; font-size:.78rem;
    color:var(--ink-faint); text-decoration:none; margin-bottom:30px;
  }
  .back-link:hover{ color:var(--ink); }
  .post-head h1{ font-size:clamp(1.8rem, 4vw, 2.6rem); margin-top:12px; }
  .post-head .meta-row{ margin-top:18px; }
  .post-body{ margin-top:34px; }
  .post-body p{ color:var(--ink-soft); font-size:1.03rem; line-height:1.78; margin:0 0 20px; }
  .post-body h2{ font-family:'Hanken Grotesk', sans-serif; font-weight:700; letter-spacing:-.01em; font-size:1.42rem; margin:46px 0 16px; color:var(--ink); }
  .post-body strong{ color:var(--ink); }
  .post-body em{ font-style:italic; }
  .post-body hr{ border:none; border-top:1px solid var(--border); margin:38px 0; }
  .post-cta{ margin-top:52px; }
  .post-compliance{
    margin:26px 0 0; text-align:center;
    font-family:'IBM Plex Mono', monospace; font-size:.74rem; color:var(--ink-faint);
  }
  a.card{ text-decoration:none; color:inherit; cursor:pointer; }
  .read-more{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono', monospace; font-size:.78rem; font-weight:500;
    color:var(--accent-ink, var(--accent)); margin-top:2px;
    transition:gap .15s ease;
  }
  .card:hover .read-more{ gap:10px; }

  /* ============================================================
     BLOG HERO — typewriter headline
     Scoped to #home-hero so post pages and shared components are
     untouched. Palette per DocApply brand: #131029 / #1B163C /
     #251E4F / #4F4772 / #EEECF8 / #E4E1F2 / #F87418.
     ============================================================ */
  #home-hero{
    background:linear-gradient(160deg, #1B163C, #131029);
    border-top:1px solid #251E4F;
    padding-block:clamp(38px, 6vw, 68px) clamp(30px, 4vw, 48px);
  }
  #home-hero .hero-eyebrow{ color:#F87418; margin-bottom:18px; }
  #home-hero .hero-eyebrow::before{
    background:#F87418; box-shadow:0 0 0 4px rgba(248,116,24,.22);
  }

  /* The headline. .tw-stack layers every phrase in one grid cell, so the
     cell is always as tall as the tallest phrase at the current width —
     the hero cannot jump, and there is no cumulative layout shift. */
  #home-hero h1.tw{
    font-family:'Teko','Arial Narrow',Arial,sans-serif;
    text-transform:uppercase;
    font-weight:600;
    color:#EEECF8;
    font-size:clamp(2.1rem, 6.4vw, 4.25rem);
    line-height:1.04;
    letter-spacing:.012em;
    max-width:none;
    margin:0;
  }
  #home-hero .tw-stack{ display:grid; }
  #home-hero .tw-stack > *{ grid-area:1 / 1; }
  #home-hero .tw-ghost{ visibility:hidden; pointer-events:none; }
  #home-hero .tw-live{ display:block; }
  #home-hero .tw-out{
    color:#EEECF8;
    transition:opacity .38s ease;
  }
  /* Brand gradient on the headline text. Guarded: without background-clip
     support the solid #EEECF8 above still applies, so text can never vanish.
     The caret is a sibling, so it keeps its solid orange. */
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    #home-hero .tw-out{
      background-image:linear-gradient(102deg, #EEECF8 0%, #EEECF8 34%, #FFB273 74%, #F87418 100%);
      -webkit-background-clip:text;
              background-clip:text;
      -webkit-text-fill-color:transparent;
    }
  }

  #home-hero .tw-caret{
    display:inline-block;
    width:.055em; min-width:2px; height:.82em;
    margin-left:.07em;
    background:#F87418;
    vertical-align:-.04em;
    animation:tw-blink 1.05s steps(1, end) infinite;
  }
  @keyframes tw-blink{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }

  #home-hero .hero-deck{
    color:#E4E1F2;
    margin:18px 0 0;
    max-width:56ch;
  }
  #home-hero .hero-actions{ margin-top:26px; }
  #home-hero .hero-cta{
    background:linear-gradient(120deg, #F87418, #FF9548);
    color:#ffffff;
    font-family:'Teko','Arial Narrow',Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:.09em;
    font-size:1.32rem;
    font-weight:600;
    padding:11px 30px;
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 26px -10px rgba(248,116,24,.5);
  }
  #home-hero .hero-cta:hover{
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 18px 32px -10px rgba(248,116,24,.6);
  }
  #home-hero .hero-stats{ border-top:1px solid #251E4F; margin-top:34px; padding-top:26px; }

  /* Reduced motion: phrase one, held. Caret present but still. */
  @media (prefers-reduced-motion: reduce){
    #home-hero .tw-caret{ animation:none; opacity:1; }
  }
  #home-hero.tw-static .tw-caret{ animation:none; opacity:1; }

  /* Hero headline: mobile tuning. Long phrases wrap to 3 lines on a narrow
     phone, so ease the floor size and tighten leading; .tw-ghost still
     reserves the tallest phrase, so there is no shift as phrases rotate. */
  @media (max-width:640px){
    #home-hero h1.tw{
      font-size:clamp(1.75rem, 8.2vw, 2.6rem);
      line-height:1.06;
      letter-spacing:.006em;
    }
    #home-hero .hero-deck{ font-size:.98rem; }
    #home-hero .hero-cta{ font-size:1.18rem; padding:10px 24px; }
  }

  /* ============================================================
     HERO HEADLINE — final overrides (last in file, so these win)
     Fixes: oversized mobile type, gradient not applying, and any
     residual movement of the copy and cards below the hero.
     ============================================================ */

  /* 1. Size. Smaller ceiling, and a real floor so phones stay sane. */
  #home-hero h1.tw{
    font-size:clamp(1.5rem, 5vw, 3.3rem);
    line-height:1.08;
    letter-spacing:.01em;
    overflow-wrap:break-word;
  }

  /* 2. Locked container. min-height reserves whole lines of text at the
     current size, so the hero box is fixed before a single character types.
     Combined with .tw-ghost this pins the height twice over — the deck,
     CTA, stats and the card grid below cannot move. */
  #home-hero .tw-stack{
    min-height:2.16em;            /* 2 lines at 1.08 */
    align-content:start;
  }
  @media (max-width:900px){
    #home-hero .tw-stack{ min-height:3.24em; }   /* 3 lines */
  }
  @media (max-width:640px){
    #home-hero h1.tw{ font-size:clamp(1.25rem, 6vw, 1.85rem); }
    #home-hero .tw-stack{ min-height:4.32em; }   /* 4 lines */
  }
  @media (max-width:400px){
    #home-hero h1.tw{ font-size:1.3rem; }
    #home-hero .tw-stack{ min-height:4.32em; }
  }

  /* 3. Gradient, applied unconditionally then withdrawn only where the
     browser genuinely cannot clip a background to text. */
  #home-hero .tw-out{
    background-image:linear-gradient(100deg,#EEECF8 0%,#EEECF8 28%,#FFB273 68%,#F87418 100%);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
  @supports not ((-webkit-background-clip:text) or (background-clip:text)){
    #home-hero .tw-out{
      background-image:none;
      -webkit-text-fill-color:#EEECF8;
      color:#EEECF8;
    }
  }
  /* the caret paints a background box, not text, so it stays solid orange */
  #home-hero .tw-caret{ -webkit-text-fill-color:initial; }

  /* Gradient headline: Chrome needs a real background box to clip against.
     An inline span's fragments can end up with nothing painted, which makes
     -webkit-text-fill-color:transparent render as invisible text (Safari was
     more forgiving). inline-block gives it a box, and the transparent fill is
     now gated on the exact property required, so a browser that cannot clip
     keeps solid #EEECF8 instead of blank space. */
  #home-hero .tw-out{
    display:inline-block;
    padding-bottom:.06em;
    background-image:none;
    -webkit-text-fill-color:#EEECF8;
    color:#EEECF8;
  }
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    #home-hero .tw-out{
      background-image:linear-gradient(100deg,#EEECF8 0%,#EEECF8 28%,#FFB273 68%,#F87418 100%);
      background-repeat:no-repeat;
      background-size:100% 100%;
      -webkit-background-clip:text;
              background-clip:text;
      -webkit-text-fill-color:transparent;
      color:transparent;
    }
  }

  /* Compliance disclosure paragraph inside a post body. Boost Plus carries one;
     the other posts currently do not. Set apart from the prose, quieter. */
  .post-body .post-disclosure{
    margin-top:34px;
    padding:18px 20px;
    border:1px solid var(--border);
    border-left:3px solid var(--accent);
    border-radius:0 10px 10px 0;
    background:var(--surface-2);
    color:var(--ink-faint);
    font-size:.82rem;
    line-height:1.7;
  }

  /* Images and video inside a post body. The older posts carry no media, so
     these rules only apply where a post actually has some. */
  .post-body .post-media{
    margin:32px 0;
  }
  .post-body .post-media img,
  .post-body .post-media video{
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface-2);
  }
  .post-body .post-media figcaption{
    margin-top:10px;
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.72rem;
    letter-spacing:.04em;
    color:var(--ink-faint);
    text-align:left;
  }

  /* ============================================================
     MODERN BLOG ELEMENTS — search/filter, reading aids, sharing,
     related posts, theme toggle. All driven by blog.js; every rule
     uses the existing theme tokens so both palettes work.
     ============================================================ */

  /* --- trust strip: compliance as an editorial element, above the fold --- */
  .trust-strip{
    display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
    margin-top:26px; padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#a9a4d4;
  }
  .trust-strip span{ display:inline-flex; align-items:center; gap:7px; }
  .trust-strip span::before{
    content:""; width:5px; height:5px; border-radius:50%; background:#F87418; flex:none;
  }

  /* --- toolbar: search + result count --- */
  .blog-toolbar{
    display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
    margin:0 0 18px;
  }
  .search-wrap{ position:relative; flex:1 1 280px; max-width:420px; }
  .search-wrap svg{
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    width:15px; height:15px; color:var(--ink-faint); pointer-events:none;
  }
  #post-search{
    width:100%; padding:11px 14px 11px 38px;
    background:var(--surface); color:var(--ink);
    border:1px solid var(--border); border-radius:10px;
    font-family:inherit; font-size:.92rem;
  }
  #post-search::placeholder{ color:var(--ink-faint); }
  #post-search:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  #result-count{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.72rem; letter-spacing:.06em; color:var(--ink-faint); white-space:nowrap;
  }
  #no-results{
    padding:34px 20px; text-align:center; color:var(--ink-soft);
    border:1px dashed var(--border); border-radius:12px;
  }

  /* --- card reveal --- */
  .card.will-reveal{ opacity:0; transform:translateY(10px); }
  .card.revealed{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
  @media (prefers-reduced-motion: reduce){
    .card.will-reveal{ opacity:1; transform:none; }
  }

  /* --- theme toggle --- */
  #theme-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px; cursor:pointer;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    color:#f2f0fb; font-size:1rem; line-height:1;
  }
  #theme-toggle:hover{ background:rgba(255,255,255,.12); }

  /* --- reading progress --- */
  #read-progress{
    position:fixed; top:0; left:0; height:3px; width:100%; z-index:60;
    background:linear-gradient(90deg, var(--accent), #ffb06b);
    transform:scaleX(0); transform-origin:0 50%;
    will-change:transform; pointer-events:none;
  }

  /* --- breadcrumbs --- */
  .crumbs{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-faint); margin:0 0 14px;
  }
  .crumbs a{ color:var(--ink-soft); text-decoration:none; }
  .crumbs a:hover{ color:var(--accent); }
  .crumbs span{ margin:0 8px; opacity:.5; }

  /* --- on-this-page --- */
  #post-toc{
    margin:30px 0; padding:20px 22px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  }
  #post-toc > strong{
    display:block; font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:12px;
  }
  #post-toc ol{ margin:0; padding-left:20px; }
  #post-toc li{ margin:0 0 7px; }
  #post-toc a{
    color:var(--ink-soft); text-decoration:none; font-size:.92rem;
    border-bottom:1px solid transparent;
  }
  #post-toc a:hover{ color:var(--ink); }
  #post-toc a.active{ color:var(--accent); border-bottom-color:var(--accent); }
  @media (min-width:1200px){
    #post-toc{ position:sticky; top:18px; }
  }

  /* --- heading permalinks --- */
  .post-body h2{ position:relative; }
  .h-anchor{
    margin-left:10px; color:var(--accent); text-decoration:none;
    font-weight:600; opacity:0; transition:opacity .15s ease;
  }
  .post-body h2:hover .h-anchor, .h-anchor:focus{ opacity:1; }

  /* --- share row --- */
  #post-share{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    margin:34px 0 0; padding-top:20px; border-top:1px solid var(--border);
  }
  #post-share .share-label{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-faint); margin-right:4px;
  }
  #post-share a, #post-share button{
    font-family:inherit; font-size:.82rem; cursor:pointer;
    padding:7px 14px; border-radius:8px; text-decoration:none;
    background:var(--surface-2); border:1px solid var(--border); color:var(--ink-soft);
  }
  #post-share a:hover, #post-share button:hover{ border-color:var(--accent); color:var(--ink); }

  /* --- prev / next --- */
  #post-nav{ display:grid; gap:12px; grid-template-columns:1fr 1fr; margin:34px 0 0; }
  @media (max-width:640px){ #post-nav{ grid-template-columns:1fr; } }
  .pn-item{
    display:block; padding:16px 18px; border-radius:12px; text-decoration:none;
    background:var(--surface); border:1px solid var(--border);
  }
  .pn-item:hover{ border-color:var(--accent); }
  .pn-label{
    display:block; font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:6px;
  }
  .pn-title{ display:block; color:var(--ink); font-weight:600; font-size:.95rem; line-height:1.4; }

  /* --- related --- */
  #post-related{ margin:44px 0 0; }
  #post-related h3{ font-size:1.15rem; margin:0 0 14px; }
  .rel-grid{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }
  @media (max-width:760px){ .rel-grid{ grid-template-columns:1fr; } }
  .rel-item{
    display:block; padding:16px 18px; border-radius:12px; text-decoration:none;
    background:var(--surface); border:1px solid var(--border);
  }
  .rel-item:hover{ border-color:var(--accent); transform:translateY(-2px); }
  .rel-item{ transition:transform .15s ease, border-color .15s ease; }
  .rel-cat{
    display:block; font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent); margin-bottom:7px;
  }
  .rel-title{ display:block; color:var(--ink); font-weight:600; font-size:.92rem; line-height:1.4; }
  .rel-date{ display:block; margin-top:8px; font-size:.75rem; color:var(--ink-faint); }

  /* --- back to top --- */
  #to-top{
    position:fixed; right:18px; bottom:18px; z-index:55;
    width:44px; height:44px; border-radius:50%; cursor:pointer;
    background:var(--accent); color:#1a0f04; border:none; font-size:1.1rem;
    box-shadow:0 10px 24px -10px rgba(var(--orange-rgb),.7);
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  #to-top.show{ opacity:1; visibility:visible; transform:none; }