@import url('fonts.css');
:root {
  --bg: #04050b;
  --ink: #e9ecf4;
  --dim: #9aa3b8;
  --line: rgba(233, 236, 244, .3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 300 18px/1.6 'Averia Sans Libre', 'Trebuchet MS', sans-serif;
  background: radial-gradient(120% 80% at 50% 110%, #1d2c6b 0%, #0a1030 38%, var(--bg) 75%); }
main { max-width: 40em; margin: 0 auto; padding: 14vh 16px 10vh; }
h1 { font-weight: 400; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 0 0 2.4em; }
h2 { font-weight: 400; font-size: 20px; margin: 2.2em 0 .6em; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
a:hover, a:focus-visible { text-decoration-color: var(--ink); }
.text { font-size: clamp(26px, 4.4vw, 40px); line-height: 1.32; font-style: italic; font-weight: 300; letter-spacing: -.005em; margin: 0 0 1.6em; }
.text a { text-decoration-thickness: 1px; }
.text a + a::before { content: ' '; }
.about { color: var(--dim); max-width: 32em; }
.foot { color: var(--dim); font-size: 15px; margin-top: 3em; }
.credits p, .credits li { color: var(--ink); }
.credits ul { padding-left: 1.1em; }
.credits li { margin: .25em 0; }
.credits .note { color: var(--dim); font-size: 15px; }

/* The opening page: a faint live scene behind the text. */
.opening #view { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; opacity: .5; pointer-events: none; }
.opening main { position: relative; z-index: 1; }
.opening::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(75% 65% at 40% 45%, rgba(4, 5, 11, .62), rgba(4, 5, 11, .1)); }
.opening #hand, .opening #held { display: none !important; }
#sound { position: fixed; top: 12px; right: 16px; z-index: 2; background: none; border: 0; padding: 6px 0;
  color: var(--dim); font: 400 14px/1 'Averia Sans Libre', 'Trebuchet MS', sans-serif; cursor: pointer; }
#sound:hover, #sound:focus-visible { color: var(--ink); }
/* Each sentence in its piece's colour, so it is clear where one ends and the next begins. */
.text a { text-shadow: 0 0 18px rgba(4, 5, 11, .9), 0 1px 2px rgba(4, 5, 11, .8); }
.text .s1 { color: #8fdcff; text-decoration-color: rgba(143, 220, 255, .45); }
.text .s2 { color: #ffa3cb; text-decoration-color: rgba(255, 163, 203, .45); }
.text .s3 { color: #cdb8ff; text-decoration-color: rgba(205, 184, 255, .45); }
.text .s4 { color: #ffb67a; text-decoration-color: rgba(255, 182, 122, .45); }
.text .s5 { color: #98f0d4; text-decoration-color: rgba(152, 240, 212, .45); }
.text a:hover, .text a:focus-visible { text-decoration-color: currentColor; }