.ddla-clavis-concept {
    --clavis-concept-accent: var(--ddla-clavis-accent, #d8b76a);
    --clavis-concept-sapphire: #73b9e6;
    --clavis-concept-bg: #111820;
    --clavis-concept-panel: rgba(23, 32, 43, .84);
    --clavis-concept-border: rgba(216, 183, 106, .25);
    --clavis-concept-text: #f4f1e8;
    --clavis-concept-muted: rgba(244, 241, 232, .68);
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: clamp(28px, 5vw, 72px) 20px;
    color: var(--clavis-concept-text);
    background:
        radial-gradient(circle at 82% 8%, rgba(47, 111, 255, .12), transparent 28rem),
        linear-gradient(180deg, rgba(8, 12, 18, .98), rgba(14, 20, 28, .98));
}

.ddla-clavis-concept *,
.ddla-clavis-concept *::before,
.ddla-clavis-concept *::after { box-sizing: border-box; }

.ddla-clavis-concept__shell { width: min(1420px, 100%); margin: 0 auto; }
.ddla-clavis-concept__breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; color: var(--clavis-concept-muted); font-size: .82rem; }
.ddla-clavis-concept__breadcrumb a { color: inherit; text-decoration: none; }
.ddla-clavis-concept__breadcrumb a:hover { color: var(--clavis-concept-accent); }

.ddla-clavis-concept__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    gap: 42px;
    align-items: end;
    padding: clamp(28px, 4vw, 58px);
    border: 1px solid var(--clavis-concept-border);
    border-left: 3px solid var(--clavis-concept-accent);
    background: linear-gradient(125deg, rgba(18, 27, 38, .96), rgba(16, 39, 52, .86));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.ddla-clavis-concept__kind { color: var(--clavis-concept-accent); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ddla-clavis-concept__hero h1 { margin: 10px 0 6px; color: var(--clavis-concept-text); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 500; line-height: .98; }
.ddla-clavis-concept__full-name { margin: 0; color: var(--clavis-concept-sapphire); font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
.ddla-clavis-concept__summary { max-width: 850px; margin: 22px 0 0; color: var(--clavis-concept-muted); font-size: 1.06rem; line-height: 1.7; }
.ddla-clavis-concept__aliases > span { color: var(--clavis-concept-muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.ddla-clavis-concept__aliases ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ddla-clavis-concept__aliases li { padding: 7px 10px; color: var(--clavis-concept-text); border: 1px solid var(--clavis-concept-border); background: rgba(255,255,255,.025); }

.ddla-clavis-concept__layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; margin-top: 26px; }
.ddla-clavis-concept__main { display: grid; gap: 26px; }
.ddla-clavis-concept__section, .ddla-clavis-concept__panel { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--clavis-concept-border); background: var(--clavis-concept-panel); }
.ddla-clavis-concept__section h2, .ddla-clavis-concept__panel h2 { margin: 0 0 22px; color: var(--clavis-concept-accent); font-size: 1.1rem; letter-spacing: .05em; }
.ddla-clavis-concept__prose { color: var(--clavis-concept-text); font-size: 1.02rem; line-height: 1.85; }
.ddla-clavis-concept__prose > :first-child { margin-top: 0; }
.ddla-clavis-concept__prose > :last-child { margin-bottom: 0; }
.ddla-clavis-concept__empty { color: var(--clavis-concept-muted); font-style: italic; }
.ddla-clavis-concept__aside { align-self: start; position: sticky; top: 28px; }
.ddla-clavis-concept__panel dl { margin: 0; }
.ddla-clavis-concept__panel dl div { padding: 13px 0; border-bottom: 1px solid rgba(216,183,106,.12); }
.ddla-clavis-concept__panel dt { color: var(--clavis-concept-muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.ddla-clavis-concept__panel dd { margin: 5px 0 0; }
.ddla-clavis-concept__source, .ddla-clavis-concept__back { display: inline-flex; margin-top: 20px; color: var(--clavis-concept-accent); text-decoration: none; }
.ddla-clavis-concept__back { padding: 14px 0; }

.ddla-clavis-relations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ddla-clavis-relations__group { padding: 18px; border: 1px solid rgba(216,183,106,.14); background: rgba(0,0,0,.12); }
.ddla-clavis-relations__group h3 { margin: 0 0 12px; color: var(--clavis-concept-muted); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.ddla-clavis-relations__group ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ddla-clavis-relations__group a { display: grid; color: var(--clavis-concept-text); text-decoration: none; }
.ddla-clavis-relations__group a:hover strong { color: var(--clavis-concept-accent); }
.ddla-clavis-relations__group span { color: var(--clavis-concept-muted); font-size: .85rem; }

.ddla-clavis-reading-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.ddla-clavis-reading-list__item { padding: 20px; border: 1px solid rgba(216,183,106,.14); background: rgba(0,0,0,.12); }
.ddla-clavis-reading-list__role { color: var(--clavis-concept-sapphire); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.ddla-clavis-reading-list__item h3 { margin: 8px 0; font-size: 1rem; }
.ddla-clavis-reading-list__item a { color: var(--clavis-concept-text); text-decoration: none; }
.ddla-clavis-reading-list__item a:hover { color: var(--clavis-concept-accent); }
.ddla-clavis-reading-list__item p { margin: 0; color: var(--clavis-concept-muted); line-height: 1.55; }
.ddla-clavis-occurrences { margin: 0; padding: 0; list-style: none; }
.ddla-clavis-occurrences li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(216,183,106,.12); }
.ddla-clavis-occurrences a { color: var(--clavis-concept-text); text-decoration: none; }
.ddla-clavis-occurrences a:hover { color: var(--clavis-concept-accent); }
.ddla-clavis-occurrences span { color: var(--clavis-concept-muted); font-size: .82rem; white-space: nowrap; }

@media (max-width: 980px) {
    .ddla-clavis-concept__hero, .ddla-clavis-concept__layout { grid-template-columns: 1fr; }
    .ddla-clavis-concept__aside { position: static; }
}
@media (max-width: 680px) {
    .ddla-clavis-concept { padding-inline: 12px; }
    .ddla-clavis-concept__hero { padding: 25px 20px; }
    .ddla-clavis-relations, .ddla-clavis-reading-list { grid-template-columns: 1fr; }
    .ddla-clavis-occurrences li { display: grid; gap: 3px; }
}