/* =========================================================
   OHM Design Tokens — re-skinned to the OHM editorial identity.
   DROP-IN replacement: every token NAME and selector below is preserved
   from the original application.css, so existing templates keep working.
   Only the VALUES change (palette, type, button shape, surfaces).
   New, additive tokens: --surface, --font-serif-text.
   ========================================================= */

:root {
    /* Brand — bordeaux (wine) + gold (brass) */
    --ohm-bordeaux: #7a2433;
    --ohm-bordeaux-ink: #571723;
    --ohm-bordeaux-50: #f6e8e6;
    --ohm-bordeaux-100: #ebd0cf;
    --ohm-gold: #b3853e;
    --ohm-gold-ink: #8a6321;
    --ohm-gold-50: #f6eedb;
    --ohm-gold-100: #ecdcb8;

    /* Warm paper / ink */
    --paper: #f4ede0;
    --paper-2: #ece2d1;
    --paper-3: #e3d7c2;
    --surface: #fbf7ef; /* warm white — card & input surfaces */
    --surface-soft: #f7f0e3;
    --surface-strong: #1f1914;
    --line: #d8cab2;
    --line-strong: #c5b696;
    --ink: #221d18;
    --ink-2: #463d33;
    --ink-3: #5d544a;
    --ink-4: #8a7f70;
    --ink-5: #a89c8a;

    --ok: #34663f;
    --ok-bg: #e4eede;
    --warn: #8a6321;
    --warn-bg: #f4e7cf;
    --danger: #9a3324;
    --danger-bg: #f3ddd6;
    --info: #2b5d72;
    --info-bg: #dde8ec;

    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-serif-text: Georgia, "Times New Roman", Times, serif;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-28: 28px;
    --fs-32: 32px;
    --fs-40: 40px;
    --fs-56: 56px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    --r-1: 2px;
    --r-2: 4px;
    --r-3: 7px;
    --r-4: 8px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px rgba(34, 29, 24, 0.06), 0 1px 3px rgba(34, 29, 24, 0.05);
    --shadow-2: 0 4px 14px rgba(34, 29, 24, 0.08), 0 2px 6px rgba(34, 29, 24, 0.05);
    --shadow-3: 0 18px 50px rgba(34, 29, 24, 0.16), 0 6px 16px rgba(34, 29, 24, 0.08);
    --focus-ring: 0 0 0 3px var(--ohm-bordeaux-50);

    --header-h: 64px;
    --content-max: 1120px;
}

/* =========================================================
   JODIT EDITOR — override hardcoded #fff/#f9f9f9 with design tokens.
   !important required: Jodit CSS loads after this file and uses
   higher-specificity selectors (jodit-container custom element).
   Token re-definitions under [data-theme="dark"] handle dark mode.
   ========================================================= */
.jodit-workplace {
    background-color: var(--paper) !important;
}
.jodit-toolbar__box:not(:empty) {
    background-color: var(--paper-2) !important;
    border-color: var(--line) !important;
}
.jodit-status-bar {
    background-color: var(--paper-2) !important;
    color: var(--ink-4) !important;
    border-top: 1px solid var(--line) !important;
}
.jodit-icon {
    fill: var(--ink-3) !important;
}

[x-cloak] {
    display: none !important;
}

* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-15);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
}
h1 {
    font-size: var(--fs-40);
    line-height: 1.1;
}
h2 {
    font-size: var(--fs-28);
    line-height: 1.15;
}
h3 {
    font-size: var(--fs-20);
    line-height: 1.25;
}
h4 {
    font-size: var(--fs-16);
    line-height: 1.3;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0;
}

a {
    color: var(--ohm-bordeaux);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
button {
    font: inherit;
    cursor: pointer;
}
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

p {
    margin: 0 0 var(--sp-4);
}
ul,
ol {
    padding-left: var(--sp-5);
    margin: 0 0 var(--sp-4);
}
li + li {
    margin-top: var(--sp-2);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ohm-bordeaux);
}
.eyebrow--muted {
    color: var(--ink-4);
}
.eyebrow--gold {
    color: var(--ohm-gold-ink);
}

.display-xl {
    font-family: var(--font-serif);
    font-size: var(--fs-56);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.display-lg {
    font-family: var(--font-serif);
    font-size: var(--fs-40);
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.lead {
    font-family: var(--font-serif-text);
    font-size: var(--fs-18);
    color: var(--ink-2);
}

.surface-soft {
    background: var(--surface-soft);
}

.surface-strong {
    background: var(--surface-strong);
    color: #f6ecdf;
}

.muted {
    color: var(--ink-3);
}
.stack {
    display: flex;
    flex-direction: column;
}
.stack > * + * {
    margin-top: var(--gap, var(--sp-4));
}
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, var(--sp-3));
    row-gap: var(--sp-6);
    margin-bottom: var(--sp-6);
}
.grow {
    flex: 1;
}

/* Wave 1 migration helpers for replacing legacy inline styles */
.u-inline {
    display: inline;
}

.u-inline-mt-2 {
    display: inline;
    margin-top: var(--sp-2);
}

.u-flex-gap-2 {
    display: flex;
    gap: var(--sp-2);
}

.u-flex-gap-3 {
    display: flex;
    gap: var(--sp-3);
}

.u-flex-gap-3-mt-5 {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.u-flex-wrap-gap-2 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.u-grid-2-gap-3-mb-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.u-grid-2-gap-3-mb-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.u-mb-2 {
    margin-bottom: var(--sp-2);
}

.u-mb-3 {
    margin-bottom: var(--sp-3);
}

.u-mb-4 {
    margin-bottom: var(--sp-4);
}

.u-mb-5 {
    margin-bottom: var(--sp-5);
}

.u-mt-2 {
    margin-top: var(--sp-2);
}

.u-mt-3 {
    margin-top: var(--sp-3);
}

.u-mt-4 {
    margin-top: var(--sp-4);
}

.u-mt-5 {
    margin-top: var(--sp-5);
}

.u-mt-8 {
    margin-top: var(--sp-8);
}

.u-card-max-560 {
    max-width: 560px;
}

.u-card-max-640 {
    max-width: 640px;
}

.u-card-body-p0 {
    padding: 0;
}

.u-card-overflow-hidden {
    overflow: hidden;
}

.u-cell-center-p24 {
    text-align: center;
    padding: 24px;
}

.u-cell-center-p6 {
    text-align: center;
    padding: var(--sp-6);
}

.u-ml-10 {
    margin-left: 10px;
}

.u-dialog-panel {
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    max-width: 480px;
    width: 90%;
}

.u-stack-gap-4 {
    --gap: var(--sp-4);
}

.u-stack-gap-14 {
    --gap: 14px;
}

.u-grid-2-gap-12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.u-flex-ai-center-gap-1-fs-14 {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-14);
}

.u-flex-gap-2-ai-center-mb-2 {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    align-items: center;
}

.u-flex-ai-center-gap-2-pt-6 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-top: var(--sp-6);
}

.u-label-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--ink-2);
}

.u-fs-14 {
    font-size: var(--fs-14);
}

.u-fs-13 {
    font-size: var(--fs-13);
}

.u-fs-13-fw-600-mb-2 {
    font-size: var(--fs-13);
    font-weight: 600;
    margin-bottom: var(--sp-2);
}

.u-fieldset-reset-mb-4 {
    border: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
}

.u-fieldset-reset-mb-5 {
    border: none;
    padding: 0;
    margin: 0 0 var(--sp-5);
}

.u-flex-gap-2-ai-end {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-end;
}

.u-field-grow-no-mb {
    flex: 1;
    margin-bottom: 0;
}

.u-flex-col-gap-5 {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.u-flex-2-1-500 {
    flex: 2 1 500px;
}

.u-flex-1-1-350 {
    flex: 1 1 350px;
}

.u-p-4 {
    padding: var(--sp-4);
}

.u-p-5 {
    padding: var(--sp-5);
}

.u-summary-add-field {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-14);
    margin-bottom: var(--sp-4);
}

.u-muted-ink-2 {
    color: var(--ink-2);
}

.events__row--instrument-active {
    background: var(--paper-2);
}

.cms-form__slug-hint--available {
    color: var(--ok);
}

.cms-form__slug-hint--taken {
    color: var(--danger);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 20px;
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: var(--fs-14);
    white-space: nowrap;
    border: 1px solid transparent;
    background: var(--paper-2);
    color: var(--ink);
    transition:
        background 0.12s,
        border-color 0.12s,
        color 0.12s;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover {
    text-decoration: none;
    background: var(--paper-3);
}
.btn--primary {
    background: var(--ohm-bordeaux);
    color: #fbeee0;
    border-color: var(--ohm-bordeaux);
}
.btn--primary:hover {
    background: var(--ohm-bordeaux-ink);
    color: #fff;
}
.btn--ghost {
    background: transparent;
    border-color: var(--line);
}
.btn--ghost:hover {
    background: var(--paper-2);
}
.btn--danger {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--danger);
}
.btn--danger:hover {
    background: var(--danger-bg);
}
.btn--sm {
    height: 30px;
    padding: 0 15px;
    font-size: var(--fs-13);
}
.btn--lg {
    height: 46px;
    padding: 0 22px;
    font-size: var(--fs-15);
}
.btn--auto {
    height: auto;
}
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* <summary> used as a disclosure toggle styled as a button — hide the native marker */
summary.btn {
    list-style: none;
}
summary.btn::-webkit-details-marker {
    display: none;
}

/* Form fields */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.field__label {
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--ink-2);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.field__hint {
    font-size: var(--fs-12);
    color: var(--ink-3);
}
.field__error {
    font-size: var(--fs-12);
    color: var(--danger);
}
.req {
    color: var(--ohm-bordeaux);
    margin-left: 2px;
}

.input,
.select,
.textarea {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--surface);
    font-size: var(--fs-14);
    color: var(--ink);
    width: 100%;
    transition:
        border-color 0.12s,
        box-shadow 0.12s;
}
.textarea {
    height: auto;
    padding: 10px 12px;
    min-height: 88px;
    resize: vertical;
}
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--ohm-bordeaux);
    box-shadow: var(--focus-ring);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--paper-2);
}

/* Wave 12: bulk file-upload dropzone (CAP-002 sheet music import) */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    border: 2px dashed var(--line);
    border-radius: var(--r-4);
    background: var(--paper-2);
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.12s,
        background 0.12s;
}
.dropzone:focus-within,
.dropzone--active {
    border-color: var(--ohm-bordeaux);
    background: var(--ohm-bordeaux-50);
    box-shadow: var(--focus-ring);
}
.dropzone__hint {
    font-size: var(--fs-13);
    color: var(--ink-2);
}
.dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.dropzone__filelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
}
.dropzone__filelist li {
    background: var(--surface-soft);
    border-radius: var(--r-pill);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-13);
}

.checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    font-size: var(--fs-14);
}
.checkbox input {
    margin-top: 3px;
    accent-color: var(--ohm-bordeaux);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Alerts */
.alert {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--r-3);
    font-size: var(--fs-14);
    border: 1px solid;
    align-items: flex-start;
    margin-bottom: var(--sp-4);
}
.alert--info {
    background: var(--info-bg);
    border-color: #bcd3df;
    color: var(--info);
}
.alert--warn {
    background: var(--warn-bg);
    border-color: #e6d09a;
    color: var(--warn);
}
.alert--danger {
    background: var(--danger-bg);
    border-color: #e8b7ac;
    color: var(--danger);
}
.alert--ok,
.alert--success {
    background: var(--ok-bg);
    border-color: #bcd9c9;
    color: var(--ok);
}
.alert__close {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    opacity: 0.6;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
.alert__close:hover {
    opacity: 1;
}

.flash-stack__item {
    margin: var(--sp-3) var(--sp-6) 0;
}

.flash-stack__message {
    flex: 1;
}

.confirm-modal {
    padding: var(--sp-4);
    border: 2px solid var(--danger);
    border-radius: var(--r-3);
    max-width: 400px;
    width: 90%;
}

.confirm-modal__title {
    margin-bottom: var(--sp-2);
}

.confirm-modal__body,
.confirm-modal__field {
    margin-bottom: var(--sp-3);
}

.confirm-modal__actions {
    display: flex;
    gap: var(--sp-3);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.badge--neutral {
    background: var(--paper-3);
    color: var(--ink-2);
}
.badge--ok {
    background: var(--ok-bg);
    color: var(--ok);
}
.badge--warn {
    background: var(--warn-bg);
    color: var(--warn);
}
.badge--danger {
    background: var(--danger-bg);
    color: var(--danger);
}
.badge--info {
    background: var(--info-bg);
    color: var(--info);
}
.badge--gold {
    background: var(--ohm-gold-50);
    color: var(--ohm-gold-ink);
}
.badge--admin {
    background: var(--ohm-bordeaux);
    color: #fff;
}
.badge--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.card--quiet {
    background: var(--paper-2);
}
.card--danger {
    border-color: var(--danger);
}
.card__header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.card__body {
    padding: var(--sp-5);
}
.card__footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--line);
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th,
.table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-14);
    vertical-align: middle;
}
.table th {
    font-size: var(--fs-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    background: var(--paper-2);
}
.table tbody tr:hover {
    background: var(--paper-2);
}
.table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.table__actions {
    text-align: right;
    white-space: nowrap;
}
.table-scroll {
    overflow-x: auto;
}

/* Chrome header */
.appbar {
    height: var(--header-h);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-6);
    gap: var(--sp-6);
    position: sticky;
    top: 0;
    z-index: 20;
}
.site-shell--public .appbar,
.site-shell--member .appbar {
    background:
        radial-gradient(120% 180% at 50% -120%, rgba(122, 36, 51, 0.18) 0%, rgba(122, 36, 51, 0) 60%),
        linear-gradient(180deg, #fbf6ec 0%, var(--surface) 100%);
    border-bottom-color: var(--line-strong);
}
.site-shell--public {
    --header-h: 72px;
}
.appbar--member .appbar__nav-item--active {
    color: #1c1611;
    background: linear-gradient(135deg, #e8c88f 0%, #cfab6e 100%);
}
.appbar--member .appbar__profile-link,
.appbar--member .appbar__profile-link:hover,
.appbar--member .appbar__profile-link:focus-visible {
    border-color: transparent;
}
.appbar--member .appbar__logout-link {
    color: #3f2a18;
    border-color: #d8bea0;
    background: #f3e6d2;
}
.appbar--member .appbar__logout-link:hover,
.appbar--member .appbar__logout-link:focus-visible {
    color: #2f1f12;
    border-color: #c8a982;
    background: #f9efe0;
}
.appbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-serif);
    color: var(--ohm-bordeaux);
    text-decoration: none;
}
.appbar__brand:hover {
    text-decoration: none;
}
.appbar__brand img {
    width: 36px;
    height: 36px;
}
.appbar__brand-text {
    font-size: 14px;
    line-height: 1.1;
    color: var(--ink-2);
}
.appbar__brand-text b {
    font-size: 17px;
    color: var(--ohm-bordeaux);
    display: block;
    letter-spacing: -0.01em;
}
.appbar__brand-tagline {
    font-size: 11px;
    color: var(--ink-4);
}
.appbar__nav {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    margin-left: var(--sp-6);
}
.appbar__spacer {
    flex: 1;
}
.appbar__public-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.appbar__nav-item {
    padding: 8px 12px;
    border-radius: var(--r-2);
    font-size: var(--fs-14);
    color: var(--ink-2);
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}
.appbar__nav-item:hover {
    background: var(--paper-2);
    text-decoration: none;
}
.appbar__theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.appbar__nav-item--active {
    color: var(--ohm-bordeaux);
    background: var(--ohm-bordeaux-50);
    font-weight: 500;
}
.site-shell--public .appbar__nav-item--active {
    box-shadow: inset 0 -2px 0 var(--ohm-gold);
}
.appbar__nav-item--admin::before {
    content: "⚙";
    margin-right: 6px;
    color: var(--ohm-gold-ink);
    font-size: 12px;
}

/* Nav group: disclosure dropdown for top-level items with sub-links */
.appbar__nav-group {
    position: relative;
}
.appbar__nav-group__caret {
    font-size: 10px;
    margin-left: 3px;
    opacity: 0.6;
}
.appbar__nav-dropdown {
    position: absolute;
    left: 0;
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-2);
    min-width: 180px;
    padding: var(--sp-1) 0;
    list-style: none;
    margin: 0;
}
.appbar__nav-dropdown__item {
    display: block;
    padding: 8px 12px;
    font-size: var(--fs-14);
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}
.appbar__nav-dropdown__item:hover,
.appbar__nav-dropdown__item:focus-visible {
    background: var(--paper-2);
    text-decoration: none;
    outline: none;
}

.appbar__user {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-left: var(--sp-4);
    border-left: 1px solid var(--line);
}
.appbar__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.appbar__action-icon {
    line-height: 1;
    font-size: var(--fs-14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.appbar__action-icon-svg {
    width: 16px;
    height: 16px;
    display: block;
}
.appbar__action-label,
.theme-toggle__label {
    white-space: nowrap;
}
.appbar__profile-link {
    gap: var(--sp-2);
    padding: 4px 8px;
    border-radius: var(--r-2);
    background: transparent;
}
.appbar__profile-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-13);
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.appbar__profile-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.appbar__profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 0;
}
.appbar__profile-name {
    font-size: var(--fs-12);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 156px;
}
.appbar__profile-instrument {
    font-size: var(--fs-11);
    color: var(--ink-3);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 156px;
}
.appbar__login-btn {
    min-width: 124px;
}
.site-shell--public .appbar__login-btn {
    min-width: 168px;
}

.appbar__menu {
    display: none;
    background: transparent;
    border: none;
    color: var(--ink-2);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    border-radius: var(--r-2);
}
.appbar__menu:hover {
    background: var(--paper-2);
}

/* Footer */
.footer {
    border-top: 1px solid var(--line);
    padding: var(--sp-6);
    background: var(--paper-2);
    font-size: var(--fs-13);
    color: var(--ink-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: auto;
}
.site-shell--member .footer {
    background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
    border-top: 1px solid var(--line-strong);
    color: var(--ink-2);
}
.site-shell--member .footer__identity-title {
    color: var(--ink);
}
.site-shell--member .footer a {
    color: var(--ink-2);
}
.site-shell--member .footer a:hover {
    color: var(--ink);
}
.site-shell--public .footer {
    background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
    border-top: 2px solid var(--line-strong);
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
}
.footer__inner {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.site-shell--public .footer__inner {
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}
.site-shell--public .footer__identity-title {
    font-size: var(--fs-18);
    color: var(--ohm-bordeaux);
}
.footer__identity {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    color: var(--ink-2);
}
.footer__identity-title {
    font-family: var(--font-serif);
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--ink);
}
.footer__identity span {
    font-size: var(--fs-12);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.footer a {
    color: var(--ink-2);
}
.footer__links {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
    gap: var(--sp-6);
    padding-top: var(--sp-1);
    align-items: start;
}
.footer__policy-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.footer__contact-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.footer__social-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
}
.footer__contact-link--mail {
    width: 100%;
}
.footer__contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    min-width: 0;
}
.footer__contact-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-3);
    color: var(--ohm-bordeaux-ink);
    flex: 0 0 28px;
}
.footer__contact-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.footer__contact-icon--facebook svg {
    width: 14px;
    height: 14px;
}
.footer__contact-icon--instagram svg,
.footer__contact-icon--tiktok svg {
    fill: none;
    stroke: currentColor;
}
.footer__contact-text {
    font-weight: 500;
}
.footer__contact-link:hover .footer__contact-icon,
.footer__contact-link:focus-visible .footer__contact-icon {
    background: var(--ohm-gold-50);
    color: var(--ohm-gold-ink);
}

/* Page layout */
.viewport {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-6);
}
.page--narrow {
    max-width: 640px;
}
.page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.page__title h1 {
    font-size: var(--fs-32);
}
.page__title p {
    margin: 4px 0 0;
    color: var(--ink-3);
    font-size: var(--fs-14);
}
.page__actions {
    display: flex;
    gap: 8px;
}
.page-shell {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-6);
}
.page-shell__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.page-shell__header .titlerow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-4);
}
.page-shell__header .actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.events__table-card {
    overflow: hidden;
}
.events__name {
    font-weight: 600;
    color: var(--ink);
}
.events__actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
}
.events__show-meta {
    font-size: var(--fs-15);
    margin-top: var(--sp-1);
}
.events__show-main {
    flex: 3 1 500px;
}
.events__show-sidebar {
    flex: 1 1 313px;
}
.events__show-prose {
    margin-bottom: var(--sp-6);
}
.events__show-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
}
.events__show-legend {
    font-size: var(--fs-14);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}
.events__show-conditional {
    margin-bottom: var(--sp-4);
}
.events__show-submit {
    width: 100%;
}
.events__show-empty-rsvp {
    font-size: var(--fs-14);
}
.events__show-pupitre {
    margin-bottom: var(--sp-5);
}
.events__show-pupitre-body {
    padding: 0;
    overflow-x: auto;
}
.events__show-filters {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.events__show-kv {
    grid-template-columns: auto 1fr;
    gap: 4px var(--sp-3);
}
.events__show-kv dt,
.events__show-kv dd {
    font-size: var(--fs-12);
}
.events__modal {
    padding: var(--sp-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-3);
    width: 90%;
}
.events__modal--sheet {
    max-width: 560px;
}
.events__modal--admin {
    max-width: 480px;
}
.events__modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
}
.events__modal-section {
    margin-bottom: var(--sp-5);
}
.events__modal-h4 {
    font-size: var(--fs-14);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}
.events__modal-muted {
    font-size: var(--fs-14);
}
.events__modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.events__modal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line);
}
.events__modal-link {
    font-size: var(--fs-14);
}
.events__modal-status {
    font-size: var(--fs-13);
    margin-top: var(--sp-1);
}
.events__modal-results {
    margin-top: var(--sp-1);
    list-style: none;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    overflow: hidden;
}
.events__modal-result-btn {
    width: 100%;
    text-align: left;
    border-radius: 0;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--line);
}
.events__modal-admin-head {
    margin-bottom: var(--sp-4);
}
.events__modal-admin-title {
    margin-bottom: var(--sp-1);
}
.events__modal-actions {
    display: flex;
    gap: var(--sp-3);
}

.musician__section {
    margin-bottom: var(--sp-5);
}
.musician__picture-section {
    margin-bottom: var(--sp-5);
}
.musician__picture-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
    flex-wrap: wrap;
}
.musician__picture-frame {
    object-fit: cover;
    border-radius: var(--r-3);
    border: 1px solid var(--line);
}
.musician__avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: var(--r-3);
    border: 1px solid var(--line);
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.musician__picture-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.musician__picture-field {
    margin-bottom: var(--sp-2);
}
.musician__picture-hint {
    font-weight: 400;
}
.musician__kv-intro {
    margin-bottom: var(--sp-4);
}
.musician__dialog {
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    max-width: 480px;
    width: 90%;
}
.musician__dialog-title {
    font-size: var(--fs-16);
    margin-bottom: var(--sp-4);
}
.musician__field-gap {
    margin-bottom: var(--sp-3);
}
.musician__actions {
    display: flex;
    gap: var(--sp-3);
}
.musician__block {
    margin-bottom: var(--sp-4);
}
.musician__subheading {
    font-size: var(--fs-15);
    margin-bottom: var(--sp-2);
}
.musician__muted-margin {
    margin-bottom: var(--sp-2);
}
.musician__toggle-panel {
    margin-top: var(--sp-2);
}
.musician__inline-form {
    display: inline;
    margin-top: var(--sp-2);
}
.musician__token-input {
    font-size: var(--fs-13);
}
.musician__privacy-top {
    margin-top: var(--sp-5);
}

.musicians-admin__empty-cell {
    text-align: center;
    padding: var(--sp-6);
}

.musicians-admin__form-error {
    margin-bottom: var(--sp-4);
}

.musicians-admin__new-form {
    --gap: var(--sp-5);
    max-width: 480px;
}

.musicians-admin__actions {
    display: flex;
    gap: var(--sp-3);
}

.musician-stats__view-nav {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.musician-stats__card {
    margin-bottom: var(--sp-5);
}

.musician-stats__filters-row {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    align-items: flex-end;
}

.musician-stats__summary {
    display: flex;
    gap: var(--sp-6);
    margin-bottom: var(--sp-4);
}

.musician-stats__summary-label {
    font-size: var(--fs-12);
}

.musician-stats__th-bracket {
    width: 7rem;
}

.musician-stats__th-count {
    width: 4rem;
    text-align: right;
}

.musician-stats__bar-cell {
    vertical-align: middle;
}

.musician-stats__bar {
    background: var(--ohm-bordeaux);
    height: var(--sp-4);
    border-radius: var(--r-2);
}

.musician-stats__count {
    text-align: right;
}

.musician-stats__empty {
    padding: var(--sp-4);
    margin-bottom: 0;
}

.password-strength {
    margin-top: var(--sp-2);
}

.password-strength__meter {
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--line);
    overflow: hidden;
    margin-bottom: var(--sp-1);
}

.password-strength__meter-fill {
    height: 100%;
    border-radius: var(--r-pill);
    transition:
        width 0.2s ease,
        background 0.2s ease;
}

.password-strength__label {
    margin-bottom: 0;
}

.password-strength__warning {
    margin-top: var(--sp-2);
}

.password-strength__warning-text {
    color: var(--danger);
}

.btn:focus-visible,
.appbar__nav-item:focus-visible,
.chip:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ohm-bordeaux);
    outline-offset: 2px;
}
.dashboard__section {
    margin-bottom: var(--sp-6);
}
.dashboard__birthday {
    margin-top: var(--sp-6);
    font-size: var(--fs-14);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
.dashboard__birthday-title {
    margin: 0;
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.35;
}
.dashboard__birthday-meta {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-12);
    color: var(--ink-3);
}
.dashboard__alerts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.dashboard__pending-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
}
.dashboard__inline-actions {
    display: flex;
    gap: var(--sp-2);
}
.dashboard__event-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.dashboard__event-header-main {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
}
.dashboard__event-title {
    font-size: var(--fs-20);
}
.dashboard__event-date {
    font-size: var(--fs-14);
    margin-bottom: 0;
}
.dashboard__event-date--with-description {
    margin-bottom: var(--sp-4);
}
.dashboard__parts {
    margin-top: var(--sp-5);
}
.dashboard__parts-title {
    margin-bottom: var(--sp-2);
}
.dashboard__parts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.dashboard__part-title {
    font-weight: 500;
    margin-bottom: var(--sp-1);
}
.dashboard__part-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-1);
}
.dashboard__rsvp-dialog {
    padding: var(--sp-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-3);
    max-width: 480px;
    width: 90%;
}
.dashboard__rsvp-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-4);
    gap: var(--sp-2);
}
.dashboard__rsvp-dialog-title {
    font-size: var(--fs-18);
}

/* Wave 5 - Internal sheet music catalogue composition */
.sheet-catalogue__filters {
    background: linear-gradient(165deg, #f2e9db 0%, #ece1cf 100%);
    border: 1px solid var(--line-strong);
}

.sheet-catalogue__intro {
    margin-bottom: var(--sp-5);
}

.sheet-catalogue__kicker {
    margin-bottom: var(--sp-2);
}

.sheet-catalogue__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-24);
}

.sheet-catalogue__lead {
    margin-bottom: 0;
}

.sheet-catalogue__summary-card {
    border: 1px solid var(--line-strong);
    background: var(--surface);
}

.sheet-catalogue__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
}

.sheet-catalogue__result-count {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    color: var(--ink-2);
}

.sheet-catalogue__results .table tbody tr:hover {
    background: var(--surface-soft);
}

.sheet-catalogue__title-cell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.sheet-catalogue__mobile-meta {
    margin: 0;
    font-size: var(--fs-12);
    color: var(--ink-4);
    display: none;
}

[data-theme="dark"] .sheet-catalogue__filters {
    background: linear-gradient(180deg, #2a211a 0%, #231b15 100%);
    border-color: #4b3b2f;
}

/* Wave 4 - Public page composition */
.home-hero {
    background: linear-gradient(165deg, var(--paper) 0%, var(--paper-2) 55%, var(--paper-3) 100%);
    border-bottom: 1px solid var(--line);
}

.home-hero__inner {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-12) var(--sp-6) var(--sp-10);
    display: grid;
    gap: var(--sp-8);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}

.home-hero__main {
    max-width: 760px;
}

.home-hero__logo {
    width: 128px;
    height: 128px;
    margin: var(--sp-5) 0 var(--sp-6);
    display: block;
}

.home-hero__main h1 {
    margin-bottom: var(--sp-4);
}

.home-hero__tag {
    margin-bottom: var(--sp-4);
}

.home-hero__body {
    font-size: var(--fs-16);
    color: var(--ink-2);
    margin-bottom: var(--sp-6);
    max-width: 64ch;
}

.home-hero__cta {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.home-hero__spotlight {
    box-shadow: var(--shadow-2);
}

.home-hero__spotlight h2 {
    font-size: var(--fs-24);
    margin-bottom: var(--sp-3);
}

.home-hero__spotlight-lead {
    margin-bottom: var(--sp-4);
    color: var(--ink-2);
}

.home-hero__spotlight-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-2) var(--sp-3);
}

.home-hero__spotlight-list dt {
    font-size: var(--fs-12);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.home-hero__spotlight-list dd {
    margin: 0;
    color: var(--ink-2);
}

.home-highlights {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-6);
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-highlights__item {
    height: 100%;
}

.home-highlights__item h2 {
    font-size: var(--fs-24);
    margin-bottom: var(--sp-3);
}

.content-list {
    display: grid;
    gap: var(--sp-4);
}

.content-list__item {
    box-shadow: var(--shadow-1);
}

.content-list__title {
    font-size: var(--fs-28);
    margin-bottom: var(--sp-2);
}

.content-list__meta {
    margin-bottom: var(--sp-4);
}

.content-list__link {
    font-weight: 600;
}

.content-page {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    align-items: start;
}

.content-page__article {
    min-width: 0;
}

.content-page__prose {
    color: var(--ink-2);
}

.content-page__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
}

.content-page__aside-title {
    font-size: var(--fs-24);
    margin-bottom: var(--sp-3);
}

.content-page__aside-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

/* Login */
.login-shell {
    min-height: calc(100vh - var(--header-h));
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.login-shell__art {
    background: var(--ohm-bordeaux);
    color: #fff;
    padding: var(--sp-12) var(--sp-10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.login-shell__art::before {
    content: "";
    position: absolute;
    inset: -20% -30% auto auto;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(188, 161, 93, 0.22) 0%, transparent 65%);
    pointer-events: none;
}
.login-shell__form {
    padding: var(--sp-12) var(--sp-10);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}
.login-shell__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.1;
}
.login-shell__brand img {
    width: 56px;
    height: 56px;
}
.login-shell__brand-title {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.1;
}
.login-shell__brand-subtitle {
    color: var(--ohm-gold);
}
.login-shell__title {
    font-size: 36px;
    margin-bottom: 8px;
}
.login-shell__eyebrow {
    margin-bottom: var(--sp-2);
}
.login-shell__intro {
    margin-bottom: 32px;
}
.login-shell__form-stack {
    --gap: 20px;
}
.u-stack-gap-5-max-480 {
    --gap: var(--sp-5);
    max-width: 480px;
}
.login-shell__password-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}
.login-shell__password-field {
    flex: 1;
}
.u-text-center {
    text-align: center;
}
.login-shell__password-toggle {
    margin-top: var(--sp-5);
}
.login-shell__submit {
    width: 100%;
}
.login-shell__register-cta {
    font-size: var(--fs-13);
    margin-top: var(--sp-4);
}

.auth-register__title {
    font-size: var(--fs-32);
    margin-bottom: var(--sp-2);
}

.auth-register__intro {
    margin-bottom: var(--sp-6);
}

.auth-register__form,
.auth-register__contact-stack {
    --gap: var(--sp-5);
}

.auth-register__submit {
    width: 100%;
}

.auth-register__login-cta {
    font-size: var(--fs-13);
    margin-top: var(--sp-2);
}

.auth-token__title {
    font-size: var(--fs-32);
    margin-bottom: var(--sp-2);
}

.auth-token__intro {
    margin-bottom: var(--sp-6);
}

.auth-token__intro-wide {
    margin-bottom: var(--sp-8);
}

.auth-token__identity-card {
    margin-bottom: var(--sp-6);
}

.auth-token__identity-name {
    font-weight: 600;
}

.auth-token__identity-line,
.auth-token__invalid-help {
    font-size: var(--fs-14);
}

.auth-token__form {
    --gap: var(--sp-5);
}

.auth-token__submit {
    width: 100%;
}

.auth-token__invalid-title {
    font-size: var(--fs-32);
    margin-bottom: var(--sp-4);
}

.auth-token__invalid-body {
    margin-bottom: var(--sp-6);
}
.login-shell__quote {
    font-family: var(--font-serif);
    font-size: 28px;
    font-style: italic;
    line-height: 1.3;
    margin: 0;
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    padding: 0;
}
.login-shell__quote footer {
    font-size: 14px;
    font-style: normal;
    color: var(--ohm-gold);
    margin-top: 16px;
}
.login-shell__meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
}

/* KV pairs */
.kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px var(--sp-5);
    font-size: var(--fs-14);
}
.kv dt {
    color: var(--ink-3);
}
.kv dd {
    margin: 0;
    color: var(--ink);
}

/* Empty state */
.empty {
    padding: var(--sp-12) var(--sp-6);
    text-align: center;
    color: var(--ink-3);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-4);
    background: var(--paper-2);
}
.empty h3 {
    margin-bottom: 8px;
    color: var(--ink-2);
}

/* Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-13);
    color: var(--ink-3);
}
.breadcrumb a {
    color: var(--ink-3);
}
.breadcrumb__sep {
    color: var(--ink-5);
}

/* Blockquote — content areas and Jodit editor */
blockquote {
    border-left: 3px solid var(--ohm-bordeaux);
    background-color: var(--ohm-bordeaux-50);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-6) 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-18);
    line-height: 1.65;
    color: var(--ink-2);
    border-radius: 0 4px 4px 0;
}
blockquote p {
    margin: 0;
}
blockquote p + p {
    margin-top: var(--sp-3);
}
blockquote footer {
    font-size: var(--fs-14);
    font-style: normal;
    color: var(--ink-4);
    margin-top: var(--sp-3);
}
blockquote cite {
    font-style: italic;
}

/* Privacy / prose */
.prose section + section {
    margin-top: var(--sp-8);
}
.prose h2 {
    margin-bottom: var(--sp-3);
}
.prose p,
.prose ul {
    color: var(--ink-2);
}

.content-post-date {
    margin-bottom: var(--sp-6);
}

/* Event type badges */
.event-type {
    display: inline-block;
    font-size: var(--fs-12);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--r-pill);
}
.event-type--concert {
    background: var(--ohm-bordeaux-50);
    color: var(--ohm-bordeaux-ink);
}
.event-type--rehearsal {
    background: var(--info-bg);
    color: var(--info);
}
.event-type--other {
    background: var(--paper-3);
    color: var(--ink-2);
}

/* RSVP state badges */
.rsvp-state {
    display: inline-block;
    font-size: var(--fs-12);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--r-pill);
}
.rsvp-state--yes {
    background: var(--ok-bg);
    color: var(--ok);
}
.rsvp-state--no {
    background: var(--danger-bg);
    color: var(--danger);
}
.rsvp-state--maybe {
    background: var(--warn-bg);
    color: var(--warn);
}
.rsvp-state--unanswered {
    background: var(--paper-3);
    color: var(--ink-3);
}

/* Filter chips */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    font-size: var(--fs-13);
    cursor: pointer;
    background: var(--paper);
    color: var(--ink-2);
    transition:
        background 0.1s,
        color 0.1s,
        border-color 0.1s;
    user-select: none;
}
.chip[aria-pressed="true"],
.chip.chip--active {
    background: var(--ohm-bordeaux);
    color: #fff;
    border-color: var(--ohm-bordeaux);
}

/* RSVP radio pills */
.radio-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.radio-pill {
    position: relative;
}
.radio-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.radio-pill label {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    font-size: var(--fs-14);
    cursor: pointer;
    background: var(--paper);
    color: var(--ink-2);
    transition:
        background 0.1s,
        color 0.1s,
        border-color 0.1s;
}
.radio-pill input[type="radio"]:checked + label {
    background: var(--ohm-bordeaux);
    color: #fff;
    border-color: var(--ohm-bordeaux);
}
.radio-pill input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--ohm-bordeaux);
    outline-offset: 2px;
}

/* Pupitre table */
.pupitre {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
}
.pupitre th {
    text-align: left;
    padding: 6px 10px;
    font-size: var(--fs-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    border-bottom: 2px solid var(--line);
}
.pupitre td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
}
.pupitre tr:last-child td {
    border-bottom: none;
    font-weight: 600;
}
.pupitre td:not(:first-child),
.pupitre th:not(:first-child) {
    text-align: center;
}
.pupitre tr[data-instrument]:hover {
    cursor: pointer;
    background: var(--paper-2);
}

/* =====================================================
   Member Sidebar — Wave 7
   Fixed dark sidebar for authenticated pages.
   Desktop (≥ 781px): always visible 280px left panel, pushes content.
   Mobile (≤ 780px): off-screen by default, opens as overlay drawer.
   ===================================================== */

/* Mobile: prevent scroll-through when sidebar drawer is open */
.member-sidebar-open {
    overflow: hidden;
}

/* Scrim — full-screen backdrop, mobile only */
.member-sidebar__scrim {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(28, 26, 21, 0.5);
    z-index: 55;
}

/* Panel — off-screen by default (mobile), slides in on open */
.member-sidebar__panel {
    position: fixed;
    left: 0;
    top: var(--header-h);
    bottom: 0;
    width: 280px;
    background: linear-gradient(160deg, #2a221c 0%, #1f1914 65%, #18130f 100%);
    border-right: 1px solid #3d3127;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 56;
    transform: translateX(-100%);
    will-change: transform, box-shadow;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}
.member-sidebar--open .member-sidebar__panel {
    transform: translateX(0);
    box-shadow: var(--shadow-3);
}

/* Brand header */
.member-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
    flex-shrink: 0;
}
.member-sidebar__close {
    background: none;
    border: none;
    color: #f0e3d2;
    font-size: 20px;
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    line-height: 1;
    border-radius: var(--r-2);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.member-sidebar__close:hover {
    background: rgba(235, 205, 154, 0.12);
}
.member-sidebar__close:focus-visible {
    outline: 2px solid #e8c88f;
    outline-offset: 2px;
}

/* Primary nav */
.member-sidebar__section-label {
    display: block;
    padding: 0 var(--sp-5);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}
.member-sidebar__separator {
    margin: var(--sp-5) var(--sp-5) var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.member-sidebar__nav {
    list-style: none;
    margin: var(--sp-2) 0 var(--sp-5);
    padding: 0 var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.member-sidebar__nav--secondary {
    margin-top: var(--sp-2);
}
.member-sidebar__mobile-public {
    display: none;
}
.member-sidebar__admin-group,
.member-sidebar__section-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.member-sidebar__admin-trigger,
.member-sidebar__section-trigger {
    width: 100%;
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    justify-content: flex-start;
}
.member-sidebar__admin-trigger .member-sidebar__item-icon {
    margin-right: 0;
}
.member-sidebar__admin-caret,
.member-sidebar__section-caret {
    margin-left: auto;
    font-size: 11px;
    line-height: 1;
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.member-sidebar__admin-caret--open,
.member-sidebar__section-caret--open {
    transform: rotate(180deg);
    opacity: 1;
}
.member-sidebar__admin-panel,
.member-sidebar__section-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 10px;
    margin-top: 2px;
    list-style: none;
}
.member-sidebar__item--subitem {
    padding-left: calc(var(--sp-4) + 10px);
    font-size: var(--fs-13);
}
.member-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px var(--sp-4);
    border-radius: var(--r-3);
    font-size: var(--fs-14);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    min-height: 44px;
    border-left: 4px solid transparent;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}
.member-sidebar__item:hover,
.member-sidebar__item:focus-visible {
    background: rgba(235, 205, 154, 0.1);
    color: #fff3e2;
    text-decoration: none;
    outline: none;
}
.member-sidebar__item:focus-visible {
    outline: 2px solid #e8c88f;
    outline-offset: -2px;
}
/* Active: Option A — left border + background (spec recommendation) */
.member-sidebar__item--active {
    border-left-color: #e8c88f;
    background: rgba(235, 205, 154, 0.12);
    color: #fff3e2;
    padding-left: 12px; /* visual compensation: 16px − 4px border = 12px */
}
.member-sidebar__item--admin {
    color: rgba(255, 255, 255, 0.5);
}
.member-sidebar__item-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}
.member-sidebar__item-icon-svg {
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
}
.member-sidebar__item--active .member-sidebar__item-icon,
.member-sidebar__item:hover .member-sidebar__item-icon,
.member-sidebar__item:focus-visible .member-sidebar__item-icon {
    opacity: 1;
}

/* Desktop sidebar layout — ≥ 781px */
@media (min-width: 781px) {
    /* Keep header full-width; offset only non-header content for fixed sidebar */
    .member-sidebar-layout > :not(.appbar):not(.member-sidebar) {
        margin-left: 280px;
    }
    /* Always show sidebar panel on desktop, no slide animation */
    .member-sidebar__panel {
        transform: none;
        transition: none;
        z-index: 30;
    }
    /* No scrim or close button on desktop */
    .member-sidebar__scrim {
        display: none !important;
    }
    .member-sidebar__close {
        display: none !important;
    }
    /* Anonymous visitors get no desktop sidebar — public links live in the top nav */
    .member-sidebar--public-only .member-sidebar__panel {
        display: none;
    }
}

/* Responsive */
@media (max-width: 780px) {
    :root {
        --content-max: 100%;
    }
    .appbar {
        padding: 0 var(--sp-4);
        gap: var(--sp-3);
    }
    .appbar__menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .appbar__brand {
        min-width: 0;
        flex: 1;
    }
    .appbar__brand-text {
        min-width: 0;
    }
    .appbar__brand-text b {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .appbar__nav {
        display: none;
    }
    .appbar__user {
        gap: var(--sp-1);
        padding-left: 0;
        border-left: none;
        margin-left: auto;
        flex-shrink: 0;
    }
    .appbar__public-actions {
        margin-left: auto;
    }
    .appbar__brand-tagline {
        display: none;
    }
    .site-shell--member .appbar {
        padding-right: var(--sp-3);
    }
    .site-shell--member .appbar__brand img {
        width: 32px;
        height: 32px;
    }
    .site-shell--member .appbar__brand-text b {
        font-size: var(--fs-16);
    }
    .site-shell--member .appbar__user {
        display: flex;
        margin-left: auto;
        border-left: none;
        padding-left: 0;
    }
    .site-shell--member .appbar__action-btn {
        min-width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
        border-radius: var(--r-pill);
    }
    .site-shell--member .appbar__profile-link {
        border-radius: var(--r-2);
    }
    .site-shell--member .appbar__profile-meta {
        display: none;
    }
    .site-shell--member .appbar__profile-avatar {
        width: 28px;
        height: 28px;
        font-size: var(--fs-12);
    }
    .member-sidebar__panel {
        width: min(320px, calc(100vw - var(--sp-8)));
    }
    .member-sidebar__mobile-public {
        display: block;
    }
    .site-shell--member .appbar__action-label,
    .site-shell--member .theme-toggle__label {
        display: none;
    }
    .site-shell--member .appbar__theme-toggle {
        padding-left: 0;
        padding-right: 0;
        min-width: 44px;
    }
    .site-shell--public .appbar__login-btn {
        min-width: auto;
    }
    .home-hero__inner {
        grid-template-columns: 1fr;
        padding: var(--sp-10) var(--sp-5) var(--sp-8);
    }

    .home-hero__logo {
        width: 96px;
        height: 96px;
    }

    .home-hero__main h1 {
        font-size: 34px;
    }

    .home-highlights {
        grid-template-columns: 1fr;
        padding: var(--sp-8) var(--sp-5);
    }

    .content-page {
        grid-template-columns: 1fr;
    }

    .content-page__aside {
        position: static;
    }

    .page {
        padding: 20px 16px;
    }
    .page__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .page__title h1 {
        font-size: 24px;
    }

    .login-shell {
        grid-template-columns: 1fr;
    }
    .login-shell__art {
        display: none;
    }
    .login-shell__form {
        padding: var(--sp-8) var(--sp-5);
    }

    .footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3);
    }
    .site-shell--public .footer__identity-title {
        font-size: var(--fs-15);
    }
    .footer__links {
        width: 100%;
    }
    .footer__links {
        grid-template-columns: 1fr;
    }
    .footer__contact-col {
        width: 100%;
    }
    .footer__social-row {
        grid-template-columns: 1fr;
    }
    .footer__contact-link--mail {
        width: 100%;
    }

    .kv {
        grid-template-columns: 1fr;
    }
    .sheet-catalogue__summary-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .sheet-catalogue__result-count {
        flex-wrap: wrap;
    }
    .sheet-catalogue__mobile-meta {
        display: block;
    }
    .events__actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .events__modal-actions,
    .musician__actions {
        flex-wrap: wrap;
    }
    .hide-sm {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .appbar {
        padding: 0 var(--sp-3);
        gap: var(--sp-2);
    }
    .appbar__brand img {
        width: 30px;
        height: 30px;
    }
    .appbar__brand-text b {
        font-size: var(--fs-15);
    }
    .site-shell--member .appbar__brand-text {
        max-width: 88px;
    }
    .site-shell--public .appbar__brand-text {
        max-width: 140px;
    }
}

/* =========================================================
   Editorial polish (additive — safe to keep or drop)
   ========================================================= */
::selection {
    background: var(--ohm-bordeaux);
    color: #fbeee0;
}
* {
    scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
*::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: var(--r-pill);
    border: 3px solid var(--paper);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--ink-4);
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   DARK THEME — set data-theme="dark" on <html>.
   Pure token override (every component re-skins automatically),
   plus a few targeted fixes where one token is both fill & text.
   A toggle should default to the OS preference
   (matchMedia('(prefers-color-scheme: dark)')).
   ========================================================= */
[data-theme="dark"] {
    /* Brand — lifted for legibility on dark */
    --ohm-bordeaux: #bb4a5d;
    --ohm-bordeaux-ink: #9a3346; /* darker wine: primary button :hover bg */
    --ohm-bordeaux-50: #3a2127; /* dark wine tint */
    --ohm-bordeaux-100: #4a2a31;
    --ohm-gold: #c7a35c;
    --ohm-gold-ink: #d9be86; /* light gold: badge/eyebrow text */
    --ohm-gold-50: #332a18;
    --ohm-gold-100: #41351f;

    /* Warm charcoal paper / light ink */
    --paper: #17130f;
    --paper-2: #211b16;
    --paper-3: #2b241c;
    --surface: #201a15;
    --surface-soft: #2a231b;
    --surface-strong: #13100d;
    --line: #3a3026;
    --line-strong: #4d4133;
    --ink: #f1e8d9;
    --ink-2: #d9cfbd;
    --ink-3: #b0a692;
    --ink-4: #897f6e;
    --ink-5: #685f51;

    /* Semantic — light fg on deep tints */
    --ok: #6fbf8e;
    --ok-bg: #1c2c22;
    --warn: #d9a64a;
    --warn-bg: #2f2614;
    --danger: #e07a68;
    --danger-bg: #301f1b;
    --info: #79b3cf;
    --info-bg: #1b2930;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(216, 140, 152, 0.22);

    color-scheme: dark;
}

/* Targeted fixes: bordeaux/ink used as TEXT on its own dark tint */
[data-theme="dark"] .event-type--concert {
    color: #e8a7b1;
}
[data-theme="dark"] .appbar__nav-item--active {
    color: #e8a7b1;
}
[data-theme="dark"] .appbar--member .appbar__nav-item--active {
    color: #1c1611;
}
[data-theme="dark"] .appbar__brand,
[data-theme="dark"] .appbar__brand-text b {
    color: #e0909c;
}
[data-theme="dark"] .site-shell--public .appbar,
[data-theme="dark"] .site-shell--member .appbar {
    background:
        radial-gradient(120% 180% at 50% -120%, rgba(199, 163, 92, 0.14) 0%, rgba(199, 163, 92, 0) 56%),
        linear-gradient(180deg, #19130f 0%, #130f0c 100%);
    border-bottom-color: #5a4938;
}
[data-theme="dark"] .site-shell--public .appbar__brand,
[data-theme="dark"] .site-shell--member .appbar__brand,
[data-theme="dark"] .site-shell--public .appbar__brand-text b,
[data-theme="dark"] .site-shell--member .appbar__brand-text b {
    color: #f3b7c2;
}
[data-theme="dark"] .site-shell--public .appbar__brand-text,
[data-theme="dark"] .site-shell--member .appbar__brand-text {
    color: #f7ecdb;
}
[data-theme="dark"] .site-shell--public .appbar__brand-tagline,
[data-theme="dark"] .site-shell--member .appbar__brand-tagline {
    color: #e5d0ad;
}
[data-theme="dark"] .site-shell--public .appbar__nav-item,
[data-theme="dark"] .site-shell--member .appbar__nav-item,
[data-theme="dark"] .site-shell--public .appbar__theme-toggle,
[data-theme="dark"] .site-shell--member .appbar__theme-toggle,
[data-theme="dark"] .site-shell--public .appbar__menu,
[data-theme="dark"] .site-shell--member .appbar__menu,
[data-theme="dark"] .site-shell--public .appbar__user-email {
    color: #f7ecdb;
}
[data-theme="dark"] .site-shell--public .appbar__nav-group__caret,
[data-theme="dark"] .site-shell--member .appbar__nav-group__caret {
    opacity: 0.9;
}
[data-theme="dark"] .site-shell--public .appbar__nav-item:hover,
[data-theme="dark"] .site-shell--public .appbar__nav-item:focus-visible,
[data-theme="dark"] .site-shell--member .appbar__nav-item:hover,
[data-theme="dark"] .site-shell--member .appbar__nav-item:focus-visible {
    background: rgba(199, 163, 92, 0.2);
    color: #fff4e2;
}
[data-theme="dark"] .site-shell--public .appbar__nav-item--active {
    color: #ffdfb3;
    background: #2e241b;
    box-shadow: inset 0 -2px 0 #c7a35c;
}
[data-theme="dark"] .site-shell--public .appbar__menu:hover,
[data-theme="dark"] .site-shell--member .appbar__menu:hover {
    background: rgba(199, 163, 92, 0.2);
}
[data-theme="dark"] .site-shell--public .appbar__nav-dropdown {
    background: #221b15;
    border-color: #5a4938;
}
[data-theme="dark"] .site-shell--public .appbar__nav-dropdown__item {
    color: #f7ecdb;
}
[data-theme="dark"] .site-shell--public .appbar__nav-dropdown__item:hover,
[data-theme="dark"] .site-shell--public .appbar__nav-dropdown__item:focus-visible {
    background: rgba(199, 163, 92, 0.2);
    color: #fff4e2;
}
[data-theme="dark"] .appbar__profile-instrument {
    color: #e5d0ad;
}
[data-theme="dark"] .appbar__profile-avatar {
    background: #2e241b;
    border-color: #6a5542;
    color: #ffdfb3;
}
/* Brighter focus ring on dark */
/* Alert borders: hardcoded light values → deep-tint borders */
[data-theme="dark"] .alert--info {
    border-color: #2e4a59;
}
[data-theme="dark"] .alert--warn {
    border-color: #5a4a26;
}
[data-theme="dark"] .alert--danger {
    border-color: #5a342c;
}
[data-theme="dark"] .alert--ok,
[data-theme="dark"] .alert--success {
    border-color: #2c4536;
}
/* Login art reads better as a deep wine panel than the lifted link/brand wine */
[data-theme="dark"] .login-shell__art {
    background: #7e2a38;
}

/* Filter bar — shared by the admin musician list and the trombinoscope */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: flex-end;
    margin-bottom: var(--sp-5);
}

/* Trombinoscope — member directory grid */
.trombi-empty {
    text-align: center;
    padding: var(--sp-8);
}
.trombi-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--sp-4);
}
.trombi-card__body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    text-align: center;
}
.trombi-card__avatar {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    height: auto;
    margin-inline: auto;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    object-fit: cover;
}
.trombi-card__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2);
}
.trombi-card__identity {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.trombi-card__name {
    font-weight: 600;
    color: var(--ink);
}
.trombi-card__instrument {
    font-size: var(--fs-13);
    color: var(--ink-3);
    font-style: italic;
}