:root {
  --color-surface: #2e2c2f;
  --color-surface-alt: #3d3a3e;
  --color-surface-deep: #4f4c50;
  --color-ink: #d1cad3;
  --color-ink-soft: #a296a6;
  --color-ink-muted: #847689;
  --color-line: #4b484d;
  --color-primary: #b256d2;
  --color-primary-ink: #161118;
  --color-primary-soft: #403246;
  --color-accent: #c0e21d;
  --color-accent-ink: #161118;
  --color-highlight: #484d2c;
  --color-focus: #c8ef10;
  --color-contrast-surface: #f2f1f2;
  --color-contrast-ink: #373338;
  --color-contrast-line: #c9c7c9;
  --color-contrast-accent: #64760f;
  --overlay-scrim: linear-gradient(180deg, rgba(242, 241, 242, 0.35) 0%, rgba(242, 241, 242, 0.72) 55%, rgba(242, 241, 242, 0.92) 100%);
  --font-heading: STZhongsong, "Source Han Serif SC", "Songti SC", SimSun, serif;
  --font-body: "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 10.1px;
  --text-sm: 14.3px;
  --text-base: 17px;
  --text-lg: 24.0px;
  --text-xl: 34.0px;
  --text-2xl: 48.1px;
  --text-3xl: 68.0px;
  --text-4xl: 96.1px;
  --text-display: clamp(39px, 8.0vw, 102px);
  --text-figure: clamp(32px, 5.7vw, 73px);
  --weight-heading: 690;
  --weight-body: 400;
  --leading-body: 1.77;
  --leading-heading: 1.27;
  --tracking-heading: 0.022em;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 13px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 2px;
  --shadow-1: 0 6px 18px rgba(209, 202, 211, 0.08);
  --shadow-2: 0 18px 44px rgba(209, 202, 211, 0.14);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --container: 1040px;
  --measure: 62ch;
  --gutter: 32px;
  --section-y: 101px;
  --section-y-lg: 141px;
}

/* ============ reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color 200ms ease-out, background-color 200ms ease-out; }
img, svg, video { max-width: 100%; display: block; height: auto; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 120px; }
::selection { background-color: var(--color-primary); color: var(--color-primary-ink); }
:focus-visible { outline: var(--border-thick) solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ============ containers ============ */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.main-content { display: block; min-height: 40vh; }
.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: var(--space-6); }
.section--alt { background-color: var(--color-surface-alt); }
.section--deep { background-color: var(--color-surface-deep); }
.section--contrast { background-color: var(--color-contrast-surface); color: var(--color-contrast-ink); border-block: var(--border-thin) solid var(--color-contrast-line); }
.section--contrast h2, .section--contrast h3, .section--contrast .section__title { color: var(--color-contrast-ink); }
.section--contrast .lede { color: color-mix(in srgb, var(--color-contrast-ink) 80%, var(--color-contrast-surface)); }
.section--contrast .rule { background-color: var(--color-contrast-line); }
.section__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; margin-bottom: var(--space-6); }
.section__title { grid-column: 1 / span 7; font-size: clamp(var(--text-xl), 4.6vw, var(--text-2xl)); }
.section__meta { grid-column: 9 / span 4; text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.08em; }
.display-title { font-family: var(--font-heading); font-size: var(--text-display); font-weight: var(--weight-heading); line-height: 1.05; letter-spacing: var(--tracking-heading); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; color: var(--color-ink-muted); }
.eyebrow::before { content: ""; width: 28px; height: var(--border-thin); background-color: var(--color-primary); }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-soft); max-width: var(--measure); }
.prose { max-width: var(--measure); color: var(--color-ink); }
.prose p + p { margin-top: var(--space-3); }
.prose h3 { margin-top: var(--space-6); font-size: var(--text-xl); }
.prose ul { margin-top: var(--space-2); }
.prose li { position: relative; padding-left: var(--space-3); margin-top: var(--space-1); }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: var(--border-thin); background-color: var(--color-primary); }
.rule { height: var(--border-thin); border: 0; margin: 0; background-color: var(--color-line); }
.tick { display: block; width: var(--border-thin); height: 12px; background-color: var(--color-line); }
.tick--tall { height: 20px; background-color: var(--color-ink-muted); }

/* ============ typography helpers ============ */
.figure-num { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-figure); line-height: 1; letter-spacing: -0.01em; color: var(--color-ink); }
.figure-num--accent { color: var(--color-accent); }
.data-num { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.01em; }

/* ============ buttons & tags ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  padding: 10px 18px; border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm); font-size: var(--text-sm); letter-spacing: 0.04em;
  color: var(--color-ink); background-color: transparent;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.btn--accent { background-color: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn--accent:hover { background-color: color-mix(in srgb, var(--color-accent) 82%, var(--color-contrast-surface)); }
.btn--primary { background-color: var(--color-primary); color: var(--color-primary-ink); border-color: var(--color-primary); }
.btn--ghost { background-color: transparent; color: var(--color-ink); border-color: var(--color-line); }
.btn--ghost:hover { background-color: var(--color-primary-soft); border-color: var(--color-primary); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-ink-soft); }
.tag--accent { background-color: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.tag--primary { background-color: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-ink); }
.tag--contrast { background-color: var(--color-contrast-surface); color: var(--color-contrast-ink); border-color: var(--color-contrast-line); }

/* ============ header ============ */
.site-header { position: sticky; top: 0; z-index: 60; background-color: var(--color-surface-alt); border-bottom: var(--border-thin) solid var(--color-line); }
.skip-link {
  position: absolute; left: var(--space-4); top: -80px; z-index: 90;
  padding: 10px 18px; background-color: var(--color-contrast-surface); color: var(--color-contrast-ink);
  border-radius: var(--radius-sm); font-size: var(--text-sm);
  transition: top 200ms ease-out;
}
.skip-link:focus { top: var(--space-2); }
.cmd-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); min-height: 70px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.brand__mark {
  display: grid; place-items: center; width: 40px; height: 40px;
  background-color: var(--color-primary); color: var(--color-primary-ink);
  border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-heading);
}
.brand__text { display: grid; gap: 2px; }
.brand__name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); color: var(--color-ink); }
.brand__line { font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.04em; }
.brand:hover .brand__name { color: var(--color-accent); }
.season-strip {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding-inline: var(--space-3); border-inline: var(--border-thin) solid var(--color-line);
  min-height: 40px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.08em;
}
.season-strip__year { color: var(--color-ink-soft); }
.season-strip__ticks { display: flex; align-items: flex-end; gap: 5px; }
.season-strip__ticks .tick:nth-child(3n) { height: 20px; background-color: var(--color-ink-muted); }
.season-strip__note { white-space: nowrap; }
.cmd-meta { display: flex; align-items: center; gap: var(--space-2); }
.status-bar {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 6px 14px; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--color-ink-soft); white-space: nowrap;
}
.status-bar__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background-color: var(--color-accent); }
.nav-toggle {
  display: none; align-items: center; gap: var(--space-1);
  padding: 8px 12px; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--color-ink-soft);
}
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars i { display: block; width: 18px; height: var(--border-thin); background-color: currentColor; }
.nav-toggle[aria-expanded="true"] { background-color: var(--color-contrast-surface); color: var(--color-contrast-ink); border-color: var(--color-contrast-line); }
.site-nav { background-color: var(--color-surface); border-top: var(--border-thin) solid var(--color-line); }
.nav-list { display: flex; flex-wrap: wrap; }
.nav-item { display: flex; }
.nav-link {
  display: flex; align-items: baseline; gap: var(--space-1);
  padding: 14px 18px; border-right: var(--border-thin) solid var(--color-line);
  font-size: var(--text-sm); color: var(--color-ink-soft);
}
.nav-item:first-child .nav-link { border-left: var(--border-thin) solid var(--color-line); }
.nav-link__idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.06em; }
.nav-link__label { letter-spacing: 0.02em; }
.nav-link:hover { background-color: var(--color-primary-soft); color: var(--color-ink); }
.nav-link[aria-current="page"] { background-color: var(--color-contrast-surface); color: var(--color-contrast-ink); }
.nav-link[aria-current="page"] .nav-link__idx { color: var(--color-contrast-accent); }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--border-thick); background-color: transparent; pointer-events: none; }
.scroll-progress__bar { display: block; width: 0; height: 100%; background-color: var(--color-accent); transition: width 120ms linear; }

/* ============ grid ============ */
.grid { display: grid; gap: var(--gutter); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* ============ breadcrumbs ============ */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding-block: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.06em; }
.breadcrumbs a:hover { color: var(--color-ink); }
.breadcrumbs__sep { color: var(--color-line); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink-soft); }

/* ============ panels ============ */
.panel {
  position: relative; padding: var(--space-3);
  background-color: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: border-color 220ms ease-out, background-color 220ms ease-out;
}
.panel:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-line)); }
.panel--deep { background-color: var(--color-surface-deep); }
.panel--contrast { background-color: var(--color-contrast-surface); color: var(--color-contrast-ink); border-color: var(--color-contrast-line); box-shadow: var(--shadow-2); }
.panel--contrast .panel__label { color: var(--color-contrast-accent); }
.panel--contrast .panel__title { color: var(--color-contrast-ink); }
.panel__label { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; color: var(--color-ink-muted); }
.panel__title { margin-top: var(--space-1); font-size: var(--text-lg); }

/* ============ catalog ============ */
.catalog { border-top: var(--border-thin) solid var(--color-line); }
.catalog__item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3); align-items: baseline;
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-line);
  transition: background-color 200ms ease-out;
}
.catalog__item::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background-color: var(--color-contrast-surface);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 240ms ease-out;
}
.catalog__item:hover { background-color: var(--color-primary-soft); }
.catalog__item:hover::before { transform: scaleY(1); }
.catalog__idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.08em; }
.catalog__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); color: var(--color-ink); }
.catalog__desc { margin-top: 6px; font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-soft); }
.catalog__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); white-space: nowrap; }
.catalog__item[hidden] { display: none; }

/* ============ media ============ */
.media { position: relative; display: block; overflow: hidden; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-md); background-color: var(--color-surface-deep); }
.media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.media--tall img { aspect-ratio: 4 / 5; }
.media__scrim { position: absolute; inset: 0; background: var(--overlay-scrim); pointer-events: none; }
.media__caption {
  position: absolute; left: 0; bottom: 0; padding: var(--space-1) var(--space-2);
  background-color: var(--color-contrast-surface); color: var(--color-contrast-ink);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  border-right: var(--border-thin) solid var(--color-contrast-line);
  border-top-right-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; max-width: 80%;
}
.media__placeholder {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  background-color: var(--color-surface-deep);
  color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em;
}

/* ============ data table ============ */
.table-scroll { overflow-x: auto; border-radius: var(--radius-sm); }
.data-table { width: 100%; border-top: var(--border-thin) solid var(--color-line); font-family: var(--font-mono); font-size: var(--text-xs); }
.data-table th { text-align: left; padding: var(--space-2); border-bottom: var(--border-thin) solid var(--color-line); color: var(--color-ink-muted); letter-spacing: 0.12em; font-weight: 600; white-space: nowrap; }
.data-table td { padding: var(--space-2); border-bottom: var(--border-thin) solid var(--color-line); color: var(--color-ink-soft); vertical-align: top; }
.data-table tbody tr:hover td { background-color: var(--color-surface-alt); }
.data-table tr.is-key td { background-color: var(--color-highlight); color: var(--color-ink); }

/* ============ filter bar ============ */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding-bottom: var(--space-2); border-bottom: var(--border-thin) solid var(--color-line); }
.filter-btn {
  padding: 7px 14px; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--color-ink-soft);
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.filter-btn:hover { background-color: var(--color-primary-soft); color: var(--color-ink); }
.filter-btn[aria-pressed="true"] { background-color: var(--color-contrast-surface); color: var(--color-contrast-ink); border-color: var(--color-contrast-surface); }
.filter-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.06em; }

/* ============ toc ============ */
.toc { position: sticky; top: 104px; }
.toc__title { margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; color: var(--color-ink-muted); }
.toc__link { display: block; padding: 6px 0 6px var(--space-2); border-left: var(--border-thin) solid var(--color-line); font-size: var(--text-sm); color: var(--color-ink-muted); }
.toc__link:hover { color: var(--color-ink); }
.toc__link.is-active { color: var(--color-ink); border-left-color: var(--color-primary); background-color: var(--color-primary-soft); }

/* ============ motion ============ */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 320ms ease-out, transform 320ms ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.is-in { animation: item-in 280ms ease-out both; }
.diagonal { position: relative; padding-block: var(--space-6); }
.diagonal__line { position: absolute; left: 0; right: 0; top: 50%; height: var(--border-thin); background-color: var(--color-line); transform: rotate(-2.2deg); transform-origin: left center; }
.diagonal__line::after { content: ""; position: absolute; inset: 0; background-color: var(--color-accent); transform: scaleX(var(--progress, 0)); transform-origin: left center; transition: transform 200ms linear; }
.diagonal__nodes { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.diagonal__node { padding-top: var(--space-3); border-top: var(--border-thin) solid var(--color-line); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); }
.diagonal__node:nth-child(even) { transform: translateY(10px); }
.to-top {
  position: fixed; right: var(--space-3); bottom: var(--space-3); z-index: 70;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt); color: var(--color-ink-soft);
  box-shadow: var(--shadow-2); opacity: 0; visibility: hidden;
  transition: opacity 240ms ease-out, visibility 240ms ease-out, background-color 200ms ease-out, color 200ms ease-out;
}
.to-top[data-show] { opacity: 1; visibility: visible; }
.to-top:hover { background-color: var(--color-contrast-surface); color: var(--color-contrast-ink); border-color: var(--color-contrast-line); }

/* ============ footer ============ */
.site-footer { margin-top: var(--section-y); background-color: var(--color-surface-alt); border-top: var(--border-thin) solid var(--color-line); }
.site-footer .wrap { padding-block: var(--space-6) var(--space-3); }
.footer-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); }
.footer-brand__mark { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); color: var(--color-ink); }
.footer-standfirst { max-width: var(--measure); font-size: var(--text-sm); color: var(--color-ink-soft); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); border-top: var(--border-thin) solid var(--color-line); padding-top: var(--space-4); }
.footer-col { padding-right: var(--space-2); }
.footer-col__title { font-size: var(--text-lg); letter-spacing: var(--tracking-heading); color: var(--color-ink); }
.footer-tick { display: block; width: 32px; height: var(--border-thick); margin-block: var(--space-2); background-color: var(--color-primary); }
.footer-list li { padding-block: 5px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.footer-list a:hover { color: var(--color-ink); }
.footer-list--plain li { color: var(--color-ink-muted); }
.footer-contact { display: grid; gap: 4px; }
.footer-contact p { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.9; color: var(--color-ink-muted); word-break: break-word; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-3); border-top: var(--border-thin) solid var(--color-line); }
.footer-bottom__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.06em; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .season-strip__note { display: none; }
}
@media (max-width: 900px) {
  .cmd-bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); }
  .season-strip { display: none; }
  .status-bar { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav { max-height: 0; overflow: hidden; transition: max-height 280ms ease-out; }
  .site-nav[data-open] { max-height: 70vh; overflow-y: auto; }
  .nav-list { flex-direction: column; }
  .nav-link { border-right: 0; border-top: var(--border-thin) solid var(--color-line); padding: 14px 4px; }
  .nav-item:first-child .nav-link { border-left: 0; }
  .section__head { grid-template-columns: 1fr; align-items: start; }
  .section__title, .section__meta { grid-column: 1 / -1; text-align: left; }
  .grid--3, .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .grid--12 > [class^="col-"] { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { position: static; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: var(--space-3); }
  .brand__line { display: none; }
  .brand__mark { width: 34px; height: 34px; font-size: var(--text-base); }
  .brand__name { font-size: var(--text-base); }
  .btn { padding: 9px 14px; }
  .catalog__item { grid-template-columns: auto minmax(0, 1fr); }
  .catalog__meta { grid-column: 2 / 3; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-top { flex-direction: column; }
  .diagonal__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .diagonal__line::after { transform: scaleX(1); }
  .filter-btn, .scroll-progress__bar, .to-top { transition: none; }
}