/* ============================================================
   A CENTURY OF NEW YORK, TWO WAYS — combined synchronized races
   Archival civic / printed-almanac look: warm paper, hard rules,
   a big serif census YEAR driving two panels.
   ============================================================ */
:root{
  --paper:#f6f1e7; --paper-2:#efe8d9; --ink:#16130e; --ink-dim:#5d574a; --ink-faint:#8d8473;
  --rule:#16130e; --line:#cfc6b2; --maxw:1320px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:radial-gradient(1100px 600px at 50% -10%, #fbf7ee 0%, rgba(251,247,238,0) 60%), var(--paper);
  color:var(--ink); font-family:"Inter",system-ui,sans-serif; min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ---- top bar ---- */
.topbar{ max-width:var(--maxw); margin:0 auto; padding:26px 26px 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; border-bottom:2px solid var(--rule); }
.brand{ display:flex; flex-direction:column; line-height:1.05; }
.brand-kicker{ font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:11.5px; color:var(--ink-dim); margin-bottom:8px; }
.brand-mark{ font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:clamp(30px,4.6vw,52px); letter-spacing:-.01em; margin:0; line-height:.97; }
.brand-sub{ margin-top:8px; color:var(--ink-dim); font-weight:500; font-size:14.5px; }
.topbar-right{ flex:0 0 auto; padding-bottom:4px; }
.ai-caution{ font-family:inherit; cursor:pointer; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:#7c1d12; border:1px solid #5e150c; padding:8px 13px; }
.ai-caution:hover{ background:#94251a; }

/* ---- shared clock ---- */
.clock{ max-width:var(--maxw); margin:16px auto 4px; padding:6px 26px 10px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center; }
.transport{ font-family:inherit; cursor:pointer; color:var(--ink); width:46px; height:46px; border-radius:50%; background:var(--paper-2); border:2px solid var(--rule); font-size:15px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .15s, transform .1s; }
.transport:hover{ background:#e6dcc7; } .transport:active{ transform:scale(.93); }
.play{ width:54px; height:54px; font-size:14px; letter-spacing:-2px; }
.year-wrap{ display:flex; flex-direction:column; align-items:center; min-width:min(560px,86vw); }
.era{ font-weight:700; color:var(--ink-dim); letter-spacing:.26em; font-size:13px; text-transform:uppercase; margin-bottom:2px; }
.year{ font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:clamp(64px,10vw,116px); line-height:.9; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); }
.scrub{ -webkit-appearance:none; appearance:none; width:100%; height:4px; margin-top:14px; background:var(--line); cursor:pointer; outline:none; }
.scrub::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--ink); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--ink); cursor:grab; }
.scrub::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--ink); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--ink); cursor:grab; }
.speeds{ display:flex; gap:6px; }
.speed{ font-family:inherit; cursor:pointer; font-weight:700; font-size:13.5px; color:var(--ink-dim); background:var(--paper-2); border:2px solid var(--rule); padding:8px 11px; min-width:44px; }
.speed:hover{ color:var(--ink); } .speed.is-active{ color:var(--paper); background:var(--ink); }

/* ---- two panels ---- */
.panels{ max-width:var(--maxw); margin:14px auto 0; padding:0 26px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:start; }
.panel{ min-width:0; }
.panel-head{ border-top:2px solid var(--rule); padding-top:10px; margin-bottom:8px; }
.panel-title{ font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:clamp(20px,2.4vw,28px); margin:0; line-height:1; }
.panel-sub{ margin:4px 0 0; color:var(--ink-dim); font-size:13px; font-weight:500; }

.modebar{ display:flex; align-items:center; margin:6px 0 12px; }
.mode-toggle{ display:flex; border:2px solid var(--rule); }
.mode{ font-family:inherit; font-weight:700; cursor:pointer; font-size:12.5px; color:var(--ink-dim); background:var(--paper); border:none; padding:7px 13px; }
.mode + .mode{ border-left:2px solid var(--rule); }
.mode:hover{ color:var(--ink); } .mode.is-active{ color:var(--paper); background:var(--ink); }

.legendrow{ margin:6px 0 12px; min-height:34px; }
.region-legend{ display:flex; gap:13px; flex-wrap:wrap; }
.rl-item{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink-dim); }
.rl-dot{ width:11px; height:11px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }

/* ---- lanes (shared) ---- */
.track{ position:relative; width:100%; }
.lane{ position:absolute; left:0; top:0; width:100%; display:grid; grid-template-columns:1fr 92px; align-items:center; gap:10px; will-change:transform; contain:layout style; transition:opacity .4s ease; --w:2%; }
#demoTrack .lane{ height:calc(56px - 12px); }
#immTrack .lane{ height:calc(38px - 7px); }
.lane-bar{ position:relative; height:100%; border-bottom:1px solid var(--line); }
.lane-fill{ position:absolute; left:0; bottom:0; height:calc(100% - 5px); width:2%; min-width:3px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); transition:width .12s linear, filter .25s ease; }
.lane-overlay .lane-fill{ background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--c) 88%,#fff) 0 7px, color-mix(in srgb,var(--c) 64%,#fff) 7px 14px); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,#000); }
.lane-nh{ position:absolute; left:0; bottom:0; height:calc(100% - 5px); width:100%; pointer-events:none; }
.lane-nh[hidden]{ display:none; }
.lane-nh-tick{ position:absolute; bottom:0; height:100%; width:0; border-right:2px dashed rgba(255,255,255,.85); }
.lane-nh-tick::after{ content:"non-Hisp."; position:absolute; bottom:2px; right:4px; font-size:8.5px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.92); text-transform:uppercase; white-space:nowrap; }
.lane-name{ position:absolute; left:10px; top:50%; transform:translateY(-50%); font-weight:700; font-size:13px; color:#fff; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none; max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; }
.lane-name.outside{ left:calc(var(--w) + 8px); color:var(--ink); text-shadow:none; }
.lane-overlay .lane-name{ color:var(--ink); text-shadow:none; }
.lane.faded .lane-name:not(.outside){ color:rgba(255,255,255,.85); }
.lane-meta{ text-align:right; line-height:1.02; }
.lane-val{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums; display:block; }
.lane-sub{ font-size:10px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; }

.mini-note{ margin:16px 0 0; padding-top:12px; border-top:1px dashed var(--line); color:var(--ink-dim); font-size:12px; line-height:1.5; }
.mini-note[hidden]{ display:none; }
.mini-note strong{ color:var(--ink); }
.fade-swatch{ display:inline-block; vertical-align:middle; width:46px; height:11px; border-radius:3px; margin-right:5px; background:linear-gradient(90deg, hsl(205 58% 50%) 0%, hsl(205 20% 62%) 60%, hsl(205 8% 78%) 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }

/* ---- footer ---- */
.footnote{ max-width:var(--maxw); margin:30px auto 48px; padding:16px 26px 0; color:var(--ink-dim); border-top:2px solid var(--rule); }
.footnote p{ margin:8px 0; font-size:13px; line-height:1.6; }
.footnote strong{ color:var(--ink); }
.footnote .src{ color:var(--ink-faint); font-size:12.5px; }
.linklike{ background:none; border:none; padding:0; font:inherit; color:#7c1d12; cursor:pointer; text-decoration:underline; }

/* ---- AI caution popover ---- */
.caution-pop{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; background:rgba(20,16,10,.55); backdrop-filter:blur(3px); padding:20px; }
.caution-pop[hidden]{ display:none; }
.caution-card{ position:relative; max-width:620px; width:100%; background:var(--paper); border:2px solid var(--rule); padding:28px 30px; color:var(--ink); box-shadow:14px 14px 0 rgba(20,16,10,.16); }
.caution-card h2{ font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:24px; margin:0 0 14px; }
.caution-card ul{ margin:0; padding-left:18px; } .caution-card li{ margin:9px 0; font-size:13.5px; line-height:1.5; }
.caution-foot{ margin-top:16px; font-size:13px; color:var(--ink-dim); }
.caution-close{ position:absolute; top:10px; right:14px; background:none; border:none; color:var(--ink-dim); font-size:26px; cursor:pointer; line-height:1; }
.caution-close:hover{ color:var(--ink); }

/* ---- responsive: stack panels ---- */
@media (max-width: 860px){
  .panels{ grid-template-columns:1fr; gap:24px; }
  .topbar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .year{ font-size:clamp(56px,16vw,92px); }
}
@media (prefers-reduced-motion: reduce){ .lane, .lane-fill{ transition:none; } }