/* ============================================================
   Infant Sleep Practice Study — page styles
   Extends styles.css (Warm Editorial). Scoped under .study.
   Data ink: --brand (#1e6048) primary, --accent (#c07830) secondary.
   ============================================================ */

.study { --st-ink: var(--brand); --st-ink-2: var(--accent); }

/* --- Masthead ------------------------------------------- */
.st-masthead { padding: 48px 0 32px; border-bottom: 2px solid var(--border-md); margin-bottom: 34px; }
.st-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-ink); margin-bottom: 14px;
}
.st-masthead h1 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.35rem); line-height: 1.12; letter-spacing: -.02em;
  color: var(--text); text-wrap: balance; margin-bottom: 16px; max-width: 19ch;
}
.st-standfirst {
  font-size: clamp(1.02rem, 2vw, 1.18rem); line-height: 1.6; color: var(--text-2);
  max-width: 62ch; margin-bottom: 24px;
}
.st-byline {
  display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 18px;
  border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted);
}
.st-byline div { display: flex; flex-direction: column; gap: 2px; }
.st-byline dt { font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: .75; }
.st-byline dd { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* --- Two-column shell ----------------------------------- */
.st-shell { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 52px; align-items: start; }
.st-index { position: sticky; top: 88px; font-size: .84rem; }
.st-index h2 {
  font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.st-index ol { list-style: none; counter-reset: sec; display: grid; gap: 1px; }
.st-index a {
  display: flex; gap: 9px; padding: 6px 9px; border-radius: var(--radius-xs);
  color: var(--muted); text-decoration: none; line-height: 1.35;
  transition: color var(--t), background var(--t);
}
.st-index li { counter-increment: sec; }
.st-index a::before { content: counter(sec); font-variant-numeric: tabular-nums; opacity: .5; flex-shrink: 0; }
.st-index a:hover, .st-index a.on { color: var(--st-ink); background: var(--brand-light); text-decoration: none; }
.st-index a.on { font-weight: 600; }

/* --- Sections ------------------------------------------- */
.st-body { min-width: 0; max-width: 720px; }
.st-sec { counter-increment: stsec; margin-bottom: 56px; scroll-margin-top: 88px; }
.st-body { counter-reset: stsec; }
.st-sec > h2 {
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; line-height: 1.22; letter-spacing: -.015em; color: var(--text);
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 13px; text-wrap: balance;
}
.st-sec > h2::before {
  content: counter(stsec); font-family: 'DM Sans', sans-serif; font-size: .8rem;
  font-weight: 700; color: var(--st-ink); font-variant-numeric: tabular-nums; flex-shrink: 0;
  padding: 3px 8px; background: var(--brand-light); border-radius: var(--radius-xs); line-height: 1.4;
}
.st-sec h3 {
  font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 700;
  color: var(--text); margin: 26px 0 8px; letter-spacing: -.005em;
}
.st-sec p { font-size: .945rem; line-height: 1.72; color: var(--text-2); margin-bottom: 14px; max-width: 68ch; }
.st-sec p.st-lead { font-size: 1.06rem; line-height: 1.65; color: var(--text); }
.st-sec ul, .st-sec ol.st-num { margin: 0 0 16px 19px; display: grid; gap: 7px; }
.st-sec li { font-size: .93rem; line-height: 1.62; color: var(--text-2); max-width: 66ch; }
.st-sec li::marker { color: var(--st-ink); }
.st-sec strong { color: var(--text); font-weight: 600; }
.st-num-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }

/* --- Scope notice (what this can / cannot show) ---------- */
.st-scope {
  background: var(--card); border: 1px solid var(--border-md);
  border-radius: var(--radius); padding: 24px 26px; margin-bottom: 44px;
  box-shadow: var(--shadow-sm);
}
.st-scope h2 {
  font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--st-ink); margin-bottom: 14px;
}
.st-scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.st-scope h3 { font-size: .87rem; font-weight: 700; margin: 0 0 9px; color: var(--text); }
.st-scope ul { list-style: none; margin: 0; display: grid; gap: 7px; }
.st-scope li { font-size: .855rem; line-height: 1.52; color: var(--text-2); display: flex; gap: 8px; align-items: flex-start; }
.st-scope li::before { flex-shrink: 0; font-weight: 700; margin-top: -1px; }
.st-can li::before   { content: '✓'; color: var(--ok); }
.st-cant li::before  { content: '×'; color: var(--bad); font-size: 1.05rem; line-height: 1.35; }

/* --- Findings list (abstract-style) ---------------------- */
.st-findings { list-style: none; counter-reset: fnd; margin: 0 0 8px; display: grid; gap: 16px; }
.st-findings li {
  counter-increment: fnd; position: relative; padding-left: 44px;
  font-size: .95rem; line-height: 1.66; color: var(--text-2); max-width: 68ch;
}
.st-findings li::before {
  content: counter(fnd, decimal-leading-zero); position: absolute; left: 0; top: .28em;
  font-size: .72rem; font-weight: 700; color: var(--st-ink); font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* --- Figures -------------------------------------------- */
.st-fig {
  margin: 26px 0 30px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px 18px; box-shadow: var(--shadow-sm);
}
.st-fig figcaption { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); font-size: .8rem; line-height: 1.55; color: var(--muted); }
.st-fig figcaption b { color: var(--text-2); font-weight: 700; }
.st-fig-title { font-size: .93rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.st-fig-sub { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }

/* Horizontal bar rows */
.st-bars { display: grid; gap: 11px; }
.st-bar-row { display: grid; grid-template-columns: minmax(120px, 1.15fr) minmax(0,2.4fr) 62px; gap: 12px; align-items: center; }
.st-bar-lab { font-size: .81rem; color: var(--text-2); line-height: 1.3; }
.st-bar-track { position: relative; height: 17px; background: var(--bg-2); border-radius: 3px; overflow: visible; }
.st-bar-fill { height: 100%; background: var(--st-ink); border-radius: 3px 4px 4px 3px; }
.st-bar-fill.alt { background: var(--st-ink-2); }
.st-bar-ci { position: absolute; top: 50%; height: 1.5px; background: var(--text-2); opacity: .42; transform: translateY(-50%); }
.st-bar-ci::before, .st-bar-ci::after {
  content: ''; position: absolute; top: -3px; width: 1.5px; height: 7px; background: var(--text-2); opacity: .85;
}
.st-bar-ci::before { left: 0; } .st-bar-ci::after { right: 0; }
.st-bar-val { font-size: .82rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }

/* Paired (observed vs expected) */
.st-pair { display: grid; gap: 13px; }
.st-pair-row { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 12px; align-items: center; }
.st-pair-lab { font-size: .8rem; color: var(--text-2); line-height: 1.25; text-align: right; }
.st-pair-bars { display: grid; gap: 3px; }
.st-pb { display: flex; align-items: center; gap: 7px; }
.st-pb-track { flex: 1; height: 13px; background: var(--bg-2); border-radius: 3px; }
.st-pb-fill { height: 100%; border-radius: 3px; }
.st-pb-fill.obs { background: var(--st-ink); }
.st-pb-fill.exp { background: var(--st-ink-2); opacity: .8; }
.st-pb-val { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; width: 40px; flex-shrink: 0; }

.st-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: .78rem; color: var(--text-2); }
.st-legend span { display: flex; align-items: center; gap: 6px; }
.st-swatch { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.st-swatch.obs { background: var(--st-ink); } .st-swatch.exp { background: var(--st-ink-2); opacity: .8; }

/* Column chart (burden by age) */
.st-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.st-col { display: grid; grid-template-rows: 148px auto; }
.st-col-plot { position: relative; height: 148px; }
.st-col-bar {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: 100%; max-width: 74px; height: var(--h); min-height: 3px;
  background: var(--st-ink); border-radius: 4px 4px 2px 2px;
}
.st-col-val {
  position: absolute; left: 0; right: 0; bottom: calc(var(--h) + 7px); text-align: center;
  font-size: .84rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
.st-col-lab { font-size: .76rem; color: var(--muted); text-align: center; line-height: 1.3; padding-top: 7px; border-top: 1px solid var(--border); width: 100%; }
.st-col-lab b { display: block; color: var(--text-2); font-weight: 600; font-size: .8rem; }

/* Small multiples */
.st-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 20px 22px; }
.st-sm-cell h4 { font-size: .78rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; line-height: 1.3; min-height: 2.1em; font-family: 'DM Sans', sans-serif; }
.st-sm-cell svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-sm-delta { font-size: .74rem; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.st-sm-delta b { color: var(--st-ink); font-weight: 700; }

/* --- Data table ----------------------------------------- */
.st-tablewrap { overflow-x: auto; margin: 18px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
table.st-table { width: 100%; border-collapse: collapse; font-size: .845rem; min-width: 470px; }
.st-table th, .st-table td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--border); }
.st-table thead th {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; background: var(--card-tint); position: sticky; top: 0;
}
.st-table td.num, .st-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.st-table tbody tr:last-child td { border-bottom: none; }
.st-table tbody tr:hover { background: var(--card-tint); }
.st-table td:first-child { color: var(--text-2); }

/* --- Callout -------------------------------------------- */
.st-note {
  background: var(--brand-light); border: 1px solid var(--border-md);
  border-radius: var(--radius-sm); padding: 17px 20px; margin: 20px 0;
}
.st-note p { font-size: .875rem; margin: 0; color: var(--text-2); line-height: 1.62; }
.st-note p + p { margin-top: 9px; }
.st-note b { color: var(--text); }
.st-note.warm { background: var(--accent-light); }

/* --- Limitations ---------------------------------------- */
.st-lim { display: grid; gap: 13px; margin: 18px 0 0; list-style: none; }
.st-lim li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px 18px; }
.st-lim b { display: block; font-size: .875rem; color: var(--text); margin-bottom: 4px; font-weight: 700; }
.st-lim span { font-size: .865rem; color: var(--text-2); line-height: 1.6; display: block; }

/* --- Refs ----------------------------------------------- */
ol.st-refs { list-style: none; counter-reset: ref; display: grid; gap: 11px; margin: 0; }
ol.st-refs li {
  counter-increment: ref; position: relative; padding-left: 34px;
  font-size: .855rem; line-height: 1.55; color: var(--text-2); max-width: 68ch;
}
ol.st-refs li::before {
  content: '[' counter(ref) ']'; position: absolute; left: 0; top: .1em;
  color: var(--st-ink); font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums;
}
ol.st-refs a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-md); }
ol.st-refs a:hover { color: var(--st-ink); }

/* --- Motion --------------------------------------------- */
.st-rise { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.st-rise.in { opacity: 1; transform: none; }
.st-bar-fill, .st-pb-fill, .st-col-bar { transform-origin: left center; }
.st-grow { transform: scaleX(0); transition: transform .85s cubic-bezier(.22,1,.36,1); }
.st-grow.in { transform: scaleX(1); }
.st-col-bar.st-grow { transform-origin: bottom center; transform: scaleY(0); }
.st-col-bar.st-grow.in { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .st-rise, .st-grow, .st-col-bar.st-grow { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Responsive ----------------------------------------- */
@media (max-width: 1000px) {
  .st-shell { grid-template-columns: 1fr; gap: 0; }
  .st-index { display: none; }
  .st-body { max-width: 720px; }
}
@media (max-width: 640px) {
  .st-scope-grid { grid-template-columns: 1fr; gap: 18px; }
  .st-bar-row { grid-template-columns: minmax(0,1fr) 54px; grid-template-areas: 'lab val' 'track track'; row-gap: 5px; }
  .st-bar-lab { grid-area: lab; } .st-bar-val { grid-area: val; } .st-bar-track { grid-area: track; }
  .st-cols { gap: 8px; height: 150px; }
  .st-col-lab { font-size: .7rem; }
  .st-fig { padding: 18px 15px 15px; }
  .st-byline { gap: 12px 20px; }
  .st-findings li { padding-left: 34px; }
}