/* 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 }

html { scroll-behavior: auto }

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(--s3) 0 }
.header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  max-width: 82.5rem;
  margin: auto;
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.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-size: 1.375rem; font-weight: 600; letter-spacing: -.04em; 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(--primary-dark); 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) 0 }
  .header-inner { padding: var(--s4) var(--s5); column-gap: var(--s6) }
  .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) }

/* 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;
  color: var(--primary);
}

.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 { 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 }

/* Home discovery shelves */
.home-main {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-width: 0;
}

.home-shelf {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--s5) 0;

  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .home-shelf { padding: var(--s6) 0 }
  .home-main  { gap: var(--s6) }
}

/* Row shelves (multi prize, free reads) reuse the sidebar list primitives so
   a row looks the same wherever it appears. */
.shelf-rows { margin: 0 }

.shelf-row-meta {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--secondary);
  margin-top: var(--s1);
}

/* 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;
}

/* Daily shelf recommendation */
.shelf-pick-link {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s3);
}

.shelf-pick-link:hover .book-cover-gen {
  transform: translateY(-3px);
  transition: var(--transition);
}

.shelf-pick-title {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.25;
}

.shelf-pick-link:hover .shelf-pick-title { color: var(--secondary) }

.shelf-pick-reason {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--secondary);
  margin-top: var(--s1);
}

/* 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 }
.logo-text { letter-spacing: -.015em }
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 }

/* Compact footer keeps the catalogue and essential information within reach. */
.footer-card { margin: 0 var(--s3) var(--s3); background: var(--footer-bg); color: var(--primary-fg); border-radius: var(--r-md) }
.footer-inner { max-width: 80rem; margin: auto; padding: 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-size: 1.375rem; font-weight: 600 }
.footer-brand p { font-size: .875rem; margin: var(--s2) 0 }
.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: 600 }
.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: var(--s1) var(--s5) }
.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 { border-top: 1px solid #718067; padding-top: var(--s4) }
.footer-copy { font-size: .8125rem; margin-bottom: var(--s2) }
@media (min-width: 48rem) {
  .footer-card { max-width: 82.5rem; margin-inline: auto; width: calc(100% - 3rem); margin-bottom: var(--s5) }
  .footer-inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: var(--s6) }
  .footer-browse, .footer-bottom { grid-column: 1 / -1 }
}

/* 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 }
.recent-box, .prize-box, .book-feature, .awards-directory { border: 1px solid var(--border); background: var(--card); border-radius: var(--r-md); padding: var(--s5); box-shadow: var(--shadow-card); min-width: 0 }
.recent-box { background: var(--moss-tint); border-color: var(--moss-border) }
.recent-list, .award-links { list-style: none; margin: 0; padding: 0 }
.recent-row { display: flex; flex-wrap: wrap; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--moss-border); align-items: start }
.recent-row > div { flex: 1 1 12rem; min-width: 0 }
.year-stamp { display: inline-flex; align-items: center; justify-content: center; padding: var(--s1); border-radius: var(--s1); background: var(--primary-dark); color: var(--primary-fg); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; justify-self: start }
.record-award { font-size: .75rem; color: var(--muted-fg); margin: 0 0 var(--s1) }
.recent-row h3 { font-size: 1.0625rem; margin: 0 0 var(--s1) }
.recent-row h3 a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: underline }
.byline { font-size: .875rem; color: var(--muted-fg); margin: 0 }
.room-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s5); align-items: start }
.book-feature { display: grid; gap: var(--s5); grid-template-columns: minmax(0,1fr); align-items: start }

.book-feature .feature-prose { margin-block: var(--s4) }
.feature-jacket { display: none }
.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 }
.awards-directory { margin-top: var(--s6) }
@media (min-width: 48rem) {
  .recent-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s5) }
  .recent-row { display: block }
  .recent-row > div { margin-top: var(--s2) }
  .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 }
  .awards-directory .award-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: var(--s6) }
  .awards-directory .award-links li { border-top: 1px solid var(--border) }
}
@media (min-width: 72rem) {
  .room-layout { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: var(--s6) }
  .book-feature { padding: var(--s6) }
}

/* Homepage browse links borrow the paper slips and tabs of a library catalog. */
.prize-box { container: home-prizes / inline-size; background: var(--primary-dark); border-color: var(--primary-dark); border-bottom: 5px solid var(--wood-edge); padding: min(var(--s5),5vw) }
.prize-box .eyebrow, .prize-box .section-head h2, .prize-box .section-head > a { color: var(--primary-fg) }
.prize-box .eyebrow { margin-bottom: var(--s2) }
.prize-box .section-head { margin-bottom: var(--s4) }
.prize-box .section-head > a:focus-visible { outline-color: var(--primary-fg) }
.prize-index, .subject-index, .collection-index { list-style: none; padding: 0; margin: 0 }
.prize-index { display: grid; gap: var(--s2) }
.prize-index li { min-width: 0 }
.prize-slip { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--s3); min-height: 3.5rem; padding: var(--s3); border: 1px solid var(--card); border-radius: var(--s1); background: var(--card); color: var(--primary-dark); box-shadow: 0 2px 0 rgba(0,0,0,.12) }
.prize-slip-number { align-self: stretch; display: flex; align-items: center; padding-right: var(--s3); border-right: 1px solid var(--border); color: var(--secondary); font-size: .75rem; font-variant-numeric: tabular-nums }
.prize-slip-name { font-size: .9375rem; line-height: 1.5; font-weight: 600 }
.prize-slip-arrow { font-size: 1.125rem }
.prize-slip:hover { background: var(--moss-tint); border-color: var(--moss-tint) }
.prize-slip:focus-visible { outline-color: var(--primary-fg) }
.prize-slip:hover .prize-slip-name, .prize-slip:focus-visible .prize-slip-name { text-decoration: underline; text-underline-offset: .2em }
@container home-prizes (min-width: 34em) {
  .prize-index { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@container home-prizes (max-width: 16em) {
  .prize-slip { grid-template-columns: minmax(0,1fr); gap: var(--s1); padding: var(--s2) }
  .prize-slip-number { border: 0; padding: 0 }
  .prize-slip-arrow { display: none }
}

.year-band { container: home-years / inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s7); padding: var(--s6) min(var(--s5),5vw); background: var(--wood); border-block: 1px solid var(--wood-edge); border-radius: var(--s1) }
.year-band-heading { flex: 1 1 14rem; min-width: 0 }
.year-band h2 { margin: 0; font-size: 1.375rem; color: var(--fg); max-width: 24ch; text-wrap: pretty }
.year-band .eyebrow { color: var(--primary-dark) }
.year-links { flex: 3 1 28rem; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,5rem),1fr)); gap: var(--s3); min-width: 0; padding-top: var(--s1) }
.year-links a { position: relative; display: flex; justify-content: center; align-items: center; min-height: 3rem; padding: var(--s2); border: 1px solid var(--wood-edge); border-radius: 0 var(--s1) var(--s1) var(--s1); background: var(--card); color: var(--primary-dark); font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 rgba(104,90,79,.12) }
.year-links a::before { content: ""; position: absolute; left: -1px; top: -.3rem; width: 1.75rem; height: .3rem; border-radius: var(--s1) var(--s1) 0 0; background: var(--primary-dark) }
.year-links a:hover { background: var(--moss-tint); text-decoration: underline }
.year-links .year-index-all { grid-column: 1 / -1; justify-self: start; min-height: var(--tap); padding: 0; border: 0; background: transparent; box-shadow: none; font-size: .875rem; text-decoration: underline }
.year-links .year-index-all::before { content: none }
@container home-years (min-width: 55em) {
  .year-links { grid-template-columns: repeat(6,minmax(0,1fr)) }
}

.subject-browse { container: home-subjects / inline-size; display: grid; gap: var(--s5) var(--s7); padding-block: var(--s6); border-top: 3px solid var(--primary-dark); border-bottom: 1px solid var(--border) }
.subject-browse-heading { min-width: 0 }
.subject-browse-heading h2 { max-width: 16ch; margin-bottom: var(--s3); font-size: 1.75rem; color: var(--primary-dark); text-wrap: pretty }
.browse-text-link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: .875rem; color: var(--primary-dark); text-decoration: underline }
.subject-index { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); column-gap: var(--s6) }
.subject-index li { min-width: 0; border-bottom: 1px solid var(--border) }
.subject-index a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 3.5rem; height: 100%; padding: var(--s3) var(--s2); color: var(--primary-dark); font-size: .9375rem; line-height: 1.5; border-left: 3px solid transparent }
.subject-index a > span:first-child { min-width: 0 }
.subject-index-arrow { flex: 0 0 auto; color: var(--secondary) }
.subject-index a:hover, .subject-index a:focus-visible { background: var(--card); border-left-color: var(--primary); text-decoration: underline }
.reading-routes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap: var(--s4) var(--s6) }
.reading-route { display: flex; flex-direction: column; justify-content: center; gap: var(--s1); padding: var(--s3) var(--s4); border-left: 3px solid var(--wood-edge); min-height: var(--tap) }
.reading-route-label { color: var(--primary-dark); font-size: .9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em }
.reading-route-note { color: var(--muted-fg); font-size: .8125rem }
.reading-route:hover { background: var(--card) }
@media (min-width: 64rem) {
  .subject-browse { grid-template-columns: minmax(0,1fr) minmax(0,2fr) }
}
@container home-subjects (max-width: 42em) {
  .subject-browse-heading, .subject-index { grid-column: 1 / -1 }
}

.collection-order { margin: 0; color: var(--muted-fg); font-size: .8125rem }
.collection-index { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,23rem),1fr)); gap: var(--s5); margin-top: var(--s5) }
.collection-index li { display: flex; min-width: 0 }
.collection-link { display: flex; flex-direction: column; gap: var(--s3); width: 100%; padding: min(var(--s5),5vw); border: 1px solid var(--border); border-left: .625rem solid var(--primary); border-radius: var(--s1) var(--r-sm) var(--r-sm) var(--s1); background: var(--card); box-shadow: 0 3px 0 var(--muted), 0 4px 0 var(--border) }
.collection-index li:nth-child(even) .collection-link { border-left-color: var(--wood-edge) }
.collection-label { color: var(--muted-fg); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em }
.collection-name { color: var(--primary-dark); font-size: 1.375rem; font-weight: 600; line-height: 1.4 }
.collection-open { margin-top: auto; color: var(--secondary); font-size: .875rem; text-decoration: underline; text-underline-offset: .2em }
.collection-link:hover { border-top-color: var(--wood-edge); border-right-color: var(--wood-edge); border-bottom-color: var(--wood-edge) }
.collection-link:hover .collection-name, .collection-link:focus-visible .collection-name { text-decoration: underline; text-underline-offset: .2em }

/* Book: complete reading panel first, reference panel beside it on desktop. */
.reading-room-book { gap: var(--s5) }
.reading-paper { border-top: 6px solid var(--primary); padding: var(--s5) var(--s4) }
.book-heading .hero-title { font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); margin-bottom: var(--s2) }
.book-heading .hero-author { font-size: .9375rem; font-weight: 400; margin-bottom: var(--s4) }
.recognition { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: .75rem; font-weight: 700; color: var(--primary-dark); margin-bottom: var(--s4) }
.recognition a { background: var(--moss-tint); padding: var(--s2); border-radius: var(--s1); min-height: var(--tap); display: inline-flex; align-items: center }
.article-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); border-block: 1px solid var(--border); padding-block: var(--s1); margin: var(--s4) 0 var(--s5); font-size: .75rem; font-weight: 700 }
.article-nav a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: underline; color: var(--primary-dark) }
.reading-room-book .book-summary, .reading-room-book .context-prose,
.home-intro .standfirst, .book-feature .feature-prose, .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 .sidebar-card { margin: 0 }
.cover-board { display: none }
.record-card { background: var(--moss-tint); border-color: var(--moss-border) }
.record-card dl { margin: 0 }
.record-card dd { margin: var(--s1) 0 var(--s3); font-size: .875rem }
.record-card dt { margin-top: var(--s3); font-size: .75rem; color: var(--muted-fg); font-weight: 700 }
.book-companion .book-link { text-decoration: underline; font-size: .875rem }
.book-companion .author-name { font-size: .8125rem }
@media (min-width: 48rem) {
  .reading-paper { padding: var(--s6) }
  .book-heading .hero-author { font-size: var(--t-sm) }
  .article-nav { font-size: .8125rem }
  .reading-room-book .book-summary, .reading-room-book .context-prose,
  .book-feature .feature-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) 17rem; gap: var(--s6) }
  .reading-room-book .reading-paper { padding: var(--s6) var(--s7) }
  .book-companion { grid-template-columns: minmax(0,1fr) }
  .cover-board { display: block; padding: var(--s5); border-radius: var(--r-md); border-bottom: 7px solid var(--wood-edge); background: repeating-linear-gradient(0deg,#e0cfb840 0 2px,#ddc9b530 2px 5px),var(--wood); box-shadow: var(--shadow-card) }
  .cover-board .book-sidebar { padding: 0; margin: 0 }
  .cover-board .book-cover-gen { width: 100%; max-width: 12rem; min-height: 18rem; height: auto; margin: auto }
  .cover-board .cover-title { font-size: 1.125rem }
  .cover-board .cover-author { font-size: .75rem }
}

/* Prize archive: all records, with native decade navigation. */
.prize-archive .reading-paper { container: prize-records / inline-size }
.prize-archive .page-header { margin-bottom: var(--s4); padding-bottom: var(--s4) }
.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 thead { background: var(--moss-tint) }
.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 }
.book-feature #archive-feature-title { font-size: 1.625rem; margin: 0 0 var(--s2) }
.book-feature #archive-feature-title a { text-decoration: underline }
.directory-note { margin: var(--s5) 0 0; font-size: .875rem; max-width: 70ch; color: var(--muted-fg) }
.directory-browse { margin-top: var(--s6) }
.home-discovery { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s5) }
@media (min-width: 48rem) { .home-discovery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 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% }