/* ============================================================
   GT // Applied AI · Current Focus (index6) — case overlay system.
   Ported from portfolio-v2 (tokens.css + site.css) and re-skinned
   to this site's palette (style.css) and IBM Plex Mono type.
   Loads after css/style.css; class namespaces do not collide.
   ============================================================ */

:root {
    --pf-paper:       #FFFFFF;
    --pf-paper-2:     #FFF7F0;
    --pf-ink:         #2D2D2D;
    --pf-ink-2:       #4B4B4B;
    --pf-ink-3:       #8A857E;
    --pf-rule:        #FFE4D0;
    --pf-accent:      #D04A02;
    --pf-accent-2:    #A32D00;
    --pf-stage:       #171310; /* dark film stage, warm black */

    --pf-prose: 68ch;
    --pf-wide:  1120px;
    --pf-gutter: clamp(20px, 5vw, 64px);

    --pf-s-2:  8px;
    --pf-s-3:  12px;
    --pf-s-4:  16px;
    --pf-s-5:  24px;
    --pf-s-6:  32px;

    --pf-eyebrow: 0.68rem;
    --pf-small:   0.8rem;
}

/* ---------- scroll container length ----------
   The scroll story lost its stats, marquee and CTA beats; 900vh of runway
   would leave a long blank cream tail before the chapters. Overrides the
   height set in style.css (this file loads after it). */
#scroll-container { height: 460vh; }
@media (max-width: 900px) { #scroll-container { height: 400vh; } }

/* ---------- tile cards (chapters block) ---------- */

/* Sub-line under a chapter title. Positioned so it paints above the big
   watermark chapter number (which is absolutely positioned in the header). */
.chapter-note {
    position: relative;
    z-index: 1;
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: var(--color-body);
}

/* ---------- about timeline ---------- */

.tl { max-width: 880px; }

.tl-row {
    display: grid;
    grid-template-columns: 110px 16px minmax(0, 1fr);
    gap: 0 20px;
    padding-bottom: 44px;
}

.tl-row:last-child { padding-bottom: 0; }

.tl-when {
    font-size: 0.75rem;
    color: var(--pf-ink-3);
    text-align: right;
    padding-top: 2px;
    white-space: nowrap;
}

.tl-mark { position: relative; }

.tl-mark::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--pf-accent);
    background: var(--pf-paper);
}

.tl-row:not(:last-child) .tl-mark::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: -40px;
    left: 8px;
    width: 1px;
    background: var(--pf-rule);
}

.tl-org {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

.tl-text {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--pf-ink-2);
    max-width: 66ch;
}

@media (max-width: 640px) {
    .tl-row { grid-template-columns: 74px 14px minmax(0, 1fr); gap: 0 12px; }
    .tl-when { font-size: 0.68rem; }
}

/* ---------- compact footer bar ---------- */

.impact-footer,
.chapters-block .impact-footer,
.section.impact-footer { padding: 26px 0; }

.impact-footer .footer-inner {
    align-items: center;
    margin-bottom: 0;
}

.impact-footer .footer-info {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
}

.impact-footer .footer-name,
.chapters-block .impact-footer .footer-name {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.footer-links { font-size: 0.78rem; }
.footer-sep { color: rgba(255, 255, 255, 0.35); margin: 0 6px; }

.footer-top {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    white-space: nowrap;
}
.footer-top:hover { color: #fff; }

/* ---------- chapter headers: editorial, left-aligned ---------- */

.chapter-header { text-align: left; }

.chapter-kicker {
    color: var(--pf-accent);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.chapter-header .chapter-title { margin-top: 10px; }

.chapter-header .chapter-note { margin-top: 8px; }

.chapter-header .chapter-rule {
    width: 100%;
    height: 1px;
    background: var(--pf-rule);
    margin: 22px 0 0;
}


a.case-card { display: block; color: inherit; cursor: pointer; }

.tile-cta {
    display: inline-block;
    margin-top: var(--pf-s-4);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    transition: transform var(--transition-fast);
}
.case-card:hover .tile-cta { transform: translateX(4px); }

/* ---------- case overlay shell ---------- */

.case .wrap {
    width: 100%;
    max-width: var(--pf-wide);
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

.case { padding-block: clamp(40px, 6vw, 72px); }

.case__head { margin-bottom: clamp(28px, 4vw, 48px); }

.case__num {
    font-size: var(--pf-eyebrow);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--pf-accent);
    font-variant-numeric: tabular-nums;
}

.case h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    max-width: 26ch;
    margin-block: var(--pf-s-3) var(--pf-s-5);
    color: var(--pf-ink);
    text-wrap: balance;
}

.case .prose { max-width: var(--pf-prose); }
.case .prose p { line-height: 1.75; color: var(--pf-ink-2); font-size: 0.88rem; }
.case__standfirst { color: var(--pf-ink-2); }

.case a { color: var(--pf-accent); }
.case a:hover { color: var(--pf-accent-2); }

/* split head: title left, standfirst right, so the exhibit below starts a
   full text-block higher (used by case 02) */
.case__head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0 var(--pf-s-6);
    align-items: start;
    margin-bottom: var(--pf-s-5);
}
.case__head--split .case__num { grid-column: 1 / -1; }
.case__head--split h2 { margin-bottom: 0; }
.case__head--split .case__standfirst { margin-top: var(--pf-s-3); }
@media (max-width: 860px) {
    .case__head--split { display: block; }
    .case__head--split h2 { margin-bottom: var(--pf-s-4); }
}

/* two-column block: label rail plus content */

.block {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--pf-s-5) var(--pf-s-6);
    padding-top: var(--pf-s-6);
    margin-top: var(--pf-s-6);
    border-top: 1px solid var(--pf-rule);
}

.block__label {
    font-size: var(--pf-eyebrow);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pf-ink-3);
    padding-top: 0.35em;
}

.block__body { max-width: var(--pf-prose); }
.block__body > * + * { margin-top: var(--pf-s-4); }
.block__body p { line-height: 1.7; font-size: var(--pf-small); color: var(--pf-ink-2); }

/* blocks that carry side-by-side panels rather than prose */
.block--wide .block__body { max-width: min(100%, 46rem); }

/* stacked variant: label above full-width content instead of a side rail,
   so multi-column bodies (case 02's three points) get the whole panel width
   and run much shorter vertically */
.block--stack { display: block; }
.block--stack .block__label { padding-top: 0; margin-bottom: var(--pf-s-5); }
.block--stack .block__body { max-width: none; }
.block--stack .block__body > * + * { margin-top: var(--pf-s-5); }

@media (max-width: 900px) {
    .block { grid-template-columns: minmax(0, 1fr); gap: var(--pf-s-4); }
    .block__label { padding-top: 0; }
}

/* ---------- fact strip ---------- */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--pf-s-5) var(--pf-s-4);
    margin-top: var(--pf-s-6);
    padding-top: var(--pf-s-5);
    border-top: 1px solid var(--pf-rule);
    max-width: var(--pf-prose);
    list-style: none;
    padding-left: 0;
}

.fact__num {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--pf-accent);
    line-height: 1.1;
}

.fact__label {
    display: block;
    margin-top: var(--pf-s-2);
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--pf-ink-2);
}

@media (max-width: 760px) {
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- agent roles with films (case 01) ---------- */

.agents3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pf-s-6);
    margin-top: clamp(24px, 4vh, 44px);
}

.agents3--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- case 04: flow cards ---------- */

/* Pin the two cards to the bottom of their (equal-height) grid row so they
   sit level even when the text above them differs in length. */
.agents3--2 .agent { display: flex; flex-direction: column; }
.agents3--2 .agent .flowcard { margin-top: auto; }
.agents3--2 .agent .agent__line { margin-bottom: var(--pf-s-5); }

.flowcard {
    margin-top: var(--pf-s-5);
    border: 1px solid var(--pf-rule);
    border-radius: var(--radius-md);
    background: var(--pf-paper-2);
    padding: var(--pf-s-4) var(--pf-s-4) var(--pf-s-4);
}

.flowcard__label {
    font-size: var(--pf-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-ink-3);
    padding-bottom: var(--pf-s-4);
}

.flowcard__flow {
    display: flex;
    align-items: stretch;
}

.fnode {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--pf-rule);
    border-radius: var(--radius-md);
    background: var(--pf-paper);
    padding: 12px 10px;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--pf-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fnode b {
    color: var(--pf-ink);
    font-weight: 600;
    display: block;
}

.farr {
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pf-accent);
    font-weight: 600;
    font-size: 0.8rem;
}

.agent__role {
    font-size: var(--pf-eyebrow);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-accent);
}

.agent__line {
    font-size: 0.76rem;
    line-height: 1.65;
    color: var(--pf-ink-2);
    margin-top: var(--pf-s-3);
}

.agent .film { margin: var(--pf-s-4) 0 0; }

@media (max-width: 860px) {
    .agents3 { grid-template-columns: minmax(0, 1fr); gap: var(--pf-s-5); }
}

/* ---------- film panels ---------- */

.film__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--pf-rule);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(208, 74, 2, 0.32), var(--pf-stage)),
        var(--pf-stage);
    color: #FFF7F0;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    font-family: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.film__panel:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); }
.film__panel:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }

.film__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 247, 240, 0.5);
    background: rgba(255, 247, 240, 0.12);
    font-size: 14px;
    padding-left: 3px;
}

.film__tag {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 247, 240, 0.65);
}

/* A live panel plays its film inline: muted, looping, filling the stage.
   The badge and tag step back while it runs and return on hover or focus,
   over a scrim, as the cue that a click opens the film at size. The film
   only shows once it is genuinely playing; refused autoplay leaves the
   dark stage and its play badge standing. */
.film__loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.film__panel--playing .film__loop { opacity: 1; }

.film__panel--playing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(23, 19, 16, 0.45);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.film__panel--playing .film__badge,
.film__panel--playing .film__tag {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.film__panel--playing:hover::before,
.film__panel--playing:focus-visible::before,
.film__panel--playing:hover .film__badge,
.film__panel--playing:focus-visible .film__badge,
.film__panel--playing:hover .film__tag,
.film__panel--playing:focus-visible .film__tag { opacity: 1; }

/* Standing expand cue in the corner of a playing film. Decorative: the
   whole panel is already the button. */
.film__expand {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(23, 19, 16, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease, background 0.15s ease;
}
.film__expand svg { display: block; }
.film__panel--playing .film__expand { opacity: 1; }
.film__panel--playing:hover .film__expand,
.film__panel--playing:focus-visible .film__expand { background: rgba(23, 19, 16, 0.8); }

.film__cap {
    margin-top: var(--pf-s-2);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--pf-ink-3);
}

/* ---------- film lightbox, above the case overlay ---------- */

.film-light {
    position: fixed;
    inset: 0;
    z-index: 1200; /* above the open case panel */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 10, 8, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}
.film-light.is-on { opacity: 1; visibility: visible; }

.film-light__inner {
    width: min(86vw, 1200px);
    transform: translateY(10px) scale(0.985);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.film-light.is-on .film-light__inner { transform: none; }

.film-light__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    aspect-ratio: 16 / 9;
    max-height: 78vh;
    width: 100%;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(208, 74, 2, 0.32), var(--pf-stage)),
        var(--pf-stage);
    color: #FFF7F0;
}
.film-light__stage video {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    background: #000;
    display: block;
}
.film-light__stage iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-lg);
    background: #faf9f5; /* the decks' own canvas, so load has no flash */
    display: block;
}
.film-light__stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
}

.film-light__cap {
    margin-top: 14px;
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.5;
    color: rgba(255, 247, 240, 0.8);
}

.film-light__close {
    position: fixed;
    top: 22px;
    right: 26px;
    z-index: 1210;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 247, 240, 0.45);
    background: rgba(255, 247, 240, 0.1);
    color: #FFF7F0;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.film-light__close:hover { background: rgba(255, 247, 240, 0.22); transform: rotate(90deg); }
.film-light__close:focus-visible { outline: 2px solid #FFF7F0; outline-offset: 3px; }

/* prev/next through a screenshot strip; shown only when a still was opened
   from a strip of several, and the arrow keys do the same thing */
.film-light__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1210;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 247, 240, 0.45);
    background: rgba(255, 247, 240, 0.1);
    color: #FFF7F0;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    display: none;
    transition: background 0.18s ease;
}
.film-light__nav:hover { background: rgba(255, 247, 240, 0.22); }
.film-light__nav:focus-visible { outline: 2px solid #FFF7F0; outline-offset: 3px; }
.film-light__nav--prev { left: 26px; }
.film-light__nav--next { right: 26px; }
.film-light.has-nav .film-light__nav { display: block; }

/* ---------- program decks (case 03) ---------- */

#case-03 .case__head { margin-bottom: clamp(24px, 4vw, 40px); }

.decks2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pf-s-6);
    margin-top: clamp(24px, 3vh, 36px);
}

.deckpick { margin: 0; }

/* a slide's own shape, so the embedded deck is not cropped */
.film__panel--deck {
    text-decoration: none;
    aspect-ratio: 16 / 9;
    background: #faf9f5; /* the deck's own canvas, so lazy-load has no flash */
}

/* The decks are responsive, so at panel width they would lay themselves out
   as a small viewport instead of reading as a slide. JS gives the frame a
   real 1280x720 viewport and scales that down to the panel. Without JS the
   frame just fills the panel. */
.deckprev {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    transform-origin: 0 0;
    pointer-events: none; /* the click belongs to the panel, not the deck */
    background: #faf9f5;
}
.deckprev.is-scaled {
    width: 1280px;
    height: 720px;
    transform: scale(var(--deck-scale, 1));
    visibility: hidden; /* no unscaled crop before a scale exists */
}
.deckprev.is-fitted { visibility: visible; }

/* veil and label sit over the slide, and only on hover or focus */
.film__panel--deck::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(12, 10, 8, 0.58);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.film__panel--deck .film__badge,
.film__panel--deck .film__tag {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.film__panel--deck:hover::after,
.film__panel--deck:focus-visible::after,
.film__panel--deck:hover .film__badge,
.film__panel--deck:hover .film__tag,
.film__panel--deck:focus-visible .film__badge,
.film__panel--deck:focus-visible .film__tag { opacity: 1; }

@media (max-width: 860px) {
    .decks2 { grid-template-columns: minmax(0, 1fr); gap: var(--pf-s-5); }
}

/* ---------- inline walkthrough deck (case 02) ---------- */

.deckfig {
    grid-column: 1 / -1;
    margin: var(--pf-s-6) 0 0;
    border: 1px solid var(--pf-rule);
    border-radius: var(--radius-md);
    background: var(--pf-paper-2);
    overflow: hidden;
}

.deckfig__cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--pf-rule);
}

.deckfig__title {
    display: flex;
    align-items: center;
    min-height: 26px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-ink-3);
}

.deckfig__open {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    color: var(--pf-ink-2);
    text-decoration: none;
    border: 1px solid var(--pf-rule);
    border-radius: 999px;
    padding: 6px 13px;
    transition: color 0.15s, border-color 0.15s;
}
.case .deckfig__open { color: var(--pf-ink-2); }
.deckfig__open:hover { color: var(--pf-accent); border-color: var(--pf-accent); }

.deckfig__frame {
    display: block;
    width: 100%;
    height: clamp(440px, 64vh, 680px);
    border: 0;
    background: #faf9f5; /* the deck's own canvas, so lazy-load has no flash */
}

.deckfig__note {
    margin: 0;
    padding: 9px 18px 10px;
    border-top: 1px solid var(--pf-rule);
    font-size: 0.66rem;
    line-height: 1.5;
    color: var(--pf-ink-3);
    max-width: none;
}

/* the plugin walkthrough runs taller than the slide deck */
.deckfig__frame--tall { height: clamp(520px, 74vh, 780px); }

/* ---------- key points ---------- */

.kp {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pf-s-5) var(--pf-s-6);
}

.kp__item {
    padding-left: 14px;
    border-left: 2px solid var(--pf-accent);
}

.kp__item h4,
.kp__item h5 {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--pf-s-2);
    color: var(--pf-ink);
}

.kp__item p,
.kp__item ul {
    font-size: 0.76rem;
    line-height: 1.65;
    color: var(--pf-ink-2);
}

.kp__item ul { list-style: none; padding: 0; }
.kp__item li { position: relative; padding-left: 1.5em; }
.kp__item li + li { margin-top: var(--pf-s-2); }
.kp__item li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--pf-accent);
    font-weight: 700;
}

/* case 02 runs its three points in one row */
.kp--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 701px) and (max-width: 1000px) {
    .kp--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .kp { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- screenshot strips ---------- */

.shots {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--pf-s-2);
    margin-top: var(--pf-s-5);
}
/* a strip sitting directly in a two-column block runs under both columns */
.block > .shots { grid-column: 1 / -1; }
@media (max-width: 1000px) and (min-width: 701px) {
    .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.shot {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    border: 1px solid var(--pf-rule);
    border-radius: var(--radius-md);
    background: var(--pf-paper-2);
    cursor: zoom-in;
    overflow: hidden;
    text-align: left;
    font-family: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.shot:hover { transform: translateY(-2px); border-color: var(--pf-accent); }
.shot img { width: 100%; height: auto; display: block; }
.shot__cap {
    display: block;
    flex: 1;
    padding: var(--pf-s-2);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pf-ink-3);
    border-top: 1px solid var(--pf-rule);
}
.shot:hover .shot__cap { color: var(--pf-accent); }

/* ---------- tiles open cases as overlays ---------- */

.case-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090; /* above the fixed nav (z 1000): the veil dims it too */
    background: rgba(45, 45, 45, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}
.case-backdrop.is-on { opacity: 1; visibility: visible; }

body.has-modal { overflow: hidden; }

.case--collapsible.is-closed { display: none; }

.case--collapsible.is-modal {
    display: block;
    position: fixed;
    z-index: 1100;
    top: clamp(12px, 4vh, 40px);
    bottom: clamp(12px, 4vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--pf-wide), calc(100vw - 2 * clamp(8px, 3vw, 40px)));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pf-paper);
    color: var(--pf-ink-2);
    border: 1px solid var(--pf-rule);
    border-radius: var(--radius-md);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    padding-block: 0 clamp(40px, 6vh, 72px);
    animation: panelin 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.05) both;
}
@keyframes panelin {
    from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateX(-50%); }
}

/* Sticky close bar at the top of the open panel */
.case__closebar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: none;
    justify-content: flex-end;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--pf-rule);
}
.is-modal .case__closebar { display: flex; }

.case__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    font-family: inherit;
    color: var(--pf-ink-2);
    background: var(--pf-paper-2);
    border: 1px solid var(--pf-rule);
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.case__close:hover { color: var(--pf-accent); border-color: var(--pf-accent); }
.case__close:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .film__panel, .film-light, .film-light__inner, .film-light__close,
    .case-backdrop, .case__close, .shot, .tile-cta { transition: none; }
    .film__panel:hover, .shot:hover { transform: none; }
    .film__panel--deck::after,
    .film__panel--deck .film__badge,
    .film__panel--deck .film__tag { transition: none; }
    .case--collapsible.is-modal { animation: none; }
}

/* ============================================================
   THE INDEX - ledger rows replacing the tile cards.
   Rows keep the .tile-link overlay behavior and the .in-view
   reveal (app6.js observes .idx-row alongside .case-card).
   ============================================================ */

.idx { border-top: 2px solid var(--color-primary); }

a.idx-row { display: grid; color: inherit; cursor: pointer; }

.idx-row {
    grid-template-columns: 72px 230px 1fr auto;
    gap: 2rem;
    align-items: baseline;
    padding: 1.9rem 0.5rem 2rem;
    border-bottom: 1px solid var(--color-light);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px);
    transition: background 0.25s ease;
}
.idx-row.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease,
                background 0.25s ease;
}
.idx-row.in-view[data-delay="100"] { transition-delay: 0.08s; }
.idx-row.in-view[data-delay="200"] { transition-delay: 0.16s; }
.idx-row.in-view[data-delay="300"] { transition-delay: 0.24s; }

.idx-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}
.idx-row:hover { background: var(--color-lightest); }
.idx-row:hover::before { transform: scaleY(1); }

.idx-num {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--color-muted);
}
.idx-badge {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.55rem;
}
.idx-badge::before { content: "\25CF\00A0\00A0"; font-size: 0.5rem; vertical-align: 2px; }
.idx-title {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
}
.idx-desc {
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--color-body);
}
.idx-cta {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-accent);
    justify-self: end;
    transition: transform 0.25s ease;
}
.idx-row:hover .idx-cta { transform: translateX(6px); }

@media (max-width: 800px) {
    .idx-row { grid-template-columns: 48px 1fr auto; gap: 1.2rem; }
    .idx-desc { grid-column: 2 / 3; grid-row: 2; margin-top: 0.6rem; }
    .idx-cta  { grid-row: 1; grid-column: 3; }
}