@layer reset, theme, base, layout, components, responsive, experience;

@layer experience {
  .welcome-screen { position:fixed; inset:0; z-index:90; display:none; place-items:center; background:#1a1a1a; color:#f3f3f3; pointer-events:none; }
  .welcome-screen[hidden] { display:none; }
  .welcome-screen::after { content:''; position:absolute; bottom:-12svh; width:140%; height:24svh; border-radius:0 0 50% 50%; background:#1a1a1a; }
  .welcome-brand { position:absolute; top:clamp(24px,4vw,60px); left:clamp(24px,4vw,60px); font-size:1.1rem; }
  .welcome-word { display:flex; align-items:center; gap:20px; font-size:clamp(2rem,5vw,4.5rem); font-weight:400; letter-spacing:-.035em; text-align:center; padding:24px; }
  .welcome-word::before { content:''; width:10px; height:10px; background:currentColor; border-radius:50%; flex:none; }
  .welcome-signature { position:absolute; bottom:8svh; font:500 .875rem var(--font-mono); letter-spacing:.12em; }
  .welcome-line { position:absolute; bottom:5svh; left:25%; width:50%; height:1px; background:rgb(255 255 255 / 15%); overflow:hidden; }
  .welcome-line::after { content:''; position:absolute; inset:0; background:#f3f3f3; transform-origin:left; animation:welcome-line 1600ms linear both; }
  @keyframes welcome-line { from {transform:scaleX(0.02)} to {transform:scaleX(1)} }
  .welcome-skip {position:absolute;top:clamp(24px,4vw,60px);right:clamp(24px,4vw,60px);background:transparent;border:1px solid rgb(255 255 255 / 25%);border-radius:100px;padding:10px 20px;min-height:44px;color:inherit;font:inherit;cursor:pointer;pointer-events:auto;}
  .welcome-skip:focus-visible {outline:2px solid currentColor;outline-offset:4px;}
  html.intro-pending:not(.intro-leaving) :is(.hero-visual,.hero-eyebrow,h1,.hero-statement,.hero-intro,.hero-actions,.hero-location) { animation-play-state:paused; }
  @media (prefers-reduced-motion:reduce) { .welcome-screen { display:none; } }
  .button { position:relative; isolation:isolate; overflow:hidden; border-radius:100px; }
  .button::before { content:''; position:absolute; inset:-55% -15%; z-index:-1; background:#e0e0e0; border-radius:45%; transform:translateY(105%); transition:transform 280ms var(--ease-out); }
  .button-quiet::before { background:var(--surface-raised); }
  .pointer-bubble { position:fixed; left:0; top:0; z-index:30; width:68px; height:68px; display:grid; place-items:center; border-radius:50%; background:var(--button-bg); color:var(--button-text); font-size:.875rem; pointer-events:none; opacity:0; visibility:hidden; box-shadow:0 8px 24px rgb(0 0 0 / 12%); transition:opacity 150ms ease,visibility 150ms; }
  .pointer-bubble.is-visible {opacity:1;visibility:visible;}
  .pointer-bubble span { text-align:center; }
  .note-row,.journal-card,.project-card .button {cursor:pointer;}
  .note-preview { transition:opacity 160ms ease,visibility 160ms; }
  @media (hover:hover) and (pointer:fine) {
    .button:hover::before {transform:translateY(0);}
    .button-primary:hover {color:#141414;}
  }
  @media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) { .pointer-bubble {display:none;} }
  html[data-input="keyboard"] .pointer-bubble, html.reading .pointer-bubble {display:none;}
  html[data-input="keyboard"] .button::before {transition:none;}
  @media (prefers-reduced-motion:reduce) { .button::before {transition:none;} }
  .site-nav {grid-template-columns:repeat(3,1fr);}
  .nav-indicator {width:calc((100% - 8px)/3);}
  .races-section {padding-block:110px;border-top:1px solid var(--line);}
  .race-entries {display:block;margin-top:44px;}
  .journal-empty {grid-column:1/-1;color:var(--muted);padding:24px 0;border-top:1px solid var(--line);font-size:1rem;}
  .loading-state {grid-column:1/-1;width:100%;padding:24px 0;min-width:0;}
  .loading-copy {font-size:1rem;line-height:1.6;color:var(--text);}
  .loading-detail {font-size:.875rem;line-height:1.7;color:var(--muted);margin-top:12px;max-width:50ch;}
  .loading-progress {position:relative;overflow:hidden;height:3px;border-radius:100px;background:var(--line);margin-top:16px;width:100%;}
  .loading-progress::before {content:'';display:block;height:100%;width:40%;background:var(--text);transform:translateX(-110%);animation:loading-travel 1250ms linear infinite;}
  @keyframes loading-travel {to{transform:translateX(350%);}}
  .loading-rows {margin-top:28px;}
  .loading-row {display:grid;grid-template-columns:90px 1fr;gap:16px 28px;align-content:center;min-height:110px;border-top:1px solid var(--line);}
  .loading-row span {display:block;border-radius:4px;background:var(--surface-raised);height:12px;}
  .loading-date {width:65px;grid-row:1/3;align-self:center;}
  .loading-row .loading-title {width:min(75%,520px);height:20px;}
  .loading-meta {width:min(45%,280px);}
  .article-entries .loading-row {min-height:170px;}
  .race-entries .loading-row {min-height:150px;}
  .preview-message .loading-state {padding:0;}
  .preview-message .loading-copy {color:inherit;}
  .preview-message .loading-detail {color:inherit;opacity:.7;}
  .preview-message .loading-progress {background:rgb(255 255 255 / 15%);}
  .preview-message .loading-progress::before {background:#c8c8c8;}
  .race-archive-results > .loading-state > .loading-progress {position:fixed;top:0;left:0;width:100%;margin:0;border-radius:0;z-index:91;}
  .load-error {padding:24px 0;}
  .load-error p {color:var(--muted);line-height:1.8;margin-bottom:20px;}
  .media-frame {display:grid;place-items:center;min-height:180px;width:100%;max-width:var(--media-width,100%);margin-inline:auto;overflow:hidden;background:var(--surface);border-radius:10px;}
  .media-frame.is-ready {min-height:0;}
  .media-frame .loading-state,.media-frame .load-error {padding:24px;width:min(100%,420px);}
  .media-frame img.media-image {display:block;width:auto;max-width:100%;height:auto;object-fit:contain;margin-inline:auto;}
  .media-photo-link {display:block;width:100%;text-align:right;}
  .media-original-label {display:inline-block;padding:9px 12px;font-size:.75rem;line-height:1.5;color:var(--muted);}
  .media-photo-link:hover .media-original-label {color:var(--text);text-decoration:underline;text-underline-offset:3px;}
  .race-filter:disabled {cursor:wait;}
  @media (max-width:600px){.loading-row {grid-template-columns:60px 1fr;gap:14px 16px;}.loading-date {width:48px;}.loading-title {width:88%;}.loading-meta {width:65%;}}
  @media (prefers-reduced-motion:reduce){.loading-progress::before {animation:none;transform:translateX(70%);}}
  .journal-card {border-top:1px solid var(--line);display:block;transition:color 180ms ease;}
  .journal-cover {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:20px;}
  .journal-card-content {padding:24px 0;}
  .journal-card-content h3 {font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.5;margin:16px 0;}
  .race-card-metrics,.article-card-excerpt {color:var(--muted);font-size:1rem;line-height:1.8;}
  .journal-card-cta {display:block;margin-top:24px;font-size:.875rem;color:var(--muted);}
  .channel-heading {margin:50px 0 24px;}
  .channel-heading h3 {font-size:clamp(1.6rem,2vw,2rem);margin:14px 0;}
  .channel-heading p:not(.eyebrow) {color:var(--muted);font-size:1rem;}
  .notes-label {margin:64px 0 24px;}
  .article-entries {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
  .app-preview {margin-top:80px;}
  .preview-heading h3 {font-size:clamp(1.8rem,2.6vw,2.8rem);line-height:1.35;letter-spacing:-.04em;}
  .preview-heading p {margin-top:18px;color:var(--muted);}
  .preview-stage {display:grid;grid-template-columns:minmax(240px,390px) minmax(0,1fr);gap:clamp(48px,8vw,130px);align-items:center;max-width:1020px;margin:60px auto 0;}
  .preview-screen {border-radius:36px;padding:10px;background:#121212;border:1px solid #484848;box-shadow:0 24px 80px rgb(0 0 0 / 15%);overflow:hidden;}
  .preview-device {width:100%;min-width:0;}
  .preview-display {position:relative;aspect-ratio:412/906;overflow:hidden;border-radius:27px;background:#000;}
  .preview-page {position:absolute;inset:0;}
  .preview-page[hidden],.preview-message[hidden] {display:none;}
  .preview-image {width:100%;height:100%;object-fit:contain;display:block;background:#000;user-select:none;pointer-events:none;}
  .preview-hotspot {position:absolute;background:transparent;border:0;padding:0;border-radius:7px;}
  .preview-hotspot:active {background:rgb(255 255 255 / 12%);}
  .preview-hotspot:focus-visible {outline:2px solid #e8e8e8;outline-offset:-2px;background:rgb(255 255 255 / 8%);}
  @media (hover:hover) and (pointer:fine) { .preview-hotspot:hover {background:rgb(255 255 255 / 6%);} }
  .preview-message {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#c8c8c8;font-size:1rem;line-height:1.6;text-align:center;padding:28px;}
  .preview-retry {border:1px solid #737373;border-radius:20px;background:transparent;color:#f2f2f2;padding:9px 18px;font:inherit;}
  .preview-caption {min-height:1.5em;margin-top:18px;color:var(--muted);font-size:.875rem;text-align:center;line-height:1.5;}
  .preview-options {display:flex;flex-direction:column;gap:6px;}
  .preview-tab {display:flex;align-items:center;gap:20px;background:transparent;border:0;border-top:1px solid var(--line);padding:24px 10px;text-align:left;color:var(--muted);min-height:100px;position:relative;}
  .preview-tab.is-active {color:var(--text);}
  .preview-tab.is-active::after {content:'';width:7px;height:7px;border-radius:50%;background:currentColor;position:absolute;right:10px;top:28px;}
  .preview-tab-number {font-size:.875rem;align-self:flex-start;padding-top:4px;}
  .preview-tab img {width:44px;height:44px;object-fit:contain;}
  .preview-tab strong {font-size:1.5rem;font-weight:500;display:block;}
  .preview-tab span span {display:block;font-size:1rem;margin-top:7px;}
  .preview-provenance {color:var(--muted);font-size:.875rem;margin-top:24px;}
  .reader-gallery {display:grid;gap:24px;margin:44px 0;}
  .reader-gallery img {display:block;width:100%;height:auto;border-radius:10px;}
  .reader-inline-photo {margin:36px 0;}
  .reader-inline-photo img {display:block;width:100%;max-width:640px;height:auto;margin-inline:auto;border-radius:10px;}
  .reader-body > h3 {font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.55;margin:48px 0 20px;}
  .reader-body > p {white-space:pre-line;}
  .reader-certificates {margin-top:44px;padding-top:24px;border-top:1px solid var(--line);}
  .reader-certificates h3 {margin-bottom:18px;font-size:1.25rem;}
  [hidden] {display:none!important;}
  .manage-main {padding-block:150px 100px;}
  .manage-main h1 {font-size:clamp(2rem,4vw,4rem);letter-spacing:-.04em;line-height:1.4;margin:24px 0;animation:none;}
  .manage-intro {color:var(--muted);font-size:1rem;}
  .owner-signin {max-width:440px;display:flex;flex-direction:column;gap:24px;margin-top:32px;}
  .owner-signin label {display:flex;flex-direction:column;gap:12px;}
  .owner-signin input {width:100%;padding:12px 14px;font:inherit;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:8px;}
  .owner-signin .button {align-self:flex-start;}
  .manage-logout {margin-top:16px;}
  .manage-account {margin-block:24px 36px;}
  .password-settings {border-block:1px solid var(--line);padding-block:20px;}
  .password-settings summary {width:fit-content;font-size:1rem;cursor:pointer;}
  .password-editor {display:flex;flex-direction:column;gap:20px;max-width:440px;margin-top:28px;}
  .password-editor label {display:flex;flex-direction:column;gap:12px;font-size:1rem;}
  .password-editor input {width:100%;padding:12px 14px;font:inherit;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:8px;}
  .password-editor .button {align-self:flex-start;}
  #password-status {font-size:1rem;line-height:1.7;}
  #password-status:empty {display:none;}
  .manage-home {margin-left:auto;font-size:1rem;}
  .manage-theme {padding:10px;background:transparent;border:1px solid var(--line);border-radius:30px;color:var(--text);font-size:.875rem;}
  #manage-status {font-size:1rem;line-height:1.8;min-height:2em;margin-top:32px;overflow-wrap:anywhere;}
  .manage-workspace {display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:60px;margin-top:30px;}
  .manage-new {display:flex;flex-wrap:wrap;gap:10px;}
  .manage-sidebar h2 {font-size:1.2rem;margin:40px 0 20px;}
  .managed-entry {width:100%;padding:20px 0;background:transparent;border:0;border-top:1px solid var(--line);text-align:left;color:var(--muted);}
  .managed-entry strong {display:block;font-size:1rem;font-weight:500;line-height:1.5;}
  .managed-entry span {display:block;font-size:.875rem;margin-top:8px;}
  .managed-entry.is-active {color:var(--text);}
  .entry-editor {display:flex;flex-direction:column;gap:24px;min-width:0;}
  .entry-editor label {display:flex;flex-direction:column;gap:12px;min-width:0;font-size:1rem;}
  .entry-editor input:not([type="file"]),.entry-editor textarea,.entry-editor select {width:100%;min-width:0;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:8px;padding:12px 14px;font:inherit;line-height:1.6;}
  .entry-editor textarea {resize:vertical;}
  .editor-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .editor-metrics {grid-template-columns:repeat(3,minmax(0,1fr));}
  .editor-help {color:var(--muted);font-size:.875rem;line-height:1.7;}
  .media-field {border:1px solid var(--line);border-radius:10px;padding:20px;min-width:0;}
  .media-field legend {padding:0 8px;font-size:1rem;}
  .media-field input[type="file"] {max-width:100%;font-size:1rem;color:var(--muted);}
  .media-field input::file-selector-button {background:var(--button-bg);color:var(--button-text);border:0;border-radius:20px;padding:10px 16px;font:inherit;cursor:pointer;margin-right:16px;}
  .managed-photos,.managed-certificates {display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;}
  .managed-media {display:flex;flex-direction:column;gap:10px;}
  .managed-media img {width:120px;height:90px;object-fit:cover;border-radius:6px;}
  .managed-media a,.managed-media button {font-size:.875rem;}
  .managed-media button {background:transparent;border:0;color:var(--muted);padding:6px;}
  .editor-actions {display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin-top:16px;}
  button:disabled {opacity:.5;cursor:wait;}
  @media(max-width:960px) {
    .race-entries {grid-template-columns:repeat(2,minmax(0,1fr));}
    .preview-stage {gap:40px;grid-template-columns:minmax(220px,320px) minmax(0,1fr);}
    .preview-tab {padding-block:18px;gap:14px;}
    .preview-tab strong {font-size:1.3rem;}
    .manage-workspace {grid-template-columns:minmax(180px,230px) minmax(0,1fr);gap:30px;}
    .editor-metrics {grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(max-width:600px) {
    .site-nav a {padding-inline:8px;}
    .nav-indicator {width:calc((100% - 4px)/3);}
    .races-section {padding-block:70px;}
    .race-entries,.article-entries {grid-template-columns:1fr;}
    .preview-stage {display:flex;flex-direction:column-reverse;gap:28px;margin-top:30px;}
    .preview-device {width:min(100%,340px);}
    .preview-screen {border-radius:30px;}
    .preview-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px 16px;}
    .preview-tab {min-height:86px;padding:14px 3px;gap:10px;}
    .preview-tab img {width:32px;height:32px;}
    .preview-tab-number {display:none;}
    .preview-tab strong {font-size:1.1rem;}
    .preview-tab span span {font-size:.875rem;line-height:1.5;}
    .preview-tab.is-active::after {right:0;top:16px;width:5px;height:5px;}
    .preview-provenance {grid-column:1/-1;margin-top:8px;font-size:.875rem;}
    .manage-main {padding-top:150px;}
    .manage-home {display:none;}
    .manage-main h1 {font-size:2.2rem;}
    .manage-workspace {grid-template-columns:1fr;gap:40px;}
    .editor-grid,.editor-metrics {grid-template-columns:1fr;gap:24px;}
    .managed-entries {max-height:260px;overflow:auto;}
    .entry-editor textarea {min-height:170px;}
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure { margin: 0; }
  button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  button { font: inherit; }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; }
  button { cursor: pointer; }
}

@layer theme {
  :root {
    color-scheme: dark;
    --bg: #101010;
    --surface: #171717;
    --surface-raised: #222222;
    --text: #f4f4f4;
    --muted: #b4b4b4;
    --quiet: #b0b0b0;
    --line: #2d2d2d;
    --line-strong: #474747;
    --accent: #d7d7d7;
    --button-bg: #f1f1f1;
    --button-text: #141414;
    --nav-bg: rgb(25 25 25 / 82%);
    --header-bg: rgb(16 16 16 / 84%);
    --project-bg: #171717;
    --project-glow: rgb(255 255 255 / 10%);
    --image-opacity: .86;
    --shadow: 0 20px 70px rgb(0 0 0 / 20%);
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --content-width: 1240px;
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f5f5;
    --surface: #fff;
    --surface-raised: #e7e7e7;
    --text: #171717;
    --muted: #646464;
    --quiet: #5f5f5f;
    --line: #d6d6d6;
    --line-strong: #a9a9a9;
    --accent: #333333;
    --button-bg: #171717;
    --button-text: #f5f5f5;
    --nav-bg: rgb(255 255 255 / 83%);
    --header-bg: rgb(245 245 245 / 87%);
    --project-bg: #efefef;
    --project-glow: rgb(0 0 0 / 4%);
    --image-opacity: 1;
    --shadow: 0 20px 70px rgb(0 0 0 / 8%);
  }
  :root[data-theme="moss"] {
    color-scheme: dark;
    --bg: #14201b;
    --surface: #1b2b24;
    --surface-raised: #293c32;
    --text: #eef3e9;
    --muted: #c0d0c2;
    --quiet: #bacbbb;
    --line: #33483b;
    --line-strong: #5a7362;
    --accent: #d4e1c8;
    --button-bg: #e6eedd;
    --button-text: #17241c;
    --nav-bg: rgb(27 43 36 / 82%);
    --header-bg: rgb(20 32 27 / 84%);
    --project-bg: #1b2b24;
    --project-glow: rgb(197 220 171 / 12%);
    --image-opacity: .94;
    --shadow: 0 20px 70px rgb(4 12 8 / 24%);
  }
  :root[data-theme="gray"] {
    color-scheme: dark;
    --bg: #343939;
    --surface: #3d4343;
    --surface-raised: #4c5352;
    --text: #f3f4ef;
    --muted: #d8e0da;
    --quiet: #d4ddd6;
    --line: #5b6361;
    --line-strong: #7c8782;
    --accent: #e0e5df;
    --button-bg: #edf0e9;
    --button-text: #303633;
    --nav-bg: rgb(61 67 67 / 82%);
    --header-bg: rgb(52 57 57 / 84%);
    --project-bg: #3d4343;
    --project-glow: rgb(229 237 225 / 12%);
    --image-opacity: 1;
    --shadow: 0 20px 70px rgb(13 18 16 / 20%);
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 6.875rem; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition:background-color 250ms ease,color 180ms ease; }
  ::selection { color: var(--bg); background: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
  svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .section-shell { max-width: var(--content-width); width: calc(100% - 112px); margin-inline: auto; }
  .eyebrow { color: var(--muted); font-size: .75rem; letter-spacing: .14em; line-height: 1.5; font-weight: 500; }
  h2 { font-size: clamp(1.8rem, 3.1vw, 2.7rem); line-height: 1.3; font-weight: 550; letter-spacing: -.04em; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; top: 12px; left: 12px; padding: 12px 20px; z-index: 100; background: var(--button-bg); color: var(--button-text); border-radius: 8px; transform: translateY(-150%); }
  .skip-link:focus { transform: none; }
}

@layer layout {
  .site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .header-inner { height: 100px; width: calc(100% - 112px); max-width: var(--content-width); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; position: relative; }
  .brand { display: flex; gap: 10px; align-items: center; font-size: 1.1rem; font-weight: 600; letter-spacing: -.04em; min-height: 44px; }
  .brand-mark { width:32px; height:32px; flex:none; object-fit:contain; border-radius:8px; }
  .brand-period { color: var(--accent); }
  .site-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 30px; background: var(--nav-bg); box-shadow: 0 2px 12px rgb(0 0 0 / 3%); }
  .site-nav a { padding: 9px 23px; min-height: 42px; display: grid; place-items: center; font-size: .875rem; color: var(--muted); border-radius: 24px; white-space: nowrap; transition: background-color 180ms ease, color 180ms ease; }
  .site-nav a[aria-current] { background: var(--surface-raised); color: var(--text); }
  .theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: transparent; transition: transform 160ms var(--ease-out), background-color 180ms ease; }
  .theme-toggle svg { width: 19px; height: 19px; }
  .theme-palette {display:grid;grid-template-columns:repeat(2,7px);gap:4px;transform:rotate(-18deg);pointer-events:none;}
  .theme-swatch {display:block;width:7px;height:7px;border-radius:50%;border:1px solid rgb(255 255 255 / 24%);transition:transform 160ms var(--ease-out);}
  .theme-swatch-dark {background:#171717;}
  .theme-swatch-light {background:#f5f5f5;border-color:rgb(0 0 0 / 18%);}
  .theme-swatch-moss {background:#48634c;}
  .theme-swatch-gray {background:#87918b;}
  [data-theme="dark"] .theme-swatch-dark,[data-theme="light"] .theme-swatch-light,[data-theme="moss"] .theme-swatch-moss,[data-theme="gray"] .theme-swatch-gray {outline:1px solid var(--text);outline-offset:2px;transform:scale(1.08);}
  [data-theme="dark"] .moon-icon, [data-theme="light"] .sun-icon { display: none; }
  .hero { padding-top: 56px; display: grid; grid-template-columns: 1fr 1.03fr; column-gap: 74px; position: relative; }
  .hero-copy { padding-top: 28px; padding-bottom: 54px; }
  .hero-eyebrow { display: flex; align-items: center; gap: 10px; }
  .small-cross { font-size: 1.2rem; line-height: 1; color: var(--accent); }
  h1 { font-size: clamp(6rem, 10vw, 9rem); font-weight: 550; letter-spacing: -.045em; line-height: 1.05; margin-top: 31px; display: flex; flex-wrap: wrap; align-items: baseline; }
  .hero-period { color: var(--accent); }
  .hero-name { font-size: 1.375rem; font-weight: 400; color: var(--muted); letter-spacing: .14em; margin-left: 28px; }
  .hero-statement { margin-top: 24px; font-size: clamp(1.65rem, 2.55vw, 2.25rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.55; }
  .hero-intro { color: var(--muted); font-size: 1rem; line-height: 1.85; margin-top: 22px; }
  .hero-actions { display: flex; align-items: center; gap: 15px; margin-top: 29px; flex-wrap: wrap; }
  .hero-location { display: flex; align-items: center; gap: 9px; color: var(--quiet); font-size: .75rem; letter-spacing: .02em; margin-top: 45px; white-space: nowrap; }
  .hero-location svg { width: 15px; height: 15px; }
  .location-divider { display: block; width: 1px; height: 12px; background: var(--line-strong); margin-inline: 4px; }
  .hero-visual { position: relative; min-width: 0; min-height: 530px; border-radius: 8px 8px 80px 8px; overflow: hidden; background: #282828; box-shadow: var(--shadow); }
  .mountain-image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 45% 50%; opacity: var(--image-opacity); }
  .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 20 28 / 14%), transparent 35%, rgb(13 18 27 / 65%)); pointer-events: none; }
  .image-topline { position: absolute; inset: 25px 26px auto; display: flex; align-items: center; justify-content: space-between; color: #f5f5f5; font-size: .75rem; letter-spacing: .16em; z-index: 1; text-shadow: 0 1px 9px #111; }
  .corner-symbol { font-size: 1.6rem; font-weight: 300; }
  .image-caption { position: absolute; bottom: 30px; left: 30px; right: 48px; display: flex; align-items: baseline; justify-content: space-between; z-index: 2; color: #fff; }
  .image-caption span:first-child { font-size: 1.4rem; letter-spacing: .05em; font-weight: 500; }
  .image-caption span:last-child { font-size: .75rem; letter-spacing: .12em; color: #e3e3e3; }
  .image-frame { position: absolute; z-index: 1; inset: 14px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 3px 3px 67px 3px; pointer-events: none; }
  .hero-footnote { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-block: 34px 48px; color: var(--quiet); font-size: .75rem; border-bottom: 1px solid var(--line); }
  .hero-footnote a { white-space: nowrap; display: flex; gap: 12px; }
  .about-section, .projects-section, .writing-section { padding-top: 85px; }
  .section-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 38px; }
  .section-aside { color: var(--quiet); font-size: .75rem; }
  .about-layout { display: grid; grid-template-columns: .85fr 2fr; gap: 64px; }
  .section-intro p { margin-top: 22px; max-width: 290px; font-size: 1rem; line-height: 1.9; color: var(--muted); }
  .muted-heading { color: var(--muted); }
  .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
  .about-item { position: relative; padding-top: 8px; }
  .about-item > svg { width: 29px; height: 29px; color: var(--muted); margin-block: 15px 31px; }
  .item-number { position: absolute; top: 8px; right: 0; font-size: .75rem; color: var(--quiet); font-variant-numeric: tabular-nums; }
  .about-item h3 { font-size: 1.1rem; font-weight: 500; margin-bottom: 14px; }
  .about-item p { font-size: 1rem; line-height: 1.9; color: var(--muted); }
  .item-tag { display: block; margin-top: 23px; color: var(--quiet); font-size: .75rem; letter-spacing: .05em; }
  .section-heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; margin-bottom: 31px; }
  .section-count { color: var(--quiet); font-size: .75rem; letter-spacing: .05em; }
  .project-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 16px; background: var(--project-bg); position: relative; overflow: hidden; }
  .project-copy { padding: 45px 48px; position: relative; z-index: 2; }
  .project-label { display: flex; align-items: center; gap: 16px; color: var(--quiet); font-size: .75rem; }
  .project-tag { color: var(--muted); border: 1px solid var(--line-strong); padding: 4px 9px; border-radius: 4px; }
  .project-copy h3 { font-size: clamp(3.2rem, 5vw, 4.75rem); letter-spacing: -.055em; font-weight: 500; line-height: 1.2; margin-top: 28px; }
  .project-copy h3>span:not(.type-line),.project-copy h3 .type-ink>span:not(.scroll-unit) { color: var(--accent); }
  .project-summary { font-size: 1.375rem; line-height: 1.6; margin-top: 14px; font-weight: 450; letter-spacing: -.02em; }
  .project-description { color: var(--muted); margin-top: 20px; font-size: 1rem; line-height: 1.85; max-width: 370px; }
  .project-copy > .button { margin-top: 29px; }
  .project-stack { display: flex; gap: 20px; margin-top: 36px; font-size: .75rem; color: var(--quiet); letter-spacing: .07em; }
  .project-visual { position: relative; min-width: 0; overflow: hidden; border-left: 1px solid var(--line); background: radial-gradient(ellipse at 50% 52%, var(--project-glow), transparent 70%); min-height: 480px; }
  .orbit { position: absolute; border-radius: 50%; border: 1px solid var(--line); left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .orbit-one { width: 240px; height: 240px; }
  .orbit-two { width: 390px; height: 390px; }
  .orbit-three { width: 545px; height: 545px; opacity: .55; }
  .aevum-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; flex-direction: column; gap: 13px; }
  .aevum-center img { width: 140px; height: 140px; filter: drop-shadow(0 13px 30px rgb(0 0 0 / 25%)); }
  .aevum-center > span { font-size: .875rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; }
  .product-orbit { position: absolute; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: var(--surface); padding: 10px 16px 10px 10px; border-radius: 10px; box-shadow: 0 5px 20px rgb(0 0 0 / 5%); }
  .product-orbit img { width: 42px; height: 42px; object-fit: contain; }
  .product-orbit div { display: flex; flex-direction: column; }
  .product-orbit strong { font-size: .875rem; font-weight: 500; }
  .product-orbit span { font-size: .75rem; color: var(--muted); margin-top: 2px; }
  .product-ultreia { top: 15%; left: 10%; }
  .product-viatica { top: 43%; right: 5%; }
  .product-sidera { bottom: 14%; left: 11%; }
  .visual-coordinate { position: absolute; color: var(--quiet); font-size: .75rem; letter-spacing: .1em; }
  .coordinate-top { top: 23px; right: 24px; }
  .coordinate-bottom { bottom: 23px; right: 24px; }
  .notes-list { border-top: 1px solid var(--line); }
  .note-row { display: grid; grid-template-columns: 47px 1fr auto; gap: 22px; padding-block: 30px; border-bottom: 1px solid var(--line); position: relative; transition: background-color 180ms ease; }
  .note-index { color: var(--quiet); font-size: .75rem; font-variant-numeric: tabular-nums; padding-top: 5px; }
  .note-category { display: block; font-size: .75rem; color: var(--muted); margin-bottom: 10px; }
  .note-text h3 { font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.5; font-weight: 500; letter-spacing: -.025em; }
  .note-text p { color: var(--muted); font-size: .875rem; line-height: 1.8; margin-top: 8px; }
  .note-end { display: flex; align-items: center; gap: 30px; font-size: .875rem; color: var(--muted); }
  .note-end svg { width: 22px; height: 22px; transition: transform 180ms var(--ease-out); }
  .now-section { margin-top: 86px; border: 1px solid var(--line); border-radius: 12px; padding: 36px 40px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 45px; background: var(--surface); }
  .now-label h2 { font-size: 1.375rem; font-weight: 500; margin-top: 14px; line-height: 1.6; }
  .now-label > p { font-size: .75rem; color: var(--quiet); margin-top: 12px; }
  .now-list { display: flex; flex-direction: column; gap: 17px; }
  .now-list > div { display: flex; gap: 19px; align-items: baseline; }
  .now-list span { color: var(--quiet); font-size: .75rem; font-variant-numeric: tabular-nums; }
  .now-list p { color: var(--muted); font-size: 1rem; line-height: 1.8; }
  .site-footer { padding-top: 100px; padding-bottom: 32px; }
  .footer-main { position: relative; padding-bottom: 64px; }
  .footer-statement { margin-top: 25px; font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.4; letter-spacing: -.06em; font-weight: 450; }
  .footer-statement > span { color: var(--muted); }
  .footer-link { position: absolute; bottom: 76px; right: 0; display: flex; gap: 30px; font-size: .875rem; color: var(--muted); min-height: 44px; align-items: center; }
  .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 25px; border-top: 1px solid var(--line); font-size: .75rem; color: var(--quiet); }
}

@layer components {
  .button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 12px 22px; font-size: .875rem; line-height: 1.5; font-weight: 500; border: 1px solid transparent; border-radius: 6px; transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease; }
  .button-primary { background: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%); }
  .button-quiet { color: var(--muted); padding-inline: 8px; }
  .button:active, .theme-toggle:active, .reader-close:active { transform: scale(.97); }
  .button:focus-visible:active, .theme-toggle:focus-visible:active, .reader-close:focus-visible:active { transform: none; }
  .spotlight-surface::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(450px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), var(--project-glow), transparent 70%); opacity: 0; transition: opacity 200ms ease; }
  .reader-dialog { padding: 0; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); width: min(860px, calc(100% - 48px)); max-height: calc(100dvh - 80px); border-radius: 14px; margin: auto; overscroll-behavior: contain; scrollbar-gutter: stable; box-shadow: var(--shadow); }
  .reader-dialog::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .reader-dialog[open] { animation: reader-in 220ms var(--ease-out); }
  .reader-dialog[open][data-input="keyboard"] { animation: none; }
  .reader-toolbar { position: sticky; top: 0; z-index: 1; background: var(--header-bg); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 12px 28px; border-bottom: 1px solid var(--line); }
  .reader-brand { color: var(--muted); font-size: .75rem; letter-spacing: .07em; }
  .reader-close { background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; transition: transform 160ms var(--ease-out), background-color 180ms ease; }
  .reader-close svg { width: 17px; height: 17px; }
  .reader-content { padding: 48px 72px 55px; }
  .reader-content h2 { margin-top: 20px; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.5; }
  .reader-lead { font-size: 1.1rem; line-height: 1.85; margin-top: 22px; color: var(--muted); padding-bottom: 30px; border-bottom: 1px solid var(--line); }
  .reader-body { margin-top: 31px; }
  .reader-body > p { font-size: 1.0625rem; line-height: 2.05; margin-top: 21px; }
  .reader-signature { margin-top: 45px; font-size: .875rem; color: var(--muted); }
  .reader-signature span { margin-left: 9px; color: var(--quiet); }
  .reader-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
  .reader-products > div { padding: 20px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
  .reader-products img { width: 48px; height: 48px; margin-bottom: 14px; }
  .reader-products strong { display: block; font-size: 1rem; font-weight: 500; }
  .reader-products span { display: block; color: var(--muted); font-size: .75rem; margin-top: 4px; }
  .reader-project-link { margin-top: 26px; }
  html.reading { overflow: hidden; scrollbar-gutter: stable; }
  @keyframes reader-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
  @keyframes reader-fade { from { opacity: 0; } to { opacity: 1; } }
  @media (hover: hover) and (pointer: fine) {
    .site-nav a:hover { color: var(--text); background: var(--surface-raised); }
    .theme-toggle:hover, .reader-close:hover { background: var(--surface-raised); }
    .button-primary:hover { transform: translateY(-2px); }
    .button-quiet:hover { color: var(--text); }
    .note-row:hover { background: var(--surface); }
    .note-row:hover .note-end svg { transform: translateX(4px); }
    .spotlight-surface:hover::before { opacity: 1; }
    .footer-link:hover { color: var(--text); }
  }
}

@layer responsive {
  @media (min-width: 1500px) { .hero { column-gap: 88px; padding-top: 78px; } .hero-visual { min-height: 570px; } }
  @media (max-width: 1050px) {
    .section-shell, .header-inner { width: calc(100% - 72px); }
    .hero { column-gap: 35px; }
    .hero-visual { min-height: 500px; }
    h1 { font-size: 7rem; }
    .hero-name { margin-left: 20px; font-size: 1.125rem; }
    .about-layout { gap: 36px; grid-template-columns: 1fr 2fr; }
    .about-grid { gap: 20px; }
    .project-copy { padding: 35px; }
    .product-orbit { padding-right: 10px; }
    .product-orbit img { width: 34px; height: 34px; }
    .product-orbit strong { font-size: .8125rem; }
    .product-ultreia { left: 7%; }
    .product-sidera { left: 6%; }
    .product-viatica { right: 3%; }
    .aevum-center img { width: 112px; height: 112px; }
  }
  @media (min-width: 761px) and (max-width: 950px) {
    .product-viatica { top: auto; bottom: 19%; right: 5%; }
    .product-sidera { bottom: 4%; left: 5%; }
    .coordinate-bottom { display: none; }
  }
  @media (max-width: 760px) {
    html { scroll-padding-top: 5.3125rem; }
    .section-shell, .header-inner { width: calc(100% - 40px); }
    .header-inner { height: auto; min-height: 78px; padding-block: 17px; gap: 12px; flex-wrap: wrap; }
    .brand { font-size: .9375rem; gap: 7px; }
    .site-nav { position: static; transform: none; margin-left: auto; padding: 2px; }
    .site-nav a { padding: 8px 11px; min-height: 36px; font-size: .875rem; }
    .theme-toggle { width: 38px; height: 38px; flex-shrink: 0; }
    .theme-toggle svg { width: 17px; height: 17px; }
    .hero { padding-top: 26px; grid-template-columns: 1fr; }
    .hero-copy { padding-top: 18px; padding-bottom: 34px; }
    .hero-eyebrow { font-size: .75rem; }
    h1 { font-size: clamp(6.5rem, 24vw, 8rem); margin-top: 22px; }
    .hero-name { margin-left: 23px; font-size: 1.125rem; }
    .hero-statement { font-size: 1.875rem; margin-top: 19px; line-height: 1.5; }
    .hero-intro { margin-top: 19px; font-size: 1rem; }
    .hero-actions { margin-top: 24px; gap: 9px; }
    .hero-location { margin-top: 29px; font-size: .75rem; gap: 7px; }
    .hero-visual { width: 100%; max-width: 100%; min-height: 310px; aspect-ratio: 1.2; border-radius: 7px 7px 55px 7px; }
    .mountain-image { object-position: 35% 50%; }
    .image-frame { inset: 11px; border-radius: 3px 3px 44px 3px; }
    .image-topline { top: 20px; left: 21px; right: 22px; }
    .image-caption { bottom: 23px; left: 23px; right: 35px; }
    .image-caption span:first-child { font-size: 1.2rem; }
    .hero-footnote { padding-block: 27px 35px; align-items: flex-start; font-size: .75rem; }
    .hero-footnote > span { max-width: 215px; line-height: 1.9; }
    .hero-footnote a { gap: 6px; min-height: 35px; align-items: center; }
    .about-section, .projects-section, .writing-section { padding-top: 59px; }
    .section-topline { margin-bottom: 25px; }
    .section-aside { display: none; }
    .about-layout { grid-template-columns: 1fr; gap: 31px; }
    .section-intro h2 br { display: none; }
    .section-intro h2 .muted-heading { margin-left: 6px; }
    .section-intro p { max-width: 100%; margin-top: 16px; font-size: 1rem; }
    .about-grid { grid-template-columns: 1fr; gap: 0; }
    .about-item { padding: 23px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 41px 1fr; column-gap: 15px; }
    .about-item > svg { grid-column: 1; grid-row: 1 / 3; margin: 0; width: 28px; height: 28px; }
    .about-item h3 { grid-column: 2; font-size: 1.0625rem; margin-bottom: 9px; padding-right: 25px; }
    .about-item p { grid-column: 2; font-size: 1rem; }
    .item-number { top: 25px; }
    .item-tag { grid-column: 2; margin-top: 12px; }
    .section-heading-row { margin-bottom: 24px; }
    .section-count { display: none; }
    .project-card { grid-template-columns: 1fr; border-radius: 12px; }
    .project-copy { padding: 28px; }
    .project-copy h3 { font-size: 3.6rem; margin-top: 22px; }
    .project-summary { font-size: 1.25rem; }
    .project-description { max-width: none; font-size: 1rem; }
    .project-stack { margin-top: 26px; gap: 20px; }
    .project-visual { min-height: 345px; border-left: none; border-top: 1px solid var(--line); }
    .orbit-one { width: 200px; height: 200px; }
    .orbit-two { width: 300px; height: 300px; }
    .orbit-three { width: 415px; height: 415px; }
    .aevum-center { top: 33%; }
    .aevum-center img { width: 100px; height: 100px; }
    .aevum-center > span { font-size: .875rem; }
    .product-orbit { top: auto; bottom: 28px; width: calc((100% - 48px) / 3); padding: 11px 4px; gap: 6px; border-radius: 8px; flex-direction: column; }
    .product-orbit img { width: 32px; height: 32px; }
    .product-orbit div { align-items: center; }
    .product-orbit strong { font-size: .875rem; }
    .product-orbit span { font-size: .75rem; }
    .product-ultreia { left: 16px; }
    .product-viatica { right: auto; left: 50%; transform: translateX(-50%); }
    .product-sidera { left: auto; right: 16px; }
    .coordinate-top { font-size: .75rem; top: 17px; right: 17px; letter-spacing: .04em; }
    .coordinate-bottom { display: none; }
    .note-row { grid-template-columns: 24px 1fr 20px; gap: 12px; padding-block: 24px; }
    .note-text h3 { font-size: 1.0625rem; line-height: 1.65; }
    .note-text p { font-size: .875rem; margin-top: 9px; }
    .note-end { gap: 0; }
    .note-end > span { display: none; }
    .now-section { margin-top: 54px; padding: 26px; grid-template-columns: 1fr; gap: 26px; }
    .now-label h2 { font-size: 1.25rem; }
    .now-list { gap: 18px; }
    .now-list > div { gap: 14px; }
    .site-footer { padding-top: 63px; padding-bottom: 25px; }
    .footer-main { padding-bottom: 73px; }
    .footer-statement { font-size: 3rem; margin-top: 21px; }
    .footer-link { bottom: 23px; font-size: .875rem; gap: 15px; }
    .footer-bottom { gap: 12px; flex-wrap: wrap; font-size: .75rem; }
    .footer-bottom > span:nth-child(2) { margin-left: auto; }
    .footer-bottom > span:last-child { flex-basis: 100%; }
    .reader-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 28px); border-radius: 12px; }
    .reader-toolbar { padding: 10px 20px; min-height: 65px; }
    .reader-close { width: 44px; height: 44px; }
    .reader-content { padding: 31px 25px 40px; }
    .reader-content h2 { font-size: 1.7rem; }
    .reader-lead { font-size: 1rem; padding-bottom: 25px; }
    .reader-body > p { font-size: 1rem; line-height: 2; }
    .reader-products { grid-template-columns: 1fr; gap: 10px; }
    .reader-products > div { display: grid; grid-template-columns: 44px 1fr; gap: 2px 15px; padding: 16px; }
    .reader-products img { grid-row: 1 / 3; margin: 0; width: 44px; height: 44px; }
    .reader-products strong { grid-column: 2; }
    .reader-products span { grid-column: 2; }
  }
  @media (max-width: 370px) {
    .section-shell, .header-inner { width: calc(100% - 32px); }
    .header-inner { gap: 8px; }
    .brand { font-size: .875rem; gap: 6px; }
    .site-nav a { padding-inline: 9px; }
    .theme-toggle { width: 36px; height: 36px; }
    .hero-actions .button { padding-inline: 16px; }
    .hero-location { gap: 5px; font-size: .75rem; }
    .hero-location .location-divider { margin-inline: 1px; }
    .project-copy { padding: 24px; }
    .now-section { padding: 23px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reader-dialog[open] { animation: reader-fade 150ms ease; }
    .button, .theme-toggle, .reader-close { transition: background-color 160ms ease, border-color 160ms ease; }
    .button:active, .theme-toggle:active, .reader-close:active, .button-primary:hover, .note-row:hover .note-end svg { transform: none; }
    .spotlight-surface::before { display: none; }
  }
  @media (pointer: coarse) {
    .theme-toggle { width: 44px; height: 44px; }
    .site-nav a { min-height: 44px; }
  }
  @supports (padding: env(safe-area-inset-top)) {
    .site-header { padding-top: env(safe-area-inset-top); }
    .site-footer { padding-bottom: max(25px, env(safe-area-inset-bottom)); }
  }
}

/* A larger reading scale and a motion vocabulary tied to exploring the site. */
@layer responsive {
  :root { --content-width: 1480px; --body-size: clamp(1.125rem, .95rem + .3vw, 1.375rem); --label-size: clamp(.875rem, .82rem + .12vw, 1rem); --ease-in-out: cubic-bezier(.77, 0, .175, 1); }
  body { font-size: var(--body-size); }
  .eyebrow, .section-aside, .section-count, .hero-footnote, .item-number, .item-tag, .project-label, .project-stack, .note-index, .note-category, .now-label > p, .now-list span, .footer-bottom, .reader-brand, .reader-products span, .visual-coordinate, .image-topline, .image-caption span:last-child { font-size: var(--label-size); }
  .hero-intro, .section-intro p, .about-item p, .project-description, .note-text p, .now-list p, .reader-lead, .reader-body > p { font-size: var(--body-size); line-height: 1.9; }
  h2 { font-size: clamp(2rem, 3.25vw, 3.75rem); }
  .about-item h3 { font-size: clamp(1.25rem, 1.1rem + .2vw, 1.5rem); }
  .note-text h3 { font-size: clamp(1.35rem, 1.75vw, 1.85rem); }
  .button, .note-end, .footer-link, .reader-signature { font-size: 1rem; }
  .button { min-height: 52px; padding: 13px 25px; border-radius: 7px; }
  .header-controls, .reader-controls { display: flex; align-items: center; gap: 10px; }
  .language-toggle { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; padding: 0; font-size: .9375rem; line-height: 1; font-weight: 550; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); transition: background-color 180ms ease, transform 160ms var(--ease-out); }
  .theme-toggle { width: 46px; height: 46px; }
  .language-toggle:active { transform: scale(.97); }
  .language-toggle:focus-visible:active { transform: none; }
  .site-nav { isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); }
  .site-nav a { padding: 10px 22px; font-size: 1rem; position: relative; z-index: 1; }
  .site-nav a[aria-current] { background: transparent; }
  .nav-indicator { position: absolute; inset: 4px auto 4px 4px; width: calc((100% - 8px) / 3); border-radius: 30px; background: var(--surface-raised); opacity: 0; transition: transform 250ms var(--ease-out), opacity 150ms ease; pointer-events: none; }
  .nav-indicator.is-visible { opacity: 1; }
  .hero { column-gap: clamp(40px, 5vw, 90px); padding-top: 64px; }
  .hero-copy { padding-bottom: 44px; }
  h1 { font-size: clamp(6.25rem, 9.8vw, 11rem); margin-top: 27px; }
  .hero-name { font-size: clamp(1.375rem, 1.7vw, 2rem); margin-left: 22px; }
  .hero-statement { font-size: clamp(1.875rem, 2.6vw, 3rem); line-height: 1.55; margin-top: 28px; }
  .statement-line { display: block; }
  .hero-intro { max-width: 32em; margin-top: 27px; }
  .hero-location { font-size: var(--label-size); margin-top: 40px; flex-wrap: wrap; }
  .hero-visual { min-height: 570px; transform-style: preserve-3d; }
  .mountain-image { transform: scale(1.10); }
  .hero-footnote { padding-block: 38px 52px; }
  .section-intro p { max-width: 340px; }
  .about-section, .projects-section, .writing-section { padding-top: 110px; }
  .section-topline { margin-bottom: 42px; }
  .about-layout { grid-template-columns: .85fr 2fr; gap: 70px; }
  .about-grid { gap: 34px; }
  .about-item > svg { margin-bottom: 28px; width: 34px; height: 34px; }
  .project-copy { padding: 52px; }
  .project-description { max-width: 28em; }
  .project-summary { font-size: clamp(1.5rem, 1.75vw, 2rem); }
  .project-copy h3 { font-size: clamp(3.75rem, 5.6vw, 5.5rem); }
  .project-visual { min-height: 560px; }
  .product-orbit { padding: 12px 15px; }
  .product-orbit strong { font-size: 1rem; }
  .product-orbit span { font-size: .875rem; }
  .product-viatica { top: 64%; right: 6%; }
  .product-sidera { bottom: 16%; left: 10%; }
  .aevum-center img { width: 150px; height: 150px; }
  .orbit-three { border-style: dashed; }
  .note-row { padding-block: 36px; }
  .note-text { max-width: 46em; }
  .note-end { gap: 25px; padding-left: 20px; }
  .now-section { margin-top: 105px; padding: 42px; grid-template-columns: 1fr 1.3fr; }
  .now-label h2 { font-size: clamp(1.4rem, 1.6vw, 1.85rem); }
  .footer-statement { font-size: clamp(3rem, 6.1vw, 6.5rem); }
  .reader-dialog { width: min(980px, calc(100% - 48px)); }
  .reader-content { padding-inline: clamp(28px, 7vw, 88px); }
  .reader-content h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
  .reader-body > p { line-height: 2; }
  .reader-products strong { font-size: 1.125rem; }

  .hero-eyebrow { animation: opening-in 650ms var(--ease-out) both; }
  h1 { animation: opening-in 800ms 60ms var(--ease-out) both; }
  .hero-statement { animation: headline-unfold 900ms 120ms var(--ease-in-out) both; }
  .hero-intro { animation: opening-in 650ms 240ms var(--ease-out) both; }
  .hero-actions { animation: opening-in 650ms 300ms var(--ease-out) both; }
  .hero-location { animation: opening-in 650ms 360ms var(--ease-out) both; }
  .hero-visual { animation: landscape-unfold 1000ms 100ms var(--ease-in-out) both; }
  @keyframes opening-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes headline-unfold { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(16px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0); } }
  @keyframes landscape-unfold { from { opacity: 0; clip-path: inset(0 0 100% 0 round 8px); } to { opacity: 1; clip-path: inset(0 round 8px); } }

  .note-preview { position: fixed; z-index: 15; pointer-events: none; width: 250px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px) rotate(-5deg) scale(.97); transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 200ms; }
  .note-preview.is-visible { opacity: 1; visibility: visible; transform: translateY(0) rotate(-3deg) scale(1); }
  .preview-art { min-height: 170px; background: var(--surface-raised); border-radius: 7px; overflow: hidden; display: grid; place-items: center; }
  .preview-art.is-ready {min-height:0;}
  .preview-art img {display:block;width:auto;max-width:100%;height:auto;max-height:min(360px,42vh);object-fit:contain;opacity:0;}
  .preview-art img.is-ready { opacity: 1; }
  .preview-art .preview-image-status {margin:0;padding:28px 14px;color:var(--muted);font-size:.8rem;line-height:1.7;text-align:center;}
  .note-preview[data-note="memory"] img, .note-preview[data-note="waypoint"] img { width: 95px; height: 95px; object-fit: contain; }
  .preview-category { display: block; font-size: .75rem; line-height: 1.6; color: var(--muted); }
  .preview-copy { padding: 14px 8px 8px; }
  .preview-title { display: block; font-size: 1rem; font-weight: 500; line-height: 1.65; margin-top: 8px; }
  .preview-summary { font-size: .875rem; line-height: 1.9; margin-top: 12px; }
  .preview-meta { display: block; font-size: .75rem; color: var(--muted); line-height: 1.7; margin-top: 14px; }
  .note-preview[data-presentation="text"] { width: 380px; padding: 18px; }
  .note-preview[data-kind="race"] { width: 330px; }
  .note-preview [hidden] { display: none; }
  html[data-input="keyboard"] .hero-eyebrow, html[data-input="keyboard"] h1, html[data-input="keyboard"] .hero-statement, html[data-input="keyboard"] .hero-intro, html[data-input="keyboard"] .hero-actions, html[data-input="keyboard"] .hero-location, html[data-input="keyboard"] .hero-visual { animation: none; }
  html[data-input="keyboard"] .nav-indicator { transition: none; }
  html[data-input="keyboard"] { scroll-behavior: auto; }
  html.intro-complete :is(.hero-visual, .hero-eyebrow, h1, .hero-statement, .hero-intro, .hero-actions, .hero-location) { animation: none; }
  html[lang="en"] .hero-name { letter-spacing: .06em; font-size: clamp(1.125rem, 1.4vw, 1.6rem); }
  html[lang="en"] .about-layout { grid-template-columns: 1fr 2fr; }
  html[lang="en"] .hero-statement { letter-spacing: -.04em; }
  html[lang="en"] .note-end { white-space: nowrap; }

  @media (hover: hover) and (pointer: fine) {
    .language-toggle:hover { background: var(--surface-raised); }
    .note-row:hover .note-text h3 { color: var(--accent); }
  }
  @media (max-width: 1180px) {
    .about-layout, html[lang="en"] .about-layout { grid-template-columns: 1fr; gap: 42px; }
    .section-intro p { max-width: 38em; }
    .about-grid { gap: 30px; }
    .note-end > span { display: none; }
    .note-end { padding-left: 0; }
  }
  @media (max-width: 1100px) {
    .project-card { grid-template-columns: 1fr; }
    .project-copy { padding: 42px; }
    .project-description { max-width: 38em; }
    .project-visual { min-height: 470px; border-left: none; border-top: 1px solid var(--line); }
    .product-ultreia { top: 11%; left: 13%; }
    .product-viatica { top: 60%; bottom: auto; right: 10%; }
    .product-sidera { bottom: 13%; left: 13%; }
    .coordinate-bottom { display: block; }
    .note-preview { display: none; }
  }
  @media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
    .hero-copy { padding-top: 18px; padding-bottom: 12px; }
    .hero-visual { width: 100%; min-height: 400px; aspect-ratio: 1.5; }
    .hero-name { margin-left: 22px; }
    .hero-intro { max-width: 34em; }
    .hero-statement { font-size: 2.25rem; }
    .about-section, .projects-section, .writing-section { padding-top: 80px; }
    .about-grid { grid-template-columns: 1fr; gap: 0; }
    .about-item { padding: 27px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; column-gap: 20px; }
    .about-item > svg { grid-column: 1; grid-row: 1 / 3; margin: 0; }
    .about-item h3 { grid-column: 2; padding-right: 30px; }
    .about-item p, .item-tag { grid-column: 2; }
    .item-number { top: 28px; }
    .now-section { grid-template-columns: 1fr; gap: 28px; }
  }
  @media (max-width: 760px) {
    html { scroll-padding-top: 9rem; }
    .header-inner { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding-block: 14px 12px; }
    .brand { font-size: 1rem; }
    .header-controls { gap: 8px; }
    .language-toggle, .theme-toggle { width: 44px; height: 44px; }
    .site-nav { position:relative;left:auto;transform:none;grid-column: 1 / -1; grid-row: 2; margin: 0 auto; width: min(100%, 380px); }
    .site-nav a { min-height: 44px; padding: 8px 16px; font-size: 1rem; }
    .nav-indicator { inset: 2px auto 2px 2px; width: calc((100% - 4px) / 3); }
    .hero { padding-top: 20px; gap: 25px; }
    h1 { font-size: clamp(5.5rem, 19vw, 7rem); margin-top: 25px; }
    .hero-name, html[lang="en"] .hero-name { font-size: 1.25rem; margin-left: 15px; }
    .hero-statement { font-size: clamp(1.75rem, 5.9vw, 2.1rem); margin-top: 23px; }
    .hero-intro { margin-top: 22px; }
    .hero-actions { gap: 12px; margin-top: 25px; }
    .hero-location { margin-top: 30px; gap: 8px; }
    .hero-visual { min-height: 320px; aspect-ratio: 1.15; }
    .hero-footnote { gap: 15px; padding-block: 28px 38px; }
    .hero-footnote > span { max-width: 64%; }
    .hero-footnote a { gap: 6px; max-width: 36%; white-space: normal; }
    .hero-footnote a > span:first-child { max-width: 7em; }
    .section-topline { margin-bottom: 30px; }
    .about-section, .projects-section, .writing-section { padding-top: 65px; }
    .about-layout { gap: 28px; }
    .about-item h3 { font-size: 1.25rem; }
    .about-item { column-gap: 14px; grid-template-columns: 32px 1fr; }
    .about-item > svg { width: 29px; height: 29px; }
    .project-copy { padding: 28px; }
    .project-summary { font-size: 1.5rem; }
    .project-copy h3 { font-size: 4rem; }
    .project-label { gap: 12px; flex-wrap: wrap; }
    .project-stack { gap: 14px; flex-wrap: wrap; }
    .project-visual { min-height: 390px; }
    .aevum-center { top: 31%; }
    .aevum-center img { width: 115px; height: 115px; }
    .product-orbit { top: auto; bottom: 26px; min-height: 126px; width: calc((100% - 40px) / 3); padding: 13px 4px; gap: 9px; }
    .product-orbit strong { font-size: .875rem; }
    .product-orbit span { font-size: .875rem; text-align: center; line-height: 1.4; padding-inline: 2px; }
    .product-ultreia { top: auto; left: 12px; }
    .product-viatica { top: auto; bottom: 26px; left: 50%; right: auto; }
    .product-sidera { bottom: 26px; left: auto; right: 12px; }
    .coordinate-top { font-size: .875rem; }
    .coordinate-bottom { display: none; }
    .note-row { grid-template-columns: 23px 1fr 18px; gap: 10px; padding-block: 29px; }
    .note-text h3 { font-size: 1.35rem; line-height: 1.6; }
    .note-text p { font-size: var(--body-size); }
    .note-category { font-size: .875rem; line-height: 1.7; }
    .now-section { margin-top: 65px; padding: 27px; }
    .now-label h2 { font-size: 1.5rem; }
    .footer-statement { font-size: clamp(2.5rem, 9.8vw, 3.5rem); }
    .footer-link { font-size: 1rem; }
    .footer-bottom { font-size: .875rem; }
    .reader-dialog { width: calc(100% - 20px); }
    .reader-content { padding: 32px 25px 42px; }
    .reader-content h2 { font-size: 1.875rem; }
    .reader-toolbar { padding: 10px 16px; }
    .reader-brand { font-size: .875rem; letter-spacing: .04em; }
    .reader-controls { gap: 7px; }
    .reader-products { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-visual, .hero-eyebrow, h1, .hero-statement, .hero-intro, .hero-actions, .hero-location { animation: none; }
    .nav-indicator { transition: opacity 150ms ease; }
    .language-toggle:active { transform: none; }
    .note-preview { display: none; }
  }
}

@layer experience {
  .race-overview {display:flex;gap:clamp(28px,6vw,90px);border-top:1px solid var(--line);padding:28px 0 36px;}
  .race-overview-stat {display:flex;flex-direction:column;gap:7px;}
  .race-overview-stat strong {font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:500;letter-spacing:-.05em;font-variant-numeric:tabular-nums;}
  .race-overview-stat span {color:var(--muted);font-size:.875rem;}
  .race-showcase {display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);}
  .race-card {cursor:pointer;}
  .article-entries {display:block;}
  .article-list {border-bottom:1px solid var(--line);}
  .article-card {display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:28px;align-items:start;padding:32px 12px;border-top:1px solid var(--line);border-radius:4px;transition:background-color 160ms ease-out;}
  .article-date {font-size:.875rem;color:var(--muted);line-height:1.8;padding-top:5px;font-variant-numeric:tabular-nums;}
  .article-copy {min-width:0;}
  .article-card h3 {font-size:clamp(1.2rem,1.8vw,1.65rem);font-weight:500;line-height:1.6;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere;}
  .article-card-excerpt {font-size:1rem;line-height:1.85;color:var(--muted);margin:12px 0 14px;max-width:60ch;}
  .article-reading-meta {display:block;font-size:.8rem;line-height:1.7;color:var(--muted);font-variant-numeric:tabular-nums;}
  .article-card .journal-card-cta {font-size:.8rem;white-space:nowrap;padding-top:7px;}
  .article-more {margin-top:26px;}
  .reader-overview {border-block:1px solid var(--line);padding:24px 0;margin-bottom:34px;}
  .reader-overview p {font-size:1rem;color:var(--muted);line-height:1.9;margin:12px 0 14px;}
  @media (hover:hover) and (pointer:fine) {
    .article-card:hover {background:var(--surface);}
    .article-card:hover h3 {color:var(--accent);}
  }
  @media (max-width:850px) {
    .article-card {grid-template-columns:120px minmax(0,1fr);gap:12px 22px;}
    .article-card .journal-card-cta {grid-column:2;}
  }
  @media (max-width:600px) {
    .article-card {grid-template-columns:minmax(0,1fr);padding:25px 4px;gap:8px;}
    .article-date {font-size:.8rem;padding-top:0;}
    .article-card h3 {font-size:1.22rem;}
    .article-card-excerpt {font-size:.95rem;line-height:1.9;}
    .article-card .journal-card-cta {grid-column:1;}
    .reader-overview {padding:20px 0;}
  }
  @media (prefers-reduced-motion:reduce) {.article-card {transition:none;}}
  .race-spotlight {position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:480px;border:1px solid var(--line);border-radius:20px;background:var(--surface-raised);padding:clamp(24px,3vw,44px);}
  .race-spotlight-top {display:flex;justify-content:space-between;align-items:center;gap:14px;}
  .race-format-tag {font-size:.8rem;letter-spacing:.025em;color:var(--muted);line-height:1.5;}
  .race-spotlight .race-format-tag {border:1px solid var(--line);border-radius:100px;padding:6px 12px;color:var(--text);}
  .race-spotlight .eyebrow {font-size:.75rem;color:var(--muted);}
  .race-spotlight-photo {width:100%;background:transparent;}
  .race-feature-date {color:var(--muted);font-size:.875rem;margin-bottom:14px;}
  .race-spotlight h3 {font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.5;letter-spacing:-.025em;max-width:24ch;}
  .race-feature-result {display:block;margin-top:24px;font:400 clamp(2.6rem,5.2vw,5rem)/1.15 "SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:-.075em;font-variant-numeric:tabular-nums;}
  .race-feature-metrics {display:flex;gap:30px;margin-top:28px;}
  .race-feature-metrics div {display:flex;flex-direction:column;gap:5px;}
  .race-feature-metrics strong {font-size:1.1rem;font-weight:500;font-variant-numeric:tabular-nums;}
  .race-feature-metrics span,.race-feature-link {font-size:.8rem;color:var(--muted);}
  .race-feature-link {margin-top:18px;}
  .race-highlights {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;align-content:stretch;}
  .race-highlight {display:flex;flex-direction:column;justify-content:center;gap:10px;border-top:1px solid var(--line);padding:22px 8px;min-width:0;border-radius:4px;transition:background-color 160ms ease-out;}
  .race-highlight:last-child:nth-child(odd) {grid-column:1/-1;}
  .race-highlight-heading {display:flex;flex-direction:column;gap:4px;}
  .race-highlight .race-format-tag {font-size:1rem;color:var(--text);}
  .race-highlight-context {font-size:.75rem;line-height:1.5;color:var(--muted);}
  .race-highlight-result {font:400 clamp(1.5rem,2.3vw,2.3rem)/1.2 "SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:-.065em;font-variant-numeric:tabular-nums;}
  .race-highlight-name {font-size:.8rem;line-height:1.6;color:var(--muted);}
  .race-showcase-footer {display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:32px;}
  .race-showcase-footer p {font-size:.875rem;color:var(--muted);line-height:1.7;max-width:42ch;}
  .race-archive-link {flex-shrink:0;}
  .race-archive-main {padding-top:150px;}
  .race-back-link {display:inline-flex;gap:10px;align-items:center;font-size:.875rem;color:var(--muted);padding:12px 0;min-height:44px;}
  .race-archive-heading {padding:40px 0 48px;}
  .race-archive-heading h1 {font-size:clamp(3rem,6vw,6rem);letter-spacing:-.055em;line-height:1.25;margin-top:20px;animation:none;}
  .race-archive-intro {max-width:48ch;color:var(--muted);margin-top:26px;font-size:1.05rem;line-height:1.8;}
  .race-archive-controls {position:sticky;top:var(--race-header-bottom,110px);z-index:5;background:var(--bg);padding:18px 0;border-block:1px solid var(--line);}
  .race-filters {display:flex;flex-wrap:wrap;gap:8px;}
  .race-filter {display:inline-flex;align-items:center;justify-content:center;gap:12px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:11px 17px;min-height:44px;font:inherit;font-size:.875rem;line-height:1.3;cursor:pointer;transition:background-color 160ms ease-out,color 160ms ease-out;}
  .race-filter[aria-pressed="true"] {background:var(--button-bg);color:var(--button-text);border-color:var(--button-bg);}
  .race-filter-count {font-size:.75rem;font-variant-numeric:tabular-nums;opacity:.65;}
  .race-filter:active {transform:scale(.97);}
  .race-archive-summary {display:flex;justify-content:space-between;gap:18px;padding:24px 0;color:var(--muted);font-size:.875rem;line-height:1.6;}
  .race-archive-best {color:var(--text);font-variant-numeric:tabular-nums;}
  .race-year {margin:18px 0 64px;}
  .race-year-heading {display:flex;align-items:baseline;gap:16px;margin-bottom:18px;}
  .race-year-heading h2 {font-size:clamp(2rem,3vw,2.8rem);letter-spacing:-.045em;font-weight:500;}
  .race-year-heading span {font-size:.8rem;color:var(--muted);}
  .archive-race {border-top:1px solid var(--line);}
  .archive-race:last-child {border-bottom:1px solid var(--line);}
  .archive-race-summary {display:grid;grid-template-columns:90px minmax(0,1fr) auto 24px;gap:24px;align-items:center;list-style:none;cursor:pointer;padding:25px 8px;transition:background-color 160ms ease-out;}
  .archive-race-summary::-webkit-details-marker {display:none;}
  .archive-race-date {font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums;}
  .archive-race-title {min-width:0;}
  .archive-race-title h3 {font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.6;margin-top:5px;overflow-wrap:anywhere;}
  .archive-race-course {font-size:.8rem;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums;}
  .archive-race-result {font:400 clamp(1.2rem,2vw,1.9rem)/1.3 "SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .archive-race-arrow {font-size:1.3rem;color:var(--muted);text-align:right;}
  .archive-race[open] .archive-race-arrow {transform:rotate(90deg);}
  .archive-race[open] .archive-race-summary {background:var(--surface);}
  .archive-race-detail {padding:28px 30px 36px;margin-bottom:16px;background:var(--surface);border-radius:0 0 12px 12px;}
  .archive-record-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
  .archive-record-metrics div {display:flex;flex-direction:column;gap:9px;}
  .archive-record-metrics dt,.archive-media-empty {font-size:.8rem;color:var(--muted);}
  .archive-record-metrics dd {font-size:1rem;font-variant-numeric:tabular-nums;}
  .archive-media-empty {margin-top:28px;line-height:1.8;}
  .archive-record-body {font-size:1rem;line-height:1.9;margin-top:26px;white-space:pre-line;}
  .race-archive-footer {border-top:1px solid var(--line);padding:34px 0 60px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:.8rem;color:var(--muted);}
  @media (hover:hover) and (pointer:fine) {
    .race-highlight:hover,.archive-race-summary:hover {background:var(--surface);}
    .race-filter:not([aria-pressed="true"]):hover {background:var(--surface);color:var(--text);}
  }
  @media (max-width:850px) {
    .race-showcase {grid-template-columns:1fr;}
    .race-spotlight {min-height:440px;}
    .race-highlights {gap:6px 20px;}
    .race-showcase-footer {align-items:flex-start;flex-direction:column;}
  }
  @media (max-width:600px) {
    .race-overview {justify-content:space-between;gap:14px;padding-top:22px;}
    .race-overview-stat strong {font-size:1.65rem;}
    .race-overview-stat span {font-size:.75rem;}
    .race-spotlight {padding:25px;min-height:430px;gap:36px;}
    .race-spotlight h3 {font-size:1.55rem;}
    .race-feature-result {font-size:2.8rem;}
    .race-highlight {padding:20px 5px;}
    .race-highlight-result {font-size:1.55rem;}
    .race-archive-main {padding-top:52px;}
    .race-archive-heading {padding:26px 0 32px;}
    .race-archive-heading h1 {font-size:2.8rem;}
    .race-archive-intro {font-size:1rem;margin-top:18px;}
    .race-archive-controls {padding:14px 0;}
    .race-filters {gap:7px;}
    .race-filter {font-size:.8rem;padding:10px 13px;gap:9px;}
    .race-archive-summary {flex-direction:column;gap:4px;}
    .archive-race-summary {grid-template-columns:minmax(0,1fr) auto 16px;gap:8px 16px;padding:22px 3px;}
    .archive-race-date {grid-column:1/-1;font-size:.8rem;}
    .archive-race-title h3 {font-size:1.05rem;}
    .archive-race-result {font-size:1.22rem;}
    .archive-race-arrow {font-size:1.1rem;}
    .archive-race-detail {padding:22px 18px 28px;}
    .archive-record-metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
    .archive-record-metrics dd {font-size:.875rem;}
    .race-archive-footer {flex-wrap:wrap;}
  }
  @media (prefers-reduced-motion:reduce) {
    .race-filter,.race-highlight,.archive-race-summary {transition:none;}
  }
}