/* The desktop story is a small photographic composition, sized to its viewport. */
.story-details{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;margin:24px 5px 0}
.story-detail{min-width:0;position:relative}
.story-detail:last-child{padding-top:24px}
.detail-frame{position:relative}
.story-detail-photo{aspect-ratio:1.7;border-radius:19px;box-shadow:0 12px 25px #4c322216}
.story-detail:last-child .story-detail-photo{aspect-ratio:1.45}
.story-detail-photo .expand-icon{width:27px;height:27px;bottom:10px;right:10px;font-size:15px}
.story-detail figcaption{display:flex;gap:10px;align-items:baseline;margin:11px 3px 0;font-size:9px;letter-spacing:.08em;line-height:1.6;text-transform:uppercase;color:var(--muted)}
.detail-number{font-variant-numeric:tabular-nums;color:var(--accent);font-size:8px}
.detail-title{min-width:0}
.story-detail-photo .photo-outgoing{position:absolute;inset:0;pointer-events:none;z-index:1}
.story-detail-photo .expand-icon{z-index:3}
.detail-fallback{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:var(--ink);font-size:11px}
.story-detail.is-loading .story-detail-photo{background:linear-gradient(120deg,#e5d5c5,#f5ebe1)}
.story-detail.is-loading .story-detail-photo img,.story-detail.is-unavailable .story-detail-photo img{visibility:hidden}
.story-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 4px 0}
.story-bottom .story-dots{margin-top:0}
.story-bottom .scroll-note{position:static}
.car-contour{position:absolute;z-index:-1;right:-8%;bottom:-73px;width:112%;height:auto;color:var(--accent);opacity:.12;pointer-events:none;stroke-width:1}
.car-contour g{stroke-dasharray:1600;stroke-dashoffset:0}
@media(min-width:701px){
  .story-layout{grid-template-columns:41% 55%;isolation:isolate}
  .story-chapter{min-height:0;padding:30px 0 55px}
  .story-visual{top:122px;padding-top:10px;isolation:isolate}
  .story-image{aspect-ratio:auto;height:clamp(250px,43svh,480px);max-height:none}
  .visual-label{margin-bottom:15px}
  .visual-caption{margin-top:17px}
  .visual-caption>div>span:last-child{font-size:11px;margin-top:5px}
  .story-detail-photo{height:clamp(110px,18svh,210px);aspect-ratio:auto}
  .story-detail:last-child .story-detail-photo{height:clamp(100px,15.7svh,183px);aspect-ratio:auto}
  .story-card h1{font-size:clamp(65px,7.1vw,104px)}
}
@media(min-width:701px) and (max-height:800px){
  .story-visual{top:112px}
  .story-image{height:clamp(185px,37svh,296px)}
  .story-details{margin-top:17px;gap:18px}
  .story-detail:last-child{padding-top:18px}
  .story-detail-photo{height:clamp(90px,16svh,128px)}
  .story-detail:last-child .story-detail-photo{height:clamp(80px,14svh,112px)}
  .story-bottom{margin-top:13px}
  .visual-label{font-size:8px;margin-bottom:12px}
  .visual-caption{margin-top:13px}
}
@media(min-width:701px) and (max-height:620px){
  .story-visual{top:100px}
  .story-image{height:28svh;min-height:140px}
  .story-details{gap:14px;margin-top:13px}
  .story-detail-photo{height:80px}
  .story-detail:last-child .story-detail-photo{height:68px}
  .story-detail figcaption{margin-top:7px;font-size:8px}
  .visual-caption .eyebrow,.visual-label{display:none}
  .story-bottom{margin-top:7px}
}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .story-detail-photo img{animation:detail-drift 1s linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .car-contour{animation:contour-appear 1s linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}
@keyframes detail-drift{from{transform:translate3d(0,3%,0) scale(1.07)}to{transform:translate3d(0,-3%,0) scale(1.07)}}
@keyframes contour-appear{from{opacity:.02;transform:translate3d(35px,14px,0)}to{opacity:.12;transform:translate3d(0,0,0)}}
@media(hover:hover) and (pointer:fine){
  .story-detail:first-child .photo-button:hover{transform:translateY(-5px) rotate(-1.5deg)}
  .story-detail:last-child .photo-button:hover{transform:translateY(-5px) rotate(1.5deg)}
}
@media(max-width:700px){.story-details,.car-contour{display:none}}
@media(prefers-reduced-motion:reduce){.story-detail .photo-button:hover{transform:none}}
