/* A quiet reading area beside a gold silk selector. */
.capability-page{padding-bottom:28px}
.capability-page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:11px}
.capability-page-heading h1{font:600 .75rem/1.4 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.capability-page-heading>a{font-size:.8125rem;text-decoration:none}
.capability-page-heading>a:hover{text-decoration:underline}
.capability-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"reading selection";align-items:stretch;border:1px solid var(--line);border-radius:12px;background:#fff6}
.capability-reading{grid-area:reading}
.capability-selection{grid-area:selection}
.capability-reading{padding:22px 24px;min-width:0;min-height:520px;border-radius:12px 0 0 12px;background:linear-gradient(#fffdf8d9,#fffdf8d9),url("/assets/champagne-silk.webp") center/cover}
.capability-panel{scroll-margin-top:24px}
.capability-panel+.capability-panel{margin-top:38px}
.capability-enhanced .capability-panel{margin-top:0}
.capability-panel[hidden]{display:none}
.capability-title{display:flex;align-items:start;justify-content:space-between;gap:18px}
.capability-title h2{font-size:1.5rem;line-height:1.18}
.capability-number{font:500 1.8rem/1.15 Georgia,serif;color:var(--gold-text);flex:none}
.capability-rule{height:5px;background:linear-gradient(to right,#b88a35 0%,#dabc79 62%,#d9c7a12b 62%);margin:12px 0}
/* 15px minus 2pt (2.6667px), expressed in rem to respect text settings. */
.capability-panel p{font-size:.770833rem;line-height:1.55}
.capability-panel p+p{margin-top:10px}
.capability-panel .capability-lead{border-left:2px solid var(--gold);padding:10px 12px;background:#dac08736;line-height:1.5;font-weight:500}
.capability-panel .capability-closing{font-weight:500}
.capability-selection{padding:10px 14px 18px;border-left:1px solid #b88a3555;border-radius:0 12px 12px 0;background:linear-gradient(130deg,#ce9b405c,#e6c46b6b),url("/assets/champagne-silk.webp") 75% center/cover}
.capability-selection-inner{position:sticky;top:20px}
.capability-selection-note{font-size:.75rem;line-height:1.5}
.capability-selection-note span{display:block}
.capability-selection .capability-help{margin:4px 0 12px;font-size:.75rem}
.capability-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.capability-tab{display:grid;grid-template-columns:18px minmax(0,1fr);gap:7px;align-content:start;padding:10px;min-height:84px;border:1px solid #ad905349;border-radius:9px;background:#fffdf4b8;text-decoration:none;box-shadow:0 2px 4px #5e401109}
.capability-tab>i{font:normal 1.2rem/1 Georgia,serif;color:#9a6b24}
.capability-tab>span{display:flex;flex-direction:column;gap:4px}
.capability-tab b{font-size:.8125rem;line-height:1.3;font-weight:600}
.capability-tab em{font-size:.75rem;line-height:1.4;font-style:normal;color:var(--muted)}
.capability-tab:hover,.capability-tab[aria-selected="true"]{border-color:#a6782c;background:linear-gradient(145deg,#fff8e8,#edcf90);box-shadow:inset 0 0 0 1px #b7893844,0 3px 8px #8c64221a}
.capability-tab:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.capability-panel:focus-visible{outline:2px solid var(--gold);outline-offset:8px}
@media(max-width:1000px){
 .capability-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
 .capability-reading{padding:20px}
 .capability-selection{padding:10px 14px 16px}
 .capability-tab{grid-template-columns:1fr;gap:5px;padding:10px}
 .capability-tab>i{display:none}
}
@media(max-width:700px){
 .capability-layout{grid-template-columns:1fr;grid-template-areas:"selection" "reading"}
 .capability-selection{grid-area:selection;border-left:0;border-bottom:1px solid #b88a3555;border-radius:12px 12px 0 0;padding:18px}
 .capability-selection-inner{position:static}
 .capability-reading{grid-area:reading;border-radius:0 0 12px 12px;min-height:0;padding:24px 20px}
 .capability-tabs{gap:8px}
 .capability-tab{grid-template-columns:18px minmax(0,1fr);min-height:75px}
 .capability-tab>i{display:block}
 .capability-tab em{display:none}
 .capability-title h2{font-size:1.35rem}
 .capability-number{font-size:1.6rem}
 .capability-panel{scroll-margin-top:20px}
 .capability-panel p{font-size:.770833rem}
}
@media(max-width:360px){
 .capability-tab{grid-template-columns:1fr}
 .capability-tab>i{display:none}
 .capability-reading{padding:20px 16px}
}