:root {
  color-scheme: dark;
  --base: #242C29;
  --panel: #303A37;
  --alt: #3C4842;
  --text: #F5F3EE;
  --secondary: #D9DFD8;
  --muted: #BFC8C1;
  --edge: #53615A;
  --divider: #414D47;
  --action: #E3A994;
  --action-hover: #E9B6A3;
  --on-action: #242C29;
  --copper: #C76E52;
  --logo: #D6D7D3;
  --focus: #E9B6A3;
  --accent-text: #E3A994;
  --glass: color-mix(in srgb, var(--panel) 91%, transparent);
  --ambient-copper: color-mix(in srgb, var(--copper) 55%, transparent);
  --sans: "Instrument Sans", Geist, system-ui, sans-serif;
  --gutter: clamp(20px, 5.6vw, 84px);
  --app-bar-min: 74px;
  --app-bar-offset: var(--app-bar-min);
}

[data-theme="light"] {
  color-scheme: light;
  --base: #F5F3EE;
  --panel: #FCFBF8;
  --alt: #E9ECE6;
  --text: #303A37;
  --secondary: #46524B;
  --muted: #59635F;
  --edge: #D6DAD4;
  --divider: #D6DAD4;
  --action: #9B4C36;
  --action-hover: #853F2B;
  --on-action: #FFFFFF;
  --logo: #303A37;
  --focus: #853F2B;
  --accent-text: #853F2B;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: var(--app-bar-offset); }
body {
  margin: 0;
  isolation: isolate;
  background: var(--base);
  color: var(--text);
  font: 400 1rem/1.55 var(--sans);
}
button { font: inherit; }
a { color: inherit; }
p, h1, h2, h3, h4, dl, dd, figure { margin: 0; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
main:focus { outline: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
section { scroll-margin-top: 1rem; }

.wrap {
  width: min(calc(100% - 2 * var(--gutter)), 1272px);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  inset: .625rem auto auto .625rem;
  z-index: 5;
  transform: translateY(-200%);
  padding: .65rem 1rem;
  background: var(--action);
  color: var(--on-action);
  font-weight: 650;
}
.skip-link:focus { transform: none; }

.opening, .site-footer { position: relative; z-index: 1; }
.app-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  background: color-mix(in srgb, var(--base) 92%, transparent);
  backdrop-filter: blur(14px);
}
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--app-bar-min);
  gap: 1.5rem;
}
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--logo);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.05em;
  text-decoration: none;
}
.brand img { object-fit: contain; }
.brand-light, [data-theme="light"] .brand-dark { display: none; }
[data-theme="light"] .brand-light { display: block; }
.site-header nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.6rem);
  align-items: center;
}
.site-header nav a {
  padding-block: .7rem;
  color: var(--secondary);
  font-size: .9rem;
  font-weight: 550;
  text-decoration: none;
}
[data-theme="light"] .site-header nav a { color: var(--text); }
.site-header nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent-text);
  text-underline-offset: .3em;
}

.quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .45rem .75rem;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--panel);
  color: var(--secondary);
  font-size: .8125rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
}
.quiet-button:hover { background: var(--alt); color: var(--text); }
.theme-toggle { justify-self: end; }
.theme-icon {
  position: relative;
  width: .85rem;
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.theme-icon::before {
  content: "";
  position: absolute;
  inset: 2px 50% 2px 2px;
  border-radius: 1rem 0 0 1rem;
  background: currentColor;
}
[data-theme="light"] .theme-icon { transform: rotate(180deg); }

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.3rem;
  min-height: 50px;
  border-radius: 4px;
  background: var(--action);
  color: var(--on-action);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.primary-action { padding: .8rem 1.05rem .8rem 1.25rem; }
.primary-action span { font-size: 1.15rem; font-weight: 600; }
.primary-action:hover { background: var(--action-hover); }

.section-inner { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section-label {
  margin-bottom: .8rem;
  color: var(--accent-text);
  font-size: .78rem;
  font-weight: 690;
  letter-spacing: .115em;
  text-transform: uppercase;
}
h2 {
  margin-left: -.04em;
  font-size: clamp(2.3rem, 4.05vw, 4.05rem);
  font-weight: 570;
  letter-spacing: -.045em;
  line-height: 1.05;
}
h3 { font-size: 1.05rem; line-height: 1.3; }
h4 { font-size: 1rem; line-height: 1.4; }
.section-intro {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: end;
  gap: 2.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 3.25rem);
}
.section-intro > p, .basis-copy > p:not(.section-label), .pilot-grid > div > p:not(.section-label) {
  max-width: 50ch;
  color: var(--secondary);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}
.basis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: start;
  gap: clamp(2rem, 7vw, 7rem);
}
.basis-copy h2 { max-width: 15ch; }
.basis-copy > p:not(.section-label), .pilot-grid > div > p:not(.section-label) { margin-top: 1rem; }
.accountability { margin-top: 1.75rem; }
.accountability > div {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: .75rem;
  padding-block: .6rem;
  border-top: 1px solid var(--edge);
  font-size: .92rem;
}
.accountability dt { font-weight: 670; }
.accountability dd { color: var(--secondary); }
.source-figure {
  margin: .4rem 0 0;
  padding: clamp(1.15rem, 2.5vw, 2rem);
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: var(--base);
}
.source-figure figcaption { font-size: 1.12rem; font-weight: 650; }
.source-process { margin: .95rem 0 1.3rem; padding-left: 1.3rem; color: var(--secondary); }
.source-process li { padding-left: .15rem; }
.source-process li + li { margin-top: .5rem; }
.source-process li::marker { color: var(--accent-text); font-weight: 650; }
.source-display {
  padding: .8rem 1rem;
  border-left: 2px solid var(--copper);
  background: var(--alt);
}
.source-display > span { color: var(--secondary); font-size: .8rem; }
.source-display p { margin-top: .1rem; line-height: 1.45; }

.pilot-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 7vw, 7rem);
}
.pilot-steps { margin: .4rem 0 0; padding-left: 1.4rem; }
.pilot-steps li {
  padding: 1rem 0 1rem .4rem;
  border-top: 1px solid var(--edge);
  color: var(--secondary);
}
.pilot-steps li::marker {
  color: var(--accent-text);
  font-size: .83rem;
  font-weight: 650;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}
.pilot-steps strong { color: var(--text); }

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  min-height: 74px;
  padding-block: 1rem;
}
.footer-inner span { color: var(--logo); font-size: 1.1rem; font-weight: 650; letter-spacing: -.04em; }
.footer-inner p { color: var(--muted); font-size: .8125rem; text-align: right; }

@media (max-width: 690px) {
  :root { --app-bar-min: 100px; }
  .site-header {
    grid-template-columns: 1fr auto;
    gap: .05rem .8rem;
    padding-top: .7rem;
  }
  .site-header nav {
    grid-column: 1 / -1;
    gap: 1.55rem;
  }
  .section-intro, .basis-grid, .pilot-grid { grid-template-columns: minmax(0, 1fr); }
  .section-intro { gap: .75rem; }
  .accountability { margin-top: 1.25rem; }
}

@media (max-width: 365px) {
  .accountability > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .primary-action, .case-switch label { border: 1px solid ButtonText; }
  .theme-icon::before { forced-color-adjust: none; background: ButtonText; }
}

.header-actions { display: flex; align-items: center; justify-self: end; gap: .5rem; }
.login-link { text-decoration: none; color: var(--text); }
@media (max-width: 690px) {
  .header-actions { grid-area: 1 / 2; }
}
@media (max-width: 365px) {
  .theme-toggle span:last-child { display: none; }
}