/* Content-specific additions; the portfolio's existing type, colors and spacing are reused. */
.cyber-story{--story-space:48px}
.story-figure{margin:0}
.cyber-story .band{background:var(--bg)}
.cyber-story .cs-hero{padding-bottom:var(--story-space)}
.cyber-story .cs-row{padding-block:var(--story-space);margin-bottom:0}
.cyber-story .cs-img{padding-bottom:var(--story-space)}
.cyber-story main>.wrap:first-child>.cs-row:first-child{border-top:0}
.story-context{color:var(--pine);border-top-color:rgba(242,242,242,.25)}
.story-figure figcaption{max-width:1000px;padding:20px 0 0;color:var(--ink);font:15px/1.6 var(--ui)}
.prototype-figure{overflow:hidden;border-radius:32px;background:var(--card)}
.prototype-figure .img-card{border-radius:0;overflow:visible;background:none}
.prototype-figure figcaption{position:relative;max-width:none;padding:0 40px 40px}
.figure-stage{display:block;margin-bottom:6px;font:500 13px/1.4 var(--sans);letter-spacing:.04em}
.story-formula{padding:24px;border:1px solid rgba(23,36,27,.15);border-radius:16px;font-size:17px;line-height:1.6}
.story-formula .formula-label{margin-bottom:10px;font:500 13px/1.4 var(--ui)}
.story-formula span{padding:0 3px}
.story-transition{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 var(--story-space);overflow:hidden;border:1px solid rgba(23,36,27,.15);border-radius:24px;background:rgba(23,36,27,.15);color:var(--ink)}
.transition-step{padding:32px;background:var(--cream)}
.transition-label{margin-bottom:24px;font:400 13px/1.4 var(--ui)}
.transition-step h3{max-width:24ch;margin-bottom:16px;font:600 22px/1.35 var(--sans)}
.transition-step>p:last-child{max-width:40ch;font:16px/1.6 var(--sans)}
.hybrid-detail{padding:40px;background:var(--card);border-radius:32px;color:var(--ink)}
.detail-heading{margin:0 0 32px;font:500 13px/1.4 var(--ui)}
.screen-detail-link{display:block;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.07);background:#fff;cursor:zoom-in}
.screen-detail-link img{width:100%;max-width:100%;height:auto;border-radius:12px}
.screen-detail-link:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.detail-legend{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:32px 0 0;padding:0}
.detail-legend li{display:flex;gap:12px;align-items:flex-start}
.detail-legend li>span{padding-top:2px;font:400 13px/1.4 var(--ui)}
.detail-legend h4{margin:0 0 8px;font:600 15px/1.4 var(--sans)}
.detail-legend p{margin:0;font:14px/1.6 var(--sans)}
@media(max-width:820px){
  .cyber-story{--story-space:32px}
  .story-figure figcaption{padding-top:16px;font-size:14px}
  .prototype-figure{border-radius:20px}
  .prototype-figure figcaption{padding:0 16px 24px}
  .story-formula{padding:20px;font-size:16px}
  .story-transition{grid-template-columns:1fr;border-radius:20px}
  .transition-step{padding:24px}
  .transition-label{margin-bottom:16px}
  .transition-step h3{max-width:none;font-size:21px}
  .transition-step>p:last-child{max-width:none}
  .hybrid-detail{padding:24px 16px;border-radius:20px}
  .detail-heading{margin-bottom:24px}
  .detail-legend{grid-template-columns:1fr;gap:20px;margin-top:24px}
}