@font-face{
  font-family:"Source Serif 4";
  src:url("fonts/source-serif-4.woff2") format("woff2");
  font-weight:200 900;      /* variable weight axis */
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:  #f6f3ec;
  --ink:    #161428;
  --soft:   #3e3c54;
  --accent: #3b5dc9;
  --moon:   #87839a;
}

/* System preference, unless the moon has said otherwise. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:  #14131c;
    --ink:    #f2efe8;
    --soft:   #b4b1c2;
    --accent: #8ba4f0;
    --moon:   #7b7791;
  }
}
:root[data-theme="dark"]{
  --paper:  #14131c;
  --ink:    #f2efe8;
  --soft:   #b4b1c2;
  --accent: #8ba4f0;
  --moon:   #7b7791;
}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}

main{
  max-width:34rem;
  margin:0 auto;
  padding:14vh 24px 18vh;
}

h1{
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 1.6rem;
}

p{ margin:0 0 1.3rem; color:var(--soft); }

a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
a:hover{ color:var(--accent); }
a.mail{ cursor:pointer; }   /* href arrives from the script at the end of the page */

::selection{ background:var(--accent); color:var(--paper); }

/* ---------- the moon ---------- */
.moon{
  position:fixed; top:18px; right:18px;
  width:34px; height:34px; padding:0;
  display:grid; place-items:center;
  background:none; border:0; border-radius:50%;
  color:var(--moon); cursor:pointer;
  transition:color .25s ease, transform .25s ease;
}
.moon svg{ width:17px; height:17px; }
.moon path{
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linejoin:round;
}
.moon:hover{ color:var(--accent); transform:rotate(-12deg); }
.moon:focus-visible{ outline:1.5px solid var(--accent); outline-offset:3px; }

/* Filled once it's night. */
:root[data-theme="dark"] .moon path{ fill:currentColor; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .moon path{ fill:currentColor; }
}

@media (max-width:520px){
  body{ font-size:17px; }
  main{ padding:9vh 22px 12vh; }
  .moon{ top:12px; right:12px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.001ms !important; }
}