/* Pan Hub: spy-film graphics, Savile Row tailoring, ink and ivory. */
.bond-mark { display: inline-block; font-size: .65rem; letter-spacing: .06em; border-left: 1px solid currentColor; padding-left: .6rem; margin-left: .5rem; vertical-align: middle; }
.bond-colophon { display: flex; justify-content: space-between; gap: 1rem; border-block: 1px dashed currentColor; padding: 1rem 0; margin-bottom: 2rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.zoom__item:nth-child(4) .zoom__frame { background: #0f0e0d; }
.bond-scene { display: grid; grid-template-columns: 1.2fr 1fr; background: #000; color: #e9e7da; padding: clamp(2rem,6vw,6rem) var(--gutter); gap: 6vw; align-items: center; }
.bond-scene__art { overflow: hidden; }
.bond-scene__art img { display: block; width: 100%; height: clamp(12rem,28vw,28rem); object-fit: contain; }
.bond-scene__copy h2 { max-width: 14ch; font-size: clamp(2rem,4.5vw,4.5rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 400; }
.bond-scene__copy p { max-width: 40ch; margin: 1.5rem 0; line-height: 1.65; color: #b9b7ab; }
.bond-scene__copy > span { display: block; padding-top: 1rem; border-top: 1px solid #66665c; font-size: .65rem; letter-spacing: .15em; }
.bond-scene__copy a { display: inline-block; margin-top: 1.5rem; }
.page-hero { position: relative; }
.page-hero:has(.bond-hero-art) .page-hero__title, .page-hero:has(.bond-hero-art) .page-hero__sub { max-width: 65%; }
.bond-hero-art { position: absolute; right: var(--gutter); top: 28%; width: 25%; height: 60%; object-fit: contain; background: #000; }
.reel__hero .bond-hero-art { width: 12%; top: 0; height: 100%; }
/* Slower, longer equipment briefing. Insets keep the pinned scene clear of navigation. */
.hscroll { position: relative; background: #111310; color: #e9e7da; }
.hscroll__track { padding-top: 8rem; padding-bottom: 4rem; gap: 5vw; }
.hscroll__intro { width: min(32rem,65vw); }
.hscroll__intro p { color: #bbbdb1; }
.ctag { width: min(38rem,62vw); color: #151413; padding: 1.5rem 2rem; rotate: 0deg !important; }
.ctag__media { height: clamp(90px,20vh,230px); aspect-ratio: auto; margin-bottom: 1rem; }
.ctag__name { font-size: clamp(1.5rem,2.5vw,2.5rem); }
.ctag dl { margin-top: 1rem; }.ctag dl > div { padding: .55rem 0; }
.ctag__foot { margin-top: .75rem; }
.spy-panel { flex: none; width: min(42rem,65vw); padding: 2rem; color: #e9e7da; }
.spy-panel img { width: 100%; height: 28vh; min-height: 9rem; object-fit: contain; display: block; background: #000; }
.spy-panel > div { padding-top: 1.5rem; }
.spy-panel__code { color: #b4b7a7; font-size: .65rem; letter-spacing: .16em; }
.spy-panel h3 { font-size: clamp(1.8rem,3vw,3rem); font-weight: 400; line-height: 1.1; margin: 1rem 0; letter-spacing: -.03em; }
.spy-panel p { color: #c8cabc; max-width: 38ch; line-height: 1.6; }
.mission-progress { position: absolute; inset: 5.5rem var(--gutter) auto; display: flex; justify-content: space-between; z-index: 4; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: #bfc2b5; border-bottom: 1px solid #43493b; padding-bottom: 1rem; }
.mission-progress i { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #b3b49b; transform: scaleX(0); transform-origin: left; }
/* Interview notes accompany, rather than cover, the animated evidence. */
.operator-brief { position: absolute; left: var(--gutter); top: 39%; width: 29%; max-width: 31rem; z-index: 2; padding: 1.25rem; border: 1px solid #66665c; color: #e9e7da; background: #0f0e0d; }
.operator-brief__head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 1px solid #66665c; padding-bottom: .75rem; }
.operator-brief h3 { font-size: .95rem; font-weight: 400; }
.operator-brief__head span { font-size: .6rem; color: #bcbcae; white-space: nowrap; }
.brief-answer { padding: .8rem 0; border-bottom: 1px dashed #44443c; }
.brief-answer dt { color: #bfc0b3; font-size: .7rem; line-height: 1.4; }
.brief-answer dd { font-size: .85rem; line-height: 1.45; margin-top: .35rem; }
.operator-brief__foot { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; margin-top: .8rem; color: #aaa99a; }
@media (max-width: 760px), (max-height: 649px) {
 .hscroll__track { width: 100% !important; min-height: 0; flex-direction: column; padding: 8rem var(--gutter) 3rem; gap: 3rem; }
 .hscroll__intro, .ctag, .spy-panel { width: 100% !important; max-width: 40rem; margin-inline: auto; }
 .ctag, .spy-panel { padding: 1.25rem; }
 .ctag__media { height: 13rem; }
 .mission-progress { top: 3rem; font-size: .55rem; }
 .mission-progress i { display: none; }
 .operator-brief { top: auto; bottom: 12vh; width: calc(100% - 2 * var(--gutter)); max-width: none; padding: .8rem; }
 #thread .captions { display: none; }
 #thread .scene__canvas { top: 8vh; height: 40vh; }
 .brief-answer { padding: .45rem 0; }.brief-answer dd { font-size: .75rem; }.brief-answer dt { font-size: .65rem; }
 .operator-brief__foot { display: none; }
}
@media (max-width: 760px) {
 .bond-scene { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 3rem; }
 .bond-scene__copy h2 { max-width: 20ch; }
 .bond-colophon { flex-direction: column; font-size: .6rem; }
 .bond-mark { font-size: .55rem; }
 .bond-hero-art { position: static; width: 100%; height: 10rem; margin-top: 2rem; }
 .page-hero:has(.bond-hero-art) .page-hero__title, .page-hero:has(.bond-hero-art) .page-hero__sub { max-width: 100%; }
 .reel__hero .bond-hero-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 .hscroll__track { width: 100% !important; flex-direction: column; min-height: 0; }
 .hscroll__intro, .ctag, .spy-panel { width: min(38rem,100%); }
 .mission-progress i { transform: none; }
}
/* Give header art its own column; never lay it over a title. */
.page-hero:has(.bond-hero-art) { display: grid; grid-template-columns: minmax(0,1fr) minmax(12rem,.42fr); column-gap: 3rem; align-content: center; text-align: left; }
.page-hero:has(.bond-hero-art) .page-hero__title { grid-column: 1; max-width: 100%; width: 100%; font-size: clamp(2.5rem,4.5vw,5.5rem); }
.page-hero:has(.bond-hero-art) .page-hero__sub { grid-column: 1; max-width: 100%; }
.page-hero:has(.bond-hero-art) .page-hero__meta { grid-column: 1 / -1; }
.page-hero .bond-hero-art { position: static; grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; height: auto; max-height: 18rem; aspect-ratio: 4 / 3; }
.reel__hero:has(.bond-hero-art) { grid-template-columns: 1fr 10rem; }
.reel__hero .bond-hero-art { max-height: 8rem; }
@media (max-width: 760px) {
 .page-hero:has(.bond-hero-art) { grid-template-columns: minmax(0,1fr); gap: 0; }
 .page-hero .bond-hero-art { grid-column: 1; grid-row: auto; height: 10rem; max-width: 100%; }
 .page-hero:has(.bond-hero-art) .page-hero__title { font-size: clamp(2.3rem,9vw,4rem); }
}
.page-hero.wrap { padding-inline: var(--gutter); }
.zoom__item:nth-child(4) .zoom__frame { background: #0f0e0c; }
.bond-art { position: relative; overflow: hidden; background: #000; width: 100%; aspect-ratio: 16/10; }
.bond-art svg { display: block; width: 100%; height: 100%; }
.bond-scene__art > .bond-art { height: clamp(12rem,28vw,28rem); }
.spy-panel > .bond-art { height: 28vh; min-height: 9rem; padding: 0; }
.knight-study > .bond-art { height: calc(100% - 2rem); aspect-ratio: auto; }
.page-hero .bond-hero-art { aspect-ratio: 4/3; }
.champagne-bubbles { opacity: 1; }
@media (max-width: 580px) { .knight-study > .bond-art { height: calc(100% - 2.5rem); } }
@media (prefers-reduced-motion: reduce) { .champagne-bubbles { display: none; } .knight-crosshair { opacity: 0; } }
/* Isolated brass objects sit directly on the section, without a photo tile. */
.bond-art.evidence-art { background: transparent; overflow: hidden; }
.evidence-art .casing { position: absolute; width: 57%; height: auto; min-height: 0; object-fit: contain; background: transparent; transform-origin: 50% 55%; filter: drop-shadow(0 12px 12px #0006); }
.evidence-art .casing--front { left: 10%; top: 27%; z-index: 2; }
.evidence-art .casing--back { left: 37%; top: 15%; width: 48%; transform: rotate(-20deg); opacity: .8; }
.evidence-caption { position: absolute; bottom: 5%; left: 10%; font-size: .55rem; letter-spacing: .22em; color: #c4b89c; opacity: .6; }
.evidence-art .casing--front { width: 48%; left: 13%; top: 20%; }
.evidence-art .casing--back { width: 40%; left: 46%; top: 12%; }
/* Header controls: consistent baseline, centered shortcut and sound glyph. */
.bar__tools { align-items: center; gap: .625rem; flex-shrink: 0; }
.bar__tools .tool { justify-content: center; height: 2.25rem; padding: 0 .875rem; gap: .625rem; line-height: 1; white-space: nowrap; }
.bar__tools .tool__label { display: block; line-height: 1; letter-spacing: .1em; }
.bar__tools .tool kbd { align-items: center; justify-content: center; height: 1.25rem; padding: 0 .35rem; line-height: 1; letter-spacing: .04em; border-radius: 3px; }
.bar__tools .tool__bars { align-items: center; justify-content: center; width: .875rem; height: .875rem; gap: 2px; flex-shrink: 0; }
.bar__tools .tool__bars i { display: block; height: 4px; }
.bar__tools .tool__bars i:nth-child(2) { height: 8px; }
.bar__tools .tool__bars i:nth-child(3) { height: 6px; }
@media (min-width: 861px) { .bar__tools .tool kbd { display: inline-flex; } }
.spy-panel > .db5-real { background: transparent; display: flex; align-items: center; justify-content: center; }
.spy-panel .db5-real__car { width: 94%; height: 100%; min-height: 0; object-fit: contain; background: transparent; filter: drop-shadow(0 12px 10px #0004); }