/*
  Tokens. Palette comes from the studio footage: violet mats, cool white walls.
  Shape rule: interactive elements are full pills, portraits are circles,
  video panels and sections stay square.
*/
:root {
  --bg: #f6f5f8;
  --surface: #ebe7f2;
  --ink: #1e1b26;
  --ink-soft: #595266;
  --accent: #4b2d7f;
  --accent-hover: #3b2266;
  --on-accent: #f6f5f8;
  --line: rgba(30, 27, 38, 0.12);
  --ink-faint: rgba(30, 27, 38, 0.2);
  --topbar-bg: rgba(246, 245, 248, 0.82);

  --display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --text: "Manrope", -apple-system, "Segoe UI", sans-serif;

  --topbar-h: 68px;
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1320px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16131c;
    --surface: #211c2b;
    --ink: #eeebf3;
    --ink-soft: #b3abc2;
    --accent: #b9a1e6;
    --accent-hover: #cdbbef;
    --on-accent: #16131c;
    --line: rgba(238, 235, 243, 0.14);
    --ink-faint: rgba(238, 235, 243, 0.22);
    --topbar-bg: rgba(22, 19, 28, 0.8);
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--topbar-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

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

a { color: inherit; }

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

h1,
h2,
p,
figure { margin: 0; }

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}
.skip:focus { top: 10px; }

/* Top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--gutter);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav > a:not(.pill) {
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.4s var(--ease);
}
.nav > a:not(.pill):hover { color: var(--accent); }

/* Pill button with a nested icon circle */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.pill:hover { background: var(--accent-hover); }
.pill:active { transform: scale(0.98); }

.pill-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1rem;
  transition: transform 0.5s var(--ease);
}
.pill:hover .pill-icon { transform: translate(2px, -2px) scale(1.05); }

.pill-large {
  padding: 8px 8px 8px 30px;
  font-size: 1.05rem;
  gap: 16px;
}
.pill-large .pill-icon { width: 44px; height: 44px; font-size: 1.2rem; }

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.5s var(--ease);
}
.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 24px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Hero: three vertical video panels, one per practice.
   The video is shown in a 12:16 (3:4) frame that is always exactly as tall
   as the hero; the 9:16 files are cropped top and bottom to fit it.
   Idle: the panels split the row equally and crop the video at the sides.
   Active (hover / tap / focus): the panel takes exactly the video's width,
   the others drop to --panel-min, and the row stays centred. */

.hero {
  --panel-min: clamp(64px, 8vw, 132px);
  --hero-h: max(460px, calc(100dvh - var(--topbar-h)));
  --cap-pad: clamp(18px, 2.6vw, 44px);
  display: flex;
  justify-content: center;
  gap: 3px;
  height: var(--hero-h);
  background: var(--bg);
  overflow: hidden;
}

.hero-panel {
  --ar: 0.75;
  --video-w: calc(var(--hero-h) * var(--ar));
  /* distance from the panel edge to the video edge, when the panel is wider */
  --video-inset: max(0px, (100% - var(--video-w)) / 2);
  position: relative;
  flex: 1 1 0;
  min-width: var(--panel-min);
  overflow: hidden;
  transition: flex-grow 0.9s var(--ease), flex-basis 0.9s var(--ease);
}

.hero.has-active .hero-panel {
  flex: 0 0 var(--panel-min);
}
.hero.has-active .hero-panel.is-active {
  flex: 0 0 min(var(--video-w), calc(100% - 2 * var(--panel-min) - 6px));
}

.hero-panel video {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: var(--video-w);
  max-width: none;
  object-fit: cover;
  /* keep heads in frame: crop more from the bottom, where the captions sit */
  object-position: 50% 25%;
  transform: translateX(-50%);
  background: #231d2e;
  filter: saturate(0.85);
  transition: filter 0.9s var(--ease);
}
.hero-panel.is-active video { filter: none; }

.hero-panel::after {
  content: "";
  position: absolute;
  top: 45%;
  bottom: 0;
  left: var(--video-inset);
  right: var(--video-inset);
  background: linear-gradient(to top, rgba(22, 17, 32, 0.72), rgba(22, 17, 32, 0));
  pointer-events: none;
}

.hero-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.hero-hit:focus-visible { outline-offset: -6px; outline-color: #f6f5f8; }

.hero-panel figcaption {
  position: absolute;
  left: calc(var(--video-inset) + var(--cap-pad));
  right: calc(var(--video-inset) + var(--cap-pad));
  bottom: clamp(22px, 4.5vh, 52px);
  z-index: 1;
  color: #f6f5f8;
  pointer-events: none;
}

.cap-row {
  display: flex;
  align-items: center;
  gap: 18px;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}

.cap-text {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  line-height: 1.1;
  padding-bottom: 4px;
  white-space: nowrap;
}

.hero-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(246, 245, 248, 0.6);
  font-size: 1.1rem;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.hero-panel.is-playing .hero-play { opacity: 0; transform: scale(0.8); }

/* Collapsed panels switch to a vertical label */
.cap-vertical {
  position: absolute;
  left: 50%;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.hero.has-active .hero-panel:not(.is-active) .cap-row { opacity: 0; transform: translateY(12px); }
.hero.has-active .hero-panel:not(.is-active) .cap-vertical { opacity: 1; transition-delay: 0.25s; }

/* Info block: reads like an Instagram profile header */

.info {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(80px, 11vw, 160px) var(--gutter);
}

.info-avatar {
  justify-self: center;
  width: min(100%, 340px);
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.info-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.handle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.95rem;
  font-weight: 600;
}
.handle a {
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}
.handle a:hover { color: var(--accent); }

.slogan {
  margin: 20px 0 28px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.2rem, 7.6vw, 7.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  padding-bottom: 6px;
  color: var(--accent);
}

.lead {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 20px clamp(32px, 5vw, 72px);
  margin: 44px 0 48px;
}
.facts dt {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.facts dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  line-height: 1.15;
}
.facts dd a {
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* About */

.about {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(96px, 12vw, 180px);
}

.about-title {
  max-width: 14ch;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.5rem, 4.8vw, 4.6rem);
  line-height: 1.08;
  padding-bottom: 6px;
}

.about-copy {
  max-width: 36rem;
  margin-top: 36px;
}
.about-copy p + p { margin-top: 1em; }

.about-last {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--accent);
}

.about-photo {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
}
.about-photo img {
  width: 100%;
  height: 116%;
  margin-top: -8%;
  object-fit: cover;
}

/* For whom */

.for-whom {
  background: var(--surface);
  padding: clamp(96px, 12vw, 170px) var(--gutter);
}

.for-whom-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.for-whom-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.for-whom-statement {
  max-width: 22ch;
  margin-top: 20px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  line-height: 1.1;
  padding-bottom: 6px;
}

.for-whom-list {
  list-style: none;
  margin: clamp(56px, 7vw, 96px) 0 0 auto;
  padding: 0;
  max-width: 44rem;
}
.for-whom-list li {
  padding: 26px 0;
  border-top: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

/* Hall */

.zal {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(96px, 12vw, 170px) var(--gutter) 0;
}

.zal-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  line-height: 1.08;
  padding-bottom: 6px;
}

.zal-lead {
  margin-top: 20px;
  color: var(--ink-soft);
}

.zal-facts {
  display: grid;
  gap: 22px;
  margin: 36px 0 32px;
}
.zal-facts dt { font-size: 0.85rem; color: var(--ink-soft); }
.zal-facts dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  line-height: 1.2;
}
.zal-facts a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
.zal-facts a:hover { color: var(--accent); }

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.map-link i { font-size: 1.2rem; }
.map-link:hover { border-color: var(--accent); color: var(--accent); }

.zal-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.zal-shot { overflow: hidden; background: var(--surface); }
.zal-shot-main { grid-column: 1 / -1; }
.zal-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Signup */

.signup {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(110px, 14vw, 200px) var(--gutter);
}

.signup-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: 1.05;
  padding-bottom: 6px;
}

.signup-text {
  max-width: 28rem;
  margin: 18px 0 40px;
  color: var(--ink-soft);
}

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 28px var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}

.footer-main a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.footer-main a:hover { color: var(--accent); }
.footer-main i { font-size: 1.2rem; }

.made-by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: opacity 0.4s var(--ease);
}
.made-by:hover { opacity: 0.75; }
.made-by img { display: block; height: 30px; width: auto; }

/* ---------- Motion ----------
   All of it is gated behind .js-motion (set by JS only when the user
   has not asked for reduced motion), so the page is static otherwise. */

/* Blocks rise into place as they enter the viewport; siblings stagger via --i */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(6px);
  transition:
    opacity 1s var(--ease),
    transform 1.1s var(--ease),
    filter 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Portraits open from the centre like an aperture. The mask sits on the
   image, not the observed container: a fully clipped target never
   reports an intersection. */
.js-motion .reveal-circle {
  transform: none;
  filter: none;
}
.js-motion .reveal-circle img {
  clip-path: circle(0% at 50% 50%);
  scale: 1.15;
  transition: clip-path 1.4s var(--ease), scale 1.8s var(--ease);
  transition-delay: 0.15s;
}
.js-motion .reveal-circle.is-visible img {
  clip-path: circle(75% at 50% 50%);
  scale: 1;
}

/* Hall photos wipe up from the bottom edge */
.js-motion .reveal-frame {
  transform: none;
  filter: none;
}
.js-motion .reveal-frame img {
  clip-path: inset(100% 0 0 0);
  scale: 1.12;
  transition: clip-path 1.3s var(--ease), scale 1.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms + 100ms);
}
.js-motion .reveal-frame.is-visible img {
  clip-path: inset(0 0 0 0);
  scale: 1;
}

/* Headlines: words rise one by one out of a mask */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.word-inner { display: inline-block; }

.js-motion [data-split] .word-inner {
  transform: translateY(105%);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--w, 0) * 70ms + 80ms);
}
.js-motion [data-split].is-visible .word-inner { transform: none; }

/* One orchestrated load moment: the three panels open in sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero-panel { animation: panel-open 1.2s var(--ease) both; }
  .hero-panel:nth-child(2) { animation-delay: 0.12s; }
  .hero-panel:nth-child(3) { animation-delay: 0.24s; }

  .hero-panel figcaption {
    animation: caption-rise 1s var(--ease) both;
    animation-delay: 0.7s;
  }
  .hero-panel:nth-child(2) figcaption { animation-delay: 0.82s; }
  .hero-panel:nth-child(3) figcaption { animation-delay: 0.94s; }
}

@keyframes panel-open {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes caption-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* Scroll-linked effects, where the browser supports scroll timelines */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Hero recedes as the page scrolls past it */
    .hero {
      animation: hero-recede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    /* Portrait drifts inside its circle */
    .about { view-timeline: --about block; }
    .about-photo img {
      animation: drift linear both;
      animation-timeline: --about;
      animation-range: cover;
    }

    /* The "for whom" statement fills in word by word while scrolling */
    /* Named timeline: the per-word overflow wrappers would otherwise
       become the nearest scroll container and stall view() */
    [data-scrub] { view-timeline: --scrub block; }
    [data-scrub] .word { overflow: visible; }
    [data-scrub] .word-inner {
      color: var(--ink-faint);
      animation: ink-in linear both;
      animation-timeline: --scrub;
      animation-range: cover calc(12% + var(--w) * 3%) cover calc(22% + var(--w) * 3%);
    }
  }
}

@keyframes hero-recede {
  to { transform: scale(0.94); opacity: 0.45; }
}

@keyframes drift {
  from { translate: 0 -7%; }
  to { translate: 0 7%; }
}

@keyframes ink-in {
  to { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-panel,
  .hero-panel video,
  .cap-row,
  .cap-vertical,
  .pill,
  .pill-icon { transition: none; }
}

/* Tablet */

@media (max-width: 900px) {
  .menu-toggle { display: block; }

  .nav {
    position: fixed;
    inset: var(--topbar-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px var(--gutter) 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s;
  }
  .nav.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .nav > a:not(.pill) {
    font-family: var(--display);
    font-style: italic;
    font-size: 2rem;
    line-height: 1.4;
  }
  .nav .pill { margin-top: 16px; }

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

  .info-avatar { justify-self: start; width: 200px; }

  .about-photo { max-width: 360px; order: -1; }

  .for-whom-list { margin-left: 0; }
}

/* Phone: panels become a swipeable row */

@media (max-width: 640px) {
  .hero { --panel-min: 52px; gap: 2px; }
  .cap-text { font-size: 1.35rem; white-space: normal; }
  .hero-play { width: 34px; height: 34px; font-size: 0.9rem; }
  .hero { --cap-pad: 12px; }
  .hero-panel figcaption { bottom: 18px; }
  .hero:not(.has-active) .cap-row { flex-direction: column; align-items: flex-start; gap: 10px; }

  .info-avatar { width: 150px; padding: 5px; }

  /* The avatar above already shows the same portrait */
  .about-photo { display: none; }

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