:root {
  --white: #fff;
  --max-width: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--white);
  font-family: "Montserrat", Arial, sans-serif;
  line-height: 1.6;
}

body::selection {
  background: var(--magenta);
  color: var(--white);
}

a {
  color: inherit;
}

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

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--white);
  color: var(--ink);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 3.5vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.header-brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  letter-spacing: -0.05em;
  line-height: 1;
}

.header-brand span,
.footer-brand span {
  font-size: 1.35rem;
}

.header-brand b,
.footer-brand b {
  padding-left: 0.6rem;
  border-left: 1px solid currentColor;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.desktop-nav {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.6vw, 2.5rem);
}

.desktop-nav a,
.footer-links a {
  position: relative;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.desktop-nav a::after,
.footer-links a::after {
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mobile-nav {
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-small {
  padding: 0.6rem 1.1rem;
}

.button-small:hover,
.button-small:focus-visible,
.button-light {
  background: var(--white);
  color: var(--ink);
}

.button-light:hover,
.button-light:focus-visible {
  border-color: var(--white);
  background: transparent;
  color: var(--white);
}

.button-dark {
  background: var(--ink);
  color: var(--white);
}

.button-dark:hover,
.button-dark:focus-visible {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(5rem, 8vh, 6.5rem) max(5vw, calc((100vw - var(--max-width)) / 2)) 2.5rem;
  overflow: hidden;
  isolation: isolate;
  background-position: center;
  background-size: cover;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
  gap: clamp(0.5rem, 1.5vh, 1rem);
  padding: clamp(0.5rem, 1.5vh, 1rem) 0 0 clamp(1.5rem, 3vw, 3rem);
  min-width: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 42px;
  height: 1px;
  background: currentColor;
}

.eyebrow-dark {
  color: var(--wine);
}

.hero-logo {
  justify-self: end;
  mix-blend-mode: screen;
}

.hero h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.065em;
}

.hero-intro {
  margin: 1.25rem 0 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.text-link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.text-link span {
  margin-left: 0.5rem;
}

.hero-year {
  position: absolute;
  top: 16vh;
  z-index: 0;
  display: grid;
  font-size: clamp(8rem, 20vw, 20rem);
  font-weight: 900;
  letter-spacing: -0.11em;
  line-height: 0.62;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
}

.hero-facts {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.5fr;
  min-width: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-facts div + div {
  padding-left: 1.2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-facts small,
.workshop-side small,
.facilitators small,
.partner-grid small {
  display: block;
  margin-bottom: 0.3rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-facts strong {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.section {
  position: relative;
  display: grid;
  padding: clamp(6rem, 11vw, 10rem) max(5vw, calc((100vw - var(--max-width)) / 2));
  overflow: hidden;
}

.section-light {
  background: var(--paper);
  color: var(--ink);
}

.section-number {
  position: absolute;
  top: 2.6rem;
  right: max(5vw, calc((100vw - var(--max-width)) / 2));
  color: rgba(23, 21, 38, 0.32);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.section-number::before {
  display: inline-block;
  width: 46px;
  height: 1px;
  margin-right: 0.75rem;
  background: currentColor;
  vertical-align: middle;
  content: "";
}

.section-number-light {
  color: rgba(255, 255, 255, 0.4);
}

.section-heading h2,
.workshop h2,
.venue h2,
.tickets h2,
.partners h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5.8vw, 5.8rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.about {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 5rem 8vw;
}

.about-copy {
  align-self: end;
  padding-top: 4rem;
}

.lead {
  margin-top: 0;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.45;
}

.about-copy p:not(.lead),
.workshop-content > p:not(.lead),
.venue address,
.tickets-intro > p:last-child {
  color: var(--muted);
  font-size: 0.95rem;
}

.about-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.about-stats div {
  display: flex;
  flex-direction: column;
  padding: 2.2rem 1rem 0 0;
}

.about-stats div + div {
  padding-left: 2rem;
  border-left: 1px solid var(--line);
}

.about-stats strong {
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
}

.about-stats span {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.date-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4vw;
  padding: clamp(4rem, 7vw, 6rem) max(5vw, calc((100vw - var(--max-width)) / 2));
  border-top: 1px solid var(--line);
}

.date-band > p {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.date-band > p:last-child {
  text-align: right;
}

.date-display {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  line-height: 1;
}

.date-display span {
  font-size: clamp(5rem, 11vw, 10rem);
  font-weight: 900;
  letter-spacing: -0.1em;
}

.date-display strong {
  font-size: clamp(1.5rem, 3vw, 3rem);
}

.date-display b {
  font-size: 0.85rem;
  font-weight: 600;
  writing-mode: vertical-rl;
}

.workshop {
  background:
    radial-gradient(circle at 8% 80%, rgba(139, 15, 99, 0.55), transparent 32%),
    linear-gradient(115deg, var(--navy) 0%, var(--purple) 53%, var(--wine) 150%);
}

.workshop-orbit {
  position: absolute;
  top: 22%;
  left: -10vw;
  width: 32vw;
  height: 32vw;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.workshop-orbit::after {
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
}

.workshop-label,
.workshop-content,
.workshop-side {
  position: relative;
  z-index: 1;
}

.date-chip,
.provisional-badge {
  display: inline-flex;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workshop-content > p:not(.lead) {
  color: rgba(255, 255, 255, 0.64);
}

.facilitators {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.facilitators > div {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.facilitators > div > span {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.68rem;
  font-weight: 700;
}

.facilitators p {
  margin: 0;
}

.facilitators strong,
.facilitators small {
  display: block;
}

.facilitators small {
  margin: 0.15rem 0 0;
}

.workshop-side {
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.workshop-side > span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workshop-side strong {
  display: block;
  letter-spacing: -0.06em;
}

.agenda {
  display: block;
}

.agenda-heading,
.speakers-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 4rem;
}

.agenda-heading h2,
.speakers-heading h2 {
  max-width: 850px;
}

.provisional-badge {
  flex: 0 0 auto;
  border-color: rgba(23, 21, 38, 0.3);
  color: var(--wine);
}

.agenda-preview {
  border-top: 1px solid var(--line);
}

.agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr 60px;
  gap: 2rem;
  align-items: start;
  border-bottom: 1px solid var(--line);
}

.agenda-item time {
  color: var(--wine);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.agenda-item div > span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.agenda-item h3 {
  margin: 0.25rem 0;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  letter-spacing: -0.025em;
}

.agenda-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.agenda-item > b {
  justify-self: end;
  color: rgba(23, 21, 38, 0.2);
  font-size: 0.68rem;
}

.agenda-item.featured::before {
  position: absolute;
  content: "";
}

.provisional-note {
  max-width: 720px;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.speakers {
  display: block;
  background:
    radial-gradient(circle at 90% 10%, rgba(139, 15, 99, 0.38), transparent 30%),
    linear-gradient(135deg, var(--navy-deep), var(--purple));
}

.provisional-badge-light {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
}

.speaker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.speaker-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.speaker-portrait {
  position: relative;
  display: grid;
  aspect-ratio: 0.84;
  place-items: center;
  overflow: hidden;
}

.speaker-portrait::before,
.speaker-portrait::after {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  content: "";
}

.speaker-portrait::after {
  width: 50%;
}

.speaker-portrait > span {
  position: relative;
  z-index: 1;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.08em;
}

.speaker-portrait > small {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.speaker-card > div:last-child {
  min-height: 120px;
  padding: 1.25rem;
}

.speaker-card h3 {
  margin: 0;
  font-size: 1rem;
}

.speaker-card p {
  margin: 0.3rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.7rem;
}

.provisional-note-light {
  color: rgba(255, 255, 255, 0.5);
}

.venue {
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: 8vw;
}

.venue .lead {
  margin: 2.25rem 0 0.5rem;
}

.venue address {
  margin-bottom: 2rem;
  font-style: normal;
}

.map-frame {
  position: relative;
  min-height: 520px;
  background: var(--navy);
}

.map-frame::before {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.38);
  content: "";
  pointer-events: none;
}

.map-frame iframe {
  width: 100%;
  height: 520px;
  border: 0;
  filter: grayscale(1) contrast(1.1) sepia(0.15) hue-rotate(190deg);
}

.map-frame > span {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  z-index: 2;
  padding: 0.5rem 0.7rem;
  background: var(--navy-deep);
  color: var(--white);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.tickets {
  padding: clamp(6rem, 10vw, 9rem) max(5vw, calc((100vw - var(--max-width)) / 2));
  background:
    radial-gradient(circle at 82% 15%, rgba(139, 15, 99, 0.46), transparent 30%),
    linear-gradient(110deg, var(--navy-deep), var(--purple) 55%, var(--wine) 150%);
}

.tickets-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem 8vw;
  align-items: end;
}

.tickets-intro .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.tickets-intro > p:last-child {
  color: rgba(255, 255, 255, 0.58);
}

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
}

.ticket-grid article {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.02);
}

.ticket-grid .ticket-featured {
  color: var(--ink);
}

.ticket-grid article > span {
  align-self: start;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticket-grid h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
}

.ticket-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
}

.ticket-featured p {
  color: var(--muted);
}

.ticket-grid strong {
  margin-top: auto;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: -0.06em;
}

.tickets-button {
  margin-top: 2rem;
}

.partners {
  padding: clamp(5rem, 8vw, 7rem) max(5vw, calc((100vw - var(--max-width)) / 2));
  background: var(--white);
  color: var(--ink);
}

.partners h2 {
  font-size: clamp(2.3rem, 4vw, 4rem);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.partner-grid > a,
.partner-combo {
  display: grid;
  gap: 1rem;
  min-height: 180px;
  place-content: center;
  padding: 2rem;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.partner-grid img,
.partner-combo img {
  justify-self: center;
  max-height: 54px;
  width: min(210px, 100%);
  object-fit: contain;
}

.partner-grid .yazo-logo {
  max-height: 68px;
  width: min(128px, 100%);
}

.partner-combo .r1-logo {
  max-height: 104px;
  width: min(128px, 100%);
}

.partner-combo .tes-logo {
  max-height: 82px;
  width: min(152px, 100%);
}

.partner-combo > span {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: center;
  width: min(320px, 100%);
}

.partner-combo a {
  display: grid;
  gap: 0.65rem;
  align-items: center;
  min-height: 96px;
  color: inherit;
  text-decoration: none;
}

.partner-grid a[href*="wearemci"] img {
  max-height: 86px;
  width: min(130px, 100%);
}

.partner-grid small {
  color: var(--muted);
}

.partner-grid strong {
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  letter-spacing: -0.05em;
}

.partner-grid strong span {
  display: block;
  font-size: 0.9em;
}

.tes-wordmark {
  color: #6b7280;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.tes-wordmark::before {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.35rem;
  border: 5px solid #249bd3;
  border-right-color: #8e8e8e;
  border-radius: 50%;
  content: "";
  vertical-align: -0.35rem;
}

.partner-grid .sponsor-placeholder {
  color: var(--muted);
}

footer {
  padding: 5rem max(5vw, calc((100vw - var(--max-width)) / 2)) 2rem;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
  padding-bottom: 5rem;
}

.footer-brand span {
  font-size: 2.2rem;
}

.footer-main > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.footer-links a {
  justify-self: start;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-bottom a {
  text-decoration: none;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.64);
}

.footer-credit img {
  width: 104px;
  max-height: 28px;
  object-fit: contain;
  opacity: 0.82;
  filter: brightness(0) invert(1);
}

@media (max-width: 980px) {

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .mobile-nav {
    position: relative;
    display: block;
    justify-self: end;
  }

  .mobile-nav summary {
    padding: 0.55rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav summary::before {
    display: inline-block;
    width: 18px;
    height: 6px;
    margin-right: 0.6rem;
    border-top: 1px solid;
    border-bottom: 1px solid;
    content: "";
    vertical-align: 0.1em;
  }

  .mobile-nav nav {
    position: absolute;
    top: calc(100% + 1rem);
    right: 0;
    display: grid;
    width: min(300px, 88vw);
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  }

  .mobile-nav nav a {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .about,
  .venue {
    grid-template-columns: 1fr;
  }

  .about-copy {
    padding-top: 0;
  }

  .workshop-side {
    grid-column: 2;
  }

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

  .tickets-intro {
    grid-template-columns: 1fr;
  }

  .ticket-grid {
    grid-template-columns: 1fr;
  }

  .ticket-grid article {
    min-height: 240px;
  }

  .ticket-grid article + article {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
  }
}

@media (max-width: 680px) {

  .hero-logo {
    max-width: none;
  }

  .hero h1 {
    overflow-wrap: break-word;
  }

  .hero-intro {
    overflow-wrap: break-word;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 1.25rem;
  }

  .text-link {
    text-align: center;
  }

  .hero-facts {
    grid-template-columns: 1fr;
  }

  .hero-facts div {
    padding: 1rem 0;
  }

  .hero-facts div + div {
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .section {
    padding: 6rem 1.25rem;
  }

  .section-number {
    top: 1.8rem;
    right: 1.25rem;
  }

  .section-heading h2,
  .workshop h2,
  .venue h2,
  .tickets h2 {
    font-size: clamp(2.55rem, 12vw, 4rem);
  }

  .about {
    gap: 2.5rem;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }

  .about-stats div + div {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .date-band {
    grid-template-columns: 1fr;
    padding: 4rem 1.25rem;
    text-align: left;
  }

  .date-band > p:last-child {
    text-align: left;
  }

  .date-display {
    justify-content: flex-start;
  }

  .workshop {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .workshop-side {
    grid-column: auto;
  }

  .facilitators {
    grid-template-columns: 1fr;
  }

  .agenda-heading,
  .speakers-heading {
    align-items: start;
    flex-direction: column;
    margin-bottom: 2.5rem;
  }

  .agenda-item {
    gap: 1rem;
  }

  .agenda-item > b {
    display: none;
  }

  .speaker-grid {
    grid-template-columns: 1fr;
  }

  .speaker-portrait {
    aspect-ratio: 1.15;
  }

  .venue {
    gap: 3rem;
  }

  .map-frame,
  .map-frame iframe {
    min-height: 380px;
    height: 380px;
  }

  .tickets,
  .partners,
  footer {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .ticket-grid article {
    min-height: 260px;
    padding: 1.5rem;
  }

  .partner-grid {
    grid-template-columns: 1fr;
  }

  .partner-grid > * + * {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    align-items: start;
    flex-direction: column;
  }
}

/* Composition fix: keep the premium look, but make every fold breathe. */

.hero::after {
  inset-top: 86px;
}

@media (max-width: 1180px) {

}

@media (max-width: 980px) {

}

@media (max-width: 680px) {

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .skip-link,
  .site-header {
    display: none;
  }
}

/* Premium visual pass: keeps the same HTML, only makes the presentation quieter. */
:root {
  --navy: #171b35;
  --navy-deep: #070914;
  --purple: #25142f;
  --wine: #7a0a55;
  --magenta: #b01875;
  --paper: #f7f5f8;
  --ink: #10111b;
  --muted: #6f6b78;
  --line: rgba(16, 17, 27, 0.12);
  --glass: rgba(255, 255, 255, 0.075);
  --glass-line: rgba(255, 255, 255, 0.16);
  --radius-lg: 34px;
  --radius-md: 24px;
  --shadow-soft: 0 28px 90px rgba(0, 0, 0, 0.22);
}

html,
body {
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(circle at 50% -20%, rgba(122, 10, 85, 0.35), transparent 30rem),
    var(--navy-deep);
  font-feature-settings: "kern";
  text-rendering: geometricPrecision;
}

.site-header {
  top: 14px;
  right: 18px;
  left: 18px;
  min-height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(8, 10, 22, 0.62);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(24px) saturate(140%);
}

.header-brand span,
.footer-brand span {
  font-weight: 850;
  letter-spacing: -0.075em;
}

.desktop-nav a,
.footer-links a,
.button,
.text-link,
.eyebrow {
  letter-spacing: 0.13em;
}

.button {
  min-height: 50px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.button-small {
  min-height: 40px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.button-light {
  box-shadow: 0 18px 46px rgba(255, 255, 255, 0.08), 0 12px 38px rgba(0, 0, 0, 0.2);
}

.button-dark {
  box-shadow: 0 18px 42px rgba(16, 17, 27, 0.22);
}

.hero {
  background-image:
    linear-gradient(135deg, rgba(7, 9, 20, 0.34), rgba(122, 10, 85, 0.2) 42%, rgba(18, 25, 60, 0.3)),
    url("assets/background-lamec-2026.webp");
}

.hero::before {
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.08), transparent 18rem),
    radial-gradient(circle at 86% 74%, rgba(54, 74, 143, 0.72), transparent 30rem),
    radial-gradient(circle at 12% 12%, rgba(160, 8, 103, 0.62), transparent 26rem),
    linear-gradient(180deg, rgba(7, 9, 20, 0.08), rgba(7, 9, 20, 0.84));
}

.hero::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
  content: "";
  pointer-events: none;
}

.hero-logo {
  opacity: 0.96;
}

.hero h1,
.section-heading h2,
.workshop h2,
.venue h2,
.tickets h2,
.partners h2 {
  font-weight: 850;
  letter-spacing: -0.075em;
  text-wrap: balance;
}

.hero-intro {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 500;
}

.hero-year {
  right: -1.5vw;
  color: rgba(255, 255, 255, 0.018);
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.13);
}

.hero-facts {
  padding: 0.7rem;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.hero-facts div {
  padding: 0.75rem 1.25rem;
}

.hero-facts div + div {
  border-left-color: rgba(255, 255, 255, 0.14);
}

.hero-facts small {
  margin-bottom: 0.15rem;
}

.section {
  padding-top: clamp(7rem, 12vw, 11rem);
  padding-bottom: clamp(7rem, 12vw, 11rem);
}

.section-light,
.partners {
  background:
    radial-gradient(circle at 84% 8%, rgba(122, 10, 85, 0.06), transparent 24rem),
    linear-gradient(180deg, #fbfafe, var(--paper));
}

.about-stats,
.partner-grid,
.ticket-grid,
.agenda-preview {
  border-color: var(--line);
}

.about-stats div,
.partner-grid > a,
.partner-combo,
.ticket-grid article,
.agenda-item,
.speaker-card,
.workshop-side,
.map-frame {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.about-stats div:hover,
.partner-grid > a:hover,
.partner-grid > a:focus-visible,
.partner-combo:hover,
.ticket-grid article:hover,
.speaker-card:hover,
.workshop-side:hover {
  transform: translateY(-4px);
}

.date-band {
  position: relative;
  margin: 0;
  background:
    radial-gradient(circle at 48% 35%, rgba(255, 255, 255, 0.08), transparent 18rem),
    linear-gradient(135deg, #080a16, #171b35 52%, #300d32);
  color: var(--white);
  border: 0;
}

.date-band > p {
  color: rgba(255, 255, 255, 0.56);
}

.date-display span {
  color: var(--white);
  text-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.date-display strong {
  color: rgba(255, 255, 255, 0.86);
}

.date-display b {
  color: rgba(255, 255, 255, 0.48);
}

.workshop,
.speakers,
.tickets {
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.08), transparent 17rem),
    radial-gradient(circle at 84% 8%, rgba(176, 24, 117, 0.38), transparent 26rem),
    linear-gradient(135deg, #080a16 0%, #151a36 50%, #350d35 100%);
}

.workshop-content,
.workshop-side,
.speaker-card,
.ticket-grid article {
  border-radius: var(--radius-md);
}

.workshop-content {
  border: 1px solid var(--glass-line);
  background: var(--glass);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.workshop-side,
.speaker-card,
.ticket-grid article {
  border-color: var(--glass-line);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
}

.workshop-side {
  display: flex;
  flex-direction: column;
}

.date-chip,
.provisional-badge {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.provisional-badge {
  background: rgba(122, 10, 85, 0.08);
}

.provisional-badge-light {
  background: rgba(255, 255, 255, 0.08);
}

.facilitators > div {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}

.facilitators > div > span,
.speaker-portrait {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.agenda-preview {
  display: grid;
  gap: 0.75rem;
  border: 0;
}

.agenda-item {
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.58);
}

.agenda-item:hover {
  transform: translateY(-3px);
  border-color: rgba(122, 10, 85, 0.18);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 20px 60px rgba(16, 17, 27, 0.08);
}

.agenda-item.featured::before {
  top: 1.35rem;
  bottom: 1.35rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(var(--wine), var(--magenta));
}

.speaker-grid {
  gap: 1.15rem;
}

.speaker-card {
  overflow: hidden;
}

.speaker-portrait {
  background:
    radial-gradient(circle at 48% 35%, rgba(255, 255, 255, 0.2), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(176, 24, 117, 0.5), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015));
}

.speaker-portrait-alt {
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.17), transparent 24%),
    radial-gradient(circle at 80% 70%, rgba(90, 105, 190, 0.45), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015));
}

.placeholder-card {
  opacity: 0.82;
}

.map-frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 90px rgba(16, 17, 27, 0.16);
}

.map-frame::before {
  inset: 0;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: inherit;
}

.ticket-grid {
  gap: 1rem;
  border: 0;
}

.ticket-grid article + article {
  border-left: 1px solid var(--glass-line);
}

.ticket-grid .ticket-featured {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 28px 80px rgba(255, 255, 255, 0.08), 0 34px 90px rgba(0, 0, 0, 0.2);
}

.partner-grid {
  gap: 1rem;
  border: 0;
}

.partner-grid > a,
.partner-combo {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 22px 70px rgba(16, 17, 27, 0.06);
}

.partner-grid > * + * {
  border-left: 1px solid var(--line);
}

.partner-grid .sponsor-placeholder {
  background: rgba(16, 17, 27, 0.04);
}

footer {
  background:
    radial-gradient(circle at 18% 0%, rgba(122, 10, 85, 0.25), transparent 24rem),
    #070914;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .mobile-nav nav {
    border-radius: 24px;
    background: rgba(8, 10, 22, 0.92);
    backdrop-filter: blur(22px);
  }

  .hero-content {
    grid-template-columns: 1fr;
    padding-left: clamp(1.5rem, 5vw, 2.5rem);
  }

  .hero-logo {
    margin-bottom: 0.5rem;
  }

  .workshop-label,
  .workshop-content,
  .workshop-side {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .site-header {
    top: 10px;
    right: 10px;
    left: 10px;
    min-height: 58px;
    padding-inline: 1rem;
  }

  .hero {
    padding: 8.25rem 1.25rem 2.5rem;
  }

  .hero::after {
    inset: 76px 0.75rem 1rem;
    border-radius: 26px;
  }

  .hero-year {
    top: 8.8rem;
    right: -18vw;
    font-size: 44vw;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-facts {
    border-radius: 24px;
  }

  .hero-facts div + div {
    border-left: 0;
  }

  .section-heading h2,
  .workshop h2,
  .venue h2,
  .tickets h2,
  .partners h2 {
    font-size: clamp(2.35rem, 10.8vw, 3.55rem);
  }

  .date-band {
    gap: 2rem;
  }

  .date-display span {
    font-size: clamp(5.5rem, 26vw, 8rem);
  }

.workshop-content,
.workshop-side,
.agenda-item,
.speaker-card,
.ticket-grid article,
.partner-grid > a,
.partner-combo {
  border-radius: 22px;
}

  .agenda-item {
    grid-template-columns: 1fr;
  }

  .agenda-item.featured::before {
    top: 1rem;
    bottom: auto;
    left: 1.45rem;
    width: 42px;
    height: 3px;
  }

.ticket-grid article + article,
.partner-grid > * + * {
  border-left: 1px solid var(--glass-line);
}
}

/* v4 final layout overrides. */
html {
  scroll-padding-top: 112px;
}

#sobre,
#workshop,
#agenda,
#palestrantes,
#local,
#inscricao {
  scroll-margin-top: 112px;
}

.hero {
  align-content: center;
  min-height: clamp(760px, 100svh, 920px);
  padding-top: clamp(5.5rem, 9vh, 7rem);
  padding-bottom: clamp(2rem, 4vh, 2.75rem);
}

.hero::after {
  inset: 86px max(5vw, calc((100vw - var(--max-width)) / 2)) 2rem;
}

.hero-content {
  align-self: start;
  grid-template-rows: auto 1fr auto;
  padding-top: clamp(0.5rem, 1.5vh, 1rem);
  width: min(820px, 78vw);
}

.hero-logo {
  width: min(320px, 28vw);
  margin: 0;
}

.hero h1 {
  max-width: 780px;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  line-height: 0.9;
}

.hero-intro {
  align-self: center;
  max-width: 590px;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}

.hero-actions {
  margin-top: 1.4rem;
}

.hero-facts {
  align-self: end;
  width: min(820px, 78vw);
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}

.section-heading h2,
.venue h2,
.tickets h2,
.partners h2 {
  font-size: clamp(2.5rem, 5vw, 5.15rem);
  line-height: 1;
}

.lead {
  font-weight: 500;
}

.workshop {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.workshop-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 100%;
}

.workshop-label .eyebrow {
  margin-bottom: 0;
}

.workshop-content,
.workshop-side,
.speaker-card,
.ticket-grid article,
.agenda-item,
.partner-grid > a,
.partner-combo {
  min-width: 0;
}

.workshop-content {
  padding: clamp(1.75rem, 3.2vw, 3rem);
}

.workshop h2 {
  max-width: 920px;
  font-size: clamp(2.35rem, 4.15vw, 4.35rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.workshop-content .lead {
  max-width: 760px;
  margin: 1.35rem 0 0.85rem;
  font-size: clamp(1.05rem, 1.65vw, 1.45rem);
}

.workshop-content > p:not(.lead) {
  max-width: 760px;
  line-height: 1.7;
}

.workshop-side {
  align-self: start;
  justify-content: start;
  min-height: 0;
  padding: 1.35rem;
}

.workshop-side > span {
  display: inline-flex;
  align-self: start;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  line-height: 1.2;
}

.workshop-side strong {
  margin: 1.2rem 0 0.35rem;
  font-size: clamp(2.15rem, 3.4vw, 3rem);
  line-height: 0.95;
}

.workshop-side small {
  margin-top: 0.65rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  line-height: 1.55;
  letter-spacing: 0.08em;
}

.facilitators {
  max-width: 760px;
  margin: 2rem 0;
}

.facilitators > div {
  align-items: flex-start;
}

.facilitators strong {
  font-size: 0.82rem;
  line-height: 1.25;
}

.facilitators small {
  line-height: 1.35;
}

.agenda-item h3,
.speaker-card h3,
.ticket-grid h3 {
  overflow-wrap: anywhere;
}

.ticket-grid article {
  min-height: 250px;
}

.ticket-grid strong {
  line-height: 1;
}

@media (max-width: 1180px) {
  .hero {
    min-height: clamp(660px, 100svh, 820px);
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  .hero-content {
    align-self: start;
    grid-template-rows: auto 1fr auto;
    padding-top: clamp(0.5rem, 1.5vh, 1rem);
    width: min(760px, 78vw);
  }

  .hero h1 {
    max-width: 710px;
    font-size: clamp(2.4rem, 4.4vw, 4rem);
    line-height: 0.9;
  }

  .hero-logo {
    width: min(260px, 34vw);
    margin: 0;
  }

  .hero-intro {
    align-self: center;
    max-width: 600px;
    margin-top: 1.15rem;
  }

  .hero-actions {
    margin-top: 1.35rem;
  }

  .hero-facts {
    width: min(820px, 84vw);
    margin-top: 1.65rem;
  }

  .workshop {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 270px);
  }

  .workshop h2 {
    font-size: clamp(2.25rem, 4.6vw, 3.65rem);
  }
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 96px;
  }

  #sobre,
  #workshop,
  #agenda,
  #palestrantes,
  #local,
  #inscricao {
    scroll-margin-top: 96px;
  }

  .hero {
    min-height: auto;
    padding-top: 7.75rem;
  }

  .hero-content,
  .hero-facts {
    width: min(100%, 760px);
  }

  .hero h1 {
    max-width: 680px;
    font-size: clamp(2.75rem, 7.25vw, 4.1rem);
  }

  .hero-logo {
    margin-left: 0;
  }

  .workshop {
    grid-template-columns: 1fr;
  }

  .workshop-side {
    width: min(100%, 360px);
  }
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 86px;
  }

  #sobre,
  #workshop,
  #agenda,
  #palestrantes,
  #local,
  #inscricao {
    scroll-margin-top: 86px;
  }

  .hero {
    min-height: auto;
    padding-top: 9.25rem;
  }

  .hero-content,
  .hero-facts {
    width: 100%;
    max-width: 100%;
  }

  .hero h1 {
    max-width: 21rem;
    font-size: clamp(2.25rem, 9.4vw, 2.85rem);
    line-height: 0.98;
  }

  .hero-intro {
    max-width: 21rem;
    font-size: 1rem;
  }

  .hero-actions {
    margin-top: 1.5rem;
  }

  .hero-facts {
    margin-top: 1.75rem;
  }

  .workshop-label {
    align-items: flex-start;
    flex-direction: column;
  }

  .workshop-content {
    padding: 1.35rem;
  }

  .workshop h2 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    letter-spacing: -0.055em;
  }

  .workshop-content .lead {
    font-size: 1.05rem;
  }

  .facilitators {
    gap: 0.85rem;
  }

  .workshop-side {
    width: 100%;
    padding: 1.25rem;
  }

  .workshop-side strong {
    font-size: 2.35rem;
  }
}

/* ==========================================================================
   v5 desktop hero: this must stay at the end of the file.
   Goal: use the full editorial measure, give the headline room to breathe and
   keep eyebrow, logo, headline, intro, CTAs and the facts bar inside the
   first fold on laptop viewports (1280x720 and up).
   Scoped to >=981px so the existing tablet/mobile stack is untouched.
   ========================================================================== */
@media (min-width: 981px) {
  .hero {
    padding-top: clamp(5.5rem, 9.5vh, 7.5rem);
  }

  /* Copy block and facts bar share one measure so they align on the left. */
  .hero-content,
  .hero-facts {
    width: min(100%, var(--max-width));
    margin-right: auto;
    margin-left: auto;
  }

  .hero-content {
    grid-template-columns: minmax(0, 1.18fr) minmax(230px, 0.82fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "eyebrow logo"
      "title   logo"
      "intro   logo"
      "actions logo";
    align-items: start;
    column-gap: clamp(1.75rem, 4vw, 4rem);
    row-gap: 0;
    /* Optical alignment with the text inside the rounded facts bar. */
    padding: 0 0 0 2rem;
  }

  .hero-content > .eyebrow {
    grid-area: eyebrow;
    margin-bottom: clamp(0.9rem, 2.2vh, 1.5rem);
  }

  .hero-logo {
    grid-area: logo;
    align-self: center;
    /* The .webp is cropped to the lockup, so this is the art's real width
       (the old .png reserved a frame where the art filled only 56%). */
    width: min(400px, 29vw);
    margin: 0;
  }

  .hero h1 {
    grid-area: title;
    max-width: 100%;
    font-size: clamp(2.85rem, 4.3vw, 4.5rem);
    line-height: 0.92;
  }

  .hero-intro {
    grid-area: intro;
    align-self: start;
    max-width: 46ch;
    margin-top: clamp(0.9rem, 2.1vh, 1.5rem);
  }

  .hero-actions {
    grid-area: actions;
    margin-top: clamp(1.1rem, 2.6vh, 1.9rem);
  }

  .hero-facts {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
  }

  .hero-facts div {
    padding: 0.8rem 1.5rem;
  }

  /* Labels sat at 0.55 alpha over the glass pill, under the 4.5:1 floor. */
  .hero-facts small {
    color: rgba(255, 255, 255, 0.78);
  }

  .hero-facts strong {
    font-size: 0.86rem;
  }

}

/* Short laptops: trim the vertical rhythm instead of pushing content down. */
@media (min-width: 981px) and (max-height: 800px) {
  .hero {
    padding-top: 5.25rem;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 3.85vw, 3.7rem);
  }

  .hero-logo {
    width: min(330px, 25vw);
  }
}

/* The intrinsic width/height attributes on the KV lockup reserve its aspect
   ratio (no CLS), but the height attribute is also a presentational hint —
   height:auto is required so the CSS width stays in charge. */
.hero-logo {
  height: auto;
}

/* The optimised .webp is cropped to the lockup itself, so the negative margins
   that used to pull in the old file's empty canvas are gone and every width
   below now describes the artwork rather than a mostly-transparent frame. */
@media (max-width: 980px) {
  .hero-logo {
    justify-self: start;
    width: min(260px, 42vw);
    margin: 0 0 0.9rem;
  }
}

@media (max-width: 680px) {
  .hero-logo {
    justify-self: center;
    width: min(76%, 290px);
    margin: 0.5rem auto 1.1rem;
  }
}

/* ==========================================================================
   v6 desktop hero: kill the dead strip under the facts bar and restore the
   "2026" watermark. The slack used to be split evenly above and below the
   whole block, but the top half is visually absorbed by the floating header,
   so only the bottom half read as empty. Row 1 now takes all the slack with
   the copy centred inside it, and the facts bar rides the bottom rail.
   ========================================================================== */
@media (min-width: 981px) {
  .hero {
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .hero-content {
    align-self: center;
  }

  .hero-facts {
    align-self: end;
  }

  /* Watermark: large, centred on the copy band and bleeding off the right
     edge, so it reads behind the lockup the way it does on mobile rather than
     as a small shape squeezed between the logo and the facts bar.
     z-index 0 keeps it under .hero-content (z-index 2). */
  .hero-year {
    display: grid;
  }
}

/* ==========================================================================
   v7 hero: no slack under the facts bar, watermark parked in the card's
   top-right corner behind the copy, lockup centred in the right column, and
   the stats band lifted out of #sobre so it peeks into the first fold.
   ========================================================================== */
.stats-band {
  padding:
    clamp(2.25rem, 4vh, 3.25rem)
    max(5vw, calc((100vw - var(--max-width)) / 2))
    clamp(2.5rem, 5vh, 3.5rem);
  background:
    radial-gradient(circle at 84% 8%, rgba(122, 10, 85, 0.06), transparent 24rem),
    linear-gradient(180deg, #fbfafe, var(--paper));
  color: var(--ink);
}

.stats-band .about-stats {
  grid-column: auto;
}

/* Tighter than inside #sobre so the numbers and their labels clear the fold
   together — the cut lands in the band's bottom padding, never mid-glyph. */
.stats-band .about-stats div {
  padding-top: clamp(1.1rem, 2.2vh, 1.6rem);
}

@media (min-width: 981px) {
  /* Short enough that the stats band shows below it without scrolling. */
  .hero {
    min-height: clamp(600px, calc(100svh - 170px), 860px);
    padding-bottom: clamp(1.75rem, 3vh, 2.5rem);
  }

  /* Card bottom now hugs the facts bar instead of trailing an empty strip. */
  .hero::after {
    inset: 80px max(5vw, calc((100vw - var(--max-width)) / 2)) 0.85rem;
  }

  .hero-facts {
    margin-top: clamp(1.25rem, 2.5vh, 2rem);
  }

  .hero-logo {
    justify-self: center;
  }

  /* Top-right corner of the card, tucked inside it, behind the copy. */
  .hero-year {
    top: calc(80px + clamp(1rem, 2.5vh, 2rem));
    right: calc(max(5vw, calc((100vw - var(--max-width)) / 2)) + clamp(1rem, 2vw, 2.25rem));
    bottom: auto;
    transform: none;
    font-size: clamp(6.5rem, 10.5vw, 12rem);
    color: rgba(255, 255, 255, 0.016);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  }
}

/* Short desktop screens (1280x720 and similar): the hero is already at its
   floor, so the band itself has to tighten for the labels to clear the fold. */
@media (min-width: 981px) and (max-height: 780px) {
  .hero {
    min-height: clamp(560px, calc(100svh - 165px), 860px);
  }

  .stats-band {
    padding-top: 1.5rem;
    padding-bottom: 1.85rem;
  }

  .stats-band .about-stats div {
    padding-top: 0.9rem;
  }

  .stats-band .about-stats strong {
    font-size: clamp(2.1rem, 3.2vw, 3rem);
  }
}

/* ==========================================================================
   v8 partners: three official groups (Realizacao / Patrocinadores / Parceiros
   de midia) replacing the old flat grid of per-brand labels. With 9 sponsors
   the row-divider treatment broke on wrap, so each brand is now a card.
   ========================================================================== */
.partner-group + .partner-group {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

.partner-group h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.1rem;
  color: var(--wine);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.partner-group h3::after {
  flex: 1;
  height: 1px;
  background: var(--line);
  content: "";
}

.partners .partner-grid {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 0.7rem;
  margin-top: 0;
  border: 0;
}

.partners .partner-grid > * {
  display: grid;
  place-content: center;
  min-height: 138px;
  padding: 1.6rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.partners .partner-grid img {
  justify-self: center;
  width: min(190px, 100%);
  max-height: 56px;
  object-fit: contain;
}

/* Marks that read as square or stacked need vertical room, not width. */
.partners .partner-grid .logo-tall {
  width: min(112px, 100%);
  max-height: 86px;
}

.partners .partner-grid .yazo-logo {
  width: min(126px, 100%);
  max-height: 62px;
}

/* The first group has only two brands; keep the cards from stretching wide. */
.partner-group:first-of-type .partner-grid {
  grid-template-columns: repeat(auto-fit, minmax(196px, 260px));
  justify-content: start;
}

@media (max-width: 680px) {
  .partners .partner-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .partners .partner-grid > * {
    min-height: 96px;
    padding: 1rem 0.85rem;
  }
}

/* ==========================================================================
   Agenda e palestrantes vindos do app do evento
   ==========================================================================

   O conteudo destas duas secoes e montado por assets/event-data.js dentro das
   classes que ja existem (.agenda-item, .speaker-card), entao o grosso do
   design vem de cima. O que segue e so o que a versao com dados reais precisa
   e a versao escrita a mao nao tinha: foto no retrato, lista de palestras e a
   bio expansivel. */

.loading-note {
  margin: 2.5rem 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.loading-note-light {
  color: rgba(255, 255, 255, 0.5);
}

/* Cabecalho de dia, so aparece quando a grade tem mais de uma data. */
.agenda-day {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--wine);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.agenda-day:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* O retrato ja tem overflow:hidden e aspect-ratio, entao a foto so precisa
   preencher. Fica acima dos aneis decorativos, abaixo do rotulo. */
.speaker-portrait img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degrade na base para o rotulo continuar legivel sobre qualquer foto. */
.speaker-portrait:has(img)::after {
  inset: auto 0 0;
  z-index: 2;
  width: 100%;
  aspect-ratio: auto;
  height: 45%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(transparent, rgba(11, 13, 32, 0.85));
}

.speaker-portrait > small {
  z-index: 3;
}

.speaker-talks {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.speaker-talks li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.speaker-talks strong {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
}

.speaker-talks span {
  flex: 0 0 auto;
  color: var(--wine-light, rgba(255, 255, 255, 0.55));
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.speaker-bio {
  margin-top: 0.75rem;
}

/* Nao troque o display deste summary. Com display diferente de list-item o
   Chrome deixa de trata-lo como gatilho do <details> e a bio passa a aparecer
   sempre, aberta ou fechada. Para encolher a area clicavel use width. */
.speaker-bio summary {
  width: fit-content;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.speaker-bio summary::-webkit-details-marker {
  display: none;
}

.speaker-bio summary::after {
  content: " +";
}

.speaker-bio[open] summary::after {
  content: " \2212";
}

.speaker-bio summary:hover {
  color: var(--white);
}

.speaker-bio summary:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* A bio vem do cadastro e nao tem limite de tamanho. Rola por dentro em vez
   de esticar a carta e desalinhar a grade. */
.speaker-bio p {
  max-height: 11rem;
  margin: 0.6rem 0 0;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.7rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Fallback: o embed oficial

   So aparece se a API falhar. Como o embed nao sinaliza a propria altura, aqui
   ela volta a ser fixa -- e o caminho degradado, entao um pouco de folga em
   branco e preferivel a conteudo cortado. Medido: agenda 885px em 1280 e
   1006px em 335; palestrantes 459px e 508px.

   Os nomes das classes vem de fallbackToIframe() em assets/event-data.js. */

.yazo-embed {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

.yazo-embed-agenda {
  height: 1000px;
}

.yazo-embed-palestrantes {
  height: 560px;
}

@media (max-width: 600px) {
  .yazo-embed-agenda {
    height: 1080px;
  }

  .yazo-embed-palestrantes {
    height: 620px;
  }
}