/* ============================================================
   24 NORTH — structural redesign layer
   ------------------------------------------------------------
   Loaded AFTER style.css and deliberately kept separate.

   style.css is inherited from The Natural Sleep Lab: full-bleed
   alternating bands, everything centred, decoration doing the work
   that structure should. That template is what makes both sites
   read as generic.

   This layer changes the STRUCTURE rather than the decoration,
   borrowing the discipline from snoring-help.com:

     - a warm canvas ground, so panels read as objects on paper
       instead of stacked full-width bands
     - inset panels with a large radius
     - a floating, translucent pill nav
     - a dark hero panel (which the "night sky / north star" thesis
       was always asking for, and which finally gives the gold dial
       something to sit against)
     - pill buttons, tighter display type, disciplined hover

   Identity is unchanged: same green and gold, same Fraunces
   display, same content. This is not a re-skin of snoring-help —
   that site is sans-serif and navy, and the two should not look
   like the same template.
   ============================================================ */

:root {
  --canvas: #f2f1ed;          /* warm paper ground */
  --paper: #ffffff;           /* panels sit on the canvas */
  --panel-tint: #e9e8e3;
  --line-soft: #e6e4de;

  --r-lg: 26px;               /* panel radius */
  --r-md: 16px;               /* card radius */
  --pill: 100px;

  --gutter: 12px;             /* how far panels inset from the edge */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 150ms;
}

/* ── Ground ─────────────────────────────────────────────── */
body { background: var(--canvas); }

/* ── Display type: tighter, more deliberate ─────────────── */
h1, h2, h3,
.hero-headline, .content-title, .article-title,
.section-title, .card-title, .buy-block-title, .newsletter-title {
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-headline, .content-title, .article-title { line-height: 1.05; }
.section-title { line-height: 1.08; }

/* ── Floating pill nav ──────────────────────────────────── */
.site-header {
  background: transparent;
  border-bottom: 0;
  padding: 10px var(--gutter) 0;
}
.nav-container {
  min-height: 60px;
  padding: 0 10px 0 20px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(20, 23, 21, 0.06);
  border-radius: var(--pill);
  transition: box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.site-header.scrolled .nav-container,
.site-header.is-stuck .nav-container {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 34px -18px rgba(20, 23, 21, 0.45);
}
.site-header.scrolled { box-shadow: none; }

/* ── Hero as an inset dark panel ────────────────────────── */
.hero, .hero--3d {
  margin: 6px var(--gutter) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(110% 90% at 80% 6%, rgba(201, 162, 39, 0.20), transparent 58%),
    radial-gradient(90% 80% at 6% 96%, rgba(29, 82, 64, 0.55), transparent 62%),
    linear-gradient(158deg, #14342a 0%, #0f2620 52%, #0b1c17 100%);
  color: #e9efe9;
}
/* Faint dot field, masked so it fades out — texture without noise. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.30;
  -webkit-mask-image: radial-gradient(70% 60% at 72% 18%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 72% 18%, #000, transparent 75%);
}
.hero .hero-bg { display: none; }         /* old light gradient, now redundant */
.hero-content { position: relative; z-index: 1; }
.hero-eyebrow { color: rgba(233, 239, 233, 0.62); }
.hero-eyebrow::before { background: var(--gold-bright); }
.hero-headline { color: #fff; max-width: 16ch; }
.hero-headline em { color: var(--gold-bright); font-style: italic; }
.hero-subhead { color: rgba(233, 239, 233, 0.76); }
.hero-trust {
  color: rgba(233, 239, 233, 0.48);
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Buttons on the dark panel */
.hero .btn-primary { background: var(--gold-bright); color: #10241c; border-color: transparent; }
.hero .btn-primary:hover { background: #d9b43f; color: #10241c; }
.hero .btn-outline { border-color: rgba(255, 255, 255, 0.28); color: #fff; background: transparent; }
.hero .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ── Sections become inset panels ───────────────────────── */
.articles-section, .topics-section, .about-strip, .newsletter-section,
.content-hero, .blog-hero, .feed-section, .related-articles {
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  border-radius: var(--r-lg);
}
.articles-section, .content-hero, .blog-hero {
  background: var(--paper);
}
.topics-section { background: var(--panel-tint); }
.about-strip { background: var(--paper); border-top: 0; }
/* The inline style on the homepage "Latest" band is overridden here. */
.articles-section[style] { background: var(--paper) !important; }

/* Stack panels with air between them rather than butting bands together. */
.articles-section + .articles-section,
.articles-section + .topics-section,
.topics-section + .about-strip,
.about-strip + .newsletter-section { margin-top: 12px; }

/* ── Pill buttons ───────────────────────────────────────── */
.btn, .btn-primary, .btn-outline, .btn-ghost, .btn-subscribe,
.buy-fallback, .about-btn, .topic-pill, .nav-cta {
  border-radius: var(--pill);
}
.btn:active, .buy-fallback:active { transform: scale(0.98); }

/* ── Cards: tighter, calmer ─────────────────────────────── */
.article-card, .related-card, .window-card, .path-card, .tool-card {
  border-radius: var(--r-md);
  border-color: var(--line-soft);
  box-shadow: none;
}
.article-grid, .related-grid, .path-grid { gap: 14px; }

/* Hover only where there is a real pointer. On touch this just
   leaves a stuck state after tapping. */
@media (hover: hover) and (pointer: fine) {
  .article-card:hover, .related-card:hover, .window-card:hover, .tool-card:hover {
    border-color: rgba(20, 23, 21, 0.18);
    box-shadow: 0 18px 40px -28px rgba(20, 23, 21, 0.55);
  }
}

/* ── Footer sits on the canvas, not in a band ───────────── */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--line-soft);
  margin-top: 12px;
}

/* ── Mobile: drop the insets so panels go edge to edge ──── */
@media (max-width: 640px) {
  :root { --gutter: 8px; --r-lg: 18px; }
  .hero-headline { max-width: none; }
}

/* ── Article pages ──────────────────────────────────────── */

/* The category strip and breadcrumb were full-bleed white bands, which
   cuts straight across the panel language. Put them on the canvas. */
.category-nav, .breadcrumb-nav {
  background: transparent;
  border-bottom: 0;
}
.category-nav-inner, .breadcrumb-nav .container { padding-inline: 8px; }
.category-nav-link { border-radius: var(--pill); }

/* One continuous sheet of paper from the headline to the FAQ, rather
   than four separately-sized white blocks. All four pieces share the
   same inset and width; the reading measure is applied to their
   children so the column stays comfortable.

   .article-sheet replaces the .container that used to wrap the header —
   .container is max-width constrained, which made the header narrower
   than the body below it. */
.article-sheet, .article-hero-img-wrap, .article-body, .article-faq {
  background: var(--paper);
  margin-inline: var(--gutter);
  max-width: none;
  width: auto;
}
.article-sheet {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 56px) 0;
}
.article-body {
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 56px);
}
.article-faq {
  padding: clamp(8px, 2vw, 20px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 56px);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.article-hero-img-wrap { padding-inline: clamp(20px, 4vw, 56px); }

/* Reading measure, applied to the children of the sheet. */
.article-sheet > .article-hero,
.article-body > *,
.article-faq > * {
  max-width: 720px;
  margin-inline: auto;
}
.article-hero-img-wrap img { max-width: 860px; margin-inline: auto; }

/* Full-bleed elements inside the body that should NOT be measure-limited. */
.article-body > .buy-block,
.article-body > .table-scroll { max-width: 860px; }

/* Related sits back on the canvas, separated by air. */
.related-articles {
  margin: 12px var(--gutter) 0;
  max-width: none;
  width: auto;
  background: var(--panel-tint);
  border-radius: var(--r-lg);
  padding-block: clamp(32px, 5vw, 56px);
}

/* Blog + category listing pages get the same treatment. */
.blog-shell, .feed-list { background: transparent; }
.feed-item { background: var(--paper); border-radius: var(--r-md); border-color: var(--line-soft); }

/* ── Quizzes ────────────────────────────────────────────── */
.quiz-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin: 32px 0;
}
.quiz-calc-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.quiz-card select.email-input, .quiz-card input[type="time"].email-input {
  width: 100%; max-width: 320px;
}
.quiz-actions {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; padding-top: 24px;
}
.quiz-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.quiz-progress { margin: 0; font-size: 13px; color: var(--text-muted); }
.quiz-result[hidden] { display: none; }
.quiz-result {
  background: var(--panel-tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.quiz-result--high { background: var(--gold-soft); border-color: var(--gold-border); }
.quiz-result--low { background: var(--accent-soft); border-color: var(--accent-border); }
.quiz-result-cta { margin-top: 20px; }