/* ==========================================================================
   CipitElegante: design layer on top of theme.css
   1.  Tokens (also re-skins the CIPIT plugins, which read these variables)
   2.  Base, buttons, section heads, pills
   3.  Top bar, header, mega menu, drawer
   4.  Hero slider
   5.  About + focus areas
   6.  Notices (plugin: notices-board)
   7.  Latest research, resources
   8.  Blog digest
   9.  Events
   10. Newsletter, footer
   11. Responsive
   ========================================================================== */

/* 1. Tokens ================================================================ */

:root {
    --el-brand: #C4161C;
    --el-glide: cubic-bezier(.22, 1, .36, 1);
    --el-brand-dark: #9E0F16;
    --el-ink: #1A1618;
    --el-body: #55504F;
    --el-muted: #6F696C; /* 5:1 on the page colour; the design's #8A8487 is 3.5:1 */
    --el-chip: #F4F1F2;
    --el-ink-soft: #3A3538;
    --el-subtle: #7A7679;
    --el-line-strong: rgba(0, 0, 0, .12);
    --el-line: rgba(0, 0, 0, .09);
    --el-line-soft: rgba(0, 0, 0, .07);
    --el-hair: rgba(0, 0, 0, .06);
    --el-paper: #FBFAFA;
    --el-band: #F7F1F1;       /* pale pink section bands and page headers */
    --el-band-deep: #ECE4E5;
    --el-placeholder: #F3EEEF; /* behind covers and thumbnails while they load */
    --el-placeholder-ink: #A2989B;
    --el-stripe-1: #F1EEEF;   /* striped "no image" placeholders */
    --el-stripe-2: #EBE7E8;
    --el-brand-deep: #7C0E13;
    --el-dark: #2B2527;       /* fixed dark cards (lead blog post) */
    --el-dark-deep: #1A1618;
    --el-dark-soft: #3A3739;  /* PDF reader frame */
    --el-tint: rgba(196, 22, 28, .08);
    --el-shadow: 0 1px 1px rgba(20, 10, 12, .03), 0 2px 6px -2px rgba(20, 10, 12, .06);
    --el-shadow-hover: 0 1px 2px rgba(20, 10, 12, .04), 0 12px 28px -14px rgba(20, 10, 12, .18);
    /* Card hover, the same everywhere (theme and plugin cards): lift, deeper shadow, faint brand
       border, title in brand red. Images inside do not zoom. Unboxed cards lift their image frame. */
    --el-card-lift: translateY(-4px);
    --el-card-line-hover: color-mix(in srgb, var(--el-brand) 28%, transparent);
    --el-font: Arial, sans-serif;
    --el-wrap: 1240px;
    --el-gutter: 34px;

    /* Re-point the shared tokens, so theme.css pages and the plugins pick up the palette. */
    --c-brand: var(--el-brand);
    --c-brand-dark: var(--el-brand-dark);
    --c-brand-tint: #fbeeee;
    --c-ink: var(--el-ink);
    --c-body: var(--el-body);
    --c-muted: #6b6669;
    --c-soft: var(--el-paper);
    --c-line: var(--el-line);
    --font-sans: var(--el-font);
    --font-serif: var(--el-font);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 16px;
    --shadow-sm: var(--el-shadow);
    --shadow-md: var(--el-shadow-hover);
    --shadow-lg: var(--el-shadow-hover);
    --card-shadow: var(--el-shadow);
    --card-hover-shadow: var(--el-shadow-hover);
    --header-h: 104px;
    --container: 1172px; /* content width of .el-wrap (1240px - 2 x 34px), so inner pages line up with the header */
    --gutter: 34px;
}

/* 2. Base ================================================================== */

body.theme-elegante {
    background: var(--el-paper);
    color: var(--el-ink);
    font-family: var(--el-font);
}

.theme-elegante .el-topbar a,
.theme-elegante .el-header a,
.theme-elegante .el-wrap a,
.theme-elegante .el-band a,
.theme-elegante .el-footer a {
    text-decoration: none;
}

.theme-elegante ::selection {
    background: var(--el-brand);
    color: var(--c-on-dark);
}

.el-wrap {
    width: 100%;
    max-width: var(--el-wrap);
    margin: 0 auto;
    padding: 0 var(--el-gutter);
}

.el-section {
    margin-top: 89px;
}

.el-eyebrow {
    margin: 0;
    font: 600 13.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: var(--el-brand);
}

.el-h2 {
    margin: 13px 0 0;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.14;
    letter-spacing: -.024em;
    font-weight: 800;
    color: var(--el-brand);
    text-wrap: balance;
}

.el-h2--ink {
    color: var(--el-ink);
}

.el-lead {
    max-width: 60ch;
    margin: 13px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--el-body);
    text-wrap: pretty;
}

.el-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 21px;
}

.el-section-head--center {
    display: block;
    text-align: center;
}

.el-section-head--center .el-h2 {
    margin-top: 0;
}

.el-section-head--center .el-lead {
    max-width: 68ch;
    margin: 21px auto 0;
}

.el-bar {
    display: block;
    width: 55px;
    height: 3px;
    margin: 13px auto 0;
    border-radius: 2px;
    background: var(--el-brand);
}

.el-section-more {
    margin: 34px 0 0;
    text-align: center;
}

.el-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 24px;
    font: 600 15px/1 var(--el-font);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.el-btn i {
    font-size: 11px;
}

.theme-elegante a.el-btn--primary,
.theme-elegante .el-btn--primary {
    background: var(--el-brand);
    color: var(--c-on-dark);
}

.theme-elegante a.el-btn--primary:hover {
    background: var(--el-brand-dark);
    color: var(--c-on-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(196, 22, 28, .35);
}

.theme-elegante a.el-btn--outline {
    border-color: var(--el-line);
    background: var(--c-paper);
    color: var(--el-ink-soft);
}

.theme-elegante a.el-btn--outline:hover {
    border-color: color-mix(in srgb, var(--el-brand) 45%, transparent);
    color: var(--el-brand);
}

.el-btn--sm {
    height: 44px;
    padding: 0 24px;
    border-radius: 22px;
    font-size: 14.5px;
}

.el-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.el-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--el-line);
    border-radius: 14px;
    background: var(--c-paper);
    font: 600 12.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: var(--el-ink-soft);
}

.el-rule-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 21px;
    font: 600 13.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: var(--el-muted);
}

.el-rule-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--el-line);
}

/* Tab pills (Latest research, Resources) */
.el-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 34px 0 21px;
}

.el-pill {
    height: 40px;
    padding: 0 21px;
    border: 1px solid var(--el-line-strong);
    border-radius: 20px;
    background: var(--c-paper);
    color: var(--el-ink-soft);
    font: 600 13.5px/1 var(--el-font);
    letter-spacing: -.005em;
    box-shadow: 0 1px 2px rgba(20, 10, 12, .05);
    cursor: pointer;
    transition: all .18s ease;
}

.el-pill:hover {
    transform: translateY(-1px);
}

.el-pill.is-active {
    background: var(--el-brand);
    border-color: var(--el-brand);
    color: var(--c-on-dark);
    box-shadow: 0 6px 16px -8px rgba(196, 22, 28, .7);
}

.el-tabpanel[hidden] {
    display: none;
}

/* 3. Top bar, header, mega menu, drawer ==================================== */

.el-topbar {
    background: var(--c-paper);
    border-bottom: 1px solid var(--el-hair);
}

.el-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 21px;
    height: 42px;
}

.theme-elegante .el-topbar__promo {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--el-brand);
}

.el-topbar__promo i {
    margin-right: 7px;
}

.el-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.el-social--small {
    gap: 13px;
}

.el-social--footer {
    gap: 10px;
}

.theme-elegante .el-social--small a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--el-subtle);
    font-size: 13px;
    transition: all .18s ease;
}

.theme-elegante .el-social--small a:hover {
    color: var(--el-brand);
    background: var(--el-tint);
}

.theme-elegante .el-social--footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-on-dark) 14%, transparent);
    color: var(--c-on-dark);
    font-size: 15px;
    transition: background .18s ease, transform .18s ease;
}

.theme-elegante .el-social--footer a:hover {
    background: color-mix(in srgb, var(--c-on-dark) 28%, transparent);
    transform: translateY(-2px);
}

.el-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--c-paper) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--el-line-soft);
    box-shadow: 0 1px 0 rgba(20, 10, 12, .03);
}

.admin-bar .el-header {
    top: 32px;
}

.el-header__bar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-end;
    column-gap: 21px;
    min-height: 104px;
}

.el-brand {
    display: flex;
    align-items: center;
    align-self: center;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
}

.el-brand__logo {
    display: block;
    height: 58px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.el-nav {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 0 1 auto;
    min-width: 0;
}

.el-nav__list {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.el-nav__list > li {
    display: flex;
}

.theme-elegante .el-nav__link {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 11px 18px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--el-ink-soft);
    transition: color .16s ease;
}

.theme-elegante .el-nav__link:hover,
.theme-elegante .el-nav__link.is-current {
    color: var(--el-ink);
}

.el-nav__label-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

/* One disc for the whole nav. elegante.js sets --dx/--dy to the open item's label centre, so moving
   between items jumps it straight there instead of shrinking one disc and growing another. */
.el-nav__disc {
    --dx: 0px;
    --dy: 0px;
    position: absolute;
    left: 0;
    top: 0;
    width: 112px;
    height: 112px;
    margin: -56px 0 0 -56px;
    border-radius: 50%;
    background: var(--el-brand);
    box-shadow: 0 0 0 7px var(--c-paper);
    translate: var(--dx) var(--dy);
    scale: 0;
    transition: scale .2s cubic-bezier(.34, 1.28, .64, 1), box-shadow .14s ease;
    pointer-events: none;
}

.el-nav__disc.is-on {
    scale: 1;
    box-shadow: 0 0 0 7px transparent;
}

.el-nav__ghost {
    white-space: nowrap;
    visibility: hidden;
}

.el-nav__label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.22;
    white-space: nowrap;
}

.el-nav__cur {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: var(--el-brand);
    transform: translateX(-50%) scaleX(0);
    transition: transform .28s cubic-bezier(.34, 1.28, .64, 1);
}

.el-nav__link.is-current .el-nav__cur {
    transform: translateX(-50%) scaleX(1);
}

.theme-elegante .el-nav__link.is-open {
    color: var(--c-on-dark);
}

.el-nav__link.is-open .el-nav__label {
    width: 88px;
    white-space: normal;
}

.el-nav__link.is-open .el-nav__cur {
    transform: translateX(-50%) scaleX(0);
}

.el-search {
    display: flex;
    align-items: center;
    align-self: center; /* centred in the bar like the logo; it rises there from the nav line */
    gap: 8px;
    flex: 1 1 200px;
    min-width: 0;
    height: 44px;
    padding: 0 4px 0 16px;
    border: 1px solid var(--el-line-strong);
    border-radius: 22px;
    background: var(--el-chip);
    transition: background .2s ease;
}

.el-search[hidden] {
    display: none;
}

/* The field grows leftwards out of the search button and folds back into it on close
   (elegante.js adds .is-closing, then hides it). The nav fades back in once it has gone.
   The closed button sits on the nav labels' line, 36px above the bar's bottom; the open field
   and its close button sit at the bar's centre, so both rise --el-search-rise while opening. */
.el-header {
    --el-search-rise: calc(var(--el-bar-h, 104px) / 2 - 36px);
}

.el-search:not([hidden]) {
    animation: el-search-in .42s var(--el-glide) both;
}

.el-search > * {
    animation: el-search-content .32s var(--el-glide) .1s both;
}

.el-search.is-closing {
    animation: el-search-out .22s cubic-bezier(.4, 0, .6, 1) both;
}

.el-search.is-closing > * {
    animation: el-search-content-out .12s ease both;
}

.el-header.is-unsearching .el-nav {
    animation: el-search-content .34s var(--el-glide) both;
}

@keyframes el-search-in {
    from {
        clip-path: inset(0 0 0 calc(100% - 44px) round 22px);
        opacity: 0;
        translate: 0 var(--el-search-rise);
    }
    to {
        clip-path: inset(0 0 0 0 round 22px);
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes el-search-out {
    from {
        clip-path: inset(0 0 0 0 round 22px);
        opacity: 1;
        translate: 0 0;
    }
    to {
        clip-path: inset(0 0 0 calc(100% - 44px) round 22px);
        opacity: 0;
        translate: 0 var(--el-search-rise);
    }
}

.el-iconbtn--search[aria-expanded="true"] {
    translate: 0 calc(var(--el-search-rise) * -1);
}

@keyframes el-search-content {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
}

@keyframes el-search-content-out {
    to {
        opacity: 0;
    }
}

.el-search:focus-within {
    background: var(--c-paper);
}

.el-search__icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: var(--el-muted);
}

.el-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font: 400 15px/1 var(--el-font);
    color: var(--el-ink);
}

.el-search__submit {
    flex-shrink: 0;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 18px;
    background: var(--el-brand);
    color: var(--c-on-dark);
    font: 600 14px/1 var(--el-font);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.el-search__submit:hover {
    background: var(--el-brand-dark);
    transform: translateY(-1px);
}

.el-header.is-searching .el-nav {
    display: none;
}

/* Header icons: inline SVG line icons, stroked in currentColor. Both icons sit stacked in the
   button; opening it spins the icon out and the cross in. */
.el-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.el-iconbtn {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0 0 16px -8px; /* centre on the nav labels, which sit 36px above the bar's bottom */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--el-ink-soft);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease, translate .42s var(--el-glide);
}

.el-iconbtn:active {
    transform: scale(.92);
}

.el-iconbtn:hover,
.el-iconbtn[aria-expanded="true"] {
    background: var(--el-chip);
    color: var(--el-ink);
}

.el-iconbtn:focus-visible {
    outline: 2px solid var(--el-brand);
    outline-offset: 2px;
}

.el-iconbtn .el-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    transition: transform .4s var(--el-glide), opacity .2s ease;
}

.el-iconbtn .el-icon--close {
    opacity: 0;
    transform: rotate(-90deg) scale(.4);
}

.el-iconbtn[aria-expanded="true"] .el-icon {
    opacity: 0;
    transform: rotate(90deg) scale(.4);
}

.el-iconbtn[aria-expanded="true"] .el-icon--close {
    opacity: 1;
    transform: none;
}

.el-iconbtn--drawer {
    display: none;
    margin-left: -13px;
}

/* Mega menu. Three layers make the cutout: a translucent white fill that shows only inside the
   circle, the red panel masked with a circular hole, and the nav disc sitting in that hole.
   elegante.js sets --hx/--hy (disc centre, relative to the panel) and animates --hr (hole radius)
   in step with the disc's scale, so the panel is cut, not just overlapped. */
@property --hr {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

.el-mega-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1;
}

.el-mega {
    --hx: -999px;
    --hy: -999px;
    --hr: 0px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility 0s linear .2s, --hr .2s ease;
}

.el-mega.is-open {
    --hr: 63px;
    visibility: visible;
    opacity: 1;
    transition: opacity .1s ease, visibility 0s linear 0s, --hr .2s cubic-bezier(.34, 1.28, .64, 1);
}

/* Moving between items: the new panel appears at once with the hole already under the new item
   (elegante.js moves the hole and the disc together). The old panel drops out without a fade. */
.el-mega.is-swap {
    transition: none;
}

.el-mega.is-instant {
    transition: none;
}

.el-mega::before,
.el-mega::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.el-mega::before {
    box-shadow: 0 16px 40px -20px rgba(20, 10, 12, .28);
}

.el-mega::after {
    background: color-mix(in srgb, var(--c-paper) 92%, transparent);
    -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), #000 calc(var(--hr) - .5px), transparent calc(var(--hr) + .5px));
    mask-image: radial-gradient(circle at var(--hx) var(--hy), #000 calc(var(--hr) - .5px), transparent calc(var(--hr) + .5px));
}

.el-mega__panel {
    position: relative;
    background:
        radial-gradient(circle 560px at 0% 100%, transparent 0, var(--el-brand) 100%),
        repeating-radial-gradient(circle at 0% 100%, transparent 0 20px, color-mix(in srgb, var(--c-on-dark) 7%, transparent) 20px 21px),
        var(--el-brand);
    -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), transparent calc(var(--hr) - .5px), #000 calc(var(--hr) + .5px));
    mask-image: radial-gradient(circle at var(--hx) var(--hy), transparent calc(var(--hr) - .5px), #000 calc(var(--hr) + .5px));
}

.el-mega__inner {
    display: grid;
    grid-template-columns: 1fr 2.618fr;
    gap: 55px;
    align-items: start;
    padding-top: 55px;
    padding-bottom: 34px;
}

.el-mega--plain .el-mega__inner {
    grid-template-columns: 1fr;
}

.el-mega__intro {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-right: 34px;
    border-right: 1px solid color-mix(in srgb, var(--c-on-dark) 22%, transparent);
}

.el-mega__eyebrow {
    margin: 0;
    font: 600 13.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: color-mix(in srgb, var(--c-on-dark) 72%, transparent);
}

.el-mega__title {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 26px);
    line-height: 1.16;
    letter-spacing: -.022em;
    font-weight: 800;
    color: var(--c-on-dark);
    text-wrap: pretty;
}

.el-mega__blurb {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--c-on-dark) 82%, transparent);
}

.theme-elegante .el-mega__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-on-dark);
}

.el-mega__cta i {
    font-size: 10px;
}

.el-mega__groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}

.el-mega__group {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.el-mega__group-head {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    min-height: 46px;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--c-on-dark) 22%, transparent);
    font: 600 13.5px/1.25 var(--el-font);
    letter-spacing: -.005em;
    color: color-mix(in srgb, var(--c-on-dark) 72%, transparent);
}

.el-mega__group-head i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 17px; /* matches the label's line box (13.5px x 1.25) so both centre on the same line */
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
    color: color-mix(in srgb, var(--c-on-dark) 80%, transparent);
}

.theme-elegante .el-mega__group a {
    display: block;
    margin-left: -11px;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 14.5px;
    line-height: 1.35;
    font-weight: 500;
    color: color-mix(in srgb, var(--c-on-dark) 92%, transparent);
    transition: color .16s ease, background .16s ease;
}

.theme-elegante .el-mega__group a:hover {
    color: var(--c-on-dark);
    background: color-mix(in srgb, var(--c-on-dark) 14%, transparent);
}

/* Drawer (below 900px) */
.el-drawer {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--el-brand);
    box-shadow: 0 16px 40px -20px rgba(20, 10, 12, .28);
}

.el-drawer[hidden] {
    display: none;
}

.el-drawer__inner {
    display: flex;
    flex-direction: column;
    gap: 21px;
    padding: 21px 26px 34px;
}

.el-drawer__section {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-bottom: 21px;
    border-bottom: 1px solid color-mix(in srgb, var(--c-on-dark) 20%, transparent);
}

.theme-elegante .el-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--c-on-dark);
}

.el-drawer__head i {
    font-size: 11px;
    opacity: .7;
}

.theme-elegante .el-drawer__link {
    display: block;
    margin-left: -11px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 14.5px;
    line-height: 1.35;
    font-weight: 500;
    color: color-mix(in srgb, var(--c-on-dark) 90%, transparent);
    transition: background .16s ease;
}

.theme-elegante .el-drawer__link:hover {
    background: color-mix(in srgb, var(--c-on-dark) 14%, transparent);
    color: var(--c-on-dark);
}

/* 4. Hero slider =========================================================== */

.el-hero-wrap {
    margin-top: 34px;
}

.el-hero {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1160 / 500;
    overflow: hidden;
    isolation: isolate;
    border-radius: 16px;
    background: var(--el-brand);
    box-shadow: var(--el-shadow);
    outline: none;
}

.el-hero:focus-visible {
    outline: 2px solid var(--el-ink);
    outline-offset: 3px;
}

.el-hero__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
}

.el-hero__photo.is-active {
    opacity: 1;
}

/* Placeholder under the photos while they load: rings radiating from the red curve, a pulse running outward. */
.el-hero__rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--el-band) 0%, var(--el-band-deep) 100%);
    pointer-events: none;
}

.el-hero__rings circle {
    fill: none;
    stroke: var(--el-brand);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    animation: el-hero-ripple 2.8s ease-in-out infinite;
    animation-delay: calc(var(--n) * 100ms - 2.8s);
}

/* Once the slide on show has its photo, the rings are hidden under it: stop animating them. */
.el-hero.is-ready .el-hero__rings circle {
    animation: none;
}

.el-hero__rings--narrow {
    display: none;
}

@keyframes el-hero-ripple {
    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}

.el-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .6s ease, transform 8s linear;
}

.el-hero__photo.is-loaded img {
    opacity: 1;
}

/* Without scripts nothing marks the photo loaded, so show it straight away. */
@media (scripting: none) {
    .el-hero__photo img {
        opacity: 1;
    }
}

.el-hero__photo.is-active img {
    transform: scale(1);
}

.el-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(90deg, rgba(20, 10, 12, .38) 0%, rgba(20, 10, 12, .12) 55%, rgba(20, 10, 12, .28) 100%);
    transition: opacity .6s ease;
}

.el-hero__photo.is-loaded::after {
    opacity: 1;
}

.el-hero__disc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.el-hero__arc {
    display: none;
}

.el-hero__texts {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
}

.el-hero__text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(11px, 1.8cqw, 21px);
    padding: 0 2cqw 0 4.7cqw;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .6s;
}

.el-hero__text.is-active {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.el-hero__text > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.el-hero__text.is-active > * {
    opacity: 1;
    transform: none;
}

.el-hero__text.is-active > :nth-child(1) { transition-delay: .2s; }
.el-hero__text.is-active > :nth-child(2) { transition-delay: .28s; }
.el-hero__text.is-active > :nth-child(3) { transition-delay: .36s; }

.el-hero__title {
    margin: 0;
    font-size: clamp(22px, 3.25cqw, 38px);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--el-ink);
    text-wrap: balance;
}

.el-hero__blurb {
    max-width: 22cqw;
    margin: 0;
    font-size: clamp(13px, 1.45cqw, 17px);
    line-height: 1.6;
    color: var(--c-on-dark);
    text-wrap: pretty;
}

.theme-elegante a.el-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 8px 0 24px;
    border-radius: 24px;
    background: var(--el-ink);
    color: var(--c-on-dark);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.005em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.theme-elegante a.el-hero__cta:hover {
    background: var(--c-contrast);
    color: var(--c-on-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .4);
}

.el-hero__cta span[aria-hidden="true"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--el-brand);
    font-size: 11px;
}

.el-hero__dots {
    position: absolute;
    top: 34px;
    right: 34px;
    display: flex;
    align-items: center;
    padding: 4px 4px;
    border-radius: 16px;
}

/* 24px square at least: the smallest comfortable tap target. */
.el-hero__dots button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.el-hero__dots span {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: color-mix(in srgb, var(--c-on-dark) 42%, transparent);
    transition: width .4s cubic-bezier(.2, .7, .2, 1), background .3s ease;
}

.el-hero__dots button[aria-selected="true"] span {
    width: 28px;
    background: var(--c-on-dark);
}

.el-hero__arrows {
    position: absolute;
    right: 2.9cqw;
    bottom: 2.9cqw;
    display: flex;
    align-items: center;
    gap: 10px;
}

.el-hero__arrows button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--c-on-dark) 50%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--c-on-dark);
    font-size: 13px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.el-hero__arrows button:hover {
    background: var(--c-on-dark);
    border-color: var(--c-on-dark);
    color: var(--el-brand);
}

/* 5. About + focus areas =================================================== */

.el-about {
    display: grid;
    grid-template-columns: 1fr 1.618fr;
    gap: 55px;
    align-items: start;
}

.el-about__text {
    position: sticky;
    top: calc(var(--header-h) + 19px);
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.el-about__text .el-h2,
.el-about__text .el-lead {
    margin: 0;
    max-width: none;
}

.el-about .el-lead {
    color: var(--el-body);
}

.el-focus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--el-line);
    box-shadow: var(--el-shadow);
}

.theme-elegante a.el-focus__card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 34px 30px;
    background: var(--c-paper);
    color: var(--el-ink);
    transition: background .22s ease, color .22s ease;
}

.theme-elegante a.el-focus__card:hover {
    background: var(--el-brand);
    color: var(--c-on-dark);
}

.el-focus__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-focus__top i {
    font-size: 17px;
    opacity: .85;
}

.el-focus__num {
    font: 600 13.5px/1.3 var(--el-font);
    opacity: .38;
}

.el-focus__card h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.18;
    letter-spacing: -.018em;
    font-weight: 700;
    color: inherit;
}

.el-focus__card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: inherit;
    opacity: .68;
}

/* 6. Notices (plugin: notices-board) ======================================= */

.el-notices__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 21px;
    align-items: stretch;
    margin-top: 34px;
}

.theme-elegante a.el-notice {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 26px;
    border: 1px solid var(--el-hair);
    border-radius: 16px;
    background: var(--c-paper);
    color: var(--el-ink);
    text-decoration: none; /* also outside .el-wrap (the notices archive) */
    box-shadow: var(--el-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.theme-elegante a.el-notice:hover {
    transform: var(--el-card-lift);
    box-shadow: var(--el-shadow-hover);
    border-color: var(--el-card-line-hover);
}

.el-notice__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
}

.el-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--el-tint);
    color: var(--el-brand);
    font-size: 15px;
}

.el-notice__tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 13px;
    background: var(--el-chip);
    font: 600 12.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: var(--c-muted);
}

.el-notice__title {
    margin: 8px 0 0;
    font-size: 18px;
    line-height: 1.28;
    letter-spacing: -.016em;
    font-weight: 700;
    color: var(--el-ink);
    text-wrap: pretty;
}

.el-notice__body {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--el-body);
}

.el-notice__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--el-brand);
}

.el-notice__cta i {
    font-size: 10px;
}

/* Only one or two notices: they borrow the newsletter box's look (ripples and a pill button)
   instead of plain stretched cards. A single notice keeps its content in the left half with
   the ripples and button at the right end; two share the row and one set of ripples.
   Phones keep the stack. */
.theme-elegante .el-notices__grid--1 a.el-notice {
    background:
        radial-gradient(circle 520px at 100% 50%, transparent 0, var(--c-paper) 100%),
        repeating-radial-gradient(circle at 100% 50%, transparent 0 20px, color-mix(in srgb, var(--el-brand) 8%, transparent) 20px 21px),
        var(--c-paper);
}

/* Two or three notices share one set of rings, rising from the middle of the row's bottom edge
   (below the stack on phones): elegante.js sets the centre (--el-ring-x/y) and reach
   (--el-ring-fade), as for the document cards. Without it each card is ringed from its own bottom centre. */
.theme-elegante .el-notices__grid--2 a.el-notice {
    padding: 30px;
}

.theme-elegante :is(.el-notices__grid--2, .el-notices__grid--3) a.el-notice {
    background:
        radial-gradient(circle var(--el-ring-fade, 340px) at var(--el-ring-x, 50%) var(--el-ring-y, 100%), transparent 0, var(--c-paper) 100%),
        repeating-radial-gradient(circle at var(--el-ring-x, 50%) var(--el-ring-y, 100%), transparent 0 20px, color-mix(in srgb, var(--el-brand) 8%, transparent) 20px 21px),
        var(--c-paper);
}

/* The newsletter's Subscribe button. */
.el-notices__grid--1 .el-notice__cta,
.el-notices__grid--2 .el-notice__cta {
    align-self: flex-start;
    height: 44px;
    margin-top: 8px;
    padding: 0 28px;
    border-radius: 22px;
    background: var(--el-brand);
    color: var(--c-on-dark);
    font-size: 14.5px;
    transition: background .18s ease;
}

.el-notices__grid--2 .el-notice__cta {
    margin-top: auto;
}

.el-notices__grid--2 .el-notice__body {
    margin-bottom: 13px;
}

.theme-elegante .el-notices__grid--1 a.el-notice:hover .el-notice__cta,
.theme-elegante .el-notices__grid--2 a.el-notice:hover .el-notice__cta {
    background: var(--el-brand-dark);
}

@media (min-width: 760px) {
    .el-notices__grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .el-notices__grid--2 .el-notice__title {
        font-size: 21px;
    }

    .el-notices__grid--1 {
        grid-template-columns: 1fr;
    }

    .theme-elegante .el-notices__grid--1 a.el-notice {
        display: grid;
        grid-template-columns: auto minmax(0, 560px) 1fr auto;
        grid-template-areas:
            "icon tag   . cta"
            "icon title . cta"
            "icon date  . cta"
            "icon body  . cta";
        column-gap: 26px;
        row-gap: 0; /* margins below, so the date row takes no room when there is no date */
        align-items: start;
        padding: clamp(34px, 4vw, 48px);
    }

    .el-notices__grid--1 .el-notice__top {
        display: contents;
    }

    .el-notices__grid--1 .el-notice__icon {
        grid-area: icon;
        width: 60px;
        height: 60px;
        font-size: 20px;
    }

    .el-notices__grid--1 .el-notice__tag {
        grid-area: tag;
        justify-self: start;
    }

    .el-notices__grid--1 .el-notice__title {
        grid-area: title;
        margin: 12px 0 0;
        font-size: 24px;
    }

    .theme-elegante .el-notices__grid--1 .el-notice__date {
        grid-area: date;
        margin-top: 6px;
    }

    .el-notices__grid--1 .el-notice__body {
        grid-area: body;
        margin-top: 10px;
    }

    /* At the right end over the ripples, like the newsletter's Subscribe button. */
    .el-notices__grid--1 .el-notice__cta {
        grid-area: cta;
        align-self: center;
        margin: 0;
        white-space: nowrap;
    }
}

/* 7. Latest research, resources ============================================ */

.el-docs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px;
    align-items: stretch;
}

.theme-elegante a.el-doc {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--el-hair);
    border-radius: 16px;
    background: var(--c-paper);
    color: var(--el-ink);
    box-shadow: var(--el-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.theme-elegante a.el-doc:hover {
    transform: var(--el-card-lift);
    box-shadow: var(--el-shadow-hover);
    border-color: var(--el-card-line-hover);
}

.el-doc__cover {
    display: flex;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--c-contrast) 5%, transparent);
    background: var(--el-placeholder);
}

.el-doc__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-doc__cover .cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--el-placeholder-ink);
    font-size: 30px;
}

.el-doc__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

.el-doc__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.el-doc__kind {
    font: 600 12.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: var(--el-brand);
}

.el-doc__title {
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -.012em;
    font-weight: 700;
    color: var(--el-ink);
    text-wrap: pretty;
}

.el-doc__date {
    flex: none;
    font-size: 12.5px;
    color: var(--el-muted);
}

.el-resources {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px;
    align-items: stretch;
}

.theme-elegante a.el-resource {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 24px;
    border: 1px solid var(--el-hair);
    border-radius: 16px;
    background: var(--c-paper);
    color: var(--el-ink);
    box-shadow: var(--el-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.theme-elegante a.el-resource:hover {
    transform: var(--el-card-lift);
    box-shadow: var(--el-shadow-hover);
    border-color: var(--el-card-line-hover);
}

.el-resource__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--el-brand) 7%, transparent);
    color: var(--el-brand);
    font-size: 16px;
}

.el-resource h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.016em;
    font-weight: 700;
    color: var(--el-ink);
    text-wrap: pretty;
}

.el-resource p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 1.6;
    color: var(--el-body);
}

.el-resource__open {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--el-hair);
    font: 600 12.5px/1 var(--el-font);
    color: var(--el-brand);
}

.el-resource__open i {
    font-size: 11px;
}

/* 8. Blog digest =========================================================== */

.el-blog {
    display: grid;
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    gap: 21px;
    align-items: stretch;
    margin-top: 34px;
}

.theme-elegante a.el-blog__lead {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 440px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--el-dark);
    color: var(--c-on-dark);
    box-shadow: var(--el-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.theme-elegante a.el-blog__lead:hover {
    transform: var(--el-card-lift);
    box-shadow: 0 2px 4px rgba(20, 10, 12, .04), 0 24px 48px -24px rgba(20, 10, 12, .4);
    color: var(--c-on-dark);
}

.el-blog__lead-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-blog__lead-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 34px;
    background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--el-dark-deep) 86%, transparent) 38%, var(--el-dark-deep) 100%);
}

.el-blog__topic {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 13px;
    border-radius: 14px;
    background: var(--el-brand);
    font: 600 12.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: var(--c-on-dark);
}

.el-blog__lead-title {
    max-width: 26ch;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.18;
    letter-spacing: -.022em;
    font-weight: 800;
    color: var(--c-on-dark);
    text-wrap: balance;
}

.el-blog__lead-excerpt {
    display: -webkit-box;
    max-width: 58ch;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--c-on-dark) 80%, transparent);
}

.el-blog__lead-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--c-on-dark) 14%, transparent);
    font-size: 13px;
    color: color-mix(in srgb, var(--c-on-dark) 70%, transparent);
}

.el-blog__read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-on-dark);
}

.el-blog__read i {
    font-size: 10px;
}

.el-blog__list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.theme-elegante a.el-blog__item {
    display: grid;
    flex: 1;
    --card-r: 16px;
    --card-pad: 13px;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    padding: var(--card-pad);
    border: 1px solid var(--el-hair);
    border-radius: var(--card-r);
    background: var(--c-paper);
    color: var(--el-ink);
    box-shadow: var(--el-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.theme-elegante a.el-blog__item:hover {
    transform: var(--el-card-lift);
    box-shadow: var(--el-shadow-hover);
    border-color: var(--el-card-line-hover);
}

.el-blog__thumb {
    position: relative;
    display: block;
    min-height: 72px; /* 4:3 at the 96px column; grows with the card so the padding stays even */
    overflow: hidden;
    border-radius: calc((var(--card-r) - var(--card-pad)) * 2); /* twice the concentric radius (outer - padding = 3px), rounder than a strict fit */
    background: var(--el-placeholder);
}

.el-blog__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-blog__item-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    align-self: center;
}

.el-blog__item-topic {
    font: 600 12.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: var(--el-brand);
}

.el-blog__item-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -.01em;
    font-weight: 700;
    color: var(--el-ink);
}

.el-blog__item-meta {
    overflow: hidden;
    font-size: 12.5px;
    color: var(--el-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 9. Events ================================================================ */

.el-band {
    margin-top: 89px;
    padding: 89px 0;
    background:
        radial-gradient(circle 520px at 0% 0%, transparent 0, var(--el-band) 100%),
        repeating-radial-gradient(circle at 0% 0%, transparent 0 20px, color-mix(in srgb, var(--el-brand) 7%, transparent) 20px 21px),
        var(--el-band);
    border-top: 1px solid color-mix(in srgb, var(--el-brand) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--el-brand) 8%, transparent);
}

.el-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    margin-top: 34px;
    overflow: hidden;
    border: 1px solid var(--el-hair);
    border-radius: 16px;
    background: var(--c-paper);
    box-shadow: var(--el-shadow);
}

.el-event__media {
    position: relative;
    min-height: 377px;
    background: var(--el-brand-deep);
}

.el-event__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.el-event__date {
    position: absolute;
    z-index: 1;
    top: 21px;
    left: 21px;
    width: 64px;
    padding: 10px 0;
    border-radius: 12px;
    background: var(--c-paper);
    text-align: center;
    box-shadow: 0 8px 20px -12px rgba(20, 10, 12, .4);
}

.el-event__date span {
    display: block;
    font: 600 12.5px/1.3 var(--el-font);
    letter-spacing: -.005em;
    color: var(--el-brand);
}

.el-event__date strong {
    display: block;
    margin-top: 4px;
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--el-ink);
}

.el-event__date small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--el-muted);
}

.el-event__countdown {
    position: absolute;
    z-index: 1;
    top: 21px;
    right: 21px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--c-paper) 95%, transparent);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--el-ink);
}

.el-event__countdown span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-live);
}

.el-event__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(26px, 4vw, 44px);
}

.el-event__title {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.16;
    letter-spacing: -.022em;
    font-weight: 800;
    color: var(--el-ink);
    text-wrap: balance;
}

.theme-elegante .el-event__title a {
    color: inherit;
}

.el-event__facts {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.el-event__facts li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14.5px;
    color: var(--el-ink-soft);
}

.el-event__facts i {
    width: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--el-brand);
}

.el-event__excerpt {
    max-width: 62ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--el-body);
    text-wrap: pretty;
}

.el-event__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 8px;
}

.el-event-more {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 21px;
    margin-top: 21px;
}

.theme-elegante a.el-event-mini {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 21px 24px;
    border: 1px solid var(--el-hair);
    border-radius: 16px;
    background: var(--c-paper);
    color: var(--el-ink);
    box-shadow: var(--el-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.theme-elegante a.el-event-mini:hover {
    transform: var(--el-card-lift);
    box-shadow: var(--el-shadow-hover);
    border-color: var(--el-card-line-hover);
}

.el-event-mini__date {
    font: 600 12.5px/1.3 var(--el-font);
    color: var(--el-brand);
}

.el-event-mini__title {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -.012em;
    font-weight: 700;
}

.el-event-mini__meta {
    font-size: 13px;
    color: var(--el-muted);
}

/* Home cards: the title turns brand red on hover, as on the inner pages' cards. */
.theme-elegante :is(.el-notice__title, .el-doc__title, .el-resource h3, .el-blog__item-title, .el-event-mini__title) {
    transition: color .2s ease;
}

.theme-elegante :is(a.el-notice:hover .el-notice__title, a.el-doc:hover .el-doc__title, a.el-resource:hover h3,
    a.el-blog__item:hover .el-blog__item-title, a.el-event-mini:hover .el-event-mini__title) {
    color: var(--el-brand);
}

/* 10. Newsletter, footer =================================================== */

.el-newsletter {
    margin-top: 89px;
}

.el-newsletter__card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 34px;
    align-items: center;
    padding: clamp(34px, 5vw, 55px);
    border: 1px solid var(--el-hair);
    border-radius: 16px;
    background:
        radial-gradient(circle 520px at 100% 50%, transparent 0, var(--c-paper) 100%),
        repeating-radial-gradient(circle at 100% 50%, transparent 0 20px, color-mix(in srgb, var(--el-brand) 8%, transparent) 20px 21px),
        var(--c-paper);
    box-shadow: var(--el-shadow);
}

.el-newsletter__card .el-lead {
    max-width: 48ch;
}

.el-newsletter__form {
    display: flex;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--el-hair);
    border-radius: 28px;
    background: var(--el-chip);
}

.el-newsletter__form input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font: 400 15px/1 var(--el-font);
    color: var(--el-ink);
}

.el-newsletter__form button {
    flex-shrink: 0;
    height: 44px;
    padding: 0 28px;
    border: 0;
    border-radius: 22px;
    background: var(--el-brand);
    color: var(--c-on-dark);
    font: 600 14.5px/1 var(--el-font);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.el-newsletter__form button:hover {
    background: var(--el-brand-dark);
    transform: translateY(-1px);
}

.el-footer {
    margin-top: 89px;
    background:
        radial-gradient(circle 640px at 100% 0%, transparent 0, var(--el-brand) 100%),
        repeating-radial-gradient(circle at 100% 0%, transparent 0 20px, color-mix(in srgb, var(--c-on-dark) 8%, transparent) 20px 21px),
        var(--el-brand);
    color: var(--c-on-dark);
}

.el-footer__grid {
    display: grid;
    grid-template-columns: 1.618fr 1fr 1fr 1fr;
    gap: 34px;
    padding-top: 55px;
    padding-bottom: 55px;
}

.el-footer__about {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.el-footer__logo {
    display: block;
    height: 58px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    object-position: left;
}

.el-footer p,
.el-footer address {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    font-style: normal;
    color: color-mix(in srgb, var(--c-on-dark) 85%, transparent);
}

.el-footer__about p {
    max-width: 38ch;
}

.el-footer__heading {
    margin: 0 0 13px;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--c-on-dark);
}

.el-footer__address {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.theme-elegante .el-footer a {
    color: color-mix(in srgb, var(--c-on-dark) 88%, transparent);
    font-size: 13.5px;
    transition: color .16s ease;
}

.theme-elegante .el-footer a:hover {
    color: var(--c-on-dark);
}

.theme-elegante .el-footer a.is-underlined {
    color: var(--c-on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.el-footer__links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.el-footer__bottom {
    padding: 16px var(--el-gutter);
    background: var(--el-ink);
    text-align: center;
}

.el-footer__bottom p {
    font-size: 12.5px;
    color: color-mix(in srgb, var(--c-on-dark) 72%, transparent);
}

.theme-elegante .el-footer__bottom a {
    color: var(--c-on-dark);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 11. Responsive =========================================================== */

@media (max-width: 1179px) {
    .el-docs,
    .el-resources {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 899px) {
    :root {
        --header-h: 84px;
        --el-gutter: 20px;
        --gutter: 20px; /* theme.css .wrap pages, so inner pages share the home margins */
    }

    .el-nav {
        display: none;
    }

    .el-iconbtn--drawer {
        display: flex;
    }

    .el-mega-layer {
        display: none;
    }

    .el-header__bar {
        min-height: 84px;
    }

    .el-iconbtn {
        align-self: center;
        margin-bottom: 0;
    }

    .el-header {
        --el-search-rise: 0px;
    }

    .el-brand__logo {
        height: 48px;
    }

    .el-section,
    .el-band {
        margin-top: 55px;
    }

    .el-band {
        padding: 55px 0;
    }

    .el-about,
    .el-blog,
    .el-event {
        grid-template-columns: minmax(0, 1fr);
    }

    .el-about {
        gap: 34px;
    }

    .el-about__text {
        position: static;
    }

    .el-docs,
    .el-resources {
        grid-template-columns: repeat(2, 1fr);
    }

    .el-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .el-footer__about {
        grid-column: 1 / -1;
    }

    /* Hero: photo on top (66.667cqw tall, the top half of the old 3:4 box), red arc and text below.
       The slide texts share one grid cell in normal flow, so the hero grows to fit the longest
       slide instead of clipping its button on narrow phones. */
    .el-hero {
        aspect-ratio: auto;
    }

    .el-hero__photo {
        inset: 0 0 auto 0;
        height: 66.667cqw;
    }

    .el-hero__rings--wide {
        display: none;
    }

    /* Same vertical scale as .el-hero__arc (54 units = 34px), bottom-aligned with it, so the rings follow its curve. */
    .el-hero__rings--narrow {
        top: auto;
        bottom: calc(100% - 66.667cqw - 1px);
        display: block;
        height: 629.63px;
    }

    .el-hero__disc {
        display: none;
    }

    .el-hero__arc {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(66.667cqw - 33px);
        display: block;
        width: 100%;
        height: 34px;
        pointer-events: none;
    }

    .el-hero__texts {
        position: relative;
        display: grid;
        width: 100%;
        min-height: 66.667cqw;
        margin-top: 66.667cqw;
    }

    .el-hero__text {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        gap: 16px;
        padding: 26px;
    }

    .el-hero__title {
        font-size: 26px;
    }

    .el-hero__blurb {
        max-width: 34ch;
        font-size: 15px;
    }

    .el-hero__dots {
        top: 13px;
        right: 13px;
        background: rgba(20, 10, 12, .35);
    }

    .el-hero__arrows {
        display: none;
    }
}

@media (max-width: 599px) {
    .el-focus {
        grid-template-columns: 1fr;
    }

    .el-docs,
    .el-resources {
        grid-template-columns: 1fr;
    }

    .el-doc__cover {
        aspect-ratio: 4 / 3;
    }

    .theme-elegante .el-topbar__promo {
        overflow: hidden;
        font-size: 12.5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* No room beside the promo; the footer repeats these links. */
    .el-topbar .el-social {
        display: none;
    }

    /* The open search field takes the logo's place so there is room to type. */
    .el-header.is-searching .el-brand {
        display: none;
    }

    .el-header.is-unsearching .el-brand {
        animation: el-search-content .34s var(--el-glide) both;
    }

    .el-footer__grid {
        grid-template-columns: 1fr;
    }

    .theme-elegante .el-footer__links {
        gap: 0;
    }

    .theme-elegante .el-footer__links a {
        display: inline-block;
        padding: 6px 0;
    }

    /* Stacked, the field and button stand on their own rather than inside a grey pill. */
    .el-newsletter__form {
        flex-direction: column;
        padding: 0;
        border: 0;
        background: none;
    }

    /* flex: 1 in a column collapses the field's height. 16px stops iOS zooming on focus. */
    .el-newsletter__form input[type="email"] {
        flex: none;
        height: 48px;
        border: 1px solid var(--el-hair);
        border-radius: 24px;
        background: var(--el-chip);
        font-size: 16px;
    }

    .el-newsletter__form input[type="email"]:focus {
        border-color: color-mix(in srgb, var(--el-brand) 45%, transparent);
    }

    .el-newsletter__form button {
        width: 100%;
        height: 48px;
        border-radius: 24px;
    }

    .el-blog__lead-body {
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --el-card-lift: none;
    }

    .el-hero__photo img,
    .el-hero__photo::after,
    .el-hero__text > *,
    .el-nav__disc,
    .el-mega {
        transition: none;
    }

    .el-hero__rings circle {
        animation: none;
    }

    .el-iconbtn,
    .el-iconbtn .el-icon {
        transition: none;
    }

    .el-search,
    .el-search > *,
    .el-header.is-unsearching .el-nav,
    .el-header.is-unsearching .el-brand {
        animation: none !important;
    }
}