@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/public/fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/public/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --background: #f5f0e7;
  --surface: #fffdf8;
  --surface-soft: #eee7dc;
  --text: #151210;
  --muted: #574f48;
  --border: rgba(21, 18, 16, 0.18);
  --accent: #754900;
  --accent-strong: #5d3900;
  --accent-foreground: #ffffff;
  --route: #a96d00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #151210;
    --surface: #231e1a;
    --surface-soft: #2b2520;
    --text: #f5f0e7;
    --muted: #c9c0b4;
    --border: rgba(245, 240, 231, 0.18);
    --accent: #f6c45a;
    --accent-strong: #ffd77e;
    --accent-foreground: #151210;
    --route: #f6c45a;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "DM Sans", "Segoe UI", Aptos, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-strong);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 10px 14px;
  background: var(--text);
  color: var(--background);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: none;
}

.shell {
  width: min(1160px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 94%, transparent);
  backdrop-filter: blur(12px);
}

.nav {
  display: flex;
  min-height: 80px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
}

.brand-color {
  display: block;
  width: 154px;
  height: auto;
}

.brand-reverse {
  display: none;
  align-items: center;
  gap: 10px;
  color: #f5f0e7;
  font-size: 22px;
  font-weight: 800;
}

.brand-reverse img {
  width: 36px;
  height: 36px;
}

@media (prefers-color-scheme: dark) {
  .brand-color {
    display: none;
  }

  .brand-reverse {
    display: inline-flex;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  font-size: 14px;
  font-weight: 700;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-links .button {
  color: var(--accent-foreground);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.menu-toggle svg {
  width: 22px;
  height: 22px;
}

.guide-menu {
  position: relative;
}

.guide-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
}

.guide-menu summary::-webkit-details-marker {
  display: none;
}

.guide-menu summary::after {
  content: "+";
  color: var(--accent);
}

.guide-menu[open] summary::after {
  content: "\2212";
}

.guide-menu-links {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  width: 280px;
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.guide-menu-links a {
  padding: 8px 12px;
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 5px;
  gap: 12px;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
  transition: background 180ms ease;
}

.button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.button:hover {
  background: var(--accent-strong);
  color: var(--accent-foreground);
}

.evidence-note {
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 13px;
}

.evidence-note strong {
  color: var(--text);
}

.page-hero {
  padding: clamp(76px, 10vw, 132px) 0 72px;
  border-bottom: 1px solid var(--border);
}

.page-hero .shell {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: clamp(42px, 7vw, 100px);
  align-items: end;
}

.eyebrow {
  margin-bottom: 20px;
  color: var(--accent);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin-top: 0;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 900px;
  margin-bottom: 26px;
  font-size: clamp(46px, 7vw, 82px);
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(34px, 5vw, 54px);
}

h3 {
  margin-bottom: 12px;
  font-size: 24px;
}

.lede {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(20px, 2.4vw, 26px);
}

.decision-card,
.metric-card,
.clause,
.source-card {
  border: 1px solid var(--border);
  border-top: 4px solid var(--route);
  padding: 26px;
  background: var(--surface);
}

.decision-card strong {
  display: block;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.content-section {
  padding: clamp(70px, 9vw, 112px) 0;
  border-bottom: 1px solid var(--border);
}

.content-section.soft {
  background: var(--surface-soft);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.88fr);
  gap: clamp(44px, 8vw, 120px);
}

/* Structural guard, not the fix for the overflow defect. Grid items default to
   min-width:auto, so their min-content size becomes a floor the track cannot go
   below and any child too wide to shrink widens the whole page. Removing this
   rule alone does not currently regress layout-test, because overflow-wrap on
   .prose independently handles every wide child the framework pages actually
   contain; it is kept for children that overflow-wrap cannot break, such as
   media. Treat it as belt-and-braces, not as demonstrated-necessary. */
.content-grid > * {
  min-width: 0;
}

.section-label {
  color: var(--accent);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prose {
  max-width: 780px;
  min-width: 0;
  overflow-wrap: break-word;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose strong {
  color: var(--text);
}

.prose blockquote {
  margin: 34px 0;
  border-left: 5px solid var(--route);
  padding: 4px 0 4px 24px;
  color: var(--text);
  font-size: 22px;
  font-weight: 650;
}

.metric-grid,
.clause-grid,
.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.metric-card p,
.clause p,
.source-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.checklist {
  display: grid;
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: readiness;
}

.checklist > li {
  position: relative;
  border: 1px solid var(--border);
  padding: 24px 24px 24px 78px;
  background: var(--surface);
  counter-increment: readiness;
}

.checklist > li::before {
  position: absolute;
  top: 24px;
  left: 24px;
  content: counter(readiness, decimal-leading-zero);
  color: var(--accent);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-weight: 700;
}

.checklist h3 {
  margin-bottom: 8px;
}

.checklist p {
  margin: 0;
}

.example {
  border-left: 4px solid var(--route);
  padding-left: 18px;
  color: var(--text);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 15px;
}

.related {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.related a {
  border: 1px solid var(--border);
  padding: 10px 14px;
  background: var(--surface);
  font-weight: 700;
  text-decoration: none;
}

.contact-section {
  padding: clamp(76px, 10vw, 120px) 0;
  background: var(--surface-soft);
  color: var(--text);
}

.contact-section .eyebrow,
.contact-section a {
  color: var(--accent);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.58fr);
  gap: clamp(46px, 8vw, 110px);
}

.contact-grid p {
  color: var(--muted);
}

.form-note {
  font-size: 13px;
}

form {
  display: grid;
  gap: 18px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

label {
  display: grid;
  gap: 7px;
  font-size: 14px;
  font-weight: 750;
}

input,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--muted);
  border-radius: 5px;
  padding: 13px 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

[data-form-feedback] {
  margin: 0;
  padding: 14px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: 14px;
}

textarea {
  min-height: 104px;
  resize: vertical;
}

form .button {
  margin-top: 8px;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 30px;
  align-items: center;
}

.footer-grid p {
  margin: 0;
  color: var(--muted);
}

.footer-copy {
  display: grid;
  gap: 6px;
}

.footer-grid nav {
  display: grid;
  gap: 4px;
  font-size: 14px;
}

@media (max-width: 1040px) {
  .nav {
    position: relative;
    flex-wrap: wrap;
    gap: 0 24px;
  }

  .nav-links {
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-bottom: 16px;
  }

  .has-js .menu-toggle {
    display: grid;
    place-items: center;
  }

  .has-js .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    width: min(360px, calc(100vw - 40px));
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    visibility: hidden;
    opacity: 0;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .has-js .nav-links.open {
    visibility: visible;
    opacity: 1;
  }

  .nav-links a:not(.button), .guide-menu summary {
    padding: 10px 14px;
  }

  .guide-menu-links {
    position: static;
    width: auto;
    max-height: none;
    margin-bottom: 8px;
    box-shadow: none;
  }
}

@media (max-width: 900px) {
  .page-hero .shell,
  .content-grid,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .shell {
    width: min(100% - 40px, 1160px);
  }

  .nav {
    min-height: 72px;
  }

  .nav-links {
    text-align: left;
  }

  form {
    padding: 24px 20px;
  }

  .metric-grid,
  .clause-grid,
  .source-grid {
    grid-template-columns: 1fr;
  }

  .checklist > li {
    padding-left: 62px;
  }

  .checklist > li::before {
    left: 18px;
  }

  .footer-grid nav {
    grid-template-columns: 1fr;
  }
}

/* Published frameworks (COPY_REWRITE.md section 8).
   The framework bodies are rendered from Markdown and are the only pages that
   emit tables, fenced code and task lists, none of which the cluster pages use. */

.framework-grid {
  display: grid;
  /* Explicitly three wide. auto-fit resolves to four at desktop, which leaves
     the fifth framework alone on a second row. Three gives a 3+2 block and a
     wider card, which these summaries need. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.framework-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.framework-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.framework-card h3 a {
  color: var(--text);
  text-decoration: none;
}

.framework-card h3 a:hover,
.framework-card h3 a:focus {
  color: var(--accent);
  text-decoration: underline;
}

.framework-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.framework-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Tables. The framework documents carry 400 rows between them, so these must
   stay readable on a phone: the wrapper scrolls rather than crushing columns. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 22px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 0.9rem;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}

.prose th {
  background: var(--surface-soft);
  font-weight: 600;
  white-space: nowrap;
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

.prose pre {
  overflow-x: auto;
  padding: 18px 20px;
  margin: 22px 0;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.prose pre code {
  background: none;
  padding: 0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.prose code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--surface-soft);
  border-radius: 4px;
  padding: 1px 5px;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 34px 0;
}

.prose ul.task-list {
  list-style: none;
  padding-left: 0;
}

/* Not flex: the label after the checkbox is an anonymous flex item, and an
   anonymous item cannot be given min-width:0 by any selector, so a task line
   refuses to wrap and drags the page wider than the viewport. Absolute
   positioning keeps the checkbox aligned while the label stays normal,
   wrappable block text. */
.prose ul.task-list > li.task {
  display: block;
  position: relative;
  padding: 7px 0 7px 26px;
  border-bottom: 1px solid var(--border);
}

.prose ul.task-list > li.task:last-child {
  border-bottom: none;
}

/* The global `input, textarea` form rule sets width:100% plus field padding and
   a dark background. Under the old flex layout `flex: 0 0 auto` masked the
   width, so nothing here looked obviously wrong; once the checkbox is absolutely
   positioned that rule applies in full and the box stretches to the whole line.
   These are content checkboxes, not form fields, so opt them back out. */
.prose ul.task-list input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  accent-color: var(--accent);
}

.framework-prose h2 {
  margin-top: 38px;
}

.framework-prose h3 {
  margin-top: 26px;
  font-size: 1.02rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.download-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 28px;
}

.download-card h2 {
  margin: 6px 0 8px;
  font-size: 1.15rem;
}

.download-card p {
  margin: 0;
  color: var(--muted);
  max-width: 46ch;
}

/* Reserved video slots (COPY_REWRITE.md section 7 item 3). Designed in now so
   a recording drops into the existing layout instead of forcing a redesign. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 24px 0 8px;
}

.video-slot {
  margin: 0;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-badge {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.video-slot figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .framework-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .framework-grid,
  .video-grid {
    grid-template-columns: 1fr;
  }

  .download-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Scoped to .framework-prose so the existing cluster pages keep the browser
   defaults they were reviewed with. ol and ul are given identical metrics:
   these documents alternate between them and unequal indentation reads as a
   nesting level that is not there. */
.framework-prose ul,
.framework-prose ol {
  margin: 14px 0;
  padding-left: 24px;
}

.framework-prose li + li {
  margin-top: 6px;
}

.framework-prose li > ul,
.framework-prose li > ol {
  margin: 6px 0;
}

.framework-prose ul.task-list {
  padding-left: 0;
}