@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@500&display=swap");

:root {
  --display: "Marcellus", serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --bg: #fff; --ink: #000; --soft: #555; --line: #e2e2e2; --accent: #7a5a2f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.7 var(--body); }

.site { display: grid; grid-template-columns: 11rem minmax(0, 40rem); gap: 3rem;
        max-width: 56rem; margin: 0 auto; padding: 4rem 1.5rem 4rem; }
nav { position: sticky; top: 4rem; align-self: start; display: flex; flex-direction: column; gap: .6rem;
      font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
nav a { color: var(--soft); text-decoration: none; padding-left: .8rem; border-left: 2px solid transparent; }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); border-left-color: var(--accent); }

@media (max-width: 720px) {
  .site { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  nav { position: static; flex-direction: row; gap: 1.5rem; }
  nav a { padding: 0 0 .3rem; border-left: 0; border-bottom: 2px solid transparent; }
  nav a[aria-current="page"] { border-bottom-color: var(--accent); }
}

h1 { font: 400 2.8rem/1.05 var(--display); margin: 0 0 .5rem; }
.tagline { font: 400 1.25rem/1.4 var(--display); color: var(--soft); margin: 0 0 2.5rem; }
h2 { font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
     color: var(--soft); margin: 3rem 0 1.2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
ul { padding: 0; list-style: none; }
li { margin: 0 0 1rem; }
li strong { display: block; font-weight: 600; }
.questions li { margin-bottom: .5rem; font-style: italic; }
a { color: var(--accent); }

.books li { margin-bottom: .55rem; }
.books cite { font-style: normal; font-weight: 600; }
.books span { color: var(--soft); }