@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=Inter:wght@400;500;600;700&display=swap');
html,
body {
  margin: 0 auto;
  background-color: #fefefe;
  color: #2a2a2a;
  font-family: "Lato", sans-serif;
  font-size: 12pt;
  font-weight: 400;
  line-height: 1.6em;
}

html,
body,
.container {
  height: 100%;
  width: 100%;
}

a {
  color: #C9283E;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #2a2a2a
}

.container {
  display: flex;
  align-items: top;
  justify-content: center;
  margin-top: 2em;
}

.container #nav {
  width: 20%;
  max-width: 400px;
  padding-top: 3.5em;
  /* background-color: yellow; */
}

.container .content {
  max-width: 800px;
  width: 80%;
  /* background-color: blue; */
}

.content ul.books li {
  list-style-type: none;
  margin-left: -40px;
}

.content span.author {
  display: block;
  color: #666;
}

#nav ul li {
  list-style-type: none;
  color: #666;
  padding-left: 8px;
  margin: 2px 0px;
}

#nav ul li.active,
#nav ul li:hover {
  color: #2a2a2a;
  border-left: 4px solid #CE3816;
  padding-left: 4px;
  text-decoration: none;
}

#nav ul li.inactive,
#nav ul li.inactive:hover {
  color: #bbb;
  border-left: none;
  padding-left: 8px;
  text-decoration: none;
}

#nav ul li a:hover,
#nav ul li.active a {
  color: #2a2a2a;
  text-decoration: none;
}

a#home-title {
  position: fixed;
  z-index: 999;
  top: 0px;

  &:hover {
    text-decoration: none;
    color: black;
  }
}

a#home-title i {
  margin: 0.625em 0 0 0.625em;
}

i.icon-nav {
  width: 16px;
  height: 21px;
  padding: 3px 6px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  font-size: 18px;
  display: block;
  /* border: 2px solid rgba(0,0,0,0.04); */
  transition: opacity 200ms ease;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  -ms-transition: opacity 200ms ease;
  text-align: center;
  color: #CE3816;
  background-color: #fff;
  cursor: pointer;
}

i.icon-nav:hover {
  text-decoration: none;
}
/* Earlier yearly lists sit under "2025 books", indented (2026-10-24) */
#nav ul li.year {
  margin-left: 12px;
}
/* === Layout fixes: content-height container, list reset, phone layout (2026-10-24) === */
.container { height: auto; min-height: 100%; }
.content ul.books { padding-left: 0; margin: 0; }
.content ul.books li { margin-left: 0; }
.content ul.books li p { margin: 0; }
#nav ul { padding-left: 0; margin: 0; }
@media (max-width: 720px) {
  .container { flex-direction: column; align-items: stretch; margin-top: 1em; padding: 0 20px; box-sizing: border-box; }
  .container #nav { width: auto; max-width: none; padding-top: 0; margin-bottom: 1.5em; }
  #nav ul { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  #nav ul li, #nav ul li.year { margin: 0; padding-left: 0; border-left: none !important; }
  #nav ul li.active a { color: #C9283E; border-bottom: 2px solid #CE3816; }
  .container .content { width: auto; max-width: none; }
}
/* === Style E "Quiet" (chosen 2026-10-24): monochrome, red only for favorites and the current page === */
body { color: #1d1d1d; }
a { color: #1d1d1d; }
.container { gap: 72px; margin-top: 4.5em; }
.container #nav { width: 185px; flex: 0 0 185px; padding-top: 5.2em; text-align: right; }
.container #nav > div { position: sticky; top: 2em; }
#nav ul li, #nav ul li.year { padding-left: 0; padding-right: 10px; margin: 3px 0; font-size: 0.92em; }
#nav ul li.year { margin-left: 0; margin-right: 0; font-size: 0.86em; }
#nav ul li a { color: #888; }
#nav ul li.active, #nav ul li:hover { border-left: none; padding-left: 0; border-right: 2px solid #CE3816; padding-right: 8px; }
#nav ul li.active a, #nav ul li a:hover { color: #1d1d1d; }
.container .content { max-width: 600px; width: auto; flex: 0 1 600px; }
.content h1 { font-size: 1.9em; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 0.6em; }
.content p.intro { color: #666; font-size: 0.98em; }
.content p.intro a { color: #1d1d1d; border-bottom: 1px solid #ccc; }
.content ul.books { margin-top: 2.4em; }
.content ul.books li { margin-bottom: 2em; }
.content ul.books li > p > a:first-child { font-weight: 700; border-bottom: 1px solid #ddd; }
.content ul.books li > p > a:first-child:hover { border-bottom-color: #1d1d1d; }
.content ul.books li:has(a > strong) > p > a:first-child { color: #C9283E; border-bottom-color: #f0c7cf; }
.content span.author { color: #8a8a8a; font-size: 0.9em; margin: 0.1em 0 0.35em; }
.content ul.books li p a:not(:first-child) { border-bottom: 1px solid #ddd; }

/* Phone layout for style E: sidebar becomes a compact row of links above the list */
@media (max-width: 720px) {
  .container { margin-top: 1.2em; gap: 0; }
  .container #nav { text-align: left; width: auto; flex: none; padding-top: 0; }
  .container #nav > div { position: static; }
  #nav ul { gap: 2px 12px; }
  #nav ul li, #nav ul li.year, #nav ul li.inactive,
  #nav ul li.active, #nav ul li:hover { padding: 0 !important; margin: 0 !important; border: none !important; font-size: 0.85em; }
  #nav ul li.active a { color: #1d1d1d; border-bottom: 2px solid #CE3816; }
  .container .content { flex: none; }
  .content h1 { margin-top: 0.4em; }
}

/* === Fonts (option 3, chosen 2026-10-24): Source Serif 4 for the reading text, Inter for titles,
   authors, headings and the sidebar === */
body, #nav { font-family: "Inter", sans-serif; }
.content { font-family: "Source Serif 4", Georgia, serif; font-size: 1.06em; line-height: 1.6; }
.content h1, .content ul.books li > p > a:first-child, .content span.author { font-family: "Inter", sans-serif; }
.content ul.books li > p > a:first-child { font-size: 0.94em; }
.content h1 { font-weight: 500; letter-spacing: -0.02em; }

/* === Paper (2026-10-24, lightened to #faf6f0): warm cream with a faint grain, like thick letterpress stock === */
html { background-color: #faf6f0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .30 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body { background: transparent; color: #26231f; }
.content ul.books li > p > a:first-child { border-bottom-color: #ddd5c6; }
.content ul.books li p a:not(:first-child), .content p.intro a { border-bottom-color: #d8cfbf; }

/* === Accent: plum (chosen 2026-10-24) replaces the red — favorite titles and the current-page marker === */
.content ul.books li:has(a > strong) > p > a:first-child { color: #5d3a63; border-bottom-color: #d9c9db; }
#nav ul li.active, #nav ul li:hover { border-right-color: #5d3a63; }
@media (max-width: 720px) { #nav ul li.active a { border-bottom-color: #5d3a63; } }

/* === Typography option 3 "Running header" (chosen 2026-10-24) === */
/* Heading: small tracked Inter caps, like a book's running head */
.content h1 { font-family: "Inter", sans-serif; font-weight: 600; font-size: .82em; text-transform: uppercase; letter-spacing: .22em; color: #5a544c; margin: .9em 0 1.6em; }
.content p.intro { font-family: "Source Serif 4", serif; font-size: 1.08em; }
/* Book titles: serif semibold; authors: serif italic */
.content ul.books li > p > a:first-child { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 1.14em; }
.content span.author { font-family: "Source Serif 4", serif; font-style: italic; font-size: .98em; color: #7a7268; margin: .05em 0 .35em; }

/* === Grid & alignment (2026-10-24): sidebar and content start on the same line; 8px rhythm ===
   The first sidebar item ("2025 books") sits on the same 24px line as the running-header h1. */
@media (min-width: 721px) {
  .container { margin-top: 64px; gap: 64px; align-items: flex-start; }
  .container #nav { padding-top: 0; }
  .container #nav > div { top: 32px; }
  #nav ul li { font-size: 14px; line-height: 24px; margin: 0 0 4px; }
  #nav ul li.year { font-size: 13px; margin-left: 0; }
  .content h1 { font-size: 12px; line-height: 24px; margin: 0 0 32px; }
  .content p.intro { margin: 0 0 16px; }
  .content ul.books { margin-top: 40px; }
}