:root {
  color-scheme: dark;
  --bg: #07090a;
  --ink: #c8cdcb;
  --dim: #748087;
  --faint: #4d585e;
  --note: #68777e;
  --focus: #82959e;
}

* { box-sizing: border-box; }

html,
body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto 1.65fr;
  justify-items: center;
  padding: 2rem 1.5rem;
  color: var(--ink);
  background: var(--bg) url("floodplain.webp") center / cover no-repeat;
  font: 400 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Vignette: keeps the landscape distant and the center readable. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 15%, rgba(3, 5, 6, 0.13) 64%, rgba(3, 5, 6, 0.34)),
    linear-gradient(180deg, rgba(4, 6, 7, 0.5), rgba(4, 6, 7, 0.28) 58%, rgba(4, 6, 7, 0.08));
}

/* Static film grain layer. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* Static rain texture. */
.rain {
  position: fixed;
  inset: -12%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%238ba0a7' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M18-20 4 28M75 12 60 64M142-8 125 51M204 20 191 63M39 106 28 144M111 84 95 136M182 119 169 162M65 176 55 210M151 169 135 220'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
  filter: blur(0.15px);
  mask-image: linear-gradient(180deg, transparent 2%, #000 18%, #000 88%, transparent 100%);
}

::selection {
  background: #91a4ac;
  color: #07090a;
}

.skip {
  position: fixed;
  left: -999px;
  top: 1rem;
  z-index: 20;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
}

.skip:focus { left: 1rem; }

main {
  grid-row: 2;
  position: relative;
  z-index: 4;
  width: min(15rem, 100%);
}

.mark {
  margin: 0 0 2rem;
  color: var(--faint);
  font-size: 0.75rem;
  letter-spacing: 0.31em;
  text-align: center;
  text-indent: 0.31em;
  white-space: nowrap;
}

.mark .dot { color: #90a2aa; }

.mrchb {
  margin: -1rem 0 2.5rem;
  color: #5d6c73;
  font-size: 0.72rem;
  letter-spacing: 0.55em;
  text-align: center;
  text-indent: 0.55em;
}

.links {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.links li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 1rem 0;
}

.links a,
.links .nolink,
.links .plain {
  font-size: 1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.links a {
  color: var(--dim);
  text-decoration: none;
}

.links a:hover,
.links a:focus-visible {
  color: #e1e4e0;
  text-shadow: 0 0 1.4rem rgba(144, 162, 170, 0.28);
}

.links a:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 0.4rem;
}

.links .nolink { color: var(--faint); }
.links .plain { color: var(--dim); }

.note {
  position: absolute;
  left: calc(100% + 1rem);
  top: 50%;
  color: var(--note);
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%);
}

.links li:hover .note,
.links li:focus-within .note { opacity: 0.78; }

@media (hover: none), (max-width: 600px) {
  body {
    grid-template-rows: 0.82fr auto 1.45fr;
    padding-inline: 1.25rem;
  }

  .links li { flex-wrap: wrap; }

  .note {
    position: static;
    flex-basis: 100%;
    margin-top: 0.14rem;
    text-align: center;
    opacity: 0.52;
    transform: none;
  }

  .links li:hover .note,
  .links li:focus-within .note { opacity: 0.72; }
}