:root {
  --black: #000;
  --panel: #050505;
  --ink: #dbdbdb;
  --strong: #ebebeb;
  --link: #fafafa;
  --accent: #f14668;
  --quiet: #8f8f8f;
  --rule: #0a0a0a;
  --hand: "Chalkboard SE", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html {
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--black);
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  max-width: 100vw;
  margin: 32px auto;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

header,
main,
footer {
  padding: 1.5rem;
}

header,
footer {
  background: var(--panel);
}

header {
  position: relative;
}

.profile-photo {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  object-fit: cover;
}

header h1,
header .subtitle {
  padding-right: 11rem;
}

header,
header h1,
header .subtitle {
  font-family: var(--hand);
}

h1,
h2,
.subtitle {
  overflow-wrap: break-word;
  font-family: var(--hand);
}

h1 {
  margin: .67em 0;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}

h2 {
  margin: 1.1428em 0 .5714em;
  color: var(--strong);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.125;
}

.subtitle {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
}

p {
  margin: 0 0 1em;
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--link);
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent);
}

a:hover { color: var(--link); }

hr {
  display: block;
  height: 2px;
  margin: 1.5rem 0;
  border: 0;
  background: var(--rule);
}

details {
  --year-text: var(--ink);
  margin: 0 0 1rem;
}

.story-list details[data-year="2026"] { --year-text: #8fa9bd; }
.story-list details[data-year="2025"] { --year-text: #aa96bd; }
.story-list details[data-year="2024"] { --year-text: #84aa9f; }
.story-list details[data-year="2023"] { --year-text: #b09a70; }
.story-list details[data-year="2022"] { --year-text: #b18b96; }
.story-list details[data-year="2021"] { --year-text: #88a5b7; }
.story-list details[data-year="2020"] { --year-text: #aaa47d; }
.story-list details[data-year="2019"] { --year-text: #a18caf; }
.story-list details[data-year="2018"] { --year-text: #82a99e; }
.story-list details[data-year="2017"] { --year-text: #b29585; }
.story-list details[data-year="2016"] { --year-text: #a590a7; }
.story-list details[data-year="2015"] { --year-text: #8fa5b8; }
.story-list details[data-year="2014"] { --year-text: #aaa579; }
.story-list details[data-year="2009—2014"] { --year-text: #ad9284; }
.story-list details[data-year="1995"] { --year-text: #979ca6; }

summary {
  display: block;
  color: var(--year-text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  list-style: none;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent);
}

summary::-webkit-details-marker { display: none; }

.story-time,
.story-title { display: inline; }

.story-time::after { content: " - "; }

.story-title::after {
  content: " +";
  color: var(--accent);
  text-decoration: none;
}

details[open] .story-title::after { content: " −"; }

.story-list details p {
  margin: .5em 0 1em;
  padding: 0;
  color: var(--year-text);
}

footer { margin-top: 1.5rem; }
footer p { margin: 0; color: var(--quiet); }

@media screen and (min-width: 769px) and (max-width: 1023px) {
  body { max-width: 705px; }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
  body { max-width: 960px; }
}

@media screen and (min-width: 1216px) {
  body { max-width: 1152px; }
}

@media screen and (min-width: 1024px) {
  header,
  main,
  footer { padding: 3rem; }

  .profile-photo {
    top: 3rem;
    right: 3rem;
  }
}

@media screen and (max-width: 600px) {
  .profile-photo {
    position: static;
    display: block;
    width: 7rem;
    height: 7rem;
    margin: 0 0 1.25rem auto;
  }

  header h1,
  header .subtitle {
    padding-right: 0;
  }
}

@media print {
  html { background: #fff; }
  body { margin: 0; color: #111; }
  header, footer { background: transparent; }
  a, summary { color: #111; }
  details:not([open]) > *:not(summary) { display: block; }
}