:root {
  color-scheme: dark;
  --page: #09121e;
  --surface: #0d1928;
  --text: #f0eee8;
  --muted: #a4acb5;
  --quiet: #798593;
  --accent: #c99a72;
  --callout-note-accent: #779AB3;
  --callout-tip-accent: #8AAE9C;
  --callout-success-accent: #83B398;
  --callout-question-accent: #A99AC4;
  --callout-important-accent: #D09A73;
  --callout-warning-accent: #C5AD72;
  --callout-caution-accent: #C48A86;
  --line: rgba(217, 225, 231, 0.15);
  --ambient: radial-gradient(ellipse 70% 46% at 50% 45%, rgba(37, 58, 77, .2), transparent 82%);
  --hero-text: #f2f0eb;
  --hero-eyebrow: #d9cec0;
  --hero-muted: #d6d8d7;
  --hero-rule: rgba(241, 239, 234, .55);
  --hero-corner: rgba(240, 238, 232, .7);
  --page-padding: clamp(24px, 5.3vw, 92px);
  --content-width: 1540px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --page: #e2e9ed;
  --surface: #e5ebee;
  --text: #293b49;
  --muted: #536675;
  --quiet: #5b6b76;
  --accent: #a1643d;
  --callout-note-accent: #6D92AA;
  --callout-tip-accent: #7E9D90;
  --callout-success-accent: #668E76;
  --callout-question-accent: #9082AD;
  --callout-important-accent: #B67852;
  --callout-warning-accent: #B18D4B;
  --callout-caution-accent: #B77976;
  --line: rgba(46, 66, 81, 0.12);
  --ambient: radial-gradient(ellipse 70% 48% at 52% 45%, rgba(255, 255, 255, .48), transparent 82%);
  --hero-text: #263946;
  --hero-eyebrow: #465c68;
  --hero-muted: #4f6571;
  --hero-rule: rgba(44, 63, 75, .44);
  --hero-corner: rgba(53, 73, 85, .72);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ambient), var(--page); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--accent); color: var(--page); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.site-shell { width: min(100%, var(--content-width)); min-height: 100svh; margin-inline: auto; padding-inline: var(--page-padding); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.site-header { min-height: 101px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.wordmark { width: max-content; font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.wordmark-dot, .title-period { color: var(--accent); }
.primary-nav { display: flex; gap: clamp(26px, 3.4vw, 54px); align-items: center; }
.primary-nav a, .theme-toggle { font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.primary-nav a, .social-links a, .back-link { transition: color .2s ease; }
.primary-nav a:hover, .social-links a:hover, .back-link:hover { color: var(--accent); }
.primary-nav a[aria-current="page"] { color: var(--accent); }
.theme-toggle { justify-self: end; display: flex; gap: 10px; align-items: center; padding: 9px 0 9px 9px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--text); }
.theme-icon { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: inset -5px -3px 0 -2px currentColor; }
html[data-theme="light"] .theme-icon { box-shadow: none; position: relative; }
html[data-theme="light"] .theme-icon::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }

main { min-width: 0; display: grid; }
.hero, .interior { min-height: clamp(570px, 69svh, 790px); }
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; background: var(--surface); }
.hero-image, .hero-grain { position: absolute; inset: 0; pointer-events: none; }
.hero-image { z-index: -2; background: url("./assets/twilight-mountains.jpg") center 55% / cover no-repeat, #101d2b; }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 11, 21, .88) 0%, rgba(5, 13, 23, .57) 49%, rgba(5, 13, 23, .14) 100%), linear-gradient(0deg, rgba(5, 12, 21, .35), transparent 50%); }
.hero-grain { z-index: -1; opacity: 0; }
.hero-content { width: 100%; padding: clamp(42px, 6vw, 98px); color: var(--hero-text); }
.hero-eyebrow, .interior-index { display: flex; gap: 13px; align-items: center; margin-bottom: clamp(28px, 4.8vw, 72px); color: var(--hero-eyebrow); font-size: 10px; font-weight: 600; letter-spacing: .23em; text-transform: uppercase; }
.eyebrow-line { width: 27px; height: 1px; background: #c99a72; }
h1, p { margin: 0; }
.hero h1 { max-width: 980px; font-size: clamp(64px, 8.3vw, 133px); font-weight: 400; letter-spacing: -.071em; line-height: .95; }
.hero-subtitle { margin-top: clamp(24px, 3.5vw, 46px); color: var(--hero-muted); font-size: clamp(16px, 1.5vw, 20px); font-weight: 400; letter-spacing: -.01em; line-height: 1.5; }
.hero-actions { display: flex; gap: clamp(26px, 4vw, 64px); margin-top: clamp(40px, 5.4vw, 77px); }
.hero-actions a { min-width: 110px; display: flex; justify-content: space-between; gap: 24px; padding-bottom: 11px; border-bottom: 1px solid var(--hero-rule); font-size: 15px; font-weight: 500; transition: border-color .2s ease, color .2s ease; }
.hero-actions a:hover { border-color: #c99a72; color: #dcb08b; }
.hero-actions span { font-size: 16px; color: #c99a72; }
.hero-corner { position: absolute; right: 30px; bottom: 25px; color: var(--hero-corner); font-size: 10px; letter-spacing: .16em; }

html[data-theme="light"][data-hero="photo"] .hero { background: var(--page); }
html[data-theme="light"][data-hero="photo"] .hero-image {
  opacity: .7;
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 76%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
html[data-theme="light"][data-hero="photo"] .hero-image::after {
  background: linear-gradient(90deg, var(--page) 0%, rgba(226, 233, 237, .93) 22%, rgba(226, 233, 237, .53) 54%, rgba(226, 233, 237, .13) 100%), linear-gradient(0deg, rgba(226, 233, 237, .68), transparent 47%, rgba(226, 233, 237, .25));
}

html[data-hero="type"] .hero { background: radial-gradient(ellipse 42% 48% at 79% 67%, rgba(137, 87, 51, .105), transparent 76%), var(--surface); }
html[data-hero="type"] .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
html[data-hero="type"] .hero-image { display: none; }
html[data-hero="type"] .hero-grain { opacity: 1; background: linear-gradient(90deg, transparent calc(100% - 29%), var(--line) calc(100% - 29%), var(--line) calc(100% - 29% + 1px), transparent calc(100% - 29% + 1px)); }
html[data-hero="type"] .hero-content { color: var(--text); }
html[data-hero="type"] .hero-eyebrow { color: var(--muted); }
html[data-hero="type"] .hero-subtitle { color: var(--muted); }
html[data-hero="type"] .hero-actions a { border-color: var(--line); }
html[data-hero="type"] .hero-actions a:hover { border-color: var(--accent); color: var(--accent); }
html[data-hero="type"] .hero-actions span { color: var(--accent); }
html[data-hero="type"] .hero-corner { color: var(--quiet); }
html[data-theme="light"][data-hero="type"] .hero { background: radial-gradient(ellipse 40% 43% at 77% 68%, rgba(201, 154, 114, .09), transparent 75%), var(--surface); }

.interior { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 6vw, 98px); background: var(--surface); border-bottom: 1px solid var(--line); }
.notes-interior { min-height: clamp(340px, 43svh, 490px); padding-block: clamp(34px, 4vw, 56px); }
.notes-interior .interior-index { margin-bottom: clamp(24px, 2.6vw, 34px); }
.notes-interior p { margin-top: 22px; }
.notes-interior .back-link { margin-top: 38px; }
.interior[hidden] { display: none; }
.interior-index { color: var(--muted); }
.interior h1 { font-size: clamp(64px, 8.3vw, 124px); font-weight: 400; letter-spacing: -.07em; line-height: 1; }
.interior p { max-width: 480px; margin-top: 32px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.back-link { width: max-content; margin-top: 70px; font-size: 13px; }

.contact-section { padding: clamp(58px, 8vw, 110px) clamp(30px, 6vw, 98px); scroll-margin-top: 28px; }
.contact-heading { max-width: 650px; }
.contact-heading .interior-index { margin-bottom: 25px; }
.contact-heading h2 { font-size: clamp(38px, 5vw, 64px); font-weight: 400; letter-spacing: -.055em; line-height: 1.05; }
.contact-heading > p { max-width: 520px; margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(34px, 5vw, 54px); }
.contact-item { min-width: 0; min-height: 174px; padding: 23px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--surface) 72%, transparent); transition: border-color .2s ease, background-color .2s ease; }
.contact-item:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: var(--surface); }
.contact-item-heading { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.contact-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.contact-address { display: inline-block; max-width: 100%; margin-top: 24px; color: var(--text); font-size: clamp(14px, 1.2vw, 17px); font-weight: 500; overflow-wrap: anywhere; transition: color .2s ease; }
.contact-address:hover { color: var(--accent); }
.contact-address > span[aria-hidden="true"] { margin-left: 3px; color: var(--accent); font-size: .85em; }
.contact-description { margin-top: 9px; color: var(--quiet); font-size: 12px; line-height: 1.5; }
.email-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.email-address { overflow-wrap: anywhere; }
.copy-email { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; margin-top: 16px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.copy-email:hover { color: var(--text); border-color: var(--accent); }
.copy-email:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.copy-email svg { width: 16px; height: 16px; }
.copy-feedback { min-height: 18px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-footer { padding-top: 31px; padding-bottom: 27px; }
.footer-top, .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-top { min-height: 42px; }
.site-manifesto, .footer-bottom { color: var(--quiet); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.site-manifesto { line-height: 1.9; }
.site-manifesto span { padding-inline: 5px; color: var(--accent); }
.social-links { display: flex; gap: 28px; white-space: nowrap; }
.social-links a { color: var(--muted); font-size: 12px; }
.footer-bottom { margin-top: 28px; padding-top: 21px; border-top: 1px solid var(--line); }
.footer-separator { padding-inline: 8px; color: var(--accent); }
.variant-switch { display: flex; align-items: center; gap: 11px; }
.variant-switch a { color: var(--quiet); transition: color .2s ease; }
.variant-switch a:hover, .variant-switch a[aria-current="true"] { color: var(--text); }

.notes-archive { padding: clamp(54px, 7vw, 92px) clamp(30px, 6vw, 98px); }
.notes-empty { color: var(--muted); font-size: 15px; line-height: 1.7; }
.notes-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; margin: 0 0 28px; color: var(--quiet); font-size: 11px; }
.notes-filters ul { display: flex; flex-wrap: wrap; gap: 8px 17px; margin: 0; padding: 0; list-style: none; }
.notes-filters a { color: var(--muted); transition: color .2s ease; }
.notes-filters a:hover, .notes-filters a[aria-current="true"] { color: var(--accent); }
.notes-filter-empty { margin-top: 22px; color: var(--muted); font-size: 14px; }
.notes-list { max-width: 940px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.notes-list-item { border-bottom: 1px solid var(--line); }
.notes-list-item > a { display: block; padding: 24px 0 26px; }
.notes-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.notes-list-heading h2 { min-width: 0; font-size: clamp(19px, 2.4vw, 27px); font-weight: 400; letter-spacing: -.035em; line-height: 1.4; }
.notes-list-heading time, .note-heading time { flex: 0 0 auto; color: var(--quiet); font-size: 11px; letter-spacing: .09em; }
.notes-list-item > a > p { max-width: 680px; margin-top: 9px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.notes-list-item > a:hover h2 { color: var(--accent); }

.note-article { min-width: 0; padding: clamp(58px, 8vw, 108px) clamp(30px, 10vw, 154px) 90px; }
.note-heading { max-width: 860px; padding-bottom: 37px; border-bottom: 1px solid var(--line); }
.note-heading .interior-index { margin-bottom: 25px; }
.note-heading h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 400; letter-spacing: -.055em; line-height: 1.12; overflow-wrap: anywhere; }
.note-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 24px; color: var(--quiet); font-size: 11px; letter-spacing: .07em; }
.note-toc { max-width: 760px; margin-top: 26px; padding: 14px 17px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.note-toc summary { width: max-content; color: var(--text); cursor: pointer; }
.note-toc > ol { margin: 12px 0 0; padding-left: 1.3em; }
.note-toc li + li { margin-top: 7px; }
.note-toc ol ol { margin-top: 7px; padding-left: 1.5em; list-style-type: lower-alpha; }
.note-toc a:hover { color: var(--accent); }
.note-classification { margin-top: 12px; color: var(--muted); font-size: 12px; }
.note-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; max-width: 760px; margin: 34px 0 0; padding: 0; color: var(--quiet); font-size: 12px; list-style: none; }
.note-adjacent { max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 58px; padding-top: 22px; border-top: 1px solid var(--line); }
.note-adjacent-link { min-width: 0; display: grid; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.note-adjacent-link > span:first-child { color: var(--quiet); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.note-adjacent-link:hover { color: var(--accent); }
.note-adjacent-older { text-align: right; }
.note-prose { max-width: 760px; padding-top: 38px; color: var(--text); font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.note-prose > :first-child { margin-top: 0; }
.note-prose h1, .note-prose h2, .note-prose h3, .note-prose h4, .note-prose h5, .note-prose h6 { margin: 2em 0 .65em; font-weight: 500; letter-spacing: -.035em; line-height: 1.3; }
.note-prose h1 { font-size: 2em; }
.note-prose h2 { font-size: 1.65em; }
.note-prose h3 { font-size: 1.35em; }
.note-prose h4 { font-size: 1.15em; }
.note-prose h5 { font-size: 1.05em; }
.note-prose h6 { color: var(--muted); font-size: 1em; }
.note-prose h2, .note-prose h3 { scroll-margin-top: 28px; }
.note-prose p, .note-prose ul, .note-prose ol, .note-prose blockquote, .note-prose pre, .note-prose table, .note-prose hr { margin: 1.2em 0; }
.note-prose ul, .note-prose ol { padding-left: 1.5em; }
.note-prose li + li { margin-top: .35em; }
.note-prose blockquote { padding: .1em 0 .1em 1.1em; border-left: 2px solid var(--accent); color: var(--muted); }
.note-prose .note-callout { --callout-accent: var(--callout-note-accent); min-width: 0; max-width: 100%; margin: 1.2em 0; padding: .75em 1.05em .8em; overflow-wrap: anywhere; border: 1px solid var(--line); border-left: 3px solid var(--callout-accent); border-radius: 3px; background: var(--surface); color: var(--muted); }
.note-prose .note-callout-tone-tip { --callout-accent: var(--callout-tip-accent); }
.note-prose .note-callout-tone-success { --callout-accent: var(--callout-success-accent); }
.note-prose .note-callout-tone-question { --callout-accent: var(--callout-question-accent); }
.note-prose .note-callout-tone-important { --callout-accent: var(--callout-important-accent); }
.note-prose .note-callout-tone-warning { --callout-accent: var(--callout-warning-accent); }
.note-prose .note-callout-tone-caution { --callout-accent: var(--callout-caution-accent); }
.note-prose .note-callout-heading { display: grid; gap: .24rem; margin: 0 0 .58em; }
.note-prose .note-callout-label { width: fit-content; color: var(--callout-accent); font-size: 11px; font-weight: 600; letter-spacing: .13em; line-height: 1.4; }
.note-prose .note-callout-title { min-width: 0; color: var(--text); font-size: 15.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.note-prose .note-callout > p, .note-prose .note-callout > ul, .note-prose .note-callout > ol, .note-prose .note-callout > blockquote, .note-prose .note-callout > pre, .note-prose .note-callout > table { max-width: 100%; margin-block: .72em; }
.note-prose .note-callout > :last-child { margin-bottom: 0; }
.note-prose .note-callout pre, .note-prose .note-callout .note-code-block { min-width: 0; max-width: 100%; }
.note-prose .note-callout pre { overflow-x: auto; }
.note-prose .note-callout > .note-callout-heading:first-child { margin-top: 0; }
@supports (background: color-mix(in srgb, #000 94%, #fff 6%)) {
  .note-prose .note-callout { background: color-mix(in srgb, var(--surface) 88%, var(--callout-accent) 12%); border-color: color-mix(in srgb, var(--line), var(--callout-accent) 36%); border-left-color: var(--callout-accent); }
  .note-prose .note-callout-label { color: color-mix(in srgb, var(--callout-accent) 45%, var(--text) 55%); }
}
.note-prose code { padding: .16em .38em; border: 1px solid var(--line); border-radius: 3px; background: color-mix(in srgb, var(--surface) 82%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.note-prose pre { max-width: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--surface) 88%, transparent); overflow-x: auto; }
.note-prose pre code { padding: 0; border: 0; background: transparent; font-size: .86em; line-height: 1.65; }
.note-code-block { min-width: 0; margin: 1.2em 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.note-prose .note-code-block pre { max-width: 100%; margin: 0; padding: 18px 20px; border: 0; border-radius: 0; background: transparent; overflow-x: auto; }
.note-code-toolbar { min-height: 39px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 7px 12px; border-bottom: 1px solid var(--line); color: var(--quiet); font-size: 10px; letter-spacing: .08em; }
.note-code-copy { min-height: 25px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.note-code-copy:hover { border-color: var(--accent); color: var(--text); }
.note-prose .astro-code, .note-prose .astro-code span { color: var(--shiki-light) !important; background-color: transparent !important; }
html[data-theme="dark"] .note-prose .astro-code, html[data-theme="dark"] .note-prose .astro-code span { color: var(--shiki-dark) !important; }
.note-prose a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.note-prose img { display: block; max-width: 100%; height: auto; margin: 1.7em auto; border-radius: 3px; }
.note-prose img.note-preview-image { cursor: zoom-in; }
.note-image-dialog { position: fixed; max-width: min(94vw, 1280px); max-height: 94dvh; padding: 47px 14px 14px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); }
.note-image-dialog::backdrop { background: rgba(4, 10, 17, .82); }
.note-image-dialog img { display: block; max-width: min(90vw, 1240px); max-height: 82dvh; margin: auto; object-fit: contain; }
.note-image-close { position: absolute; top: 10px; right: 12px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.note-image-close:hover { color: var(--text); border-color: var(--accent); }
.note-prose table { display: block; width: 100%; border-collapse: collapse; overflow-x: auto; }
.note-prose th, .note-prose td { min-width: 100px; padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.note-prose th { color: var(--muted); font-weight: 600; }
.note-prose hr { border: 0; border-top: 1px solid var(--line); }
.note-prose .katex { font-size: 1em; }
.note-prose .katex-display { max-width: 100%; margin: 1.35em 0; padding-block: .2em; overflow-x: auto; overflow-y: hidden; }
.note-back-link { margin-top: 50px; }

@media (max-width: 720px) {
  :root { --page-padding: 22px; }
  .site-header { min-height: 88px; grid-template-columns: 1fr auto; gap: 10px; padding-block: 18px; }
  .wordmark { font-size: 11px; }
  .primary-nav { grid-column: 1; grid-row: 2; gap: 27px; }
  .primary-nav a, .theme-toggle { font-size: 12px; }
  .theme-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .hero, .interior { min-height: min(660px, max(560px, 72svh)); }
  .hero { align-items: flex-end; }
  .hero-content { padding: 42px 30px 70px; }
  .hero-image { background-position: 60% center; }
  .hero-image::after { background: linear-gradient(0deg, rgba(4, 11, 21, .93) 0%, rgba(4, 11, 21, .53) 58%, rgba(4, 11, 21, .18) 100%); }
  html[data-theme="light"][data-hero="photo"] .hero-image { mask-image: linear-gradient(0deg, #000 0%, #000 76%, transparent 100%); opacity: .82; }
  html[data-theme="light"][data-hero="photo"] .hero-image::after { background: linear-gradient(0deg, rgba(226, 233, 237, .97) 0%, rgba(226, 233, 237, .84) 34%, rgba(226, 233, 237, .42) 70%, rgba(226, 233, 237, .12) 100%); }
  .hero-eyebrow { margin-bottom: 34px; }
  .hero h1 { font-size: clamp(61px, 13vw, 90px); }
  .hero-subtitle { margin-top: 28px; font-size: 16px; }
  .hero-actions { margin-top: 56px; gap: 28px; }
  .hero-actions a { min-width: 99px; }
  .hero-corner { right: 20px; bottom: 16px; }
  html[data-hero="type"] .hero { align-items: center; }
  html[data-hero="type"] .hero-grain { background: linear-gradient(90deg, transparent calc(100% - 17%), var(--line) calc(100% - 17%), var(--line) calc(100% - 17% + 1px), transparent calc(100% - 17% + 1px)); }
  .interior { padding: 40px 30px; }
  .notes-interior { min-height: clamp(310px, 43svh, 390px); }
  .contact-grid { grid-template-columns: 1fr; gap: 12px; }
  .contact-item { min-height: 0; padding: 21px; }
  .contact-address { font-size: 16px; }
  .footer-top, .footer-bottom { align-items: flex-start; flex-wrap: wrap; }
  .footer-top { gap: 18px; }
  .footer-bottom { margin-top: 26px; gap: 14px; }
  .notes-archive { padding-inline: 30px; }
  .notes-list-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .note-article { padding: 58px 30px 70px; }
  .note-prose { font-size: 15px; }
  .note-adjacent { gap: 14px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: clamp(56px, 14vw, 64px); }
  .hero-actions { flex-direction: column; gap: 20px; align-items: flex-start; margin-top: 42px; }
  .hero-actions a { width: 148px; }
  .hero-content { padding-bottom: 58px; }
  .site-manifesto { max-width: 300px; }
  .social-links { gap: 23px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 52px; }
  .hero-content, .interior { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}