:root{
  --ground:#FBFAF8; --ink:#16191B; --accent:#7A3A5E; --surface:#ECEFF0;
  --accent-on-dark:#BA6F99; --rule:#D9DEE1; --muted:#4C5459;
  --max-read:700px; --max:1080px; --spine-w:200px; --gutter:56px;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);
  font-size:1.125rem;line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
p,ul,ol,dl{margin:0 0 1.1em}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.25;margin:0 0 .5em;letter-spacing:-.004em}
h1{font-size:clamp(2rem,1.62rem + 1.7vw,2.52rem)}          /* 36 -> 45.4 */
h2{font-size:clamp(1.5rem,1.38rem + .55vw,1.788rem)}        /* 28.6 */
h3{font-size:1.26rem;font-weight:600}                       /* 22.7 */
.lead{font-size:1.26rem;line-height:1.55;color:var(--muted);margin:0 0 1.2em}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);padding:10px 14px;z-index:60;font-family:var(--sans)}
.skip-link:focus{left:10px;top:10px}

/* ---- header: one calm bar, not sticky (the reading spine is the only sticky element) ---- */
.site-header{border-bottom:1px solid var(--rule);background:var(--ground)}
.header-container{display:flex;align-items:center;gap:18px;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.logo img{width:30px;height:30px}
.logo-text{font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:.005em}
.main-nav{margin-left:auto}
.nav-menu{list-style:none;display:flex;flex-wrap:wrap;gap:2px 22px;margin:0;padding:0}
.nav-link{font-family:var(--sans);font-size:.98rem;font-weight:400;color:var(--ink);text-decoration:none;padding:7px 0 5px;border-bottom:2px solid transparent}
.nav-link:hover{border-bottom-color:var(--rule)}
.nav-link.active{color:var(--accent);border-bottom-color:var(--accent)}
.nav-toggle{display:none;margin-left:auto;font:inherit;font-family:var(--sans);font-size:.95rem;
  background:var(--ground);color:var(--ink);border:1px solid var(--rule);padding:8px 14px;cursor:pointer}

/* ---- reading grid: sticky spine | single measure ---- */
.read-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.read-body{min-width:0;max-width:var(--max-read)}
.spine{display:none}
@media (min-width:1080px){
  .read-grid{grid-template-columns:var(--spine-w) minmax(0,var(--max-read));column-gap:var(--gutter);justify-content:center}
  .spine{display:block;align-self:start;position:sticky;top:28px;max-height:calc(100vh - 56px);overflow:auto;
    padding-top:58px;font-family:var(--sans)}
  .spine-title{margin:0 0 10px;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .spine-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
  .spine-list li{border-bottom:1px solid var(--rule)}
  .spine-link{display:block;padding:8px 0;font-size:.84rem;line-height:1.4;color:var(--muted);text-decoration:none;border-left:2px solid transparent;padding-left:9px}
  .spine-link:hover{color:var(--ink)}
  .spine-link.is-current{color:var(--accent);border-left-color:var(--accent);background:var(--surface)}
  .spine-num{display:inline-block;min-width:20px;font-variant-numeric:tabular-nums;color:var(--accent)}
}

/* ---- hero (type only: no photograph above the headline) ---- */
.hero{padding:44px 0 10px}
.hero h1{margin-bottom:.45em}
.hero .lead{max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px 30px;margin:22px 0 12px;font-family:var(--sans);font-size:1rem}
.hero-actions a{font-weight:600}
.hero-note{font-family:var(--sans);font-size:.88rem;color:var(--muted);max-width:58ch;border-top:1px solid var(--rule);padding-top:14px;margin-bottom:0}

/* ---- bands and insets (photographs on the home page only, no text on a photo) ---- */
.band{margin:34px 0 42px}
.band img{width:100%;height:auto}
@media (min-width:1080px){
  /* the opening band starts at the container edge and ends at the measure, the one
     editorial bleed on the page */
  .band-bleed{margin-left:calc(-1 * (var(--spine-w) + var(--gutter)))}
}
.band figcaption,.inset figcaption,.figure-caption{margin-top:10px;font-family:var(--sans);font-size:.82rem;
  line-height:1.5;color:var(--muted)}
.inset{margin:30px 0 34px}
.inset img{width:100%;max-width:460px}

/* ---- numbered sections: hairlines, no cards ---- */
.section{padding:30px 0 4px;border-top:1px solid var(--rule);max-width:var(--max-read)}
.section.plain{border-top:0;padding-top:18px}
.sec-num{margin:0 0 8px;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}
.section h2{margin-bottom:.5em}
.section h3{margin-top:1.6em}

/* ---- ruled lists ---- */
.tick-list,.link-list{list-style:none;margin:0 0 1.2em;padding:0}
.tick-list li,.link-list li{border-bottom:1px solid var(--rule);padding:9px 0;font-size:1.02rem}
.tick-list li:first-child,.link-list li:first-child{border-top:1px solid var(--rule)}
.link-list.compact li{font-size:.95rem}
.index-list{margin:22px 0 6px;border-top:1px solid var(--rule)}
.index-row{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 18px;padding:16px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink)}
.index-row h3{margin:0;font-size:1.1rem;color:var(--accent)}
.index-row p{margin:0;font-family:var(--sans);font-size:.95rem;color:var(--muted);line-height:1.55}
@media (min-width:720px){
  .index-row{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:baseline}
}
.index-row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.index-sub{margin:8px 0 0;font-family:var(--sans);font-size:.87rem;color:var(--muted)}
.area-group{margin:26px 0 0;border-top:1px solid var(--rule);padding-top:14px}
.area-group h3{margin:0 0 6px;font-size:1.05rem}
.area-group .link-list{margin-bottom:0}

/* ---- quiet panel (cost, sources) ---- */
.panel{background:var(--surface);padding:24px 26px;margin:26px 0;max-width:var(--max-read)}
.panel>*:last-child{margin-bottom:0}
.panel .band{margin:22px 0 6px}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item:first-of-type{border-top:1px solid var(--rule)}
.faq-question{cursor:pointer;padding:13px 26px 13px 0;position:relative;font-family:var(--sans);font-size:1.02rem;
  font-weight:600;list-style:none}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{content:"+";position:absolute;right:2px;top:12px;color:var(--accent);font-weight:600}
.faq-item[open] .faq-question::after{content:"\2013"}
.faq-answer{padding:0 26px 14px 0}
.faq-answer p{margin:0;font-size:1.02rem;color:var(--muted)}

/* ---- sources, disclosure, closing line ---- */
.sources{font-family:var(--sans);font-size:.9rem;color:var(--muted)}
.sources li{margin:6px 0}
.disclosure{border-left:2px solid var(--accent);padding:4px 0 4px 16px;margin:30px 0;max-width:var(--max-read)}
.disclosure p{margin:0;font-family:var(--sans);font-size:.92rem;color:var(--muted)}
.closing{border-top:1px solid var(--rule);margin-top:38px;padding-top:26px;max-width:var(--max-read)}
.closing h2{font-size:clamp(1.4rem,1.3rem + .5vw,1.588rem)}
.closing p{max-width:60ch}
.breadcrumbs{font-family:var(--sans);font-size:.85rem;color:var(--muted);padding:20px 0 0}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:var(--rule)}
.page-header{padding:18px 0 6px}
.page-header h1{margin-bottom:.4em}
.post-meta{font-family:var(--sans);font-size:.88rem;color:var(--muted)}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--rule);margin-top:56px;padding:40px 0 26px;background:var(--ground)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:26px 30px}
.footer-title{margin:0 0 10px;font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.footer-text,.footer-contact-item{font-family:var(--sans);font-size:.88rem;color:var(--muted);margin:0 0 8px;max-width:40ch}
.footer-links{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.9rem}
.footer-links li{margin:0 0 7px}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.credits{border-top:1px solid var(--rule);margin-top:30px;padding-top:18px;font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.credits p{margin:0 0 8px}
.credits ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 22px}
.credits li{margin:0;line-height:1.6}
.credits a{white-space:nowrap}
/* tap targets: block-level link lists in the footer and in page sections */
.footer-links a,.link-list a{display:inline-block;padding:4px 0}
.footer-legal a{display:inline-block;padding:4px 2px}
.footer-bottom{border-top:1px solid var(--rule);margin-top:24px;padding-top:16px;font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.footer-bottom p{margin:5px 0}
.footer-legal a{margin-right:12px}
.preferred-source{margin-top:16px;min-height:40px}

@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .nav-toggle{display:inline-block}
  .main-nav{display:none;width:100%;order:3}
  .main-nav.is-open{display:block}
  .nav-menu{flex-direction:column;gap:0;padding:6px 0 10px}
  .nav-menu li{border-bottom:1px solid var(--rule)}
  .nav-link{display:block;padding:11px 0;border-bottom:0}
  body{font-size:1.0625rem}
  .band{margin:26px 0 32px}
  .inset img{max-width:100%}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .container{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}