@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');

:root{
  --paper:#f9f8f3;
  --ink:#283c34;
  --muted:#666d64;
  --line:#d9dcd2;
  --sage:#e6eade;
  --green:#2e493d;
  --rust:#a24e35;
  --serif:'Libre Caslon Display',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:25px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.65 var(--sans)}
a{
  color:inherit;
  text-decoration:none}
button,input{
  font:inherit}
button{
  cursor:pointer;
  color:inherit}
button,a,input{
  touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--rust);
  outline-offset:5px}
::selection{
  background:#d5ddbf}
h1,h2,h3,p{
  margin:0}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400}
h1{
  font-size:clamp(65px,7.2vw,110px);
  line-height:.99;
  letter-spacing:-3px}
h2{
  font-size:clamp(37px,3.6vw,57px);
  line-height:1.08;
  letter-spacing:-1px}
h3{
  font-size:32px;
  line-height:1.16}
em{
  font-weight:400;
  color:#748069}
button{
  border:0}
.skip{
  position:fixed;
  top:-80px;
  left:20px;
  z-index:10;
  background:var(--green);
  color:white;
  padding:12px}
.skip:focus{
  top:10px}
.edition{
  display:flex;
  justify-content:space-between;
  padding:9px 5%;
  background:var(--sage);
  font-size:9px;
  letter-spacing:1.6px}
header{
  margin:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:25px 0;
  border-bottom:1px solid var(--line)}
.wordmark{
  font:600 55px/.9 Georgia,serif;
  letter-spacing:-4px;
  white-space:nowrap}
.wordmark span{
  font:14px var(--sans);
  color:var(--rust);
  margin-left:5px;
  letter-spacing:0}
header nav{
  display:flex;
  gap:27px;
  font-size:12px}
.header-end{
  display:flex;
  align-items:center;
  gap:23px}
.languages{
  display:flex;
  gap:12px;
  font-size:11px}
.languages a{
  color:#72796f}
.languages [aria-current]{
  color:var(--ink);
  border-bottom:1px solid}
.header-cta{
  padding:12px 15px;
  background:var(--green);
  color:white;
  font-size:10px}
.hero{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  margin:45px 5% 35px;
  min-height:560px}
.eyebrow{
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:600;
  line-height:1.5}
.dot{
  display:inline-block;
  border-radius:50%;
  width:6px;
  height:6px;
  background:var(--rust);
  margin-right:10px;
  vertical-align:middle}
.hero-copy{
  padding:25px 7% 0 0;
  display:flex;
  flex-direction:column;
  align-items:start}
.hero-copy h1{
  margin:26px 0 23px}
.intro{
  max-width:355px;
  font-size:15px;
  color:var(--muted)}
.button{
  display:inline-flex;
  align-items:center;
  gap:35px;
  background:var(--green);
  color:white;
  padding:14px 21px;
  font-size:12px;
  margin-top:25px}
.button:hover,.header-cta:hover{
  background:#44624f}
.hero-number{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:36px;
  padding-bottom:20px}
.hero-number>span{
  font:40px var(--serif);
  color:#99a18e}
.hero-number p{
  font-size:8px;
  letter-spacing:1px;
  line-height:1.8}
.hero-visual{
  position:relative;
  min-height:560px;
  background:var(--sage)}
.photo{
  overflow:hidden;
  background-color:var(--sage)}
.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block}
.hero-visual>.photo{
  height:100%;
  position:absolute;
  inset:0}
.hero-visual img{
  object-position:57% center}
.hero-caption{
  position:absolute;
  bottom:30px;
  left:26px;
  right:26px;
  padding:25px 27px;
  background:#f9f8f3ed;
  backdrop-filter:blur(6px);
  max-width:370px}
.hero-caption .eyebrow{
  color:var(--rust);
  font-size:8px}
.hero-caption h2{
  font-size:34px;
  margin:12px 0;
  letter-spacing:-.4px}
.read{
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  font-weight:600}
.hero-caption .read{
  display:inline-flex;
  gap:20px}
.image-credit{
  position:absolute;
  right:8px;
  top:8px;
  font-size:8px;
  background:#f9f8f3d9;
  padding:3px 6px}
.trust-strip{
  display:flex;
  justify-content:center;
  gap:9%;
  margin:0 5%;
  border-block:1px solid var(--line);
  padding:17px 0;
  font-size:10px;
  letter-spacing:.3px}
.trust-strip i{
  font-style:normal;
  color:var(--rust);
  margin-right:12px}
.needs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  padding:52px 5%;
  background:#f0f1e9;
  margin-top:35px}
.needs h2{
  font-size:36px;
  margin-top:14px}
.need-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px}
.need-links a{
  padding:14px 0;
  border-bottom:1px solid #c8cfc0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:12px}
.need-links b{
  font-size:18px;
  font-weight:400}
.need-links a:hover{
  color:var(--rust)}
.journal{
  padding:70px 5%}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px}
.section-heading h2{
  margin-top:16px}
.search-box{
  min-width:270px}
.search-box label{
  font-size:10px;
  display:block;
  margin-bottom:6px}
.search-box input{
  background:transparent;
  border:0;
  border-bottom:1px solid #a4ae9f;
  border-radius:0;
  padding:10px 0;
  width:100%;
  font-size:11px;
  color:var(--ink)}
.journal-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  margin:32px 0 30px;
  padding-bottom:18px;
  gap:18px}
.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap}
.filters button{
  padding:8px 15px;
  border:1px solid var(--line);
  border-radius:25px;
  background:transparent;
  font-size:11px}
.filters button[aria-pressed=true]{
  background:var(--green);
  color:white;
  border-color:var(--green)}
#result-count{
  white-space:nowrap;
  font-size:10px;
  color:var(--muted)}
.guide-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:45px 27px}
.guide-card{
  display:flex;
  flex-direction:column;
  min-width:0}
.guide-card .photo{
  height:280px;
  transition:filter .2s}
.image-link:hover .photo{
  filter:brightness(.93)}
.panel-photo svg{
  display:block;
  width:100%;
  height:100%;
  overflow:hidden}
.card-meta{
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:1px;
  margin:18px 0 12px;
  gap:15px}
.card-meta>span:first-child{
  color:var(--rust)}
.guide-card h3 a:hover{
  color:var(--rust)}
.guide-card>p{
  font-size:12px;
  color:var(--muted);
  margin:13px 0 18px}
.guide-card>.read{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:13px}
.guide-card[hidden]{
  display:none}
#no-results{
  padding:30px 0;
  color:var(--muted)}
.small-step{
  margin:0 5%;
  padding:43px 4%;
  background:var(--green);
  color:var(--paper);
  display:flex;
  gap:35px;
  position:relative;
  overflow:hidden}
.small-step .eyebrow{
  color:#cad2bd}
.small-step h2{
  font-size:43px;
  margin:14px 0}
.small-step em{
  color:#d3dcbf}
.small-step p:not(.eyebrow){
  font-size:13px;
  max-width:560px;
  color:#e1e5d8}
.step-icon{
  border:1px solid #82967e;
  border-radius:50%;
  width:50px;
  height:50px;
  flex-shrink:0;
  text-align:center;
  font-size:28px}
.step-number{
  font:150px var(--serif);
  color:#7d927a66;
  margin-left:auto;
  align-self:center}
.button.light{
  background:#e6ebdc;
  color:var(--ink);
  margin-top:20px}
.together{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  padding:75px 5%;
  align-items:center}
.together>.photo{
  height:460px;
  background-position:100% 17%}
.together h2{
  margin:20px 0;
  font-size:49px}
.together>div>p:not(.eyebrow){
  font-size:14px;
  color:var(--muted);
  max-width:420px}
.text-link{
  display:inline-block;
  border-bottom:1px solid var(--ink);
  font-size:12px;
  padding-bottom:8px;
  margin-top:25px}
.together .photo-note,.photo-note{
  font-size:9px!important;
  color:var(--muted);
  margin-top:15px}
.approach{
  margin:0 5%;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:10%;
  padding:45px 0 55px}
.approach h2{
  font-size:43px;
  margin-top:17px}
.approach>div>p{
  font-size:14px;
  max-width:550px}
.approach details{
  margin-top:23px;
  font-size:12px}
.approach summary{
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:5px}
.approach details p{
  margin-top:15px;
  color:var(--muted)}
footer{
  padding:43px 5% 25px;
  background:#e7ebe0}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px}
.footer-top .wordmark{
  font-size:51px}
.footer-top p{
  font-size:12px;
  margin-top:18px}
.footer-top>a{
  font-size:11px}
.footer-bottom{
  margin-top:35px;
  padding-top:20px;
  border-top:1px solid #c7cfc0;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:35px;
  font-size:9px;
  color:#596450}
.article-page{
  padding:35px 5% 60px}
.back{
  font-size:11px}
.article-heading{
  max-width:860px;
  margin:40px auto;
  text-align:center}
.article-heading h1{
  font-size:clamp(48px,5.5vw,80px);
  letter-spacing:-1.7px;
  line-height:1.04;
  margin:20px 0}
.deck{
  font-size:17px;
  max-width:680px;
  margin:auto;
  color:var(--muted)}
.byline{
  font-size:10px;
  margin-top:23px;
  color:var(--muted)}
.article-layout{
  display:grid;
  grid-template-columns:230px minmax(0,760px);
  gap:6%;
  justify-content:center}
.article-layout aside{
  padding-top:15px;
  align-self:start;
  position:sticky;
  top:25px}
.article-layout aside nav{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:20px 0;
  font-size:12px}
.article-layout aside nav a:hover{
  text-decoration:underline}
.print-button{
  padding:10px 13px;
  background:var(--sage);
  font-size:11px}
.article-content>.photo{
  height:390px}
.article-content>.hero-photo img{
  object-position:center 42%}
.article-content>.panel-photo{
  background-position:var(--position) 14%}
.takeaway{
  padding:24px 30px;
  background:var(--sage);
  margin:27px 0 35px}
.takeaway .eyebrow{
  color:var(--rust);
  font-size:9px}
.takeaway p{
  font:27px/1.25 var(--serif);
  margin-top:10px}
.article-content section{
  margin-bottom:32px}
.article-content section h2{
  font-size:36px;
  letter-spacing:-.4px;
  margin-bottom:15px}
.article-content section p,.article-content li{
  font-size:15px;
  line-height:1.9;
  margin-bottom:16px}
.article-content ol{
  padding-left:22px}
.article-content .sources{
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-top:40px}
.sources h2{
  font-size:28px!important}
.sources p,.sources li{
  font-size:12px!important}
.sources a{
  text-decoration:underline;
  text-underline-offset:3px}
.sources ul{
  padding-left:20px}
.clinical-note{
  color:var(--muted)}
.related{
  border-top:1px solid var(--line);
  padding-top:30px;
  margin-top:45px}
.related-links{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:20px}
.related-links a{
  padding:15px;
  border:1px solid var(--line);
  font-size:12px;
  flex:1;
  min-width:170px}
@media(min-width:1600px){
  body{
  max-width:1600px;
  margin:auto;
  border-inline:1px solid var(--line)}
}
@media(max-width:1100px){
  header nav{
  gap:16px}
.header-cta{
  display:none}
.hero{
  min-height:520px}
.hero-visual{
  min-height:520px}
.hero h1{
  font-size:80px}
.guide-card .photo{
  height:230px}
.together h2{
  font-size:40px}
.step-number{
  display:none}
.article-layout{
  grid-template-columns:180px minmax(0,1fr)}
}
@media(max-width:760px){
  .edition{
  font-size:7px;
  letter-spacing:1px}
header{
  flex-wrap:wrap;
  padding:20px 0;
  gap:20px}
.wordmark{
  font-size:46px}
header nav{
  order:3;
  width:100%;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:15px;
  font-size:11px}
.hero{
  grid-template-columns:1fr;
  margin-top:24px}
.hero-copy{
  padding:10px 0 25px}
.hero-copy h1{
  font-size:75px;
  margin:23px 0}
.hero .eyebrow{
  font-size:8px}
.hero-copy .intro{
  max-width:450px}
.hero-number{
  display:none}
.hero-visual{
  min-height:500px}
.hero-caption{
  left:18px;
  bottom:20px;
  right:18px;
  max-width:340px;
  padding:20px}
.hero-caption h2{
  font-size:34px}
.trust-strip{
  gap:15px;
  justify-content:space-between;
  font-size:8px}
.trust-strip i{
  display:block;
  margin:0 0 4px;
  font-size:16px}
.needs{
  grid-template-columns:1fr;
  gap:22px;
  margin-top:25px;
  padding-block:35px}
.needs h2{
  font-size:33px}
.need-links{
  gap:0 20px}
.need-links a{
  font-size:11px}
.journal{
  padding-block:45px}
.section-heading{
  flex-direction:column;
  align-items:stretch;
  gap:25px}
.section-heading h2{
  font-size:41px}
.search-box{
  min-width:0}
.journal-controls{
  align-items:start;
  margin-top:25px}
.filters{
  gap:7px}
.filters button{
  font-size:10px;
  padding:7px 11px}
#result-count{
  padding-top:8px;
  font-size:9px}
.guide-grid{
  grid-template-columns:1fr 1fr;
  gap:35px 18px}
.guide-card h3{
  font-size:28px}
.guide-card .photo{
  height:245px}
.card-meta{
  font-size:7px;
  letter-spacing:.4px;
  flex-wrap:wrap;
  gap:5px}
.guide-card>p{
  font-size:11px}
.small-step{
  padding:30px 25px;
  gap:15px}
.small-step h2{
  font-size:34px}
.step-icon{
  display:none}
.together{
  grid-template-columns:1fr;
  padding-block:45px;
  gap:30px}
.together>.photo{
  height:400px;
  background-position:100% 15%}
.together h2{
  font-size:40px}
.approach{
  grid-template-columns:1fr;
  gap:25px}
.approach h2{
  font-size:37px}
.footer-top{
  flex-wrap:wrap;
  align-items:start}
.footer-top>div{
  width:100%}
.footer-bottom{
  grid-template-columns:1fr;
  gap:15px}
.article-heading{
  margin:30px 0}
.article-heading h1{
  font-size:49px}
.deck{
  font-size:15px}
.article-layout{
  display:flex;
  flex-direction:column;
  gap:22px}
.article-layout aside{
  position:static;
  padding:15px;
  background:#f0f1e9;
  width:100%}
.article-layout aside nav{
  gap:8px;
  font-size:11px;
  margin:12px 0}
.article-content>.photo{
  height:330px}
.article-content section h2{
  font-size:33px}
.takeaway{
  padding:20px}
.article-content section p,.article-content li{
  font-size:14px}
}
@media(max-width:450px){
  .guide-grid{
  grid-template-columns:1fr}
.guide-card .photo{
  height:330px}
.guide-card h3{
  font-size:34px}
.guide-card>p{
  font-size:13px}
.card-meta{
  font-size:9px}
.hero-visual{
  min-height:460px}
.hero h1{
  font-size:70px}
.hero-caption h2{
  font-size:30px}
.eyebrow{
  font-size:9px}
.guide-card>.read{
  font-size:12px}
.article-content>.panel-photo{
  background-position:var(--position) 15%}
}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*{
  transition:none!important}
}
@media print{
  header,.edition,footer,.article-layout aside,.related,.back,.photo,.photo-note,.skip{
  display:none!important}
body{
  background:white;
  color:black}
.article-page{
  padding:0}
.article-layout{
  display:block}
.article-heading{
  margin:10px 0;
  text-align:left}
.article-heading h1{
  font-size:32px}
.deck{
  font-size:13px;
  margin:0}
.article-content section h2{
  font-size:22px}
.article-content section p,.article-content li{
  font-size:11px;
  line-height:1.5}
.takeaway{
  background:none;
  border:1px solid #aaa;
  padding:12px}
.takeaway p{
  font-size:20px}
a{
  text-decoration:underline}
.article-content section{
  break-inside:avoid}
}


/* Layout audit: narrow panels, fallback fonts, and isolated photographic frames. */
@media screen {

  .hero-copy,.hero-visual,.section-heading>div,.needs>div,.together>div,.approach>div,.article-content {
  min-width:0}

  .hero-copy h1 {
  font-size:clamp(48px,6.6vw,100px);
  overflow-wrap:normal}

  h2,h3,.deck,.sources a {
  overflow-wrap:anywhere}

  .header-end,.languages {
  flex-shrink:0}

  .languages a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  min-height:40px}

  .filters button,.print-button {
  min-height:44px}

  .filters button {
  padding-inline:16px}

  .search-box {
  max-width:100%;
  min-width:0;
  flex:0 1 300px}

  .search-box input {
  min-height:44px;
  font-size:14px}

  .card-meta {
  font-size:10px;
  letter-spacing:.5px;
  flex-wrap:wrap;
  gap:6px}

  .guide-card>p {
  font-size:14px}

  .article-content>.panel-photo {
  height:auto;
  width:min(100%,440px);
  aspect-ratio:4/5;
  margin-inline:auto}

  .article-content>.panel-photo svg {
  height:100%;
  position:absolute;
  inset:0}

  .article-content>.panel-photo {
  position:relative}

  .together>.panel-photo {
  height:auto;
  aspect-ratio:4/5;
  max-width:520px;
  width:100%}

  .together>.panel-photo svg {
  aspect-ratio:4/5}

}

@media screen and (max-width:1050px) {

  .guide-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}

}

@media screen and (max-width:900px) {

  .hero {
  grid-template-columns:1fr;
  gap:25px}

  .hero-copy {
  padding:10px 0 0}

  .hero-copy h1 {
  font-size:clamp(48px,10vw,80px)}

  .hero-number {
  display:none}

  .hero-visual {
  min-height:0;
  display:flex;
  flex-direction:column}

  .hero-visual>.photo {
  position:relative;
  inset:auto;
  height:auto;
  aspect-ratio:3/2}

  .hero-visual>.photo img {
  height:100%;
  position:absolute;
  inset:0;
  object-position:57% 35%}

  .hero-caption {
  position:static;
  max-width:none;
  background:#edf0e5;
  padding:23px 26px}

  .hero-caption h2 {
  font-size:clamp(28px,4.5vw,36px)}

  .hero-caption h2 br {
  display:none}

  .hero-caption .read {
  min-height:30px;
  align-items:center}

  .section-heading {
  align-items:stretch;
  flex-direction:column}

  .search-box {
  flex:auto;
  width:100%;
  max-width:420px}

}

@media screen and (max-width:600px) {

  .guide-grid {
  grid-template-columns:1fr}

  .guide-card .photo {
  height:330px}

  .guide-card h3 {
  font-size:34px}

  .hero-copy h1 {
  font-size:clamp(44px,13.5vw,72px);
  letter-spacing:-2px}

  .edition {
  gap:12px;
  flex-wrap:wrap}

  header nav {
  gap:10px;
  flex-wrap:wrap}

  .journal-controls {
  flex-direction:column;
  gap:10px}

  .filters {
  width:100%}

  .trust-strip {
  gap:12px}

  .trust-strip>span {
  flex:1;
  min-width:0}

  .need-links {
  grid-template-columns:1fr}

  .article-heading h1 {
  font-size:clamp(36px,10vw,49px);
  overflow-wrap:anywhere}

  .small-step h2 {
  font-size:clamp(28px,8vw,34px)}

}