/* Shared foundations. Motion owns transforms and all continuous animation. */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  --anchor-offset: calc(var(--header-height) + 16px);
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
a, button, input, textarea { font: inherit; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button { cursor: pointer; }
button, input, textarea { min-height: 44px; }
button { color: inherit; }
textarea { width: 100%; resize: vertical; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--bg); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
#main:focus:not(:focus-visible) { outline: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-module);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--panel-shadow);
  transform: translateY(calc(-100% - var(--space-4)));
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(calc(100% - 2 * var(--gutter)), var(--content-max));
  margin-inline: auto;
}
.section {
  padding-block: var(--section-gap);
}
.section-heading { max-width: 880px; margin-bottom: var(--space-6); }
.section-title {
  font-size: var(--title-size);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: var(--title-tracking);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.section-title em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
}
.lead { max-width: 64ch; color: var(--muted); text-wrap: pretty; }
.section-title + .lead { margin-top: var(--space-3); }
.eyebrow, .micro-label, .sample-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.eyebrow { margin-bottom: var(--space-3); color: var(--accent); }
.micro-label, .sample-label { color: var(--muted); }
.sample-note, .module-caption { color: var(--muted); font-size: 14px; line-height: 1.6; }

.panel {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--glass);
  background-image: linear-gradient(135deg, var(--line), transparent 40%);
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
  box-shadow: var(--inner-glow), var(--panel-shadow);
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.panel-heading > * { min-width: 0; }
.panel-title { font-size: 18px; font-weight: 550; line-height: 1.4; letter-spacing: -.02em; }
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: var(--space-3) 0 0;
  list-style: none;
}
.tags li {
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--glass);
  font: var(--text-label)/1.5 var(--font-mono);
  overflow-wrap: anywhere;
}

.button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color .2s, border-color .2s, box-shadow .2s, filter .2s;
}
.button-primary { background: var(--cta); color: var(--cta-ink); box-shadow: var(--inner-glow); }
.button-secondary { background: var(--surface); color: var(--text); border-color: var(--control-border); }
.button:hover, .button:focus-visible { text-decoration: underline; }
.button-primary:hover { filter: brightness(1.08); }
.button-secondary:hover { border-color: var(--accent); box-shadow: var(--inner-glow); }
.button:disabled, .icon-button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.button-row > * { min-width: 0; }
.button-demo { font: var(--text-label)/1.5 var(--font-mono); color: inherit; }
.icon-button { width: 44px; min-height: 44px; padding: 9px; flex: 0 0 44px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
  box-shadow: var(--inner-glow);
}
.header-inner, .header-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-2); }
.header-inner { min-height: 87px; justify-content: space-between; padding-block: var(--space-1); }
.header-inner > *, .header-actions > * { min-width: 0; }
.brand { display: inline-flex; flex: 0 0 64px; width: 64px; border-radius: var(--space-1); }
.brand-logo { width: 64px; height: 64px; object-fit: contain; filter: var(--logo-filter); }
/* Light theme shows the original red-frame logo instead of a filtered white one. */
:root[data-theme="light"] .brand-logo { filter: none; content: url("../../img/logo-color.png"); }
.primary-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--text); text-decoration: underline; }
.header-actions { justify-content: flex-end; }
.theme-toggle, .motion-toggle { border: 1px solid var(--control-border); background: var(--surface); color: var(--text); }
.theme-toggle:hover, .motion-toggle:hover { border-color: var(--accent); }
.theme-toggle[aria-pressed="true"] { box-shadow: var(--inner-glow); }
.theme-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-sun, .theme-rays { display: none; }
.theme-moon { display: block; }
:root[data-theme="light"] .theme-sun, :root[data-theme="light"] .theme-rays { display: block; }
:root[data-theme="light"] .theme-moon { display: none; }
.motion-toggle {
  max-width: 100%;
  min-height: 44px;
  padding: var(--space-1) 12px;
  border-radius: var(--radius-pill);
  font: var(--text-label)/1.5 var(--font-mono);
  transition: border-color .2s, background-color .2s;
}
.motion-toggle[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--bg); }

.event-window { min-width: 0; overflow: hidden; }
/* Ticker rows scroll through the window; fade the edges instead of a hard cut. */
html.js .event-window.is-ticker { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.event-log, .event-log-copy { padding: 0; margin: 0; list-style: none; color: var(--muted); font: var(--text-label)/1.7 var(--font-mono); }
.event-log li, .event-log-copy li { display: flex; align-items: center; gap: var(--space-1); min-height: 32px; overflow-wrap: anywhere; }
.status-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--accent); }
.event-track { display: block; }

.site-footer { padding-block: var(--space-8) var(--space-4); border-top: 1px solid var(--line); background: var(--glass); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; color: var(--muted); font-size: 14px; }
.footer-brand p { max-width: 24ch; }
.footer-heading { margin-block: var(--space-2); font: 14px/1.5 var(--font-mono); color: var(--text); }
.footer-column a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; text-decoration: none; overflow-wrap: anywhere; }
.footer-column a:hover, .footer-column a:focus-visible { color: var(--text); text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.footer-bottom > * { min-width: 0; }
.system-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font: var(--text-label)/1.6 var(--font-mono); }
.system-status > [aria-hidden] { color: var(--accent); }

/* Solid surfaces remain legible without backdrop compositing. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .site-header, .site-footer { background-color: var(--surface); }
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 859px) {
  :root { --header-height: 65px; }
  .header-inner { min-height: 64px; flex-wrap: nowrap; gap: 8px; padding-block: 8px; }
  .brand { flex-basis: 44px; width: 44px; }
  .brand-logo { width: 44px; height: 44px; }
  .header-actions { flex-wrap: nowrap; gap: 8px; }
  .primary-nav { display: none; }
  .motion-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; padding: 10px; }
  .motion-label { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .primary-nav a { font-size: 13px; }
  .section-heading { margin-bottom: var(--space-4); }
  .panel { padding: var(--space-2); }
  .button-row { gap: var(--space-1); }
  .button-row .button { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .footer-bottom { margin-top: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}

.motion-icon { fill: none; stroke: currentColor; stroke-width: 2; }
.motion-play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }
@media (min-width: 860px) { .motion-icon { display: none; } }

/* Disclosure navigation stays in document order and works without JavaScript. */
.header-inner { column-gap: 20px; }
.primary-nav { gap: 16px; }
.primary-nav a { font-size: 13px; }
.header-actions { gap: 8px; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; padding: 10px; }
.motion-label { display: none; }
.motion-icon { display: block; }
.language-switch { display: flex; gap: 4px; font: 12px/1 var(--font-mono); }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 44px; text-decoration: none; }
.language-switch [aria-current] { color: var(--accent); text-decoration: underline; }
@media (min-width: 1200px) {
  .menu-toggle { display: none; }
  .primary-nav a { white-space: nowrap; }
}
@media (min-width: 1200px) {
  .header-inner, .header-actions, .primary-nav { flex-wrap: nowrap; }
  .header-inner { column-gap: 16px; }
  .primary-nav { gap: 12px; }
}
@media (max-width: 1199px) {
  .header-inner { flex-wrap: nowrap; gap: 8px; }
  .header-actions { margin-left: auto; }
  .primary-nav { display: flex; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100svh - 88px); overflow-y: auto; padding: 8px 0; }
  .primary-nav a { padding: 8px 16px; font-size: 16px; }
  .primary-nav .nav-extra { display: flex !important; }
  .menu-toggle { background: var(--surface); border-color: var(--control-border); }
  .language-switch a { min-width: 28px; }
}
@media (max-width: 859px) { .footer-bottom { padding-bottom: 64px; } }
@media (max-width: 359px) {
  .header-actions { gap: 4px; }
  .language-switch a { min-width: 28px; }
}
@media (max-width: 1199px) {
  /* Keep disclosure height out of the header measurement used by pinned scenes. */
  .primary-nav.is-disclosure { position: absolute; inset: 100% 0 auto; padding: 12px var(--gutter); background: var(--surface); border-bottom: 1px solid var(--control-border); box-shadow: var(--panel-shadow); }
}

.primary-nav a[aria-current="true"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
.language-switch [aria-disabled="true"] { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }