/*
 * Whole-site visual system.
 * The homepage hero keeps its existing art direction; everything after it,
 * plus every inner route, shares one light paper / sage editorial palette.
 */

:root {
  --global-shell: 1240px;
  --theme-paper: #f7f6f1;
  --theme-paper-alt: #f0f2ec;
  --theme-surface: #fffefa;
  --theme-surface-soft: #f4f4ee;
  --theme-ink: #26352f;
  --theme-text: #4f5d56;
  --theme-muted: #748079;
  --theme-line: #dcded6;
  --theme-line-strong: #bcc4ba;
  --theme-sage: #7f9f72;
  --theme-sage-deep: #647a66;
  --theme-sage-soft: #edf2e8;
  --theme-lime: #b7cb8a;
  --theme-warm: #a66f4c;
  --theme-warm-soft: #f2e9e1;
  --theme-shadow: 0 18px 46px rgba(47, 61, 53, .08);
}

html[data-theme="dark"] {
  --theme-paper: #101612;
  --theme-paper-alt: #151d18;
  --theme-surface: #1a231d;
  --theme-surface-soft: #202a23;
  --theme-ink: #edf4ef;
  --theme-text: #c6d1c9;
  --theme-muted: #96a49b;
  --theme-line: #344139;
  --theme-line-strong: #536359;
  --theme-sage: #9bb58f;
  --theme-sage-deep: #b1c8a7;
  --theme-sage-soft: #253229;
  --theme-lime: #b6d38b;
  --theme-warm: #d39772;
  --theme-warm-soft: #352a23;
  --theme-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

/* Keep the existing homepage first screen intact. The continuation already
   uses the same tokens; this simply prevents later sections drifting away. */
html[data-theme] body[data-page="home"] {
  --home-green: var(--theme-sage);
  --home-green-deep: var(--theme-sage-deep);
  --home-ink: var(--theme-ink);
  --home-paper: var(--theme-paper);
  --home-paper-deep: var(--theme-sage-soft);
  --home-soft-green: var(--theme-sage-soft);
}

html[data-theme] body[data-page="home"] :is(.home-news, .home-tools, .home-collaboration) {
  color: var(--theme-ink);
  background: var(--theme-paper);
}

html[data-theme] body[data-page="home"] .home-resources { background: var(--theme-sage-soft); }

/* Canonical tokens for every inner route. Page-specific CSS remains free to
   express hierarchy and interaction, but not a competing blue/purple/dark
   theme. */
html[data-theme] body:not([data-page="home"]) {
  --paper: var(--theme-paper);
  --paper-2: var(--theme-paper-alt);
  --surface: var(--theme-surface);
  --surface-soft: var(--theme-surface-soft);
  --surface-alpha: rgba(255, 254, 250, .96);
  --heading: var(--theme-ink);
  --ink: var(--theme-ink);
  --ink-2: var(--theme-text);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --muted-2: #879189;
  --line: var(--theme-line);
  --line-strong: var(--theme-line-strong);
  --grid-line: rgba(100, 122, 102, .055);
  --success: var(--theme-sage-deep);
  --lime: var(--theme-lime);
  --lime-strong: var(--theme-sage);
  --lime-soft: var(--theme-sage-soft);
  --blue: #849b91;
  --orange: var(--theme-warm);

  --ref-green: var(--theme-sage);
  --ref-green-deep: var(--theme-sage-deep);
  --ref-green-soft: var(--theme-sage-soft);
  --ref-lime: var(--theme-lime);
  --ref-paper: var(--theme-paper);
  --ref-surface: var(--theme-surface);
  --ref-ink: var(--theme-ink);
  --ref-text: var(--theme-text);
  --ref-muted: var(--theme-muted);
  --ref-line: var(--theme-line);
  --ref-line-strong: var(--theme-line-strong);

  --inner-paper: var(--theme-paper);
  --inner-paper-2: var(--theme-paper-alt);
  --inner-surface: var(--theme-surface);
  --inner-ink: var(--theme-ink);
  --inner-ink-2: var(--theme-text);
  --inner-muted: var(--theme-text);
  --inner-faint: var(--theme-muted);
  --inner-line: var(--theme-line);
  --inner-line-strong: var(--theme-line-strong);
  --inner-accent: var(--theme-warm);
  --inner-accent-soft: var(--theme-warm-soft);
  --inner-green: var(--theme-sage-deep);
  --inner-green-soft: var(--theme-sage-soft);
  --inner-blue: #718b80;

  --news-paper: var(--theme-paper);
  --news-surface: var(--theme-surface);
  --news-ink: var(--theme-ink);
  --news-muted: var(--theme-text);
  --news-faint: var(--theme-muted);
  --news-line: var(--theme-line);
  --news-line-strong: var(--theme-line-strong);
  --news-copper: var(--theme-warm);
  --news-green: var(--theme-sage-deep);
  --news-green-soft: var(--theme-sage-soft);
  --news-blue: #718b80;

  --resource-paper: var(--theme-paper);
  --resource-panel: var(--theme-surface);
  --resource-panel-strong: var(--theme-surface);
  --resource-ink: var(--theme-ink);
  --resource-muted: var(--theme-text);
  --resource-line: var(--theme-line);
  --resource-line-strong: var(--theme-line-strong);
  --resource-green: var(--theme-sage-deep);
  --resource-green-2: var(--theme-sage);
  --resource-lime: var(--theme-lime);
  --resource-orange: var(--theme-warm);

  --service-paper: var(--theme-paper);
  --service-surface: var(--theme-surface);
  --service-ink: var(--theme-ink);
  --service-text: var(--theme-text);
  --service-muted: var(--theme-muted);
  --service-line: var(--theme-line);
  --service-line-strong: var(--theme-line-strong);
  --service-blue: #718b80;
  --service-blue-soft: var(--theme-sage-soft);
  --service-green: var(--theme-sage-deep);
  --service-lime: var(--theme-lime);
  --service-rust: var(--theme-warm);
  --service-rust-soft: var(--theme-warm-soft);

  --deep-paper: var(--theme-paper);
  --deep-surface: var(--theme-surface);
  --deep-ink: var(--theme-ink);
  --deep-text: var(--theme-text);
  --deep-muted: var(--theme-muted);
  --deep-line: var(--theme-line);
  --deep-line-strong: var(--theme-line-strong);
  --deep-sage: var(--theme-sage);
  --deep-sage-soft: var(--theme-sage-soft);
  --deep-rust: var(--theme-warm);
  --deep-forest: var(--theme-sage-soft);

  color-scheme: inherit;
  color: var(--theme-text);
  background: var(--theme-paper);
}

/* Map the bespoke workspaces into the same restrained family. */
html[data-theme] body[data-page="atlas"] {
  --atlas-blue: var(--theme-sage-deep);
  --atlas-blue-deep: #52695b;
  --atlas-cyan: #789a8d;
  --atlas-sand: #aa8a61;
  --atlas-coral: #b97a61;
  --atlas-paper: var(--theme-paper);
  --atlas-panel: var(--theme-surface);
  --atlas-line: var(--theme-line);
  --atlas-line-strong: var(--theme-line-strong);
  --atlas-ink: var(--theme-ink);
  --atlas-muted: var(--theme-muted);

  --record-blue: var(--theme-sage-deep);
  --record-blue-deep: #52695b;
  --record-cyan: #789a8d;
  --record-paper: var(--theme-paper);
  --record-panel: var(--theme-surface);
  --record-soft: var(--theme-sage-soft);
  --record-line: var(--theme-line);
  --record-line-strong: var(--theme-line-strong);
  --record-ink: var(--theme-ink);
  --record-muted: var(--theme-muted);
}

html[data-theme] body[data-page="contact"] {
  --contact-bg: var(--theme-paper);
  --contact-paper: var(--theme-surface);
  --contact-paper-2: var(--theme-paper-alt);
  --contact-ink: var(--theme-ink);
  --contact-text: var(--theme-text);
  --contact-muted: var(--theme-muted);
  --contact-line: var(--theme-line);
  --contact-line-strong: var(--theme-line-strong);
  --contact-accent: var(--theme-sage-deep);
  --contact-accent-soft: var(--theme-sage-soft);
}

html[data-theme] body[data-page="agriculture"] {
  --agri-bg: var(--theme-paper);
  --agri-paper: var(--theme-surface);
  --agri-paper-2: var(--theme-paper-alt);
  --agri-ink: var(--theme-ink);
  --agri-text: var(--theme-text);
  --agri-muted: var(--theme-muted);
  --agri-line: var(--theme-line);
  --agri-strong-line: var(--theme-line-strong);
  --stage-accent: var(--theme-warm);
}

html[data-theme] body.software-center-page {
  --archive-bg: var(--theme-paper);
  --archive-paper: var(--theme-surface);
  --archive-paper-2: var(--theme-paper-alt);
  --archive-ink: var(--theme-ink);
  --archive-text: var(--theme-text);
  --archive-muted: var(--theme-muted);
  --archive-line: var(--theme-line);
  --archive-line-strong: var(--theme-line-strong);
  --archive-blue: var(--theme-sage-deep);
  --archive-blue-soft: var(--theme-sage-soft);
}

html[data-theme] body[data-page="resources"] {
  --directory-paper: var(--theme-paper);
  --directory-panel: var(--theme-surface);
  --directory-soft: var(--theme-paper-alt);
  --directory-line: var(--theme-line);
  --directory-line-strong: var(--theme-line-strong);
  --directory-ink: var(--theme-ink);
  --directory-muted: var(--theme-muted);
  --directory-blue: #718b80;
  --directory-red: var(--theme-warm);
  --directory-gold: #9b825c;
}

html[data-theme] .standard-record-page {
  --record-ink: var(--theme-ink);
  --record-text: var(--theme-text);
  --record-muted: var(--theme-muted);
  --record-accent: var(--theme-sage);
  --record-accent-soft: var(--theme-sage-soft);
  --record-warm: var(--theme-warm);
  --record-line: var(--theme-line);
  --record-line-strong: var(--theme-line-strong);
  --record-surface: var(--theme-surface);
  --record-paper: var(--theme-paper);
}

html[data-theme] body[data-studio] {
  --studio-accent: var(--theme-sage-deep);
  --studio-accent-rgb: 100, 122, 102;
  --studio-soft: var(--theme-sage-soft);
  --studio-ink: var(--theme-ink);
}

html[data-theme] body[data-studio="plotting"] {
  --studio-accent: var(--theme-warm);
  --studio-accent-rgb: 166, 111, 76;
  --studio-soft: var(--theme-warm-soft);
}

html[data-theme] body[data-studio="document"] {
  --studio-accent: var(--theme-sage-deep);
  --studio-accent-rgb: 100, 122, 102;
  --studio-soft: var(--theme-sage-soft);
}

/* Header and footer use the same light surfaces on every route. Large solid
   green bars are intentionally removed; sage is used as a fine accent only. */
html[data-theme] body:not([data-page="home"]) .site-header,
html[data-theme] body:not([data-page="home"]) .site-header.is-scrolled {
  border-bottom: 1px solid var(--theme-line) !important;
  color: var(--theme-ink) !important;
  background: color-mix(in srgb, var(--theme-surface) 96%, transparent) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-ink) 7%, transparent) !important;
}

html[data-theme] body:not([data-page="home"]) :is(.brand-copy strong, .nav-primary, .nav-expand, .header-icon, .menu-toggle) {
  color: var(--theme-ink) !important;
}

html[data-theme] body:not([data-page="home"]) .brand-copy small { color: var(--theme-muted) !important; }
html[data-theme] body:not([data-page="home"]) :is(.nav-primary::after, .site-scroll-progress i) { background: var(--theme-sage) !important; }
html[data-theme] body .brand-mark {
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] body .brand-mark img {
  border-radius: 0 !important;
  object-fit: contain !important;
}

html[data-theme] body:not([data-page="home"]) .site-footer,
html[data-theme] body.deep-page .site-footer {
  color: var(--theme-muted) !important;
  border-top: 1px solid var(--theme-line) !important;
  background: var(--theme-paper-alt) !important;
}

html[data-theme] body .site-footer {
  color: var(--theme-muted) !important;
  border-top-color: var(--theme-line) !important;
  background: var(--theme-paper-alt) !important;
}

html[data-theme] body .site-footer :is(strong, b) { color: var(--theme-ink); }
html[data-theme] body .site-footer :is(p, a, span, small) { color: var(--theme-muted); }

html[data-theme] body:not([data-page="home"]) .site-footer :is(strong, b) { color: var(--theme-ink); }
html[data-theme] body:not([data-page="home"]) .site-footer :is(p, a, span, small) { color: var(--theme-muted); }
html[data-theme] body:not([data-page="home"]) .footer-main,
html[data-theme] body:not([data-page="home"]) .footer-bottom { border-color: var(--theme-line) !important; }

/* Replace legacy dark bands with quiet paper sections. Images remain images;
   only solid color containers and their inherited text colors are corrected. */
html[data-theme] body:not([data-page="home"]) :is(
  .cooperation-hero,
  .callout-band,
  .release-hero,
  .data-notes-hero,
  .data-note-caution,
  .resource-index-note,
  .resource-update-masthead,
  .resource-update-footnote,
  .analysis-method-note,
  .plotting-masthead,
  .document-transform-panel,
  .service-boundary-section,
  .tool-service-hero,
  .tool-process-section,
  .tool-service-start,
  .platform-boundary-section,
  .platform-service-start,
  .tool-launcher,
  .about-principles,
  .about-contact,
  .atlas-data-note
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line-strong) !important;
  background-color: var(--theme-paper-alt) !important;
}

html[data-theme] body:not([data-page="home"]) :is(
  .cooperation-hero,
  .callout-band,
  .release-hero,
  .data-notes-hero,
  .data-note-caution,
  .resource-index-note,
  .resource-update-masthead,
  .resource-update-footnote,
  .analysis-method-note,
  .plotting-masthead,
  .document-transform-panel,
  .service-boundary-section,
  .tool-service-hero,
  .tool-process-section,
  .tool-service-start,
  .platform-boundary-section,
  .platform-service-start,
  .tool-launcher,
  .about-principles,
  .about-contact,
  .atlas-data-note
) :is(h1, h2, h3, h4, strong, b, dt, dd) { color: var(--theme-ink) !important; }

html[data-theme] body:not([data-page="home"]) :is(
  .cooperation-hero,
  .callout-band,
  .release-hero,
  .data-notes-hero,
  .data-note-caution,
  .resource-index-note,
  .resource-update-masthead,
  .resource-update-footnote,
  .analysis-method-note,
  .plotting-masthead,
  .document-transform-panel,
  .service-boundary-section,
  .tool-service-hero,
  .tool-process-section,
  .tool-service-start,
  .platform-boundary-section,
  .platform-service-start,
  .tool-launcher,
  .about-principles,
  .about-contact,
  .atlas-data-note
) :is(p, li, small, span:not(.button-label)) { color: var(--theme-muted) !important; }

html[data-theme] body:not([data-page="home"]) :is(
  .cooperation-hero,
  .release-hero,
  .data-notes-hero,
  .resource-update-masthead,
  .plotting-masthead,
  .tool-service-hero,
  .tool-launcher
) :is(.news-breadcrumb, .service-breadcrumb, .studio-kicker, .release-eyebrow, .chapter-kicker, .section-index, .resource-update-kicker) {
  color: var(--theme-sage-deep) !important;
}

html[data-theme] body:not([data-page="home"]) :is(
  .cooperation-hero,
  .release-hero,
  .data-notes-hero,
  .resource-update-masthead,
  .plotting-masthead,
  .tool-service-hero,
  .tool-launcher
) :is(a, button) { border-color: var(--theme-line-strong); }

html[data-theme] .release-visual,
html[data-theme] .tool-hero-blueprint,
html[data-theme] .tool-launcher-stage,
html[data-theme] .document-transform-panel,
html[data-theme] .analysis-method-note {
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-surface) !important;
  box-shadow: none !important;
}

html[data-theme] .plot-hero-grid,
html[data-theme] .tool-launcher::before,
html[data-theme] .tool-launcher-backdrop,
html[data-theme] .resource-update-masthead::before { opacity: .18; }

html[data-theme] .document-transform-panel select { color: var(--theme-ink); background: var(--theme-surface); }

/* About keeps its full documentary hero image, but the following sections no
   longer jump into a dark theme. */
html[data-theme] .about-principle-index,
html[data-theme] .platform-boundary-grid {
  border-color: var(--theme-line-strong) !important;
}

html[data-theme] :is(.about-principle-index article, .platform-boundary-grid article) {
  border-color: var(--theme-line) !important;
}

html[data-theme] .about-button-light {
  color: var(--theme-ink);
  border-color: var(--theme-line-strong);
  background: var(--theme-surface);
}

html[data-theme] .about-reference-contact {
  color: var(--theme-text);
  border-top: 1px solid var(--theme-line);
  background: var(--theme-sage-soft);
}

html[data-theme] .about-reference-contact :is(h2, strong) { color: var(--theme-ink); }
html[data-theme] .about-reference-contact :is(p, small) { color: var(--theme-muted); }
html[data-theme] .about-reference-contact > div:first-child p { color: var(--theme-sage-deep); }
html[data-theme] .about-reference-rail a[aria-current="true"] span,
html[data-theme] .about-reference-rail a:hover span { color: var(--theme-sage-deep); }
html[data-theme] .about-reference-rail a[aria-current="true"] i { background: var(--theme-sage); }

html[data-theme] .about-reference-button.is-solid,
html[data-theme] .about-reference-button.is-light {
  color: var(--theme-ink);
  border-color: var(--theme-lime);
  background: var(--theme-lime);
}

html[data-theme] .about-reference-button:is(.is-solid, .is-light):hover {
  color: var(--theme-ink);
  border-color: var(--theme-sage);
  background: var(--theme-sage-soft);
}

html[data-theme] .tool-service-hero :is(.service-text-link-light, .service-breadcrumb-light, .service-breadcrumb-light a) {
  color: var(--theme-sage-deep) !important;
  border-color: var(--theme-sage) !important;
}

/* Primary controls stay clearly actionable without turning whole sections
   green. */
html[data-theme] body:not([data-page="home"]) :is(
  .standards-search button,
  .rp-search-submit,
  .rp-primary-action,
  .resource-command-search button,
  .contact-submit,
  .service-nav-cta,
  .service-button-lime,
  .tool-preview a,
  .archive-primary-link,
  .dataset-download-button
) {
  color: var(--theme-ink) !important;
  border-color: var(--theme-lime) !important;
  background: var(--theme-lime) !important;
}

html[data-theme] body:not([data-page="home"]) :is(
  .standards-search button,
  .rp-search-submit,
  .rp-primary-action,
  .resource-command-search button,
  .contact-submit,
  .service-nav-cta,
  .service-button-lime,
  .tool-preview a,
  .archive-primary-link,
  .dataset-download-button
):hover {
  color: var(--theme-ink) !important;
  border-color: var(--theme-sage) !important;
  background: var(--theme-sage-soft) !important;
}

html[data-theme] body:not([data-page="home"]) :is(
  .atlas-intro,
  .dataset-masthead,
  .atlas-workspace,
  .atlas-layers,
  .atlas-viewport,
  .atlas-inspector,
  .atlas-catalog,
  .field-cycle,
  .software-archive,
  .archive-hero,
  .archive-library,
  .contact-scene,
  .contact-form-section
) {
  border-color: var(--theme-line);
  background-color: var(--theme-paper) !important;
}

html[data-theme] body:not([data-page="home"]) :is(
  .atlas-stage,
  .atlas-panel,
  .dataset-table-wrap,
  .field-search,
  .archive-card,
  .contact-form,
  .studio-panel,
  .resource-update-card,
  .standard-record-main,
  .standards-detail
) {
  border-color: var(--theme-line-strong);
  background-color: var(--theme-surface);
  box-shadow: none;
}

/* A small warm accent is retained for status, sequence and caution labels;
   sage is limited to active rules and selection states. */
html[data-theme] body:not([data-page="home"]) :is(
  .section-index,
  .resource-update-card header span,
  .method-step::before,
  .dataset-section-label span,
  .atlas-stream-row > span
) { color: var(--theme-warm); }

html[data-theme] body:not([data-page="home"]) :is(
  [aria-current="page"],
  [aria-selected="true"],
  [aria-pressed="true"]
) { --focus-accent: var(--theme-sage); }

@media (max-width: 760px) {
  html[data-theme] body:not([data-page="home"]) :is(
    .data-note-caution,
    .resource-index-note .inner-container,
    .resource-update-footnote .inner-container
  ) { background: var(--theme-paper-alt); }
}

/* Global search stays on the current route. The layer deliberately uses the
   site's light paper system, so opening search never introduces a competing
   dark theme or a second page-like hero. */
.ui-icon-x { -webkit-mask-image: url("./icons/lucide/x.svg"); mask-image: url("./icons/lucide/x.svg"); }
.ui-icon-external-link { -webkit-mask-image: url("./icons/lucide/external-link.svg"); mask-image: url("./icons/lucide/external-link.svg"); }

body.site-search-open {
  overflow: hidden;
  padding-right: var(--site-search-scrollbar-width, 0px);
}

body.site-search-open .site-header {
  width: calc(100% - var(--site-search-scrollbar-width, 0px));
  transform: translateY(0) !important;
}

body[data-page="home"].site-search-open .site-header {
  right: var(--site-search-scrollbar-width, 0px);
}

.site-search-layer {
  position: fixed;
  z-index: 420;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(76px, 9vh, 112px) 24px 24px;
  color: var(--theme-text);
  color-scheme: light;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.site-search-layer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.site-search-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(38, 53, 47, .2);
  backdrop-filter: blur(8px) saturate(86%);
  cursor: default;
}

.site-search-dialog {
  position: relative;
  display: flex;
  width: min(980px, 100%);
  max-height: calc(100dvh - clamp(100px, 13vh, 144px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--theme-line-strong);
  border-top: 4px solid var(--theme-sage);
  border-radius: 4px;
  color: var(--theme-text);
  background: var(--theme-surface);
  box-shadow: 0 30px 80px rgba(38, 53, 47, .18);
  opacity: 0;
  transform: translateY(-14px) scale(.992);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.2,.75,.25,1);
}

.site-search-layer.is-open .site-search-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-search-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px;
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--theme-line);
  background: var(--theme-paper);
}

.site-search-heading p {
  margin: 0 0 7px;
  color: var(--theme-sage-deep);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .18em;
}

.site-search-heading h2 {
  margin: 0;
  color: var(--theme-ink);
  font-family: var(--ref-serif, "Noto Serif SC", "Songti SC", serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.site-search-heading > div > span {
  display: block;
  margin-top: 8px;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.6;
}

.site-search-close {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--theme-line-strong);
  border-radius: 50%;
  color: var(--theme-ink);
  background: var(--theme-surface);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.site-search-close:hover {
  color: var(--theme-sage-deep);
  border-color: var(--theme-sage);
  background: var(--theme-sage-soft);
  transform: rotate(3deg);
}

.site-search-form {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 24px 32px 0;
  padding: 0 16px;
  border: 1px solid var(--theme-line-strong);
  background: var(--theme-surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.site-search-form:focus-within {
  border-color: var(--theme-sage);
  box-shadow: 0 0 0 3px rgba(127, 159, 114, .14);
}

.site-search-form > .ui-icon {
  color: var(--theme-sage-deep);
}

.site-search-form input {
  width: 100%;
  height: 58px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--theme-ink);
  background: transparent;
  font: inherit;
  font-size: 16px;
}

.site-search-form input::placeholder {
  color: var(--theme-muted);
}

.site-search-form kbd {
  min-width: 28px;
  padding: 3px 7px;
  border: 1px solid var(--theme-line);
  color: var(--theme-muted);
  background: var(--theme-paper-alt);
  font: 600 11px/1.4 var(--font, sans-serif);
  text-align: center;
}

.site-search-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 20px 32px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--theme-line);
}

.site-search-controls > span {
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  white-space: nowrap;
}

.site-search-scopes {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.site-search-scopes button {
  position: relative;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--theme-text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.site-search-scopes button:hover {
  color: var(--theme-ink);
  border-color: var(--theme-line);
  background: var(--theme-paper-alt);
}

.site-search-scopes button[aria-pressed="true"] {
  color: var(--theme-ink);
  border-color: var(--theme-lime);
  background: var(--theme-sage-soft);
  font-weight: 650;
}

.site-search-status {
  margin: 0;
  padding: 15px 32px 11px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.4;
}

.site-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  min-height: 180px;
  padding: 0 32px 28px;
  overflow: auto;
  overscroll-behavior: contain;
}

.site-search-result {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 22px;
  align-items: start;
  gap: 14px;
  min-height: 104px;
  padding: 18px 10px 16px 0;
  border-top: 1px solid var(--theme-line);
  color: var(--theme-text);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, padding 160ms ease;
}

.site-search-result:hover,
.site-search-result:focus-visible {
  padding-right: 12px;
  padding-left: 12px;
  border-top-color: var(--theme-sage);
  color: var(--theme-ink);
  background: var(--theme-sage-soft);
  outline: 0;
}

.site-search-result > small {
  display: inline-grid;
  min-height: 25px;
  place-items: center;
  padding: 2px 7px;
  border: 1px solid var(--theme-line-strong);
  color: var(--theme-sage-deep);
  background: var(--theme-surface);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
}

.site-search-result > span:nth-child(2) {
  display: block;
  min-width: 0;
}

.site-search-result strong {
  display: block;
  overflow: hidden;
  color: var(--theme-ink);
  font-size: 15px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search-result > span:nth-child(2) > span {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.site-search-result-action {
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--theme-sage-deep);
}

.site-search-result-action .ui-icon {
  width: 15px;
  height: 15px;
}

.site-search-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 180px;
  align-content: center;
  justify-items: center;
  border-top: 1px solid var(--theme-line);
  color: var(--theme-muted);
  text-align: center;
}

.site-search-empty strong {
  color: var(--theme-ink);
  font-size: 17px;
}

.site-search-empty span {
  margin-top: 7px;
  font-size: 13px;
}

@media (max-width: 760px) {
  .site-search-layer {
    padding: 70px 10px 10px;
  }

  .site-search-dialog {
    max-height: calc(100dvh - 80px);
    border-radius: 2px;
  }

  .site-search-heading {
    gap: 18px;
    padding: 20px 18px 17px;
  }

  .site-search-heading h2 { font-size: 27px; }
  .site-search-heading > div > span { font-size: 12px; }
  .site-search-close { width: 38px; height: 38px; }

  .site-search-form {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    margin: 18px 18px 0;
    padding-inline: 13px;
  }

  .site-search-form input { height: 52px; font-size: 14px; }
  .site-search-form kbd { display: none; }

  .site-search-controls {
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 16px 18px 0;
    padding-bottom: 13px;
  }

  .site-search-scopes {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-search-scopes::-webkit-scrollbar { display: none; }
  .site-search-scopes button { flex: 0 0 auto; min-height: 32px; padding-inline: 12px; }
  .site-search-status { padding: 12px 18px 8px; }

  .site-search-results {
    grid-template-columns: 1fr;
    min-height: 150px;
    padding: 0 18px 22px;
  }

  .site-search-result {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    min-height: 92px;
    padding-block: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-search-layer,
  .site-search-dialog,
  .site-search-result,
  .site-search-close {
    transition: none !important;
  }
}

/* Search polish pass: one calm command surface, responsive density, and
   continuous motion between opening, filtering, browsing and closing. */
.site-search-layer {
  padding: clamp(54px, 7vh, 88px) clamp(16px, 3vw, 40px) 24px;
  background: rgba(247, 246, 241, .16);
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.site-search-layer.is-open { transition-delay: 0s; }

.site-search-scrim {
  background: rgba(38, 53, 47, .16);
  backdrop-filter: blur(14px) saturate(78%);
  opacity: 0;
  transition: opacity 360ms ease;
}

.site-search-layer.is-open .site-search-scrim { opacity: 1; }

.site-search-dialog {
  width: min(900px, 100%);
  max-height: calc(100dvh - clamp(78px, 10vh, 116px));
  border: 1px solid rgba(188, 196, 186, .9);
  border-top: 3px solid var(--theme-sage);
  border-radius: 18px;
  background: rgba(255, 254, 250, .985);
  box-shadow: 0 28px 90px rgba(38, 53, 47, .2), 0 2px 10px rgba(38, 53, 47, .06);
  opacity: 0;
  transform: translateY(-22px) scale(.974);
  transform-origin: 50% 10%;
  will-change: transform, opacity;
  transition: opacity 260ms ease, transform 460ms cubic-bezier(.16, 1, .3, 1);
}

.site-search-layer.is-open .site-search-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-search-heading {
  gap: 24px;
  padding: 24px 28px 17px;
  border-bottom: 0;
  background: transparent;
}

.site-search-heading p {
  margin-bottom: 5px;
  color: var(--theme-sage-deep);
  font-size: 10px;
  letter-spacing: .12em;
}

.site-search-heading h2 {
  font-size: clamp(28px, 3vw, 35px);
  line-height: 1.13;
}

.site-search-heading > div > span {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.site-search-close {
  width: 40px;
  height: 40px;
  border-color: var(--theme-line);
  background: var(--theme-paper);
  box-shadow: 0 4px 14px rgba(38, 53, 47, .05);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 300ms cubic-bezier(.16, 1, .3, 1), box-shadow 180ms ease;
}

.site-search-close:hover {
  transform: rotate(7deg) scale(1.04);
  box-shadow: 0 7px 18px rgba(38, 53, 47, .08);
}

.site-search-form {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0 28px;
  padding: 0 17px;
  border-color: var(--theme-line);
  border-radius: 13px;
  background: var(--theme-paper);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 5px 18px rgba(38, 53, 47, .035);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.site-search-form:focus-within {
  border-color: var(--theme-sage);
  background: var(--theme-surface);
  box-shadow: 0 0 0 4px rgba(127, 159, 114, .13), 0 12px 30px rgba(38, 53, 47, .07);
  transform: translateY(-1px);
}

.site-search-form input {
  height: 60px;
  font-size: 16px;
  font-weight: 520;
}

.site-search-form kbd {
  min-width: 30px;
  border-color: var(--theme-line-strong);
  border-radius: 6px;
  background: var(--theme-surface);
  box-shadow: 0 2px 0 rgba(38, 53, 47, .08);
}

.site-search-controls {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  margin: 15px 28px 0;
  padding-bottom: 13px;
  border-bottom-color: var(--theme-line);
}

.site-search-controls > span {
  font-size: 11px;
  letter-spacing: .06em;
}

.site-search-scopes { gap: 2px; }

.site-search-scopes button {
  min-height: 32px;
  padding: 5px 11px 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  transition: color 180ms ease, border-color 220ms ease, background 220ms ease;
}

.site-search-scopes button:hover {
  color: var(--theme-sage-deep);
  background: color-mix(in srgb, var(--theme-sage-soft) 48%, transparent);
}

.site-search-scopes button[aria-pressed="true"] {
  border-bottom-color: var(--theme-sage);
  color: var(--theme-ink);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.site-search-scopes button:focus-visible {
  outline: 0;
  color: var(--theme-ink);
  background: color-mix(in srgb, var(--theme-sage-soft) 58%, transparent);
  box-shadow: none;
}

.site-search-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 28px 6px;
}

.site-search-status {
  margin: 0;
  padding: 0;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 620;
}

.site-search-meta > span {
  color: var(--theme-muted);
  font-size: 10px;
  white-space: nowrap;
}

.site-search-results {
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 0 28px;
  min-height: 0;
  max-height: min(330px, 45dvh);
  padding: 0 28px 25px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(84, 111, 86, .62) rgba(221, 225, 216, .42);
  scrollbar-width: thin;
  transition: opacity 140ms ease, transform 180ms ease;
}

.site-search-results::-webkit-scrollbar { width: 7px; }
.site-search-results::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(221, 225, 216, .42);
}
.site-search-results::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(84, 111, 86, .62);
  background-clip: padding-box;
}

.site-search-shortcuts {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 0 7px;
  border-bottom: 1px solid var(--theme-line);
  background: rgba(255, 254, 250, .97);
  backdrop-filter: blur(10px);
}

.site-search-shortcuts > span {
  margin-right: 3px;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  white-space: nowrap;
}

.site-search-shortcuts a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 8px;
  border-bottom: 1px solid transparent;
  color: var(--theme-text);
  text-decoration: none;
  transition: color 170ms ease, border-color 190ms ease, background 190ms ease;
}

.site-search-shortcuts a:hover,
.site-search-shortcuts a:focus-visible {
  border-bottom-color: var(--theme-sage);
  color: var(--theme-ink);
  background: color-mix(in srgb, var(--theme-sage-soft) 46%, transparent);
  outline: 0;
}

.site-search-shortcuts a strong {
  font-size: 12px;
  font-weight: 680;
}

.site-search-shortcuts a > span:not(.ui-icon) {
  max-width: 88px;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search-shortcuts .ui-icon {
  width: 12px;
  height: 12px;
}

.site-search-results[data-count="1"] .site-search-result {
  grid-column: 1 / -1;
}

.site-search-results.is-updating {
  opacity: .48;
  transform: translateY(3px);
}

.site-search-result {
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 10px;
  min-height: 76px;
  align-self: start;
  padding: 14px 3px 13px;
  border: 0;
  border-bottom: 1px solid var(--theme-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: translateY(0);
  transition: color 180ms ease, border-color 200ms ease, background 220ms ease;
}

.site-search-results:not(.is-ready) .site-search-result {
  opacity: 0;
  transform: translateY(9px);
}

.site-search-results.is-ready .site-search-result {
  animation: site-search-result-in 420ms cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--search-result-index) * 36ms);
}

@keyframes site-search-result-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-search-result:hover,
.site-search-result:focus-visible {
  padding: 14px 3px 13px;
  border-color: var(--theme-sage);
  color: var(--theme-ink);
  background: color-mix(in srgb, var(--theme-sage-soft) 44%, transparent);
  box-shadow: none;
  outline: 0;
  transform: none;
}

.site-search-result:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(127, 159, 114, .36);
}

.site-search-result > small {
  min-height: 0;
  align-self: start;
  padding: 1px 0 0;
  border: 0;
  border-radius: 0;
  color: var(--theme-sage-deep);
  background: transparent;
  font-size: 10px;
  font-weight: 650;
}

.site-search-result strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

.site-search-result > span:nth-child(2) > span {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.55;
}

.site-search-result-action {
  color: var(--theme-muted);
  transition: color 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.site-search-result:hover .site-search-result-action,
.site-search-result:focus-visible .site-search-result-action {
  color: var(--theme-sage-deep);
  transform: translateX(3px);
}

.site-search-result-action .ui-icon {
  width: 16px;
  height: 16px;
}

.site-search-empty {
  min-height: 214px;
  border: 1px dashed var(--theme-line-strong);
  border-radius: 12px;
  background: var(--theme-paper);
  opacity: 1;
  transform: translateY(0);
}

.site-search-results:not(.is-ready) .site-search-empty {
  opacity: 0;
  transform: translateY(7px);
}

.site-search-results.is-ready .site-search-empty {
  animation: site-search-result-in 360ms cubic-bezier(.16, 1, .3, 1) backwards;
}

.site-search-layer.is-open :is(.site-search-heading, .site-search-form, .site-search-controls, .site-search-meta) {
  animation: site-search-section-in 480ms cubic-bezier(.16, 1, .3, 1) backwards;
}

.site-search-layer.is-open .site-search-form { animation-delay: 45ms; }
.site-search-layer.is-open .site-search-controls { animation-delay: 80ms; }
.site-search-layer.is-open .site-search-meta { animation-delay: 110ms; }

@keyframes site-search-section-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .site-search-layer { padding: 24px 18px; align-items: center; }
  .site-search-dialog { width: min(720px, 100%); max-height: calc(100dvh - 48px); }
  .site-search-results { grid-template-columns: 1fr; min-height: 0; max-height: min(390px, 48dvh); }
  .site-search-result { min-height: 74px; }
}

@media (max-width: 640px) {
  .site-search-layer { padding: 10px; }
  .site-search-dialog { max-height: calc(100dvh - 20px); border-radius: 14px; }
  .site-search-heading { gap: 14px; padding: 18px 17px 14px; }
  .site-search-heading h2 { font-size: 25px; }
  .site-search-heading > div > span { display: none; }
  .site-search-close { width: 36px; height: 36px; }
  .site-search-form { margin-inline: 16px; padding-inline: 14px; }
  .site-search-form input { height: 54px; font-size: 14px; }
  .site-search-controls { grid-template-columns: 1fr; gap: 8px; margin: 13px 16px 0; padding-bottom: 11px; }
  .site-search-scopes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .site-search-scopes::-webkit-scrollbar { display: none; }
  .site-search-scopes button { flex: 0 0 auto; }
  .site-search-meta { padding: 10px 16px 8px; }
  .site-search-meta > span { display: none; }
  .site-search-results { gap: 0; min-height: 0; max-height: min(420px, 52dvh); padding: 0 16px 18px; }
  .site-search-shortcuts {
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-search-shortcuts::-webkit-scrollbar { display: none; }
  .site-search-shortcuts a { flex: 0 0 auto; }
  .site-search-result { grid-template-columns: 36px minmax(0, 1fr) 18px; min-height: 72px; padding: 12px 2px; }
  .site-search-result:hover,
  .site-search-result:focus-visible { padding: 12px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-search-scrim,
  .site-search-dialog,
  .site-search-layer.is-open :is(.site-search-heading, .site-search-form, .site-search-controls, .site-search-meta),
  .site-search-results.is-ready :is(.site-search-result, .site-search-empty) {
    animation: none !important;
    transition: none !important;
  }

  .site-search-result,
  .site-search-empty { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Canonical shell and complete theme coverage

   The homepage first screen is the coordinate source of truth: a 68px shell,
   1240px centered container and 224 / fluid / 236 column grid. Inner and deep
   pages previously replaced all three values, which caused the visible jump
   between routes. Keep every desktop route on the same shell instead. */

@media (min-width: 1081px) {
  html body {
    --site-header-height: 68px !important;
  }

  html body.deep-page {
    --site-header-height: 68px !important;
  }

  html body .site-header,
  html body .header-inner {
    height: var(--site-header-height) !important;
  }

  html body .header-inner,
  html body.deep-page .header-inner,
  html body.about-studio-page .header-inner {
    width: min(calc(100% - 48px), var(--global-shell)) !important;
    grid-template-columns: 224px minmax(0, 1fr) 236px !important;
  }

  html body .brand,
  html body:not([data-page="home"]) .brand {
    gap: 11px;
  }

  html body .brand-mark,
  html body:not([data-page="home"]) .brand-mark,
  html body.deep-page .brand-mark {
    width: 36px;
    height: 36px;
  }

  html body .brand-copy strong,
  html body:not([data-page="home"]) .brand-copy strong,
  html body.deep-page .brand-copy strong {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 680;
    letter-spacing: .06em;
  }

  html body .brand-copy small,
  html body:not([data-page="home"]) .brand-copy small,
  html body.deep-page .brand-copy small {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
  }

  html body .main-nav,
  html body:not([data-page="home"]) .main-nav,
  html body.deep-page .main-nav {
    justify-self: stretch;
    gap: clamp(6px, .72vw, 12px);
    height: 100%;
  }

  html body .nav-primary,
  html body:not([data-page="home"]) .nav-primary,
  html body.deep-page .nav-primary {
    padding-inline: 10px;
    font-size: 15px;
    font-weight: 620;
    letter-spacing: .015em;
  }

  html body .nav-primary::after,
  html body:not([data-page="home"]) .nav-primary::after,
  html body.deep-page .nav-primary::after {
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
  }

  html body .header-actions,
  html body:not([data-page="home"]) .header-actions {
    justify-self: stretch;
    gap: 14px;
  }

  html body:not([data-page="home"]) .header-quick-actions,
  html body.deep-page .header-quick-actions {
    padding: 3px;
    border: 1px solid var(--theme-line) !important;
    border-radius: 12px;
    background: color-mix(in srgb, var(--theme-surface) 88%, transparent) !important;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--theme-ink) 4%, transparent) !important;
  }

  html body:not([data-page="home"]) .header-icon,
  html body.deep-page .header-icon {
    border-radius: 9px !important;
  }

  html body:not([data-page="home"]) .header-icon + .header-icon::before,
  html body.deep-page .header-icon + .header-icon::before {
    background: var(--theme-line) !important;
  }

  html body:not([data-page="home"]) .theme-toggle,
  html body.deep-page .theme-toggle {
    display: grid !important;
  }

  html body:not([data-page="home"]) .header-contact,
  html body.deep-page .header-contact {
    display: inline-flex !important;
  }
}

/* About uses the same 1240px document frame as every other primary page.
   The rail remains part of the design, but no longer pins the document to the
   viewport edge or makes the page wider than its neighbours. */
@media (min-width: 961px) {
  html body.about-studio-page {
    background: var(--theme-paper);
  }

  html body.about-studio-page .about-reference-layout {
    width: min(calc(100% - 48px), var(--global-shell));
    margin-inline: auto;
    border-inline: 1px solid var(--theme-line);
  }
}

/* Modern screen typography
   One native sans-serif stack now drives every route. The previous mixture of
   Songti, Times, Iowan and unavailable display fonts produced inconsistent
   fallbacks between macOS and Windows. Monospace remains reserved for real
   code/data notation. */
:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --font: var(--font-body);
  --home-serif: var(--font-display);
  --ref-serif: var(--font-display);
  --ref-sans: var(--font-body);
  --deep-serif: var(--font-display);
  --deep-sans: var(--font-body);
  --knowledge-serif: var(--font-body);
}

html body {
  font-family: var(--font-body) !important;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

html body :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display) !important;
  font-style: normal;
  text-wrap: balance;
}

html body :where(h1, h2) {
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

html body :where(h3, h4, h5, h6) {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body :where(p, li, dt, dd, blockquote, figcaption, label, summary, button, input, textarea, select, small) {
  font-family: var(--font-body) !important;
}

html body :is(.brand-copy strong, .footer-brand strong) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

html body :where(code, pre, kbd, samp) {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

html body :where(input, textarea, select) {
  font-size: max(14px, 1em);
}

@media (max-width: 680px) {
  html body :where(input, textarea, select) {
    font-size: 16px !important;
  }

  html body :where([class*="kicker"], [class*="eyebrow"], [class*="overline"]) {
    letter-spacing: .06em !important;
  }
}

@media (min-width: 1081px) {
  html body .footer-main,
  html body .footer-bottom,
  html body.deep-page .footer-main,
  html body.deep-page .footer-bottom {
    width: min(calc(100% - 48px), var(--global-shell)) !important;
  }
}

/* Theme changes now include the document, content surfaces, controls and
   footer. Page-specific systems consume these tokens, so light/dark remains a
   single coherent palette rather than a header-only effect. */
html[data-theme="dark"] body {
  color: var(--theme-text);
  background: var(--theme-paper);
}

html[data-theme="dark"] body:not([data-page="home"]) .site-header,
html[data-theme="dark"] body:not([data-page="home"]) .site-header.is-scrolled {
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] body[data-page="home"] .site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, .1) !important;
  background: #14241b !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3) !important;
}

html[data-theme="dark"] body:not([data-page="home"]) .header-contact {
  color: var(--theme-ink) !important;
  border-color: var(--theme-line) !important;
  background: color-mix(in srgb, var(--theme-surface) 88%, transparent) !important;
}

html[data-theme="dark"] body:not([data-page="home"]) :is(
  .mega-menu,
  .mega-sections,
  .about-reference-document,
  .about-reference-hero,
  .about-reference-rail,
  .standard-record-main,
  .standards-detail,
  input,
  textarea,
  select
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] .standard-record-dates > span {
  border-color: var(--theme-line);
  background: var(--theme-surface-soft);
}

html[data-theme="dark"] .standard-record-dates img {
  filter: invert(1) brightness(.86);
}

html[data-theme="dark"] .site-search-layer {
  color-scheme: dark;
  background: rgba(8, 13, 10, .22);
}

html[data-theme="dark"] .site-search-scrim {
  background: rgba(3, 7, 5, .58);
}

html[data-theme="dark"] .site-search-dialog {
  border-color: var(--theme-line-strong);
  background: color-mix(in srgb, var(--theme-surface) 98%, transparent);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .46);
}

html[data-theme="dark"] :is(.site-search-heading, .site-search-form, .site-search-close, .site-search-empty) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-paper);
  box-shadow: none;
}

html[data-theme="dark"] .site-search-shortcuts {
  background: color-mix(in srgb, var(--theme-surface) 96%, transparent);
}

html.theme-changing body,
html.theme-changing body :where(
  main,
  section,
  article,
  aside,
  form,
  table,
  thead,
  tbody,
  tr,
  th,
  td,
  input,
  textarea,
  select,
  .site-header,
  .site-footer
) {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--motion-medium);
  transition-timing-function: var(--ease-standard);
}

@media (max-width: 1080px) {
  html body:not([data-page="home"]) .theme-toggle,
  html body.deep-page .theme-toggle {
    display: grid !important;
  }
}

/* Final interaction polish: the header action cluster remains one coherent
   rounded surface in both themes instead of mixing dark glass with a white
   rectangular CTA. */
html[data-theme] body:not([data-page="home"]) .header-contact,
html[data-theme] body.deep-page .header-contact {
  height: 48px;
  min-height: 48px;
  padding-inline: 18px;
  border: 1px solid var(--theme-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--theme-ink) 5%, transparent) !important;
}

html[data-theme] body:not([data-page="home"]) .header-quick-actions,
html[data-theme] body.deep-page .header-quick-actions {
  height: 48px;
  min-height: 48px;
  border-radius: 12px !important;
  overflow: hidden;
}

html[data-theme="dark"] body:not([data-page="home"]) .header-quick-actions,
html[data-theme="dark"] body.deep-page .header-quick-actions,
html[data-theme="dark"] body[data-page="home"] .site-header.is-scrolled .header-quick-actions {
  color: var(--theme-ink) !important;
  border-color: var(--theme-line) !important;
  background: color-mix(in srgb, var(--theme-surface) 88%, transparent) !important;
}

html[data-theme="dark"] body:not([data-page="home"]) .header-contact,
html[data-theme="dark"] body.deep-page .header-contact,
html[data-theme="dark"] body[data-page="home"] .site-header.is-scrolled .header-contact {
  color: var(--theme-ink) !important;
  border-color: var(--theme-line) !important;
  background: color-mix(in srgb, var(--theme-surface) 88%, transparent) !important;
}

/* Tools service CTA: compact information band, not an empty full-width gap. */
html[data-theme] .section-portal .sp-contact-band {
  padding: 30px 0 !important;
  color: var(--theme-ink) !important;
  border-block: 1px solid var(--theme-line) !important;
  background: var(--theme-paper-alt) !important;
}

html[data-theme] .section-portal .sp-contact-band .sp-shell {
  min-height: 82px;
}

html[data-theme] .section-portal .sp-contact-copy {
  display: grid;
  gap: 5px;
}

html[data-theme] .section-portal .sp-contact-copy .sp-kicker {
  color: var(--theme-sage-deep) !important;
}

html[data-theme] .section-portal .sp-contact-band h2 {
  max-width: none;
  color: var(--theme-ink) !important;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 660;
  letter-spacing: -.025em;
}

html[data-theme] .section-portal .sp-contact-copy > p:last-child {
  color: var(--theme-muted) !important;
  font-size: 13px;
  line-height: 1.65;
}

html[data-theme] .section-portal .sp-contact-band .sp-action {
  min-height: 46px;
  color: var(--theme-ink) !important;
  border-color: var(--theme-line-strong) !important;
  border-radius: 12px !important;
  background: var(--theme-surface) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-ink) 7%, transparent);
}

html[data-theme="dark"] body[data-page="standards"] {
  --search-paper: var(--theme-paper);
  --search-panel: var(--theme-surface);
  --search-soft: var(--theme-paper-alt);
  --search-soft-green: var(--theme-sage-soft);
  --search-line: var(--theme-line);
  --search-line-strong: var(--theme-line-strong);
  --search-ink: var(--theme-ink);
  --search-text: var(--theme-text);
  --search-muted: var(--theme-muted);
  --search-green: var(--theme-lime);
  --search-green-hover: color-mix(in srgb, var(--theme-lime) 82%, white);
  --search-accent: var(--theme-warm);
}

/* Resource workbench previously reintroduced fixed light variables after the
   shared theme tokens. Bind every workbench layer back to the active theme so
   headings, search, filters, rows and preview all switch together. */
html[data-theme] body[data-page="resources"] .rp-workbench {
  --rp-bg: var(--theme-paper);
  --rp-surface: var(--theme-surface);
  --rp-surface-soft: var(--theme-paper-alt);
  --rp-surface-selected: var(--theme-sage-soft);
  --rp-ink: var(--theme-ink);
  --rp-text: var(--theme-text);
  --rp-muted: var(--theme-muted);
  --rp-faint: color-mix(in srgb, var(--theme-muted) 82%, transparent);
  --rp-line: var(--theme-line);
  --rp-line-strong: var(--theme-line-strong);
  --rp-green: var(--theme-sage-deep);
  --rp-green-hover: var(--theme-sage);
  --rp-lime: var(--theme-lime);
  color: var(--theme-text);
  background: var(--theme-paper) !important;
}

html[data-theme] body[data-page="resources"] .rp-shell {
  width: min(calc(100% - 48px), var(--global-shell));
}

html[data-theme] body[data-page="resources"] :is(
  .rp-search-field,
  .rp-suggestions,
  .rp-preview,
  .rp-preview-panel,
  .rp-filter-panel
) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] body[data-page="resources"] .rp-search-submit {
  color: #101612 !important;
  border-color: var(--theme-lime) !important;
  background: var(--theme-lime) !important;
}

@media (max-width: 680px) {
  html[data-theme] .section-portal .sp-contact-band {
    padding: 26px 0 !important;
  }

  html[data-theme] .section-portal .sp-contact-band .sp-shell {
    min-height: 0;
    gap: 22px;
  }
}

/* Keep the homepage service image inside the same 1240px document frame as
   its copy and the sections above. The previous 52vw width reached the
   viewport edge on wide screens and visibly escaped the page grid. */
@media (min-width: 961px) {
  html[data-theme] body[data-page="home"] .home-collaboration-media {
    right: max(24px, calc((100% - var(--global-shell)) / 2));
    left: auto;
    width: min(52vw, 660px);
    overflow: hidden;
  }

  html[data-theme] body[data-page="home"] .home-collaboration-media img {
    width: 150%;
    max-width: none;
    object-position: left center;
  }
}