:root {
  --paper: #f5f8f8; --ink: #202b26; --muted: #69746d; --green: #49695b;
/*   --paper: #f6f5ef; --ink: #202b26; --muted: #69746d; --green: #49695b; */
  --green-dark: #2d4d40; --line: #d7d9d0; --wash: #eaede5;
  --display: Futura, "Futura PT", "Trebuchet MS", sans-serif;
  --reading: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.7 var(--reading); text-rendering: optimizeLegibility; }
a { color: var(--green-dark); text-decoration-color: color-mix(in srgb, var(--green) 45%, transparent); text-underline-offset: .15em; }
a:hover { color: var(--ink); text-decoration-color: currentColor; }
.wrap { width: min(100% - 3rem, 1120px); margin: 0 auto; }
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand, h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
.brand { color: var(--ink); font-size: 1.15rem; font-weight: 500; text-decoration: none; }
nav { display: flex; gap: 1.35rem; }
nav a { color: var(--ink); font: 500 .68rem/1 var(--display); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
nav a:hover { color: var(--green); }
main.wrap { min-height: calc(100vh - 160px); }
.eyebrow, .date { margin: 0; color: var(--green); font: 500 .68rem/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.intro { max-width: 730px; padding: clamp(4.5rem, 11vw, 9rem) 0 clamp(3.25rem, 3vw, 5.5rem); }
.intro h1 { max-width: 650px; margin: .65rem 0 1rem; font-size: clamp(3rem, 5vw, 6.1rem); line-height: .94; }
.intro > p:last-child { max-width: 31rem; margin: 0; color: var(--muted); font-size: 1.12rem; }
.post-summary { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.2rem 2rem; max-width: 860px; padding: 1.75rem 0 2rem; border-top: 1px solid var(--line); }
.post-summary .date { padding-top: .45rem; }
.post-summary h2 { grid-column: 2; margin: 0; font-size: clamp(1.65rem, 3vw, 2.3rem); line-height: 1; }
.post-summary h2 a { color: var(--ink); text-decoration: none; }
.post-summary h2 a:hover { color: var(--green); }
.post-summary > div, .post-summary .read-more { grid-column: 2; }
.post-summary > div p { max-width: 43rem; margin: 0; color: #465149; }
.read-more { width: fit-content; color: var(--green-dark); font: 700 .72rem/1 var(--display); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.read-more:hover { transform: translateX(3px); }
.pagination { justify-content: space-between; max-width: 860px; margin: 2rem 0 5rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.post { padding: clamp(4rem, 8vw, 7rem) 0 5.5rem; }
.story-header { max-width: 800px; margin: 0 0 clamp(1rem, 1vw, 2.75rem); }
.story-header h1 { max-width: 900px; margin: .7rem 0 1.25rem; font-size: clamp(2.7rem, 3.5vw, 5.25rem); line-height: .98; }
.deck { max-width: 42rem; color: var(--muted); font-size: 1.25rem; line-height: 1.5; }.deck p { margin: 0; }
.story-hero { width: 100%; margin: 0 0 clamp(3rem, 7vw, 5.5rem); }
.story-hero img { display: block; width: 100%; max-height: min(72vh, 760px); object-fit: cover; object-position: center; }
.story-layout { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: clamp(1rem, 1vw, 3rem); align-items: start; }
.story-rail { grid-column: 1; min-width: 0; }
.story-contents { position: sticky; top: 2rem; border-top: 1px solid var(--green); padding-top: .65rem; }
.story-contents ol { margin: .9rem 0 0; padding: 0; list-style: none; }
.story-contents li { margin: 0 0 .55rem; }
.story-contents a { color: var(--muted); font-size: .8rem; line-height: 1.25; text-decoration: none; }
.story-contents a:hover { color: var(--green-dark); }
@media (min-width: 900px) {
  .story.has-toc:not(.has-gallery) .story-contents { width: 7rem; transform: translateX(-100%); }
  .story.has-gallery.has-toc .story-rail { position: relative; }
  .story.has-gallery.has-toc .story-contents { position: absolute; top: 0; right: calc(100% + 1.25rem); width: 7rem; transform: none; }
  .story.has-gallery.has-toc .story-gallery { margin-top: 0; }
}
.post-body { grid-column: 1 / -1; max-width: 720px; min-width: 0; }
.story.has-toc .post-body { grid-column: 2; max-width: 780px; }
.story-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: .8rem; }
.story-gallery figure { margin: 0; cursor: zoom-in; }
.story-gallery figure:first-child { grid-column: 1 / -1; }
.story-gallery a, .story-gallery img { display: block; }
.story-gallery img { width: 100%; height: 100%; max-height: none; aspect-ratio: 1 / 1; object-fit: cover; }
.story-gallery figure:first-child img { aspect-ratio: auto; max-height: 680px; }
.image-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: clamp(1.25rem, 4vw, 4rem); background: rgba(20, 29, 25, .96); cursor: zoom-out; }
.image-viewer::backdrop { background: rgba(20, 29, 25, .96); }
.image-viewer[open] { display: grid; place-items: center; }
.image-viewer img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 5rem); object-fit: contain; cursor: default; }
.image-viewer__close { position: fixed; top: 1.2rem; right: 1.4rem; border: 0; padding: .35rem .55rem; background: transparent; color: #f6f5ef; font: 500 .7rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.story.has-gallery .story-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.story.has-gallery .story-gallery { margin-top: 2rem; }
.story.has-gallery:not(.has-toc) .story-gallery { margin-top: 0; }
.story.has-gallery .post-body { grid-column: 2; max-width: 620px; }
.story.has-gallery .post-body img { float: none; width: auto; margin: 0; }
.post-body::after { content: ""; display: table; clear: both; }
.post-body > :first-child { margin-top: 0; }
.post-body p, .post-body li { max-width: 43rem; }
.post-body h1, .post-body h2, .post-body h3 { clear: both; margin: 2.8em 0 .65em; color: var(--ink); line-height: 1.05; }
.post-body h1 { font-size: 2.1rem; }.post-body h2 { font-size: 1.5rem; }.post-body h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.post-body img { float: left; width: min(41%, 320px); height: auto; margin: .45rem clamp(1.25rem, 3vw, 2.5rem) 1.4rem 0; filter: saturate(.94); }
.post-body img + img { margin-left: 0; }
.post-body blockquote { clear: both; max-width: 40rem; margin: 2.25rem 0; padding: .2rem 0 .2rem 1.3rem; border-left: 2px solid var(--green); color: #4c5750; font-size: 1.08rem; }
.post-body ul, .post-body ol { padding-left: 1.25rem; }.post-body li + li { margin-top: .35rem; }
.post-body pre, .post-body .highlight { clear: both; overflow-x: auto; margin: 2rem 0; padding: 1.1rem 1.25rem; background: #dadbd6; border: 1px solid #d8dbd1; border-radius: 2px; font-size: .82rem; line-height: 1.55; }.post-body .highlight pre { margin: 0; padding: 0; overflow: visible; border: 0; background: transparent; }
.post-body :not(pre) > code { padding: .08em .3em; background: var(--wash); font-size: .84em; }
.post-body table { clear: both; width: 100%; margin: 2rem 0; border-collapse: collapse; font-size: .9rem; }
.post-body th { color: var(--green-dark); font-family: var(--display); letter-spacing: .02em; text-align: left; }
.post-body td, .post-body th { padding: .55rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.post-body tr:nth-child(even) { background: color-mix(in srgb, var(--wash) 55%, transparent); }
.archive { max-width: 890px; padding: clamp(4.5rem, 10vw, 8rem) 0 5rem; }
.archive__header { max-width: 34rem; margin-bottom: 3.5rem; }
.archive__header h1 { margin: .5rem 0 1rem; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .92; }
.archive__header p:last-child { color: var(--muted); }
.archive article { display: grid; grid-template-columns: 5rem 4rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--line); }
.archive time, .archive article span { color: var(--green); font: 700 .7rem/1 var(--display); letter-spacing: .07em; }
.archive a { color: var(--ink); font-family: var(--display); font-size: 1.25rem; line-height: 1.1; text-decoration: none; }.archive a:hover { color: var(--green); }
.page .post-body { max-width: 650px; }
footer { border-top: 1px solid var(--line); padding: 1.5rem 0 3.25rem; color: var(--muted); font: 700 .68rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 720px) {
  body { font-size: 17px; }.wrap { width: min(100% - 2.25rem, 1120px); }.site-header__inner { min-height: 64px; gap: 1rem; } nav { gap: .85rem; } nav a { font-size: .62rem; }
  .intro { padding: 4.5rem 0 3.5rem; }.post-summary { display: block; padding: 1.5rem 0 1.75rem; }.post-summary .date { margin-bottom: .65rem; }.post-summary h2 { font-size: 1.75rem; }.post-summary > div { margin-top: .8rem; }.post-summary .read-more { display: inline-block; margin-top: 1rem; }
  .post { padding: 3.5rem 0 4rem; }.story-header { margin-bottom: 2.8rem; }.story-hero { margin-bottom: 2.8rem; }.story-layout, .story.has-gallery .story-layout { display: block; }.story-contents { position: static; margin: 0 0 2.5rem; }.story-contents ol { columns: 2; column-gap: 1.5rem; }.story-contents li { break-inside: avoid; }.story-gallery { margin: 0 0 2.25rem; gap: 1rem; }.story.has-gallery .story-gallery { display: grid; margin-top: 0; }.post-body img { float: none; display: block; width: 100%; max-width: none; margin: 1.5rem 0; }.post-body h1 { font-size: 1.85rem; }.archive { padding: 4.5rem 0; }.archive article { grid-template-columns: 4rem 3.25rem minmax(0, 1fr); }
}
@media (max-width: 420px) { .site-header__inner { align-items: flex-start; flex-direction: column; padding: 1.1rem 0; }.story-contents ol { columns: 1; }.archive article { grid-template-columns: 3.6rem 2.8rem minmax(0, 1fr); } }