/* Shared layout for the research hub + all topic pages. Extends brand.css. */
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.65; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--rose-deep)}
.wrap{max-width:900px; margin:0 auto; padding:0 24px}

nav{display:flex; align-items:center; gap:16px; padding:20px 24px; max-width:1080px; margin:0 auto; position:relative; z-index:100}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:19px; color:var(--ink); text-decoration:none}
.brand img{width:26px; height:26px; border-radius:50%; display:block}
.navlinks{display:flex; align-items:center; justify-content:center; gap:16px; flex:1; min-width:0}
nav a.nav-link{color:var(--muted); text-decoration:none; font-size:13.5px; white-space:nowrap}
nav a.nav-link:hover{color:var(--ink)}
.nav-cta{background:var(--rose); color:#fff !important; padding:9px 16px; border-radius:10px; font-weight:600; font-size:14px}
.burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0}
.burger span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
  .burger{display:flex}
  .navlinks{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--bg); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:4px; padding:90px 28px 28px; box-shadow:-8px 0 30px rgba(0,0,0,0.12);
    transform:translateX(100%); transition:transform .25s ease; z-index:90;
  }
  .navlinks.open{transform:translateX(0)}
  nav a.nav-link{padding:14px 0; width:100%; border-bottom:1px solid var(--line); font-size:16px; white-space:normal}
  .nav-cta{width:100%; text-align:center; margin-top:10px}
  .nav-backdrop{display:none; position:fixed; inset:0; background:rgba(20,16,18,0.4); z-index:80}
  .nav-backdrop.open{display:block}
}

.crumb{padding:16px 24px 0; max-width:1080px; margin:0 auto; font-size:13px; color:var(--muted)}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--rose-deep)}

.r-hero{padding:40px 24px 16px; text-align:center}
.r-hero .tag{font-size:13px; color:var(--rose-deep); font-weight:700; margin-bottom:10px}
.r-hero h1{font-size:clamp(28px,4.4vw,42px); max-width:20ch; margin:0 auto}
.r-hero p{color:var(--muted); font-size:16.5px; max-width:58ch; margin:16px auto 0}
.r-hero .sicon{width:56px; height:56px; border-radius:16px; background:var(--card); display:flex; align-items:center; justify-content:center; margin:0 auto 18px}
.r-hero .sicon svg{width:28px; height:28px}

.toc{padding:16px 24px 40px}
.toc-inner{max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.toc a{background:var(--card); color:var(--ink); text-decoration:none; font-size:13.5px; padding:9px 16px; border-radius:20px; font-weight:600; display:inline-flex; align-items:center; gap:8px}
.toc a svg{width:15px; height:15px}
.toc a:hover{background:var(--rose); color:#fff}

.rsection{padding:10px 24px 40px}
.rsection-inner{max-width:900px; margin:0 auto}
.lede{font-size:16px; color:var(--ink); margin-bottom:28px}
.rgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:700px){.rgrid{grid-template-columns:1fr}}
.rcard{background:var(--card); border-radius:14px; padding:20px}
.rcard h4{font-size:15.5px; margin:0 0 8px; font-weight:700}
.rcard p{color:var(--muted); font-size:14px; margin:0; line-height:1.6}

.faq{margin-top:34px}
.faq h3{font-size:19px; margin-bottom:14px}
.faq-item{background:var(--card); border-radius:14px; padding:18px 20px; margin-bottom:10px}
.faq-item h4{font-size:15px; margin:0 0 6px}
.faq-item p{color:var(--muted); font-size:14px; margin:0; line-height:1.6}

.refs{margin-top:26px; padding-top:18px; border-top:1px solid var(--line)}
.refs h5{font-size:12px; letter-spacing:0.02em; color:var(--muted); margin:0 0 10px; font-weight:700}
.refs ol{margin:0; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.9}
.refs a{color:var(--muted); text-decoration:underline}

.r-cta{padding:50px 24px 70px; text-align:center}
.r-cta h2{font-size:clamp(22px,3vw,28px); max-width:20ch; margin:0 auto}
.r-cta p{color:var(--muted); font-size:15.5px; margin:14px auto 0; max-width:48ch}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:14px; font-size:15px; font-weight:600; text-decoration:none; border:1px solid transparent; margin-top:18px}
.btn-primary{background:var(--rose); color:#fff}
.btn-ghost{background:var(--card); color:var(--ink); border-color:var(--line)}

.pmos-banner{background:var(--fert-soft); border:1px solid var(--fert); border-radius:14px; padding:18px 20px; margin:0 0 28px; font-size:14.5px; color:var(--fert-text)}
.pmos-banner strong{color:var(--ink)}

footer.site{background:var(--ink); padding:28px 24px; margin-top:20px}
.footer-inner{max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13.5px; color:rgba(255,248,245,0.7)}
.footer-inner a{color:rgba(255,248,245,0.85); text-decoration:none; margin-left:18px}
@media (max-width:620px){.footer-inner{flex-direction:column; gap:8px} .footer-inner a{margin-left:0; margin-right:14px}}

.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:10px}
@media (max-width:860px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hub-grid{grid-template-columns:1fr}}
.hub-card{display:block; background:var(--card); border-radius:16px; padding:22px; text-decoration:none; color:var(--ink); transition:transform .15s ease}
.hub-card:hover{transform:translateY(-2px)}
.hub-card .sicon{width:46px; height:46px; border-radius:13px; background:var(--bg); display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.hub-card .sicon svg{width:22px; height:22px}
.hub-card h3{font-size:16.5px; margin:0 0 8px}
.hub-card p{color:var(--muted); font-size:13.5px; margin:0; line-height:1.55}