/* ============================================================
   LUGANO SUMMIT 2027 — The Private Wealth Summit
   Design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Work+Sans:wght@300;400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Colour */
  --navy-950: #03060f;
  --navy-900: #05091c;
  --navy-850: #080e26;
  --navy-800: #0d142e;
  --navy-700: #131c3c;
  --navy-600: #1d2850;

  --gold: #9EB0F2;
  --gold-light: #C6CFE4;
  --gold-deep: #9EB0F2;

  --ivory: #05091c;
  --paper: #070c22;
  --paper-deep: #0d142e;

  --ink: #EEF1F8;
  --ink-soft: #AEB8D4;
  --ink-faint: #8E9AB8;

  --on-dark: #EEF1F8;
  --on-dark-soft: #AEB8D4;
  --on-dark-faint: #8E9AB8;

  --rule-dark: rgba(158, 176, 242, 0.30);
  --rule-light: rgba(158, 176, 242, 0.16);

  /* Type */
  --display: 'Libre Caslon Display', 'Times New Roman', Georgia, serif;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Space */
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --section: clamp(5rem, 11vw, 10.5rem);
  --max: 1280px;
  --max-narrow: 820px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule-light); margin: 0; }
::selection { background: var(--gold); color: var(--navy-900); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--max-narrow); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.dark { background: var(--navy-900); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: var(--on-dark); }
.paper { background: var(--paper); }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1.4rem;
  display: block;
}
.dark .eyebrow { color: var(--gold); }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.h1 { font-size: clamp(2.75rem, 7.2vw, 5.75rem); }
.h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; }
.h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.18; }
.h4 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.28; }

.lede {
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  line-height: 1.68;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 58ch;
}
.dark .lede { color: var(--on-dark-soft); }

.body-text { color: var(--ink-soft); font-weight: 300; max-width: 66ch; }
.dark .body-text { color: var(--on-dark-soft); }

.serif-italic { font-family: var(--display); font-style: italic; font-weight: 300; }

.rule {
  width: 56px; height: 1px; background: var(--gold);
  margin: 0 0 2.25rem;
}
.rule--center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.0625rem 2.25rem;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  background: transparent;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.btn--solid { background: var(--gold); color: var(--navy-900); }
.btn--solid:hover { background: transparent; color: var(--gold-deep); }
.dark .btn { color: var(--gold); }
.dark .btn:hover { background: var(--gold); color: var(--navy-900); }
.dark .btn--solid { background: var(--gold); color: var(--navy-900); }
.dark .btn--solid:hover { background: transparent; color: var(--gold); }
.btn--ghost { border-color: rgba(255,255,255,.28); color: var(--on-dark); }
.btn--ghost:hover { background: var(--on-dark); color: var(--navy-900); border-color: var(--on-dark); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule-dark);
  transition: border-color .4s var(--ease), gap .4s var(--ease);
}
.link-arrow:hover { border-color: var(--gold); gap: 1rem; }
.dark .link-arrow { color: var(--gold); }


/* ============================================================
   HEADER — solid sticky bar, hamburger dropdown under 900px.
   Mirrors the inline header in index.html; keep the two in step.
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(5, 9, 28, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(158, 176, 242, 0.16);
}
.site-nav__inner {
  max-width: 1320px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-nav__logo { display: flex; align-items: center; flex: none; }
.site-nav__logo img { height: 52px; width: auto; }
.site-nav__menu {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.site-nav__menu a { color: #C6CFE4; padding: 6px 0; position: relative; white-space: nowrap; }
.site-nav__menu a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--gold); transition: width .35s var(--ease);
}
.site-nav__menu a:hover, .site-nav__menu a.is-current { color: #fff; }
.site-nav__menu a:hover::after, .site-nav__menu a.is-current::after { width: 100%; }
.site-nav__toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; flex: none; }
.site-nav__toggle span {
  display: block; width: 26px; height: 2px; background: var(--on-dark); margin: 5px 0;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.site-nav.is-open .site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-nav__logo img { height: 44px; }
  .site-nav__toggle { display: block; }
  .site-nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-900); border-bottom: 1px solid rgba(158, 176, 242, 0.16);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .4s var(--ease), visibility .4s;
  }
  .site-nav.is-open .site-nav__menu { max-height: 60vh; visibility: visible; overflow-y: auto; }
  .site-nav__menu a { padding: 17px 24px; border-top: 1px solid rgba(158, 176, 242, 0.12); font-size: 14px; }
  .site-nav__menu a::after { display: none; }
}

/* Interior pages sit under a solid bar, so they no longer need the hero offset */
.site-nav + main .page-hero { padding-top: clamp(4rem, 8vw, 7rem); }

/* Tier cards no longer carry a price line */
.tier__name + ul { margin-top: 1.75rem; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1.5rem;
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(5, 9, 28, 0.90);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  padding-block: 1rem;
  border-bottom-color: rgba(158,176,242,.16);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav__logo img { height: 30px; width: auto; transition: height .5s var(--ease); }
.nav.is-solid .nav__logo img { height: 26px; }

.nav__menu { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.25rem); list-style: none; }
.nav__menu a {
  font-size: .7rem; font-weight: 400; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(255,255,255,.78); padding-block: .35rem; position: relative;
  transition: color .35s var(--ease);
}
.nav__menu a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--gold); transition: width .45s var(--ease);
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] { color: #fff; }
.nav__menu a:hover::after, .nav__menu a[aria-current="page"]::after { width: 100%; }

.nav__cta {
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--on-dark);
  padding: .7rem 1.35rem; transition: all .4s var(--ease); white-space: nowrap;
}
.nav__cta:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }

.nav__toggle { display: none; background: none; border: 0; padding: .4rem; }
.nav__toggle span { display: block; width: 24px; height: 1px; background: #fff; margin: 6px 0; transition: transform .4s var(--ease), opacity .3s; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__toggle { display: block; }
  .nav__cta { display: none; }
  .nav__menu {
    position: fixed; inset: 0; flex-direction: column; justify-content: center;
    background: var(--navy-950); gap: 0;
    opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
  }
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; }
  .nav__menu li { width: min(420px, 78vw); border-bottom: 1px solid rgba(158,176,242,.16); }
  .nav__menu li:first-child { border-top: 1px solid rgba(158,176,242,.16); }
  .nav__menu a { display: block; padding: 1.15rem 0; font-size: .82rem; font-family: var(--display); letter-spacing: .1em; }
  .nav__menu a::after { display: none; }
}

/* Nav on light pages, before scroll */
.nav--light:not(.is-solid) .nav__logo img { filter: none; }
.nav--light:not(.is-solid) .nav__menu a { color: rgba(16,26,40,.72); }
.nav--light:not(.is-solid) .nav__menu a:hover,
.nav--light:not(.is-solid) .nav__menu a[aria-current="page"] { color: var(--navy-900); }
.nav--light:not(.is-solid) .nav__cta { color: var(--gold-deep); border-color: rgba(162,130,60,.5); }
.nav--light:not(.is-solid) .nav__toggle span { background: var(--navy-900); }
@media (max-width: 1024px) {
  .nav--light.is-open:not(.is-solid) .nav__toggle span { background: #fff; }
  .nav--light:not(.is-solid) .nav__menu a { color: rgba(255,255,255,.78); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden; background: var(--navy-950);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) brightness(.58);
  transform: scale(1.06);
  animation: heroDrift 24s var(--ease) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,14,25,.86) 0%, rgba(7,14,25,.42) 42%, rgba(7,14,25,.92) 100%),
    radial-gradient(120% 90% at 50% 55%, rgba(7,14,25,0) 30%, rgba(7,14,25,.75) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: 9rem 8.5rem; text-align: center; }

.hero__presented {
  font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 2.5rem;
}
.hero__presented b { color: var(--gold-light); font-weight: 500; }

.hero__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(3rem, 9.2vw, 8.5rem);
  line-height: .95; letter-spacing: -0.02em; color: #fff;
  margin-bottom: .35rem;
}
.hero__title span { display: block; color: var(--gold); font-weight: 400; }

.hero__sub {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  color: rgba(255,255,255,.9); margin-top: 1.4rem;
}
.hero__desc {
  margin: 1.75rem auto 0; max-width: 44rem;
  color: rgba(255,255,255,.72); font-weight: 300;
  font-size: clamp(.95rem, 1.15vw, 1.0625rem);
}

.hero__meta {
  margin-top: 3.25rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1rem 2rem;
}
.hero__meta span {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; font-weight: 500;
}
.hero__meta i { width: 4px; height: 4px; background: var(--gold); display: block; transform: rotate(45deg); }

.hero__actions { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 2.25rem; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .85rem;
  font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.hero__scroll::after {
  content: ''; width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2.6s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: .35; transform: scaleY(.65); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-height: 720px), (max-width: 560px) { .hero__scroll { display: none; } .hero__inner { padding-block: 8rem 4rem; } }

/* Page hero (interior pages) */
.page-hero {
  position: relative; background: var(--navy-900); color: var(--on-dark);
  padding: clamp(9rem, 16vw, 13rem) 0 clamp(4rem, 7vw, 6.5rem);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; opacity: .26; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) brightness(.75); }
.page-hero__bg::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,9,28,.72), rgba(5,9,28,.96)); }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: 1.5rem; }
.page-hero .lede { color: rgba(255,255,255,.74); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Section heading block */
.sec-head { max-width: 62ch; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin-bottom: 1.5rem; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-dark); border-block: 1px solid var(--rule-dark); }
.stat { background: rgba(158,176,242,0.04); padding: clamp(2rem, 3.5vw, 3.25rem) clamp(1.25rem, 2vw, 2rem); }
.stat__num { font-family: var(--display); font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1; color: var(--gold); font-weight: 300; }
.stat__label { margin-top: .9rem; font-size: .78rem; line-height: 1.55; color: var(--on-dark-soft); font-weight: 300; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

/* Pillar grid */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); }
.pillar { background: rgba(158,176,242,0.04); padding: clamp(2rem, 3vw, 2.75rem); position: relative; transition: background .5s var(--ease); }
.pillar:hover { background: rgba(158,176,242,0.10); }
.pillar__num { font-family: var(--display); font-size: .95rem; color: var(--gold-deep); letter-spacing: .1em; }
.pillar h3 { font-family: var(--display); font-size: 1.45rem; margin: 1rem 0 .85rem; line-height: 1.2; }
.pillar p { font-size: .9rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; }
.pillar::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px;
  background: var(--gold); transition: width .6s var(--ease);
}
.pillar:hover::after { width: 100%; }
.dark .pillars { background: rgba(158,176,242,.16); border-color: rgba(158,176,242,.16); }
.dark .pillar { background: rgba(158,176,242,0.04); }
.dark .pillar:hover { background: rgba(158,176,242,0.10); }
.dark .pillar p { color: var(--on-dark-soft); }

/* Day cards */
.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
@media (max-width: 900px) { .days { grid-template-columns: 1fr; } }
.day {
  border: 1px solid var(--rule-light); padding: clamp(2rem, 3vw, 2.75rem);
  display: flex; flex-direction: column; min-height: 320px;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
  background: rgba(158,176,242,0.04);
}
.day:hover { border-color: var(--gold); transform: translateY(-4px); }
.day--feature { background: rgba(158,176,242,0.12); border-color: var(--gold); color: var(--on-dark); }
.day--feature .day__label { color: var(--gold); }
.day--feature p { color: var(--on-dark-soft); }

/* Day cards inside a dark section: invert the treatment so the feature card leads */
.dark .day { background: transparent; border-color: rgba(255,255,255,.16); color: var(--on-dark); }
.dark .day h3 { color: var(--on-dark); }
.dark .day p { color: var(--on-dark-soft); }
.dark .day__label { color: var(--gold); }
.dark .day:hover { border-color: var(--gold); background: rgba(158,176,242,.05); }
.dark .day--feature { background: rgba(158,176,242,0.12); border-color: var(--gold); }
.dark .day--feature h3 { color: #fff; }
.dark .day--feature p { color: var(--on-dark-soft); }
.dark .day--feature .day__label { color: var(--gold); }
.dark .day--feature:hover { background: rgba(158,176,242,0.18); border-color: var(--gold); }
.day__label { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.day h3 { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 1.95rem); margin: 1.1rem 0 auto; line-height: 1.15; }
.day p { margin-top: 1.5rem; font-size: .9rem; line-height: 1.68; color: var(--ink-soft); font-weight: 300; }

/* Speaker cards */
.speakers-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.2vw, 2rem);
}
.speaker { position: relative; }
.speaker__img {
  position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--paper-deep);
  border: 1px solid var(--rule-light);
}
.speaker__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform .9s var(--ease);
}
.speaker:hover .speaker__img img { transform: scale(1.045); }
/* Standing in for a speaker whose photograph we do not have. A monogram in
   the display face reads as a decision rather than a gap in the grid. */
.speaker__img--initials { display: grid; place-items: center; background: var(--paper-deep); }
.speaker__img--initials span {
  font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: .1em; color: var(--gold); opacity: .55;
}
.speaker__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,9,28,0) 55%, rgba(5,9,28,.35) 100%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.speaker:hover .speaker__img::after { opacity: 1; }
.speaker h3 { font-family: var(--display); font-size: 1.3rem; margin: 1.25rem 0 .4rem; line-height: 1.2; }
.speaker__role { font-size: .78rem; line-height: 1.55; color: var(--ink-faint); font-weight: 300; }
.speaker__org { display: block; color: var(--gold-deep); font-weight: 500; letter-spacing: .04em; }
.dark .speaker__role { color: var(--on-dark-faint); }
.dark .speaker__org { color: var(--gold); }
.dark .speaker__img { border-color: rgba(255,255,255,.1); }

/* Logo strip */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2.5rem, 6vw, 5.5rem); }
.logos img { height: clamp(30px, 3.4vw, 44px); width: auto; object-fit: contain; opacity: .85; transition: opacity .4s var(--ease); }
.logos img:hover { opacity: 1; }
.logos--invert img { background: #F4F6FA; padding: 14px 24px; opacity: 1; box-sizing: content-box; }
.logos--invert img:hover { opacity: 1; }
.logos__text { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: .02em; color: var(--ink); opacity: .7; }
.dark .logos__text { color: rgba(255,255,255,.75); }

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split__media--frame::before {
  content: ''; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold); z-index: -1;
}

/* Agenda / timeline */
.agenda-day { margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.agenda-day__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 1.75rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--gold); margin-bottom: 0;
}
.agenda-day__head h2 { font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.6rem); }
.agenda-day__date { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.dark .agenda-day__date { color: var(--gold); }

.slot {
  display: grid; grid-template-columns: 140px 1fr; gap: clamp(1rem, 3vw, 3rem);
  padding: 1.9rem 0; border-bottom: 1px solid var(--rule-light);
  transition: background .4s var(--ease);
}
.dark .slot { border-bottom-color: rgba(255,255,255,.09); }
.slot:hover { background: rgba(158,176,242,.05); }
@media (max-width: 700px) { .slot { grid-template-columns: 1fr; gap: .6rem; } }
.slot__time { font-size: .78rem; letter-spacing: .1em; color: var(--gold-deep); font-weight: 500; padding-top: .2rem; }
.dark .slot__time { color: var(--gold); }
.slot__title { font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.25; }
.slot__desc { margin-top: .6rem; font-size: .88rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; max-width: 62ch; }
.dark .slot__desc { color: var(--on-dark-soft); }
.slot__tag {
  display: inline-block; margin-top: .85rem; font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep); border: 1px solid var(--rule-dark);
  padding: .35rem .75rem;
}
.dark .slot__tag { color: var(--gold); }
.slot--break .slot__title { font-style: italic; font-weight: 300; color: var(--ink-faint); font-size: 1.15rem; }
.dark .slot--break .slot__title { color: var(--on-dark-faint); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: .55rem; }
.field label {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.dark .field label { color: var(--on-dark-faint); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: .95rem; font-weight: 300; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-light);
  padding: .7rem 0; transition: border-color .4s var(--ease);
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239EB0F2' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); opacity: .6; }
.dark .field input, .dark .field select, .dark .field textarea {
  color: var(--on-dark); border-bottom-color: rgba(255,255,255,.18);
}
.dark .field select { background-color: transparent; }
.dark .field select option { background: var(--navy-900); color: var(--on-dark); }
.dark .field input:focus, .dark .field select:focus, .dark .field textarea:focus { border-bottom-color: var(--gold); }

.check { display: flex; gap: .85rem; align-items: flex-start; }
.check input { width: 16px; height: 16px; margin-top: .28rem; accent-color: var(--gold-deep); flex-shrink: 0; }
.check label { font-size: .8rem; line-height: 1.6; color: var(--ink-soft); font-weight: 300; letter-spacing: 0; text-transform: none; }
.dark .check label { color: var(--on-dark-soft); }
.check a { color: var(--gold-deep); border-bottom: 1px solid var(--rule-dark); }
.dark .check a { color: var(--gold); }

.form__note { font-size: .78rem; color: var(--ink-faint); font-weight: 300; line-height: 1.6; }
.dark .form__note { color: var(--on-dark-faint); }

.form-status {
  display: none; padding: 1.1rem 1.35rem; border: 1px solid var(--gold);
  background: rgba(158,176,242,.08); font-size: .88rem; font-weight: 300; color: var(--ink);
}
.dark .form-status { color: var(--on-dark); }
.form-status.is-visible { display: block; }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 3.25rem 0 1.1rem; line-height: 1.2; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--display); font-size: 1.25rem; margin: 2.25rem 0 .8rem; }
.prose p { margin-bottom: 1.15rem; color: var(--ink-soft); font-weight: 300; line-height: 1.8; font-size: .95rem; }
.prose ul { margin: 0 0 1.5rem 1.15rem; padding-left: 0; }
.prose li { color: var(--ink-soft); font-weight: 300; line-height: 1.8; margin-bottom: .55rem; font-size: .95rem; }
.prose li::marker { color: var(--gold-deep); }
.prose a { color: var(--gold-deep); border-bottom: 1px solid var(--rule-dark); transition: border-color .3s; }
.prose a:hover { border-bottom-color: var(--gold); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose__meta { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3rem; }
.prose hr { margin: 3rem 0; }

/* ---------- Quote ---------- */
.quote { text-align: center; max-width: 48rem; margin-inline: auto; }
.quote__mark { font-family: var(--display); font-size: 4rem; line-height: 1; color: var(--gold); opacity: .5; }
.quote p { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.35; font-weight: 300; font-style: italic; margin: .5rem 0 1.75rem; }
.quote cite { font-style: normal; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.dark .quote cite { color: var(--gold); }

/* ---------- Tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
@media (max-width: 950px) { .tiers { grid-template-columns: 1fr; } }
.tier { border: 1px solid var(--rule-light); padding: clamp(2rem, 3vw, 2.75rem); display: flex; flex-direction: column; background: rgba(158,176,242,0.04); }
.tier--feature { background: rgba(158,176,242,0.12); border-color: var(--gold); color: var(--on-dark); }
.tier--feature li { color: var(--on-dark-soft); }
.tier--feature .tier__name { color: var(--gold); }
.tier__name { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.tier__price { font-family: var(--display); font-size: clamp(1.75rem, 2.8vw, 2.35rem); margin: 1rem 0 1.75rem; line-height: 1.1; }
.tier ul { list-style: none; display: grid; gap: .85rem; }
.tier li { font-size: .875rem; line-height: 1.55; color: var(--ink-soft); font-weight: 300; padding-left: 1.35rem; position: relative; }
.tier li::before { content: ''; position: absolute; left: 0; top: .58rem; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
/* Tiers inside a dark section */
.dark .tier { background: transparent; border-color: rgba(255,255,255,.16); color: var(--on-dark); }
.dark .tier li { color: var(--on-dark-soft); }
.dark .tier--feature { background: rgba(158,176,242,.09); border-color: var(--gold); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: var(--on-dark-soft); padding-block: clamp(4rem, 7vw, 6rem) 2.5rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 960px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }
.footer__logo img { height: 32px; margin-bottom: 1.5rem; }
.footer__blurb { font-size: .85rem; line-height: 1.75; font-weight: 300; color: var(--on-dark-faint); max-width: 34ch; }
.footer h4 { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.35rem; font-weight: 500; }
.footer ul { list-style: none; display: grid; gap: .7rem; }
.footer a { font-size: .85rem; font-weight: 300; color: var(--on-dark-soft); transition: color .35s var(--ease); }
.footer a:hover { color: var(--gold-light); }
.footer__bottom {
  padding-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: .74rem; font-weight: 300; color: var(--on-dark-faint);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__social { display: flex; gap: 1.25rem; }
.footer__social a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.16); transition: all .4s var(--ease); }
.footer__social a:hover { border-color: var(--gold); background: var(--gold); }
.footer__social svg { width: 15px; height: 15px; fill: currentColor; }
.footer__social a:hover svg { fill: var(--navy-900); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--navy-900); text-align: center; }
.cta-band__bg { position: absolute; inset: 0; opacity: .2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5); }
.cta-band__bg::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,9,28,.86), rgba(5,9,28,.94)); }
.cta-band .wrap { position: relative; z-index: 2; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; }
.gallery figure { margin: 0; overflow: hidden; aspect-ratio: 4/3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__bg img { animation: none; transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Countdown ---------- */
.countdown-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.75rem, 5vw, 4.5rem);
}
.cd { text-align: center; min-width: 74px; }
.cd__num {
  display: block; font-family: var(--display); font-weight: 300;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.cd__lbl { display: block; margin-top: .6rem; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-faint); }
.cd__note {
  margin-left: auto; font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--on-dark-soft);
  text-align: right; padding-left: 2rem; border-left: 1px solid rgba(158,176,242,.28);
}
@media (max-width: 780px) {
  .countdown-row { justify-content: space-between; }
  .cd__note { margin: 1.5rem 0 0; text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid rgba(158,176,242,.28); padding-top: 1.5rem; width: 100%; }
}
@media (max-width: 560px) {
  /* four units in a row no longer fit the gutter — go two by two */
  .countdown-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .cd { min-width: 0; text-align: left; }
  .cd__note { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- Chapter comparison ---------- */
.chapter { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }
@media (max-width: 900px) { .chapter { grid-template-columns: 1fr; } }
.chapter__col { background: rgba(158,176,242,0.04); padding: clamp(2rem, 3.2vw, 3rem); border: 1px solid transparent; }
.chapter__col--feature { background: rgba(158,176,242,0.12); color: var(--on-dark); }
.chapter__col--feature h3 { color: #fff; }
.chapter__col--feature .chapter__years { color: var(--gold); }
.chapter__col--feature .tick li { color: var(--on-dark-soft); }
.chapter__years { display: block; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; margin-bottom: 1rem; }
.chapter__col h3 { margin-bottom: 2rem; }
.chapter__arrow { display: grid; place-items: center; color: var(--gold); }
.chapter__arrow svg { width: 60px; }
@media (max-width: 900px) { .chapter__arrow svg { transform: rotate(90deg); width: 40px; } }

.tick { list-style: none; display: grid; gap: 1rem; }
.tick li { position: relative; padding-left: 1.5rem; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); font-weight: 300; }
.tick li::before { content: ''; position: absolute; left: 0; top: .55rem; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

/* ---------- Pillar CTA card ---------- */
.pillar--cta { background: rgba(158,176,242,0.12); color: var(--on-dark); display: flex; flex-direction: column; justify-content: center; }
.pillar--cta h3 { color: #fff; margin-top: 0; }
.pillar--cta p { color: var(--on-dark-soft); }
.pillar--cta:hover { background: rgba(158,176,242,0.18); }
.pillar--cta .link-arrow { color: var(--gold); align-self: flex-start; }

/* ---------- Audience list ---------- */
.audience { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule-light); }
.audience li { padding: 1.15rem 0; border-bottom: 1px solid var(--rule-light); }
.audience strong { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 500; letter-spacing: .005em; }
.audience span { display: block; margin-top: .25rem; font-size: .85rem; color: var(--ink-faint); font-weight: 300; line-height: 1.5; }
.dark .audience { border-top-color: rgba(255,255,255,.12); }
.dark .audience li { border-bottom-color: rgba(255,255,255,.12); }
.dark .audience span { color: var(--on-dark-faint); }

/* ---------- Feature list ---------- */
.feature-list { list-style: none; display: grid; gap: 1rem; }
.feature-list li { position: relative; padding-left: 1.5rem; font-size: .92rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: .6rem; width: 6px; height: 1px; background: var(--gold); }
.feature-list strong { color: var(--ink); font-weight: 500; }
.dark .feature-list li { color: var(--on-dark-soft); }
.dark .feature-list strong { color: var(--on-dark); }

.venue-facts { border-top: 1px solid var(--rule-dark); padding-top: 1.5rem; }
.venue-facts p { font-size: .875rem; line-height: 1.7; color: var(--ink-soft); font-weight: 300; }
.venue-facts strong { color: var(--ink); font-weight: 500; letter-spacing: .01em; }

/* ---------- Why grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.why-grid article { border-top: 1px solid var(--gold); padding-top: 1.5rem; }
.why-grid h3 { margin-bottom: .75rem; }
.why-grid p { font-size: .9rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; }

/* ---------- Organisers ---------- */
.organisers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); }
@media (max-width: 780px) { .organisers { grid-template-columns: 1fr; } }
.organiser { background: rgba(158,176,242,0.04); padding: clamp(2.25rem, 3.5vw, 3.25rem); }
.organiser img { height: 46px; width: auto; object-fit: contain; margin-bottom: 1.75rem; }
.organiser h3 { margin-bottom: .9rem; }
.organiser p { font-size: .9rem; line-height: 1.7; color: var(--ink-soft); font-weight: 300; }

.hosts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 780px) { .hosts { grid-template-columns: 1fr; } }
.host { display: flex; gap: 1.5rem; align-items: flex-start; }
.host img { width: 92px; height: 92px; object-fit: cover; object-position: center 20%; flex-shrink: 0; border: 1px solid var(--rule-light); }
.host__role { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin: .4rem 0 .75rem; font-weight: 500; }
.host__bio { font-size: .875rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; }
.dark .host__bio { color: var(--on-dark-soft); }
.dark .host__role { color: var(--gold); }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: 3rem; }
.mb-m { margin-bottom: 2rem; }
.mx-auto { margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================================================
   APPENDED BLOCK — Contact · Lugano Circle · Member Dashboard
   Supports: contact.html, circle.html, dashboard.html
   Additive only; uses existing tokens. Nothing above is modified.
   ============================================================ */

/* ---------- Contact: form + sidebar layout ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Contact sidebar (gold hairline blocks) ---------- */
.contact-side { border-top: 1px solid var(--gold); }
.contact-side__block { padding: 1.75rem 0; border-bottom: 1px solid var(--rule-dark); }
.contact-side__block:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-side h3 {
  font-family: var(--sans); font-size: .66rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .95rem;
}
.contact-side p { font-size: .9rem; line-height: 1.75; color: var(--ink-soft); font-weight: 300; }
.contact-side strong { color: var(--ink); font-weight: 500; }
.contact-side a { color: var(--ink); border-bottom: 1px solid var(--rule-dark); transition: border-color .35s var(--ease); }
.contact-side a:hover { border-bottom-color: var(--gold); }
.contact-side__note { margin-top: .6rem; font-size: .82rem; line-height: 1.65; color: var(--ink-faint); }
.contact-side__note a { color: var(--gold-deep); }
/* social icons reused on a light background */
.contact-side .footer__social a { border: 1px solid var(--rule-light); color: var(--ink-soft); }
.contact-side .footer__social a:hover { border-color: var(--gold); background: var(--gold); color: var(--navy-900); }

/* ---------- Tier price shown as words rather than a figure ---------- */
.tier__price--text {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-style: italic; font-weight: 300;
}

/* ---------- Members' entrance (circle.html) ---------- */
.member-login {
  max-width: 460px; margin-inline: auto;
  border: 1px solid var(--rule-dark); background: var(--ivory);
  padding: clamp(2rem, 4vw, 2.75rem);
  gap: 1.4rem;
}
.member-login .btn { justify-content: center; }
.member-login__links {
  text-align: center; font-size: .8rem; font-weight: 300;
  line-height: 1.6; color: var(--ink-faint); margin: 0;
}
.member-login__links + .member-login__links { margin-top: -.75rem; }
.member-login__links a { color: var(--gold-deep); border-bottom: 1px solid var(--rule-dark); transition: border-color .35s var(--ease); }
.member-login__links a:hover { border-bottom-color: var(--gold); }

/* ---------- Dashboard header (dashboard.html) ---------- */
.dash-head {
  background: var(--navy-950); color: var(--on-dark);
  border-bottom: 1px solid rgba(158,176,242,.22);
  padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
}
.dash-head__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.dash-head__logo img { height: 34px; width: auto; }
.dash-head__label {
  font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); padding-left: 2rem; border-left: 1px solid rgba(158,176,242,.3);
}
.dash-head__out {
  margin-left: auto; font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-soft); padding-bottom: .3rem;
  border-bottom: 1px solid rgba(255,255,255,.2);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.dash-head__out:hover { color: var(--gold); border-bottom-color: var(--gold); }
@media (max-width: 640px) {
  .dash-head__label { padding-left: 0; border-left: 0; }
  .dash-head__out { margin-left: 0; }
}

/* ---------- Dashboard empty-state panels ---------- */
.panel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.panel {
  position: relative; background: var(--ivory);
  border: 1px solid var(--rule-dark);
  padding: clamp(2rem, 3.2vw, 2.75rem);
  min-height: 240px; display: flex; flex-direction: column;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.panel:hover { border-color: var(--gold); background: rgba(158,176,242,0.07); }
.panel::before, .panel::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  pointer-events: none; opacity: .5; transition: opacity .5s var(--ease);
}
.panel::before { top: -1px; left: -1px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.panel::after { right: -1px; bottom: -1px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.panel:hover::before, .panel:hover::after { opacity: 1; }
.panel h3 { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; margin-bottom: .85rem; }
.panel p { font-size: .9rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; }
.panel__soon {
  margin-top: auto; padding-top: 1.9rem;
  font-size: .62rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.panel__soon::before {
  content: ''; display: inline-block; width: 5px; height: 5px;
  background: var(--gold); transform: rotate(45deg);
  margin-right: .75rem; vertical-align: middle;
}

/* ============================================================
   PAST SPEAKERS PAGE (speakers.html) — appended
   ============================================================ */

/* ---------- Sector filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); }
.filter-bar button {
  position: relative; background: transparent; border: 0;
  padding: 0 0 .9rem; border-bottom: 1px solid var(--rule-light);
  font-family: var(--sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
  transition: color .4s var(--ease);
}
.filter-bar button::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px;
  background: var(--gold); transition: width .5s var(--ease);
}
.filter-bar button:hover { color: var(--ink); }
.filter-bar button.is-active { color: var(--gold-deep); }
.filter-bar button.is-active::after { width: 100%; }
.dark .filter-bar button { border-bottom-color: rgba(255,255,255,.14); color: var(--on-dark-faint); }
.dark .filter-bar button:hover { color: var(--on-dark); }
.dark .filter-bar button.is-active { color: var(--gold); }

/* ---------- Grouped speaker sets ---------- */
.group-head {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: clamp(3.5rem, 6vw, 5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
.group-head--first { margin-top: clamp(2.75rem, 4.5vw, 3.75rem); }
.group-head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.2; white-space: nowrap;
}
.group-head::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--rule-dark); }

/* ---------- Organisations register ---------- */
.orgs {
  list-style: none; columns: 3; column-gap: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule-dark);
}
.orgs li {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.35; letter-spacing: .005em;
  padding: .95rem 0; border-bottom: 1px solid var(--rule-dark);
}
@media (max-width: 860px) { .orgs { columns: 2; } }
@media (max-width: 520px) { .orgs { columns: 1; } }

/* ============================================================
   LUGANO CIRCLE — AUTH (login.html)
   ============================================================ */
.auth { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 7rem 1.25rem 4rem; overflow: hidden; }
.auth__bg { position: absolute; inset: 0; }
.auth__bg img { width: 100%; height: 100%; object-fit: cover; }
.auth__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,9,28,.86), rgba(5,9,28,.94) 45%, rgba(5,9,28,.99)); }
.auth__card {
  position: relative; z-index: 2; width: 100%; max-width: 470px;
  background: rgba(158,176,242,.05); border: 1px solid var(--rule-light);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.auth__mark { display: block; height: 40px; width: auto; margin: 0 auto 1.6rem; }
.auth__title { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; text-align: center; }
.auth__sub { margin-top: .7rem; text-align: center; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); font-weight: 300; }

.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 1.9rem 0 1.75rem; border-bottom: 1px solid var(--rule-light); }
.auth__tabs button {
  background: none; border: 0; padding: .8rem 0 .85rem; position: relative;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-faint); transition: color .3s var(--ease);
}
.auth__tabs button::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--gold); transition: width .35s var(--ease); }
.auth__tabs button.is-active { color: #fff; }
.auth__tabs button.is-active::after { width: 100%; }

.auth__pane { display: none; }
/* the sign-in form used to sit under the "or" rule that separated it from the
   Google button; leading a pane it needs that space of its own */
.auth__pane > .form:first-child { margin-top: 2rem; }
.auth__pane.is-active { display: block; }



.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.auth__foot { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule-light); text-align: center; font-size: .82rem; color: var(--ink-soft); font-weight: 300; }
.auth__foot a { color: var(--gold); border-bottom: 1px solid var(--rule-dark); }
.auth .btn { width: 100%; justify-content: center; }
.auth .form { gap: 1.25rem; }
.auth__back { position: relative; z-index: 2; margin-top: 1.75rem; text-align: center; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.auth__back a { color: var(--ink-faint); }
.auth__back a:hover { color: var(--gold); }

/* ============================================================
   MEMBER AREA SHELL — bar + dropdown (dashboard*.html)
   ============================================================ */
.dash-bar { background: var(--navy-950); border-bottom: 1px solid rgba(158,176,242,.22); }
.dash-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
}
.dash-bar__label {
  font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.dash-bar__crumb { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-faint); }
.dash-bar__crumb::before { content: '·'; margin: 0 .6rem; color: var(--on-dark-faint); }

.dash-menu { position: relative; margin-left: auto; }
.dash-menu__btn {
  display: inline-flex; align-items: center; gap: .7rem;
  background: none; border: 1px solid var(--rule-light); padding: .5rem .85rem .5rem .5rem;
  color: var(--on-dark); transition: border-color .3s var(--ease), background .3s var(--ease);
}
.dash-menu__btn:hover, .dash-menu.is-open .dash-menu__btn { border-color: var(--gold); background: rgba(158,176,242,.07); }
.dash-menu__avatar {
  width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  background: var(--gold); color: var(--navy-900);
  font-size: .66rem; font-weight: 600; letter-spacing: .06em;
}
.dash-menu__name { font-size: .78rem; letter-spacing: .04em; white-space: nowrap; }
.dash-menu__btn svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .3s var(--ease); }
.dash-menu.is-open .dash-menu__btn svg { transform: rotate(180deg); }

.dash-menu__panel {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 70; min-width: 232px;
  background: var(--navy-850); border: 1px solid rgba(158,176,242,.24);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.dash-menu.is-open .dash-menu__panel { opacity: 1; visibility: visible; transform: none; }
.dash-menu__panel a {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem;
  font-size: .82rem; font-weight: 300; color: var(--on-dark-soft);
  border-bottom: 1px solid rgba(158,176,242,.12);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.dash-menu__panel a:last-child { border-bottom: 0; }
.dash-menu__panel a:hover { background: rgba(158,176,242,.08); color: #fff; }
.dash-menu__panel a[aria-current="page"] { color: var(--gold); }
.dash-menu__panel a i { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: none; opacity: 0; transition: opacity .25s; }
.dash-menu__panel a:hover i, .dash-menu__panel a[aria-current="page"] i { opacity: 1; }
.dash-menu__sep { height: 1px; background: rgba(158,176,242,.2); }

/* ---------- Member area headings ---------- */
.dash-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; }
.dash-intro h1 { margin-bottom: .9rem; }

/* ============================================================
   EVENTS
   ============================================================ */
.event-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 0; border: 1px solid var(--gold); background: rgba(158,176,242,.06); }
@media (max-width: 860px) { .event-hero { grid-template-columns: minmax(0, 1fr); } .event-hero > * { min-width: 0; } }
.event-hero__media { min-height: 260px; overflow: hidden; }
.event-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.event-hero__body { padding: clamp(1.75rem, 3.4vw, 2.75rem); display: flex; flex-direction: column; }
.event-hero__body h2 { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.18; margin: 1rem 0 .9rem; }
.event-hero__body p { font-size: .92rem; line-height: 1.7; color: var(--on-dark-soft); font-weight: 300; }
.event-hero__actions { margin-top: auto; padding-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.event-flag { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 500; }

.event-list { display: grid; gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); }
.event {
  display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: clamp(1rem,2.4vw,2rem);
  align-items: center; padding: 1.5rem clamp(1.1rem,2vw,1.75rem);
  background: var(--navy-900); transition: background .35s var(--ease);
}
.event:hover { background: rgba(158,176,242,.06); }
/* .event__actions, not .event__cta: the seat link gained a Calendar sibling
   and a wrapper, and the wrapper is what the grid places. Targeting the old
   class left the pair sitting in the 74px date column, where "Calendar ↓"
   overflowed by 112px at every phone width. */
@media (max-width: 760px) {
  .event { grid-template-columns: 74px minmax(0,1fr); }
  .event__actions { grid-column: 2; justify-self: start; }
}
.event__date { text-align: center; border-right: 1px solid var(--rule-light); padding-right: 1rem; }
.event__day { display: block; font-family: var(--display); font-size: 2rem; line-height: 1; color: #fff; }
.event__mon { display: block; margin-top: .3rem; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.event__yr { display: block; margin-top: .15rem; font-size: .58rem; letter-spacing: .16em; color: var(--on-dark-faint); }
.event__title { font-family: var(--display); font-size: clamp(1.1rem,1.7vw,1.35rem); line-height: 1.25; color: #fff; }
.event__meta { margin-top: .45rem; font-size: .8rem; color: var(--on-dark-faint); font-weight: 300; }
.event__meta b { color: var(--on-dark-soft); font-weight: 400; }
.event__tag { display: inline-block; margin-top: .6rem; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--rule-dark); padding: .3rem .6rem; }
.event__cta { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--rule-dark); padding-bottom: .25rem; white-space: nowrap; transition: border-color .3s; }
.event__cta:hover { border-bottom-color: var(--gold); }
.event--summit { background: rgba(158,176,242,.10); }
.event--summit .event__day, .event--summit .event__title { color: #fff; }

/* ============================================================
   BLOG
   ============================================================ */
.post-lead { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(1.75rem,3.5vw,3rem); align-items: center; }
@media (max-width: 860px) { .post-lead { grid-template-columns: 1fr; } }
.post-lead__media { aspect-ratio: 16/10; overflow: hidden; }
.post-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post-lead:hover .post-lead__media img { transform: scale(1.04); }
.post-lead h2 { font-family: var(--display); font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1.16; margin: .9rem 0; color: #fff; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)); gap: clamp(1.75rem,3vw,2.5rem); }
.post { display: flex; flex-direction: column; }
.post__media { aspect-ratio: 3/2; overflow: hidden; background: var(--paper-deep); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post:hover .post__media img { transform: scale(1.05); }
.post__meta { margin-top: 1.1rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.post__meta span { color: var(--on-dark-faint); }
.post__meta span::before { content: '·'; margin: 0 .5rem; }
.post h3 { font-family: var(--display); font-size: 1.3rem; line-height: 1.25; margin: .7rem 0 .55rem; color: #fff; }
.post p { font-size: .88rem; line-height: 1.65; color: var(--on-dark-soft); font-weight: 300; }
.post__more { margin-top: .95rem; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ============================================================
   PROFILE
   ============================================================ */
.dash-panel { border: 1px solid var(--rule-light); padding: clamp(1.6rem, 3vw, 2.5rem); background: rgba(158,176,242,.04); }
.dash-panel + .dash-panel { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.dash-panel__head { margin-bottom: 1.9rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule-light); }
.dash-panel__head h2 { font-family: var(--display); font-size: clamp(1.3rem,2.2vw,1.7rem); line-height: 1.2; }
.dash-panel__head p { margin-top: .5rem; font-size: .86rem; line-height: 1.6; color: var(--on-dark-faint); font-weight: 300; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: block; cursor: pointer; padding: .6rem 1rem;
  border: 1px solid var(--rule-light); font-size: .78rem; font-weight: 300; color: var(--on-dark-soft);
  transition: all .3s var(--ease);
}
.chip span:hover { border-color: var(--gold); color: #fff; }
.chip input:checked + span { background: rgba(158,176,242,.16); border-color: var(--gold); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.profile-id { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; }
.profile-id__avatar { width: 68px; height: 68px; flex: none; display: grid; place-items: center; background: var(--gold); color: var(--navy-900); font-family: var(--display); font-size: 1.6rem; }
.profile-id__name { font-family: var(--display); font-size: 1.4rem; color: #fff; line-height: 1.2; }
.profile-id__role { margin-top: .3rem; font-size: .78rem; color: var(--on-dark-faint); font-weight: 300; }

/* .form is a grid, so a submit button stretches by default — size it to its label
   everywhere except the auth card, where a full-width button is the right call. */
.form > .btn { justify-self: start; }
.auth .form > .btn { justify-self: stretch; }
/* the summit row's lighter wash drops the faint text under AA — lift it */
.event--summit .event__yr, .event--summit .event__meta { color: var(--on-dark-soft); }

/* ============================================================
   MOBILE PASS
   Phones were getting one-column portrait grids (a 25,000px landing
   page), 10px labels and 34px tap targets. This block fixes all three.
   ============================================================ */
@media (max-width: 700px) {
  :root {
    --section: clamp(3.5rem, 9vw, 5rem);
    --gutter: 1.375rem;
  }

  /* ---- portraits two-up: halves the scroll on the speaker pages ---- */
  .speakers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .85rem; }
  .speaker h3 { font-size: 1.05rem; margin-top: .85rem; }

  /* ---- readable minimums ---- */
  .eyebrow { font-size: .8125rem; letter-spacing: .18em; }
  .slot__tag, .event__tag { font-size: .75rem; }
  .event-flag { font-size: .8rem; letter-spacing: .14em; }
  .agenda-day__date { font-size: .8125rem; }
  .speaker__role, .speaker__org, .form__note, .event__meta,
  .profile-id__role, .contact-side__note, .post p { font-size: .875rem; }
  .field label { font-size: .8rem; letter-spacing: .14em; }
  /* 16px exactly: below it, Safari on iOS zooms the page the moment a
     field takes focus, and the reader has to pinch their way back out. */
  .field input, .field select, .field textarea { font-size: 16px; }
  .check label { font-size: .875rem; }
  .footer a, .footer__blurb { font-size: .9rem; }
  .footer__bottom { font-size: .82rem; }
  .footer h4, .dash-bar__label, .dash-bar__crumb { font-size: .78rem; }
  .contact-side h3 { font-size: .78rem; }
  .post__meta, .panel__soon { font-size: .76rem; }
  .stat__label { font-size: .85rem; }
  .day__label { font-size: .78rem; }
  .tier__name { font-size: .78rem; }
  .btn { font-size: .78rem; }

  /* ---- tap targets: 44px minimum ---- */
  .footer__social a { width: 44px; height: 44px; }
  .footer ul { gap: .35rem; }
  .footer ul a { display: inline-block; padding-block: .7rem; }
  .filter-bar button { padding: .85rem .7rem; }
  .link-arrow { padding-block: .8rem .7rem; }
  /* Calendar gets the same block padding as RSVP, or the two sit on
     different baselines beside each other — and it needs the tap height
     just as much. */
  .event__cta, .event__cal, .post__more { display: inline-block; padding-block: .8rem; }

  /* A grid track is never narrower than its content's min-content width, so
     a long <option>, an address that cannot break, or a nowrap button pushes
     the track wider than the box around it. body carries overflow-x: hidden,
     which means that excess is not scrolled to — it is quietly cut off, and
     the reader never learns there was more. minmax(0, …) lets them shrink. */
  .form { grid-template-columns: minmax(0, 1fr); }
  .form > *, .form__row > * { min-width: 0; }
  .field input, .field select, .field textarea { max-width: 100%; }

  /* 36px of padding each side leaves a 320px screen nothing for the label */
  .btn { padding-inline: 1.4rem; white-space: normal; text-align: center; }
  .auth__back a { display: inline-block; padding: .8rem 1rem; font-size: .8rem; }
  .auth__row a { display: inline-block; padding-block: .7rem; }
  .member-login__links a, .auth__foot a { display: inline-block; padding-block: .3rem; }
  .dash-menu__panel a { padding-block: 1rem; }
  .chip span { padding: .75rem 1rem; }

  /* ---- layout breathing room ---- */
  .sec-head { margin-bottom: 2.25rem; }
  .day { min-height: 0; }
  .split { gap: 2.25rem; }
  .split__media--frame::before { display: none; }
  .event-hero__media { min-height: 190px; }
  .dash-bar__crumb { display: none; }
  .dash-intro { gap: 1rem; }
  /* the four footer columns stack into a very long tail — pair them up */
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding-bottom: 2.25rem; }
  .footer__top > div:first-child { grid-column: 1 / -1; }
  .footer a, .footer__blurb { overflow-wrap: anywhere; }
  .footer { padding-block: clamp(2.75rem, 6vw, 4rem) 2rem; }
  /* stacked pillar cards do not need desktop padding */
  .pillar { padding: 1.5rem 1.35rem 1.75rem; }
  .pillars { gap: 1px; }
  .pillar h3 { font-size: 1.25rem; margin: .75rem 0 .6rem; }
}

@media (max-width: 420px) {
  /* one column again on the narrowest phones — two portraits get too cramped */
  .speakers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .65rem; }
  .speaker__role { font-size: .85rem; }
  .event { grid-template-columns: 62px minmax(0, 1fr); }
  .event__day { font-size: 1.6rem; }
}

/* ============================================================
   ADMIN PORTAL + MEDIA ARCHIVE
   ============================================================ */
.admin-flag {
  display: inline-block; margin-left: .75rem; padding: .25rem .6rem;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--navy-900); background: var(--gold); font-weight: 600;
}
.invite-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.invite-table th {
  text-align: left; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; padding: 0 1rem .8rem 0; border-bottom: 1px solid var(--rule-light);
}
.invite-table td { padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--rule-light); color: var(--on-dark-soft); font-weight: 300; }
.invite-table td b { color: #fff; font-weight: 400; }
.invite-table tr:last-child td { border-bottom: 0; }
.pill { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: .3rem .6rem; border: 1px solid var(--rule-dark); color: var(--gold); white-space: nowrap; }
.pill--done { border-color: rgba(158,176,242,.2); color: var(--on-dark-faint); }
.table-scroll { overflow-x: auto; }

/* ---------- Media archive ---------- */
.media-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.media-filter button {
  background: none; border: 1px solid var(--rule-light); color: var(--on-dark-soft);
  padding: .7rem 1.1rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  transition: all .3s var(--ease);
}
.media-filter button:hover { border-color: var(--gold); color: #fff; }
.media-filter button.is-active { background: rgba(158,176,242,.14); border-color: var(--gold); color: #fff; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr)); gap: 1rem; }
.media-item { position: relative; margin: 0; aspect-ratio: 3/2; overflow: hidden; background: var(--navy-800); cursor: zoom-in; }
.media-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.media-item:hover img { transform: scale(1.05); }
.media-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(3,6,15,.9));
  font-size: .78rem; color: #fff; font-weight: 300;
  opacity: 0; transition: opacity .4s var(--ease);
}
.media-item:hover figcaption { opacity: 1; }
.media-item__play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.media-item__play span {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(5,9,28,.66); border: 1px solid var(--gold); color: var(--gold);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.media-empty { border: 1px dashed var(--rule-light); padding: clamp(2rem,5vw,3.5rem); text-align: center; }
.media-empty p { color: var(--on-dark-soft); font-weight: 300; max-width: 52ch; margin-inline: auto; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(3,6,15,.95); display: none; place-items: center; padding: 4vh 4vw; }
.lightbox.is-open { display: grid; }
.lightbox img, .lightbox video { max-width: 100%; max-height: 88vh; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 1.5rem; right: 1.5rem; width: 46px; height: 46px;
  background: none; border: 1px solid var(--rule-dark); color: var(--gold); font-size: 1.1rem;
}
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 1.5rem; text-align: center; font-size: .85rem; color: var(--on-dark-soft); font-weight: 300; }

/* ============================================================
   NAV ACCOUNT — "Member Login", or the member's name + dropdown
   Lives as the last child of .site-nav__menu so it inherits the
   row-on-desktop / column-on-mobile behaviour for free.
   ============================================================ */
.nav-account { position: relative; }
.nav-account__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--gold); color: var(--on-dark);
  padding: .55rem .9rem; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease);
}
.nav-account__btn:hover, .nav-account.is-open .nav-account__btn { background: var(--gold); color: var(--navy-900); }
.nav-account__btn svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .3s var(--ease); }
.nav-account.is-open .nav-account__btn svg { transform: rotate(180deg); }
.nav-account__panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 80; min-width: 210px;
  background: var(--navy-850); border: 1px solid rgba(158,176,242,.24);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-account.is-open .nav-account__panel { opacity: 1; visibility: visible; transform: none; }
.nav-account__panel a {
  display: block; padding: .8rem 1.1rem; font-size: 12px; letter-spacing: .08em;
  color: var(--on-dark-soft); text-transform: none; border-bottom: 1px solid rgba(158,176,242,.12);
}
.nav-account__panel a:last-child { border-bottom: 0; }
.nav-account__panel a:hover { background: rgba(158,176,242,.08); color: #fff; }
.nav-account__panel a::after { display: none; }

@media (max-width: 900px) {
  .nav-account { padding: 14px 24px 20px; border-top: 1px solid rgba(158,176,242,.12); }
  .nav-account__btn { width: 100%; justify-content: space-between; padding: .85rem 1rem; font-size: 13px; }
  .nav-account__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    margin-top: .5rem; background: transparent; border: 0;
    max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
  }
  .nav-account.is-open .nav-account__panel { max-height: 260px; }
  .nav-account__panel a { padding: .85rem .25rem; font-size: 13px; }
}

/* the event row carries two actions now: the seat and the calendar file */
.event__actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.event__cal {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-faint); border-bottom: 1px solid transparent; padding-bottom: .2rem;
  white-space: nowrap; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.event__cal:hover { color: var(--gold); border-bottom-color: var(--rule-dark); }
@media (max-width: 760px) { .event__actions { align-items: flex-start; flex-direction: row; gap: 1.25rem; } }

/* ============================================================
   MODAL — event detail and full briefings
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 210; background: rgba(3,6,15,.94); display: none; overflow-y: auto; }
.modal.is-open { display: block; }
.modal__sheet {
  position: relative; width: min(760px, 92vw); margin: 6vh auto 8vh;
  background: var(--navy-900); border: 1px solid var(--rule-light);
}
.modal__close {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; z-index: 2;
  background: rgba(5,9,28,.7); border: 1px solid var(--rule-dark); color: var(--gold); font-size: 1.05rem;
}
.modal__media { aspect-ratio: 21/9; overflow: hidden; background: var(--navy-800); }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: clamp(1.75rem, 4vw, 2.75rem); }
.modal__flag { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.modal__body h2 { font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.16; margin: 1rem 0 1.25rem; color: #fff; }
.modal__body p { font-size: .95rem; line-height: 1.75; color: var(--on-dark-soft); font-weight: 300; }
.modal__body p + p { margin-top: 1.1rem; }

.fact-list { display: grid; gap: 0; margin: 1.75rem 0; border-top: 1px solid var(--rule-light); }
.fact-list div { display: grid; grid-template-columns: 128px 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule-light); }
@media (max-width: 560px) { .fact-list div { grid-template-columns: 1fr; gap: .2rem; } }
.fact-list dt, .fact-list b { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-faint); font-weight: 500; }
.fact-list span { font-size: .92rem; color: var(--on-dark); font-weight: 300; }

.who { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.who span {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem;
  border: 1px solid var(--rule-light); font-size: .8rem; color: var(--on-dark-soft); font-weight: 300;
}
.who i { width: 22px; height: 22px; display: grid; place-items: center; background: rgba(158,176,242,.16);
  color: var(--gold); font-size: .58rem; font-style: normal; font-weight: 600; letter-spacing: .04em; }
.who--wait span { opacity: .6; }

/* ---------- likes and comments ---------- */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rule-light); }
.like-btn {
  display: inline-flex; align-items: center; gap: .6rem; background: none;
  border: 1px solid var(--rule-light); color: var(--on-dark-soft);
  padding: .7rem 1.1rem; font-size: .78rem; transition: all .3s var(--ease);
}
.like-btn:hover { border-color: var(--gold); color: #fff; }
.like-btn.is-on { background: rgba(158,176,242,.14); border-color: var(--gold); color: #fff; }
.like-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.like-btn.is-on svg { fill: var(--gold); stroke: var(--gold); }
.social__count { font-size: .8rem; color: var(--on-dark-faint); font-weight: 300; }

.comments { margin-top: 2rem; }
.comments h3 { font-family: var(--display); font-size: 1.25rem; margin-bottom: 1.25rem; color: #fff; }
.comment { display: flex; gap: .9rem; padding: 1.1rem 0; border-top: 1px solid var(--rule-light); }
.comment__avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: rgba(158,176,242,.16); color: var(--gold); font-size: .62rem; font-weight: 600; }
.comment__who { font-size: .85rem; color: #fff; }
.comment__when { font-size: .7rem; color: var(--on-dark-faint); margin-left: .5rem; }
.comment__body { margin-top: .35rem; font-size: .88rem; line-height: 1.65; color: var(--on-dark-soft);
  font-weight: 300; white-space: pre-wrap; }
.comment__actions { display: flex; align-items: center; gap: 1.1rem; margin-top: .5rem; }
.comment__like {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: none; border: 0; padding: .15rem 0;
  font-family: var(--sans); font-size: .78rem; line-height: 1;
  color: var(--on-dark-faint); transition: color .25s var(--ease);
}
.comment__like span:first-child { font-size: .9rem; line-height: 1; }
.comment__like:hover { color: var(--gold); }
.comment__like.is-on { color: var(--gold); }
.comment__del { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-faint); }
.comment__del:hover { color: var(--gold); }

@media (max-width: 700px) {
  /* a heart is a small thing to hit with a thumb */
  .comment__actions { gap: 1.4rem; }
  .comment__like { font-size: .84rem; padding: .5rem 0; }
  .comment__like span:first-child { font-size: 1rem; }
  .comment__del { padding-block: .5rem; display: inline-block; }
}
.comment-form { margin-top: 1.5rem; display: grid; gap: .85rem; }
.comment-form textarea {
  font-family: var(--sans); font-size: .9rem; font-weight: 300; color: var(--on-dark);
  background: rgba(158,176,242,.04); border: 1px solid var(--rule-light);
  padding: .9rem 1rem; min-height: 96px; resize: vertical; line-height: 1.65; border-radius: 0;
}
.comment-form textarea:focus { outline: none; border-color: var(--gold); }
.comment-form .btn { justify-self: start; }

/* the whole card is a target now */
.post, .event { cursor: pointer; }
.post__media, .post h3 a, .post__more { pointer-events: none; }

/* ---------- Archive grouped by album ---------- */
.album + .album { margin-top: clamp(3rem, 6vw, 4.5rem); }
.album__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.25rem;
  padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--gold);
}
.album__head h2 { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; color: #fff; }
.album__count { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-faint); }

/* ============================================================
   THE CONCIERGE — members' assistant dock
   A pill in the corner on a desktop; a full sheet on a phone.
   ============================================================ */
.cx { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 120; }

.cx__launch {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.35rem .8rem 1.05rem;
  font-family: var(--sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  background: var(--navy-800); border: 1px solid var(--gold);
  cursor: pointer; box-shadow: 0 18px 44px rgba(3, 6, 15, .55);
  transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.cx__launch:hover { background: var(--gold); color: var(--navy-900); transform: translateY(-2px); }
.cx__launch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cx.is-open .cx__launch { opacity: 0; pointer-events: none; }

/* the mark: a small ring with a lit centre — a globe, quietly */
.cx__spark { width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1px solid currentColor; position: relative; }
.cx__spark::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }

.cx__panel {
  position: absolute; right: 0; bottom: 0;
  width: min(400px, calc(100vw - 2rem));
  height: min(620px, calc(100vh - 6rem));
  display: flex; flex-direction: column;
  background: var(--navy-850); border: 1px solid var(--rule-dark);
  box-shadow: 0 30px 80px rgba(3, 6, 15, .7);
}
.cx__panel[hidden] { display: none; }

.cx__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--rule-light); flex: none;
}
.cx__title { font-family: var(--display); font-size: 1.15rem; line-height: 1.2; color: #fff; margin: 0; }
.cx__sub { margin: .3rem 0 0; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-dark-faint); }
.cx__head-actions { display: flex; gap: .35rem; flex: none; }
.cx__icon {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--on-dark-faint);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.cx__icon:hover { color: var(--gold); border-color: var(--rule-light); }
.cx__icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; }

.cx__log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.cx__log:focus-visible { outline: none; }

.cx__welcome p { margin: 0; font-size: .9rem; line-height: 1.7; font-weight: 300; color: var(--on-dark-soft); }
.cx__chips { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.cx__chip {
  font-family: var(--sans); font-size: .82rem; font-weight: 300; text-align: left;
  color: var(--gold); background: rgba(158, 176, 242, .07);
  border: 1px solid var(--rule-light); padding: .55rem .85rem; cursor: pointer;
  max-width: 100%; transition: background .25s var(--ease), border-color .25s var(--ease);
}
.cx__chip:hover { background: rgba(158, 176, 242, .15); border-color: var(--gold); }

.cx__msg { display: flex; }
.cx__msg--me { justify-content: flex-end; }
.cx__bubble { max-width: 88%; font-size: .88rem; line-height: 1.7; font-weight: 300;
  color: var(--on-dark-soft); overflow-wrap: anywhere; }
.cx__msg--me .cx__bubble {
  background: rgba(158, 176, 242, .12); border: 1px solid var(--rule-light);
  color: var(--on-dark); padding: .6rem .85rem; white-space: pre-wrap;
}
.cx__msg--cx .cx__bubble { max-width: 100%; border-left: 1px solid var(--gold); padding-left: .9rem; }
.cx__bubble p { margin: 0 0 .7rem; }
.cx__bubble p:last-child { margin-bottom: 0; }
.cx__bubble b { color: #fff; font-weight: 500; }
.cx__bubble code { font-size: .85em; background: rgba(158, 176, 242, .12); padding: .1em .35em; }
.cx__bubble a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.cx__bubble ul, .cx__bubble ol { margin: 0 0 .7rem; padding-left: 1.1rem; }
.cx__bubble li { margin-bottom: .3rem; }
.cx__err { color: #E0736B !important; }

.cx__dots { display: inline-flex; gap: 4px; padding: .35rem 0; }
.cx__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  animation: cxPulse 1.15s var(--ease) infinite; }
.cx__dots i:nth-child(2) { animation-delay: .16s; }
.cx__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes cxPulse { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }

.cx__composer { flex: none; display: flex; align-items: flex-end; gap: .5rem;
  padding: .8rem 1.2rem; border-top: 1px solid var(--rule-light); }
.cx__composer textarea {
  flex: 1 1 auto; min-width: 0; resize: none; border-radius: 0;
  font-family: var(--sans); font-size: .9rem; font-weight: 300; line-height: 1.55;
  color: var(--on-dark); background: rgba(158, 176, 242, .05);
  border: 1px solid var(--rule-light); padding: .6rem .75rem; max-height: 132px;
}
.cx__composer textarea::placeholder { color: var(--on-dark-faint); }
.cx__composer textarea:focus { outline: none; border-color: var(--gold); }
.cx__send {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; cursor: pointer;
  background: var(--gold); color: var(--navy-900); border: 1px solid var(--gold);
  transition: opacity .25s var(--ease);
}
.cx__send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.cx__send:hover { opacity: .82; }
.cx__composer.is-busy .cx__send { opacity: .35; pointer-events: none; }

.cx__foot { flex: none; margin: 0; padding: 0 1.2rem .9rem; font-size: .66rem; line-height: 1.55;
  color: var(--on-dark-faint); font-weight: 300; }

@media (max-width: 700px) {
  .cx { right: 1rem; bottom: 1rem; }
  .cx__launch { padding: .75rem 1.1rem; }
  /* full sheet — a 400px card inside a 390px phone is not a conversation */
  .cx__panel {
    position: fixed; inset: 0; width: 100vw; height: 100dvh;
    border: 0; max-width: none;
  }
  .cx__log { padding: 1rem; }
  .cx__composer { padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); }
  .cx__foot { display: none; }
  .cx__bubble { font-size: .92rem; }
}
body.cx-locked { overflow: hidden; }

/* The dock floats over whatever is at the bottom of the viewport, which at the
   end of a page is the legal row. Give the footer room to sit clear of it. */
body.has-cx .footer__bottom { padding-bottom: 3.25rem; }
@media (max-width: 700px) { body.has-cx .footer__bottom { padding-bottom: 4.25rem; } }

/* ============================================================
   MOBILE — the members' area and the admin portal
   The public pages were tuned earlier; these came later and need
   the same treatment.
   ============================================================ */

/* Captions were hover-only, which on a phone means never. Show them
   wherever there is no pointer to hover with. */
@media (hover: none) {
  .media-item figcaption { opacity: 1; }
  .media-item:hover img { transform: none; }
}

@media (max-width: 700px) {
  /* nothing on a phone should be under 12px */
  .post__more { font-size: .78rem; letter-spacing: .16em; }
  .filter-bar button, .media-filter button { font-size: .76rem; letter-spacing: .14em; }
  .media-filter button { padding: .75rem 1rem; }
  .media-filter { gap: .45rem; margin-bottom: 1.75rem; }
  .modal__flag { font-size: .74rem; letter-spacing: .16em; }
  .event__cal { font-size: .78rem; letter-spacing: .12em; }
  .album__count, .cx__foot { font-size: .72rem; }

  /* The calendar row's own labels, which the rule above had missed. RSVP
     was the smallest thing on the page at 10.5px and it is the one control
     the members' area exists for. The tracking comes down as the size goes
     up, or these stop fitting the date column at 320px. */
  .event__cta { font-size: .8125rem; letter-spacing: .12em; }
  .event__yr  { font-size: .75rem;   letter-spacing: .1em; }
  .pill       { font-size: .75rem;   letter-spacing: .1em; padding: .3rem .55rem; }
  .admin-flag { font-size: .75rem;   letter-spacing: .14em; }

  /* the sheet earns the whole screen width at this size */
  .modal__sheet { width: 100%; margin: 0 0 0; border-inline: 0; border-top: 0; min-height: 100%; }
  .modal__close { top: .75rem; right: .75rem; }
  .modal__media { aspect-ratio: 16/9; }

  /* one photograph at a time reads better than two thumbnails */
  .media-grid { gap: .75rem; }
  .album + .album { margin-top: 2.5rem; }
  .album__head { padding-bottom: .75rem; margin-bottom: 1rem; }

  /* the lightbox fills the phone; dvh so the browser chrome cannot clip it */
  .lightbox { padding: 3.5rem 1rem 4.5rem; }
  .lightbox img, .lightbox video { max-height: 74dvh; }
  .lightbox__close { top: .75rem; right: .75rem; }
  .lightbox__cap { bottom: 1rem; padding-inline: 1rem; font-size: .8rem; }

  /* the guest list reads as a column, not as wrapped chips */
  .who { flex-direction: column; align-items: stretch; gap: .4rem; }
  .who span { font-size: .85rem; }

  .comment-form textarea { min-height: 112px; }
}

/* ------------------------------------------------------------
   Admin tables become cards.
   Four to five columns cannot be read on a 360px screen, and a
   sideways scroll hides the last column entirely — which is where
   the status and the Remove link live. Each row becomes a card and
   every cell carries its own heading from data-th.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  .invite-table, .invite-table tbody, .invite-table tr, .invite-table td { display: block; width: 100%; }
  .invite-table thead { display: none; }
  .invite-table tr {
    border: 1px solid var(--rule-light); padding: .35rem .95rem;
    margin-bottom: .75rem; background: rgba(158, 176, 242, .03);
  }
  .invite-table tr:last-child { margin-bottom: 0; }
  .invite-table td {
    display: block; padding: .55rem 0; border-bottom: 1px solid var(--rule-light);
    font-size: .875rem; overflow-wrap: anywhere;
  }
  .invite-table tr td:last-child { border-bottom: 0; }
  /* the heading sits above its value: a cell can hold a name and an email on
     two lines, and any side-by-side layout splits that pair apart */
  .invite-table td::before {
    content: attr(data-th); display: block; margin-bottom: .15rem;
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-dark-faint); font-weight: 500;
  }
  /* cells with no heading — the Remove link, and the loading/empty rows */
  .invite-table td[data-th='']::before,
  .invite-table td:not([data-th])::before { display: none; }
  .invite-table td .pill { display: inline-block; }
}

/* ============================================================
   WELCOME — the page an invitation lands on
   ============================================================ */
.auth__card--wide { max-width: 560px; }

/* two steps, so nobody wonders how much more of this there is */
.welcome__steps {
  list-style: none; margin: 1.75rem 0 2rem; padding: 0;
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
}
.welcome__steps li {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-faint); font-weight: 500;
  padding: .45rem .85rem; border: 1px solid transparent;
}
.welcome__steps li span {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%; font-size: .62rem; letter-spacing: 0;
}
.welcome__steps li.is-current { color: var(--gold); border-color: var(--rule-light); }
.welcome__steps li.is-done { color: var(--on-dark-soft); }

/* the five rules, ticking off as they type */
.pw-rules { list-style: none; margin: -.35rem 0 1.4rem; padding: 0; display: grid; gap: .4rem; }
.pw-rules li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .8rem; line-height: 1.45; font-weight: 300;
  color: var(--on-dark-faint); transition: color .25s var(--ease);
}
.pw-rules li i {
  width: 15px; height: 15px; flex: none; margin-top: .2rem; position: relative;
  border: 1px solid var(--rule-dark); transition: border-color .25s var(--ease), background .25s var(--ease);
}
.pw-rules li.is-met { color: var(--on-dark); }
.pw-rules li.is-met i { border-color: var(--gold); background: var(--gold); }
.pw-rules li.is-met i::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--navy-900); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

.welcome__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* the profile step is a form, not a card of copy — it wants the room */
[data-wpane="profile"] .form { margin-top: 1.75rem; }
[data-wpane="profile"] .chips { margin-top: .25rem; }
[data-wpane="profile"] .form__note { margin-top: 1rem; text-align: center; }

@media (max-width: 700px) {
  .auth__card--wide { width: 100%; }
  .welcome__steps { gap: .35rem; }
  .welcome__steps li { font-size: .64rem; padding: .4rem .6rem; }
  .pw-rules li { font-size: .84rem; }
  [data-wpane="profile"] .chip span { font-size: .82rem; }
}

/* ---------- "Your convenings" on the profile page ---------- */
[data-profile-events] .event { cursor: pointer; }
[data-profile-events] .event .pill { justify-self: end; }
/* what is done is done — keep it legible but let the coming ones lead */
.event-list--past .event { opacity: .62; }
.event-list--past .event:hover { opacity: 1; }

@media (max-width: 760px) {
  /* the status chip drops under the body rather than squeezing the title */
  [data-profile-events] .event { grid-template-columns: 74px minmax(0, 1fr); }
  [data-profile-events] .event .pill { grid-column: 2; justify-self: start; margin-top: .25rem; }
}
@media (max-width: 420px) {
  [data-profile-events] .event { grid-template-columns: 62px minmax(0, 1fr); }
}