@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --paper: #f6f3ec;
  --white: #fff;
  --ink: #111b22;
  --ink-soft: #43505a;
  --rule: #d7d2c7;
  --accent: #060349;
  --accent-dark: #04022e;
  --night: #060349;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.shell-wide { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }
.shell-reading { width: min(760px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); padding: 10px 14px; background: var(--white); }
.skip-link:focus { transform: none; }

.site-header { background: rgba(246, 243, 236, .96); }
.nav-row { min-height: 100px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.wordmark { justify-self: center; text-decoration: none; font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
.site-header nav { justify-self: start; display: flex; gap: 28px; }
.site-header nav a, .header-rss { position: relative; text-decoration: none; font-family: var(--mono); font-size: .84rem; font-weight: 550; letter-spacing: -.01em; }
.header-rss { justify-self: end; }
.site-header nav a::after, .header-rss::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--accent); transition: right .2s ease; }
.site-header nav a:hover::after, .site-header nav a[aria-current="page"]::after, .header-rss:hover::after { right: 0; }

.hero { padding: clamp(64px, 6vw, 78px) 0 clamp(68px, 6.5vw, 84px); text-align: center; }
.hero h1 { max-width: 990px; margin: 0 auto; font-family: var(--mono); font-size: clamp(2.35rem, 4vw, 3.4rem); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.hero h1 span { color: var(--accent); }

.section-heading { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--ink); }
.section-heading > p, .section-heading > h2 { margin: 0; text-transform: uppercase; font-family: var(--mono); font-size: .73rem; font-weight: 700; letter-spacing: .12em; }
.section-heading > span, .section-heading > a { color: var(--ink-soft); font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; }
.lead { padding-bottom: 118px; }
.lead-story { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); background: var(--night); color: var(--white); }
.lead-image { height: clamp(340px, 34vw, 410px); overflow: hidden; }
.lead-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lead-image:hover img { transform: scale(1.025); }
.lead-copy { align-self: center; padding: clamp(38px, 6vw, 75px); }
.eyebrow { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--ink-soft); text-transform: uppercase; font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .1em; }
.eyebrow span { color: var(--accent); }
.lead-copy .eyebrow { color: #a9b1b5; }
.lead-copy .eyebrow span { color: #c9c7ff; }
.lead-copy h2 { margin: 27px 0 18px; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.7rem); font-weight: 400; line-height: .97; letter-spacing: -.045em; }
.lead-copy h2 a { text-decoration: none; }
.lead-copy > p { margin: 0 0 34px; color: #c9ced1; font-family: var(--serif); font-size: 1.22rem; line-height: 1.5; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-width: 220px; padding: 15px 17px; border: 1px solid currentColor; color: inherit; text-decoration: none; text-transform: uppercase; font-family: var(--mono); font-size: .67rem; font-weight: 700; letter-spacing: .09em; transition: color .2s ease, background .2s ease; }
.button:hover { color: var(--white); background: var(--accent); border-color: var(--accent); }

.latest { padding-bottom: 130px; }
.latest .section-heading { margin-bottom: 30px; }
.latest .section-heading h2 { font-size: .78rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px 26px; }
.post-card { min-width: 0; }
.card-image { aspect-ratio: 16 / 10; display: block; overflow: hidden; background: #d8d3ca; text-decoration: none; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.post-card:hover .card-image img { transform: scale(1.035); }
.image-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(17,27,34,.2); font-family: var(--serif); font-size: 5rem; }
.card-copy { padding-top: 20px; }
.card-copy h3 { margin: 15px 0 10px; font-family: var(--serif); font-size: clamp(1.55rem, 2.5vw, 2.15rem); font-weight: 400; line-height: 1.06; letter-spacing: -.025em; }
.card-copy h3 a { text-decoration: none; }
.card-copy > p { min-height: 2.9em; margin: 0 0 18px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.03rem; line-height: 1.45; }
.read-link { text-transform: uppercase; font-family: var(--mono); font-size: .65rem; font-weight: 700; letter-spacing: .08em; }
.read-link span { display: inline-block; margin-left: 4px; transition: transform .2s ease; }
.read-link:hover span { transform: translateX(4px); }

.site-footer { color: #d4d8da; background: var(--night); }
.footer-grid { min-height: 280px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: center; gap: 50px; }
.wordmark-footer { color: var(--white); }
.footer-grid > div:first-child p { max-width: 320px; margin: 18px 0 0; color: #929da2; font-family: var(--serif); }
.footer-links { display: grid; gap: 12px; justify-self: center; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.copyright { justify-self: end; color: #929da2; font-family: var(--mono); font-size: .67rem; line-height: 1.7; text-align: right; text-transform: uppercase; letter-spacing: .06em; }

.article-header { max-width: 1020px; padding-top: clamp(70px, 10vw, 125px); padding-bottom: 55px; text-align: center; }
.article-label { margin: 0 0 24px; color: var(--accent-dark); text-transform: uppercase; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.article-header h1 { max-width: 970px; margin: 0 auto; font-family: var(--serif); font-size: clamp(3.2rem, 8vw, 7.7rem); font-weight: 400; line-height: .88; letter-spacing: -.065em; text-wrap: balance; }
.article-deck { max-width: 680px; margin: 34px auto 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.38; text-wrap: balance; }
.article-meta { margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 34px; color: var(--ink-soft); text-transform: uppercase; font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; }
.article-meta strong { color: var(--ink); }
.article-feature { aspect-ratio: 2 / 1; overflow: hidden; background: #ddd7cd; }
.article-feature img { width: 100%; height: 100%; object-fit: cover; }
.article-body { padding-top: clamp(55px, 8vw, 90px); padding-bottom: 80px; font-family: var(--serif); font-size: clamp(1.16rem, 2vw, 1.34rem); line-height: 1.68; }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.35em; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5 { color: var(--ink); font-family: var(--sans); letter-spacing: -.035em; line-height: 1.08; }
.article-body h2 { margin: 2.1em 0 .7em; font-size: 2.15rem; }
.article-body h3 { margin: 1.8em 0 .65em; font-size: 1.55rem; }
.article-body h4, .article-body h5 { margin: 1.6em 0 .6em; font-size: 1.15rem; }
.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-left: 1.3em; line-height: 1.42; }
.article-body li { padding-left: .2em; }
.article-body blockquote { margin: 2.2em 0; padding: .15em 0 .15em 1.2em; border-left: 4px solid var(--accent); color: var(--ink-soft); font-size: 1.35em; font-style: italic; line-height: 1.42; }
.article-body hr { width: 100%; margin: 3em 0; border: 0; border-top: 1px solid var(--ink); }
.article-body a { color: var(--accent-dark); }
.article-body table { width: 100%; margin: 2em 0; border-collapse: collapse; font-family: var(--sans); font-size: .78em; line-height: 1.45; }
.article-body .responsive-table { margin: 2em 0; }
.article-body .responsive-table > table { margin: 0; }
.article-body .table-cards { display: none; }
.article-body th, .article-body td { padding: 11px 12px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.article-body th { background: #e9e4da; }
.article-body pre { max-width: 100%; overflow-x: auto; padding: 20px; color: #eef2f3; background: var(--night); font-family: var(--mono); font-size: .75em; }
.article-body code { font-family: var(--mono); font-size: .84em; }
.article-footer { padding: 34px 0 110px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.article-footer p { margin: 0; color: var(--ink-soft); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.tag-list { margin-top: 10px !important; }
.tag-list a { color: var(--accent-dark); }

.listing { padding-top: 90px; padding-bottom: 130px; }
.listing-header { margin-bottom: 60px; }
.listing-header h1, .not-found h1 { margin: 0; font-family: var(--serif); font-size: clamp(3.5rem, 9vw, 7rem); font-weight: 400; line-height: .92; letter-spacing: -.06em; }
.not-found { min-height: 65vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.not-found > p:not(.article-label) { color: var(--ink-soft); font-family: var(--serif); font-size: 1.25rem; }

@media (max-width: 900px) {
  .nav-row { grid-template-columns: auto 1fr; }
  .wordmark { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-header nav { grid-column: 2; grid-row: 1; justify-self: end; }
  .header-rss { display: none; }
  .lead-story { grid-template-columns: 1fr; }
  .lead-image { height: 320px; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.3fr 1fr; }
  .copyright { grid-column: 1 / -1; justify-self: start; padding-bottom: 35px; text-align: left; }
}

@media (max-width: 620px) {
  .shell, .shell-wide, .shell-reading { width: min(100% - 30px, 1180px); }
  .nav-row { min-height: 82px; gap: 18px; }
  .site-header nav { gap: 15px; }
  .site-header nav a { font-size: .72rem; }
  .hero { padding: 56px 0 62px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .lead { padding-bottom: 85px; }
  .lead-image { height: 250px; }
  .lead-copy { padding: 34px 26px 42px; }
  .post-grid { grid-template-columns: 1fr; gap: 48px; }
  .card-copy > p { min-height: 0; }
  .footer-grid { display: block; padding-top: 65px; padding-bottom: 55px; }
  .footer-links { margin: 42px 0; }
  .article-header { text-align: left; }
  .article-header h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
  .article-deck { margin-left: 0; }
  .article-meta { justify-content: flex-start; }
  .article-feature { width: 100%; aspect-ratio: 4 / 3; }
  .article-body { font-size: 1.12rem; }
  .article-body table { display: block; overflow-x: auto; }
  .article-body .responsive-table > table { display: none; }
  .article-body .table-cards { display: grid; gap: 16px; }
  .article-body .table-card { margin: 0; border: 1px solid var(--rule); background: rgba(255, 255, 255, .35); }
  .article-body .table-card-field { padding: 14px 15px 15px; }
  .article-body .table-card-field + .table-card-field { border-top: 1px solid var(--rule); }
  .article-body .table-card dt { margin: 0 0 6px; color: var(--accent-dark); font-family: var(--mono); font-size: .64rem; font-weight: 700; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; }
  .article-body .table-card dd { margin: 0; font-family: var(--sans); font-size: .9em; line-height: 1.45; }
  .article-footer { align-items: flex-start; flex-direction: column; }
}

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

@media print {
  @page { margin: .65in; }
  body { color: #000; background: #fff; font-family: var(--serif); }
  .skip-link, .site-header, .site-footer, .article-footer { display: none !important; }
  .shell, .shell-wide, .shell-reading { width: auto; max-width: 6.2in; margin-inline: auto; }
  .article-header { padding: 0 0 24pt; text-align: left; }
  .article-label { margin-bottom: 12pt; }
  .article-header h1 { max-width: none; font-size: 36pt; line-height: 1.02; letter-spacing: -.04em; }
  .article-deck { max-width: none; margin: 14pt 0 0; font-size: 16pt; }
  .article-meta { justify-content: flex-start; margin-top: 14pt; }
  .article-feature { break-inside: avoid; }
  .article-body { padding: 24pt 0 0; font-size: 11pt; line-height: 1.55; }
  .article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5 { break-after: avoid-page; }
  .article-body p { widows: 3; orphans: 3; }
  .article-body li, .article-body blockquote, .article-body pre, .article-body figure, .article-body tr { break-inside: avoid; }
  .article-body thead { display: table-header-group; }
  .article-body .responsive-table > table { display: table; overflow: visible; }
  .article-body .table-cards { display: none; }
  .article-body a { color: #000; }
}