/* wateo.net: one stylesheet for every page. No fonts fetched, no pixels: every size is a multiple of --ru (the shorter screen side's hundredth), as on ferros.org and passless.org. */
:root {
   --ru: 1vw;
}

@media (min-aspect-ratio: 1/1) {
   :root {
      --ru: 1vh;
   }
}

:root {
   --bg: #0a0e13;
   --ink: #e1e8f0;
   --dim: #8b949e;
   --faint: #55606b;
   --line: #30363d;
   --sea: #3fd8e0;
   --warn: #ffb347;
   --mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background: var(--bg);
   color: var(--ink);
   font-family: Charter, 'Bitstream Charter', Georgia, serif;
   font-size: calc(2.2 * var(--ru));
   line-height: 1.75;
}

main {
   width: min(calc(94 * var(--ru)), 72ch);
   margin: 0 auto;
   padding: calc(6 * var(--ru)) calc(2 * var(--ru)) calc(12 * var(--ru));
}

nav {
   font-family: var(--mono);
   font-size: calc(1.8 * var(--ru));
   text-align: center;
   margin-bottom: calc(6 * var(--ru));
}

nav a {
   color: var(--dim);
   text-decoration: none;
   white-space: nowrap;
}

nav a:hover,
nav a[aria-current] {
   color: var(--sea);
}

nav .sep {
   color: var(--faint);
}

h1 {
   font-family: var(--mono);
   font-weight: 400;
   font-size: calc(4 * var(--ru));
   letter-spacing: 0.02em;
   margin-bottom: calc(2 * var(--ru));
}

h2 {
   font-family: var(--mono);
   font-weight: 400;
   font-size: calc(1.9 * var(--ru));
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--dim);
   margin: calc(5 * var(--ru)) 0 calc(1.5 * var(--ru));
   border-bottom: calc(0.1 * var(--ru)) solid var(--line);
   padding-bottom: calc(0.6 * var(--ru));
}

p {
   margin: calc(1.5 * var(--ru)) 0;
}

strong {
   font-weight: 600;
   color: #fff;
}

a {
   color: var(--ink);
   text-decoration: underline;
   text-decoration-color: var(--faint);
   text-underline-offset: calc(0.4 * var(--ru));
}

a:hover {
   text-decoration-color: var(--sea);
}

ol,
ul {
   margin: calc(1.5 * var(--ru)) 0;
   padding-left: calc(3 * var(--ru));
}

li {
   margin: calc(0.8 * var(--ru)) 0;
}

.quiet {
   color: var(--dim);
}

/* Home */
.home {
   text-align: center;
}

.name {
   font-family: var(--mono);
   font-weight: 400;
   font-size: calc(14 * var(--ru));
   line-height: 1;
   color: var(--sea);
   text-shadow: 0 0 calc(2 * var(--ru)) rgba(63, 216, 224, 0.35);
   margin: calc(4 * var(--ru)) 0 calc(1 * var(--ru));
}

.say {
   font-family: var(--mono);
   font-size: calc(2 * var(--ru));
   color: var(--dim);
   letter-spacing: 0.08em;
}

.line {
   font-size: calc(3.2 * var(--ru));
   line-height: 1.5;
   margin: calc(5 * var(--ru)) 0 calc(3 * var(--ru));
}

.facts {
   list-style: none;
   padding: 0;
   font-family: var(--mono);
   font-size: calc(2.1 * var(--ru));
}

.facts li {
   margin: calc(0.6 * var(--ru)) 0;
}

.status {
   font-family: var(--mono);
   font-size: calc(1.9 * var(--ru));
   color: var(--warn);
   margin: calc(4 * var(--ru)) 0;
}

.doors {
   list-style: none;
   padding: 0;
   margin: calc(5 * var(--ru)) auto 0;
   width: min(100%, 44ch);
}

.doors li {
   margin: calc(2 * var(--ru)) 0;
}

.doors a {
   display: block;
   font-family: var(--mono);
   font-size: calc(2.1 * var(--ru));
   color: var(--sea);
   text-decoration: none;
   border: calc(0.1 * var(--ru)) solid var(--line);
   padding: calc(1 * var(--ru)) calc(1.6 * var(--ru));
}

.doors a:hover {
   border-color: var(--sea);
}

/* Limits: the 911 line is never small */
.no911 {
   border: calc(0.2 * var(--ru)) solid var(--warn);
   padding: calc(2 * var(--ru)) calc(2.4 * var(--ru));
   margin: calc(3 * var(--ru)) 0;
}

.no911 strong {
   display: block;
   font-family: var(--mono);
   font-weight: 400;
   font-size: calc(4 * var(--ru));
   color: var(--warn);
   line-height: 1.2;
   margin-bottom: calc(1 * var(--ru));
}

/* Principles: the invariants */
.invariant {
   font-family: var(--mono);
   font-size: calc(1.6 * var(--ru));
   color: var(--warn);
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.version {
   font-family: var(--mono);
   font-size: calc(1.8 * var(--ru));
   color: var(--dim);
}

.mail {
   font-family: var(--mono);
   font-size: calc(3 * var(--ru));
   color: var(--sea);
   margin: calc(4 * var(--ru)) 0 calc(1 * var(--ru));
}

footer {
   margin-top: calc(8 * var(--ru));
   padding-top: calc(2 * var(--ru));
   border-top: calc(0.1 * var(--ru)) solid var(--line);
   color: var(--faint);
   font-size: calc(1.8 * var(--ru));
   text-align: center;
}

footer p {
   margin: calc(0.6 * var(--ru)) 0;
}

footer a {
   color: var(--dim);
}