body.home-page{min-height:100dvh;display:flex;flex-direction:column;line-height:1.5}
body.home-page>main.home{max-width:1200px;width:100%;padding:0 32px;margin:auto;flex:1 0 auto;min-height:0}
.home h1,.home h2,.home h3,.home p{margin:0}
.home h1,.home h2,.home h3{font-family:var(--serif);font-weight:500;text-wrap:balance}
.home #welcome-title{--page-title-size:clamp(38px,4.2vw,58px);--page-title-leading:1.04;--page-title-tracking:-.025em;--page-title-space-after:0px}
.home h2{font-size:30px;line-height:1.15}
.home h3{font-size:25px;line-height:1.15;letter-spacing:-.01em}
.home .eyebrow{font:11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.home .hero{display:flex;justify-content:space-between;align-items:center;gap:60px;padding:44px 0 32px}
.home .hero-intro{font-size:18px;color:var(--soft);margin-top:20px;line-height:1.6}
.home .hero-aside{max-width:360px}
.home .hero-action{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.home .primary{background:var(--fg);color:var(--on-fill);border:1px solid var(--fg)}
.home .primary:hover{background:var(--soft)}
.home .free{font:13px var(--mono);color:var(--muted)}
.home .skill-line{font-size:14px;line-height:1.6;color:var(--muted);margin-top:20px;max-width:55ch;text-wrap:balance}
.home .hero-resume{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px}
.home a:focus-visible{outline:2px solid var(--fg);outline-offset:5px}
.home .learning-loop{list-style:none;display:flex;padding:19px 0;margin:0;border-block:1px solid var(--line);gap:18px;font:13px/1.5 var(--mono);color:var(--soft)}
.home .learning-loop li{display:flex;align-items:center;gap:8px}
.home .learning-loop li+li:before{content:'·';color:var(--muted);margin-right:16px}
.home .incidents{padding:34px 0 46px;scroll-margin-top:20px}
.home .section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px}
.home .section-heading>span{font:11px var(--mono);color:var(--muted)}
.home .incident-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;padding:0;margin:0}
.home .incident{display:grid;grid-template-columns:150px minmax(0,1fr) 250px;gap:24px;padding:24px;border:1px solid var(--line);border-radius:3px;background:var(--surface);min-width:0}
.home .incident-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font:11px/1.5 var(--mono)}
.home .discipline{color:var(--soft)}
.home .difficulty{color:var(--green)}
.home .incident[data-difficulty="Adept"] .difficulty{color:var(--amber)}
.home .incident-copy{position:relative;padding-left:38px;min-width:0}
.home .card-number{position:absolute;left:0;top:5px;font:12px var(--mono);color:var(--muted)}
.home .description{font-size:14px;line-height:1.65;color:var(--soft);margin-top:8px}
.home .incident-bottom{margin:auto 0;min-width:0}
.home .skills{font:11px/1.65 var(--mono);color:var(--muted);margin-bottom:14px}
.home .card-foot{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;font:11px/1.6 var(--mono);color:var(--muted)}
.home .card-foot a,.home .section-link{min-height:44px;display:inline-flex;align-items:center;gap:6px;color:var(--fg)}
.home .section-link{font:12px var(--mono);margin-top:16px}
.home .card-foot a:hover,.home .hero-resume:hover,.home .section-link:hover{text-decoration:underline;text-underline-offset:4px}
.home-page .site-footer{width:100%;margin-top:0;border-top:1px solid var(--line);font-size:13px}
.home-page .site-footer a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:760px){
  body.home-page>main.home{padding:0 20px}
  .home #welcome-title{--page-title-size:40px}.home h2,.home h3{font-size:26px}
  .home .hero{display:block;padding:34px 0 28px}
  .home .hero-intro{font-size:16px;margin-top:16px}
  .home .hero-aside{margin-top:22px;max-width:none}
  .home .skill-line{font-size:13px;margin-top:16px}
  .home .learning-loop{gap:0;justify-content:space-between;font-size:min(11px,3vw);padding:17px 0}
  .home .learning-loop li{gap:0}.home .learning-loop li+li:before{margin:0 min(7px,1.8vw)}
  .home .incidents{padding:28px 0 30px}
  .home .section-heading{display:block;margin-bottom:18px}.home .section-heading>span{display:block;margin-top:8px}
  .home .incident{display:flex;flex-direction:column;padding:22px;gap:0}
  .home .incident-top{flex-direction:row;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
  .home .incident-copy{padding-left:0}.home .card-number{display:none}
  .home .incident-bottom{margin-top:20px}
}
.home .preview{padding:44px 0 6px}
.home .preview-lead{font-size:16px;line-height:1.6;color:var(--soft);margin-top:10px}
.home .preview-frame{display:grid;margin-top:24px;border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow:hidden}
.home .preview-pane{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.home .preview-pane.on{opacity:1;visibility:visible;transition:opacity .35s}
.home .preview-pane img{display:block;width:100%;height:auto;aspect-ratio:1366/800}
.home #p1 img{aspect-ratio:12/5}
.home .preview-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 28px}
.home .preview-tabs{display:flex;flex-wrap:wrap;margin-left:-14px}
.home [role=tab]{position:relative;min-height:44px;padding:0 14px;border:0;background:none;color:var(--muted);font:12px var(--mono);cursor:pointer}
.home [role=tab]:hover,.home [role=tab][aria-selected=true]{color:var(--fg)}
.home [role=tab][aria-selected=true]::before,.home [role=tab][aria-selected=true]::after{content:'';position:absolute;left:14px;right:14px;bottom:7px;height:2px;background:var(--line)}
.home [role=tab][aria-selected=true]::after{background:var(--fg);transform-origin:left;animation:pv-fill 6s linear forwards}
@keyframes pv-fill{from{transform:scaleX(0)}}
.home .preview:is(.hold,:active,:has(:focus-visible)) [role=tab]::after{animation-play-state:paused}
@media(hover:hover){.home .preview:hover [role=tab]::after{animation-play-state:paused}}
.home .preview.still [role=tab]::after{animation:none}
.home .preview-lab{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;font:12px var(--mono);color:var(--muted)}
.home .preview-lab a{min-height:44px;display:inline-flex;align-items:center;color:var(--fg)}
@media(max-width:959px){.home .preview-frame{max-width:390px}.home .preview-pane img{aspect-ratio:700/1149}.home #p1 img{aspect-ratio:390/844}}
@media(prefers-reduced-motion:reduce){.home .preview-pane{transition:none!important}.home [role=tab][aria-selected=true]::after{animation:none}}
