/* ============================================================
   style.css
   ------------------------------------------------------------
   Font (@font-face), variabili tipografiche/layout, reset minimale
   e tutto lo stile desktop (header, hero, sezioni, card, footer...).
   I colori arrivano sempre da colors.css (mai valori hardcoded).
   ============================================================ */

/* ----------------------------------------------------------------
   1. Font self-hosted — Cera Pro (sans geometrico, font di brand)
   Ogni peso ha due formati in assets/fonts/: woff2 (moderno, leggero)
   e otf come fallback per browser datati. L'ordine nella src conta:
   il browser usa il primo formato che supporta. Un'unica famiglia per
   tutto: i titoli usano i pesi più alti (700/900).
   ---------------------------------------------------------------- */
@font-face {
    font-family: "Cera Pro";
    src: url("../assets/fonts/cera-light.woff2") format("woff2"),
         url("../assets/fonts/cera-light.otf") format("opentype");
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Cera Pro";
    src: url("../assets/fonts/cera-regular.woff2") format("woff2"),
         url("../assets/fonts/cera-regular.otf") format("opentype");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Cera Pro";
    src: url("../assets/fonts/cera-italic.woff2") format("woff2"),
         url("../assets/fonts/cera-italic.otf") format("opentype");
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "Cera Pro";
    src: url("../assets/fonts/cera-medium.woff2") format("woff2"),
         url("../assets/fonts/cera-medium.otf") format("opentype");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Cera Pro";
    src: url("../assets/fonts/cera-bold.woff2") format("woff2"),
         url("../assets/fonts/cera-bold.otf") format("opentype");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Cera Pro";
    src: url("../assets/fonts/cera-black.woff2") format("woff2"),
         url("../assets/fonts/cera-black.otf") format("opentype");
    font-weight: 900; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------
   2. Variabili tipografiche e di layout
   Cera Pro è l'unica famiglia: --heading e --sans puntano entrambi
   a Cera Pro (la gerarchia si crea con peso e dimensione).
   ---------------------------------------------------------------- */
:root {
    --heading: "Cera Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif:   var(--heading); /* alias retro-compatibile */
    --sans:    "Cera Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --header-height: 76px;
    --container:     1440px;
    --gutter:        24px;
    --radius:        10px;
    --transition:    .25s ease;
}

/* ----------------------------------------------------------------
   3. Reset minimale
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--heading);
    line-height: 1.15;
    margin: 0 0 .5em;
    font-weight: 600;
}
h1 { font-weight: 500; }   /* tutti gli h1 a 500 */

ul { margin: 0; padding: 0; list-style: none; }

p { font-size: 1.1rem; }   /* dimensione base dei paragrafi del sito */

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ----------------------------------------------------------------
   4. Utility di layout
   ---------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: 80px; }
.section--alt { background: var(--bg-alt); }
.section--bg  { background: var(--bg-dark); color: var(--text-invert); }

.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .35em; }
.section-rule {
    width: 64px; height: 3px; border: 0; margin: 16px auto 0;
    background: var(--accent);
}
.section-lead { color: var(--text-muted); font-size: 1.1rem; }

.grid-2 { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--gutter); grid-template-columns: repeat(4, 1fr); }

/* ----------------------------------------------------------------
   5. Bottoni
   ---------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 12px 26px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    background: var(--accent);
    color: var(--text-invert);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: var(--text-invert); }
.btn--dark { background: var(--bg-dark); border-color: var(--bg-dark); color: var(--text-invert); }
.btn--dark:hover { background: #000; border-color: #000; }
.btn--deep { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--text-invert); }
.btn--deep:hover { background: var(--bg-dark); border-color: var(--bg-dark); }
.btn-pill { border-radius: 999px; }

/* ----------------------------------------------------------------
   6. Header / Navbar
   ---------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-height);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, .08); }

.site-header__inner {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between;
}
.site-header__brand {
    display: inline-flex; align-items: center;
    flex: 0 0 auto;
}
.site-header__logo {
    display: block;
    height: 32px; width: auto;
}

/* Cluster nav + CTA spinto a destra */
.main-nav { margin-left: auto; }
.main-nav__list { display: flex; gap: 40px; align-items: center; }
.main-nav__link {
    font-size: .98rem; font-weight: 500;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.main-nav__link:hover,
.main-nav__link.is-active { color: var(--accent); border-color: var(--accent); }

/* La CTA dentro la lista serve solo nel menu mobile: su desktop è nascosta
   (a destra c'è il pulsante .site-header__cta). */
.main-nav__cta { display: none; }
.site-header__cta { margin-left: 40px; flex: 0 0 auto; }

/* Hamburger (nascosto su desktop, mostrato nel responsive) */
.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
    padding: 10px;
}
.nav-toggle__bar {
    display: block; height: 2px; width: 100%;
    background: var(--text); margin: 5px 0;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: var(--overlay);
    z-index: 90;
}
.nav-backdrop.is-open { display: block; }

/* ----------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--bg-alt);
    overflow: hidden;
}
.hero--accent { background: var(--accent); }

/* Due colonne: a sinistra il testo, a destra l'immagine */
.hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    min-height: 60vh;
    padding-block: 72px;
}
.hero__content { max-width: 600px; }

.hero__title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 500; line-height: 1.08; letter-spacing: -.01em;
    margin: 0;
}
.hero__line { display: block; }
.hero__line--dark   { color: var(--text); }
.hero__line--light  { color: var(--text-invert); }
.hero__line--accent { color: var(--accent); }
.hero__accent       { color: var(--accent); }   /* evidenzia inline dentro una riga */

.hero__subtitle { font-size: 1.2rem; color: var(--text-muted); margin: .9em 0 0; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

/* Variante senza immagine: una sola colonna, testo centrato */
.hero--centered .hero__inner   { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--centered .hero__actions { justify-content: center; }

/* Colonna immagine (placeholder finché non c'è l'asset) */
.hero__image { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.hero__placeholder {
    display: grid; place-items: center;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

/* Variante "bleed": immagine scontornata appoggiata al bordo inferiore e
   spinta fino al bordo destro della finestra (fuori dal container).
   max-height + object-fit tengono l'hero basso sui monitor larghi:
   il soggetto resta ancorato in basso a destra. */
.hero--bleed .hero__inner   { padding-bottom: 0; }
.hero--bleed .hero__content { padding-bottom: 72px; }   /* compensa: testo centrato come prima */
.hero--bleed .hero__media {
    align-self: end;
    margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2)));
}
.hero--bleed .hero__image {
    max-height: 680px;
    object-fit: contain;
    object-position: right bottom;
    border-radius: 0;
}

/* ----------------------------------------------------------------
   8. Card generica
   ---------------------------------------------------------------- */
.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.card__media { aspect-ratio: 4 / 3; background: var(--accent-soft); }
.card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.card__title { font-size: 1.25rem; margin: 0; }
.card__text { color: var(--text-muted); margin: 0; }

/* ----------------------------------------------------------------
   9. Riga alternata (immagine + testo) — pseudo BEM
   ---------------------------------------------------------------- */
.feature-row {
    display: grid; gap: 40px; align-items: center;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 56px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row--reverse .feature-row__media { order: 2; }
.feature-row__media { aspect-ratio: 16 / 10; background: var(--accent-soft); border-radius: var(--radius); }
.feature-row__body h3 { font-size: 1.6rem; }

/* ----------------------------------------------------------------
   9b. Home intro — timeline verticale (linea + punti)
   La linea e i punti sono "spenti" (--timeline-idle) e si colorano
   allo scroll: il riempimento accent e i punti attivi sono pilotati
   da js/main.js (vedi blocco timeline), in base alla soglia ~65%
   dell'altezza della viewport.
   ---------------------------------------------------------------- */
.ci-timeline {
    --ci-marker: 28px;      /* larghezza colonna del punto */
    --ci-rail-w: 2px;       /* spessore della linea */
    --ci-dot:    14px;      /* diametro del punto */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 9vw, 120px);
}

/* Linea verticale: base spenta. top/height sono impostati via JS per
   farla partire dal primo punto e finire sull'ultimo. */
.ci-timeline__rail {
    position: absolute;
    left: calc(var(--ci-marker) / 2 - var(--ci-rail-w) / 2);
    top: 0;
    width: var(--ci-rail-w);
    height: 100%;
    background: var(--timeline-idle);
    border-radius: 999px;
}
/* Riempimento colorato: cresce dall'alto (height via JS) */
.ci-timeline__progress {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 0;
    background: var(--accent);
    border-radius: 999px;
    transition: height .12s linear;
}

.ci-row {
    display: grid;
    grid-template-columns: var(--ci-marker) minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "marker lead desc";
    column-gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

.ci-row__marker {
    grid-area: marker;
    display: flex;
    justify-content: center;
}
.ci-dot {
    width: var(--ci-dot);
    height: var(--ci-dot);
    margin-top: .42em;       /* allinea il punto alla prima riga del titolo */
    border-radius: 50%;
    background: var(--timeline-idle);
    transition: background var(--transition), transform var(--transition);
}
.ci-dot.is-active {
    background: var(--accent);
    transform: scale(1.08);
}

.ci-row__lead {
    grid-area: lead;
    margin: 0;
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3.4rem);   /* grande come l'h1 della hero */
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--text);
    max-width: 520px;
}
.home-intro--accent .ci-row__lead { color: var(--accent); }

/* Variante "wide": colonna desc più larga con griglia di voci a 2 colonne */
.home-intro--wide .ci-row {
    grid-template-columns: var(--ci-marker) minmax(0, 1fr) minmax(0, 2fr);
}
.ci-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 40px;
}
.ci-item__title { margin: 0 0 6px; font-weight: 500; color: var(--text); }
.ci-item__text  { margin: 0; color: var(--text-muted); }

.ci-row__desc { grid-area: desc; }
/* Lead e desc nascosti finché la linea non raggiunge il punto della riga,
   poi fade-in (.is-shown sulla .ci-row via JS, mai rimossa). .has-reveal
   la aggiunge il JS: senza JS i contenuti restano visibili. */
.ci-timeline.has-reveal .ci-row__lead,
.ci-timeline.has-reveal .ci-row__desc {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
.ci-timeline.has-reveal .ci-row.is-shown .ci-row__lead,
.ci-timeline.has-reveal .ci-row.is-shown .ci-row__desc { opacity: 1; transform: none; }
.ci-desc__title { font-weight: 500; font-size: 1.45rem; margin: 0 0 .5em; color: var(--text); }
.ci-desc__text  { margin: 0; color: var(--text-muted); font-size: 1.05rem; }
.ci-desc__lines { display: flex; flex-direction: column; margin: 0; font-weight: 500; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.35; }
.ci-line { color: var(--text); }

/* Evidenziazioni di colore del testo */
.ci-hl--coral  { color: var(--coral); }
.ci-hl--accent { color: var(--accent); }
.ci-hl--deep   { color: var(--accent-dark); }

@media (prefers-reduced-motion: reduce) {
    .ci-timeline__progress,
    .ci-dot { transition: none; }
    .ci-timeline.has-reveal .ci-row__lead,
    .ci-timeline.has-reveal .ci-row__desc { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------------
   9c. Carosello esperienze ("Scegli la tua esperienza Tripco")
   3 colonne visibili su 5 item; frecce + auto-scroll in loop
   (logica in js/main.js). Il passo viene misurato dal JS, quindi
   qui basta definire la larghezza degli item via --per.
   ---------------------------------------------------------------- */
/* Intestazione carosello: titolo a sinistra, frecce a destra */
.carousel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-bottom: 48px;
}
.carousel-head__title {
    margin: 0;
    font-weight: 500;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.1;
}
.carousel-head__nav { display: flex; gap: 12px; }
.carousel-head__intro { max-width: 640px; }
.carousel-head__lead { margin: 14px 0 0; max-width: 560px; color: var(--text); }

/* Bottone freccia tondo — standard di tutti i bottoni freccia del sito */
.car-arrow {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    font-size: 1.3rem; line-height: 1;
    color: var(--text-invert);
    background: var(--accent);
    border: 0; border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.car-arrow:hover { background: var(--accent-dark); }
.car-arrow:active { transform: scale(.94); }
.arrow-icon { width: 1.15em; height: 1.15em; display: block; }
.car-arrow--prev .arrow-icon { transform: rotate(180deg); }

/* Meccanica carosello (condivisa): viewport ritaglia, track scorre via JS */
/* touch-action: il browser tiene per se' lo scroll verticale e il pinch,
   i gesti orizzontali restano al carosello (vedi swipe in js/main.js). */
.carousel__viewport { overflow: hidden; touch-action: pan-y pinch-zoom; }
.carousel__track {
    --per: 3;
    --car-gap: clamp(24px, 3vw, 48px);
    display: flex;
    gap: var(--car-gap);
    margin: 0; padding: 0;
    list-style: none;
    transition: transform .55s ease;
    will-change: transform;
}
.carousel__item {
    flex: 0 0 calc((100% - (var(--per) - 1) * var(--car-gap)) / var(--per));
    max-width: calc((100% - (var(--per) - 1) * var(--car-gap)) / var(--per));
}

/* --- Carosello esperienze: titolo accent, gap doppio su desktop --- */
.exp-carousel .carousel-head__title { color: var(--accent); }
.exp-carousel .carousel__track { --car-gap: clamp(48px, 6vw, 96px); }

/* Marchio "co" (anelli intrecciati) + parola */
.exp-card__logo {
    display: flex; align-items: center; gap: 2px;
    margin: 0 0 18px;
    font-weight: 500;
    font-size: clamp(1.7rem, 2.4vw, 2.3rem);
    line-height: 1;
    color: var(--text);
}
.co-mark { height: .55em; width: auto; display: inline-block; vertical-align: 0; flex: 0 0 auto; }
/* "co" come marchio dentro un testo (es. titolo "...rete di connector") */
.ci-brand { white-space: nowrap; }
.exp-card__word { letter-spacing: -.01em; }

.exp-card__title { font-size: 1.15rem; font-weight: 500; margin: 0 0 14px; color: var(--text); }
.exp-card__text  { margin: 0; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    .carousel__track { transition: none; }
    .car-arrow { transition: none; }
}

/* ----------------------------------------------------------------
   9e. Caroselli eventi (card "locandina + info"): condivisi da
       Single Day (.sday, sfondo amber) e Multi Day (.mday, sfondo
       crema). Tutti a 3 colonne su desktop (--per di default).
   ---------------------------------------------------------------- */
.sday { background: var(--amber-gradient); }
.mday { background: var(--bg-alt-gradient); }
.sday .carousel-head__title,
.mday .carousel-head__title { color: var(--text); }

/* Variante a sfondo rosso (es. sezione "Mastermind") */
.sday--accent { background: var(--accent-gradient); }
.sday--accent .carousel-head__title,
.sday--accent .carousel-head__lead { color: var(--text-invert); }
.sday--accent .car-arrow { background: var(--accent-dark); }
.sday--accent .car-arrow:hover { background: var(--bg-dark); }

.event-card { display: flex; flex-direction: column; gap: 16px; }
.event-card__link { display: flex; flex-direction: column; gap: 16px; color: inherit; }

/* Locandina (placeholder finché non ci sono le immagini reali) */
.event-card__poster {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--accent);
}
.event-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.event-card__poster--ph {
    display: grid; place-items: center;
    color: var(--text-invert);
    font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
    font-size: .95rem;
}

/* Riquadro informativo bianco */
.event-card__info {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 22px 24px;
}
.event-card__title { font-size: 1.4rem; font-weight: 500; margin: 0 0 14px; color: var(--text); }
.event-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.event-card__date  { margin: 0; color: var(--text); font-weight: 500; }
.event-card__place { margin: 4px 0 0; color: var(--text-muted); }
.event-card__price { margin: 4px 0 0; color: var(--accent); font-weight: 600; }
.event-card__arrow { width: 46px; height: 46px; flex: 0 0 auto; }

.event-card__link:hover .event-card__arrow { background: var(--accent-dark); }
.event-card__link:hover .event-card__poster img { transform: scale(1.03); }

/* ----------------------------------------------------------------
   9f. Carosello Connector (sfondo accent, una riga, 3 col come la
       griglia della Lista Connector) + card Connector condivisa
   ---------------------------------------------------------------- */
.connectors { background: var(--accent); position: relative; }
.connectors .carousel-head__title { color: var(--text-invert); }
/* bottone centrato a cavallo della linea che separa #connector dalla sezione dopo */
.connectors__more {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    z-index: 2;
    white-space: nowrap;
}
/* 3 colonne (--per di default) e gap uguale alla griglia della Lista Connector.
   4px di respiro ai lati: la foto e la coda del logo sporgono di ~3px dalla
   card e l'overflow del viewport le taglierebbe sul bordo destro. */
.connectors .carousel__viewport { padding-inline: 4px; margin-inline: -4px; }
/* su sfondo accent le frecce devono essere più scure per staccare */
.connectors .car-arrow { background: var(--accent-dark); }
.connectors .car-arrow:hover { background: var(--bg-dark); }

.connectors__intro { max-width: 680px; }
.connectors__lead { margin: 18px 0 0; color: var(--text); max-width: 420px; }

/* Card Connector (parts/connector-card.php): stessa nel carosello e nella
   griglia della Lista Connector. */
.connector-card { text-align: center; }
/* l'intera card è un link al profilo /connector/<slug> */
.connector-card__link { display: block; color: inherit; text-decoration: none; }
.connector-card__loc {
    margin: 0 0 18px;
    color: var(--text);
    font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
}
.connector-card__photo {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
/* Foto +1px e spostata di 2px a destra: il bordo del logo (cornice sotto) non
   è un cerchio perfetto e verso la coda in basso a destra sporge di ~2 unità;
   così la foto lo copre e sotto il busto non traspare il filo crema (tarato
   su Chrome). Sta sopra la cornice (z-index). */
.connector-card__photo img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: calc(100% + 1px);
    max-width: none;
    margin-left: 2px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
}
.connector-card__photo--ph {
    color: var(--accent-dark);
    font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
    font-size: .85rem;
}
.connector-card__name {
    margin: 18px 0 0;
    color: var(--text-invert);
    font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
    line-height: 1.2;
}
/* Cornice: il logo Tripco a cerchio DIETRO il ritratto (defs in
   parts/connector-ring-defs.php). L'svg ha il viewBox sul cerchio esterno del
   logo, quindi l'img (quadrato alto: cover + top center) a tutta card,
   ritagliata a cerchio, ha la stessa misura e gli sta sopra; in hover il logo
   ruota di qualche grado (la foto resta ferma). */
.connector-ring-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.connector-card__frame {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
}
/* ruota il contenuto dell'svg, non il riquadro: niente allargamento pagina.
   Origine = centro del cerchio esterno in unità del viewBox (con view-box il
   50% 50% cadrebbe su 158,158, non sul centro). */
.connector-card__spin {
    transform-box: view-box;
    transform-origin: 169.43px 169.1px;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.connector-card__ring { fill: var(--bg-alt); }
.connector-card__dot  { fill: var(--accent-dark); }
.connector-card__link:hover .connector-card__spin { transform: rotate(-16deg); }
@media (prefers-reduced-motion: reduce) {
    .connector-card__spin { transition: none; }
}

/* ----------------------------------------------------------------
   9f. Lista Connector — griglia statica di TUTTI i connector
   Stesse card di .connectors ma su più righe (no carosello), amber.
   ---------------------------------------------------------------- */
.connectors-grid { background: var(--amber); }
.connectors-grid__title {
    margin: 0 0 56px;
    color: var(--text-invert);
    /* stesse impostazioni font del titolo di #connector (.carousel-head__title) */
    font-weight: 500;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.1;
}
.connectors-grid__title em { font-style: italic; }
.connectors-grid__list {
    --cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: clamp(48px, 4vw, 72px);
    margin: 0; padding: 0;
    list-style: none;
}

/* ----------------------------------------------------------------
   9j. Sezione "Eventi del Connector" (sfondo crema): testo+tag a
   sinistra, carosello di #single-day a 2 colonne a destra.
   ---------------------------------------------------------------- */
.connector-events { background: var(--bg-alt-gradient); }
.connector-events__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);  /* sinistra ~36% / destra ~64% */
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

/* Colonna sinistra */
.connector-events__title {
    margin: 0 0 22px;
    font-weight: 500;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    line-height: 1.2;
    color: var(--text);
}
.connector-events__text { margin: 0 0 32px; color: var(--text); max-width: 46ch; }
.connector-events__cta { margin: 0 0 64px; }
.connector-events__tags-title {
    margin: 0 0 22px;
    font-weight: 500;
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    color: var(--text);
}
.connector-events__tags {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin: 0; padding: 0; list-style: none;
}
/* Tag a pillola (outline accent) — bottoni statici */
.tag-pill {
    display: inline-block;
    padding: 11px 24px;
    font-family: var(--sans); font-size: 1rem; font-weight: 500;
    color: var(--accent);
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.tag-pill:hover { background: var(--accent); color: var(--text-invert); }

/* Colonna destra: nav in alto a destra + carosello a 2 colonne */
.connector-events__main { min-width: 0; }   /* permette al carosello di non sforare la griglia */
.connector-events__nav {
    display: flex; justify-content: flex-end; gap: 12px;
    margin-bottom: 24px;
}
.connector-events__track { --per: 2; }

/* ----------------------------------------------------------------
   9k. Sezione Founder (sfondo accent): testo a sinistra, ritratto a
   destra ancorato in alto (testa sempre visibile) fino al bordo basso.
   ---------------------------------------------------------------- */
.founder {
    position: relative;
    overflow: hidden;
    background: var(--accent);
}
.founder__inner {
    position: relative;
    z-index: 1;                       /* il testo sta sopra alla foto */
    min-height: clamp(480px, 56vw, 680px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.founder__text { max-width: 440px; }

.founder__loc {
    margin: 0;
    color: var(--text);
    font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
}
/* Marcatore: punto — linea — punto, verticale */
.founder__marker {
    display: flex; flex-direction: column; align-items: center;
    width: 12px; height: clamp(110px, 16vw, 190px);
    margin: 22px 0 30px;
}
.founder__dot {
    flex: 0 0 auto;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent-dark);
}
.founder__rail {
    flex: 1 1 auto;
    width: 2px;
    background: var(--accent-dark);
}
.founder__name {
    margin: 0 0 28px;
    color: var(--text-invert);
    font-weight: 500; text-transform: uppercase;
    line-height: 1.05; letter-spacing: .01em;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
}
.founder__role { margin: 0; line-height: 1.3; font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.founder__role-dark  { display: block; color: var(--text);        font-weight: 500; }
.founder__role-light { display: block; color: var(--text-invert); font-weight: 500; }

.founder__photo {
    position: absolute;
    top: 0; bottom: 0; left: 52%;     /* ancorata da sinistra: non scappa a destra sui monitor larghi */
    height: 100%;
    width: clamp(320px, 44vw, 720px);
    object-fit: cover;
    object-position: top center;      /* testa visibile; eventuale taglio in basso */
}

/* ----------------------------------------------------------------
   9h. Sezione B2B "Hai un'azienda?" (sfondo amber, 2 colonne)
   ---------------------------------------------------------------- */
.biz { background: var(--amber); }
.biz__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.biz__title {
    margin: 0 0 24px;
    font-weight: 500;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.01em;
}
.biz__line { display: block; }
.biz__line--accent { color: var(--accent-dark); }
.biz__line--light  { color: var(--text-invert); }
.biz__lead { margin: 0 0 20px; max-width: 520px; color: var(--text); font-weight: 500; }
.biz__text { margin: 0 0 32px; max-width: 520px; color: var(--text); }

.biz__image { border-radius: var(--radius); }
.biz__placeholder {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--accent-soft);
    display: grid; place-items: center;
    color: var(--accent-dark);
    font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

/* ----------------------------------------------------------------
   9g. CTA semplice (sfondo bianco, titolo + bottone)
   ---------------------------------------------------------------- */
.cta-simple__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
}
.cta-simple__title {
    margin: 0;
    max-width: 720px;
    font-weight: 500;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--text);
}
.cta-simple__action { flex: 0 0 auto; }

/* ----------------------------------------------------------------
   9d. Banda CTA (sfondo accent, titolo bicolore + bottone)
   ---------------------------------------------------------------- */
.cta-band { background: var(--accent); }
/* Variante amber: sfondo amber e titolo tutto scuro */
.cta-band--amber { background: var(--amber); }
.cta-band--amber .cta-band__line--light { color: var(--text); }
.cta-band__inner {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
}
.cta-band__text { max-width: 720px; }
.cta-band__title {
    margin: 0;
    font-weight: 500;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: -.01em;
}
.cta-band__line { display: block; }
.cta-band__line--dark  { color: var(--text); }
.cta-band__line--light { color: var(--text-invert); }
.cta-band__lead {
    margin: 24px 0 0;
    color: var(--text);
    font-size: 1.1rem;
    max-width: 420px;
}
.cta-band__action { flex: 0 0 auto; }

/* ----------------------------------------------------------------
   9e. Lista Connector — barra di ricerca (sfondo accent)
   Titolo a sinistra, campo "Cerca città" + bottone "Filtri" a destra.
   NB: form ancora solo statico.
   ---------------------------------------------------------------- */
.connectors-finder { background: var(--accent); }
.connectors-finder__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
}
.connectors-finder__title {
    margin: 0;
    color: var(--text-invert);
    font-weight: 500;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: -.01em;
}
.connectors-finder__tools {
    display: flex; align-items: center; gap: 14px;
    /* Su schermi stretti deve poter rimpicciolire e mandare "Filtri" a capo:
       con flex: 0 0 auto la barra restava a 324px e sforava sotto i ~372px. */
    flex: 0 1 auto; flex-wrap: wrap;
    max-width: 100%;
}
/* Campo di ricerca a pillola, sfondo crema */
.finder-search {
    position: relative;
    display: flex; align-items: center;
    /* min-width: 0 sblocca lo shrink del flex item (default: min-content),
       cosi' l'input puo' scendere sotto i 220px sui telefoni piu' stretti. */
    flex: 1 1 auto; min-width: 0;
    background: var(--bg-alt);
    border-radius: 999px;
}
.finder-search__input {
    /* 220px e' solo la base: dentro .finder-search cresce fino a riempire la
       pillola, cosi' anche a larghezza piena tutto il campo resta toccabile. */
    flex: 1 1 auto; min-width: 0;
    width: 220px; max-width: 100%;
    padding: 14px 48px 14px 24px;
    font-family: var(--sans); font-size: 1rem;
    color: var(--accent);
    background: transparent; border: 0; border-radius: 999px;
    outline: none;
}
.finder-search__input::placeholder { color: var(--accent); opacity: 1; }
.finder-search__icon {
    position: absolute; right: 20px;
    width: 20px; height: 20px;
    color: var(--accent);
    pointer-events: none;
}
.connectors-finder__filters { flex: 0 0 auto; }

/* ----------------------------------------------------------------
   9m. Sezione "Diventa un connector" (2 colonne, sfondo crema)
   Riusa il layout .biz__inner / .biz__media / .biz__placeholder.
   ---------------------------------------------------------------- */
.become { background: var(--bg-alt); }
.become__title,
.become__subtitle {
    margin: 0;
    font-weight: 500;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--text);
}
.become__subtitle { margin-top: 28px; }

/* ----------------------------------------------------------------
   9i. Blocco testuale allineato a sinistra (text-block)
   ---------------------------------------------------------------- */
.text-block--accent { background: var(--accent); color: var(--text-invert); }
.text-block__title {
    margin: 0 0 24px;
    font-weight: 500;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.12;
}
.text-block__title--sm { margin-bottom: 18px; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.text-block--accent .text-block__title { color: var(--text-invert); }
.text-block__text { margin: 0; max-width: 820px; color: var(--text); }
.text-block--accent .text-block__text { color: var(--text-invert); }

/* ----------------------------------------------------------------
   9j. Banner immagine a tutta larghezza (titolo in basso a sinistra)
   ---------------------------------------------------------------- */
.image-banner {
    display: flex;
    align-items: flex-end;
    min-height: 520px;
    padding-block: 56px;
    background: var(--accent);          /* placeholder finché non c'è l'immagine */
    background-size: cover;
    background-position: center;
}
.image-banner__title {
    margin: 0;
    color: var(--text-invert);
    font-weight: 500;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1.12;
}

/* ----------------------------------------------------------------
   9k. Colonne testuali (titolo accent + paragrafo)
   ---------------------------------------------------------------- */
.text-col__title {
    margin: 0 0 16px;
    color: var(--accent);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.15;
}
.text-col__text { margin: 0; color: var(--text); }

/* ----------------------------------------------------------------
   9l. CTA "primo passo" (sfondo amber, titolo + paragrafo + bottone)
   ---------------------------------------------------------------- */
.cta-step { background: var(--amber); }
.cta-step__title {
    margin: 0 0 56px;
    max-width: 900px;
    color: var(--text-invert);
    font-weight: 500;
    font-size: clamp(1.9rem, 4.5vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -.01em;
}
.cta-step__row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
}
.cta-step__text { margin: 0; max-width: 520px; color: var(--text); }
.cta-step__action { flex: 0 0 auto; }

/* ----------------------------------------------------------------
   10. Form contatti
   ---------------------------------------------------------------- */
.contact-grid { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-field label { font-weight: 600; font-size: .95rem; }
.form-field input,
.form-field textarea {
    font: inherit; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg);
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--accent); outline: none; }

/* Mappa Leaflet (patina grigia) */
.map { height: 380px; border-radius: var(--radius); overflow: hidden; }
.map .leaflet-tile { filter: grayscale(1) contrast(.9); }

/* ----------------------------------------------------------------
   10b. Modale contatti (<dialog id="contattaci">, aperto da main.js)
   ---------------------------------------------------------------- */
.contact-modal {
    width: min(440px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    color: var(--text);
    background: var(--bg);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.contact-modal::backdrop { background: var(--overlay); }
.contact-modal[open] { animation: contact-modal-in .2s ease; }
@keyframes contact-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
}
/* Pagina ferma sotto il modale aperto */
html:has(.contact-modal[open]) { overflow: hidden; }

.contact-modal__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 20px 18px 28px;
    border-bottom: 1px solid var(--border);
}
.contact-modal__title { margin: 0; font-size: 1.4rem; font-weight: 500; }
.contact-modal__close {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    color: var(--text); background: transparent;
    border: 0; border-radius: 50%; cursor: pointer;
    transition: background var(--transition);
}
.contact-modal__close:hover { background: var(--bg-alt); }
.contact-modal__close svg { width: 20px; height: 20px; }

.contact-modal__body { padding: 24px 28px 20px; }
.contact-modal__intro { margin: 0 0 16px; font-size: 1rem; line-height: 1.55; color: var(--text-muted); }

.contact-modal__list { margin: 0; padding: 0; list-style: none; }
.contact-modal__list li { margin: 0; }
.contact-modal__list li + li { border-top: 1px solid var(--border); }
.contact-modal__link {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 8px;
    color: var(--text);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}
.contact-modal__link:hover { background: var(--bg-alt); color: var(--accent-dark); }
.contact-modal__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); }

/* ----------------------------------------------------------------
   11. Footer
   ---------------------------------------------------------------- */
.site-footer {
    background: var(--accent);
    color: var(--text-invert);
    padding-block: 80px 64px;
}
.site-footer a { color: inherit; }
.site-footer a:hover { opacity: .75; }

/* Blocco superiore: headline + recapiti */
.site-footer__top { margin-bottom: 120px; }
.site-footer__title {
    font-family: var(--heading);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
    color: var(--text-invert);
    margin: 0;
}
.site-footer__contacts {
    margin-top: 56px;
    display: flex; flex-wrap: wrap; gap: 12px;
}
/* Recapiti come bottoni: ripristina colore e hover di .btn--deep,
   altrimenti sovrascritti da ".site-footer a" (più specifico) */
.site-footer__contacts .btn { color: var(--text-invert); }
.site-footer__contacts .btn:hover { opacity: 1; }

/* Newsletter: riusa .form-field (input bianco come nel form contatti) */
.site-footer__newsletter { margin: 40px 0 0; max-width: 380px; gap: 12px; }
.site-footer__newsletter label { font-size: 1.05rem; font-weight: 500; color: var(--text-invert); }
.site-footer__newsletter input { color: var(--text); }
.site-footer__newsletter input::placeholder { color: var(--text-muted); }
/* Il bordo accento di .form-field non si vede sul fondo rosso: anello bianco */
.site-footer__newsletter input:focus { border-color: var(--border); outline: 2px solid var(--text-invert); outline-offset: 2px; }
/* Campo + bottone freccia interno (invio) */
.site-footer__newsletter-field { position: relative; }
.site-footer__newsletter-field input { width: 100%; padding-right: 56px; }
.site-footer__newsletter-btn {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 36px; height: 36px; padding: 0;
    color: var(--text-invert); background: var(--accent);
    border: 0; border-radius: 50%; cursor: pointer;
    transition: background .2s ease;
}
.site-footer__newsletter-btn:hover { background: var(--accent-dark); }
.site-footer__newsletter-btn:focus-visible { outline: 2px solid var(--text-invert); outline-offset: 2px; }
.site-footer__newsletter-btn:disabled { opacity: .6; cursor: wait; }
.site-footer__newsletter-msg { margin: 0; min-height: 1.5em; font-size: .95rem; }
/* Honeypot anti-bot: fuori schermo (non display:none, che alcuni bot saltano) */
.site-footer__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Blocco inferiore: logo bianco + social | due colonne di link */
.site-footer__bottom {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
}
.site-footer__identity { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.site-footer__logo { display: block; height: 40px; width: auto; }
.site-footer__social { display: flex; gap: 16px; }
.site-footer__social li { margin: 0; }
.site-footer__social a { display: block; }
.social-icon { display: block; width: 24px; height: 24px; }
.site-footer__nav { display: flex; gap: 72px; }
.site-footer__nav ul { display: flex; flex-direction: column; gap: 12px; }
.site-footer__nav li { margin: 0; }
.site-footer__nav a { font-size: 1.05rem; }

/* ----------------------------------------------------------------
   12. Reveal allo scroll (animazione, attivata da js/main.js)
   ---------------------------------------------------------------- */
.reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   9k. Eventi e Connector da dati: stati vuoti, frecce nascoste,
       pagina evento (event-hero + event-details)
   ============================================================ */
/* Le frecce hanno display:grid: l'attributo hidden da solo non basta. */
.car-arrow[hidden] { display: none; }
/* Card nascoste dalla ricerca per città (Lista Connector). */
.connector-card[hidden] { display: none; }

.carousel-empty { margin: 8px 0 0; color: var(--text-muted); font-size: 1.05rem; }
.connectors .carousel-empty { color: var(--text-invert); opacity: .9; }
.connectors-grid__empty { margin: 24px 0 0; color: var(--text); font-size: 1.05rem; }

/* Bio del Connector: paragrafi prodotti da rich() */
.connector-events__text p { margin: 0; }
.connector-events__text p + p { margin-top: .8em; }

/* --- Pagina evento: hero con cover --- */
.event-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 60vh;
    color: var(--text-invert);
    background: var(--accent) center / cover no-repeat;
}
.event-hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, transparent 0%, var(--overlay) 75%);
}
.event-hero__inner { padding-block: 120px 56px; }
.event-hero__badge {
    display: inline-block; margin-bottom: 18px; padding: 6px 14px;
    border-radius: 999px; background: var(--bg-dark); color: var(--text-invert);
    font-size: .85rem; font-weight: 500; letter-spacing: .02em;
}
.event-hero__type {
    margin: 0 0 12px; font-size: .95rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .08em; opacity: .92;
}
.event-hero__title {
    margin: 0 0 22px; max-width: 16ch;
    font-family: var(--heading); font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05;
}
.event-hero__meta {
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    margin: 0 0 28px; padding: 0; list-style: none;
    font-size: 1.1rem; font-weight: 500;
}
.event-hero__meta li { display: flex; align-items: center; gap: 8px; }
.event-hero__meta svg { width: 1.2em; height: 1.2em; flex: none; }

/* --- Pagina evento: descrizione + scheda laterale --- */
.event-details { background: var(--bg); }
.event-details__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}
.event-details__section + .event-details__section { margin-top: 48px; }
.event-details__heading {
    margin: 0 0 16px;
    font-family: var(--heading); font-weight: 500; font-size: 1.6rem;
}
.rich p { margin: 0; font-size: 1.1rem; line-height: 1.65; }
.rich p + p { margin-top: 1em; }
.event-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.event-list li { position: relative; padding-left: 28px; font-size: 1.1rem; line-height: 1.5; }
.event-list li::before {
    content: ""; position: absolute; left: 0; top: .5em;
    width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
}
.event-details__card {
    position: sticky; top: calc(var(--header-height) + 24px);
    padding: 24px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-alt);
}
.event-details__poster {
    aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 20px;
    border-radius: var(--radius); background: var(--accent);
}
.event-details__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.event-details__rows { display: grid; gap: 14px; margin: 0; }
.event-details__rows div { display: grid; gap: 2px; }
.event-details__rows dt {
    font-size: .8rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-muted);
}
.event-details__rows dd { margin: 0; font-size: 1.05rem; font-weight: 500; }
.event-details__cta { display: block; margin-top: 22px; text-align: center; }
.event-details__closed {
    margin: 22px 0 0; padding: 12px 16px; border-radius: var(--radius);
    background: var(--bg-alt-dark); font-weight: 500; text-align: center;
}
.event-details__curator { margin: 18px 0 0; font-size: .95rem; color: var(--text-muted); }
.event-details__curator a { color: var(--accent-dark); font-weight: 500; text-decoration: none; }
.event-details__curator a:hover { text-decoration: underline; }