/* ===== Rank tool ============================================================
   Scoped to .rank-page. Same voice as the essays: Bodoni Moda + Libre
   Franklin, paper and ink tokens from site.css.

   Tones. Each album panel carries a data-tone, either an album key (which
   sets a field colour pulled from that record's cover, plus the cover itself
   blurred behind the header) or a neutral for the two releases that have no
   cover art yet. Those get a set label, never a generated pattern: drop a
   file in and name it in songs.json and the label becomes the real thing.

   Insights has no tones at all. It is one continuous page of findings on
   paper, broken twice by a photograph. See the INSIGHTS block below. */

:root{
  /* Crowd insight diverging pair (validated light + dark, CVD-safe). */
  --above:#2f6a9e; --below:#a8623f;
  /* album accents for use ON PAPER (gauge fills, table marks) */
  --ac-YFW:#5b4b87; --ac-DE:#b3261e; --ac-TDAG:#3f5a55; --ac-DAISY:#4e6a3a; --ac-SF:#151515;
  --ac-DEMOS:#c46a24; --ac-SINGLES:#6b6257;
  --tabs-h:56px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--above:#4f8dc8; --below:#c25a2e;
    --ac-YFW:#a99bd6; --ac-DE:#e46b5b; --ac-TDAG:#93b3ab; --ac-DAISY:#a3c184; --ac-SF:#e6e6e2;
    --ac-DEMOS:#d98a44; --ac-SINGLES:#b3a996}
}
:root[data-theme="dark"]{--above:#4f8dc8; --below:#c25a2e;
  --ac-YFW:#a99bd6; --ac-DE:#e46b5b; --ac-TDAG:#93b3ab; --ac-DAISY:#a3c184; --ac-SF:#e6e6e2;
  --ac-DEMOS:#d98a44; --ac-SINGLES:#b3a996}

/* field / foreground / accent per tone (fixed colours, same in both themes) */
[data-tone="YFW"]  {--f:#c9c2cf; --fg:#191521; --ac:#5b4b87; --ac-soft:rgba(91,75,135,.18)}
[data-tone="DE"]   {--f:#7a1315; --fg:#f7ecd9; --ac:#eaa73c; --ac-soft:rgba(234,167,60,.22)}
[data-tone="TDAG"] {--f:#243130; --fg:#e3e7e5; --ac:#b4c6c1; --ac-soft:rgba(180,198,193,.18)}
[data-tone="DAISY"]{--f:#3c4a33; --fg:#eff1e4; --ac:#d9d59a; --ac-soft:rgba(217,213,154,.2)}
[data-tone="SF"]   {--f:#0a0a0a; --fg:#ececea; --ac:#d3cbb8; --ac-soft:rgba(211,203,184,.16)}
[data-tone="DEMOS"]{--f:#e7dcbf; --fg:#1b1712; --ac:#8a4c19; --ac-soft:rgba(196,106,36,.18)}
[data-tone="SINGLES"]{--f:#dcd8ce; --fg:#1b1a17; --ac:#6b6257; --ac-soft:rgba(107,98,87,.18)}
[data-tone="ink"]  {--f:#101010; --fg:#ececea; --ac:#d98a44; --ac-soft:rgba(217,138,68,.18)}
[data-tone="paper"]{--f:var(--paper); --fg:var(--ink); --ac:var(--noise); --ac-soft:var(--noise-soft)}

.rank-page{overflow-x:clip}
.rank-page #grain{opacity:.05}
.rank-page .wrap.wide{max-width:1400px}

/* ---------- the cover tile: one class, four sizes ---------- */
.cover{--s:120px;display:inline-block;flex:0 0 auto;width:var(--s);height:var(--s);
  background:var(--art) center/cover no-repeat,#1b1b1b;border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 30px -12px rgba(0,0,0,.6)}
.cover.xs{--s:14px;border-radius:1px;box-shadow:none}
.cover.sm{--s:44px}
.cover.md{--s:72px}
.cover.lg{--s:clamp(160px,18vw,240px)}
.cover.xl{--s:min(420px,72vw)}
.cover.none{background:rgba(127,127,127,.16);box-shadow:inset 0 0 0 1px rgba(127,127,127,.5);
  display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:.5em}
.cover.none .cover-txt{font-family:var(--fd);font-size:calc(var(--s) * .105);line-height:1.2;
  color:currentColor;opacity:.8;overflow-wrap:anywhere;text-wrap:balance}
.cover.xs.none .cover-txt,.cover.sm.none .cover-txt{display:none}

/* =========================================================================
   HERO: the five covers as a wall, headline printed over them
   ========================================================================= */
.rank-hero{position:relative;min-height:min(92vh,980px);display:grid;align-items:end;
  background:#0a0a0a;color:#f4f2ec;overflow:hidden;isolation:isolate}
.rank-hero .wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);z-index:-2}
.rank-hero .wall .w{background:var(--art) center/cover no-repeat;filter:grayscale(1) contrast(1.12) brightness(.85);
  transform:scale(1.04);transition:filter 1.2s ease}
.rank-hero .wall .w:nth-child(2){filter:grayscale(.15) contrast(1.1) brightness(.75)}
.rank-hero .shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.15) 35%,rgba(10,10,10,.93) 100%)}
.rank-hero .wrap{position:relative;width:100%;padding-top:26vh;padding-bottom:clamp(40px,7vh,72px)}
.rank-hero .kicker{color:#dedcd5;opacity:1;font-size:12px}
.rank-hero h1{font-size:clamp(56px,10.5vw,176px);line-height:.92;max-width:11ch;color:#f4f2ec;letter-spacing:-.015em}
.rank-hero h1 em{font-style:italic;font-weight:400}
.rank-hero .lede{font-family:var(--fb);font-weight:300;font-size:clamp(17px,1.6vw,22px);line-height:1.45;
  max-width:46ch;color:#dedcd5;margin:28px 0 0}
.hero-meta{display:flex;align-items:baseline;gap:32px;flex-wrap:wrap;margin-top:36px;
  font-family:var(--fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#c9c7bf}
.hero-meta b{font-family:var(--fd);font-size:34px;letter-spacing:0;font-weight:400;color:#f4f2ec;
  vertical-align:-3px;margin-right:4px;font-variant-numeric:tabular-nums}
.hero-cta{color:#f4f2ec;text-decoration:none;border-bottom:1px solid rgba(244,242,236,.45);padding-bottom:3px}
.hero-cta i{font-family:var(--fd);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none}
.hero-cta:hover{border-color:#f4f2ec}
@media (max-width:700px){
  .rank-hero .wall{grid-template-columns:repeat(3,1fr)}
  .rank-hero .wall .w:nth-child(n+4){display:none}
  .rank-hero .wrap{padding-top:22vh}
}

/* =========================================================================
   TABS: a full-width sticky index
   ========================================================================= */
.rank-tabs{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(0,0,0,.02)}
.rank-tabs-in{max-width:1400px;margin:0 auto;padding:0 0 0 clamp(18px,4vw,40px);display:flex;gap:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rank-tabs-in::-webkit-scrollbar{display:none}
.rank-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;height:var(--tabs-h);padding:0 11px;
  font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:color .2s}
.rank-tab:first-child{padding-left:0}
.rank-tab:hover{color:var(--ink)}
.rank-tab .cover.xs{opacity:.55;filter:grayscale(1);transition:opacity .2s,filter .2s}
.rank-tab:hover .cover.xs,.rank-tab[aria-selected="true"] .cover.xs{opacity:1;filter:none}
.rank-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.rank-tab .n{font-family:var(--fd);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-3);min-width:0}
.rank-tab .n:empty{display:none}
.rank-tab.insights{margin-left:auto;padding-right:clamp(16px,2vw,24px);color:var(--ink);position:sticky;right:0;background:var(--paper);
  box-shadow:-18px 0 14px -6px var(--paper)}
.rank-tab.insights .t{background:var(--ink);color:var(--paper);padding:7px 14px;border-radius:99px;transition:opacity .2s}
.rank-tab.insights:hover .t{opacity:.85}
.rank-tab.insights[aria-selected="true"]{border-bottom-color:transparent}
.rank-tab.insights[aria-selected="true"] .t{background:var(--noise);color:#fff}
.rank-tab.insights .n{color:var(--ink)}

/* =========================================================================
   ALBUM PANELS
   ========================================================================= */
.rank-panel{display:none}
.rank-panel.on{display:block}

.album-head{position:relative;isolation:isolate;overflow:hidden;background:var(--f);color:var(--fg);
  padding:clamp(48px,8vh,96px) 0 clamp(36px,6vh,64px)}
.album-bg{position:absolute;inset:-12%;z-index:-1;background:var(--art) center/cover no-repeat;
  filter:blur(36px) saturate(1.15);opacity:.55;transform:scale(1.1)}
[data-tone="SINGLES"] .album-bg{display:none}
.album-head::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 40%,rgba(0,0,0,.18))}
[data-tone="YFW"] .album-head::after,[data-tone="DEMOS"] .album-head::after,
[data-tone="SINGLES"] .album-head::after{
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 40%,rgba(0,0,0,.06))}
.album-head .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,4vw,56px);
  align-items:end;max-width:1400px}
.album-head h2{font-size:clamp(40px,6.2vw,96px);line-height:.96;letter-spacing:-.012em;color:inherit;max-width:12ch}
.album-meta{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;margin:18px 0 0}
.album-note{font-family:var(--fb);font-weight:300;font-size:14px;line-height:1.55;opacity:.72;
  margin:10px 0 0;max-width:46ch}
.album-progress{text-align:right;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;line-height:1}
.album-progress .big{display:block;font-family:var(--fd);font-size:clamp(64px,8vw,128px);line-height:.9;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ac)}
[data-tone="YFW"] .album-progress .big,[data-tone="DEMOS"] .album-progress .big,
[data-tone="SINGLES"] .album-progress .big{color:var(--fg)}
.album-progress .of{display:block;font-family:var(--fd);font-size:22px;letter-spacing:0;text-transform:none;margin-top:6px;opacity:.75}
.album-progress .lbl{display:block;margin-top:8px}
.album-progress.done .lbl::after{content:" · complete"}
@media (max-width:820px){
  .album-head .wrap{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"cover id" "prog prog";align-items:center}
  .album-cover{grid-area:cover}.album-id{grid-area:id}
  .album-progress{grid-area:prog;text-align:left;display:flex;align-items:baseline;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(127,127,127,.35)}
  .album-progress .big{font-size:48px}.album-progress .of{margin:0}
}
@media (max-width:520px){
  .album-head .wrap{grid-template-columns:1fr;grid-template-areas:"cover" "id" "prog"}
  .cover.lg{--s:120px}
}

/* ---- table shell (desktop/tablet) ---- */
.rank-panel.album .wrap.wide{padding-top:clamp(18px,3vh,32px);padding-bottom:clamp(64px,10vh,120px)}
.rank-table-wrap{overflow:auto;max-height:calc(100vh - var(--tabs-h) - 8px);border-top:1px solid var(--ink)}
table.rank-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1180px;table-layout:auto}
.rank-table thead th{position:sticky;top:0;background:var(--paper);z-index:5;
  text-align:left;padding:16px 12px 12px;border-bottom:1px solid var(--rule-2);vertical-align:bottom}
.rank-table thead th .lbl{display:block;white-space:nowrap;font-family:var(--fd);font-style:italic;
  font-size:16px;color:var(--ink);line-height:1.2}
.rank-table thead th .sub{display:block;white-space:nowrap;font-family:var(--fm);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.rank-table thead th button.info{width:15px;height:15px;border:1px solid var(--rule-2);border-radius:50%;background:none;
  color:var(--ink-3);cursor:help;font-family:var(--fm);font-style:normal;font-size:9px;line-height:1;padding:0;margin-left:7px;vertical-align:2px}
.rank-table thead th button.info:hover{border-color:var(--ink);color:var(--ink)}
.rank-table th.song-col,.rank-table td.song-col{position:sticky;left:0;background:var(--paper);
  z-index:4;min-width:250px;max-width:300px;border-right:1px solid var(--rule)}
.rank-table th.song-col{font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rank-table tbody td{padding:11px 12px;vertical-align:middle;border-bottom:1px solid var(--rule)}
.rank-table tbody tr:hover td{background:var(--paper-2)}
.rank-table tbody tr:hover td.song-col{background:var(--paper-2)}
.song-title{display:flex;align-items:baseline;gap:10px;font-family:var(--fd);font-size:17px;line-height:1.2}
.song-title .track{font-family:var(--fm);font-size:10px;letter-spacing:.06em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;flex:0 0 22px}
.rank-table tr.rated .song-title .track{color:var(--ac-cur)}
.song-title .single{font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--rule-2);padding:1px 5px;border-radius:2px;margin-left:auto;align-self:center}
.song-rel{font-family:var(--fm);font-size:10px;letter-spacing:.04em;color:var(--ink-3);
  line-height:1.45;margin:5px 0 0 32px;max-width:26ch}
.rank-table td.overall{border-left:1px solid var(--rule);background:var(--paper-2)}

/* accent used on paper by each album's table */
[data-tone="YFW"]{--ac-cur:var(--ac-YFW)} [data-tone="DE"]{--ac-cur:var(--ac-DE)} [data-tone="TDAG"]{--ac-cur:var(--ac-TDAG)}
[data-tone="DAISY"]{--ac-cur:var(--ac-DAISY)} [data-tone="SF"]{--ac-cur:var(--ac-SF)}
[data-tone="DEMOS"]{--ac-cur:var(--ac-DEMOS)} [data-tone="SINGLES"]{--ac-cur:var(--ac-SINGLES)}

/* ---- the gauge control ---- */
.gauge{display:flex;align-items:center;gap:10px;min-width:124px}
.gauge input[type="range"]{-webkit-appearance:none;appearance:none;width:104px;height:22px;
  background:transparent;cursor:pointer;margin:0}
.gauge input[type="range"]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--paper) 0,var(--paper) 1px,transparent 1px,transparent 10%),
             linear-gradient(90deg,var(--ac-cur,var(--ink)) var(--fill,0%),var(--rule) var(--fill,0%))}
.gauge input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:var(--rule)}
.gauge input[type="range"]::-moz-range-progress{height:4px;border-radius:2px;background:var(--ac-cur,var(--ink))}
.gauge input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--ac-cur,var(--ink));
  margin-top:-6px;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.gauge input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ac-cur,var(--ink));cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.gauge.unset input[type="range"]::-webkit-slider-thumb{opacity:.35;border-color:var(--ink-3);background:var(--paper-2)}
.gauge.unset input[type="range"]::-moz-range-thumb{opacity:.35;border-color:var(--ink-3)}
.gauge.unset input[type="range"]::-webkit-slider-runnable-track{
  background:repeating-linear-gradient(90deg,var(--rule-2) 0 2px,transparent 2px 6px);height:2px;margin-top:1px}
.gauge.unset input[type="range"]::-webkit-slider-thumb{margin-top:-7px}
.gauge-val{font-family:var(--fd);font-size:19px;color:var(--ink);min-width:24px;text-align:right;
  font-variant-numeric:tabular-nums;line-height:1}
.gauge.unset .gauge-val{color:var(--ink-3);font-family:var(--fm);font-size:12px}
.gauge.unset .gauge-val::after{content:"–"}
.gauge:not(.unset) .gauge-val::after{content:attr(data-v)}
td.overall .gauge-val{font-size:24px;color:var(--ac-cur,var(--ink))}

/* ---- mobile: table -> stacked cards ---- */
@media (max-width:760px){
  .rank-table-wrap{overflow:visible;max-height:none;border-top:0}
  table.rank-table,table.rank-table thead,table.rank-table tbody,table.rank-table tr,
  table.rank-table th,table.rank-table td{display:block;width:auto;min-width:0}
  .rank-table thead{position:absolute;inset:auto;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .rank-table tbody tr{border:1px solid var(--rule);border-left:3px solid var(--rule-2);padding:16px 16px 8px;
    margin-bottom:14px;background:var(--paper)}
  .rank-table tbody tr.rated{border-left-color:var(--ac-cur,var(--ink))}
  .rank-table tbody tr:hover td,.rank-table tbody tr:hover td.song-col{background:transparent}
  .rank-table td.song-col{position:static;display:block;padding:0 0 12px;border:0;border-bottom:1px solid var(--rule);
    margin-bottom:8px;max-width:none}
  .rank-table td.song-col::before{content:none}
  .song-title{font-size:20px}
  .rank-table tbody td{padding:9px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--rule)}
  .rank-table tbody td:last-child{border-bottom:0}
  .rank-table td::before{content:attr(data-label);font-family:var(--fd);font-style:italic;
    font-size:14px;color:var(--ink-2);flex:0 0 auto}
  .rank-table td.overall{border-left:0;background:transparent;margin-top:4px;padding-top:12px;border-top:1px solid var(--rule-2)}
  .rank-table td.overall::before{font-style:normal;font-weight:500;color:var(--ink)}
  .gauge{flex:1 1 auto;justify-content:flex-end;min-width:0}
  .gauge input[type="range"]{width:100%;max-width:190px}
}

/* =========================================================================
   INSIGHTS
   One continuous page, not a deck. A finding is a plain lead line, the
   answer at size, the numbers underneath, and a hairline to the next one.
   Two findings break full-bleed over a photograph from the essays' own
   library. There are no generated textures anywhere on this page.
   ========================================================================= */
.ins-head{padding:clamp(64px,11vh,140px) 0 clamp(30px,5vh,52px);background:var(--paper);color:var(--ink)}
.ins-head h2{font-size:clamp(44px,7.4vw,124px);line-height:.95;letter-spacing:-.018em}
.ins-total{font-family:var(--fb);font-weight:300;font-size:clamp(14px,1.2vw,17px);color:var(--ink-2);margin:20px 0 0}
.ins-total b{font-family:var(--fd);font-size:1.8em;font-weight:400;color:var(--ink);margin-right:.1em;
  vertical-align:-.14em;font-variant-numeric:tabular-nums;line-height:1}

/* nothing rated yet: one line, and the page waits */
.ins-none{border-top:1px solid var(--rule);padding:0 0 clamp(80px,14vh,170px)}
.ins-none p{font-family:var(--fd);font-style:italic;font-size:clamp(20px,2.4vw,31px);line-height:1.35;
  color:var(--ink-2);margin:clamp(34px,6vh,64px) 0 0;max-width:36ch;text-wrap:pretty}

/* ---------------------------------------------------------------- a finding */
.finding{position:relative;isolation:isolate;overflow:hidden;
  --f:var(--paper);--fg:var(--ink);--ac:var(--noise);
  background:var(--f);color:var(--fg);padding:clamp(60px,9vh,118px) 0}
.rank-insights > .finding:first-child,.finding + .finding{border-top:1px solid var(--rule)}
.finding .wrap{position:relative;width:100%}

.f-lead{font-family:var(--fd);font-style:italic;font-size:clamp(17px,1.8vw,24px);line-height:1.35;
  opacity:.68;margin:0 0 .45em;max-width:46ch;text-wrap:pretty}
.f-answer{font-family:var(--fd);font-weight:400;font-size:clamp(36px,6vw,100px);line-height:.98;
  letter-spacing:-.016em;margin:0;color:inherit;max-width:15ch;text-wrap:balance;
  font-variation-settings:"opsz" 96}
.f-note{font-family:var(--fb);font-weight:300;font-size:clamp(14px,1.15vw,17px);line-height:1.6;
  opacity:.8;margin:22px 0 0;max-width:58ch}
.f-note b{font-weight:500;opacity:1}
.f-note .num{font-family:var(--fd);font-size:1.7em;font-weight:400;line-height:1;vertical-align:-.14em;
  margin-right:.04em;font-variant-numeric:tabular-nums}

/* ---- the two full-bleed breaks: real photographs, no generated pattern ---- */
.finding.bleed{--f:#0c0c0c;--fg:#f2f0eb;--ac:#e0a05c;
  background:#0c0c0c;padding:clamp(88px,15vh,190px) 0;border-top:0}
.finding.bleed + .finding{border-top:0}
.finding.bleed::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--photo) center/cover no-repeat;
  filter:grayscale(.82) contrast(1.06) brightness(.6);transform:scale(1.04)}
.finding.bleed::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,8,.74) 0%,rgba(8,8,8,.42) 42%,rgba(8,8,8,.88) 100%)}
.finding.bleed[data-media="stage"]{--photo:url(/albums/daisy/img/bg7.jpg)}
.finding.bleed[data-media="crowd"]{--photo:url(/albums/daisy/img/bg8.jpg)}

/* reveal: children rise as the finding enters; bars grow. Safe without the
   observer and under reduced motion, since .in is what turns it on. */
.finding .wrap > *{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.finding:not(.in) .wrap > *{opacity:0;transform:translateY(18px)}
.finding .wrap > :nth-child(2){transition-delay:.07s}.finding .wrap > :nth-child(3){transition-delay:.14s}
.finding .wrap > :nth-child(4){transition-delay:.21s}.finding .wrap > :nth-child(5){transition-delay:.28s}
.bt i{display:block;height:100%;width:var(--w,0%);transition:width 1s cubic-bezier(.2,.8,.2,1) .2s}
.finding:not(.in) .bt i{width:0}
.divrow .fill{width:var(--w,0%);transition:width 1s cubic-bezier(.2,.8,.2,1) .2s}
.finding:not(.in) .divrow .fill{width:0}

/* ---------- the column bars ---------- */
.bars{margin-top:clamp(36px,5vh,60px);display:grid;gap:0;border-top:1px solid var(--fg)}
.bar-row{display:grid;grid-template-columns:minmax(150px,240px) 1fr 70px;align-items:center;gap:20px;
  padding:12px 0;border-bottom:1px solid rgba(127,127,127,.32)}
.bar-row .bl{font-family:var(--fd);font-size:clamp(17px,1.5vw,22px);line-height:1.15}
.bar-row .bl small{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-top:3px}
.bar-row .bt{height:14px;background:rgba(127,127,127,.3);overflow:hidden}
.bar-row .bt i{background:var(--fg);opacity:.72}
.bar-row.hi .bt i{background:var(--ac);opacity:1}
.bar-row .bv{font-family:var(--fd);font-size:clamp(22px,2vw,32px);text-align:right;font-variant-numeric:tabular-nums;line-height:1}
.bar-row.hi .bl,.bar-row.hi .bv{color:var(--ac)}

/* ---------- ranked rows: records, podium, song lists ---------- */
.records,.podium,.songs{list-style:none;margin:clamp(34px,5vh,60px) 0 0;padding:0;border-top:1px solid var(--fg)}
.records li,.podium li,.songs li{display:grid;align-items:center;gap:clamp(14px,2.4vw,32px);padding:16px 0;
  border-bottom:1px solid rgba(127,127,127,.32)}
.records li{grid-template-columns:auto minmax(0,1.6fr) minmax(120px,1fr) 96px}
.podium li{grid-template-columns:auto minmax(0,1fr) auto}
.songs li{grid-template-columns:auto minmax(0,1fr) 56px;padding:12px 0}
.records .t,.podium .t,.songs .t{min-width:0}
.records .t b,.podium .t b,.songs .t b{display:block;font-family:var(--fd);font-weight:400;line-height:1.1;
  font-size:clamp(20px,2.2vw,32px);overflow-wrap:anywhere}
.podium .t b{font-size:clamp(23px,2.6vw,38px)}
.songs .t b{font-size:clamp(17px,1.6vw,22px);text-wrap:pretty}
.records .t small,.podium .t small,.songs .t small{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.62;margin-top:5px}
.records .bt{height:10px;background:rgba(127,127,127,.3);overflow:hidden}
.records .bt i{background:var(--fg);opacity:.7}
.records li:first-child .bt i{background:var(--ac);opacity:1}
.records .v,.podium .v,.songs .v{font-family:var(--fd);text-align:right;font-variant-numeric:tabular-nums;line-height:1;
  font-size:clamp(26px,3vw,44px)}
.songs .v{font-size:clamp(22px,2.2vw,32px)}
.records li:first-child .v,.podium li:first-child .v{color:var(--ac)}
@media (max-width:700px){
  .bar-row{grid-template-columns:1fr 60px;gap:8px 14px;padding:12px 0 14px}
  .bar-row .bt{grid-column:1 / -1;grid-row:2;height:10px}
  .records li{grid-template-columns:auto minmax(0,1fr) 64px}
  .records .bt{display:none}
  .cover.md{--s:52px}
}

/* ---------- both ends ---------- */
.extremes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);margin-top:8px}
.ext-l{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin:clamp(30px,4vh,48px) 0 0}
.ext .songs{margin-top:12px}
.ext.hi .songs .v{color:var(--ac)}
.ext.lo{opacity:.8}
@media (max-width:760px){.extremes{grid-template-columns:1fr}}

/* ---------- the widest disagreement ---------- */
.split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,4vw,64px);margin-top:clamp(28px,4vh,56px)}
.split .side{display:grid;gap:10px}
.split .side:last-child{text-align:right}
.giant{font-family:var(--fd);font-size:clamp(110px,20vw,300px);line-height:.85;letter-spacing:-.03em;
  font-variation-settings:"opsz" 96;font-variant-numeric:tabular-nums;display:block}
.giant small{font-size:.28em;letter-spacing:0;opacity:.6;margin-left:.06em;vertical-align:.45em}
.f-note i{font-style:italic}
.split .side:first-child .giant{color:var(--ac)}
.split .lab{font-family:var(--fd);font-size:clamp(20px,2.4vw,34px);line-height:1.1}
.split .lab small{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.62;margin-top:6px}
.split .vs{width:1px;align-self:stretch;background:currentColor;opacity:.3;min-height:120px}
@media (max-width:600px){
  .split{grid-template-columns:1fr;gap:20px}
  .split .side:last-child{text-align:left}
  .split .vs{width:100%;height:1px;min-height:0}
  .giant{font-size:clamp(96px,30vw,160px)}
}

/* ---------- the deep cut, its cover at size ---------- */
.feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(28px,4vh,48px)}
.feature .cover{box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
.feature-t .f-answer{margin-top:0;font-size:clamp(30px,4.2vw,68px);max-width:14ch}
.feature-t .giant{margin-top:clamp(18px,3vh,36px);color:var(--ac);font-size:clamp(100px,14vw,210px)}
@media (max-width:820px){
  .feature{grid-template-columns:1fr}
  .cover.xl{--s:min(300px,70vw)}
}

/* ---------- charts ---------- */
.chart{margin-top:clamp(30px,4vh,52px)}
.chart-row{display:grid;grid-template-columns:minmax(0,1fr);max-width:820px}
svg.rank-svg{width:100%;height:auto;display:block;overflow:visible}
svg.rank-svg text{font-family:var(--fm);font-size:11px;fill:currentColor;opacity:.6}
svg.rank-svg text.axl{font-family:var(--fd);font-style:italic;font-size:14px;opacity:.8}
svg.rank-svg .ax{stroke:currentColor;stroke-width:1.2;opacity:.8}
svg.rank-svg .gr{stroke:currentColor;stroke-width:1;opacity:.12}
svg.rank-svg .diag{stroke:currentColor;stroke-width:1;stroke-dasharray:4 5;opacity:.32}
svg.rank-svg .pt{fill:var(--ac);opacity:.9;stroke:var(--f);stroke-width:1.5}
svg.rank-svg .ln{fill:none;stroke:var(--fg);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.rank-svg .area{fill:var(--fg);opacity:.08}
svg.rank-svg .pt-label{font-family:var(--fd);font-size:18px;opacity:1}
.arc-key{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:24px}
.arc-key span{display:inline-flex;align-items:center;gap:12px;font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.arc-key b{font-family:var(--fd);font-size:26px;letter-spacing:0;font-weight:400;font-variant-numeric:tabular-nums}
.arc-key small{font-size:inherit;opacity:.7}

/* ---------- you against the room ---------- */
.diverge{margin-top:clamp(30px,4vh,52px);display:grid;gap:14px;border-top:1px solid var(--fg);padding-top:16px}
.divrow{display:grid;grid-template-columns:minmax(150px,260px) 1fr 80px;align-items:center;gap:20px}
.divrow .lbl{display:inline-flex;align-items:center;gap:12px;font-family:var(--fd);font-size:clamp(16px,1.5vw,21px);line-height:1.1;min-width:0}
.divrow .lbl b{font-weight:400;overflow-wrap:anywhere}
.divrow .track{position:relative;height:16px;background:rgba(127,127,127,.3)}
.divrow .track .zero{position:absolute;left:50%;top:-6px;bottom:-6px;width:1px;background:var(--fg)}
.divrow .track .fill{position:absolute;top:0;bottom:0}
.divrow .fill.pos{background:var(--above);left:50%}
.divrow .fill.neg{background:var(--below);right:50%}
.divrow .amt{font-family:var(--fd);font-size:clamp(20px,2vw,28px);text-align:right;font-variant-numeric:tabular-nums}
.divrow .amt.pos{color:var(--above)}.divrow .amt.neg{color:var(--below)}
.diverge-key{display:grid;grid-template-columns:minmax(150px,260px) 1fr 80px;gap:20px;margin:10px 0 0;
  font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.diverge-key .neg{grid-column:2;grid-row:1;justify-self:start;color:var(--below)}
.diverge-key .zero{grid-column:2;justify-self:center;grid-row:1}
.diverge-key .pos{grid-column:2;justify-self:end;grid-row:1;color:var(--above)}
@media (max-width:600px){
  .divrow,.diverge-key{grid-template-columns:1fr 64px;gap:8px 14px}
  .divrow .lbl{grid-column:1 / -1}
  .diverge-key .neg,.diverge-key .zero,.diverge-key .pos{grid-column:1}
}

/* ---------- the close: add yours to the sample ---------- */
.ins-submit{position:relative;isolation:isolate;overflow:hidden;background:#0c0c0c;color:#f2f0eb;
  padding:clamp(54px,9vh,108px) 0}
.ins-submit::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(/albums/daisy/img/autograph.jpg) center 34%/cover no-repeat;
  filter:grayscale(.9) contrast(1.05) brightness(.52);transform:scale(1.05)}
.ins-submit::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,8,.78),rgba(8,8,8,.9))}
.ins-submit h3{font-family:var(--fd);font-weight:400;font-size:clamp(32px,5vw,72px);line-height:1;
  letter-spacing:-.012em;margin:0;max-width:16ch}
.ins-note{font-family:var(--fb);font-weight:300;font-size:clamp(14px,1.15vw,17px);line-height:1.6;
  opacity:.82;margin:18px 0 0;max-width:54ch}
.ins-sample{font-family:var(--fb);font-size:13px;line-height:1.5;opacity:.6;margin:18px 0 0;max-width:48ch}
.ins-sample:empty{display:none}
.rank-submit{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rank-btn{font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:14px 26px;
  border:1px solid #f2f0eb;border-radius:99px;background:#f2f0eb;color:#0c0c0c;cursor:pointer;transition:opacity .2s}
.rank-btn:hover{opacity:.85}
.rank-btn.ghost{background:none;color:#f2f0eb;border-color:rgba(242,240,235,.4)}
.rank-btn:disabled{opacity:.4;cursor:not-allowed}
.rank-status{font-family:var(--fm);font-size:12px;opacity:.75}
.rank-status.ok{color:#8fd19b;opacity:1}
.rank-status.err{color:#f0a06a;opacity:1}
/* ---------- footer, popover ---------- */
.rank-foot{padding:40px 0 72px;font-family:var(--fm);font-size:11.5px;color:var(--ink-3);line-height:1.6;border-top:1px solid var(--rule)}
.rank-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.info-pop{font-family:var(--fb);font-size:13px;line-height:1.45;color:var(--paper);
  max-width:240px;position:absolute;background:var(--ink);padding:12px 14px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.25)}
[hidden]{display:none!important}

/* =========================================================================
   SETTLE
   Ties in a score, put in order. The scale rows are the existing .bars grid
   with one action column added, so the finding looks like every other finding
   on the page. The layer itself borrows the hero's ground rather than the
   paper page's: it is a different room, entered on purpose and left again.
   ========================================================================= */
.bars.scale .bar-row{grid-template-columns:minmax(78px,120px) 1fr 52px auto}
.bars.scale .bar-row .bl{font-family:var(--fd);font-size:clamp(22px,2.4vw,34px);
  font-variant-numeric:tabular-nums;line-height:1}
.bars.scale .bar-row .bv{font-size:clamp(18px,1.6vw,24px);opacity:.7}
.settle-go{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--rule-2);color:var(--ink-2);
  padding:12px 0 5px;min-height:44px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.settle-go:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:700px){
  .bars.scale .bar-row{grid-template-columns:1fr 52px}
  .bars.scale .bar-row .bt{grid-column:1 / -1;grid-row:2;height:10px}
  .settle-go{grid-column:1 / -1;grid-row:3;justify-self:start}
}

.settle{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  background:#0b0b0b;color:#f2f0eb;overflow:auto;overscroll-behavior:contain}
.settle-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px clamp(18px,4vw,40px);border-bottom:1px solid #262624}
.settle-count{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9a9891}
.settle-stop{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid rgba(242,240,235,.35);border-radius:99px;color:#f2f0eb;
  padding:11px 20px;min-height:44px;cursor:pointer;transition:border-color .2s}
.settle-stop:hover{border-color:#f2f0eb}
.settle-prog{flex:0 0 auto;height:2px;background:#262624}
.settle-prog i{display:block;height:100%;width:var(--w,0%);background:var(--noise);
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
.settle-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:safe center;
  width:100%;max-width:1140px;margin:0 auto;padding:clamp(24px,5vh,56px) clamp(18px,4vw,40px)}
.settle :focus-visible{outline:2px solid #f2f0eb;outline-offset:3px}

/* one pair at a time */
.settle-q{font-family:var(--fd);font-style:italic;font-size:clamp(20px,2.6vw,34px);line-height:1.3;
  text-align:center;margin:0 0 clamp(24px,5vh,52px);text-wrap:balance}
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:clamp(14px,3vw,48px)}
.duel-side{display:flex;flex-direction:column;align-items:center;gap:20px;padding:8px;
  background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.duel-side .cover{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.duel-side:hover .cover,.duel-side:focus-visible .cover{transform:translateY(-5px)}
.duel-t{display:block;text-align:center}
.duel-t b{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(24px,3vw,44px);
  line-height:1.05;text-wrap:balance;overflow-wrap:anywhere}
.duel-t small{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#9a9891;margin-top:10px}
.duel-or{align-self:center;font-family:var(--fm);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#8a887f}
.settle-hint{font-family:var(--fb);font-weight:300;font-size:13px;line-height:1.6;color:#9a9891;
  text-align:center;margin:clamp(26px,5vh,52px) 0 0}
@media (max-width:640px){
  .duel{grid-template-columns:1fr;gap:12px}
  .duel .cover.lg{--s:min(188px,50vw)}
  .duel-side{gap:14px}
}

/* the order it came out in */
.settle-h{font-family:var(--fd);font-weight:400;font-size:clamp(30px,4.4vw,60px);line-height:1;margin:0}
.settle-note{font-family:var(--fb);font-weight:300;font-size:14px;line-height:1.6;color:#9a9891;
  margin:14px 0 0;max-width:52ch}
.settle-list{list-style:none;margin:clamp(22px,4vh,38px) 0 0;padding:0;
  border-top:1px solid rgba(242,240,235,.25)}
.settle-list li{display:grid;grid-template-columns:auto 32px auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(10px,1.6vw,22px);padding:9px 0;border-bottom:1px solid rgba(242,240,235,.14)}
.settle-list li.dragging{opacity:.35}
.settle-list li.over{background:rgba(242,240,235,.07)}
.settle-list .drag{display:flex;color:#78766f;cursor:grab}
.settle-list .pos{font-family:var(--fd);font-size:21px;color:#9a9891;text-align:right;
  font-variant-numeric:tabular-nums}
.settle-list .t{min-width:0}
.settle-list .t b{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(18px,1.8vw,24px);
  line-height:1.1;overflow-wrap:anywhere}
.settle-list .t small{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#9a9891;margin-top:4px}
.settle-list .moves{display:flex;gap:6px}
.settle-list .moves button{width:44px;height:44px;background:none;border:1px solid rgba(242,240,235,.25);
  border-radius:2px;color:#f2f0eb;font-size:15px;line-height:1;cursor:pointer;transition:border-color .2s}
.settle-list .moves button:hover:not(:disabled){border-color:#f2f0eb}
.settle-list .moves button:disabled{opacity:.25;cursor:not-allowed}
.settle-listview .rank-submit{margin-top:clamp(22px,4vh,38px)}
@media (max-width:560px){
  .settle-list li{grid-template-columns:auto 24px auto minmax(0,1fr);gap:10px}
  .settle-list .moves{grid-column:1 / -1;justify-content:flex-end}
  .settle-list .cover.sm{--s:38px}
}
@media (prefers-reduced-motion:reduce){
  .settle-prog i,.duel-side .cover{transition:none}
}