/* Hallmark · genre: editorial · design-system: design.md · designed-as-app
 * macrostructures: Photographic · Portfolio Grid · Long Document · Narrative Workflow · Letter
 * theme: Garden · nav: N9 Edge-aligned minimal · footer: Ft6 Letter close
 * H6 knobs: full-bleed · lower-left caption · text-below
 * pre-emit critique: P5 H5 E5 S5 R4 V5 · contrast: pass (40–41)
 * slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (34, 49, 50–57) · icons: pass (30)
 */

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open { overflow: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; }
:focus-visible { outline: var(--rule-fine) solid var(--color-focus); outline-offset: var(--space-2xs); }
.skip-link { position: fixed; z-index: var(--z-tooltip); inset-block-start: -6rem; inset-inline-start: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); }
.skip-link:focus { inset-block-start: var(--space-sm); }

.site-header { position: fixed; z-index: var(--z-sticky); inset: 0 0 auto; min-height: var(--header-height); padding: max(var(--space-sm), env(safe-area-inset-top)) var(--page-gutter) var(--space-sm); display: flex; align-items: center; justify-content: space-between; color: var(--color-photo-ink); border-block-end: var(--rule-hair) solid transparent; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.site-header.scrolled, .site-header.solid { background: var(--color-header-surface); color: var(--color-ink); border-color: var(--color-rule); backdrop-filter: blur(1rem); }
.menu-open .site-header { background: transparent; color: var(--color-dark-ink); border-color: transparent; backdrop-filter: none; }
.brand { position: relative; z-index: var(--z-modal); min-height: 2.75rem; display: flex; flex-direction: column; justify-content: center; line-height: 1; white-space: nowrap; }
.brand-cn { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.12em; }
.brand-en { margin-block-start: var(--space-2xs); color: currentColor; font-family: var(--font-outlier); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; opacity: 0.7; }
.menu-toggle { position: relative; z-index: var(--z-modal); min-width: 4.75rem; min-height: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); border: 0; background: transparent; color: currentColor; cursor: pointer; white-space: nowrap; }
.menu-toggle-label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; }
.menu-toggle-mark { position: relative; width: 1.25rem; height: 0.875rem; }
.menu-toggle-mark::before, .menu-toggle-mark::after { content: ""; position: absolute; inset-inline: 0; height: var(--rule-hair); background: currentColor; transition: transform var(--dur-short) var(--ease-in-out); }
.menu-toggle-mark::before { inset-block-start: 0.1875rem; }
.menu-toggle-mark::after { inset-block-end: 0.1875rem; }
.menu-open .menu-toggle-mark::before { transform: translateY(0.25rem) rotate(45deg); }
.menu-open .menu-toggle-mark::after { transform: translateY(-0.25rem) rotate(-45deg); }
.site-menu { position: fixed; z-index: var(--z-dropdown); inset: 0; padding: calc(var(--header-height) + var(--space-xl)) var(--page-gutter) max(var(--space-xl), env(safe-area-inset-bottom)); display: flex; flex-direction: column; background: var(--color-dark-surface); color: var(--color-dark-ink); opacity: 0; visibility: hidden; transform: translateY(-0.75rem); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), visibility 0s var(--dur-long); }
.site-menu[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu-index { margin-block-end: var(--space-xl); color: var(--color-dark-muted); font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.12em; }
.site-menu > a { min-height: 3.75rem; padding-block: var(--space-xs); display: flex; align-items: center; border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--color-dark-ink) 16%, transparent); font-family: var(--font-display); font-size: clamp(2rem, 10vw, 3.75rem); font-weight: 500; line-height: 1.12; white-space: nowrap; }
.site-menu p { margin: auto 0 0; color: var(--color-dark-muted); font-size: var(--text-sm); }

main { min-height: 70svh; }
.loading-state { min-height: 74svh; display: grid; place-content: center; text-align: center; }
.loading-state span { width: 1.75rem; height: 1.75rem; margin-inline: auto; border: var(--rule-hair) solid var(--color-rule); border-block-start-color: var(--color-accent); border-radius: var(--radius-pill); animation: spin 1s linear infinite; }
.loading-state p { color: var(--color-muted); font-size: var(--text-sm); }
@keyframes spin { to { transform: rotate(360deg); } }

.wrap { width: min(100%, var(--content-wide)); margin-inline: auto; }
.section { padding: var(--space-3xl) var(--page-gutter); background: var(--color-paper); color: var(--color-ink); }
.section-tight { padding-block: var(--space-2xl); }
.section-surface { background: var(--color-paper-2); color: var(--color-ink); }
.section-dark { background: var(--color-dark-surface); color: var(--color-dark-ink); }

.photo-hero { position: relative; min-height: 88svh; background: var(--color-dark-surface); color: var(--color-photo-ink); }
.photo-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.photo-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--color-photo-wash), transparent 38%, var(--color-photo-overlay)); }
.photo-caption { position: absolute; z-index: var(--z-raised); inset-inline: var(--page-gutter); inset-block-end: max(var(--space-xl), env(safe-area-inset-bottom)); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); }
.photo-caption p { max-width: 19rem; margin: 0; }
.photo-caption small { font-size: var(--text-xs); white-space: nowrap; }

.intro-fold { position: relative; z-index: var(--z-raised); width: calc(100% - (var(--page-gutter) * 2)); margin: calc(var(--space-xl) * -1) auto 0; padding: var(--space-2xl) var(--page-gutter) var(--space-4xl); border-block-start: var(--rule-fine) solid var(--color-accent); background: var(--color-paper); color: var(--color-ink); }
.intro-grid { display: grid; gap: var(--space-xl); }
.intro-fold h1, .display { min-width: 0; margin: 0; font-family: var(--font-display); font-size: var(--text-display-s); font-style: normal; font-weight: 700; letter-spacing: -0.04em; line-height: 1.12; overflow-wrap: anywhere; }
.intro-copy { max-width: 37rem; }
.intro-copy p { margin: 0; color: var(--color-neutral); }
.hero-actions, .action-row { margin-block-start: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.button { min-height: var(--control-height); padding-inline: var(--space-lg); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.button-light { border-color: var(--color-dark-ink); background: var(--color-dark-ink); color: var(--color-dark-surface); }
.button-ghost { border-color: currentColor; background: transparent; color: inherit; }
.button-block { width: 100%; }
.button:active { transform: translateY(var(--rule-hair)); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
a:active { opacity: 0.82; }
a[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.menu-toggle:active, .filter:active { transform: translateY(var(--rule-hair)); }
.menu-toggle:disabled, .filter:disabled { opacity: 0.55; cursor: not-allowed; }
.button[data-state="loading"]::before { content: ""; width: 1rem; height: 1rem; border: var(--rule-hair) solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-pill); animation: spin 1s linear infinite; }
.text-link { min-height: 2.75rem; margin-block-start: var(--space-lg); display: inline-flex; align-items: center; border-block-end: var(--rule-hair) solid currentColor; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.text-link::after { content: "↗"; margin-inline-start: var(--space-xs); }

.section-head { position: relative; max-width: 43rem; margin-block-end: var(--space-xl); padding-inline-start: var(--space-md); display: grid; gap: var(--space-sm); }
.section-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--rule-fine); background: var(--color-accent); }
.section-head h2, .section-title { min-width: 0; margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3.75rem); font-style: normal; font-weight: 700; letter-spacing: -0.035em; line-height: 1.16; overflow-wrap: anywhere; }
.section-head p, .section-lede { max-width: var(--content-reading); margin: 0; color: var(--color-muted); }
.section-dark .section-head p, .section-dark .section-lede { color: var(--color-dark-muted); }
.kicker, .eyebrow { margin: 0; color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; }

.project-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
.project-card, .article-card { display: block; min-width: 0; }
.project-image, .article-cover { position: relative; overflow: clip; background: var(--color-paper-3); }
.project-image { aspect-ratio: 4 / 5; }
.project-card:nth-child(even) .project-image { aspect-ratio: 5 / 4; }
.article-cover { aspect-ratio: 5 / 4; }
.project-image img, .article-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.draft-badge { position: absolute; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); padding: var(--space-2xs) var(--space-xs); background: var(--color-dark-surface); color: var(--color-dark-ink); font-size: var(--text-xs); white-space: nowrap; }
.project-meta, .article-meta { margin-block-start: var(--space-sm); display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.project-card h3, .article-card h3 { margin: var(--space-xs) 0 0; font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 700; line-height: 1.25; }
.project-card p, .article-card p { margin: var(--space-xs) 0 0; color: var(--color-muted); }
.filter-row { margin-block-start: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.filter { min-height: 2.75rem; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: transparent; color: var(--color-neutral); cursor: pointer; white-space: nowrap; }
.filter.active { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }

.page-lead { position: relative; min-height: 72svh; padding: calc(var(--header-height) + var(--space-2xl)) var(--page-gutter) var(--space-2xl); display: flex; align-items: flex-end; overflow: clip; border-block-end: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); }
.page-lead::after { content: "CUIGUAN / LANDSCAPE"; position: absolute; top: calc(var(--header-height) + var(--space-sm)); right: var(--page-gutter); color: var(--color-muted); font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; opacity: 0.72; writing-mode: vertical-rl; }
.page-lead-inner { position: relative; z-index: var(--z-base); padding-inline-end: var(--space-xl); display: grid; gap: var(--space-lg); }
.page-lead-inner::before { content: ""; width: var(--space-xl); height: var(--rule-fine); background: var(--color-accent); }
.page-lead .display { max-width: 13ch; font-size: clamp(2.75rem, 12vw, 5.5rem); }
.page-lead-copy { max-width: 35rem; color: var(--color-muted); }
.page-lead-copy p { margin: 0; }
.page-meta { color: var(--color-muted); font-size: var(--text-sm); }
.detail-hero { min-height: 76svh; }
.detail-hero .photo-caption { align-items: flex-end; }
.photo-caption .kicker { color: var(--color-photo-ink); }
.detail-hero-title { max-width: 16ch; margin: 0; font-family: var(--font-display); font-size: var(--text-display-s); font-style: normal; font-weight: 700; line-height: 1.08; overflow-wrap: anywhere; }
.fact-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-block-start: var(--rule-hair) solid var(--color-rule); }
.fact-list div { min-width: 0; padding: var(--space-md) 0; border-block-end: var(--rule-hair) solid var(--color-rule); }
.fact-list div:nth-child(odd) { padding-inline-end: var(--space-sm); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.fact-list div:nth-child(even) { padding-inline-start: var(--space-sm); }
.fact-list dt { color: var(--color-muted); font-size: var(--text-xs); }
.fact-list dd { margin: var(--space-xs) 0 0; font-family: var(--font-display); font-weight: 700; }
.truth-note { margin-block-start: var(--space-lg); padding: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule); color: var(--color-neutral); font-size: var(--text-sm); }

.prose, .article-body { width: min(100%, var(--content-reading)); margin-inline: auto; }
.prose-lede, .article-intro { margin: 0 0 var(--space-2xl); font-family: var(--font-display); font-size: var(--text-md); font-style: normal; font-weight: 500; line-height: 1.7; }
.prose-section, .article-section { margin-block-start: var(--space-2xl); }
.prose-section h2, .article-section h2 { margin: 0 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 700; line-height: 1.35; }
.prose-section p, .article-section p { margin: 0; color: var(--color-neutral); line-height: 1.9; }
.inline-figure { margin: var(--space-2xl) auto; width: min(100%, var(--content-reading)); }
.inline-figure img { width: 100%; height: auto; }
.inline-figure figcaption { margin-block-start: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }

.journal-index { counter-reset: journal; border-block-start: var(--rule-hair) solid var(--color-rule); }
.journal-row { counter-increment: journal; position: relative; min-height: 9rem; padding: var(--space-xl) 0 var(--space-xl) var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); }
.journal-row::before { content: counter(journal, decimal-leading-zero); position: absolute; inset-block-start: var(--space-xl); inset-inline-start: 0; color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 600; }
.journal-row h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-style: normal; font-weight: 700; line-height: 1.35; }
.journal-row p { margin: 0; color: var(--color-muted); }
.journal-row-meta { display: flex; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }

.service-lead { min-height: 66svh; background-image: linear-gradient(to right, color-mix(in oklch, var(--color-rule) 44%, transparent) var(--rule-hair), transparent var(--rule-hair)), linear-gradient(to bottom, color-mix(in oklch, var(--color-rule) 44%, transparent) var(--rule-hair), transparent var(--rule-hair)); background-size: var(--space-xl) var(--space-xl); }
.service-plate { position: relative; height: 46svh; margin: 0; overflow: clip; background: var(--color-dark-surface); }
.service-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-photo-overlay), transparent 70%); }
.service-plate img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.service-plate figcaption { position: absolute; z-index: var(--z-raised); inset-inline: var(--page-gutter); inset-block-end: var(--space-lg); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); color: var(--color-photo-ink); font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; }
.service-plate figcaption span { padding-block-start: var(--space-xs); border-block-start: var(--rule-hair) solid currentColor; }
.workflow { display: grid; grid-template-columns: minmax(0, 1fr); border-block-start: var(--rule-fine) solid var(--color-dark-ink); }
.workflow-step { position: relative; min-height: 12rem; padding: var(--space-xl) var(--space-md); display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--space-md); overflow: clip; border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--color-dark-ink) 20%, transparent); }
.workflow-step > span { color: var(--color-accent-on-dark); font-family: var(--font-body); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.workflow-copy { align-self: end; }
.workflow-step h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 700; }
.workflow-step p { max-width: 23rem; margin: var(--space-xs) 0 0; color: var(--color-dark-muted); }
.service-ledger { border-block-start: var(--rule-hair) solid var(--color-rule); }
.service-item { padding-block: var(--space-xl); border-block-end: var(--rule-hair) solid var(--color-rule); }
.service-name { display: grid; grid-template-columns: var(--space-xl) minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; }
.service-name > span { color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 600; }
.service-item h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 700; }
.service-item p { max-width: 42rem; color: var(--color-muted); }
.service-item ul { margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.service-item li { padding-block: var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-neutral); }
.section-dark .service-item p, .section-dark .service-item li { color: var(--color-dark-muted); }
.section-dark .service-item li { border-color: color-mix(in oklch, var(--color-dark-ink) 20%, transparent); }

.letter-layout { display: grid; gap: var(--space-2xl); }
.letter-salutation { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-style: normal; font-weight: 700; }
.letter-body { max-width: 55ch; }
.letter-body p { margin: 0 0 var(--space-lg); color: var(--color-neutral); }
.letter-signoff { margin-block-start: var(--space-2xl); font-family: var(--font-display); font-size: var(--text-md); }
.principles-list { counter-reset: principle; border-block-start: var(--rule-hair) solid var(--color-rule); }
.principle { counter-increment: principle; position: relative; min-height: 13rem; padding: var(--space-2xl) 0 var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); }
.principle::before { content: "0" counter(principle); position: absolute; inset-block-start: var(--space-sm); inset-inline-start: 0; color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 600; }
.principle h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-style: normal; font-weight: 700; }
.principle p { margin: var(--space-xs) 0 0; color: var(--color-muted); }

.contact-grid { display: grid; gap: var(--space-2xl); }
.contact-aside { padding: var(--space-xl); border-block-start: var(--rule-fine) solid var(--color-accent-on-dark); background: var(--color-dark-surface); color: var(--color-dark-ink); }
.contact-aside h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-style: normal; font-weight: 700; line-height: 1.25; }
.contact-aside p { color: var(--color-dark-muted); }
.contact-aside .pill { border-color: color-mix(in oklch, var(--color-dark-ink) 24%, transparent); color: var(--color-dark-ink); }
.city-line { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-lg); }
.pill { padding: var(--space-2xs) var(--space-xs); border-block: var(--rule-hair) solid var(--color-rule); color: var(--color-neutral); font-size: var(--text-sm); }
.form { display: grid; gap: var(--space-lg); }
.form-row { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-2xs); }
.field label, .fieldset-title { color: var(--color-neutral); font-size: var(--text-sm); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--control-height); padding: var(--space-xs) calc(var(--space-lg) + var(--space-sm)) var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); outline: var(--rule-fine) solid transparent; outline-offset: var(--rule-hair); background: var(--color-paper); color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; color: var(--color-muted); }
.field-message { min-height: 1lh; margin: 0; color: var(--color-muted); font-size: var(--text-xs); }
.field-message.error { color: var(--color-error); }
.field-message.success { color: var(--color-success); }
.consent { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-xs); align-items: start; color: var(--color-neutral); font-size: var(--text-sm); }
.consent input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-accent); }
.honeypot { position: absolute; inset-inline-start: -999rem; }
.form-status { min-height: 1.5em; margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.form-status.error { color: var(--color-error); }
.form-status.success { color: var(--color-success); }

.site-footer { padding: var(--space-3xl) var(--page-gutter) calc(var(--space-4xl) + env(safe-area-inset-bottom)); background: var(--color-dark-surface); color: var(--color-dark-ink); }
.foot-letter { max-width: none; }
.foot-letter > * { width: min(100%, var(--content-wide)); margin-inline: auto; }
.foot-letter-close { margin-block: 0; font-family: var(--font-display); font-size: clamp(2rem, 8vw, 4.25rem); font-style: normal; font-weight: 700; line-height: 1.2; }
.foot-letter-ps { margin-block: var(--space-xl) 0; color: var(--color-dark-muted); }
.footer-links { margin-block-start: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.footer-links a { min-height: 2.75rem; display: inline-flex; align-items: center; border-block-end: var(--rule-hair) solid currentColor; white-space: nowrap; }
.footer-legal { margin-block: var(--space-xl) 0; padding-block-start: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--color-dark-ink) 18%, transparent); color: var(--color-dark-muted); font-size: var(--text-xs); }
.mobile-project-bar { position: fixed; z-index: var(--z-sticky); inset-inline: var(--space-sm); inset-block-end: max(var(--space-sm), env(safe-area-inset-bottom)); min-height: 3.5rem; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); background: var(--color-dark-surface); color: var(--color-dark-ink); box-shadow: 0 var(--rule-hair) var(--space-xs) color-mix(in oklch, var(--color-ink) 18%, transparent); }
.menu-open .mobile-project-bar { opacity: 0; pointer-events: none; transform: translateY(var(--space-sm)); }
body[data-route="contact"] .mobile-project-bar { display: none; }
.mobile-project-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.mobile-project-bar a { min-height: 2.75rem; padding-inline: var(--space-sm); display: inline-flex; align-items: center; background: var(--color-dark-ink); color: var(--color-dark-surface); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.toast { position: fixed; z-index: var(--z-toast); inset-inline: var(--space-sm); inset-block-end: calc(5rem + env(safe-area-inset-bottom)); padding: var(--space-sm); background: var(--color-ink); color: var(--color-paper); opacity: 0; pointer-events: none; transform: translateY(var(--space-sm)); text-align: center; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.toast.show { opacity: 1; transform: none; }
.error-state { min-height: 72svh; padding: calc(var(--header-height) + var(--space-3xl)) var(--page-gutter) var(--space-3xl); }
.error-state h1 { max-width: 18ch; margin: 0; font-family: var(--font-display); font-size: var(--text-display-s); font-style: normal; font-weight: 700; line-height: 1.15; }
.error-state p { max-width: 42rem; color: var(--color-muted); }

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(calc(var(--rule-hair) * -1)); }
  .text-link:hover { color: var(--color-accent); }
  .project-card:hover img, .article-card:hover img { transform: scale(1.02); }
  .site-menu > a:hover { color: var(--color-accent); }
  .field input:hover, .field select:hover, .field textarea:hover { background: var(--color-paper-2); }
}

@media (min-width: 40rem) {
  .site-menu { padding-block-start: calc(var(--header-height) + var(--space-2xl)); }
  .site-menu > a { font-size: clamp(2.5rem, 7vw, 4.5rem); }
  .intro-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl) var(--space-lg); }
  .project-card:nth-child(3n + 1) { margin-block-start: var(--space-xl); }
  .journal-row { grid-template-columns: minmax(0, 1.3fr) minmax(12rem, 0.7fr); align-items: start; gap: var(--space-xl); }
  .journal-row-meta { justify-content: flex-end; }
  .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-step:nth-child(odd) { border-inline-end: var(--rule-hair) solid color-mix(in oklch, var(--color-dark-ink) 20%, transparent); }
  .principles-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principle { padding-inline: var(--space-lg); border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .principle:last-child { border-inline-end: 0; }
  .principle::before { inset-inline-start: var(--space-lg); }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { width: min(26rem, calc(100% - var(--space-xl))); inset-inline-start: 50%; inset-inline-end: auto; transform: translate(-50%, var(--space-sm)); }
  .toast.show { transform: translate(-50%, 0); }
}

@media (min-width: 60rem) {
  .photo-hero { min-height: 100svh; }
  .photo-hero-media { object-position: center 46%; }
  .page-lead-inner { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); align-items: end; }
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-card:nth-child(3n + 1) { margin-block-start: var(--space-2xl); }
  .project-card:nth-child(3n + 2) { margin-block-start: 0; }
  .project-card:nth-child(3n) { margin-block-start: var(--space-xl); }
  .page-lead { min-height: 78svh; }
  .page-lead-inner::before { grid-column: 1 / -1; }
  .service-plate { height: 58svh; }
  .service-plate figcaption { font-size: var(--text-md); }
  .workflow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow-step, .workflow-step:nth-child(odd) { min-height: 18rem; border-inline-end: var(--rule-hair) solid color-mix(in oklch, var(--color-dark-ink) 20%, transparent); }
  .workflow-step:nth-child(3n) { border-inline-end: 0; }
  .workflow-step { grid-template-columns: 4rem minmax(0, 1fr); align-items: start; }
  .service-item { display: grid; grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); }
  .service-item p { margin-block-start: 0; }
  .contact-grid { grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr); gap: var(--space-3xl); }
  .contact-aside { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-lg)); }
  .letter-layout { grid-template-columns: minmax(14rem, 0.6fr) minmax(0, 1.4fr); align-items: start; }
  .mobile-project-bar { inset-inline: auto var(--space-lg); width: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .project-image img, .article-cover img { transform: none !important; }
}