/* ============================================================
   WHO LIVES HERE — NYC population race/ethnicity bar-chart race
   Aesthetic: archival civic / printed almanac.
   Warm paper ground, hard black rules, a big serif census YEAR
   driving a single five-lane race. Numerals are serif (a data cue);
   everything else is sans.
   ============================================================ */

:root{
  --paper:    #f6f1e7;
  --paper-2:  #efe8d9;
  --ink:      #16130e;
  --ink-dim:  #5d574a;
  --ink-faint:#8d8473;
  --rule:     #16130e;
  --line:     #cfc6b2;

  --row-h: 64px;
  --maxw: 1180px;
}

*{ 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:30px 26px 14px;
  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-optical-sizing:auto;
  font-size:clamp(34px, 5.2vw, 58px); letter-spacing:-.01em; margin:0; line-height:.96;
}
.brand-sub{ margin-top:8px; color:var(--ink-dim); font-weight:500; font-size:14.5px; }
.topbar-right{ display:flex; align-items:center; gap:14px; flex:0 0 auto; padding-bottom:4px; }
.source{
  color:var(--ink-dim); text-decoration:none; font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line);
}
.source:hover{ color:var(--ink); border-color:var(--ink); }
.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; border-radius:0;
}
.ai-caution:hover{ background:#94251a; }

/* ---------- census-year clock ---------- */
.clock{
  max-width:var(--maxw); margin:18px auto 6px; 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-optical-sizing:auto;
  font-size:clamp(72px, 12vw, 132px); 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); border-radius:0; 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; transition:.15s;
}
.speed:hover{ color:var(--ink); }
.speed.is-active{ color:var(--paper); background:var(--ink); }

/* ---------- mode toggle ---------- */
.modebar{
  max-width:var(--maxw); margin:0 auto; padding:6px 26px 8px;
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
}
.modebar-label{ text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; color:var(--ink-faint); }
.modebar-hint{ color:var(--ink-dim); font-size:13px; font-weight:500; min-width:260px; }
.mode-toggle{ display:flex; border:2px solid var(--rule); }
.mode{
  font-family:inherit; font-weight:700; cursor:pointer; font-size:13.5px; letter-spacing:.01em;
  color:var(--ink-dim); background:var(--paper); border:none; padding:9px 16px;
  transition:color .15s, background .15s;
}
.mode + .mode{ border-left:2px solid var(--rule); }
.mode:hover{ color:var(--ink); }
.mode.is-active{ color:var(--paper); background:var(--ink); }

/* ---------- the race ---------- */
.stage{ max-width:var(--maxw); margin:14px auto 0; padding:0 26px; }
.track{ position:relative; width:100%; }

.lane{
  position:absolute; left:0; top:0; height:calc(var(--row-h) - 12px);
  width:100%; display:grid; grid-template-columns:1fr 132px; align-items:center; gap:14px;
  will-change:transform; contain:layout style; transition:opacity .4s ease;
}
.lane-bar{
  position:relative; height:100%;
  border-bottom:1px solid var(--line);
}
.lane-fill{
  position:absolute; left:0; bottom:0; height:calc(100% - 6px); width:2%; min-width:3px;
  background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  transition:width .12s linear;
}
/* Hispanic overlay bar reads as distinct: paler with a hatch */
.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);
}
/* non-Hispanic White marker: dashed vertical tick riding inside the White bar */
.lane-nh{ position:absolute; left:0; bottom:0; height:calc(100% - 6px); 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:5px;
  font-size:9.5px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.92);
  text-transform:uppercase; white-space:nowrap;
}
.lane-name{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-weight:700; font-size:15px; color:#fff; white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none;
  max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis;
}
.lane-name.outside{ left:calc(var(--w) + 10px); color:var(--ink); text-shadow:none; }
.lane-overlay .lane-name{ color:var(--ink); text-shadow:none; }

.lane-meta{ text-align:right; line-height:1.05; }
.lane-val{
  font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:21px;
  color:var(--ink); font-variant-numeric:tabular-nums; display:block;
}
.lane-sub{ font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }

/* the lane-name uses --w which we set via the fill width; mirror it */
.lane{ --w:2%; }

/* ---------- hispanic caveat ---------- */
.hisp-note{
  max-width:var(--maxw); margin:18px auto 0; padding:14px 26px 0;
  color:var(--ink-dim); font-size:13px; line-height:1.55;
  border-top:1px dashed var(--line);
}
.hisp-note[hidden]{ display:none; }
.hisp-note strong{ color:var(--ink); }

/* ---------- footer ---------- */
.footnote{ max-width:var(--maxw); margin:20px auto 48px; padding:0 26px; color:var(--ink-dim); }
.footnote p{ margin:8px 0; font-size:13px; line-height:1.55; max-width:820px; }
.footnote strong{ color:var(--ink); }
.footnote .src{ color:var(--ink-faint); font-size:12px; }
.footnote a{ color:var(--ink-dim); }
.footnote a:hover{ color:var(--ink); }

/* ---------- 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:600px; 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-foot a{ color:#7c1d12; }
.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 ---------- */
@media (max-width: 720px){
  .topbar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .lane{ grid-template-columns:1fr 96px; gap:10px; }
  .lane-val{ font-size:17px; }
  .lane-name{ font-size:13px; }
}
@media (prefers-reduced-motion: reduce){
  .lane{ transition:none; }
  .lane-fill{ transition:none; }
}

/* ============================================================
   CHART 2 OVERRIDES — "Where New York came from"
   denser race (12 lanes), region legend + fade legend
   ============================================================ */
:root{ --row-h: 46px; }

/* region + fade legend bar (replaces the mode toggle row) */
.legendbar{
  max-width:var(--maxw); margin:6px auto 2px; padding:8px 26px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.region-legend{ display:flex; gap:16px; flex-wrap:wrap; }
.rl-item{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-dim); }
.rl-dot{ width:12px; height:12px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.fade-legend{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-dim); max-width:430px; }
.fade-legend strong{ color:var(--ink); }
.fade-swatch{
  flex:0 0 auto; width:54px; height:13px; border-radius:3px;
  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);
}

/* denser lanes, single value column, no NH marker */
.lane{ height:calc(var(--row-h) - 8px); grid-template-columns:1fr 96px; gap:12px; }
.lane-fill{ height:calc(100% - 5px); transition:width .12s linear, filter .25s ease; }
.lane-name{ font-size:13.5px; }
.lane-val{ font-size:17px; }
.lane.faded .lane-name{ color:var(--ink-dim); }
.lane.faded .lane-name:not(.outside){ color:rgba(255,255,255,.85); }

@media (max-width:720px){
  :root{ --row-h:42px; }
  .lane{ grid-template-columns:1fr 78px; }
  .lane-val{ font-size:14px; }
  .legendbar{ flex-direction:column; align-items:flex-start; gap:8px; }
}