@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* paper and ink; the theme follows the system unless the visitor picked one (data-theme). A theme
   change fades the page and the seal together, in .4s */
:root { --paper: #EEEEE7; --ink: #26251E; color-scheme: light; }
:root[data-theme="dark"] { --paper: #1B1B1B; --ink: #E7E6DE; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1B1B1B; --ink: #E7E6DE; color-scheme: dark; }
}

html {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  transition: background-color .4s;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  transition: background-color .4s, color .4s;
}
a { color: inherit; text-decoration: none; }
h1 { margin: 0; font: inherit; }

.mono {
  font: 400 13px/1.2 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.btn, .links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 2px dotted transparent;
  transition: border-color .25s;
}
.btn:hover, .links a:hover, .btn:focus-visible, .links a:focus-visible { border-color: currentColor; outline: none; }

#theme {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 3;
  margin: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
#theme svg { width: 11px; height: 11px; }
html:not(.js) #theme { display: none; }

/* the seal, at rest in the header */
.top { flex: none; width: 100px; height: 100px; margin-top: 56px; }
.seal { display: block; width: 100px; height: 100px; border-radius: 50%; }
.seal:focus-visible { outline: 2px dotted currentColor; outline-offset: 4px; }
.seal svg { display: block; width: 100%; height: 100%; }
/* the ink comes from the body's fading colour; the paper parts fade alongside it */
.seal .pf { fill: var(--paper); transition: fill .4s; }
.seal .ko { fill: var(--paper); stroke: var(--paper); stroke-width: 3.4px; transition: fill .4s, stroke .4s; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 40 is the least room under the seal, for screens too short to centre in; the 40 more below
     keeps the sentence centred on the screen wherever there is room */
  padding: 40px 24px 80px;
  text-align: center;
}
.lede { margin: 0; max-width: 540px; font-size: 23px; line-height: 1.4; text-wrap: balance; }
.lede em { font-style: italic; }
.lede a { border-bottom: 1.5px dotted currentColor; }
.lede a:focus-visible { outline: 2px dotted currentColor; outline-offset: 3px; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.arrow { width: 9px; height: 9px; }

footer { padding: 40px 24px 30px; max-width: 520px; text-align: center; font-size: 14px; line-height: 1.5; }
footer p { margin: 0; }

/* the intro (boot.js sets these classes; seal.js takes them off): the seal waits in the middle of
   the screen at twice its size, everything else waits unseen and untouchable. The seal in the page
   is drawn at rest, so it stays hidden until seal.js has set the intro's first frame (.playing) —
   otherwise the finished seal would flash before the hedgehogs jump to their start */
.intro .seal {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  z-index: 2;
  visibility: hidden;
}
.intro.playing .seal { visibility: visible; }
.veiled .lede, .veiled .links, .veiled footer, .veiled #theme { opacity: 0; pointer-events: none; }