:root {
  color-scheme: light;
  --paper: #fff7ee;
  --card: #fffdfa;
  --ink: #302139;
  --secondary: #65536b;
  --line: #e5cddb;
  --pink: #f9d9e8;
  --berry: #722044;
  --space: 8px;
  --curve: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.5 system-ui, sans-serif; }
main { width: min(100%, 38rem); margin-inline: auto; padding: calc(4 * var(--space)) calc(2 * var(--space)); }
header { padding: 0 var(--space) calc(3 * var(--space)); }
header img { display: block; border-radius: 50%; }
header p { color: var(--berry); font-weight: 750; margin: var(--space) 0 0; }
h1 { font-size: clamp(2rem, 8vw, 3.25rem); letter-spacing: -.045em; line-height: 1.1; margin: 0; }
article { background: var(--card); border: 1px solid var(--line); border-radius: var(--curve); padding: calc(2 * var(--space)); margin-bottom: calc(2 * var(--space)); }
.series { font-size: .875rem; color: var(--berry); font-weight: 750; }
h2 { font-size: 1.55rem; letter-spacing: -.025em; line-height: 1.2; margin: 2px 0 var(--space); }
p { margin: 0 0 var(--space); }
.details { color: var(--secondary); }
ul { list-style: none; padding: 0; margin: calc(2 * var(--space)) 0 0; display: grid; gap: var(--space); }
li a { display: flex; align-items: center; justify-content: space-between; gap: var(--space); min-height: 48px; padding: var(--space) calc(1.5 * var(--space)); border: 1px solid var(--line); border-radius: var(--space); color: var(--berry); text-decoration: none; font-weight: 680; }
li a.primary { background: var(--pink); }
li a:hover { text-decoration: underline; }
li a:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
li a:active { background: var(--pink); }