/* Shared type roles. rem follows the reader's browser font preference;
   screen breakpoints change roles locally, never the root scale. */
html { font-size: 100%; }
:root {
  --type-caption: .75rem;         /* 12px at the browser's default 16px */
  --type-small: .875rem;          /* 14px */
  --type-body: 1rem;              /* 16px */
  --type-reading: 1.0625rem;      /* 17px */
  --type-lead: 1.125rem;          /* 18px */
  --type-card-title: 1.25rem;     /* 20px */
  --type-section-title: 1.5rem;   /* 24px */
  --type-page-title: 2.5rem;      /* 40px */
  --type-cover-title: clamp(1.8125rem, 1.25rem + 1vw, 2.4375rem);
  --leading-body: 1.85;
  --leading-reading: 1.95;
  --leading-title: 1.4;
}
body { font-size: var(--type-body); line-height: var(--leading-body); }

/* Navigation and actions stay legible at the same size on both devices. */
.nav-item, .search-trigger, .button, .text-link,
.chapter-links a, .toc a, .article-nav a,
.beer-home .hero-actions .button, .beer-home .hero-actions .text-link,
.beer-home .section-label > .text-link,
.notebook-links .button, .notebook-links .text-link,
.search-result p, .search-input-wrap input {
  font-size: var(--type-small);
}
.nav-label, .side-intro, .breadcrumb, .eyebrow, .heading-meta,
.article-meta, .sample-reading .article-meta, .toc-title,
.badge, .chapter-card .card-meta, .beer-home .chapter-card .card-meta,
.tasting-card-meta, .tasting-facts dt, .tasting-unit-note,
.radar-values dt, .collection-radar .radar-values dt,
.section-kicker, .chapter-overline, .collection-count,
.notebook-footnote, .tasting-photo figcaption {
  font-size: var(--type-caption);
}

/* Descriptions are reading content, even when they live inside a card. */
.hero p, .page-heading p, .chapter-intro,
.chapter-card p, .beer-home .chapter-card p,
.beer-home .chapter-card:first-child p,
.topic-row p, .utility-card p, .beer-home .utility-card p,
.home-tasting-link p, .notebook-current h3,
.tasting-intro p, .tasting-provenance, .tasting-scale-note,
.resource-row p, .planned-topics, .term p,
.insight, .source-list, .sample-reading .source-list,
.sample-reading .brew-stage p, .sample-reading figcaption,
.collection-reading-note {
  font-size: var(--type-small);
}
.topic-row h2, .chapter-card h3, .resource-row h2,
.article-body h3, .sample-reading .brew-stage h3,
.tasting-observation h2 { font-size: var(--type-body); }
.beer-home .chapter-card h3, .home-tasting-link h3 {
  font-size: var(--type-card-title);
}
.beer-home .chapter-card:first-child h3 { font-size: var(--type-section-title); }

.page-heading h1, .sample-reading .article-header h1,
.article-header h1, .tasting-detail h1 {
  font-size: var(--type-page-title);
  line-height: var(--leading-title);
}
.article-body, .sample-reading .article-body {
  font-size: var(--type-reading);
  line-height: var(--leading-reading);
}
.article-deck, .sample-reading .article-deck,
.tasting-feature p, .tasting-collection .page-heading p,
.sample-reading .sensory-note p { font-size: var(--type-body); }
.article-body h2, .sample-reading .article-body h2,
.section-label h2, .beer-home .section-label h2,
.beer-home .home-collections .section-label h2 {
  font-size: var(--type-section-title);
}
table, .process div { font-size: var(--type-small); }

/* Cover and daily poster have their own composition, with shared text roles. */
.beer-home .beer-cover-daily h1 { font-size: var(--type-cover-title); }
.beer-cover-daily .hero-copy > p,
.beer-cover-daily #home-guide-card > p,
.beer-cover-daily.home-deck-compact #home-guide-card > p {
  font-size: var(--type-small);
}
.beer-home .beer-cover-daily .hero-actions .button {
  font-size: var(--type-small);
}
.beer-home .beer-cover-daily .daily-poster-notes,
.beer-cover-daily .daily-poster-facts dd,
.beer-cover-daily.home-deck-compact .daily-poster-facts dd {
  font-size: var(--type-small);
}
.beer-cover-daily .daily-poster-copy h3,
.beer-cover-daily.home-deck-compact .daily-poster-copy h3 {
  font-size: var(--type-card-title);
}
.beer-cover-daily .daily-poster-date,
.beer-cover-daily .daily-poster-back-date,
.beer-cover-daily .daily-poster-facts dt,
.beer-home .beer-cover-daily .daily-poster-scope,
.beer-home .beer-cover-daily.home-deck-compact .daily-poster-scope,
.beer-cover-daily .daily-poster-details,
.home-card-next, #home-card-action,
.beer-cover-daily .cover-footnote,
.daily-poster-heading > a {
  font-size: var(--type-caption);
}

@media (max-width: 700px) {
  :root {
    --type-reading: 1rem;
    --type-page-title: 2rem;
    --type-cover-title: 2.125rem;
  }
  .beer-home .beer-cover-daily.home-deck-compact h1 { font-size: 1.75rem; }
  .beer-cover-daily #home-poster-card .daily-poster-heading .eyebrow {
    font-size: var(--type-caption);
  }
  /* Longer text can scroll within a card without losing the flip control. */
  .beer-cover-daily .daily-poster-copy {
    overflow-y: auto;
    justify-content: safe center;
    overscroll-behavior: contain;
  }
  .beer-cover-daily > #home-guide-card { overflow-y: auto; }
  .beer-cover-daily.home-deck-compact > #home-guide-card {
    grid-template-columns: minmax(0, 1fr) 80px;
  }
  .beer-cover-daily .daily-poster-copy > * { flex-shrink: 0; }
  .beer-cover-daily .daily-poster-details { align-self: flex-start; }
  .footer { flex-wrap: wrap; }
  .footer > p { font-size: var(--type-caption); white-space: normal; }
}
@media (max-width: 360px) {
  :root { --type-cover-title: 1.875rem; }
}

/* Reflow rather than clip when the reader enlarges the default font. */
@media (max-width: 700px) {
  .footer > p { flex: 0 1 auto; max-width: 100%; overflow-wrap: anywhere; }
  .beer-home .beer-cover-daily h1 em { white-space: normal; }
  .beer-cover-daily > #home-guide-card { justify-content: safe center; }
  .beer-cover-daily.home-deck-compact > #home-guide-card {
    align-content: safe center;
  }
}

/* Let the reading spread start at the main content edge, with room for titles
   in the local contents list rather than a narrow centered column. */
@media (min-width: 901px) {
  .reading-grid, .reading-grid.sample-reading {
    width: 100%;
    max-width: 1160px;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) clamp(200px, 18vw, 260px);
    gap: 36px;
  }
  .reading-grid > article { min-width: 0; }
  .toc a { padding-block: 6px; }
  .toc-title { letter-spacing: 1px; }
}
@media (min-width: 701px) {
  /* Align the poster with the title beneath its date. Keep facts compact
     after the type increase, without shrinking their text again. */
  .beer-cover-daily .daily-poster-image { margin-top: 22px; }
  .beer-home .beer-cover-daily .daily-poster-notes {
    line-height: 1.7;
    margin-bottom: 10px;
  }
  .beer-cover-daily .daily-poster-facts > div { padding-block: 6px; }
  .beer-cover-daily .daily-poster-facts dd { line-height: 1.6; }
  .beer-home .beer-cover-daily .daily-poster-scope {
    margin-top: 8px;
    line-height: 1.6;
  }
  .beer-cover-daily .daily-poster-details { margin-top: 7px; }
}