/* Torrance 2026 — shared styles */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#FAF9F6;color:#1a1a1a;font-family:'Source Sans 3',sans-serif;font-size:15px;line-height:1.65;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Top accent bar ── */
.top-accent{height:4px;background:linear-gradient(90deg,#C0392B 0%,#A32D2D 50%,#7A2020 100%);position:fixed;top:0;left:0;right:0;z-index:1001}

/* ── Sticky navigation ── */
.site-nav{position:sticky;top:4px;z-index:1000;background:rgba(250,249,246,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #e0ddd6;padding:0;margin:0}
.site-nav-inner{max-width:680px;margin:0 auto;display:flex;align-items:center;padding:0.6rem 1.5rem;gap:0.25rem}
.site-nav-brand{font-family:'Playfair Display',serif;font-size:13px;font-weight:600;color:#1a1a1a;margin-right:auto;letter-spacing:-0.01em;white-space:nowrap}
.site-nav a{font-size:11.5px;font-weight:500;color:#888;text-decoration:none;padding:0.3rem 0.65rem;border-radius:6px;transition:all 0.2s;white-space:nowrap}
.site-nav a:hover{color:#1a1a1a;background:rgba(0,0,0,0.04)}
.site-nav a.active{color:#1a1a1a;background:rgba(0,0,0,0.06);font-weight:600}

.page{max-width:680px;margin:0 auto;padding:3rem 1.5rem 4rem}
.kicker{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#A32D2D;font-weight:600;margin-bottom:0.5rem}
h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,2.8rem);font-weight:400;line-height:1.15;margin-bottom:1rem;color:#111}
.dek{font-size:17px;color:#555;line-height:1.55;margin-bottom:0.75rem}
.source{font-size:12px;color:#999;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid #e0ddd6}

/* ── Section reveal animations ── */
.section{margin-bottom:3rem;opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.section.revealed{opacity:1;transform:translateY(0)}
.data-section,.footnotes{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.data-section.revealed,.footnotes.revealed{opacity:1;transform:translateY(0)}

.section-head{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:400;margin-bottom:0.5rem;color:#111}
.section-sub{font-size:14px;color:#666;margin-bottom:1.25rem;line-height:1.5}

/* ── Chart cards ── */
.chart-wrap{position:relative;width:100%;margin-bottom:0.5rem;background:#fff;border:1px solid #eae7e0;border-radius:12px;padding:1rem;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.legend{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:0.75rem;font-size:12px;color:#888}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ── Stat cards ── */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
.stat-row.single{grid-template-columns:1fr}
.stat{background:#F0EEEA;border-radius:10px;padding:1.15rem 1.25rem;border-top:3px solid transparent;transition:transform 0.2s ease,box-shadow 0.2s ease}
.stat:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.stat.stat-red{border-top-color:#C0392B;background:linear-gradient(to bottom,#fdf5f4,#F0EEEA)}
.stat.stat-green{border-top-color:#1D9E75;background:linear-gradient(to bottom,#f2faf7,#F0EEEA)}
.stat-label{font-size:12px;color:#888;margin-bottom:4px}
.stat-num{font-size:2.6rem;font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.stat-num.red{color:#B83230}
.stat-num.green{color:#0F6E56}
.stat-note{font-size:12px;color:#999;margin-top:2px}

/* ── Callout grid ── */
.callout-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.callout{background:#fefbfa;border-radius:10px;padding:1rem 1rem 1rem 1.15rem;border-left:4px solid #d4a09a;transition:transform 0.2s ease,box-shadow 0.2s ease}
.callout:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.callout:first-child{grid-column:1 / -1;border-left-color:#C0392B;background:linear-gradient(135deg,#fdf0ee,#fefbfa)}
.callout.accent-amber{border-left-color:#C97D1E}
.callout.accent-slate{border-left-color:#5B7FA5}
.callout.accent-red{border-left-color:#C0392B}
.callout-num{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:#C0392B;line-height:1;margin-bottom:6px;opacity:0.2}
.callout-title{font-size:13px;font-weight:600;color:#7A2020;margin-bottom:4px}
.callout-body{font-size:13px;color:#9E3A3A;line-height:1.5}
.data-section{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #e0ddd6}
.data-section p{font-size:13px;color:#888;margin-bottom:1rem;line-height:1.5}
.dl-btn{display:inline-block;padding:10px 20px;background:#1a1a1a;color:#FAF9F6;font-size:13px;font-weight:500;border-radius:8px;text-decoration:none;cursor:pointer;border:none;font-family:inherit;transition:all 0.2s;margin-right:8px;margin-bottom:8px}
.dl-btn:hover{background:#333;transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.12)}

/* Cross-navigation links — hidden when nav bar is present */
.cross-nav{display:none}

/* Footnotes */
.footnotes{font-size:12px;color:#999;line-height:1.7;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e0ddd6}
.footnotes p{margin-bottom:0.5rem}
.footnotes p:last-child{margin-bottom:0}
.footnotes a{color:#999}

/* Back link */
.back-link{display:none}

/* ── Responsive ── */
@media(max-width:540px){
  body{font-size:16px}
  .stat-row,.callout-grid{grid-template-columns:1fr}
  .callout:first-child{grid-column:1}
  .dl-btn{display:block;text-align:center;margin-right:0}
  .site-nav-inner{padding:0.5rem 1rem;gap:0.15rem}
  .site-nav-brand{font-size:12px}
  .site-nav a{font-size:10.5px;padding:0.25rem 0.45rem}
  .section{margin-bottom:3.5rem}
}