/* Life-Ready Society. Layout: a members' library. Landing reads like a letter of welcome; lessons read like printed pages. */
:root{
  --bg:#f6f3ec; --paper:#fffdf8; --ink:#1d2433; --muted:#5d6472; --rule:#d9d2c2;
  --navy:#1f2f4a; --navy-ink:#fffdf8; --gold:#a07a2c; --gold-soft:#efe4c8; --ok:#2f6b4f; --bad:#9b3a32;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --body:"Crimson Pro",Georgia,serif; --ui:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#121722; --paper:#181f2d; --ink:#ece6d8; --muted:#a3a8b3; --rule:#2e3748;
  --navy:#c9d4e8; --navy-ink:#121722; --gold:#d3ad5e; --gold-soft:#2c2a22; --ok:#7cc4a0; --bad:#e29088; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 19px/1.55 var(--body);padding-inline:16px;padding-block:env(safe-area-inset-top,0px) 48px}
a{color:var(--navy)}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1160px;margin:0 auto}
button,input,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--navy-ink);padding:8px 12px;font:500 14px var(--ui)}
.skip:focus{left:16px;z-index:9}

/* Top bar */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:20px 16px;border-bottom:1px solid var(--rule)}
.crest{display:flex;align-items:center;gap:12px;text-decoration:none}
.crest svg{flex:none}
.brand{font:600 26px/1 var(--display);letter-spacing:.02em;color:var(--navy)}
.brand small{display:block;font:500 10px/1.4 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.topnav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font:500 14px/1 var(--ui)}
.topnav a{text-decoration:none;color:var(--muted);padding:9px 9px}
.topnav a.on{color:var(--navy)}
.topnav a.acct{border:1px solid var(--navy);color:var(--navy);border-radius:2px;padding:8px 12px;margin-left:4px}
.chip{border:1px solid var(--rule);background:var(--paper);padding:8px 12px;border-radius:999px;color:var(--muted);font:500 13px/1 var(--ui);white-space:nowrap}
.chip b{color:var(--ink);font-weight:600}

/* Buttons */
.btn{display:inline-block;font:500 15px/1 var(--ui);letter-spacing:.03em;padding:14px 20px;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid var(--navy);text-align:center}
.btn.primary{background:var(--navy);color:var(--navy-ink)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.small{padding:10px 14px;font-size:14px}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:default}
.linkbtn{background:none;border:0;padding:0;color:var(--navy);text-decoration:underline;cursor:pointer;font:inherit}

.eyebrow{font:500 12px/1.3 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* Landing */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;padding-block:56px 48px}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr);padding-block:36px 28px}}
.hero h1{font:600 clamp(48px,9vw,96px)/.95 var(--display);color:var(--navy);margin:14px 0 18px;letter-spacing:-.01em}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold)}
.hero p.lede{font-size:clamp(20px,2.4vw,24px);line-height:1.45;max-width:34ch;margin:0 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.plate{background:var(--paper);border:1px solid var(--rule);padding:26px 26px 20px;position:relative}
.plate::before{content:"";position:absolute;inset:6px;border:1px solid var(--gold-soft);pointer-events:none}
.plate h3{font:600 26px/1.15 var(--display);color:var(--navy);margin:10px 0 6px}
.plate ul{list-style:none;padding:0;margin:14px 0 0}
.plate li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding:9px 0;font-size:17px}
.plate li a{text-decoration:none;color:var(--ink)}
.plate li span{font:500 12px/1.9 var(--ui);color:var(--muted);white-space:nowrap}
.tip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 20px;align-items:start;background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--gold);padding:20px 22px;margin-block:0 40px}
.tip .eyebrow{grid-column:1/-1}
.tip p{margin:0;font-size:21px;font-style:italic;grid-column:1/-1}
.tip a{font:500 14px var(--ui);grid-column:1/-1}

section.band{padding-block:40px;border-top:1px solid var(--rule)}
section.band h2{font:600 clamp(30px,4vw,40px)/1.1 var(--display);color:var(--navy);margin:8px 0 10px;text-wrap:balance}
section.band > p{max-width:62ch;margin:0 0 24px;color:var(--muted)}
.dims{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:900px){.dims{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.dims{grid-template-columns:minmax(0,1fr)}}
.dim{background:var(--paper);padding:20px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.dim .ord{font:500 12px/1 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.dim h3{font:600 23px/1.1 var(--display);color:var(--navy);margin:0}
.dim p{margin:0;font-size:16px;color:var(--muted)}
.dim a{font:500 14px var(--ui)}
.pill{align-self:flex-start;font:600 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:999px;margin-top:6px}
.pill.live{background:var(--navy);color:var(--navy-ink)}
.pill.next{border:1px solid var(--gold);color:var(--gold)}
.pill.later{border:1px solid var(--rule);color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.steps{grid-template-columns:minmax(0,1fr)}}
.step h3{font:600 22px/1.2 var(--display);color:var(--navy);margin:8px 0 6px}
.step p{margin:0;font-size:17px;color:var(--muted)}
.step .ord{font:600 13px var(--ui);color:var(--gold)}
.faq{max-width:760px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{cursor:pointer;font:600 21px/1.3 var(--display);color:var(--navy)}
.faq details p{margin:8px 0 0;color:var(--muted);max-width:62ch}
.sourcesline{font:15px/1.6 var(--ui);color:var(--muted);max-width:70ch}

/* Section heads */
.pagehead{padding-block:28px 8px}
.pagehead h1{font:600 clamp(34px,5vw,52px)/1.05 var(--display);color:var(--navy);margin:8px 0 10px;text-wrap:balance}
.pagehead p{margin:0;color:var(--muted);max-width:62ch}
.modcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-block:20px}
@media (max-width:720px){.modcards{grid-template-columns:minmax(0,1fr)}}
.modcard{background:var(--paper);border:1px solid var(--rule);padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.modcard:hover{border-color:var(--gold)}
.modcard h2{font:600 30px/1.1 var(--display);color:var(--navy);margin:0}
.modcard p{margin:0;color:var(--muted)}
.bar{height:6px;background:var(--gold-soft);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--gold)}
.modcard .meta,.small{font:500 13px/1.5 var(--ui);color:var(--muted)}

/* Module page list */
.lessonlist{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--rule);max-width:860px}
.lessonlist li{border-bottom:1px solid var(--rule)}
.lessonlist a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;padding:16px 4px;text-decoration:none;color:var(--ink)}
.lessonlist .n{font:500 13px/1.9 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.lessonlist strong{font:600 22px/1.25 var(--display);color:var(--navy)}
.lessonlist span.d{grid-column:2/3;font-size:16px;color:var(--muted)}
.lessonlist .m{font:500 12px/2 var(--ui);color:var(--muted);white-space:nowrap}
.lessonlist .done{color:var(--ok)}

/* Lesson */
.grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start;padding-top:20px}
@media (max-width:820px){.grid{grid-template-columns:minmax(0,1fr)}.grid aside{order:2}}
aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);max-height:calc(100vh - 24px);overflow:auto;border-top:2px solid var(--gold)}
@media (max-width:820px){aside{position:static;max-height:none}}
.modhead{padding-block:14px 8px}
.modhead h2{font:600 26px/1.1 var(--display);margin:6px 0 4px}
.modhead h2 a{color:var(--navy);text-decoration:none}
.modhead p{margin:0;font-size:16px;color:var(--muted)}
ol.index{list-style:none;margin:0;padding:0}
ol.index a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:6px;border-bottom:1px solid var(--rule);padding:10px 4px;color:var(--ink);font:16px/1.3 var(--body);text-decoration:none}
ol.index a .n{font:500 12px/1.6 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
ol.index a[aria-current="page"]{background:var(--gold-soft)}
ol.index a .done{color:var(--ok);font:600 13px var(--ui)}
article.lesson{background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,4vw,48px);min-width:0}
.crumbs{font:500 12px/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.crumbs a{color:var(--gold);text-decoration:none}
article.lesson h1{font:600 clamp(32px,5vw,46px)/1.08 var(--display);color:var(--navy);margin:12px 0 14px;text-wrap:balance}
.intro{font-size:21px;font-style:italic;color:var(--muted);max-width:62ch;margin:0 0 18px}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.tools button{font:500 13px/1 var(--ui);background:transparent;border:1px solid var(--rule);color:var(--navy);padding:9px 12px;border-radius:999px;cursor:pointer}
.tools button[aria-pressed="true"]{background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
article.lesson h2{font:600 26px/1.2 var(--display);color:var(--navy);margin:30px 0 8px;text-wrap:balance}
article.lesson ul{margin:0;padding-left:1.1em;max-width:68ch;display:grid;gap:6px}
article.lesson li::marker{color:var(--gold)}
.box{border:1px solid var(--rule);border-left:3px solid var(--gold);padding:16px 20px;margin-top:28px;max-width:72ch}
.box h3{font:600 12px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px;color:var(--gold)}
.box p.small{margin:0 0 10px}
ul.practice{list-style:none;padding:0!important;gap:8px!important}
ul.practice li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.tick{width:26px;height:26px;border:1.5px solid var(--gold);border-radius:4px;background:transparent;cursor:pointer;margin-top:2px;padding:0;display:grid;place-items:center;color:var(--navy-ink)}
.tick[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.tick[aria-pressed="true"]::after{content:"";width:7px;height:12px;border:solid var(--navy-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.note{font:14px/1.5 var(--ui);color:var(--muted);background:var(--gold-soft);padding:12px 14px;margin-top:22px;max-width:72ch}
.quiz{margin-top:34px;border-top:1px solid var(--rule);padding-top:8px}
.q{margin-top:18px}
.q p{margin:0 0 8px;font-weight:500}
.opts{display:grid;gap:8px;max-width:640px}
.opts button{text-align:left;font:16px/1.35 var(--ui);padding:11px 14px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:2px;cursor:pointer}
.opts button:hover:not(:disabled){border-color:var(--gold)}
.opts button.right{border-color:var(--ok);color:var(--ok);font-weight:600}
.opts button.wrong{border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.opts button:disabled{cursor:default}
.explain{font:15px/1.5 var(--ui);color:var(--muted);margin-top:8px}
.explain b{color:var(--ink)}
.score{font:600 15px/1.6 var(--ui);margin-top:18px;color:var(--navy)}
.score .btn{margin-top:10px}
.sources{margin-top:30px;font:14px/1.5 var(--ui);color:var(--muted)}
.sources h3{font:600 12px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.sources ol{padding-left:1.4em;display:grid;gap:4px}
.sources a{overflow-wrap:anywhere}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:34px}
.pager a{font:500 14px var(--ui);border:1px solid var(--navy);color:var(--navy);padding:10px 14px;border-radius:2px;text-decoration:none}
.report{margin-top:26px;border-top:1px solid var(--rule);padding-top:16px;font:14px/1.5 var(--ui);color:var(--muted)}

/* Forms */
.formcard{background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,4vw,36px);max-width:520px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font:600 13px var(--ui);color:var(--ink)}
.field input,.field textarea{width:100%;padding:12px 12px;border:1px solid var(--rule);border-radius:2px;background:var(--bg);color:var(--ink);font:16px var(--ui)}
.field textarea{min-height:100px;resize:vertical}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font:14px/1.45 var(--ui);color:var(--muted);margin-bottom:16px}
.check input{width:18px;height:18px;margin-top:2px}
.msg{font:14px/1.5 var(--ui);padding:10px 12px;margin-bottom:14px;border-radius:2px}
.msg.err{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.msg.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--rule)}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;font:600 14px var(--ui);color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--navy);border-color:var(--gold)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border:1px solid var(--rule);background:#fff;color:#1f1f1f;border-radius:2px;font:500 15px var(--ui);text-decoration:none;margin-bottom:8px}
.or{display:flex;align-items:center;gap:10px;font:500 12px var(--ui);color:var(--muted);margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}

/* Progress & admin */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-block:20px}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--paper);padding:18px;min-width:0}
.stat b{display:block;font:600 40px/1 var(--display);color:var(--navy);font-variant-numeric:tabular-nums}
.stat span{font:500 13px var(--ui);color:var(--muted)}
h2.sub{font:600 28px/1.2 var(--display);color:var(--navy);margin:32px 0 12px}
.badgegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.badge{background:var(--paper);border:1px solid var(--rule);padding:16px;display:flex;gap:12px;align-items:center}
.badge.locked{opacity:.45}
.badge svg{flex:none}
.badge b{display:block;font:600 19px/1.15 var(--display);color:var(--navy)}
.badge small{font:13px/1.35 var(--ui);color:var(--muted)}
.acctbox{background:var(--paper);border:1px solid var(--rule);padding:20px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:20px}
.acctbox p{margin:0;font:15px/1.5 var(--ui)}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--paper)}
table{border-collapse:collapse;width:100%;font:14px/1.4 var(--ui)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);white-space:nowrap}
th{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal;min-width:260px}
.hbar{display:inline-block;height:8px;background:var(--gold);border-radius:2px;vertical-align:middle}

.prose{max-width:68ch;padding-block:28px}
.prose h1{font:600 clamp(34px,5vw,46px)/1.08 var(--display);color:var(--navy)}
.prose h2{font:600 26px/1.2 var(--display);color:var(--navy);margin-top:28px}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--navy);color:var(--navy-ink);font:500 14px/1.4 var(--ui);padding:12px 18px;border-radius:2px;max-width:calc(100% - 32px);box-shadow:0 6px 24px rgba(0,0,0,.18);z-index:10}
footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--rule);font:13px/1.6 var(--ui);color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer a{color:var(--muted)}

@media print{
  body{background:#fff;color:#000;padding:0;font-size:12pt}
  .top,footer,aside,.tools,.quiz,.pager,.report,.toast,.skip,.tick{display:none!important}
  article.lesson{border:0;padding:0}
  ul.practice li{display:list-item;list-style:"☐  "}
  body.cheat article.lesson > h2,body.cheat article.lesson > ul,body.cheat .note,body.cheat .sources{display:none!important}
  body.cheat .intro{font-size:12pt}
  a{color:#000;text-decoration:none}
}
@media (prefers-reduced-motion: no-preference){.fade{animation:fade .35s ease both}@keyframes fade{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}}