@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --soft: #f7f9f3;
  --ink: #233320;
  --green: #415d2a;
  --lime: #97c93d;
  --accent-deep: #587628;
  --muted: #626c5e;
  --line: #dfe6d8;
  --measure: 78rem;
  --display: "Newsreader", Georgia, serif;
  --sans: "Newsreader", Georgia, serif;
  --interface: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --step-small: clamp(.9rem, .86rem + .14vw, 1rem);
  --step-body: clamp(1.08rem, 1.02rem + .24vw, 1.22rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
  font-size: var(--step-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 20; transform: translateY(-150%); padding: .7rem 1rem; color: var(--ink); background: var(--lime); }
.skip-link:focus { transform: none; }
.site-header, main > section, footer { width: min(calc(100% - 3rem), var(--measure)); margin-inline: auto; }

.site-header {
  width: 100%;
  min-height: 6.5rem;
  padding-inline: max(1.5rem, calc((100vw - var(--measure)) / 2));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  color: var(--ink);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header nav { padding-bottom: .25rem; }
.site-header .identity { align-self: center; }
.identity { display: inline-flex; align-items: center; text-decoration: none; }
.identity img { width: 10.25rem; height: auto; }
.site-header nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); font-family: var(--interface); font-size: var(--step-small); font-weight: 400; letter-spacing: .045em; text-transform: uppercase; }
.site-header nav a { padding-block: .35rem; border-bottom: 1px solid transparent; text-decoration: none; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--accent-deep); border-color: currentColor; }

.hero {
  min-height: calc(100vh - 6.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .58fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.section-no, .role { margin: 0 0 1.25rem; font-family: var(--interface); font-size: var(--step-small); font-weight: 400; letter-spacing: .045em; text-transform: uppercase; }
h1, h2, h3, blockquote { margin-top: 0; font-family: var(--display); font-weight: 450; letter-spacing: -.014em; line-height: 1.08; }
h1 { max-width: 13ch; margin-bottom: 1.75rem; font-size: clamp(3rem, 5.2vw, 4.8rem); }
h1 em { display: block; color: var(--green); font-style: normal; font-weight: 400; }
.lede { max-width: 38rem; margin-bottom: 2.4rem; color: var(--muted); font-family: var(--display); font-size: clamp(1.25rem, 1.65vw, 1.5rem); line-height: 1.48; }
.text-link { display: inline-block; padding-bottom: .25rem; border-bottom: 1px solid; font-family: var(--interface); font-size: var(--step-small); font-weight: 400; letter-spacing: .045em; text-decoration: none; text-transform: uppercase; }
.text-link:hover, .text-link:focus-visible { color: var(--accent-deep); }
.hero-art { position: relative; margin: 0; }
.hero-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-art figcaption { margin-top: 1rem; color: var(--muted); font-family: var(--interface); font-size: var(--step-small); font-weight: 400; letter-spacing: .045em; line-height: 1.6; text-transform: uppercase; }

main > section:not(.hero) { padding-block: clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--line); }
.statement { display: grid; grid-template-columns: minmax(9rem, .4fr) 1.6fr; gap: 2rem; }
h2 { max-width: 18ch; margin-bottom: 2.5rem; font-size: clamp(2.25rem, 3.7vw, 3.6rem); }
.prose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); color: var(--muted); font-size: var(--step-body); line-height: 1.6; }
.prose-grid p { margin: 0; }
.section-head { display: grid; grid-template-columns: minmax(9rem, .4fr) 1.6fr; gap: 2rem; margin-bottom: 4rem; }
.section-head h2 { margin-bottom: 1.25rem; }
.section-head > div > p { max-width: 43rem; margin-bottom: 0; color: var(--muted); }

.focus { width: 100%; max-width: none; padding-inline: max(1.5rem, calc((100vw - var(--measure)) / 2)); background: var(--soft); }
.focus-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.focus-list article { display: grid; min-width: 0; grid-template-rows: auto 1fr; background: var(--white); box-shadow: 0 1px 0 rgb(18 61 48 / .08); }
.focus-media { width: 100%; height: auto; aspect-ratio: 20 / 13; object-fit: cover; }
.focus-symbol { display: grid; place-items: center; background: #f3f6ef; text-decoration: none; }
.focus-symbol img { width: min(72%, 10rem); height: auto; }
.focus-copy { display: flex; min-height: 15rem; flex-direction: column; padding: 1.35rem 1.5rem 2rem; }
.focus-copy > span { margin-bottom: 1rem; color: var(--accent-deep); font-family: var(--interface); font-size: var(--step-small); font-weight: 400; letter-spacing: .045em; text-transform: uppercase; }
.focus-list h3 { margin-bottom: .8rem; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.12; }
.focus-list p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }

.people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); align-items: stretch; margin-left: calc(20% + 1rem); }
.people-grid article { display: grid; grid-template-columns: 10rem minmax(0, 1fr); grid-template-areas: "portrait identity" "note-label note-label" "founder-note founder-note" "profile-link profile-link"; column-gap: 1.7rem; align-content: start; padding: 1.5rem; border-top: 2px solid var(--ink); background: var(--white); }
.portrait { grid-area: portrait; width: 10rem; height: 10rem; object-fit: cover; object-position: center; }
.founder-identity { grid-area: identity; align-self: center; min-width: 0; }
.people-grid .role { margin: 0 0 .75rem; color: var(--accent-deep); }
.people-grid h3 { margin: 0; font-size: clamp(1.7rem, 2.1vw, 2.1rem); }
.people-grid .note-label { grid-area: note-label; margin: 1.4rem 0 .35rem; color: var(--accent-deep); font-family: var(--interface); font-size: var(--step-small); font-weight: 400; letter-spacing: .045em; text-transform: uppercase; }
.people-grid .founder-note { grid-area: founder-note; margin: 0 0 1.4rem; color: var(--muted); font-family: var(--display); font-size: var(--step-body); line-height: 1.55; }
.canonical-link { justify-self: start; padding-bottom: .2rem; border-bottom: 1px solid var(--ink); font-family: var(--interface); font-size: var(--step-small); font-weight: 400; letter-spacing: .035em; text-decoration: none; }
.people-grid .canonical-link { grid-area: profile-link; }
.canonical-link span { display: block; margin-bottom: .15rem; color: var(--muted); font-size: var(--step-small); letter-spacing: .045em; text-transform: uppercase; }
.canonical-link:hover, .canonical-link:focus-visible { color: var(--accent-deep); border-color: currentColor; }

.contact { display: grid; grid-template-columns: minmax(9rem, .4fr) 1.6fr; gap: 2rem; }
.contact h2 { max-width: 52rem; margin-bottom: 1.5rem; }
.contact div > p { max-width: 42rem; color: var(--muted); }
.contact-email { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--ink); font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); text-decoration: none; }
.contact-email span { color: var(--accent-deep); font-family: var(--sans); font-size: .85em; }
.contact-email:hover, .contact-email:focus-visible { color: var(--accent-deep); border-color: currentColor; }

footer {
  width: 100%;
  min-height: 11rem;
  max-width: none;
  padding-inline: max(1.5rem, calc((100vw - var(--measure)) / 2));
  display: grid;
  grid-template-columns: minmax(10rem, .65fr) 1.35fr;
  gap: 3rem;
  align-items: start;
  padding-block: 3.5rem 2rem;
  color: rgb(255 255 255 / .7);
  background: var(--ink);
  font-family: var(--interface);
  font-size: var(--step-small);
}
.identity-footer img { width: 9rem; }
.footer-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; }
.footer-nav div { display: grid; align-content: start; gap: .45rem; }
.footer-nav p { margin: 0 0 .5rem; color: var(--white); text-transform: uppercase; letter-spacing: .045em; }
.footer-nav a { color: rgb(255 255 255 / .75); text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--white); text-decoration: underline; text-underline-offset: .2em; }
.copyright { grid-column: 1 / -1; margin: 1rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .18); }

.legal-main { width: min(calc(100% - 3rem), 52rem); margin-inline: auto; padding-block: clamp(4rem, 8vw, 7rem); }
.legal-document > p:first-child { margin: 0 0 1rem; color: var(--muted); font-family: var(--interface); font-size: var(--step-small); text-transform: uppercase; letter-spacing: .045em; }
.legal-document h1 { max-width: none; }
.legal-document h2 { max-width: none; margin: 3rem 0 1rem; font-size: clamp(1.75rem, 2.7vw, 2.4rem); }
.legal-document p, .legal-document li { max-width: 68ch; }
.legal-document a { text-underline-offset: .16em; }

@media (max-width: 900px) {
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .focus-list { grid-template-columns: 1fr 1fr; margin-left: 0; }
  .people-grid { margin-left: 0; }
  .people-grid article { grid-template-columns: 8rem minmax(0, 1fr); }
  .portrait { width: 8rem; height: 8rem; }
}

@media (max-width: 700px) {
  .site-header, main > section, footer { width: 100%; }
  .site-header { min-height: 5.7rem; padding-inline: 1rem; }
  .identity img { width: 8.2rem; }
  .site-header nav a:nth-child(1), .site-header nav a:nth-child(2), .site-header nav a:nth-child(4) { display: none; }
  .site-header nav { gap: 1rem; font-size: .9rem; }
  .hero, main > section:not(.focus), .focus { width: calc(100% - 2rem); padding-inline: 0; }
  .hero { display: block; min-height: auto; padding-block: 4.5rem 5rem; }
  .hero-copy, .lede { width: 100%; max-width: 100%; }
  h1 { font-size: clamp(2.8rem, 11vw, 3.4rem); }
  .hero-art { width: 88%; margin: 4rem 0 0 auto; }
  .statement, .section-head, .contact { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 3rem; }
  .prose-grid, .people-grid, .focus-list { grid-template-columns: 1fr; }
  .focus { width: 100%; padding-inline: 1rem; }
  .focus-copy { min-height: 0; }
  .people-grid article { grid-template-columns: 6.5rem minmax(0, 1fr); padding: 1.1rem; }
  .portrait { width: 6.5rem; height: 6.5rem; }
  .people-grid .note-label { margin-top: 1.25rem; }
  footer { grid-template-columns: 1fr; padding: 2.5rem 1rem; gap: 2rem; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .copyright { grid-column: 1; margin-top: 0; }
  .legal-main { width: calc(100% - 2rem); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }