/* Shared by every page: tokens, type, frame, header, grid, sections, footer.
   Page-specific styles stay inline in each page. */

:root{
  --bg:#FBFBF9;
  --ink:#14161A;
  --ink-2:#3B3F45;
  --mut:#686D73;
  --faint:#989CA1;
  --dim:#989CA1;
  --rule:#E4E5E1;
  --rule-2:#CDD0CA;
  --panel:#F4F5F2;
  --acc:#2F5D4F;
  --acc-2:#22463B;
  --acc-dim:#6E8B7F;
  --band:#EAF0EC;
  --band-rule:#D2DCD5;
  --sans:'Hanken Grotesk',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --gap:clamp(16px,2.6vw,36px);
  --gutter:clamp(20px,4.5vw,56px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:2px; }

.page{ max-width:1180px; margin:0 auto; padding-inline:var(--gutter); padding-block:0 64px; }

/* ---------- the grid: label column + content column ---------- */
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); }
.lbl{ grid-column:1 / span 3; }
.body{ grid-column:4 / span 9; min-width:0; }
@media (max-width:860px){ .lbl, .body{ grid-column:1 / -1; } }

/* ---------- header ---------- */
.site-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px 20px; flex-wrap:wrap;
  padding-block:26px 22px; border-bottom:1px solid var(--rule); font-size:14.5px;
}
.site-head .name{ font-weight:600; letter-spacing:-.005em; }
.site-head nav{ display:flex; gap:6px clamp(14px,2.2vw,28px); align-items:center; color:var(--mut); flex-wrap:wrap; }
.site-head nav a:hover{ color:var(--ink); }
.site-head nav a[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
.site-head .place{ color:var(--faint); padding-left:clamp(14px,2.2vw,28px); border-left:1px solid var(--rule-2); }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(48px,7vw,88px) clamp(40px,5.5vw,72px); row-gap:20px; }

/* the one band of colour: full-bleed pale green behind header + intro */
.site-head, .hero{ position:relative; }
.site-head::before, .hero::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:calc(50% - 50vw); right:calc(50% - 50vw); background:var(--band);
}
.site-head{ border-bottom-color:var(--band-rule); }
.site-head::before{ bottom:-1px; }
.hero + .path, .hero + .sec{ border-top-color:transparent; }
.hero .try{ border-color:var(--band-rule); }
.hero .lbl{ font-size:14.5px; color:var(--mut); line-height:1.5; padding-top:.3em; }
.hero .lbl span{ display:block; }
.hero h1{
  margin:0; font-weight:500;
  font-size:clamp(21px,2.1vw,26px); line-height:1.38; letter-spacing:-.012em;
  text-wrap:balance;
}
.hero .sub{ margin:20px 0 0; font-size:17px; line-height:1.6; color:var(--ink-2); }
.hero .sub + .sub{ margin-top:12px; }

/* ---------- three short columns across the content area ---------- */
.path{ border-top:1px solid var(--rule-2); padding-block:28px 64px; row-gap:16px; }
.path-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); }
@media (max-width:860px){ .path-cols{ grid-template-columns:1fr; gap:22px; } }
.path-cols h3{ margin:0 0 6px; font-size:14px; font-weight:600; color:var(--mut); }
.path-cols p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--ink-2); }

/* ---------- sections ---------- */
.sec{ border-top:1px solid var(--rule-2); padding-block:28px 72px; row-gap:18px; }
.sec h2, .path h2{ margin:0; font-size:16px; font-weight:600; letter-spacing:-.005em; }
.lbl .aside{ display:block; margin-top:2px; font-size:14px; color:var(--faint); font-variant-numeric:tabular-nums; }
.intro{ margin:0; font-size:clamp(17px,1.45vw,19px); line-height:1.55; color:var(--ink-2); max-width:56ch; }

.link{ color:var(--acc); border-bottom:1px solid rgba(47,93,79,.3); transition:border-color .15s,color .15s; }
.link:hover{ color:var(--acc-2); border-bottom-color:var(--acc-2); }

/* a bordered block: a sentence, then its action underneath */
.try{ margin-top:36px; padding-block:18px; border-block:1px solid var(--rule); }
.try p{ margin:0 0 10px; font-size:15.5px; color:var(--ink-2); }
.try .link{ display:inline-block; }
.try p b{ font-weight:600; color:var(--ink); }
.try .link{ white-space:nowrap; font-weight:500; }

/* ---------- expandable lists ---------- */
.accordion-stack{ display:flex; flex-direction:column; border-top:1px solid var(--rule); }
details.accordion{ border-bottom:1px solid var(--rule); }
details.accordion summary{
  cursor:pointer; list-style:none; display:flex; gap:14px; align-items:baseline;
  padding:12px 0; font-size:15px;
}
details.accordion summary::-webkit-details-marker{ display:none; }
details.accordion summary::before{ content:"+"; width:12px; flex:none; color:var(--faint); }
details.accordion[open] summary::before{ content:"\2013"; color:var(--acc); }
details.accordion summary:hover .badge{ color:var(--acc); }
.badge{ font-weight:600; font-variant-numeric:tabular-nums; min-width:96px; }
.muted{ margin-left:auto; font-size:13.5px; color:var(--faint); }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- footer ---------- */
.site-foot{
  display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--faint);
}
.site-foot a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}