body[data-page="detail"] {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  body[data-page="detail"] { overflow-x: clip; }
}

.detail-main { background: #f5f8fb; }
.breadcrumb { height: 72px; display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: 11px; font-weight: 700; }
.breadcrumb a { display: flex; gap: 7px; color: var(--orbit-heading); transition: color .2s ease; }
.breadcrumb a:hover { color: var(--orbit-accent-dark); }
.breadcrumb strong { color: #6b7b90; }
.breadcrumb i { font-style: normal; }
.detail-hero { --detail-copy-min-height: 460px; min-height: var(--detail-copy-min-height); margin-inline: 0; overflow: hidden; border-radius: 24px; background: var(--navy); color: white; }
.detail-copy { width: 100%; min-height: var(--detail-copy-min-height); padding: 62px 64px 56px; display: flex; flex-direction: column; align-items: flex-start; }
.detail-badges { display: flex; gap: 8px; }
.detail-badges span { padding: 9px 13px; border-radius: 7px; background: var(--orbit-accent); color: white; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.detail-badges .outline { border: 1px solid rgba(255,255,255,.28); background: transparent; color: #cbd5e1; }
.detail-year { margin: 40px 0 14px; color: #7dd3fc; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.detail-copy h1 { margin: 0; font-size: clamp(4rem, 7vw, 7.2rem); line-height: .92; letter-spacing: -.075em; }
.detail-summary { max-width: 760px; margin: 22px 0 0; color: #b7c4d4; font-size: 17px; line-height: 1.72; }
.team-line { display: flex; align-items: center; gap: 20px; margin-top: auto; color: white; }
.team-line span { color: #8ca2bb; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.team-line strong { font-size: 16px; }
.detail-content-grid { margin-inline: 0; padding: 80px 0; }
.stack-card { padding: 48px; border: 1px solid var(--orbit-border); border-radius: 20px; background: white; color: var(--orbit-text); box-shadow: var(--shadow-sm); }
.section-row h2,
.links-section h2 { margin: 0; color: var(--orbit-heading); font-size: clamp(2.3rem, 4vw, 4.3rem); line-height: 1.12; letter-spacing: -.06em; }
.stack-card .section-kicker { display: block; margin-bottom: 24px; }
.stack-groups { overflow: hidden; border: 1px solid var(--orbit-border); border-radius: 12px; }
.stack-group { min-height: 72px; display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--orbit-border); }
.stack-group:last-child { border-bottom: 0; }
.stack-group h3 { margin: 0; padding: 21px 17px; display: flex; align-items: flex-start; border-right: 1px solid var(--orbit-border); color: #64748b; font-size: 10px; letter-spacing: .08em; }
.stack-group .tech-badges { align-content: center; gap: 6px; padding: 16px 18px; }
.stack-group .tech-badges span { padding: 6px 10.8px; border: 1px solid #dbe8f0; background: #edf5f9; color: #526579; font-size: 10.8px; transition: background .2s ease, transform .2s ease; }
.tech-badges span:hover,
.tech-badges span:focus { background: var(--orbit-accent); color: white; transform: translateY(-2px); outline: none; }
.video-section,
.links-section { padding: 100px 0; border-top: 1px solid var(--orbit-border); }
.section-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 45px; }
.section-row .section-kicker { display: block; margin-bottom: 18px; }
.section-row h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.section-index { color: #c5d0dc; font-size: 4rem; font-weight: 800; }
.video-frame { position: relative; overflow: hidden; width: 100%; border-radius: 22px; background: var(--navy); box-shadow: var(--shadow-lg); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.links-section { text-align: center; }
.links-section h2 { margin: 18px 0 42px; font-size: clamp(2.3rem, 4vw, 3.8rem); }
.external-links { margin-inline: 0; }
.external-links > a { min-height: 102px; display: flex; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--orbit-border); border-radius: 15px; background: white; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.external-links > a:hover { transform: translateY(-4px); border-color: var(--orbit-accent); box-shadow: var(--shadow-sm); }
.external-links b { color: var(--orbit-accent-dark); font-size: 24px; }
.external-links span { color: var(--orbit-heading); font-size: 13px; font-weight: 850; }
.external-links small { display: block; margin-bottom: 3px; color: #94a3b8; font-size: 8px; letter-spacing: .13em; }
.external-links i { margin-left: auto; font-style: normal; }
.empty-links { margin: 0; padding: 28px; border: 1px dashed #cbd5e1; border-radius: 15px; background: rgba(255,255,255,.55); color: #718096; font-size: 14px; font-weight: 750; }
.not-found { min-height: calc(100vh - 180px); display: grid; place-content: center; justify-items: center; text-align: center; }
.not-found span { color: var(--orbit-accent); font-size: 5rem; font-weight: 900; }
.not-found h1 { color: var(--orbit-heading); }

@media (max-width: 991px) {
  .detail-hero { --detail-copy-min-height: clamp(380px, 48vw, 430px); }
  .detail-copy { padding: 46px 48px 42px; }
}
@media (max-width: 767px) {
  .breadcrumb { height: 60px; }
  .breadcrumb > span, .breadcrumb i, .breadcrumb strong { display: none; }
  .detail-hero { --detail-copy-min-height: 0px; border-radius: 17px; }
  .detail-copy { padding: 30px 27px 28px; }
  .detail-badges span { padding: 8px 11px; font-size: 10px; }
  .detail-year { margin-top: 22px; }
  .detail-copy h1 { font-size: 3.5rem; }
  .detail-summary { margin-top: 14px; font-size: 14px; }
  .team-line { gap: 14px; margin-top: 26px; }
  .team-line span { font-size: 9px; }
  .team-line strong { font-size: 14px; }
  .detail-content-grid { padding: 60px 0; }
  .stack-card { padding: 30px 24px; }
  .stack-group { grid-template-columns: 88px minmax(0, 1fr); }
  .stack-group h3 { padding: 18px 12px; }
  .stack-group .tech-badges { padding: 13px 14px; }
  .video-section, .links-section { padding: 70px 0; }
  .section-row { align-items: start; }
  .section-index { font-size: 2.5rem; }
}