/* nevienaldziba.lv — placeholder
   Palette: dolomite paper, green-black ink, Latvian carmine. */

:root {
  --paper:   #e4e5df;
  --lift:    #f0f1eb;
  --ink:     #1e2320;
  --absent:  #757970;
  --muted:   #5a5e57;
  --carmine: #96202f;
  --rule:    #b6b9b0;
  --grain:   .05;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #191c19;
    --lift:    #242823;
    --ink:     #e8e9e2;
    --absent:  #7d827a;
    --muted:   #949a91;
    --carmine: #df6274;
    --rule:    #3a3f39;
    --grain:   .07;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Petrona", Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* A soft rise of light behind the word, plus paper grain.
   Both are painted once, behind everything, and never move. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body::before {
  background: radial-gradient(120% 78% at 50% 34%, var(--lift), transparent 68%);
}
body::after {
  opacity: var(--grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  body::after { mix-blend-mode: screen; }
}

.stage {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(22px, 3.4vw, 54px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(40px, 8vh, 96px);
}

/* ---------- the word ---------- */

.hero { align-self: center; }

.word {
  margin: 0;
  /* One line, always. The word is 6.41em wide at its heaviest, so the size is
     capped both by the viewport and by the space left inside the padding. */
  font-size: min(13.9vw, calc((100vw - 44px) / 6.68), 17.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  font-weight: 400;
  white-space: nowrap;
  hyphens: none;
}

.ne {
  color: var(--carmine);
  font-weight: 760;
  font-variation-settings: "wght" 760;
}

.rest { white-space: nowrap; }

/* Each letter carries its own presence, 0 (adrift) to 1 (held). */
.l {
  --p: 1;
  display: inline-block;
  color: var(--absent);
  color: color-mix(in oklab, var(--ink) calc(var(--p) * 100%), var(--absent));
  font-weight: calc(210 + var(--p) * 570);
  font-variation-settings: "wght" calc(210 + var(--p) * 570);
  transform:
    translateY(calc(var(--dy, 0em) * (1 - var(--p))))
    rotate(calc(var(--rot, 0deg) * (1 - var(--p))));
  will-change: transform, font-weight;
}

.tagline {
  margin: clamp(26px, 3.4vw, 58px) 0 0;
  max-width: 22ch;
  font-size: clamp(1.35rem, 3.2vw, 2.35rem);
  line-height: 1.24;
  font-weight: 330;
  font-variation-settings: "wght" 330;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* ---------- the ground ---------- */

.four {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-wrap: wrap;
  gap: .5em clamp(1.4em, 3.6vw, 3em);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  font-weight: 520;
  font-variation-settings: "wght" 520;
  letter-spacing: .004em;
}

hr {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--rule);
}

footer {
  margin-top: clamp(12px, 1.4vw, 20px);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .03em;
}

/* ---------- narrow ---------- */

@media (max-width: 646px) {
  .tagline { max-width: 17ch; }
  .four {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55em 1.5em;
  }
}

/* ---------- 404 ---------- */

.mark {
  margin: 0 0 clamp(18px, 2.2vw, 34px);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 560;
  font-variation-settings: "wght" 560;
  letter-spacing: -.01em;
}
.mark .ne { font-weight: 760; }
.mark a { color: inherit; text-decoration: none; }
.mark a:hover { text-decoration: underline; text-underline-offset: .22em; }

.lost {
  margin: 0;
  font-size: clamp(2.3rem, 7.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 380;
  font-variation-settings: "wght" 380;
  max-width: 13ch;
}
.lost + .tagline {
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  font-weight: 360;
  font-variation-settings: "wght" 360;
  max-width: 30ch;
  margin-top: clamp(14px, 1.6vw, 22px);
  color: var(--muted);
}

.back {
  margin: clamp(22px, 3vw, 38px) 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  font-variation-settings: "wght" 500;
}
.back a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: .18em;
  border-bottom: 2px solid var(--carmine);
}
.back a:hover { color: var(--carmine); }

/* ---------- floor ---------- */

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

@media (prefers-reduced-motion: reduce) {
  .l { --p: 1 !important; transform: none; }
  * { animation: none !important; transition: none !important; }
}