/* Shared, responsive renovation-story feature. */
.story-home { margin:42px clamp(22px,8.1vw,130px) 58px 0; }
.story-section { padding:clamp(62px,8vw,112px) clamp(22px,8vw,130px) 0; }
.story-section > .eyebrow { margin-bottom:16px; }
.story-section > h2 { max-width:none; margin:0 0 35px; }
.story-card { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); border:1px solid var(--line); background:var(--ink-2); }
.story-media { align-self:stretch; position:relative; width:100%; height:100%; aspect-ratio:16/9; min-height:200px; background:#070706; overflow:hidden; }
.story-poster { position:absolute; inset:0; display:block; width:100%; height:100%; padding:0; border:0; background:#27231e; color:#fff; text-align:left; cursor:pointer; }
.story-poster img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.story-poster::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%); pointer-events:none; }
.story-poster:hover img { transform:scale(1.025); }
.story-play { position:absolute; z-index:1; left:25px; bottom:24px; display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.story-play-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--copper-light); color:var(--ink); transition:background .2s ease; }
.story-play-icon svg { width:17px; height:17px; margin-left:3px; fill:currentColor; }
.story-poster:hover .story-play-icon { background:var(--ivory); }
.story-duration { position:absolute; z-index:1; right:17px; top:17px; padding:6px 8px; background:rgba(16,16,15,.8); font-family:var(--mono); font-size:10px; letter-spacing:.08em; }
.story-copy { padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; }
.story-kicker { margin:0 0 21px; color:var(--copper-light); font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.story-copy h3 { margin:0; color:var(--ivory); font-family:var(--serif); font-size:clamp(28px,3.2vw,46px); font-weight:500; letter-spacing:-.035em; line-height:1.13; }
.story-copy h3 span { display:block; }
.story-copy h3 span:first-child { color:var(--copper-light); font-style:italic; }
.story-description { margin:21px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.story-youtube { display:inline-flex; gap:10px; align-items:center; margin-top:25px; padding-bottom:7px; border-bottom:1px solid var(--copper); color:var(--ivory); font-family:var(--mono); font-size:10px; letter-spacing:.06em; }
.story-youtube:hover { color:var(--copper-light); }
.story-youtube b { color:var(--copper-light); font-size:16px; font-weight:400; }
.story-privacy { margin:14px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
.story-media iframe { display:block; position:absolute; inset:0; width:100%; height:100%; border:0; }
.story-poster:focus-visible { outline:3px solid var(--copper-light); outline-offset:-5px; }
.story-youtube:focus-visible, .story-media iframe:focus-visible { outline:2px solid var(--copper-light); outline-offset:4px; }
.story-gallery-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:32px clamp(22px,8.1vw,130px) 0 0; position:relative; }
.story-gallery-header::before { content:""; position:absolute; top:0; left:0; right:clamp(22px,8.1vw,130px); border-top:1px solid var(--line); }
.story-gallery-header h3 { margin:0; color:var(--ivory); font-family:var(--serif); font-size:clamp(28px,3.2vw,42px); font-weight:500; letter-spacing:-.025em; }
.projects .story-gallery-header + .carousel { margin-top:28px; }
html[lang="zh-CN"] .story-copy h3 { line-height:1.35; letter-spacing:0; }
html[lang="zh-CN"] .story-copy h3 span:first-child { font-style:normal; }
@media (max-width:1000px) {
  .story-card { grid-template-columns:1fr; }
  .story-media { height:auto; }
  .story-copy { padding:28px; }
  .story-copy h3 { font-size:36px; }
  .story-copy h3 span { display:inline; }
  .story-copy h3 span + span::before { content:" "; }
  .story-description { max-width:610px; margin-top:15px; }
  .story-kicker { margin-bottom:14px; }
}
@media (max-width:500px) {
  .story-home { margin-top:30px; margin-bottom:38px; }
  .story-section { padding:56px 22px 0; }
  .story-section > h2 { font-size:38px; line-height:1.15; margin-bottom:28px; }
  .story-copy { padding:25px 23px 27px; }
  .story-copy h3 { font-size:30px; }
  .story-copy h3 span { display:block; }
  .story-copy h3 span + span::before { content:none; }
  .story-play { left:17px; bottom:17px; gap:11px; font-size:9px; }
  .story-play-icon { width:45px; height:45px; }
  .story-duration { right:12px; top:12px; font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { .story-poster img, .story-play-icon { transition:none; } }