.video-detail-page { padding-bottom: 0; background: #fbf8f2; }
.video-detail-page .inner-site-header, .video-detail-page .inner-site-header.is-scrolled { position: sticky; color: var(--color-navy); background: rgba(251, 248, 242, .98); border-bottom: .0625rem solid rgba(220, 228, 232, .85); box-shadow: none; backdrop-filter: blur(.75rem); }
.video-detail-page .site-header .nav-link::after, .video-detail-page .site-header.is-scrolled .nav-link::after { background: var(--color-jade); }
.video-detail-page .site-header .nav-link.active::after { transform: scaleX(1); }
.story-introduction { padding: 0 0 2.5rem; }
.detail-breadcrumb, .detail-mobile-breadcrumb { align-items: center; gap: .55rem; margin-bottom: 1.1rem; color: var(--color-muted); font-size: .78rem; line-height: 3rem;}
.detail-breadcrumb a, .detail-mobile-breadcrumb a { color: var(--color-jade); text-decoration: none; }
.detail-breadcrumb a:hover, .detail-mobile-breadcrumb a:hover { text-decoration: underline; text-underline-offset: .2rem; }
.detail-mobile-breadcrumb { display: flex; justify-content: space-between; }
.story-introduction h1 { max-width: 62rem; margin: 0; color: var(--color-navy-dark); font-weight: 500; line-height: 1.04; letter-spacing: -.025rem; }
.story-dek { max-width: 51rem; margin: 1rem 0 1.4rem; color: var(--color-muted); font-size: 1.125rem; line-height: 1.65; }
.story-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; padding-top: .8rem; border-top: .0625rem solid rgba(220, 228, 232, .85); color: var(--color-muted); font-size: .78rem; }
.story-metadata > span { display: inline-flex; min-height: 2rem; align-items: center; gap: .35rem; }
.story-metadata > span:nth-child(-n+2) { padding: .25rem .65rem; color: var(--color-navy); background: var(--color-cool); border-radius: var(--radius-pill); }
.story-metadata svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.player-section { padding: 2.5rem 0; background: var(--color-sand); }
.player-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: 2rem; align-items: start; }
.video-player { position: relative; aspect-ratio: 16 / 9; color: #fff; background: var(--color-navy-dark); border: .0625rem solid rgba(18, 59, 93, .2); border-radius: .75rem; box-shadow: 0 .35rem 1.2rem rgba(11, 38, 61, .12); overflow: hidden; }
.player-cover, .player-demo { position: absolute; inset: 0; }
.player-cover::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(11, 38, 61, .22), rgba(11, 38, 61, .54)); }
.player-cover img { width: 100%; height: 100%; object-fit: cover; }
.player-cover-copy { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 1.5rem; text-align: center; }
.player-button { position: relative; display: grid; width: 5rem; height: 5rem; place-items: center; color: var(--color-navy); background: rgba(255, 255, 255, .94); border: 0; border-radius: 50%; box-shadow: 0 .6rem 1.5rem rgba(11, 38, 61, .3); transition: background-color .2s ease, transform .2s ease; }
.player-button:hover { color: #fff; background: var(--color-cinnabar); transform: scale(1.06); }
.player-button svg { width: 2rem; height: 2rem; fill: currentColor; }
.player-button > span { position: absolute; right: 50%; bottom: -.45rem; min-width: 2.8rem; padding: .18rem .45rem; color: #fff; background: var(--color-navy); border-radius: var(--radius-pill); font-size: .62rem; transform: translateX(50%); }
.player-demo { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2rem; background: var(--color-navy-dark); text-align: center; }
.player-demo[hidden] { display: none; }
.player-demo > svg { width: 3.5rem; height: 3.5rem; margin-bottom: .75rem; fill: none; stroke: #99f2e7; stroke-width: 1.4; }
.player-demo h2 { margin: 0 0 .5rem; color: #fff; }
.player-demo p { max-width: 32rem; color: rgba(255, 255, 255, .72); font-size: .88rem; }
.button-outline-light { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .5); }
.button-outline-light:hover { color: var(--color-navy-dark); background: #fff; }
.glance-card { padding: 1.5rem; background: #fff; border: .0625rem solid var(--color-border); border-radius: .75rem; box-shadow: 0 .25rem 1rem rgba(11, 38, 61, .06); }
.glance-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: .85rem; border-bottom: .0625rem solid var(--color-border); }
.glance-heading h2 { margin: 0; color: var(--color-navy-dark); font-size: 1.5rem;}
.glance-heading svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--color-jade); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.glance-card dl { margin: .3rem 0 0; }
.glance-card dl > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: .0625rem solid rgba(220, 228, 232, .75); font-size: .78rem; }
.glance-card dt { color: var(--color-muted); font-weight: 550; }
.glance-card dd { margin: 0; color: var(--color-navy); font-weight: 650; text-align: right; }
.glance-card .source-status { align-items: flex-start; flex-direction: column; gap: .25rem; }
.glance-card .source-status dd { color: var(--color-cinnabar); font-size: .7rem; text-align: left; }
.share-block { padding-top: 1rem; }
.share-block > p:first-child { margin: 0 0 .55rem; color: var(--color-muted); font-size: .68rem; font-weight: 700; letter-spacing: .08rem; text-transform: uppercase; }
.share-block > div { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .5rem; }
.share-block button, .share-block a { display: inline-flex; min-width: 0; min-height: 2.75rem; align-items: center; justify-content: center; gap: .35rem; padding: .45rem .6rem; color: var(--color-navy); background: #fff; border: .0625rem solid var(--color-border); border-radius: .45rem; font-size: .7rem; font-weight: 650; text-decoration: none; }
.share-block button:hover, .share-block a:hover { border-color: var(--color-navy); }
.share-block svg { width: 1rem; min-width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.share-feedback { min-height: 1.2rem; margin: .45rem 0 0; color: var(--color-jade); font-size: .7rem; font-weight: 650; }
.editorial-section { padding: clamp(4rem, 7vw, 6rem) 0; background: #fff; }
.editorial-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: 1.5rem; align-items: start; }
.editorial-heading, .essay-first, .essay-second, .essay-footer { grid-column: 1; }
.editorial-heading { grid-row: 1; }
.editorial-heading h2 { color: var(--color-navy-dark); }
.essay-first { grid-row: 2; }
.essay-second { grid-row: 3; }
.editorial-grid > p { margin: 0; color: var(--color-muted); line-height: 1.75; }
.story-quote { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 1.75rem; background: var(--color-sand); border: .0625rem solid var(--color-border); border-left: .25rem solid var(--color-jade); border-radius: .65rem; }
.story-quote > span { display: block; height: 2rem; color: var(--color-jade); font-family: var(--font-display); font-size: 3.5rem; line-height: .85; opacity: .55; }
.story-quote > p { margin: .55rem 0 1rem; color: var(--color-navy); font-family: var(--font-display); font-size: 1.55rem; font-style: italic; line-height: 1.35; }
.story-quote footer { display: flex; justify-content: flex-end; gap: 1rem; padding-top: .75rem; border-top: .0625rem solid var(--color-border); color: var(--color-muted); font-size: .65rem; letter-spacing: .06rem; text-transform: uppercase; }
.story-quote cite { font-style: normal; }
.courtyard-figure { grid-column: 2; grid-row: 3 / span 2; margin: 0; background: #fff; border: .0625rem solid var(--color-border); border-radius: .65rem; overflow: hidden; }
.courtyard-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.courtyard-figure figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; color: var(--color-muted); font-size: .7rem; }
.courtyard-figure figcaption span:last-child { color: var(--color-jade); font-weight: 700; }
.essay-footer { grid-row: 4; }
.story-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.story-tags span { padding: .35rem .65rem; color: var(--color-jade); background: var(--color-cool); border-radius: .35rem; font-size: .72rem; font-weight: 650; }
.place-section { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--color-sand); border-block: .0625rem solid rgba(220, 228, 232, .75); }
.place-card { padding: clamp(1.5rem, 4vw, 2.75rem); background: #fff; border: .0625rem solid var(--color-border); border-radius: .75rem; box-shadow: 0 .25rem 1rem rgba(11, 38, 61, .05); }
.place-card h2 { color: var(--color-navy-dark); }
.place-card > p { max-width: 62rem; color: var(--color-muted); }
.place-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: .0625rem solid var(--color-border); }
.place-facts dt, .journey-facts dt { color: var(--color-muted); font-size: .65rem; font-weight: 700; letter-spacing: .07rem; text-transform: uppercase; }
.place-facts dd, .journey-facts dd { margin: .2rem 0 0; color: var(--color-navy); font-size: .78rem; font-weight: 700; }
.place-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.35rem; }
.button-outline { color: var(--color-navy); background: transparent; border-color: var(--color-navy); }
.button-outline:hover { color: var(--color-navy-dark); background: rgba(18, 59, 93, .05); }
.travel-story-section { position: relative; padding: clamp(4.5rem, 8vw, 7rem) 0; color: #fff; background: var(--color-navy-dark); overflow: hidden; }
.travel-story-section::after { position: absolute; top: -10rem; right: -8rem; width: 28rem; height: 28rem; content: ""; background: rgba(20, 125, 116, .14); border-radius: 50%; filter: blur(4rem); }
.travel-story-section .container-xl { position: relative; z-index: 1; }
.travel-story-heading { max-width: 52rem; margin-bottom: 2.5rem; }
.travel-story-heading h2 { margin-bottom: 1rem; color: #fff; }
.travel-story-heading > p:last-child { max-width: 45rem; margin: 0; color: rgba(255, 255, 255, .7); font-size: 1.05rem; }
.travel-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: stretch; }
.route-images { display: grid; min-height: 31rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.route-images img { width: 100%; height: 100%; object-fit: cover; border: .0625rem solid rgba(255, 255, 255, .13); border-radius: .7rem; }
.journey-card { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 4vw, 2.5rem); color: var(--color-ink); background: #fff; border-radius: .75rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18); }
.journey-label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.journey-label > span { padding: .35rem .65rem; color: var(--color-jade); background: var(--color-cool); border-radius: var(--radius-pill); font-size: .68rem; font-weight: 750; letter-spacing: .06rem; text-transform: uppercase; }
.journey-label small { color: var(--color-muted); font-size: .68rem; }
.journey-card h3 { margin: 0 0 .45rem; color: var(--color-navy-dark); }
.journey-route { color: var(--color-muted); }
.journey-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; padding: 1rem; background: var(--color-sand); border: .0625rem solid #e5ddd0; border-radius: .45rem; }
.deposit-box { padding: 1rem; background: #fffaf4; border-left: .25rem solid var(--color-cinnabar); }
.deposit-box > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.deposit-box strong { color: var(--color-navy); font-size: .82rem; }
.deposit-box b { color: var(--color-cinnabar); font-family: var(--font-display); font-size: 1.45rem; }
.deposit-box p { margin: .5rem 0 0; color: var(--color-muted); font-size: .72rem; line-height: 1.5; }
.journey-actions { display: flex; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: .0625rem solid var(--color-border); }
.journey-actions .button:first-child { flex: 1; }
.continue-section { padding: clamp(4rem, 7vw, 6rem) 0; background: #fff; }
.continue-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.continue-heading h2 { color: var(--color-navy-dark); }
.continue-heading > p { max-width: 32rem; margin: 0; color: var(--color-muted); font-size: .82rem; }
.continue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.continue-grid article { position: relative; display: flex; min-height: 17rem; flex-direction: column; padding: 1.5rem; background: #fff; border: .0625rem solid var(--color-border); border-radius: .65rem; box-shadow: 0 .15rem .8rem rgba(11, 38, 61, .045); }
.continue-icon { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--color-jade); }
.continue-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.card-eyebrow { margin: 0 0 .6rem; color: var(--color-jade); font-size: .68rem; font-weight: 750; letter-spacing: .08rem; text-transform: uppercase; }
.continue-grid h3 { color: var(--color-navy-dark); }
.continue-grid article > p:not(.card-eyebrow) { color: var(--color-muted); font-size: .82rem; }
.continue-grid footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: .0625rem solid var(--color-border); font-size: .72rem; }
.continue-grid footer span { color: var(--color-muted); }
.continue-grid footer a { color: var(--color-jade); font-weight: 700; text-decoration: none; }
.watch-next-section { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--color-sand); border-top: .0625rem solid rgba(220, 228, 232, .75); }
.watch-next-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.watch-next-heading h2 { color: var(--color-navy-dark); }
.watch-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.next-story-card { display: block; background: #fff; border: .0625rem solid var(--color-border); border-radius: .65rem; overflow: hidden; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.next-story-card:hover { color: inherit; box-shadow: var(--shadow-card); transform: translateY(-.1875rem); }
.next-story-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.next-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.next-story-card:hover img { transform: scale(1.035); }
.next-story-media small { position: absolute; right: .65rem; bottom: .65rem; padding: .25rem .45rem; color: #fff; background: rgba(11, 38, 61, .84); border-radius: .2rem; font-size: .65rem; }
.next-story-media b { position: absolute; top: 50%; left: 50%; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--color-navy); background: rgba(255, 255, 255, .94); border-radius: 50%; font-size: .75rem; transform: translate(-50%, -50%); }
.next-story-copy { display: flex; flex-direction: column; padding: 1.2rem; }
.next-story-copy small { color: var(--color-jade); font-size: .66rem; font-weight: 750; letter-spacing: .07rem; text-transform: uppercase; }
.next-story-copy strong { margin: .35rem 0; color: var(--color-navy-dark); font-family: var(--font-display); font-size: 1.2rem; font-weight: 550; line-height: 1.25; }
.next-story-copy > span { color: var(--color-muted); font-size: .78rem; }
.detail-footer .footer-top { grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.7fr); }
.detail-footer .footer-nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-footer a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: .25rem; }
@media (max-width: 991.98px) {
  .player-layout, .travel-story-grid { grid-template-columns: 1fr; }
  .editorial-grid { grid-template-columns: minmax(0, 1fr) minmax(17rem, .75fr); column-gap: 2rem; }
  .route-images { min-height: 24rem; }
  .detail-footer .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .story-introduction { padding: 1.25rem 0 1.5rem; }
  .story-dek { font-size: 1rem; }
  .story-metadata { gap: .4rem .65rem; font-size: .74rem; }
  .credit-status { width: 100%; }
  .player-section { padding: 1.25rem 0 2.5rem; }
  .player-layout { gap: 1.25rem; }
  .player-button { width: 3.75rem; height: 3.75rem; }
  .player-demo { padding: 1rem; }
  .player-demo > svg { width: 2.25rem; height: 2.25rem; }
  .player-demo p { margin-bottom: .55rem; font-size: .7rem; }
  .player-demo .button { min-height: 2.75rem; padding-block: .55rem; }
  .glance-card { padding: 1.25rem; }
  .glance-card dl > div { min-height: 2.75rem; }
  .share-block > div { grid-template-columns: repeat(3, 1fr); }
  .editorial-section, .place-section, .continue-section, .watch-next-section { padding: 4rem 0; }
  .editorial-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  .editorial-heading, .essay-first, .story-quote, .courtyard-figure, .essay-second, .essay-footer { grid-column: 1; grid-row: auto; }
  .editorial-heading { order: 1; }
  .essay-first { order: 2; }
  .story-quote { order: 3; padding: 1.25rem; }
  .courtyard-figure { order: 4; }
  .essay-second { order: 5; }
  .essay-footer { order: 6; }
  .story-quote > p { font-size: 1.3rem; }
  .place-card { gap: 1.5rem; padding: 1.25rem; }
  .place-facts { grid-template-columns: 1fr; }
  .place-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: .0625rem solid rgba(220, 228, 232, .75); }
  .place-actions { display: grid; grid-template-columns: 1fr; }
  .place-actions .button { width: 100%; }
  .travel-story-section { padding: 4.5rem 0; }
  .route-images { min-height: 0; height: 12rem; aspect-ratio: auto; gap: .65rem; }
  .route-images img { min-height: 0; }
  .journey-card { padding: 1.25rem; }
  .journey-facts { gap: .6rem; }
  .journey-actions { flex-direction: column; }
  .journey-actions .button { width: 100%; }
  .continue-heading, .watch-next-heading { align-items: flex-start; flex-direction: column; }
  .continue-grid, .watch-next-grid { grid-template-columns: 1fr; }
  .continue-grid article { min-height: 14rem; }
  .watch-next-heading .text-link { margin-top: -.75rem; }
  .detail-footer .footer-nav-grid { grid-template-columns: 1fr; }
}
@media (max-width: 389.98px) {
  .story-metadata > span:nth-child(3) { width: 100%; }
  .share-block span { font-size: .66rem; }
  .route-images { grid-template-columns: 1fr; aspect-ratio: auto; }
  .route-images img { aspect-ratio: 16 / 9; }
  .journey-facts { grid-template-columns: 1fr; }
}