/* Long-form experiment pages: sections, research questions, method tables, log. Builds on base.css + subpage.css. */
.lead{max-width:680px;font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--ink);margin:0 0 18px}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:36px 0 0}
.facts a{color:var(--ink)}
.x-section{border-top:1px solid var(--line);padding:46px 0 10px}
.facts + .x-section{margin-top:12px;border-top:0}
.x-section h2{
  font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.7rem,4vw,2.6rem);
  letter-spacing:-.05em;line-height:1;margin:0 0 22px;max-width:760px
}
.x-section h3{font-size:.95rem;margin:26px 0 8px;color:var(--ink)}
.x-section ul{max-width:640px;color:var(--muted);padding-left:1.1rem;margin:0 0 22px}
.x-section li{margin:6px 0}
.x-section strong{color:var(--ink)}

/* Research questions: the F1…F6 / Q1…Q6 ids are referenced from hypotheses and the method table. */
.rq{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.rq li{display:grid;grid-template-columns:3.2rem 1fr;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
.rq .id{color:var(--accent-ink);font-weight:700;font-size:.85rem;padding-top:3px}
.rq .q{font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.1rem,2.3vw,1.4rem);letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.rq .why{grid-column:2;color:var(--muted);font-size:.92rem;max-width:620px}

.bets{display:grid;gap:12px;max-width:700px;margin:0 0 22px}
.bets div{background:var(--card);border:1px solid var(--line);padding:14px 16px;display:grid;grid-template-columns:3.2rem 1fr;gap:16px}
.bets b{color:var(--accent-ink);font-size:.85rem}
.bets span{color:var(--ink);font-size:.95rem}

.table-wrap{overflow-x:auto;margin:0 0 22px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.88rem}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:400;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em}
td:first-child{color:var(--ink);white-space:nowrap}
td{color:var(--muted)}

.log{list-style:none;padding:0;margin:0;max-width:700px}
.log li{display:grid;grid-template-columns:7.5rem 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.92rem}
.log time{color:var(--ink)}
.log .next time{color:var(--accent-ink)}

/* Listening lists: one row per rendered track, with its facts and a player. */
.tracks{list-style:none;padding:0;margin:0 0 22px;max-width:700px;border-top:1px solid var(--line)}
.tracks li{padding:16px 0;border-bottom:1px solid var(--line)}
.tracks .t{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.tracks .name{color:var(--ink);font-weight:700}
.tracks .spec{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.tracks .what{color:var(--muted);font-size:.9rem;margin:0 0 10px}
.tracks audio{width:100%;height:36px}

.diagram{margin:0 0 26px;max-width:680px}
.diagram svg{width:100%;height:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}

/* Display mathematics without a client-side typesetting dependency. */
.formula{
  --formula-accent:var(--tone-blue,#356f91);
  position:relative;overflow:hidden;max-width:700px;margin:28px 0;padding:22px 24px 20px;
  background:color-mix(in srgb,var(--card) 96%,var(--formula-accent) 4%);
  border:1px solid var(--line);border-left:4px solid var(--formula-accent)
}
.formula::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:24px 24px;mask-image:linear-gradient(to left,#0000,#000)
}
.formula > *{position:relative;z-index:1}
.formula-kicker{margin-bottom:14px;color:var(--formula-accent);font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.formula-main{
  display:flex;align-items:center;gap:.3em;min-width:max-content;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.55rem,5vw,2.75rem);line-height:1.05;letter-spacing:-.035em;color:var(--ink)
}
.formula-main.small{margin-top:13px;font-size:clamp(1.05rem,3.5vw,1.55rem);letter-spacing:-.02em}
.formula-main.small + .formula-main.small{margin-top:8px}
.formula-main.wrap{min-width:0;flex-wrap:wrap;row-gap:.45em}
.formula-main sup{font-size:.55em;line-height:0}
.formula-var{font-style:italic}
.formula-word{font-family:Arial,Helvetica,sans-serif;font-size:.45em;font-weight:700;letter-spacing:-.02em}
.formula-op{padding:0 .08em;color:var(--muted);font-weight:400}
.formula-frac{display:inline-grid;grid-template-rows:1fr 1fr;align-items:center;text-align:center;vertical-align:middle;font-size:.72em;line-height:1.05}
.formula-frac > :first-child{padding:0 .25em .12em;border-bottom:1.5px solid currentColor}
.formula-frac > :last-child{padding:.12em .25em 0}
.formula-caption{max-width:580px;margin:16px 0 0;color:var(--muted);font-size:.86rem;line-height:1.45}
.formula-note{max-width:620px;margin:13px 0 0;padding-top:11px;border-top:1px dashed var(--line);color:var(--muted);font-size:.74rem;line-height:1.45}
.formula-note b{color:var(--ink);font-weight:700}
.formula-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:17px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}
.formula-legend b{color:var(--ink);font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:1.2em;font-style:italic}
.formula-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px;color:var(--ink)}
.formula-main + .formula-flow{margin-top:18px}
.formula-flow .value{font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.25rem,4vw,2.15rem);font-weight:800;letter-spacing:-.055em}
.formula-flow .value small{display:block;margin-top:5px;color:var(--muted);font:400 .68rem/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.02em;text-transform:uppercase}
.formula-flow .arrow{color:var(--formula-accent);font-size:1.5rem}
.formula-flow .result{color:var(--formula-accent)}
.formula-rule{font-family:Arial,Helvetica,sans-serif;font-size:.42em;font-weight:700;letter-spacing:-.025em}
.weight-map{display:grid;grid-template-columns:minmax(170px,1fr) repeat(2,minmax(90px,.55fr));max-width:700px;margin:26px 0;border-top:1px solid var(--line)}
.weight-map > *{padding:10px 12px;border-bottom:1px solid var(--line)}
.weight-map .head{color:var(--muted);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}
.weight-map .trait{padding-left:0;color:var(--ink);font-size:.84rem}
.weight-map .weight{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:1.05rem;font-variant-numeric:tabular-nums}
.weight-map .weight::before{content:"×";margin-right:.18em;color:var(--muted)}
.weight-map .high{color:var(--tone-blue,#356f91);font-weight:700}

.cta{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.cta a{text-decoration:none;border:1px solid var(--ink);padding:12px 16px;font-size:.85rem}
.cta a.primary{background:var(--ink);color:var(--bg)}
.cta a:hover{border-color:var(--accent)}
.cta a.primary:hover{background:var(--accent);border-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:720px){
  .rq li,.bets div{grid-template-columns:2.6rem 1fr}
  .log li{grid-template-columns:1fr;gap:2px}
  .formula{margin-left:-12px;margin-right:-12px;padding:20px 16px 18px}
  .formula-main{overflow-x:auto;padding-bottom:4px}
  .formula-main.wrap{overflow:visible}
  .formula-flow{grid-template-columns:1fr auto 1fr}
  .formula-flow .hide-mobile{display:none}
  .weight-map{grid-template-columns:minmax(130px,1fr) repeat(2,minmax(68px,.5fr))}
  .weight-map > *{padding:9px 6px}
  .weight-map .trait{padding-left:0}
}