@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root{
  --paper:#F6F4EF;
  --ink:#242526;
  --muted:#686A68;
  --rule:#D9D8D3;
  --accent:#315F61;
  --max:1180px;
  --read:700px;
  --side:210px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4", Georgia, serif;
  font-size:19px;
  line-height:1.67;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
.site-shell{max-width:var(--max);margin:0 auto;padding:0 34px}
.site-header{
  position:sticky; top:0; z-index:10;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(36,37,38,.08);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:22px 34px 19px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  font-family:"Source Sans 3", Arial, sans-serif;
}
.brand-block{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:max-content}
.brand{
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:600;font-size:36px;line-height:1.02;letter-spacing:-.026em;
  white-space:nowrap;color:var(--ink)
}
.brand-affiliation{
  display:flex;align-items:center;gap:7px;
  font-family:"Source Sans 3",Arial,sans-serif;
  font-size:15.5px;line-height:1.2;font-weight:500;color:#505351;white-space:nowrap
}
.brand-affiliation a{color:#505351;transition:color .18s ease}
.brand-affiliation a:hover{color:var(--accent)}
.brand-separator{color:#9A9B98}
.nav{display:flex;gap:29px;align-items:center;font-size:15.5px}
.nav a{position:relative;padding-bottom:4px}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink)
}
.menu-toggle{display:none;font-family:"Source Sans 3",Arial,sans-serif}
main{padding-bottom:80px}
.reading-grid{
  max-width:var(--max); margin:0 auto; padding:0 34px;
  display:grid; grid-template-columns:minmax(0,var(--read)) minmax(160px,var(--side));
  column-gap:88px; justify-content:center;
}
.prose{grid-column:1}
.side-note{grid-column:2;font-family:"Source Sans 3",Arial,sans-serif;font-size:14px;line-height:1.55;color:var(--muted)}
.hero{padding-top:105px}
h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;margin:0;color:var(--ink);font-weight:400}
h1{font-size:clamp(44px,5vw,62px);line-height:1.08;letter-spacing:-.02em;margin-bottom:54px}
h2{font-size:31px;line-height:1.2;margin:0 0 33px}
h3{font-size:24px;line-height:1.25;margin:0 0 24px}
.kicker{
  font-family:"Source Sans 3",Arial,sans-serif;
  font-size:14px;color:var(--muted);margin-top:-37px;margin-bottom:60px
}
.lead{font-size:25px;line-height:1.45;font-weight:600;margin:0 0 17px}
p{margin:0 0 24px}
strong{font-weight:600}
.statement{
  margin:56px 0 8px;
  padding:0 0 0 34px;
  border-left:2px solid var(--accent);
  font-size:25px;line-height:1.48;font-weight:600
}
.section{padding-top:128px}
.section-rule::before{
  content:"";display:block;width:92px;height:1px;background:var(--rule);margin:0 0 92px
}
.steps p{margin-bottom:18px}
.compact-sequence{margin:2px 0 24px}
.compact-sequence p{margin:0 0 6px}
.text-link{
  display:inline-block;margin-top:27px;
  font-family:"Source Sans 3",Arial,sans-serif;
  font-size:16px;font-weight:600;color:var(--ink)
}
.text-link .arrow{display:inline-block;transition:transform .18s ease}
.text-link:hover .arrow{transform:translateX(4px)}
.pull{
  margin:46px 0 48px;padding-left:34px;border-left:2px solid var(--accent);
  font-size:25px;line-height:1.5;font-weight:600
}
.closing{padding-top:148px}
.closing-lines{margin:38px 0 43px}
.closing-lines p{margin:0 0 17px}
.closing-title{font-size:34px;line-height:1.2;margin-top:52px}
.postscript{
  margin-top:185px;padding-top:42px;border-top:1px solid var(--rule);
  font-family:"Source Sans 3",Arial,sans-serif;color:var(--muted)
}
.postscript a{font-size:18px;color:var(--ink);font-weight:600}
.page-title{padding-top:105px}
.subtitle{font-family:"Source Sans 3",Arial,sans-serif;font-size:21px;color:var(--muted);margin-top:-38px;margin-bottom:78px}
.opening-line{font-size:24px;line-height:1.45;margin-bottom:28px}
.water-section{padding-top:92px}
.question{
  margin:50px 0 30px;padding-left:34px;border-left:2px solid var(--accent);
  font-size:26px;line-height:1.5;font-weight:600
}
.transition{
  max-width:var(--max);margin:105px auto 0;padding:0 34px 68px;
  display:flex;justify-content:flex-end
}
.transition a{
  font-family:"Source Sans 3",Arial,sans-serif;font-size:16px;font-weight:600
}
.site-footer{
  border-top:1px solid var(--rule);margin-top:28px;padding:44px 0 48px;
  font-family:"Source Sans 3",Arial,sans-serif;font-size:14px;color:var(--muted)
}
.footer-inner{max-width:var(--max);margin:0 auto;padding:0 34px;display:grid;grid-template-columns:1fr 1fr;gap:20px 70px}
.footer-links{display:flex;gap:23px;flex-wrap:wrap}
.footer-group{grid-column:1/-1;padding-top:12px}
.footer-group a{color:var(--ink)}
.copy{text-align:right}
.smallcaps{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
em{font-style:italic}

@media (max-width: 930px){
  body{font-size:18px}
  .header-inner{padding:17px 24px 15px;gap:20px}
  .brand-block{gap:5px}
  .brand{font-size:29px}
  .brand-affiliation{font-size:14.5px;gap:6px}
  .nav{display:none}
  .menu-toggle{display:block}
  details.menu{display:block}
  .reading-grid{display:block;padding:0 26px;max-width:760px}
  .side-note{display:none}
  .hero,.page-title{padding-top:76px}
  h1{margin-bottom:43px}
  .section{padding-top:92px}
  .section-rule::before{margin-bottom:67px}
  .closing{padding-top:108px}
  .postscript{margin-top:125px}
  .transition{padding:0 26px 58px;margin-top:80px}
  .footer-inner{padding:0 26px;grid-template-columns:1fr}
  .copy{text-align:left}
}
@media (min-width:931px){
  details.menu{display:none}
}
details.menu{
  position:relative;font-family:"Source Sans 3",Arial,sans-serif
}
details.menu summary{list-style:none;cursor:pointer;font-size:15px}
details.menu summary::-webkit-details-marker{display:none}
.mobile-panel{
  position:absolute;right:0;top:35px;min-width:250px;padding:20px 23px;
  background:var(--paper);border:1px solid var(--rule);box-shadow:0 15px 40px rgba(0,0,0,.08)
}
.mobile-panel a{display:block;padding:8px 0}
.mobile-panel hr{border:0;border-top:1px solid var(--rule);margin:12px 0}


/* Full-site additions */
.prose .section-intro{font-size:21px;line-height:1.55}
.person-name{font-weight:600}
.quiet-strong{font-weight:600}
.ethical-emphasis{font-weight:600}
.short-stack{margin:28px 0 31px}
.short-stack p{margin:0 0 9px}
.soft-divider{width:92px;height:1px;background:var(--rule);margin:76px 0 0}
.epigraph{
  margin:5px 0 86px;
  padding:0;
}
.epigraph blockquote{
  margin:0 0 28px;
  font-size:18px;
  line-height:1.7;
  font-style:italic;
}
.epigraph .source{
  font-family:"Source Sans 3",Arial,sans-serif;
  color:var(--muted);
  font-size:13px;
  font-style:normal;
}

.epigraph .epigraph-translation{
  margin:30px 0 10px;
  font-size:16.5px;
  line-height:1.72;
  font-style:normal;
  color:#4F5150;
}
.epigraph .translation-note{
  font-family:"Source Sans 3",Arial,sans-serif;
  color:var(--muted);
  font-size:12px;
}
.marginalia .marginal-lead{
  display:block;
  margin-bottom:5px;
  font-style:normal;
}
.translation-placeholder{
  margin-top:22px;
  font-family:"Source Sans 3",Arial,sans-serif;
  color:var(--muted);
  font-size:13px;
}
.margin-piece{padding-top:102px}
.margin-piece:first-of-type{padding-top:20px}
.marginal-anchor{position:relative}
.marginalia{
  position:absolute;
  left:calc(100% + 88px);
  top:2px;
  width:210px;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:14.5px;
  line-height:1.55;
  color:#5E605F;
  border-top:1px solid var(--rule);
  padding-top:16px;
}

.marginalia q{font-style:italic}
.marginalia cite{
  display:block;
  margin-top:14px;
  font-family:"Source Sans 3",Arial,sans-serif;
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
  font-style:normal;
}
.marginalia .status{
  display:block;
  margin-top:7px;
  font-family:"Source Sans 3",Arial,sans-serif;
  font-size:11px;
  color:#747674;
}
.beach{
  margin:42px 0 38px;
}
.beach p{margin-bottom:22px}
.return-home{
  margin-top:130px;
  padding-top:42px;
  border-top:1px solid var(--rule);
  font-family:"Source Sans 3",Arial,sans-serif;
}
.return-home a{font-weight:600}
.people-section{padding-top:92px}
.questions-section{padding-top:96px}
.name-note{
  font-family:"Source Sans 3",Arial,sans-serif;
  color:var(--muted);font-size:13px
}

@media (max-width:930px){
  .marginalia{
    position:static;
    width:auto;
    margin:30px 0 36px 28px;
    padding-top:14px;
    max-width:360px;
  }
  .margin-piece{padding-top:82px}
  .epigraph{margin-bottom:68px}
}

.questions-section h2{font-size:29px}

a:focus-visible,
summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}