/* A quiet reading page. Reuses the site's navigation, typefaces and links. */
.approach-page{
  --approach-paper:#f7f5f0;
  --approach-text:#302c35;
  --approach-muted:#615d65;
  --approach-line:#dedbd6;
  color:var(--approach-text);
  background:var(--approach-paper);
}
.approach-page h1,.approach-page h2,.approach-page h3{font-family:var(--font-body);font-weight:750;letter-spacing:-.035em}
.approach-page .wrap{max-width:1160px}
.approach-page p{text-wrap:pretty}
.approach-label{font-size:.8rem;font-weight:700;letter-spacing:.015em;color:#615666;margin-bottom:1rem}
.approach-hero{padding:1.6rem 0 3.8rem}
.approach-hero .breadcrumb{font-size:.78rem;margin-bottom:2.2rem;color:var(--approach-muted)}
.approach-hero .breadcrumb a{color:var(--approach-muted)}
.approach-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.approach-intro h1{font-size:clamp(2.3rem,3.5vw,3.15rem);line-height:1.16;max-width:19ch;margin:0 0 1.5rem;text-wrap:balance;color:#302438}
.approach-intro>p:not(.approach-label){max-width:44ch;font-size:1.03rem;line-height:1.8;color:var(--approach-muted)}
.approach-intro>p+p{margin-top:.7rem}
.approach-link{display:inline-flex;align-items:center;gap:1.1rem;min-height:44px;color:#533c68;font-size:.92rem;font-weight:750;text-decoration:underline;text-decoration-color:#b6a8bd;text-underline-offset:5px;text-decoration-thickness:1px}
.approach-link:hover{text-decoration-color:currentColor;color:#302438}
.approach-intro .approach-link{margin-top:1.2rem}
.approach-photo{margin:0;min-width:0}
.approach-photo img{width:100%;height:auto;aspect-ratio:75/56;border-radius:8px;background:#e5dfd2}
.approach-photo figcaption{font-size:.72rem;line-height:1.6;color:var(--approach-muted);margin-top:.7rem}
.approach-story{padding:3.25rem 0;border-top:1px solid var(--approach-line)}
.approach-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:4rem}
.approach-story h2{font-size:clamp(1.6rem,2.3vw,2.15rem);line-height:1.25;max-width:18ch}
.approach-prose{max-width:62ch;font-size:1.02rem;line-height:1.85;color:var(--approach-muted)}
.approach-prose p+p{margin-top:.8rem}
.approach-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:3rem;background:#ebece4;padding:2rem 2.2rem;border-radius:8px;border-left:3px solid #849270}
.approach-example .approach-label{color:#526343;margin-bottom:.65rem}
.approach-example h2{font-size:1.6rem;line-height:1.25;color:#34442e}
.approach-example-copy{font-size:.96rem;line-height:1.8;color:#50594b}
.approach-example-copy p+p{margin-top:.5rem}
.approach-example-copy strong{font-weight:750;color:#34442e}
.approach-resources{padding:3.5rem 0 3rem}
.approach-resources-heading{margin-bottom:1.4rem}
.approach-resources h2{font-size:1.55rem;line-height:1.3}
.approach-resources-heading p{font-size:.92rem;color:var(--approach-muted);margin-top:.4rem}
.approach-resource-link,.approach-sources summary{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.15rem 0;min-height:64px;color:var(--approach-text);font-size:.98rem;font-weight:650;line-height:1.5;text-decoration:none;border-top:1px solid var(--approach-line)}
.approach-resource-link>span:last-child,.approach-expand{color:#655670;font-size:1.3rem;flex:none}
.approach-resource-link:hover,.approach-sources summary:hover{color:#6a437c}
.approach-sources{border-bottom:1px solid var(--approach-line)}
.approach-sources summary{cursor:pointer;list-style:none}
.approach-sources summary::-webkit-details-marker{display:none}
.approach-expand{font-weight:400;transition:transform .2s}
.approach-sources[open] .approach-expand{transform:rotate(45deg)}
.approach-sources-body{padding:.25rem 0 1.2rem}
.approach-sources-body>p{font-size:.87rem;line-height:1.8;color:var(--approach-muted);max-width:75ch;margin-bottom:1.25rem}
.q-reference-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 3rem;list-style:none;margin:0;padding:0}
.q-reference{display:flex;align-items:center;justify-content:space-between;gap:.8rem;border-top:1px solid #e5e1dc;padding:.4rem 0;min-width:0}
.q-reference>span{font-size:.88rem;font-weight:650;color:#514b56}
.q-reference>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.15rem .7rem;max-width:55%}
.q-verse{display:inline-flex;align-items:center;justify-content:flex-end;gap:.4rem;min-height:44px;color:#64516f;font-size:.86rem;white-space:nowrap;text-underline-offset:4px;text-decoration-color:#c4b8cc}
.q-verse:hover{text-decoration-color:currentColor}
.q-verse span{font-size:.75rem}
.approach-next{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;margin-top:2rem;font-size:.94rem;color:var(--approach-muted)}
.approach-footer{padding:2.2rem 0 1.3rem}
.approach-footer-top{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:1.5rem}
.approach-footer .foot-brand{display:block;width:90px;margin:0}
.approach-footer-top p{font-size:.9rem;color:var(--on-dark-soft)}
.approach-footer nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem}
.approach-footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-soft);text-decoration:none;font-size:.85rem}
.approach-footer nav a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.approach-footer .foot-bottom{margin-top:1.4rem;padding-top:1rem}
@media(max-width:1000px){
  .approach-hero-grid{gap:2rem}
  .approach-intro h1{font-size:2.55rem}
  .approach-story-grid{gap:2rem;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .approach-example{gap:2rem;padding:1.6rem;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
}
@media(max-width:760px){
  .approach-footer{padding:1.8rem 0 calc(6.5rem + env(safe-area-inset-bottom))}
  .approach-footer-top{grid-template-columns:80px 1fr;gap:.5rem 1rem}
  .approach-footer .foot-brand{width:80px}
  .approach-footer-top p{font-size:.85rem}
  .approach-footer-top nav{grid-column:1/-1}
  .approach-footer nav{gap:.25rem 1.3rem}
  .approach-footer nav a{font-size:.82rem}
  .approach-footer .foot-bottom{align-items:flex-start;gap:.35rem;margin-top:1rem;text-align:left}
}
@media(max-width:720px){
  .approach-hero{padding:1.1rem 0 2rem}
  .approach-hero .breadcrumb{margin-bottom:1.2rem}
  .approach-hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .approach-label{font-size:.76rem;margin-bottom:.75rem}
  .approach-intro h1{font-size:clamp(2.15rem,7.8vw,3rem);line-height:1.16;margin-bottom:1rem;max-width:17ch}
  .approach-intro>p:not(.approach-label){font-size:.98rem;line-height:1.75;max-width:60ch}
  .approach-intro .approach-link{margin-top:.8rem}
  .approach-photo figcaption{font-size:.72rem;max-width:44ch}
  .approach-story{padding:2.2rem 0}
  .approach-story-grid{grid-template-columns:1fr;gap:1rem}
  .approach-story h2{font-size:1.65rem;max-width:22ch}
  .approach-prose{font-size:.97rem;line-height:1.8}
  .approach-example{grid-template-columns:1fr;gap:1rem;padding:1.5rem 1.25rem}
  .approach-example h2{font-size:1.5rem}
  .approach-example-copy{font-size:.95rem}
  .approach-resources{padding:2.5rem 0 2rem}
  .approach-resource-link,.approach-sources summary{font-size:.92rem;min-height:64px;padding:1rem 0}
  .q-reference-list{grid-template-columns:1fr}
  .q-reference{align-items:flex-start}
  .q-reference>span{padding-top:.7rem;font-size:.83rem}
  .q-verse{font-size:.8rem}
  .approach-next{margin-top:1.6rem;display:block}
  .approach-next>.approach-link{display:flex;justify-content:space-between;margin-top:.3rem}
}
@media(prefers-reduced-motion:reduce){.approach-expand{transition:none}}
@media print{
  .nav,.sticky-cta,.site-footer,.approach-next{display:none!important}
  .approach-page{background:white}
  .approach-hero-grid,.approach-story-grid{display:block}
  .approach-photo{max-width:400px;margin-block:1.5rem}
  .approach-example{break-inside:avoid}
  .approach-sources::details-content{display:block}
}