/* Fond Books — Reading Room */

/* Design tokens */
:root {
  /* Source Sans 3 subsets use their own family name; see docs/licenses. */
  --font-ui: "Fond Sans", system-ui, sans-serif;
  --font-title: Literata, Georgia, serif;
  --font-reading: Literata, Georgia, serif;
  --moss-tint: #DCE2D4;
  --moss-border: #BEC8B4;
  --wood: #D8C5AC;
  --wood-edge: #9C7956;
  /* Text colors must clear 4.5:1 on --card, --bg and --muted. */
  --bg:           #EAE4D9;   /* warm parchment */
  --fg:           #2C2C24;   /* deep loam */
  /* Warm bark headings meet the same contrast floor as body text. */
  --heading:      #685A4F;
  --primary:      #5D7052;   /* moss green — 4.78 on card, 4.87 behind --primary-fg */
  --primary-fg:   #F3F4F1;   /* pale mist */
  --primary-hover:#4E5F44;
  --primary-dark: #44543C;   /* deep moss — for text on a tinted moss ground */

  /* Use --secondary for text and buttons; --secondary-bg is decorative only. */
  --secondary:    #84501F;   /* burnt sienna — terracotta, text safe */
  --secondary-bg: #C18C5D;   /* light terracotta — grounds and rules only */

  --accent:       var(--muted);   /* sand */
  --muted:        #DDD7CC;   /* stone — slightly darker to match bg */
  --muted-fg:     #5B5B50;   /* dried grass — 6.11 on card, 4.80 on muted */
  --border:       #CEC8BE;   /* raw timber — step darker */
  --card:         #F5F1EB;   /* card lifts off the darker background */

  /* The footer ground supports pale text at a 7:1 contrast ratio. */
  --footer-bg:    #3F4E37;

  /* Two restrained UI depths; cover illustrations keep their own shadows. */
  --shadow-card:  0 1px 4px rgba(44, 44, 36, 0.04);
  --shadow-soft:  0 4px 12px rgba(44, 44, 36, 0.08);
  --shadow-float: var(--shadow-soft);

  /* Reading scale: 1.25 ratio, with a single metadata size. */
  --t-xs: 0.875rem;
  --t-2xs: var(--t-xs);
  --t-sm: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.5625rem;
  --t-xl: 1.9375rem;
  --t-2xl: 2.4375rem;
  --t-3xl: 3.0625rem;

  /* One 4px-based scale, in rem so spacing follows enlarged text. */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;

  --r-sm: 0.5rem; --r-md: 1rem; --r-lg: var(--r-md); --r-pill: 9999px;

  /* Minimum comfortable touch target. */
  --tap: 44px;

  /* List each transitioned property and duration; focus outlines must appear immediately. */
  --transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease,
                padding 0.18s ease;
  --transition-slow: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
                     box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;

  /* Shared color aliases used by existing components. */
  --forest:       var(--primary);
  --parchment:    var(--muted);
  --sand:         var(--muted);
  --slate:        var(--fg);
  --clay:         var(--muted-fg);
  --white:        #FFFFFF;
  --gold:         var(--secondary);   /* Text-safe terracotta alias. */
  --gold-dim:     rgba(222, 216, 207, 0.7);
  --gold-faint:   rgba(230, 220, 205, 0.4);
  --border-light: rgba(222, 216, 207, 0.5);
}

/* Reset and base styles */
*, *::before, *::after { box-sizing: border-box }

/* Smooth for in-page jumps (decade rows, prize rows, Where to get it); the
   reduced-motion block below returns it to instant. Owner request 2026-09-16. */
html { scroll-behavior: smooth }

body {
  background-color: var(--bg);
  /* Subtle paper grain — SVG feTurbulence at low opacity */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main#content { flex: 1 0 auto }

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  color: var(--heading);
  line-height: 1.2;
  margin-top: 0;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

p { margin-top: 0 }

strong { color: var(--fg); font-weight: 700 }

/* Keyboard focus: an ink ring on light surfaces, with a pale footer override. */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Pill shaped controls need the ring pushed clear of the radius, or it cuts
   the corners. */
.btn:focus-visible,
.subject-chip:focus-visible,
.decade-link:focus-visible,
.search-submit:focus-visible {
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

/* Touch targets for inline links and navigation. */
@media (max-width: 767px) {
  .book-link,
  .year-col-link,
  .read-alike-link,
  .footer-link,
  .footer-bottom-link,
  .sidebar-title-link,
  .subject-card-link,
  .year-book-link,
  .year-award-link,
  .schedule-award-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }

  /* Nav and chips get their padding grown instead: they are already blocks
     and a min-height alone would leave the text top aligned. */
  .decade-link,
.subject-chip {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }
}

/* Utilities */
.full-width   { width: 100%; display: block }

.flex-gap     { display: flex; flex-direction: column; gap: var(--s3) }
.no-bg        { background: transparent !important; border: none !important; box-shadow: none !important }

/* Layout follows source order at every width. */
.wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  max-width: 77.5rem;
  padding: 0 var(--s4);
  margin: var(--s6) auto var(--s7);
  align-items: start;
}
.wrapper > * { min-width: 0 }
.wrapper.single-col { max-width: 65rem }
@media (min-width: 48rem) {
  .wrapper { margin-block: var(--s7); padding-inline: var(--s5) }
}

/* Header: visible navigation and labelled GET search, without a drawer. */
.site-header { padding: var(--s3) var(--s4) 6px }
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  max-width: 82.5rem;
  margin: auto;
  padding: var(--s3) 0 var(--s4);
  border-bottom: 3px solid var(--fg);
}
/* The second, thinner rule of a newspaper masthead. */
.header-inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--fg) }
.logo-container, .header-right { min-width: 0; max-width: 100% }
.logo-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); max-width: 100% }
.logo-icon { width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.logo-text { font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; min-width: 0; color: var(--fg) }
.main-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); width: 100% }
.main-nav .nav-link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--fg); font-size: .875rem; font-weight: 700; padding: var(--s1) 0 }
.main-nav .nav-link:hover, .nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px }
.header-right { flex: 1 1 100% }
@media (min-width: 48rem) {
  .site-header { padding: var(--s4) var(--s5) 6px }
  .header-inner { padding: var(--s4) 0 var(--s5); column-gap: var(--s6) }
  .logo-text { font-size: 2.25rem }
  .main-nav { width: auto; gap: var(--s5) }
  .main-nav .nav-link { font-size: var(--t-sm) }
  .header-right { flex: 1 1 20rem; max-width: 26rem; margin-left: auto }
}

.skip-link {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 2000;
  padding: var(--s3) var(--s4);
  color: var(--fg);
  background: var(--card);
  border: 2px solid var(--fg);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0) }

/* Search result count. */
.search-count {
  margin: var(--s3) 0;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--muted-fg);
}

@media (min-width: 768px) {
  .search-count { font-size: var(--t-sm) }

}

/* 6. SEARCH — ordinary GET forms, usable without JavaScript */
.search-form { width: 100% }
.search-label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--muted-fg);
  margin-bottom: var(--s1);
}
.search-row { display: flex; flex-wrap: wrap; gap: var(--s2) }
.search-input {
  flex: 1 1 10rem;
  min-width: 0;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--muted-fg);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--fg);
  background: var(--card);
}
.search-input::placeholder { color: var(--muted-fg) }
.search-input:focus { border-color: var(--fg) }
.search-submit {
  min-height: var(--tap);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--primary);
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--primary-fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.search-submit:hover { background: var(--primary-hover) }

/* Cards */
.main-card {
  background: var(--card);
  padding: var(--s4);
  border-radius: var(--r-md);
  border: 1px solid rgba(222, 216, 207, 0.65);
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) { .main-card { padding: var(--s6) } }

.sidebar-card {
  background: var(--card);
  padding: var(--s4);
  border-radius: var(--r-md);
  border: 1px solid rgba(222, 216, 207, 0.65);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s4);
  transition: var(--transition-slow);
}

aside { align-self: start }

/* Buttons */
.btn {
  display: inline-flex;
  padding: var(--s2) var(--s4);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  text-align: center;
  transition: var(--transition);

  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  max-width: 100%;
  line-height: 1.5;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);

  box-shadow: var(--shadow-soft);
}

/* btn-gold → terracotta in organic theme */
.btn-gold {
  background: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
  box-shadow: var(--shadow-float);
}

.btn-gold:hover {
  background: var(--fg);
  border-color: var(--fg);

  box-shadow: var(--shadow-soft);
}

/* Outlined actions keep library and free-reading links visibly actionable. */
.btn-outline {
  background: transparent;
  color: var(--primary-dark);
  border-color: var(--primary);
}

.btn-outline:hover,
.btn-outline:focus {
  background: var(--primary);
  color: var(--primary-fg);
}

.btn-small {
  font-size: var(--t-sm);
  padding: var(--s2) var(--s3);
}

/* Typography components */
.section-divider {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--heading);
  border-bottom: 2px solid var(--muted);
  padding-bottom: var(--s2);
  margin-bottom: var(--s4);
  margin-top: 0;
}

.sidebar-title {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  margin-top: 0;
}

.affiliate-disclosure {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--muted-fg);
  margin: var(--s3) 0 0;
}

.breadcrumb-nav,
.breadcrumbs {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--muted-fg);
  margin-bottom: var(--s4);
}

.breadcrumb-nav a,
.breadcrumbs a {
  color: var(--muted-fg);
  transition: var(--transition);
}

.breadcrumb-nav a:hover,
.breadcrumbs a:hover { color: var(--primary) }

.breadcrumb-nav .sep,
.breadcrumbs .sep { margin: 0 var(--s1); color: var(--border) }

.breadcrumb-nav .current { color: var(--fg); font-weight: 700 }

/* Badges */
.featured-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Dark moss preserves contrast on the badge tint. */
  color: var(--primary-dark);
  background: rgba(93, 112, 82, 0.1);
  border-radius: var(--r-pill);
  padding: var(--s1) var(--s3);
  margin-bottom: var(--s3);
}

.featured-label.badge {
  display: inline-block;
  background: rgba(93, 112, 82, 0.1);
  color: var(--primary-dark);
  border-radius: var(--r-pill);
  padding: var(--s1) var(--s3);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  border: none;
  box-shadow: none;
}

/* Page headings */
.hero-title,
.page-title {
  font-family: var(--font-ui);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: var(--s2);
  margin-top: 0;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .hero-title, .page-title { font-size: var(--t-2xl) }
}

.hero-author {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted-fg);
  margin-bottom: var(--s5);
}

.year-range-label {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--muted-fg);
  margin: var(--s1) 0 0;
}

.prize-intro {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--fg);
  line-height: 1.8;
  margin: var(--s4) 0 var(--s5);
  max-width: 680px;
  border-left: 3px solid var(--secondary);
  padding-left: var(--s4);
  opacity: 0.88;
}

.page-header {
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 2px solid var(--muted);
}

/* Archive tables */
.modern-table {
  overflow-wrap: anywhere;
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s5);
}

.modern-table th {
  padding: var(--s3) var(--s2);
  text-align: left;
  border-bottom: 2px solid var(--muted);
  color: var(--muted-fg);
  text-transform: uppercase;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  font-weight: 800;
}

.modern-table td {
  padding: var(--s4) var(--s2);
  vertical-align: top;
  border-bottom: 1px solid var(--muted);
  color: var(--fg);
}

.modern-table tr:hover td {
  background: rgba(93, 112, 82, 0.04);
}

td.year-col {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--secondary);
  width: 80px;
}

.title-col {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}

.book-link {
  color: var(--heading);
  font-weight: 600;
  transition: var(--transition);
}

.book-link:hover { color: var(--secondary) }

.book-link-wrapper {
  display: block;
  color: inherit;
}

.author-name {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted-fg);
  margin-top: var(--s1);
}

.no-award {
  color: var(--muted-fg);
  font-style: italic;
}

/* Cross-list navigation below the archive table. */
.list-crosslink {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 2px solid var(--muted);
}

.list-crosslink p {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: 1.75;
  color: var(--fg);
  margin: 0;
  max-width: 680px;
  opacity: 0.88;
}

.list-crosslink-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  /* Tap target on mobile: the link often wraps to its own line, and a bare
     inline run of text is a thin thing to hit with a thumb. */
  display: inline-block;
  padding: var(--s1) 0;
}

.list-crosslink-link:hover,
.list-crosslink-link:focus {
  color: var(--secondary);
}

@media (min-width: 768px) {
  .list-crosslink {
    margin-top: var(--s6);
  }

  .list-crosslink p {
    font-size: var(--t-sm);
  }
}

/* Decade navigation */
.decade-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s5);
  padding: var(--s2) var(--s4);
  background: rgba(253, 252, 248, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(222, 216, 207, 0.8);
  border-radius: var(--r-md);
  position: static;
  z-index: 10;
  box-shadow: var(--shadow-card);
}

.decade-links {
  display: flex;
  min-width: 0;
  gap: var(--s1);
  flex-wrap: wrap;
}

.decade-link {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted-fg);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  transition: var(--transition);
}

.decade-link:hover {
  background: rgba(93, 112, 82, 0.1);
  color: var(--primary);
}

tr:target { background-color: rgba(93, 112, 82, 0.06) }

/* Mirrored real covers. Shadowed like the generated jacket beside them so a
   page with covers and a page without read as one system.

   NO FIXED ASPECT RATIO, unlike .book-cover-gen. A Caldecott winner is a
   picture book and its jacket is genuinely landscape -- 22 of them are wider
   than they are tall -- and a few editions ship a square 3D render. Forcing
   2/3 and cropping beheaded them. The width and height attributes carry the
   real ratio, which also reserves the right box before the image loads. */
.book-cover-art {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--muted);
  border-radius: 8px 12px 12px 8px;
  box-shadow:
    inset 18px 0 20px -10px rgba(0,0,0,.55),
    inset -2px 0 6px -2px rgba(0,0,0,.18),
    5px 10px 30px rgba(44, 44, 36, 0.32);
  transition: var(--transition);
}

/* Generated book covers */
.book-cover-gen {
  width: 100%;
  aspect-ratio: 2/3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 14% 10% calc(14% + 24px);
  color: var(--white);
  border-radius: 8px 12px 12px 8px;
  text-align: center;
  overflow: hidden;
  font-size: 0.95rem;
  box-shadow:
    inset 18px 0 20px -10px rgba(0,0,0,.55),
    inset -2px 0 6px -2px rgba(0,0,0,.18),
    5px 10px 30px rgba(44, 44, 36, 0.32);
  transition: var(--transition);
}

.book-cover-gen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, transparent 45%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
}

.book-cover-gen::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.07);
  border-radius: 4px;
  pointer-events: none;
}

.book-cover-gen > * { position: relative; z-index: 2 }

.book-cover-gen.cover-poetry {
  box-shadow:
    inset 10px 0 14px -8px rgba(0,0,0,.1),
    3px 5px 18px rgba(44, 44, 36, 0.18);
  border: 1px solid rgba(0,0,0,.07);
}

.book-cover-gen.cover-poetry::after {
  border-color: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.04);
}

.cover-band {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: var(--cover-band-bg, rgba(0,0,0,0.4));
  color: var(--cover-band-fg, rgba(255,255,255,0.9));
  font-family: var(--font-ui);
  font-size: 0.6em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cover-top-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.cover-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1em;
  color: #f1d38e;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.book-cover-gen.cover-poetry .cover-title {
  font-style: italic;
  color: var(--forest);
}

.cover-decoration {
  flex: 0 0 auto;
  height: 1px;
  width: 38%;
  background: rgba(255,255,255,.32);
}

.book-cover-gen.cover-poetry .cover-decoration { background: rgba(44,44,36,.22) }

.cover-author {
  font-family: var(--font-ui);
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: .85;
}

.book-medium { width: 140px; margin: 0 auto }
.book-sidebar { width: 100%; max-width: 220px; margin: 0 auto }

.book-sidebar .book-cover-gen { font-size: 0.85rem }
.book-medium .book-cover-gen { font-size: 0.68rem }

/* Historical context */
.context-box {
  margin-top: var(--s6);
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--border);
  position: relative;
}

.quote-mark {
  position: absolute;
  top: -10px;
  right: 16px;
  font-size: 7rem;
  color: rgba(93, 112, 82, 0.1);
  font-family: var(--font-ui);
  line-height: 1;

  display: none;
}

.context-label {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  font-weight: 800;
  text-transform: none;
  letter-spacing: normal;
  color: var(--heading);
  margin-bottom: var(--s2);
  margin-top: 0;
}

/* Book details and sidebar navigation */
aside .nav-link {
  display: block;
  padding: var(--s1) var(--s2);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--fg) !important;
  border-radius: var(--r-sm);
  transition: var(--transition);
}

aside .nav-link:hover {
  color: var(--primary) !important;
  background: rgba(93, 112, 82, 0.08);
  padding-left: var(--s3);
}

.detail-item {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--fg);
  border-bottom: 1px solid var(--muted);
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
}

.detail-item strong {
  display: block;
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
  margin-bottom: var(--s1);
}

/* Search results */
.search-results-grid { display: grid; gap: 0 }

.result-title {
  font-family: var(--font-ui);
  margin: 0;
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.25;
  color: var(--heading);
}
.result-meta { min-width: 0; text-align: left }
.author-subtext { font-size: var(--t-sm); color: var(--muted-fg); margin: 0 0 var(--s2) }

.empty-state {
  text-align: center;
  padding: var(--s8) 0;
}

.empty-text {
  font-size: var(--t-sm);
  color: var(--muted-fg);
  margin-bottom: var(--s5);
}

/* Reading content */
.content-body {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: 1.85;
  color: var(--fg);
}

.content-body h3 {
  font-family: var(--font-ui);
  color: var(--heading);
  margin-top: var(--s6);
  font-size: var(--t-sm);
  font-weight: 700;
}

/* 404 page */

.error-title {
  font-size: var(--t-xl);
}

.error-body {
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--slate);
  margin-top: var(--s5);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* Full width tap targets on narrow screens, side by side once there is room. */
.error-actions .btn {
  flex: 1 1 100%;
  text-align: center;
}

.error-search {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--sand);
}

.error-search-row {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s3);
}

.error-search-input {
  flex: 1;
  padding: var(--s2) var(--s3);
  font-family: inherit;
  /* 1rem keeps iOS Safari from zooming the viewport on focus. */
  font-size: var(--t-sm);
  color: var(--slate);
  background: var(--card);
  border: 1px solid var(--muted-fg);
  border-radius: var(--r-sm);
  transition: var(--transition);
}

/* Keep the global focus ring; add border and shadow feedback. */
.error-search-input:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
}

.error-search-input::placeholder {
  color: var(--clay);
}

.error-awards {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--sand);
}

.error-awards-heading {
  font-size: var(--t-md);
  color: var(--heading);
  margin-bottom: var(--s4);
}

.error-awards-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.error-awards-list li a {
  display: block;
  /* 44px minimum touch target. */
  padding: var(--s3) var(--s3);
  font-size: var(--t-sm);
  color: var(--slate);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: var(--transition);
}

.error-awards-list li a:hover,
.error-awards-list li a:focus {
  background: var(--accent);
  color: var(--primary);
}

@media (min-width: 768px) {
  .error-title {
    font-size: var(--t-3xl);
  }

  .error-actions .btn {
    flex: 0 0 auto;
  }

  .error-search-row {
    flex-direction: row;
    align-items: center;
  }

  .error-awards-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s1) var(--s5);
  }
}

@media (min-width: 1024px) {
  .error-awards-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Contact page */

.contact-email-block {
  margin: var(--s6) 0 var(--s2);
  padding: var(--s5) var(--s4);
  background: var(--accent);
  border-radius: var(--r-sm);
  text-align: center;
}

.contact-email {
  margin: var(--s3) 0 var(--s1);
  /* Long address must not force the page sideways on a narrow screen. */
  word-break: break-word;
}

.contact-email-link {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 2px solid var(--secondary);
  /* 44px tap target on touch screens. */
  display: inline-block;
  padding: var(--s2) var(--s1);
  transition: var(--transition);
}

.contact-email-link:hover,
.contact-email-link:focus {
  color: var(--secondary);
}

.contact-email-note {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--clay);
}

@media (min-width: 768px) {
  .contact-email-block {
    padding: var(--s6);
  }

  .contact-email-link {
    font-size: var(--t-lg);
  }
}

/* Year pages: stacked rows on phones, columns on larger screens. */

.year-intro {
  margin-top: var(--s4);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--slate);
}

.year-section {
  margin-top: var(--s6);
}

.year-section-title {
  font-size: var(--t-lg);
  color: var(--heading);
  margin-bottom: var(--s1);
}

.year-section-note {
  margin: 0 0 var(--s4);
  font-size: var(--t-sm);
  color: var(--clay);
}

.year-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.year-row {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border-light, var(--sand));
}

.year-row:last-child {
  border-bottom: none;
}

.year-award-link {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  text-decoration: none;
  font-weight: 700;
}

.year-award-link:hover,
.year-award-link:focus {
  color: var(--primary);
}

/* Curated selections link to books, with a plain collection label. */
.year-award-muted {
  color: var(--clay);
  font-weight: 600;
}

.year-book-link {
  font-size: var(--t-sm);
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.year-book-link:hover,
.year-book-link:focus {
  color: var(--primary);
  border-bottom-color: var(--secondary);
}

.year-book-author {
  display: block;
  font-size: var(--t-sm);
  color: var(--clay);
}

.year-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--sand);
}

.year-nav-side {
  flex: 1;
}

.year-nav-right {
  text-align: right;
}

@media (min-width: 768px) {
  .year-row {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s4);
  }

  /* Fixed award column so the titles line up down the page. */
  .year-row-award {
    flex: 0 0 230px;
  }

  .year-row-book {
    flex: 1;
  }

  .year-book-author {
    display: inline;
    margin-left: var(--s2);
  }
}

/* Year links in the award list table and the book page sidebar. Kept subtle so
   the table still reads as data rather than a wall of links. */
.year-col-link,
.sidebar-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  transition: var(--transition);
}

.year-col-link:hover,
.year-col-link:focus,
.sidebar-title-link:hover,
.sidebar-title-link:focus {
  color: var(--primary);
  border-bottom-color: var(--secondary);
}

/* Prize facts and announcement calendar */

.prize-facts {
  margin: var(--s6) 0 var(--s2);
  padding: var(--s5) var(--s4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.prize-facts-title {
  font-size: var(--t-md);
  color: var(--heading);
  margin: 0 0 var(--s4);
}

.prize-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s4);
}

.prize-fact { min-width: 0; overflow-wrap: anywhere }

.prize-fact dt {
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: var(--s1);
}

.prize-fact dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--slate);
  font-weight: 600;
}

.prize-facts-detail h3 {
  font-size: var(--t-sm);
  color: var(--heading);
  margin: var(--s4) 0 var(--s1);
}

.prize-facts-detail p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--slate);
}

.prize-facts-link {
  color: var(--primary);
}

.prize-facts-source {
  margin-top: var(--s4) !important;
  padding-top: var(--s3);
  border-top: 1px solid var(--sand);
  font-size: var(--t-xs) !important;
  color: var(--clay) !important;
}

.schedule-month {
  margin-top: var(--s6);
}

.schedule-month-name {
  font-size: var(--t-lg);
  color: var(--heading);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--sand);
}

.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.schedule-row {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--border-light, var(--sand));
}

.schedule-row:last-child {
  border-bottom: none;
}

.schedule-award {
  margin: 0 0 var(--s1);
  font-size: var(--t-sm);
}

.schedule-award-link {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.schedule-award-link:hover,
.schedule-award-link:focus {
  color: var(--primary);
  border-bottom-color: var(--secondary);
}

.schedule-when {
  margin: 0 0 var(--s1);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--slate);
}

.schedule-meta {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--clay);
}

.schedule-note {
  margin-top: var(--s6);
  padding: var(--s4);
  background: var(--accent);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--slate);
}

.schedule-note p {
  margin: 0 0 var(--s2);
}

.schedule-note p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .prize-facts {
    padding: var(--s6);
  }

  .prize-facts-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--s4) var(--s6);
  }
}

@media (min-width: 1024px) {
  .prize-facts-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  }
}

/* Subject browse */

.subject-stats {
  font-size: var(--t-sm);
  color: var(--clay);
  margin: 0 0 var(--s4);
}

.subject-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subject-row {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border-light, var(--sand));
}

.subject-row:last-child {
  border-bottom: none;
}

.subject-row-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

.subject-year {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--primary);
}

.subject-award {
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clay);
}

/* Multiple-prize pages reuse subject rows; award labels must wrap. */
.multi-prize-list .subject-row-meta {
  flex-wrap: wrap;
  row-gap: 4px;
}

.multi-prize-group {
  margin-top: var(--s6);
}

.multi-prize-group:first-of-type {
  margin-top: var(--s4);
}

.multi-prize-summary {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--muted-fg);
  margin: var(--s1) 0 0;
  max-width: 640px;
}

/* Links to multiple-prize collections are separate from award appearances. */
.appearance-pairing {
  margin: var(--s2) 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--border-light);
  font-size: var(--t-xs);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .multi-prize-summary {
    font-size: var(--t-sm);
  }
}

/* Subject chips retain comfortable touch targets. */
.subject-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.subject-chip {
  display: inline-block;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--sand);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--slate);
  font-size: var(--t-xs);
  text-decoration: none;
  transition: var(--transition);
}

.subject-chip:hover,
.subject-chip:focus {
  border-color: var(--secondary);
  color: var(--primary);
}

.subject-sources {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--sand);
}

.subject-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s5);
}

.subject-card {
  padding: var(--s4);
  border: 1px solid var(--sand);
  border-radius: var(--r-sm);
  background: var(--card);
}

.subject-card-title {
  margin: 0 0 var(--s1);
  font-size: var(--t-sm);
}

.subject-card-link {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.subject-card-link:hover,
.subject-card-link:focus {
  color: var(--primary);
  border-bottom-color: var(--secondary);
}

.subject-card-count {
  margin: 0 0 var(--s2);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay);
}

.subject-card-desc {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--clay);
}

@media (min-width: 768px) {
  .subject-row {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s4);
  }

  /* Align the subject metadata column without constraining long titles. */
  .subject-row-meta {
    flex: 0 0 260px;
  }

  .subject-row-book {
    flex: 1;
  }

  .subject-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .subject-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Year snippet on the year pages, and the /years decade hub. */

.year-book-summary {
  margin: var(--s1) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--clay);
}

.decade-section {
  margin-top: var(--s6);
}

.decade-year-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
  margin-top: var(--s3);
}

.decade-year {
  display: block;
  padding: var(--s3) var(--s3);
  border: 1px solid var(--sand);
  border-radius: var(--r-sm);
  background: var(--bg);
  text-decoration: none;
  transition: var(--transition);
}

.decade-year:hover,
.decade-year:focus {
  border-color: var(--secondary);
  background: var(--card);
}

.decade-year-number {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  /* --primary-dark, not --primary. The tile ground is --bg, where --primary is
     4.25:1 and fails AA; it only clears on --card (4.78). axe caught this on
     /years on 2026-09-16. --primary-dark is 6.44 on --bg and 7.24 on --card,
     so it holds in the resting and hover states both. */
  color: var(--primary-dark);
}

.decade-year-count {
  display: block;
  font-size: var(--t-xs);
  color: var(--clay);
}

@media (min-width: 480px) {
  .decade-year-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .decade-year-row {
    grid-template-columns: repeat(5, 1fr);
  }

  /* The summary sits under the title in the book column, so it should not
     stretch the full width of a wide screen. */
  .year-book-summary {
    max-width: 60ch;
  }
}

/* Hand written year context. The lead sits above the winners table, the longer
   block below it. */

.year-stats {
  font-size: var(--t-xs);
  color: var(--clay);
  margin: var(--s2) 0 0;
}

.year-context {
  background: var(--card);
  border-left: 3px solid var(--secondary);
  border-radius: 0 8px 8px 0;
  padding: var(--s4);
}

.year-context-body {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--slate);
}

@media (min-width: 768px) {
  .year-context {
    padding: var(--s5) var(--s6);
  }

  .year-context-body {
    max-width: 70ch;
  }
}

/* Library lookup: a secondary, noncommercial action. */

.library-link {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-light, var(--sand));
}

.library-note {
  margin: var(--s1) 0 0;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--clay);
}

/* Free full text uses the same secondary treatment as library lookup. */

.free-read {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-light, var(--sand));
}

.free-read-note {
  margin: var(--s1) 0 0;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--clay);
}

/* /free-classic-books. Mobile first: the row stacks and the free link sits
   under the title, so the two tap targets never crowd each other at 390px. */

.free-read-era { margin-top: var(--s5) }

.free-read-era-count {
  font-weight: 400;
  color: var(--clay);
}

.free-read-inline {
  display: inline-block;
  margin-top: var(--s1);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .free-read-inline { margin-left: var(--s2); margin-top: 0 }
}

/* Explain the shared subject behind each recommendation. */

.read-alike-reason {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clay);
}

/* Show a shared recommendation reason once above the list. */

.read-alike-lede {
  margin: calc(-1 * var(--s1)) 0 var(--s2);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--clay);
}

/* Full book summaries retain their paragraph breaks. */

.book-summary p {
  font-size: var(--t-sm);
  color: var(--slate);
  line-height: 1.6;
  margin: 0 0 var(--s4);
}

.book-summary p:last-child { margin-bottom: 0 }

/* Reduced motion disables animations, scrolling effects and hover transforms. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
.search-submit:hover,
.subject-card:hover,
.book-link-wrapper:hover .book-cover-gen,
.book-link-wrapper:hover .book-cover-art { transform: none !important }
}

.context-prose p {
  position: relative;
  z-index: 1;
  font-size: var(--t-sm);
  margin: 0 0 var(--s4);
}

.context-prose p:last-child { margin-bottom: 0 }

/* Row shelves (multi prize, free reads) reuse the sidebar list primitives so
   a row looks the same wherever it appears. */

/* Shared list primitives */
.card-stack { margin-top: var(--s5) }

.stack-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stack-list-spaced { margin-bottom: var(--s4) }

.stack-item {
  padding: var(--s1) 0;
  border-bottom: 1px solid var(--border-light);
}

.stack-item:last-child { border-bottom: none }

/* Search refinement: visible labels remain available after entering a query. */
.search-refine {
  margin: 0 0 var(--s5);
  padding: 0;
  border-top: 0;
}

.search-refine-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted-fg);
  margin-bottom: var(--s2);
}

.search-refine-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.search-refine-input {
  flex: 1 1 220px;
  min-width: 0;
  /* At least 1rem prevents iOS Safari from zooming a focused input. */
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--muted-fg);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  min-height: var(--tap);
  transition: var(--transition);
}

.search-refine-input::placeholder { color: var(--muted-fg) }

.search-refine-input:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-color: var(--primary);
}

.search-refine-submit {
  flex: 0 0 auto;
  min-height: var(--tap);
}

/* Underline links in running text; color alone is insufficient. */
.breadcrumb-nav a,
.breadcrumbs a,
.prize-facts-link,
.prize-facts-source a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.breadcrumb-nav a:hover,
.breadcrumbs a:hover,
.prize-facts-link:hover { text-decoration-thickness: 2px }

/* Stretch the mobile book link across its row; keep the independent year link above it. */
@media (max-width: 767px) {
  .modern-table tbody tr { position: relative }

  .modern-table .title-col .book-link::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Below the year link, above the row background. */
    z-index: 1;
  }

  .modern-table .year-col { position: relative; z-index: 2 }

  .modern-table tbody tr:focus-within { background: rgba(93, 112, 82, 0.06) }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Footer search */
.footer-search-form {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.footer-search-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(243, 244, 241, 0.82);
  margin: 0 0 var(--s2);
}

.footer-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.footer-search-input {
  flex: 1 1 200px;
  min-width: 0;
  /* 1rem keeps iOS Safari from zooming the viewport on focus. */
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--fg);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--muted-fg);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  min-height: var(--tap);
}

.footer-search-input::placeholder { color: var(--muted-fg) }

/* Pale focus rings remain visible on the dark footer. */
.footer-search-input:focus-visible,
.footer-search-submit:focus-visible,
.footer-link:focus-visible,
.footer-bottom-link:focus-visible {
  outline: 2px solid var(--primary-fg);
  outline-offset: 2px;
}

.footer-search-submit {
  flex: 0 0 auto;
  min-height: var(--tap);
  cursor: pointer;
}

/* Journey controls share the same targets, spacing and keyboard treatment. */
.anchor-target, [id^="decade-"] { scroll-margin-top: var(--s5) }
.journey-jump { margin: var(--s4) 0 var(--s5) }

/* Search results emphasise readable titles, with jackets as supporting art. */
.search-results-list { container: search-results / inline-size }
.search-result-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--s4);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--border);
}
.search-result-cover.book-medium { width: 100%; margin: 0 }
.search-result-cover .book-cover-gen { font-size: 0.4rem }
.search-result-cover .cover-author, .search-result-cover .cover-band { display: none }
.search-result-cover .cover-title { overflow-wrap: anywhere }
.search-results-list .result-title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  color: var(--heading);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.search-results-list .result-title a:hover { color: var(--secondary) }
.search-appearances { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); color: var(--muted-fg) }
.search-appearances li + li { margin-top: var(--s1) }
.search-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5) }
.search-page-number { font-variant-numeric: tabular-nums }
.search-suggestions { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s5) }
@media (min-width: 48rem) {
  .search-result-item { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s5) }
}
@container search-results (max-width: 24em) {
  .search-result-item { grid-template-columns: minmax(0, 1fr) }
  .search-result-cover { display: none }
}

/* Consistent reading measure and targets, including touch tablets. */
.content-body, .context-prose, .prize-intro, .list-crosslink p { max-width: 68ch }
input, button, summary { font: inherit }
input[type="search"], button, input[type="submit"] { min-height: var(--tap) }
.breadcrumb-nav, .breadcrumbs, .result-meta { overflow-wrap: anywhere }
:where(.book-link, .year-col-link, .read-alike-link, .footer-link, .footer-bottom-link,
.sidebar-title-link, .subject-card-link, .year-book-link, .year-award-link,
.schedule-award-link, .shelf-more, .decade-link, .subject-chip, .year-strip-link,
.sidebar-nav-item, .error-awards-list a, .sidebar-more a, .breadcrumb-nav a, .breadcrumbs a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
}
.decade-link, .year-col-link { min-width: var(--tap); justify-content: center }
.modern-table, .year-range-label, .detail-item { font-variant-numeric: tabular-nums }
.btn:active, .search-submit:active {
  box-shadow: inset 0 2px 4px rgba(44, 44, 36, 0.2);
  transform: translateY(1px);
  transition-duration: 0s;
}
a:active { text-decoration: underline; text-underline-offset: 0.2em }
button:disabled, input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed }
.footer-card :focus-visible { outline-color: var(--primary-fg) }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .search-submit:active { transform: none }
}

/* Shared editorial and discovery template foundations. */
.editorial-header { text-align: left; border-bottom: 1px solid var(--border); padding-bottom: var(--s6); }
.editorial-prose { max-width: 68ch; margin-top: var(--s6); font-size: var(--t-sm); line-height: 1.6; color: var(--fg); }
.editorial-prose h2 { margin-top: var(--s7); margin-bottom: var(--s4); font-size: var(--t-lg); }
.editorial-quote { margin-block: var(--s6); }
.editorial-quote-text { font-style: italic; position: relative; z-index: 1; }
.editorial-updated { margin-top: var(--s6); color: var(--muted-fg); font-size: var(--t-sm); }
.browse-more { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--border); text-align: center; }
.browse-more-title { margin-bottom: var(--s5); font-size: var(--t-lg); }
.browse-more-actions { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; }
.section-follow-up { margin-top: var(--s4); }

/* Long real titles still fit the shelf when readers enlarge the text. */
.cover-title { overflow-wrap: anywhere }

/* Reading Room typography: Literata reading text and titles, Source Sans UI. */
h1, .hero-title, .page-title {
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem);
  font-weight: 600;
  font-variant-ligatures: common-ligatures;
  letter-spacing: -.025em;
  line-height: 1.15;
}
h2, h3, h4 { letter-spacing: -.015em; line-height: 1.3 }
h2 { font-size: 1.375rem }
h3 { font-size: 1.125rem }
a { text-underline-offset: .2em }
:where(.breadcrumb-nav, .breadcrumbs, .book-summary, .context-prose, .editorial-prose, .prize-intro, .prize-facts) a { text-decoration: underline }
.btn { border-radius: var(--r-sm); min-height: var(--tap) }
.btn.full-width { display: flex; align-items: center; justify-content: center }
.sidebar-title { font-size: 1.125rem; font-weight: 600; text-transform: none; letter-spacing: -.015em; color: var(--heading) }
.author-name { font-weight: 400 }

/* The Moss Band footer (chosen 2026-09-16): the deep green runs edge to edge with
   no card. Wordmark and tagline, the search beside them on desktop, one ruled
   row of browse links and one of small print with Privacy and Surprise me kept
   together at the end. */
.footer-card { margin: var(--s7) 0 0; background: var(--footer-bg); color: var(--primary-fg) }
.footer-inner { max-width: 82.5rem; margin: auto; padding: var(--s6) var(--s4) var(--s5); display: grid; gap: var(--s5); min-width: 0 }
.footer-inner > * { min-width: 0 }
.footer-wordmark { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em }
.footer-brand p { font-family: var(--font-title); font-style: italic; font-size: 1.0625rem; margin: var(--s1) 0 0; opacity: .85 }
.footer-search { min-width: 0 }
.footer-search-form { margin: 0; max-width: none }
.footer-search-label { color: var(--primary-fg); text-align: left; font-weight: 700; font-size: .875rem; text-transform: none; letter-spacing: 0 }
.footer-search-row { display: flex; gap: var(--s2); flex-wrap: wrap }
.footer-search-input { flex: 1 1 10rem; width: 100%; min-width: 0; border-radius: var(--r-sm) }
.footer-search-submit { border-radius: var(--r-sm) }
.footer-browse, .footer-bottom nav, .footer-discovery-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5) }
.footer-browse { padding-top: var(--s3); border-top: 1px solid rgba(243, 244, 241, .35) }
.footer-link, .footer-bottom-link { color: var(--primary-fg); font-size: .875rem; display: inline-flex; align-items: center; min-height: var(--tap) }
.footer-surprise { gap: var(--s2) }
.footer-surprise svg { flex-shrink: 0 }
.footer-link:hover, .footer-bottom-link:hover, .footer-wordmark:hover { text-decoration: underline }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s5); border-top: 1px solid rgba(243, 244, 241, .35); padding-top: var(--s3); font-size: .875rem }
.footer-copy { font-size: .875rem; margin: 0; opacity: .85 }
@media (min-width: 48rem) {
  .footer-inner { grid-template-columns: minmax(0,1fr) minmax(16rem, 27.5rem); align-items: end; column-gap: var(--s7); padding: var(--s7) var(--s5) var(--s5) }
  .footer-browse, .footer-bottom { grid-column: 1 / -1 }
  .footer-bottom nav { flex: 1 1 auto }
  .footer-discovery-links { margin-left: auto }
}

/* Home: current winners, then an archive feature and prize navigation. */
.home-wrapper, .awards-wrapper { display: block }
.home-intro { padding: var(--s2) 0 var(--s3) }
.home-intro .page-title { max-width: 28ch; font-size: clamp(2.5rem, 1.5rem + 2.8vw, 3.5rem); margin: 0 0 var(--s4) }
.home-intro .standfirst { color: var(--muted-fg); margin-bottom: 0 }
.eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--secondary); margin: 0 0 var(--s3) }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); margin-bottom: var(--s3) }
.section-head h2 { font-size: 1.375rem; margin: 0 }
.section-head > a { font-size: .8125rem; min-height: var(--tap); display: inline-flex; align-items: center; color: var(--primary-dark); text-decoration: underline }

.award-links { list-style: none; margin: 0; padding: 0 }

.award-links li + li { border-top: 1px solid var(--border) }
.award-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 3.25rem; padding: var(--s3) 0; color: var(--primary-dark); font-size: .9375rem }
.award-links a:hover { text-decoration: underline }
.award-links a span { color: var(--secondary); flex-shrink: 0 }
.interests { margin-top: var(--s5) }
.interest-links { display: flex; flex-wrap: wrap; gap: var(--s3) }
.interest-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: var(--s3) var(--s4); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: .9375rem; color: var(--primary-dark); text-decoration: underline }
@media (min-width: 48rem) {

}

/* Book: complete reading panel first, reference panel beside it on desktop. */
.reading-room-book { gap: var(--s5) }
.reading-room-book .book-summary, .reading-room-book .context-prose, .home-intro .standfirst, .editorial-prose, .prize-intro {
  font-family: var(--font-reading);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  text-align: left;
  max-width: 62ch;
}
.reading-room-book .book-summary p, .reading-room-book .context-prose p { font-size: inherit; line-height: inherit; margin: 0 0 1.25em }
.reading-room-book .content-body { max-width: none }
.reading-room-book .section-divider, .reading-room-book .context-label { font-size: 1.25rem; border: 0; padding: 0; margin-bottom: var(--s4); font-weight: 600 }
.reading-room-book .context-box { border-top: 4px solid var(--border); margin-top: var(--s6); padding-top: var(--s5) }
.acquisition { border-top: 1px solid var(--border); margin-top: var(--s6); padding-top: var(--s5) }
.acquisition .sidebar-title { border: 0; font-size: 1.25rem }
.acquisition .flex-gap { align-items: start }
.acquisition .btn { width: auto; max-width: 100% }
.acquisition .library-link, .acquisition .free-read { max-width: 62ch }
.book-companion { min-width: 0; display: grid; gap: var(--s5) }
.book-companion .book-link { text-decoration: underline; font-size: .875rem }
.book-companion .author-name { font-size: .8125rem }
@media (min-width: 48rem) {
  .reading-room-book .book-summary, .reading-room-book .context-prose, .editorial-prose, .prize-intro { font-size: 1.3125rem }
  .book-companion { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start }
  .acquisition .flex-gap { flex-direction: row; flex-wrap: wrap }
}
@media (min-width: 64rem) {
  .reading-room-book { grid-template-columns: minmax(0,1fr) 20rem; gap: var(--s8) }
  .book-companion { grid-template-columns: minmax(0,1fr) }
}

/* Prize archive: all records, with native decade navigation. */
.prize-archive .reading-paper { container: prize-records / inline-size }
.decade-disclosure { margin-bottom: var(--s4); font-size: .9375rem }
.decade-disclosure summary { cursor: pointer; min-height: var(--tap); padding-block: var(--s3); color: var(--primary-dark); font-weight: 700 }
.decade-disclosure .decade-nav { margin-top: var(--s2) }
.prize-archive .modern-table { table-layout: fixed; margin-top: var(--s3) }
.prize-archive .modern-table th:first-child { width: 4.25rem }
.prize-archive .modern-table th { letter-spacing: 0; font-size: .75rem; color: var(--primary-dark) }
.prize-archive .modern-table td { padding: var(--s3) var(--s2) }
.prize-archive .modern-table .book-link { text-decoration: underline; font-size: 1rem; line-height: 1.5 }
.prize-archive .modern-table .year-col-link { font-size: .9375rem; color: var(--primary-dark) }
.prize-archive .modern-table .author-name { font-size: .8125rem }
.prize-archive .prize-intro { opacity: 1; border: 0; padding: 0; max-width: 68ch }
@media (min-width: 48rem) {
  .prize-archive .modern-table th:first-child { width: 6rem }
  .prize-archive .modern-table .book-link { font-size: 1.125rem }
  .prize-archive .modern-table .author-name { font-size: .875rem }
}
@media print {
  .site-header, .footer-card, .book-companion, .article-nav, .acquisition { display: none }
  body { background: white; color: black }
  .reading-room-book { display: block }
  .reading-paper { border: 0; box-shadow: none; padding: 0 }
  .reading-room-book .book-summary, .reading-room-book .context-prose { font-size: 11pt }
}

/* Archive row headings carry years; only column headings use header styling. */
.prize-archive .modern-table tbody th { vertical-align: top; border-bottom: 1px solid var(--muted); text-transform: none; font-size: .9375rem; padding: var(--s3) var(--s2) }
/* Stack the year above its book when enlarged text leaves too little reading room.
   Explicit table roles in the template retain the relationships in WebKit. */
@container prize-records (max-width: 18em) {
  .prize-archive .modern-table,
  .prize-archive .modern-table tbody,
  .prize-archive .modern-table tr,
  .prize-archive .modern-table td,
  .prize-archive .modern-table tbody th { display: block; width: 100% }
  .prize-archive .modern-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  .prize-archive .modern-table tbody th { border-bottom: 0; padding-bottom: 0 }
  .prize-archive .modern-table td { padding-top: var(--s1) }
}
.award-links a span:first-child { color: inherit; flex-shrink: 1; min-width: 0 }

.directory-note { margin: var(--s5) 0 0; font-size: .875rem; max-width: 70ch; color: var(--muted-fg) }
.directory-browse { margin-top: var(--s6) }

/* Inline breadcrumbs can wrap within a long prize name on a narrow phone. */
.breadcrumb-nav, .breadcrumbs { line-height: 2.75rem }
.breadcrumb-nav a, .breadcrumbs a { display: inline; min-width: 0; min-height: 0; padding-block: var(--s2) }
.recognition { flex-wrap: nowrap }
.recognition .featured-label { flex: 0 1 auto; min-width: 0; font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; border-radius: var(--s1); margin-bottom: 0 }
.recognition > span { flex: 0 0 auto; max-width: 45% }

/* Front page: a newspaper lead under the masthead. The h1 is the dateline;
   the lead title is an h2 (see BooksController#index and design_system_test). */
.front-page { display: block }
.front-page .home-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s4); padding: 0; margin: calc(-1 * var(--s4)) 0 var(--s6) }
.front-page .page-title { font-family: var(--font-title); font-style: italic; font-weight: 400; font-size: var(--t-sm); letter-spacing: 0; line-height: 1.5; color: var(--muted-fg); margin: 0; max-width: none }
.dateline { margin: 0; font-size: .875rem; color: var(--muted-fg) }
.front-lead { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); align-items: start }
.lead-story { min-width: 0 }
.lead-award, .front-label { margin: 0 0 var(--s3); font-size: var(--t-sm); font-weight: 700; color: var(--secondary) }
.lead-title { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.75rem, 1rem + 6.5vw, 6.5rem); line-height: .98; letter-spacing: -.025em; margin: 0 0 var(--s4); color: var(--fg); text-wrap: balance; overflow-wrap: anywhere }
.lead-title a, .recent-row h3 a, #archive-feature-title a { color: inherit; text-decoration: none }
.lead-title a:hover, .recent-row h3 a:hover, #archive-feature-title a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em }
.lead-author { font-family: var(--font-title); font-style: italic; font-size: var(--t-lg); color: var(--primary-dark); margin: 0 0 var(--s4) }
.lead-prose, .feature-prose { font-family: var(--font-reading); font-size: 1.25rem; line-height: 1.6; max-width: 62ch; margin: 0 0 var(--s4) }
.lead-link, .rail-more { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; text-decoration: underline; color: var(--primary-dark) }
.front-rail { display: grid; gap: var(--s6); min-width: 0; align-content: start }
.front-rail h2, .front-interests h2 { font-size: var(--t-md); margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--fg); color: var(--fg) }
.recent-list, .prize-index { list-style: none; margin: 0; padding: 0 }
.recent-row { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) 0; border-bottom: 1px solid var(--border) }
.recent-row h3 { font-family: var(--font-title); font-size: var(--t-md); font-weight: 600; margin: 0; line-height: 1.25 }
.byline { margin: 0; font-size: var(--t-sm) }
.record-award { margin: 0; font-size: .875rem; color: var(--muted-fg) }
.prize-index a { display: flex; align-items: center; min-height: 3rem; padding: var(--s2) 0; border-bottom: 1px solid var(--border); color: var(--fg); text-decoration: none }
.prize-index a:hover { text-decoration: underline }
.rail-more { margin-top: var(--s2); font-size: var(--t-xs) }
.year-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-block: var(--s7); padding: var(--s4) var(--s5); background: var(--primary-dark); color: var(--primary-fg); border-radius: var(--s1) }
.year-band h2 { margin: 0; font-size: var(--t-md); color: var(--primary-fg) }
.year-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5) }
.year-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--primary-fg); font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; text-decoration: none }
.year-links a:hover, .year-links .year-index-all { text-decoration: underline; text-underline-offset: .2em }
.year-band a:focus-visible { outline-color: var(--primary-fg) }
.room-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s7); align-items: start }
.book-feature { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s5); align-items: start; min-width: 0 }
.feature-jacket { display: none }
.book-feature #archive-feature-title { font-size: var(--t-xl); line-height: 1.1; margin: 0 0 var(--s2) }
.feature-prose { font-size: 1.125rem; margin-top: var(--s3) }
.subject-run { font-family: var(--font-reading); font-size: var(--t-md); line-height: 1.75; margin: 0 0 var(--s4) }
.front-routes, .shelf-pick { margin: 0 0 var(--s3); color: var(--muted-fg); line-height: 1.6 }
.subject-run a, .front-routes a, .shelf-pick a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--secondary); text-underline-offset: .18em }
.subject-run a:hover, .front-routes a:hover, .shelf-pick a:hover { color: var(--secondary) }
.shelf-pick-title { font-family: var(--font-title); font-weight: 600 }
@media (min-width: 48rem) {
  .front-page .home-intro { margin-top: calc(-1 * var(--s5)) }
  .lead-prose { font-size: 1.3125rem }
  .book-feature { grid-template-columns: 8rem minmax(0,1fr) }
  .feature-jacket { display: block; min-width: 0 }
  .feature-jacket .book-cover-gen { width: 100%; height: auto; aspect-ratio: 2 / 3 }
  .feature-jacket .cover-title { font-size: 1rem }
  .feature-jacket .cover-author { font-size: .625rem }
}
@media (min-width: 64rem) {
  .front-lead { grid-template-columns: minmax(0,1fr) 22rem; gap: var(--s8) }
  .front-rail { padding-left: var(--s6); border-left: 1px solid var(--fg) }
  .room-layout { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--s8) }
}

/* Book: the title plate. The book's own jacket colours (ApplicationHelper#plate_style)
   carry the jacket, recognition, title, author and in-page links edge to edge;
   the prose and the companion rail follow on parchment. */
.plate { background-color: var(--plate-bg); background-image: linear-gradient(155deg, var(--plate-accent) 0%, transparent 55%, rgba(0,0,0,0.22) 100%); color: var(--plate-fg); margin-top: var(--s5) }
.plate-inner { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s5); align-items: end; max-width: 77.5rem; margin: auto; padding: var(--s6) var(--s4) var(--s5) }
.plate-inner > * { min-width: 0 }
.plate-jacket { display: none }
.plate-text { display: flex; flex-direction: column; gap: var(--s3) }
.plate .breadcrumb-nav { margin: 0; color: var(--plate-fg); opacity: .8 }
.plate .breadcrumb-nav a, .plate .breadcrumb-nav .current, .plate .breadcrumb-nav .sep { color: inherit }
.plate .breadcrumb-nav a:hover { color: inherit; text-decoration: underline }
.plate .recognition { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; font-size: var(--t-sm); font-weight: 700 }
.plate .recognition .badge { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--plate-fg); text-decoration: underline; text-decoration-color: var(--plate-rule); text-decoration-thickness: 2px; text-underline-offset: .25em }
.plate .recognition .badge:hover { text-decoration-thickness: 3px }
.plate .hero-title { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.75rem, 1rem + 5.5vw, 5.25rem); line-height: .98; letter-spacing: -.025em; color: var(--plate-fg); margin: 0; max-width: 16ch; text-wrap: balance; overflow-wrap: anywhere }
.plate .hero-author { font-family: var(--font-title); font-style: italic; font-weight: 400; font-size: var(--t-lg); color: var(--plate-fg); margin: 0 }
.plate .article-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: var(--s2) 0 0; padding-top: var(--s3); border-top: 1px solid var(--plate-fg); font-size: var(--t-xs); font-weight: 700 }
.plate .article-nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--plate-fg); text-decoration: underline; text-decoration-color: var(--plate-rule); text-decoration-thickness: 2px; text-underline-offset: .25em }
.plate :focus-visible { outline-color: var(--plate-fg) }
.plate-book { margin-top: var(--s6) }
.plate-book .section-divider, .plate-book .context-label { color: var(--heading) }
.plate-book .acquisition .sidebar-title { color: var(--heading) }
.plate-book .book-companion { gap: var(--s6) }
.plate-book .book-companion .sidebar-card { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none }
.plate-book .book-companion .sidebar-title { font-family: var(--font-title); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); border-bottom: 1px solid var(--fg); padding-bottom: var(--s2); margin-bottom: var(--s1) }
.plate-book .book-record { margin: 0 }
.plate-book .detail-item { display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: var(--s3); padding: var(--s3) 0; margin: 0; border-bottom: 1px solid var(--border); font-size: .9375rem }
.plate-book .detail-item dt, .plate-book .detail-item dd { margin: 0 }
.plate-book .detail-item strong { font-size: .875rem; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 }
.plate-book .stack-item { padding: var(--s3) 0 }
.plate-book .book-companion .book-link { font-family: var(--font-title); font-size: 1.0625rem; font-weight: 600; text-decoration: none; color: var(--fg) }
.plate-book .book-companion .book-link:hover { text-decoration: underline }
.plate-book .book-companion .btn { margin-top: var(--s3) }
@media (min-width: 48rem) {
  .plate-inner { grid-template-columns: 11rem minmax(0,1fr); gap: var(--s7); padding: var(--s7) var(--s5) var(--s6) }
  .plate-jacket { display: block }
  .plate-jacket .book-cover-gen { width: 100%; height: auto; aspect-ratio: 2 / 3; box-shadow: inset 18px 0 20px -10px rgba(0,0,0,.55), inset -2px 0 6px -2px rgba(0,0,0,.18), 5px 10px 30px rgba(0,0,0,0.35) }
  .plate-jacket .book-cover-art { box-shadow: inset 18px 0 20px -10px rgba(0,0,0,.55), inset -2px 0 6px -2px rgba(0,0,0,.18), 5px 10px 30px rgba(0,0,0,0.35) }
  .plate-jacket .cover-title { font-size: 1.125rem }
  .plate-jacket .cover-author { font-size: .75rem }
  .plate .article-nav { font-size: var(--t-sm) }
}
@media (min-width: 64rem) {
  .plate-inner { grid-template-columns: 15rem minmax(0,1fr) }
  .plate-book .book-companion { grid-template-columns: minmax(0,1fr) }
}

/* Awards directory: the ledger. Nineteen prizes in announcement order, one
   ruled table with a jacket-colour swatch per prize (chosen 2026-09-16). */
.ledger-page .home-intro { padding-bottom: var(--s4) }
.ledger-page .home-intro .page-title { max-width: none }
.ledger-page .standfirst { max-width: 36em }
/* Container query, not a viewport one: at 200% text the same viewport holds half
   as many ems, and the five fixed columns must stack rather than overflow. */
.ledger { container: ledger / inline-size; margin-top: var(--s5) }
.ledger .award-links { list-style: none; margin: 0; padding: 0 }
.ledger .award-links li + li { border-top: 0 }
.ledger-head { display: none }
.ledger-month { padding-top: var(--s5) }
.ledger-month-name { font-family: var(--font-title); font-size: var(--t-lg); font-weight: 600; color: var(--heading); margin: 0; padding-bottom: var(--s2); border-bottom: 1px solid var(--fg) }
.ledger-row { display: grid; grid-template-columns: .625rem minmax(0,1fr); grid-template-areas: "swatch prize" "swatch since" "swatch where" "swatch newest"; column-gap: var(--s3); row-gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--border); align-items: start }
.ledger-swatch { grid-area: swatch; display: block; width: .625rem; height: 1.625rem; margin-top: .55rem; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--cover-band-bg) }
.ledger-prize { grid-area: prize; display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--font-title); font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: var(--fg); text-decoration: none }
.ledger-prize:hover { text-decoration: underline }
.ledger-since { grid-area: since; font-size: .875rem; color: var(--muted-fg) }
.ledger-where { grid-area: where; font-size: .875rem; color: var(--muted-fg) }
.ledger-newest { grid-area: newest; font-size: .9375rem; color: var(--fg) }
.ledger .directory-note { margin-top: var(--s5) }
.ledger-tail { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); margin-top: var(--s7); padding-top: var(--s5); border-top: 3px solid var(--fg) }
.ledger-tail .interests { margin: 0 }
.ledger-tail h2 { font-size: var(--t-md); margin: 0 0 var(--s2); color: var(--fg) }
.ledger-tail p { margin: 0; color: var(--muted-fg); line-height: 1.6 }
.ledger-tail a { color: var(--primary-dark); text-decoration: underline }
@media (min-width: 48rem) {
  .ledger-tail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s7) }
}
@container ledger (min-width: 58em) {
  .ledger-head { display: grid; grid-template-columns: 11rem minmax(0,1.8fr) 8.75rem 12.5rem minmax(0,1.4fr); gap: var(--s5); padding: var(--s5) 0 var(--s2); font-size: .8125rem; font-weight: 700; color: var(--muted-fg) }
  .ledger-month { display: grid; grid-template-columns: 11rem minmax(0,1fr); column-gap: var(--s5); padding-top: 0; border-top: 1px solid var(--fg) }
  .ledger-month-name { padding: var(--s4) 0 0; border: 0; font-size: 1.875rem; line-height: 1 }
  .ledger-row { grid-template-columns: .625rem minmax(0,1.8fr) 8.75rem 12.5rem minmax(0,1.4fr); grid-template-areas: "swatch prize since where newest"; gap: var(--s5); align-items: baseline; padding: var(--s3) 0 }
  .ledger-row:first-child { padding-top: var(--s4) }
  .ledger-swatch { margin-top: 0; align-self: center }
  .ledger-since, .ledger-where { font-size: .9375rem }
}

/* List pages: the plate and shelves (chosen 2026-09-16). The plate is the book
   page's, text only; the table keeps one tr per record but splits into a tbody
   per decade so the decade numeral and a heavier rule mark each shelf, and a
   small spine in the list's jacket colour sits beside every record. */
.plate-list .plate-inner { grid-template-columns: minmax(0,1fr) }
.plate-kicker { margin: 0; font-size: var(--t-sm); font-weight: 700; opacity: .85 }
.plate-list .page-title { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.5rem, 1rem + 4.5vw, 4.5rem); line-height: 1; letter-spacing: -.025em; color: var(--plate-fg); margin: 0; max-width: 18ch; text-wrap: balance }
.plate-list .year-range-label { font-family: var(--font-title); font-style: italic; font-size: var(--t-lg); color: var(--plate-fg); margin: 0; opacity: 1 }
.plate-list .prize-intro, .plate-list .collection-scope { font-family: var(--font-reading); font-size: 1.125rem; line-height: 1.6; color: var(--plate-fg); margin: var(--s2) 0 0; max-width: 62ch; opacity: 1; border: 0; padding: 0 }
.plate-list .journey-jump { margin-top: var(--s3) }
.plate-list-page { margin-top: var(--s6) }
.plate-list-page .collection-exception { margin-bottom: var(--s5) }
.records-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); margin-bottom: var(--s2) }
.records-head .section-divider { margin: 0; font-size: var(--t-lg); border: 0; padding: 0; color: var(--fg) }
.records-note { margin: 0; font-size: .875rem; color: var(--muted-fg) }
.plate-list-page .jump-row { margin-bottom: var(--s2) }
.plate-list-page .modern-table { margin-top: 0; border-collapse: collapse }
.plate-list-page .modern-table thead th { font-size: .8125rem; color: var(--muted-fg); padding: var(--s3) 0 var(--s2); border-bottom: 0; text-transform: none; letter-spacing: 0 }
/* Top, not baseline: the decade numeral makes a first row's year cell taller,
   and baseline alignment pushed the book cell and its top rule down. */
.plate-list-page .modern-table tbody th, .plate-list-page .modern-table td { border-bottom: 1px solid var(--border); padding: var(--s3) 0; vertical-align: top }
.plate-list-page .modern-table tbody tr:first-child th, .plate-list-page .modern-table tbody tr:first-child td { border-top: 1px solid var(--fg); padding-top: var(--s4) }
.plate-list-page .modern-table tr:hover td { background: transparent }
.plate-list-page .modern-table tbody th { font-family: var(--font-title); font-size: 1.0625rem; font-weight: 600; color: var(--heading); padding-right: var(--s3) }
.plate-list-page .modern-table .year-col-link { font-family: inherit; font-size: inherit; color: var(--heading); text-decoration: none; justify-content: start; min-width: 0 }
.plate-list-page .modern-table .year-col-link:hover { text-decoration: underline }
/* The decade numeral, once per shelf, read off the first row's data attribute. */
.plate-list-page .year-col[data-decade]::before { content: attr(data-decade); display: block; white-space: nowrap; font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--heading); margin-bottom: var(--s2) }
.plate-list-page .modern-table th:first-child { width: 5.25rem }
.plate-list-page .title-col { display: grid; grid-template-columns: 1.25rem minmax(0,1fr); column-gap: var(--s3); align-items: start }
.plate-list-page .title-col .record { display: flex; flex-direction: column; gap: 2px }
.plate-list-page .title-col::before { content: ""; width: 1.25rem; height: 2rem; margin-top: .15rem; border-radius: 2px 3px 3px 2px; background-color: var(--plate-bg); background-image: linear-gradient(155deg, var(--plate-accent) 0%, transparent 55%, rgba(0,0,0,0.22) 100%); box-shadow: inset 5px 0 6px -4px rgba(0,0,0,.55), inset 0 -5px 0 var(--plate-rule) }
.plate-list-page .title-col .book-link { font-family: var(--font-title); font-size: 1.125rem; font-weight: 600; text-decoration: none; color: var(--fg); line-height: 1.3 }
.plate-list-page .title-col .book-link:hover { text-decoration: underline }
.plate-list-page .title-col .author-name, .plate-list-page .title-col .no-award { font-size: .875rem; color: var(--muted-fg) }
.plate-list-page .prize-facts { margin-top: var(--s7); padding-top: var(--s5); border-top: 3px solid var(--fg); border-bottom: 0; background: transparent; box-shadow: none; border-radius: 0; padding-inline: 0 }
.plate-list-page .list-crosslink { margin-top: var(--s7); padding-top: var(--s5); border-top: 3px solid var(--fg); background: transparent; box-shadow: none; border-radius: 0; padding-inline: 0 }
@media (min-width: 48rem) {
  .plate-list-page .modern-table tbody th { font-size: 1.25rem }
  .plate-list-page .modern-table td { padding-top: calc(var(--s3) + .1rem) }
  .plate-list-page .modern-table .book-link { font-size: 1.1875rem }
  .plate-list-page .year-col[data-decade]::before { font-size: 3rem }
  .plate-list-page .modern-table th:first-child { width: 9rem }
  .plate-list-page .title-col .record { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3) }
}
@container prize-records (max-width: 18em) {
  .plate-list-page .title-col { display: block }
  .plate-list-page .title-col::before { display: none }
  .plate-list-page .modern-table tbody th { padding-bottom: 0 }
}

/* Subject pages: a moss plate (a subject belongs to no prize) over one shelf
   per prize, each headed by the prize and a spine in its jacket colours
   (chosen 2026-09-16). Reuses the list plate and ledger swatch. */
.plate-subject { --plate-bg: var(--primary-dark); --plate-accent: rgba(93, 112, 82, .55); --plate-rule: var(--primary-fg); --plate-fg: var(--primary-fg) }
.plate-subject .plate-kicker { opacity: .8 }
.subject-page { margin-top: var(--s6) }
.subject-page .subject-stats { font-size: inherit }
.prize-shelf { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s2) var(--s6); padding: var(--s4) 0 var(--s3); border-top: 1px solid var(--fg); align-items: start }
.prize-shelf-head { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0 }
.prize-shelf-spine { width: 1.5rem; height: 2.5rem; flex: 0 0 auto; margin-top: .2rem; box-shadow: inset 5px 0 6px -4px rgba(0,0,0,.55), inset 0 -6px 0 var(--plate-rule); background-color: var(--plate-bg); background-image: linear-gradient(155deg, var(--plate-accent) 0%, transparent 55%, rgba(0,0,0,0.22) 100%) }
.prize-shelf-name { font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin: 0; color: var(--fg) }
.prize-shelf-name a { color: inherit; text-decoration: none }
.prize-shelf-name a:hover { text-decoration: underline }
.prize-shelf-rows { margin: 0; padding: 0; list-style: none }
.subject-page .subject-row { display: grid; grid-template-columns: 3.5rem minmax(0,1fr); gap: var(--s3); align-items: baseline; padding: var(--s2) 0; margin: 0; border-bottom: 1px solid var(--border) }
.subject-page .subject-row:last-child { border-bottom: 0 }
.subject-page .subject-year { font-size: .875rem; font-weight: 700; color: var(--muted-fg); font-variant-numeric: tabular-nums }
.subject-page .record { display: flex; flex-direction: column; gap: 2px }
.subject-page .year-book-link { font-family: var(--font-title); font-size: 1.0625rem; font-weight: 600; color: var(--fg); text-decoration: none; line-height: 1.3 }
.subject-page .year-book-link:hover { text-decoration: underline }
.subject-page .year-book-author { font-size: .875rem; color: var(--muted-fg) }
.subject-page .ledger-tail { grid-template-columns: minmax(0,1fr) }
.subject-page .ledger-tail p { max-width: 70ch }
@media (min-width: 48rem) {
  .prize-shelf { grid-template-columns: 18rem minmax(0,1fr); padding: var(--s5) 0 var(--s4) }
  .subject-page .subject-row { grid-template-columns: 4rem minmax(0,1fr) }
  .subject-page .record { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3) }
  .subject-page .year-book-link { font-size: 1.1875rem }
}

/* Multi-prize pages: the double crown (chosen 2026-09-16). The subject plate,
   then one ruled ledger per group: title and author, and one wrapping cell per
   prize with a spine in that prize's jacket colours and the year. */
.crown-page { margin-top: var(--s5) }
.crown-group { padding-top: var(--s5) }
.crown-group .records-head { padding-bottom: var(--s2); border-bottom: 1px solid var(--fg); margin-bottom: 0 }
.crown-group .section-divider a { color: inherit; text-decoration: none }
.crown-group .section-divider a:hover { text-decoration: underline }
.crown-rows { list-style: none; margin: 0; padding: 0 }
.crown-row { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s1) var(--s5); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--border) }
.crown-book { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.crown-page .year-book-link { font-family: var(--font-title); font-size: 1.125rem; font-weight: 600; color: var(--fg); text-decoration: none; line-height: 1.3 }
.crown-page .year-book-link:hover { text-decoration: underline }
.crown-page .year-book-author { font-size: .875rem; color: var(--muted-fg) }
.crown-prizes { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5) }
.crown-prize { display: inline-flex; align-items: center; gap: var(--s2); font-size: .875rem; color: var(--muted-fg); min-width: 0 }
.crown-prize strong { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums }
.crown-prize .ledger-swatch { width: .75rem; height: 1.25rem; margin: 0; background-color: var(--plate-bg); background-image: linear-gradient(155deg, var(--plate-accent) 0%, transparent 55%, rgba(0,0,0,0.22) 100%); box-shadow: inset 4px 0 5px -3px rgba(0,0,0,.55), inset 0 -4px 0 var(--plate-rule) }
.crown-page .ledger-tail { grid-template-columns: minmax(0,1fr) }
.crown-page .ledger-tail p { max-width: 70ch }
@media (min-width: 48rem) {
  .crown-row { grid-template-columns: minmax(0,1.2fr) minmax(0,2fr) }
  .crown-book { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3) }
  .crown-page .year-book-link { font-size: 1.1875rem }
  .crown-prize { min-width: 18rem }
}

/* Year pages: the year plate (chosen 2026-09-16). The subject plate with the
   year's lead, in-page links and neighbouring years; the winners as a ledger
   with a spine per prize and the snippet each row keeps. */
.year-plate-nav { display: flex; flex-wrap: wrap; align-items: center }
.year-plate-neighbours { display: inline-flex; gap: var(--s5); margin-left: auto }
.plate .year-plate-neighbours a { text-decoration: none; font-family: var(--font-title); font-size: var(--t-md); font-weight: 600 }
.plate .year-plate-neighbours a:hover { text-decoration: underline }
.year-page { margin-top: var(--s5) }
.year-page .year-section { padding-top: var(--s5) }
.year-page .year-section + .year-section { margin-top: var(--s5); border-top: 3px solid var(--fg) }
.year-page .records-head { padding-bottom: var(--s2); border-bottom: 1px solid var(--fg); margin-bottom: 0 }
.year-page .year-context .year-section-title { font-family: var(--font-title); font-size: var(--t-lg); font-weight: 600; color: var(--fg); margin: 0 0 var(--s3); padding: 0; border: 0; text-transform: none; letter-spacing: 0 }
.year-page .year-context-body { font-family: var(--font-reading); font-size: 1.1875rem; line-height: 1.65; max-width: 62ch; margin: 0 }
.year-page .year-list { list-style: none; margin: 0; padding: 0 }
.year-page .year-row { display: grid; grid-template-columns: 1.125rem minmax(0,1fr); grid-template-areas: "spine award" "spine book"; column-gap: var(--s3); row-gap: var(--s1); align-items: start; padding: var(--s3) 0; margin: 0; border-bottom: 1px solid var(--border) }
.year-row-spine { grid-area: spine; width: 1.125rem; height: 1.875rem; margin-top: .2rem; background-color: var(--plate-bg); background-image: linear-gradient(155deg, var(--plate-accent) 0%, transparent 55%, rgba(0,0,0,0.22) 100%); box-shadow: inset 5px 0 6px -4px rgba(0,0,0,.55), inset 0 -5px 0 var(--plate-rule) }
.year-page .year-row-award { grid-area: award; font-size: .875rem; font-weight: 700; line-height: 1.4; margin: 0 }
.year-page .year-award-link { color: var(--muted-fg); text-decoration: none; font-size: inherit; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0; margin: 0; background: transparent; border: 0; display: inline; border-radius: 0 }
.year-page .year-context { background: transparent; border: 0; border-top: 3px solid var(--fg); border-radius: 0; box-shadow: none; padding: var(--s5) 0 0; margin-top: var(--s5) }
.year-page a.year-award-link:hover { text-decoration: underline }
.year-page .year-row-book { grid-area: book; display: flex; flex-direction: column; gap: var(--s1); min-width: 0 }
.year-page .record { display: flex; flex-direction: column; gap: 2px }
.year-page .year-book-link { font-family: var(--font-title); font-size: 1.125rem; font-weight: 600; color: var(--fg); text-decoration: none; line-height: 1.3 }
.year-page .year-book-link:hover { text-decoration: underline }
.year-page .year-book-author { font-size: .875rem; color: var(--muted-fg) }
.year-page .year-book-summary { font-family: var(--font-reading); font-size: 1rem; line-height: 1.55; color: var(--fg); max-width: 70ch; margin: 0 }
.year-page .year-nav { display: flex; justify-content: space-between; gap: var(--s5); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--fg) }
.year-nav-link { display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--tap); text-decoration: none; color: var(--fg) }
.year-nav-next { align-items: flex-end; text-align: right }
.year-nav-label { font-size: .8125rem; font-weight: 700; color: var(--muted-fg) }
.year-nav-year { font-family: var(--font-title); font-size: var(--t-md); font-weight: 600 }
.year-nav-link:hover .year-nav-year { text-decoration: underline }
@media (min-width: 48rem) {
  .year-page .year-row { grid-template-columns: 1.125rem 16rem minmax(0,1fr); grid-template-areas: "spine award book"; column-gap: var(--s4); padding: var(--s4) 0 }
  .year-page .year-row-award { font-size: .9375rem; padding-top: .2rem }
  .year-page .record { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3) }
  .year-page .year-book-link { font-size: 1.25rem }
  .year-page .year-context { display: grid; grid-template-columns: 18rem minmax(0,1fr); column-gap: var(--s6) }
  .year-page .year-context .year-section-title { margin: 0 }
}

/* Free classic books: the free shelf (chosen 2026-09-16). The subject plate,
   an always-open decade jump row, eras as shelves split by decade with a
   numeral each, a spine per row in the colour of the list the book came
   from, and a Read free button at the row's end. */
.free-page { margin-top: var(--s5) }
.free-decade-nav, .jump-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); padding: var(--s2) 0; margin: 0; background: transparent; border: 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); border-radius: 0; box-shadow: none }
.free-decade-label, .jump-row-label { font-size: .9375rem; color: var(--muted-fg) }
.free-decade-nav .decade-links, .jump-row .decade-links { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0 }
.free-decade-nav .decade-link, .jump-row .decade-link { display: inline-flex; align-items: center; min-height: var(--tap); min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: .9375rem; font-weight: 700; color: var(--fg); text-decoration: none }
.free-decade-nav .decade-link:hover, .jump-row .decade-link:hover { text-decoration: underline }
.free-page .free-read-era { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s3) var(--s6); margin: 0; padding: var(--s5) 0 var(--s3); border-top: 3px solid var(--fg); align-items: start }
.free-era-head { display: flex; flex-direction: column; gap: var(--s1) }
.free-page .year-section-title { font-family: var(--font-title); font-size: var(--t-lg); font-weight: 600; color: var(--fg); margin: 0; padding: 0; border: 0; text-transform: none; letter-spacing: 0; line-height: 1.15 }
.free-page .free-read-era-count { font-size: .9375rem; color: var(--muted-fg); margin: 0 }
.free-era-shelves { display: flex; flex-direction: column; gap: var(--s4); min-width: 0 }
.free-shelf { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s1) var(--s5); align-items: start }
.free-shelf-decade { font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--heading); margin: 0; padding-top: var(--s2) }
.free-page .free-read-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fg) }
.free-page .free-row { display: grid; grid-template-columns: 3.5rem 1.125rem minmax(0,1fr); grid-template-areas: "year spine record" "year spine read"; gap: var(--s1) var(--s3); align-items: start; padding: var(--s3) 0; margin: 0; border-bottom: 1px solid var(--border) }
.free-row-year { grid-area: year; font-size: .9375rem; font-weight: 700; color: var(--muted-fg); font-variant-numeric: tabular-nums; padding-top: .2rem }
.free-row-spine { grid-area: spine; width: 1.125rem; height: 1.875rem; margin: 0; background-color: var(--plate-bg); background-image: linear-gradient(155deg, var(--plate-accent) 0%, transparent 55%, rgba(0,0,0,0.22) 100%); box-shadow: inset 5px 0 6px -4px rgba(0,0,0,.55), inset 0 -5px 0 var(--plate-rule) }
.free-page .record { grid-area: record; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.free-page .year-book-link { font-family: var(--font-title); font-size: 1.125rem; font-weight: 600; color: var(--fg); text-decoration: none; line-height: 1.3 }
.free-page .year-book-link:hover { text-decoration: underline }
.free-page .year-book-author { font-size: .875rem; color: var(--muted-fg) }
.free-row-source { font-size: .8125rem; color: var(--muted-fg) }
.free-page .free-read-inline { grid-area: read; justify-self: start; min-height: 2.5rem; padding: var(--s1) var(--s3); font-size: .875rem; font-weight: 700; border-width: 2px; margin: var(--s1) 0 0; text-decoration: none; background: transparent; color: var(--primary-dark); border-color: var(--primary-dark); box-shadow: none }
.free-page .free-read-inline:hover, .free-page .free-read-inline:focus { background: var(--primary-dark); color: var(--primary-fg) }
.free-sources { margin-top: var(--s7); padding-top: var(--s5); border-top: 3px solid var(--fg); display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s3) var(--s6) }
.free-sources .year-section-note { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--fg); max-width: 62ch }
@media (min-width: 48rem) {
  .free-page .free-read-era { grid-template-columns: 18rem minmax(0,1fr) }
  .free-shelf { grid-template-columns: 7rem minmax(0,1fr) }
  .free-shelf-decade { font-size: 1.875rem }
  .free-page .free-row { grid-template-columns: 3.5rem 1.125rem minmax(0,1fr) auto; grid-template-areas: "year spine record read"; align-items: center }
  .free-page .record { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3) }
  .free-page .year-book-link { font-size: 1.1875rem }
  .free-page .free-read-inline { margin: 0; white-space: nowrap }
  .free-sources { grid-template-columns: 18rem minmax(0,1fr) }
}

/* Prize calendar: the year strip (chosen 2026-09-16). The subject plate, a
   strip of all twelve months with a spine per prize in each announcing month,
   then the month entries with a spine each. */
.calendar-page { margin-top: var(--s5) }
.year-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s1) var(--s2); list-style: none; margin: 0 0 var(--s6); padding: 0 }
.year-strip-month { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s3) var(--s2) var(--s3); border-top: 1px solid var(--border); color: var(--muted-fg) }
.year-strip-announcing { border-top: 3px solid var(--fg); color: var(--fg); padding-top: calc(var(--s3) - 2px) }
.year-strip-link { display: flex; flex-direction: column; gap: var(--s2); color: inherit; text-decoration: none; min-height: var(--tap) }
.year-strip-link:hover .year-strip-name { text-decoration: underline }
.year-strip-name { font-family: var(--font-title); font-size: 1.125rem; font-weight: 600; text-decoration: none; border: 0 }
.year-strip-spines { display: flex; flex-wrap: wrap; gap: 4px; min-height: 1.5rem }
.year-strip-spine { grid-area: auto; width: .875rem; height: 1.5rem; margin: 0; background-color: var(--plate-bg); background-image: linear-gradient(155deg, var(--plate-accent) 0%, transparent 55%, rgba(0,0,0,0.22) 100%); box-shadow: inset 4px 0 5px -3px rgba(0,0,0,.55), inset 0 -4px 0 var(--plate-rule) }
.year-strip-count { font-size: .8125rem; color: var(--muted-fg); white-space: nowrap }
.calendar-page .schedule { display: flex; flex-direction: column }
.calendar-page .schedule-month { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s2) var(--s6); margin: 0; padding: var(--s5) 0 var(--s2); border-top: 1px solid var(--fg); align-items: start }
.calendar-page .schedule-month-name { font-family: var(--font-title); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--heading); margin: 0; padding: 0; border: 0; text-transform: none }
.calendar-page .schedule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.calendar-page .schedule-row { display: grid; grid-template-columns: 1.125rem minmax(0,1fr); gap: var(--s3); align-items: start; padding: var(--s4) 0; margin: 0; border-bottom: 1px solid var(--border); background: transparent; box-shadow: none; border-radius: 0 }
.schedule-spine { grid-area: auto; grid-column: 1; width: 1.125rem; height: 1.875rem; margin-top: .2rem; background-color: var(--plate-bg); background-image: linear-gradient(155deg, var(--plate-accent) 0%, transparent 55%, rgba(0,0,0,0.22) 100%); box-shadow: inset 5px 0 6px -4px rgba(0,0,0,.55), inset 0 -5px 0 var(--plate-rule) }
.schedule-entry { grid-column: 2; display: flex; flex-direction: column; gap: var(--s1); min-width: 0 }
.calendar-page .schedule-award { font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0; padding: 0; border: 0; text-transform: none; letter-spacing: 0 }
.calendar-page .schedule-award-link { color: var(--fg); text-decoration: none }
.calendar-page .schedule-award-link:hover { text-decoration: underline }
.calendar-page .schedule-when { font-family: var(--font-reading); font-size: 1rem; line-height: 1.55; color: var(--fg); max-width: 70ch; margin: 0 }
.calendar-page .schedule-meta { font-size: .875rem; color: var(--muted-fg); margin: 0 }
.calendar-page .ledger-tail { grid-template-columns: minmax(0,1fr) }
.calendar-page .ledger-tail p { max-width: 62ch; color: var(--fg) }
.calendar-page .ledger-tail p + p { margin-top: var(--s3) }
@media (min-width: 48rem) {
  .year-strip { grid-template-columns: repeat(6, minmax(0,1fr)) }
  .calendar-page .schedule-month { grid-template-columns: 18rem minmax(0,1fr) }
  .calendar-page .schedule-month-name { font-size: 2.75rem }
}
@media (min-width: 64rem) {
  .year-strip { grid-template-columns: repeat(12, minmax(0,1fr)) }
}

/* Back to top: one pill that rides at the bottom right while the records
   scroll and settles at the end of the page's wrapper. Sticky, no script. The
   dock passes pointer events through so it never blocks a row beneath. */
.back-to-top-dock { position: sticky; bottom: var(--s4); z-index: 2; display: flex; justify-content: flex-end; margin-top: var(--s5); pointer-events: none }
.back-to-top { pointer-events: auto; display: inline-flex; align-items: center; min-height: var(--tap); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--primary-dark); color: var(--primary-fg); font-size: .875rem; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-soft); transition: var(--transition) }
.back-to-top:hover { background: var(--primary-hover) }
.back-to-top:focus-visible { outline-color: var(--fg) }
@media print { .back-to-top-dock { display: none } }