/* =====================================================================
   SECTIONS — recruiter-first homepage sections + readability +
   the inner-page mobile "split screen" overflow fix.
   Loaded last, so these rules win.
   ===================================================================== */

/* ---------- FIX: inner-page mobile split-screen (grid blowout) ----------
   Long code tokens in writeups forced the article grid wider than the
   viewport, so the paper background only covered part of the width.
   min-width:0 lets grid/flex items shrink; code scrolls inside its box. */
html,body{overflow-x:hidden;max-width:100%}
.article{min-width:0}
.article>*{min-width:0}                 /* kill the grid blowout */
.article-wrap{width:100%;overflow-x:clip}
.prose{max-width:100%}
.prose,.prose p,.prose li{overflow-wrap:anywhere;word-break:break-word}
.prose pre{white-space:pre;overflow-x:auto;max-width:100%}
.codeblock{max-width:100%;overflow:hidden}
.prose img,.cover-plate img,.gallery img{max-width:100%;height:auto}
.aside{min-width:0}
.aside .stack span,.aside .kv{overflow-wrap:anywhere}
@media(max-width:820px){
  .article{grid-template-columns:1fr;gap:30px}
  .aside{position:static}
  .article-hero h1{word-break:break-word;overflow-wrap:anywhere}
}

/* ---------- readability: tame excessive uppercase ----------
   Keep caps on SMALL labels (command-center character); remove it from
   longer reading text so recruiters aren't decoding all-caps. */
.prose{font-size:18px;line-height:1.7}
.section-sub{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--sub);
  text-transform:none;letter-spacing:0;margin-top:8px;max-width:62ch}
.section-head{align-items:flex-start}
.section-head .idx{padding-top:4px}

/* ---------- HERO (recruiter-first) ---------- */
.hero .eyebrow{text-transform:none;letter-spacing:.02em;font-size:14px;color:var(--signal);font-weight:700}
.hero-summary{font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.45;
  color:var(--paper);max-width:40ch;margin:24px 0 26px;font-weight:400}
.hero-roles{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:30px;max-width:62ch}
.roles-label{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ash);text-transform:none}
.role-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;text-transform:none;white-space:nowrap}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.02em;text-transform:none;
  padding:12px 22px;border:1.5px solid currentColor;border-radius:3px;transition:all .2s var(--ease);
  display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.primary{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.primary:hover{filter:brightness(1.12);background:var(--signal);color:#fff}
[data-theme="ink"] .btn{color:var(--paper)} [data-theme="ink"] .btn:hover{background:var(--paper);color:var(--ink)}
[data-theme="ink"] .btn.primary,[data-theme="paper"] .btn.primary{color:#fff}
.hero .telemetry{text-transform:none}
.scroll-cue{text-transform:none;letter-spacing:.04em}

/* ---------- 2. CREDIBILITY ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-paper);
  border:1px solid var(--line-paper);border-radius:4px;overflow:hidden}
.stat{background:var(--paper);padding:26px 22px}
.stat-n{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-l{font-family:var(--mono);font-size:12px;color:var(--ash-2);margin-top:6px;line-height:1.4;text-transform:none}
.cert-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:baseline}
.cert-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash-2)}
.certs{display:flex;flex-wrap:wrap;gap:8px}
.certs span{font-family:var(--mono);font-size:12px;color:var(--graphite);
  border:1px solid var(--line-paper);border-radius:999px;padding:6px 13px;text-transform:none}
@media(max-width:680px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- 3. FEATURED ---------- */
.feature-list{display:flex;flex-direction:column;gap:20px}
.fcard{border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3vw,34px);
  background:rgba(242,239,233,.015);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.fcard:hover{border-color:var(--ash-2)}
.fcard-tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--signal)}
.fcard-title{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.4rem);
  letter-spacing:-.02em;text-transform:none;margin:8px 0 10px;line-height:1}
.fcard-what{font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.4;color:var(--paper);max-width:60ch}
.fcard-body{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:24px 0}
.fblk .fk{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash-2);display:block;margin-bottom:7px}
.fblk p{font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--ash);text-transform:none}
.fcard-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;
  border-top:1px solid var(--line);padding-top:18px}
.ftools{display:flex;flex-wrap:wrap;gap:6px}
.ftools span{font-family:var(--mono);font-size:11px;color:var(--ash);border:1px solid var(--line);border-radius:3px;padding:4px 9px}
.flinks a{font-family:var(--mono);font-size:13px;color:var(--signal);white-space:nowrap}
.flinks a:hover{text-decoration:underline}
/* the lead (flagship) card gets extra emphasis */
.fcard.lead{border-color:var(--signal-dim);background:rgba(193,18,31,.04)}
.fcard.lead .fcard-title{font-size:clamp(2rem,4.2vw,3.4rem)}
.fcard.lead::before{content:"★ Flagship";font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:14px}
.see-all{margin-top:26px;font-family:var(--mono);font-size:13px}
.see-all a{color:var(--ash);border-bottom:1px solid var(--line);padding-bottom:2px}
.see-all a:hover{color:var(--signal)}
@media(max-width:760px){.fcard-body{grid-template-columns:1fr;gap:16px}}

/* ---------- 4. EXPERIENCE ---------- */
.xp-list{display:flex;flex-direction:column;gap:0}
.xp{display:grid;grid-template-columns:170px 1fr;gap:30px;padding:28px 0;border-top:1px solid var(--line-paper)}
.xp:first-child{border-top:none}
.xp-when{font-family:var(--mono);font-size:12.5px;color:var(--ash-2);font-variant-numeric:tabular-nums;padding-top:4px}
.xp-role{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.55rem);text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.xp-org{color:var(--ash-2);font-weight:600}
.xp-loc{font-family:var(--mono);font-size:11.5px;color:var(--ash-2);margin-top:4px}
.xp-summary{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--graphite);margin:12px 0 12px}
.xp-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.xp-points li{font-family:var(--serif);font-size:15.5px;line-height:1.5;color:#33363b;padding-left:18px;position:relative}
.xp-points li::before{content:"›";position:absolute;left:0;color:var(--signal);font-family:var(--mono)}
@media(max-width:680px){.xp{grid-template-columns:1fr;gap:8px}.xp-when{padding-top:0}}

/* ---------- 5. SKILLS ---------- */
.skill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.skill{background:var(--ink);padding:22px 24px}
.skill-cat{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--signal);margin-bottom:9px}
.skill-items{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ash);text-transform:none}
@media(max-width:680px){.skill-grid{grid-template-columns:1fr}}

/* ---------- 6. LEDGER readability ---------- */
.ledger-meta{text-transform:none;letter-spacing:.02em}
.lrow .ltitle{text-transform:none}              /* project titles in normal case = readable */
.lrow .lblurb{font-size:12.5px;line-height:1.55;color:var(--ash)}
.lclass,.lyear{text-transform:none}
.lstatus{text-transform:none}
.filt{text-transform:none;letter-spacing:.02em;font-size:12px}

/* ---------- contact ---------- */
.contact .big{text-transform:none;letter-spacing:-.02em}
.contact-lede{font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--ash);max-width:60ch;margin-bottom:28px}

/* ---------- marquee + section subheads on ink ---------- */
[data-theme="ink"] .section-sub{color:var(--ash)}
[data-theme="paper"] .section-sub{color:var(--ash-2)}

/* keep section numerals + h2 punchy but not shouty: h2 stays display caps (short, scannable) */
.section-head h2{text-transform:none}   /* Title Case headings read faster than ALL CAPS */

@media(prefers-reduced-motion:reduce){
  .fcard:hover{transform:none}
}