@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');
:root {
  --bg:#0c0c0d;--bg2:#08080a;--surface:#141416;--surface2:#1c1c1f;--surface3:#242428;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);--border3:rgba(255,255,255,0.18);
  --text:#f0ede8;--text2:#9a9690;--text3:#5a5855;
  --gold:#c9a84c;--gold2:#e8c97a;--gold3:#f5e0a0;--gold-dim:rgba(201,168,76,0.1);
  --blue:#4a90d9;--green:#4aad7a;--amber:#d4852a;--red:#c94a4a;--purple:#8b6bd9;
  --sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;--sp-2xl:48px;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;
  --nav-h:60px;
  --font-display:'Playfair Display',serif;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'DM Sans',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;}
h1,h2,h3{font-family:'Playfair Display',serif;line-height:1.1;}
h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;}
h3{font-size:clamp(1rem,2vw,1.25rem);font-weight:700;}
p{line-height:1.75;color:var(--text2);}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--gold2);}

/* ── TYPOGRAPHY UTILITIES ──────────────────────────────── */
.display-xl { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.05; }
.display-lg { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; }
.display-md { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; line-height: 1.15; }
.display-sm { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700; line-height: 1.2; }
.lead { font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.65; color: var(--text2); }
.body-text { font-size: 14px; line-height: 1.7; color: var(--text2); }

/* ── SPACING UTILITIES ─────────────────────────────────── */
.mb-xs { margin-bottom: var(--sp-xs); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.mb-xl { margin-bottom: var(--sp-xl); }
.mb-2xl { margin-bottom: var(--sp-2xl); }

/* ── LAYOUT UTILITIES ──────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
.section { padding: 72px 32px; border-bottom: 1px solid var(--border); }
.section-sm { padding: 48px 32px; border-bottom: 1px solid var(--border); }
.section-label { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-xl); }
.section-label::before { content: ''; width: 32px; height: 1px; background: var(--gold); }
.section-label-text { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.card-elevated { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r-lg); padding: var(--sp-xl); }

/* ── ANIMATIONS ────────────────────────────────────────── */
.fade-up { opacity: 1; }

/* ── HERO SPECIFIC ─────────────────────────────────────── */
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(201,168,76,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; z-index: 0; opacity: 0.3; }
.hero-content { position: relative; z-index: 1; max-width: 840px; padding-bottom: var(--sp-2xl); }
.hero-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: var(--sp-lg); }
.hero-eyebrow-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); max-width: 120px; }
.hero-title { margin-bottom: var(--sp-lg); }
.hero-title .line1 { display: block; font-family: var(--font-display); font-size: clamp(2.8rem, 8vw, 5.2rem); font-weight: 900; line-height: 0.95; color: var(--text); }
.hero-title .line2 { display: block; font-family: var(--font-display); font-size: clamp(2.8rem, 8vw, 5.2rem); font-weight: 900; line-height: 0.95; font-style: italic; color: var(--gold2); }
.hero-title .line3 { display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 400; line-height: 1.3; color: var(--text3); margin-top: var(--sp-sm); letter-spacing: 0.05em; }
.hero-desc { margin-bottom: var(--sp-xl); max-width: 620px; }
.hero-stat-val { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--gold2); line-height: 1; margin-bottom: 6px; }
.hero-stat-lbl { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); font-weight: 500; }
.hero-cta { display: flex; gap: var(--sp-md); flex-wrap: wrap; margin-top: var(--sp-xl); }
.container{max-width:1120px;margin:0 auto;padding:0 32px;}
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(12,12,13,0.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 32px;height:60px;display:flex;align-items:center;justify-content:space-between;}
.nav-brand{display:flex;align-items:center;gap:10px;}
.nav-link{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);transition:color .15s;}
.nav-links{display:flex;gap:24px;}
.nav-links a{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--gold);}
.hero{padding:140px 32px 80px;position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);}
.eyebrow::before{content:'';display:block;width:20px;height:1px;background:var(--gold);}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--border);justify-content:flex-start;}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px;}
.mc{background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:22px 26px;}
.mc-icon{font-size:1.3rem;margin-bottom:10px;}
.mc h3{font-size:.95rem;margin-bottom:7px;color:var(--text);}
.mc p{font-size:12.5px;line-height:1.7;color:var(--text2);}
.version-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;}
.vc{background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:18px 22px;position:relative;overflow:hidden;}
.vc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.vc.v1::before{background:var(--blue);}
.vc.v2::before{background:var(--green);}
.vc.v3::before{background:var(--amber);}
.vc-lbl{font-size:9.5px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:7px;}
.vc.v1 .vc-lbl{color:var(--blue);}
.vc.v2 .vc-lbl{color:var(--green);}
.vc.v3 .vc-lbl{color:var(--amber);}
.vc h3{font-size:.95rem;margin-bottom:9px;color:var(--text);}
.vc p{font-size:12px;color:var(--text2);line-height:1.65;}
.wl{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.wi{display:flex;justify-content:space-between;align-items:center;font-size:11px;}
.wi span:first-child{color:var(--text3);}
.vc.v1 .wi span:last-child{color:var(--blue);font-weight:600;}
.vc.v2 .wi span:last-child{color:var(--green);font-weight:600;}
.vc.v3 .wi span:last-child{color:var(--amber);font-weight:600;}
.tbox{background:var(--surface);border:1px solid var(--gold);border-radius:10px;padding:26px 30px;margin-top:36px;position:relative;}
.tbox::before{content:'Full Transparency';position:absolute;top:-9px;left:22px;background:var(--bg);padding:0 8px;font-size:9.5px;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);}
.tbox p{font-size:13px;line-height:1.8;color:var(--text2);margin-bottom:10px;}
.tbox p:last-child{margin-bottom:0;}
.tbox strong{color:var(--text);font-weight:500;}
.controls-bar{position:sticky;top:60px;z-index:100;background:rgba(12,12,13,0.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--border2);padding:11px 32px;}
.controls-inner{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.cl{font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text3);white-space:nowrap;}
input[type=text],select{background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:6px 11px;border-radius:6px;font-size:12px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .15s;appearance:none;}
input[type=text]:focus,select:focus{border-color:var(--gold);}
input[type=text]{width:170px;}
select{cursor:pointer;padding-right:24px;}
select option{background:#1c1c1f;}
.cc{margin-left:auto;font-size:11px;color:var(--text3);}
.table-section{padding:0 32px 60px;}
.table-wrap{max-width:1120px;margin:20px auto 0;}
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-size:9px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text3);padding:9px 9px;border-bottom:1px solid var(--border2);white-space:nowrap;cursor:pointer;user-select:none;transition:color .15s;}
thead th:hover{color:var(--gold);}
thead th.sorted{color:var(--gold2);}
tbody tr{cursor:pointer;transition:background .08s;}
tbody tr:hover td{background:var(--surface);}
tbody tr.expanded td{background:var(--surface);}
td{padding:8px 9px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:12px;}
.rk{width:36px;font-size:10.5px;color:var(--text3);font-variant-numeric:tabular-nums;font-weight:500;}
.rk.gold{color:var(--gold2);font-weight:700;}
.an{font-weight:600;font-size:13px;color:var(--text);}
.tb{display:inline-block;font-size:8.5px;font-weight:700;padding:2px 5px;border-radius:3px;margin-left:5px;vertical-align:middle;letter-spacing:.05em;}
.dk{display:inline-block;font-size:9px;color:var(--text3);background:var(--surface2);border:1px solid var(--border);padding:1px 5px;border-radius:3px;margin-left:3px;vertical-align:middle;}
.gc{font-size:10.5px;color:var(--text3);max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bw{display:inline-block;width:48px;height:5px;background:var(--surface3);border-radius:3px;vertical-align:middle;margin-right:4px;overflow:hidden;}
.bf{height:5px;border-radius:3px;display:block;}
.bs{font-size:11.5px;font-weight:600;display:inline-block;vertical-align:middle;min-width:28px;font-variant-numeric:tabular-nums;}
.eb{font-size:9.5px;color:var(--text3);background:transparent;border:1px solid var(--border2);border-radius:3px;padding:2px 5px;cursor:pointer;transition:all .12s;font-family:'DM Sans',sans-serif;}
.eb:hover{border-color:var(--gold);color:var(--gold);}
.dtd{padding:14px 18px !important;background:var(--surface) !important;}
.vg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px;}
.vcard{background:var(--bg);border:1px solid var(--border2);border-radius:6px;padding:9px 11px;}
.vlbl{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);margin-bottom:2px;}
.vval{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin-bottom:2px;}
.vbar{height:3px;background:var(--surface2);border-radius:2px;}
.vbf{height:3px;border-radius:2px;}
.dg{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:9px;}
.dcard{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:6px 8px;}
.dlbl{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:2px;}
.dval{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;}
.dbar{height:3px;background:var(--surface2);border-radius:2px;margin-top:3px;}
.dbf{height:3px;border-radius:2px;}
.crit-text{font-size:12.5px;color:var(--text2);line-height:1.75;margin-bottom:9px;padding:11px 14px;background:var(--bg);border-radius:6px;border-left:2px solid var(--gold);}
.scard{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:9px 13px;display:flex;align-items:flex-start;gap:9px;margin-top:7px;}
.sq{font-family:'Playfair Display',serif;font-style:italic;font-size:12.5px;color:var(--gold3);flex:1;line-height:1.6;}
.scbtn{background:transparent;border:1px solid var(--border2);color:var(--text3);font-size:9.5px;padding:3px 9px;border-radius:4px;cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;transition:all .12s;letter-spacing:.08em;text-transform:uppercase;}
.scbtn:hover{border-color:var(--gold);color:var(--gold);}
.scbtn.copied{border-color:var(--green);color:var(--green);}
.spread-info{font-size:10px;color:var(--text3);margin-top:5px;}
.pagination{max-width:1120px;margin:0 auto;padding:18px 32px 36px;display:flex;align-items:center;gap:9px;}
.pb{background:var(--surface);border:1px solid var(--border2);color:var(--text);padding:7px 16px;border-radius:6px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:12px;transition:all .12s;}
.pb:hover:not(:disabled){border-color:var(--gold);color:var(--gold);}
.pb:disabled{opacity:.3;cursor:default;}

/* ── BUTTON SYSTEM ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: #0c0c0d;
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold2);
  border-color: var(--gold2);
  color: #0c0c0d;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text2);
  border-color: var(--border2);
}
.btn-secondary:hover {
  background: var(--surface2);
  border-color: var(--gold);
  color: var(--gold);
}

.btn-primary-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-primary-outline:hover:not(:disabled) {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold2);
  color: var(--gold2);
}
.btn-primary-outline:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--text2);
  border-color: transparent;
  padding: 8px 16px;
}
.btn-ghost:hover {
  color: var(--gold);
  background: rgba(201,168,76,0.05);
}
.pi{font-size:10.5px;color:var(--text3);}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;}
.li{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text2);}
.ld{width:10px;height:10px;border-radius:2px;display:inline-block;}
.tier-sp{background:#1a3a5c;color:#7bb8f0;}
.tier-s{background:#0f3d28;color:#6ed4a0;}
.tier-a{background:#3d2800;color:#f0b84a;}
.tier-b{background:#3d1200;color:#f09060;}
.tier-c{background:#2a2a2a;color:#c0bdb8;}
.tier-d{background:#2a1020;color:#d090b0;}
.tabs{border-bottom:1px solid var(--border2);margin-bottom:36px;display:flex;gap:0;overflow-x:auto;}
.tabt{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text3);font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;cursor:pointer;white-space:nowrap;transition:all .15s;margin-bottom:-1px;}
.tabt:hover{color:var(--text);}
.tabt.active{color:var(--gold2);border-bottom-color:var(--gold2);}
.tabp{display:none;}
.tabp.active{display:block;}
.essay{max-width:740px;}
.essay h3{font-size:1.2rem;margin:28px 0 10px;color:var(--text);}
.essay h3:first-child{margin-top:0;}
.essay p{font-size:13.5px;line-height:1.85;color:var(--text2);margin-bottom:14px;}
.hl{font-family:'Playfair Display',serif;font-size:1rem;font-style:italic;color:var(--gold3);border-left:2px solid var(--gold);padding:11px 18px;margin:20px 0;background:rgba(201,168,76,0.04);border-radius:0 6px 6px 0;}
.contested-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;}
.ccon{background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:18px 22px;}
.ccon-hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.ccon-name{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--text);}
.ccon-sp{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);background:rgba(201,74,74,0.1);border:1px solid rgba(201,74,74,0.2);padding:2px 7px;border-radius:3px;}
.ccon-scores{display:flex;gap:10px;margin-bottom:10px;}
.css-item{display:flex;flex-direction:column;gap:2px;}
.css-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);}
.css-val{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;}
.ccon-text{font-size:12px;color:var(--text2);line-height:1.7;}
.pq-section{padding:56px 32px;background:var(--surface);border-bottom:1px solid var(--border);}
.pq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;}
.pqcard{background:var(--bg);border:1px solid var(--border2);border-radius:10px;padding:22px;position:relative;overflow:hidden;}
.pqcard::before{content:'"';position:absolute;top:-8px;left:14px;font-family:'Playfair Display',serif;font-size:4.5rem;color:var(--gold);opacity:.13;line-height:1;}
.pq-act{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.pq-text{font-family:'Playfair Display',serif;font-size:.95rem;font-style:italic;line-height:1.65;color:var(--text);margin-bottom:14px;}
.pq-ft{display:flex;justify-content:space-between;align-items:center;}
.pq-score{font-size:10.5px;color:var(--text3);}
.pq-btn{background:transparent;border:1px solid var(--border2);color:var(--text3);font-size:9.5px;padding:3px 10px;border-radius:4px;cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:all .12s;}
.pq-btn:hover{border-color:var(--gold);color:var(--gold);}
.pq-btn.copied{border-color:var(--green);color:var(--green);}
.footer{padding:48px 32px 36px;background:var(--surface);border-top:1px solid var(--border2);}
.footer-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start;}
.footer-brand-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--gold2);margin-bottom:6px;}
.footer-brand-sub{font-size:10px;color:var(--text3);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;}
.footer-copy{font-size:12px;color:var(--text2);max-width:520px;line-height:1.75;}
.footer-links{display:flex;flex-direction:column;gap:8px;}
.footer-link{font-size:13px;color:var(--text3);padding:6px 0;transition:color 0.15s;border-bottom:1px solid transparent;}
.footer-link:hover{color:var(--gold2);border-bottom-color:var(--border);}
@media(max-width:768px){
  .footer-inner{grid-template-columns:1fr;gap:32px;}
}
/* ── NAV ─────────────────────────────────────────────────── */
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-logo-main {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold2);
  letter-spacing: 0.02em;
}
.nav-logo-sub {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media(max-width:900px){
  .container{padding:0 16px;}
  .section,.section-sm,.hero,.controls-bar,.table-section,.pagination,.pq-section,.footer{padding-left:16px;padding-right:16px;}
  .method-grid,.version-cards,.contested-grid,.pq-grid{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .dg{grid-template-columns:repeat(3,1fr);}
  .gc{display:none;}
  .nav-sub{display:none;}

  /* Typography adjustments */
  .display-md { font-size: clamp(1.4rem, 4vw, 2rem); }
  .display-lg { font-size: clamp(1.8rem, 5vw, 2.8rem); }
}

/* ── MOBILE NAV ──────────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 8px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 1.5px;
  background: var(--text2);
  border-radius: 2px;
  transition: all 0.2s var(--ease);
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  background: rgba(11,11,12,0.98);
  border-top: 1px solid var(--border);
  padding: var(--sp-md) var(--sp-xl);
  gap: 2px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 999;
}
.nav-mobile.open { display: flex; }
.nav-mobile-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover { color: var(--gold2); }

/* ── VERDICT CARDS (shareable quotes) ───────────────────── */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
.verdict-card {
  position: relative;
}
.verdict-card-inner {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.verdict-card-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold2), transparent);
}
.verdict-card-inner:hover {
  border-color: rgba(200,168,75,0.35);
  transform: translateY(-2px);
}
.verdict-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
}
.verdict-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-family: var(--font-mono);
  text-transform: uppercase;
  opacity: 0.8;
}
.verdict-score-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}
.verdict-quote {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  flex: 1;
}
.verdict-quote::before {
  content: '\201C';
  color: var(--gold);
  font-style: normal;
  margin-right: 1px;
}
.verdict-quote::after {
  content: '\201D';
  color: var(--gold);
  font-style: normal;
  margin-left: 1px;
}
.verdict-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.verdict-act {
  display: flex;
  align-items: center;
  gap: 6px;
}
.verdict-act-on {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.verdict-act-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
}
.verdict-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(200,168,75,0.25);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.verdict-copy-btn:hover {
  background: rgba(200,168,75,0.2);
  border-color: rgba(200,168,75,0.5);
  transform: scale(1.02);
}
.verdict-copy-btn.copied {
  color: var(--green);
  background: rgba(74,172,120,0.12);
  border-color: rgba(74,172,120,0.3);
}

/* ── MOBILE RESPONSIVE FIXES ─────────────────────────────── */
/* ── MID-SIZED TABLET BREAKPOINT ───────────────────────── */
@media (max-width: 900px) and (min-width: 769px) {
  /* Hero stats - 3-column grid to prevent awkward 2+3 wrapping */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

@media (max-width: 768px) {
  /* Nav */
  .nav-links { display: none !important; }
  .nav-burger { display: flex; }

  /* Hero — prevent clipping */
  .hero { min-height: 100svh; padding-top: calc(var(--nav-h) + var(--sp-md)); }
  .hero-title .line1,
  .hero-title .line2 { font-size: clamp(2.4rem, 14vw, 4rem); }
  .hero-title .line3 { font-size: clamp(1.2rem, 6vw, 2rem); }
  .hero-content { padding: var(--sp-xl) 0 var(--sp-2xl); }
  .hero-stats { gap: var(--sp-lg); }
  .hero-stat-val { font-size: 1.8rem; }

  /* Quotes grid — single column on mobile */
  .quotes-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
  }
  .verdict-quote { font-size: 1rem; }

  /* Top 10 — hide genre on mobile */
  .top10-genre { display: none; }

  /* Decade grid */
  #decade-highlights > div {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Contested preview */
  #contested-preview { margin-top: var(--sp-xl); }

  /* General section spacing */
  .section { padding: var(--sp-2xl) 0; }
  .section-sm { padding: var(--sp-xl) 0; }

  /* Method grid */
  .grid-2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .hero-title .line1,
  .hero-title .line2 { font-size: clamp(2rem, 12vw, 3rem); }
  .quotes-grid { gap: var(--sp-sm); }
  #decade-highlights > div {
    grid-template-columns: 1fr 1fr !important;
  }
  .verdict-copy-btn span { display: none; }
  .verdict-copy-btn { padding: 5px 8px; }

  /* Hero stats - force 2-column layout on small screens */
  .hero-stats {
    gap: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Contested table - hide genre column and adjust bar widths */
  .hide-mobile { display: none !important; }

  /* Make score columns stack better on mobile */
  #contested-preview table td:nth-child(4),
  #contested-preview table td:nth-child(5),
  #contested-preview table td:nth-child(6),
  #contested-preview table td:nth-child(7) {
    font-size: 11px;
  }

  #contested-preview table .bw {
    width: 32px;
  }
}

/* ── NAV LOGO MOBILE ─────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-logo-sub--desktop { display: none; }
  .nav-logo-main { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .nav-logo-main {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
}

/* ── SHAREABLE QUOTE CARDS (home page) ──────────────────── */
.share-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}
.share-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold2) 100%);
}
.share-card:hover {
  border-color: rgba(200,168,75,0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.share-card-quote {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 18px;
  position: relative;
  padding-left: 20px;
}
.share-card-quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 32px;
  color: var(--gold);
  opacity: 0.5;
  font-family: Georgia, serif;
  line-height: 1;
}
.share-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.share-card-source {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
}
.share-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold2);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.share-card-btn:hover {
  background: rgba(201,168,76,0.2);
  border-color: rgba(201,168,75,0.5);
  transform: scale(1.03);
}
.share-card-btn svg {
  width: 14px;
  height: 14px;
}
.share-card-btn.copied {
  background: rgba(74,172,120,0.12);
  border-color: rgba(74,172,120,0.3);
  color: var(--green);
}