/* Shared styling for Heart's Recovery Residence study materials */
:root{
  --pine:#1e372b; --pine-deep:#152519; --moss:#6f8a68; --sage:#9db092;
  --cream:#f6f1e6; --cream-2:#efe7d6; --clay:#c07a52; --gold:#bf9b5f;
  --ink:#221f1a; --ink-soft:#4a463d; --line:rgba(30,55,43,.16);
  --serif:"Spectral",Georgia,serif; --display:"Fraunces","Spectral",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--serif);color:var(--ink);background:var(--cream);line-height:1.7;font-size:18px;-webkit-font-smoothing:antialiased}
.wrap{width:min(820px,92vw);margin:0 auto;padding:0 0 90px}

.topbar{
  position:sticky;top:0;z-index:10;background:rgba(246,241,230,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .row{width:min(820px,92vw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.topbar a.back{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss);display:inline-flex;gap:8px;align-items:center}
.topbar a.back:hover{color:var(--pine)}
.topbar .mark{display:flex;align-items:center;gap:10px;color:var(--pine);font-family:var(--display);font-weight:600}
.topbar .mark svg{width:26px;height:26px;color:var(--gold)}
.topbar .mark svg circle,.topbar .mark svg polygon{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round}

header.hero{padding:70px 0 34px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:44px}
.eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;font-weight:500;color:var(--moss)}
header.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.05;color:var(--pine);margin:.35em 0 .3em;text-wrap:balance}
header.hero p.sub{color:var(--ink-soft);max-width:60ch;margin:0 auto;font-size:1.08rem}

.card{
  background:var(--cream-2);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0;padding:26px 30px;margin-bottom:22px;box-shadow:0 14px 34px -28px rgba(21,37,25,.5);
}
.card .num{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.5rem;line-height:1}
.card h2{font-family:var(--display);font-weight:600;color:var(--pine);font-size:1.5rem;margin:2px 0 4px;text-wrap:balance}
.card .def{font-style:italic;color:var(--clay);margin-bottom:12px}
.card p{margin-top:10px;color:var(--ink-soft)}
.card p.apply{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:.95rem}
.card p.apply strong{color:var(--pine)}
.card ol,.card ul{margin:12px 0 0 22px}
.card ol li,.card ul li{margin-bottom:8px;color:var(--ink-soft)}
.card ol li::marker{color:var(--gold);font-weight:600}

.formula{
  background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:16px 20px;margin-top:14px;
}
.formula .flabel{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--moss);font-weight:600;margin-bottom:8px}

.lead{font-size:1.15rem;color:var(--ink-soft);margin-bottom:30px}
.ladder{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 40px;justify-content:center}
.ladder span{background:var(--pine);color:var(--cream);font-size:.8rem;padding:7px 14px;border-radius:100px;letter-spacing:.03em}
.ladder span.top{background:var(--gold);color:var(--pine-deep);font-weight:600}

.upper-conditions{
  position:relative;margin:44px -18px 36px;padding:42px 18px 18px;border:5px double var(--pine);
  border-radius:18px;background:linear-gradient(180deg,rgba(111,138,104,.12),rgba(111,138,104,.04));
  box-shadow:inset 0 0 0 1px rgba(157,176,146,.36),0 22px 48px -38px rgba(21,37,25,.7);
}
.upper-conditions::before{
  content:"Normal • Affluence • Power • Power Change";position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  background:var(--cream);border:2px solid var(--pine);border-radius:100px;padding:8px 22px;
  font-family:var(--display);font-weight:600;color:var(--pine);font-size:.95rem;white-space:nowrap;
  box-shadow:0 0 0 6px var(--cream);
}
.upper-conditions::after{
  content:"";position:absolute;inset:12px;pointer-events:none;border-radius:12px;
  background:
    radial-gradient(circle at 28px 28px,transparent 0 10px,var(--pine) 11px 12px,transparent 13px),
    radial-gradient(circle at calc(100% - 28px) 28px,transparent 0 10px,var(--pine) 11px 12px,transparent 13px),
    radial-gradient(circle at 28px calc(100% - 28px),transparent 0 10px,var(--pine) 11px 12px,transparent 13px),
    radial-gradient(circle at calc(100% - 28px) calc(100% - 28px),transparent 0 10px,var(--pine) 11px 12px,transparent 13px),
    linear-gradient(90deg,transparent 18px,rgba(30,55,43,.35) 18px 20px,transparent 20px calc(100% - 20px),rgba(30,55,43,.35) calc(100% - 20px) calc(100% - 18px),transparent calc(100% - 18px));
}
.upper-conditions .card{border-left-color:var(--pine);background:rgba(246,241,230,.72)}

.note-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 24px;margin:34px 0;font-size:.92rem;color:var(--ink-soft)}
.note-box strong{color:var(--pine)}

footer.foot{text-align:center;color:var(--ink-soft);font-size:.82rem;margin-top:50px;padding-top:24px;border-top:1px solid var(--line)}

@media(prefers-color-scheme:dark){
  :root{--cream:#181d18;--cream-2:#20261f;--ink:#ece6d8;--ink-soft:#b9b3a4;--line:rgba(255,255,255,.12);--pine:#cfe0c4}
  .topbar{background:rgba(24,29,24,.9)}
  .note-box{background:#20261f}
}