/* ============================================================
   The Eldest Daughter's Guide to Interdependence — rebuild
   Self-contained. Fonts + images served locally.
============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Syncopate';
  src:url('fonts/syncopate-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('fonts/intertight-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('fonts/intertight-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('fonts/intertight-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('fonts/intertight-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --dark:#2b0b06;        /* main dark maroon */
  --dark-deep:#1c0704;   /* deeper maroon (take action / intro) */
  --cream:#f4f2ea;       /* light background */
  --orange:#fe6b41;      /* accent orange */
  --pink:#feabda;        /* accent pink */
  --ink:#200603;         /* dark text on light */
  --ink-2:#360a05;
  --white:#ffffff;
  --maxw:1280px;
  --pad:clamp(20px,5vw,88px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Inter Tight',Arial,sans-serif;
  background:var(--dark);
  color:var(--cream);
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- Headings ---------- */
h1,h2,h3,h4{
  font-family:'Syncopate',Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-0.08em;
  line-height:1.02;
  margin:0;
  overflow-wrap:break-word;
  word-break:break-word;
}
h1{font-size:clamp(2.4rem,6vw,3.7rem);}
h2{font-size:clamp(2rem,5vw,2.75rem);}
h3{font-size:clamp(1.5rem,3.4vw,2.15rem);}
h4{font-size:clamp(1rem,1.7vw,1.2rem);}
p{margin:0 0 1.1em;}

/* ---------- Layout helpers ---------- */
.section{padding:clamp(56px,9vw,120px) var(--pad);}
.wrap{max-width:var(--maxw);margin:0 auto;}
.bg-dark{background:var(--dark);color:var(--cream);}
.bg-deep{background:var(--dark-deep);color:var(--cream);}
.bg-cream{background:var(--cream);color:var(--ink);}
.bg-orange{background:var(--orange);color:var(--ink);}
.pink{color:var(--pink);}
.eyebrow{
  font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-0.05em;font-size:.8rem;margin-bottom:1.4rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:'Inter Tight',sans-serif;font-weight:500;
  text-decoration:none;text-transform:uppercase;letter-spacing:.02em;
  padding:.95em 2.4em;border-radius:999px;border:1.5px solid currentColor;
  font-size:.95rem;transition:background .2s,color .2s;cursor:pointer;background:transparent;
}
.btn:hover{background:currentColor;}
.btn:hover span{color:var(--cream);}
.btn--onlight:hover{color:var(--cream);}
.btn--onlight:hover{background:var(--ink);}
.btn--ondark:hover{background:var(--cream);color:var(--dark);}

/* ============================================================
   HEADER
============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);
  background:rgba(43,11,6,0);
  transition:background .25s;
}
.site-header.scrolled{background:rgba(43,11,6,.96);backdrop-filter:blur(6px);}
.site-header a{text-decoration:none;color:var(--pink);}
.brand{
  font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-0.05em;font-size:clamp(.72rem,1.4vw,.95rem);max-width:60vw;line-height:1.15;
}
.header-right{display:flex;align-items:center;gap:22px;}
.header-right .say{font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-0.05em;font-size:clamp(.72rem,1.4vw,.95rem);}
.menu-toggle{
  background:none;border:none;color:var(--pink);cursor:pointer;padding:6px;
  display:flex;flex-direction:column;gap:5px;
}
.menu-toggle span{display:block;width:26px;height:2px;background:currentColor;}

/* overlay nav */
.nav-overlay{
  position:fixed;inset:0;z-index:200;background:var(--dark-deep);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  transform:translateY(-100%);transition:transform .35s ease;padding:40px;
}
.nav-overlay.open{transform:translateY(0);}
.nav-overlay a{
  color:var(--pink);text-decoration:none;font-family:'Syncopate',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:-0.06em;font-size:clamp(1.3rem,4vw,2.2rem);
  padding:.15em 0;transition:color .2s;
}
.nav-overlay a:hover{color:var(--cream);}
.nav-close{position:absolute;top:24px;right:var(--pad);background:none;border:none;color:var(--pink);font-size:2.4rem;line-height:1;cursor:pointer;font-family:'Inter Tight';}

/* ============================================================
   HERO
============================================================ */
.hero{
  background:var(--dark);padding-top:clamp(110px,15vh,150px);
  padding-bottom:0;
}
.hero-grid{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:stretch;
  padding:0 var(--pad);
}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding-bottom:60px;}
.hero-copy h1{color:var(--pink);font-size:clamp(2.3rem,4.6vw,4rem);margin-bottom:2rem;}
.hero-copy .lede{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:34ch;color:var(--cream);margin-bottom:2.4rem;}
.subscribe{display:flex;max-width:430px;background:#3a140d;border:1px solid #5a2418;border-radius:999px;padding:6px;gap:6px;}
.subscribe input{
  flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--cream);
  font-family:'Inter Tight';font-size:1rem;padding:12px 18px;
}
.subscribe input::placeholder{color:#c9a99f;}
.subscribe button{
  border:none;background:var(--pink);color:var(--ink);font-family:'Inter Tight';font-weight:500;
  padding:12px 26px;border-radius:999px;cursor:pointer;font-size:1rem;transition:opacity .2s;
}
.subscribe button:hover{opacity:.88;}
.hero-caption{margin-top:auto;padding:34px 0;font-size:1.15rem;color:var(--cream);}
.hero-img{align-self:end;}
.hero-img img{width:100%;height:100%;object-fit:cover;max-height:660px;}

/* ============================================================
   INTRO / CALL TO ACTION
============================================================ */
.intro{text-align:center;background:var(--dark-deep);}
.intro img.hand{width:74px;margin:0 auto 40px;}
.intro .wrap{max-width:820px;}
.intro p{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--cream);margin-bottom:2.2em;}

/* ============================================================
   TABLE OF CONTENTS
============================================================ */
.toc .eyebrow{color:var(--ink);}
.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.toc-list a{
  color:var(--ink);text-decoration:none;font-family:'Syncopate',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:-0.07em;font-size:clamp(1.9rem,5vw,3.4rem);
  line-height:1.05;display:inline-block;
}
.toc-list a span{border-bottom:.09em solid var(--ink);padding-bottom:.02em;transition:opacity .2s;}
.toc-list a:hover span{opacity:.55;}
.toc-num{border-bottom:none !important;margin-right:.4em;}

/* ============================================================
   WHAT IS INTERDEPENDENCE
============================================================ */
.whatis-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center;}
.whatis-grid h2{margin-bottom:2rem;}
.whatis-grid p{font-size:1.08rem;max-width:52ch;}
.whatis-grid .art{display:flex;justify-content:center;}
.whatis-grid .art img{width:min(320px,70%);}
.uline{border-bottom:1.5px solid currentColor;}

/* ============================================================
   PULL QUOTES
============================================================ */
.pquote{padding:clamp(70px,11vw,150px) var(--pad);}
.pquote .q{
  font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-0.07em;
  line-height:1.08;font-size:clamp(1.6rem,4.4vw,3.1rem);
}
.pquote .attr{
  display:block;text-align:right;margin-top:1.4em;font-family:'Syncopate',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:-0.05em;font-size:clamp(1rem,2vw,1.4rem);
}
.pquote.cream{background:var(--cream);color:var(--ink);}

/* ============================================================
   PRACTICES FOR ELDEST DAUGHTERS
============================================================ */
.practices .lead{max-width:40ch;font-size:1.1rem;margin-bottom:clamp(40px,6vw,72px);}
.practices h2{margin-bottom:1.6rem;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px) clamp(40px,6vw,90px);}
.practice h4{margin-bottom:1.1rem;}
.practice p{font-size:1.05rem;color:var(--cream);}

/* ============================================================
   SPOT THE DIFFERENCE  (orange)
============================================================ */
.spot-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,60px);align-items:center;}
.spot-art img{width:min(340px,80%);margin:0 auto;}
.spot h2{margin-bottom:2rem;}
.acc{border-top:1px solid var(--ink);}
details.acc-item{border-bottom:1px solid var(--ink);}
details.acc-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:1.3rem 0;font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-0.05em;font-size:clamp(.95rem,1.7vw,1.15rem);color:var(--ink);
}
details.acc-item summary::-webkit-details-marker{display:none;}
details.acc-item summary .ic{font-size:1.6rem;line-height:1;font-family:'Inter Tight';font-weight:400;transition:transform .2s;}
details.acc-item[open] summary .ic{transform:rotate(45deg);}
details.acc-item .body{padding:0 0 1.5rem;font-size:1.02rem;max-width:60ch;color:var(--ink);}
details.acc-item .body p{margin-bottom:1em;}
/* dark variant (FAQ uses same but on orange too) */

/* ============================================================
   KEY TERMINOLOGY  (dark, scrolling terms)
============================================================ */
.terms{position:relative;overflow:hidden;text-align:center;}
.terms .content{position:relative;z-index:2;}
.terms h2{color:var(--pink);margin-bottom:1.3rem;}
.terms p{color:var(--cream);font-size:1.15rem;margin-bottom:2.2rem;}
.terms-marquee{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.1em;z-index:1;pointer-events:none;opacity:.5;}
.terms-marquee .row{white-space:nowrap;font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-0.06em;font-size:clamp(3rem,9vw,7rem);color:#3a130d;line-height:1;}
.terms-marquee .row span{display:inline-block;padding-right:.5em;}
.mq{animation:marq 26s linear infinite;}
.mq.rev{animation-direction:reverse;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   FOUNDING FIGURES
============================================================ */
.figures{background:var(--cream);color:var(--ink);text-align:center;}
.fig-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.fig-row img{width:clamp(74px,10.5vw,140px);aspect-ratio:1/1;object-fit:cover;}
.fig-center{padding:clamp(30px,5vw,54px) 0;}
.fig-center h2{margin-bottom:1rem;}
.fig-center p{margin-bottom:2rem;font-size:1.1rem;}

/* ============================================================
   CULTURAL INFLUENCES  (image bg)
============================================================ */
.cultural{
  min-height:min(70vh,620px);display:flex;align-items:center;
  background:url('assets/cultural-influences.jpg') center/cover no-repeat;
  color:var(--white);position:relative;
}
.cultural .wrap{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
.cultural h2{font-size:clamp(2rem,4.5vw,3rem);}
.cultural .right{text-align:left;}
.cultural .right p{font-size:1.2rem;margin-bottom:1.6rem;}

/* ============================================================
   REQUIRED READING
============================================================ */
.reading{background:var(--cream);color:var(--ink);text-align:center;position:relative;}
.reading-scatter{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(6px,1.5vw,20px);margin-bottom:clamp(30px,5vw,50px);}
.reading-scatter img{height:clamp(120px,18vw,230px);width:auto;object-fit:contain;}
.reading-scatter img:nth-child(2n){transform:rotate(-4deg);}
.reading-scatter img:nth-child(3n){transform:rotate(3deg);}
.reading-scatter img:nth-child(5n){transform:rotate(-2deg);}
.reading h1{margin:0 auto 1.6rem;}
.reading .center-block{margin:clamp(20px,4vw,40px) 0;}

/* ============================================================
   SOMATIC PRACTICES
============================================================ */
.somatic{background:var(--dark);}
.somatic h2{color:var(--white);margin-bottom:1rem;}
.somatic .sub{color:var(--white);font-size:1.15rem;margin-bottom:clamp(36px,5vw,60px);max-width:34ch;}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,54px);}
.media h4{color:var(--white);margin:1.1rem 0 .6rem;}
.media p{color:#e8ddd8;font-size:1rem;}
.media .frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;}
.media .frame.spotify{aspect-ratio:auto;height:152px;border-radius:12px;}
.media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.media .frame.spotify iframe{position:relative;}

/* ============================================================
   MARQUEE STRIPS (quote tickers)
============================================================ */
.ticker{overflow:hidden;white-space:nowrap;padding:14px 0;}
.ticker.orange{background:var(--orange);}
.ticker .track{display:inline-block;animation:marq 30s linear infinite;}
.ticker .track span{
  font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-0.05em;
  font-size:clamp(1rem,2vw,1.5rem);padding-right:1.5em;
}
.ticker.orange .track span{color:#d64f28;}

/* ============================================================
   PODCASTS
============================================================ */
.podcasts{background:var(--cream);color:var(--ink);}
.podcasts > .wrap > h2{margin-bottom:clamp(36px,5vw,60px);}
.pod-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px) clamp(40px,6vw,96px);}
.pod h4{margin-bottom:1rem;line-height:1.15;}
.pod p{font-size:1.02rem;}
.pod a{font-family:'Syncopate',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:-0.03em;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ============================================================
   TAKE ACTION
============================================================ */
.take-action{background:var(--dark-deep);}
.ta-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,4vw,60px);}
.ta-head h1{color:var(--pink);margin-bottom:2rem;}
.ta-head img{width:min(260px,70%);}
.ta-items{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,50px) clamp(30px,5vw,64px);}
.ta-item h4{color:var(--pink);margin-bottom:1rem;line-height:1.15;}
.ta-item p{color:var(--cream);font-size:1.02rem;}
.ta-item a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ============================================================
   FAQ  (orange)
============================================================ */
.faq-grid{display:grid;grid-template-columns:.5fr 1.5fr;gap:clamp(24px,4vw,60px);align-items:start;}

/* ============================================================
   THANKS FOR BEING HERE
============================================================ */
.thanks{background:var(--dark);text-align:center;}
.thanks > .wrap > h2{color:var(--white);margin-bottom:clamp(40px,6vw,70px);font-size:clamp(2.2rem,5.5vw,3.4rem);}
.thanks-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);max-width:820px;margin:0 auto;}
.thanks-col h3{color:var(--pink);margin-bottom:1.6rem;font-size:clamp(1.1rem,2vw,1.4rem);}
.thanks-col p{color:var(--cream);margin-bottom:1.8rem;font-size:1.08rem;}

/* ============================================================
   FOOTER
============================================================ */
.footer{background:var(--dark);padding:clamp(50px,8vw,90px) var(--pad) 60px;border-top:1px solid #3a140d;}
.footer-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer h2{color:var(--pink);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.05;}
.footer .powered{color:var(--orange);font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-0.06em;font-size:clamp(1.5rem,3vw,2.2rem);margin-top:1.2rem;}
.footer .col h5{font-family:'Syncopate',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;font-size:.85rem;color:var(--pink);margin:0 0 1.2rem;}
.footer .col a{display:block;color:var(--pink);text-decoration:underline;text-underline-offset:3px;margin-bottom:.7rem;font-size:.95rem;text-transform:uppercase;letter-spacing:-0.02em;}
.footer .col a:hover{color:var(--cream);}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-copy{padding-bottom:40px;order:1;}
  .hero-img{order:2;margin-top:10px;}
  .hero-img img{max-height:460px;}
  .hero-caption{padding-top:20px;}
  .whatis-grid,.spot-grid,.ta-grid,.cultural .wrap,.faq-grid,.footer-grid{grid-template-columns:1fr;}
  .whatis-grid .art{order:-1;margin-bottom:20px;}
  .cultural .right{margin-top:10px;}
  .ta-head img{display:none;}
  .footer-grid{gap:34px;}
}
@media(max-width:680px){
  .two-col,.pod-grid,.ta-items,.media-grid,.thanks-cols{grid-template-columns:1fr;}
  .header-right .say{display:none;}
  .brand{max-width:70vw;}
  .pod a,.ta-item a{white-space:normal;}
}
/* Small screens: shrink display type + relax tracking so long words never clip */
@media(max-width:620px){
  h1,h2,h3,h4,.toc-list a,.pquote .q,.terms-marquee .row{letter-spacing:-0.04em;}
  h1{font-size:clamp(1.7rem,7.6vw,2.3rem);}
  h2{font-size:clamp(1.55rem,6.6vw,2rem);}
  .hero-copy h1{font-size:clamp(1.8rem,8vw,2.4rem);}
  .toc-list a{font-size:clamp(1.35rem,6.8vw,2rem);}
  .pquote .q{font-size:clamp(1.3rem,5.4vw,1.8rem);}
  .thanks > .wrap > h2{font-size:clamp(1.8rem,7vw,2.4rem);}
  .footer h2{font-size:clamp(1.35rem,6vw,1.8rem);}
  .cultural h2{font-size:clamp(1.8rem,7vw,2.4rem);}
}
@media(prefers-reduced-motion:reduce){
  .mq,.ticker .track{animation:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   SUBPAGES
============================================================ */
.subpage{background:var(--dark);color:var(--cream);}
.subpage-hero{padding:clamp(120px,16vh,180px) var(--pad) clamp(40px,6vw,70px);background:var(--dark);}
.subpage-hero h1{color:var(--pink);font-size:clamp(2.2rem,6vw,4rem);}
.subpage-hero p{max-width:62ch;margin-top:1.4rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--cream);}
.subpage-section{padding:clamp(20px,3vw,40px) var(--pad) clamp(70px,10vw,120px);background:var(--dark);}
.back-link{display:inline-block;margin-bottom:2.2rem;font-family:'Syncopate',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:-0.03em;text-transform:uppercase;color:var(--pink);text-decoration:none;}
.back-link:hover{opacity:.7;}

/* term / bio definition lists */
.deflist{display:grid;grid-template-columns:1fr;gap:clamp(24px,3.2vw,40px);max-width:960px;}
.deflist .item{border-top:1px solid rgba(244,242,234,.20);padding-top:clamp(16px,2.2vw,24px);}
.deflist .item h3{font-size:clamp(1.1rem,2.1vw,1.45rem);margin-bottom:.7rem;color:var(--pink);}
.deflist .item .origin{display:inline-block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.9rem;color:var(--cream);opacity:.75;margin-left:.5rem;text-transform:none;letter-spacing:0;}
.deflist .item p{font-size:1.03rem;line-height:1.55;max-width:72ch;margin:0;color:var(--cream);}
.deflist.two-col{grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px) clamp(32px,4vw,56px);max-width:1100px;}
@media(max-width:760px){.deflist.two-col{grid-template-columns:1fr;}}

/* donation / subscribe */
.embed-wrap{max-width:560px;margin-top:1.4rem;}
.embed-wrap iframe{width:100%;border:0;display:block;min-height:520px;border-radius:14px;background:#fff;}
.note{max-width:60ch;margin-top:2rem;padding:18px 22px;border:1px dashed #7a3322;border-radius:12px;color:#e8ddd8;font-size:.96rem;line-height:1.55;}
.note strong{color:var(--pink);}
.donate-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem;max-width:52ch;}
.donate-list li{font-size:1.1rem;padding-left:1.4rem;position:relative;}
.donate-list li::before{content:"—";position:absolute;left:0;color:var(--pink);}

/* Beehiiv subscribe embed */
.subscribe-embed{max-width:480px;margin-top:1.4rem;}
.hero-copy .subscribe-embed{margin-top:0;}
.subscribe-embed iframe{max-width:100%;}