/* Visit Mary: the two layouts the brief names.
   Home is the Public Domain Review front page: a masthead on a hairline, the
   art as the widest thing on the page, a side column with a thick left rule,
   everything square. The desktop prayer screen is the Met object page: text
   in a narrow column, the work large beside it. Loaded last. */

/* ─── Masthead ────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  backdrop-filter: none;
}
.site-logo { font-family: var(--font-serif); font-size: 1.125rem; color: var(--ink); }
.site-logo svg { color: var(--accent-ink); }

/* ─── The home ground: a fine bead-dot pattern, nowhere else ── */

#home-screen {
  background-image: radial-gradient(var(--dots) 1px, transparent 1.3px);
  background-size: 14px 14px;
  background-position: 0 0;
}
#home-screen .hero { background: none; animation: none; padding: 2rem 1rem 1.5rem; }
#home-screen .hero h1 { font-size: clamp(2.25rem, 7vw, 3.25rem); line-height: 1.05; text-wrap: balance; }
#home-screen .hero-subtitle { font-size: 1rem; max-width: 28rem; }
#home-screen .hero-verse { font-size: 0.9375rem; }

/* Section headings: sentence case on a hairline, not an eyebrow. */
.section-header { padding: 0; margin-bottom: 0.875rem; border-bottom: 1px solid var(--ink); align-items: baseline; }
.section-header h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
  white-space: normal;
  padding-bottom: 0.375rem;
}
.section-header .divider { display: none; }
.section-header h2 svg { width: 0.9em; height: 0.9em; color: var(--accent-ink); }

/* The featured card: the work first, then the words. */
.featured-card { border-radius: 2px; margin-bottom: 2rem; transition: none; }
.featured-card:hover { transform: none; border-color: var(--accent-ink); }
.featured-card:active { transform: none; }
.featured-art { aspect-ratio: 8 / 5; overflow: hidden; background: var(--muted); border-bottom: 1px solid var(--ink); }
.featured-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-content { padding: 1.125rem 1.25rem 1.25rem; }
.featured-tag { font-style: italic; font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 0.375rem; }
.featured-tag svg { display: none; }
.featured-card h2, .featured-card h3 { font-family: var(--font-serif); font-size: clamp(1.5rem, 5vw, 1.875rem); font-weight: 400; line-height: 1.15; color: var(--ink); margin: 0; }
.featured-card p { color: var(--muted-foreground); opacity: 1; font-size: 0.9375rem; margin-top: 0.5rem; }
.featured-footer { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.duration { opacity: 1; color: var(--muted-foreground); font-size: 0.8125rem; }
.cta { color: var(--accent-ink); opacity: 1; font-size: 1rem; }

/* The liturgical day keeps its height whether or not the calendar has answered. */
.liturgical-banner { min-height: 5.5rem; border-radius: 2px; border-color: var(--border); }

/* Cards lose their lift and keep a rule. */
.angelus-card, .about-card, .link-card, .stat-card, .mystery-item, .resume-btn, .empty-state, .intention-item, .opt-row { border-radius: 2px; }

/* ─── Two columns at desk width, the side column on a thick rule ── */

@media (min-width: 900px) {
  #app, .site-header-inner { max-width: 1080px; }
  #home-screen.active {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 3rem;
    grid-template-areas:
      'hero hero'
      'day day'
      'resume resume'
      'featured side'
      'choose side'
      'options side'
      'intentions side'
      'about side'
      'footer footer';
    align-items: start;
  }
  #home-screen .hero { grid-area: hero; padding-bottom: 1rem; }
  #liturgical-banner { grid-area: day; }
  #resume-card { grid-area: resume; }
  .featured-card { grid-area: featured; }
  #choose-section { grid-area: choose; }
  #options-section { grid-area: options; }
  #intentions-section { grid-area: intentions; }
  #about-section { grid-area: about; }
  .site-footer { grid-area: footer; }
  #home-screen .side-column {
    grid-area: side;
    border-left: 3px solid var(--accent-ink);
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .quick-prayers { margin: 0; }
}

/* ─── The desktop prayer screen: text beside the work ─────── */

@media (min-width: 1100px) {
  .prayer-section, .prayer-step-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .prayer-section > .prayer-step-wrapper { grid-column: 1 / -1; }
  .prayer-section > *, .prayer-step-wrapper > * { grid-column: 1; }
  .prayer-section > .mystery-art, .prayer-step-wrapper > .mystery-art {
    grid-column: 2;
    grid-row: 1 / span 40;
    margin: 0;
  }
  .prayer-section > .prayer-cross-watermark { grid-column: 1 / -1; }
  .prayer-step-centered { display: block; }
  .prayer-section > .decade-context { grid-column: 1; }
  .mystery-art-small { max-width: 100%; }
}

/* ─── Square controls ────────────────────────────────────── */

.opt-switch, .opt-switch::after, .opt-switch::before { border-radius: 2px; }
.lang-toggle, .theme-toggle, .quick-prayer-chip, .badge, .player-speed-btn, .autoplay-toggle, .font-size-toggle { border-radius: 2px; }
.nav-btn, .nav-btn-primary, .mystery-begin, .completion-btn, .completion-btn-pray, .resume-btn { border-radius: 2px; }
.nav-btn-primary { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.nav-btn-primary:hover { background: var(--accent-fill); opacity: 1; filter: brightness(1.08); }
.player-btn { border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); }

/* Text that people actually read never drops below readable ink. */
.prayer-header-sub, #player-time, .player-speed-btn, .autoplay-toggle span, .prayer-subtitle, .prayer-instruction, .mystery-art-caption { color: var(--parchment-muted); }
.prayer-label { color: var(--accent-ink); font-size: 0.875rem; font-style: italic; }

/* In the dark the duotone cuts sit a little quieter on the ink. */
:root.dark .mystery-art-small img, :root.dark .decade-context-art, :root.dark .featured-art img { filter: brightness(0.85); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .mystery-art-small img, :root:not(.light) .decade-context-art, :root:not(.light) .featured-art img { filter: brightness(0.85); }
}

/* Space is held for the day and the Angelus before the calendar answers. */
.liturgical-banner:empty, .angelus-card:empty { visibility: hidden; }
.angelus-card { min-height: 4.5rem; }
.mystery-time, .mystery-sub, .history-date, .stat-label { color: var(--muted-foreground); opacity: 1; }
.static-page section { margin-top: 2rem; }
.static-page h2 { font-size: 1.5rem; }