/* wule.ch: a quiet manifesto page. The design-system roles are filled with the WULE accent "Lehm" (proposal #7A3E12,
   design-system/marken), lightened for dark surfaces. Loaded after tokens.css and components.css. Dark only, no
   script, no inline CSS (the edge CSP forbids it). Spec docs/specs/2026-10-24-wule-web.md. */

:root {
  color-scheme: dark;
  --wu-lehm-100: #FBE6D6;
  --wu-lehm-300: #EBAE84;
  --wu-lehm-400: #DC8A57;
  --wu-lehm-700: #7A3E12;
  --wu-lehm-900: #2B1406;

  --vv-color-primary: var(--wu-lehm-400);
  --vv-color-on-primary: var(--wu-lehm-900);
  --vv-color-primary-container: var(--wu-lehm-700);
  --vv-color-on-primary-container: var(--wu-lehm-100);
  --vv-color-focus: var(--wu-lehm-400);
}

body { background: var(--vv-color-surface); color: var(--vv-color-on-surface); }
a { color: inherit; }
.nowrap { white-space: nowrap; }
::selection { background: var(--wu-lehm-700); color: var(--wu-lehm-100); }

.skip-link:focus-visible {
  position: fixed; z-index: 100; top: var(--vv-space-2); left: var(--vv-space-2);
  width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
  padding: var(--vv-space-3) var(--vv-space-5); border-radius: 999px;
  background: var(--vv-color-surface-container-highest); color: var(--vv-color-on-surface);
}

/* Navigation: the one glass layer, a small pill. */
.nav { position: fixed; z-index: 10; inset: 0 0 auto; padding-top: max(var(--vv-space-4), env(safe-area-inset-top)); }
.nav__bar { max-width: 320px; padding-left: var(--vv-space-5); }
.brand { min-width: var(--vv-touch-target); font: 600 1.125rem/1 var(--vv-font-sans); letter-spacing: 0.08em;
  color: var(--vv-color-on-stage); text-decoration: none; }
.nav__links { display: flex; }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--vv-touch-target); padding: 0 var(--vv-space-4);
  border-radius: var(--vv-shape-full); color: var(--vv-color-on-surface-variant); text-decoration: none; white-space: nowrap;
  font: 500 var(--vv-type-label)/1 var(--vv-font-sans);
}
.nav__links a::before { content: ""; position: absolute; inset: 4px 0; border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity var(--vv-motion-short) var(--vv-ease-standard); }
.nav__links a:hover::before { opacity: var(--vv-state-hover); }

/* Stage: black, rounded, inset. The typography carries the page. */
.stage {
  --stage-margin: var(--vv-space-2);
  margin: var(--stage-margin); min-height: calc(88svh - 2 * var(--stage-margin));
  display: grid; align-content: end; padding: 120px 0 var(--vv-space-12);
  background: var(--vv-color-stage); color: var(--vv-color-on-stage); border-radius: var(--vv-shape-xl); overflow: hidden;
}
.hero, .manifesto, .contact { width: 100%; max-width: calc(var(--vv-layout-max) + 2 * var(--vv-layout-margin));
  margin-inline: auto; padding-inline: var(--vv-layout-margin); box-sizing: border-box; }

.overline { margin: 0 0 var(--vv-space-6); font: 400 var(--vv-type-label)/1.4 var(--vv-font-mono);
  color: var(--vv-color-on-surface-variant); }
.claim { margin: 0; font: 600 clamp(3.5rem, 13vw, 10.5rem)/0.9 var(--vv-font-sans); letter-spacing: -0.045em; }
.claim__name, .claim__line { display: block; }
.claim__line { color: var(--vv-color-primary); font-weight: 400; }

.rule { height: 1px; margin-top: var(--vv-space-10); background: var(--vv-color-outline-variant); transform-origin: left;
  animation: wu-draw 1.4s var(--vv-ease-decelerate) 0.2s both; }
@keyframes wu-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Manifesto: two paragraphs, a generous measure, nothing else. */
.manifesto { margin-block: var(--vv-space-16); display: grid; gap: var(--vv-space-8); }
.manifesto__lead { max-width: 24ch; margin: 0; font: 500 clamp(1.75rem, 4vw, 3rem)/1.15 var(--vv-font-sans);
  letter-spacing: -0.02em; }
.manifesto__text { max-width: 44ch; margin: 0; font: 400 clamp(1.125rem, 2vw, 1.5rem)/1.5 var(--vv-font-sans);
  color: var(--vv-color-on-surface-variant); }

.contact { margin-block: var(--vv-space-12) var(--vv-space-16); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--vv-space-4) var(--vv-space-6); }
.contact__title { margin: 0; font: 500 var(--vv-type-title, 1.375rem)/1.3 var(--vv-font-sans); }
.contact__link { min-height: var(--vv-touch-target); font-family: var(--vv-font-mono); text-decoration: none; }
.contact__link:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; }

/* Legal page. */
.page { padding-top: 128px; padding-bottom: var(--vv-space-16); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--vv-space-10); }
.prose a { text-decoration-color: var(--vv-color-primary); text-underline-offset: 0.18em; }
.prose ul { padding-left: 1.2em; }

.footer { padding-block: var(--vv-space-8) max(var(--vv-space-8), env(safe-area-inset-bottom)); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--vv-space-3);
  border-top: 1px solid var(--vv-color-outline-variant); padding-top: var(--vv-space-5); }
.footer a { display: inline-flex; align-items: center; min-height: var(--vv-touch-target);
  color: var(--vv-color-on-surface-variant); text-underline-offset: 0.18em; }
.footer a:hover { color: var(--vv-color-on-surface); }

@media (max-width: 599px) {
  .stage { min-height: calc(80svh - 2 * var(--stage-margin)); padding-top: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .rule { animation: none; }
  .nav__links a::before { transition: none; }
}