:root {
  --surface-header: #0e0f11eb;
  --surface-page: #0e0f11;
  --header-action-gap: 1.5rem;
  --toolbar-gap: .5rem;
  --mobile-brand-size: .875rem;
}

.contact-copy,.contact-form {
  min-width: 0;
}

.header-actions,
.preference-controls {
  display: flex;
  align-items: center;
  gap: var(--header-action-gap);
}

.preference-controls {
  gap: var(--toolbar-gap);
}

.preference-control {
  width: var(--touch-target);
  height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--color-paper);
  background: var(--surface-control);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--control-radius);
  font: var(--weight-action) var(--type-ui)/1 var(--font-sans);
  transition: color var(--motion-feedback),border-color var(--motion-feedback),background var(--motion-feedback);
}

.preference-control:hover {
  color: var(--color-pink);
  border-color: var(--color-pink);
  background: var(--surface-hover);
}

.preference-control .icon {
  width: var(--icon-small);
  height: var(--icon-small);
}

.header-actions .desktop-nav {
  gap: var(--header-action-gap);
}

html[data-theme="light"] {
  color-scheme: light;
  --color-ink: #f7f8fa;
  --color-paper: #20232c;
  --color-pink: #ad125d;
  --color-muted: #545c6a;
  --color-line: #d5d9e1;
  --text-secondary: #454e5d;
  --text-caption: #596171;
  --surface-control: #ffffff;
  --surface-hover: #e9edf3;
  --border-control: #858d9c;
  --accent-hover: #880b48;
  --surface-header: #f7f8faf2;
  --surface-page: #f7f8fa;
  --surface-section: #eef1f5;
  --surface-media: #e4e8ef;
  --surface-dialog: #f7f8fa;
  --surface-backdrop: #26314170;
  --surface-tint: #ad125d0b;
  --surface-shadow: #26314120;
  --on-accent: #ffffff;
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .dialog-sticky {
  background: var(--surface-header);
  border-color: var(--color-line);
}

html[data-theme="light"] :is(.section-work,.section-contact,.mobile-nav) {
  background: var(--surface-section);
  border-color: var(--color-line);
}

html[data-theme="light"] .site-footer {
  background: var(--surface-page);
}

html[data-theme="light"] :is(.project-image,.explorer-canvas,.study-evidence,.review-topics>div) {
  background: var(--surface-media);
  border-color: var(--color-line);
}

html[data-theme="light"] .project-image:hover {
  background: var(--surface-hover);
  border-color: var(--color-pink);
}

html[data-theme="light"] :is(.study-dialog,.notes-dialog) {
  background: var(--surface-dialog);
  color: var(--color-paper);
  border-color: var(--color-line);
}

html[data-theme="light"] :is(.study-dialog,.notes-dialog)::backdrop {
  background: var(--surface-backdrop);
}

html[data-theme="light"] :is(.brand-sub,.nav-link,.eyebrow,.hero-intro,.art-note,.art-note-label,.stage-choice,.replay-button,.hero-footer,.motion-toggle,.motion-toggle[aria-pressed="true"],.section-intro,.image-index,.image-open,.project-meta,.meta-dot,.notebook-label,.notebook-link>.icon,.reset-link,.about-meta,.contact-intro,.footer-main .text-link,.footer-bottom,.dialog-sticky>.micro,.close-study,.study-subtitle,.study-tags span,.data-table-toggle,.data-table td,.reflux-stat p,.notes-dialog p:not(.eyebrow),.direct-contact>.micro) {
  color: var(--text-secondary);
}

html[data-theme="light"] :is(.about-lead,.about-meta span:first-child,.field>label,.form-status,.source-note>.micro,.button-outline,.hero-actions .text-link,.stage-choice.is-active) {
  color: var(--color-paper);
}

html[data-theme="light"] :is(.button-primary,.fluid-switch button.is-active) {
  color: var(--on-accent);
  background: var(--color-pink);
}

html[data-theme="light"] .button-primary:hover {
  background: var(--accent-hover);
}

html[data-theme="light"] :is(.button-outline,.fluid-switch,.study-tags span,.reflux-stat) {
  border-color: var(--border-control);
}

html[data-theme="light"] .button-outline:hover {
  color: var(--color-pink);
  background: var(--surface-hover);
  border-color: var(--color-pink);
}

html[data-theme="light"] :is(.nav-link:hover,.nav-link.is-active,.icon-button:hover,.hero-actions .text-link:hover,.stage-choice:hover,.scroll-link:hover,.motion-toggle:hover,.reset-link:hover,.layer-option:hover strong,.close-study:hover,.study-question .micro,.chart-tooltip,.reflux-stat strong,.direct-contact>.text-link,.footer-bottom button:not(.motion-toggle):hover) {
  color: var(--color-pink);
}

html[data-theme="light"] .icon-button {
  color: var(--color-paper);
}

html[data-theme="light"] :is(.mobile-nav a,.explorer-disclaimer,.layer-option,.layer-options,.approach-item,.approach-item:first-child,.footer-main,.study-question,.data-table th,.data-table td,.source-note,.notebook-link) {
  border-color: var(--color-line);
}

html[data-theme="light"] :is(.form-status,.source-note,.noscript-note) {
  background: var(--surface-tint);
  color: var(--text-secondary);
  border-color: var(--color-pink);
}

html[data-theme="light"] .data-table th {
  color: var(--color-paper);
  background: var(--surface-control);
}

html[data-theme="light"] :is(.chart-label,.chart-tick,.layer-point-label) {
  fill: var(--text-secondary);
}

html[data-theme="light"] .chart-grid {
  stroke: var(--color-line);
}

html[data-theme="light"] .chart-fit {
  stroke: var(--text-secondary);
}

html[data-theme="light"] .chart-point {
  fill: var(--color-pink);
  stroke: var(--surface-media);
}

html[data-theme="light"] .chart-point:focus,
html[data-theme="light"] .chart-point:hover {
  stroke: var(--color-paper);
}

html[data-theme="light"] .reflux-bar {
  background: var(--color-line);
}

html[data-theme="light"] .reflux-bar span {
  background: var(--color-pink);
}

html[data-theme="light"] .study-art-vapour text {
  fill: var(--text-caption);
}

html[data-theme="light"] .mobile-nav {
  box-shadow: 0 calc(var(--spacing) * 5) calc(var(--spacing) * 11) var(--surface-shadow);
}

html[data-theme="light"] ::selection {
  color: var(--color-paper);
  background: var(--surface-tint);
}

@media (max-width: 1023px) {
  .header-actions .desktop-nav {
    display: none;
  }
  #menu-toggle {
    display: inline-flex;
  }
  .header-actions {
    gap: var(--toolbar-gap);
  }
  .site-header .brand-sub {
    display: none;
  }
}

@media (max-width: 390px) {
  .site-header .brand-name {
    font-size: var(--mobile-brand-size);
  }
  .site-header .brand {
    gap: var(--toolbar-gap);
  }
}