/* Readable at normal zoom: meaningful copy is at least 16px on phones. */
:root {
  font-size: 18px;
  --muted: #c3c0b1;
  --gold: #dbc18b;
  --line: #dbc18b50;
}

.grain { opacity: .018; }
.masthead {
  height: auto;
  min-height: 112px;
  padding-block: 22px;
  flex-wrap: wrap;
  row-gap: 18px;
}
.brand { font-size: 20px; letter-spacing: .12em; }
.brand small { font-size: 12px; line-height: 1.8; letter-spacing: .1em; }
.masthead nav { font-size: 16px; flex-wrap: wrap; gap: 12px 24px; }
.masthead nav a { display: inline-flex; align-items: center; min-height: 44px; }

.button, .button.small {
  font-size: 16px;
  min-height: 48px;
  padding: 13px 20px;
  line-height: 1.4;
}
.text-button, .text-link { font-size: 16px; line-height: 1.5; }
.text-button { min-height: 44px; }
.eyebrow, .feature-index { font-size: 13px; line-height: 1.7; letter-spacing: .13em; }
.hero { align-items: center; }
.hero-description { font-size: 1rem; line-height: 1.8; max-width: 480px; }
.hero-actions { flex-wrap: wrap; gap: 16px 22px; }
.hero-footnote p { font-size: 15px; line-height: 1.7; }
.hero-footnote strong { color: var(--cream); }
.manifesto-strip { flex-wrap: wrap; gap: 15px 28px; }
.manifesto-strip span { font-size: 13px; }
.intro p:not(.eyebrow), .feature p, .lede,
.shop-card p, .room-banner p, dialog p {
  font-size: 1rem;
  line-height: 1.8;
}
.intro { gap: 45px; }
.intro p:not(.eyebrow) { max-width: 470px; }
.feature { padding: 30px; }
.feature h3 { font-size: 28px; line-height: 1.25; }
.invitation p { font-size: 16px; line-height: 1.7; }
.footer-top > div { font-size: 16px; flex-wrap: wrap; gap: 16px 25px; }
.footer-top { flex-wrap: wrap; }
.footer-top small, .footer-bottom, .footer-bottom button { font-size: 14px; }
.footer-bottom { flex-wrap: wrap; line-height: 1.7; }

.book-meta h3 { font-size: 22px; }
.book-meta p, .book-meta .button { font-size: 16px; line-height: 1.6; }
.cover-author { font-size: 12px; line-height: 1.6; letter-spacing: .06em; }
.cover-imprint { font-size: 10px; letter-spacing: .1em; }
.book-cover { padding: 23px 17px; }
.book-cover .cover-title { font-size: 26px; max-height: none; }
.badge, .credit-pill { font-size: 16px; line-height: 1.5; white-space: normal; }
.shop-card p { min-height: 0; }
.purchase-line { flex-wrap: wrap; }
.purchase-line strong { font-size: 18px; }
.profile-handle, .room-stats { font-size: 16px; line-height: 1.7; }
.room-stats { flex-wrap: wrap; }
.room-stats strong { font-size: 32px; }
.player-area select { width: 230px; font-size: 16px; padding: 12px; }

label, .search-label > span { font-size: 16px; line-height: 1.6; }
input, textarea, select { font-size: 1rem; line-height: 1.5; padding: 13px; }
.checkbox { font-size: 16px; line-height: 1.7; }
.checkbox input { min-width: 20px; height: 20px; flex-shrink: 0; }
.quiz-choice { font-size: 1rem; line-height: 1.6; min-height: 52px; }
.quiz-choice input { min-width: 20px; height: 20px; }
.quiz-question h3 { font-size: 25px; }
.quiz-question legend, .admin-editor legend { font-size: 16px; }
.admin-list button { font-size: 16px; line-height: 1.5; padding: 15px; }
.admin-list small, .jobs li { font-size: 15px; line-height: 1.7; }
.form-message, .mono { font-size: 16px; line-height: 1.7; }
.admin-columns { grid-template-columns: 280px minmax(0, 1fr); }
dialog { max-width: 730px; }
.close-button { font-size: 34px; width: 44px; height: 44px; }
#toast, #audio-dock, #audio-dock button { font-size: 16px; line-height: 1.5; }
#audio-dock { flex-wrap: wrap; max-width: calc(100% - 30px); }
.manuscript { font-size: 20px; line-height: 1.9; }

@media (max-width: 1100px) {
  .masthead nav { order: 3; width: 100%; justify-content: center; }
  .hero { grid-template-columns: 1.1fr 1fr; gap: 35px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-icon { float: right; margin: 0 0 10px 20px; }
  .intro { grid-template-columns: 1fr; gap: 10px; }
  .intro p:not(.eyebrow) { margin-left: 0; max-width: 650px; }
  .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { font-size: 16px; }
  .masthead { padding-block: 18px; gap: 16px; }
  .masthead .brand { font-size: 18px; gap: 12px; white-space: normal; }
  .brand small { font-size: 11px; line-height: 1.7; }
  .masthead .button { font-size: 16px; padding: 12px 16px; }
  .masthead nav { gap: 10px 22px; font-size: 16px; }
  .hero { grid-template-columns: 1fr; gap: 35px; padding-top: 35px; }
  .hero h1 { font-size: clamp(42px, 12vw, 57px); }
  .hero .eyebrow { font-size: 12px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button, .hero-actions .text-button { font-size: 16px; }
  .hero-footnote p { font-size: 15px; }
  .manifesto-strip { justify-content: center; white-space: normal; }
  .manifesto-strip span { font-size: 12px; }
  .feature p, .intro p:not(.eyebrow), .lede, .shop-card p, dialog p { font-size: 17px; }
  .invitation .eyebrow { font-size: 12px; }
  .footer-top > div { font-size: 16px; }
  .book-grid, .shelf-surface .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-cover .cover-title { font-size: 21px; }
  .book-cover { padding: 20px 12px; }
  .cover-imprint { font-size: 9px; }
  .cover-author { font-size: 11px; }
  .book-meta h3 { font-size: 21px; }
  .room-banner { padding: 25px 20px; }
  .room-stats, .profile-handle { font-size: 16px; }
  .admin-columns { grid-template-columns: minmax(0, 1fr); }
  .badge { font-size: 16px; }
  dialog { padding: 42px 22px 28px; }
  #toast { bottom: 18px; font-size: 16px; }
}

@media (max-width: 360px) {
  .book-grid, .shelf-surface .book-grid { grid-template-columns: minmax(0, 1fr); }
}