:root {
  --paper: #fff;
  --ink: #16171a;
  --soft: #6a6d73;
  --rule: #e4e4e1;
  --link: #1d4ed8;
  --wave: #1d4ed8;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #151515;
  --ink: #e6e4df;
  --soft: #9a9892;
  --rule: #2c2c2a;
  --link: #8fb0ff;
  --wave: #8fb0ff;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151515;
    --ink: #e6e4df;
    --soft: #9a9892;
    --rule: #2c2c2a;
    --link: #8fb0ff;
      --wave: #8fb0ff;
    color-scheme: dark;
  }
}

html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
html.fading, html.fading body { transition: background-color 0.3s, color 0.3s; }

body {
  position: relative;
  margin: 0;
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
  hanging-punctuation: first;
}

main { max-width: 36em; margin: 0 auto; padding: 11vh 20px 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

abbr[title] { text-decoration: none; cursor: help; }
abbr[title]:hover { text-decoration: underline dotted; text-underline-offset: 3px; }

h1 { margin: 0; font-size: 1.6em; font-weight: normal; line-height: 1.15; letter-spacing: -0.005em; }
.mark {
  display: inline-block;
  width: 0.98em;
  height: 0.72em;
  margin-right: 0.42em;
  vertical-align: 0;
  overflow: visible;
}
.mark path { fill: none; stroke: var(--link); stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

h2 { margin: 2.4em 0 0.8em; font-size: 1em; font-weight: bold; }
p { margin: 0 0 0.9em; text-wrap: pretty; }

.contact a { margin-right: 0.9em; }

.wave {
  padding-bottom: 5px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 0 no-repeat;
}
.wave:hover {
  cursor: default;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='%231d4ed8' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 16px 6px;
  background-repeat: repeat-x;
  animation: signal 0.9s linear infinite;
}
:root[data-theme="dark"] .wave:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='%238fb0ff' stroke-width='1.2'/%3E%3C/svg%3E"); }
@keyframes signal { to { background-position: 16px 100%; } }

dl { margin: 0; display: grid; grid-template-columns: 5.6em 1fr; column-gap: 1.2em; }
dt { color: var(--soft); font-size: 0.84em; padding-top: 0.22em; font-variant-numeric: tabular-nums; }
dd { margin: 0 0 1.05em; }

.aside { color: var(--soft); }

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 0.6s;
  --clear: 19.5em;
  -webkit-mask-image: linear-gradient(to right, #000 calc(50% - var(--clear) - 4em), transparent calc(50% - var(--clear)), transparent calc(50% + var(--clear)), #000 calc(50% + var(--clear) + 4em));
  mask-image: linear-gradient(to right, #000 calc(50% - var(--clear) - 4em), transparent calc(50% - var(--clear)), transparent calc(50% + var(--clear)), #000 calc(50% + var(--clear) + 4em));
}
:root[data-theme="dark"] .sky { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky { opacity: 1; }
}
.sky .twinkle { animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.08; } }

::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

.masthead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 1.15em; }

.theme {
  flex: none;
  margin-right: -8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--soft);
  cursor: pointer;
}
.theme:hover { color: var(--ink); }
.theme:focus-visible { outline: 1px solid var(--link); outline-offset: 2px; }
.theme svg { width: 18px; height: 18px; transition: transform 0.5s ease; }
.theme:hover svg { transform: rotate(-18deg); }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}

footer { max-width: 45em; margin: 4.5em auto 0; padding: 1em 0 3em; box-sizing: content-box; border-top: 1px solid var(--rule); font-size: 0.8em; color: var(--soft); }


@media (max-width: 900px) {
  .sky {
    position: absolute;
    height: 70vh;
    -webkit-mask-image: linear-gradient(#000 0, #000 34px, transparent 66px);
    mask-image: linear-gradient(#000 0, #000 34px, transparent 66px);
  }
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  main { padding-top: 3.6em; }
  footer { margin: 4.5em 20px 0; }
  h1 { font-size: 1.42em; }
  dl { display: block; }
  dt { padding: 0; }
  dd { margin-bottom: 1.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .wave:hover { animation: none; }
  .theme svg { transition: none; }
  .sky .twinkle { animation: none; }
}

@media print {
  :root { --paper: #fff; --ink: #000; --soft: #444; --link: #000; color-scheme: light; }
  body { font-size: 10.5pt; }
  main { margin: 0; padding: 0; max-width: none; }
  .theme, .aside, .mark, .sky, footer { display: none; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--soft); }
  dd { break-inside: avoid; }
}