/* ==========================================================================
   Moon Reading — Independent Guide
   Design system: "Luxury Celestial Editorial"
   Clean, dependency-free CSS. No frameworks.
   ========================================================================== */

:root{
  --ink:            #1b1b24;
  --ink-soft:       #4a4a5c;
  --ink-faint:      #7b7b8f;
  --ivory:          #faf7f0;
  --ivory-deep:     #f1ebdd;
  --line:           #e4ddc9;
  --navy:           #10132a;
  --navy-deep:      #0a0c1c;
  --navy-mid:       #191d3d;
  --gold:           #c8a24a;
  --gold-soft:      #e4cd8e;
  --gold-deep:      #a3803a;
  --white:          #ffffff;
  --ok:             #3d6b4f;
  --warn:           #8a5a1f;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 12px 40px -12px rgba(16, 19, 42, 0.25);
  --shadow-sm: 0 4px 16px -6px rgba(16, 19, 42, 0.18);
  --container: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.15;
  color:var(--navy);
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); font-weight:700; }
h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); }
h4{ font-size:1.15rem; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.1em; padding-left:1.3em; }
li{ margin-bottom:.4em; }
strong{ color:var(--navy); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:820px; margin:0 auto; padding:0 24px; }

:focus-visible{ outline:3px solid var(--gold-deep); outline-offset:3px; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:var(--white);
  padding:.8em 1.2em; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Section rhythm ---------- */
section{ padding:64px 0; }
section.tight{ padding:40px 0; }
.section-eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; font-weight:700; color:var(--gold-deep); margin:0 0 .7em;
}
.section-head{ max-width:760px; margin:0 auto 2.4em; text-align:center; }
.section-head p{ color:var(--ink-soft); font-size:1.08rem; }
.bg-ivory-deep{ background:var(--ivory-deep); }
.bg-navy{ background:linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%); color:#ede9f5; }
.bg-navy h2, .bg-navy h3, .bg-navy h4{ color:var(--white); }
.bg-navy .section-head p{ color:#c7c4dc; }
.bg-navy p, .bg-navy li{ color:#d6d3e6; }
.divider{ border:0; border-top:1px solid var(--line); margin:3em 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:.98rem;
  padding:.95em 1.7em; border-radius:999px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height:44px;
}
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep)); color:var(--navy-deep); box-shadow:var(--shadow-sm); }
.btn-gold:hover{ box-shadow:var(--shadow); }
.btn-outline{ background:transparent; border-color:var(--navy); color:var(--navy); }
.bg-navy .btn-outline, .hero .btn-outline, .page-header .btn-outline, .site-nav .btn-outline{ border-color:var(--gold-soft); color:var(--gold-soft); }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.bg-navy .btn-outline:hover, .hero .btn-outline:hover, .page-header .btn-outline:hover, .site-nav .btn-outline:hover{ background:var(--gold-soft); color:var(--navy-deep); }
.btn-block{ width:100%; }
.cta-note{ font-size:.85rem; color:var(--ink-faint); margin-top:.6em; }
.bg-navy .cta-note{ color:#9a97b5; }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100; background:rgba(10,12,28,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(200,162,74,.25);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:14px 24px; max-width:var(--container); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:.6em; text-decoration:none; color:var(--white); font-family:var(--serif); font-weight:700; font-size:1.35rem; letter-spacing:.01em; }
.brand-mark{ width:30px; height:30px; flex:0 0 auto; }
.brand small{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.nav-links > li{ position:relative; margin:0; }
.nav-links a{ display:block; color:#e7e4f2; text-decoration:none; font-size:.93rem; font-weight:600; padding:10px 12px; border-radius:8px; }
.nav-links > li > a:hover, .nav-links > li > a:focus-visible{ background:rgba(200,162,74,.15); color:var(--gold-soft); }
.has-dropdown > a::after{ content:"▾"; font-size:.7em; margin-left:.35em; opacity:.7; }
.dropdown{
  list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0; min-width:270px;
  background:var(--navy-mid); border:1px solid rgba(200,162,74,.25); border-radius:12px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ padding:10px 12px; font-size:.9rem; font-weight:500; }
.dropdown a:hover, .dropdown a:focus-visible{ background:rgba(200,162,74,.15); color:var(--gold-soft); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.25); color:var(--white);
  border-radius:8px; padding:8px 10px; font-size:1.1rem; cursor:pointer;
}
@media (max-width:940px){
  .nav-links{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:2px; }
  .nav-links.open{ display:flex; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; border:none; background:rgba(255,255,255,.03); margin-top:4px; }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-row{ flex-wrap:wrap; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta .btn-outline{ display:none; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:.85rem; color:var(--ink-faint); padding:16px 0 0; }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4em; }
.breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover{ color:var(--gold-deep); text-decoration:underline; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:.5em; color:var(--line); }

/* ---------- Hero ---------- */
.hero{ background:radial-gradient(ellipse at 20% -10%, #262a52 0%, var(--navy) 45%, var(--navy-deep) 100%); color:var(--white); padding:72px 0 84px; position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(1.5px 1.5px at 10% 20%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 80% 15%, #fff 100%, transparent),
    radial-gradient(1px 1px at 60% 60%, #fff 100%, transparent),
    radial-gradient(1px 1px at 30% 80%, #fff 100%, transparent),
    radial-gradient(2px 2px at 92% 70%, #fff 100%, transparent),
    radial-gradient(1px 1px at 45% 35%, #fff 100%, transparent);
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; position:relative; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ color:var(--white); }
.hero .lede{ font-size:1.15rem; color:#cfccdf; max-width:56ch; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:.6em; margin:1.4em 0; }
.hero-badge{ font-size:.78rem; font-weight:700; letter-spacing:.04em; border:1px solid rgba(200,162,74,.4); color:var(--gold-soft); padding:.4em .9em; border-radius:999px; background:rgba(200,162,74,.08); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6em; align-items:center; }
.hero-art{ position:relative; }
.hero-art img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.hero-disclosure{ margin-top:1.4em; font-size:.82rem; color:#9d9ab8; max-width:60ch; }

/* ---------- Page header (non-home pages) ---------- */
.page-header{ background:linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%); color:var(--white); padding:20px 0 56px; }
.page-header h1{ color:var(--white); max-width:26ch; }
.page-header .lede{ color:#cfccdf; max-width:68ch; font-size:1.08rem; }
.page-header .hero-badges{ margin-top:1.2em; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:1.6rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem; box-shadow:var(--shadow-sm);
}
.card h3{ margin-bottom:.4em; }
.card .glyph{ font-size:1.8rem; display:block; margin-bottom:.5em; }
.bg-navy .card{ background:rgba(255,255,255,.04); border-color:rgba(200,162,74,.2); }
.bg-navy .card h3{ color:var(--white); }

/* ---------- Evidence / claim-level callouts ---------- */
.evidence-block{ border-left:4px solid var(--gold-deep); background:var(--white); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:1.4em 1.6em; margin:1.6em 0; box-shadow:var(--shadow-sm); }
.evidence-tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.3em .7em; border-radius:6px; margin-bottom:.6em; }
.tag-fact{ background:#e4efe6; color:var(--ok); }
.tag-research{ background:#eef1fb; color:#38427d; }
.tag-tradition{ background:#f7ecd8; color:var(--warn); }
.tag-unknown{ background:#f0eef5; color:#5b5570; }
.evidence-block cite{ display:block; font-style:normal; font-size:.85rem; color:var(--ink-faint); margin-top:.6em; }
.evidence-block a{ color:var(--gold-deep); }

/* ---------- Table ---------- */
.table-wrap{
  overflow-x:auto; margin:1.6em 0; border:1px solid var(--line); border-radius:var(--radius-sm);
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--white) 30%, rgba(255,255,255,0)) 100% 0,
    linear-gradient(to right, rgba(16,19,42,.12), rgba(16,19,42,0) 24px),
    linear-gradient(to left, rgba(16,19,42,.12), rgba(16,19,42,0) 24px) 100% 0;
  background-repeat:no-repeat;
  background-size:24px 100%, 24px 100%, 24px 100%, 24px 100%;
  background-attachment:local, local, scroll, scroll;
}
table{ width:100%; border-collapse:collapse; min-width:520px; background:var(--white); }
th,td{ text-align:left; padding:.85em 1em; border-bottom:1px solid var(--line); font-size:.95rem; vertical-align:top; }
th{ background:var(--ivory-deep); font-family:var(--sans); font-weight:700; color:var(--navy); }
tr:last-child td{ border-bottom:none; }
.table-scroll-hint{ display:none; font-size:.78rem; color:var(--ink-faint); text-align:right; margin:-1.2em 0 1.6em; }
@media (max-width:620px){ .table-scroll-hint{ display:block; } }

/* ---------- FAQ ---------- */
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); margin-bottom:12px; overflow:hidden; }
.faq-item summary{
  cursor:pointer; list-style:none; padding:1.1em 1.4em; font-weight:700; color:var(--navy);
  display:flex; justify-content:space-between; align-items:center; gap:1em; font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.3rem; color:var(--gold-deep); flex:0 0 auto; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-a{ padding:0 1.4em 1.3em; color:var(--ink-soft); }
.bg-navy .faq-item{ background:rgba(255,255,255,.04); border-color:rgba(200,162,74,.2); }
.bg-navy .faq-item summary{ color:var(--white); }
.bg-navy .faq-item .faq-a{ color:#c7c4dc; }

/* ---------- Pros/cons ---------- */
.pc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
@media (max-width:700px){ .pc-grid{ grid-template-columns:1fr; } }
.pc-card{ border-radius:var(--radius); padding:1.8rem; }
.pc-pros{ background:#eef4ef; border:1px solid #cfe2d3; }
.pc-cons{ background:#f7f1e6; border:1px solid #e6d7b8; }
.pc-card h3{ margin-bottom:.6em; }
.pc-card ul{ padding-left:1.1em; margin:0; }
.pc-card li{ list-style:none; padding-left:1.6em; position:relative; }
.pc-pros li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; }
.pc-cons li::before{ content:"–"; position:absolute; left:0; color:var(--warn); font-weight:800; }

/* ---------- Steps ---------- */
.steps{ counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:1.2rem; }
.steps li{ position:relative; padding-left:3.2em; margin:0; }
.steps li::before{
  counter-increment:step; content:counter(step); position:absolute; left:0; top:0;
  width:2.3em; height:2.3em; border-radius:50%; background:var(--navy); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:1.1rem;
}

/* ---------- Callout / guarantee / disclosure banners ---------- */
.callout{ border-radius:var(--radius); padding:1.8em 2em; border:1px solid var(--line); background:var(--ivory-deep); }
.callout.gold{ background:linear-gradient(135deg,#fbf3de,#f3e4bd); border-color:var(--gold-soft); }
.disclosure-strip{ background:var(--ivory-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; font-size:.86rem; color:var(--ink-soft); text-align:center; }
.disclosure-strip a{ color:var(--gold-deep); font-weight:700; text-decoration:none; }
.disclosure-strip a:hover{ text-decoration:underline; }

/* ---------- Testimonial-free social proof note ---------- */
.honesty-note{ display:flex; gap:1em; align-items:flex-start; background:var(--white); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:1.3em 1.5em; }
.honesty-note .glyph{ font-size:1.4rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-deep); color:#b9b6cf; padding:56px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h3{ color:var(--gold-soft); font-family:var(--sans); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1em; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:.6em; }
.site-footer a{ color:#c9c6dc; text-decoration:none; font-size:.92rem; }
.site-footer a:hover{ color:var(--gold-soft); }
.footer-brand{ display:flex; align-items:center; gap:.6em; font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--white); text-decoration:none; margin-bottom:.8em; }
.footer-brand img{ width:26px; }
.footer-about{ font-size:.9rem; color:#9c99b5; max-width:38ch; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:2.6rem; padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:1em; justify-content:space-between; font-size:.82rem; color:#847fa0; }
.footer-bottom a{ color:#847fa0; }
.footer-bottom a:hover{ color:var(--gold-soft); }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.small{ font-size:.88rem; color:var(--ink-faint); }
.eyebrow-pill{ display:inline-block; background:var(--ivory-deep); border:1px solid var(--line); color:var(--ink-soft); font-size:.78rem; font-weight:700; padding:.4em .9em; border-radius:999px; letter-spacing:.03em; }
.link-list{ list-style:none; padding:0; margin:0; display:grid; gap:.7em; }
.link-list a{ font-weight:700; color:var(--navy); text-decoration:none; }
.link-list a:hover{ color:var(--gold-deep); }
.related-nav{ background:var(--ivory-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }