/* ============================================================
   poi. society design system
   Editorial members' club: cream & black, hairlines, serif display
   ============================================================ */

:root {
  --cream:       #F5F0E8;
  --cream-soft:  #FAF7F0;
  --cream-deep:  #EAE2D3;
  --black:       #111110;
  --black-soft:  #2A2926;
  --taupe:       #8B8378;
  --gold:        #B69A6B;   /* decorative only: dots, rules, hairlines, large-scale accents on dark */
  --gold-text:   #8A6F45;   /* text-safe gold: small caps, tags, numerals on cream */

  --line-light:  #E2D9C8;   /* hairlines on cream */
  --line-dark:   #3A3936;   /* hairlines on black */

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Libre Franklin", "Segoe UI", system-ui, -apple-system, sans-serif;

  --space-section: 160px;
  --space-gutter: clamp(1.25rem, 5vw, 4rem);
  --radius-sm: 2px;
  --radius-pill: 999px;
  --radius-arch: 999px 999px 0 0;
  --max-w: 1320px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 768px) {
  :root { --space-section: 88px; }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  padding-top: 97px;
}

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

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

ul { list-style: none; }

::selection { background: var(--black); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.mobile-menu :focus-visible,
.site-header :focus-visible { outline-offset: 2px; }

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

/* ---------- typography ---------- */

/* modular scale, ratio 1.333 (editorial fourth) */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.h-hero    { font-size: clamp(2.4rem, 3vw + 1.5rem, 4.4rem); letter-spacing: -0.025em; }
.h-section { font-size: clamp(2rem, 3vw + 1.15rem, 3.16rem); }
.h-card    { font-size: clamp(1.35rem, 1vw + 1.1rem, 1.78rem); line-height: 1.15; }

.label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  display: inline-block;
}

.lede {
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.333rem);
  line-height: 1.58;
  color: var(--black-soft);
  max-width: 34em;
}

.muted { color: var(--taupe); }

.serif-quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.35;
  font-weight: 420;
  letter-spacing: -0.01em;
}

.accent { color: var(--gold-text); }
.section--dark .accent { color: var(--gold); }

/* ---------- dark sections ---------- */

.section { padding-block: var(--space-section); }

.section--dark {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(182,154,107,0.07), transparent),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 40%),
    var(--black);
  color: var(--cream);
  position: relative;
}
.section--dark .label { color: var(--cream-deep); opacity: .75; }
.section--dark .lede { color: var(--cream-deep); }
.section--dark .muted { color: #9a948a; }
.section--dark ::selection { background: var(--cream); color: var(--black); }

/* grain texture on dark sections */
.section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--dark > .container { position: relative; z-index: 1; }

/* ---------- buttons ---------- */

/* three button roles, one shape: primary (filled pill), secondary (outline pill), tertiary (text + gold rule) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 2rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--black);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: scale(0.96); }

.btn--solid { background: var(--black); color: var(--cream); }
.btn--solid:hover { background: transparent; color: var(--black); }
.btn--ghost { background: transparent; color: var(--black); }
.btn--ghost:hover { background: var(--black); color: var(--cream); }

.section--dark .btn--solid { background: var(--cream); color: var(--black); border-color: var(--cream); }
.section--dark .btn--solid:hover { background: transparent; color: var(--cream); }
.section--dark .btn--ghost { color: var(--cream); border-color: var(--cream); }
.section--dark .btn--ghost:hover { background: var(--cream); color: var(--black); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.35rem;
  transition: gap .25s var(--ease-out);
}
.link-arrow:hover { gap: 0.9rem; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 65%),
    color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 55%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 8px 30px rgba(17,17,16,0.06);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 65%),
    color-mix(in srgb, var(--cream) 94%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 8px 30px rgba(17,17,16,0.1);
}

.site-header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: min-height .3s var(--ease);
}
.site-header.is-scrolled .site-header__inner { min-height: 64px; }

.wordmark {
  display: flex;
  align-items: center;
  line-height: 1;
}
.wordmark img {
  height: 46px;
  width: auto;
  display: block;
  transition: height .3s var(--ease);
}
.site-header.is-scrolled .wordmark img { height: 36px; }

.site-nav { display: flex; align-items: center; gap: 2.2rem; }
.site-nav a:not(.btn) {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 0.3rem;
}
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease-out);
}
.site-nav a:not(.btn):hover::after,
.site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.site-nav .btn { min-height: 42px; padding: 0.55rem 1.5rem; font-size: 0.75rem; }

/* mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 210;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--black);
  margin-inline: auto;
  transition: transform .35s var(--ease), opacity .25s;
}
.menu-toggle[aria-expanded="true"] span { background: var(--cream); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* full-screen mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--black);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu nav { display: flex; flex-direction: column; gap: 0.4rem; }
.mobile-menu nav a {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  line-height: 1.25;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.mobile-menu.is-open nav a { transform: none; opacity: 1; }
.mobile-menu nav a:nth-child(2) { transition-delay: .05s; }
.mobile-menu nav a:nth-child(3) { transition-delay: .1s; }
.mobile-menu nav a:nth-child(4) { transition-delay: .15s; }
.mobile-menu nav a:nth-child(5) { transition-delay: .2s; }
.mobile-menu nav a:nth-child(6) { transition-delay: .25s; }
.mobile-menu nav a .num {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.mobile-menu__footer {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--taupe);
}

body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */

.hero { overflow: hidden; }

/* full-bleed hero: text sits in the same column the site container uses,
   media spans the remaining track and bleeds flush to the true viewport
   edge (mirrored on the right so the image sits inside the page's normal
   bounds rather than touching the true edge). */
.hero__grid {
  display: grid;
  grid-template-columns:
    calc(var(--space-gutter) + max(0px, (100vw - var(--max-w)) / 2))
    minmax(320px, 1fr)
    minmax(1.5rem, 5vw)
    minmax(280px, 460px);
  align-items: center;
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(3.25rem, 6vw, 4.5rem);
  padding-right: calc(var(--space-gutter) + max(0px, (100vw - var(--max-w)) / 2));
}
.hero__content { grid-column: 2; max-width: 700px; }
.hero__content > * + * { margin-top: 1.5rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.2rem; }

.hero__media {
  grid-column: 4;
  justify-self: end;
  position: relative;
  width: 100%;
  max-width: 460px;
}

/* the hero's signature shape: one clipped corner, one soft sweep —
   deliberately not the pill-arch used elsewhere, and not a plain box */
.ph--hero {
  aspect-ratio: 4 / 5;
  border-radius: 3px 72px 3px 3px;
}

/* floating tag, straddling the lower-left corner of the frame — roughly
   half sits on the image, half spills onto the page. One sharp corner
   (tucked toward the image) against soft ones elsewhere reads as a
   deliberately cut shape rather than a plain rounded rectangle. */
.hero__tag {
  position: absolute;
  bottom: -2.1rem;
  left: 1.75rem;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  background: var(--cream);
  border: 1px solid var(--line-light);
  border-radius: 20px 4px 20px 20px;
  padding: 1rem 1.4rem;
  box-shadow: 0 22px 48px rgba(17,17,16,0.18);
}
.hero__tag-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hero__tag-num sup { font-size: 0.5em; color: var(--gold-text); }
.hero__tag-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--taupe);
  line-height: 1.3;
}

.hero--page { padding-block: clamp(3.5rem, 7vw, 6rem); }
.hero--page > .container > * + * { margin-top: 1.4rem; }

/* ---------- podcast hero: full-bleed video with text overlay ---------- */

.hero--podcast {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 82vh, 760px);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.hero--podcast__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero--podcast__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(17,17,16,0.92) 0%,
    rgba(17,17,16,0.74) 40%,
    rgba(17,17,16,0.38) 72%,
    rgba(17,17,16,0.14) 100%);
}
.hero--podcast__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin-inline: 0;
}
.hero--podcast__content > * + * { margin-top: 1.4rem; }

/* Mobile: back to the original layout — text, then a framed square video
   below it, not a full-bleed background with overlaid text. */
@media (max-width: 768px) {
  .hero--podcast {
    display: flex;
    flex-direction: column;
    position: static;
    min-height: 0;
    gap: 2rem;
  }
  .hero--podcast__content {
    order: 1;
    position: static;
    z-index: auto;
    max-width: none;
  }
  .hero--podcast__video {
    order: 2;
    position: static;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    filter: brightness(0.55) saturate(0.9);
  }
  .hero--podcast__scrim { display: none; }
}

/* ---------- editorial media frame (sponsor hero) ----------
   A sharp diagonal-cut corner instead of the site's usual soft-radius
   frame: reads as architectural/contemporary rather than the gentle
   pill-curve used elsewhere (the homepage hero's rounded corner, the
   arch shape). Only the bottom-right corner is cut. */

.ph.ph--editorial {
  border-radius: 3px 72px 3px 3px;
}

/* ---------- events hero: photo slideshow ---------- */

.events-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.events-hero__text > * + * { margin-top: 1.4rem; }

.events-showcase__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
}
.events-showcase__item.is-active { opacity: 1; }

@media (max-width: 768px) {
  .events-hero { grid-template-columns: 1fr; }
  .events-hero__media { margin-top: 1rem; max-width: 340px; }
}

/* ---------- image placeholders (swap for real photos) ---------- */

.ph {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--cream-deep) 0%, #DDD2BC 55%, #CFC2A8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
}
.ph__mark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: rgba(17,17,16,0.35);
  letter-spacing: -0.01em;
}
.ph--arch { border-radius: var(--radius-arch); aspect-ratio: 3 / 4; }
.ph--tall { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); }
.ph--wide { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }
.ph--square { aspect-ratio: 1; border-radius: var(--radius-sm); }
.ph--dark {
  background: linear-gradient(160deg, var(--black-soft), #1c1b19 60%, #232220);
}
.ph--dark .ph__mark { color: rgba(245,240,232,0.3); }

/* real photo / video media inside a .ph frame */
.ph-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* parallax targets get vertical overscan so the JS-driven shift never exposes an edge */
.ph-media[data-parallax] {
  top: -6%;
  bottom: auto;
  height: 112%;
  will-change: transform;
}
.ph--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph--photo.ph--dark .ph-media { filter: brightness(0.55) saturate(0.9); }
.ph--photo .ph__mark { display: none; }

/* ---------- marquee ---------- */

.marquee {
  background: var(--black);
  color: var(--cream);
  border-block: 1px solid var(--black);
  overflow: hidden;
  padding-block: 0.9rem;
  margin-block: 3.5rem;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: 3rem;
  padding-right: 3rem;
  animation: marquee 28s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquee__track .star { color: var(--gold); font-size: 0.8rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee--cream {
  background: var(--cream);
  color: var(--black);
  border-block: 1px solid var(--line-light);
}

/* ---------- stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 3.5rem;
}
.stats__item {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  text-align: center;
}
.stats__item + .stats__item { border-left: 1px solid var(--line-light); }
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
}
.stats__num sup { font-size: 0.5em; color: var(--gold-text); }
.section--dark .stats__num sup { color: var(--gold); }
.stats__label {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.section--dark .stats { border-color: var(--line-dark); }
.section--dark .stats__item + .stats__item { border-color: var(--line-dark); }

/* ---------- section headers ---------- */

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head > * + * { margin-top: 1.1rem; }
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}

/* ---------- cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 1.25rem;
}

.pillar-card {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 320px;
  background: rgba(250,247,240,0.02);
  transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.pillar-card:hover {
  transform: translateY(-4px);
  background: rgba(250,247,240,0.05);
  border-color: var(--gold);
}
.pillar-card__num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold);
}
.founder-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-dark);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pillar-card p { color: var(--cream-deep); font-size: 0.95rem; flex-grow: 1; }
.pillar-card .link-arrow { border-color: var(--line-dark); align-self: flex-start; }
.pillar-card:hover .link-arrow { border-color: var(--gold); }

/* event cards */
.event-card {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line-light);
  transition: padding-left .35s var(--ease);
}
.event-card[hidden] { display: none; }
.event-card:first-child { border-top: 1px solid var(--line-light); }
.event-card:hover { padding-left: 0.75rem; }
.event-card--no-thumb { grid-template-columns: auto 1fr auto; }

.event-card__thumb {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.event-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.event-card:hover .event-card__thumb img { transform: scale(1.08); }

.event-card__date {
  text-align: center;
  min-width: 74px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.6rem;
}
.event-card__day {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
}
.event-card__month {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 0.35rem;
}
.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--taupe);
  letter-spacing: 0.04em;
}
.event-card__city-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.4rem;
}

/* tier cards */
.tier-card {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--cream-soft);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.tier-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(17,17,16,0.08); }
.tier-card--featured {
  background: var(--black);
  color: var(--cream);
  border-color: var(--black);
}
.tier-card--featured .muted { color: #9a948a; }
.tier-card__tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.section--dark .tier-card__tag { color: var(--gold); }
.tier-card--featured .tier-card__tag { color: var(--gold-text); }
.tier-card__price { font-family: var(--font-display); font-size: 1.3rem; margin-top: -0.75rem; }
.tier-card ul { display: flex; flex-direction: column; gap: 0.6rem; flex-grow: 1; }
.tier-card li {
  font-size: 0.92rem;
  padding-left: 1.4rem;
  position: relative;
}
.tier-card li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* ---------- split layouts ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split__content > * + * { margin-top: 1.4rem; }

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 2.5rem 1.5rem;
  counter-reset: step;
}
.step { counter-increment: step; }
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.step p { font-size: 0.92rem; color: var(--taupe); }
.section--dark .step p { color: var(--cream-deep); opacity: .8; }

/* ---------- testimonials ---------- */

.testimonials {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 82vw);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--cream-deep) transparent;
}
.testimonials:active { cursor: grabbing; }
.testimonial {
  scroll-snap-align: start;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: var(--cream-soft);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  flex-grow: 1;
}
.testimonial blockquote::before { content: "“"; color: var(--gold); }
.testimonial blockquote::after { content: "”"; color: var(--gold); }
.testimonial cite {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* single-quote feature layout: centred in a narrow measure instead of a half-empty carousel */
.testimonial--solo {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  border: none;
  background: none;
  padding: 0;
  cursor: auto;
  align-items: center;
}
.testimonial--solo blockquote { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.42; }

/* ---------- instagram wall ---------- */

.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
}
.insta-grid a { position: relative; overflow: hidden; }
.insta-grid .ph { transition: transform .5s var(--ease); }
.insta-grid a:hover .ph { transform: scale(1.05); }

/* ---------- instagram live marquee ---------- */

.ig-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ig-marquee__track {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: max-content;
  animation: ig-marquee-scroll linear infinite;
}
.ig-marquee:hover .ig-marquee__track,
.ig-marquee__track.is-paused { animation-play-state: paused; }

.ig-marquee__item {
  flex: 0 0 auto;
  width: clamp(210px, 20vw, 300px);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease-out);
}
.section--dark .ig-marquee__item { border-color: var(--line-dark); }
.ig-marquee__item:hover { border-color: var(--gold); }
.ig-marquee__item img,
.ig-marquee__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.ig-marquee__item:hover img,
.ig-marquee__item:hover video { transform: scale(1.06); }
.ig-marquee__item--video::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  width: 22px;
  height: 22px;
  z-index: 2;
  background: rgba(17,17,16,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/11px no-repeat;
  border-radius: 50%;
  pointer-events: none;
}
.ig-marquee__badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(17,17,16,0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.ig-marquee__item:hover .ig-marquee__badge { opacity: 1; }
.ig-marquee__badge svg { width: 14px; height: 14px; fill: #fff; }

@keyframes ig-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- instagram editorial mosaic ----------
   Asymmetric curated grid, not a uniform strip. Photos start scattered
   (rotated/offset/faded); scrolling into view arranges them into the
   mosaic one by one, staggered. Scrolling back out un-arranges them in
   reverse — the state is just re-derived from intersection each time,
   so it's genuinely reversible, not a one-shot reveal. */

.ig-editorial {
  overflow-x: clip;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.15fr;
  grid-template-rows: 240px 200px;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}
.ig-editorial__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-light);
  opacity: 0;
  transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--srot, 0deg)) scale(.92);
  transition: transform .85s var(--ease-out), opacity .6s var(--ease-out), border-color .25s var(--ease-out);
}
.ig-editorial.is-arranged .ig-editorial__item {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
}
.ig-editorial__item:hover { border-color: var(--gold); }

/* ---------- scatter-to-arrange (generic, reusable) ----------
   Same reversible scroll behavior as the homepage's Instagram mosaic
   (data-ig-editorial), generalized so any group of one-or-more items can
   use it: each item starts tossed/rotated via its own --sx/--sy/--srot
   custom properties, then settles into place when its group scrolls into
   view, and un-settles in reverse if scrolled back up past. */
[data-scatter-item] {
  opacity: 0;
  transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--srot, 0deg)) scale(var(--sscale, .94));
  transition: transform .85s var(--ease-out), opacity .6s var(--ease-out);
}
[data-scatter-group].is-arranged [data-scatter-item] {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
}
.ig-editorial__item img,
.ig-editorial__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.ig-editorial__item:hover img,
.ig-editorial__item:hover video { transform: scale(1.05); }

.ig-editorial__item--1 { grid-column: 1; grid-row: 1 / 3; --sx: -60px; --sy: 50px; --srot: -8deg; }
.ig-editorial__item--2 { grid-column: 2; grid-row: 1; --sx: 44px; --sy: -46px; --srot: 10deg; }
.ig-editorial__item--3 { grid-column: 3; grid-row: 1; --sx: -38px; --sy: -58px; --srot: -12deg; }
.ig-editorial__item--4 { grid-column: 2 / 4; grid-row: 2; --sx: 30px; --sy: 54px; --srot: 6deg; }
.ig-editorial__item--5 { grid-column: 4; grid-row: 1 / 3; --sx: 52px; --sy: -40px; --srot: -9deg; }

.ig-editorial__badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(17,17,16,0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.ig-editorial__item:hover .ig-editorial__badge { opacity: 1; }
.ig-editorial__badge svg { width: 14px; height: 14px; fill: #fff; }

@media (max-width: 900px) {
  .ig-editorial { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 180px); }
  .ig-editorial__item--1 { grid-column: 1 / 3; grid-row: 1; }
  .ig-editorial__item--2 { grid-column: 1; grid-row: 2; }
  .ig-editorial__item--3 { grid-column: 2; grid-row: 2; }
  .ig-editorial__item--4 { grid-column: 1 / 3; grid-row: 3; }
  .ig-editorial__item--5 { display: none; }
}
@media (max-width: 560px) {
  .ig-editorial { grid-template-columns: 1fr; grid-template-rows: repeat(3, 260px); }
  .ig-editorial__item--1,
  .ig-editorial__item--2,
  .ig-editorial__item--3,
  .ig-editorial__item--4 { grid-column: 1; }
  .ig-editorial__item--2 { grid-row: 2; }
  .ig-editorial__item--3 { display: none; }
  .ig-editorial__item--4 { grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-marquee__track { animation: none; }
}

/* ---------- podcast ---------- */

.episode {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-dark);
  transition: padding-left .35s var(--ease);
}
.episode:first-child { border-top: 1px solid var(--line-dark); }
.episode:hover { padding-left: 0.75rem; }
.episode__num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  min-width: 3.2rem;
}
.episode__title { font-size: 1.15rem; font-family: var(--font-display); }
.episode__guest { font-size: 0.8rem; color: var(--taupe); margin-top: 0.3rem; letter-spacing: 0.05em; }
.episode__play {
  width: 48px; height: 48px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: background .3s, color .3s, border-color .3s;
}
.episode:hover .episode__play { background: var(--cream); color: var(--black); border-color: var(--cream); }

.platform-btns { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ---------- city tabs ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tab {
  padding: 0.6rem 1.5rem;
  min-height: 44px;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--taupe);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: background .3s, color .3s, border-color .3s;
}
.tab:hover { border-color: var(--black); color: var(--black); }
.tab.is-active { background: var(--black); color: var(--cream); border-color: var(--black); }
.tab .soon {
  font-size: 0.55rem;
  color: var(--gold);
  letter-spacing: 0.15em;
}

/* ---------- FAQ accordion ---------- */

.faq { border-top: 1px solid var(--line-light); }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 300;
  transition: transform .35s var(--ease), background .3s, color .3s;
}
.faq details[open] .faq__icon { transform: rotate(45deg); background: var(--black); color: var(--cream); }
.faq .faq__body { padding: 0 0 1.6rem; max-width: 56em; color: var(--black-soft); font-size: 0.95rem; }

/* ---------- forms ---------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.form-grid[hidden] { display: none; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--cream-soft);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  color: var(--black);
  transition: border-color .3s;
  width: 100%;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--black);
}

/* ---------- contact form success state ----------
   The form eases out (opacity + a slight settle) before it's removed
   from flow, then the success state eases in — a genuine crossfade
   rather than an instant cut, timed to match FORM_LEAVE_MS in main.js. */

.form-grid.is-leaving {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  animation: form-success-in .7s var(--ease-out) forwards;
}
.form-success[hidden] { display: none; }
@keyframes form-success-in {
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

.form-success__tick {
  overflow: visible;
  transform-origin: center;
  animation: form-success-pop .5s var(--ease-out) .55s forwards;
}
.form-success__tick-circle-fill {
  fill: var(--black);
  stroke: none;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.6);
  animation: form-success-fill .45s var(--ease-out) .1s forwards;
}
.form-success__tick-check {
  fill: none;
  stroke: var(--cream);
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: form-success-check .4s var(--ease-out) .5s forwards;
}
@keyframes form-success-fill { to { opacity: 1; transform: scale(1); } }
@keyframes form-success-check { to { stroke-dashoffset: 0; } }
@keyframes form-success-pop {
  30% { transform: scale(1.08); }
  to { transform: scale(1); }
}

.form-success__heading,
.form-success__body {
  opacity: 0;
  transform: translateY(6px);
  animation: form-success-text .5s var(--ease-out) 1s forwards;
}
.form-success__body { animation-delay: 1.1s; }
@keyframes form-success-text { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .form-grid.is-leaving { opacity: 1; transform: none; }
  .form-success { opacity: 1; transform: none; animation: none; }
  .form-success__tick-circle-fill { opacity: 1; transform: none; animation: none; }
  .form-success__tick-check { stroke-dashoffset: 0; animation: none; }
  .form-success__tick { animation: none; }
  .form-success__heading,
  .form-success__body { opacity: 1; transform: none; animation: none; }
}

/* newsletter inline */
.newsletter {
  display: flex;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 420px;
}
.newsletter input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.9rem 1.1rem;
}
.newsletter input::placeholder { color: var(--taupe); }
.newsletter input:focus { outline: none; }
.newsletter button {
  background: var(--cream);
  color: var(--black);
  border: none;
  padding: 0 1.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
}
.newsletter button:hover { background: var(--gold); }

/* ---------- timeline (about) ---------- */

.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: var(--line-light);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s var(--ease-out) .1s;
}
.timeline.is-visible::before { transform: scaleY(1); }
.timeline__item { position: relative; padding-bottom: 2.5rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 4px);
  top: 0.55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  transform: scale(0);
  transition: transform .35s var(--ease-out);
}
.timeline__item.is-visible::before { transform: scale(1); }
.timeline__year {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-text);
  margin-bottom: 0.35rem;
}
.timeline__item p { color: var(--black-soft); font-size: 0.95rem; max-width: 34em; }

/* ---------- media carousel (manual prev/next photo slideshow) ---------- */

.media-carousel { position: relative; }
.media-carousel__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}
.media-carousel__item.is-active { opacity: 1; }
.media-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(245,240,232,0.55);
  background: rgba(17,17,16,0.35);
  backdrop-filter: blur(4px);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.media-carousel__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--black); transform: translateY(-50%) scale(1.06); }
.media-carousel__btn--prev { left: 0.9rem; }
.media-carousel__btn--next { right: 0.9rem; }

/* ---------- schedule cards (recurring city meetups) ---------- */

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 1.5rem;
}
.schedule-card {
  position: relative;
  background: var(--black-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: clamp(1.85rem, 3vw, 2.35rem) clamp(1.6rem, 3vw, 2.1rem);
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.schedule-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.schedule-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}
.schedule-card:hover::before { transform: scaleX(1); }
.schedule-card__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.schedule-card__city {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.05rem);
  line-height: 1;
  color: var(--cream);
}
.schedule-card__rule {
  width: 2rem;
  height: 1px;
  background: var(--line-dark);
  margin: 1.15rem 0;
}
.schedule-card__when {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--cream-deep);
}
.schedule-card__when-note {
  display: block;
  font-size: 0.82rem;
  color: var(--taupe);
  margin-top: 0.2rem;
}

/* ---------- page loader ---------- */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s var(--ease-out), visibility .6s var(--ease-out);
}
.page-loader__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  animation: page-loader-in .9s var(--ease-out) .15s forwards;
}
.page-loader__mark img {
  height: clamp(56px, 8vw, 84px);
  width: auto;
  display: block;
}
.page-loader__rule {
  width: 0;
  height: 1px;
  background: var(--gold);
  animation: page-loader-rule .7s var(--ease-out) .6s forwards;
}
@keyframes page-loader-rule {
  to { width: 3rem; }
}
@keyframes page-loader-in {
  to { opacity: 1; transform: none; }
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .page-loader { display: none; }
}

/* ---------- custom cursor ----------
   Sharp traditional pointer-arrow triangle. The wrapper only ever gets an
   un-transitioned translate (set directly from mousemove, so tracking
   stays 1:1 with zero lag); the inner shape is what animates scale,
   completely decoupled from position. Color is not tracked per-section:
   mix-blend-mode: difference on the wrapper makes it auto-invert against
   whatever is directly underneath it (cream, black, photos, gold accents,
   anything), so it always reads as the opposite color with no JS lookup
   of "dark" sections needed. */

.cursor-pointer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  color: #fff;
  mix-blend-mode: difference;
  transition: opacity .2s var(--ease-out);
}
body.has-custom-cursor .cursor-pointer { opacity: 1; }
.cursor-pointer.is-hidden { opacity: 0; }

.cursor-pointer__shape {
  display: block;
  width: 15px;
  height: 19px;
  color: inherit;
  transform: scale(1);
  transform-origin: 0 0;
  transition: transform .18s var(--ease-out);
}
.cursor-pointer.is-hover {
  mix-blend-mode: normal;
  color: var(--gold);
}
.cursor-pointer.is-hover .cursor-pointer__shape { transform: scale(1.1); }
.cursor-pointer.is-active .cursor-pointer__shape { transform: scale(0.9); }

/* subtle click flash: brief, small, no ripple */
.cursor-pointer::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 21px;
  height: 25px;
  border-radius: 40%;
  border: 1px solid currentColor;
  opacity: 0;
}
.cursor-pointer.is-active::after {
  opacity: 1;
  transition: opacity .12s var(--ease-out);
}
.cursor-pointer:not(.is-active)::after {
  transition: opacity .18s var(--ease-out) .05s;
}

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor .tab,
body.has-custom-cursor summary { cursor: none; }

@media (hover: none), (pointer: coarse) {
  .cursor-pointer { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-pointer__shape,
  .cursor-pointer::after { transition: none !important; }
  .cursor-pointer.is-hover .cursor-pointer__shape,
  .cursor-pointer.is-active .cursor-pointer__shape { transform: scale(1) !important; }
  .cursor-pointer::after { display: none; }
  .events-showcase__item { transition: none !important; }
}

/* ---------- founder profile rows ---------- */

.founder-row__inner {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line-dark);
}
.founder-row:first-of-type .founder-row__inner { border-top: none; }
.founder-row--reverse .founder-row__inner { grid-template-columns: 1fr minmax(240px, 340px); }
.founder-row--reverse .founder-row__media { order: 2; }
.founder-row--reverse .founder-row__content { order: 1; }

.ph--founder {
  aspect-ratio: 4 / 5;
  max-width: 340px;
  border-radius: 4px 48px 4px 4px;
}
.founder-row--reverse .ph--founder {
  border-radius: 48px 4px 4px 4px;
  margin-left: auto;
}

.founder-row__role {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.founder-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
  margin-bottom: 1.1rem;
}
.founder-row__content p {
  color: var(--cream-deep);
  max-width: 40em;
  margin-bottom: 1.4rem;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--cream);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site-footer > .container { position: relative; }

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-wordmark img {
  height: clamp(70px, 12vw, 110px);
  width: auto;
  display: block;
}
.footer-top__right { display: flex; flex-direction: column; gap: 1.25rem; justify-content: center; }
.footer-top__right p { color: var(--cream-deep); font-size: 0.92rem; max-width: 30em; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 180px));
  gap: 2rem 3rem;
  padding-block: 2.5rem;
  justify-content: start;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a {
  font-size: 0.9rem;
  color: var(--cream-deep);
  transition: color .3s;
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .06s; }
.reveal-delay-2 { transition-delay: .12s; }
.reveal-delay-3 { transition-delay: .18s; }
.reveal-delay-4 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- utilities ---------- */

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.text-center { text-align: center; }
.hide-mobile { display: initial; }

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 1100px) {
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
}

/* nav needs its own, wider breakpoint: 6 links + pill button don't fit
   between 768-830px even though the rest of the layout still has room */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .menu-toggle { display: flex; }
}

@media (max-width: 768px) {

  .hero__grid {
    display: flex;
    flex-direction: column;
    padding-block: 2.5rem 4rem;
  }
  .hero__content {
    order: 1;
    padding-inline: var(--space-gutter);
  }
  .hero__media {
    order: 2;
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
    width: 100%;
    margin-top: 2.5rem;
  }
  .hero__tag { left: 1rem; }

  .founder-row__inner,
  .founder-row--reverse .founder-row__inner {
    grid-template-columns: 1fr;
  }
  .founder-row--reverse .founder-row__media,
  .founder-row--reverse .founder-row__content { order: initial; }
  .ph--founder { max-width: 280px; margin-inline: 0; }
  .founder-row--reverse .ph--founder { max-width: 280px; margin-left: auto; margin-right: 0; }

  .split { grid-template-columns: 1fr; }
  .split--media-last-mobile .split__media { order: 2; }

  .stats { grid-template-columns: 1fr; }
  .stats__item + .stats__item { border-left: none; border-top: 1px solid var(--line-light); }
  .section--dark .stats__item + .stats__item { border-color: var(--line-dark); }

  .event-card { grid-template-columns: auto 1fr; }
  .event-card__thumb { display: none; }
  .event-card > .btn { grid-column: 1 / -1; justify-self: start; }

  .episode { grid-template-columns: auto 1fr; }
  .episode__play { display: none; }

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

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

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

  .hide-mobile { display: none; }
}