@font-face { font-family: "Big Shoulders Display"; src: url("../assets/fonts/big-shoulders-display-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../assets/fonts/space-mono-regular-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../assets/fonts/space-mono-bold-latin.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../assets/fonts/anton-latin.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  --ink: #11181d;
  --paper: #f3f1ea;
  --paper-deep: #dfe5e2;
  --surface: #fcfbf6;
  --text: #17262c;
  --muted: #59676b;
  --moss: #8f3038;
  --rust: #d93636;
  --blue: #2f9fc4;
  --rope: #e8b923;
  --line: rgba(23, 51, 61, 0.2);
  --sans: "Barlow Condensed", "Arial Narrow", sans-serif;
  --serif: "Anton", "Big Shoulders Display", Impact, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --content: 76rem;
  --reading: 45rem;
  --s1: .4rem;
  --s2: .7rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.3rem;
  --s6: 3.6rem;
  --s7: 5.6rem;
  --radius: .55rem;
  --shadow: 0 1.25rem 3rem rgba(55, 42, 25, .09);
  --focus: 0 0 0 .25rem rgba(164, 79, 50, .3);
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: radial-gradient(circle at 82% 8%, rgba(39,139,174,.13), transparent 28rem), radial-gradient(circle at 4% 72%, rgba(57,118,83,.09), transparent 32rem), var(--paper); color: var(--text); font: 1.08rem/1.55 var(--sans); letter-spacing: -.008em; -webkit-font-smoothing: antialiased; }
body::before { position: fixed; inset: 0; z-index: -1; content: ""; opacity: .07; pointer-events: none; background-image: radial-gradient(circle, var(--ink) .7px, transparent .8px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 7px 7px, 160px 160px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--rust); }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible { outline: 0; box-shadow: var(--focus); }
button, select { font: inherit; }
p, h1, h2, h3, dl, figure { margin-top: 0; }
h1, h2, h3 { line-height: 1.02; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: .008em; text-transform: uppercase; }
h1 { font-size: clamp(4rem, 7.5vw, 7.6rem); }
h2 { font-size: clamp(2.8rem, 6vw, 5.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-header, .site-footer, .page-shell { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.site-header { display: flex; min-height: 5.25rem; align-items: center; gap: var(--s5); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; color: var(--text); font: 400 1.05rem var(--serif); letter-spacing: .035em; text-decoration: none; text-transform: uppercase; }
.wordmark > span:last-child { padding: .08rem .4rem; background: var(--rust); color: var(--paper); box-shadow: .18rem .18rem 0 var(--ink); transform: rotate(-2deg) skewX(-5deg); }
.wordmark-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 .75rem var(--mono); }
.desktop-nav { display: flex; align-items: center; gap: 1.35rem; }
.desktop-nav a, .mobile-nav a { color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--rust); }
.nav-github { padding-left: 1.35rem; border-left: 1px solid var(--line); }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { display: grid; min-width: 2.8rem; min-height: 2.8rem; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font: 700 .7rem var(--mono); list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav-menu { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 20; display: grid; min-width: 13rem; padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.mobile-nav-menu a { padding: .8rem; }
.eyebrow, .annotation, .status-label, .tag-list li { font-family: var(--mono); font-size: .65rem; letter-spacing: .075em; text-transform: uppercase; }
.eyebrow { margin-bottom: var(--s3); color: var(--rust); }
.eyebrow::before { margin-right: .55em; content: "✦"; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr); gap: var(--s6); align-items: end; margin-bottom: var(--s6); }
.section-heading h2, .section-heading > p { margin-bottom: 0; }
.section-heading > p { color: var(--muted); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; padding: .7rem 1.15rem; border: 2px solid var(--ink); border-radius: 0; box-shadow: .28rem .28rem 0 var(--ink); font-size: .88rem; font-weight: 700; letter-spacing: .045em; text-decoration: none; text-transform: uppercase; transform: skewX(-7deg); transition: background 160ms, color 160ms, box-shadow 160ms; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.button:hover { box-shadow: .42rem .42rem 0 var(--rust); }
.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: var(--rust); }
.text-link { color: var(--rust); font: 700 .74rem var(--mono); }
.tag-list { display: flex; flex-wrap: wrap; gap: .42rem; margin: 0; padding: 0; list-style: none; }
.tag-list li { padding: .32rem .65rem; border: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: .6rem; clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); }
.status-label { color: var(--moss); }
.rope-rule { height: .5rem; border: 0; background: url("../assets/images/rope.png") center 47% / 4rem auto repeat-x; filter: sepia(.45) saturate(.65); opacity: .4; }
.empty-state, .error-state { padding: var(--s5); border: 1px dashed var(--rope); border-radius: var(--radius); background: rgba(255, 250, 240, .58); }
.error-state { border-color: var(--rust); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.site-footer { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); padding: var(--s5) 6rem var(--s7) 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .77rem; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); }
.footer-note { margin: 0; }
@media (max-width: 60rem) { .desktop-nav { display: none; } .mobile-nav { display: block; } .site-header { min-height: 4.5rem; } .section-heading { grid-template-columns: 1fr; gap: var(--s2); } .site-footer { grid-template-columns: 1fr; padding-right: 4.5rem; padding-bottom: 6.5rem; } .footer-nav { justify-content: flex-start; } }
@media (max-width: 24rem) { .site-header, .site-footer, .page-shell { width: min(calc(100% - 1.25rem), var(--content)); } .button-row { display: grid; } }
@media (prefers-contrast: more) { :root { --line: rgba(19, 23, 18, .5); --muted: #394038; } .button, .tag-list li { border-width: 2px; } }
@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; } }