:root {
  color-scheme: light;
  --slate: #17252b;
  --slate-soft: #31464e;
  --teal: #0d706a;
  --teal-dark: #07534f;
  --blue: #356b96;
  --off-white: #f7f4ec;
  --paper: #fffefa;
  --line: #c7d2d2;
  --amber-bg: #fff1d7;
  --amber-border: #8b4f08;
  --focus: #9b4b00;
  --radius: 1rem;
  --shadow: 0 1rem 2.5rem rgb(23 37 43 / 9%);
  --shell: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--paper); color: var(--slate); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.65; }
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-dark); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible, .button:focus-visible { outline: .2rem solid var(--focus); outline-offset: .25rem; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1 { max-width: 15ch; margin: .45rem 0 1.25rem; font-size: clamp(2.25rem, 6vw, 4.75rem); letter-spacing: -.045em; }
h2 { max-width: 23ch; margin: .35rem 0 1.25rem; font-size: clamp(1.75rem, 3.5vw, 3rem); letter-spacing: -.025em; }
h3 { font-size: 1.25rem; }
p { max-width: 68ch; }
.section-intro { max-width: 62rem; color: var(--slate-soft); font-size: 1.1rem; }
.shell { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }
.narrow { max-width: 52rem; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .75rem 1rem; background: var(--paper); color: var(--slate); border: .15rem solid var(--focus); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; z-index: 10; background: rgb(255 254 250 / 96%); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; gap: 1rem; }
.brand { flex: 0 1 13.375rem; border-radius: .25rem; }
nav ul { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .45rem .7rem; color: var(--slate); font-weight: 650; text-decoration: none; border-radius: .35rem; }
nav a:hover { background: var(--off-white); }
.hero { padding: clamp(3.5rem, 9vw, 8rem) 0; background: radial-gradient(circle at 85% 18%, rgb(13 112 106 / 11%), transparent 28rem), var(--off-white); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.eyebrow { margin: 0; color: var(--teal-dark); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.lede { max-width: 59ch; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--slate-soft); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .65rem 1rem; border: .125rem solid transparent; border-radius: .55rem; font-weight: 750; line-height: 1.25; text-decoration: none; }
.button-primary { background: var(--teal-dark); color: #fff; }
.button-secondary { border-color: var(--teal-dark); color: var(--teal-dark); background: transparent; }
.button-secondary:hover, .button-primary:hover { filter: brightness(.9); }
.button-muted { color: #526268; background: #e3e6e3; border-color: #abb5b5; cursor: not-allowed; }
.status-card, .evidence-card { padding: clamp(1.4rem, 4vw, 2.25rem); border: 1px solid var(--amber-border); border-left-width: .4rem; border-radius: var(--radius); background: var(--amber-bg); box-shadow: var(--shadow); }
.status-card h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
.status-label { margin: 0; color: #653803; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-tint { background: #edf5f3; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.principle-card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.step { color: var(--blue); font-weight: 850; letter-spacing: .08em; }
.audience-grid .step { display: inline-block; font-size: .78rem; text-transform: uppercase; }
.boundary-grid, .two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; }
.flow-node { display: flex; flex-direction: column; min-height: 8rem; justify-content: center; padding: 1rem; border: .125rem solid var(--teal); border-radius: .75rem; background: var(--paper); }
.flow-node span { margin-top: .25rem; color: var(--slate-soft); font-size: .9rem; }
.flow-arrow { color: var(--blue); font-size: 1.75rem; }
.evidence-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.evidence-list li { display: grid; grid-template-columns: minmax(6.5rem, .35fr) 1fr; gap: 1rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.evidence-list strong { color: var(--teal-dark); font-size: 1.15rem; }
.evidence-list span { color: var(--slate-soft); }
.evidence-card { border-color: var(--blue); background: #edf4fa; }
.verified-date { margin-bottom: .4rem; }
.artifact-hash { margin-top: 0; }
.artifact-hash strong, .artifact-hash code { display: block; }
.artifact-hash code { margin-top: .35rem; color: var(--slate-soft); font-size: .82rem; overflow-wrap: anywhere; }
.limitations { background: var(--slate); color: #f9faf7; }
.limitations .eyebrow { color: #78d3c9; }
.limitations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.limitations li { margin-block: .75rem; padding-left: .35rem; }
.limitations li::marker { color: #f0bd73; }
.evaluate { text-align: center; }
.evaluate h2, .evaluate p { margin-inline: auto; }
.contribution-list { display: grid; gap: .65rem; margin: 2rem auto; text-align: left; }
.contribution-list p { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; width: 100%; margin-block: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: #fff; }
.contribution-list span { color: var(--slate-soft); }
.repository-status { margin-top: 2rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--off-white); }
.site-footer { padding: 3rem 0; color: #e9f0ed; background: #101b1f; }
.site-footer img { padding: .2rem .4rem; background: var(--off-white); border-radius: .4rem; }
.footer-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; }
.footer-grid p { color: #cbd7d4; font-size: .9rem; }
.error-page { display: grid; align-items: center; min-height: calc(100vh - 5rem); padding-block: 4rem; }

@media (max-width: 52rem) {
  .header-inner { align-items: flex-start; flex-direction: column; padding-block: .75rem; }
  .brand { flex-basis: auto; width: 10rem; }
  nav { width: 100%; }
  nav ul { justify-content: space-between; }
  .hero-grid, .boundary-grid, .two-column, .footer-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 36rem) {
  .shell { width: min(100% - 1.25rem, var(--shell)); }
  nav ul { display: grid; grid-template-columns: 1fr; }
  nav a { width: 100%; }
  .actions { flex-direction: column; align-items: stretch; }
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { justify-self: center; transform: rotate(90deg); }
  .evidence-list li { grid-template-columns: 1fr; gap: .15rem; }
  .contribution-list p { grid-template-columns: 1fr; gap: .15rem; }
  .limitations-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .button, .status-card, .evidence-card, .flow-node { border: 2px solid CanvasText; }
  .button-muted { color: GrayText; }
}