:root{
  --bg:#000000;
  --panel:#0b0910;--panel-border:#4a3f22;
  --cream:#ecdfc6;--cream-2:#ead7ad;--body:#e6ddca;--muted:#9a8d72;--soft:#d2c9b6;
  --gold:#caa24c;--gold-soft:#d8b766;--gold-dim:#5a4a28;
  --red:#9c1f24;--red-2:#b8302f;
  --green:#9cc187;--green-dim:#3e5538;
  --rose:#edc8c8;
  --box:#201c28;--box-red:#271417;--box-green:#16201a;
  --sans:Arial,'Helvetica Neue',Helvetica,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:920px;margin:0 auto;padding:clamp(18px,3vw,34px) clamp(14px,4vw,38px) 80px}

/* top nav */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(26px,4vw,40px)}
.back{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-soft);text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold-dim);border-radius:6px;padding:8px 13px;transition:background .2s,color .2s}
.back:hover{background:rgba(202,162,76,.1);color:var(--cream-2)}
.dots{display:flex;gap:7px;align-items:center}
.dots a{min-width:24px;height:24px;padding:0 2px;border-radius:5px;border:1px solid var(--gold-dim);display:grid;place-items:center;font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--muted);text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.dots a:hover{border-color:var(--gold);color:var(--cream-2)}
.dots a.active{background:var(--red);border-color:var(--red-2);color:#fff}

/* masthead */
.kicker{font-family:var(--sans);font-weight:700;letter-spacing:.34em;text-transform:uppercase;font-size:.68rem;color:var(--gold-soft);margin-bottom:10px}
.doc-title{font-family:var(--sans);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.02;letter-spacing:.005em;color:var(--cream);margin-bottom:clamp(22px,3.4vw,34px)}
.doc-title .rose{color:var(--rose)}

/* pillar panel */
.pillar{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:clamp(20px,3.4vw,38px)}
.p-head{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.p-num{font-family:var(--sans);font-weight:900;font-size:clamp(1.3rem,3vw,1.8rem);color:var(--gold)}
.p-name{font-family:var(--sans);font-weight:900;text-transform:uppercase;font-size:clamp(1.9rem,5vw,2.9rem);line-height:1;letter-spacing:.01em;color:var(--cream-2)}
.pain{font-style:italic;font-size:clamp(1rem,1.8vw,1.18rem);color:var(--cream);margin-bottom:22px}
.pain q-mark,.pain .q{color:var(--red-2);font-style:normal}

/* spot it (inline, pipe-separated) */
.spot{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-bottom:28px;padding-bottom:4px}
.spot .spot-label{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--gold-soft);margin-right:16px}
.spot .item{font-size:.86rem;color:var(--soft);padding:0 16px;border-left:1px solid var(--gold-dim);line-height:1.3}
.spot .item:first-of-type{border-left:none;padding-left:0}

/* what to do */
.todo-label{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--gold-soft);margin-bottom:14px}
.actions{display:grid;gap:7px}
.act{margin-bottom:10px}
.act .lead{font-size:.98rem;line-height:1.55;color:var(--body)}
.act .lead .dia{color:var(--red);font-size:.8em;margin-right:7px;vertical-align:middle}
.act .lead b{color:#f4ecdb;font-weight:700}
.act .lead i{font-style:italic;color:var(--cream)}

/* callout boxes */
.box{margin:11px 0 4px;border-radius:4px;background:var(--box);border-left:3px solid var(--gold-dim);padding:12px 16px}
.box .b-label{display:block;font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;color:var(--gold-soft);margin-bottom:6px}
.box p{font-size:.88rem;line-height:1.5;color:var(--body)}
.box p.it{font-style:italic;color:var(--cream)}
.box .ex{font-weight:700;color:var(--gold);font-style:normal}

/* instead / try - single box, two bands */
.swap{padding:0;background:none;border-left:none;margin:11px 0 4px;border-radius:4px;overflow:hidden}
.swap .band{padding:11px 16px;font-size:.87rem;line-height:1.5}
.swap .band .b-label{display:inline;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78em;margin-right:6px}
.swap .ins{background:var(--box-red);border-left:3px solid var(--red-2)}
.swap .ins .b-label{color:var(--red-2)}
.swap .ins,.swap .ins i{font-style:italic;color:var(--cream)}
.swap .try{background:var(--box-green);border-left:3px solid var(--green)}
.swap .try .b-label{color:var(--green)}
.swap .try,.swap .try i{font-style:italic;color:var(--cream)}
.swap .ex{font-weight:700;color:var(--gold);font-style:normal}

/* ask, don't tell - gold box, '?' accent */
.ask .b-label{color:var(--gold-soft)}
.ask .b-label .qm{color:var(--gold);margin-right:5px}
.ask p.it{font-style:normal;color:var(--body)}
.ask p .it{font-style:italic;color:var(--cream)}

/* what you'll see on the field - green box, full border */
.see{margin-top:22px;background:var(--box-green);border:1px solid var(--green-dim);border-left:3px solid var(--green);border-radius:4px;padding:16px 18px}
.see .b-label{color:var(--green);font-size:.66rem}
.see .b-label .eye{margin-right:6px}
.see p{font-size:.95rem;line-height:1.55;color:var(--body)}
.see p b{color:#fff;font-weight:700}

/* prev / next */
.pn{display:flex;justify-content:space-between;gap:14px;margin-top:34px;padding-top:20px;border-top:1px solid var(--gold-dim)}
.pn a{font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--cream-2);text-decoration:none;max-width:46%}
.pn a span{display:block;font-size:.58rem;letter-spacing:.18em;color:var(--muted);margin-bottom:4px}
.pn a:hover{color:var(--gold-soft)}
.pn a.next{text-align:right;margin-left:auto}
.pn a.disabled{opacity:.3;pointer-events:none}

@media(max-width:560px){
  .spot{flex-direction:column;align-items:flex-start;gap:4px}
  .spot .item{border-left:none;padding:0}
  .spot .item:first-of-type{padding:0}
}