/* wateo.net: one stylesheet for every page. No fonts fetched, no animations, no transitions, no pixel units: every size is a multiple of --ru (the shorter screen side's hundredth), as on ferros.org and passless.org. The one media query below is what defines --ru; there are no layout breakpoints. */
:root {
   --ru: 1vw;
}

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

/* Every colour is a mix of two lights, never picked in sRGB: the logo's green (VSF RGB's 523 nm primary with the least Illuminant E added to fit sRGB: VSF linear (0.406, 1, 0.406) = #00FF93) and E white at sRGB's brightest (linear 1, 0.787, 0.754 = #FFE5E1; never D65 #FFFFFF). The dark greens are that green scaled down in linear light; the text greens mix in E white. Warn is VSF's own Orange (1, 0.5, 0) brought to the gamut edge the same way (#FF8B00). */
:root {
   --bg: #00220F;
   /* the green at 1/64 */
   --band: #003118;
   /* the green at 1/32: the nav band and the doors */
   --line: #004725;
   /* the green at 1/16 */
   --ink: #FFE5E1;
   /* E white: headings and the lines that matter */
   --body: #90BC93;
   /* half E, half green, at 1/2 */
   --dim: #69896B;
   --faint: #354736;
   --accent: #00FF93;
   --warn: #FF8B00;
   --mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
}

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

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

/* The band: the nav sits on the green at 1/32, edge to edge, above the page. */
nav {
   font-family: var(--mono);
   font-size: calc(1.8 * var(--ru));
   line-height: calc(4 * var(--ru));
   text-align: center;
   background: var(--band);
   border-bottom: calc(0.1 * var(--ru)) solid var(--line);
   padding: calc(1.4 * var(--ru)) calc(2 * var(--ru));
}

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

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

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

/* The Home link is the mark: the disc and its bar. */
nav .mark img {
   height: calc(3.6 * var(--ru));
   width: auto;
   vertical-align: middle;
}

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

h1 {
   font-family: var(--mono);
   font-weight: 400;
   font-size: calc(4 * var(--ru));
   letter-spacing: 0.02em;
   color: var(--ink);
   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: var(--ink);
}

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(--accent);
}

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;
}

/* The logo stands where the name was. */
.logo {
   display: block;
   width: calc(20 * var(--ru));
   height: auto;
   margin: 0 auto calc(1 * var(--ru));
}

/* The 404's big number. */
.name {
   font-family: var(--mono);
   font-weight: 400;
   font-size: calc(14 * var(--ru));
   line-height: 1;
   color: var(--accent);
   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,
.facts {
   color: var(--ink);
}

.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(--accent);
   text-decoration: none;
   background: var(--band);
   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(--accent);
}

/* 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));
   margin: calc(4 * var(--ru)) 0 calc(1 * var(--ru));
}

.mail a {
   color: var(--accent);
}

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);
}