/* ═══════════════════════════════════════════════════════════════
   RELIEFR — long-form research pages
   Loaded on top of reliefr.css by /science, /humor-at-work, /stress.
   The home page never downloads this.
   ═══════════════════════════════════════════════════════════════ */

/* Shorter hero for interior pages */
.page-hero{
  position:relative; min-height:78svh; display:grid; align-items:center;
  padding:150px var(--gut) 90px; overflow:hidden;
}
.page-hero .inner{ position:relative; z-index:2; max-width:920px; margin:0 auto; width:100%; text-align:center }
.page-hero h1{ font-size:clamp(38px,6.6vw,100px) }
.page-hero .sub{
  font-size:clamp(17px,1.8vw,22px); color:#B6B4C0; max-width:48ch;
  margin:28px auto 0; line-height:1.55;
}

.crumb{
  position:relative; z-index:3; display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:500; color:var(--mute); margin-bottom:30px;
  transition:color .25s, gap .25s var(--ease);
}
.crumb:hover{ color:var(--white); gap:14px }

/* Article column */
.prose{ max-width:70ch; margin:0 auto }
.prose p{ font-size:clamp(16.5px,1.45vw,19px); line-height:1.72; color:#B6B4C0; margin-bottom:1.15em }
.prose p:last-child{ margin-bottom:0 }
.prose b,.prose strong{ color:var(--white); font-weight:600 }
.prose em{ color:#D6D3DC }
.prose h3{ margin:1.9em 0 .7em }
.prose ul{ list-style:none; margin:0 0 1.3em }
.prose ul li{
  position:relative; padding-left:26px; margin-bottom:.62em;
  font-size:clamp(16px,1.4vw,18px); line-height:1.68; color:#B6B4C0;
}
.prose ul li::before{
  content:''; position:absolute; left:2px; top:.66em; width:7px; height:7px; border-radius:50%;
  background:var(--warm-1); opacity:.75;
}
.prose a:not(.pill){ color:var(--warm-1); border-bottom:1px solid rgba(255,196,107,.32); transition:border-color .25s }
.prose a:not(.pill):hover{ border-bottom-color:var(--warm-1) }

/* Section eyebrow: Part 3 / The nuanced part */
.part{
  display:flex; align-items:center; gap:16px; margin-bottom:22px;
  font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.part::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(244,242,238,.16),transparent) }

/* Footnote superscripts */
sup.fn{ font-size:.62em; vertical-align:super; line-height:0 }
sup.fn a{
  color:var(--warm-1); padding:0 1px; font-weight:600;
  border-bottom:0 !important; transition:opacity .2s;
}
sup.fn a:hover{ opacity:.7 }

/* Pull quote */
.pull{ position:relative; margin:clamp(46px,7vh,80px) auto; max-width:24ch; text-align:center }
.pull p{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(25px,3.7vw,46px); line-height:1.24; letter-spacing:-.02em; color:var(--white);
}
.pull cite{
  display:block; margin-top:22px; font-family:var(--sans); font-style:normal;
  font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--faint);
}
.pull.wide{ max-width:32ch }

/* Callout boxes */
.callout{
  border-radius:24px; padding:clamp(26px,3.4vw,40px); margin:clamp(34px,5vh,56px) 0;
  background:rgba(244,242,238,.035); border:1px solid rgba(244,242,238,.09);
}
.callout h4{
  font-size:15px; font-weight:600; letter-spacing:.04em; margin-bottom:14px; color:var(--white);
  display:flex; align-items:center; gap:11px;
}
.callout h4::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--mute); flex:none }
.callout p{ font-size:16px; line-height:1.68; color:var(--mute); margin-bottom:.9em }
.callout p:last-child{ margin-bottom:0 }
.callout.warm{ background:linear-gradient(150deg,rgba(255,196,107,.09),rgba(255,111,94,.03)); border-color:rgba(255,196,107,.22) }
.callout.warm h4{ color:var(--warm-1) }
.callout.warm h4::before{ background:var(--warm-1); box-shadow:0 0 12px var(--warm-1) }
.callout.cool{ background:linear-gradient(150deg,rgba(95,212,232,.08),rgba(59,111,212,.03)); border-color:rgba(95,212,232,.2) }
.callout.cool h4{ color:var(--cool-1) }
.callout.cool h4::before{ background:var(--cool-1); box-shadow:0 0 12px var(--cool-1) }
.callout.caveat{ border-style:dashed; border-color:rgba(244,242,238,.16) }
.callout.caveat h4{ color:var(--mute) }

/* Data table */
.dtable-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:clamp(28px,4vh,44px) 0 }
.dtable{ width:100%; border-collapse:collapse; font-size:15.5px; min-width:460px }
.dtable th{
  text-align:left; padding:14px 16px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  border-bottom:1px solid rgba(244,242,238,.14); white-space:nowrap;
}
.dtable td{ padding:15px 16px; border-bottom:1px solid rgba(244,242,238,.07); color:var(--mute); vertical-align:top }
.dtable td b{ color:var(--white); font-weight:600 }
.dtable tr:last-child td{ border-bottom:0 }
.dtable td.num{ font-variant-numeric:tabular-nums; white-space:nowrap }
.dtable .good{ color:var(--warm-1); font-weight:600 }
.dtable .bad{ color:var(--cool-1); font-weight:600 }

/* Stat chips row */
.chips{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,32px) }
@media (max-width:900px){ .chips{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){ .chips{ grid-template-columns:1fr } }
.chip-stat{ text-align:center }
.chip-stat .v{
  font-size:clamp(28px,3.7vw,48px); font-weight:700; letter-spacing:-.04em; line-height:1.05;
  margin-bottom:12px; font-variant-numeric:tabular-nums;
}
.chip-stat p{ font-size:14.5px; line-height:1.55; color:var(--mute); margin-bottom:9px }
.chip-stat cite{ font-size:12px; color:var(--faint); font-style:normal }

/* Figure wrapper for interactive charts */
.figure{
  border-radius:28px; overflow:hidden; margin:clamp(34px,5vh,56px) 0;
  background:rgba(244,242,238,.035); border:1px solid rgba(244,242,238,.09);
}
.figure figcaption{
  padding:16px 24px; border-top:1px solid rgba(244,242,238,.07);
  font-size:13.5px; line-height:1.6; color:var(--faint);
}

/* References */
.refs{ counter-reset:ref; list-style:none; max-width:78ch; margin:0 auto }
.refs li{
  counter-increment:ref; position:relative; padding:16px 0 16px 46px;
  border-bottom:1px solid rgba(244,242,238,.07);
  font-size:14.5px; line-height:1.62; color:var(--mute);
  scroll-margin-top:110px;
}
.refs li::before{
  content:counter(ref); position:absolute; left:0; top:16px;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:600; color:var(--warm-1);
  background:rgba(255,196,107,.1); border:1px solid rgba(255,196,107,.24);
}
.refs li b{ color:var(--white); font-weight:600 }
.refs li a{ color:var(--faint); border-bottom:1px solid rgba(244,242,238,.14); transition:color .25s }
.refs li a:hover{ color:var(--warm-1) }
.refs li:target::before{ background:var(--warm-1); color:#17110A }
.refs li .flagged{ color:var(--cool-1); font-weight:600 }

/* Read-next cards */
.next{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; margin-top:clamp(34px,5vh,52px) }
.next a{
  position:relative; display:block; border-radius:24px; padding:30px 30px 34px; overflow:hidden;
  background:rgba(244,242,238,.035); border:1px solid rgba(244,242,238,.09);
  transition:transform .5s var(--ease), background .5s, border-color .5s;
}
.next a:hover{ transform:translateY(-4px); background:rgba(244,242,238,.06); border-color:rgba(255,196,107,.28) }
.next a .k{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:14px }
.next a h4{ font-size:21px; font-weight:600; letter-spacing:-.02em; margin-bottom:10px }
.next a p{ font-size:14.5px; line-height:1.6; color:var(--mute) }
.next a .go{ display:inline-block; margin-top:18px; font-size:13.5px; font-weight:600; color:var(--warm-1) }

/* Sub-nav across the three research pages */
.subnav{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  padding:4px; border-radius:999px; background:rgba(244,242,238,.05);
  width:fit-content; margin:0 auto clamp(40px,6vh,70px);
}
.subnav a{
  padding:10px 20px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--mute);
  transition:background .35s var(--ease), color .35s;
}
.subnav a:hover{ color:var(--white) }
.subnav a[aria-current="page"]{ background:rgba(244,242,238,.94); color:#111; font-weight:600 }

/* Reading-progress hairline under the nav */
.readbar{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:520;
  background:linear-gradient(90deg,var(--cool-1),var(--warm-1));
  transition:width .1s linear;
}