/* /products/edgar/behind-the-scenes: the ten articles and their explainers.
   -------------------------------------------------------------------------
   Loaded ONLY by templates/edgar_bts.html, after style.css and after the
   scrollcraft engine stylesheet, so the plain selectors here are page scoped
   by where the file is linked.

   Two jobs:
     1. Theme the engine (six tokens and two faces, the site's own) and pin
        the site chrome to its light palette, because the engine sets the body
        ground and this page's ground is dark: a screening room, in the same
        dark family as the product page's dark sections.
     2. Lay out the collection: an entrance plate, ten objects on one label
        schema, the filmstrip index at the foot of the viewport, and the close.

   Light type on a dark ground is compensated on three axes here: a touch more
   leading, a touch more tracking, and one step more weight on the labels.
   `color` is restated wherever an ink token is restated. The engine itself is
   never edited; the filmstrip is driven from bts.js and from --sc-p. */

/* --- 1. Engine theme ------------------------------------------------------ */
:root {
    --sc-canvas: #0d1512;
    --sc-surface: #14201b;
    --sc-ink: #f1efe7;
    --sc-ink-soft: #a8b5ac;
    --sc-accent: #7fd4a0;
    --sc-accent-ink: #0d1512;
    --sc-font-display: var(--font-display);
    --sc-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --sc-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --sc-leading-body: 1.66;
    --sc-track-normal: 0.004em;

    --bts-line: rgba(241, 239, 231, 0.14);
    --bts-line-strong: rgba(241, 239, 231, 0.26);
    --bts-band: #050705;
    --bts-strip-h: 76px;
    --bts-gutter: clamp(1.25rem, 5vw, 4rem);
    --bts-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Site chrome, pinned to the site's light palette on this page only. */
.site-header,
.notice-strip {
    background: #ffffff;
    color: #16181d;
    font-family: var(--sc-font-text);
}
.site-footer {
    background: #f6f7f4;
    color: #16181d;
    font-family: var(--sc-font-text);
    margin-top: 0;
}
.site-header .brand,
.site-header nav a,
.site-header nav .linklike,
.site-header nav summary,
.notice-strip,
.site-footer,
.site-footer a {
    color: #16181d;
}

/* The same light palette as tokens, so everything inside the chrome that reads
   them (the nav menus, the brand and menu marks, hover and focus colours)
   stays light when the reader's system is in dark mode. */
.site-header,
.notice-strip,
.site-footer {
    --color-bg: #ffffff;
    --color-text: #16181d;
    --color-muted: #5d6570;
    --color-border: #e3e6e2;
    --color-surface: #f6f7f4;
    --color-accent: #1f4d3d;
    --color-accent-strong: #163a2e;
    --color-accent-soft: #e9f2ec;
    --color-accent-contrast: #ffffff;
}
.notice-strip { background: #e9f2ec; }

/* base.html's <main class="wrap"> is a column; this page is full bleed. */
main.bts-main {
    max-width: none;
    padding: 0;
    overflow-x: clip;
}

/* --- 2. The ground ------------------------------------------------------- */
.bts {
    position: relative;
    background: var(--sc-canvas);
    color: var(--sc-ink);
    font-family: var(--sc-font-text);
    font-size: var(--sc-t-base);
    line-height: var(--sc-leading-body);
    letter-spacing: var(--sc-track-normal);
    /* Room under the last plate for the fixed strip. */
    padding-bottom: calc(var(--bts-strip-h) + 1.5rem);
}
.bts a {
    color: var(--sc-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(127, 212, 160, 0.55);
}
.bts a:hover,
.bts a:focus-visible {
    color: var(--sc-ink);
    text-decoration-color: currentColor;
}
.bts-wrap {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: var(--bts-gutter);
}

/* --- 3. The entrance plate ------------------------------------------------ */
.bts-entry {
    padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(1.5rem, 4vh, 2.5rem);
}
.bts-plate {
    max-width: 62ch;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bts-line-strong);
}
.bts-title {
    margin: 0 0 0.5rem;
    font-family: var(--sc-font-display);
    font-weight: 600;
    font-size: var(--sc-t-2xl);
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--sc-ink);
}
.bts-standfirst {
    margin: 0 0 1.25rem;
    font-family: var(--sc-font-display);
    font-size: var(--sc-t-lg);
    line-height: 1.3;
    color: var(--sc-ink-soft);
}
.bts-entry__text {
    margin: 0 0 1rem;
    max-width: 60ch;
    text-wrap: pretty;
}
.bts-entry__note,
.bts-small {
    margin: 0;
    max-width: 62ch;
    font-size: var(--sc-t-sm);
    line-height: 1.6;
    color: var(--sc-ink-soft);
    text-wrap: pretty;
}

/* --- 4. The filmstrip index ---------------------------------------------
   In flow with scripting off: a row of ten thumbnails under the entrance
   plate. bts.js adds .bts--js to the root and the strip becomes the fixed
   band at the foot of the viewport. */
.bts-strip {
    margin: 0 0 1rem;
    padding: 0.5rem var(--bts-gutter) 0;
}
.bts-strip__band {
    position: relative;
    overflow: hidden;
    background: var(--bts-band);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Perforations along both edges, so the band reads as film, not as a toolbar. */
.bts-strip__band::before,
.bts-strip__band::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 7px,
        rgba(241, 239, 231, 0.22) 7px 12px,
        transparent 12px 20px
    );
    pointer-events: none;
}
.bts-strip__band::before { top: 2px; }
.bts-strip__band::after { bottom: 2px; }
.bts-strip__reel {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 11px 0;
    list-style: none;
    will-change: transform;
}
.bts-strip__reel li { flex: none; }
.bts-strip__frame,
.bts-strip__leader {
    position: relative;
    display: block;
    width: 96px;
    height: 54px;
    background: #101613;
    text-decoration: none;
}
.bts-strip__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity 160ms var(--bts-ease);
}
.bts-strip__frame:hover img,
.bts-strip__frame:focus-visible img,
.bts-strip__frame[aria-current="true"] img { opacity: 1; }
.bts-strip__frame:focus-visible { outline-offset: 1px; }
.bts-strip__num {
    position: absolute;
    left: 4px;
    bottom: 3px;
    padding: 0 4px;
    font-family: var(--sc-font-mono);
    font-size: 10px;
    line-height: 14px;
    color: var(--sc-ink);
    background: rgba(5, 7, 5, 0.78);
}
.bts-strip__leader {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sc-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    background: #070907;
    border: 1px solid rgba(241, 239, 231, 0.08);
}
.bts-strip__leader--tail { color: var(--sc-accent); }
.bts-strip__gate {
    display: none;
}
.bts-strip__clock {
    display: none;
}

/* The fixed band, with scripting. */
.bts--js .bts-strip {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    padding: 0;
    height: var(--bts-strip-h);
    transition: transform 280ms var(--bts-ease);
}
.bts--js .bts-strip.is-parked { transform: translateY(110%); }
.bts--js .bts-strip__band {
    height: 100%;
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}
.bts--js .bts-strip__reel {
    position: absolute;
    left: 0;
    top: 0;
}
.bts--js .bts-strip__gate {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    width: 102px;
    height: 60px;
    transform: translateX(-50%);
    border: 1.5px solid var(--sc-accent);
    pointer-events: none;
}
.bts--js .bts-strip__clock {
    display: block;
    position: absolute;
    right: clamp(0.75rem, 2.5vw, 1.5rem);
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    font-family: var(--sc-font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--sc-ink);
    padding: 3px 8px;
    background: rgba(5, 7, 5, 0.82);
    border: 1px solid var(--bts-line);
}

/* --- 5. The objects ------------------------------------------------------- */
.bts-obj {
    position: relative;
    padding: clamp(3rem, 8vh, 5.5rem) 0;
    border-top: 1px solid var(--bts-line);
}
.bts-obj__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}
/* b: label on the left, frame on the right. */
.bts-obj--b .bts-obj__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bts-obj--b .bts-frame { order: 2; }
.bts-obj--b .bts-label { order: 1; }
/* c: the frame across the top, the label under it in two columns. */
.bts-obj--c .bts-obj__grid { grid-template-columns: minmax(0, 1fr); }
.bts-obj--c .bts-frame { max-width: 56rem; justify-self: center; width: 100%; }
.bts-obj--c .bts-label {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1rem clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}
.bts-obj--c .bts-label__title { grid-column: 1; }
.bts-obj--c .bts-label__meta { grid-column: 1; }
.bts-obj--c .bts-label__figure { grid-column: 2; grid-row: 1; }
.bts-obj--c .bts-label__abs { grid-column: 2; }
/* q: the quiet act before the peak. A small frame, nothing moving. */
.bts-obj--q { padding-block: clamp(2.5rem, 6vh, 4rem); }
.bts-obj--q .bts-obj__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.bts-obj--q .bts-frame { order: 2; max-width: 24rem; justify-self: end; }
.bts-obj--q .bts-label { order: 1; }
/* peak: Part 8. The widest frame, the most room, and a pull line. */
.bts-obj--peak {
    padding: clamp(5rem, 16vh, 11rem) 0 clamp(4rem, 12vh, 8rem);
    border-top-color: var(--bts-line-strong);
}
.bts-obj--peak .bts-obj__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vh, 3.5rem); }
.bts-obj--peak .bts-frame { max-width: 72rem; }
.bts-obj--peak .bts-label {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1rem clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}
.bts-obj--peak .bts-label__title { grid-column: 1; }
.bts-obj--peak .bts-label__meta { grid-column: 1; }
.bts-obj--peak .bts-label__abs { grid-column: 1; }
.bts-obj--peak .bts-pull { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

/* The frame. */
.bts-frame {
    margin: 0;
    min-width: 0;
}
/* A frame whose player is open holds still and stays whole: the engine's
   wipe and parallax write inline styles, and a reader scrolling back up
   should not see their video clipped or moved. */
.bts-frame.is-playing {
    clip-path: none !important;
    transform: none !important;
}
.bts-frame__play {
    position: relative;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 18px 40px rgba(0, 0, 0, 0.45);
    text-decoration: none;
}
.bts-frame__play:hover,
.bts-frame__play:focus-visible { text-decoration: none; }
/* Once the player is in, the link is hidden; `display: block` above would
   otherwise beat the hidden attribute's own rule. */
.bts-frame__play[hidden] { display: none; }
.bts-frame__poster,
.bts-frame__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
}
.bts-frame__video {
    background: #000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.bts-frame__btn {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    background: var(--sc-accent);
    color: var(--sc-accent-ink);
    font-size: var(--sc-t-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 140ms var(--bts-ease), background-color 140ms var(--bts-ease);
}
.bts-frame__btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
}
.bts-frame__play:hover .bts-frame__btn,
.bts-frame__play:focus-visible .bts-frame__btn { background: #97e2b4; }
.bts-frame__play:active .bts-frame__btn { transform: scale(0.97); }
.bts-frame__cap {
    margin: 0.7rem 0 0;
    font-size: var(--sc-t-xs);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--sc-ink-soft);
}

/* The label. */
.bts-label { min-width: 0; }
.bts-label__title {
    margin: 0 0 0.6rem;
    font-family: var(--sc-font-display);
    font-weight: 600;
    font-size: var(--sc-t-xl);
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--sc-ink);
}
.bts-label__part {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--sc-font-mono);
    font-size: var(--sc-t-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
}
.bts-label__name { display: block; }
.bts-label__meta {
    margin: 0 0 1rem;
    font-size: var(--sc-t-sm);
    font-weight: 500;
    color: var(--sc-ink-soft);
}
.bts-label__sep { margin: 0 0.5em; }
.bts-label__abs {
    margin: 0;
    max-width: 58ch;
    text-wrap: pretty;
}
.bts-label__figure {
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.75rem;
    align-items: baseline;
}
.bts-label__num {
    font-family: var(--sc-font-display);
    font-size: var(--sc-t-3xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--sc-ink);
}
.bts-label__figure-text {
    font-size: var(--sc-t-sm);
    color: var(--sc-ink-soft);
    max-width: 22ch;
    text-wrap: pretty;
}
.bts-pull {
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--bts-line);
    font-family: var(--sc-font-display);
    font-size: var(--sc-t-lg);
    line-height: 1.32;
    color: var(--sc-ink);
    text-wrap: pretty;
}
.bts-pull p { margin: 0 0 0.75rem; }
.bts-pull footer {
    font-family: var(--sc-font-mono);
    font-size: var(--sc-t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
}

/* --- 6. The close --------------------------------------------------------- */
.bts-close {
    padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(2rem, 5vh, 3rem);
    border-top: 1px solid var(--bts-line);
}
.bts-plate--close { max-width: 66ch; }
.bts-close__links {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.bts-close__links li {
    padding: 0.8rem 0;
    border-top: 1px solid var(--bts-line);
}
.bts-close__links li:last-child { border-bottom: 1px solid var(--bts-line); }
.bts-close__links a {
    display: block;
    font-family: var(--sc-font-display);
    font-size: var(--sc-t-lg);
    line-height: 1.3;
}
.bts-close__note {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--sc-t-sm);
    color: var(--sc-ink-soft);
}

/* --- 7. Narrow screens ---------------------------------------------------- */
@media (max-width: 900px) {
    :root { --bts-strip-h: 58px; }
    .bts-obj__grid,
    .bts-obj--b .bts-obj__grid,
    .bts-obj--q .bts-obj__grid,
    .bts-obj--c .bts-label,
    .bts-obj--peak .bts-label {
        grid-template-columns: minmax(0, 1fr);
    }
    .bts-obj--b .bts-frame,
    .bts-obj--q .bts-frame { order: 1; }
    .bts-obj--b .bts-label,
    .bts-obj--q .bts-label { order: 2; }
    .bts-obj--q .bts-frame { max-width: none; justify-self: stretch; }
    .bts-obj--c .bts-label__figure,
    .bts-obj--c .bts-label__abs,
    .bts-obj--peak .bts-pull { grid-column: 1; grid-row: auto; }
    .bts-strip__frame,
    .bts-strip__leader { width: 64px; height: 36px; }
    .bts-strip__reel { padding: 11px 0; }
    .bts--js .bts-strip__gate { width: 70px; height: 42px; }
    .bts-strip__num { display: none; }
}
@media (max-width: 640px) {
    .bts--js .bts-strip__clock { display: none; }
    .bts-frame__btn { left: 10px; bottom: 10px; padding: 7px 11px 7px 10px; }
}

/* --- 8. Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bts--js .bts-strip { transition: none; }
    .bts-strip__frame img,
    .bts-frame__btn { transition: none; }
}