/* Tiny Baby guides: article pages, the guides hub, Privacy, and Support.
   Fonts and colors come from /styles.css (var(--serif), var(--sans), var(--ink), var(--ink-soft)). */

.guide { background: var(--milk, #fbf8f3); }

/* Header: the wordmark alone, in the serif, with no pill behind it, on the same edges as the footer */
.guide-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: max(22px, env(safe-area-inset-top)) max(clamp(24px, 6vw, 96px), calc((100% - 1280px) / 2 + 96px)) 0;
}
.guide-header .wordmark { background: none; padding: 0; margin: 0; border-radius: 0; font: 600 1.375rem/1 var(--serif); color: var(--ink); text-decoration: none; }
.guide-header-link { font-size: 0.9375rem; color: var(--ink-soft); text-decoration: none; }
.guide-header-link:hover { color: var(--ink); text-decoration: underline; }

/* Article */
.guide-article {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 32px) 72px;
  color: var(--ink);
}
.guide-article .eyebrow { margin: 0 0 10px; font: 600 0.8125rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.guide-article .eyebrow a { color: var(--ink-soft); text-decoration: none; }
.guide-article .eyebrow a:hover { color: var(--ink); }
.guide-article h1 {
  margin: 0 0 18px;
  font: 500 clamp(2rem, 5vw, 2.875rem)/1.08 var(--serif);
  letter-spacing: -0.015em; text-wrap: balance;
}
.guide-article .answer { margin: 0 0 32px; font-size: clamp(1.125rem, 2.2vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.guide-article h2 { margin: 40px 0 12px; font: 600 clamp(1.375rem, 3vw, 1.625rem)/1.2 var(--serif); letter-spacing: -0.01em; }
.guide-article h3 { margin: 28px 0 8px; font: 600 1.1875rem/1.3 var(--sans); }
.guide-article p, .guide-article li { line-height: 1.65; text-wrap: pretty; }
.guide-article p { margin: 0 0 16px; }
.guide-article ul, .guide-article ol { margin: 0 0 18px; padding-left: 1.3em; }
.guide-article li { margin: 0 0 8px; }
.guide-article a { color: var(--glory-ink, #4a5fa6); text-underline-offset: 2px; }
.guide-article a:hover { color: var(--ink); }
.guide-article sup { font-size: 0.7em; line-height: 0; margin-left: 1px; }
.guide-article sup a { text-decoration: none; padding: 0 1px; }
.sign-link { font-size: 0.9375rem; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 8px 0 24px; }
.guide-article table { width: 100%; border-collapse: collapse; font-size: 0.9688rem; }
.guide-article th, .guide-article td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(34, 48, 74, 0.14); }
.guide-article thead th { font-weight: 600; color: var(--ink-soft); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.guide-article tbody th { font-weight: 600; }

/* In short */
.in-short { margin: 40px 0 0; padding: 20px 24px 8px; background: #fff; border: 1px solid rgba(34, 48, 74, 0.1); border-radius: 16px; }
.in-short h2 { margin: 0 0 10px; font: 600 0.8125rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* App card */
.app-card { margin: 32px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--night, #1c2742); color: #fff; }
.app-card--talk { background: #22304a; }
.app-card--taste { background: #34446a; }
.app-card--sleep { background: #2b2f55; }
.app-card p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.86); }
.app-card .app-card-name { margin: 0 0 6px; font: 600 1.375rem/1.1 var(--serif); color: #fff; }
.app-card .app-card-link {
  display: inline-block; padding: 11px 18px; border-radius: 999px;
  background: #fff; color: var(--ink); font: 600 0.9375rem/1 var(--sans); text-decoration: none;
}
.app-card .app-card-link:hover { background: var(--morning, #fff4e4); color: var(--ink); }
/* Tiny Sleep isn't out yet: a quiet label, not a button */
.app-card .app-card-soon { display: inline-block; padding: 10px 17px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.9); font: 600 0.9375rem/1 var(--sans); }

/* More guides, sources, disclaimer */
.more-guides h2, .sources h2 { font-size: 1.25rem; }
.more-guides ul { list-style: none; padding: 0; }
.sources ol { padding-left: 1.4em; }
.sources li { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; overflow-wrap: anywhere; }
.sources li:target { background: var(--morning, #fff4e4); }
.disclaimer { margin: 32px 0 0 !important; padding-top: 16px; border-top: 1px solid rgba(34, 48, 74, 0.14); font-size: 0.9375rem; color: var(--ink-soft); }

/* Hub */
.hub-group { margin-top: 40px; }
.hub-intro { color: var(--ink-soft); }
.hub-list { list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.hub-list li { margin: 0; padding: 16px 20px; background: #fff; border: 1px solid rgba(34, 48, 74, 0.1); border-radius: 14px; }
.hub-list a { font: 600 1.0625rem/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.hub-list a:hover { text-decoration: underline; }
.hub-list p { margin: 4px 0 0; font-size: 1rem; color: #4a5368; }
.plain-links { padding-left: 1.2em; }