/* Common Cast — styles */

:root {
    /* Palette: hot tomato red header, charcoal + grey neutrals, marquee yellow highlights */
    --brand: #fa320a;           /* header / big bold type only (3.8:1 on white) */
    --accent: #d62c06;          /* buttons + fills; white text passes AA (5:1) */
    --accent-hover: #b82505;
    --accent-text: #d62c06;     /* red used as text on light backgrounds */
    --accent-ink: #fff;
    --gold: #ffd200;            /* "trending" yellow — on dark/grey grounds only */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f3f3f3;
    --ink: #2a2c32;
    --ink-soft: #505257;
    --line: #e1e1e1;
    --bar: #6b6b6b;             /* grey sub-nav band */
    --night: #1e1f23;           /* carousel-caption charcoal */
    --night-ink: #ffffff;
    --night-soft: #c9c9c9;
    --focus: #1c6fe8;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .08);
    --display: 'Fraunces', Georgia, serif;
    --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent-text: #ff6a4d;
        --bg: #141416;
        --surface: #1f2023;
        --surface-alt: #2a2c32;
        --ink: #f2f2f2;
        --ink-soft: #b5b5b5;
        --line: #34363d;
        --night: #0f0f11;
        --focus: #7fb3f0;
        --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 var(--body);
}

a { color: inherit; }
img { max-width: 100%; display: block; }
img.img-failed { background: var(--line); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* ---------- header / footer ---------- */

.site-header {
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
}
.site-header .wrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.brand {
    font: 800 1.6rem/1 var(--display);
    text-decoration: none;
    letter-spacing: -.01em;
}
.brand::before { content: "●"; color: var(--accent); margin-right: .35em; font-size: .7em; vertical-align: .15em; }
.tagline { margin: 0; color: var(--ink-soft); }

.site-footer {
    margin-top: 64px;
    padding: 28px 0 40px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .875rem;
}

/* ---------- picker ---------- */

.picker {
    margin: 40px 0 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(20px, 4vw, 36px);
}
.picker h1 {
    font: 800 clamp(1.9rem, 5vw, 2.8rem)/1.05 var(--display);
    margin: 0 0 6px;
    letter-spacing: -.02em;
}
.lede { margin: 0 0 24px; color: var(--ink-soft); }

.slots { display: grid; gap: 12px; }

.slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.slot-num {
    flex: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bg);
    font: 600 .95rem/1 var(--display);
}
.slot-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 1.05rem;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink);
}
.slot-input:focus { border-color: var(--ink); outline: none; }
.slot-remove {
    flex: none;
    font: inherit; font-size: .85rem;
    background: none; border: 0; color: var(--ink-soft);
    text-decoration: underline; cursor: pointer; padding: 6px;
}

/* picked movie: a ticket stub */
.chip {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 6px 6px;
    border: 2px dashed var(--line);
    border-radius: 10px;
    background: var(--bg);
}
.chip img, .chip-noposter {
    width: 38px; height: 57px;
    object-fit: cover;
    border-radius: 4px;
    flex: none;
    display: grid; place-items: center;
    background: var(--line);
}
.chip-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-clear {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
}
.chip-clear:hover { background: var(--line); color: var(--ink); }

/* autocomplete */
.suggest {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 46px; right: 0;
    margin: 0; padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-height: 360px;
    overflow-y: auto;
}
.suggest-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.suggest-item img, .suggest-noposter {
    width: 30px; height: 45px; object-fit: cover; border-radius: 3px; flex: none; background: var(--line);
}
.suggest-item:hover, .suggest-item.is-active { background: var(--bg); }
.suggest-empty { padding: 10px; color: var(--ink-soft); }

.form-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin: 14px 0 22px;
    padding-left: 46px;
}
.btn-link {
    font: inherit; font-weight: 600;
    background: none; border: 0; padding: 4px 0;
    color: var(--accent); cursor: pointer;
}
.region { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .9rem; }
.region select {
    font: inherit; color: var(--ink);
    padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}

.btn-primary {
    display: block;
    width: 100%;
    font: 600 1.1rem/1 var(--body);
    padding: 17px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    transition: transform .1s ease, opacity .15s ease;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary.is-busy { opacity: .75; cursor: progress; }

.btn-ghost {
    font: inherit; font-size: .9rem; font-weight: 500;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

/* ---------- results ---------- */

.results { margin-top: 28px; }
.results-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.results-head h2 {
    margin: 0;
    font: 800 clamp(1.4rem, 3.4vw, 1.9rem)/1.15 var(--display);
    letter-spacing: -.01em;
    max-width: 34ch;
}
.results-tools { display: flex; align-items: center; gap: 14px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--ink-soft); cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

.sub { font: 600 1.15rem/1.2 var(--display); margin: 32px 0 14px; }

.people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 14px;
}
.person {
    display: flex;
    gap: 14px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.person.is-partial { opacity: .78; }
.person-photo {
    flex: none;
    width: 84px; height: 126px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--line);
}
.person-photo--none {
    display: grid; place-items: center;
    font: 600 1.4rem/1 var(--display);
    color: var(--ink-soft);
}
.person-body { min-width: 0; flex: 1; }
.person-name { margin: 2px 0 6px; font: 600 1.1rem/1.2 var(--display); }
.person-name a { text-decoration: none; }
.person-name a:hover { text-decoration: underline; }
.badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gold);
    color: #1d1a17;
    font-size: .75rem; font-weight: 600;
}
.roles { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.roles li { padding: 4px 0; border-top: 1px dashed var(--line); }
.roles li:first-child { border-top: 0; }
.role-movie { display: block; font-weight: 600; }
.role-name { display: block; color: var(--ink-soft); overflow-wrap: anywhere; }

.people--compact .person-photo { width: 56px; height: 84px; }
.people--compact .person-name { font-size: 1rem; }

.empty { color: var(--ink-soft); margin: 0; }

/* ---------- where to watch ---------- */

.watch { margin-top: 44px; }
.watch > h2 { font: 800 1.5rem/1.2 var(--display); margin: 0 0 14px; }
.watch-list { display: grid; gap: 14px; }
.watch-card {
    display: flex; gap: 16px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.watch-poster { flex: none; width: 92px; height: 138px; object-fit: cover; border-radius: 8px; background: var(--line); }
.watch-body { min-width: 0; flex: 1; }
.watch-body h3 { margin: 0 0 10px; font: 600 1.15rem/1.2 var(--display); }
.prov-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.prov-label { width: 92px; flex: none; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.prov-logos { display: flex; flex-wrap: wrap; gap: 6px; }
.prov img { width: 40px; height: 40px; border-radius: 9px; }
.prov { transition: transform .1s ease; }
.prov:hover { transform: translateY(-2px); }
.buy-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-buy {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-size: .9rem; font-weight: 600;
    text-decoration: none;
}
.attrib { font-size: .8rem; color: var(--ink-soft); margin-top: 10px; }

/* ---------- status + ads ---------- */

.status {
    margin: 20px 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.status.is-error { border-color: var(--accent); color: var(--accent); }

.ad-slot { margin: 28px auto; text-align: center; }
.ad-slot.is-placeholder {
    display: grid; place-items: center;
    min-height: 90px;
    border: 2px dashed var(--line);
    border-radius: 10px;
    color: var(--ink-soft);
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- small screens ---------- */

@media (max-width: 560px) {
    .form-row { padding-left: 0; }
    .suggest { left: 0; }
    .slot-num { width: 28px; height: 28px; font-size: .85rem; }
    .watch-poster { width: 64px; height: 96px; }
    .prov-label { width: 100%; }
    .results-tools { width: 100%; justify-content: space-between; }
}

/* Edition 02 — an editorial shell around a cinematic connection stage. */
:root { --radius: 18px; }
.wrap { width:min(1180px,100% - 48px); }
button,select,input { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
a { text-underline-offset:3px; }
.site-header { padding:25px 0; }
.site-header .wrap { justify-content:space-between; align-items:center; }
.brand { font-size:1.8rem; }
.tagline { font-size:.84rem; }
.eyebrow { display:block; font:600 .69rem/1.5 var(--body); text-transform:uppercase; letter-spacing:.16em; color:var(--accent); margin-bottom:12px; }
.picker { position:relative; margin-top:42px; padding:40px; background:var(--surface); }
.picker h1 { font-size:clamp(2.8rem,5.5vw,4.8rem); font-weight:600; letter-spacing:-.055em; margin-bottom:16px; }
.picker h1 em { color:var(--accent); font-style:italic; }
.lede { max-width:48ch; margin-bottom:32px; }
.slots { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.slot { align-items:stretch; flex-wrap:wrap; gap:10px; padding:18px; background:var(--bg); border:1px solid var(--line); border-radius:14px; }
.slot-num { width:25px; height:25px; position:absolute; left:9px; top:9px; z-index:1; background:var(--accent); color:white; font:600 .7rem var(--body); box-shadow:0 0 0 4px var(--bg); }
.slot-input { height:118px; width:100%; background:transparent; padding:20px; border:1px dashed var(--line); text-align:center; font-size:1rem; }
.chip { border:0; padding:0; background:transparent; gap:18px; }
.chip img,.chip-noposter { width:78px; height:118px; border-radius:7px; box-shadow:0 6px 12px #0002; }
.chip-title { white-space:normal; font:600 1.3rem/1.25 var(--display); }
.chip-clear { align-self:flex-start; background:var(--surface); }
.slot-remove { width:100%; text-align:right; padding:0; font-size:.75rem; }
.suggest { left:0; right:0; top:calc(100% + 6px); }
.form-row { padding-left:0; margin:20px 0; }
.btn-primary { border-radius:9px; padding:20px; font-size:1rem; }
.examples { margin:32px 0 52px; }
.example-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.example-list button { text-align:left; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:12px; padding:20px; font-size:.9rem; cursor:pointer; transition:background .2s,transform .2s; }
.example-list button:hover { background:var(--surface); transform:translateY(-2px); }
.example-list span { display:block; color:var(--ink-soft); font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:10px; }
.example-list b { color:var(--accent); padding:0 5px; }.example-list i { float:right; font-style:normal; }
.comparison-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding:24px 0; }
.comparison-bar p { margin:0; font-size:.9rem; font-weight:500; }.comparison-bar .eyebrow { margin:0 0 5px; font-size:.6rem; }
.comparison-bar button { flex-shrink:0; }
.results { margin-top:36px; }.results-head { align-items:center; margin-bottom:24px; }.results-head h2 { font-size:clamp(1.9rem,3.6vw,3rem); font-weight:600; letter-spacing:-.04em; max-width:none; }
.results-head .eyebrow { margin-bottom:6px; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.segmented { display:flex; gap:3px; padding:4px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.segmented button { border:0; border-radius:5px; background:transparent; color:var(--ink-soft); font-size:.8rem; padding:9px 16px; cursor:pointer; }
.segmented button[aria-pressed=true] { background:var(--ink); color:var(--bg); }
.segmented span { opacity:.75; margin-left:7px; font-size:.7rem; }
.view-switch { margin-left:auto; }
.filter-bar label { font-size:.7rem; color:var(--ink-soft); display:flex; gap:7px; align-items:center; }
.filter-bar select,.filmography-controls select { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:10px; max-width:220px; font-size:.8rem; }
.filter-summary { margin:16px 0; color:var(--ink-soft); font-size:.8rem; }
.connection-stage { position:relative; isolation:isolate; overflow:hidden; border-radius:20px; padding:26px 36px; background:radial-gradient(ellipse at 50% 0%,#3b302d 0%,#211e20 45%,#141315 100%); color:#f6f1e7; box-shadow:0 18px 40px #1d1a171c; }
.connection-stage canvas,.connection-stage svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.stage-caption { display:flex; justify-content:space-between; gap:16px; font-size:.57rem; letter-spacing:.16em; color:#b7aaa1; margin-bottom:30px; }
.stage-caption span:last-child { text-transform:none; letter-spacing:.02em; }
.map-titles { display:flex; justify-content:space-around; align-items:flex-start; gap:25px; }
.map-title { flex:1; min-width:0; max-width:190px; display:flex; align-items:center; flex-direction:column; text-decoration:none; text-align:center; transition:opacity .2s,transform .25s; }
.map-poster { display:grid; place-items:center; width:120px; height:180px; object-fit:cover; border:1px solid #fff3; border-radius:7px; background:#3b3435; box-shadow:0 15px 25px #0008; color:#d4c9bd; }
.map-title-name { display:block; margin-top:12px; font:600 1rem/1.25 var(--display); background:#211e20d9; border-radius:4px; padding:3px 7px; }
.map-title small { color:#bfb1aa; font-size:.7rem; background:#211e20d9; padding:0 5px; }
.map-title:hover { transform:translateY(-4px); }.map-title.is-dim { opacity:.3; }
.map-divider { height:100px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.map-divider span { border:1px solid #6e4540; background:#231d20; color:#eea69b; padding:7px 14px; border-radius:50px; font-size:.58rem; text-transform:uppercase; letter-spacing:.18em; }
.map-people { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 18px; }
.map-person { display:flex; align-items:center; flex-direction:column; min-width:0; text-decoration:none; text-align:center; border-radius:8px; padding:4px 6px; }
.map-photo { width:74px; height:90px; object-fit:cover; border-radius:40px 40px 12px 12px; background:#4b3d3b; border:2px solid #d38a79; box-shadow:0 0 0 5px #241e21; transition:box-shadow .25s,filter .25s; }
.image-placeholder { display:grid; place-items:center; font:600 1.4rem var(--display); }
.map-person:hover .map-photo,.map-person:focus-visible .map-photo { box-shadow:0 0 0 5px #6a3a33,0 0 25px #e95a3a65; }
.map-person strong { margin-top:12px; font:600 .97rem/1.25 var(--display); background:#1b191bd9; padding:3px 5px; }
.map-role { font-size:.64rem; line-height:1.5; color:#c2b6b0; margin-top:4px; max-width:24ch; background:#1b191be8; border-radius:4px; padding:3px 5px; }
.map-pagination { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #ffffff19; padding-top:22px; margin-top:28px; font-size:.7rem; color:#c3b4ac; gap:12px; }
.map-pagination button { background:transparent; border:1px solid #ffffff35; border-radius:6px; padding:8px 12px; color:#f6f1e7; font-size:.7rem; cursor:pointer; }
.map-pagination button:disabled { opacity:.3; cursor:default; }.map-empty { grid-column:1/-1; text-align:center; color:#c3b4ac; padding:15px; }
.people { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.person { padding:18px; border-radius:12px; box-shadow:none; transition:transform .2s,box-shadow .2s; }.person:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.person-photo { width:86px; height:129px; }.portrait-link { flex-shrink:0; text-decoration:none; }.person-body { overflow-wrap:anywhere; }.person-name { font-size:1.1rem; }.role-movie { font-size:.78rem; text-decoration:none; }.role-movie:hover { text-decoration:underline; }.role-name { font-size:.77rem; }.roles li { padding:8px 0; }.person.is-partial { opacity:1; }
.watch { border-top:1px solid var(--line); padding-top:30px; margin-top:42px; }.watch > h2 { font-size:2rem; font-weight:600; }.watch-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.watch-card { padding:20px; }.watch-body h3 a { text-decoration:none; }.prov-label { width:100%; font-size:.65rem; }.prov img { width:32px; height:32px; }
.ad-slot.is-placeholder { display:none; } /* No empty inventory boxes in the public interface. Configured ad HTML is retained. */
.site-footer { margin-top:56px; padding:36px 0 24px; }.footer-top,.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }.footer-top { padding-bottom:28px; border-bottom:1px solid var(--line); }.footer-top .brand { color:var(--ink); font-size:1.4rem; }.footer-top>span { font-size:.8rem; }.footer-bottom { padding-top:16px; }.footer-bottom p { margin:0; font-size:.75rem; }.footer-bottom nav { display:flex; flex-wrap:wrap; gap:20px; font-size:.75rem; }.footer-bottom a { text-decoration:none; }.footer-bottom a:hover { text-decoration:underline; }.site-footer .attrib { font-size:.67rem; margin-top:20px; max-width:90ch; }
.detail { padding-top:28px; }.back-link { display:inline-block; color:var(--ink-soft); margin:0 0 28px; font-size:.82rem; text-decoration:none; }.detail-hero { display:grid; grid-template-columns:220px minmax(0,1fr); gap:40px; padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:18px; }.detail-image { width:220px; height:330px; object-fit:cover; border-radius:10px; background:var(--line); view-transition-name:selected-portrait; }.detail-copy h1 { font:600 clamp(2rem,4vw,3.5rem)/1.07 var(--display); margin:0 0 16px; letter-spacing:-.04em; }.detail-description,.full-bio { white-space:pre-line; color:var(--ink-soft); font-size:.9rem; line-height:1.8; }.detail-meta { font-size:.8rem; }.source-link { display:inline-block; font-size:.8rem; margin:12px 18px 12px 0; }.detail h2 { font:600 2rem var(--display); margin:38px 0 18px; }.detail details { font-size:.8rem; }.detail summary { cursor:pointer; }.filmography-controls { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }.filmography-controls input { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:10px 14px; min-width:0; }.filmography { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px 20px; }.film-credit { min-width:0; }.film-credit a { text-decoration:none; }.film-poster { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:9px; background:var(--line); transition:transform .2s; }.film-credit a:hover .film-poster { transform:translateY(-4px); }.film-credit h3 { font:600 1rem/1.3 var(--display); margin:12px 0 4px; }.film-credit small,.film-credit p { color:var(--ink-soft); font-size:.72rem; }.film-credit p { margin:6px 0; }.compare-credit { font-size:.7rem; border-radius:6px; padding:8px 10px; }.load-more { margin:32px 0; }.detail-tabs { width:fit-content; margin-bottom:24px; }
@media (max-width:950px) { .people { grid-template-columns:repeat(2,minmax(0,1fr)); }.filmography { grid-template-columns:repeat(4,minmax(0,1fr)); }.watch-list { grid-template-columns:1fr; }.chip-title { font-size:1.1rem; }.stage-caption { font-size:.5rem; } }
@media (max-width:640px) {
    .wrap { width:calc(100% - 28px); }.site-header { padding:21px 0; }.brand { font-size:1.5rem; }.tagline { display:none; }.picker { margin-top:22px; padding:24px 18px; }.picker h1 { font-size:3rem; }.lede { font-size:.9rem; }.slots { grid-template-columns:1fr; gap:12px; }.slot { padding:13px; }.slot-input { height:76px; }.chip img,.chip-noposter { width:50px; height:75px; }.chip-title { font-size:1.15rem; }.example-list { grid-template-columns:1fr; gap:10px; }.examples { margin-bottom:32px; }.comparison-bar { gap:10px; }.comparison-bar p { font-size:.77rem; }.comparison-bar .btn-ghost { font-size:.7rem; padding:8px 10px; }.results-head { gap:12px; }.results-head h2 { font-size:2rem; }.results-head .btn-ghost { font-size:.72rem; }.filter-bar { gap:8px; }.filter-bar label { width:100%; }.filter-bar select { flex:1; max-width:none; }.view-switch { margin-left:0; }.segmented button { padding:9px 13px; }.people { grid-template-columns:1fr; }.person { padding:16px; }.person-photo { width:90px; height:135px; }.connection-stage { padding:20px 14px; border-radius:12px; }.stage-caption span:last-child { display:none; }.map-titles { gap:8px; }.map-poster { width:min(88px,100%); height:auto; aspect-ratio:2/3; }.map-title-name { font-size:.75rem; }.map-title small { font-size:.6rem; }.map-divider { height:80px; }.map-people { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 10px; }.map-pagination { font-size:.6rem; }.map-pagination button { font-size:.6rem; padding:7px; }.stage-caption { font-size:.52rem; }.map-role { font-size:.61rem; }.detail-hero { grid-template-columns:85px minmax(0,1fr); padding:20px; gap:18px; }.detail-image { width:85px; height:128px; }.detail-copy h1 { font-size:2rem; }.detail-description { font-size:.8rem; }.detail-hero .eyebrow { font-size:.55rem; }.filmography { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }.detail h2 { font-size:1.6rem; }.footer-top { align-items:flex-start; gap:14px; }.footer-top>span { width:100%; font-size:.75rem; }.footer-bottom nav { gap:14px; }.footer-bottom { gap:16px; }.filmography-controls input { flex:1; width:130px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } ::view-transition-group(*) { animation:none!important; } }
.prov .image-placeholder { font:500 .65rem var(--body); padding:7px 9px; min-height:32px; border-radius:6px; background:var(--bg); border:1px solid var(--line); }
#status { position:sticky; top:12px; z-index:40; box-shadow:var(--shadow); }

@media (prefers-reduced-motion:no-preference) { ::view-transition-group(*) { animation-duration:.42s; animation-timing-function:cubic-bezier(.22,.7,.25,1); } }

/* ==========================================================================
   Edition 03 — tomato palette
   Red header, grey "trending" band, charcoal caption cards with a red left
   rule, yellow highlights on dark grounds, charcoal footer.
   ========================================================================== */

body { background: var(--bg); color: var(--ink); }

/* Header: solid tomato red, white type */
.site-header { background: var(--brand); border-bottom: 0; color: #fff; }
.site-header .brand { color: #fff; }
.site-header .brand::before { color: #fff; }
.site-header .tagline { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.site-header a:focus-visible { outline-color: #fff; }

/* Eyebrows + emphasis */
.eyebrow { color: var(--accent-text); }
.picker h1 em { color: var(--accent-text); }
.btn-link { color: var(--accent-text); }
.status.is-error { border-color: var(--accent); color: var(--accent-text); }

/* Picker */
.picker { background: var(--surface); border-color: var(--line); }
.slot { background: var(--surface-alt); border-color: var(--line); }
.slot-input { border-color: #c4c4c4; background: var(--surface); }
.slot-input:focus { border-color: var(--accent); border-style: solid; }
.slot-num { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--surface-alt); }
.chip-clear { background: var(--surface); color: var(--ink-soft); }
.chip-clear:hover { background: var(--accent); color: #fff; }
.suggest-item:hover, .suggest-item.is-active { background: var(--surface-alt); box-shadow: inset 3px 0 0 var(--accent); }
.region select, .filter-bar select, .filmography-controls select, .filmography-controls input { background: var(--surface); border-color: #c4c4c4; }

/* Buttons */
.btn-primary { background: var(--accent); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost { background: var(--surface); border-color: #c4c4c4; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.segmented { background: var(--surface-alt); border-color: var(--line); }
.segmented button { color: var(--ink-soft); }
.segmented button[aria-pressed=true] { background: var(--accent); color: #fff; }

/* Example double features: charcoal caption cards, red left rule */
.example-list button {
    background: var(--night); color: var(--night-ink);
    border: 0; border-left: 4px solid var(--brand); border-radius: 4px;
    font-weight: 600;
}
.example-list button:hover { background: #2f3036; }
.example-list span { color: var(--gold); }
.example-list b { color: var(--brand); }
.example-list i { color: var(--night-soft); }

/* Comparison bar = the grey "trending" band */
.comparison-bar { background: var(--bar); color: #fff; border: 0; border-radius: 4px; padding: 14px 18px; margin-top: 18px; }
.comparison-bar .eyebrow { color: var(--gold); }
.comparison-bar p { color: #fff; }
.comparison-bar .btn-ghost { background: transparent; color: #fff; border-color: #ffffff80; }
.comparison-bar .btn-ghost:hover { border-color: #fff; background: #ffffff1a; }

/* Connection map: dark stage, red threads, yellow highlights */
.connection-stage { background: radial-gradient(ellipse at 50% 0%, #34363d 0%, var(--night) 50%, #0f0f11 100%); color: var(--night-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.stage-caption { color: var(--night-soft); }
.stage-caption span:first-child { color: var(--gold); font-weight: 700; }
.map-poster { border-color: #ffffff2e; background: #34363d; color: var(--night-soft); }
.map-title-name { background: #0f0f11d9; color: #fff; border-left: 3px solid var(--brand); border-radius: 2px; }
.map-title small { background: #0f0f11d9; color: var(--night-soft); }
.map-divider span { border-color: var(--brand); background: #0f0f11; color: var(--gold); font-weight: 700; }
.map-photo { border-color: var(--brand); background: #34363d; box-shadow: 0 0 0 5px var(--night); }
.map-person:hover .map-photo, .map-person:focus-visible .map-photo { box-shadow: 0 0 0 5px #5a1606, 0 0 25px rgba(250, 50, 10, .45); }
.map-person strong { background: #0f0f11d9; color: #fff; }
.map-role { background: #0f0f11e8; color: var(--night-soft); }
.map-pagination { border-top-color: #ffffff1f; color: var(--night-soft); }
.map-pagination button { border-color: #ffffff4d; color: #fff; }
.map-pagination button:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.map-empty { color: var(--night-soft); }
.image-placeholder { color: var(--night-soft); }

/* Cards: white with a red left rule */
.person, .watch-card { background: var(--surface); border-color: var(--line); border-left: 4px solid var(--brand); border-radius: 4px; }
.person:hover { box-shadow: var(--shadow); }
.person-photo, .watch-poster, .chip img, .chip-noposter, .film-poster, .detail-image { background: var(--surface-alt); }
.person-photo--none { color: var(--ink-soft); }
.person-name a:hover, .role-movie:hover { color: var(--accent-text); }
.roles li { border-top-color: var(--line); }
.badge { background: var(--gold); color: #2a2c32; font-weight: 700; }
.btn-buy { background: var(--accent); color: #fff; }
.btn-buy:hover { background: var(--accent-hover); }
.prov .image-placeholder { background: var(--surface-alt); border-color: var(--line); color: var(--ink-soft); }

/* Section headings get the red rule too */
.results-head h2, .watch > h2, .detail h2 { border-left: 5px solid var(--brand); padding-left: 14px; }
.watch { border-top-color: var(--line); }

/* Detail view */
.detail-hero { background: var(--surface); border-color: var(--line); border-top: 4px solid var(--brand); }
.back-link:hover { color: var(--accent-text); }

/* Footer: charcoal */
.site-footer { background: var(--night); color: var(--night-soft); border-top: 4px solid var(--brand); margin-top: 64px; }
.site-footer a { color: #fff; }
.footer-top { border-bottom-color: #ffffff1f; }
.footer-top .brand { color: #fff; }
.footer-top .brand::before { color: var(--brand); }
.site-footer .attrib { color: var(--night-soft); }
.site-footer a:focus-visible { outline-color: var(--gold); }

/* Ads keep a neutral frame so they never read as content */
.ad-slot:not(.is-placeholder) { background: var(--surface-alt); padding: 8px; border-radius: 4px; }

/* Headings focused by script (tabindex=-1) shouldn't draw a focus box */
[tabindex="-1"]:focus { outline: none; }

@media (prefers-color-scheme: dark) {
    .connection-stage { border: 1px solid var(--line); }
    .comparison-bar { background: #3a3c42; }
}