/* Interactive 14-factor explainer (dementia-risk-factors.html). Uses site tokens from tokens.css.
   All classes rf-prefixed to avoid colliding with main.css (.board, .stat, etc.). */
.rf-wrap{max-width:880px;margin:0 auto;padding:112px 24px 80px}
.rf-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mid);margin:0 0 14px}
.rf-title{font-family:var(--font-display);font-size:clamp(30px,4.8vw,44px);line-height:1.05;letter-spacing:-.028em;font-weight:600;margin:0 0 16px;text-wrap:balance;max-width:20ch}
.rf-thesis{font-size:16.5px;line-height:1.6;color:var(--text-mid);max-width:62ch;margin:0}
.rf-thesis b{color:var(--text);font-weight:600}

.rf-stat{display:flex;align-items:center;gap:18px;margin:24px 0 2px;padding:18px 22px;background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(24,34,42,.04),0 12px 30px rgba(24,34,42,.05);flex-wrap:wrap}
.rf-stat .n{font-family:var(--font-display);font-size:clamp(40px,7vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--text)}
.rf-stat .t{font-size:13.5px;color:var(--text-mid);line-height:1.5;max-width:44ch}
.rf-stat .t b{color:var(--text);font-weight:600}

.rf-board{margin-top:34px;display:flex;flex-direction:column;gap:26px}
.rf-stage-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.rf-stage-h .lbl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);font-weight:600}
.rf-stage-h .age{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);letter-spacing:.04em}
.rf-stage-h .rule{flex:1;height:1px;background:var(--line)}
.rf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}

.rf-tile{position:relative;text-align:left;font:inherit;cursor:pointer;background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:14px 14px 13px;transition:border-color .15s,transform .08s;color:var(--text)}
.rf-tile:hover{border-color:var(--text-dim);transform:translateY(-1px)}
.rf-tile:active{transform:translateY(0)}
.rf-tile:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.rf-tile .fname{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.rf-tile .ftag{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#1e8e5a;background:rgba(30,142,90,.1);padding:2px 7px;border-radius:5px}
/* selection = ink frame + check, no fill (Solenna house style) */
.rf-tile.sel{border-color:var(--text);border-width:1.5px;padding:13.5px 13.5px 12.5px}
.rf-tile .chk{position:absolute;top:10px;right:10px;width:17px;height:17px;opacity:0;transition:opacity .12s}
.rf-tile.sel .chk{opacity:1}
.rf-tile .chk svg{width:17px;height:17px;stroke:var(--text);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.rf-detail{margin-top:26px;background:var(--bg-elev);border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:0 1px 2px rgba(24,34,42,.04),0 12px 30px rgba(24,34,42,.05);min-height:180px}
.rf-detail.empty{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-dim);font-size:15px}
.rf-detail .d-stage{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mid)}
.rf-detail .d-name{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.02em;margin:6px 0 0;text-wrap:balance}
.rf-detail .d-new{display:inline-block;margin:12px 0 0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#1e8e5a;background:rgba(30,142,90,.1);padding:4px 10px;border-radius:6px}
.rf-detail .d-sec{margin-top:18px}
.rf-detail .d-sec .h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:0 0 6px}
.rf-detail .d-sec p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text)}
.rf-detail .d-do{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.rf-detail .d-do .h{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#1e8e5a;margin:0 0 9px}
.rf-detail .d-do .h .ck{flex:none;width:16px;height:16px;border-radius:50%;background:#1e8e5a;display:inline-flex;align-items:center;justify-content:center}
.rf-detail .d-do .h .ck svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.rf-detail .d-do .do-text{margin:0;font-size:15.5px;line-height:1.6;color:var(--text)}
.rf-fade{animation:rf-fade .22s ease}
@keyframes rf-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.rf-cta{margin-top:30px;background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:24px 26px;text-align:center}
.rf-cta p{margin:0 auto 16px;font-size:15.5px;color:var(--text-mid);max-width:52ch;line-height:1.55}
.rf-cta p b{color:var(--text);font-weight:600}

.rf-foot{margin-top:30px;border-top:1px solid var(--line);padding-top:18px;font-size:12.5px;line-height:1.65;color:var(--text-dim)}
.rf-foot b{color:var(--text-mid);font-weight:600}
.rf-foot a{color:var(--text-mid);text-decoration:underline;text-underline-offset:2px}
.rf-foot .cite{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin-top:8px}

/* Static, crawlable "14 factors at a glance" — the page's single source of truth,
   progressively enhanced into the interactive board above. */
.rf-glance{margin-top:42px;border-top:1px solid var(--line);padding-top:32px}
.rf-glance-h{font-family:var(--font-display);font-size:clamp(21px,3vw,27px);font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.rf-glance-sub{font-size:14.5px;line-height:1.6;color:var(--text-mid);max-width:60ch;margin:0}
.rf-gl-stage{margin-top:28px}
.rf-gl-stageh{display:flex;align-items:baseline;gap:10px;margin:0 0 2px;font-weight:400}
.rf-gl-stageh .lbl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);font-weight:600}
.rf-gl-stageh .age{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);letter-spacing:.04em}
.rf-item{padding:18px 0;border-top:1px solid var(--line)}
.rf-gl-stage .rf-item:first-of-type{border-top:none}
.ri-name{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text)}
.ri-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;color:#1e8e5a;background:rgba(30,142,90,.1);padding:2px 8px;border-radius:5px}
.ri-link,.ri-act{margin:0;font-size:14.5px;line-height:1.62;color:var(--text)}
.ri-act{margin-top:9px}
.ri-lbl{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:0 0 4px}
.ri-lbl-do{color:#1e8e5a}

@media (prefers-reduced-motion:reduce){.rf-fade{animation:none}}
@media (max-width:520px){.rf-grid{grid-template-columns:1fr 1fr}.rf-detail{padding:22px 20px}.rf-wrap{padding:96px 18px 64px}}