:root {
  color-scheme: light;
  --surface: var(--color-surface);
  --surface-raised: color-mix(in srgb, var(--color-surface) 94%, white 6%);
  --surface-offset: var(--color-surface-alt);
  --ink: var(--color-on-surface-strong);
  --muted: var(--color-on-surface);
  --subtle: #4d5967;
  --outline: var(--color-outline);
  --outline-soft: color-mix(in srgb, var(--color-outline) 55%, var(--color-surface) 45%);
  --primary: var(--color-primary);
  --primary-hover: var(--color-secondary);
  --on-primary: var(--color-on-primary);
  --signal: var(--araihu-logo-signal);
  --success: var(--color-success);
  --night: #07111f;
  --on-night: #f7f8f3;
  --night-muted: #d5ddeb;
  --night-accent: #c7ff4a;
  --run-muted: #4d5967;
  --focus: #376fd1;
  --action-shadow: rgb(7 17 31 / 18%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    color-scheme: dark;
    --surface: var(--color-surface-dark);
    --surface-raised: var(--color-surface-dark-alt);
    --surface-offset: var(--color-surface-dark-alt);
    --ink: var(--color-on-surface-dark-strong);
    --muted: var(--color-on-surface-dark);
    --subtle: #b9c5d6;
    --outline: var(--color-outline-dark);
    --outline-soft: color-mix(in srgb, var(--color-outline-dark) 65%, var(--color-surface-dark) 35%);
    --primary: var(--color-primary-dark);
    --primary-hover: var(--color-secondary-dark);
    --on-primary: var(--color-on-primary-dark);
    --signal: var(--araihu-logo-signal);
    --success: var(--color-success);
    --night: #020812;
    --on-night: #f7f8f3;
    --night-muted: #d5ddeb;
    --night-accent: #c7ff4a;
    --run-muted: #d5ddeb;
    --focus: #d9ff83;
    --action-shadow: rgb(199 255 74 / 22%);
  }
}

:root.dark {
  color-scheme: dark;
  --surface: var(--color-surface-dark);
  --surface-raised: var(--color-surface-dark-alt);
  --surface-offset: var(--color-surface-dark-alt);
  --ink: var(--color-on-surface-dark-strong);
  --muted: var(--color-on-surface-dark);
  --subtle: #b9c5d6;
  --outline: var(--color-outline-dark);
  --outline-soft: color-mix(in srgb, var(--color-outline-dark) 65%, var(--color-surface-dark) 35%);
  --primary: var(--color-primary-dark);
  --primary-hover: var(--color-secondary-dark);
  --on-primary: var(--color-on-primary-dark);
  --signal: var(--araihu-logo-signal);
  --success: var(--color-success);
  --night: #020812;
  --on-night: #f7f8f3;
  --night-muted: #d5ddeb;
  --night-accent: #c7ff4a;
  --run-muted: #d5ddeb;
  --focus: #d9ff83;
  --action-shadow: rgb(199 255 74 / 22%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--primary);
  color: var(--on-primary);
  padding: 0.8rem 1rem;
  z-index: 20;
}

.skip:focus {
  top: 1rem;
}

.mast {
  width: min(1440px, calc(100% - 4rem));
  min-height: 82px;
  margin: auto;
  border-bottom: 1px solid var(--outline);
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: 1rem;
}

.brand {
  width: max-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  display: block;
  width: 166px;
  height: auto;
}

.mast nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9rem;
}

.mast nav a,
.quiet-link,
.foot a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  text-underline-offset: 0.3em;
}

.mast nav a:hover,
.quiet-link:hover {
  color: var(--primary);
}

.languages {
  display: flex;
  border: 1px solid var(--outline);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.mast-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-toggle,
.campaign-toggle {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.theme-toggle:hover,
.campaign-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.campaign-toggle[hidden] {
  display: none;
}

.campaign-toggle [data-campaign-toggle-icon],
.campaign-toggle [data-campaign-toggle-icon] > * {
  width: 1rem;
  height: 1rem;
  display: block;
}

.languages a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.languages a[aria-current] {
  background: var(--ink);
  color: var(--surface);
}

.hero {
  width: min(1240px, calc(100% - 4rem));
  min-height: 720px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
}

.status {
  margin-bottom: 2rem;
}

.eyebrow,
.section-label {
  margin: 0 0 1rem;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.75rem, 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.lead {
  max-width: 620px;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.55;
}

.actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.action {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 1.3rem;
  background: var(--primary);
  color: var(--on-primary);
  padding: 0.85rem 1.15rem;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 750;
  box-shadow: 7px 7px 0 var(--action-shadow);
}

.action:hover {
  background: var(--primary-hover);
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--action-shadow);
}

.run {
  background: var(--surface-raised);
  border: 1px solid var(--outline);
  box-shadow: 18px 18px 0 var(--surface-offset);
  transform: rotate(1deg);
}

.run-head,
.run footer {
  padding: 1.2rem 1.4rem;
  display: flex;
  justify-content: space-between;
  color: var(--run-muted);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.run-head {
  border-bottom: 1px solid var(--outline-soft);
  color: var(--ink);
  font-weight: 700;
}

.run ol {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.4rem;
}

.run li {
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--outline-soft);
  color: var(--subtle);
}

.run li:last-child {
  border: 0;
}

.run li b {
  color: var(--subtle);
  font-size: 0.95rem;
}

.run li span {
  font-size: 0.72rem;
}

.run li.done b {
  color: var(--success);
}

.run li.active b {
  color: var(--primary);
}

.run footer {
  border-top: 1px solid var(--outline-soft);
}

.story,
.split {
  padding: 8rem max(2rem, calc((100vw - 1240px) / 2));
  border-top: 1px solid var(--outline);
}

.story h2,
.split h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
}

.story > p:last-child,
.split article > p:last-child {
  max-width: 67ch;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 10vw, 12rem);
  background: var(--night);
  color: var(--on-night);
}

.split .section-label,
.foot a {
  color: var(--night-accent);
}

.split article > p:last-child {
  color: var(--night-muted);
}

.foot {
  padding: 2rem max(2rem, calc((100vw - 1240px) / 2));
  background: var(--night);
  color: var(--on-night);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-top: 1px solid var(--outline-soft);
  font-size: 0.85rem;
}

.foot a {
  margin-left: auto;
}

@media (max-width: 760px) {
  .mast {
    width: calc(100% - 2rem);
    grid-template-columns: 1fr max-content;
    min-height: 72px;
  }

  .mast-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: space-between;
  }

  .mast nav {
    display: none;
  }

  .brand img {
    width: 128px;
  }

  .hero {
    width: calc(100% - 2rem);
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 5rem 0;
  }

  .hero-copy,
  .run {
    min-width: 0;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 12vw, 3.5rem);
    overflow-wrap: anywhere;
  }

  .actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .actions .quiet-link {
    width: 100%;
  }

  .run {
    margin: 1rem 0;
    transform: none;
  }

  .story,
  .split {
    padding: 5rem 1rem;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .foot {
    padding: 1.5rem 1rem;
    flex-wrap: wrap;
  }

  .foot a {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .run {
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .run:hover {
    transform: rotate(0);
  }
}