/* Mutual Desires: site pages (home, guides, about). Same palette and type as the quiz. */
:root{
  --bg:#FAF6F4; --surface:#FFFFFF; --soft:#F2E9EC; --ink:#2A1A22; --muted:#76646C; --line:#E8DADE;
  --accent:#5B2148; --accent-ink:#FFFFFF;
  --want:#1A7A50; --cur:#935600; --game:#2F6FA8; --fant:#7A4FB5; --no:#C62828;
  --display:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151114; --surface:#211A1F; --soft:#2C2229; --ink:#F3E9EE; --muted:#B19FA8; --line:#3A2D35;
    --accent:#E3A1C8; --accent-ink:#1A0E15;
    --want:#4FD195; --cur:#F2B254; --game:#82B5F0; --fant:#BFA3F5; --no:#FF6B6B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#151114; --surface:#211A1F; --soft:#2C2229; --ink:#F3E9EE; --muted:#B19FA8; --line:#3A2D35;
  --accent:#E3A1C8; --accent-ink:#1A0E15;
  --want:#4FD195; --cur:#F2B254; --game:#82B5F0; --fant:#BFA3F5; --no:#FF6B6B;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6}
a{color:var(--accent); text-underline-offset:3px}
img{max-width:100%}
.wrap{max-width:720px; margin:0 auto; padding:0 16px}

.top{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5}
@media (max-width:600px){ .top{position:static} }
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; flex-wrap:wrap}
.brand{font-family:var(--display); font-size:1.35rem; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:.01em}
.brand em{font-style:italic; color:var(--accent)}
.nav{display:flex; gap:18px; font-size:.95rem; font-weight:600}
.nav a{color:var(--ink); text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent); text-decoration:underline}

main{padding:28px 0 48px}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 8px}
h1,h2,h3{font-family:var(--display); line-height:1.15; font-weight:700; margin:0}
h1{font-size:clamp(2.1rem, 7vw, 3.1rem); margin-bottom:14px}
h2{font-size:1.6rem; margin:40px 0 12px}
h3{font-size:1.2rem; margin:24px 0 8px}
p{margin:0 0 14px}
.lede{font-size:1.15rem; color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:.9rem}
ul,ol{padding-left:1.3em; margin:0 0 16px}
li{margin:0 0 8px}

.btns{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 10px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; font-weight:700; text-decoration:none; border:2px solid var(--accent); font-size:1rem; cursor:pointer; font-family:inherit}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-ghost{background:transparent; color:var(--accent)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; margin:18px 0}
.cta{background:var(--soft); border:0}
.cta h2{margin-top:0; font-size:1.35rem}

.answers{list-style:none; padding:0; display:grid; gap:10px}
.answers li{display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:baseline; margin:0}
.chip{display:inline-block; font-weight:800; font-size:.85rem; padding:3px 10px; border-radius:999px; border:2px solid currentColor; text-align:center}
.c-want{color:var(--want)} .c-cur{color:var(--cur)} .c-game{color:var(--game)} .c-fant{color:var(--fant)} .c-no{color:var(--no)}

.steps{counter-reset:s; list-style:none; padding:0}
.steps li{counter-increment:s; position:relative; padding-left:44px; margin-bottom:14px}
.steps li::before{content:counter(s); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:800; display:grid; place-items:center; font-size:.9rem}

.glist{list-style:none; padding:0; display:grid; gap:2px}
.glist li{margin:0; padding:10px 0; border-bottom:1px solid var(--line)}
.glist a{font-weight:700; text-decoration:none}
.glist a:hover{text-decoration:underline}
.glist p{margin:2px 0 0; font-size:.93rem; color:var(--muted)}

.covers{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0}
.covers li{margin:0; background:var(--soft); border-radius:999px; padding:3px 12px; font-size:.88rem}

details{border-bottom:1px solid var(--line); padding:12px 0}
summary{font-weight:700; cursor:pointer}
details p{margin:10px 0 0}

.sources li{font-size:.92rem}
.crumbs{font-size:.88rem; color:var(--muted); margin-bottom:14px}
.crumbs a{color:var(--muted)}

.foot{border-top:1px solid var(--line); padding:24px 0 40px; font-size:.92rem; color:var(--muted)}
.foot nav{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:10px}
.foot a{color:var(--muted)}

.gate{position:fixed; inset:0; z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; padding:16px}
.gate[hidden]{display:none}
.gate .card{max-width:440px; width:100%; margin:0; box-shadow:0 20px 50px rgba(0,0,0,.18)}
.gate h2{margin-top:0}
html.gated body{overflow:hidden}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }