/* Pure Desi — Beecroft Expansion Dossier · Luxe theme */
:root{
  --chai:#F2F0E7; --chai-deep:#EAE6D8; --card:#FBF9F3; --white:#FFFFFF;
  --ink:#2C243C; --ink-soft:#4A4258; --ink-mute:#6E6680;
  --gold:#CE6228; --gold-soft:#E3B285; --cherry:#BD2025; --rose:#E7D0CE;
  --grape:#778E9C; --pista:#787C59; --rust:#832A23;
  --c-b:#BD2025; --c-k:#2E6FA3; --c-c:#CE6228; --c-t:#1F8467; --c-p:#6B4E9E;
  --disp:'Staatliches', 'Oswald', 'Arial Narrow', sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Instrument Sans', Inter, 'Segoe UI', sans-serif;
  --hair:1px solid rgba(206,98,40,.38);
  --shadow:0 1px 2px rgba(44,36,60,.05), 0 12px 34px -18px rgba(44,36,60,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--chai); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{ /* paper grain */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:1140px; margin:0 auto; padding:0 clamp(18px,4vw,44px); position:relative; z-index:2}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:60; background:rgba(242,240,231,.92); backdrop-filter:blur(9px); border-bottom:var(--hair)}
.topbar .wrap{display:flex; align-items:center; gap:18px; padding-top:10px; padding-bottom:10px}
.topbar img{height:34px; display:block}
.topbar .tag{margin-left:auto; font-family:var(--disp); letter-spacing:.14em; font-size:.78rem; color:var(--rust); border:1px solid rgba(131,42,35,.45); border-radius:999px; padding:4px 12px 3px; white-space:nowrap}
nav.secnav{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin-left:6px}
nav.secnav::-webkit-scrollbar{display:none}
nav.secnav a{font-family:var(--disp); font-size:.86rem; letter-spacing:.1em; color:var(--ink-soft); text-decoration:none; padding:6px 10px 5px; border-radius:8px; white-space:nowrap}
nav.secnav a:hover{background:var(--rose); color:var(--ink)}
nav.secnav a.alt{color:var(--cherry)}

/* ---------- hero ---------- */
header.hero{padding:64px 0 40px; position:relative; overflow:hidden}
.hero .eyebrow{font-family:var(--disp); letter-spacing:.34em; font-size:.95rem; color:var(--gold); margin:0 0 6px}
.hero h1{font-family:var(--disp); font-weight:400; font-size:clamp(64px,11vw,142px); line-height:.92; margin:0; letter-spacing:.01em}
.hero h1 .thin{color:var(--cherry)}
.hero .sub{font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.6vw,27px); color:var(--ink-soft); margin:14px 0 0; max-width:46ch}
.hero .stamp{position:absolute; right:-30px; top:12px; width:210px; opacity:.10; transform:rotate(8deg); pointer-events:none}
.verdict{display:inline-flex; align-items:center; gap:10px; margin-top:26px; background:var(--ink); color:var(--chai); border-radius:12px; padding:12px 20px; box-shadow:var(--shadow)}
.verdict .dot{width:11px;height:11px;border-radius:50%;background:var(--c-t); box-shadow:0 0 0 4px rgba(31,132,103,.25)}
.verdict b{font-family:var(--disp); letter-spacing:.12em; font-weight:400; font-size:1.12rem}
.verdict span{opacity:.82; font-size:.92rem}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:34px 0 0}
.tile{background:var(--card); border:var(--hair); border-radius:14px; padding:18px 18px 15px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.tile::after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold)}
.tile.b::after{background:var(--cherry)} .tile.k::after{background:var(--c-k)} .tile.t::after{background:var(--c-t)}
.tile .n{font-family:var(--disp); font-size:2.35rem; line-height:1; color:var(--ink)}
.tile .n small{font-size:1.15rem; color:var(--ink-mute)}
.tile .l{font-size:.86rem; color:var(--ink-mute); margin-top:6px; line-height:1.4}

/* ---------- sections ---------- */
section{padding:54px 0 10px}
.shead{display:flex; align-items:baseline; gap:16px; border-bottom:var(--hair); padding-bottom:10px; margin-bottom:26px}
.shead .num{font-family:var(--disp); color:var(--gold); font-size:1.05rem; letter-spacing:.2em}
.shead h2{font-family:var(--disp); font-weight:400; font-size:clamp(30px,4.4vw,44px); margin:0; letter-spacing:.02em}
.shead .hint{margin-left:auto; font-family:var(--serif); font-style:italic; color:var(--ink-mute); font-size:.98rem; display:none}
@media(min-width:760px){.shead .hint{display:block}}
.lede{font-size:1.09rem; max-width:74ch; color:var(--ink-soft)}
.lede b, p b{color:var(--ink)}
.grid2{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.card{background:var(--card); border:var(--hair); border-radius:16px; padding:22px 24px; box-shadow:var(--shadow)}
.card h3{font-family:var(--disp); font-weight:400; letter-spacing:.05em; font-size:1.35rem; margin:0 0 8px}
.card .src{font-size:.78rem; color:var(--ink-mute); margin-top:12px; border-top:1px dashed rgba(110,102,128,.35); padding-top:8px}
.card .src a{color:var(--ink-mute)}
.callout{background:linear-gradient(135deg, rgba(231,208,206,.55), rgba(242,240,231,.4)); border-left:4px solid var(--cherry); border-radius:0 14px 14px 0; padding:16px 20px; margin:20px 0; max-width:80ch}
.callout.gold{border-left-color:var(--gold); background:linear-gradient(135deg, rgba(227,178,133,.30), rgba(242,240,231,.4))}
.callout.green{border-left-color:var(--c-t); background:linear-gradient(135deg, rgba(31,132,103,.12), rgba(242,240,231,.4))}
.pull{font-family:var(--serif); font-style:italic; font-size:1.32rem; color:var(--rust); line-height:1.45; max-width:34ch; margin:26px auto; text-align:center}
ul.tick{list-style:none; padding:0; margin:10px 0}
ul.tick li{padding:7px 0 7px 30px; position:relative; border-bottom:1px dashed rgba(110,102,128,.22)}
ul.tick li:last-child{border-bottom:0}
ul.tick li::before{content:"◆"; position:absolute; left:4px; color:var(--gold); font-size:.8rem; top:11px}
ul.tick li.x::before{content:"✕"; color:var(--cherry); font-weight:700}
.klabel{font-family:var(--disp); letter-spacing:.16em; font-size:.8rem; color:var(--ink-mute)}

/* ---------- map ---------- */
.mapcard{background:var(--card); border:var(--hair); border-radius:18px; box-shadow:var(--shadow); overflow:hidden}
#map{height:min(74vh,640px); width:100%; background:#E9E4D6}
.mapbar{display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px; border-bottom:var(--hair); align-items:center}
.mapbar .klabel{margin-right:4px}
.chip{font-family:var(--sans); font-weight:600; font-size:.85rem; border:1.4px solid rgba(44,36,60,.28); background:var(--white); color:var(--ink-soft); border-radius:999px; padding:6px 14px; cursor:pointer; transition:all .15s}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--ink); color:var(--chai); border-color:var(--ink)}
.maplegend{display:flex; flex-wrap:wrap; gap:16px; padding:12px 18px; font-size:.84rem; color:var(--ink-soft); border-top:var(--hair)}
.maplegend .it{display:inline-flex; align-items:center; gap:7px}
.sw{width:13px; height:13px; border-radius:50%; display:inline-block}
.leaflet-container{font-family:var(--sans)}
.leaflet-popup-content-wrapper{background:var(--card); color:var(--ink); border-radius:12px; box-shadow:var(--shadow); border:var(--hair)}
.leaflet-popup-content{margin:14px 16px; line-height:1.5}
.leaflet-popup-content h4{font-family:var(--disp); font-weight:400; margin:0 0 6px; font-size:1.15rem; letter-spacing:.04em}
.leaflet-popup-content table{font-size:.85rem; border-collapse:collapse}
.leaflet-popup-content td{padding:2px 8px 2px 0; color:var(--ink-soft)}
.leaflet-popup-content td:last-child{text-align:right; color:var(--ink); font-weight:600}
.storepin{background:var(--cherry); color:#fff; font-family:var(--disp); border-radius:50%; display:flex; align-items:center; justify-content:center; border:2.5px solid #fff; box-shadow:0 2px 10px rgba(44,36,60,.4); font-size:15px; letter-spacing:0}
.storepin.k{background:var(--c-k)} .storepin.site{background:var(--ink); outline:3px solid var(--cherry); outline-offset:1.5px}
.comppin{background:var(--ink); border:2px solid #fff; border-radius:3px; box-shadow:0 1px 6px rgba(44,36,60,.4)}
.comppin.mith{background:var(--rust); transform:rotate(45deg); border-radius:2px}
.temppin{background:var(--gold); border:2px solid #fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 1px 6px rgba(44,36,60,.35)}

/* ---------- charts & tables ---------- */
.chartcard{background:var(--card); border:var(--hair); border-radius:16px; padding:20px 18px 8px; box-shadow:var(--shadow); margin:22px 0}
.chartcard h3{font-family:var(--disp); font-weight:400; letter-spacing:.05em; font-size:1.32rem; margin:0 2px 2px}
.chartcard .csub{color:var(--ink-mute); font-size:.9rem; margin:0 2px 10px}
.chartcard .cfoot{color:var(--ink-mute); font-size:.78rem; margin:6px 2px 10px}
.plotwrap{width:100%; overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:.92rem; background:var(--card)}
table.data th{font-family:var(--disp); font-weight:400; letter-spacing:.08em; font-size:.92rem; text-align:left; color:var(--rust); border-bottom:2px solid var(--gold); padding:9px 10px; cursor:pointer; user-select:none; white-space:nowrap}
table.data th:hover{color:var(--cherry)}
table.data td{padding:8px 10px; border-bottom:1px solid rgba(110,102,128,.16); color:var(--ink-soft)}
table.data td:first-child{color:var(--ink); font-weight:600}
table.data tr:hover td{background:rgba(231,208,206,.25)}
.sidechip{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em; border-radius:5px; padding:2px 7px; color:#fff}
.sidechip.B{background:var(--c-b)} .sidechip.K{background:var(--c-k)} .sidechip.C{background:var(--c-c)}
.tablewrap{overflow-x:auto; border:var(--hair); border-radius:14px; box-shadow:var(--shadow)}
.num{font-variant-numeric:tabular-nums}

/* ---------- scorecard ---------- */
.score{display:grid; gap:10px}
.scorerow{display:grid; grid-template-columns:minmax(150px,240px) 1fr 64px; gap:14px; align-items:center; background:var(--card); border:var(--hair); border-radius:12px; padding:12px 16px}
.scorerow .crit{font-weight:700; font-size:.95rem}
.scorerow .why{color:var(--ink-mute); font-size:.86rem}
.scorerow .val{font-family:var(--disp); font-size:1.5rem; text-align:right; color:var(--ink)}
.bar{height:9px; background:var(--chai-deep); border-radius:99px; overflow:hidden; margin-top:6px}
.bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--gold), var(--cherry))}
.finalscore{display:flex; align-items:center; gap:22px; background:var(--ink); color:var(--chai); border-radius:18px; padding:26px 30px; margin-top:20px; flex-wrap:wrap}
.finalscore .big{font-family:var(--disp); font-size:4rem; line-height:1; color:var(--gold-soft)}
.finalscore p{margin:0; max-width:60ch; opacity:.92}
.finalscore p b{color:var(--gold-soft)}

/* ---------- questions ---------- */
ol.q{counter-reset:q; list-style:none; padding:0; display:grid; gap:12px}
ol.q li{counter-increment:q; background:var(--card); border:var(--hair); border-radius:12px; padding:16px 18px 14px 62px; position:relative}
ol.q li::before{content:counter(q,decimal-leading-zero); position:absolute; left:18px; top:14px; font-family:var(--disp); font-size:1.5rem; color:var(--gold)}
ol.q li b{display:block; margin-bottom:3px}
ol.q li span{color:var(--ink-mute); font-size:.92rem}

/* ---------- footer ---------- */
footer{margin-top:70px; border-top:var(--hair); padding:30px 0 60px; color:var(--ink-mute); font-size:.85rem}
footer .draft{font-family:var(--disp); letter-spacing:.2em; color:var(--rust)}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{transition:none; opacity:1; transform:none}}
@media print{
  .topbar,.mapbar,.chip{display:none!important}
  body::before{display:none}
  #map{height:420px}
  section{page-break-inside:avoid}
}