/* =========================================================
   MADAM — HOMEPAGE v4.0
   28k.studio-inspired: 5 fullscreen panels with scroll-snap.
   4-corner layout per panel, mobile-first.
   ========================================================= */

html, body {
  height: 100%;
  overflow: hidden;     /* deck owns the scroll */
  overscroll-behavior: none;
}
.ma-home {
  background: var(--ma-bg);
  color: var(--ma-text);
  height: 100dvh;
  overflow: hidden;
  /* Global frame width (matches panel) — used by fixed deco + topbar */
  --frame-w-h: clamp(50px, 6.5vw, 90px);
}

/* =========================================================
   TOP BAR — fixed, persists across panels
   ========================================================= */
/* .ma-topbar — defined site-wide in menu.css (single source of truth) */

.ma-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  transition: opacity .3s ease;
}
.ma-brand:hover { opacity: .75; }
.ma-brand__logo {
  display: block;
  width: clamp(70px, 7.5vw, 105px);
  height: auto;
}
.ma-brand__dot { color: var(--ma-accent); margin-left: .04em; }

/* .ma-menu-btn — defined site-wide in menu.css */

/* =========================================================
   PAGINATION (right side dots)
   ========================================================= */
.ma-pager {
  position: fixed;
  right: calc(var(--frame-w-h) + 1rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
/* 24px tap target (WCAG 2.5.8); the visible dot is drawn via ::before */
.ma-pager__dot {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
}
.ma-pager__dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(243, 237, 226, .4);
  transition: background .3s ease, transform .35s var(--ma-ease-2);
}
.ma-pager__dot.is-active::before {
  background: var(--ma-accent);
  transform: scale(1.4);
}
.ma-pager__dot:hover::before { background: var(--ma-accent); }
@media (max-width: 700px) {
  .ma-pager { right: .35rem; }
}

/* =========================================================
   DECK — scroll-snap container
   ========================================================= */
.ma-deck {
  position: relative;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ma-deck::-webkit-scrollbar { display: none; }

/* =========================================================
   PANEL — thick anthracite frame · items sit IN the frame
   Photo + content live INSIDE the frame; corners + decoration
   live ON the frame.
   ========================================================= */
.ma-panel {
  --frame-w: clamp(50px, 6.5vw, 90px);
  --frame-bg: #1A1A1E;
  position: relative;
  height: 100dvh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: var(--frame-bg);
}
/* Subtle inner stroke between frame and inner area for definition */
.ma-panel::after {
  content: '';
  position: absolute;
  inset: var(--frame-w);
  border: 1px solid rgba(243, 237, 226, .08);
  pointer-events: none;
  z-index: 4;
}

/* Background photo — inset to inner area inside the frame */
.ma-panel__bg {
  position: absolute;
  inset: var(--frame-w);
  z-index: 1;
  overflow: hidden;
  background: var(--ma-bg);
}
.ma-panel__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) brightness(.55) contrast(1.12);
  transform: scale(1.05);
  animation: ma-panel-pan 22s ease-in-out infinite alternate;
}
@keyframes ma-panel-pan {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1%, -1.5%, 0); }
}
.ma-panel__bg--solid {
  background: var(--ma-bg);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .015) 0,
      rgba(255, 255, 255, .015) 1px,
      transparent 1px,
      transparent 12px);
}
.ma-panel__tint { display: none; }
.ma-panel__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.10) 25%,
      rgba(0,0,0,.10) 65%,
      rgba(0,0,0,.55) 100%
    );
  pointer-events: none;
}

/* Corners — sit INSIDE the anthracite frame zone, plain white type */
.ma-panel__corner {
  position: absolute;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  font-family: var(--ma-font-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ma-text);
  white-space: nowrap;
}
/* Centered vertically on the frame midline */
.ma-panel__corner--tl {
  top: calc(var(--frame-w) / 2);
  left: clamp(1.5rem, 3vw, 2.5rem);
  transform: translateY(-50%);
}
.ma-panel__corner--tr {
  top: calc(var(--frame-w) / 2);
  right: clamp(1.5rem, 3vw, 2.5rem);
  transform: translateY(-50%);
}
.ma-panel__corner--bl {
  bottom: calc(var(--frame-w) / 2);
  left: clamp(1.5rem, 3vw, 2.5rem);
  transform: translateY(50%);
}
.ma-panel__corner--br {
  bottom: calc(var(--frame-w) / 2);
  right: clamp(1.5rem, 3vw, 2.5rem);
  transform: translateY(50%);
}
@media (max-width: 700px) {
  .ma-panel__corner { font-size: .58rem; letter-spacing: .18em; }
  .ma-panel__corner--tr { right: calc(clamp(1rem, 3vw, 2rem) + 1rem); }
}

/* =========================================================
   FRAME DECORATION — base styles live in site-decor.css.
   All decor chrome (crosses/verts/strips) is hidden on mobile
   site-wide; nothing extra needed here.
   ========================================================= */

/* =========================================================
   HERO — CINEMATIC LEAD + SUBTLE NAV
   ========================================================= */
.ma-hero-cinema {
  position: absolute;
  inset: var(--frame-w);
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  pointer-events: none;
}
.ma-hero-cinema > * { pointer-events: auto; }

.ma-hero-cinema__lead {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 48ch;
}
/* Big logo lockup — replaces the old "Madam Amsterdam" eyebrow badge */
.ma-hero-cinema__logo {
  display: block;
  width: clamp(170px, 22vw, 320px);
  height: auto;
  margin: 0 0 .3rem;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .45));
  animation: ma-word-in 1s var(--ma-ease-2) .1s both;
}
.ma-hero-cinema__title {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--ma-text);
  margin: 0;
  text-shadow: 0 4px 30px rgba(0,0,0,.45);
}
/* Word-by-word reveal — blur dissipation + slide up */
.ma-hero-cinema__title .ma-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  filter: blur(8px);
  animation: ma-word-in 1.2s var(--ma-ease-2) forwards;
  will-change: transform, opacity, filter;
}
/* Use nth-of-type so the <br> between the two lines doesn't throw off the counting */
.ma-hero-cinema__title span:nth-of-type(1) { animation-delay: .25s; }
.ma-hero-cinema__title span:nth-of-type(2) { animation-delay: .42s; }
.ma-hero-cinema__title span:nth-of-type(3) { animation-delay: .60s; }
.ma-hero-cinema__title span:nth-of-type(4) { animation-delay: .77s; }
.ma-hero-cinema__title span:nth-of-type(5) { animation-delay: .94s; }
@keyframes ma-word-in {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ma-hero-cinema__title .ma-word {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* =========================================================
   HERO — 3 BIG GRAPHIC CHOICES (legacy, unused)
   ========================================================= */
.ma-hero-stack {
  position: absolute;
  inset: var(--frame-w);
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
}
.ma-hero-stack__head {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(.5rem, 1vw, 1rem) 0 clamp(1rem, 2vw, 1.75rem);
}
.ma-hero-stack__eyebrow {
  font-family: var(--ma-font-body);
  font-size: clamp(.65rem, .8vw, .78rem);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ma-text-2);
}
.ma-hero-stack__eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.6rem; height: 1px;
  background: var(--ma-accent);
  margin-right: .8rem;
  vertical-align: 4px;
}
.ma-hero-stack__tag {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ma-text);
  margin: 0;
  max-width: 30ch;
}

/* Base .ma-choice typography (used by .ma-choices--mini) */
.ma-choice {
  text-decoration: none;
  color: var(--ma-text);
}
.ma-choice__name {
  font-family: var(--ma-font-display);
  font-weight: 700;
  display: inline;
}
.ma-choice__index,
.ma-choice__meta {
  font-family: var(--ma-font-body);
  font-weight: 500;
  text-transform: uppercase;
}
.ma-choice__arrow {
  font-family: var(--ma-font-display);
  line-height: 1;
}

/* Top corner labels overlap the topbar logo + hamburger — hide on all panels */
.ma-panel__corner--tl,
.ma-panel__corner--tr { display: none; }

/* Page-leave transition — active panel zooms + content fades, others dim away */
.ma-home.is-leaving .ma-panel:not(.is-leaving) {
  opacity: 0;
  transition: opacity .45s ease;
}
.ma-home.is-leaving .ma-topbar,
.ma-home.is-leaving .ma-pager,
.ma-home.is-leaving .ma-strip,
.ma-home.is-leaving .ma-vert,
.ma-home.is-leaving .ma-cross,
.ma-home.is-leaving .ma-tower {
  opacity: 0;
  transition: opacity .35s ease;
}
.ma-panel.is-leaving .ma-panel__bg img {
  transform: scale(1.18);
  transition: transform .9s var(--ma-ease-2);
}
.ma-panel.is-leaving .ma-panel__tint,
.ma-panel.is-leaving .ma-panel__veil {
  opacity: 0;
  transition: opacity .55s ease;
}
.ma-panel.is-leaving .ma-panel__center,
.ma-panel.is-leaving .ma-panel__corner {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .45s ease, transform .55s var(--ma-ease-2);
}
/* Hero content lives in .ma-hero-cinema (not __center) — give the tile tap a real,
   visible exit so the 350ms navigation delay reads as a transition, not a freeze */
.ma-home.is-leaving .ma-hero-cinema {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .35s var(--ma-ease-2);
}

.ma-corner__label {
  color: var(--ma-text-2);
}
.ma-corner__index {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: 0;
  color: var(--ma-accent);
}
.ma-corner__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem .9rem;
  font-family: var(--ma-font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ma-text);
  text-decoration: none;
  border: 1px solid var(--ma-text);
  /* 45° corner cut bottom-right */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%
  );
  transition: color .3s ease, background .3s ease;
}
.ma-corner__cta:hover {
  background: var(--ma-text);
  color: var(--ma-bg);
}
.ma-corner__arrow {
  display: inline-block;
  font-size: .9rem;
  line-height: 1;
  transition: transform .35s var(--ma-ease-2);
}
.ma-corner__cta:hover .ma-corner__arrow {
  transform: translate(2px, -2px);
}

/* Center content — inside the inner area (already framed) */
.ma-panel__center {
  position: absolute;
  inset: var(--frame-w);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  gap: 1rem;
}
.ma-panel__center--link {
  text-decoration: none;
  color: var(--ma-text);
  cursor: pointer;
}
.ma-panel__eyebrow {
  font-family: var(--ma-font-body);
  font-size: clamp(.7rem, .85vw, .82rem);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ma-text-2);
  display: inline-block;
  line-height: 1.4;
}
.ma-panel__eyebrow::before { content: none; }
.ma-panel__title {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 6rem);    /* world panels */
  letter-spacing: -.05em;
  line-height: .9;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
/* Intro lead under title — links to the detail page */
.ma-panel__intro {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: clamp(.95rem, 1.18vw, 1.12rem);
  line-height: 1.4;
  color: var(--ma-text);
  max-width: 32ch;
  margin-top: .5rem;
}
.ma-panel__enter {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.25rem;
  font-family: var(--ma-font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ma-text);
  border: 1px solid var(--ma-text);
  background: rgba(0, 0, 0, .35);
  /* 45° corner cut */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ma-panel__center--link:hover .ma-panel__enter {
  background: var(--ma-accent);
  border-color: var(--ma-accent);
}
.ma-panel__enter-arrow {
  display: inline-block;
  font-size: .95rem;
  line-height: 1;
  transition: transform .35s var(--ma-ease-2);
}
.ma-panel__center--link:hover .ma-panel__enter-arrow {
  transform: translate(2px, -2px);
}
.ma-panel__dot { color: var(--ma-accent); margin-left: .02em; }
.ma-panel__sub {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ma-text);
  max-width: 26ch;
}

/* Hero panel — cinematic carousel bg (3 photos · zoom + crossfade) */
.ma-panel--hero .ma-panel__bg { background: var(--ma-bg); }
/* Hero needs videos to read fully — kill the global veil + tint */
.ma-panel--hero .ma-panel__veil { display: none; }
.ma-panel--hero .ma-panel__tint { display: none; }
.ma-panel--hero .ma-panel__bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Triptych — 3 vertical columns, one per section. Hover a tile to spotlight its column. */
.ma-hero-triptych {
  display: flex;
  gap: 0;
}
.ma-hero-triptych__col {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  transition: filter .5s ease, opacity .5s ease, flex .8s var(--ma-ease-2);
}
.ma-hero-triptych__col + .ma-hero-triptych__col {
  border-left: 1px solid rgba(0,0,0,.45);
}
.ma-hero-triptych__col video,
.ma-hero-triptych__col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Default: black & white, brightened (clubs/sundown footage is naturally dark) */
  filter: grayscale(1) brightness(1.3) contrast(.95);
  transition: filter .7s ease, transform 1.2s var(--ma-ease-2);
}
.ma-panel--hero[data-spotlight="skybar"]     .ma-hero-triptych__col[data-section="skybar"]     video,
.ma-panel--hero[data-spotlight="skybar"]     .ma-hero-triptych__col[data-section="skybar"]     img,
.ma-panel--hero[data-spotlight="restaurant"] .ma-hero-triptych__col[data-section="restaurant"] video,
.ma-panel--hero[data-spotlight="restaurant"] .ma-hero-triptych__col[data-section="restaurant"] img,
.ma-panel--hero[data-spotlight="night"]      .ma-hero-triptych__col[data-section="night"]      video,
.ma-panel--hero[data-spotlight="night"]      .ma-hero-triptych__col[data-section="night"]      img {
  filter: brightness(1.15);
  transform: scale(1.04);
}

/* Spotlight overlay — big title + day + time inside active video column */
.ma-col-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 14vh clamp(1.2rem, 3vw, 2.5rem) 0;
  gap: .15rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ma-ease-2);
}
.ma-col-overlay__title {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  letter-spacing: -.045em;
  line-height: .95;
  color: var(--ma-text);
  text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
  max-width: 100%;
  margin-bottom: .35rem;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition:
    opacity .8s var(--ma-ease-2) .15s,
    transform .9s var(--ma-ease-2) .15s,
    filter .8s var(--ma-ease-2) .15s;
}
.ma-col-overlay__meta {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: clamp(.78rem, .9vw, .95rem);
  letter-spacing: -.005em;
  line-height: 1.1;
  color: #fff;
  background: var(--ma-accent);
  padding: .22em .55em;
  display: inline-block;
  align-self: flex-start;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ma-ease-2) .32s, transform .7s var(--ma-ease-2) .32s;
}
.ma-col-overlay__sep { color: #fff; margin: 0 .15em; opacity: .55; }

/* Active state: overlay + children animate in */
.ma-panel--hero[data-spotlight="skybar"]     .ma-hero-triptych__col[data-section="skybar"]     .ma-col-overlay,
.ma-panel--hero[data-spotlight="restaurant"] .ma-hero-triptych__col[data-section="restaurant"] .ma-col-overlay,
.ma-panel--hero[data-spotlight="night"]      .ma-hero-triptych__col[data-section="night"]      .ma-col-overlay {
  opacity: 1;
}
.ma-panel--hero[data-spotlight="skybar"]     .ma-hero-triptych__col[data-section="skybar"]     .ma-col-overlay__title,
.ma-panel--hero[data-spotlight="restaurant"] .ma-hero-triptych__col[data-section="restaurant"] .ma-col-overlay__title,
.ma-panel--hero[data-spotlight="night"]      .ma-hero-triptych__col[data-section="night"]      .ma-col-overlay__title,
.ma-panel--hero[data-spotlight="skybar"]     .ma-hero-triptych__col[data-section="skybar"]     .ma-col-overlay__meta,
.ma-panel--hero[data-spotlight="restaurant"] .ma-hero-triptych__col[data-section="restaurant"] .ma-col-overlay__meta,
.ma-panel--hero[data-spotlight="night"]      .ma-hero-triptych__col[data-section="night"]      .ma-col-overlay__meta {
  opacity: 1;
  transform: none;
  filter: none;
}

/* When spotlight is active: fade out the lead title + eyebrow */
.ma-panel--hero[data-spotlight] .ma-hero-cinema__lead {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .55s var(--ma-ease-2);
  pointer-events: none;
}
.ma-hero-cinema__lead {
  transition: opacity .55s ease .15s, transform .65s var(--ma-ease-2) .15s;
}
/* Spotlight: hover a tile → matching column glows, others dim */
.ma-hero-cinema:has(.ma-choice[data-choice="skybar"]:hover)     ~ * .ma-hero-triptych__col:not([data-section="skybar"]),
.ma-hero-cinema:has(.ma-choice[data-choice="restaurant"]:hover) ~ * .ma-hero-triptych__col:not([data-section="restaurant"]),
.ma-hero-cinema:has(.ma-choice[data-choice="night"]:hover)      ~ * .ma-hero-triptych__col:not([data-section="night"]) {
  filter: brightness(.4) saturate(.7);
}
/* Simpler fallback that works without :has — JS sets a class on hero */
.ma-panel--hero[data-spotlight="skybar"]     .ma-hero-triptych__col:not([data-section="skybar"]),
.ma-panel--hero[data-spotlight="restaurant"] .ma-hero-triptych__col:not([data-section="restaurant"]),
.ma-panel--hero[data-spotlight="night"]      .ma-hero-triptych__col:not([data-section="night"]) {
  filter: brightness(.35) saturate(.6);
}
.ma-panel--hero[data-spotlight="skybar"]     .ma-hero-triptych__col[data-section="skybar"],
.ma-panel--hero[data-spotlight="restaurant"] .ma-hero-triptych__col[data-section="restaurant"],
.ma-panel--hero[data-spotlight="night"]      .ma-hero-triptych__col[data-section="night"] {
  flex: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .ma-hero-triptych__col video,
  .ma-hero-triptych__col img { animation: none; transform: none; }
}

/* Mobile: replace triptych with a single full-width carousel cycling the 3 clips.
   Fade-in (0→4%) overlaps the previous slide's fade-out (33.3→37.3%) — a true
   crossfade with no all-transparent gap (no black blink). */
@keyframes ma-mobile-rotate {
  0%     { opacity: 0; }
  4%     { opacity: 1; }
  33.3%  { opacity: 1; }
  37.3%  { opacity: 0; }
  100%   { opacity: 0; }
}
@media (max-width: 900px) {
  .ma-panel--hero .ma-hero-triptych__col {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-left: 0;
    animation: ma-mobile-rotate 16.5s infinite;
  }
  .ma-panel--hero .ma-hero-triptych__col:nth-child(1) { animation-delay: 0s; }
  .ma-panel--hero .ma-hero-triptych__col:nth-child(2) { animation-delay: 5.5s; }
  .ma-panel--hero .ma-hero-triptych__col:nth-child(3) { animation-delay: 11s; }

  /* Reduced motion: no carousel — show the first clip statically */
  @media (prefers-reduced-motion: reduce) {
    .ma-panel--hero .ma-hero-triptych__col { animation: none; opacity: 0; }
    .ma-panel--hero .ma-hero-triptych__col:nth-child(1) { opacity: 1; }
  }

  /* On mobile: full color carousel (no B&W), light brightness boost for dark footage */
  .ma-panel--hero .ma-hero-triptych__col video,
  .ma-panel--hero .ma-hero-triptych__col img {
    filter: brightness(1.15);
    transform: none;
  }
  /* Hide the spotlight overlay on mobile — touch has no hover */
  .ma-col-overlay { display: none; }
  /* Don't fade the lead title on touch (data-spotlight fires briefly on tap) */
  .ma-panel--hero[data-spotlight] .ma-hero-cinema__lead {
    opacity: 1;
    transform: none;
  }
}
.ma-panel--hero .ma-panel__title {
  font-size: clamp(2.4rem, 6vw, 4rem);   /* Madam is now an editorial intro, not the hero */
}
.ma-panel--hero .ma-panel__sub {
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-family: var(--ma-font-display);
  font-weight: 700;
  max-width: 14ch;
}

/* Visit panel center alignment */
.ma-panel__center--visit {
  gap: 1.4rem;
}
.ma-visit__address,
.ma-visit__hours {
  font-family: var(--ma-font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.4;
  color: var(--ma-text);
}
.ma-visit__hours { color: var(--ma-text-2); }

.ma-visit__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: 1rem;
}
.ma-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.2rem;
  font-family: var(--ma-font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ma-text);
  text-decoration: none;
  border: 1px solid var(--ma-text);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%
  );
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.ma-cta:hover { background: var(--ma-text); color: var(--ma-bg); }
.ma-cta--filled {
  background: var(--ma-accent);
  border-color: var(--ma-accent);
  color: var(--ma-text);
}
.ma-cta--filled:hover {
  background: var(--ma-text);
  color: var(--ma-bg);
  border-color: var(--ma-text);
}

/* =========================================================
   A'DAM TOWER mark
   ========================================================= */
.ma-tower {
  position: fixed;
  right: calc(var(--frame-w-h) / 2);
  bottom: calc(var(--frame-w-h) / 2);
  transform: translate(50%, 50%);
  z-index: 60;
  opacity: .7;
  display: block;
  text-decoration: none;
  transition: opacity .3s ease, transform .35s var(--ma-ease-2);
}
.ma-tower:hover { opacity: 1; transform: translate(50%, calc(50% - 2px)); }
.ma-tower img {
  width: clamp(24px, 2.4vw, 34px);
  height: auto;
  display: block;
}

/* Fullscreen menu styles are now site-wide in menu.css */

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 899px) {
  .ma-topbar { padding: 0; }

  /* Panel frame collapses — video / photo edge-to-edge */
  .ma-panel       { --frame-w: 0; }
  .ma-panel::after { display: none; }
  .ma-panel__corner { display: none; }   /* hide all 4 corner labels — too cramped on phones */

  /* Hero panel: title up top, choice tiles below — let height grow so they don't overlap.
     Bottom padding clears the iOS home-indicator zone (viewport-fit=cover). */
  .ma-panel--hero { height: auto; min-height: 100dvh; }
  .ma-hero-cinema {
    position: relative;
    inset: auto;
    min-height: 100dvh;
    padding: clamp(5rem, 12vh, 6.5rem) 26px calc(env(safe-area-inset-bottom, 0px) + clamp(1.5rem, 4vh, 2.5rem));
    gap: 1.5rem;
  }

  /* Visit / world-panel centered content fills the panel with a 26px text gutter.
     Selector doubled to (0,2,0) so it beats visit-grid.css's unscoped
     .ma-panel--visit .ma-panel__center--visit rule. */
  .ma-panel__center.ma-panel__center,
  .ma-panel--visit .ma-panel__center--visit {
    inset: 0;
    /* Top just clears the fixed logo + notch (~74-86px) — kept close to the bottom
       padding so the empty band above/below the content reads as balanced. Lower
       top also buys vertical room on shorter iPhones (SE/standard). */
    padding: clamp(4.5rem, 10vh, 5.5rem) 26px calc(env(safe-area-inset-bottom, 0px) + clamp(2.25rem, 8vh, 3.25rem));
  }
  /* Content can exceed the panel on short phones — anchor to top so nothing
     gets clipped above (justify center + overflow:auto hides the overflow top) */
  .ma-panel--visit .ma-ed--slide { justify-content: flex-start; }

  /* Tower mark overlaps the third tile's arrow + iOS gesture bar on phones */
  .ma-tower { display: none; }

  .ma-corner__index { font-size: .68rem; }
  .ma-corner__cta {
    font-size: .58rem;
    padding: .55rem .75rem;
  }
  .ma-panel__title { font-size: clamp(2rem, 9vw, 3.5rem); }
  .ma-panel--hero .ma-panel__title { font-size: clamp(2rem, 10vw, 3.8rem); }
  .ma-panel__sub { font-size: .95rem; }

  /* Hero logo + tagline scale for phones */
  .ma-hero-cinema__logo  { width: clamp(200px, 58vw, 300px); }
  .ma-hero-cinema__title { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }

  /* Pretty arrow — replace the unicode ↗ (renders as emoji on iOS) with a clean SVG line.
     NB: .ma-choice__arrow is handled separately (circular button with masked ::before). */
  .ma-ed__cta-arrow,
  .ma-panel__enter-arrow,
  .ma-vt__arrow,
  .ma-cta__arrow,
  .ma-arrow {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain;
    text-indent: -9999px;
    overflow: hidden;
    vertical-align: -.1em;
  }
}

/* Phones: the Visit panel is tight. Drop the intro paragraph (essentials only —
   address, ferry, contact + quick links) and tighten the vertical rhythm so it
   fits a standard iPhone (390x844 / 430x932) without scrolling, top/bottom balanced.
   The lead stays on tablet/desktop, where it can run longer. Verified at iPhone
   widths via a live-CSS harness. */
@media (max-width: 600px) {
  .ma-panel--visit .ma-ed__lead { display: none; }
  .ma-panel--visit .ma-panel__center--visit {
    padding-top: clamp(3.75rem, 8vh, 4.75rem);
    gap: 1rem;
  }
  .ma-panel--visit .ma-ed__quick-row { margin-top: .4rem; }
  .ma-panel--visit .ma-home__foot { margin-top: 1rem; padding-top: .8rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .ma-panel__bg img { animation: none; }
}

/* =========================================================
   HOME FOOT — compact sign-off inside the Visit slide
   (home was the only page without socials + legal line)
   ========================================================= */
.ma-home__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  padding-top: clamp(.9rem, 2vh, 1.3rem);
  border-top: 1px solid var(--ma-border);
}
.ma-home__foot .ma-ed__legal { margin: 0; }