html { scroll-padding-top: 136px; }

:root {
  color-scheme: dark;
  --canvas: #000;
  --ink: #f3ead7;
  --muted: #bfb6a4;
  --paper-deep: var(--canvas);
  --dark: var(--canvas);
  --copper: #df9970;
  --line: #3c3328;
}

body,
.site-header,
#mobile-nav:not([hidden]),
.skip-link,
.hero,
.manifesto-strip,
.creator-section,
.closing-section,
.site-footer {
  background: var(--canvas);
}

body::before { content: none; }

.hero-shade {
  background:
    linear-gradient(90deg, #000 0%, #000f 13%, #000d 31%, #0003 66%, transparent),
    linear-gradient(0deg, #000 0%, transparent 42%);
}

.header-cta:hover,
.language-switch button[aria-pressed=true],
.language-switch button[aria-pressed=true]:hover {
  color: var(--canvas);
}

.button-copper { background: #a7472e; }

.feature-entry p,
.handwritten,
.closing-section .eyebrow,
.closing-section > p:last-child {
  color: var(--muted);
}

.closing-cauldron { mix-blend-mode: normal; }

.studio-bar {
  min-height: 44px;
  padding-inline: clamp(16px, 4vw, 56px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  color: #f2e1bc;
  font: 650 13px/1.25 "Segoe UI", system-ui, sans-serif;
}

.studio-return, .studio-next {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-block: 7px;
}

.studio-next { color: #86ecf5; }
.studio-return img { display: block; border: 1px solid #837452; border-radius: 4px; }
.studio-return:hover, .studio-next:hover { text-decoration: underline; text-underline-offset: 4px; }
.studio-return:focus-visible, .studio-next:focus-visible { outline: 2px solid #86ecf5; outline-offset: 2px; }
.studio-bar--footer { border-top: 1px solid var(--line); }

#mobile-nav:not([hidden]) { margin-top: 44px; }

@media (max-width: 800px) {
  .hero-shade {
    background:
      linear-gradient(90deg, #000e 0%, #000a 48%, #0005 100%),
      linear-gradient(0deg, #000 0%, transparent 54%);
  }
}

@media (max-width: 360px) {
  .studio-bar { gap: 8px; font-size: 12px; }
  .studio-return, .studio-next { gap: 5px; }
}