/* Muse Rebellion — site stylesheet
   "Field Notes" direction — see README.md for the full decision history.

   2026-09-02, fourth revision: pastel tint washes (soft rose/lavender
   section backgrounds) were a mistake — they read as generic wellness-brand
   pastel, exactly what this site is trying not to be. Reverted: every
   section runs on plain cream/cream-w, and colour comes ONLY from the
   actual palette hues at full saturation — violet as text, hot pink / teal
   / mustard as buttons, borders, small marks and the top ribbon. No invented
   in-between pastels anywhere. */

:root{
  --ink:#3A1F5C;          /* deep violet, doubling as the ONLY "ink" on the site */
  --pink:#C2266B;
  --teal:#1A9A9A;
  --mustard:#B9860B;
  --cream:#F5F4F0;
  --cream-w:#FAF9F6;
  --cream-d:#E2DFD6;
  --muted:#7A6B85;
  --fd:'Special Elite', 'Courier New', monospace;
  --fs:'Great Vibes', cursive;
  --fb:'Inconsolata', ui-monospace, 'SF Mono', monospace;
  --maxw:1180px;
  --grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--fb);
  background:var(--cream);
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.75rem;position:relative;z-index:1}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:var(--cream);
  padding:.75rem 1.25rem;z-index:100;
}
.skip-link:focus{left:1rem;top:1rem}

a:focus-visible,button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

h1,h2,h3{font-weight:600;letter-spacing:-.01em;line-height:1.12}
em{font-style:italic;color:var(--pink)}

/* ── the ribbon — the page's one signature colour flourish, top and bottom ── */
.ribbon{height:5px;background:linear-gradient(90deg,var(--pink) 0 33.33%,var(--teal) 33.33% 66.66%,var(--mustard) 66.66% 100%)}

/* ── grain texture, applied per-section ── */
.grain{position:relative;overflow:hidden}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain-light);
}
.grain-light::before{opacity:.05;mix-blend-mode:multiply}

/* ── image placeholders — swap the div for a real <img> once assets exist ── */
.img-slot{
  border:1.5px dashed var(--cream-d);
  background:var(--cream-w);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  font-family:var(--fd);font-size:.68rem;letter-spacing:.02em;line-height:1.5;
  text-align:center;padding:1rem;
}
.img-slot span{max-width:16em}

/* ── section titles get a short coloured dash instead of a coloured
   background — the same "punctuation, not a wash" principle throughout ── */
.section-title{
  font-family:var(--fd);font-weight:400;
  font-size:1.5rem;margin-bottom:2.2rem;
  display:flex;align-items:center;gap:.9rem;
}
.section-title::before{content:"";display:inline-block;width:2.6rem;height:4px;background:var(--pink)}
.explore .section-title::before{background:var(--teal)}

/* small monoline icons — one sprite of <symbol>s per page, referenced with
   <use>. Used in section titles, the lens grid, kitchen chips, and practice
   cards to break up dense text with a quick visual anchor. Colour always
   comes from the section's existing accent (pink/teal/mustard), never a
   new hue, per the "no invented colours" rule at the top of this file. */
.icon{width:1.4rem;height:1.4rem;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.icon-sm{width:1.1rem;height:1.1rem}
.st-icon{color:var(--pink);display:inline-flex}

/* ── HEADER ─────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--cream-w);
  border-bottom:1px solid var(--cream-d);
}
.header-in{
  display:flex;align-items:center;gap:2rem;
  padding:1.1rem 1.75rem;
}
.brand{
  display:flex;align-items:baseline;gap:.4rem;
  white-space:nowrap;
}
.brand-script{
  font-family:var(--fs);
  font-size:1.9rem;
  line-height:1;
  color:var(--pink);
}
.brand-mark{
  font-family:var(--fd);
  font-size:.92rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink);
}
.nav-panel{display:contents}
.main-nav{
  display:flex;gap:1.6rem;flex:1;flex-wrap:wrap;
  font-size:.88rem;
}
.main-nav a{color:var(--ink);opacity:.72;transition:opacity .15s}
.main-nav a:hover{opacity:1}
.btn-nav-cta{
  background:var(--teal);color:#fff;
  padding:.65rem 1.15rem;
  font-size:.78rem;font-weight:700;letter-spacing:.03em;
  white-space:nowrap;
  border:1.5px solid var(--teal);
  transition:opacity .15s;
}
.btn-nav-cta:hover{opacity:.82}

/* ── mobile menu toggle — hidden on desktop, where .nav-panel just
   passes its children (nav + CTA) straight into the header row ── */
.nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:2.3rem;height:2.3rem;padding:0;margin-left:auto;
  background:none;border:none;cursor:pointer;
}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav-panel{
    display:none;flex-direction:column;gap:1.5rem;
    position:absolute;top:100%;left:0;right:0;
    background:var(--cream-w);
    border-top:1px solid var(--cream-d);border-bottom:1px solid var(--cream-d);
    padding:1.5rem 1.75rem;z-index:30;
  }
  .nav-panel.is-open{display:flex}
  .main-nav{flex-direction:column;gap:1.15rem;font-size:.95rem}
  .btn-nav-cta{width:100%;text-align:center}
}

/* ── HERO ───────────────────────────────────────── */
.hero{background:var(--cream);padding:4.5rem 0}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center;
}
.hero-in{max-width:640px}
.hero-visual{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:2px;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero-visual{aspect-ratio:16/9 !important;max-width:420px}
}
.eyebrow{
  display:block;font-family:var(--fd);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink);margin-bottom:1.5rem;
}
/* the hero's eyebrow carries a brand statement ("Becoming the Earthbody
   Woman"), not a small utility label, so it runs larger than the base
   .eyebrow size used elsewhere */
.hero .eyebrow{font-size:1.05rem}
.hero h1{
  font-family:var(--fd);font-weight:400;
  font-size:clamp(2rem,5vw,3.2rem);
  margin-bottom:1.4rem;
}
/* the closing line breaks into the script face — same Special Elite +
   Great Vibes pairing as the logo, so the headline gets a touch of the
   same elegance without setting a whole sentence in cursive */
.hero h1 em{
  display:inline-block;
  font-family:var(--fs);font-style:normal;
  color:var(--pink);
  font-size:1.5em;line-height:1;
}
.hero-lede{
  font-size:1.05rem;color:rgba(58,31,92,.72);max-width:38em;margin-bottom:2.2rem;
}
.btn-primary{
  display:inline-block;
  background:var(--teal);color:#fff;
  padding:1.05rem 1.75rem;
  font-weight:700;font-size:.92rem;letter-spacing:.01em;
  border:1.5px solid var(--teal);
  transition:opacity .15s;
}
.btn-primary:hover{opacity:.82}

/* ── THESIS — three images, one per beat, text baked into each image
   by Nathalie in Canva. Contained within the page width (not edge-to-
   edge — that read as too heavy) and kept to a slim, cinematic ratio
   so the band stays elegant rather than dominating the page; a soft
   radius and shadow frame it like a photograph, not a raw slab. ── */
.thesis{background:var(--ink);padding:1.6rem 0}

/* the carousel: one viewport clipping a flex track of full-width
   slides, translated by JS; degrades to "just the first slide,
   statically" with JS off, same progressive-enhancement approach as
   the nav toggle */
.thesis-carousel{position:relative}
.thesis-viewport{overflow:hidden;border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.thesis-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.thesis-slide{
  flex:0 0 100%;position:relative;
  aspect-ratio:21/9;
  overflow:hidden;
}
.thesis-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.thesis-controls{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:1.4rem}
.thesis-arrow{
  background:none;border:1.5px solid var(--cream-w);color:var(--cream-w);
  width:2.1rem;height:2.1rem;border-radius:50%;font-size:1.2rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.thesis-arrow:hover,.thesis-arrow:focus-visible{background:var(--cream-w);color:var(--pink)}
.thesis-dots{display:flex;gap:.5rem}
.thesis-dot{
  width:.5rem;height:.5rem;border-radius:50%;padding:0;border:none;
  background:rgba(255,255,255,.4);cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
.thesis-dot.is-active{background:var(--cream-w);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.thesis-track{transition:none}}
@media (max-width:700px){
  .thesis-slide{aspect-ratio:4/5}
}

/* ── EXPLORE ────────────────────────────────────── */
.explore{background:var(--cream-w);padding:4.5rem 0;border-top:1px solid var(--cream-d)}
.explore-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--cream-d);border:1px solid var(--cream-d);
}
.explore-card{
  background:var(--cream-w);padding:2rem 1.6rem;
  display:flex;flex-direction:column;gap:.5rem;
  border-top:3px solid var(--pink);
  transition:background .15s;
}
.explore-thumb{aspect-ratio:4/3;margin-bottom:.4rem;width:100%;object-fit:cover;display:block}
.explore-card:nth-child(2){border-top-color:var(--teal)}
.explore-card:nth-child(3){border-top-color:var(--mustard)}
.explore-card:hover{background:var(--cream)}
.explore-tag{
  font-family:var(--fd);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.explore-card h3{font-family:var(--fd);font-weight:400;font-size:1.1rem}
.explore-card p{font-size:.92rem;color:rgba(58,31,92,.65)}
@media (max-width:820px){.explore-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.explore-grid{grid-template-columns:1fr}}

/* Library hub grid (9 cards) — repeat the pink/teal/mustard border
   rotation every 3 cards instead of only on the first row. */
.library-grid .explore-card:nth-child(3n+2){border-top-color:var(--teal)}
.library-grid .explore-card:nth-child(3n){border-top-color:var(--mustard)}
.library-grid .explore-card:nth-child(3n+1){border-top-color:var(--pink)}

/* ── FOOTER — light like everything else, closed off with the ribbon
   colours as a thin top border rather than a coloured panel ── */
.site-footer{
  background:var(--cream-w);padding:3rem 0;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,var(--pink),var(--teal),var(--mustard)) 1;
}
.footer-in{display:flex;flex-direction:column;gap:1.4rem}
.footer-tag{font-family:var(--fd);font-size:.9rem;color:var(--ink)}
.footer-nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.85rem}
.footer-nav a{opacity:.75}
.footer-nav a:hover{opacity:1}
.footer-fine{font-size:.78rem;color:rgba(58,31,92,.6);max-width:42em}

/* ══════════════════════════════════════════════════════════════════
   LIBRARY / MUSE PAGES — shared components, added 2026-09-14 for the
   Sanctuary template page. Reuses the site's existing tokens only
   (pink/teal/mustard/ink/cream) — no new per-muse colours, so all nine
   pages share one visual system rather than each Muse getting its own
   hue. Library pages use teal as their section accent throughout,
   matching the Library card's teal top-border on the homepage.
   ══════════════════════════════════════════════════════════════════ */

.breadcrumb{padding:1.1rem 0;font-size:.78rem;color:var(--muted)}
.breadcrumb a{opacity:.8}
.breadcrumb a:hover{opacity:1}

.muse-hero{background:var(--cream);padding:3.2rem 0 2.4rem}
.muse-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2.6rem;align-items:center}
.muse-hero-visual{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:2px}
@media (max-width:900px){
  .muse-hero-grid{grid-template-columns:1fr;gap:1.6rem}
  .muse-hero-visual{aspect-ratio:16/9 !important;max-width:420px}
}
.muse-hero h1{font-family:var(--fd);font-weight:400;font-size:clamp(1.5rem,3.6vw,2.3rem);margin:1.1rem 0 1.3rem;max-width:24em}
/* the direct-answer summary — plain, factual, quotable: the sentence an
   AI engine or a search snippet would lift as-is. Set apart with a left
   rule so it reads as a distinct "answer", not just the first line of
   the article. */
.hero-summary{
  font-size:1.02rem;font-weight:600;color:var(--ink);
  max-width:42em;margin-bottom:1.3rem;
  padding-left:1rem;border-left:3px solid var(--teal);
}
.muse-hero .hero-lede{font-size:1rem;color:rgba(58,31,92,.75);max-width:42em;margin-bottom:1.1rem}
.byline{font-size:.8rem;color:var(--muted)}

.quick-id-section{background:var(--cream-w);border-top:1px solid var(--cream-d);border-bottom:1px solid var(--cream-d);padding:1.5rem 0}
.quick-id{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.qid-label{display:block;font-family:var(--fd);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:.3rem}
.qid-value{font-size:.92rem}
@media (max-width:700px){.quick-id{grid-template-columns:repeat(2,1fr)}}

.pattern-section,.nutrition-section,.practice-section,.cta-section,.faq-section,.about-section,.listen-section,.message-section{padding:3.2rem 0;border-top:1px solid var(--cream-d)}
.pattern-section{background:var(--cream)}
.nutrition-section{background:var(--cream-w)}
.practice-section{background:var(--cream)}
.cta-section{background:var(--ink);color:var(--cream-w)}
.cta-section .section-title{color:var(--cream-w)}
.cta-section .section-title::before{background:var(--teal)}
.cta-section p{color:rgba(250,249,246,.85)}
.cta-section .btn-primary{margin:1.1rem 0}
.faq-section{background:var(--cream-w)}
.about-section{background:var(--cream)}
.listen-section{background:var(--cream-w)}
.message-section{background:var(--cream)}

/* ── Contact form ── */
.contact-form{display:grid;gap:1.15rem;max-width:32rem;margin-top:1.3rem}
.contact-form label{display:block;font-family:var(--fd);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--cream-d);background:var(--cream-w);border-radius:2px;font-family:var(--fb);font-size:.95rem;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--pink)}
.contact-form textarea{min-height:8rem;resize:vertical}
.contact-form .hp-field{position:absolute;left:-9999px}
button.btn-primary{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;width:max-content}

.listen-section .section-title::before{background:var(--teal)}
.listen-section .st-icon{color:var(--teal)}
.podcast-embed{margin:1.3rem 0;max-width:40rem}
.podcast-embed iframe{display:block;border-radius:12px}
.listen-platforms{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.3rem}
.listen-platforms a{font-size:.9rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--cream-d);text-underline-offset:.2em}
.listen-platforms a:hover{text-decoration-color:var(--pink)}



/* section-title accent rotates pink → teal → mustard → teal → pink down
   the page, echoing the homepage explore-card border rotation, so each
   section reads as visually distinct at a glance */
.nutrition-section .section-title::before{background:var(--teal)}
.nutrition-section .st-icon{color:var(--teal)}
.practice-section .section-title::before{background:var(--mustard)}
.practice-section .st-icon{color:var(--mustard)}
.cta-section .st-icon{color:var(--teal)}

/* full-width photo banner inside a section — same dashed img-slot styling,
   just a fixed landscape ratio and section-level spacing. Swap the div for
   a real <img class="section-image" ...> once the photo exists. */
.section-image{aspect-ratio:3/2;margin:1.4rem 0 1.8rem}
@media (max-width:560px){.section-image{aspect-ratio:4/3}}

article h3{font-family:var(--fd);font-weight:400;font-size:1.02rem;margin:1.9rem 0 .85rem;color:var(--ink)}
article p{margin-bottom:1rem;max-width:64ch}
article section > .wrap > p:last-child{margin-bottom:0}

.lens-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--cream-d);border:1px solid var(--cream-d);margin:1.1rem 0 1.5rem}
.lens-card{background:var(--cream-w);padding:1.35rem}
.lens-card-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.lens-card-head .icon{color:var(--pink)}
.lens-tag{display:block;font-family:var(--fd);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.lens-card p{font-size:.91rem;max-width:none;margin-bottom:0}
@media (max-width:700px){.lens-grid{grid-template-columns:1fr}}

.signals-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.55rem}
.signals-list li{padding-left:1.4rem;position:relative;font-size:.93rem}
.signals-list li::before{content:"●";position:absolute;left:0;color:var(--teal);font-size:.6rem;top:.45em}

.kitchen-preview{background:var(--cream);border-left:3px solid var(--teal);padding:1.3rem 1.5rem;margin:1.3rem 0}
.kitchen-preview p{max-width:none}
.kp-label{display:block;font-family:var(--fd);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:.35rem}
.kitchen-preview ul{margin:.7rem 0 .7rem 1.2rem}
.kitchen-preview li{margin-bottom:.4rem;font-size:.91rem}
.archetype-block{border-left:3px solid var(--pink);padding-left:1.25rem;margin-top:.5rem}
.arch-label{display:block;font-family:var(--fd);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);margin:1.2rem 0 .35rem}
.arch-label:first-child{margin-top:0}
.kp-invite{color:var(--muted);font-size:.88rem;margin-bottom:0}

.kitchen-chips{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0}
.kitchen-chips span{font-family:var(--fd);font-size:.66rem;letter-spacing:.03em;background:var(--cream-w);border:1px solid var(--cream-d);padding:.5rem .85rem;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.kitchen-chips .icon{color:var(--teal)}

.meal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin:1.1rem 0 1.4rem}
.meal-card{background:var(--cream-w);border-top:3px solid var(--teal);padding:1.3rem 1.4rem}
.meal-card h4{margin:0 0 .5rem;font-family:var(--fd);font-size:.85rem;letter-spacing:.02em;font-weight:600;display:flex;align-items:center;gap:.55rem}
.meal-card h4 .icon{color:var(--teal)}
.meal-card p{max-width:none;margin-bottom:0;font-size:.91rem}
.meal-card-feature{grid-column:1/-1}
.meal-card-feature .deeper-practice{margin-top:1.1rem;background:var(--cream)}
.meal-card-feature .deeper-practice ul{margin:.9rem 0 .9rem 1.2rem}
.meal-card-feature .deeper-practice li{margin-bottom:.4rem;font-size:.91rem}
@media (max-width:700px){.meal-grid{grid-template-columns:1fr}}

.disclaimer-inline{font-size:.8rem;color:var(--muted);border-top:1px solid var(--cream-d);padding-top:1.1rem;margin-top:1.5rem;max-width:none;margin-bottom:0}

.practice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;margin:1.3rem 0}
.practice-card{background:var(--cream-w);border-top:3px solid var(--mustard);padding:1.4rem}
.practice-card h3{margin-top:0;display:flex;align-items:center;gap:.6rem}
.practice-card h3 .icon{color:var(--mustard)}
.practice-card p{max-width:none;margin-bottom:0}
@media (max-width:700px){.practice-grid{grid-template-columns:1fr}}

.deeper-practice{margin-top:1.5rem;border:1px solid var(--cream-d);padding:1rem 1.35rem;background:var(--cream-w)}
.deeper-practice summary{cursor:pointer;font-family:var(--fd);font-size:.9rem;color:var(--ink)}
.deeper-practice p{margin-top:1rem;max-width:none}
.dp-label{display:inline-flex;align-items:center;gap:.45rem;font-weight:700}
.dp-label .icon{color:var(--mustard)}

.muse-list{font-size:.87rem;max-width:none;margin-top:1rem}
.muse-list a{text-decoration:underline;opacity:.9}
.muse-list a:hover{opacity:1}

.faq-item{
  border:1px solid var(--cream-d);background:var(--cream-w);
  margin-bottom:.8rem;padding:1rem 1.3rem;
}
.faq-item summary{
  cursor:pointer;list-style:none;
  font-family:var(--fd);font-weight:400;font-size:.98rem;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:none;
  color:var(--teal);font-size:1.2rem;line-height:1;
  transition:transform .15s ease;
}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--pink)}
.faq-item p{margin:1rem 0 0;max-width:none}