/* roenu.dev: the developer page fills the design-system roles with its own accent "Aare" (spec, design system §12).
   Loaded after tokens.css and components.css. Dark only. No inline CSS: the edge CSP forbids it. */

:root {
  color-scheme: dark;
  --rn-aare-100: #D8FBF6;
  --rn-aare-300: #7FE8DA;
  --rn-aare-400: #3FD0C2;
  --rn-aare-500: #1FB3A6;
  --rn-aare-700: #0B6E66;
  --rn-aare-900: #032B28;

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

/* roenu.com, the music side (spec amendment 2026-10-24): accent "Nacht" (violet) in the same roles. */
.rn-night {
  --rn-nacht-100: #ECE8FF;
  --rn-nacht-300: #BDB1FF;
  --rn-nacht-400: #9D8CFF;
  --rn-nacht-700: #4B37B8;
  --rn-nacht-900: #170F45;

  --vv-color-primary: var(--rn-nacht-400);
  --vv-color-on-primary: var(--rn-nacht-900);
  --vv-color-primary-container: var(--rn-nacht-700);
  --vv-color-on-primary-container: var(--rn-nacht-100);
  --vv-color-focus: var(--rn-nacht-400);
}
.rn-night ::selection { background: var(--rn-nacht-700); color: var(--rn-nacht-100); }

body { background: var(--vv-color-surface); color: var(--vv-color-on-surface); }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: var(--rn-aare-700); color: var(--rn-aare-100); }

/* Skip link: hidden until focused (components.css only provides .vv-sr-only). */
.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 like vaiev.com and sidged.com. */
.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.25rem/1 var(--vv-font-sans); letter-spacing: -0.04em;
  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 like vaiev.com. Flat: no glow, no wash. */
.stage {
  --stage-margin: var(--vv-space-2);
  position: relative; margin: var(--stage-margin); min-height: calc(92svh - 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); overflow: hidden; border-radius: var(--vv-shape-xl);
}
.hero { 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; }

.prompt { margin: 0 0 var(--vv-space-4); font: 400 var(--vv-type-label)/1.4 var(--vv-font-mono);
  color: var(--vv-color-on-surface-variant); }
.prompt b { font-weight: 500; color: var(--vv-color-primary); }

/* The wordmark: very large, tight, set in Plex Sans; the decode effect only swaps glyphs (roenu.js). */
.wordmark { margin: 0; font: 600 clamp(6rem, 27vw, 17rem)/0.82 var(--vv-font-sans); letter-spacing: -0.065em;
  font-variant-ligatures: none; white-space: nowrap; }
.wordmark__dot { color: var(--vv-color-primary); }

.intro { display: grid; gap: var(--vv-space-6); margin-top: var(--vv-space-10); }
.lede { max-width: 34ch; margin: 0; font: 400 clamp(1.25rem, 2.6vw, 1.75rem)/1.35 var(--vv-font-sans); letter-spacing: -0.01em; }
.lede a { color: var(--vv-color-on-stage); text-decoration-color: var(--vv-color-primary); text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px; }
.meta { display: flex; flex-wrap: wrap; gap: var(--vv-space-2) var(--vv-space-6); margin: 0; padding: 0; list-style: none;
  font: 400 var(--vv-type-small)/1.5 var(--vv-font-mono); color: var(--vv-color-on-surface-variant); }
.meta time { color: var(--vv-color-on-stage); font-variant-numeric: tabular-nums; }

/* The bridge between roenu.dev and roenu.com: one quiet mono line, the accent only on interaction. */
.bridge { margin: 0; }
.bridge a { display: inline-flex; align-items: center; gap: 0.5ch; min-height: var(--vv-touch-target);
  font: 400 var(--vv-type-small)/1.4 var(--vv-font-mono); color: var(--vv-color-on-surface-variant); text-decoration: none;
  transition: color var(--vv-motion-short) var(--vv-ease-standard); }
.bridge a span { transition: transform var(--vv-motion-medium) var(--vv-ease-standard); }
.bridge a:hover, .bridge a:focus-visible { color: var(--vv-color-primary); }
.bridge a:hover span, .bridge a:focus-visible span { transform: translateX(3px); }
.bridge a:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; border-radius: var(--vv-shape-sm); }

/* A single hairline that draws once under the hero (load only, no loop). */
.rule { height: 1px; margin-top: var(--vv-space-10); background: var(--vv-color-outline-variant); transform-origin: left;
  animation: rn-draw 1.2s var(--vv-ease-decelerate) 0.3s both; }
@keyframes rn-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Elsewhere: one row per place, mono, hairlines; flat, the accent only on interaction. */
.links { max-width: calc(var(--vv-layout-max) + 2 * var(--vv-layout-margin)); margin: var(--vv-space-16) auto;
  padding-inline: var(--vv-layout-margin); box-sizing: border-box; }
.links__title { margin: 0 0 var(--vv-space-4); padding-left: var(--vv-space-2); font: 500 var(--vv-type-label)/1 var(--vv-font-mono); letter-spacing: 0.08em;
  text-transform: lowercase; color: var(--vv-color-on-surface-variant); }
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--vv-color-outline-variant); }
.row { border-bottom: 1px solid var(--vv-color-outline-variant); }
.row__link {
  display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: var(--vv-space-4);
  min-height: 64px; padding: 0 var(--vv-space-2); color: var(--vv-color-on-surface); text-decoration: none;
  font: 400 var(--vv-type-body)/1.3 var(--vv-font-mono); background: none; border: 0; width: 100%; text-align: left;
  cursor: pointer; border-radius: var(--vv-shape-sm);
  transition: background-color var(--vv-motion-short) var(--vv-ease-standard);
}
.row__label { color: var(--vv-color-on-surface-variant); transition: color var(--vv-motion-short) var(--vv-ease-standard); }
.row__value { overflow-wrap: anywhere; }
.row__arrow { color: var(--vv-color-on-surface-variant);
  transition: transform var(--vv-motion-medium) var(--vv-ease-standard), color var(--vv-motion-short) var(--vv-ease-standard); }
.row__link:hover, .row__link:focus-visible { background: var(--vv-color-surface-container-low); }
.row__link:hover .row__label, .row__link:focus-visible .row__label,
.row__link:hover .row__arrow, .row__link:focus-visible .row__arrow { color: var(--vv-color-primary); }
.row__link:hover .row__arrow, .row__link:focus-visible .row__arrow { transform: translate(3px, -3px); }
.row__link:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; }
.row__link[data-revealed] .row__arrow { transform: none; }
.mail-note { margin: var(--vv-space-3) 0 0; font: 400 var(--vv-type-small)/1.5 var(--vv-font-sans); color: var(--vv-color-on-surface-variant); }

/* 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; }
.prose .row__link { padding-inline: 0; min-height: 48px; grid-template-columns: auto 1fr; }

.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; gap: var(--vv-space-3);
  border-top: 1px solid var(--vv-color-outline-variant); padding-top: var(--vv-space-5); }
.footer__row { align-items: center; }
.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(86svh - 2 * var(--stage-margin)); padding-top: 104px; }
  .row__link { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 2px; padding-block: var(--vv-space-3); }
  .row__label { grid-column: 1; font-size: var(--vv-type-small); }
  .row__value { grid-column: 1; }
  .row__arrow { grid-column: 2; grid-row: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .rule { animation: none; }
  .row__link, .row__label, .row__arrow, .nav__links a::before, .bridge a, .bridge a span { transition: none; }
  .row__link:hover .row__arrow, .row__link:focus-visible .row__arrow, .bridge a:hover span { transform: none; }
}