@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/font/LibreBaskerville-wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ink: #0d1116;
  --slate: #171d24;
  --slate-2: #202832;
  --ivory: #f0eee8;
  --paper: #e6e1d6;
  --paper-2: #d9d2c5;
  --muted: #5f6870;
  --muted-dark: #bcc2c4;
  --brass: #8e6e31;
  --brass-light: #b08d45;
  --line: rgba(13,17,22,.20);
  --line-dark: rgba(240,238,232,.18);
  --max: 86rem;
}
* { box-sizing: border-box; }
html { background: var(--ivory); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.62; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 99; padding: .65rem .9rem;
  background: var(--ink); color: var(--ivory); transform: translateY(-180%); transition: transform .15s ease;
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--brass-light); outline-offset: 4px; }
.shell { width: min(var(--max), 100%); margin: auto; padding-inline: clamp(1.25rem,5vw,5rem); }
.site-header { border-bottom: 1px solid var(--line); background: var(--ivory); }
.header-inner { min-height: 6.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wordmark { display: block; width: clamp(9rem,16vw,12rem); height: auto; }
.nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .55rem 1.25rem; }
.nav a {
  color: var(--muted); text-decoration: none; font-size: .69rem; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 700;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.status { display: inline-flex !important; align-items: center; gap: .6rem; color: var(--muted) !important; }
.status::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--brass); outline: 1px solid var(--brass); outline-offset: 3px; }

.hero { min-height: min(56rem, calc(100svh - 6.5rem)); display: grid; align-items: center; padding-block: clamp(3.5rem,8vh,7rem) clamp(6rem,16vh,12rem); }
.hero-copy { max-width: 78rem; }
.hero h1, .page-hero h1, h2 { font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; letter-spacing: -.045em; }
.hero h1 { max-width: 11ch; margin: 0; font-size: clamp(3.4rem,8.4vw,8rem); line-height: 1.02; letter-spacing: -.055em; }
.lede { max-width: 42rem; margin: clamp(2.4rem,6vw,5rem) 0 0; font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(1.35rem,2.4vw,2.2rem); line-height: 1.3; }
.rule { width: 5rem; height: 1px; margin: 2rem 0; background: var(--brass); }
.body-copy { max-width: 40rem; margin: 0; color: var(--muted); font-size: 1.06rem; }
.body-copy + .body-copy { margin-top: 1.15rem; }
.body-copy strong { color: var(--ink); font-weight: 600; }
.text-link { display: inline-block; margin-top: 1.35rem; font-weight: 650; }

.dark-band { background: var(--slate); color: var(--ivory); }
.dark-band .shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,28rem); gap: clamp(3rem,11vw,11rem); align-items: center; padding-block: clamp(5rem,12vw,10rem); }
.dark-band h2 { max-width: 12ch; margin: 0; font-size: clamp(2.4rem,5vw,5rem); line-height: 1.08; }
.dark-band p { max-width: 35rem; margin: 1.5rem 0 0; color: #c3c6c6; font-size: 1.08rem; }
.icon-figure { margin: 0; justify-self: end; }
.icon-figure img { display: block; width: min(12rem,35vw); margin-left: auto; }

.field-band { background: var(--paper); }
.field-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 2rem; padding-block: clamp(5rem,11vw,9rem); }
.field-note { grid-column: 6 / span 6; align-self: end; margin: 0; border-top: 2px solid var(--brass); padding-top: 1.2rem; }
.note-title, .eyebrow, .section-label, .field-note dt, footer { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.note-title, .eyebrow, .section-label { color: var(--brass); font-weight: 700; }
.field-note .note-title { margin: 0 0 2.2rem; }
.field-note dl { display: grid; grid-template-columns: 9rem 1fr; gap: .7rem 1rem; margin: 0; }
.field-note dt { color: var(--muted); font-weight: 700; }
.field-note dd { margin: 0; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.05rem; }
.field-extra { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(13,17,22,.16); }
.field-extra .note-title { margin-bottom: .7rem; }

.page-hero { padding-block: clamp(4rem,10vw,8rem) clamp(4rem,9vw,7rem); }
.page-hero .eyebrow { margin: 0 0 1.2rem; }
.page-hero h1 { max-width: 12ch; margin: 0; font-size: clamp(3rem,7vw,6.5rem); line-height: 1.04; }
.page-hero .intro { max-width: 44rem; margin: 2.2rem 0 0; color: var(--muted); font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(1.2rem,2vw,1.75rem); line-height: 1.45; }

.section { padding-block: clamp(4.5rem,9vw,8rem); border-top: 1px solid var(--line); }
.section.paper { background: var(--paper); }
.section.dark { background: var(--slate); color: var(--ivory); border-color: transparent; }
.section-grid { display: grid; grid-template-columns: minmax(10rem,.55fr) minmax(0,1.45fr); gap: clamp(2.5rem,7vw,7rem); }
.section-label { margin: .25rem 0 0; }
.section h2 { max-width: 13ch; margin: 0; font-size: clamp(2.25rem,4.6vw,4.5rem); line-height: 1.08; }
.section-intro { max-width: 44rem; margin: 1.6rem 0 0; color: var(--muted); font-size: 1.08rem; }
.dark .section-intro, .dark .copy, .dark .card p { color: var(--muted-dark); }
.copy { max-width: 46rem; color: var(--muted); font-size: 1.04rem; }
.copy p { margin: 0 0 1.2rem; }

.cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-top: 2.8rem; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--ivory); padding: 1.6rem; }
.card h3 { margin: 0 0 .65rem; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.12rem; font-weight: 400; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }
.card .state { display: block; margin-bottom: 1rem; color: var(--brass); font-size: .67rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.paper .card { background: var(--paper); }
.dark .cards { background: var(--line-dark); border-color: var(--line-dark); }
.dark .card { background: var(--slate-2); }

.principle-list { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.principle { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.principle .number { color: var(--brass); font: 700 .85rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.principle h3 { margin: 0 0 .45rem; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.15rem; font-weight: 400; }
.principle p { max-width: 42rem; margin: 0; color: var(--muted); }

.status-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-top: 2.5rem; background: var(--line); border: 1px solid var(--line); }
.status-cell { background: var(--ivory); padding: 1.35rem; }
.status-cell dt { color: var(--muted); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.status-cell dd { margin: .45rem 0 0; font-family: "Libre Baskerville", Georgia, serif; }

.domain-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 2.6rem; background: var(--line); border: 1px solid var(--line); }
.domain { background: var(--ivory); padding: 1.45rem; }
.domain-number { color: var(--brass); font: 700 .8rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.domain h3 { margin: .8rem 0 .55rem; font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; font-size: 1.1rem; }
.domain p { margin: 0; color: var(--muted); font-size: .94rem; }

.actions { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 2rem; align-items: center; }
.button { display: inline-block; padding: .78rem 1rem; border: 1px solid var(--ink); text-decoration: none; font-weight: 700; }
.button.primary { background: var(--ink); color: var(--ivory); }
.dark .button { border-color: var(--ivory); }
.dark .button.primary { background: var(--ivory); color: var(--ink); }

.creator-note { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.creator-note a { font-weight: 650; }

.site-footer { padding-block: 1.5rem; background: var(--ink); color: #bdc0be; }
.site-footer .footer-inner { display: flex; justify-content: space-between; gap: 1rem 2rem; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; }
.site-footer a { color: #d4d6d3; text-decoration: none; }
.site-footer a:hover { color: var(--ivory); }

.prose { max-width: 48rem; }
.prose h2 { margin: 2.8rem 0 1rem; font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; letter-spacing: -.03em; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--ink); }

@media (max-width: 900px) {
  .header-inner { align-items: flex-start; padding-block: 1.35rem; }
  .nav { max-width: 36rem; }
  .dark-band .shell, .section-grid { grid-template-columns: 1fr; }
  .icon-figure { justify-self: start; margin-top: 2rem; }
  .icon-figure img { margin-left: 0; width: 8rem; }
  .field-note { grid-column: 3 / span 9; }
  .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .domain-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .header-inner { display: block; }
  .wordmark { width: 9.5rem; }
  .nav { justify-content: flex-start; margin-top: 1.2rem; }
  .hero { min-height: auto; padding-block: 5.5rem 6.5rem; }
  .hero h1 { max-width: none; font-size: clamp(2.6rem,13vw,5rem); }
  .field-grid { display: block; padding-block: 5.5rem; }
  .field-note dl { grid-template-columns: 1fr; gap: .15rem 0; }
  .field-note dd { margin-bottom: 1rem; }
  .cards, .domain-grid, .status-grid { grid-template-columns: 1fr; }
  .site-footer .footer-inner { display: block; }
  .footer-links { margin-top: .8rem; }
}
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior: auto !important; transition: none !important; } }
@media print { .site-header, .site-footer { display: none; } .hero { min-height: auto; padding-block: 2rem; } }