:root {
    --ink:#20201d;
    --paper:#f3efe6;
    --paper-deep:#e4ddcf;
    --coal:#30312c;
    --muted:#59564f;
    --line:#b8b0a2;
    --accent:#87482e;
    --white:#fffdf7;
    --ink-soft:#3f3d37;

    --coal-soft:#45463f;
    --line-dark:#77756b;
    --display:"Roboto Condensed", Impact, sans-serif;
    --body:"Lora", Georgia, serif;
    --mono:"IBM Plex Mono", "Courier New", monospace;
    --shell:1240px;
    --gutter:clamp(20px, 5vw, 80px);
    --gutter-mobile:18px;
    --section-space:clamp(56px, 9vw, 132px);
    --block-rule:6px;
    --measure:72ch;
    --measure-narrow:47rem;
    --display-xl:clamp(2.7rem, 7.4vw, 8.6rem);
    --display-lg:clamp(2.35rem, 5vw, 5.8rem);
    --display-md:clamp(1.85rem, 3.4vw, 3.8rem);
    --display-sm:clamp(1.35rem, 2.1vw, 2.25rem);
    --body-lg:clamp(1.05rem, 1.35vw, 1.28rem);
    --body-md:clamp(.98rem, .35vw + .9rem, 1.1rem);
    --small:.84rem;
    --micro:.7rem;
    --space-1:.35rem;
    --space-2:.65rem;
    --space-3:1rem;
    --space-4:1.35rem;
    --space-5:1.9rem;
    --space-6:2.65rem;
    --space-7:3.7rem;
    --space-8:5rem;
    --space-9:7rem;
    --space-10:10rem;
    --duration-fast:160ms;
    --duration:260ms;
    --duration-slow:620ms;
    --ease-standard:cubic-bezier(.22,.61,.36,1);
    --ease-enter:cubic-bezier(.16,1,.3,1);
    --ease-linear:linear;
    --focus-ring:3px solid var(--accent);
    --rule:1px solid var(--line);
    color:var(--ink);
    background:var(--paper);
    font-family:var(--body);
    font-synthesis:none;
    text-rendering:optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: 6rem; background: var(--paper); }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--body-md); line-height: 1.68; overflow-x: hidden; }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .12; background-image: repeating-linear-gradient(0deg, transparent 0 31px, var(--line) 32px), repeating-linear-gradient(90deg, transparent 0 63px, var(--line) 64px); mix-blend-mode: multiply; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--accent); }
button { border: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--white); }

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl { margin-top: 0; }
h1, h2, h3, h4 { margin-bottom: var(--space-4); color: var(--ink); font-family: var(--display); font-weight: 700; line-height: .98; letter-spacing: -.025em; overflow-wrap: anywhere; }
h1 { font-size: var(--display-xl); max-width: 10ch; }
h2 { font-size: var(--display-lg); max-width: 15ch; }
h3 { font-size: var(--display-md); max-width: 20ch; }
h4 { font-size: var(--display-sm); }
p { max-width: var(--measure); margin-bottom: var(--space-4); }
.lede { max-width: 42rem; font-size: var(--body-lg); line-height: 1.55; }
strong { font-weight: 500; }
ul, ol { padding-left: 1.35em; }
li + li { margin-top: .45em; }
small { font-size: .84em; }

.eyebrow, .meta, .label, .kicker, .mono { font-family: var(--mono); font-size: var(--micro); font-weight: 600; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow, .kicker { display: inline-block; margin-bottom: var(--space-4); color: var(--accent); }
.meta { color: var(--muted); }
.display { font-family: var(--display); }
.body-face { font-family: var(--body); }
.mono-face { font-family: var(--mono); }
.text-muted { color: var(--muted); }
.text-inverse { color: var(--paper); }
.text-accent { color: var(--accent); }

.shell { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.flow > * + * { margin-top: var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 9rem); align-items: start; }
.three-up { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 4rem); }
.full-bleed { width: 100%; }
.inset { padding-inline: var(--gutter); }
.section-space { padding-block: var(--section-space); }
.rule-top { border-top: var(--rule); }
.rule-bottom { border-bottom: var(--rule); }
.block-rule { border-top: var(--block-rule) solid var(--ink); }
.ledger { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2.05rem, rgba(184,176,162,.55) 2.05rem, rgba(184,176,162,.55) calc(2.05rem + 1px)); }
.ledger-dark { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2.05rem, rgba(243,239,230,.16) 2.05rem, rgba(243,239,230,.16) calc(2.05rem + 1px)); }
.paper-deep { background-color: var(--paper-deep); }
.coal { background-color: var(--coal); color: var(--paper); }
.coal h1, .coal h2, .coal h3, .coal h4 { color: var(--paper); }
.coal a { color: var(--paper); }

.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-7); }
.prose blockquote { margin-inline: 0; padding: var(--space-4) 0 var(--space-4) var(--space-5); border-left: 4px solid var(--accent); font-family: var(--display); font-size: var(--display-sm); line-height: 1.1; }
.prose table { margin-block: var(--space-6); }
.prose :is(ul, ol) { margin-bottom: var(--space-5); }
.prose a { text-decoration-color: var(--accent); }

.media-frame { position: relative; overflow: hidden; background: var(--paper-deep); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.aspect-wide { aspect-ratio: 16 / 10; }
.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-square { aspect-ratio: 1; }
.caption { position: absolute; right: 0; bottom: 0; max-width: min(90%, 28rem); padding: var(--space-3) var(--space-4); background: rgba(32,32,29,.9); color: var(--paper); font-family: var(--mono); font-size: .68rem; line-height: 1.45; letter-spacing: .04em; }

.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; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; transform: translateY(-180%); padding: .8rem 1rem; background: var(--accent); color: var(--white); font-family: var(--mono); font-size: .75rem; text-decoration: none; transition: transform var(--duration-fast) var(--ease-standard); }
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.icon { width: 1.1em; height: 1.1em; fill: currentColor; flex: 0 0 auto; }
.icon-large { width: 1.5rem; height: 1.5rem; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--duration-slow); animation-timing-function: var(--ease-standard); }
    ::view-transition-old(site-header), ::view-transition-new(site-header), ::view-transition-old(site-logo), ::view-transition-new(site-logo), ::view-transition-old(clicked-photo), ::view-transition-new(clicked-photo) { animation-duration: 480ms; animation-timing-function: var(--ease-enter); }
    html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}
@media (max-width: 760px) {
    :root { --gutter: var(--gutter-mobile); --space-9: 5rem; }
    .split, .three-up { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
    h1 { max-width: 11ch; }
    .caption { max-width: 96%; }
}
@media (max-width: 420px) {
    body { font-size: .96rem; }
    .section-space { padding-block: 3.5rem; }
    .cluster { align-items: stretch; }
}