/* ===========================================================================
   "See the video": the block in a story, and the window it opens.
   ===========================================================================

   The block is an anchor to the video wrapped round a poster on this server,
   with nothing but spans inside it. The story sanitizer allows no <button>,
   no <video>, no <svg> and no data-* attributes, so the play mark is drawn
   here and the player is built by video-block.js. If that script never runs,
   the anchor still takes the reader to the video.

   SEPARATE FROM THE STORY'S OWN VIDEO. That is #video-container/#news-video
   at the top of the page, or .osc-vvideo in the corner for an upright one.
   Nothing here uses an id, every class starts osc-watch, and the window sits
   in the browser's top layer, above the corner player. A story can carry both.

   `not-prose` on the block takes it out of Tailwind Typography, whose link,
   image and margin rules would otherwise reach inside it. Every colour is set
   on the element that shows it: this site's element rules beat inheritance,
   which is how dark panels have lost their white text before.
   ========================================================================= */

.osc-watch {
    container-type: inline-size;
    position: relative;
    /* Never squeezed in beside a floated photo or the drop cap. */
    clear: both;
    margin: 34px 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #14243a 0%, #1f4e79 100%);
    box-shadow: 0 12px 30px rgba(12, 26, 43, .28);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

/* The same bright rule the other inserts carry: the paper speaking, not the story. */
.osc-watch::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #8fc3f2, #f6c756 60%, #8fc3f2);
    pointer-events: none;
}

.osc-watch:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(12, 26, 43, .36);
}

.osc-watch .osc-watch-link,
.osc-watch .osc-watch-link:hover,
.osc-watch .osc-watch-link:focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    color: #ffffff;
    text-decoration: none;
    font-weight: inherit;
}

.osc-watch .osc-watch-link:focus-visible {
    outline: 3px solid #f6c756;
    outline-offset: -3px;
}
/* The ring belongs round the whole card; the card clips its own children. */
.osc-watch:has(.osc-watch-link:focus-visible) {
    box-shadow: 0 0 0 3px #f6c756, 0 12px 30px rgba(12, 26, 43, .28);
}

/* ---- The poster ------------------------------------------------------- */

.osc-watch .osc-watch-poster {
    position: relative;
    display: block;
    /* Width stated, not left to the aspect ratio: beside a teaser taller than
       the picture the poster is stretched to the row's height, and an auto
       width would then be worked out from that height and run over the words. */
    width: 100%;
    align-self: stretch;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b1626;
}

.osc-watch .osc-watch-poster img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.osc-watch:hover .osc-watch-poster img {
    transform: scale(1.035);
}

/* A shade along the foot, so the running time reads against a white sky. */
.osc-watch .osc-watch-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 16, 28, 0) 55%, rgba(8, 16, 28, .55) 100%);
    pointer-events: none;
}

/* Drawn, not an image: no <svg> survives the sanitizer. */
.osc-watch .osc-watch-play {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(10, 22, 38, .55);
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.osc-watch .osc-watch-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #ffffff;
    transition: border-color .25s ease;
}

.osc-watch:hover .osc-watch-play,
.osc-watch .osc-watch-link:focus-visible .osc-watch-play {
    transform: scale(1.08);
    background-color: #f6c756;
    border-color: #f6c756;
}

.osc-watch:hover .osc-watch-play::after,
.osc-watch .osc-watch-link:focus-visible .osc-watch-play::after {
    border-left-color: #14243a;
}

.osc-watch .osc-watch-time {
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(5, 10, 18, .78);
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

/* ---- The words -------------------------------------------------------- */

.osc-watch .osc-watch-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 18px 20px 21px;
}

.osc-watch .osc-watch-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8fc3f2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* A small gold play mark ahead of the words. */
.osc-watch .osc-watch-kicker::before {
    content: "";
    flex: 0 0 auto;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #f6c756;
}

.osc-watch .osc-watch-title {
    display: block;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.28;
}

.osc-watch .osc-watch-teaser {
    display: block;
    color: #cfe0f3;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.55;
}

/* Saving a story sets quoted speech in italics, inside this block too, and
   the article's own rule colours every <em> dark grey -- on navy. Two classes
   deep so it wins whichever stylesheet loads last. */
.osc-watch .osc-watch-text em,
.osc-watch .osc-watch-text i,
.osc-watch .osc-watch-text strong,
.osc-watch .osc-watch-text b {
    color: inherit;
    font-weight: inherit;
}
.osc-watch .osc-watch-text em,
.osc-watch .osc-watch-text i {
    font-style: italic;
}

/* With no headline, the teaser is the line the block leads with. */
.osc-watch .osc-watch-kicker + .osc-watch-teaser {
    color: #ffffff;
    font-size: 1.12rem;
    line-height: 1.42;
}

/* Side by side once the column is wide enough to give both room. Measured
   on the block, not the window: the story column is narrower than the
   screen by a sidebar on some pages and not on others. */
@container (min-width: 560px) {
    .osc-watch .osc-watch-link {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    }
    .osc-watch .osc-watch-text {
        padding: 22px 26px;
    }
}

/* ---- Upright video ---------------------------------------------------- */

/* A phone-shaped poster across the column would push the story a screen
   down, so an upright video keeps its poster narrow and the words beside it
   at every width. */
.osc-watch.osc-watch-tall .osc-watch-link {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
}

.osc-watch.osc-watch-tall .osc-watch-poster {
    aspect-ratio: 9 / 16;
}

@container (min-width: 560px) {
    .osc-watch.osc-watch-tall .osc-watch-link {
        grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    }
    .osc-watch.osc-watch-tall .osc-watch-text {
        padding: 22px 30px;
    }
}

@container (max-width: 420px) {
    .osc-watch.osc-watch-tall .osc-watch-text {
        padding: 16px 14px 16px 16px;
    }
    .osc-watch.osc-watch-tall .osc-watch-title {
        font-size: 1.04rem;
    }
    .osc-watch.osc-watch-tall .osc-watch-teaser {
        font-size: .88rem;
        line-height: 1.5;
    }
    .osc-watch.osc-watch-tall .osc-watch-kicker + .osc-watch-teaser {
        font-size: .98rem;
    }
    .osc-watch.osc-watch-tall .osc-watch-play {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
    }
    .osc-watch.osc-watch-tall .osc-watch-play::after {
        border-width: 9px 0 9px 15px;
    }
}

@container (max-width: 360px) {
    .osc-watch .osc-watch-play {
        width: 58px;
        height: 58px;
        margin: -29px 0 0 -29px;
    }
    .osc-watch .osc-watch-play::after {
        border-width: 11px 0 11px 17px;
    }
}

/* ===========================================================================
   The window
   ===========================================================================

   A native <dialog>, opened with showModal(): the browser keeps focus inside
   it, closes it on Escape, and puts it in the top layer above everything --
   the fixed header and the story's own corner player included.

   Tailwind's reset takes away a dialog's centring, so the geometry is stated
   outright. The dialog itself covers the whole window (a click on it, outside
   the panel, closes it) and centres the panel inside.
   ========================================================================= */

html.osc-watch-locked {
    overflow: hidden;
    /* The scrollbar's space is kept while it is hidden, so the page behind
       does not jump sideways on a computer that has one. */
    scrollbar-gutter: stable;
}

.osc-watch-modal {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(12px, 3vw, 32px);
    border: 0;
    background: transparent;
    color: #ffffff;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    /* Leaving is quicker than arriving. */
    transition: opacity .18s ease, overlay .18s ease allow-discrete, display .18s ease allow-discrete;
}

.osc-watch-modal[open] {
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity .28s ease, overlay .28s ease allow-discrete, display .28s ease allow-discrete;
}

@starting-style {
    .osc-watch-modal[open] {
        opacity: 0;
    }
}

.osc-watch-modal::backdrop {
    background: rgba(4, 9, 16, 0);
    transition: background-color .18s ease, overlay .18s ease allow-discrete, display .18s ease allow-discrete;
}

.osc-watch-modal[open]::backdrop {
    background: rgba(4, 9, 16, .88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .28s ease, overlay .28s ease allow-discrete, display .28s ease allow-discrete;
}

@starting-style {
    .osc-watch-modal[open]::backdrop {
        background: rgba(4, 9, 16, 0);
    }
}

.osc-watch-modal .osc-watch-modal-panel {
    --osc-watch-ar: 1.7778;
    box-sizing: border-box;
    /* As wide as it can be while the picture, the title and the line under it
       all fit in the window -- for an upright video that is height-bound. */
    width: min(1120px, 100%, calc((100vh - 200px) * var(--osc-watch-ar)));
    width: min(1120px, 100%, calc((100dvh - 200px) * var(--osc-watch-ar)));
    min-width: min(300px, 100%);
    transform: translateY(10px) scale(.97);
    transition: transform .18s ease;
}

.osc-watch-modal[open] .osc-watch-modal-panel {
    transform: none;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}

@starting-style {
    .osc-watch-modal[open] .osc-watch-modal-panel {
        transform: translateY(10px) scale(.97);
    }
}

.osc-watch-modal .osc-watch-modal-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
}

.osc-watch-modal .osc-watch-modal-titles {
    min-width: 0;
}

.osc-watch-modal .osc-watch-modal-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 5px;
    color: #8fc3f2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.osc-watch-modal .osc-watch-modal-kicker::before {
    content: "";
    flex: 0 0 auto;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #f6c756;
}

.osc-watch-modal .osc-watch-modal-title {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1.05rem, 2.1vw, 1.4rem);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.osc-watch-modal .osc-watch-modal-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 0 3px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.osc-watch-modal .osc-watch-modal-close:hover,
.osc-watch-modal .osc-watch-modal-close:focus-visible {
    background: #f6c756;
    border-color: #f6c756;
    color: #14243a;
    transform: rotate(90deg);
    outline: none;
}

.osc-watch-modal .osc-watch-modal-close:focus-visible {
    box-shadow: 0 0 0 3px rgba(246, 199, 86, .45);
}

.osc-watch-modal .osc-watch-modal-stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--osc-watch-ar);
    overflow: hidden;
    border-radius: 10px;
    background: #000000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}

/* The poster stays behind the player, so the window never flashes black
   while the video or the frame is loading, or while it fades out. */
.osc-watch-modal .osc-watch-modal-still,
.osc-watch-modal .osc-watch-modal-player {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
}

.osc-watch-modal .osc-watch-modal-still {
    object-fit: cover;
    filter: brightness(.7);
}

.osc-watch-modal video.osc-watch-modal-player {
    object-fit: contain;
    background: transparent;
}

.osc-watch-modal .osc-watch-modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 20px;
    margin: 13px 0 0;
}

.osc-watch-modal .osc-watch-modal-teaser {
    flex: 1 1 260px;
    margin: 0;
    color: #cfe0f3;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .98rem;
    font-weight: 400;
    line-height: 1.5;
}

.osc-watch-modal .osc-watch-modal-teaser[hidden] {
    display: none;
}

.osc-watch-modal .osc-watch-modal-out,
.osc-watch-modal .osc-watch-modal-out:visited {
    flex: 0 0 auto;
    margin-left: auto;
    color: #8fc3f2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 195, 242, .45);
}

.osc-watch-modal .osc-watch-modal-out:hover,
.osc-watch-modal .osc-watch-modal-out:focus-visible {
    color: #ffffff;
    border-bottom-color: #ffffff;
    outline: none;
}

@media (max-width: 600px) {
    .osc-watch-modal .osc-watch-modal-panel {
        width: min(100%, calc((100vh - 170px) * var(--osc-watch-ar)));
        width: min(100%, calc((100dvh - 170px) * var(--osc-watch-ar)));
    }
    .osc-watch-modal .osc-watch-modal-head {
        margin-bottom: 10px;
    }
    .osc-watch-modal .osc-watch-modal-stage {
        border-radius: 8px;
    }
    .osc-watch-modal .osc-watch-modal-teaser {
        font-size: .92rem;
    }
}

/* ---- Last, so they win ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .osc-watch,
    .osc-watch .osc-watch-poster img,
    .osc-watch .osc-watch-play,
    .osc-watch-modal .osc-watch-modal-panel,
    .osc-watch-modal .osc-watch-modal-close {
        transition: none;
    }
    .osc-watch:hover,
    .osc-watch:hover .osc-watch-poster img,
    .osc-watch:hover .osc-watch-play,
    .osc-watch-modal .osc-watch-modal-panel,
    .osc-watch-modal[open] .osc-watch-modal-panel,
    .osc-watch-modal .osc-watch-modal-close:hover {
        transform: none;
    }
}

@media print {
    .osc-watch {
        background: none;
        border: 1px solid #14243a;
        box-shadow: none;
        break-inside: avoid;
    }
    .osc-watch .osc-watch-play,
    .osc-watch .osc-watch-poster::after {
        display: none;
    }
    .osc-watch .osc-watch-kicker,
    .osc-watch .osc-watch-title,
    .osc-watch .osc-watch-teaser,
    .osc-watch .osc-watch-kicker + .osc-watch-teaser {
        color: #000000;
    }
    .osc-watch-modal {
        display: none !important;
    }
}