/* Darselyn — landing v1. No webfonts, no scripts, no third-party requests. */

:root {
  --bg: #0a0c10;
  --fg: #f5f7fa;
  --fg-muted: #b9c1cc;
  --fg-subtle: #98a2b0;
  --rule: rgba(185, 193, 204, 0.30);
  --focus: #8ab4f8;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --gutter: clamp(1.5rem, 1rem + 3.2vw, 5rem);
  --step: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100vh;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Depth without imagery: two very low-alpha washes over the base colour.
   Alphas are capped so the composited background stays WCAG AA against
   the lightest text token (see tools/verify.py). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(115% 75% at 50% -10%, rgba(120, 150, 190, 0.10), transparent 62%),
    radial-gradient(90% 55% at 50% 110%, rgba(90, 120, 160, 0.06), transparent 68%);
}

.page {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--step);
  min-block-size: 100vh;
  min-block-size: 100svh;
  max-inline-size: 84rem;
  margin-inline: auto;
  padding: var(--gutter);
}

.stage {
  align-self: center;
  max-inline-size: 44rem;
}

.wordmark {
  margin: 0;
  font-size: clamp(2.75rem, 1.7rem + 4.6vw, 5.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--fg);
}

.tagline {
  margin: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem) 0 0;
  font-size: clamp(1.125rem, 1rem + 0.75vw, 1.625rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--fg);
  text-wrap: balance;
}

.tagline::after {
  content: "";
  display: block;
  inline-size: 4.5rem;
  block-size: 1px;
  margin-block-start: var(--step);
  background: linear-gradient(90deg, var(--rule), rgba(185, 193, 204, 0));
}

.statement {
  margin: var(--step) 0 0;
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.1875rem);
  line-height: 1.65;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.status {
  margin: clamp(0.875rem, 0.7rem + 0.7vw, 1.25rem) 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
  line-height: 1.6;
  color: var(--fg-subtle);
  text-wrap: pretty;
}

.footer {
  align-self: end;
}

.copyright {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.015em;
  color: var(--fg-subtle);
}

/* The authored line break is a typographic choice for wide viewports only;
   below it, the sentence reflows on its own. */
@media (max-width: 40rem) {
  .statement br {
    display: none;
  }
}

/* Short viewports (landscape phones): keep everything on one screen. */
@media (max-height: 34rem) {
  :root {
    --step: 1rem;
    --gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  }

  .wordmark {
    font-size: clamp(2.25rem, 1.8rem + 2.4vw, 3rem);
  }
}

::selection {
  background: rgba(245, 247, 250, 0.20);
  color: #ffffff;
}

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

@media (prefers-contrast: more) {
  :root {
    --fg-muted: #f5f7fa;
    --fg-subtle: #e3e7ec;
    --rule: rgba(245, 247, 250, 0.6);
  }

  body::before {
    display: none;
  }
}

/* Content is visible by default; motion is added only when it is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .wordmark,
  .tagline,
  .statement,
  .status,
  .footer {
    animation: enter 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .tagline { animation-delay: 80ms; }
  .statement { animation-delay: 160ms; }
  .status { animation-delay: 240ms; }
  .footer { animation-delay: 320ms; }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0.625rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}