/* =========================================================
   Menstrual Experiences / 经·验
   Shared stylesheet
   ========================================================= */

:root{
  --warm-red:#C84B5A;
  --warm-red-dark:#A53B49;
  --soft-pink:#F5DCDC;
  --blush:#EDB8B8;
  --cream:#FFF8F4;
  --cream-deep:#FBEDE3;
  --ink:#2A2024;
  --muted:#6B5A5E;
  --gold:#D9A87A;
  --line:#E9D4D4;
  --shadow: 0 8px 28px rgba(200, 75, 90, .08);
  --shadow-lg: 0 16px 48px rgba(200, 75, 90, .14);
  --radius: 14px;
  --radius-lg: 22px;
  --max: 1180px;

  --font-zh-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-zh-sans:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-en-serif: "Cormorant Garamond", "Lora", Georgia, serif;
  --font-en-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--font-zh-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.lang-en{ font-family: var(--font-en-sans); }

img{max-width:100%;display:block}
a{color:var(--warm-red);text-decoration:none;transition:color .2s}
a:hover{color:var(--warm-red-dark)}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ===== Language toggle =====
   Note: actual text injection is handled by JS in script.js.
   It reads the data-zh / data-en attributes and writes them into
   the element's textContent on language switch. We no longer
   hide elements via CSS, because the elements themselves are
   shared containers populated dynamically. */

/* ===== Top navigation ===== */
.nav{
  position:sticky;top:0;z-index:50;
  background: rgba(255, 248, 244, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding: 16px 24px; max-width:var(--max); margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-zh-serif);font-weight:700;font-size:22px;color:var(--warm-red)}
body.lang-en .brand{font-family:var(--font-en-serif);font-style:italic;letter-spacing:.5px}
.brand-mark{
  width:34px;height:34px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #E89BA8, var(--warm-red) 70%);
  box-shadow: inset -2px -3px 6px rgba(0,0,0,.12);
  flex-shrink:0;
}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{
  color:var(--ink);font-size:15px;font-weight:500;
  padding:6px 2px;border-bottom:2px solid transparent;
  transition: all .2s;
}
.nav-links a:hover, .nav-links a.active{color:var(--warm-red);border-color:var(--warm-red)}

.lang-toggle{
  display:inline-flex;align-items:center;gap:0;
  border:1.5px solid var(--warm-red);border-radius:999px;
  overflow:hidden;font-size:13px;font-weight:600;
  cursor:pointer;background:transparent;
}
.lang-toggle span{
  padding:6px 12px;color:var(--warm-red);transition:all .2s;
}
.lang-toggle span.active{background:var(--warm-red);color:#fff}

.menu-btn{display:none;background:none;border:none;font-size:24px;color:var(--warm-red);cursor:pointer}

/* ===== Section headings ===== */
.section{padding: 96px 0;}
.section-narrow{padding: 64px 0;}
.section-sm{padding: 48px 0;}

.eyebrow{
  display:inline-block;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warm-red);font-weight:600;margin-bottom:14px;
  font-family: var(--font-en-sans);
}
h1,h2,h3,h4{font-weight:700;line-height:1.25;color:var(--ink)}
body.lang-en h1,body.lang-en h2,body.lang-en h3,body.lang-en h4{
  font-family: var(--font-en-serif);font-weight:600;letter-spacing:-.01em;
}
:not(body.lang-en) h1, :not(body.lang-en) h2, :not(body.lang-en) h3, :not(body.lang-en) h4 {
  font-family: var(--font-zh-serif);
}

h1{font-size: clamp(36px, 5vw, 58px); line-height:1.15}
h2{font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 20px}
h3{font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 12px}
h4{font-size: 18px; margin-bottom: 8px}

p{margin-bottom: 16px; color: var(--ink)}
.lead{font-size: 19px; line-height: 1.7; color: var(--muted)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding: 14px 28px;border-radius: 999px;
  font-size:15px;font-weight:600;
  cursor:pointer;border:1.5px solid transparent;
  transition: all .2s;font-family:inherit;
}
.btn-primary{background:var(--warm-red);color:#fff}
.btn-primary:hover{background:var(--warm-red-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--warm-red);border-color:var(--warm-red)}
.btn-outline:hover{background:var(--warm-red);color:#fff}
.btn-arrow::after{content:"→";display:inline-block;transition:transform .2s}
.btn-arrow:hover::after{transform:translateX(4px)}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding: 96px 0 80px;
  background: linear-gradient(180deg, var(--soft-pink) 0%, var(--cream) 100%);
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns: 1.1fr .9fr;gap: 64px;align-items:center;
}
.hero h1 span{color: var(--warm-red); font-style: italic;}
.hero p.lead{font-size: 20px; margin-top: 16px; max-width: 540px}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-art{
  position:relative;aspect-ratio: 1/1;max-width:480px;margin:0 auto;
}
.hero-art svg{width:100%;height:100%}

/* Decorative wave at top of section */
.wave-top{
  display:block;width:100%;height:48px;
}

/* ===== Card grids ===== */
.grid{display:grid;gap:28px}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
.grid-4{grid-template-columns: repeat(4, 1fr)}

.card{
  background:#fff;border-radius: var(--radius-lg);
  padding: 32px 28px;border:1px solid var(--line);
  transition: all .25s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow: var(--shadow-lg);border-color: var(--blush)}
.card .icon-wrap{
  width:64px;height:64px;border-radius:50%;
  background: var(--soft-pink);display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;flex-shrink:0;
}
.card .icon-wrap svg{width:32px;height:32px;color:var(--warm-red)}
.card h3{margin-bottom: 10px}
.card p{color:var(--muted);font-size:15px;flex:1}
.card .read-more{
  margin-top:16px;font-weight:600;color:var(--warm-red);font-size:14px;
}

/* ===== Stats ===== */
.stats{
  background: var(--warm-red);color:#fff;
  padding: 64px 24px;border-radius: var(--radius-lg);
  text-align:center;margin: 48px 0;
}
.stats-grid{
  display:grid;grid-template-columns: repeat(3, 1fr);gap: 32px;
  max-width: 900px;margin:0 auto;
}
.stat-num{
  font-family: var(--font-en-serif);font-size: 56px;font-weight: 700;line-height:1;
  color:#fff;margin-bottom:8px;
}
.stat-label{font-size: 14px;letter-spacing:.05em;opacity:.92}

/* ===== Banded section ===== */
.band{background: var(--cream-deep)}
.band-pink{background: var(--soft-pink)}
.band-white{background:#fff}

/* ===== Two-column content ===== */
.split{display:grid;grid-template-columns: 1fr 1fr;gap: 64px;align-items:center}
.split-art{
  aspect-ratio: 4/5;border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--soft-pink), var(--blush));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow: var(--shadow);
}
.split-art svg{width:70%;height:70%}

/* ===== Toolkit zine showcase ===== */
.zine-row{
  display:grid;grid-template-columns: 1fr 1fr;gap: 56px;align-items:center;
  padding: 56px 0;border-bottom:1px solid var(--line);
}
.zine-row:last-child{border-bottom:none}
.zine-row.reverse .zine-cover{order:2}
.zine-cover{
  aspect-ratio: 3/4;border-radius: var(--radius);
  background: var(--soft-pink);overflow:hidden;
  box-shadow: var(--shadow-lg);
  position:relative;display:flex;align-items:center;justify-content:center;
  padding: 32px;
}
.zine-cover-inner{
  width:100%;height:100%;border:2px dashed rgba(168,75,90,.45);
  border-radius: 8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding: 24px;text-align:center;
}
.zine-cover-inner .zine-num{
  font-family: var(--font-en-serif);font-size: 80px;
  color: var(--warm-red);line-height:1;font-style:italic;
}
.zine-cover-inner h4{
  font-family: var(--font-zh-serif);font-size: 24px;color: var(--ink);
  margin: 16px 0 4px;
}
body.lang-en .zine-cover-inner h4{font-family:var(--font-en-serif);font-style:italic}
.zine-cover-inner p{
  font-size: 13px;color: var(--muted);margin:0;
}
.zine-body h2 span.tag{
  display:inline-block;font-size: 13px;color:var(--warm-red);
  background: var(--soft-pink);padding: 4px 12px;border-radius: 999px;
  font-family: var(--font-en-sans);font-weight:600;letter-spacing:.05em;
  margin-bottom:14px;vertical-align: middle;
}
.zine-body ul{
  list-style:none;padding:0;margin: 16px 0 24px;
}
.zine-body li{
  padding: 10px 0 10px 28px;position:relative;color: var(--ink);
  border-bottom: 1px dashed var(--line);
}
.zine-body li:last-child{border:none}
.zine-body li::before{
  content:"";position:absolute;left:0;top:18px;
  width:14px;height:14px;border-radius:50%;
  background: var(--warm-red);opacity:.65;
}

/* ===== Timeline ===== */
.timeline{position:relative;padding-left: 32px;margin-top: 32px}
.timeline::before{
  content:"";position:absolute;left:8px;top:8px;bottom:8px;
  width:2px;background: var(--blush);
}
.timeline-item{position:relative;padding-bottom: 32px}
.timeline-item::before{
  content:"";position:absolute;left:-32px;top:6px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--warm-red);
}
.timeline-date{
  font-family: var(--font-en-serif);font-size: 14px;font-weight:600;
  color:var(--warm-red);letter-spacing:.05em;text-transform:uppercase;
  margin-bottom: 4px;
}
.timeline-item h4{margin-bottom: 6px}
.timeline-item p{color: var(--muted);font-size: 15px;margin:0}

/* ===== Quote / pull quote ===== */
.pullquote{
  border-left: 4px solid var(--warm-red);
  padding: 8px 0 8px 28px;margin: 32px 0;
  font-family: var(--font-zh-serif);font-size: 22px;line-height: 1.6;
  color: var(--ink);font-style: italic;
}
body.lang-en .pullquote{font-family:var(--font-en-serif)}
.pullquote cite{
  display:block;margin-top:12px;font-size:14px;color:var(--muted);
  font-style:normal;font-family:var(--font-en-sans);letter-spacing:.05em;
}

/* ===== FAQ / Accordion-like ===== */
.faq-item{
  background:#fff;border-radius: var(--radius);
  padding: 22px 28px;margin-bottom: 14px;
  border:1px solid var(--line);
}
.faq-item h4{color:var(--warm-red);margin-bottom: 8px}
.faq-item p{color:var(--muted);font-size:15px;margin:0}

/* ===== Resource list ===== */
.res-list{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.res-item{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding: 22px 28px;border:1px solid var(--line);
  border-radius: var(--radius);background:#fff;transition: all .2s;
}
.res-item:hover{border-color:var(--blush);transform: translateX(4px)}
.res-item h4{margin:0 0 4px}
.res-item p{margin:0;color:var(--muted);font-size:14px}
.res-item .res-tag{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warm-red);font-weight:700;font-family:var(--font-en-sans);
}

/* ===== Form ===== */
.form{display:grid;gap:18px;max-width:640px}
.form label{font-size:14px;font-weight:600;color:var(--ink);display:block;margin-bottom:6px}
.form input,.form textarea,.form select{
  width:100%;padding: 12px 16px;
  border:1.5px solid var(--line);border-radius: 10px;
  font-size:15px;font-family:inherit;color:var(--ink);background:#fff;
  transition: border-color .2s;
}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color: var(--warm-red);
}
.form textarea{min-height: 140px;resize: vertical}

/* ===== Footer ===== */
.footer{
  background: var(--ink);color: rgba(255,255,255,.85);
  padding: 64px 0 28px;margin-top: 80px;
}
.footer a{color: rgba(255,255,255,.85)}
.footer a:hover{color: #fff}
.footer-grid{
  display:grid;grid-template-columns: 1.4fr 1fr 1fr 1fr;gap: 48px;
  margin-bottom: 48px;
}
.footer h5{
  color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:18px;font-family: var(--font-en-sans);font-weight:700;
}
.footer ul{list-style:none}
.footer li{margin-bottom: 10px;font-size: 14px}
.footer .brand-block .brand{color:#fff;margin-bottom:14px}
.footer .brand-block p{color:rgba(255,255,255,.65);font-size:14px;line-height:1.7}
.footer-bottom{
  padding-top: 28px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:13px;color: rgba(255,255,255,.6);
}

/* ===== Acknowledgment notice (sensitive content) ===== */
.notice{
  background: var(--cream-deep);border-left: 4px solid var(--gold);
  padding: 20px 24px;border-radius: 8px;margin: 24px 0;
  font-size: 15px;color: var(--ink);
}
.notice strong{color:var(--warm-red-dark)}

/* ===== Hand-drawn / decorative ===== */
.scribble{
  position:absolute;opacity:.5;pointer-events:none;
}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .hero{padding: 64px 0 56px}
  .hero-grid{grid-template-columns: 1fr; gap: 40px}
  .hero-art{max-width: 360px}
  .grid-3,.grid-4{grid-template-columns: repeat(2,1fr)}
  .split, .zine-row{grid-template-columns: 1fr;gap: 32px}
  .zine-row.reverse .zine-cover{order: 0}
  .stats-grid{grid-template-columns: 1fr;gap: 24px}
  .footer-grid{grid-template-columns: 1fr 1fr;gap: 32px}
  .section{padding: 64px 0}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background: var(--cream);flex-direction:column;align-items:stretch;
    padding: 16px 24px;gap: 0;border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding: 12px 0;border-bottom: 1px solid var(--line)}
  .nav-links a:last-of-type{border-bottom:none}
  .menu-btn{display:block}
  .nav-links .lang-toggle{margin-top: 12px;align-self:flex-start}
}
@media (max-width: 560px){
  .grid-3,.grid-4,.grid-2{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
  h1{font-size: 32px}
  .stat-num{font-size: 44px}
}