:root {
  --background:#101112;
  --foreground:#e9e8e3;
  --muted:#a1a29e;
  --line:#303235;
  --accent:#c2cba9;
  color-scheme:dark;
}

* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:Arial,Helvetica,sans-serif;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection {
  background:#48513c;
  color:#fff;
}
a {
  color:inherit;
  text-decoration:none;
}
a:hover {
  color:var(--accent);
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px;
}
button,input {
  font:inherit;
}
.shell {
  width:min(100% - 3rem,960px);
  margin-inline:auto;
}
.site-header {
  flex-wrap:wrap;
  padding-block:2.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.brand-lockup {
  display:flex;
  align-items:center;
  gap:1rem;
}
.header-squid {
  width:clamp(74px,11vw,110px);
  height:auto;
  object-fit:contain;
  transform:rotate(-7deg);
  opacity:.92;
}
.brand {
  font-weight:600;
  letter-spacing:-.04em;
  font-size:1.125rem;
}
.navigation {
  flex-wrap:wrap;
  display:flex;
  gap:2rem;
  font-size:.875rem;
  color:var(--muted);
}
.navigation a {
  padding-block:.5rem;
}
.skip {
  position:absolute;
  left:1rem;
  top:-8rem;
  padding:.5rem 1rem;
  background:var(--foreground);
  color:var(--background);
  z-index:10;
}
.skip:focus {
  top:1rem;
}
.home-intro {
  padding-block:6rem 5.5rem;
  max-width:760px;
}
.eyebrow {
  font-size:.75rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.5rem;
}
h1,h2,h3,p {
  margin-top:0;
}
h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.055em;
  font-size:clamp(2.75rem,6.5vw,5rem);
  line-height:1.13;
  margin-bottom:1.75rem;
}
.home-intro h1 span {
  display:block;
  color:var(--muted);
}
.intro-copy {
  font-size:1.125rem;
  max-width:560px;
  color:var(--muted);
  line-height:1.8;
}
.text-link {
  display:inline-block;
  font-size:.875rem;
  border-bottom:1px solid #646b58;
  padding-block:.3rem;
}
.text-link span {
  margin-left:.8rem;
  color:var(--accent);
}
.section {
  padding-block:2.5rem 3.5rem;
  border-top:1px solid var(--line);
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  margin-bottom:1.75rem;
}
.section-heading h2,.small-heading {
  font-weight:400;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
  color:var(--muted);
}
.section-heading a {
  font-size:.875rem;
}
.note-row {
  display:grid;
  grid-template-columns:125px 1fr auto;
  gap:1.5rem;
  padding-block:1.5rem;
  border-top:1px solid var(--line);
  align-items:baseline;
}
.note-row:first-child {
  border-top:0;
}
.note-row time,.note-meta {
  font-size:.8125rem;
  color:var(--muted);
}
.note-row h3 {
  font-size:1.1875rem;
  font-weight:400;
  letter-spacing:-.02em;
  margin:0 0 .35rem;
}
.note-row p {
  font-size:.875rem;
  color:var(--muted);
  margin:0;
}
.arrow {
  color:var(--muted);
}
.focus-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem 4rem;
}
.focus-grid h3 {
  font-size:1rem;
  font-weight:400;
  margin:0 0 .5rem;
}
.focus-grid p {
  font-size:.875rem;
  color:var(--muted);
  margin:0;
}
.site-footer {
  border-top:1px solid var(--line);
  margin-top:2rem;
  padding-block:2rem 3rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.8125rem;
  color:var(--muted);
}
.footer-links {
  display:flex;
  gap:1.5rem;
}
.page-intro {
  padding-block:5rem 2.5rem;
  max-width:700px;
}
.page-intro h1 {
  font-size:clamp(2.75rem,6vw,4rem);
}
.page-intro p:not(.eyebrow) {
  color:var(--muted);
  font-size:1.125rem;
}
.prose {
  max-width:650px;
  margin:0 auto 5rem;
  font-size:1.0625rem;
  line-height:1.9;
}
.prose h2 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:1.75rem;
  letter-spacing:-.025em;
  margin:2.75rem 0 1rem;
  color:var(--foreground);
}
.prose p,.prose li {
  color:#b8b9b5;
}
.prose blockquote {
  border-left:2px solid var(--accent);
  padding-left:1.5rem;
  margin:2rem 0;
  font-family:Georgia,serif;
  font-size:1.4rem;
}
.prose ul {
  padding-left:1.4rem;
}
.prose a {
  text-decoration:underline;
  text-underline-offset:4px;
}
.article-header {
  max-width:650px;
  margin-inline:auto;
}
.article-header h1 {
  font-size:clamp(2.5rem,6vw,3.75rem);
}
.article-meta {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.8125rem;
}
.sample {
  border-left:2px solid #636b55;
  padding:.5rem 1rem;
  margin-block:1.5rem;
  color:var(--muted);
  font-size:.875rem;
}
.back {
  font-size:.875rem;
  color:var(--muted);
}
.empty-page {
  min-height:60vh;
}
.article-end {
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  margin-top:3rem;
  font-size:.875rem;
}
.article-end p {
  font-size:.875rem;
}
.note-list {
  margin:0;
  padding:0;
  list-style:none;
}
.notes-caption {
  font-size:.8125rem;
  color:var(--muted);
  margin-bottom:1rem;
}
.page-prose {
  margin-left:0;
}
.page-prose>p:first-child {
  font-size:1.1875rem;
}
.rule-label {
  display:flex;
  gap:.75rem;
  align-items:center;
}
.rule-label::before {
  content:'';
  width:1.5rem;
  height:1px;
  background:var(--accent);
}
@media(max-width:600px) {
  .shell {
    width:calc(100% - 2.5rem);
  }
  .site-header {
    flex-wrap:wrap;
    padding-block:1.75rem;
    gap:1rem;
  }
  .header-squid { width:76px; }
  .navigation {
    flex-wrap:wrap;
    gap:1.25rem;
  }
  .home-intro {
    padding-block:4rem 4rem;
  }
  .note-row {
    grid-template-columns:1fr auto;
    gap:.4rem 1rem;
  }
  .note-row time {
    grid-column:1/-1;
  }
  .note-row h3 {
    font-size:1.125rem;
  }
  .focus-grid {
    grid-template-columns:1fr;
    gap:1.75rem;
  }
  .site-footer {
    flex-direction:column;
    gap:1rem;
  }
  .page-intro {
    padding-top:3rem;
  }
  .section {
    padding-block:2rem 2.5rem;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}

.accent{color:var(--accent)}.prose img{display:block;max-width:100%;height:auto;border-radius:2px}.prose figure{margin:2rem 0}.prose code{overflow-wrap:anywhere}.prose h3{margin-top:2rem}.prose p{overflow-wrap:anywhere}