@font-face {
  font-family: "Charter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/xcharter-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Charter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/xcharter-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Charter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/xcharter-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Charter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/xcharter-bold-italic.woff2") format("woff2");
}

:root {
  --bg: #171310;
  --bg-elevated: #201c18;
  --border: rgba(236, 230, 218, 0.12);
  --text: #ece6da;
  --text-muted: #a3a9b8;
  --accent: #8fb8ff;
  --max-width: 760px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Charter", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --youtube: #ff0000;
  --spotify: #1db954;
  --apple-podcasts: #9c3fe4;
  --amazon-music: #00a8e1;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fdfaf3;
    --bg-elevated: #f5f1e7;
    --border: rgba(43, 38, 32, 0.12);
    --text: #4a443a;
    --text-muted: #55575c;
    --accent: #3a63c9;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
}

/* Grid, not flex: the desktop layout is genuinely two-dimensional (logo top
   left, tagline directly under it, nav to the right spanning both rows) and
   the mobile layout needs to reorder those same three pieces into a plain
   stack (logo, then tagline, then nav) - flexbox only reorders within a
   single row/column, grid-template-areas lets each breakpoint just declare
   its own arrangement of the same three named pieces. This replaced an
   earlier flexbox version where the tagline ended up visually attached to
   the nav row instead of the logo on mobile, since nav sat between them in
   source order whenever it wrapped. */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo nav"
    "tagline .";
  align-items: center;
  column-gap: 1.25rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

.logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  word-spacing: -0.2em;
  color: var(--text);
  text-decoration: none;
}

.header-tagline {
  grid-area: tagline;
  margin: -0.3rem 0 0 calc(22px + 0.5rem);
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.75;
}

@media (max-width: 640px) {
  .site-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "tagline"
      "nav";
    row-gap: 0.5rem;
  }
}

.logo svg {
  color: var(--accent);
  flex-shrink: 0;
}

.logo-accent {
  color: var(--accent);
  font-style: italic;
}

.site-header nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 1.25rem;
}

.site-header nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.site-header nav a:hover {
  color: var(--accent);
}

.nav-more {
  display: contents;
}

.nav-menu-toggle,
.nav-menu-panel {
  display: none;
}

/* On mobile, only Articles and Sleep Stories stay directly in the nav row;
   About and Contact move behind a hamburger toggle so the row doesn't wrap
   or crowd the language switcher. */
@media (max-width: 640px) {
  .nav-more {
    display: block;
    position: relative;
  }

  .nav-more-link {
    display: none;
  }

  .nav-menu-toggle {
    display: block;
    cursor: pointer;
    background: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
  }

  .nav-menu-toggle:hover,
  .nav-menu-toggle[aria-expanded="true"] {
    color: var(--accent);
  }

  .nav-menu-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .nav-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    flex-direction: column;
    gap: 0.6rem;
    white-space: nowrap;
    z-index: 10;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
  }

  .nav-menu-panel:not([hidden]) {
    display: flex;
  }

  .nav-menu-panel a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
  }

  .nav-menu-panel a:hover {
    color: var(--accent);
  }
}

.lang-switch {
  position: relative;
}

.lang-switch-toggle {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.lang-switch-toggle:hover,
.lang-switch-toggle[aria-expanded="true"] {
  opacity: 0.7;
}

.lang-switch-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  white-space: nowrap;
  z-index: 10;
}

.lang-switch-menu a {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
}

.lang-switch-menu a:hover {
  color: var(--accent);
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.hero h1 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.hero .tagline {
  color: var(--text-muted);
  font-size: 1.1rem;
}

a {
  color: var(--accent);
}

.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}

.footer-updated {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  opacity: 0.75;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

.icon-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-heading svg {
  flex-shrink: 0;
  color: var(--accent);
}

.eyebrow.icon-heading svg {
  width: 14px;
  height: 14px;
}

h1.icon-heading svg,
h2.icon-heading svg {
  width: 22px;
  height: 22px;
}

/* The RSS glyph's broadcast arcs fill their own viewBox more fully than the
   other icon-heading icons (e.g. the YouTube play button, which has more
   built-in padding), so at the same box size it reads as visibly bigger
   next to them - shrink it specifically to match. */
h1.icon-heading svg.icon-rss,
h2.icon-heading svg.icon-rss {
  width: 17px;
  height: 17px;
}

a.icon-heading {
  display: inline-flex;
}

a.icon-heading svg {
  width: 18px;
  height: 18px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* A text break inserted into the middle (or, on a short category page, the
   end) of a Sleep Stories card grid, pointing readers who aren't sure what
   to pick toward the article that helps them decide. Spans the full grid
   width so it reads as a deliberate interruption, not a stray card. */
.sleep-stories-break {
  grid-column: 1 / -1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.sleep-stories-break a {
  font-weight: 600;
}

.card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  text-decoration: none;
  color: var(--text);
}

.card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.card .card-meta {
  font-family: var(--mono);
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
}

.card .card-platform-tag {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--youtube);
  margin: 0.6rem 0 0;
}

.card .card-platform-tag[data-platform="spotify"] { color: var(--spotify); }
.card .card-platform-tag[data-platform="apple"] { color: var(--apple-podcasts); }
.card .card-platform-tag[data-platform="amazon"] { color: var(--amazon-music); }

.card-platform-icon {
  display: flex;
}

.card-platform-icon svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.platform-bar {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.platform-bar-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-right: 0.2rem;
}

.platform-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 0.3rem;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
}

.platform-link:hover {
  color: var(--text);
}

.platform-link.is-active {
  color: var(--text);
  font-weight: 700;
}

.platform-link--youtube.is-active { border-bottom-color: var(--youtube); }
.platform-link--spotify.is-active { border-bottom-color: var(--spotify); }
.platform-link--apple.is-active { border-bottom-color: var(--apple-podcasts); }
.platform-link--amazon.is-active { border-bottom-color: var(--amazon-music); }

.platform-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.platform-link--youtube svg { color: var(--youtube); }
.platform-link--spotify svg { color: var(--spotify); }
.platform-link--apple svg { color: var(--apple-podcasts); }
.platform-link--amazon svg { color: var(--amazon-music); }

.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.featured-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.75rem;
  text-decoration: none;
  color: var(--text);
  margin-top: 1rem;
}

.featured-card img {
  width: 100%;
  border-radius: 6px;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

.featured-card h2 {
  margin: 1rem 0 0.5rem;
}

.featured-card p {
  color: var(--text-muted);
  margin: 0;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-top: 1.25rem;
}

@media (min-width: 640px) {
  .problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.problem-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.problem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.problem-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.problem-card:hover img {
  transform: scale(1.07);
}

.problem-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.88) 0%, rgba(10, 8, 6, 0.25) 55%, transparent 78%);
}

.problem-card-text {
  position: relative;
  z-index: 1;
  padding: 0.85rem;
  color: #f5f1e7;
  font-family: var(--sans);
  font-size: 1.3rem;
  line-height: 1.3;
}

@media (max-width: 480px) {
  .problem-card-text {
    font-size: 1.1rem;
  }
}

.contact-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.contact-platforms a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
}

.contact-platforms a:hover {
  border-color: var(--accent);
}

.contact-platforms svg {
  color: var(--accent);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.article-hero {
  display: block;
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  margin: 1.25rem 0 0.25rem;
}

.episode-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: flex-start;
}

.episode-layout > picture {
  display: block;
  width: 100%;
}

.episode-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.episode-info {
  flex: 1;
  min-width: 240px;
}

.episode-info p {
  margin-top: 0;
}

@media (min-width: 640px) {
  .episode-layout > picture,
  .episode-thumb {
    max-width: 320px;
    flex-shrink: 0;
  }
}

.article-meta {
  font-family: var(--mono);
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: -0.5rem;
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.article-tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.65;
  margin: 0;
}

.article-tags svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* An in-body callout linking off to another section (e.g. jumping straight
   to /sleep-stories/ from an article about what to listen to), styled to
   stand out from the surrounding prose without competing with the pull-quote
   blockquote style already used for in-article emphasis. */
.article-jump-cta {
  margin: 0 0 1.5rem;
}

.article-jump-cta a {
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.98rem;
  overflow: hidden;
}

/* Hidden until hover: the icons take up zero width, then expand to reveal
   themselves, pushing the text over to the right via ordinary flex reflow
   rather than a separate transform on the text itself. */
.article-jump-cta-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.article-jump-cta-icons svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}

/* Gated to real pointer devices on purpose: touchscreens report hover:none,
   so this whole block is skipped there rather than letting a tap trigger
   (and often get stuck in) the hover state meant for mouse users. */
@media (hover: hover) and (pointer: fine) {
  .article-jump-cta a:hover {
    border-color: var(--accent);
  }

  .article-jump-cta-icons {
    transition: max-width 0.25s ease, opacity 0.2s ease, margin-right 0.25s ease;
  }

  .article-jump-cta a:hover .article-jump-cta-icons {
    max-width: 60px;
    margin-right: 0.6rem;
    opacity: 1;
  }
}

.author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.author-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  float: left;
  margin: 0.3rem 1.25rem 1rem 0;
}

.clear-float {
  clear: left;
}

.article-body {
  margin-top: 2rem;
  font-size: 1.05rem;
}

.article-body sup {
  vertical-align: baseline;
  position: relative;
  top: -0.5em;
  font-size: 0.7em;
  line-height: 0;
}

.article-body p {
  margin: 0 0 1.25rem;
}

.article-body blockquote {
  position: relative;
  margin: 2.5rem 0;
  padding-left: 2.75rem;
}

.article-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: -0.5rem;
  top: -1.6rem;
  font-family: var(--serif);
  font-size: 5rem;
  color: var(--accent);
  opacity: 0.5;
  line-height: 1;
  font-style: normal;
}

.article-body blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.65rem;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

@media (max-width: 480px) {
  .article-body blockquote {
    padding-left: 2rem;
  }
  .article-body blockquote::before {
    font-size: 3.5rem;
    top: -1.2rem;
  }
  .article-body blockquote p {
    font-size: 1.35rem;
  }
}

.article-body h2 {
  margin-top: 2.5rem;
}

.article-body h3 {
  margin-top: 2rem;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.article-body th,
.article-body td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.article-body th {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--text-muted);
}

.article-trust {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.article-author-bio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.article-author-bio p {
  margin: 0;
}

.related-articles {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.related-articles ul {
  padding-left: 1.1rem;
}

.section {
  margin-top: 3.5rem;
}

.section-intro {
  color: var(--text-muted);
}

.section-cta {
  margin-top: 1.25rem;
}

.section-cta a {
  font-weight: 600;
}

.section-footnote {
  margin-top: 2rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumbs a {
  color: var(--text-muted);
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text-muted);
}

.breadcrumb-sep {
  opacity: 0.5;
}

.glossary-list {
  margin-top: 1.5rem;
}

.glossary-list dt {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: 2rem;
}

.glossary-list dt:first-child {
  margin-top: 0;
}

.glossary-list dd {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
}

.faq-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  color: var(--text-muted);
  margin: 0.75rem 0 0;
  animation: faq-reveal 0.2s ease;
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after,
  .faq-item p {
    animation: none;
    transition: none;
  }
}

.category-select {
  margin-top: 1.5rem;
}

.category-select label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.category-select select {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.category-select select:hover {
  border-color: var(--accent);
}

.category-section h2 {
  margin-bottom: 0.25rem;
}

.article-body sup a.footnote-ref {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75em;
}

.article-body .footnote {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.article-body .footnote hr {
  display: none;
}

.article-body .footnote ol {
  padding-left: 1.2rem;
}

.article-body .footnote li {
  margin-bottom: 0.6rem;
}

.article-body .footnote a {
  word-break: break-word;
}

.article-body .footnote-backref {
  margin-left: 0.3rem;
}