.videos-page { padding-bottom: 0; background: #fbf8f2; }
.videos-page .inner-site-header, .videos-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); }
.videos-page .site-header .nav-link::after, .videos-page .site-header.is-scrolled .nav-link::after { background: var(--color-jade); }
.videos-page .site-header .nav-link.active::after { transform: scaleX(1); }
.videos-page .site-header .nav-link.active { color: var(--color-navy); font-weight: 700; }
.mobile-subbar { background: rgba(246, 241, 232, .92); border-top: .0625rem solid rgba(220, 228, 232, .6); }
.mobile-subbar .container-xl { display: flex; min-height: 2.25rem; align-items: center; justify-content: space-between; gap: 1rem; color: var(--color-muted); font-size: .75rem; }
.mobile-subbar a { display: inline-flex; min-height: 2.25rem; align-items: center; gap: .3rem; color: var(--color-jade); font-weight: 650; text-decoration: none; }
.videos-main { padding: 0 0 4rem;}
.video-list-intro { max-width: 70rem; }
.video-list-intro h1 { max-width: 70rem; margin: 0; color: var(--color-navy-dark); font-weight: 500; line-height: 1.04; letter-spacing: -.025rem; }
.page-lead { max-width: 57rem; margin: 1.15rem 0 .8rem; color: var(--color-muted); font-size: 1.125rem; line-height: 1.65; }
.story-filter-panel { margin-top: clamp(2rem, 4vw, 3.25rem); padding: 1.75rem; background: #fff; border: .0625rem solid var(--color-border); border-radius: .75rem; box-shadow: 0 .2rem .85rem rgba(18, 59, 93, .045); }
.story-filter-controls { display: grid; grid-template-columns: minmax(18rem, 5fr) minmax(10rem, 3fr) minmax(8rem, 2fr) minmax(8rem, 2fr); gap: 1.25rem; align-items: end; }
.filter-field label, .category-filter legend { display: block; margin: 0 0 .4rem; color: var(--color-navy); font-size: .72rem; font-weight: 700; line-height: 1.2; }
.filter-input-wrap, .filter-select-wrap { position: relative; display: block; }
.filter-input-wrap > svg, .filter-select-wrap > svg { position: absolute; z-index: 1; top: 50%; width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--color-muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; pointer-events: none; transform: translateY(-50%); }
.filter-input-wrap > svg { left: .85rem; }
.filter-select-wrap > svg { right: .75rem; }
.filter-field input, .filter-field select { width: 100%; min-height: 3rem; color: var(--color-ink); background: #fefbf5; border: .0625rem solid var(--color-border); border-radius: .45rem; outline: 0; font-size: .82rem; }
.filter-field input { padding: .65rem .85rem .65rem 2.7rem; }
.filter-field select { padding: .65rem 2.5rem .65rem .85rem; appearance: none; }
.filter-field input:focus, .filter-field select:focus { border-color: var(--color-jade); box-shadow: 0 0 0 .1875rem rgba(20, 125, 116, .12); }
.category-filter { display: flex; align-items: center; gap: 1.25rem; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border: 0; border-top: .0625rem solid rgba(220, 228, 232, .75); }
.category-filter legend { width: auto; margin: 0; padding: 0; float: none; }
.story-filter-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.story-filter-chip { min-height: 2.75rem; padding: .55rem 1rem; color: var(--color-ink); background: #fefbf5; border: .0625rem solid var(--color-border); border-radius: .45rem; font-size: .76rem; font-weight: 650; }
.story-filter-chip:hover { border-color: var(--color-jade); }
.story-filter-chip.is-active { color: #fff; background: var(--color-jade); border-color: var(--color-jade); }
.story-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-bottom: 1rem; border-bottom: .0625rem solid var(--color-border); }
.story-results-heading > div { display: flex; align-items: center; gap: .8rem; }
.story-results-heading h2 { margin: 0; color: var(--color-navy-dark); }
.story-results-heading span { padding: .25rem .6rem; color: var(--color-jade); background: var(--color-cool); border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700; }
.story-results-heading p { margin: 0; color: var(--color-muted); font-size: .8rem; }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.story-card { display: flex; min-width: 0; flex-direction: column; background: #fff; border: .0625rem solid var(--color-border); border-radius: .75rem; box-shadow: 0 .15rem .75rem rgba(18, 59, 93, .045); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.story-card:hover { border-color: rgba(18, 59, 93, .35); box-shadow: 0 .75rem 2rem rgba(11, 38, 61, .1); transform: translateY(-.1875rem); }
.story-media { position: relative; display: block; aspect-ratio: 16 / 9; color: #fff; background: var(--color-navy-dark); overflow: hidden; }
.story-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(11, 38, 61, .25), transparent 45%, rgba(11, 38, 61, .48)); }
.story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.story-card:hover .story-media img { transform: scale(1.035); }
.story-source, .story-duration { position: absolute; z-index: 2; padding: .27rem .55rem; color: #fff; background: rgba(11, 38, 61, .86); border-radius: .2rem; font-size: .68rem; line-height: 1.2; }
.story-source { top: .75rem; left: .75rem; }
.story-duration { right: .75rem; bottom: .75rem; }
.story-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 3.3rem; height: 3.3rem; place-items: center; color: var(--color-navy); background: rgba(255, 255, 255, .94); border-radius: 50%; box-shadow: 0 .4rem 1rem rgba(11, 38, 61, .25); transform: translate(-50%, -50%); transition: transform .25s ease; }
.story-media:hover .story-play { transform: translate(-50%, -50%) scale(1.08); }
.story-play svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.story-card-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: 1.45rem; }
.story-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; font-size: .72rem; }
.story-meta > span { color: var(--color-jade); font-weight: 750; letter-spacing: .08rem; text-transform: uppercase; }
.story-meta time { color: var(--color-muted); }
.story-card h3 { min-height: 3.3rem; margin: 0; color: var(--color-navy-dark); }
.story-place { display: flex; align-items: center; gap: .35rem; margin: .7rem 0 0; color: var(--color-muted); font-size: .8rem; }
.story-place svg { width: 1rem; min-width: 1rem; fill: none; stroke: var(--color-jade); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.story-card-footer { margin-top: 1.2rem; padding-top: 1rem; border-top: .0625rem solid var(--color-border); }
.story-card-footer > span { display: block; margin-bottom: .3rem; color: var(--color-muted); font-size: .66rem; font-weight: 650; letter-spacing: .08rem; text-transform: uppercase; }
.related-journey { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; gap: .75rem; color: var(--color-navy); font-size: .8rem; font-weight: 650; text-decoration: none; }
.related-journey:hover { color: var(--color-jade); }
.watch-story { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .35rem; margin-top: .25rem; color: var(--color-cinnabar); font-size: .82rem; font-weight: 700; text-decoration: none; }
.watch-story:hover { color: #a83326; text-decoration: underline; text-underline-offset: .2rem; }
.empty-results { margin-top: 2rem; padding: clamp(1.5rem, 4vw, 3rem); background: #fff; border: .0625rem solid var(--color-border); border-radius: .75rem; text-align: center; }
.empty-results h2 { color: var(--color-navy-dark); }
.empty-results > p { color: var(--color-muted); }
.empty-actions { display: flex; justify-content: center; gap: .75rem; margin: 1.25rem 0; }
.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); }
.empty-recommendations { display: grid; max-width: 48rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 auto; }
.empty-recommendations a { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: .65rem; color: var(--color-navy); background: var(--color-sand); border-radius: .45rem; font-size: .78rem; font-weight: 650; text-decoration: none; }
.story-bridge { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding: 2rem; background: var(--color-cool); border: .0625rem solid #cfe7e7; border-radius: .75rem; }
.story-bridge h2 { margin-bottom: .35rem; color: var(--color-navy-dark); }
.story-bridge p { margin: 0; color: var(--color-muted); }
.story-bridge > div:last-child { display: flex; flex: 0 0 auto; gap: .75rem; }
.video-footer { margin-top: 0; }
.video-footer .footer-top { grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.7fr); }
.video-footer .footer-nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.video-footer .footer-nav-grid a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: .25rem; }
@media (max-width: 1199.98px) {
  .story-filter-controls { grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(8rem, 1fr)); }
}
@media (max-width: 991.98px) {
  .story-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-search { grid-column: 1 / -1; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-card h3 { min-height: 0; }
  .story-bridge { align-items: flex-start; flex-direction: column; }
  .video-footer .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .videos-main { padding: 1.5rem 0 3.5rem; }
  .video-list-intro h1 { line-height: 1.06; }
  .page-lead { margin-top: .85rem; font-size: 1rem; line-height: 1.6; }
  .story-filter-panel { display: flex; margin-top: 1.5rem; padding: 1.25rem; flex-direction: column; }
  .story-filter-controls { display: contents; }
  .filter-search { order: 1; }
  .story-filter-controls .filter-field:not(.filter-search) { margin-top: .85rem; order: 3; }
  .filter-field label, .category-filter legend { color: var(--color-navy); font-size: .7rem; letter-spacing: .08rem; text-transform: uppercase; }
  .filter-field input, .filter-field select { min-height: 3rem; font-size: .875rem; }
  .category-filter { display: block; margin-top: .85rem; padding-top: 0; border-top: 0; order: 2; }
  .category-filter legend { margin-bottom: .45rem; }
  .story-filter-chips { flex-wrap: nowrap; margin-inline: -.25rem; padding: .1rem .25rem .35rem; overflow-x: auto; scrollbar-width: thin; }
  .story-filter-chip { min-height: 2.75rem; flex: 0 0 auto; border-radius: var(--radius-pill); }
  .story-results-heading { align-items: flex-end; margin-top: 1.75rem; }
  .story-results-heading > p { max-width: 7rem; font-size: .7rem; line-height: 1.35; text-align: right; }
  .story-grid { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.25rem; }
  .story-card-body { padding: 1rem; }
  .story-place, .story-meta { font-size: .75rem; }
  .story-card-footer { margin-top: .8rem; padding-top: .75rem; }
  .related-journey { min-height: 3rem; padding: .5rem .65rem; background: var(--color-sand); border: .0625rem solid #e5ddd0; border-radius: .4rem; }
  .watch-story { width: 100%; min-height: 3rem; justify-content: center; margin-top: .7rem; color: #fff; background: var(--color-navy); border-radius: .45rem; }
  .watch-story:hover { color: #fff; background: var(--color-navy-dark); text-decoration: none; }
  .empty-actions, .empty-recommendations, .story-bridge > div:last-child { grid-template-columns: 1fr; flex-direction: column; }
  .empty-actions .button, .story-bridge .button { width: 100%; }
  .empty-recommendations { display: grid; }
  .story-bridge { gap: 1.25rem; margin-top: 1.5rem; padding: 1.5rem; }
  .story-bridge p { font-size: .875rem; }
  .story-bridge > div:last-child { display: flex; width: 100%; }
  .video-footer { padding-top: 2.5rem; }
  .video-footer .footer-nav-grid { grid-template-columns: 1fr; }
}
@media (max-width: 389.98px) {
  .videos-page .site-header .brand span { font-size: .78rem; }
  .story-results-heading { align-items: flex-start; flex-direction: column; }
  .story-results-heading > p { max-width: none; text-align: left; }
}