/* Penny Shima Glanz — based on the Twenty Twenty-Three look */

:root {
  --base: #ffffff;
  --contrast: #000000;
  --secondary: #345c00;   /* dark green: buttons, link hover */
  --primary: #9dff20;     /* bright green accent */
  --tertiary: #f6f6f6;    /* light grey panels */
  --now-tint: #d2c5ff24;  /* lavender tint behind the Now page update */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --small: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  --medium: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  --large: clamp(1.75rem, 1.73rem + 0.1vw, 1.875rem);
  --x-large: 2.25rem;

  --gutter: clamp(1.5rem, 5vw, 2rem);
  --space-40: clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem);
  --space-50: clamp(2.5rem, 8vw, 4.5rem);
  --content: 650px;
  --wide: 1200px;
}

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

body {
  margin: 0;
  background: var(--base);
  color: var(--contrast);
  font-family: var(--font);
  font-size: var(--medium);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; }

h1, h2, h3 { font-weight: 400; line-height: 1.4; margin: 1.5em 0 .5em; }
h1 { font-size: clamp(2.5rem, 2rem + 2vw, 3.625rem); line-height: 1.2; }
h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3.25rem); line-height: 1.2; }
h3 { font-size: var(--x-large); }
p, ul, ol, figure { margin: 0 0 1.5rem; }
figure { margin-inline: 0; }

a { color: var(--contrast); text-decoration: underline; }
a:hover { color: var(--secondary); text-decoration: none; }
a:focus { text-decoration: underline dashed; }
a:active { color: var(--secondary); text-decoration: none; }

.small { font-size: var(--small); }
.skip-link { position: absolute; left: -999em; }
.skip-link:focus { left: 1rem; top: 1rem; padding: .75rem 1rem; background: var(--base); z-index: 100; }

/* Layout */
.wrap { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); width: 100%; }
.content { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.content.wide { max-width: calc(1080px + 2 * var(--gutter)); }
.page { padding-block: var(--space-50); }
.page > h1:first-child { margin-top: 0; margin-bottom: var(--space-40); }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.clearfix::after, .page::after { content: ""; display: table; clear: both; }

/* Header and footer */
.site-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: var(--space-40); }
.site-title { margin: 0; font-size: var(--large); font-weight: 400; }
.site-title a { text-decoration: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; color: var(--contrast); }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: var(--small); padding-block: var(--space-40); }
.site-footer p { margin: 0; }

/* Buttons */
.button {
  display: inline-block; background: var(--secondary); color: var(--base);
  padding: calc(.667em + 2px) calc(1.333em + 2px); text-decoration: none; border-radius: 0; text-align: center;
}
.button:visited { color: var(--base); }
.button:hover, .button:focus { background: var(--contrast); color: var(--base); }
.buttons { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-bottom: 2.5rem; }
.buttons .button { width: 75%; }
.buttons-half { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.buttons-half .button { width: calc(50% - .5rem); }
@media (max-width: 600px) { .buttons .button, .buttons-half .button { width: 100%; } }

.section-heading { font-size: var(--medium); font-weight: 700; margin: 2.5rem 0 1rem; }

/* Home */
.home-title { font-size: 36px; line-height: 1.3; margin: 0 0 1.5rem; }
.portrait img { border-radius: 9999px; display: block; }
.portrait { max-width: 300px; }
.portrait-large { max-width: 350px; }
.portrait-large img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 600px) { .portrait.alignright { float: none; margin: 0 auto 1.5rem; } }

/* Now page */
.now-box { background: var(--now-tint); padding: clamp(1.5rem, 5vw, 2rem); margin-bottom: 1.5rem; }
.now-box p:last-child { margin-bottom: 0; }
.now-updated { line-height: 1; }
.now-footnote { margin-top: 4rem; }

/* Book reviews: list */
.reviews-intro { background: var(--tertiary); padding: 1rem 1.25rem; margin-bottom: 2.5rem; }
.reviews-intro p:last-child { margin-bottom: 0; }
.review-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-50) 1.5rem; }
.review-grid img { display: block; width: 100%; height: clamp(15vw, 30vh, 400px); object-fit: contain; object-position: left; }
.review-grid h2 { font-size: var(--large); font-style: italic; font-weight: 500; margin: 1rem 0 .25rem; }
.review-grid h2 a { text-decoration: none; }
.review-grid h2 a:hover { text-decoration: underline; }
.review-grid p { margin: 0; font-size: var(--small); }
@media (max-width: 900px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .review-grid { grid-template-columns: 1fr; } .review-grid img { height: 60vw; } }

/* Book reviews: single */
.book-card { margin-bottom: 1.5rem; }
.book-card .cover { float: left; width: 350px; max-width: 45%; margin: 0 1.5rem 1rem 0; }
.find-copy p { line-height: 1; margin-bottom: .75rem; }
.find-copy ul { padding: 0; margin: 0 0 1.5rem; list-style: none; }
.netgalley { font-size: var(--medium); }
.book-card::after { content: ""; display: table; clear: both; }
.review-body ol.footnotes { font-size: var(--small); }
.review-meta { border-top: 1px solid var(--contrast); margin-top: 3rem; padding-top: 1rem; font-size: var(--small); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }
.review-meta p { margin: 0; }
@media (max-width: 560px) { .book-card .cover { float: none; max-width: 70%; margin: 0 0 1rem; } }