@font-face{font-family:Plex;src:url(../assets/IBMPlexSans-Regular.woff2)}
@font-face{font-family:PlexC;src:url(../assets/IBMPlexSansCondensed-Regular.woff2)}
*{box-sizing:border-box}
html{background:#050505;color:#f7f7f4}
body{margin:0;font-family:Plex;background:#050505}
a{color:inherit}
.detail-head{height:84px;border-bottom:2px solid #fff;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:relative;z-index:4;background:#050505}
.detail-head img{width:138px;display:block}
.detail-head a:last-child{font:12px PlexC;letter-spacing:.15em;text-transform:uppercase}
.split{display:grid;grid-template-columns:minmax(0,52vw) minmax(0,1fr);min-height:calc(100vh - 84px)}
.visual{margin:0;border-right:2px solid #fff;position:sticky;top:0;height:100vh;overflow:hidden;background:#090909;isolation:isolate}
.visual::after{content:"";position:absolute;inset:0;pointer-events:none;border:clamp(12px,2vw,30px) solid #050505;mix-blend-mode:multiply;opacity:.16;z-index:2}
.visual img{position:absolute;inset:0 auto 0 -16%;width:132%;max-width:none;height:100%;object-fit:cover;object-position:left center;display:block;filter:saturate(.96) contrast(1.04);transform:scale(1.04);transform-origin:left center}
.story{padding:9vw 7vw;background:#050505;position:relative;z-index:3}
.eyebrow,.code{font:11px PlexC;letter-spacing:.18em;text-transform:uppercase;color:#8d8d8d}
.story h1{font:300 clamp(60px,8vw,138px)/.78 PlexC;text-transform:uppercase;margin:.18em 0 .35em}
.lead{font-size:clamp(20px,2.2vw,34px);line-height:1.45;max-width:740px}
.rule{height:2px;background:#fff;margin:70px 0}
.story section{margin:0 0 60px;max-width:680px}
.story h2{font:300 38px PlexC;text-transform:uppercase;margin:0 0 16px}
.story p{color:#c4c4c4;line-height:1.9;font-size:17px}
.story section>p:first-of-type::first-letter{font-size:1.55em;line-height:1;color:#fff}
.bio-deck{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 70px;border:1px solid #454545;max-width:680px}
.bio-deck div{padding:18px;border-right:1px solid #454545}.bio-deck div:last-child{border-right:0}.bio-deck small{display:block;margin-bottom:7px;color:#777;font:10px PlexC;letter-spacing:.14em;text-transform:uppercase}.bio-deck strong{font:300 18px PlexC;text-transform:uppercase}
.timeline{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid #444}.timeline li{display:grid;grid-template-columns:76px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid #333;color:#c4c4c4;font-size:15px;line-height:1.55}.timeline time{color:#fff;font:600 12px PlexC;letter-spacing:.12em}
.source{font-size:13px!important}.source a{display:block;width:max-content;max-width:100%;margin:8px 0;text-underline-offset:5px}
.actions{display:flex;gap:16px;flex-wrap:wrap}
.actions a{padding:18px 24px;border:1px solid #fff;text-decoration:none;font:12px PlexC;letter-spacing:.14em;text-transform:uppercase}
.actions a:first-child{background:#fff;color:#000}
.next{border-top:2px solid #fff;margin-top:90px;padding-top:28px;display:flex;justify-content:space-between;gap:20px;font:12px PlexC;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:780px){
  .detail-head{height:70px}
  .split{grid-template-columns:1fr}
  .visual{position:relative;top:auto;height:62svh;border-right:0;border-bottom:2px solid #fff}
  .visual img{left:-22%;width:145%;height:100%;object-position:left center;transform:scale(1.04)}
  .story{padding:64px 22px 80px}
  .story h1{font-size:18vw}
  .story h2{font-size:32px}
  .story p{font-size:16px;line-height:1.85}
  .bio-deck{grid-template-columns:1fr}.bio-deck div{border-right:0;border-bottom:1px solid #454545}.bio-deck div:last-child{border-bottom:0}
  .timeline li{grid-template-columns:62px 1fr;gap:14px}
  .rule{margin:50px 0}
  .next{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:no-preference){
  .visual img{animation:portrait-arrive 1.1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes portrait-arrive{from{opacity:0;transform:translateX(-3%) scale(1.08)}to{opacity:1;transform:translateX(0) scale(1.04)}}
}