/* Layout: one calm writing column, sticky progress header, one step at a time. Per-email colours come from --accent / --accent-ink / --tint set on each page. */
:root{
  --bg:#f7f3ea; --paper:#fffdf8; --ink:#1f1d19; --soft:#69645a; --line:#e4ddcd;
  --accent:#cfc86a; --accent-ink:#5f5b1d; --tint:#f1ecdc; --warn:#b8683f; --warn-bg:#fbefe7;
  --display:"DM Serif Display", Georgia, "Times New Roman", serif;
  --body:Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand:Caveat, "Comic Sans MS", cursive;
  --serif:Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1c1b17; --paper:#25231e; --ink:#f1ede3; --soft:#b4ad9e; --line:#3a372f;
  --tint:#2e2c24; --warn:#e29a72; --warn-bg:#3a2a21; --accent-ink:var(--accent); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#1c1b17; --paper:#25231e; --ink:#f1ede3; --soft:#b4ad9e; --line:#3a372f;
  --tint:#2e2c24; --warn:#e29a72; --warn-bg:#3a2a21; --accent-ink:var(--accent); 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:16px; line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:env(safe-area-inset-top,0px) 48px}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:10; background:var(--bg)}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--accent-ink)}
.wrap{max-width:700px; margin:0 auto}
header.top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; background:var(--bg); padding:12px 0 12px; border-bottom:1px solid var(--line)}
.home-link{display:inline-block; font-size:13px; font-weight:600; text-decoration:none; margin-bottom:8px; color:var(--soft)}
.home-link:hover{color:var(--ink)}
.brand{display:flex; align-items:center; gap:12px}
.logo{flex:none; width:40px; height:40px; background:var(--accent); color:#1f1d19; font-family:var(--display); font-size:20px; display:grid; place-items:center; transform:rotate(-4deg); border-radius:3px}
.brand h1{font-family:var(--display); font-weight:400; font-size:clamp(19px, 4.6vw, 24px); line-height:1.15; margin:0; text-wrap:balance}
.brand .tag{font-family:var(--hand); font-size:18px; color:var(--soft); line-height:1}
.progress{margin-top:12px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--soft)}
.bar{flex:1; height:6px; background:var(--line); border-radius:6px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--accent-ink); transition:width .3s}
@media (prefers-reduced-motion: reduce){ .bar i{transition:none} }
.dots{display:flex; gap:4px; flex-wrap:wrap; margin-top:10px}
.dots button{font:600 12px var(--body); border:1px solid var(--line); background:var(--paper); color:var(--soft); border-radius:20px; padding:3px 9px; cursor:pointer}
.dots button[aria-current="step"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.dots button.done{border-color:var(--accent-ink); color:var(--accent-ink)}

main{padding-top:26px}
.step-label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--accent-ink)}
main h2{font-family:var(--display); font-weight:400; font-size:clamp(26px, 6vw, 34px); line-height:1.1; margin:6px 0 14px; text-wrap:balance}
main h3{font-family:var(--display); font-weight:400; font-size:22px; margin:26px 0 10px}
p{margin:0 0 12px}
.loading{color:var(--soft)}

/* imported toolkit content */
.content .box{border-radius:10px; padding:12px 14px; margin:16px 0; font-size:15px}
.content .box p:last-child{margin-bottom:0}
.content .box .t{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:6px}
.content .why, .content .more{background:var(--tint)}
.content .use{background:var(--paper); border:1.5px solid var(--accent)}
.content .tip{background:var(--tint); border-left:3px solid var(--accent); border-radius:0 10px 10px 0}
.content .warn{background:var(--warn-bg); border-left:3px solid var(--warn); border-radius:0 10px 10px 0}
.content .warn .t{color:var(--warn)}
.content .bank{background:var(--paper); border:1px dashed var(--line)}
.content .bank p.q{position:relative; padding-left:18px; cursor:pointer; border-radius:6px}
.content .bank p.q::before{content:"→"; position:absolute; left:2px; color:var(--accent-ink)}
.content .bank p.q:hover{background:var(--tint)}
.content .bank p.q:focus-visible{outline:2px solid var(--accent-ink)}
.content .rule{font-weight:600; border-top:1px solid var(--line); padding-top:14px; margin-top:18px}
.content .part{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:22px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--line)}
.content .lbl2{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--soft); margin:16px 0 6px}
.content .fill p{padding-left:12px; border-left:2px solid var(--line)}
.content ul.dots{display:block; margin:0 0 12px; padding-left:20px}
.content ul.dots li{margin-bottom:6px}
.content .ph{background:color-mix(in srgb, var(--accent) 40%, transparent); font-weight:600; font-size:.92em}
.content h3{display:none}
.content hr{border:0; border-top:1px solid var(--line); margin:12px 0}
.email{background:var(--paper); border:1px solid var(--line); border-radius:10px; margin:6px 0 12px}
.email-head{background:var(--tint); padding:10px 14px; border-bottom:1px solid var(--line); border-radius:10px 10px 0 0; font-size:14px}
.email-head div{display:flex; gap:10px}
.email-head span{color:var(--soft); width:58px; flex:none}
.email-body{padding:14px; font-family:var(--serif); font-size:15.5px}
.content .btn, .email .btn{display:inline-block; font:600 13px var(--body); letter-spacing:.04em; background:var(--ink); color:var(--bg); padding:6px 12px; border-radius:6px; border:0}
.content .subj{display:block}
.content .grp{margin-bottom:14px}
.content .grp .t{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--accent-ink); margin-bottom:6px}
.content .grp p{display:inline-block; margin:0 6px 8px 0; padding:6px 10px; border:1px dashed var(--accent-ink); border-radius:8px; font-size:14px; cursor:pointer}
.content .grp p:hover{background:var(--tint)}
.content .note{display:none}
.content .check{display:none}

/* fields */
.yourturn{background:var(--paper); border:1.5px solid var(--accent); border-radius:12px; padding:4px 16px 8px; margin:24px 0}
.yourturn > .step-label{display:block; margin-top:14px}
.yourturn .hint-top{font-size:14px; color:var(--soft); margin:6px 0 0}
.field{display:flex; flex-direction:column; gap:6px; margin:18px 0}
.field label{font-weight:600; line-height:1.4}
.field .hint{font-size:14px; color:var(--soft); margin-top:-2px}
.field .opt{font-weight:400; color:var(--soft); font-size:14px}
textarea, input[type=text], input[type=password]{width:100%; font:inherit; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; line-height:1.5}
textarea{min-height:96px; resize:vertical}
textarea:focus, input:focus{outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent)}

details{border:1px solid var(--line); background:var(--paper); border-radius:10px; margin:14px 0}
summary{cursor:pointer; padding:12px 14px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-weight:400; font-size:20px; line-height:1; color:var(--accent-ink)}
details[open] summary::after{content:"–"}
details > .in{padding:0 14px 6px; font-size:15px}
summary:focus-visible, button:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}

nav.foot{display:flex; justify-content:space-between; gap:12px; margin-top:30px; padding-top:18px; border-top:1px solid var(--line)}
.button{font:600 15px var(--body); border-radius:10px; padding:12px 18px; cursor:pointer; border:1.5px solid var(--ink); background:var(--ink); color:var(--bg); text-decoration:none; display:inline-block}
.button.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.button[disabled]{visibility:hidden}

.draft{white-space:pre-wrap; font-family:var(--serif); font-size:16px; line-height:1.65; min-height:420px}
.status{font-size:14px; color:var(--accent-ink); min-height:1.4em}
.checklist{list-style:none; padding:0; margin:10px 0}
.checklist li{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line)}
.checklist input{margin-top:5px; width:18px; height:18px; accent-color:var(--accent-ink); flex:none}
.checklist b{display:block}
.checklist span{font-size:14px; color:var(--soft)}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0}
.confirm{display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--warn-bg); padding:10px 12px; border-radius:10px; margin-top:10px}
.saved{font-size:13px; color:var(--soft); margin-top:6px}

/* password */
.gate{max-width:420px; margin:12vh auto 0; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:28px 24px}
.gate h2{font-family:var(--display); font-weight:400; font-size:28px; line-height:1.15; margin:12px 0 8px}
.gate form{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.gate .err{color:var(--warn); font-size:14px; min-height:1.3em}

/* home */
.home-head{padding:34px 0 10px}
.home-head .eyebrow{font-family:var(--hand); font-size:22px; color:var(--soft)}
.home-head h1{font-family:var(--display); font-weight:400; font-size:clamp(30px, 7vw, 44px); line-height:1.05; margin:4px 0 10px; text-wrap:balance}
.cards{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:22px}
@media (max-width:620px){ .cards{grid-template-columns:1fr} }
.card{display:block; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .15s}
.card:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){ .card{transition:none} .card:hover{transform:none} }
.card img{display:block; width:100%; height:auto}
.card .c-body{padding:12px 14px}
.card .c-title{font-weight:600}
.card .c-state{font-size:13px; color:var(--soft)}