:root { --paper:#fdfdfc; --ink:#111214; --graphite:#5b606b; --line:#e4e8ef; --blue:#2457ff; --accent:#a8e4ff; --pad:clamp(22px,5vw,80px); font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.skip-link { position:fixed; top:-80px; left:12px; z-index:10; padding:10px 14px; background:var(--ink); color:white; }.skip-link:focus { top:12px; }
.detail-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad); border-bottom:1px solid var(--line); background:rgba(253,253,252,.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:5; }
.wordmark { font-size:18px; font-weight:760; letter-spacing:-.02em; }.back-link { font:11px/1 monospace; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--ink); padding-bottom:5px; }
main { overflow:hidden; }.detail-hero { padding:clamp(80px,11vw,170px) var(--pad) clamp(65px,8vw,115px); max-width:1600px; margin:auto; }
.detail-kicker { margin:0 0 24px; color:var(--blue); font:650 11px/1 monospace; text-transform:uppercase; letter-spacing:.1em; }
h1 { max-width:1260px; margin:0; font-size:clamp(62px,10vw,150px); line-height:.86; letter-spacing:-.075em; font-weight:740; }
.detail-dek { max-width:760px; margin:48px 0 55px; color:var(--graphite); font-size:clamp(19px,2vw,28px); line-height:1.5; }
.detail-meta { display:grid; grid-template-columns:repeat(3,minmax(130px,240px)); gap:30px; margin:0; padding-top:22px; border-top:1px solid var(--line); }
.detail-meta div { display:grid; gap:7px; }.detail-meta dt { color:var(--graphite); font:9px monospace; text-transform:uppercase; letter-spacing:.1em; }.detail-meta dd { margin:0; font-size:14px; }
.story-slot { position:relative; min-height:220px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:clamp(22px,4vw,58px); background:var(--accent); border:1px solid rgba(17,18,20,.08); }
.story-slot::before { content:"IMAGE SLOT"; position:absolute; left:inherit; top:clamp(22px,4vw,58px); font:10px monospace; letter-spacing:.12em; opacity:.55; }.story-slot b { font-size:clamp(20px,3vw,42px); }.story-slot span,.story-slot em { font:11px/1.5 monospace; font-style:normal; opacity:.66; }
.detail-cover { width:calc(100% - 2 * var(--pad)); max-width:1500px; margin:0 auto; aspect-ratio:16/9; border-radius:8px; }
.story-intro { max-width:1200px; margin:auto; padding:clamp(100px,12vw,180px) var(--pad); display:grid; grid-template-columns:.4fr 1.6fr; gap:7vw; }
.story-index { margin:8px 0; color:var(--blue); font:10px monospace; text-transform:uppercase; letter-spacing:.08em; }.story-intro h2 { margin:0 0 28px; font-size:clamp(40px,5.8vw,82px); line-height:.97; letter-spacing:-.055em; }.story-intro div p { max-width:780px; margin:0; color:var(--graphite); font-size:18px; line-height:1.75; }
.story-columns { padding:90px var(--pad); background:#f7f8fb; border-block:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(35px,6vw,100px); }.story-columns article { border-top:1px solid #cfd5df; padding-top:24px; }.story-columns b { color:var(--blue); font:10px monospace; }.story-columns h3 { margin:28px 0 18px; font-size:28px; letter-spacing:-.035em; }.story-columns p { margin:0; color:var(--graphite); line-height:1.65; }
.media-story { max-width:1500px; margin:auto; padding:clamp(90px,11vw,160px) var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:24px; }.media-story .story-slot { aspect-ratio:4/3; border-radius:8px; }.media-story .story-slot:first-child { grid-column:1/-1; aspect-ratio:16/9; }
.video-story { max-width:1500px; margin:0 auto 120px; padding:0 var(--pad); }.video-placeholder { aspect-ratio:16/9; border-radius:22px; display:grid; place-items:center; align-content:center; gap:22px; background:#090e19; color:white; position:relative; overflow:hidden; }.video-placeholder::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent 0 30px,rgba(80,112,255,.12) 31px 32px); }.video-placeholder>* { position:relative; }.video-placeholder span { font:10px monospace; letter-spacing:.12em; color:#9cabc4; }.video-placeholder button { width:74px; height:74px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:var(--blue); color:white; font-size:24px; padding-left:7px; }.video-placeholder p { margin:0; color:#cbd3df; }
.story-next { margin:0 var(--pad); padding:40px 0 80px; border-top:1px solid var(--line); display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }.story-next span { font:10px monospace; text-transform:uppercase; letter-spacing:.09em; color:var(--graphite); }.story-next a { max-width:760px; font-size:clamp(34px,5vw,74px); line-height:.95; letter-spacing:-.05em; text-align:right; }.story-next a::after { content:" →"; color:var(--blue); }
.video-placeholder { border-radius:8px; }
footer { display:flex; justify-content:space-between; gap:30px; padding:28px var(--pad); border-top:1px solid var(--line); font:10px monospace; text-transform:uppercase; letter-spacing:.07em; }
@media(max-width:760px){.detail-header{height:64px}.detail-meta{grid-template-columns:1fr}.detail-cover{width:calc(100% - 38px);border-radius:8px;aspect-ratio:4/3}.story-intro{grid-template-columns:1fr;gap:26px}.story-columns{grid-template-columns:1fr}.media-story{grid-template-columns:1fr}.media-story .story-slot:first-child{grid-column:auto;aspect-ratio:4/3}.story-next{align-items:flex-start;flex-direction:column}.story-next a{text-align:left}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}