/* Generated by ops/build_assets.py from dustinlifford-api/static/css/src/*.css. Do not edit; edit the sources and rebuild. */
/* 00-fonts.css */
@font-face {
font-family: "Newsreader";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/static/fonts/newsreader-roman.v2.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader";
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url("/static/fonts/newsreader-italic.v2.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("/static/fonts/ibmplexsans-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader Fallback Times";
font-style: normal;
font-weight: 400 500;
src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif");
size-adjust: 97.85%;
ascent-override: 75.12%;
descent-override: 27.08%;
line-gap-override: 0%;
}
@font-face {
font-family: "Newsreader Fallback Times";
font-style: normal;
font-weight: 600 700;
src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold");
size-adjust: 96.34%;
ascent-override: 76.29%;
descent-override: 27.51%;
line-gap-override: 0%;
}
@font-face {
font-family: "Newsreader Fallback Times";
font-style: italic;
font-weight: 400 500;
src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic");
size-adjust: 90.18%;
ascent-override: 81.50%;
descent-override: 29.39%;
line-gap-override: 0%;
}
@font-face {
font-family: "Newsreader Fallback DejaVu";
font-style: normal;
font-weight: 400 500;
src: local("DejaVu Serif"), local("DejaVuSerif");
size-adjust: 76.80%;
ascent-override: 95.70%;
descent-override: 34.50%;
line-gap-override: 0%;
}
@font-face {
font-family: "Newsreader Fallback DejaVu";
font-style: normal;
font-weight: 600 700;
src: local("DejaVu Serif Bold"), local("DejaVuSerif-Bold");
size-adjust: 72.97%;
ascent-override: 100.72%;
descent-override: 36.31%;
line-gap-override: 0%;
}
/* 01-tokens.css */
:root {
--color-hero: #11382B;
--color-deep: #071B15;
--color-forest: #0F2F24;
--color-ivory: #F7F5EF;
--color-sage: #C8DCBC;
--color-mist: #D9E4DB;
--color-emerald: #126F4A;
--color-clay: #A06A43;
--color-clay-dark: #8A5634;
--color-clay-light: #E2B792;
--color-warm: #EFE9DC;
--color-fern: #E8F1EA;
--color-stone: #D8D6CE;
--color-ink: #22342B;
--color-muted: #4B5A4F;
--color-label: #5A725E;
--color-white: #FFFFFF;
--rule-on-dark: rgba(200, 220, 188, 0.25);
--rule-on-dark-strong: rgba(200, 220, 188, 0.35);
--outline-on-dark: rgba(200, 220, 188, 0.6);
--tint-on-dark: rgba(200, 220, 188, 0.12);
--shadow-card: 0 18px 40px rgba(7, 27, 21, 0.14);
--shadow-device: 0 18px 40px rgba(7, 27, 21, 0.25);
--font-text: "Newsreader", "Newsreader Fallback Times", "Newsreader Fallback DejaVu", "Iowan Old Style", Charter, Georgia, serif;
--font-display: var(--font-text);
--font-body: var(--font-text);
--font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--fs-display-xl: clamp(3.22rem, 1.7673rem + 5.9579vw, 7.13rem);
--fs-display: clamp(2.645rem, 1.5769rem + 4.381vw, 5.52rem);
--fs-h1: clamp(2.645rem, 1.8336rem + 3.3295vw, 4.83rem);
--fs-h2-xl: clamp(2.415rem, 1.8593rem + 2.2779vw, 3.91rem);
--fs-h2: clamp(2.07rem, 1.5999rem + 1.9274vw, 3.335rem);
--fs-h2-sm: clamp(1.495rem, 1.3242rem + 0.7009vw, 1.955rem);
--fs-h3-lg: clamp(1.495rem, 1.196rem + 1.2264vw, 2.3rem);
--fs-h3: clamp(1.38rem, 1.2521rem + 0.5257vw, 1.725rem);
--fs-h4: clamp(1.265rem, 1.1371rem + 0.5257vw, 1.61rem);
--fs-stat: clamp(1.955rem, 1.6983rem + 1.0516vw, 2.645rem);
--fs-lede: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4rem);
--fs-body-lg: clamp(1.1875rem, 1.1rem + 0.33vw, 1.3125rem);
--fs-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
--fs-small: clamp(0.875rem, 0.8518rem + 0.09524vw, 0.9375rem);
--fs-mono: clamp(0.8125rem, 0.7893rem + 0.09524vw, 0.875rem);
--fs-eyebrow: clamp(0.6875rem, 0.6411rem + 0.1905vw, 0.8125rem);
--fs-label: clamp(0.6875rem, 0.6643rem + 0.09524vw, 0.75rem);
--fs-ui: 0.9375rem;
--fs-ui-lg: 1.125rem;
--lh-display: 1.12;
--lh-heading: 1.12;
--lh-snug: 1.12;
--lh-body: 1.6;
--lh-tight-body: 1.5;
--tracking-label: 0.1em;
--tracking-button: 0.06em;
--tracking-display: -0.01em;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.5rem;
--space-10: 3rem;
--space-11: 3.5rem;
--space-12: 4rem;
--space-13: 4.5rem;
--space-14: 5rem;
--space-15: 6rem;
--space-16: 7rem;
--gutter: clamp(1.25rem, -1.071rem + 9.524vw, 7.5rem);
--section-y: clamp(2.75rem, 1.357rem + 5.714vw, 6.5rem);
--section-y-sm: clamp(2.25rem, 1.414rem + 3.429vw, 4.5rem);
--hero-pad-top: clamp(1.75rem, 1.1rem + 2.667vw, 3.5rem);
--hero-pad-bottom: clamp(1.75rem, 0.9143rem + 3.429vw, 4rem);
--stack-lg: clamp(1.125rem, 0.6143rem + 2.095vw, 2.5rem);
--grid-gap: clamp(1.5rem, 0.2rem + 5.333vw, 5rem);
--radius-xs: 2px;
--radius-sm: 5px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-xl: 30px;
--radius-pill: 999px;
--container: 75rem;
--container-wide: 90rem;
--measure: 42.5rem;
--measure-deck: 45rem;
--measure-narrow: 38.75rem;
--rail: 12.5rem;
--tap-min: 44px;
--button-h: 3.25rem;
--focus-width: 3px;
--focus-offset: 3px;
--ease: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 150ms;
--dur: 250ms;
--bp-sm: 480px;
--bp-md: 768px;
--bp-nav: 980px;
--bp-lg: 1200px;
--bp-xl: 1440px;
}
/* 02-base.css */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--header-h, 0px);
scroll-padding-bottom: var(--consent-h, 0px);
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre {
margin: 0;
}
ol[role="list"], ul[role="list"], .list-reset {
list-style: none;
padding: 0;
}
img, picture, video, canvas {
display: block;
max-width: 100%;
}
img { height: auto; }
input, button, textarea, select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button { cursor: pointer; }
textarea { resize: vertical; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: var(--space-6); }
:root,
.surface-ivory,
.surface-white,
.surface-warm,
.surface-fern {
--surface-bg: var(--color-ivory);
--surface-fg: var(--color-ink);
--surface-heading: var(--color-forest);
--surface-muted: var(--color-muted);
--surface-label: var(--color-label);
--surface-accent: var(--color-clay-dark);
--surface-link: var(--color-emerald);
--surface-link-hover: var(--color-forest);
--surface-rule: var(--color-stone);
--surface-rule-strong: var(--color-forest);
--focus-color: var(--color-emerald);
}
.surface-white { --surface-bg: var(--color-white); }
.surface-fern { --surface-bg: var(--color-fern); }
.surface-warm {
--surface-bg: var(--color-warm);
--surface-label: var(--color-muted);
}
.surface-hero,
.surface-forest,
.surface-deep {
--surface-bg: var(--color-hero);
--surface-fg: var(--color-mist);
--surface-heading: var(--color-ivory);
--surface-muted: var(--color-mist);
--surface-label: var(--color-sage);
--surface-accent: var(--color-clay-light);
--surface-link: var(--color-sage);
--surface-link-hover: var(--color-ivory);
--surface-rule: var(--rule-on-dark);
--surface-rule-strong: var(--rule-on-dark-strong);
--focus-color: var(--color-clay-light);
}
.surface-forest { --surface-bg: var(--color-forest); }
.surface-deep { --surface-bg: var(--color-deep); }
.surface-ivory, .surface-white, .surface-warm, .surface-fern,
.surface-hero, .surface-forest, .surface-deep {
background-color: var(--surface-bg);
color: var(--surface-fg);
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--color-ivory);
color: var(--surface-fg);
font-family: var(--font-text);
font-size: var(--fs-body);
font-weight: var(--weight-regular);
line-height: var(--lh-body);
font-synthesis: none;
font-optical-sizing: auto;
font-kerning: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
font-variant-numeric: lining-nums;
}
.post-body,
.fn-article-body { font-variant-numeric: normal; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-text);
font-weight: var(--weight-semibold);
line-height: var(--lh-heading);
letter-spacing: -0.01em;
color: var(--surface-heading);
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
h5, h6 { font-size: var(--fs-body-lg); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
strong, b { font-weight: var(--weight-semibold); }
small { font-size: var(--fs-small); }
hr {
border: 0;
border-top: 1px solid var(--surface-rule);
margin: 0;
}
::selection {
background-color: var(--color-sage);
color: var(--color-deep);
}
code, kbd, samp, pre, .mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.mono { font-size: var(--fs-mono); }
.label {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.label--lg { font-size: var(--fs-eyebrow); }
.label--accent { color: var(--surface-accent); }
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.lede {
font-size: var(--fs-lede);
line-height: var(--lh-body);
}
a {
color: var(--surface-link);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--surface-link-hover);
text-decoration-thickness: 2px;
}
:focus-visible {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.skip-link {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: 1000;
padding: var(--space-3) var(--space-5);
min-height: var(--tap-min);
display: inline-flex;
align-items: center;
background-color: var(--color-ivory);
color: var(--color-forest);
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--tracking-button);
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--color-forest);
border-radius: var(--radius-xs);
transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: none;
--focus-color: var(--color-clay-light);
}
#klaro {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 999;
}
.visually-hidden:not(:focus):not(:active) {
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;
}
.icon {
display: inline-block;
flex: none;
inline-size: var(--icon-size, 1em);
block-size: var(--icon-size, 1em);
vertical-align: -0.125em;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 03-layout.css */
.container {
width: min(100% - 2 * var(--gutter), var(--container));
margin-inline: auto;
}
.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-block-start: var(--stack-space, var(--space-4)); }
.flow > * + * { margin-block-start: var(--flow-space, 1em); }
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--space-3));
}
.section-head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-4) var(--space-9);
margin-block-end: var(--stack-lg);
}
.section-head__text {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.grid {
display: grid;
gap: var(--grid-gap-local, var(--space-6));
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.measure { max-width: var(--measure); }
/* 10-buttons.css */
:root,
.surface-ivory, .surface-white, .surface-warm, .surface-fern {
--button-primary-bg: var(--color-emerald);
--button-primary-fg: var(--color-ivory);
--button-primary-hover-bg: var(--color-forest);
--button-primary-hover-fg: var(--color-ivory);
--button-ghost-fg: var(--color-forest);
--button-ghost-border: var(--color-forest);
--button-ghost-hover-bg: var(--color-forest);
--button-ghost-hover-fg: var(--color-ivory);
--icon-button-bg: var(--color-fern);
--icon-button-fg: var(--color-forest);
}
.surface-hero, .surface-forest, .surface-deep {
--button-primary-bg: var(--color-sage);
--button-primary-fg: var(--color-forest);
--button-primary-hover-bg: var(--color-ivory);
--button-primary-hover-fg: var(--color-forest);
--button-ghost-fg: var(--color-ivory);
--button-ghost-border: var(--outline-on-dark);
--button-ghost-hover-bg: var(--tint-on-dark);
--button-ghost-hover-fg: var(--color-ivory);
--icon-button-bg: var(--tint-on-dark);
--icon-button-fg: var(--color-sage);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
min-height: var(--button-h);
padding: var(--space-2) 1.625rem;
border: 1px solid var(--button-primary-bg);
border-radius: var(--radius-xs);
background-color: var(--button-primary-bg);
color: var(--button-primary-fg);
font-family: var(--font-ui);
font-size: var(--fs-mono);
font-weight: var(--weight-regular);
line-height: 1.2;
letter-spacing: var(--tracking-button);
text-transform: uppercase;
text-decoration: none;
text-align: center;
transition: background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.button:hover {
background-color: var(--button-primary-hover-bg);
border-color: var(--button-primary-hover-bg);
color: var(--button-primary-hover-fg);
text-decoration: none;
}
.button--ghost {
background-color: transparent;
border-color: var(--button-ghost-border);
color: var(--button-ghost-fg);
}
.button--ghost:hover {
background-color: var(--button-ghost-hover-bg);
border-color: var(--button-ghost-border);
color: var(--button-ghost-hover-fg);
}
.button--plain-case { text-transform: none; letter-spacing: 0; }
.button-row {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.button-row > .button { width: 100%; }
@media (min-width: 480px) {
.button-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.875rem; }
.button-row > .button { width: auto; }
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.45em;
min-height: var(--tap-min);
font-family: var(--font-ui);
font-size: var(--fs-mono);
line-height: 1.3;
color: var(--surface-link);
}
.link-arrow:hover { color: var(--surface-link-hover); }
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: var(--tap-min);
block-size: var(--tap-min);
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background-color: var(--icon-button-bg);
color: var(--icon-button-fg);
text-decoration: none;
--icon-size: 1.125rem;
}
.icon-button:hover { color: var(--surface-heading); }
.link-button {
padding: 0;
border: 0;
background: none;
color: var(--surface-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.link-button:hover { color: var(--surface-link-hover); text-decoration-thickness: 2px; }
/* 10-header.css */
:root {
--header-h: calc(2 * var(--space-3) + max(2.875rem, var(--tap-min)) + 1px);
}
.site-header {
position: sticky;
top: 0;
z-index: 30;
border-block-end: 1px solid rgba(200, 220, 188, 0.22);
}
.site-header * {
scroll-margin-block: calc(-1 * var(--header-h)) var(--header-h);
}
@media (scripting: none) and (max-width: 980px) {
:root { --header-h: 0px; }
.site-header { position: relative; }
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-3);
}
.site-header__logo {
display: inline-flex;
align-items: center;
flex: none;
min-height: var(--tap-min);
border-radius: var(--radius-xs);
text-decoration: none;
}
.site-header__logo img {
inline-size: auto;
block-size: 2.875rem;
}
.site-nav { display: none; }
.site-nav > .site-nav__list {
display: flex;
align-items: center;
gap: 2px;
padding: 5px;
border: 1px solid var(--rule-on-dark-strong);
border-radius: var(--radius-pill);
background-color: rgba(200, 220, 188, 0.04);
}
.site-nav__item { position: relative; }
.site-nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: var(--tap-min);
padding: 0 18px;
border: 0;
border-radius: var(--radius-pill);
background-color: transparent;
color: var(--color-ivory);
font-family: var(--font-ui);
font-size: var(--fs-ui);
font-weight: var(--weight-medium);
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease);
}
.site-nav__link:hover {
background-color: var(--tint-on-dark);
color: var(--color-ivory);
}
.site-nav__link[aria-current],
.site-nav__link[aria-expanded="true"] {
background-color: rgba(200, 220, 188, 0.18);
}
.site-nav__chevron {
--icon-size: 0.875rem;
color: var(--color-sage);
transition: transform var(--dur) var(--ease);
}
.site-nav__link[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }
.site-nav__panel {
position: absolute;
top: calc(100% + 14px);
left: 50%;
z-index: 40;
min-inline-size: 17.5rem;
padding: var(--space-2);
border: 1px solid var(--color-stone);
border-radius: 14px;
background-color: var(--color-ivory);
box-shadow: var(--shadow-card);
transform: translateX(-50%);
}
.site-nav__panel::before {
content: "";
position: absolute;
inset: -16px 0 auto;
block-size: 16px;
}
@media (prefers-reduced-motion: no-preference) {
.site-nav__panel {
transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}
@starting-style {
.site-nav__panel { opacity: 0; translate: 0 -4px; }
}
}
.site-nav__menu { display: flex; flex-direction: column; gap: 2px; }
.site-nav__menu-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: var(--tap-min);
padding: 10px 14px;
border-radius: 10px;
color: var(--color-forest);
font-family: var(--font-ui);
font-size: var(--fs-ui);
font-weight: var(--weight-medium);
line-height: 1.25;
white-space: nowrap;
text-decoration: none;
}
.site-nav__menu-link:hover {
background-color: var(--color-fern);
color: var(--color-emerald);
}
.site-nav__menu-link[aria-current] {
background-color: var(--color-fern);
box-shadow: inset 3px 0 0 var(--color-emerald);
font-weight: var(--weight-semibold);
}
.site-nav__menu-link .icon { --icon-size: 0.875rem; }
.site-nav__ext { color: var(--color-label); }
.site-nav__menu-all {
margin-block-start: var(--space-1);
padding-block-start: var(--space-1);
border-block-start: 1px solid var(--color-stone);
}
.site-nav__menu-all .site-nav__menu-link {
color: var(--color-emerald);
font-weight: var(--weight-semibold);
}
.site-header__cta {
display: none;
align-items: center;
gap: 10px;
min-height: 3rem;
padding: 0 var(--space-6);
border-radius: var(--radius-pill);
background-color: var(--color-sage);
color: var(--color-forest);
font-family: var(--font-ui);
font-size: var(--fs-ui);
font-weight: var(--weight-semibold);
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease);
}
.site-header__cta:hover {
background-color: var(--color-ivory);
color: var(--color-forest);
}
.site-header__cta .icon { --icon-size: 1rem; }
.site-header__cta[aria-current] { box-shadow: 0 0 0 2px var(--color-hero), 0 0 0 3px var(--color-sage); }
.site-header__menu {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
inline-size: var(--tap-min);
block-size: var(--tap-min);
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background-color: rgba(200, 220, 188, 0.14);
color: var(--color-ivory);
--icon-size: 1.25rem;
}
.site-header__menu:hover { background-color: rgba(200, 220, 188, 0.24); }
@media (scripting: none) {
.site-header__menu { display: none; }
}
.site-header__nojs { padding-block: 0 var(--space-3); }
.site-header__nojs-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
}
.site-header__nojs-list a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
padding: 0 var(--space-3);
border-radius: var(--radius-pill);
color: var(--color-ivory);
font-family: var(--font-ui);
font-size: var(--fs-ui);
font-weight: var(--weight-medium);
text-decoration: underline;
text-decoration-color: rgba(200, 220, 188, 0.5);
text-underline-offset: 0.25em;
}
.site-header__nojs-list a[aria-current] { background-color: rgba(200, 220, 188, 0.18); }
@media (min-width: 981px) {
:root { --header-h: calc(2 * var(--space-4) + max(3.75rem, 56px) + 1px); }
.site-header__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: var(--space-6);
padding-block: var(--space-4);
}
.site-header__logo { justify-self: start; }
.site-header__logo img { block-size: 3.75rem; }
.site-nav { display: block; justify-self: center; }
.site-header__cta { display: inline-flex; justify-self: end; }
.site-header__menu { display: none; }
.site-header__nojs { display: none; }
}
@media (min-width: 981px) and (max-width: 1100px) {
.site-nav__link { padding: 0 14px; }
.site-header__cta { padding: 0 var(--space-5); }
}
/* 11-drawer.css */
.site-drawer {
position: fixed;
inset: 0 0 0 auto;
inline-size: min(86vw, 380px);
max-inline-size: none;
block-size: 100vh;
block-size: 100dvh;
max-block-size: none;
margin: 0;
padding: 0;
padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
border: 0;
background-color: var(--color-forest);
color: var(--color-ivory);
font-family: var(--font-ui);
font-weight: var(--weight-medium);
line-height: 1.65;
flex-direction: column;
overflow: hidden;
overscroll-behavior: contain;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35);
transform: translateX(100%);
transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
overlay 0.38s allow-discrete,
display 0.38s allow-discrete;
}
.site-drawer[open] {
display: flex;
transform: translateX(0);
}
@starting-style {
.site-drawer[open] { transform: translateX(100%); }
}
.site-drawer::backdrop {
background-color: rgba(7, 27, 21, 0.55);
opacity: 0;
transition: opacity 0.3s, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
.site-drawer[open]::backdrop { opacity: 1; }
@starting-style {
.site-drawer[open]::backdrop { opacity: 0; }
}
.site-drawer a { text-decoration: none; }
.site-drawer .icon[stroke-width]:not(.icon--g18) { stroke-width: 2.4; }
.site-drawer__head {
display: flex;
flex: none;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
border-block-end: 1px solid rgba(247, 245, 239, 0.08);
}
.site-drawer__head picture { display: block; flex: none; }
.site-drawer__logo {
display: block;
inline-size: 9.375rem;
block-size: auto;
}
.site-drawer__close {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: var(--tap-min);
block-size: var(--tap-min);
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background-color: rgba(255, 255, 255, 0.08);
color: var(--color-ivory);
--icon-size: 1.125rem;
}
.site-drawer__close:hover { background-color: rgba(255, 255, 255, 0.14); }
.site-drawer__quick {
display: grid;
flex: none;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
padding: var(--space-4) var(--space-5);
border-block-end: 1px solid rgba(247, 245, 239, 0.08);
}
.site-drawer__quick-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-block-size: 4.375rem;
padding: var(--space-3) 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
background-color: rgba(255, 255, 255, 0.06);
color: var(--color-ivory);
font-size: 0.8125rem;
font-weight: var(--weight-semibold);
line-height: 1.4;
text-align: center;
}
.site-drawer__quick-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--color-ivory);
}
.site-drawer__quick-link .icon {
--icon-size: 1.125rem;
color: var(--color-clay);
}
.site-drawer__quick-link--primary {
border-color: var(--color-emerald);
background-color: var(--color-emerald);
color: var(--color-white);
}
.site-drawer__quick-link--primary:hover {
border-color: var(--color-hero);
background-color: var(--color-hero);
color: var(--color-white);
}
.site-drawer__quick-link--primary .icon { color: var(--color-white); }
.site-drawer__quick-link[aria-current] { border-color: var(--color-sage); }
.site-drawer__body {
flex: 1 1 auto;
min-block-size: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.site-drawer__row {
display: flex;
align-items: center;
gap: var(--space-3);
inline-size: 100%;
min-block-size: 3.5625rem;
padding: 0 var(--space-5);
border: 0;
border-block-end: 1px solid rgba(255, 255, 255, 0.07);
background: none;
color: rgba(247, 245, 239, 0.85);
font-family: var(--font-ui);
font-size: 1rem;
font-weight: var(--weight-medium);
line-height: 1.65;
text-align: start;
}
button.site-drawer__row { font-weight: var(--weight-regular); }
.site-drawer__row:hover,
.site-drawer__row:active {
background-color: rgba(255, 255, 255, 0.06);
color: rgba(247, 245, 239, 0.85);
}
.site-drawer__row[aria-current] {
background-color: rgba(255, 255, 255, 0.06);
box-shadow: inset 3px 0 0 var(--color-clay-light);
color: var(--color-ivory);
}
.site-drawer__icon {
--icon-size: 1.125rem;
color: var(--color-clay);
}
.site-drawer__label { flex: 1 1 auto; min-inline-size: 0; }
.site-drawer__chevron {
--icon-size: 0.875rem;
color: rgba(247, 245, 239, 0.35);
}
button.site-drawer__row .site-drawer__chevron {
--icon-size: 1rem;
color: rgba(247, 245, 239, 0.5);
transition: transform 0.2s ease;
}
.site-drawer__row[aria-expanded="true"] .site-drawer__chevron { transform: rotate(180deg); }
.site-drawer__sub {
display: grid;
grid-template-rows: 0fr;
background-color: rgba(0, 0, 0, 0.18);
transition: grid-template-rows 0.3s ease;
}
.site-drawer__row[aria-expanded="true"] + .site-drawer__sub { grid-template-rows: 1fr; }
.site-drawer__sub > ul { min-block-size: 0; overflow: hidden; }
.site-drawer__sub a {
display: flex;
align-items: center;
gap: var(--space-2);
min-block-size: var(--tap-min);
padding: 0.5rem var(--space-5) 0.5rem 3.125rem;
color: rgba(247, 245, 239, 0.6);
font-size: 0.875rem;
font-weight: var(--weight-regular);
line-height: 1.4;
}
.site-drawer__sub a:hover { color: var(--color-ivory); }
.site-drawer__row:focus-visible,
.site-drawer__sub a:focus-visible {
outline-offset: calc(-1 * var(--focus-width));
}
.site-drawer__sub a[aria-current] {
color: var(--color-ivory);
box-shadow: inset 3px 0 0 var(--color-clay-light);
}
.site-drawer__ext { --icon-size: 0.8125rem; flex: none; }
.site-drawer__foot {
flex: none;
padding: var(--space-3) var(--space-5) 0.875rem;
border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}
.site-drawer__socials {
display: flex;
gap: 10px;
margin-block-end: 10px;
}
.site-drawer__socials a {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--tap-min);
block-size: var(--tap-min);
border-radius: var(--radius-pill);
background-color: rgba(255, 255, 255, 0.08);
color: rgba(247, 245, 239, 0.75);
--icon-size: 0.9375rem;
}
.site-drawer__socials a:hover {
background-color: rgba(255, 255, 255, 0.14);
color: var(--color-ivory);
}
.site-drawer__contact {
color: rgba(247, 245, 239, 0.55);
font-size: 0.75rem;
line-height: 1.65;
}
.site-drawer__contact a {
display: inline-block;
position: relative;
color: inherit;
text-decoration: none;
}
.site-drawer__contact a::after {
content: "";
position: absolute;
inset: -10px -6px calc(-1 * (var(--tap-min) - 10px - 1.65em)) -6px;
}
.site-drawer__contact a:hover,
.site-drawer__contact a:focus-visible {
color: var(--color-ivory);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.site-drawer__legal {
margin-block-start: 2px;
color: rgba(247, 245, 239, 0.55);
font-size: 0.75rem;
line-height: 1.65;
}
.site-drawer__legal a,
.site-drawer__legal .link-button {
display: inline-block;
position: relative;
color: inherit;
font: inherit;
text-decoration: none;
}
.site-drawer__legal a::after,
.site-drawer__legal .link-button::after {
content: "";
position: absolute;
inset: -4px -6px -12px;
}
.site-drawer__legal a:hover,
.site-drawer__legal a:focus-visible,
.site-drawer__legal .link-button:hover,
.site-drawer__legal .link-button:focus-visible {
color: var(--color-ivory);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
@media (max-height: 600px) {
.site-drawer { overflow-y: auto; }
.site-drawer__body { flex: 1 0 auto; overflow: visible; }
}
html.has-open-drawer { overflow: hidden; }
html.has-open-drawer body {
position: fixed;
inset-inline: 0;
top: var(--drawer-scroll-top, 0);
inline-size: 100%;
padding-inline-end: var(--drawer-scrollbar, 0);
}
@media (prefers-reduced-motion: reduce) {
.site-drawer,
.site-drawer::backdrop,
.site-drawer__sub,
.site-drawer__chevron { transition: none; }
}
/* 12-contact-bar.css */
.contact-bar {
--contact-bar-gap: 12px;
position: fixed;
inset-inline: var(--contact-bar-gap);
inset-block-end: calc(var(--contact-bar-gap) + env(safe-area-inset-bottom, 0px));
z-index: 50;
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 6px;
padding: 6px;
border: 1px solid rgba(247, 245, 239, 0.12);
border-radius: 16px;
background-color: var(--color-forest);
box-shadow: 0 10px 30px rgba(7, 27, 21, 0.35);
font-family: var(--font-ui);
opacity: 0;
visibility: hidden;
transform: translateY(calc(100% + var(--contact-bar-gap)));
transition: transform 0.28s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.28s;
}
.contact-bar.is-shown {
opacity: 1;
visibility: visible;
transform: none;
transition: transform 0.28s var(--ease), opacity 0.2s var(--ease), visibility 0s;
}
.contact-bar__link {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: var(--tap-min);
padding: var(--space-2) 6px;
border-radius: var(--radius-md);
color: var(--color-ivory);
font-size: 0.8125rem;
font-weight: var(--weight-semibold);
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.contact-bar__link:hover {
background-color: rgba(255, 255, 255, 0.06);
color: var(--color-ivory);
}
.contact-bar__link .icon {
--icon-size: 1.125rem;
flex: none;
color: var(--color-clay);
}
.contact-bar__link--primary {
background-color: var(--color-emerald);
color: var(--color-ivory);
}
.contact-bar__link--primary:hover {
background-color: var(--color-hero);
color: var(--color-ivory);
}
.contact-bar__link--primary .icon { color: var(--color-ivory); }
.contact-bar__link:focus-visible {
--focus-color: var(--color-clay-light);
outline-offset: 2px;
}
@media (max-width: 980px) {
body:has(.contact-bar) .site-footer {
padding-block-end: max(var(--consent-h, 0px), calc(80px + env(safe-area-inset-bottom, 0px)));
}
}
@media (min-width: 981px) {
.contact-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.contact-bar,
.contact-bar.is-shown {
transform: none;
transition: none;
}
}
/* 20-components.css */
:root, .surface-ivory, .surface-white, .surface-warm, .surface-fern {
--heading-em: var(--color-forest);
--stat-accent: var(--color-emerald);
}
.surface-hero, .surface-forest, .surface-deep {
--heading-em: var(--color-clay-light);
--stat-accent: var(--color-clay-light);
}
.button .icon { --icon-size: 1.05em; }
.link-arrow {
padding-inline: 0.375rem;
margin-inline: -0.375rem;
}
.button--block { width: 100%; }
.label--strong { color: var(--surface-heading); }
.label--muted { color: var(--surface-muted); }
.meta-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) 0.875rem;
font-family: var(--font-ui);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.meta-row__item--strong { color: var(--surface-heading); }
.meta-row__item--accent { color: var(--surface-accent); }
.meta-row__item--muted { color: var(--surface-muted); }
.section-head__text { gap: var(--space-3); min-width: 0; }
.section-head__label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.section-head__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: var(--weight-semibold);
line-height: 1.12;
color: var(--surface-heading);
}
.section-head__title em { font-style: italic; color: var(--heading-em); }
.section-head__link { white-space: nowrap; }
.section-head__aside {
max-width: 26.25rem;
font-size: 1rem;
line-height: 1.55;
color: var(--surface-fg);
}
.section-head__aside > * + * { margin-block-start: var(--space-3); }
@media (min-width: 768px) {
.section-head--split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: end;
gap: var(--grid-gap);
}
.section-head--split .section-head__aside {
max-width: none;
font-size: var(--fs-body-lg);
line-height: 1.65;
}
}
.rail-heading {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
font-family: var(--font-display);
font-size: var(--fs-h2-sm);
font-weight: var(--weight-semibold);
line-height: 1.1;
letter-spacing: var(--tracking-display);
color: var(--surface-heading);
text-wrap: balance;
}
.rail-heading__kicker {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.rail-heading__title em { font-style: italic; color: var(--heading-em); }
@media (min-width: 980px) {
.rail-heading--sticky {
position: sticky;
top: calc(var(--header-h, 0px) + var(--space-8));
align-self: start;
}
}
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(1.375rem, 1.1429rem + 0.9524vw, 2rem) clamp(1.25rem, 0.9714rem + 1.1429vw, 2rem);
min-width: 0;
}
.card--bordered { border: 1px solid var(--surface-rule-strong); }
.surface-forest.card--bordered,
.surface-deep.card--bordered,
.surface-hero.card--bordered { border-color: var(--rule-on-dark-strong); }
.card__label {
font-family: var(--font-ui);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.card__title {
font-family: var(--font-display);
font-size: clamp(1.38rem, 1.2485rem + 0.5388vw, 1.61rem);
font-weight: var(--weight-semibold);
line-height: 1.1;
color: var(--surface-heading);
text-wrap: pretty;
}
.card--lg .card__title { font-size: clamp(1.495rem, 1.2978rem + 0.8083vw, 1.84rem); line-height: 1.12; }
.card--lg { padding-inline: clamp(1.25rem, 0.925rem + 1.3333vw, 2.125rem); }
.card--lg .card__text { font-size: 1rem; }
.card__link {
color: inherit;
text-decoration: none;
}
.card__link::after {
content: "";
position: absolute;
inset: 0;
}
.card--linked:hover .card__link,
.card__link:focus-visible {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.card__text {
font-size: var(--fs-body);
line-height: 1.55;
color: var(--surface-fg);
}
.card__meta {
margin-block-start: auto;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.5;
color: var(--surface-muted);
}
.card > :not(.card__label):not(.card__title):not(.card__text):not(.card__meta) {
position: relative;
z-index: 1;
}
.stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.stat__value {
font-family: var(--font-display);
font-size: var(--fs-stat);
font-weight: var(--weight-semibold);
line-height: 1;
color: var(--surface-heading);
font-variant-numeric: lining-nums tabular-nums;
}
.stat__value--accent { color: var(--stat-accent); }
.stat__value .icon {
--icon-size: 0.62em;
margin-inline: 0.14em;
vertical-align: -0.02em;
}
.stat__label {
font-size: clamp(0.8125rem, 0.7661rem + 0.1905vw, 0.9375rem);
line-height: 1.45;
color: var(--surface-fg);
}
.stat__note {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.5;
color: var(--surface-muted);
}
.stat--panel {
padding: var(--space-5);
gap: var(--space-2);
}
.stat--panel .stat__value { font-size: clamp(2rem, 1.8571rem + 0.5857vw, 2.5rem); }
.stat--panel .stat__label { font-size: var(--fs-small); }
.stat--card {
gap: var(--space-3);
padding: clamp(1.375rem, 1.1964rem + 0.7333vw, 1.875rem) clamp(1.25rem, 1.0714rem + 0.7333vw, 1.75rem);
border: 1px solid var(--surface-rule-strong);
}
.stat--card .stat__value { font-size: clamp(2.5rem, 2.1429rem + 1.4667vw, 3.5rem); }
.stat--card .stat__label { font-size: var(--fs-body); line-height: 1.45; }
.fact-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
border-block-start: 1px solid var(--surface-rule-strong);
}
.fact-strip__item {
padding-block: clamp(0.875rem, 0.6607rem + 0.8786vw, 1.5rem) clamp(1.125rem, 0.8571rem + 1.0952vw, 1.875rem);
gap: clamp(0.25rem, 0.1786rem + 0.2929vw, 0.375rem);
}
.fact-strip__item:nth-child(odd) {
padding-inline-end: var(--space-3);
border-inline-end: 1px solid var(--surface-rule);
}
.fact-strip__item:nth-child(even) { padding-inline-start: var(--space-4); }
.fact-strip__item:nth-child(-n+2):not(:nth-last-child(-n+2)) {
border-block-end: 1px solid var(--surface-rule);
}
@media (min-width: 768px) {
.fact-strip {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
}
.fact-strip__item,
.fact-strip__item:nth-child(odd),
.fact-strip__item:nth-child(even) {
padding-inline: var(--space-6);
border-block-end: 0;
border-inline-end: 1px solid var(--surface-rule);
}
.fact-strip__item:first-child { padding-inline-start: 0; }
.fact-strip__item:last-child { padding-inline-end: 0; border-inline-end: 0; }
.fact-strip__item:nth-child(-n+2):not(:nth-last-child(-n+2)) { border-block-end: 0; }
}
.fact-list {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3) clamp(1rem, 0.8214rem + 0.7333vw, 1.375rem);
margin: 0;
font-size: var(--fs-small);
line-height: 1.5;
}
.fact-list__row { display: contents; }
.fact-list__term {
padding-block-start: 0.2em;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.fact-list__desc { margin: 0; min-width: 0; }
.fact-list__desc--strong { font-weight: var(--weight-semibold); color: var(--surface-heading); }
.fact-list--panel {
padding: clamp(1.25rem, 1.0714rem + 0.7333vw, 1.625rem);
border: 1px solid var(--surface-rule-strong);
color: var(--surface-heading);
line-height: 1.4;
}
.fact-list--panel .fact-list__term { font-size: 0.6875rem; }
.fact-list--plain {
display: flex;
flex-direction: column;
gap: var(--space-3);
font-size: var(--fs-body);
color: var(--surface-fg);
}
.fact-list--plain .fact-list__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) 1.125rem;
}
.fact-list--plain .fact-list__term {
flex: 0 0 8.125rem;
color: var(--surface-accent);
}
.fact-list--plain .fact-list__desc { flex: 1 1 14rem; }
.index-nav {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-inline-start: clamp(1rem, 0.5714rem + 1.7571vw, 1.75rem);
border-inline-start: 1px solid var(--surface-rule-strong);
}
.index-nav__label {
padding-block-end: var(--space-1);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.index-nav__list { display: flex; flex-direction: column; }
.index-nav__link {
display: inline-flex;
align-items: center;
gap: 0.5em;
min-height: var(--tap-min);
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.35;
color: var(--surface-heading);
}
.index-nav__link:hover { color: var(--surface-link-hover); }
.index-nav__link[aria-current="page"] {
font-weight: var(--weight-medium);
text-decoration: none;
}
.index-nav__link .icon { color: var(--surface-link); }
@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
.index-nav__link { min-height: 2.125rem; }
}
.source-line {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.6;
color: var(--surface-muted);
}
.source-line--accent { color: var(--surface-accent); }
.source-note {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.source-note__ref {
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.4;
color: var(--surface-accent);
}
.source-note__text {
font-size: var(--fs-small);
line-height: 1.5;
color: var(--surface-fg);
}
.caption {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-1) var(--space-6);
font-family: var(--font-ui);
font-size: var(--fs-label);
line-height: 1.5;
color: var(--surface-muted);
}
.caption__text { min-width: 0; flex: 1 1 20rem; }
a.caption__aside {
display: inline-flex;
align-items: center;
gap: 0.35em;
min-height: var(--tap-min);
color: var(--surface-link);
}
@media (min-width: 768px) {
a.caption__aside { min-height: 1.5rem; }
}
a.caption__aside:hover { color: var(--surface-link-hover); }
/* 21-hero.css */
.hero-band {
--hero-foot-end: clamp(1.75rem, 1.5214rem + 0.9524vw, 2.5rem);
padding-block-end: var(--hero-pad-bottom);
}
.hero-band--has-foot { padding-block-end: var(--hero-foot-end); }
.hero-band--has-foot:has(.hero-band__foot > .fact-strip:last-child) { padding-block-end: 0; }
.hero-band__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-1) var(--space-6);
padding-block: clamp(0.875rem, 0.6893rem + 0.7619vw, 1.375rem);
border-block-end: 1px solid var(--surface-rule);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.hero-band__meta-item { min-width: 0; }
.hero-band__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: end;
padding-block-start: var(--hero-pad-top);
}
.hero-band__main {
display: flex;
flex-direction: column;
gap: clamp(1rem, 0.8607rem + 0.5714vw, 1.375rem);
min-width: 0;
}
.hero-band__aside { min-width: 0; }
.hero-band__eyebrow {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) 1.125rem;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.hero-band__eyebrow-item--alt { color: var(--surface-label); }
.hero-band__title {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: var(--weight-semibold);
line-height: 1.12;
letter-spacing: normal;
color: var(--surface-heading);
text-wrap: pretty;
}
.hero-band__title em {
font-style: italic;
color: var(--color-sage);
}
.hero-band--deck-aside .hero-band__title {
font-size: clamp(2.76rem, 1.9057rem + 3.5047vw, 5.06rem);
line-height: 1.12;
}
.hero-band--centered .hero-band__title {
font-size: clamp(2.645rem, 1.9188rem + 2.9791vw, 4.6rem);
line-height: 1.12;
}
.hero-band--display .hero-band__title {
font-size: var(--fs-display);
line-height: 1.12;
letter-spacing: var(--tracking-display);
}
.hero-band--display-xl .hero-band__title { font-size: var(--fs-display-xl); line-height: 1.12; }
.hero-band__deck {
max-width: var(--measure-deck);
font-size: var(--fs-lede);
line-height: var(--lh-body);
color: var(--surface-fg);
text-wrap: pretty;
}
.hero-band__actions { padding-block-start: var(--space-1); }
.hero-band__after { min-width: 0; }
.hero-band__foot {
margin-block-start: var(--hero-pad-bottom);
min-width: 0;
}
.hero-band__rule {
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--surface-rule);
}
.hero-band--feature .hero-band__main { gap: clamp(1rem, 0.6286rem + 1.5238vw, 1.625rem); }
.hero-band--feature .hero-band__deck { max-width: var(--measure-narrow); }
.hero-band--feature .hero-band__aside { display: flex; justify-content: center; }
.hero-band--deck-aside .hero-band__grid { gap: var(--space-4); }
.hero-band--deck-aside .hero-band__main { gap: clamp(1rem, 0.9071rem + 0.381vw, 1.25rem); }
.hero-band--deck-aside .hero-band__aside .hero-band__deck {
max-width: 28rem;
font-size: clamp(1rem, 0.9304rem + 0.2857vw, 1.1875rem);
line-height: 1.6;
}
.hero-band--display-xl.hero-band--deck-aside .hero-band__aside .hero-band__deck {
max-width: 26.875rem;
font-size: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);
line-height: 1.55;
}
.hero-band--deck-aside .hero-band__foot { margin-block-start: clamp(1.75rem, 1.6071rem + 0.5857vw, 2.25rem); }
.hero-band--centered .hero-band__main {
align-items: center;
gap: clamp(1rem, 0.7143rem + 1.1714vw, 1.5rem);
max-width: 67.5rem;
margin-inline: auto;
text-align: center;
}
.hero-band--centered .hero-band__grid { padding-block-start: clamp(1.75rem, 0.9143rem + 3.4286vw, 4rem); }
.hero-band--centered .hero-band__eyebrow { justify-content: center; }
.hero-band--centered .hero-band__deck {
max-width: 47.5rem;
font-size: clamp(1.0625rem, 0.9696rem + 0.381vw, 1.3125rem);
}
.hero-band--centered .hero-band__actions .button-row { justify-content: center; }
@media (min-width: 980px) {
.hero-band--split .hero-band__grid {
grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
gap: var(--grid-gap);
}
.hero-band--feature .hero-band__grid {
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: var(--space-12);
align-items: center;
padding-block-start: clamp(3.5rem, 1.1667rem + 3.8095vw, 4.5rem);
}
.hero-band--feature .hero-band__foot { margin-block-start: var(--space-12); }
.hero-band--deck-aside .hero-band__grid {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: var(--grid-gap);
}
.hero-band--deck-aside .hero-band__aside { justify-self: end; }
.hero-band--deck-aside .hero-band__aside .hero-band__deck { margin-block-end: 0.5rem; }
.hero-band--display-xl.hero-band--deck-aside .hero-band__aside .hero-band__deck { margin-block-end: 0.625rem; }
}
/* 22-footer.css */
.site-footer {
flex-grow: 1;
padding-block-end: var(--consent-h, 0px);
border-block-start: 1px solid var(--surface-rule);
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-sage);
}
.site-footer__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
padding-block: var(--space-6) var(--space-8);
}
.site-footer a,
.site-footer .link-button {
color: var(--color-mist);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.site-footer a:hover,
.site-footer .link-button:hover {
color: var(--color-ivory);
text-decoration-thickness: 2px;
}
.site-footer__legal { max-width: 100%; }
.site-footer__legal a {
display: inline-block;
padding-block: 0.8125rem;
margin-block: -0.8125rem;
}
.site-footer__socials {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.site-footer__socials .icon-button { text-decoration: none; color: var(--color-sage); }
.site-footer__socials .icon-button:hover { color: var(--color-ivory); background-color: rgba(200, 220, 188, 0.2); }
.site-footer__links {
display: flex;
flex-wrap: wrap;
gap: 0 0.625rem;
margin-inline: -0.375rem;
}
.site-footer__links a,
.site-footer__links .link-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap-min);
min-width: var(--tap-min);
padding-inline: 0.375rem;
font-family: inherit;
font-size: inherit;
line-height: 1.3;
text-align: start;
}
.site-footer__links a[aria-current="page"] { color: var(--color-ivory); text-decoration-thickness: 2px; }
@media (min-width: 768px) {
.site-footer__inner {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-8);
padding-block: 1.75rem 2.25rem;
}
}
/* 23-contact-band.css */
.contact-band__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
padding-block: clamp(2.5rem, 1.3857rem + 4.5714vw, 5.5rem) clamp(1.625rem, 0.5571rem + 4.381vw, 4.5rem);
}
.contact-band__title {
font-family: var(--font-display);
font-size: var(--fs-h2-xl);
font-weight: var(--weight-semibold);
line-height: 1.12;
color: var(--surface-heading);
text-wrap: wrap;
}
.contact-band__title em {
font-style: italic;
color: var(--heading-em);
}
.contact-band__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
.contact-band__text {
max-width: 34rem;
font-size: var(--fs-body-lg);
line-height: 1.6;
color: var(--surface-fg);
}
.contact-band .button--plain-case { padding-inline: 1.375rem; }
@media (min-width: 980px) {
.contact-band__inner {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
align-items: end;
gap: var(--space-13);
}
.contact-band__body { gap: var(--space-5); }
}
.contact-band--stacked .contact-band__stack {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 28rem;
}
.contact-band__pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.contact-band__pair .button { padding-inline: var(--space-4); }
.contact-band__email {
display: inline-flex;
align-items: center;
align-self: flex-start;
min-height: var(--tap-min);
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--surface-link);
overflow-wrap: anywhere;
}
.contact-band__email:hover { color: var(--surface-link-hover); }
/* 30-home.css */
.home-hero .hero-band__title {
font-size: clamp(2.3rem, 1.5769rem + 4.381vw, 5.52rem);
}
@media (min-width: 980px) {
.home-hero .hero-band__title { font-size: clamp(3.5rem, 1.81rem + 3.4vw, 4.9rem); }
}
@media (min-width: 980px) {
.home-hero .hero-band__grid { padding-block-start: 2.5rem; }
.home-hero .hero-band__main { gap: 1.125rem; }
.home-hero .hero-band__actions { padding-block-start: 0; }
}
.home-portrait {
--ring: 9.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.875rem, 0.6607rem + 0.8786vw, 1.375rem);
margin: 0;
min-width: 0;
}
.home-portrait__ring {
display: grid;
place-items: center;
inline-size: var(--ring);
max-inline-size: 100%;
aspect-ratio: 1;
border: 1px solid var(--rule-on-dark-strong);
border-radius: 50%;
}
.home-portrait__picture { inline-size: 90.25%; }
.home-portrait__img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 1;
border: clamp(5px, 0.2679rem + 0.1905vw, 7px) solid var(--color-sage);
border-radius: 50%;
object-fit: cover;
object-position: center 22%;
}
.home-portrait__caption {
max-inline-size: 26rem;
font-family: var(--font-ui);
font-size: var(--fs-label);
line-height: 1.5;
letter-spacing: var(--tracking-label);
text-align: center;
text-transform: uppercase;
color: var(--surface-label);
}
@media (max-width: 389.98px) {
.home-hero .hero-band__meta { padding-block: 0.625rem; }
.home-hero .hero-band__grid { padding-block-start: var(--space-5); }
.home-hero .hero-band__main { gap: var(--space-3); }
.home-hero .hero-band__deck { font-size: 1rem; line-height: 1.5; }
}
@media (min-width: 768px) {
.home-portrait { --ring: 12.5rem; }
}
@media (min-width: 980px) {
.home-portrait { --ring: 25.625rem; }
}
.home-work {
padding-block: clamp(2.75rem, 1.1571rem + 6.5333vw, 7rem) var(--space-9);
}
.home-cases {
display: flex;
flex-direction: column;
gap: clamp(1.125rem, 0.7143rem + 1.6857vw, 2.25rem);
}
.home-case {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr);
border: 1px solid var(--color-forest);
}
.home-case__body {
display: flex;
flex-direction: column;
gap: clamp(0.625rem, 0.3571rem + 1.0952vw, 1.125rem);
padding: clamp(1.125rem, 0.3036rem + 3.3667vw, 2.5rem)
clamp(1.25rem, 0.3036rem + 3.8762vw, 2.75rem);
min-width: 0;
}
.home-case__title {
font-family: var(--font-display);
font-size: var(--fs-h3-lg);
font-weight: var(--weight-semibold);
line-height: var(--lh-heading);
color: var(--surface-heading);
text-wrap: pretty;
}
.home-case__link {
color: inherit;
text-decoration: none;
}
.home-case__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.home-case:hover .home-case__link,
.home-case__link:focus-visible {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.home-case__link:focus-visible { outline: none; }
.home-case__link:focus-visible::after {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.home-case__facts {
display: flex;
flex-direction: column;
gap: clamp(0.625rem, 0.4821rem + 0.5857vw, 1rem);
margin: 0;
}
.home-case__fact {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.home-case__term {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.home-case__desc {
margin: 0;
font-size: clamp(0.9375rem, 0.8911rem + 0.1905vw, 1.0625rem);
line-height: 1.55;
color: var(--surface-fg);
}
.home-case__desc--problem { font-style: italic; }
.home-case__more {
display: inline-flex;
align-items: center;
gap: 0.45em;
margin-block-start: auto;
padding-block-start: var(--space-1);
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.3;
color: var(--surface-link);
}
.home-case:hover .home-case__more { color: var(--surface-link-hover); }
.home-case__shots {
position: relative;
order: -1;
overflow: hidden;
aspect-ratio: 16 / 11;
background-color: var(--color-fern);
border-block-end: 1px solid var(--color-stone);
}
.home-case__browser {
position: absolute;
inset: 9.1% 26.5% 9.1% 6.25%;
display: flex;
flex-direction: column;
border: 1px solid var(--color-forest);
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.home-case__bar {
display: flex;
align-items: center;
gap: clamp(0.25rem, 0.1786rem + 0.2929vw, 0.4375rem);
padding: clamp(0.3125rem, 0.2rem + 0.4619vw, 0.625rem)
clamp(0.5rem, 0.3571rem + 0.5857vw, 0.875rem);
border-block-end: 1px solid var(--color-stone);
}
.home-case__bar span {
inline-size: clamp(5px, 0.2679rem + 0.3810vw, 9px);
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--color-stone);
}
.home-case__browser .home-case__picture {
flex: 1 1 auto;
min-block-size: 0;
}
.home-case__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: top center;
}
.home-case__browser .home-case__img { object-position: top left; }
.home-case__phone {
position: absolute;
inset-inline-end: 6.25%;
inset-block-end: 6.4%;
inline-size: 31.25%;
aspect-ratio: 200 / 350;
overflow: hidden;
border: clamp(5px, 0.2679rem + 0.3810vw, 9px) solid var(--color-deep);
border-radius: clamp(1rem, 0.7381rem + 1.0667vw, 1.875rem);
background-color: var(--color-deep);
box-shadow: var(--shadow-device);
}
.home-case__phone .home-case__picture { block-size: 100%; }
@media (min-width: 980px) {
.home-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.home-case--text { grid-template-columns: minmax(0, 1fr); }
.home-case__body { border-inline-end: 1px solid var(--color-stone); }
.home-case--text .home-case__body { border-inline-end: 0; }
.home-case__shots {
order: 0;
aspect-ratio: auto;
min-block-size: 27.5rem;
border-block-end: 0;
}
}
.home-small {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: var(--space-6);
margin-block-start: var(--space-9);
}
.home-small__item { display: flex; min-width: 0; }
.home-small__card { flex: 1 1 auto; }
.home-small__card--research .card__label { color: var(--surface-muted); }
.home-small__meta { margin-block-start: auto; }
.home-arrow {
--icon-size: 1em;
margin-inline: 0.4em;
vertical-align: -0.15em;
}
.home-services {
padding-block: clamp(2.75rem, 1.2143rem + 6.2857vw, 6.5rem);
}
.home-services .section-head { margin-block-end: clamp(1.125rem, 0.5357rem + 2.419vw, 2.5rem); }
.home-lanes {
display: grid;
grid-template-columns: minmax(0, 1fr);
border-block-start: 1px solid var(--color-forest);
}
.home-lane {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-block: var(--space-6);
min-width: 0;
}
.home-lane + .home-lane { border-block-start: 1px solid var(--color-stone); }
.home-lane__label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.home-lane__title {
font-size: var(--fs-h3);
font-weight: var(--weight-semibold);
line-height: var(--lh-snug);
}
.home-lane__text {
font-size: 1rem;
line-height: 1.6;
color: var(--surface-fg);
}
.home-lane__link { align-self: flex-start; }
@media (min-width: 980px) {
.home-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-lane {
gap: 0.875rem;
padding: var(--space-8) clamp(1.5rem, 0.2rem + 2.5vw, 2.25rem) 0;
}
.home-lane:first-child { padding-inline-start: 0; }
.home-lane:last-child { padding-inline-end: 0; }
.home-lane + .home-lane {
border-block-start: 0;
border-inline-start: 1px solid var(--color-stone);
}
}
.home-method {
padding-block: clamp(2.25rem, 0.8214rem + 5.8571vw, 5.75rem);
}
.home-method .section-head { margin-block-end: clamp(1.5rem, 0.9286rem + 2.3429vw, 2.75rem); }
.home-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin: 0;
border-block-start: 1px solid var(--color-label);
}
.home-step {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block: var(--space-5);
min-width: 0;
}
.home-step + .home-step { border-block-start: 1px solid var(--rule-on-dark); }
.home-step__num {
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.4;
color: var(--surface-accent);
}
.home-step__title {
font-size: var(--fs-h4);
font-weight: var(--weight-semibold);
line-height: var(--lh-snug);
color: var(--surface-heading);
}
.home-step__text {
font-size: var(--fs-small);
line-height: 1.55;
color: var(--surface-fg);
}
@media (min-width: 768px) {
.home-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-6);
}
.home-step + .home-step { border-block-start: 0; }
.home-step { padding-block: 1.625rem 0; }
}
@media (min-width: 1200px) {
.home-steps {
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: var(--space-6);
}
.home-step { gap: 0.625rem; }
}
.home-notes {
padding-block: clamp(2.75rem, 1.2143rem + 6.2857vw, 6.5rem)
clamp(2.75rem, 1.4643rem + 5.2762vw, 6rem);
}
.home-notes__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
.home-note-lead,
.home-note {
position: relative;
isolation: isolate;
min-width: 0;
}
.home-note__link {
color: inherit;
text-decoration: none;
}
.home-note__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.home-note-lead:hover .home-note__link,
.home-note:hover .home-note__link,
.home-note__link:focus-visible {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.home-note__link:focus-visible { outline: none; }
.home-note__link:focus-visible::after {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.home-note__label {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.home-note-lead {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.home-note-lead__figure {
margin: 0;
overflow: hidden;
background-color: var(--color-forest);
}
.home-note-lead__figure img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.home-note-lead__title {
font-size: var(--fs-h3-lg);
font-weight: var(--weight-semibold);
line-height: var(--lh-heading);
text-wrap: pretty;
}
.home-note-lead__deck {
font-size: var(--fs-body-lg);
line-height: 1.55;
color: var(--surface-fg);
}
.home-notes__most { min-width: 0; }
.home-notes__most-label {
margin-block-end: var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.home-notes__list {
display: flex;
flex-direction: column;
border-block-start: 1px solid var(--color-stone);
}
.home-note {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
column-gap: var(--space-4);
align-items: start;
padding-block: 1.125rem 1.25rem;
}
.home-note__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.home-note__thumb {
display: block;
aspect-ratio: 16 / 9;
margin-block-start: 0.125rem;
overflow: hidden;
background-color: var(--color-fern);
}
.home-note__thumb img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.home-note + .home-note { border-block-start: 1px solid var(--color-stone); }
.home-note__title {
font-size: clamp(1.265rem, 1.1418rem + 0.5047vw, 1.5525rem);
font-weight: var(--weight-semibold);
line-height: 1.1;
text-wrap: pretty;
}
@media (min-width: 1280px) {
.home-notes__grid {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--space-11);
}
.home-notes__list { border-block-start: 0; }
.home-note {
grid-template-columns: 7.5rem minmax(0, 1fr);
padding-block: 1.375rem;
}
.home-note:first-child { padding-block-start: 0; }
.home-note:last-child { padding-block-end: 0; }
}
.home-about__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
padding-block: clamp(2rem, 1.3571rem + 2.6381vw, 3.5rem)
clamp(2.75rem, 1.4643rem + 5.2762vw, 6rem);
border-block-start: 1px solid var(--color-forest);
}
.home-about__body {
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
}
.home-about__lead {
font-family: var(--font-display);
font-size: clamp(1.38rem, 1.1665rem + 0.8762vw, 1.955rem);
font-weight: var(--weight-medium);
line-height: 1.25;
color: var(--surface-heading);
text-wrap: pretty;
}
.home-about__text {
font-size: var(--fs-body);
line-height: 1.6;
color: var(--surface-fg);
}
.home-about__links {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-7);
}
@media (min-width: 768px) {
.home-about__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: var(--grid-gap);
}
}
/* 31-work.css */
.work-shot {
position: relative;
overflow: hidden;
aspect-ratio: 610 / 470;
background-color: var(--color-fern);
}
.work-shot__desktop {
position: absolute;
inset: 8.5% 27.9% 8.5% 6.6%;
display: flex;
flex-direction: column;
background-color: var(--color-white);
border: 1px solid var(--color-forest);
box-shadow: var(--shadow-card);
}
.work-shot--no-phone .work-shot__desktop { inset-inline-end: 6.6%; }
.work-shot__bar {
display: flex;
flex: none;
align-items: center;
gap: clamp(4px, 0.6vw, 7px);
padding: clamp(5px, 0.8vw, 10px) clamp(8px, 1.1vw, 14px);
border-block-end: 1px solid var(--color-stone);
}
.work-shot__bar span {
inline-size: clamp(6px, 0.7vw, 9px);
block-size: clamp(6px, 0.7vw, 9px);
border-radius: 50%;
background-color: var(--color-stone);
}
.work-shot__pic {
position: relative;
display: block;
flex: 1 1 auto;
min-block-size: 0;
overflow: hidden;
}
.work-shot__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: top center;
}
.work-shot__desktop .work-shot__img { object-position: left top; }
.work-shot__phone {
position: absolute;
inset-inline-end: 6.6%;
inset-block-end: 6%;
inline-size: 32.8%;
block-size: 80.9%;
overflow: hidden;
border: clamp(5px, 0.65vw, 9px) solid var(--color-deep);
border-radius: clamp(16px, 2.1vw, 30px);
background-color: var(--color-deep);
box-shadow: var(--shadow-device);
}
.work-shot__phone .work-shot__pic {
position: absolute;
inset: 0;
border-radius: clamp(11px, 1.45vw, 21px);
}
@media (min-width: 768px) {
.work-shot--wide { aspect-ratio: 1200 / 640; }
.work-shot--wide .work-shot__desktop { inset: 6.25% 14.2% 6.25% 3.3%; }
.work-shot--wide.work-shot--no-phone .work-shot__desktop { inset-inline-end: 3.3%; }
.work-shot--wide .work-shot__phone {
inset-inline-end: 3.3%;
inset-block-end: 4.4%;
inline-size: 21%;
block-size: 86%;
}
}
.work-lineage {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-8);
padding: clamp(1.5rem, 1.1786rem + 1.3186vw, 2.25rem) clamp(1.25rem, 0.7143rem + 2.1978vw, 2.5rem);
}
.work-lineage__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-1) var(--space-6);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.work-lineage__list {
position: relative;
display: grid;
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
.work-lineage__list::before {
content: "";
position: absolute;
inset-block: 0.5rem;
inset-inline-start: 7px;
border-inline-start: 2px solid var(--color-sage);
}
.work-lineage__item {
position: relative;
display: flex;
flex-direction: column;
gap: 0.125rem;
padding-inline-start: 2.25rem;
min-width: 0;
}
.work-lineage__item::before {
content: "";
position: absolute;
inset-block-start: 0.125rem;
inset-inline-start: 0;
inline-size: 16px;
block-size: 16px;
border-radius: 50%;
background-color: var(--color-sage);
}
.work-lineage__item--current::before { background-color: var(--color-clay-light); }
.work-lineage__year {
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.25rem;
color: var(--surface-fg);
}
.work-lineage__name {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.0678rem + 0.337vw, 1.265rem);
font-weight: var(--weight-semibold);
line-height: 1.15;
color: var(--surface-heading);
}
.work-lineage__note {
margin-block-start: var(--space-1);
font-size: var(--fs-small);
line-height: 1.5;
color: var(--surface-fg);
}
.work-lineage__tags {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.6;
color: var(--surface-label);
}
@media (min-width: 768px) {
.work-lineage__list {
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--space-5);
}
.work-lineage__list::before {
inset-block: 1.9rem auto;
inset-inline: 0;
border-inline-start: 0;
border-block-start: 2px solid var(--color-sage);
}
.work-lineage__item { padding-inline-start: 0; }
.work-lineage__year { margin-block-end: 2.25rem; }
.work-lineage__item::before { inset-block-start: 1.375rem; }
.work-case__media .work-lineage { aspect-ratio: 610 / 470; }
}
.work-lineage--lg {
gap: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
padding: clamp(1.5rem, 0.9643rem + 2.1978vw, 3rem) clamp(1.25rem, 0.5357rem + 2.9304vw, 3.5rem);
}
.work-lineage--lg .work-lineage__name { font-size: clamp(1.375rem, 1.1071rem + 1.0989vw, 2rem); }
.work-cases { padding-block-end: clamp(1rem, 0.6786rem + 1.3186vw, 1.5rem); }
.work-case {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
padding-block: clamp(1.75rem, 1.2143rem + 2.1978vw, 3rem);
border-block-end: 1px solid var(--surface-rule);
}
.work-case:first-child { padding-block-start: 0; }
.work-case:last-child { border-block-end: 0; }
.work-case__media { min-width: 0; }
.work-case__body {
display: flex;
flex-direction: column;
gap: clamp(0.875rem, 0.7679rem + 0.4396vw, 1.125rem);
min-width: 0;
}
.work-case__title {
font-size: var(--fs-h3-lg);
font-weight: var(--weight-semibold);
line-height: 1.12;
text-wrap: balance;
}
.work-case__facts .fact-list__desc { line-height: 1.5; }
.work-case__more {
align-self: flex-start;
margin-block-start: auto;
}
@media (min-width: 980px) {
.work-case {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-10);
}
}
.work-files {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 768px) {
.work-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.work-files > :only-child { grid-column: 1 / -1; }
.work-public__list {
margin: 0;
padding: 0;
list-style: none;
border-block-start: 1px solid var(--surface-rule-strong);
}
.work-public__link {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr) auto;
grid-template-areas:
"num name icon"
".   note icon";
align-items: center;
gap: var(--space-1) var(--space-4);
padding-block: clamp(1rem, 0.8929rem + 0.4396vw, 1.25rem);
border-block-end: 1px solid var(--surface-rule);
color: var(--surface-heading);
text-decoration: none;
}
.work-public__num {
grid-area: num;
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--surface-muted);
}
.work-public__name {
grid-area: name;
font-family: var(--font-display);
font-size: clamp(1.38rem, 1.1335rem + 1.011vw, 1.955rem);
font-weight: var(--weight-semibold);
line-height: 1.1;
}
.work-public__note {
grid-area: note;
font-size: var(--fs-small);
line-height: 1.45;
color: var(--surface-fg);
}
.work-public__icon {
grid-area: icon;
justify-self: end;
color: var(--surface-link);
}
.work-public__link:hover .work-public__name {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.work-public__link:hover .work-public__icon { color: var(--surface-link-hover); }
@media (min-width: 768px) {
.work-public__link {
grid-template-columns: 3.75rem minmax(0, 1fr) minmax(0, 17.5rem) 2.5rem;
grid-template-areas: "num name note icon";
}
}
.work-clients__intro {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: 40rem;
margin-block-end: var(--stack-lg);
}
.work-clients__lead {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--weight-semibold);
line-height: 1.15;
color: var(--surface-heading);
text-wrap: balance;
}
.work-clients__text { color: var(--surface-fg); }
.work-clients__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.work-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.work-clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.work-client {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid var(--surface-rule);
}
.work-client:hover { border-color: var(--surface-rule-strong); }
.work-client__shot {
aspect-ratio: 4 / 3;
overflow: hidden;
border-block-end: 1px solid var(--surface-rule);
background-color: var(--color-fern);
}
.work-client__shot picture { display: block; block-size: 100%; }
.work-client__img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: top center;
}
.work-client__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5) clamp(1.25rem, 1.1429rem + 0.4396vw, 1.5rem) var(--space-6);
}
.work-client__name {
font-size: clamp(1.375rem, 1.2946rem + 0.3297vw, 1.5625rem);
font-weight: var(--weight-semibold);
line-height: 1.15;
}
.work-client__link {
color: inherit;
text-decoration: none;
}
.work-client__link::after {
content: "";
position: absolute;
inset: 0;
}
.work-client:hover .work-client__link,
.work-client__link:focus-visible {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.work-client__link:focus-visible { outline: none; }
.work-client__link:focus-visible::after {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.work-client__ext {
--icon-size: 0.62em;
margin-inline-start: 0.3em;
vertical-align: 0.05em;
color: var(--surface-link);
}
.work-client__blurb {
font-size: var(--fs-body);
line-height: 1.55;
}
.work-client__note {
margin-block-start: auto;
padding-block-start: var(--space-1);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.5;
color: var(--surface-muted);
}
.work-stories__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 1200px) {
.work-stories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.work-story {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
padding: clamp(1.375rem, 1.1429rem + 0.9524vw, 2rem) clamp(1.25rem, 0.9714rem + 1.1429vw, 2rem);
border: 1px solid var(--surface-rule-strong);
}
.work-story__badge {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.work-story__title {
font-size: var(--fs-h3);
font-weight: var(--weight-semibold);
line-height: 1.1;
text-wrap: balance;
}
.work-story__tenure {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.5;
color: var(--surface-muted);
}
.work-story__facts { margin-block-start: var(--space-3); }
.work-story__facts .fact-list__desc { line-height: 1.55; }
.work-story__links {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-6);
margin: auto 0 0;
padding: var(--space-2) 0 0;
list-style: none;
}
.case-figure { padding-block-start: clamp(2.5rem, 1.9643rem + 2.1978vw, 4.5rem); }
.case-figure__fig {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
}
.case-section { padding-block-start: clamp(2.75rem, 2.1071rem + 2.6374vw, 5rem); }
.case-section__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
.case-section__body {
display: flex;
flex-direction: column;
gap: clamp(1rem, 0.8393rem + 0.6593vw, 1.375rem);
min-width: 0;
}
.case-section__body--tight { gap: clamp(0.875rem, 0.7679rem + 0.4396vw, 1.125rem); }
@media (min-width: 980px) {
.case-section__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
column-gap: var(--grid-gap);
}
}
.case-lead {
font-family: var(--font-display);
font-size: clamp(1.495rem, 1.2485rem + 1.011vw, 2.07rem);
font-weight: var(--weight-medium);
line-height: 1.2;
color: var(--surface-heading);
text-wrap: pretty;
}
.case-lead--sm {
font-size: clamp(1.5rem, 1.2857rem + 0.8791vw, 2rem);
line-height: 1.22;
}
.case-text {
font-size: var(--fs-body-lg);
line-height: 1.7;
}
.case-baseline {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 480px) {
.case-baseline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.case-steps {
margin: 0;
padding: 0;
list-style: none;
border-block-start: 1px solid var(--surface-rule-strong);
}
.case-step {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
gap: clamp(0.75rem, 0.5357rem + 0.8791vw, 1.125rem);
padding-block: clamp(1.125rem, 1.0536rem + 0.2930vw, 1.375rem);
border-block-end: 1px solid var(--surface-rule);
}
.case-step__num {
padding-block-start: 0.45em;
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.3;
color: var(--surface-accent);
}
.case-step__body {
display: flex;
flex-direction: column;
gap: 0.375rem;
min-width: 0;
}
.case-step__title {
font-size: clamp(1.265rem, 1.1665rem + 0.4044vw, 1.495rem);
font-weight: var(--weight-semibold);
line-height: 1.15;
}
.case-step__text {
font-size: var(--fs-body);
line-height: 1.6;
}
@media (min-width: 768px) {
.case-step { grid-template-columns: 3.5rem minmax(0, 1fr); }
}
.case-outcome {
margin-block-start: clamp(3rem, 2.1071rem + 3.6630vw, 5.5rem);
padding-block: clamp(2.75rem, 2.1071rem + 2.6374vw, 5rem);
}
.case-outcome__head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-2) var(--space-6);
margin-block-end: clamp(1.5rem, 1.2857rem + 0.8791vw, 2rem);
}
.case-outcome__stats .stat__value {
font-size: clamp(2.5rem, 2.3143rem + 0.7619vw, 3rem);
text-wrap: balance;
}
.case-outcome__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: var(--space-5);
margin: 0;
padding: 0;
list-style: none;
}
.case-quote {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-4) var(--space-5);
margin: clamp(1.5rem, 1.2857rem + 0.8791vw, 2rem) 0 0;
padding: clamp(1.5rem, 1.2321rem + 1.0989vw, 2.25rem) clamp(1.25rem, 0.8036rem + 1.8315vw, 2.5rem);
}
.case-quote__mark {
font-family: var(--font-display);
font-size: clamp(3.22rem, 2.5218rem + 2.8645vw, 5.175rem);
line-height: 0.7;
color: var(--surface-accent);
}
.case-quote__body {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
.case-quote__text {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.38rem, 1.1828rem + 0.8088vw, 1.84rem);
line-height: 1.25;
color: var(--surface-heading);
}
.case-quote__by {
font-family: var(--font-ui);
font-size: var(--fs-mono);
line-height: 1.5;
color: var(--surface-label);
}
.case-quote-wrap { padding-block-start: clamp(2.75rem, 2.1071rem + 2.6374vw, 5rem); }
.case-related { padding-block: clamp(3rem, 2.1071rem + 3.6630vw, 5.5rem); }
.case-related__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: var(--space-6);
margin: 0;
padding: clamp(1.5rem, 1.1786rem + 1.3186vw, 2.25rem) 0 0;
list-style: none;
border-block-start: 1px solid var(--surface-rule-strong);
}
.case-related__grid > li { display: flex; min-width: 0; }
.case-related__grid .card { flex: 1 1 auto; }
.case-related__note .card__title { font-size: clamp(1.265rem, 1.1665rem + 0.4044vw, 1.495rem); line-height: 1.12; }
/* 32-services.css */
.svc-page { padding-block-end: var(--section-y); }
.svc-section {
padding-block-start: clamp(2.5rem, 1.3571rem + 4.6886vw, 5.5rem);
}
.svc-section__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
.svc-section__label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
text-wrap: pretty;
color: var(--surface-accent);
}
.svc-section__body { min-width: 0; }
.svc-section__body > :first-child { margin-block-start: 0; }
.svc-section__aside {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
@media (min-width: 980px) {
.svc-section__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
grid-template-rows: auto 1fr;
column-gap: var(--grid-gap);
row-gap: var(--space-8);
}
.svc-section__label { grid-column: 1; grid-row: 1; padding-block-start: 0.35rem; }
.svc-section__heading { grid-column: 1; grid-row: 1; }
.svc-section__heading.rail-heading--sticky { grid-row: 1 / -1; }
.svc-section__body { grid-column: 2; grid-row: 1 / span 2; }
.svc-section__aside { grid-column: 1; grid-row: 2; align-self: start; }
.svc-section--cta .svc-section__body { grid-column: 1 / -1; }
}
.svc-crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 0.625rem;
margin: 0 0 var(--space-4);
padding: 0;
list-style: none;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-muted);
}
.svc-crumbs li { display: inline-flex; align-items: center; gap: 0.625rem; }
.svc-crumbs li + li::before {
content: "/";
content: "/" / "";
color: var(--surface-label);
}
.svc-crumbs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap-min);
min-inline-size: var(--tap-min);
color: var(--surface-link);
}
.svc-crumbs a:hover { color: var(--surface-link-hover); }
@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
.svc-crumbs a { min-height: 1.5rem; min-inline-size: 0; }
}
.svc-lead-title {
max-width: 46rem;
font-size: clamp(1.84rem, 1.5115rem + 1.348vw, 2.76rem);
font-weight: var(--weight-medium);
line-height: 1.12;
}
.svc-lede {
max-width: var(--measure-deck);
margin-block-start: var(--space-5);
font-size: var(--fs-lede);
line-height: var(--lh-body);
color: var(--surface-fg);
text-wrap: pretty;
}
.svc-h2 {
max-width: 46rem;
margin-block-end: var(--space-6);
font-size: clamp(1.725rem, 1.4293rem + 1.2132vw, 2.53rem);
line-height: 1.12;
}
.svc-prose {
max-width: var(--measure);
font-size: var(--fs-body-lg);
line-height: 1.65;
color: var(--surface-fg);
}
.svc-prose > * + * { margin-block-start: 1em; }
.svc-prose + .svc-prose,
.svc-stats + .svc-prose { margin-block-start: var(--space-8); }
.svc-sublabel {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.svc-prose > .svc-sublabel { margin-block-start: 2.25em; }
.svc-prose > .svc-sublabel:first-child { margin-block-start: 0; }
.svc-prose > .svc-sublabel + * { margin-block-start: 0.75em; }
.svc-list { padding-inline-start: 1.25em; }
.svc-list li + li { margin-block-start: 0.5em; }
.svc-list li::marker { color: var(--color-clay); }
.svc-prose .svc-questions {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-inline-start: var(--space-5);
border-inline-start: 2px solid var(--color-clay);
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.0678rem + 0.337vw, 1.38rem);
font-style: italic;
font-weight: var(--weight-medium);
line-height: 1.3;
color: var(--surface-heading);
}
.svc-callout {
max-width: var(--measure);
margin-block-start: var(--space-8);
padding: var(--space-5) var(--space-6);
border-inline-start: 3px solid var(--color-clay);
background-color: var(--color-warm);
font-family: var(--font-display);
font-size: clamp(1.265rem, 1.1418rem + 0.5055vw, 1.61rem);
font-style: italic;
font-weight: var(--weight-medium);
line-height: 1.3;
color: var(--color-forest);
}
.svc-panel {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(1.25rem, 1.0714rem + 0.7326vw, 1.75rem);
font-size: var(--fs-body);
line-height: 1.6;
}
.svc-panel__title {
font-size: clamp(1.265rem, 1.224rem + 0.1685vw, 1.38rem);
line-height: 1.15;
}
.svc-checklist {
display: flex;
flex-direction: column;
font-size: var(--fs-small);
line-height: 1.45;
}
.svc-checklist li {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding-block: 0.5rem;
border-block-start: 1px solid var(--color-stone);
}
.svc-checklist li:first-child { border-block-start-color: var(--color-forest); }
.svc-checklist li::before {
content: "";
flex: none;
inline-size: 0.6em;
block-size: 0.32em;
border-inline-start: 2px solid var(--color-emerald);
border-block-end: 2px solid var(--color-emerald);
transform: translateY(-0.2em) rotate(-45deg);
}
.svc-rows { border-block-start: 1px solid var(--color-forest); }
.svc-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2) var(--space-8);
padding-block: clamp(1.125rem, 0.8571rem + 1.0989vw, 1.625rem);
border-block-end: 1px solid var(--color-stone);
}
.svc-row__title {
font-size: var(--fs-h4);
font-weight: var(--weight-semibold);
line-height: 1.15;
color: var(--surface-heading);
}
.svc-row__text {
font-size: var(--fs-body-lg);
line-height: 1.6;
color: var(--surface-fg);
}
@media (min-width: 768px) {
.svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}
.svc-band {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-block-start: var(--space-6);
padding: clamp(1.375rem, 1.0536rem + 1.3187vw, 2.25rem);
font-size: var(--fs-body-lg);
line-height: 1.6;
}
.svc-band__title {
max-width: 40rem;
font-size: var(--fs-h4);
line-height: 1.15;
}
.svc-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(0.75rem, 0.6071rem + 0.5861vw, 1.25rem);
}
@media (min-width: 600px) {
.svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-steps--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
.svc-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.svc-step {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(1.25rem, 1.1071rem + 0.5861vw, 1.625rem);
}
.svc-step__num {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.svc-step__title {
font-size: var(--fs-h4);
line-height: 1.12;
}
.svc-step__text {
font-size: var(--fs-body);
line-height: 1.55;
}
.svc-stats {
max-width: 51.25rem;
margin-block-start: var(--space-8);
}
.svc-stats .stat__value {
font-size: clamp(1.75rem, 1.4643rem + 1.1722vw, 2.5rem);
overflow-wrap: anywhere;
}
.svc-offers {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
@media (min-width: 768px) {
.svc-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-offers--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.svc-offers--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.svc-section .svc-offers { grid-template-columns: minmax(0, 1fr); }
}
.svc-offers__ext {
display: inline-block;
margin-inline-start: 0.3em;
vertical-align: -0.05em;
color: var(--surface-link);
}
.svc-cta {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
padding: clamp(1.75rem, 1.1071rem + 2.6374vw, 3.5rem);
}
.svc-cta__text { display: flex; flex-direction: column; gap: var(--space-4); max-width: 44rem; }
.svc-cta__title {
font-size: clamp(1.84rem, 1.5115rem + 1.348vw, 2.76rem);
line-height: 1.12;
}
.svc-cta__text p { font-size: var(--fs-body-lg); line-height: 1.6; }
@media (min-width: 768px) {
.svc-cta {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: var(--space-12);
}
}
.svc-related { padding-block: clamp(2.75rem, 1.4643rem + 5.2747vw, 5rem); }
.svc-related__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-10);
}
@media (min-width: 980px) {
.svc-related__grid {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: var(--space-11);
}
}
.svc-related__work,
.svc-related__notes { min-width: 0; }
.svc-related__work { display: flex; flex-direction: column; gap: var(--space-5); }
.svc-related__notes .svc-related__heading { padding-block-end: var(--space-5); }
.svc-case {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
border: 1px solid var(--color-forest);
}
@media (min-width: 600px) {
.svc-case--image { grid-template-columns: 13.75rem minmax(0, 1fr); }
}
.svc-case__media { min-width: 0; overflow: hidden; }
.svc-case__img {
inline-size: 100%;
block-size: 11rem;
object-fit: cover;
object-position: top left;
}
@media (min-width: 600px) {
.svc-case__media, .svc-case__img { block-size: 100%; }
.svc-case__img { min-block-size: 10.625rem; }
}
.svc-case__text {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: clamp(1.25rem, 1.1071rem + 0.5861vw, 1.625rem);
min-width: 0;
}
.svc-case__label {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.svc-case__title {
font-size: clamp(1.38rem, 1.3143rem + 0.2696vw, 1.495rem);
font-weight: var(--weight-semibold);
line-height: 1.1;
}
.svc-case__link {
color: var(--surface-heading);
text-decoration: none;
}
.svc-case__link::after {
content: "";
position: absolute;
inset: 0;
}
.svc-case:hover .svc-case__link,
.svc-case__link:focus-visible {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.svc-case__link:focus-visible { outline: none; }
.svc-case__link:focus-visible::after {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.svc-case__summary {
font-size: var(--fs-small);
line-height: 1.5;
color: var(--surface-fg);
}
.svc-notes li { border-block-start: 1px solid var(--color-stone); }
.svc-notes li:first-child { border-block-start-color: var(--color-forest); }
.svc-notes li:last-child { border-block-end: 1px solid var(--color-stone); }
.svc-notes__link {
display: block;
padding-block: clamp(0.875rem, 0.7857rem + 0.3663vw, 1.125rem);
font-family: var(--font-display);
font-size: clamp(1.265rem, 1.2157rem + 0.2022vw, 1.4375rem);
font-weight: var(--weight-semibold);
line-height: 1.15;
color: var(--color-forest);
text-decoration: none;
text-wrap: pretty;
}
.svc-notes__link:hover,
.svc-notes__link:focus-visible {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.svc-overview { padding-block-start: var(--section-y); }
.svc-overview:last-child { padding-block-end: var(--section-y); }
.svc-overview__heading { margin-block-end: var(--space-6); }
.svc-lanes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
@media (min-width: 980px) {
.svc-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.svc-lane {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(1.375rem, 1.1429rem + 0.9524vw, 2rem) clamp(1.25rem, 0.9714rem + 1.1429vw, 2rem);
}
.svc-lane.surface-white { border: 1px solid var(--color-forest); }
.svc-lane__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.svc-lane__title {
font-size: var(--fs-h4);
line-height: 1.12;
}
.svc-lane__text {
font-size: var(--fs-body);
line-height: 1.6;
}
.svc-lane__links {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-block-start: auto;
}
.ref-strip {
background-color: var(--color-emerald);
color: var(--color-ivory);
}
html.has-referral .ref-strip[hidden] {
display: block !important;
visibility: hidden;
}
.ref-strip__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-1) var(--space-6);
min-height: var(--tap-min);
padding-block: var(--space-2);
}
.ref-strip__text {
min-width: 0;
font-family: var(--font-ui);
font-size: var(--fs-small);
line-height: 1.45;
}
.ref-strip__name { font-weight: var(--weight-semibold); }
.ref-strip__link {
display: inline-flex;
align-items: center;
gap: 0.45em;
min-height: var(--tap-min);
font-family: var(--font-ui);
font-size: var(--fs-mono);
letter-spacing: var(--tracking-button);
text-transform: uppercase;
color: var(--color-ivory);
text-decoration-color: var(--color-sage);
}
.ref-strip__link:hover { color: var(--color-ivory); text-decoration-thickness: 2px; }
.ref-strip__link:focus-visible { --focus-color: var(--color-ivory); }
.land-trust {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-4);
font-family: var(--font-ui);
font-size: var(--fs-small);
line-height: 1.45;
color: var(--surface-label);
}
.land-trust li { display: inline-flex; align-items: center; gap: var(--space-4); min-width: 0; }
.land-trust li + li::before { content: "\00B7"; color: var(--surface-accent); }
.land-proof {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
padding: clamp(1.25rem, 1.0714rem + 0.7326vw, 1.75rem);
border: 1px solid var(--rule-on-dark-strong);
}
.land-proof__label {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.land-proof__score {
display: flex;
align-items: center;
gap: 0.3em;
font-family: var(--font-display);
line-height: 1;
color: var(--surface-heading);
font-variant-numeric: lining-nums tabular-nums;
}
.land-proof__was {
font-size: clamp(1.5rem, 1.3214rem + 0.7326vw, 2rem);
color: var(--surface-muted);
text-decoration-thickness: 2px;
}
.land-proof__score .icon { --icon-size: 0.55em; font-size: clamp(2rem, 1.6429rem + 1.4652vw, 3rem); color: var(--surface-accent); }
.land-proof__now {
font-size: clamp(3rem, 2.4643rem + 2.1978vw, 4.5rem);
font-weight: var(--weight-semibold);
}
.land-proof__text {
font-size: var(--fs-body);
line-height: 1.5;
color: var(--surface-fg);
}
.land-proof__bar {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-block-start: var(--space-2);
}
.land-proof__track {
position: relative;
display: block;
block-size: 4px;
border-radius: var(--radius-pill);
background-color: var(--rule-on-dark-strong);
}
.land-proof__track::after {
content: "";
position: absolute;
inset-block-start: -3px;
inset-inline-end: 0;
inline-size: 10px;
block-size: 10px;
border-radius: 50%;
background-color: var(--color-sage);
}
.land-proof__marker {
position: absolute;
inset-block-start: -3px;
inset-inline-start: 38%;
inline-size: 10px;
block-size: 10px;
margin-inline-start: -5px;
border-radius: 50%;
background-color: var(--color-clay-light);
}
.land-proof__ticks {
display: flex;
justify-content: space-between;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
color: var(--surface-label);
}
.land-proof__tick { min-width: 0; }
.land-proof__tick--avg { color: var(--surface-accent); }
.land-proof__foot {
padding-block-start: var(--space-3);
border-block-start: 1px solid var(--surface-rule);
font-family: var(--font-ui);
font-size: var(--fs-small);
line-height: 1.45;
color: var(--surface-muted);
}
.land-crumbs ol { margin-block-end: var(--space-6); }
.land-cases {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
@media (min-width: 768px) {
.land-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.svc-case--stacked.svc-case--image { grid-template-columns: minmax(0, 1fr); }
.svc-case--stacked .svc-case__media {
aspect-ratio: 16 / 10;
block-size: auto;
border-block-end: 1px solid var(--color-stone);
}
.svc-case--stacked .svc-case__img {
block-size: 100%;
min-block-size: 0;
object-position: top left;
}
.svc-case--stacked .svc-case__summary { font-size: var(--fs-body); }
.land-cases__cta .card__text { font-size: var(--fs-body); }
.land-cases__more {
display: inline-flex;
align-items: center;
gap: 0.45em;
margin-block-start: auto;
font-family: var(--font-ui);
font-size: var(--fs-mono);
letter-spacing: var(--tracking-button);
text-transform: uppercase;
color: var(--surface-link);
}
.land-cases__cta:hover .land-cases__more { color: var(--surface-link-hover); }
.land-clients {
margin-block-start: clamp(2rem, 1.4286rem + 2.3443vw, 3.5rem);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-stone);
}
.land-clients__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-1) var(--space-6);
margin-block-end: var(--space-4);
}
.land-clients__title { font-size: var(--fs-h4); }
.land-clients__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.land-client {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.land-client:nth-child(n+5) { display: none; }
@media (min-width: 768px) {
.land-clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.land-client:nth-child(n+5) { display: flex; }
.land-client:nth-child(n+7) { display: none; }
}
@media (min-width: 1200px) {
.land-clients__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
}
.land-client__link {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
color: inherit;
text-decoration: none;
}
.land-client__shot {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--color-stone);
background-color: var(--color-fern);
}
.land-client__shot picture { block-size: 100%; }
.land-client__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: top center;
}
.land-client__link:hover .land-client__shot { border-color: var(--color-forest); }
.land-client__name {
margin-block-start: var(--space-1);
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: var(--weight-semibold);
line-height: 1.3;
color: var(--surface-heading);
text-wrap: pretty;
}
.land-client__link:hover .land-client__name,
.land-client__link:focus-visible .land-client__name {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.land-client__kind {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.land-client__tag {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-2);
z-index: 1;
padding: 0.2rem 0.5rem;
background-color: var(--color-emerald);
color: var(--color-ivory);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.land-client.is-referrer .land-client__shot {
border-color: var(--color-emerald);
box-shadow: 0 0 0 2px var(--color-emerald);
}
.land-client__story {
display: inline-flex;
align-items: center;
gap: 0.35em;
min-height: var(--tap-min);
font-family: var(--font-ui);
font-size: var(--fs-small);
line-height: 1.3;
color: var(--surface-link);
}
.land-client__story:hover { color: var(--surface-link-hover); }
.land-note {
margin-block-start: clamp(1.75rem, 1.3214rem + 1.7582vw, 2.875rem);
padding: var(--space-5) var(--space-6);
border: 1px dashed var(--color-label);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--surface-muted);
text-wrap: pretty;
}
.land-lanes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
@media (min-width: 980px) {
.land-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.land-lane {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
padding: clamp(1.375rem, 1.1429rem + 0.9524vw, 2rem) clamp(1.25rem, 0.9714rem + 1.1429vw, 2rem);
border: 1px solid var(--color-forest);
}
.land-lane__num {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.land-lane__title { font-size: var(--fs-h4); }
.land-lane__text { font-size: var(--fs-body); line-height: 1.55; }
.land-lane__list {
padding-inline-start: 1.1em;
font-size: 1rem;
line-height: 1.5;
color: var(--surface-fg);
}
.land-lane__list li + li { margin-block-start: 0.45em; }
.land-lane__list li::marker { color: var(--color-clay); }
.land-pattern__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
@media (min-width: 980px) {
.land-pattern__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: var(--grid-gap);
align-items: start;
}
}
.land-pattern__copy {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
max-width: var(--measure);
}
.land-pattern__title {
font-size: var(--fs-h2);
line-height: 1.12;
}
.land-pattern__title em { font-style: italic; color: var(--color-clay-dark); }
.land-pattern__copy p { font-size: var(--fs-body-lg); line-height: 1.6; }
.land-pattern__side { min-width: 0; }
.land-pattern__label {
margin-block-end: var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: var(--weight-semibold);
color: var(--surface-heading);
}
.land-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.land-chip {
display: inline-flex;
align-items: center;
min-width: 0;
min-height: 2.25rem;
padding: 0.35rem 0.85rem;
border: 1px solid var(--color-forest);
border-radius: var(--radius-pill);
background-color: var(--color-white);
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.3;
color: var(--color-forest);
}
.land-chip--inverse {
background-color: var(--color-forest);
color: var(--color-ivory);
}
.land-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
border-block-start: 3px solid var(--color-forest);
}
.land-step {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
padding-block: var(--space-6);
}
.land-step + .land-step { border-block-start: 1px solid var(--color-stone); }
.land-step__num {
font-family: var(--font-display);
font-size: var(--fs-stat);
line-height: 1;
color: var(--color-clay);
font-variant-numeric: lining-nums tabular-nums;
}
.land-step__title { font-size: var(--fs-h4); }
.land-step__text { font-size: var(--fs-body); line-height: 1.55; }
@media (min-width: 768px) {
.land-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); }
.land-step + .land-step { border-block-start: 0; }
}
.land-aeo__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-9);
}
@media (min-width: 980px) {
.land-aeo__grid {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--grid-gap);
align-items: start;
}
}
.land-aeo__copy {
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
}
.land-aeo__title {
max-width: 46rem;
font-size: var(--fs-h2);
line-height: 1.12;
}
.land-aeo__title em { font-style: italic; color: var(--heading-em); }
.land-aeo__prose {
max-width: var(--measure);
font-size: var(--fs-body-lg);
line-height: 1.65;
color: var(--surface-fg);
}
.land-aeo__prose > * + * { margin-block-start: 1em; }
.land-aeo__side {
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
}
.land-tiles {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
@media (min-width: 480px) and (max-width: 979.98px) {
.land-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.land-tile {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
padding: var(--space-5);
border: 1px solid var(--rule-on-dark-strong);
}
.land-tile__value {
font-family: var(--font-display);
font-size: var(--fs-stat);
font-weight: var(--weight-semibold);
line-height: 1;
color: var(--surface-heading);
font-variant-numeric: lining-nums tabular-nums;
overflow-wrap: anywhere;
}
.land-tile__label {
font-size: var(--fs-small);
line-height: 1.45;
color: var(--surface-fg);
}
.land-aeo__note {
font-size: var(--fs-small);
line-height: 1.55;
color: var(--surface-muted);
}
.land-fit {
display: grid;
grid-template-columns: minmax(0, 1fr);
border-block-start: 1px solid var(--color-forest);
}
.land-fit__item {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
padding-block: var(--space-6);
}
.land-fit__item + .land-fit__item { border-block-start: 1px solid var(--color-stone); }
.land-fit__title { font-size: var(--fs-h4); }
.land-fit__text { font-size: var(--fs-body); line-height: 1.55; }
@media (min-width: 768px) {
.land-fit { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); }
.land-fit__item + .land-fit__item { border-block-start: 0; }
}
.land-fit__note {
margin-block-start: var(--space-6);
font-family: var(--font-display);
font-size: var(--fs-body-lg);
font-style: italic;
line-height: 1.5;
color: var(--color-label);
}
.land-faq__inner { max-width: var(--measure); }
.land-faq .eyebrow { margin-block-end: var(--space-3); }
.land-faq__title {
margin-block-end: var(--space-6);
font-size: var(--fs-h2);
}
.svc-faq { border-block-start: 1px solid var(--color-forest); }
.svc-faq__item { border-block-end: 1px solid var(--color-stone); }
.svc-faq__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: var(--tap-min);
padding-block: clamp(0.875rem, 0.7321rem + 0.5861vw, 1.25rem);
list-style: none;
cursor: pointer;
}
.svc-faq__summary::-webkit-details-marker { display: none; }
.svc-faq__summary::marker { content: ""; }
.svc-faq__q {
min-width: 0;
font-size: var(--fs-h4);
font-weight: var(--weight-semibold);
line-height: 1.2;
color: var(--surface-heading);
text-wrap: pretty;
}
.svc-faq__summary:hover .svc-faq__q { color: var(--surface-link); }
.svc-faq__summary:focus-visible { outline-offset: 2px; }
.svc-faq__mark {
position: relative;
flex: none;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.svc-faq__mark::before,
.svc-faq__mark::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 50%;
block-size: 2px;
margin-block-start: -1px;
background-color: var(--color-emerald);
transition: transform var(--dur-fast) var(--ease);
}
.svc-faq__mark::after { transform: rotate(90deg); }
.svc-faq__item[open] > .svc-faq__summary .svc-faq__mark::after { transform: rotate(0deg); }
.svc-faq__a {
max-width: var(--measure);
padding-block-end: clamp(1.125rem, 0.9821rem + 0.5861vw, 1.5rem);
font-size: var(--fs-body-lg);
line-height: 1.6;
color: var(--surface-fg);
}
.land-related { padding-block: var(--section-y-sm); }
.land-related__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
.land-related__notes { min-width: 0; }
.land-related__heading { margin-block-end: var(--space-4); }
.svc-notes--compact .svc-notes__link {
padding-block: 0.75rem;
font-size: clamp(1.125rem, 1.0893rem + 0.1465vw, 1.25rem);
font-weight: var(--weight-medium);
}
.land-related__also {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-small);
line-height: 1.4;
color: var(--surface-muted);
}
.land-related__also a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
color: var(--surface-link);
}
.land-related__also a:hover { color: var(--surface-link-hover); }
/* 33-notes.css */
.notes-chips__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.notes-chip {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
padding: 0 var(--space-4);
border: 1px solid rgba(200, 220, 188, 0.5);
border-radius: 1.375rem;
font-family: var(--font-ui);
font-size: var(--fs-ui);
font-weight: var(--weight-regular);
line-height: 1.2;
color: var(--color-ivory);
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.notes-chip:hover {
color: var(--color-ivory);
border-color: var(--color-sage);
background-color: var(--tint-on-dark);
text-decoration: none;
}
.notes-chip[aria-current="page"] {
border-color: var(--color-sage);
background-color: var(--color-sage);
color: var(--color-forest);
font-weight: var(--weight-semibold);
}
.notes-lead {
padding-block: clamp(2.5rem, 1.6429rem + 3.5143vw, 4rem);
border-block-end: 1px solid var(--color-stone);
}
.notes-lead__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 0.5rem + 4.1vw, 4rem);
align-items: center;
}
.notes-lead__figure { margin: 0; min-width: 0; }
.notes-lead__figure picture,
.notes-lead__figure img {
display: block;
width: 100%;
height: auto;
}
.notes-lead__figure img {
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: var(--color-deep);
}
.notes-lead__text {
display: flex;
flex-direction: column;
gap: clamp(0.875rem, 0.6607rem + 0.8786vw, 1.25rem);
min-width: 0;
}
.notes-lead__label {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-label);
}
.notes-lead__title {
font-family: var(--font-display);
font-size: clamp(2.07rem, 1.3307rem + 3.0316vw, 3.91rem);
font-weight: var(--weight-semibold);
line-height: 1.12;
color: var(--color-forest);
text-wrap: pretty;
}
.notes-lead__link {
color: inherit;
text-decoration: none;
}
.notes-lead__link::after {
content: "";
position: absolute;
inset: 0;
}
.notes-lead__grid:hover .notes-lead__link,
.notes-lead__link:focus-visible {
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.1em;
}
.notes-lead__link:focus-visible { outline: none; }
.notes-lead__link:focus-visible::after {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.notes-lead__deck {
font-size: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
line-height: 1.6;
color: var(--color-ink);
text-wrap: pretty;
}
.notes-lead__more {
display: inline-flex;
align-items: center;
gap: 0.45em;
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--color-emerald);
}
@media (min-width: 768px) {
.notes-lead__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.notes-lead__grid--text { grid-template-columns: minmax(0, 1fr); }
.notes-lead__grid--text .notes-lead__text { max-width: 52rem; }
}
.notes-series { padding-block: clamp(2.5rem, 1.9286rem + 2.3429vw, 3.5rem); }
.notes-series .section-head__label { color: var(--color-muted); }
.notes-series__head { margin-block-end: clamp(1.25rem, 1.0357rem + 0.8786vw, 1.75rem); }
.notes-series__head .section-head__title {
font-size: clamp(1.955rem, 1.5607rem + 1.6165vw, 2.99rem);
line-height: 1.12;
}
.notes-series__head .section-head__aside { max-width: 28.75rem; }
.notes-series__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.notes-series__item { display: flex; min-width: 0; }
.notes-series__item > .card { flex: 1 1 auto; }
.notes-part.card { padding: clamp(1.25rem, 1.0357rem + 0.8786vw, 1.75rem); }
.notes-part .card__meta { font-size: var(--fs-mono); margin-block-start: 0; }
.notes-part--pending {
border: 1px dashed var(--color-label);
--surface-heading: var(--color-muted);
--surface-accent: var(--color-muted);
}
.notes-part--pending .card__text { font-size: var(--fs-small); line-height: 1.5; }
@media (min-width: 768px) {
.notes-series__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}
.notes-archive {
padding-block: clamp(2.75rem, 1.7857rem + 3.9524vw, 4.5rem) clamp(3.5rem, 2.2143rem + 5.2762vw, 6rem);
}
.notes-archive__head { margin-block-end: var(--space-2); }
.notes-archive__head .section-head__aside {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.notes-archive__head .section-head__aside > * + * { margin-block-start: 0; }
.notes-month {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
padding-block-start: clamp(1.5rem, 1.3571rem + 0.5857vw, 1.75rem);
}
.notes-month__label {
font-family: var(--font-display);
font-size: clamp(1.495rem, 1.3635rem + 0.5388vw, 1.725rem);
font-style: italic;
font-weight: var(--weight-semibold);
line-height: 1.1;
color: var(--color-clay);
}
.notes-month__rows {
display: flex;
flex-direction: column;
border-block-start: 1px solid var(--color-forest);
}
.note-row {
--note-thumb-w: clamp(6rem, 28vw, 7.5rem);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"cat date"
"title title"
"excerpt excerpt";
gap: var(--space-2) var(--space-4);
align-items: baseline;
padding-block: var(--space-4);
border-block-end: 1px solid var(--color-stone);
}
.note-row__title {
grid-area: title;
font-family: var(--font-display);
font-size: clamp(1.265rem, 1.1993rem + 0.2695vw, 1.38rem);
font-weight: var(--weight-semibold);
line-height: 1.15;
color: var(--color-forest);
text-wrap: pretty;
}
.note-row__link {
display: flex;
align-items: flex-start;
gap: var(--space-3);
color: inherit;
text-decoration: none;
}
.note-row__name { flex: 1 1 auto; min-width: 0; }
.note-row__link::after {
content: "";
position: absolute;
inset: 0;
}
.note-row:hover .note-row__name,
.note-row__link:focus-visible .note-row__name {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.note-row__link:focus-visible { outline: none; }
.note-row__link:focus-visible::after {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: 2px;
}
.note-row__thumb {
flex: none;
display: block;
width: var(--note-thumb-w);
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--color-stone);
border-radius: var(--radius-xs);
background-color: var(--color-fern);
transition: border-color var(--dur-fast) var(--ease);
}
.note-row__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.note-row:hover .note-row__thumb { border-color: var(--color-forest); }
.note-row__excerpt {
grid-area: excerpt;
max-width: var(--measure);
font-size: var(--fs-small);
line-height: 1.55;
color: var(--color-muted);
}
.note-row__cat {
grid-area: cat;
font-family: var(--font-ui);
font-size: 0.6875rem;
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-label);
}
.note-row__date {
grid-area: date;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
color: var(--color-muted);
text-align: right;
}
.note-row__date time { white-space: nowrap; }
@media (min-width: 768px) {
.note-row {
--note-thumb-w: 9rem;
grid-template-columns: var(--note-thumb-w) minmax(0, 1fr) 7.5rem;
grid-template-areas:
"cat title date"
"cat excerpt date";
grid-template-rows: auto 1fr;
min-block-size: calc(var(--note-thumb-w) * 9 / 16 + 2 * var(--space-4) + 1px);
gap: var(--space-1) var(--space-6);
}
.note-row__date { font-size: var(--fs-mono); }
.note-row__link { display: inline; }
.note-row__thumb {
position: absolute;
inset-block-start: var(--space-4);
inset-inline-start: 0;
}
.note-row__cat {
align-self: start;
padding-block-start: calc(var(--note-thumb-w) * 9 / 16 + var(--space-3));
}
}
@media (min-width: 1200px) {
.notes-month {
grid-template-columns: 13.75rem minmax(0, 1fr);
gap: var(--space-9);
}
.notes-month__label { padding-block-start: var(--space-3); }
.note-row {
--note-thumb-w: 11.25rem;
grid-template-columns: var(--note-thumb-w) minmax(0, 1fr) 7.5rem;
}
}
.notes-series-rows { margin: 0; padding: 0; list-style: none; }
.note-row--pending .note-row__title { color: var(--color-muted); }
.note-row--pending .note-row__thumb {
border: 1px dashed var(--color-label);
background-color: transparent;
}
.note-row--pending:hover .note-row__name { text-decoration-line: none; }
.note-row--pending:hover .note-row__thumb { border-color: var(--color-label); }
.notes-empty {
padding-block: var(--space-10);
border-block-start: 1px solid var(--color-forest);
}
.notes-empty__title {
font-size: var(--fs-h3);
margin-block-end: var(--space-3);
}
/* 34-article.css */
@media (max-width: 767px) {
.note-hero .hero-band__main { align-items: flex-start; text-align: start; }
.note-hero .hero-band__eyebrow,
.note-hero .note-byline,
.note-hero .note-byline__meta { justify-content: flex-start; }
.note-hero .hero-band__after,
.note-hero .note-byline { align-self: stretch; }
.note-hero .note-byline__meta {
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.note-hero .note-byline__sep { display: none; }
}
.note-crumb {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
margin-block: calc((var(--tap-min) - 1.4em) / -2);
color: inherit;
}
.note-crumb:hover { color: var(--color-ivory); }
.note-byline {
display: flex;
align-items: center;
justify-content: center;
gap: 0.875rem;
font-family: var(--font-ui);
font-size: var(--fs-mono);
line-height: 1.4;
color: var(--color-sage);
}
.note-byline__avatar { flex: none; }
.note-byline__avatar img {
width: 2.5rem;
height: 2.5rem;
border: 2px solid var(--color-sage);
border-radius: var(--radius-pill);
object-fit: cover;
}
.note-byline__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-1) 0.875rem;
min-width: 0;
}
.note-byline__name { color: var(--color-ivory); }
.share-wrap {
position: relative;
flex: none;
}
.share-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--tap-min);
block-size: var(--tap-min);
padding: 0;
border: 1px solid var(--rule-on-dark-strong);
border-radius: var(--radius-pill);
background-color: var(--tint-on-dark);
color: var(--color-sage);
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.share-toggle:hover,
.share-toggle[aria-expanded="true"] {
background-color: rgba(200, 220, 188, 0.24);
color: var(--color-ivory);
}
.share-sheet {
position: absolute;
top: calc(100% + 8px);
inset-inline-end: 0;
z-index: 40;
display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 11.5rem;
padding: var(--space-2);
border: 1px solid var(--color-stone);
border-radius: 14px;
background-color: var(--color-ivory);
box-shadow: var(--shadow-card);
text-align: start;
}
.share-btn {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--tap-min);
padding: 10px 14px;
border: 0;
border-radius: 10px;
background: none;
color: var(--color-forest);
font-family: var(--font-ui);
font-size: var(--fs-ui);
font-weight: var(--weight-medium);
line-height: 1.25;
white-space: nowrap;
text-align: start;
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease);
}
.share-btn svg { flex: none; color: var(--color-emerald); }
.share-btn:hover { background-color: var(--color-fern); }
.share-close {
margin-block-start: 2px;
border-block-start: 1px solid var(--color-stone);
border-radius: 0 0 10px 10px;
color: var(--color-label);
}
.share-copied {
min-width: 0;
padding: 2px 14px 6px;
font-family: var(--font-ui);
font-size: var(--fs-label);
color: var(--color-emerald);
white-space: nowrap;
}
.share-copied:empty {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.note-figure-wrap { padding-block-start: clamp(2rem, 1.1429rem + 3.5143vw, 4rem); }
.note-figure { margin: 0; }
.note-figure picture,
.note-figure img {
display: block;
width: 100%;
height: auto;
}
.note-figure img { border: 1px solid var(--color-forest); }
.note-figure--unsized img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.post-content-wrap { padding-block: clamp(2.25rem, 1.2857rem + 3.9524vw, 4.5rem) 0; }
.post-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
}
.post-layout > * { min-width: 0; }
.note-article {
width: 100%;
max-width: var(--measure);
margin-inline: auto;
}
@media (min-width: 1200px) {
.post-layout {
grid-template-columns: minmax(0, var(--measure));
justify-content: center;
}
.post-layout--toc {
grid-template-columns: var(--rail) minmax(0, var(--measure)) minmax(0, 1fr);
justify-content: stretch;
gap: var(--space-11);
}
.post-layout--toc .note-article { margin-inline: 0; }
}
.note-toc {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--measure);
margin-inline: auto;
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-stone);
background-color: var(--color-white);
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.4;
}
.note-toc__title {
padding-block-end: var(--space-2);
border-block-end: 1px solid var(--color-forest);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-label);
}
.note-toc__list {
display: flex;
flex-direction: column;
padding-block-start: var(--space-1);
}
.note-toc__link {
display: flex;
align-items: center;
min-height: var(--tap-min);
padding-block: var(--space-1);
color: var(--color-forest);
text-decoration: none;
}
.note-toc__link:hover {
color: var(--color-emerald);
text-decoration-line: underline;
text-decoration-thickness: 1px;
}
@media (min-width: 1200px) {
.note-toc {
position: sticky;
top: calc(var(--header-h, 0px) + var(--space-6));
max-height: calc(100vh - var(--header-h, 0px) - var(--space-10));
overflow-y: auto;
margin-inline: 0;
padding: var(--space-1) 0 0;
border: 0;
background: none;
}
.note-toc__title { padding-block-end: 0.625rem; }
.note-toc__list { padding-block-start: var(--space-2); }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
.note-toc__link { min-height: 2rem; }
}
.post-body {
color: var(--color-ink);
font-size: var(--fs-body);
line-height: 1.6;
}
.post-body p { margin: 0 0 1.3em; }
.post-body h2 {
margin: 1.4em 0 0.55em;
font-family: var(--font-display);
font-size: clamp(1.61rem, 1.3143rem + 1.2135vw, 2.3rem);
font-weight: var(--weight-semibold);
line-height: 1.1;
letter-spacing: normal;
color: var(--color-forest);
}
.post-body h3 {
margin: 1.5em 0 0.5em;
font-family: var(--font-body);
font-size: 1.1em;
font-weight: var(--weight-semibold);
line-height: 1.3;
color: var(--color-forest);
}
.post-body ul, .post-body ol { margin: 0 0 1.3em; padding-inline-start: 1.4em; }
.post-body li { margin-bottom: 0.4em; }
.post-body blockquote {
margin: 1.6em 0;
padding-inline-start: 1.25rem;
border-inline-start: 3px solid var(--color-emerald);
font-family: var(--font-display);
font-size: 1.3em;
line-height: 1.3;
color: var(--color-forest);
}
.post-body strong { color: var(--color-forest); }
.post-body a {
color: var(--color-emerald);
font-weight: var(--weight-semibold);
text-decoration: underline;
text-underline-offset: 3px;
}
.post-body a:hover { color: var(--color-forest); }
.post-body pre {
margin: 1.4em 0;
padding: 1.25rem;
border-radius: var(--radius-md);
background-color: var(--color-forest);
color: var(--color-fern);
font-family: var(--font-mono);
font-size: 0.85em;
overflow-x: auto;
}
.post-body code {
padding: 2px 6px;
border-radius: 4px;
background-color: var(--color-fern);
font-family: var(--font-mono);
font-size: 0.88em;
}
.post-body pre code { padding: 0; background: none; }
.post-body img { margin: 1.2em 0; border-radius: 12px; }
:where(.post-body) :where(figure) { margin: 1.5em 0; }
:where(.post-body) :where(hr) { margin: 2em 0; }
:where(.post-body) :where(dl) { margin: 0 0 1.3em; }
:where(.post-body) :where(dd) { margin-inline-start: 1.5em; }
:where(.post-body) :where(h4, h5, h6) { margin: 1.33em 0 0.5em; font-family: var(--font-body); }
:where(.post-body) :where(table) { max-width: 100%; }
:where(.post-body) :where(iframe, video, embed, object) { max-width: 100%; }
@media (min-width: 980px) {
.post-layout {
--note-c: min(100vw - 2 * var(--gutter), var(--container));
--note-wide: calc(var(--measure) + (var(--note-c) - var(--measure)) / 2);
}
.post-layout .post-body > .dl-rank-wrap,
.post-layout .post-body > div:has(> .dl-table-scroll) {
width: max-content;
min-width: 100%;
max-width: var(--note-wide);
}
}
@media (min-width: 1200px) {
.post-layout--toc { --note-wide: calc(var(--note-c) - var(--rail) - var(--space-11)); }
}
.post-body .fn-article {
--slate: #5F6C64;
--fn-slate: #5F6C64;
--amber: #935D15;
--fn-amber: #935D15;
}
.post-body .fn-article-body { --fn-muted: #606C63; }
.post-body [style*=";color:#6B7A70"] { color: #5F6C64 !important; }
.post-body [style*=";color:#B5731A"] { color: #935D15 !important; }
.post-body [style*=";color:#888"],
.post-body [style*="; color: #888"] { color: #6D6D6D !important; }
.post-body [style*=";color:#8a7f70"] { color: #736A5E !important; }
.post-body [style*=" color: #2C7A50"] { color: #2B774E !important; }
.post-body [style^="color:#c98a2b"] { color: #BA8028 !important; }
.post-body .card {
display: block;
position: static;
gap: normal;
}
.post-body .card > :not(.card__label):not(.card__title):not(.card__text):not(.card__meta) {
position: static;
z-index: auto;
}
.note-end {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-block-start: clamp(2.5rem, 1.9286rem + 2.3429vw, 3.5rem);
}
.series-nav {
min-width: 0;
padding: var(--space-5) var(--space-6);
border: 1px solid var(--color-forest);
background-color: var(--color-white);
overflow-wrap: anywhere;
}
.series-nav-heading {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
margin: 0 0 var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-clay-dark);
}
.series-nav-name { color: var(--color-label); }
a.series-nav-name {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
margin-block: calc((var(--tap-min) - 1.4em) / -2);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a.series-nav-name:hover { color: var(--color-forest); }
.series-nav-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.series-nav-item {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: var(--space-3);
align-items: baseline;
padding-block: var(--space-2);
border-block-start: 1px solid var(--color-stone);
line-height: 1.4;
}
.series-nav-item:first-child { border-block-start: 0; }
.series-nav-part {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-muted);
}
.series-nav-list a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: var(--weight-semibold);
line-height: 1.15;
color: var(--color-forest);
}
.series-nav-list a:hover { color: var(--color-emerald); }
.series-nav-list [aria-current] {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: var(--weight-semibold);
line-height: 1.15;
color: var(--color-muted);
}
.series-nav-item--pending > span:last-child {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: var(--weight-semibold);
line-height: 1.15;
color: var(--color-muted);
}
.series-nav-status {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.offer-box {
min-width: 0;
max-width: 100%;
padding: var(--space-6) clamp(1.25rem, 1.0714rem + 0.7333vw, 1.75rem);
border-inline-start: 3px solid var(--color-emerald);
background-color: var(--color-fern);
color: var(--color-ink);
overflow-wrap: anywhere;
}
.offer-box-heading {
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-size: clamp(1.38rem, 1.2485rem + 0.5388vw, 1.725rem);
font-weight: var(--weight-semibold);
line-height: 1.12;
color: var(--color-forest);
}
.offer-box-body {
margin: 0 0 var(--space-2);
font-size: var(--fs-body);
line-height: 1.6;
}
.offer-box-link {
display: inline-flex;
align-items: center;
gap: 0.45em;
min-height: var(--tap-min);
font-family: var(--font-ui);
font-size: var(--fs-mono);
line-height: 1.3;
color: var(--color-emerald);
}
.offer-box-link:hover { color: var(--color-forest); }
.offer-box-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
margin-block-start: var(--space-4);
}
.offer-box-actions > .button { width: 100%; }
@media (min-width: 560px) {
.offer-box-actions { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); }
.offer-box-actions > .button { width: auto; }
}
.post-body .note-nudge {
margin-block: var(--space-6);
padding: var(--space-4) var(--space-5);
border-inline-start: 3px solid var(--color-emerald);
background-color: var(--color-fern);
color: var(--color-ink);
}
.post-body .note-nudge .note-nudge__text {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--color-ink);
}
.post-body .note-nudge .note-nudge__link {
display: inline-flex;
align-items: center;
gap: 0.4em;
min-height: var(--tap-min);
font-family: var(--font-ui);
font-size: var(--fs-mono);
font-weight: var(--weight-regular);
line-height: 1.3;
color: var(--color-emerald);
text-decoration: underline;
text-underline-offset: 0.2em;
vertical-align: middle;
}
.post-body .note-nudge .note-nudge__link:hover { color: var(--color-forest); }
.post-contact {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--color-forest);
}
.post-contact__title {
font-family: var(--font-display);
font-size: clamp(1.38rem, 1.2485rem + 0.5388vw, 1.725rem);
font-weight: var(--weight-semibold);
line-height: 1.12;
color: var(--color-forest);
}
.post-contact__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.post-contact__actions > .button { width: 100%; }
@media (min-width: 560px) {
.post-contact__actions { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); }
.post-contact__actions > .button { width: auto; }
}
.next-step {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--color-forest);
}
.next-step__title {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-clay-dark);
}
.next-step__kind {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-label);
}
.next-step__link {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 0.35em;
min-height: var(--tap-min);
font-family: var(--font-display);
font-size: clamp(1.495rem, 1.3635rem + 0.5388vw, 1.84rem);
font-weight: var(--weight-semibold);
line-height: 1.1;
color: var(--color-forest);
}
.next-step__link:hover { color: var(--color-emerald); }
.next-step__link .icon { --icon-size: 0.75em; color: var(--color-emerald); }
.next-step__cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin: var(--space-2) 0 0;
padding: 0;
list-style: none;
}
.next-step__cards > li { display: flex; min-width: 0; }
.next-step__cards > li > .card { flex: 1 1 auto; }
.next-step__card .card__title { font-size: clamp(1.265rem, 1.1993rem + 0.2695vw, 1.38rem); }
.next-step__card .card__text { font-size: var(--fs-small); }
@media (min-width: 768px) {
.next-step__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.note-after {
margin-block-start: clamp(3.5rem, 2.5rem + 4.1vw, 5.5rem);
padding-block-end: var(--section-y-sm);
}
.note-after__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
padding-block-start: var(--space-9);
border-block-start: 1px solid var(--color-forest);
}
.note-author {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2);
align-content: start;
}
.note-author--photo { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-5); }
.note-author__photo {
grid-row: 1 / span 4;
width: 4.5rem;
height: 4.5rem;
object-fit: cover;
}
.note-author__photo img { width: 100%; height: 100%; object-fit: cover; }
.note-author__label {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-label);
}
.note-author__heading { margin-block-end: var(--space-1); }
.note-author__bio {
font-size: var(--fs-body);
line-height: 1.55;
color: var(--color-ink);
}
.note-author__contact {
display: grid;
gap: var(--space-1);
margin-block-start: var(--space-3);
}
.note-author__links {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
.note-next { display: flex; min-width: 0; }
.note-next__card { flex: 1 1 auto; }
.note-next__card .card__label { color: var(--color-muted); }
.note-next__card--pending { border: 1px dashed var(--color-label); }
@media (min-width: 768px) {
.note-author--photo { grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--space-6); }
.note-author__photo { width: 6rem; height: 6rem; }
}
@media (min-width: 980px) {
.note-after--split .note-after__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-11);
}
}
.fn-checked :is(p, ul, ol, li),
.fn-source-notes :is(p, ul, ol, li),
.fn-ledger :is(p, ul, ol, li),
.fn-corrections :is(p, ul, ol, li) {
margin: 0;
padding: 0;
list-style: none;
}
.fn-checked {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin: 1.6em 0;
padding: clamp(1.5rem, 1.1429rem + 1.4667vw, 2.125rem);
font-size: 1rem;
line-height: 1.5;
}
.fn-checked__title {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.fn-checked__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
margin: 0;
padding: 0;
list-style: none;
}
.fn-checked__item { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.fn-checked__name {
font-family: var(--font-display);
font-size: 1.75rem;
line-height: 1;
color: var(--surface-heading);
}
.fn-checked__text { font-size: 0.9375rem; color: var(--surface-fg); }
.fn-checked__note {
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--surface-muted);
}
@media (min-width: 768px) {
.fn-checked__list { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.fn-source-notes {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin: 1.3em 0;
padding: var(--space-4) var(--space-5);
border-inline-start: 2px solid var(--color-stone);
font-size: 1rem;
}
.fn-source-notes__title {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-label);
}
.fn-source-notes .source-note { margin: 0; }
.fn-contributors {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
background-color: var(--color-fern);
font-size: 0.9375rem;
line-height: 1.5;
}
.fn-contributors__title {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-muted);
}
.fn-contributors__list { display: flex; flex-direction: column; gap: var(--space-1); }
@media (min-width: 1440px) {
.post-layout--toc .fn-source-notes--margin {
float: right;
clear: right;
width: 13rem;
margin: 0 -16.5rem 1em 0;
padding: var(--space-1) 0 0;
border: 0;
}
}
.fn-ledger {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
margin: 2em 0 1.3em;
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--color-forest);
font-size: 0.9375rem;
line-height: 1.55;
}
.fn-ledger__title {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-label);
}
.fn-ledger__list { display: flex; flex-direction: column; }
.fn-ledger .fn-ledger__item {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr);
gap: var(--space-1) var(--space-3);
margin: 0;
padding-block: var(--space-3);
border-block-end: 1px solid var(--color-stone);
}
.fn-ledger .fn-ledger__item:last-child { border-block-end: 0; }
.fn-ledger__ref { font-family: var(--font-mono); color: var(--color-clay-dark); }
.fn-ledger__links {
grid-column: 2;
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-4);
font-family: var(--font-mono);
font-size: var(--fs-mono);
}
.fn-ledger__links a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
font-weight: var(--weight-regular);
}
@media (min-width: 768px) {
.fn-ledger .fn-ledger__item { grid-template-columns: 2.75rem minmax(0, 1fr) 10rem; }
.fn-ledger__links { grid-column: 3; flex-direction: column; }
.fn-ledger__links a { min-height: 1.5rem; }
}
.fn-corrections {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 2em 0 1.3em;
padding: var(--space-5) clamp(1.25rem, 1.0714rem + 0.7333vw, 1.625rem);
border: 1px solid var(--color-clay);
background-color: var(--color-white);
font-size: 1rem;
line-height: 1.55;
}
.fn-corrections__title {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--weight-regular);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-clay-dark);
}
.fn-corrections__list { display: flex; flex-direction: column; gap: var(--space-2); }
.fn-corrections__date { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--color-clay-dark); }
.fn-corrections__note { font-size: var(--fs-small); color: var(--color-muted); }
.post-body > p,
.post-body > ul,
.post-body > ol,
.fn-article-body > p,
.fn-article-body > ul,
.fn-article-body > ol { max-width: 68ch; }
.post-body th,
.post-body figcaption,
.fn-article-body th,
.fn-article-body figcaption { font-family: var(--font-ui); }
.post-body td.num,
.post-body td[align="right"],
.fn-article-body td.num,
.fn-article-body td[align="right"],
td.num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.post-body svg text,
.fn-article-body svg text { font-family: var(--font-ui); }
/* 35-pages.css */
.about-hero .hero-band__after {
display: flex;
flex-direction: column;
gap: clamp(1rem, 0.8607rem + 0.5714vw, 1.375rem);
}
.about-hero__subhead {
max-width: 34rem;
font-family: var(--font-display);
font-size: clamp(1.495rem, 1.2387rem + 1.0515vw, 2.185rem);
font-weight: var(--weight-medium);
line-height: 1.1;
color: var(--surface-heading);
text-wrap: balance;
}
.about-hero__subhead em {
font-style: italic;
color: var(--color-sage);
}
.about-portrait {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
margin: 0;
}
.about-portrait__ring {
inline-size: clamp(13.375rem, 10.625rem + 11.2vw, 20rem);
padding: 5.5%;
border: 1px solid rgba(200, 220, 188, 0.45);
border-radius: 50%;
}
.about-portrait__ring picture,
.about-portrait__img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 1;
border-radius: 50%;
}
.about-portrait__img {
object-fit: cover;
object-position: center 22%;
border: clamp(5px, 3.5px + 0.4vw, 7px) solid var(--color-sage);
}
.about-portrait__caption {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: 22rem;
text-align: center;
}
.about-portrait__motto {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.0645rem + 0.3505vw, 1.38rem);
font-weight: var(--weight-semibold);
line-height: 1.2;
color: var(--surface-heading);
}
.about-portrait__tagline {
font-size: var(--fs-small);
line-height: 1.55;
color: var(--surface-fg);
}
@media (min-width: 980px) {
.about-hero .hero-band__aside { justify-self: center; }
}
.about-bio {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--grid-gap);
align-items: start;
}
.about-bio__copy {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.about-bio__text {
max-width: var(--measure);
font-size: var(--fs-body-lg);
line-height: 1.7;
}
.about-bio__text strong { color: var(--surface-heading); }
.about-bio__aside {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: clamp(1.5rem, 1.0714rem + 1.7571vw, 2.625rem);
border-block-start: 3px solid var(--color-clay);
}
.about-signature { display: block; }
.about-signature__img {
inline-size: clamp(15rem, 13.5714rem + 2.8571vw, 17.5rem);
block-size: auto;
}
.about-quote p {
font-family: var(--font-display);
font-size: clamp(1.495rem, 1.2815rem + 0.8762vw, 2.07rem);
font-style: italic;
font-weight: var(--weight-medium);
line-height: 1.15;
color: var(--surface-heading);
text-wrap: pretty;
}
.about-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6) var(--space-5);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--surface-rule-strong);
}
@media (min-width: 980px) {
.about-bio { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.about-path > li { display: flex; }
.about-path > li > .card { flex: 1 1 auto; }
.about-path__closing {
max-width: 47.5rem;
margin-block-start: var(--stack-lg);
font-size: var(--fs-body-lg);
line-height: 1.7;
color: var(--surface-muted);
}
.about-path__link { margin-block-start: var(--space-4); }
.about-personal {
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
}
.about-personal__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: clamp(1.5rem, 1.0714rem + 1.7571vw, 2.625rem) clamp(1.25rem, 0.7143rem + 2.1905vw, 2.75rem);
}
.about-personal__media picture,
.about-personal__media img {
display: block;
inline-size: 100%;
}
.about-personal__media img {
block-size: auto;
aspect-ratio: 1200 / 858;
object-fit: cover;
}
@media (min-width: 768px) {
.about-personal {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
.about-personal__media,
.about-personal__media picture,
.about-personal__media img {
block-size: 100%;
}
.about-personal__media img {
aspect-ratio: auto;
min-block-size: 16rem;
}
}
.about-personal__text {
max-width: 47.5rem;
font-family: var(--font-display);
font-size: clamp(1.265rem, 1.1335rem + 0.5388vw, 1.61rem);
line-height: 1.35;
color: var(--surface-heading);
text-wrap: pretty;
}
.resume-timeline {
border-block-start: 1px solid var(--surface-rule-strong);
}
.resume-entry {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2) var(--grid-gap);
padding-block: clamp(1.25rem, 0.9643rem + 1.1714vw, 2rem);
border-block-end: 1px solid var(--surface-rule);
}
.resume-entry__dates {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.5;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.resume-entry__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.resume-entry__title {
font-size: var(--fs-h4);
line-height: 1.2;
}
.resume-entry__org { font-weight: var(--weight-medium); }
a.resume-entry__org {
color: inherit;
text-decoration-color: var(--surface-link);
}
a.resume-entry__org:hover { color: var(--surface-link); }
.resume-entry__text {
max-width: var(--measure);
line-height: 1.65;
}
@media (min-width: 768px) {
.resume-entry { grid-template-columns: 12.5rem minmax(0, 1fr); }
.resume-entry__dates { padding-block-start: 0.45rem; }
}
.resume-skill {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: clamp(1.375rem, 1.1429rem + 0.9524vw, 2rem) clamp(1.25rem, 0.9714rem + 1.1429vw, 2rem);
border: 1px solid var(--surface-rule-strong);
}
.resume-skill__title { font-size: clamp(1.265rem, 1.1795rem + 0.3505vw, 1.495rem); }
.resume-skill__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.resume-skill__list > li {
padding: 0.3rem 0.75rem;
border: 1px solid var(--surface-rule);
border-radius: var(--radius-pill);
font-size: var(--fs-small);
line-height: 1.4;
color: var(--surface-fg);
}
.resume-skills__link { margin-block-start: var(--stack-lg); }
.privacy-dates {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.5;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-label);
}
.policy-section {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3) var(--grid-gap);
padding-block: clamp(1.75rem, 1.2143rem + 2.1905vw, 3.25rem);
border-block-start: 1px solid var(--surface-rule);
}
.policy-section:first-child { padding-block-start: 0; border-block-start: 0; }
.policy-section:last-child { padding-block-end: 0; }
.policy-section__label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
line-height: 1.4;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--surface-accent);
}
.policy-section__body {
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
}
.policy-section__title {
max-width: 46.25rem;
font-size: clamp(1.61rem, 1.3472rem + 1.0777vw, 2.3rem);
line-height: 1.1;
}
@media (min-width: 980px) {
.policy-section { grid-template-columns: 14rem minmax(0, 1fr); }
.policy-section__label { padding-block-start: 0.6rem; }
}
.policy-prose {
max-width: var(--measure);
font-size: var(--fs-body-lg);
line-height: 1.7;
}
.policy-prose code {
padding: 0.05em 0.35em;
border-radius: var(--radius-xs);
background-color: var(--color-fern);
color: var(--color-forest);
font-size: 0.88em;
}
.policy-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-inline-start: 1.25em;
list-style: disc;
}
.policy-list li::marker { color: var(--color-clay-dark); }
.policy-prefs {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
padding: var(--space-2) var(--space-5);
border: 1px solid var(--button-ghost-border);
border-radius: var(--radius-xs);
background-color: transparent;
color: var(--button-ghost-fg);
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: 1.2;
letter-spacing: var(--tracking-button);
text-transform: uppercase;
text-decoration: none;
}
.policy-prefs:hover {
background-color: var(--button-ghost-hover-bg);
color: var(--button-ghost-hover-fg);
text-decoration: none;
}
.privacy-draft__inner {
display: flex;
flex-direction: column;
gap: var(--stack-lg);
padding: clamp(1.25rem, 0.7143rem + 2.1905vw, 2.75rem);
border: 2px dashed var(--color-clay-dark);
}
.privacy-draft__head {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.privacy-draft__title { font-size: clamp(1.61rem, 1.3472rem + 1.0777vw, 2.3rem); }
.privacy-draft__intro {
max-width: var(--measure);
color: var(--surface-fg);
}
.privacy-draft__intro code,
.privacy-draft__note code {
font-size: 0.88em;
overflow-wrap: anywhere;
}
.privacy-draft__changes {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.privacy-draft__change {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(1rem, 0.7857rem + 0.8786vw, 1.625rem);
background-color: var(--color-white);
border: 1px solid var(--color-stone);
}
.privacy-draft__where {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.5;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-clay-dark);
}
.privacy-draft__placeholder {
padding: 0 0.2em;
background-color: var(--color-clay-light);
color: var(--color-deep);
}
.privacy-draft__note {
font-size: var(--fs-small);
color: var(--color-muted);
}
.error-links__title { margin-block-end: var(--space-6); }
.error-links > li { display: flex; }
.error-links > li > .card { flex: 1 1 auto; }
.error-links-plain {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.error-links-plain__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-6);
}
.error-links-plain__list a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
font-family: var(--font-mono);
font-size: var(--fs-mono);
}
.error-links-plain__note { max-width: var(--measure); }
/* 36-contact.css */
.contact {
padding-block: clamp(2rem, 0.8857rem + 4.5714vw, 4.5rem)
clamp(2.5rem, 0.9357rem + 6.4286vw, 6rem);
}
.contact__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
align-items: start;
}
@media (min-width: 980px) {
.contact__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (min-width: 980px) and (min-height: 860px) {
.contact-file {
position: sticky;
top: calc(var(--header-h, 0px) + var(--space-6));
}
}
.contact__main { min-width: 0; }
@media (max-width: 979px) {
.contact__grid > .contact__main,
.contact__main > .contact-form { display: contents; }
.contact__grid { row-gap: clamp(2.25rem, 2.0357rem + 0.8571vw, 2.75rem); }
.contact__main > *,
.contact-form > * { min-width: 0; }
.contact__main > .contact-notice,
.contact__main > noscript > .contact-notice { margin-block-end: 0; }
.contact__grid .contact-file { order: 1; }
.contact__grid .contact-submit { order: 2; }
}
.contact-notice {
margin-block-end: var(--space-9);
padding: var(--space-5) var(--space-6);
border-inline-start: 4px solid var(--color-clay-dark);
background-color: var(--color-warm);
color: var(--color-ink);
font-size: var(--fs-body);
line-height: var(--lh-tight-body);
}
.contact-notice > * + * { margin-block-start: var(--space-2); }
.contact-notice__title {
font-weight: var(--weight-semibold);
color: var(--color-forest);
}
.contact-form {
display: flex;
flex-direction: column;
gap: clamp(2.25rem, 2.0357rem + 0.8571vw, 2.75rem);
}
.contact-step {
display: flex;
flex-direction: column;
gap: clamp(0.875rem, 0.7679rem + 0.4286vw, 1.125rem);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.contact-step__legend {
padding: 0;
margin-block-end: clamp(0.875rem, 0.7679rem + 0.4286vw, 1.125rem);
}
.contact-step__title {
display: flex;
align-items: baseline;
gap: 0.875rem;
font-family: var(--font-display);
font-size: clamp(1.61rem, 1.5245rem + 0.3505vw, 1.84rem);
font-weight: var(--weight-semibold);
line-height: 1.1;
color: var(--color-forest);
}
.contact-step__num {
flex: none;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: var(--weight-regular);
letter-spacing: 0;
color: var(--color-clay-dark);
}
.contact-step__hint {
margin-block-start: calc(-1 * var(--space-2));
font-size: 0.9375rem;
font-style: italic;
color: var(--color-muted);
}
.contact-chips {
display: flex;
flex-wrap: wrap;
gap: clamp(0.5rem, 0.4286rem + 0.2857vw, 0.625rem);
}
.contact-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 2.875rem;
padding: 0 1.125rem;
border: 1px solid var(--color-label);
border-radius: var(--radius-pill);
background-color: var(--color-white);
color: var(--color-forest);
font-family: var(--font-ui);
font-size: 1rem;
line-height: 1.2;
text-align: start;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.contact-chip:hover { border-color: var(--color-forest); }
.contact-chip__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.contact-chip:has(.contact-chip__input:focus-visible) {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.contact-chip__check {
display: none;
color: var(--color-sage);
}
.contact-chip[aria-pressed="true"],
.contact-chip:has(.contact-chip__input:checked) {
border-color: var(--color-forest);
background-color: var(--color-forest);
color: var(--color-ivory);
}
.contact-chip[aria-pressed="true"] .contact-chip__check,
.contact-chip:has(.contact-chip__input:checked) .contact-chip__check { display: inline-block; }
.contact-field {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.contact-field__label {
font-family: var(--font-ui);
font-size: 1rem;
font-weight: var(--weight-semibold);
line-height: 1.35;
color: var(--color-forest);
}
.contact-field__req,
.contact-field__opt {
font-weight: var(--weight-regular);
color: var(--color-clay-dark);
}
.contact-field__opt { color: var(--color-muted); }
.contact-paper {
--paper-line: 2rem;
--paper-pad: 0.75rem;
display: block;
width: 100%;
min-height: clamp(12.5rem, 12.0357rem + 1.9048vw, 13.75rem);
padding: var(--paper-pad) 1.125rem var(--paper-pad) 3.25rem;
border: 1px solid var(--color-label);
border-radius: var(--radius-xs);
background-color: var(--color-white);
background-image:
linear-gradient(90deg, transparent 2.375rem, rgba(160, 106, 67, 0.45) 2.375rem,
rgba(160, 106, 67, 0.45) calc(2.375rem + 1px), transparent calc(2.375rem + 1px)),
repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--paper-line) - 1px),
var(--color-stone) calc(var(--paper-line) - 1px), var(--color-stone) var(--paper-line));
background-position: 0 0, 0 var(--paper-pad);
background-attachment: local;
color: var(--color-deep);
font-family: var(--font-body);
font-size: 1.125rem;
line-height: var(--paper-line);
}
.contact-field__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-1) var(--space-4);
font-family: var(--font-mono);
font-size: 0.75rem;
line-height: 1.5;
color: var(--color-muted);
}
.contact-field__count { font-variant-numeric: tabular-nums; }
.contact-field__legal {
font-size: var(--fs-small);
line-height: var(--lh-tight-body);
color: var(--color-ink);
}
.contact-fields {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
@media (min-width: 768px) {
.contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-input {
display: block;
width: 100%;
min-height: 3.25rem;
padding: 0 var(--space-4);
border: 1px solid var(--color-label);
border-radius: var(--radius-xs);
background-color: var(--color-white);
color: var(--color-deep);
font-family: var(--font-ui);
font-size: 1.0625rem;
line-height: 1.3;
}
.contact-input::placeholder,
.contact-paper::placeholder {
color: var(--color-muted);
opacity: 1;
}
.contact-input[aria-invalid="true"],
.contact-paper[aria-invalid="true"] {
border-color: var(--color-clay-dark);
box-shadow: inset 0 0 0 1px var(--color-clay-dark);
}
.contact-field__error {
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.45;
color: var(--color-clay-dark);
}
.contact-field__error:empty { display: none; }
.contact-levels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.625rem;
}
@media (min-width: 480px) {
.contact-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.contact-level {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 4rem;
padding: 0.625rem 0.75rem;
border: 1px solid var(--color-label);
border-radius: var(--radius-xs);
background-color: var(--color-white);
color: var(--color-forest);
font-family: var(--font-ui);
font-size: 1rem;
line-height: 1.25;
text-align: center;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.contact-level:hover { border-color: var(--color-forest); }
.contact-level__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.contact-level:has(.contact-level__input:focus-visible) {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
.contact-level[aria-pressed="true"],
.contact-level:has(.contact-level__input:checked) {
border-color: var(--color-clay-dark);
background-color: var(--color-clay-dark);
color: var(--color-white);
font-weight: var(--weight-semibold);
}
.contact-fire {
display: none;
padding: var(--space-3) var(--space-4);
border-inline-start: 3px solid var(--color-clay-dark);
background-color: var(--color-warm);
color: var(--color-ink);
font-size: 0.9375rem;
line-height: var(--lh-tight-body);
}
.contact-fire a {
color: var(--color-forest);
font-weight: var(--weight-semibold);
}
.contact-fire.is-on,
.contact-step:has(.contact-level__input[value="It is on fire"]:checked) .contact-fire { display: block; }
.contact-hp {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-submit {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.contact-submit__row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.125rem;
padding-block-start: 1.375rem;
border-block-start: 1px solid var(--color-stone);
}
@media (min-width: 768px) {
.contact-submit__row {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
}
.contact-turnstile {
min-height: 65px;
max-width: 100%;
}
.contact-submit__button {
--button-primary-bg: var(--color-forest);
--button-primary-fg: var(--color-ivory);
--button-primary-hover-bg: var(--color-emerald);
--button-primary-hover-fg: var(--color-ivory);
min-height: 3.75rem;
padding-inline: 1.875rem;
font-size: 0.9375rem;
letter-spacing: 0.08em;
}
.contact-submit__button[aria-disabled="true"] { cursor: progress; }
.contact-status {
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-clay-dark);
}
.contact-status:empty { display: none; }
.contact-fallback,
.contact-submit__note {
font-size: 0.875rem;
line-height: var(--lh-tight-body);
color: var(--color-muted);
}
.contact-fallback { color: var(--color-ink); }
.contact-receipt {
display: flex;
flex-direction: column;
gap: var(--space-6);
padding: clamp(1.5rem, 0.9643rem + 2.1429vw, 2.5rem);
border: 1px solid var(--color-forest);
background-color: var(--color-white);
}
.contact-receipt__label {
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-clay-dark);
}
.contact-receipt__title {
font-family: var(--font-display);
font-size: clamp(2.07rem, 1.8235rem + 0.9857vw, 2.76rem);
font-weight: var(--weight-semibold);
line-height: 1.12;
color: var(--color-forest);
}
.contact-receipt__title em { font-style: italic; }
.contact-receipt__lede {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--color-ink);
}
.contact-receipt__no {
font-family: var(--font-mono);
font-weight: var(--weight-medium);
overflow-wrap: anywhere;
}
.contact-receipt__steps {
margin: 0;
padding: 0;
list-style: none;
border-block-start: 1px solid var(--color-forest);
}
.contact-receipt__steps li {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: var(--space-3);
padding-block: var(--space-4);
border-block-end: 1px solid var(--color-stone);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--color-ink);
}
.contact-receipt__num {
font-family: var(--font-mono);
color: var(--color-clay-dark);
}
.contact-file {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
.contact-file__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: var(--space-1) var(--space-4);
font-family: var(--font-mono);
font-size: 0.75rem;
line-height: 1.4;
}
.contact-file__label {
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-label);
}
.contact-file__hint { color: var(--color-muted); }
.contact-file__note {
font-size: 0.875rem;
line-height: 1.55;
color: var(--color-muted);
}
.case-file {
position: relative;
padding-block-start: 2.125rem;
}
.case-file__tab {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
height: 2.25rem;
padding: 0 1.375rem;
border: 1px solid rgba(160, 106, 67, 0.45);
border-block-end: 0;
border-radius: 8px 8px 0 0;
background-color: var(--color-warm);
background-color: color-mix(in srgb, var(--color-warm) 85%, var(--color-clay));
color: var(--color-ink);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.case-file__body {
position: relative;
display: flex;
flex-direction: column;
gap: 1.125rem;
padding: clamp(1.25rem, 0.6786rem + 2.2857vw, 2.25rem);
border: 1px solid rgba(160, 106, 67, 0.45);
border-radius: 0 6px 6px 6px;
background-color: var(--color-warm);
box-shadow: 0 16px 34px rgba(7, 27, 21, 0.14);
color: var(--color-ink);
}
.case-file__clip {
position: absolute;
right: 2.75rem;
top: -1.375rem;
color: var(--color-muted);
}
.case-file__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: var(--space-1) var(--space-4);
padding-block-end: 0.875rem;
border-block-end: 2px solid var(--color-clay-dark);
font-family: var(--font-mono);
}
.case-file__no {
font-size: 0.875rem;
font-weight: var(--weight-medium);
color: var(--color-ink);
overflow-wrap: anywhere;
}
.case-file__opened {
font-size: 0.75rem;
color: var(--color-muted);
}
.case-file__rows {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.625rem;
margin: 0;
}
.case-file__row {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: var(--space-4);
align-items: baseline;
}
@media (min-width: 480px) {
.case-file__row { grid-template-columns: 6.875rem minmax(0, 1fr); }
}
.case-file__row dt {
font-family: var(--font-mono);
font-size: 0.6875rem;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-clay-dark);
}
.case-file__row dd {
margin: 0;
min-width: 0;
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.45;
color: var(--color-ink);
overflow-wrap: anywhere;
}
.case-file__row dd.case-file__name {
font-family: var(--font-display);
font-size: clamp(1.38rem, 1.1828rem + 0.7885vw, 1.725rem);
font-weight: var(--weight-semibold);
line-height: 1.1;
color: var(--color-deep);
}
.case-file .is-empty { color: var(--color-muted); }
.case-file__row dd.case-file__name.is-empty {
font-style: italic;
font-weight: var(--weight-medium);
color: var(--color-muted);
}
.case-file__tags {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.case-file__tag {
padding: 0.25rem 0.5rem;
border: 1.5px solid var(--color-forest);
color: var(--color-forest);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transform: rotate(-1deg);
}
.case-file__urgency {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem;
}
.case-file__bars { display: flex; gap: 0.25rem; }
.case-file__bars > span {
display: block;
width: 1.125rem;
height: 0.75rem;
border: 1px solid rgba(160, 106, 67, 0.6);
}
.case-file__bars[data-level="1"] > span:nth-child(-n+1),
.case-file__bars[data-level="2"] > span:nth-child(-n+2),
.case-file__bars[data-level="3"] > span:nth-child(-n+3),
.case-file__bars[data-level="4"] > span:nth-child(-n+4) {
border-color: var(--color-clay-dark);
background-color: var(--color-clay-dark);
}
.case-file__messy {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.case-file__messy-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-clay-dark);
}
.case-file__paper {
min-height: clamp(9.375rem, 7.8125rem + 6.4103vw, 13.75rem);
max-height: 18.75rem;
overflow: hidden;
padding: 0.375rem 1.125rem 0.375rem 3rem;
border: 1px solid rgba(160, 106, 67, 0.35);
background-color: var(--color-white);
background-image:
linear-gradient(90deg, transparent 2.125rem, rgba(160, 106, 67, 0.4) 2.125rem,
rgba(160, 106, 67, 0.4) calc(2.125rem + 1px), transparent calc(2.125rem + 1px)),
repeating-linear-gradient(180deg, transparent 0, transparent calc(1.875rem - 1px),
var(--color-stone) calc(1.875rem - 1px), var(--color-stone) 1.875rem);
background-position: 0 0, 0 0.375rem;
}
.case-file__paper p {
font-size: 1.0625rem;
font-style: italic;
line-height: 1.875rem;
color: var(--color-deep);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.case-file__paper p.is-empty { color: var(--color-muted); }
.case-file__foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-1) var(--space-4);
padding-block-start: var(--space-3);
border-block-start: 1px dashed rgba(160, 106, 67, 0.6);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-muted);
}
.case-file__stamp {
position: absolute;
top: 7.5rem;
right: clamp(1rem, 0.3571rem + 2.5714vw, 2.125rem);
padding: 0.5rem 1.125rem;
border: 4px solid var(--color-clay-dark);
border-radius: 6px;
background-color: rgba(239, 233, 220, 0.6);
color: var(--color-clay-dark);
font-family: var(--font-mono);
font-size: clamp(1.625rem, 1.1964rem + 1.7143vw, 2.375rem);
font-weight: var(--weight-medium);
line-height: 1.2;
letter-spacing: 0.18em;
text-transform: uppercase;
transform: rotate(-12deg);
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.case-file.is-received .case-file__stamp {
animation: case-file-stamp 380ms var(--ease) both;
}
}
@keyframes case-file-stamp {
from { opacity: 0; transform: rotate(-12deg) scale(1.6); }
to { opacity: 1; transform: rotate(-12deg) scale(1); }
}
.contact-also__inner {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.contact-also .section-head {
align-items: start;
gap: var(--space-5) var(--space-9);
}
.contact-also .section-head__aside {
max-width: 36rem;
}
.contact-also .section-head__aside p + p { margin-block-start: var(--space-3); }
.contact-also__note { color: var(--color-muted); font-size: 0.9375rem; }