:root {
  color-scheme: light dark;
  --canvas: #eee8db;
  --paper: #fbf7ee;
  --ink: #21332a;
  --quiet: #58665d;
  --surface: #e3dacb;
  --evergreen: #2f6a52;
  --canopy: #33573f;
  --on-canopy: #f7f0e3;
  --clay: #bc7151;
  --focus: #1d4d39;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
* { box-sizing: border-box; }
html { text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.58;
  text-align: start;
}
main, footer, .languages { width: min(100% - 40px, 760px); margin-inline: auto; }
main { padding-block-start: 72px; }
header {
  width: 100%;
  margin: 0;
  padding: 18px max(20px, calc((100% - 960px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--canopy);
  color: var(--on-canopy);
}
.skip-link {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-180%);
  z-index: 3;
  border: 2px solid var(--focus);
  border-radius: 6px;
}
.skip-link:focus { transform: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--on-canopy);
  text-decoration: none;
}
.brand-name {
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.mark-tile {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--on-canopy);
  border-radius: 12px;
}
.mark {
  width: 29px;
  height: 29px;
  display: block;
  overflow: visible;
}
.mark-plate { fill: var(--evergreen); }
.mark-gnomon { fill: var(--paper); }
.mark-sun-path {
  fill: none;
  stroke: var(--evergreen);
  stroke-width: 4;
  stroke-linecap: round;
}
.mark-sun { fill: var(--clay); }
nav { display: flex; gap: 10px; flex-wrap: wrap; }
a { color: var(--evergreen); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
nav a {
  min-height: 44px;
  padding-inline: 5px;
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--on-canopy) 78%, var(--canopy));
  font-size: 15px;
  font-weight: 650;
}
nav [aria-current="page"] { color: var(--on-canopy); text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 4px;
}
header a:focus-visible { outline-color: var(--on-canopy); }
h1 {
  max-width: 680px;
  margin: 0 0 18px;
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: clamp(40px, 7.5vw, 62px);
  font-weight: 650;
  line-height: 1.06;
}
.lede {
  max-width: 640px;
  margin: 0 0 64px;
  color: var(--quiet);
  font-size: clamp(19px, 3vw, 24px);
  line-height: 1.42;
}
h2 { margin: 50px 0 10px; font-size: 25px; line-height: 1.2; }
[dir="ltr"] h1 { letter-spacing: -.035em; }
[dir="ltr"] h2 { letter-spacing: -.015em; }
.effective { color: var(--quiet); font-size: 15px; }
.callout {
  margin-block: 32px;
  padding: 22px 24px;
  background: var(--surface);
  border-inline-start: 3px solid var(--evergreen);
}
.callout p { margin-block: 4px 0; }
.languages { margin-block-start: 64px; }
.languages h2 { font-size: 17px; }
.languages ul { columns: 2; padding-inline-start: 20px; }
.languages li { break-inside: avoid; margin-block: 4px; }
footer {
  margin-block-start: 84px;
  padding-block: 28px 48px;
  border-block-start: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--quiet);
  font-size: 14px;
}
@media (max-width: 620px) {
  main { padding-block-start: 52px; }
  header { align-items: flex-start; flex-direction: column; gap: 8px; }
  nav { width: 100%; justify-content: flex-start; gap: 6px; }
  .languages ul { columns: 1; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #171f1b;
    --paper: #1e2b23;
    --ink: #f1e9da;
    --quiet: #b6bcaf;
    --surface: #26332a;
    --evergreen: #8ebb9e;
    --canopy: #25422f;
    --on-canopy: #f7f0e3;
    --clay: #d99172;
    --focus: #b8d8c2;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .mark-tile { border: 1px solid CanvasText; }
  .mark-plate, .mark-sun { fill: CanvasText; }
  .mark-gnomon { fill: Canvas; }
  .mark-sun-path { stroke: CanvasText; }
}