/* Rest Science — sleep-optimization editorial blog styles
   Mobile-first, no frameworks. Accent: deep indigo (#4338ca). */

:root {
  --accent: #4338ca;
  --accent-dark: #3730a3;
  --accent-soft: #eef0ff;
  --ink: #1c1d26;
  --ink-soft: #4b4d61;
  --muted: #6b6e85;
  --bg: #ffffff;
  --bg-wash: #f7f7fb;
  --night: #14142b;
  --night-soft: #1e1e3d;
  --line: #e5e6ef;
  --radius: 14px;
  --maxw: 72rem;
  --maxw-article: 44rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", "Noto Serif", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--night); color: #fff;
  padding: .6rem 1rem; border-radius: 8px; font-weight: 600;
}
.skip-link:hover { text-decoration: none; }
.skip-link:focus { top: .75rem; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #a5b4fc; outline-offset: 2px; border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--night);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--night-soft);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 65% 35%, #a5b4fc 0%, #6366f1 45%, #312e81 100%);
  position: relative; flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(165,180,252,.25);
}
.brand-mark::after { /* crescent notch */
  content: ""; position: absolute; right: 3px; top: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--night);
}
.brand-name { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .01em; }
.brand-tag { display: block; font-size: .72rem; color: #b9bce0; font-family: var(--font); }

.main-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.25rem;
}
.main-nav a { color: #d6d8f2; font-size: .95rem; }
.main-nav a:hover { color: #fff; }
.nav-toggle {
  display: none;
  background: none; border: 1px solid #3d3f6e; border-radius: 8px;
  color: #fff; font-size: 1.25rem; line-height: 1;
  padding: .45rem .65rem; cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--night) 0%, #23234d 60%, #2d2a6e 100%);
  color: #fff;
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.hero::before { /* starfield */
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 30%, #c7d2fe 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 18%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 84% 34%, #a5b4fc 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 66%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 74%, #c7d2fe 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 78%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 58%, #a5b4fc 50%, transparent 51%);
}
.hero::after { /* soft moon glow */
  content: "";
  position: absolute; top: -70px; right: 5%;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f5f5ff 0%, #c7d2fe 52%, rgba(199,210,254,0) 72%);
  opacity: .28; pointer-events: none;
}
.hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  margin: 0 0 .5rem; line-height: 1.15;
}
.hero .tagline { font-size: 1.2rem; color: #c7d2fe; margin: 0 0 1rem; font-style: italic; }
.hero .pitch { max-width: 40rem; color: #e3e4f7; margin: 0 0 1.75rem; }
.hero .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--accent); color: #fff;
  padding: .7rem 1.35rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem;
  border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; }
.btn-ghost {
  background: transparent; color: #fff; border: 1px solid #7c80c4;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #a5b4fc; }

/* ---------- Sections ---------- */
.section { padding: 2.75rem 0; }
.section-title {
  font-family: var(--serif);
  font-size: 1.7rem; margin: 0 0 .5rem;
}
.section-sub { color: var(--muted); margin: 0 0 1.75rem; max-width: 44rem; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; background: #fff;
  display: flex; flex-direction: column; gap: .5rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: 0 10px 28px rgba(20,20,60,.10); transform: translateY(-2px); }
.card-kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.card h3 { margin: 0; font-size: 1.22rem; line-height: 1.35; font-family: var(--serif); }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--accent); }
.card p { margin: 0; color: var(--ink-soft); font-size: .98rem; flex: 1; }
.card .read-more { font-weight: 600; font-size: .95rem; margin-top: .5rem; }
.card-art {
  width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .25rem;
}
.card-art svg { width: 1.5rem; height: 1.5rem; }
.card-featured .card-art { background: rgba(165,180,252,.16); color: #c7d2fe; }

.card-featured {
  background: linear-gradient(150deg, var(--night) 0%, #26264f 100%);
  color: #eef0ff; border: none;
}
.card-featured h3 a { color: #fff; }
.card-featured h3 a:hover { color: #c7d2fe; }
.card-featured p { color: #c9cbe8; }
.card-featured .card-kicker { color: #a5b4fc; }
.card-featured .read-more { color: #c7d2fe; }

/* ---------- Start-here / newsletter band ---------- */
.band { background: var(--bg-wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.start-here { max-width: var(--maxw-article); }
.start-here h2 { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 .75rem; }
.start-here p { color: var(--ink-soft); }

.newsletter-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 2rem; margin-top: 2rem;
  max-width: var(--maxw-article);
  border-left: 5px solid var(--accent);
}
.newsletter-card h2 { font-family: var(--serif); margin: 0 0 .5rem; font-size: 1.5rem; }
.newsletter-card p { margin: 0; color: var(--ink-soft); }

/* ---------- Article pages ---------- */
.breadcrumb { font-size: .9rem; color: var(--muted); margin: 1.5rem 0 .5rem; }
.breadcrumb a { color: var(--accent); }

.article-body { max-width: var(--maxw-article); }
.article-body h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.2; margin: .5rem 0 1rem;
}
.byline { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
.byline .author { font-weight: 600; color: var(--ink-soft); }
.lede { font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 1.5rem; }
.article-body h2 {
  font-family: var(--serif); font-size: 1.5rem;
  margin: 2.25rem 0 .75rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.article-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.article-body p, .article-body li { color: var(--ink-soft); }
.article-body p strong, .article-body li strong { color: var(--ink); }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body li { margin-bottom: .45rem; }
.callout {
  background: var(--accent-soft); border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.callout p { margin: 0; }
.disclosure-notice {
  font-size: .88rem; color: var(--muted);
  background: var(--bg-wash); border: 1px solid var(--line);
  border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0 1.5rem;
}
.disclosure-notice a { font-weight: 600; }
.faq { margin-top: 1rem; }
.faq h3 { font-size: 1.05rem; margin: 1.1rem 0 .25rem; color: var(--ink); }
.faq p { margin: 0 0 .5rem; }

.keep-reading { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--night); }
.keep-reading h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 1rem; border: none; padding: 0; }
.keep-reading ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.keep-reading li a { font-weight: 600; }
.keep-reading li span { display: block; color: var(--muted); font-size: .9rem; font-weight: 400; }

/* ---------- Disclosure ---------- */
.disclosure-body { max-width: var(--maxw-article); }
.disclosure-body h1 { font-family: var(--serif); font-size: 2.1rem; margin: 1rem 0; }
.disclosure-body h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.disclosure-body p, .disclosure-body li { color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--night); color: #b9bce0;
  padding: 2.5rem 0 2rem; margin-top: 3rem;
}
.site-footer .wrap { display: grid; gap: 1.5rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-nav a { color: #d6d8f2; font-size: .95rem; }
.footer-brand { font-family: var(--serif); color: #fff; font-size: 1.2rem; }
.footer-note { font-size: .85rem; color: #8a8db8; margin: 0; }
.footer-copy { font-size: .85rem; color: #8a8db8; margin: 0; }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 560px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer .wrap { grid-template-columns: 1fr auto; align-items: start; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--night-soft);
    border-bottom: 1px solid #2c2d58;
    padding: .5rem 1.25rem 1rem;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: .75rem; }
  .site-header { position: relative; }
  .site-header .wrap { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Header actions: search + theme toggle ---------- */
.header-actions {
  display: flex; align-items: center; gap: .6rem;
  margin-left: auto;
}
.site-search { position: relative; }
.site-search input[type="search"] {
  width: 11rem; max-width: 32vw;
  background: var(--night-soft);
  border: 1px solid #3d3f6e; border-radius: 999px;
  color: #fff; font-size: .9rem;
  padding: .5rem .9rem;
}
.site-search input[type="search"]::placeholder { color: #8a8db8; }
.site-search input[type="search"]:focus {
  outline: 3px solid #a5b4fc; outline-offset: 1px;
  border-color: #a5b4fc; background: #24244f;
}
.search-results {
  position: absolute; top: calc(100% + .5rem); right: 0;
  width: min(22rem, 80vw); max-height: 24rem; overflow: auto;
  list-style: none; margin: 0; padding: .4rem;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20,20,60,.22);
  z-index: 60; text-align: left;
}
.search-results li { border-radius: 8px; }
.search-results a {
  display: block; padding: .6rem .75rem; color: var(--ink);
}
.search-results a:hover { background: var(--accent-soft); text-decoration: none; }
.search-result-title { display: block; font-weight: 700; font-size: .95rem; }
.search-result-excerpt { display: block; font-size: .83rem; color: var(--muted); margin-top: .15rem; }
.search-no-results { padding: .8rem; color: var(--muted); font-size: .9rem; }

.theme-toggle {
  background: none; border: 1px solid #3d3f6e; border-radius: 8px;
  color: #fff; font-size: 1.05rem; line-height: 1;
  padding: .45rem .6rem; cursor: pointer;
}
.theme-toggle:hover { background: rgba(255,255,255,.08); }

/* ---------- Reading progress bar ---------- */
.reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  z-index: 80; pointer-events: none;
}
.reading-progress-bar {
  height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- Article table of contents ---------- */
.toc {
  background: var(--bg-wash);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.35rem; margin: 1.5rem 0;
}
.toc-title {
  font-size: .8rem !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent) !important;
  margin: 0 0 .6rem !important; padding: 0 !important; border: none !important;
  font-family: var(--font) !important;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { margin: .25rem 0 .25rem 1rem; }
.toc li { margin-bottom: .3rem; }
.toc a { color: var(--ink-soft); font-size: .93rem; }
.toc a:hover { color: var(--accent); }
.toc a[aria-current="true"] {
  color: var(--accent); font-weight: 700;
}

/* ---------- FAQ accordions ---------- */
.faq-item {
  border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: .6rem; overflow: hidden; background: #fff;
}
.faq-question {
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
  padding: .85rem 1rem; display: flex; gap: .75rem; align-items: center;
}
.faq-question::before {
  content: "+"; flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
}
.faq-question[aria-expanded="true"]::before { content: "\2212"; }
.faq-answer { padding: 0 1rem .9rem 3.25rem; }
.faq-answer p { margin: 0; color: var(--ink-soft); }

/* ---------- Sortable tables ---------- */
table.sortable { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: .95rem; }
table.sortable th, table.sortable td {
  border: 1px solid var(--line); padding: .6rem .8rem; text-align: left;
}
table.sortable thead th {
  background: var(--bg-wash); cursor: pointer; user-select: none;
  white-space: nowrap; position: relative; padding-right: 1.6rem;
}
table.sortable thead th:hover { background: var(--accent-soft); }
table.sortable thead th::after {
  content: "\2195"; position: absolute; right: .6rem; color: var(--muted);
}
table.sortable thead th[aria-sort="ascending"]::after { content: "\2191"; color: var(--accent); }
table.sortable thead th[aria-sort="descending"]::after { content: "\2193"; color: var(--accent); }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 22px rgba(20,20,60,.28);
}
.back-to-top:hover { background: var(--accent-dark); }

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --bg: #101126;
  --bg-wash: #171838;
  --ink: #e9eaf7;
  --ink-soft: #c6c9e2;
  --muted: #9a9ec4;
  --line: #2b2c5c;
  --accent-soft: #23245a;
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .card,
[data-theme="dark"] .newsletter-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .search-results { background: #1a1b3d; border-color: var(--line); }
[data-theme="dark"] .card h3 a { color: #fff; }
[data-theme="dark"] .search-results a { color: var(--ink); }
[data-theme="dark"] .search-results a:hover { background: #24245c; }
[data-theme="dark"] .search-results .search-result-excerpt { color: var(--muted); }
[data-theme="dark"] .article-body p strong, [data-theme="dark"] .article-body li strong { color: var(--ink); }
[data-theme="dark"] .faq-question { color: var(--ink); }
[data-theme="dark"] .faq-answer p { color: var(--ink-soft); }
[data-theme="dark"] .disclosure-notice { background: var(--bg-wash); }
[data-theme="dark"] table.sortable thead th { background: #20214a; }

@media (max-width: 720px) {
  .site-search input[type="search"] { width: 8.5rem; }
  .header-actions { gap: .45rem; }
}