:root {
  --paper: #f4f2ed;
  --paper-soft: #ebe8e1;
  --ink: #1c1d1b;
  --soft: #666762;
  --line: rgba(28, 29, 27, .18);
  --line-soft: rgba(28, 29, 27, .09);
  --signal: #557268;
  --gutter: clamp(22px, 4vw, 58px);
  --content: 1360px;
  --reading: 720px;
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: none; background: var(--paper); overflow-x: hidden; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(28,29,27,.035) 50%, transparent calc(50% + .5px)),
    var(--paper);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.013em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:focus-visible { outline: 1px solid var(--signal); outline-offset: 5px; }
::selection { background: rgba(85,114,104,.2); }

.skip-link {
  position: fixed; z-index: 100; top: 14px; left: 14px; padding: 11px 14px;
  color: var(--paper); background: var(--ink); text-decoration: none;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
.shell { width: min(100%, calc(var(--content) + (2 * var(--gutter)))); margin-inline: auto; padding-inline: var(--gutter); }
.meta { margin: 0; color: var(--soft); font-size: 10px; line-height: 1.45; letter-spacing: .15em; text-transform: uppercase; }

.site-nav {
  display: grid; grid-template-columns: 2fr 3fr 7fr; gap: 24px; align-items: center;
  min-height: 82px; border-bottom: 1px solid var(--line);
}
.brand { font-size: 18px; font-weight: 540; letter-spacing: -.055em; text-decoration: none; }
.nav-label { justify-self: start; }
.nav-links { justify-self: end; display: flex; align-items: center; gap: clamp(18px, 2.5vw, 38px); font-size: 12px; }
.nav-links a { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; color: var(--soft); border-bottom: 1px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-color: currentColor; }

.article-hero {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  padding-top: clamp(82px, 11vw, 168px); padding-bottom: clamp(80px, 10vw, 150px);
  border-bottom: 1px solid var(--line);
}
.article-kicker { grid-column: 1 / span 2; }
.article-title { grid-column: 3 / span 7; margin: 0; max-width: 12ch; font-size: clamp(54px, 7vw, 104px); line-height: .94; font-weight: 420; letter-spacing: -.06em; text-wrap: balance; }
.article-deck { grid-column: 10 / -1; align-self: end; margin: 0; max-width: 28ch; color: var(--soft); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.43; text-wrap: pretty; }
.article-byline { grid-column: 3 / span 7; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 22px; color: var(--soft); font-size: 12px; line-height: 1.5; }

.article-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-top: clamp(68px, 8vw, 120px); padding-bottom: clamp(88px, 10vw, 150px); }
.article-aside { grid-column: 1 / span 2; position: sticky; top: 32px; align-self: start; }
.article-aside nav { display: grid; gap: 12px; margin-top: 26px; font-size: 11px; line-height: 1.35; }
.article-aside a { color: var(--soft); text-decoration: none; }
.article-aside a:hover { color: var(--ink); }
.article-body { grid-column: 3 / span 7; max-width: var(--reading); }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { margin: 4.2rem 0 1.2rem; font-size: clamp(31px, 3.2vw, 48px); line-height: 1.02; font-weight: 430; letter-spacing: -.045em; text-wrap: balance; }
.article-body h3 { margin: 2.7rem 0 .85rem; font-size: clamp(22px, 2vw, 29px); line-height: 1.12; font-weight: 460; letter-spacing: -.032em; text-wrap: balance; }
.article-body p, .article-body li { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.66; color: #444540; text-wrap: pretty; }
.article-body p { margin: 0 0 1.45rem; }
.article-body ul, .article-body ol { margin: 1.4rem 0 2rem; padding-left: 1.25rem; }
.article-body li { margin: .65rem 0; padding-left: .3rem; }
.article-body strong { color: var(--ink); font-weight: 560; }
.article-body blockquote { margin: 3.2rem 0; padding: 1.8rem 0 1.8rem 2rem; border-left: 1px solid var(--signal); font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 43px); line-height: 1.08; letter-spacing: -.035em; }
.article-body blockquote p { margin: 0; color: var(--ink); font: inherit; }
.answer {
  margin: 0 0 3.5rem; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: clamp(20px, 1.8vw, 25px) !important; line-height: 1.48 !important; color: var(--ink) !important;
}
.source-note { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.source-note p, .source-note li { font-size: 14px; line-height: 1.55; }
.article-callout { grid-column: 10 / -1; align-self: start; padding-top: 20px; border-top: 1px solid var(--line); }
.article-callout p { margin: 0 0 18px; color: var(--soft); font-size: 14px; line-height: 1.55; }

.comparison { width: 100%; margin: 2.5rem 0 3rem; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.comparison th, .comparison td { padding: 16px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.comparison th { color: var(--ink); font-weight: 560; }
.comparison td { color: var(--soft); }

.architecture { margin: 3rem 0; padding: clamp(26px, 4vw, 46px); color: var(--paper); background: var(--ink); }
.architecture .meta { color: rgba(244,242,237,.55); }
.architecture-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 28px; background: rgba(244,242,237,.16); border: 1px solid rgba(244,242,237,.16); }
.architecture-grid div { min-height: 150px; padding: 20px; background: var(--ink); }
.architecture-grid h3 { margin: 0 0 28px; color: var(--paper); font-size: 20px; }
.architecture-grid p { margin: 0; color: rgba(244,242,237,.62); font-size: 14px; line-height: 1.5; }

.notes-hero { padding-top: clamp(82px, 11vw, 168px); padding-bottom: clamp(78px, 9vw, 132px); border-bottom: 1px solid var(--line); }
.notes-hero h1 { margin: 30px 0 0; max-width: 9ch; font-size: clamp(62px, 8vw, 118px); line-height: .92; font-weight: 420; letter-spacing: -.062em; }
.notes-hero p:last-child { max-width: 42ch; margin: 36px 0 0 50%; color: var(--soft); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; }
.notes-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 24px;
  padding-top: 64px;
  padding-bottom: 128px;
}
.note-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
  min-height: 208px;
  padding: 38px 0 44px;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.note-card:last-child { border-bottom: 1px solid var(--line); }
.note-card .meta { grid-column: 1 / span 2; padding-top: 5px; }
.note-card h2 {
  grid-column: 3 / span 5;
  margin: 0;
  max-width: 15ch;
  font-size: clamp(34px, 3.1vw, 49px);
  line-height: 1.02;
  font-weight: 430;
  letter-spacing: -.048em;
  text-wrap: balance;
}
.note-card p {
  grid-column: 9 / -1;
  margin: 5px 0 0;
  max-width: 38ch;
  color: var(--soft);
  font-size: 16px;
  line-height: 1.58;
  text-wrap: pretty;
}
.note-card h2, .note-card p { transition: color .24s var(--ease); }
.note-card:hover h2 { color: var(--signal); }
.note-card:hover p { color: var(--ink); }

.next-reading { padding-top: clamp(70px, 8vw, 118px); padding-bottom: clamp(80px, 9vw, 132px); color: var(--paper); background: var(--ink); }
.next-reading .meta { color: rgba(244,242,237,.55); }
.next-reading-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 50px; }
.next-reading h2 { grid-column: 1 / span 5; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5vw, 74px); line-height: 1; font-weight: 400; letter-spacing: -.045em; }
.next-links { grid-column: 7 / -1; display: grid; }
.next-links a { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 20px 0; color: var(--paper); border-top: 1px solid rgba(244,242,237,.18); text-decoration: none; font-size: 15px; }
.next-links a:last-child { border-bottom: 1px solid rgba(244,242,237,.18); }

.site-footer { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; min-height: 104px; border-top: 1px solid var(--line); color: var(--soft); font-size: 11px; }
.footer-brand { grid-column: 1 / span 3; color: var(--ink); font-size: 16px; letter-spacing: -.05em; text-decoration: none; }
.footer-note { grid-column: 4 / span 5; }
.footer-top { grid-column: 11 / -1; justify-self: end; text-decoration: none; }

@media (max-width: 980px) {
  .site-nav { grid-template-columns: 1fr auto; }
  .nav-label { display: none; }
  .nav-links { gap: 20px; }
  .article-kicker { grid-column: 1 / span 3; }
  .article-title { grid-column: 4 / -1; }
  .article-deck { grid-column: 4 / span 7; margin-top: 18px; }
  .article-byline { grid-column: 4 / -1; }
  .article-aside { display: none; }
  .article-body { grid-column: 2 / span 8; }
  .article-callout { grid-column: 10 / -1; }
  .note-card { grid-template-columns: repeat(8, 1fr); min-height: 0; }
  .note-card .meta { grid-column: 1 / span 2; }
  .note-card h2 { grid-column: 3 / -1; max-width: 16ch; }
  .note-card p { grid-column: 3 / span 5; margin-top: 14px; max-width: 42ch; }
}

@media (max-width: 700px) {
  .shell { padding-inline: 22px; }
  .site-nav { min-height: 72px; }
  .nav-links a:not(:last-child) { display: none; }
  .article-hero { display: block; padding-top: 70px; padding-bottom: 72px; }
  .article-title { margin-top: 28px; max-width: 11ch; font-size: clamp(50px, 15vw, 74px); }
  .article-deck { margin-top: 38px; max-width: 31ch; }
  .article-byline { margin-top: 28px; }
  .article-layout { display: block; padding-top: 58px; padding-bottom: 88px; }
  .article-callout { margin-top: 64px; }
  .article-body h2 { margin-top: 3.5rem; }
  .comparison { display: block; overflow-x: auto; }
  .architecture-grid { grid-template-columns: 1fr; }
  .notes-hero h1 { font-size: clamp(58px, 19vw, 84px); }
  .notes-hero p:last-child { margin-left: 0; }
  .notes-grid { display: block; padding-top: 44px; }
  .note-card { display: block; min-height: 0; padding: 28px 0 40px; }
  .note-card h2 { margin-top: 22px; }
  .note-card p { margin-top: 18px; }
  .next-reading-grid { display: block; }
  .next-reading h2 { max-width: 9ch; margin-bottom: 52px; }
  .site-footer { grid-template-columns: 1fr auto; min-height: 90px; }
  .footer-brand { grid-column: 1; }
  .footer-note { display: none; }
  .footer-top { grid-column: 2; }
}

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