
:root {
    --paper: #F7F3EE;
    --stone: #E7DFD6;
    --blush: #EED8D0;
    --greige: #B7ACA1;
    --graphite: #4A4440;
    --ink: #1C1917;
    --clay: #A0504A;

    --clay-deep: #7F3C37;
    --clay-wash: #F2E3DD;
    --paper-bright: #FBF9F6;
    --stone-deep: #D9CFC4;
    --rule: var(--greige);
    --rule-soft: rgba(183, 172, 161, 0.55);
    --rule-strong: var(--ink);
    --text: var(--graphite);
    --text-strong: var(--ink);
    --text-muted: #5C554F;
    --on-ink: var(--paper);
    --on-ink-muted: #CFC5BB;
    --ok: #4E6B4F;
    --warn: #9A6A1F;
    --error: #9B3530;

    --cede-e75: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --cede-446: 'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --cede-61d: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --fs-display: clamp(2.5rem, 1rem + 7vw, 8rem);
    --fs-h1: clamp(2.25rem, 1.2rem + 5vw, 6rem);
    --fs-h2: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
    --fs-h3: clamp(1.25rem, 1.05rem + 0.75vw, 1.5rem);
    --fs-h4: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --fs-lead: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --fs-small: 0.9375rem;
    --fs-mono: 0.8125rem;
    --fs-micro: 0.75rem;

    --lh-tight: 0.98;
    --lh-head: 1.08;
    --lh-snug: 1.3;
    --lh-body: 1.6;

    --track-display: -0.02em;
    --track-tight: -0.035em;
    --track-mono: 0.04em;
    --track-caps: 0.12em;

    --s-0: 0.25rem;
    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4rem;
    --s-7: 6rem;
    --s-8: 8rem;

    --shell: 1320px;
    --measure: 66ch;
    --measure-narrow: 52ch;
    --gutter: clamp(16px, 3vw, 32px);
    --gap: 24px;
    --gap-half: 12px;
    --section: clamp(56px, 8vw, 112px);
    --section-dense: clamp(32px, 4vw, 56px);
    --col: calc((min(100vw, var(--shell)) - 2 * var(--gutter) - 11 * var(--gap)) / 12);

    --radius: 0;
    --hair: 1px solid var(--rule);
    --hair-soft: 1px solid var(--rule-soft);
    --bar-ink: 2px solid var(--ink);
    --bar-clay: 2px solid var(--clay);
    --focus-ring: 2px solid var(--clay);
    --focus-offset: 3px;
    --shadow-line: 0 1px 0 var(--ink);
    --shadow-press: 3px 3px 0 var(--ink);

    --header-h: 7.5rem;
    --consent-h: 0px;
    --z-header: 50;
    --z-nav: 60;
    --z-consent: 80;
    --z-chat: 90;
    --z-skip: 100;

    --dur-instant: 90ms;
    --dur-fast: 140ms;
    --dur-base: 180ms;
    --dur-slow: 320ms;
    --dur-draw: 720ms;
    --dur-scene: 1100ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
    --ease-in: cubic-bezier(0.55, 0, 0.8, 0.3);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-swiss: cubic-bezier(0.77, 0, 0.18, 1);
    --ease-snap: cubic-bezier(0.3, 1.3, 0.5, 1);

    color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    background: var(--paper);
    overflow-x: clip;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--cede-446);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    color: var(--text);
    background: var(--paper);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
    background: var(--stone);
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
    padding: 0;
}

p,
li,
dd,
figcaption,
blockquote { overflow-wrap: break-word; }

[hidden] { display: none !important; }

::selection {
    background: var(--blush);
    color: var(--ink);
}

:focus-visible {
    outline: var(--focus-ring);

    outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) { outline: none; }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--cede-e75);
    color: var(--text-strong);
    font-weight: 700;
    letter-spacing: var(--track-display);
    line-height: var(--lh-head);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: manual;
}

h1,
.h1 {
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-tight);

    letter-spacing: var(--track-tight);
}

h2,
.h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.02;
}

h3,
.h3 {
    font-size: var(--fs-h3);
    line-height: 1.18;
}

h4,
.h4 {
    font-size: var(--fs-h4);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

p { text-wrap: pretty; }

strong,
b {
    font-weight: 600;
    color: var(--text-strong);
}

em,
i { font-style: italic; }

small { font-size: var(--fs-small); }

a {
    color: var(--ink);
    text-decoration-line: underline;
    text-decoration-color: var(--clay);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out);
}

a:hover {
    color: var(--clay-deep);
    text-decoration-thickness: 2px;
}

a:active { color: var(--clay); }

code,
kbd,
samp,
pre {
    font-family: var(--cede-61d);
    font-size: 0.88em;
    letter-spacing: 0;
}

code {
    background: var(--stone);
    padding: 0.08em 0.36em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    padding: var(--s-2) var(--s-3);
    background: var(--ink);
    color: var(--paper);
    line-height: 1.55;
    -webkit-overflow-scrolling: touch;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
    overflow-wrap: normal;
}

hr {
    border: 0;
    border-top: var(--hair);
    margin-block: var(--s-5);
}

abbr[title] { text-decoration: underline dotted var(--greige); }

.icon {
    width: 1.125em;
    height: 1.125em;
    flex: none;
    fill: currentColor;

    stroke: currentColor;
    vertical-align: middle;
}

.icon--sm { width: 0.875em; height: 0.875em; }
.icon--lg { width: 1.5em; height: 1.5em; }

.mono,
.num {
    font-family: var(--cede-61d);
    font-size: var(--fs-mono);
    letter-spacing: var(--track-mono);
    font-variant-numeric: tabular-nums;
}

.tabular { font-variant-numeric: tabular-nums lining-nums; }

.kicker,
.eyebrow {
    display: block;
    font-family: var(--cede-61d);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--clay-deep);
    line-height: 1.4;
}

.eyebrow { color: var(--text-muted); }

.lead,
.standfirst {
    font-size: var(--fs-lead);
    line-height: 1.45;
    color: var(--text-strong);
    max-width: var(--measure-narrow);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.meta {
    font-family: var(--cede-61d);
    font-size: var(--fs-micro);
    letter-spacing: var(--track-mono);
    color: var(--text-muted);
}

.muted { color: var(--text-muted); }

.hang { text-indent: -0.42em; }

.visually-hidden,
.sr-only {
    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;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell--narrow { max-width: calc(var(--measure) + 2 * var(--gutter) + 8rem); }

.section { padding-block: var(--section); }

.section--dense { padding-block: var(--section-dense); }

.section + .section { border-top: var(--hair); }

.band--stone { background: var(--stone); }
.band--blush { background: var(--blush); }
.band--paper { background: var(--paper); }
.band--ink {
    background: var(--ink);
    color: var(--on-ink-muted);
}
.band--ink h1,
.band--ink h2,
.band--ink h3,
.band--ink h4,
.band--ink strong { color: var(--paper); }
.band--ink a { color: var(--paper); }
.band--ink a:hover { color: var(--blush); }
.band--ink .kicker { color: #D88F86; }

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.grid > * { min-width: 0; }

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.start-2 { grid-column-start: 2; }
.start-5 { grid-column-start: 5; }
.start-7 { grid-column-start: 7; }

@media (max-width: 1023px) {
    .span-8, .span-7, .span-6, .span-5 { grid-column: span 12; }
    .span-4, .span-3 { grid-column: span 6; }
    .start-2, .start-5, .start-7 { grid-column-start: auto; }
}

@media (max-width: 639px) {
    .span-4, .span-3 { grid-column: span 12; }
}

.ruled {
    display: grid;
    column-gap: 0;
    overflow: hidden;
}

.ruled > * {
    min-width: 0;
    padding-inline: var(--gap-half);
    border-left: var(--hair);
    margin-left: -1px;
}

.gridlines {
    position: relative;
    isolation: isolate;
}

.gridlines::before {
    content: "";
    position: absolute;
    inset: 0 var(--gutter);
    max-width: calc(var(--shell) - 2 * var(--gutter));
    margin-inline: auto;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(to right, var(--rule-soft) 1px, transparent 1px);
    background-size: calc((100% + var(--gap)) / 12) 100%;
    border-right: 1px solid var(--rule-soft);
}

@media (max-width: 767px) {
    .gridlines::before { background-size: calc((100% + var(--gap)) / 4) 100%; }
}

.stack > * + * { margin-top: var(--stack, var(--s-2)); }
.stack-lg > * + * { margin-top: var(--s-4); }
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
    align-items: center;
}
.cluster > * { min-width: 0; }

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--gap);
}
.split > * { min-width: 0; }

.rule-top { border-top: var(--hair); }
.rule-top-ink { border-top: var(--bar-ink); }
.rule-top-clay { border-top: var(--bar-clay); }

.prose {
    max-width: var(--measure);
    color: var(--text);
}

.prose > * + * { margin-top: 1.05em; }

.prose h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    margin-top: 2.2em;
    padding-top: 0.6em;
    border-top: var(--bar-ink);
}

.prose h3 {
    font-size: var(--fs-h3);
    margin-top: 1.8em;
}

.prose h4 { margin-top: 1.5em; }

.prose h2 + *,
.prose h3 + *,
.prose h4 + * { margin-top: 0.6em; }

.prose ul,
.prose ol { padding-left: 1.3em; }

.prose li + li { margin-top: 0.4em; }

.prose ul li::marker { color: var(--clay); }
.prose ol li::marker {
    font-family: var(--cede-61d);
    font-size: 0.85em;
    color: var(--clay);
}

.prose blockquote {
    border-left: var(--bar-clay);
    padding-left: var(--s-3);
    font-family: var(--cede-e75);
    font-size: var(--fs-h4);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}

.prose blockquote p:first-child::before { content: "\201C"; margin-left: -0.45em; }
.prose blockquote p:last-child::after { content: "\201D"; }

.prose table {
    width: 100%;
    font-size: var(--fs-small);
}

.prose th,
.prose td {
    text-align: left;
    vertical-align: top;
    padding: 0.7em 0.9em 0.7em 0;
    border-bottom: var(--hair);
}

.prose th {
    font-family: var(--cede-61d);
    font-size: var(--fs-micro);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    border-bottom: var(--bar-ink);
}

.prose figure img { width: 100%; }
.prose figcaption {
    margin-top: 0.6em;
    font-family: var(--cede-61d);
    font-size: var(--fs-micro);
    color: var(--text-muted);
}

.lockup {
    --lockup-offset: calc(3 * (var(--col) + var(--gap)));
    position: relative;
    max-width: 100%;
}

.lockup__index {
    display: flex;
    gap: 0.75em;
    align-items: baseline;
    font-family: var(--cede-61d);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.lockup__index::before {
    content: "";
    width: 2rem;
    height: 2px;
    background: var(--clay);
    align-self: center;
    flex: none;
}

.lockup__title {
    display: block;
    font-family: var(--cede-e75);
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    color: var(--ink);
    text-wrap: balance;
}

.lockup__line {
    display: block;
    max-width: 100%;
}

.lockup__line--offset {
    margin-left: var(--lockup-offset);
    max-width: calc(100% - var(--lockup-offset));
}

.lockup__rule {
    display: block;
    height: 2px;
    background: var(--clay);
    margin-block: 0.14em 0.1em;
    margin-right: calc(-1 * max(0px, (100vw - var(--shell)) / 2) - var(--gutter));
    transform-origin: left center;
}

.lockup__accent {
    font-style: normal;
    color: var(--clay);
}

.lockup--md { --lockup-offset: calc(2 * (var(--col) + var(--gap))); }
.lockup--md .lockup__title { font-size: var(--fs-h2); line-height: 1; }

.lockup--sm { --lockup-offset: calc(1 * (var(--col) + var(--gap)) + 1rem); }
.lockup--sm .lockup__title {
    font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem);
    line-height: 1.02;
    letter-spacing: var(--track-display);
}
.lockup--sm .lockup__rule { margin-right: 0; }

.lockup--contained .lockup__rule { margin-right: 0; }

.lockup--inverse .lockup__title,
.lockup--inverse .lockup__index { color: var(--paper); }
.lockup--inverse .lockup__accent { color: #D88F86; }

@media (max-width: 1023px) {
    .lockup { --lockup-offset: calc(2 * (var(--col) + var(--gap))); }
}

@media (max-width: 599px) {
    .lockup,
    .lockup--md,
    .lockup--sm { --lockup-offset: 1.5rem; }
    .lockup__rule { margin-block: 0.18em 0.12em; }
}

.media {
    position: relative;
    overflow: hidden;
    background: var(--stone);
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-21x9 { aspect-ratio: 21 / 9; }

.caption {
    margin-top: var(--s-1);
    font-family: var(--cede-61d);
    font-size: var(--fs-micro);
    letter-spacing: var(--track-mono);
    color: var(--text-muted);
    display: flex;
    gap: 0.75em;
}

.caption::before {
    content: "";
    width: 1rem;
    height: 1px;
    margin-top: 0.7em;
    background: var(--clay);
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: 0ms;
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
        --dur-draw: 0ms;
        --dur-scene: 0ms;
    }

    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body { background: #FFF; color: #000; }
    .masthead, .site-footer, .consent, .chat-launcher, .chat-panel { display: none !important; }
    a { text-decoration: underline; }
}
