/* themes/bootswatch_slate/css/style.css — "Slate" industrial gunmetal.
   Built on the Bootswatch Slate skin (Bootstrap 5.3.7, data-bs-theme=dark).
   Vibe: cool neutral greys, brushed-metal gradients, flat & restrained,
   heavy-machinery / pro-tool feel. No neon, no teal. */

/* ── Section rhythm ─────────────────────────────────────────────── */
.bsw-section,
main > section {
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    scroll-margin-top: 5rem;
}
main > section + section {
    border-top: 1px solid var(--bs-border-color);
}

/* ════════════════════════════════════════════════════════════════════
   Hero — SPLIT WITH INSTRUMENT PANEL
   Left: industrial text column. Right: brushed-metal control panel built
   in CSS (circular gauges w/ ticks + needle, horizontal level bars,
   readout labels). Cool greys, single --bs-primary accent. Stacks on mobile.
   ════════════════════════════════════════════════════════════════════ */
.bsw-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 9vw, 7rem) 0;
    border-bottom: 1px solid var(--bs-border-color);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 28%),
        linear-gradient(90deg,
            var(--bs-body-bg) 0%,
            var(--bs-body-bg) 50%,
            color-mix(in srgb, var(--bs-body-bg) 84%, #000) 100%);
}
/* fine brushed-metal striping under the panel side + accent seam */
.bsw-hero__plate {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.022) 0 1px,
            transparent 1px 3px);
    -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 50%, #000 100%);
}
.bsw-hero .container { position: relative; z-index: 1; }
.bsw-hero__col {
    position: relative;
    padding-right: clamp(0px, 3vw, 2rem);
}
/* vertical accent seam between the two columns (lg only) */
@media (min-width: 992px) {
    .bsw-hero__col::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0; right: -1.5rem;
        width: 2px;
        background: linear-gradient(180deg,
            transparent, var(--bs-primary) 25%, var(--bs-primary) 75%, transparent);
        opacity: 0.55;
    }
}

.bsw-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--bs-body-bg) 70%, #000);
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
}
.bsw-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

.bsw-hero__title {
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
.bsw-hero__lead {
    max-width: 46ch;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: var(--bs-secondary-color);
}
.bsw-hero__cta {
    border-radius: 2px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Hero: brushed-metal instrument panel (decorative) ──────────── */
.bsw-instr {
    position: relative;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--bs-body-bg) 78%, #000),
            color-mix(in srgb, var(--bs-body-bg) 96%, #fff 4%));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 50px rgba(0, 0, 0, 0.45),
        0 18px 40px rgba(0, 0, 0, 0.4);
}
/* faint brushed striping across the panel face */
.bsw-instr::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px);
}
.bsw-instr__rivet {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(255, 255, 255, 0.4), color-mix(in srgb, var(--bs-body-bg) 50%, #000) 70%);
    border: 1px solid rgba(0, 0, 0, 0.55);
}
.bsw-instr__rivet--tl { top: 10px; left: 10px; }
.bsw-instr__rivet--tr { top: 10px; right: 10px; }
.bsw-instr__rivet--bl { bottom: 10px; left: 10px; }
.bsw-instr__rivet--br { bottom: 10px; right: 10px; }

/* dial cluster */
.bsw-instr__dials {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
}

/* circular gauge: recessed bezel + tick ring + needle + center cap */
.bsw-instr__gauge {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background:
        radial-gradient(circle at 50% 38%,
            color-mix(in srgb, var(--bs-body-bg) 92%, #fff 5%),
            color-mix(in srgb, var(--bs-body-bg) 72%, #000) 75%);
    box-shadow:
        inset 0 0 14px rgba(0, 0, 0, 0.65),
        inset 0 2px 3px rgba(255, 255, 255, 0.05);
}
.bsw-instr__gauge--lg { width: clamp(9rem, 14vw, 11rem); }
.bsw-instr__gauge--sm { width: clamp(6rem, 9vw, 7.5rem); }

/* tick marks: radial repeating spokes masked to a thin ring */
.bsw-instr__ticks {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        var(--bs-border-color) 0deg 1.2deg,
        transparent 1.2deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 70%, #000 71% 82%, transparent 83%);
            mask: radial-gradient(circle, transparent 70%, #000 71% 82%, transparent 83%);
    opacity: 0.8;
}
/* needle: rotates by --val (0..100 -> -120deg..+120deg) */
.bsw-instr__needle {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 2px;
    height: 38%;
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(calc((var(--val, 50) / 100 * 240deg) - 120deg));
    background: linear-gradient(180deg,
        var(--bs-primary), color-mix(in srgb, var(--bs-primary) 40%, #000));
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 6px rgba(var(--bs-primary-rgb), 0.55);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.bsw-instr__cap {
    position: absolute;
    left: 50%; top: 50%;
    width: 14%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(255, 255, 255, 0.45),
        color-mix(in srgb, var(--bs-body-bg) 55%, #000) 70%);
    border: 1px solid rgba(0, 0, 0, 0.5);
}
.bsw-instr__readout {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color));
}

/* horizontal level / VU meters */
.bsw-instr__meters {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.bsw-instr__meter {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    align-items: center;
    gap: 0.7rem;
}
.bsw-instr__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.bsw-instr__level {
    position: relative;
    height: 9px;
    border-radius: 1px;
    background:
        repeating-linear-gradient(90deg,
            color-mix(in srgb, var(--bs-body-bg) 55%, #000) 0 4px,
            transparent 4px 6px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.bsw-instr__level::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--lvl, 60%);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bs-primary) 60%, var(--bs-border-color)),
        var(--bs-primary));
    box-shadow: 0 0 8px rgba(var(--bs-primary-rgb), 0.4);
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Section titles ─────────────────────────────────────────────── */
.section-title,
.bsw-section .text-center h2,
main > section h2 {
    letter-spacing: -0.01em;
}
.section-title h2,
main > section > .container > h2:first-child {
    position: relative;
    display: inline-block;
    padding-bottom: 0.6rem;
}
.section-title p { color: var(--bs-secondary-color); }

/* ── Flat industrial cards w/ hover ─────────────────────────────── */
.card {
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 2%);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-border-color));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.card .text-primary { color: var(--bs-primary) !important; }

/* ── Footer ─────────────────────────────────────────────────────── */
.bsw-footer a { text-decoration: none; }
.bsw-footer a:hover { color: var(--bs-primary) !important; }

/* ── Motion / responsive ────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .bsw-hero .d-flex .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .card { transition: none; }
    .card:hover { transform: none; }
    .bsw-instr__needle,
    .bsw-instr__level::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Phase 3 — bespoke home sections (projects / team / testimonials / faq)
   Flat brushed-metal panels, single restrained accent, dark-bg safe.
   ════════════════════════════════════════════════════════════════════ */

/* ── Section slabs: alternate subtle plate tint for rhythm ──────────── */
.bsw-slab {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 40%),
        color-mix(in srgb, var(--bs-body-bg) 97%, #000);
}
main > section.bsw-slab:nth-of-type(even) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 40%),
        color-mix(in srgb, var(--bs-body-bg) 92%, #000);
}

/* ── Shared section heading ─────────────────────────────────────────── */
.bsw-head {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.bsw-head h2 {
    position: relative;
    display: inline-block;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
.bsw-head h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--bs-primary), transparent);
}
.bsw-head p {
    margin: 0;
    color: var(--bs-secondary-color);
}

/* ── Flat metallic panel (cards / figures / members) ────────────────── */
.bsw-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--bs-body-bg) 80%, #000),
            color-mix(in srgb, var(--bs-body-bg) 96%, #fff 3%));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* thin accent rail along the top edge, revealed on hover */
.bsw-panel::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-primary), transparent 70%);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.bsw-panel:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bs-primary) 50%, var(--bs-border-color));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.bsw-panel:hover::before { opacity: 0.9; }

.bsw-panel__body { padding: 1.25rem; }
.bsw-panel--center .bsw-panel__body { padding-top: 1rem; }

.bsw-panel__media {
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-body-bg) 70%, #000);
}
.bsw-panel__media img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.02);
}
.bsw-panel__media--portrait img { height: 240px; }
.bsw-panel__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color));
    font-size: 2.75rem;
    background:
        radial-gradient(circle at 50% 40%,
            color-mix(in srgb, var(--bs-primary) 14%, transparent),
            transparent 60%),
        color-mix(in srgb, var(--bs-body-bg) 70%, #000);
}

.bsw-panel__title {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
.bsw-panel__text {
    margin: 0;
    color: var(--bs-secondary-color);
    line-height: 1.55;
}

/* ── Meta line / chip ───────────────────────────────────────────────── */
.bsw-meta {
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
}
.bsw-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--bs-body-bg) 70%, #000);
}
.bsw-chip--accent {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-border-color));
    background: rgba(var(--bs-primary-rgb), 0.12);
}

/* ── Inline accent link ─────────────────────────────────────────────── */
.bsw-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--bs-primary);
}
.bsw-link i { transition: transform 0.18s ease; }
.bsw-link:hover { color: color-mix(in srgb, var(--bs-primary) 80%, #fff); }
.bsw-link:hover i { transform: translateX(3px); }

/* ── Buttons (flat corners) ─────────────────────────────────────────── */
.bsw-btn {
    border-radius: 2px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Team socials ───────────────────────────────────────────────────── */
.bsw-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 0.15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.bsw-social a:hover {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-border-color));
    background: rgba(var(--bs-primary-rgb), 0.1);
}

/* ── Testimonials ───────────────────────────────────────────────────── */
.bsw-quote__body { padding: 1.5rem; margin: 0; }
.bsw-quote__mark {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 2.25rem;
    line-height: 1;
    color: color-mix(in srgb, var(--bs-primary) 80%, var(--bs-border-color));
}
.bsw-quote__text {
    color: var(--bs-body-color);
    line-height: 1.6;
}
.bsw-quote__by { margin-top: 0.5rem; }
.bsw-quote__avatar {
    width: 56px;
    height: 56px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    filter: saturate(0.9);
}
.bsw-quote__name { color: var(--bs-emphasis-color, var(--bs-body-color)); }

/* ── FAQ accordion: flat machined panels ────────────────────────────── */
.bsw-accordion .bsw-accordion__item {
    margin-bottom: 0.6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 1%);
}
.bsw-accordion .bsw-accordion__btn {
    font-weight: 600;
    color: var(--bs-emphasis-color, var(--bs-body-color));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bs-body-bg) 94%, #fff 3%),
        color-mix(in srgb, var(--bs-body-bg) 84%, #000));
    box-shadow: none;
}
.bsw-accordion .bsw-accordion__btn:not(.collapsed) {
    color: var(--bs-primary);
    background: linear-gradient(180deg,
        rgba(var(--bs-primary-rgb), 0.1),
        color-mix(in srgb, var(--bs-body-bg) 86%, #000));
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}
.bsw-accordion .bsw-accordion__btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.3);
}
.bsw-accordion .bsw-accordion__body {
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--bs-body-bg) 92%, #000);
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════
   Phase 5 — bespoke home sections (about / skills / stats / resume / services)
   Same flat brushed-metal panels + single restrained accent, dark-bg safe.
   ════════════════════════════════════════════════════════════════════ */

/* ── About: framed metallic figure + facts list ─────────────────────── */
.bsw-about__figure .bsw-panel__media { border-bottom: 0; }
.bsw-about__facts li { color: var(--bs-secondary-color); }
.bsw-about__facts strong { color: var(--bs-emphasis-color, var(--bs-body-color)); }
.bsw-about__facts a { color: var(--bs-primary); text-decoration: none; }
.bsw-about__facts a:hover { color: color-mix(in srgb, var(--bs-primary) 80%, #fff); }

/* ── Skills: machined gauge tracks ──────────────────────────────────── */
.bsw-skills__track {
    height: 6px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--bs-body-bg) 60%, #000);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.bsw-skills__bar {
    border-radius: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bs-primary) 70%, var(--bs-border-color)),
        var(--bs-primary));
}

/* ── Stats: instrument readouts ─────────────────────────────────────── */
.bsw-stat__value {
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}
.bsw-stat__unit {
    font-size: 0.5em;
    font-weight: 700;
    margin-left: 0.1em;
    color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color));
}

/* ── Resume: riveted timeline rail ──────────────────────────────────── */
.bsw-timeline {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid var(--bs-border-color);
}
.bsw-timeline__item { position: relative; margin-bottom: 1.5rem; }
.bsw-timeline__item:last-child { margin-bottom: 0; }
.bsw-timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 5px);
    top: 0.35rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 22%, transparent);
}

/* ── Services: accent icon plate ────────────────────────────────────── */
.bsw-service__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    border-radius: 4px;
    background: rgba(var(--bs-primary-rgb), 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bsw-service__link {
    color: var(--bs-emphasis-color, var(--bs-body-color));
    text-decoration: none;
    transition: color 0.18s ease;
}
.bsw-service__link:hover { color: var(--bs-primary); }

/* ════════════════════════════════════════════════════════════════════
   Phase 5 — list sections (publications / events / resources / blog)
   Reuses .bsw-panel / .bsw-head / .bsw-chip / .bsw-link / .bsw-meta.
   Extra bits below: academic publication rows + event date readout.
   ════════════════════════════════════════════════════════════════════ */

/* ── Publications: machined citation rows (not cards) ───────────────── */
.bsw-pub { border-top: 1px solid var(--bs-border-color); }
.bsw-pub__item {
    position: relative;
    padding: 1.1rem 0 1.1rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background 0.18s ease;
}
/* thin accent rail on the left, revealed on hover/focus-within */
.bsw-pub__item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--bs-primary), transparent 75%);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.bsw-pub__item:hover,
.bsw-pub__item:focus-within {
    background: rgba(var(--bs-primary-rgb), 0.05);
}
.bsw-pub__item:hover::before,
.bsw-pub__item:focus-within::before { opacity: 0.9; }

.bsw-pub__title { margin: 0; line-height: 1.4; }
.bsw-pub__link {
    font-weight: 700;
    text-decoration: none;
    color: var(--bs-emphasis-color, var(--bs-body-color));
    transition: color 0.18s ease;
}
.bsw-pub__link:hover,
.bsw-pub__link:focus-visible { color: var(--bs-primary); }
.bsw-pub__authors { color: var(--bs-body-color); }
.bsw-pub em { font-style: italic; }

/* outbound link plate */
.bsw-pub__ext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    color: var(--bs-secondary-color);
    text-decoration: none;
    background: color-mix(in srgb, var(--bs-body-bg) 70%, #000);
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.bsw-pub__ext:hover,
.bsw-pub__ext:focus-visible {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-border-color));
    background: rgba(var(--bs-primary-rgb), 0.1);
}

/* ── Events: instrument-style date readout ──────────────────────────── */
.bsw-event__date {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--bs-primary) 80%, var(--bs-body-color));
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bsw-panel,
    .bsw-panel::before,
    .bsw-link i,
    .bsw-social a,
    .bsw-service__link,
    .bsw-pub__item,
    .bsw-pub__item::before,
    .bsw-pub__link,
    .bsw-pub__ext { transition: none; }
    .bsw-panel:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Bespoke list/detail PAGES (blog + project)
   Reuses .bsw-panel / .bsw-head / .bsw-chip / .bsw-link / .bsw-meta /
   .bsw-btn / .bsw-timeline / .bsw-stat. Extras below are page-only bits:
   empty state, pagination, breadcrumb, figures, prose, facts list.
   All built on Bootstrap CSS vars — dark-bg safe.
   ════════════════════════════════════════════════════════════════════ */

/* ── Empty state plate (replaces alert-info, no light bg) ───────────── */
.bsw-empty {
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 4px;
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--bs-body-bg) 80%, #000);
}
.bsw-empty i { color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color)); }

/* ── Pagination: flat machined keys ─────────────────────────────────── */
.bsw-pagination .page-link {
    margin: 0 0.15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    color: var(--bs-body-color);
    background: color-mix(in srgb, var(--bs-body-bg) 80%, #000);
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.bsw-pagination .page-link:hover,
.bsw-pagination .page-link:focus-visible {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-border-color));
    background: rgba(var(--bs-primary-rgb), 0.1);
}
.bsw-pagination .page-item.active .page-link {
    color: #fff;
    border-color: var(--bs-primary);
    background: var(--bs-primary);
}
.bsw-pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.3);
}

/* ── Breadcrumb: muted, accent on hover ─────────────────────────────── */
.bsw-breadcrumb .breadcrumb { margin-bottom: 0; }
.bsw-breadcrumb .breadcrumb-item,
.bsw-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
}
.bsw-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.18s ease;
}
.bsw-breadcrumb .breadcrumb-item a:hover,
.bsw-breadcrumb .breadcrumb-item a:focus-visible { color: var(--bs-primary); }
.bsw-breadcrumb .breadcrumb-item.active { color: var(--bs-emphasis-color, var(--bs-body-color)); }

/* ── Lead-in image: framed metal plate ──────────────────────────────── */
.bsw-figure {
    width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(0, 0, 0, 0.4);
    filter: saturate(0.92) contrast(1.02);
}

/* ── Article / project prose ────────────────────────────────────────── */
.bsw-lead {
    color: var(--bs-body-color);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.6;
}
.bsw-prose { color: var(--bs-body-color); line-height: 1.7; }
.bsw-prose a { color: var(--bs-primary); }
.bsw-prose a:hover { color: color-mix(in srgb, var(--bs-primary) 80%, #fff); }
.bsw-prose h1, .bsw-prose h2, .bsw-prose h3,
.bsw-prose h4, .bsw-prose h5, .bsw-prose h6 {
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
.bsw-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color);
}
.bsw-prose blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1.1rem;
    border-left: 3px solid var(--bs-primary);
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #000);
}
.bsw-prose code {
    color: color-mix(in srgb, var(--bs-primary) 80%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-body-bg) 70%, #000);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
}

/* ── Sidebar facts list ─────────────────────────────────────────────── */
.bsw-facts li { color: var(--bs-secondary-color); }
.bsw-facts strong { color: var(--bs-emphasis-color, var(--bs-body-color)); }

/* gallery figcaption seam */
.figure.bsw-panel .figure-caption {
    border-top: 1px solid var(--bs-border-color);
}

/* ════════════════════════════════════════════════════════════════════
   Phase 7 — content pages
   (events, faq, jobs, publications, resources, services, team + details)
   Reuses .bsw-panel / .bsw-head / .bsw-chip / .bsw-link / .bsw-meta /
   .bsw-btn / .bsw-facts / .bsw-empty / .bsw-pub / .bsw-event__date /
   .bsw-figure / .bsw-prose / .bsw-breadcrumb / .bsw-social / .bsw-accordion.
   Only the genuinely-new bits live below — no duplicated rules.
   All on Bootstrap CSS vars, dark-bg safe, mobile-first.
   ════════════════════════════════════════════════════════════════════ */

/* ── Danger chip (urgent jobs) — warning red on the muted plate ─────── */
.bsw-chip--danger {
    color: var(--bs-danger);
    border-color: color-mix(in srgb, var(--bs-danger) 55%, var(--bs-border-color));
    background: rgba(var(--bs-danger-rgb), 0.13);
}

/* ── Service "what's included" checklist (replaces list-group) ──────── */
.bsw-checklist__item {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}
.bsw-checklist__item:last-child { border-bottom: 0; }
.bsw-checklist__item strong { color: var(--bs-emphasis-color, var(--bs-body-color)); }

/* ── Service-contact form: recessed machined inputs ─────────────────── */
.bsw-form .form-control {
    border-radius: 2px;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-body-bg) 70%, #000);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bsw-form .form-control::placeholder { color: var(--bs-secondary-color); opacity: 1; }
.bsw-form .form-control:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 60%, var(--bs-border-color));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45),
                0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    background: color-mix(in srgb, var(--bs-body-bg) 74%, #000);
}

/* ── Publication list: heading reset so .bsw-pub__link keeps its weight ─ */
.bsw-pub__title { font-weight: 700; }

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bsw-form .form-control { transition: none; }
}


/* ---- Mode nuit : texte muté lisible (audit contraste) ---- */
/* --bs-secondary-color n'est pas adapté au mode nuit -> texte muté sombre sur
   fond sombre. On le passe à un muté-clair lisible (~ratio 6). */
[data-bs-theme="dark"] {
    --bs-secondary-color: rgba(255, 255, 255, .55);
}


/* ---- Mode nuit : accent lisible (audit contraste) ------------------------- */
/* slate (thème sombre mono-mode) : accent natif --bs-primary=#3a3f44 peu contrasté
   sur son fond sombre. On l'éclaircit en préservant la teinte + texte sombre
   sur les fonds .bg-primary. */
[data-bs-theme="dark"] {
    --bs-primary: #9ba2aa;
    --bs-primary-rgb: 155, 162, 169;
}
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .text-bg-primary {
    color: #111111;
}

/* AUDIT AA : pagination active (blanc sur accent clair) -> texte sombre. */
.page-link.active, .active > .page-link { color: #14202e !important; }