/* Approved 2026-09 visual redesign: calm, minimal, one accent derived from
   the NobNob yellow. Loaded after styles.css on every page (hand-written and
   generated) so the whole site shares the same tokens, type and spacing
   without forking the component rules in styles.css -- this file only
   overrides variables, fonts, and a handful of the busiest ornaments. */

:root {
  --paper: #FAF8F4;
  --cream: #F1EFE9;
  --ink: #1E2124;
  --muted: #6E6A63;
  --line: #E6E1D8;
  --yellow: #C99A2E;      /* decorative accent, derived from brand #ffca2c */
  --pink: #C99A2E;
  --pink-ink: #7A5A0E;    /* text-safe accent, 4.5:1+ on --paper */
  --blue: #C99A2E;
  --blue-ink: #7A5A0E;
  --pink-soft: #F6F0DF;   /* light accent tint for bands */
}

body, button, input, select, textarea { font-family: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif; }
h1, h2, h3,
.brand-type, .ticker-track, .step-title, .scripture p, .gallery-burst,
.gallery-caption p, .phone-topic, .faq-list summary, .footer-brand > p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
}
.ticker-track b, .faq-list summary::after { font-family: 'Manrope', sans-serif; }

/* Calmer ornaments: the approved look has no rotated stickers, heavy pill
   shadows, or oversized radii. Soften them without removing the elements. */
.sun-sticker { display: none; }
.hero-side-note { transform: none; box-shadow: none; border: 1px solid rgba(255,255,255,.5); }
.gallery-burst { transform: none; }
.rhythm-intro, .today-card, .phone, .sample-dialog, .family-note { box-shadow: none; }
.story-photo, .family-images, .app-image, .today-card, .rhythm-intro, .phone {
  border-radius: 6px;
}
.today-gallery figure, .photo-grid figure { border-radius: 4px; }
.faq-list details, .lib-cards a, .topics-grid a { border-radius: 4px; }
.rhythm-steps li { border-radius: 999px; } /* already a pill; keep it */

/* Full-bleed hero carousel with an overlay card, per the approved anatomy:
   a single background carousel instead of a split two-column hero. */
@media (min-width: 921px) {
  .hero { position: relative; grid-template-columns: 1fr; height: 760px; background: var(--ink); }
  .hero-media { position: absolute; inset: 0; min-height: 100%; }
  .hero-media img { width: 100%; height: 100%; }
  .hero-copy { position: absolute; left: 56px; bottom: 64px; z-index: 2; width: min(560px, calc(100% - 112px));
    padding: 40px 44px; background: rgba(255,255,255,.94); border-radius: 6px; justify-content: flex-start; }
  .hero-intro, .hero-footnote, .hero-jump { max-width: none; }
  .hero-carousel-ui { right: 56px; left: auto; bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) { .hero-slide { transition: opacity .2s !important; } }

/* The approved look has no dark sections and no dark footer -- only small,
   contained accent cards (today-card, rhythm-intro) stay dark, the way the
   reference uses an occasional ink card on a light band. Full-bleed sections
   convert to the light tokens instead. */
.family { background: var(--cream); }
.family-copy > p:not(.section-label) { color: var(--text-3, #3F4447); }
.family-note { color: #fff; }

.app { background: var(--cream); color: var(--ink); }
.app .section-label { color: var(--pink-ink); }
.app h2 em { color: var(--pink-ink); }
.app-copy > p:not(.section-label) { color: var(--muted); }
.app-check b { color: var(--ink); }
.app-check small { color: var(--muted); }

.site-footer { background: var(--cream); color: var(--ink); }
.site-footer .brand-icon { background: var(--ink); color: var(--yellow); }
.footer-brand > p { color: var(--pink-ink); }
.footer-links strong { color: var(--muted); }
.footer-links a { color: var(--ink); opacity: .78; }
.footer-links a:hover { color: var(--pink-ink); opacity: 1; }
.footer-note p { color: var(--muted); }
.footer-note span { color: var(--muted); border-top-color: var(--line); }
.crisis-note { border-top-color: var(--line); }
.crisis-note p, .crisis-note li { color: var(--muted); }
.crisis-note b { color: var(--ink); }
.crisis-note a { color: var(--pink-ink); }
.crisis-disclaimer { color: var(--muted) !important; }

/* Generated content pages (day, journey index, library index/article) had no
   rules of their own before this redesign -- they rendered as unstyled
   browser defaults. This gives them the same card/type language as the rest
   of the site. */
.day, .journey, .article, .legal { max-width: 800px; margin: 0 auto; }
.day-head { max-width: 640px; margin: 0 auto 8px; text-align: center; }
.day-head h1 { margin-top: 10px; }
.day-minutes { margin-top: 10px; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.day-art { margin: 32px 0 0; }
.day-art img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 6px; }

.day-center, .day-scripture, .day-step { max-width: 640px; margin: 40px auto 0; padding-top: 28px; border-top: 1px solid var(--line); }
.day-step-tag { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--pink-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.day-step-num { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; color: #fff; background: var(--ink); border-radius: 50%; font-size: 11px; }
.day-step-label { margin-top: 12px; font-size: clamp(24px, 3vw, 32px); }
.day-step-body { margin-top: 14px; color: var(--text-3, #3F4447); font-size: 16px; line-height: 1.7; }
.day-scripture .scripture { margin: 12px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--yellow); }
.scripture-credit { max-width: 640px; margin: 32px auto 0; color: var(--muted); font-size: 13px; }
.day-nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; max-width: 640px; margin: 44px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.day-nav a { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.day-nav a b { color: var(--ink); font-size: 15px; }
.day-nav-all { align-self: center; font-weight: 700; color: var(--pink-ink) !important; }
.day-nav-next { text-align: right; align-items: flex-end; }

.journey-part { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.journey-part:first-of-type { margin-top: 56px; }
.journey-part-head { max-width: 640px; }
.journey-part-tagline { margin-top: 10px; font-size: 19px; color: var(--pink-ink); }
.journey-part-blurb { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.journey-part-count { margin-top: 10px; color: var(--muted); font-size: 13px; }
.journey-part-count strong { color: var(--ink); }
.day-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.day-cards a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 4px; }
.day-cards a:hover { background: #fff; border-color: var(--pink-ink); }
.day-card-num { color: var(--pink-ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.day-card-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.day-card-ref { color: var(--muted); font-size: 12px; }

.article-head { max-width: 680px; margin: 0 auto; text-align: center; }
.article-lead { margin-top: 14px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.article-section { max-width: 680px; margin: 40px auto 0; }
.article-section p { margin-top: 14px; color: var(--text-3, #3F4447); font-size: 16px; line-height: 1.7; }
.article-section ul { margin: 14px 0 0; padding-left: 22px; color: var(--text-3, #3F4447); font-size: 16px; line-height: 1.7; }
.article-verse { margin: 20px 0 0 !important; padding: 0 0 0 18px; border-left: 3px solid var(--yellow); }
.article-closing { max-width: 680px; margin: 32px auto 0; font-size: 17px; font-style: italic; color: var(--ink); }
.article-related { max-width: 680px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.article-related h2 { font-size: 20px; }
.article-related ul { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }

@media (max-width: 700px) {
  .day-nav { flex-direction: column; gap: 16px; }
  .day-nav-next { text-align: left; align-items: flex-start; }
}