:root{--ink:#302B29;--muted:#5C544E;--line:#D9D9D9;--wash:#F2F1EE;--accent:#800000;--accent-deep:#4B1020;--focus:#315873}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-padding-top:24px}body{margin:0;background:#fff;color:var(--ink);font:15px/1.6 system-ui,-apple-system,sans-serif}main{max-width:1264px;margin:auto;padding:24px 32px 48px}a{color:var(--accent);text-underline-offset:4px}a,button,summary{touch-action:manipulation}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.skip{position:absolute;top:-80px;left:16px;padding:12px;background:#fff}.skip:focus{top:0}.eyebrow{margin:0;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:32px;line-height:1.25;margin:8px 0 16px}h2{font-size:21px;line-height:1.35;margin:0 0 8px}.lede{max-width:760px;margin:0 0 8px}p,span,a,summary{overflow-wrap:anywhere}

/* Method hero: the four steps are the visual hero. One pastel per step, the dark variant for its text. */
.method{margin:24px 0 8px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.step{--tint:#F4E8E9;--hue:#4B1020;--edge:#D9AEB0;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:18px 18px 16px;background:var(--tint);border:1px solid var(--edge);border-top:4px solid var(--hue);border-radius:6px;color:var(--ink)}
.step:nth-child(1){--tint:#FBF0D1;--hue:#5C4300;--edge:#E9D28A}
.step:nth-child(2){--tint:#D6E9EE;--hue:#002A3A;--edge:#9CC7D3}
.step:nth-child(3){--tint:#E7EDDE;--hue:#284734;--edge:#B9CDA0}
.step:nth-child(4){--tint:#E6DCE8;--hue:#41273B;--edge:#BFAEC3}
.step-n{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--hue)}
.step-title{font:400 21px/1.2 Georgia,serif;color:var(--hue)}
.step-text{font-size:14px;line-height:1.5}
.budget{margin:16px 0 0;font-weight:600}
.preface{margin:4px 0 0;max-width:860px}
.preface>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--accent);font-weight:600}
.preface ol{margin:4px 0 8px;padding-left:22px;font-size:14px;color:var(--muted)}
.preface li{margin:0 0 8px}

/* The bank: one section per group, hue-matched bar on the heading, one details per question. */
.bank{max-width:920px;margin-top:32px}
.group{margin-bottom:36px;scroll-margin-top:24px}
.group h2{padding-left:12px;border-left:4px solid var(--accent-deep)}
.group[data-group=before] h2{border-left-color:#5C4300}
.group[data-group=read] h2{border-left-color:#002A3A}
.group[data-group=firm] h2{border-left-color:#284734}
.group[data-group=after] h2{border-left-color:#41273B}
.group[data-group=skip]{padding:16px 20px 8px;background:var(--wash);border:1px solid var(--line);border-radius:6px}
.group[data-group=skip] h2{border-left-color:#737373}
.group-note{margin:0 0 8px;max-width:760px;font-size:14px;color:var(--muted)}
.question{border-top:1px solid var(--line)}
.question:last-of-type{border-bottom:1px solid var(--line)}
.question>summary{min-height:44px;padding:12px 0;cursor:pointer;font-size:16px;line-height:1.5;color:var(--ink)}
.panel{margin:0 0 16px 30px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:6px}
.panel p{margin:0 0 4px;font-size:14px}
.panel strong{font-weight:650}
.source{display:inline-flex;align-items:center;min-height:44px;font-size:13px}

/* Pocket card: one question per group, built for a screenshot. */
.pocket{max-width:920px;margin-top:8px;padding:20px 24px;background:#fff;border:1px solid var(--line);border-radius:6px}
.pocket h2{margin-bottom:4px}
.pocket-lede{margin:0 0 12px;font-size:14px;color:var(--muted)}
.pocket-list{margin:0;padding:0 0 0 26px}
.pocket-list li{margin:0 0 12px;line-height:1.5}
.pocket-q{display:block}
.pocket-group{display:block;margin-top:2px;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pocket-foot{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.pocket-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;background:#fff;color:var(--accent);border:1px solid var(--line);border-radius:4px;font:600 14px/1.4 system-ui,-apple-system,sans-serif;cursor:pointer}
.action:hover{background:#FAF4F4;border-color:#A4343A}
.pocket-status{margin:0;min-height:20px;font-size:13px;color:var(--muted)}

/* Sources: every public page behind the questions and the method, grouped by site. */
.sources{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.sources-note{margin:0 0 12px;max-width:760px;font-size:13px;color:var(--muted)}
.sources ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;list-style:none;margin:0;padding:0;font-size:13px}
.sources li{padding:6px 0;border-top:1px solid var(--line)}
.sources .host{display:block;font-weight:650;color:var(--ink)}
.sources li a{display:inline-flex;align-items:center;min-height:44px;margin-right:16px}

@media(max-width:899px){main{padding:16px 16px 32px}h1{font-size:24px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.sources ul{grid-template-columns:1fr}}
@media(max-width:600px){.steps{grid-template-columns:1fr}.step{min-height:0}.panel{margin-left:0}.pocket{padding:16px}.group[data-group=skip]{padding:12px 16px 4px}.action{width:100%}}
@media print{.skip,.recruiting-nav,.pocket-actions{display:none!important}.panel{margin-left:0}details::details-content{display:block}}