/* research/journal.css: the research journal (site-v54-journal-list: the board is a list, one row per study). Tokens, type and the frame come from shared/site.css; this file sets
   the front page (masthead line, the cover study, the list of studies), the drawn figures (one accent, honest axes, labels in
   words) and the study page (article column, key findings, tables, method disclosures). Used by research/ and research/<slug>/. */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── masthead: the program line under the lead ── */
.program{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:var(--sp-actions);padding-top:18px;border-top:1px solid var(--hair);font-size:15px;line-height:1.4;color:var(--sub)}
.program li{padding-right:18px;margin-right:18px;border-right:1px solid var(--edge)}
.program li:last-child{border-right:0;margin-right:0;padding-right:0}
.program a{color:var(--teal);transition:color var(--motion-base) var(--ease-out)}
.program a:hover{color:var(--teal-hover)}
.hero-solo .program{max-width:44rem}

/* shared small parts */
.byline{margin-top:12px;font-size:14px;line-height:1.4;color:var(--sub)}
.take{font-size:var(--fs-base);line-height:1.55;color:var(--ink)}
.take b{font-weight:600}
.num{display:flex;flex-direction:column}
.num-v{font-weight:600;letter-spacing:-.04em;line-height:.95;color:var(--ink)}
.num-u{margin-top:10px;font-size:15px;line-height:1.45;color:var(--sub);max-width:24em}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.more{font-size:14px;color:var(--teal);text-decoration:underline;text-decoration-color:rgba(33,173,143,.4);text-underline-offset:3px;transition:color var(--motion-base) var(--ease-out),text-decoration-color var(--motion-base) var(--ease-out)}
.more:hover{color:var(--teal-hover);text-decoration-color:var(--teal-hover)}
.how summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding-block:6px;font-size:15px;font-weight:500;color:var(--sub);transition:color var(--motion-base) var(--ease-out)}
.how summary::-webkit-details-marker{display:none}
.how summary:hover{color:var(--ink)}
.how summary .ic{width:16px;height:16px;color:var(--sub);transition:transform var(--motion-base) var(--ease-out)}
.how[open] summary .ic{transform:rotate(180deg)}
.how>div{padding:8px 0 4px 16px;border-left:1px solid var(--edge)}
.how>div p{font-size:15px;line-height:1.6;color:var(--sub);max-width:40em}
.how>div p+p{margin-top:12px}
.how strong{color:var(--ink)}

/* ── the cover: one lead study with the room of a magazine cover ── */
.sec-cover{padding-block:clamp(72px,11vh,120px)}
.cover{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px var(--col-gap);align-items:start}
.cv-h{font-size:clamp(34px,3.6vw,52px);line-height:1.08;letter-spacing:-.025em;max-width:13em}
.cv-num{margin-top:36px;padding-top:24px;border-top:1px solid var(--hair)}
.cv-num .num-v{font-size:clamp(72px,8.4vw,128px)}
.cv-num .num-u{margin-top:8px;font-size:clamp(18px,1.4vw,21px);font-weight:500;color:var(--ink)}
.cv-take{margin-top:24px;font-size:var(--fs-lead);max-width:26em}
.cv-text .byline{margin-top:18px}
.cv-fig{padding-top:8px}
.cv-foot{grid-column:1/-1;display:grid;gap:14px;padding-top:24px;border-top:1px solid var(--hair)}
.limits{font-size:14.5px;line-height:1.55;color:var(--sub);max-width:52em}
.limits b{color:var(--ink);font-weight:600}

/* ── the figure: horizontal bars on a 0–100 axis, values at the tip, one accent (teal) and one de-emphasis grey.
   Palette checked with the dataviz validator on #1a1a1a / #212121: CVD ΔE 19.3, normal ΔE 23.0; the grey sits under 3:1,
   so every bar carries its value in text and the legend names both series. ── */
.fig{min-width:0}
.fig-t{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink);max-width:36em}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font-size:13.5px;color:var(--sub)}
.legend li{display:inline-flex;align-items:center;gap:8px}
.sw{width:10px;height:10px;border-radius:2px;flex:none}
.sw-a,.bar.a{background:var(--teal)}
.sw-b,.bar.b{background:#5c5c5c} /* the chart's de-emphasis step: the app's grey scale, validated against the deep surface */
.bars{--lw:0px;--tip:56px;--gap:0px;position:relative;margin-top:22px;padding-bottom:26px}
.bars.lab{--lw:clamp(104px,24%,168px);--gap:14px}
.bars .grid{position:absolute;top:0;bottom:26px;left:calc(var(--lw) + var(--gap));right:var(--tip);pointer-events:none}
.bars .grid i{position:absolute;top:0;bottom:0;left:calc(var(--t) * 1%);border-left:1px solid var(--hair)}
.bars .grid i:first-child{border-left-color:var(--edge)} /* the baseline */
.bgroup+.bgroup{margin-top:18px}
.bg-l{position:relative;z-index:1;display:inline-block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:8px;padding:2px 6px 2px 0;background:var(--deep)}
.brow{position:relative;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);column-gap:var(--gap);align-items:center;min-height:30px}
.brow+.brow{margin-top:4px}
.bl{font-size:14px;line-height:1.3;color:var(--sub);text-align:right}
.bl.sr{position:absolute}
.plot{grid-column:2;position:relative;height:22px;margin-right:var(--tip)}
.bar{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 1%);border-radius:0 4px 4px 0;transition:opacity var(--motion-base) var(--ease-out)}
.bv{position:absolute;top:50%;left:calc(var(--v) * 1% + 8px);transform:translateY(-50%);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.axis{position:absolute;left:calc(var(--lw) + var(--gap));right:var(--tip);bottom:0;height:18px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.axis span{position:absolute;left:calc(var(--t) * 1%);transform:translateX(-50%);white-space:nowrap}
.axis span:first-child{transform:none}
.axis span:last-child{transform:translateX(-100%)}
/* hover: the row under the pointer stays, its neighbours step back, and the sentence version appears. Values never depend on it. */
.bars:hover .brow:not(:hover) .bar{opacity:.4}
.brow[data-tip]::after{content:attr(data-tip);position:absolute;z-index:5;left:calc(var(--lw) + var(--gap));bottom:calc(100% + 6px);padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--elev);box-shadow:var(--float-shadow);font-size:13px;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-out)}
@media (hover:hover){.brow[data-tip]:hover::after{opacity:1}}

/* ── the list: five studies, one row each, hairlines between rows, no cards.
   Wide: finding (+ one line for your work) · number with its label · area · date · link, then the disclosure under the finding.
   The markup is in that order and the grid places it row by row, so the visual order is the DOM order. ── */
#studies .lead{max-width:34em}
.list{margin-top:40px;border-top:1px solid var(--edge)}
.row{border-bottom:1px solid var(--hair)}
.row>article{display:grid;grid-template-columns:minmax(0,1fr) 11rem 6.75rem 10rem 9.25rem;column-gap:24px;align-items:baseline;padding-block:22px 16px}
.r-f{font-size:20px;line-height:1.3;letter-spacing:-.012em;font-weight:600;color:var(--ink);max-width:28em}
.r-do{margin-top:6px;font-size:15px;line-height:1.5;color:var(--sub);max-width:40em}
.r-num{font-size:15px;line-height:1.4;color:var(--sub);font-variant-numeric:tabular-nums}
.r-v{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.r-area,.r-date{font-size:15px;line-height:1.4;color:var(--sub);white-space:nowrap}
.r-link{justify-self:end;font-size:15px;white-space:nowrap}
.row .how{grid-column:1;margin-top:6px}
.row .how>div{margin-bottom:10px}

/* ── the study page ── */
.art-head .dateline{margin-top:28px}
.keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px var(--col-gap);margin-top:40px;counter-reset:k}
.keys li{position:relative;padding-top:20px;border-top:1px solid var(--edge);counter-increment:k}
.keys b{display:block;font-size:var(--fs-h3);line-height:1.35;font-weight:600;color:var(--ink);max-width:24em}
.keys b::before{content:counter(k);display:inline-grid;place-items:center;width:24px;height:24px;margin-right:12px;border:1px solid var(--edge);border-radius:50%;font-size:12px;font-weight:600;color:var(--sub);vertical-align:2px}
.keys span{display:block;margin-top:10px;font-size:var(--fs-body);line-height:1.55;color:var(--sub);max-width:34em}
.art{max-width:46rem}
.part+.part{margin-top:clamp(56px,8vh,80px)}
.art h2{font-size:clamp(26px,2.2vw,32px)}
.art p{font-size:var(--fs-body);line-height:1.65;color:var(--sub)}
.art h2+p{margin-top:var(--sp-lead)}
.art p+p{margin-top:var(--sp-p)}
.art em{font-style:italic;color:var(--ink)}
.art strong{font-weight:600;color:var(--ink)}
.art .pull{margin-block:36px;padding-top:18px;border-top:1px solid var(--edge);font-size:clamp(21px,1.8vw,26px);line-height:1.35;letter-spacing:-.015em;font-weight:500;color:var(--ink)}
.art-fig,.tfig{margin-block:36px}
.art-fig .cap,.tfig .cap{margin-top:6px}
.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--edge);text-align:left;vertical-align:top}
.tbl thead th{font-size:13.5px;font-weight:500;color:var(--sub);border-bottom-color:var(--border)}
.tbl tbody th{font-weight:400;color:var(--sub)}
.tbl td{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.hi{font-weight:600}
.tbl th:first-child{padding-left:0}
.todo{margin-top:var(--sp-lead);display:grid;gap:18px}
.todo li{position:relative;padding-left:22px;font-size:var(--fs-body);line-height:1.65;color:var(--sub)}
.todo li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.try{margin-block:36px;padding:24px 26px;background:var(--panel);border:1px solid var(--edge);border-radius:12px}
.try p{margin-top:10px;font-size:16px}
.try a{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(33,173,143,.4);text-underline-offset:3px}
.try a:hover{color:var(--teal-hover)}
.part-method{padding-top:32px;border-top:1px solid var(--hair)}
.part-method .how+.how{margin-top:6px}
.part-method .how summary{font-size:17px;color:var(--ink)}
.part-method .how>div p{font-size:15.5px}
.credit{margin-top:36px;max-width:none}

/* ── narrower screens ── */
@media (max-width:1180px){
  .row>article{grid-template-columns:minmax(0,1fr) 12rem 7.5rem 9.5rem;column-gap:22px}
  .r-link{grid-column:1;grid-row:2;justify-self:start;margin-top:8px}
  .row .how{grid-row:3}
}
@media (max-width:899px){
  /* phones and narrow tablets: two lines per row. The finding (with its line for your work), then one line of number · area · date · link. */
  .row>article{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;padding-block:20px 14px}
  .r-text{flex:0 0 100%}
  .r-num,.r-area,.r-date,.r-link{margin-top:10px;font-size:14.5px;white-space:nowrap}
  .r-v{font-size:17px}
  .r-num::after,.r-area::after{content:"·";margin-inline:10px;color:var(--dim)}
  .r-link{flex:0 0 100%;margin-top:8px}
  .row .how{flex:0 0 100%;margin-top:4px}
  .cover{grid-template-columns:minmax(0,1fr);gap:40px}
  .keys{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:640px){
  .program{flex-direction:column;gap:6px}
  .program li{border-right:0;margin-right:0;padding-right:0}
  .bars.lab{--lw:96px}
  .bars{--tip:48px}
  .bars.lab{--gap:10px}
  .axis span:nth-child(2),.axis span:nth-child(4){display:none}
  .bl{font-size:13px}
  .try{padding:20px}
}
/* fixes after the first contact sheet */
.hero-solo .program.dateline{max-width:60rem}
.keys b{position:relative;padding-left:36px}
.keys b::before{position:absolute;left:0;top:0;margin:0}
.art p.cap{font-size:var(--fs-cap);line-height:1.5}
.art em{padding-right:.12em}