/* ---------- the worked example ---------- */
.dedemo{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,44px);
  align-items:center;padding:clamp(20px,3vw,32px);border-radius:22px}
@media(max-width:760px){.dedemo{grid-template-columns:1fr}}
.dedemo-cards{display:flex;align-items:center;gap:14px}
.dedemo-cards .card{width:clamp(88px,11vw,124px);flex:none}
.deq{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold-light);flex:none}
.dedemo-txt .rn{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:8px}
.dedemo-txt h3{font-size:23px;margin-bottom:7px}
.dedemo-txt p{font-size:14.5px;color:var(--tx-2);max-width:52ch}

/* ---------- filter row ---------- */
.u-center-chips{justify-content:center;margin:26px 0 4px}

/* ---------- the twelve ---------- */
.delist{display:grid;gap:14px;margin-top:22px}
.derow{display:grid;grid-template-columns:clamp(150px,17vw,196px) 1fr;
  gap:clamp(18px,2.6vw,32px);padding:20px 22px;border-radius:20px;
  border-left:3px solid var(--line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
@media(max-width:720px){.derow{grid-template-columns:1fr}}
.derow:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.derow.w-severe{border-left-color:var(--flag-bad-brd)}

.depair-cards{display:flex;gap:8px}
.depair-cards .card{width:calc(50% - 4px)}
.depair-num{margin-top:11px;text-align:center;cursor:pointer;
  font-family:'Cormorant Garamond',serif;font-size:19px;letter-spacing:.14em;
  color:var(--tx-hi);padding:7px 10px;border-radius:12px;
  border:1px solid var(--line-2);transition:.3s var(--ease)}
.depair-num:hover{background:var(--glass-2);border-color:var(--line)}

.dehead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  flex-wrap:wrap;margin-bottom:11px}
.dehead b{display:block;font-size:16px;font-weight:600;color:var(--tx-hi)}
.dehead em{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13.5px;color:var(--tx-3);margin-top:2px}
.debody h3{font-size:19px;margin-bottom:5px}
.debody p{font-size:14.5px;color:var(--tx-2);line-height:1.68}
.debody .depending{color:var(--tx-3)}
.debody .depending b{color:var(--tx-2)}

.delines{display:grid;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line-2)}
@media(min-width:1040px){.delines{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}}
.delines span{display:block;font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:3px}
.delines p{font-size:13.5px}
.debody .kw{margin:14px 0 0}

/* ---------- quick reference ---------- */
.detable-wrap{overflow-x:auto;margin-top:8px}
.detable-wrap .tbl{min-width:720px}
.detable-wrap .pill{justify-self:auto;display:inline-block}