/* Transposition Atlas — Emergence Machine design language.
   Palette/type extracted from emergencemachine.com/tools/citizen-copilot. */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300; src: url(/tools/movie-substrate/assets/fonts/newsreader-300.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; src: url(/tools/movie-substrate/assets/fonts/newsreader-300italic.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; src: url(/tools/movie-substrate/assets/fonts/space-grotesk-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; src: url(/tools/movie-substrate/assets/fonts/space-grotesk-500.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 300; src: url(/tools/movie-substrate/assets/fonts/public-sans-300.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; src: url(/tools/movie-substrate/assets/fonts/public-sans-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; src: url(/tools/movie-substrate/assets/fonts/public-sans-500.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; src: url(/tools/movie-substrate/assets/fonts/public-sans-600.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; src: url(/tools/movie-substrate/assets/fonts/ibm-plex-mono-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; src: url(/tools/movie-substrate/assets/fonts/ibm-plex-mono-500.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; src: url(/tools/movie-substrate/assets/fonts/caveat-400.woff2) format('woff2'); font-display: swap; }

:root {
  --bg: #08080A;
  --panel: #111114;
  --ink: #ECEAE3;
  --ink-bright: #EDEBE4;
  --ink-2: #a7abb6;
  --ink-3: #7d818c;
  --mono-ink: #c9ccd4;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.16);
  --card-grad: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
  --warm: #C9944A;          /* substrate accent */
  --cool: #9498A4;          /* tag / secondary accent */
  --sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  --grotesk: 'Space Grotesk', sans-serif;
  --serif: 'Newsreader', serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink); min-height: 100vh; overflow-x: hidden;
  font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.at-pad { max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* ---- Header (EM brand) ---- */
.at-nav { position: relative; z-index: 20; display: flex; flex-wrap: wrap; row-gap: 14px; align-items: center; justify-content: space-between; padding-top: 26px; }
.at-brand { display: flex; align-items: center; gap: 12px; }
.at-brand .name { font-family: 'Caveat', cursive; font-size: 26px; line-height: 1; letter-spacing: .01em; color: var(--ink); }
.at-menu-wrap { position: relative; display: inline-flex; }
.at-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.04); transition: border-color .2s, background .2s; }
.at-burger:hover { border-color: rgba(237,235,228,.45); background: rgba(255,255,255,.07); }
.at-burger span { display: block; height: 1.6px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .28s ease, opacity .2s ease; }
.at-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.at-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.at-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
.at-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 40; display: flex; flex-direction: column; gap: 2px; min-width: 230px; padding: 10px; background: var(--panel); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); font-size: 14.5px; letter-spacing: .01em; color: #aeb1bc; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.at-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.at-menu a { padding: 10px 14px; border-radius: 9px; transition: background .18s, color .18s; }
.at-menu a:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.at-menu .menu-note { padding: 8px 14px 4px; font-family: var(--grotesk); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* ---- Hero ---- */
.at-hero { padding-top: 64px; padding-bottom: 26px; position: relative; }
#at-symbols { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.at-hero-copy { position: relative; z-index: 2; max-width: 900px; background: rgba(8,8,10,.8); box-shadow: 0 0 48px 32px rgba(8,8,10,.8); border-radius: 24px; }
.at-hero .at-stats { position: relative; z-index: 2; }
.at-stat.clickable { cursor: pointer; transition: border-color .2s, transform .2s; }
.at-stat.clickable:hover { border-color: rgba(237,235,228,.45); transform: translateY(-2px); }
.at-gloss { position: relative; z-index: 2; max-width: 700px; margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: #7d818c; text-wrap: pretty; }
.at-gloss b { color: #a7abb6; font-weight: 600; }
.at-lede a { color: var(--ink); border-bottom: 1px solid rgba(237,235,228,.4); }
.at-lede a:hover { border-bottom-color: var(--ink); }
.at-brand .logo { width: 30px; height: 30px; object-fit: cover; display: block; }
.at-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--grotesk); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-bright); margin-bottom: 20px; }
.at-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--ink-bright); opacity: .7; }
.at-h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.6vw, 70px); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 18px; text-wrap: balance; }
.at-h1 em { font-style: italic; color: var(--ink-bright); }
.at-lede { max-width: 620px; font-size: 17.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 34px; text-wrap: pretty; }

.at-stats { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.at-stat { border: 1px solid var(--line); border-radius: 18px; background: var(--card-grad); padding: 16px 22px; min-width: 128px; }
.at-stat .v { font-family: var(--mono); font-weight: 500; font-size: 27px; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1; }
.at-stat .l { font-family: var(--grotesk); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.at-stat.pulse .v { animation: at-pulse 1.2s ease 1; }
@keyframes at-pulse { 0% { color: var(--warm); } 100% { color: var(--ink); } }
.at-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--grotesk); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.at-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); animation: at-blink 2.4s ease infinite; }
@keyframes at-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- Layout shell ---- */
.at-shell { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; padding-bottom: 90px; }
.at-main { min-width: 0; display: flex; flex-direction: column; gap: 40px; }

/* ---- Section heads ---- */
.at-sect-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); padding-top: 28px; }
.at-kicker { font-family: var(--grotesk); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.at-h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 3vw, 34px); }
.at-h2 em { font-style: italic; }

/* ---- Controls ---- */
.at-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.at-input { flex: 1 1 220px; max-width: 340px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-family: var(--sans); font-size: 14px; padding: 10px 18px; outline: none; transition: border-color .2s; }
.at-input::placeholder { color: var(--ink-3); }
.at-input:focus-visible { border-color: rgba(237,235,228,.45); }
.at-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.at-seg button { font-family: var(--grotesk); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 9px 16px; transition: background .18s, color .18s; }
.at-seg button:hover { color: var(--ink); }
.at-seg button[aria-pressed="true"] { background: var(--ink-bright); color: var(--bg); font-weight: 500; }
.at-seg button:focus-visible, .at-burger:focus-visible, .at-chip:focus-visible { outline: 1px solid rgba(237,235,228,.6); outline-offset: 2px; }

.at-typeahead { position: relative; flex: 1 1 200px; max-width: 280px; }
.at-typeahead .at-input { width: 100%; max-width: none; }
.at-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; max-height: 280px; overflow-y: auto; background: var(--panel); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 6px; display: none; }
.at-suggest.open { display: block; }
.at-suggest button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.at-suggest button:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.at-suggest .kind { font-family: var(--grotesk); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); align-self: center; flex-shrink: 0; }

.at-download { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(237,235,228,.3); border-radius: 999px; padding: 9px 18px; font-family: var(--grotesk); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); transition: border-color .2s, color .2s; }
.at-download:hover { border-color: var(--ink-bright); color: var(--ink); }

.at-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 8px; }
.at-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(237,235,228,.3); border-radius: 999px; padding: 6px 8px 6px 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: rgba(255,255,255,.05); transition: border-color .2s; }
.at-chip:hover { border-color: rgba(237,235,228,.55); }
.at-chip .dim { font-family: var(--grotesk); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.at-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 11px; line-height: 1; }
.at-chip.warm { border-color: rgba(201,148,74,.5); }
.at-chip.clear-all { border-style: dashed; color: var(--ink-3); }

/* ---- Cards / charts ---- */
.at-card { border: 1px solid var(--line); border-radius: 22px; background: var(--card-grad); padding: 26px 28px; }
.at-card .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.at-card h3 { font-family: var(--grotesk); font-weight: 500; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.at-pivot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-pivot label { font-family: var(--grotesk); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.at-select { appearance: none; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-family: var(--grotesk); font-size: 12px; letter-spacing: .04em; padding: 7px 30px 7px 14px; outline: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%237d818c'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.at-select:focus-visible { border-color: rgba(237,235,228,.45); }
.at-select option { background: var(--panel); color: var(--ink); }

.at-heat-scroll { overflow-x: auto; }
.at-heat-scroll svg { display: block; margin: 0; max-width: none; }
@media (max-width: 640px) {
  .at-card { padding: 18px 12px; }
  .at-chartgrid .at-card { padding: 16px 12px; }
}
.at-chartgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.at-chartgrid .at-card { padding: 22px 24px; }
.at-chart svg { display: block; width: 100%; height: auto; }

.at-tooltip { position: fixed; z-index: 60; pointer-events: none; background: var(--panel); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 8px 12px; font-family: var(--mono); font-size: 12px; color: var(--ink); box-shadow: 0 12px 34px rgba(0,0,0,.5); display: none; max-width: 260px; }
.at-tooltip .t2 { color: var(--ink-3); font-size: 11px; }
.at-levelcard { position: fixed; z-index: 70; display: none; width: min(320px, calc(100vw - 24px)); background: #111114; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 16px 42px 14px 18px; box-shadow: 0 16px 44px rgba(0,0,0,.6); }
.at-levelcard.open { display: block; }
.at-levelcard .h { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.at-levelcard p { font-size: 14px; line-height: 1.55; color: #a7abb6; margin: 0; }
.at-levelcard .x { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #7d818c; font-size: 20px; line-height: 1; cursor: pointer; }
.at-levelcard .x:hover { color: var(--ink); }
.at-levelcard .more { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink); border-bottom: 1px solid rgba(237,235,228,.4); padding-bottom: 2px; }
.at-levelcard .more:hover { border-bottom-color: var(--ink); }
text[data-level] { text-decoration: underline dotted rgba(237,235,228,.4); text-underline-offset: 3px; }

/* ---- Sidebar ---- */
.at-sidebar { position: sticky; top: 20px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: var(--card-grad); overflow: hidden; }
.at-side-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.at-side-head .count { font-family: var(--mono); font-size: 13px; color: var(--mono-ink); font-variant-numeric: tabular-nums; }
.at-side-head .count b { color: var(--ink); font-weight: 500; }
.at-films { overflow-y: auto; padding: 8px; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.at-film { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 10px; border-radius: 14px; transition: background .16s; align-items: center; }
.at-film:hover { background: rgba(255,255,255,.05); }
.at-film .poster { position: relative; width: 44px; height: 64px; border-radius: 7px; background: rgba(255,255,255,.06) center/cover no-repeat; border: 1px solid var(--line); }
.at-film .poster-rating { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; color: var(--ink-bright); background: rgba(8,8,10,.78); border-radius: 0 0 6px 6px; padding: 1.5px 0; }
.at-film .t { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.at-film .t .y { color: var(--ink-3); font-weight: 300; font-size: 12.5px; margin-left: 6px; font-family: var(--mono); }
.at-film .sym { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.at-sub-glyph { font-family: var(--grotesk); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--warm); border: 1px solid rgba(201,148,74,.4); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.at-microstrip { display: inline-flex; gap: 1.5px; }
.at-microstrip i { width: 5px; height: 8px; border-radius: 1px; background: rgba(255,255,255,.09); }
.at-microstrip i.on { background: var(--ink-bright); }
.at-tagpill { font-family: var(--mono); font-size: 10.5px; color: var(--cool); border: 1px solid rgba(148,152,164,.35); border-radius: 999px; padding: 1.5px 8px; white-space: nowrap; }
.at-empty { padding: 30px 20px; color: var(--ink-3); font-size: 14px; text-align: center; }

/* ---- Footer ---- */
.at-footer { border-top: 1px solid var(--line); padding: 26px 0 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-family: var(--grotesk); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.at-footer a { color: var(--ink-2); border-bottom: 1px solid rgba(237,235,228,.25); }

/* ---- Responsive ---- */
@media (max-width: 1020px) {
  .at-pad { padding-left: 22px; padding-right: 22px; }
  .at-shell { grid-template-columns: 1fr; }
  .at-sidebar { position: static; max-height: 540px; order: 2; }
  .at-chartgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Newsletter subscribe (citizen-copilot pattern: GET to Substack, email prefills) ---- */
.at-subscribe { text-align: center; padding-top: 44px; padding-bottom: 60px; }
.at-subscribe h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.at-subscribe .np { color: #a7abb6; font-size: 16px; line-height: 1.6; margin: 0 auto 22px; max-width: 480px; }
.at-subscribe form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.at-subscribe input { width: min(360px, calc(100vw - 48px)); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 13px 20px; color: var(--ink); font-family: var(--sans); font-size: 15px; outline: none; }
.at-subscribe input:focus { border-color: rgba(237,235,228,.5); }
.at-subscribe button { border: none; cursor: pointer; background: #EDEBE4; color: #08080A; font-weight: 600; font-size: 15px; font-family: var(--sans); border-radius: 999px; padding: 13px 30px; transition: transform .2s; }
.at-subscribe button:hover { transform: translateY(-2px); }
.at-subscribe small { display: block; margin-top: 16px; color: #7d818c; font-size: 13px; }
.at-subscribe small a { color: #a7abb6; border-bottom: 1px solid rgba(255,255,255,.25); }

/* ---- Request CTA (sits between the grid and the subscribe form) ---- */
.at-request { text-align: center; padding-top: 52px; padding-bottom: 8px; }
.at-request h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 12px; }
.at-request .np { color: #a7abb6; font-size: 16px; line-height: 1.6; margin: 0 auto 20px; max-width: 540px; }