:root {
  color-scheme: light dark;
  --paper: #FFFFFF;
  --ink: #211E1B;
  --copy: #302C27;
  --muted: #A3165C;
  --date: #A3165C;
  --line: rgba(163, 22, 92, 0.24);
  --magenta: #A3165C;
  --magenta-deep: #7C0F44;
  --link-underline: rgba(163, 22, 92, 0.28);
  --select: rgba(163, 22, 92, 0.16);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 604px;
}

/* Dark mode: warm near-black paper, kept off pure black so it still reads as print. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120F;
    --ink: #F4EFE6;
    --copy: #DDD5C9;
    --muted: #E97BA8;
    --date: #E97BA8;
    --line: rgba(233, 123, 168, 0.28);
    --magenta: #E97BA8;
    --magenta-deep: #F7AFCB;
    --link-underline: rgba(233, 123, 168, 0.34);
    --select: rgba(233, 123, 168, 0.24);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--copy);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--magenta);
  border-bottom: 1px solid var(--link-underline);
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s;
}
a:hover {
  color: var(--magenta-deep);
  border-bottom-color: var(--magenta-deep);
}

::selection {
  background: var(--select);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}

p { margin: 0; }
h1, h2 { margin: 0; font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  transform: translateY(-160%);
  padding: 9px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  border: 0;
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

.page {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 28px 76px;
}

.intro { padding-bottom: 48px; }
.intro h1 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.intro .dot { color: var(--magenta); }
.kicker {
  margin-top: 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.375;
}
.tagline {
  margin-top: 14px;
  color: var(--copy);
  font-size: 18px;
  line-height: 1.5;
}

.section { padding-bottom: 56px; }
.section:last-child { padding-bottom: 0; }
.section h2 {
  margin-bottom: 16px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.section p {
  margin-bottom: 14px;
  color: var(--copy);
  text-wrap: pretty;
}
.section p:last-child { margin-bottom: 0; }

.work {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.work li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 18px;
  line-height: 1.55;
}
.date {
  color: var(--date);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.entry {
  color: var(--copy);
  text-wrap: pretty;
}

.site-footer {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 28px 56px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.site-footer a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
}
.site-footer a:hover {
  color: var(--magenta-deep);
  border-bottom-color: var(--magenta-deep);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.intro,
.section,
.site-footer { animation: rise 0.6s both; }
.section:nth-of-type(2) { animation-delay: 0.06s; }
.section:nth-of-type(3) { animation-delay: 0.12s; }
.site-footer { animation-delay: 0.18s; }

@media (min-width: 600px) {
  .work li {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }
  .date { flex: 0 0 168px; }
}

@media (max-width: 480px) {
  .page { padding: 48px 22px 64px; }
  .site-footer { padding: 18px 22px 48px; }
  .intro h1 { font-size: 22px; }
  .kicker { font-size: 15px; }
  .section h2 { font-size: 19px; }
  .section p,
  .work li,
  .tagline { font-size: 17.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro,
  .section,
  .site-footer { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}