/* The research behind Lessen (/sources, Oct 19, 2026). Lessen Design
 * System 4 (light): tokens and type come from /assets/ds4/ds.css.
 * Everything here is prefixed sr- so it never collides with another page.
 *
 * The page itself is generated from research/citations.json by
 * scratchpad/redesign/research/build_sources.py; change the data or the
 * script, never src/sources.html by hand.
 *
 * Calm and scannable on purpose: one column of entries split by hairlines,
 * a small index that stays beside it on wide screens, no cards. Nothing
 * moves on its own; the index only marks the group you are reading.
 */

.sr-main{--sr-index-w:236px;--sr-label-w:116px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ------------------------------------------------------------------ */
/* 1. Hero                                                              */
/* ------------------------------------------------------------------ */
.sr-hero{position:relative;padding:calc(var(--nav-h) + clamp(72px,12vh,140px)) 0 clamp(36px,6vh,64px)}
.sr-title{max-width:13ch}
.sr-lead{max-width:54ch;color:var(--bone)}

/* The three labels, explained once. */
.sr-key{margin:44px 0 0;padding:22px 0 0;border-top:1px solid var(--rim-lo);max-width:1000px}
.sr-key-lead{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ash)}
.sr-key dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 36px}
.sr-key dl div{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.sr-key dt,.sr-key dd{margin:0}
.sr-key dd{font-size:14px;line-height:1.5;color:var(--ash);max-width:34ch}

/* A label: plain words on a hairline chip. Counterpoints get a filled dot,
   reading-status labels a hollow ring, so the two never look alike even in
   grayscale. */
.sr-tag{display:inline-flex;align-items:center;gap:8px;min-height:26px;padding:3px 11px 3px 10px;border-radius:10px;
  font-size:13px;line-height:1.2;font-weight:500;color:var(--bone);white-space:nowrap;
  background:rgba(255,248,236,.03);box-shadow:inset 0 0 0 1px var(--rim)}
.sr-tag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.25px var(--ash)}
.sr-tag.is-counter::before{background:var(--bone);box-shadow:none}

/* ------------------------------------------------------------------ */
/* 2. The index and the column of entries                               */
/* ------------------------------------------------------------------ */
.sr-body{position:relative;padding:clamp(28px,5vh,56px) 0 clamp(64px,9vh,112px)}
.sr-layout{display:grid;grid-template-columns:var(--sr-index-w) minmax(0,var(--measure));gap:clamp(40px,6.5vw,104px);align-items:start}

.sr-index{position:sticky;top:112px;max-height:calc(100vh - 136px);overflow:auto;overscroll-behavior:contain;
  scrollbar-width:none}
.sr-index::-webkit-scrollbar{display:none}
.sr-index-label{margin:0 0 10px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.sr-index ol{list-style:none;margin:0;padding:0;counter-reset:sr}
.sr-index li{counter-increment:sr}
.sr-index a{position:relative;display:flex;align-items:baseline;gap:12px;min-height:44px;padding:11px 0 11px 14px;
  font-size:14.5px;line-height:1.35;color:var(--ash);text-decoration:none;border-top:1px solid var(--rim-lo);
  transition:color .25s ease}
.sr-index li:last-child a{border-bottom:1px solid var(--rim-lo)}
.sr-index a::before{content:counter(sr);flex:none;width:14px;font-size:13px;font-variant-numeric:tabular-nums lining-nums;color:var(--faint);transition:color .25s ease}
.sr-index a::after{content:"";position:absolute;left:0;top:50%;width:2px;height:18px;margin-top:-9px;border-radius:2px;background:var(--bone);opacity:0;transition:opacity .25s ease}
.sr-index a:hover{color:var(--bone)}
.sr-index a[aria-current="true"]{color:var(--numbers)}
.sr-index a[aria-current="true"]::before{color:var(--ash)}
.sr-index a[aria-current="true"]::after{opacity:.85}

.sr-content{min-width:0}
.sr-index{scroll-margin-top:96px}
.sr-back{display:none;margin:22px 0 0;font-size:14px;line-height:1.4}
.sr-back a{display:inline-flex;align-items:center;min-height:44px;color:var(--ash);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(173,167,159,.4)}
.sr-back a:hover{color:var(--bone)}

/* A group: one part of Lessen. */
.sr-group{padding-top:clamp(72px,10vh,120px);scroll-margin-top:72px}
.sr-group:first-child{padding-top:0}
.sr-h2{margin:0;font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 60;
  font-size:clamp(34px,3.7vw,52px);line-height:1.05;letter-spacing:-.022em;color:var(--numbers);text-wrap:balance}

/* "In Lessen" and "In short", and the same label column in every entry. */
.sr-why,.sr-facts{margin:0}
.sr-why > div,.sr-facts > div{display:grid;grid-template-columns:var(--sr-label-w) minmax(0,1fr);gap:4px 24px}
.sr-why dt,.sr-facts dt{font-size:13.5px;line-height:1.7;color:var(--muted)}
.sr-why dd,.sr-facts dd{margin:0;text-wrap:pretty}
.sr-why{margin-top:24px}
.sr-why > div{padding:8px 0}
.sr-why dd{font-size:17px;line-height:1.55;color:var(--ash)}
.sr-why > div:last-child dd{color:var(--bone)}
.sr-help{margin:14px 0 0 calc(var(--sr-label-w) + 24px);font-size:15px;line-height:1.55;color:var(--ash)}
.sr-help a{color:var(--bone);white-space:nowrap;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(242,238,231,.35)}

/* One study. */
.sr-list{list-style:none;margin:36px 0 0;padding:0}
.sr-entry{padding:30px 0 30px;border-top:1px solid var(--rim-lo);scroll-margin-top:96px}
.sr-entry:last-child{border-bottom:1px solid var(--rim-lo)}
.sr-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.sr-claim{margin:0;font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 36;
  font-size:clamp(20px,1.7vw,23.5px);line-height:1.32;letter-spacing:-.008em;color:var(--numbers);text-wrap:pretty}
.sr-facts{margin-top:18px}
.sr-facts > div{padding:8px 0}
.sr-facts dd{font-size:15.5px;line-height:1.62;color:var(--ash)}
.sr-entry:target .sr-claim{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(242,238,231,.3)}

/* Links to the sources. The whole citation is the link, so it reads well to
   a screen reader; only the title carries the underline, so four lines of
   authors and pages never shout louder than the finding above them. */
.sr-cite{color:var(--ash);text-decoration:none;overflow-wrap:anywhere;transition:color .25s ease}
.sr-cite .sr-ti{color:var(--bone);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(242,238,231,.3);transition:text-decoration-color .25s ease,color .25s ease}
.sr-cite:hover{color:var(--bone)}
.sr-cite:hover .sr-ti{color:var(--numbers);text-decoration-color:rgba(242,238,231,.85)}
.sr-cite:focus-visible{border-radius:4px}
.sr-cite i,.sr-gcite i{font-style:italic}
.sr-gcite > .sr-ti{color:var(--bone)}
.sr-alt,.sr-inline{color:var(--ash);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(242,238,231,.26);transition:text-decoration-color .25s ease}
.sr-alt{margin-left:4px;white-space:nowrap}
.sr-alt:hover,.sr-inline:hover{color:var(--bone);text-decoration-color:rgba(242,238,231,.8)}
/* "In our guides": quiet links, the same as under the guide sources. */
.sr-facts dd a:not(.sr-cite):not(.sr-alt):not(.sr-inline){color:var(--ash);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(173,167,159,.4);transition:color .25s ease,text-decoration-color .25s ease}
.sr-facts dd a:not(.sr-cite):not(.sr-alt):not(.sr-inline):hover{color:var(--bone);text-decoration-color:rgba(242,238,231,.75)}

/* Sources behind the guides: a plain reading list. */
.sr-guides-lead{margin:22px 0 0;max-width:58ch;font-size:17px;line-height:1.55;color:var(--ash);text-wrap:pretty}
.sr-sub{margin:44px 0 0;padding-bottom:12px;font:500 15px/1.4 var(--sans);color:var(--bone);scroll-margin-top:96px}
.sr-glist{list-style:none;margin:0;padding:0}
.sr-gsrc{padding:16px 0 17px;border-top:1px solid var(--rim-lo);scroll-margin-top:96px}
.sr-glist .sr-gsrc:last-child{border-bottom:1px solid var(--rim-lo)}
.sr-gcite{margin:0;font-size:15.5px;line-height:1.6;color:var(--ash);overflow-wrap:anywhere;text-wrap:pretty}
.sr-gcite + .sr-gcite{margin-top:6px}
.sr-gnote{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--ash);text-wrap:pretty}
.sr-gused{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.sr-gused a{color:var(--ash);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(173,167,159,.35);transition:color .25s ease,text-decoration-color .25s ease}
.sr-gused a:hover{color:var(--bone);text-decoration-color:rgba(242,238,231,.7)}

/* ------------------------------------------------------------------ */
/* 3. Close                                                             */
/* ------------------------------------------------------------------ */
.sr-close{position:relative;padding:clamp(24px,4vh,48px) 0 clamp(88px,12vh,140px)}
.sr-clin{max-width:calc(var(--sr-index-w) + var(--measure) + clamp(40px,6.5vw,104px));padding:26px 30px;border-radius:24px}
.sr-clin p{margin:0;font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 36;
  font-size:clamp(21px,2vw,26px);line-height:1.35;letter-spacing:-.01em;color:var(--numbers);text-wrap:balance}
.sr-clin .ds-link{color:var(--numbers);text-decoration-color:rgba(251,248,243,.4)}
.sr-clin .ds-link:hover{text-decoration-color:rgba(251,248,243,.9)}
.sr-fix{margin:22px 0 0;max-width:64ch;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ------------------------------------------------------------------ */
/* 4. Smaller screens                                                   */
/* ------------------------------------------------------------------ */
@media (max-width:1060px){
  .sr-main{--sr-index-w:188px;--sr-label-w:104px}
}
@media (max-width:900px){
  /* The index becomes a short list above the entries. */
  .sr-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .sr-index{position:static;max-height:none;overflow:visible;margin:0 0 56px}
  .sr-index ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .sr-index li:nth-last-child(2) a{border-bottom:1px solid var(--rim-lo)}
  .sr-index a{padding-left:0}
  .sr-index a::after{display:none}
  .sr-back{display:block}
  .sr-content{max-width:var(--measure)}
  .sr-key dl{grid-template-columns:minmax(0,1fr);gap:16px}
  .sr-key dl div{flex-direction:row;align-items:baseline;gap:14px}
  .sr-key dt{flex:none;width:156px}
}
@media (max-width:560px){
  .sr-hero{padding-top:calc(var(--nav-h) + 56px)}
  .sr-key dl div{flex-direction:column;gap:8px}
  .sr-key dt{width:auto}
  .sr-index ol{grid-template-columns:minmax(0,1fr)}
  .sr-index li:nth-last-child(2) a{border-bottom:0}
  .sr-why > div,.sr-facts > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .sr-why dt,.sr-facts dt{line-height:1.5}
  .sr-why dd{font-size:16.5px}
  .sr-facts dd{font-size:15.5px}
  .sr-help{margin-left:0}
  .sr-entry{padding:26px 0}
  .sr-clin{padding:22px}
}

/* Reduced motion: nothing here moves, and jumps are instant. */
@media (prefers-reduced-motion:reduce){
  .sr-index a,.sr-index a::before,.sr-index a::after,.sr-cite,.sr-alt,.sr-inline,.sr-gused a{transition:none}
}