/* "The Instrument" — graphite ink on drafting-paper, brass (the plumb-bob
   metal) as the single accent, an ink-blue structural line. Deliberately off
   the terracotta-on-cream editorial default. */
:root{
  --paper:#E7E9E4; --panel:#F2F3EF; --ink:#15191B; --muted:#5E686C; --line:#CDD3D0;
  --accent:#8F6E2F; --accent-deep:#6E5525; --pipe:#1C3D4E; --ok:#4E7A54;
  --warn:#7C6A54; --warn-wash:#E8E4DA; --lift:0 1px 0 rgba(21,25,27,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141719; --panel:#1B2022; --ink:#E9E9E3; --muted:#9AA1A3; --line:#2B3235;
    --accent:#C79E4E; --accent-deep:#E0BE72; --pipe:#7FB2C6; --ok:#74B98A;
    --warn:#B8A488; --warn-wash:#2C2820; --lift:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#141719; --panel:#1B2022; --ink:#E9E9E3; --muted:#9AA1A3; --line:#2B3235;
  --accent:#C79E4E; --accent-deep:#E0BE72; --pipe:#7FB2C6; --ok:#74B98A;
  --warn:#B8A488; --warn-wash:#2C2820; --lift:0 1px 2px rgba(0,0,0,.3);
}
:root[data-theme="light"]{
  --paper:#E7E9E4; --panel:#F2F3EF; --ink:#15191B; --muted:#5E686C; --line:#CDD3D0;
  --accent:#8F6E2F; --accent-deep:#6E5525; --pipe:#1C3D4E; --ok:#4E7A54;
  --warn:#7C6A54; --warn-wash:#E8E4DA; --lift:0 1px 0 rgba(21,25,27,.05);
}
*{box-sizing:border-box;}
html{background:var(--paper); -webkit-text-size-adjust:100%;}
.skip{position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--accent); color:#fff; padding:.6rem 1rem; border-radius:0 0 4px 0;
  font-family:ui-monospace,Menlo,monospace; font-size:.8rem; text-decoration:none;}
.skip:focus{left:0;}
.theme-toggle{font-family:ui-monospace,Menlo,monospace; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:none; border:1px solid var(--line); border-radius:2px;
  padding:.15rem .6rem; cursor:pointer;}
.theme-toggle:hover{color:var(--ink); border-color:var(--muted);}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-size:1.04rem; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.disp{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800; letter-spacing:-.02em;}
.mono,code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
a{color:var(--pipe); text-decoration-thickness:1px; text-underline-offset:2px;}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}
img{max-width:100%; height:auto;}

/* header — brand | nav (scales via dropdown) | tools */
.topbar{
  display:flex; align-items:center; gap:1.2rem; position:sticky; top:0; z-index:20;
  padding:.7rem 1.4rem .9rem; border-bottom:1px solid var(--ink);
  /* a ruler-tick edge along the bottom — the instrument motif */
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 15px) bottom/100% 6px no-repeat,
    color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
}
.brand{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800;
  font-size:1.16rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.brand .m{color:var(--accent); font-size:1.05em;}
.nav{display:flex; gap:1.2rem; align-items:center; font-family:ui-monospace,Menlo,monospace;
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;}
.nav > a{color:var(--muted); text-decoration:none;}
.nav > a:hover{color:var(--ink);}
.tools{margin-left:auto; display:flex; gap:.7rem; align-items:center;
  font-family:ui-monospace,Menlo,monospace; font-size:.72rem;}
.langs{color:var(--muted);}
.langs b{color:var(--ink);}
.langs a{color:var(--muted); text-decoration:none;}
.langs a:hover{color:var(--ink);}

/* categories dropdown — CSS-only, scales to any number of categories */
.menu{position:relative;}
.menu summary{list-style:none; cursor:pointer; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;}
.menu summary::-webkit-details-marker{display:none;}
.menu summary::after{content:" ▾"; opacity:.7;}
.menu[open] summary{color:var(--ink);}
.menu-panel{position:absolute; top:calc(100% + .55rem); left:0; z-index:30;
  min-width:16rem; max-width:22rem; background:var(--panel);
  border:1px solid var(--line); border-radius:2px; box-shadow:var(--lift);
  padding:.5rem; display:grid; gap:.15rem;}
.menu-panel a{display:block; padding:.5rem .6rem; border-radius:2px;
  text-decoration:none; color:var(--ink); font-family:Charter,Georgia,serif;
  font-size:.95rem; text-transform:none; letter-spacing:normal;}
.menu-panel a:hover{background:color-mix(in srgb, var(--accent) 10%, transparent);}
.menu-panel a[aria-current]{background:color-mix(in srgb, var(--accent) 14%, transparent);}
.menu-panel a .e{display:block; font-family:ui-monospace,Menlo,monospace;
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:.05rem;}
@media (max-width:38rem){
  .topbar{flex-wrap:wrap; gap:.7rem 1rem; padding:.6rem 1rem;}
  .menu-panel{position:static; box-shadow:none; min-width:0; width:100%; margin-top:.4rem;}
}

/* home hero + directory */
.hero{padding:.5rem 0 0;}
.hero h1{font-size:clamp(2.1rem,6vw,3.1rem); margin:.3rem 0 .5rem;}
.hero .lede{font-size:1.15rem; max-width:34rem;}
.stat-row{display:flex; flex-wrap:wrap; gap:1.6rem; margin:1.7rem 0 0;
  padding-top:1.3rem; border-top:1px solid var(--line);
  font-family:ui-monospace,Menlo,monospace;}
.stat{display:flex; flex-direction:column;}
.stat b{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.7rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1;}
.stat span{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-top:.3rem;}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:1rem;}
.cat{border:1px solid var(--line); border-radius:2px; background:var(--panel);
  padding:1.15rem 1.25rem 1.25rem; box-shadow:var(--lift); display:flex; flex-direction:column;}
.cat .e{font-family:ui-monospace,Menlo,monospace; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-deep);}
.cat h3{margin:.35rem 0 .35rem; font-size:1.22rem; line-height:1.25;}
.cat h3 a{color:inherit; text-decoration:none;}
.cat h3 a:hover{color:var(--accent-deep);}
.cat p{margin:0 0 .8rem; color:var(--muted); font-size:.94rem;}
.cat ul{list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:.1rem;}
.cat ul a{display:block; padding:.32rem 0; border-top:1px dashed var(--line);
  text-decoration:none; color:var(--ink); font-size:.92rem;}
.cat ul a:hover{color:var(--accent-deep);}
.cat .more{margin-top:auto; font-family:ui-monospace,Menlo,monospace; font-size:.72rem;
  color:var(--muted);}
.cat .more b{color:var(--ink);}

main{max-width:44rem; margin:0 auto; padding:1.6rem 1.2rem 4rem;}
main.wide{max-width:52rem;}

/* breadcrumb */
.crumbs{
  font-family:ui-monospace,Menlo,monospace; font-size:.72rem; letter-spacing:.05em;
  color:var(--muted); margin:0 0 1.6rem; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--ink); text-decoration:underline;}
.crumbs li+li::before{content:"› "; color:var(--line);}

.eyebrow{font-family:ui-monospace,Menlo,monospace; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0;}
.eyebrow b{color:var(--accent-deep); font-weight:600;}
h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800;
  font-size:clamp(2.2rem,5.6vw,3.3rem); line-height:1.03; margin:.5rem 0 .6rem;
  text-wrap:balance; letter-spacing:-.025em;}
.pagemeta{font-family:ui-monospace,Menlo,monospace; font-size:.75rem; color:var(--muted);
  margin-bottom:1.5rem;}
.pagemeta .fresh{color:var(--ok); font-weight:600;}
.byline{font-family:ui-monospace,Menlo,monospace; font-size:.73rem; color:var(--muted);
  margin:-.9rem 0 1.5rem;}
.lede{font-size:1.09rem;}

.verdict{position:relative; margin:2rem 0 0; padding:1.15rem 1.3rem 1.2rem 1.45rem;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--lift);}
.verdict::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent);}
.verdict .k{font-family:ui-monospace,Menlo,monospace; font-weight:600; display:block;
  letter-spacing:.2em; text-transform:uppercase; font-size:.7rem; color:var(--muted); margin-bottom:.5rem;}
.verdict p{margin:0; font-size:1.12rem;}
.verdict b{color:var(--ink);}

section{margin-top:3.1rem;}
h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800;
  font-size:.98rem; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 1.2rem; padding-bottom:.5rem; border-bottom:1px solid var(--ink);
  display:flex; align-items:center; gap:.6rem;}
h2::before{content:""; width:14px; height:3px; background:var(--accent); flex:none;}

/* at-a-glance table */
.scroll{overflow-x:auto; margin-bottom:.4rem;}
table.glance{border-collapse:collapse; width:100%; min-width:34rem; font-size:.92rem;}
table.glance th{font-family:ui-monospace,Menlo,monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:left; font-weight:600;
  padding:0 .8rem .5rem 0; border-bottom:1px solid var(--line);}
table.glance td{padding:.65rem .8rem .65rem 0; border-bottom:1px solid var(--line);
  vertical-align:top;}
table.glance tr:last-child td{border-bottom:none;}
table.glance .pos{color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1.1rem;}
table.glance .ch{display:block; font-family:ui-monospace,Menlo,monospace; font-size:.72rem;
  color:var(--muted);}
table.glance .num{font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ranking cards */
/* the plumb line: a dotted brass rule down the ranking, ending in ▽ */
.ranking{position:relative; padding-left:1.9rem;}
.ranking::before{content:""; position:absolute; left:.42rem; top:3.4rem; bottom:1.9rem;
  border-left:2px dotted var(--accent); opacity:.55;}
.ranking::after{content:"▽"; position:absolute; left:.1rem; bottom:.3rem;
  color:var(--accent); font-size:.9rem;}
.card{position:relative; padding:1.5rem 0 1.6rem; border-bottom:1px solid var(--line); scroll-margin-top:1rem;}
.card:last-of-type{border-bottom:none;}
.card::before{content:""; position:absolute; left:-1.48rem; top:2rem; width:.8rem; height:2px; background:var(--accent);}
.cardtop{display:flex; gap:.9rem; align-items:baseline;}
.rank{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800;
  font-size:2.2rem; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.03em;}
.card:first-of-type .rank{font-size:3.2rem;}
.badge{font-family:ui-monospace,Menlo,monospace; font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--pipe);
  border:1px solid var(--line); padding:.18rem .5rem;}
.vtitle{margin:.28rem 0 .1rem; font-size:1.24rem; font-weight:700; line-height:1.25;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:-.01em;}
.card:first-of-type .vtitle{font-size:1.5rem;}
.vchan{font-family:ui-monospace,Menlo,monospace; font-size:.75rem; color:var(--muted); margin:0;}
/* click-to-load facade: no YouTube request until the reader asks for one */
.player{margin:1rem 0; aspect-ratio:16/9; border-radius:2px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#1C2225;}
.player img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* hqdefault is 4:3 with letterbox bars; crop them off */
  transform:scale(1.35); filter:saturate(.92) contrast(1.02);}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.player::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;}
.player.playing::after,.player.playing img,.player.playing .play,
.player.playing .cta,.player.playing .dur{display:none;}
.player .play{position:relative; z-index:2; width:64px; height:44px; border:0; border-radius:10px;
  background:rgba(255,255,255,.94); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease;}
.player .play::after{content:""; border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #1C2225; margin-left:3px;}
.player .play:hover{transform:scale(1.06); background:#fff;}
.player .cta{position:absolute; z-index:2; bottom:.55rem; left:.75rem; color:rgba(255,255,255,.82);
  font-family:ui-monospace,Menlo,monospace; font-size:.7rem; letter-spacing:.05em;
  text-decoration:none;}
.player .cta:hover{color:#fff; text-decoration:underline;}
.player .dur{position:absolute; z-index:2; bottom:.55rem; right:.75rem; color:#fff;
  background:rgba(0,0,0,.72); font-family:ui-monospace,Menlo,monospace; font-size:.72rem;
  padding:.1rem .4rem; border-radius:3px;}
@media (prefers-reduced-motion: reduce){ .player .play{transition:none;} }
.why{margin:.2rem 0 0;} .why b{color:var(--accent-deep);}
.covers{margin:.5rem 0 0; font-size:1.02rem; color:var(--ink);}
.ts{font-family:ui-monospace,Menlo,monospace; font-size:.78em; font-weight:600;
  color:var(--pipe); white-space:nowrap;}
a.ts{text-decoration:none; border-bottom:1px dotted var(--pipe); padding-bottom:1px;}
a.ts::before{content:"▸"; font-size:.85em; margin-right:1px; opacity:.7;}
a.ts:hover{color:var(--accent-deep); border-bottom-color:var(--accent-deep);}
.spec{font-family:ui-monospace,Menlo,monospace; font-size:.75rem; color:var(--muted);
  margin:.8rem 0 0; font-variant-numeric:tabular-nums;}
.flag{display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:.72rem;
  background:var(--warn-wash); color:var(--warn); border-radius:3px;
  padding:.15rem .5rem; margin:.7rem .4rem 0 0;}

.unranked{border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:2px;
  background:var(--panel); padding:.95rem 1.1rem; margin-top:1.6rem; box-shadow:var(--lift);}
.unranked .k{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; font-size:.8rem; color:var(--warn);}
.unranked p{margin:.35rem 0 0; font-size:.97rem;}
.cut-note{font-family:ui-monospace,Menlo,monospace; font-size:.75rem; color:var(--muted);
  margin-top:1.2rem; line-height:1.6;}

.split{margin:0 0 1.3rem;}
.split .q{font-weight:700; margin:0 0 .25rem;}
.split p{margin:.25rem 0 0;}
.split .call b{color:var(--accent-deep);}
.gaps{list-style:none; margin:0; padding:0;}
.gaps li{position:relative; padding:.55rem 0 .55rem 1.7rem;}
.gaps li::before{content:"→"; position:absolute; left:0; top:.5rem;
  font-family:ui-monospace,Menlo,monospace; color:var(--accent);}

details{border-bottom:1px solid var(--line);}
details:first-of-type{border-top:1px solid var(--line);}
summary{cursor:pointer; padding:.72rem 0; font-weight:700; font-size:.98rem; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-family:ui-monospace,Menlo,monospace; color:var(--accent);}
details[open] summary::after{content:"–";}
details .a{padding:0 0 .9rem; font-size:.95rem;}
.faq-src{font-family:ui-monospace,Menlo,monospace; font-size:.72rem; color:var(--muted);
  margin:.2rem 0 1rem;}

/* entry lists (hub + index) */
.entry{display:block; text-decoration:none; color:inherit; padding:1.2rem 0 1.3rem;
  border-bottom:1px solid var(--line);}
.entry:hover .t{color:var(--accent-deep);}
.entry .t{font-size:1.2rem; font-weight:700; line-height:1.32; margin:0 0 .28rem;}
.entry .d{margin:0; font-size:.97rem; color:var(--muted);}
.entry .m{font-family:ui-monospace,Menlo,monospace; font-size:.73rem; color:var(--muted);
  margin:.5rem 0 0;}
.entry .m .ok{color:var(--ok); font-weight:600;}
.cluster-card{border:1px solid var(--line); border-radius:2px; background:var(--panel);
  padding:1.1rem 1.25rem; margin-bottom:1rem; box-shadow:var(--lift);}
.cluster-card h3{margin:.1rem 0 .3rem; font-size:1.15rem;}
.cluster-card h3 a{color:inherit; text-decoration:none;}
.cluster-card h3 a:hover{color:var(--accent-deep);}
.cluster-card p{margin:0; color:var(--muted); font-size:.96rem;}
.cluster-card .count{font-family:ui-monospace,Menlo,monospace; font-size:.72rem;
  color:var(--muted); margin-top:.6rem; display:block;}

.pinsave{display:flex; gap:1.1rem; align-items:center; margin-top:3.1rem;
  padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:2px; background:var(--panel);}
.pin-img{width:120px; height:180px; object-fit:cover; border-radius:2px; box-shadow:var(--lift);}
.pin-lead{margin:0 0 .6rem; font-size:1rem; color:var(--ink);}
.pin-btn{display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:.75rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  background:var(--ink); color:var(--paper); padding:.55rem 1rem;}
.pin-btn:hover{background:var(--pipe);}
footer{border-top:1px solid var(--line); margin-top:3.5rem; padding:1.2rem 0 0;
  font-family:ui-monospace,Menlo,monospace; font-size:.73rem; color:var(--muted); line-height:1.9;}
footer a{color:var(--muted);}
footer .rubric b{color:var(--accent-deep);}

@media (prefers-reduced-motion: no-preference){
  details .a{animation:fade .18s ease-out;}
  @keyframes fade{from{opacity:0; transform:translateY(-2px);} to{opacity:1;}}
}
@media (max-width:34rem){
  .cardtop{gap:.7rem;} .rank{font-size:1.7rem;}
  main{padding-top:1.2rem;}
}