/* ─────────────────────────────────────────────
   RESET
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }

.moments,
.statement,
.about,
.universe,
.events,
.team,
.contact {
  min-height: 100svh;
}

body {
  font-family: var(--font-ui);
  background: #FDFCF9;
  background: var(--bg);
  color: #1A1714;
  color: var(--fg);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

::selection { background: var(--color-patina); color: #fff; }

/* ─────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────── */
@keyframes slide-in {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   LAYOUT
   ───────────────────────────────────────────── */
.page-wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* ─────────────────────────────────────────────
   REVEAL UTILITY
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transition: opacity 0.55s var(--motion-unveil);
}
.reveal.is-visible { opacity: 1; }

/* Stagger on lists */
.wwd-grid .wwd-card:nth-child(1),
.brand-list .brand-item:nth-child(1),
.events__cards .event-card:nth-child(1) { transition-delay: 0ms; }
.wwd-grid .wwd-card:nth-child(2),
.brand-list .brand-item:nth-child(2),
.events__cards .event-card:nth-child(2) { transition-delay: 80ms; }
.wwd-grid .wwd-card:nth-child(3),
.brand-list .brand-item:nth-child(3),
.events__cards .event-card:nth-child(3) { transition-delay: 160ms; }
.wwd-grid .wwd-card:nth-child(4),
.brand-list .brand-item:nth-child(4),
.events__cards .event-card:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .r-line > span { animation: none; }
}

/* ─────────────────────────────────────────────
   LINE REVEAL
   ───────────────────────────────────────────── */
.r-line { display: block; overflow: hidden; }
.r-line > span {
  display: block;
  animation: slide-in 0.9s var(--motion-unveil) var(--d, 0s) forwards;
}

/* ─────────────────────────────────────────────
   SECTION LABEL
   ───────────────────────────────────────────── */
.section-label {
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  color: var(--fg-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line-soft);
  margin-bottom: var(--space-7);
}

/* ─────────────────────────────────────────────
   LINKS
   ───────────────────────────────────────────── */
.lk {
  font-size: var(--t-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color 0.2s;
}
.lk:hover { border-color: var(--fg); }
.lk--muted { color: var(--fg-3); border-color: transparent; }
.lk--muted:hover { color: var(--fg); border-color: var(--line); }

/* ─────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--page-pad);
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  border-color: var(--line-soft);
}

.nav__logo {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  gap: var(--space-6);
}
.nav__links a {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-2);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--motion-unveil);
}
.nav__links a:hover,
.nav__links a.on { color: var(--fg); }
.nav__links a:hover::after,
.nav__links a.on::after { transform: scaleX(1); }

.nav__lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  padding: 2px;
  background: var(--bg);
}

.nav__lang-btn {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, background 0.2s ease;
}

.nav__lang-btn.is-active {
  color: var(--fg);
  background: var(--bg-muted);
}

.nav__lang-btn:hover:not(.is-active) {
  color: var(--fg-2);
}

@media (max-width: 768px) {
  .nav__lang {
    margin-left: auto;
    margin-right: var(--space-3);
  }
}

.nav__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
  background: var(--bg);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.nav__theme-toggle:hover { color: var(--fg); border-color: var(--line); }

.nav__theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .nav__theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .nav__theme-toggle .icon-moon { display: block; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav__burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--fg);
}

@media (max-width: 768px) {
  .nav__links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    padding: var(--space-4) var(--page-pad) var(--space-5);
    gap: 0;
  }
  .nav__links a { padding-block: var(--space-3); font-size: var(--t-body-sm); }
  .nav__links--open { display: flex; }
  .nav__burger { display: flex; }
}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 120px;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line-soft);
}

.hero__wrap {
  padding-inline: var(--page-pad);
  max-width: var(--page-max);
  margin-inline: auto;
  width: 100%;
  padding-bottom: var(--space-7);
}

.hero__eyebrow {
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  color: var(--fg-3);
  margin-bottom: var(--space-6);
}

/* The giant WE'ART title — fills viewport width */
.hero__title {
  font-size: clamp(5rem, 20.5vw, 22rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin-bottom: var(--space-5);
}

/* Tagline */
.hero__tag {
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-2);
}
.hero__tag em {
  font-style: italic;
  color: var(--fg);
}

/* Bottom row */
.hero__foot {
  max-width: var(--page-max);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-5);
}

.hero__caption {
  font-size: var(--t-body-sm);
  color: var(--fg-3);
  max-width: 40ch;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* ─────────────────────────────────────────────
   TICKER
   ───────────────────────────────────────────── */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  padding-block: var(--space-3);
  background: var(--bg);
}

.ticker__track {
  display: flex;
  gap: var(--space-5);
  animation: ticker 36s linear infinite;
  white-space: nowrap;
  width: max-content;
}

.ticker__track span {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}

.ticker__track .sep {
  color: var(--color-patina);
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────
   PLACEHOLDER SYSTEM
   ───────────────────────────────────────────── */
.ph {
  position: relative;
  background: var(--bg-muted);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Khi có ảnh thật: ảnh che placeholder */
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph__label {
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  color: var(--color-concrete);
  z-index: 1;
  pointer-events: none;
  text-align: center;
  padding: var(--space-3);
}

/* Landscape 4:3 */
.ph--land { aspect-ratio: 4 / 3; }

/* Portrait 3:4 */
.ph--portrait { aspect-ratio: 3 / 4; }

/* Square 1:1 */
.ph--sq { aspect-ratio: 1 / 1; }

/* ─────────────────────────────────────────────
   MOMENTS — Memory wall
   ───────────────────────────────────────────── */
.moments {
  padding-block: var(--space-7) 0;
  border-bottom: 1px solid var(--line-soft);
}

.moments__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.moments__cue {
  max-width: 38ch;
  font-size: var(--t-body-sm);
  color: var(--fg-2);
  line-height: var(--leading-snug);
  font-style: italic;
}

/* Wall stage */
.mem-wall {
  position: relative;
  border-top: 1px solid var(--line-soft);
}

.mem-wall__stage {
  position: relative;
  height: clamp(540px, 78vh, 800px);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  --spot-x: 50%;
  --spot-y: 45%;
  background:
    radial-gradient(ellipse 55% 45% at var(--spot-x) var(--spot-y), rgba(232,184,75,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,127,168,0.05) 0%, transparent 55%),
    repeating radial-gradient(circle at 50% 50%, rgba(26,23,20,0.04) 0 1px, transparent 1px 22px),
    var(--bg-muted);
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 0.75s var(--motion-unveil),
    transform 0.9s var(--motion-unveil);
}

.mem-wall.is-inview .mem-wall__stage {
  opacity: 1;
  transform: scale(1);
}

.mem-wall.is-dragging .mem-wall__stage { cursor: grabbing; }
.mem-wall.is-dragging .mem-polaroid { pointer-events: none; }

.mem-wall__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 6vw, 80px);
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.3s var(--motion-soft);
}

.mem-wall__fade--l {
  left: 0;
  background: linear-gradient(to right, var(--bg-muted) 20%, transparent);
}

.mem-wall__fade--r {
  right: 0;
  background: linear-gradient(to left, var(--bg-muted) 20%, transparent);
}

/* Deco layer — thread, watermark, stickers */
.mem-wall__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mem-wall__wm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26,23,20,0.06);
  white-space: nowrap;
  user-select: none;
}

.mem-wall__thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(176,133,24,0.28);
  opacity: 0;
  transition: opacity 1s var(--motion-unveil) 0.3s;
}

.mem-wall.is-inview .mem-wall__thread {
  opacity: 1;
}

.mem-sticker {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1;
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
  transition:
    opacity 0.6s var(--motion-unveil),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mem-wall.is-inview .mem-sticker {
  opacity: 1;
  transform: scale(1) rotate(var(--sr, -12deg));
}

.mem-sticker--a { color: var(--accent-butter); --sr: -18deg; transition-delay: 0.9s; }
.mem-sticker--b { color: var(--accent-bubblegum); --sr: 14deg; transition-delay: 1.1s; }
.mem-sticker--c { color: var(--accent-mint); --sr: -8deg; transition-delay: 1.25s; }

.mem-wall__chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--page-pad) var(--space-3);
  background: var(--bg-muted);
  border-top: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.65s var(--motion-unveil) 0.5s,
    transform 0.65s var(--motion-unveil) 0.5s;
}

.mem-wall.is-inview .mem-wall__chrome {
  opacity: 1;
  transform: translateY(0);
}

.mem-wall__hint.is-hidden { opacity: 0; }

.mem-wall__hint span { color: var(--color-patina-dk); }

.mem-wall__tl {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 14px);
  flex-wrap: wrap;
}

.mem-wall__tl span {
  font-size: 0.56rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg);
}

.mem-wall__tl i {
  display: block;
  width: clamp(12px, 2vw, 28px);
  height: 1px;
  background: linear-gradient(to right, var(--color-patina-dk), transparent);
  opacity: 0.45;
}

.mem-wall__edge {
  grid-row: 2;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
  opacity: 0;
  transition: opacity 0.35s var(--motion-soft);
  white-space: nowrap;
  min-width: 56px;
}

.mem-wall__edge--l { grid-column: 1; text-align: left; }
.mem-wall__edge--r { grid-column: 3; text-align: right; }

.mem-wall__hint {
  grid-row: 2;
  grid-column: 2;
  flex: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-2);
  transition: opacity 0.6s var(--motion-soft);
  white-space: nowrap;
}

.mem-wall__edge.is-visible {
  opacity: 1;
  color: var(--color-patina-dk);
}

.mem-wall__canvas {
  position: absolute;
  inset: 0;
}

.mem-wall.is-dragging .mem-wall__canvas {
  will-change: transform;
}

/* Polaroid cards */
.mem-polaroid {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(200px, 18vw, 270px);
  transform: rotate(var(--r, 0deg)) scale(calc(var(--s, 1) * 0.86)) translateY(36px);
  transform-origin: center center;
  opacity: 0;
  transition:
    opacity 0.8s var(--motion-unveil),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
  z-index: 1;
}

.mem-wall.is-inview .mem-polaroid {
  opacity: 1;
  transform: rotate(var(--r, 0deg)) scale(var(--s, 1)) translateY(0);
}

.mem-wall.is-inview .mem-polaroid:nth-child(1) { transition-delay: 0.15s; }
.mem-wall.is-inview .mem-polaroid:nth-child(2) { transition-delay: 0.28s; }
.mem-wall.is-inview .mem-polaroid:nth-child(3) { transition-delay: 0.41s; }
.mem-wall.is-inview .mem-polaroid:nth-child(4) { transition-delay: 0.54s; }
.mem-wall.is-inview .mem-polaroid:nth-child(5) { transition-delay: 0.67s; }

.mem-wall.is-inview.is-settled .mem-polaroid:not(:hover) {
  transition-delay: 0ms;
}

.mem-polaroid--hero { z-index: 2; }

.mem-polaroid__float {
  position: relative;
}

.mem-wall.is-inview.is-settled .mem-polaroid__float {
  animation: mem-float 5.5s ease-in-out infinite;
  animation-delay: var(--float-d, 0s);
}

@keyframes mem-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

.mem-polaroid--hero .mem-polaroid__float::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  z-index: 6;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8c4c4, #c0392b 45%, #8b2500 100%);
  box-shadow:
    0 2px 4px rgba(26,23,20,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.2);
}

@media (hover: hover) and (min-width: 769px) {
  .mem-wall.is-inview .mem-polaroid:hover {
    z-index: 10;
    transform:
      translate(
        calc((50 - var(--cx, 50)) * 4px),
        calc((45 - var(--cy, 45)) * 3px)
      )
      rotate(0deg)
      scale(calc(var(--s, 1) * 1.2))
      translateY(-4px);
    filter: drop-shadow(0 20px 40px rgba(26,23,20,0.15));
    transition:
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.5s ease;
    transition-delay: 0ms;
  }

  .mem-wall.is-inview .mem-polaroid:hover .mem-polaroid__float {
    animation-play-state: paused;
  }

  .mem-wall.is-inview .mem-polaroid:hover .mem-polaroid__photo img {
    transform: scale(1.05);
  }
}

@media (hover: hover) and (max-width: 768px) {
  .mem-wall.is-inview .mem-polaroid:hover {
    z-index: 10;
    transform:
      translate(
        calc((50 - var(--cx, 50)) * 3px),
        calc((45 - var(--cy, 45)) * 2px)
      )
      rotate(0deg)
      scale(calc(var(--s, 1) * 1.2))
      translateY(-4px);
    filter: drop-shadow(0 16px 32px rgba(26,23,20,0.14));
    transition:
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.45s ease;
    transition-delay: 0ms;
  }
}

.mem-polaroid__open {
  position: relative;
  display: block;
  width: 100%;
  background: var(--bg-raised);
  padding: 12px 12px 18px;
  box-shadow:
    0 1px 2px rgba(26,23,20,0.06),
    0 8px 28px rgba(26,23,20,0.10);
  text-align: left;
  transition: box-shadow 0.45s var(--motion-unveil);
}

.mem-polaroid__open::before,
.mem-polaroid__open::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: -7px;
  height: 15px;
  background: color-mix(in srgb, var(--accent, var(--accent-bubblegum)) 68%, white);
  opacity: 0.82;
  box-shadow: 0 1px 2px rgba(26,23,20,0.08);
}

.mem-polaroid__open::before {
  left: 14px;
  width: 44px;
  transform: rotate(-10deg);
}

.mem-polaroid__open::after {
  right: 18px;
  width: 38px;
  transform: rotate(7deg);
}

.mem-polaroid__idx {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  opacity: 0.55;
  pointer-events: none;
}

.mem-polaroid:hover .mem-polaroid__open,
.mem-polaroid.is-lit .mem-polaroid__open {
  box-shadow:
    0 2px 4px rgba(26,23,20,0.08),
    0 20px 48px rgba(26,23,20,0.16);
}

.mem-polaroid__photo {
  width: 100%;
  overflow: hidden;
}

.mem-polaroid__photo img {
  transition: transform 0.7s var(--motion-unveil);
}

.mem-polaroid__stamp {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 3;
  padding: 4px 10px;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
  transform: rotate(-2deg);
}

.mem-polaroid__photo:has(img:not([style*="display: none"])) .ph__label {
  display: none;
}

.mem-polaroid__cap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--space-3);
  padding-inline: 2px;
}

.mem-polaroid__cap strong {
  font-size: var(--t-body-sm);
  font-weight: 700;
  color: var(--fg);
  line-height: var(--leading-snug);
}

.mem-polaroid__cap span {
  font-size: var(--t-label);
  color: var(--fg-3);
  font-weight: 500;
  line-height: var(--leading-snug);
}

/* Lightbox */
.moment-lb {
  padding: 0;
  border: none;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: transparent;
}

.moment-lb::backdrop {
  background: rgba(26,23,20,0.78);
  backdrop-filter: blur(8px);
}

.moment-lb__inner {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--page-pad);
}

.moment-lb__figure {
  width: min(920px, 100%);
  animation: fade-in 0.45s var(--motion-unveil);
}

.moment-lb__img {
  width: 100%;
  box-shadow: var(--shadow-plinth-lg);
}

.moment-lb__meta {
  margin-top: var(--space-5);
  color: #fff;
  text-align: center;
}

.moment-lb__date {
  display: block;
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  color: var(--color-patina);
  margin-bottom: var(--space-2);
}

.moment-lb__title {
  font-size: var(--t-h2);
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.moment-lb__cap {
  font-size: var(--t-body-sm);
  color: rgba(255,255,255,0.72);
}

.moment-lb__close,
.moment-lb__nav {
  position: fixed;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #fff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  transition: background 0.2s, border-color 0.2s;
}

.moment-lb__close:hover,
.moment-lb__nav:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
}

.moment-lb__close {
  top: var(--space-5);
  right: var(--page-pad);
  font-size: 1.6rem;
  line-height: 1;
}

.moment-lb__nav--prev { left: var(--page-pad); top: 50%; transform: translateY(-50%); }
.moment-lb__nav--next { right: var(--page-pad); top: 50%; transform: translateY(-50%); }

.mem-wall__hint-mobile { display: none; }

.mem-wall__mobile-scene,
.mem-wall__mobile-ui {
  display: none;
}

@media (max-width: 768px) {
  .moments {
    padding-block: var(--space-6) 0;
  }

  .moments__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .moments__cue {
    max-width: none;
    font-size: clamp(1rem, 4.2vw, 1.125rem);
    padding-left: var(--space-1);
    border-left: 2px solid color-mix(in srgb, var(--color-patina) 65%, transparent);
  }

  .mem-wall {
    border-top: none;
  }

  .mem-wall__mobile-scene,
  .mem-wall__mobile-ui {
    display: block;
  }

  /* Immersive carousel stage */
  .mem-wall__stage {
    --mobile-accent: var(--accent-butter);
    position: relative;
    min-height: min(76dvh, 580px);
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 11vw;
    cursor: auto;
    touch-action: pan-x;
    background:
      radial-gradient(ellipse 90% 70% at 50% 110%, color-mix(in srgb, var(--mobile-accent) 22%, transparent) 0%, transparent 58%),
      radial-gradient(ellipse 55% 45% at 82% 18%, color-mix(in srgb, var(--mobile-accent) 14%, transparent) 0%, transparent 55%),
      radial-gradient(ellipse 50% 40% at 12% 22%, rgba(255,127,168,0.08) 0%, transparent 52%),
      repeating radial-gradient(circle at 50% 50%, rgba(26,23,20,0.035) 0 1px, transparent 1px 20px),
      var(--bg-muted);
    transition: background 0.65s var(--motion-soft);
  }

  .mem-wall.is-dragging .mem-wall__stage {
    cursor: auto;
  }

  .mem-wall__mobile-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .mem-wall__mobile-wm {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    font-size: clamp(3.5rem, 22vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(26,23,20,0.07);
    white-space: nowrap;
    user-select: none;
    opacity: 0.85;
  }

  .mem-mobile-sticker {
    position: absolute;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.45;
    animation: mem-mobile-drift 6s ease-in-out infinite;
  }

  .mem-mobile-sticker--a { top: 18%; left: 8%; color: var(--accent-butter); --dr: -14deg; animation-delay: 0s; }
  .mem-mobile-sticker--b { top: 62%; right: 10%; color: var(--accent-bubblegum); --dr: 12deg; animation-delay: -2s; }
  .mem-mobile-sticker--c { bottom: 22%; left: 14%; color: var(--accent-mint); --dr: -8deg; animation-delay: -4s; }

  @keyframes mem-mobile-drift {
    0%, 100% { transform: rotate(var(--dr, 0deg)) translateY(0); }
    50% { transform: rotate(calc(var(--dr, 0deg) + 6deg)) translateY(-6px); }
  }

  .mem-wall__fade {
    display: block;
    width: clamp(28px, 10vw, 56px);
    z-index: 4;
  }

  .mem-wall__deco,
  .mem-wall__edge {
    display: none;
  }

  .mem-wall__canvas {
    position: relative;
    z-index: 1;
    inset: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-7) 0 var(--space-6);
    width: max-content;
    min-height: min(76dvh, 580px);
    transform: none !important;
  }

  .mem-wall__canvas::before,
  .mem-wall__canvas::after {
    content: '';
    flex: 0 0 11vw;
    width: 11vw;
    height: 1px;
  }

  .mem-polaroid {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 78vw;
    width: 78vw;
    max-width: 340px;
    scroll-snap-align: center;
    opacity: 0.42;
    filter: blur(0.4px) saturate(0.85);
    transform: rotate(var(--mobile-r, -2.5deg)) scale(0.88);
    transition:
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.45s ease,
      filter 0.45s ease;
    z-index: 1;
  }

  .mem-polaroid[data-idx="0"] { --mobile-r: -3deg; }
  .mem-polaroid[data-idx="1"] { --mobile-r: 2.5deg; }
  .mem-polaroid[data-idx="2"] { --mobile-r: -1.5deg; }
  .mem-polaroid[data-idx="3"] { --mobile-r: 2deg; }
  .mem-polaroid[data-idx="4"] { --mobile-r: -2deg; }

  .mem-polaroid.is-mobile-active {
    opacity: 1;
    filter: none;
    transform: rotate(0deg) scale(1);
    z-index: 3;
  }

  .mem-wall.is-inview .mem-polaroid,
  .mem-wall.is-inview .mem-polaroid:nth-child(n) {
    opacity: 0.42;
    transition-delay: 0ms;
  }

  .mem-wall.is-inview .mem-polaroid.is-mobile-active {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  .mem-wall.is-inview.is-settled .mem-polaroid__float {
    animation: none;
  }

  .mem-polaroid.is-mobile-active .mem-polaroid__open {
    box-shadow:
      0 4px 12px rgba(26,23,20,0.08),
      0 24px 56px color-mix(in srgb, var(--mobile-accent, var(--accent-butter)) 28%, transparent);
  }

  .mem-polaroid__cap {
    display: none;
  }

  .mem-polaroid__stamp {
    font-size: 0.6875rem;
    padding: 5px 11px;
  }

  /* Live caption + progress — mobile only */
  .mem-wall__mobile-ui {
    padding: var(--space-4) var(--page-pad) var(--space-5);
    background:
      linear-gradient(180deg, transparent 0%, var(--bg-muted) 18%);
    margin-top: calc(var(--space-3) * -1);
    position: relative;
    z-index: 2;
  }

  .mem-wall__mobile-live {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(12px);
    min-height: 92px;
    transition: border-color 0.45s ease, box-shadow 0.45s ease;
  }

  .mem-wall__mobile-count {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
  }

  .mem-wall__mobile-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mem-wall__mobile-date {
    font-size: var(--t-meta);
    font-weight: 800;
    letter-spacing: var(--track-mega);
    text-transform: uppercase;
    color: var(--color-patina-dk);
  }

  .mem-wall__mobile-title {
    font-size: var(--t-body);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--fg);
  }

  .mem-wall__mobile-cap {
    font-size: var(--t-label);
    color: var(--fg-3);
    line-height: var(--leading-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mem-wall__mobile-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .mem-wall__mobile-dot {
    width: 22px;
    height: 3px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
    transition: width 0.35s var(--motion-unveil), background 0.35s ease;
  }

  .mem-wall__mobile-dot.is-active {
    width: 34px;
    background: var(--color-patina);
  }

  .mem-wall__chrome {
    display: block;
    padding: 0 var(--page-pad) var(--space-5);
    background: var(--bg-muted);
    border-top: 1px solid var(--line-soft);
  }

  .mem-wall__tl {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }

  .mem-wall__tl::-webkit-scrollbar { display: none; }

  .mem-wall__tl span {
    flex-shrink: 0;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
  }

  .mem-wall__tl span.is-active {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--color-patina) 55%, var(--line));
    background: color-mix(in srgb, var(--color-patina) 14%, var(--bg));
    cursor: pointer;
  }

  .mem-wall__hint {
    display: block;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
    font-size: var(--t-meta);
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--fg-3);
  }

  .mem-wall__hint-desktop { display: none; }
  .mem-wall__hint-mobile { display: inline; }

  .moment-lb__nav { display: none; }

  [data-theme="dark"] .mem-wall__mobile-wm {
    -webkit-text-stroke: 1px rgba(242,239,233, 0.08);
  }

  [data-theme="dark"] .mem-wall__stage {
    background:
      radial-gradient(ellipse 90% 70% at 50% 110%, color-mix(in srgb, var(--mobile-accent) 18%, transparent) 0%, transparent 58%),
      radial-gradient(ellipse 55% 45% at 82% 18%, color-mix(in srgb, var(--mobile-accent) 10%, transparent) 0%, transparent 55%),
      repeating radial-gradient(circle at 50% 50%, rgba(242,239,233,0.035) 0 1px, transparent 1px 20px),
      var(--bg-muted);
  }
}

.mem-wall__hint-mobile { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mem-wall__hint { animation: none; }
  .mem-wall__stage,
  .mem-wall__chrome,
  .mem-polaroid {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mem-polaroid {
    transform: rotate(var(--r, 0deg)) scale(var(--s, 1));
  }
  .mem-wall.is-inview.is-settled .mem-polaroid__float {
    animation: none;
  }
  .mem-sticker,
  .mem-wall__thread {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mem-mobile-sticker {
    animation: none;
  }
}

/* ─────────────────────────────────────────────
   STATEMENT / MISSION QUOTE
   ───────────────────────────────────────────── */
.statement {
  padding-block: calc(var(--space-8) * 1.6);
  border-bottom: 1px solid var(--line-soft);
}

.statement__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  text-align: center;
}

.statement__quote {
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
  quotes: none;
  max-width: 24em;
  margin-inline: auto;
}
.statement__quote em {
  font-style: italic;
  background: var(--foil);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.statement__attr {
  margin-top: var(--space-5);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  color: var(--fg-3);
}

/* ─────────────────────────────────────────────
   ABOUT — Gallery grid
   ───────────────────────────────────────────── */
.about {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line-soft);
}

.wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Z-pattern asymmetric layout */
.wwd-card:nth-child(1) { grid-column: 1 / 3; }
.wwd-card:nth-child(2) { grid-column: 3 / 4; }
.wwd-card:nth-child(3) { grid-column: 1 / 2; }
.wwd-card:nth-child(4) { grid-column: 2 / 4; }

.wwd-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg-muted);
  color: var(--fg);
  cursor: default;
  transition: transform 0.5s var(--motion-unveil);
}
.wwd-card:hover { border-color: var(--line); }

/* Color themes */
.wwd-card--dark { background: var(--fg); color: var(--color-wall); }
.wwd-card--gold { background: var(--color-patina); color: var(--fg); }

/* Oversized background number */
.wwd-card__num {
  position: absolute;
  bottom: -0.18em;
  right: -0.02em;
  font-size: clamp(9rem, 20vw, 18rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: currentColor;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.4s;
}
.wwd-card:hover .wwd-card__num { opacity: 0.1; }

.wwd-card__inner {
  position: relative;
  z-index: 1;
}

/* Museum exhibit label */
.wwd-card__tag {
  display: inline-block;
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  opacity: 0.5;
  border: 1px solid currentColor;
  padding: 3px 9px;
  margin-bottom: var(--space-4);
}

.wwd-card__title {
  font-size: clamp(1.6rem, 2.8vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-4);
}

.wwd-card__desc {
  font-size: var(--t-body-sm);
  line-height: var(--leading-body);
  opacity: 0.65;
  max-width: 44ch;
}

@media (max-width: 900px) {
  .wwd-grid { grid-template-columns: repeat(2, 1fr); }
  .wwd-card:nth-child(1),
  .wwd-card:nth-child(2),
  .wwd-card:nth-child(3),
  .wwd-card:nth-child(4) { grid-column: auto; }
}

@media (max-width: 540px) {
  .wwd-grid { grid-template-columns: 1fr; }
  .wwd-card { min-height: 280px; padding: var(--space-5); }
  .wwd-card__title { font-size: 1.8rem; }
}

/* ─────────────────────────────────────────────
   UNIVERSE — Gallery wall, design-system only
   ───────────────────────────────────────────── */
.universe {
  border-bottom: 1px solid var(--line-soft);
}

.universe__stage {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
  background:
    repeating radial-gradient(circle at 50% 50%, rgba(26,23,20,0.025) 0 1px, transparent 1px 24px),
    var(--bg);
}

.universe__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.universe__wm {
  position: absolute;
  left: 50%;
  top: clamp(var(--space-6), 8vw, var(--space-8));
  transform: translateX(-50%);
  font-size: clamp(4rem, 14vw, 10rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26,23,20,0.04);
  user-select: none;
  white-space: nowrap;
}

.universe__thread {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-soft) 15%, var(--line-soft) 85%, transparent);
  transform: rotate(-2deg);
}

.universe__wrap {
  position: relative;
  z-index: 1;
}

.universe__wrap .section-label {
  margin-bottom: clamp(var(--space-7), 10vw, calc(var(--space-8) * 0.85));
}

.brand-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-7), 12vw, calc(var(--space-8) * 1.1));
}

.brand-item {
  position: relative;
}

.brand-item__idx {
  position: absolute;
  top: -0.15em;
  left: -0.02em;
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.brand-item:nth-child(even) .brand-item__idx {
  left: auto;
  right: -0.02em;
}

.brand-item__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: clamp(var(--space-6), 8vw, var(--space-8));
  align-items: center;
  padding-inline: clamp(0px, 2vw, var(--space-5));
}

.brand-item:nth-child(even) .brand-item__inner {
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
}

.brand-item:nth-child(even) .brand-item__copy {
  order: 2;
}

.brand-item:nth-child(even) .brand-item__polaroid {
  order: 1;
}

.brand-item__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.brand-item__type {
  align-self: flex-start;
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  color: var(--fg-3);
  border: 1px solid var(--line-soft);
  padding: 5px 12px;
}

.brand-item__name {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--fg);
  max-width: 12ch;
}

.brand-item:nth-child(even) .brand-item__name {
  margin-left: auto;
  text-align: right;
}

.brand-item:nth-child(even) .brand-item__type {
  align-self: flex-end;
}

.brand-item:nth-child(even) .brand-item__desc {
  margin-left: auto;
  text-align: right;
}

.brand-item__desc {
  max-width: 44ch;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-2);
}

.brand-item__polaroid {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  padding: 12px 12px 28px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lift);
  transform: rotate(var(--r, -2deg));
}

.brand-item__shot {
  width: 100%;
}

.brand-item:nth-child(1) .brand-item__polaroid { --r: -2.5deg; }
.brand-item:nth-child(2) .brand-item__polaroid { --r: 2deg; margin-left: auto; }
.brand-item:nth-child(3) .brand-item__polaroid { --r: -1.5deg; }
.brand-item:nth-child(4) .brand-item__polaroid { --r: 2.5deg; margin-left: auto; }

.brand-item:nth-child(even) .brand-item__polaroid {
  margin-right: auto;
  margin-left: 0;
}

.brand-item__tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 52px;
  height: 16px;
  margin-left: -26px;
  background: color-mix(in srgb, var(--color-concrete-2) 85%, white);
  opacity: 0.92;
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(26,23,20,0.08);
  z-index: 2;
}

@media (max-width: 900px) {
  .universe__thread,
  .universe__wm {
    display: none;
  }

  .brand-list {
    gap: var(--space-7);
  }

  .brand-item__inner,
  .brand-item:nth-child(even) .brand-item__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-inline: 0;
  }

  .brand-item:nth-child(even) .brand-item__copy,
  .brand-item:nth-child(even) .brand-item__polaroid {
    order: unset;
  }

  .brand-item:nth-child(even) .brand-item__name,
  .brand-item:nth-child(even) .brand-item__desc {
    margin-left: 0;
    text-align: left;
  }

  .brand-item:nth-child(even) .brand-item__type {
    align-self: flex-start;
  }

  .brand-item__idx {
    font-size: clamp(4rem, 22vw, 6rem);
    top: 0;
  }

  .brand-item__name {
    font-size: clamp(2rem, 10vw, 3.25rem);
    max-width: none;
  }

  .brand-item__polaroid,
  .brand-item:nth-child(even) .brand-item__polaroid {
    max-width: min(100%, 280px);
    margin-inline: 0;
  }
}

/* ─────────────────────────────────────────────
   EVENTS — Future roadmap timeline
   ───────────────────────────────────────────── */
.events {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-raised);
}

.events__canvas {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-7) var(--space-8);
  background: var(--bg-raised);
}

.events__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.events__wm {
  position: absolute;
  left: clamp(-40px, -3vw, 12px);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26,23,20,0.05);
  user-select: none;
  white-space: nowrap;
}

.events__sticker {
  position: absolute;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1;
  opacity: 0.5;
}

.events__sticker--a {
  right: 10%;
  top: 16%;
  color: var(--accent-butter);
  transform: rotate(12deg);
}

.events__sticker--b {
  right: 18%;
  bottom: 22%;
  color: var(--accent-bubblegum);
  transform: rotate(-8deg);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

.events__wrap {
  position: relative;
  z-index: 1;
}

.events__head .section-label {
  margin-bottom: var(--space-5);
}

.events__head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: clamp(var(--space-5), 6vw, var(--space-8));
  align-items: end;
  margin-bottom: clamp(var(--space-7), 8vw, var(--space-8));
}

.events__title {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 14ch;
}

.events__title em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.events__lead {
  margin-top: var(--space-4);
  max-width: 48ch;
  font-size: var(--t-body);
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.events__stats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.events__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-muted);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
}

.events__stat strong {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  min-width: 1.5ch;
}

.events__stat span {
  font-size: var(--t-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
}

/* Timeline */
.events__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-7), 8vw, var(--space-8));
}

.events__spine {
  position: absolute;
  left: clamp(18px, 2.5vw, 28px);
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--line) 8%,
    var(--line) 92%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
}

.events__timeline.is-live .events__spine {
  opacity: 1;
}

.events__year-block {
  position: relative;
  padding-left: clamp(var(--space-6), 5vw, var(--space-8));
}

.events__year-block::before {
  content: '';
  position: absolute;
  left: clamp(12px, 1.8vw, 22px);
  top: 1.1em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--color-patina);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-patina) 22%, transparent);
  z-index: 1;
}

.events__year-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.events__year-num {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.events__year-cue {
  font-size: var(--t-body-sm);
  font-style: italic;
  color: var(--fg-3);
  font-family: 'Instrument Serif', Georgia, serif;
}

.events__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Event cards */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-4), 3vw, var(--space-5));
  background: var(--bg-muted);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transition:
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.event-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, var(--color-patina));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-card:hover {
  border-color: color-mix(in srgb, var(--accent, var(--color-patina)) 35%, var(--line));
  box-shadow: var(--shadow-plinth);
}

.event-card:hover::before {
  transform: scaleY(1);
}

.event-card--hero {
  grid-column: 1 / -1;
  padding: clamp(var(--space-5), 4vw, var(--space-6));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--bg-muted)) 0%, var(--bg-muted) 55%);
}

.event-card--hero .event-card__name {
  font-size: clamp(1.35rem, 3vw, 2rem);
  max-width: 22ch;
}

.event-card--hero .event-card__desc {
  max-width: 56ch;
}

.event-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.event-card__q {
  font-size: var(--t-meta);
  font-weight: 800;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--fg-3);
}

.event-card__tag {
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  color: color-mix(in srgb, var(--accent) 70%, var(--fg));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.event-card__name {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.event-card__desc {
  font-size: var(--t-body-sm);
  line-height: var(--leading-snug);
  color: var(--fg-2);
}

.event-card__flag {
  align-self: flex-start;
  margin-top: var(--space-1);
  font-size: var(--t-meta);
  font-weight: 800;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--foil);
  color: var(--color-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}

.events__cta {
  margin-top: clamp(var(--space-6), 6vw, var(--space-7));
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-body-sm);
  color: var(--fg-2);
}

.events__cta .lk {
  margin-left: var(--space-2);
}

@media (max-width: 900px) {
  .events__head-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .events__stats {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .events__stat {
    flex: 1 1 140px;
  }
}

@media (max-width: 640px) {
  .events__cards {
    grid-template-columns: 1fr;
  }

  .event-card--hero {
    grid-column: auto;
  }

  .events__wm {
    display: none;
  }

  .events__year-block {
    padding-left: var(--space-5);
  }

  .events__spine {
    left: 10px;
  }

  .events__year-block::before {
    left: 4px;
    width: 12px;
    height: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .events__spine {
    opacity: 1;
    transition: none;
  }
}

/* ─────────────────────────────────────────────
   TEAM — Light split, spacious portrait
   ───────────────────────────────────────────── */
.team {
  border-bottom: 1px solid var(--line-soft);
  overflow: visible;
}

.team-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  max-width: var(--page-max);
  margin-inline: auto;
  min-height: clamp(640px, 80vh, 860px);
}

/* ── Showcase (left) ── */
.team-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 5vw, var(--space-8)) var(--page-pad);
  overflow: visible;
  --spot-x: 42%;
  --spot-y: 38%;
  background:
    radial-gradient(ellipse 55% 50% at var(--spot-x) var(--spot-y), rgba(232,184,75,0.1) 0%, transparent 70%),
    var(--bg-muted);
}

.team-showcase__count {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: var(--t-meta);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  z-index: 2;
}

.team-photos {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  min-height: clamp(480px, 58vh, 600px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-2);
}

.team-photo {
  position: absolute;
  left: 50%;
  top: var(--space-2);
  width: clamp(280px, 38vw, 400px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, 0) rotate(var(--r, 0deg)) scale(0.94);
  transition:
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter 0.45s ease;
  filter: saturate(0.85) brightness(0.96);
}

.team-photo.is-active {
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
  filter: saturate(1) brightness(1);
  transform: translate(-50%, 0) rotate(var(--r, 0deg)) scale(1);
}

.team-photo__frame {
  position: relative;
  background: var(--bg-raised);
  padding: 12px 12px 16px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    0 20px 48px rgba(0,0,0,0.12);
}

.team-photo__img {
  width: 100%;
}

.team-photo__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.team-photo__tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 56px;
  height: 18px;
  margin-left: -28px;
  background: color-mix(in srgb, var(--accent, var(--accent-bubblegum)) 72%, white);
  opacity: 0.9;
  transform: rotate(-4deg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  z-index: 2;
}

.team-photo__quote {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  font-size: var(--t-body-sm);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--fg-2);
  border-left: 2px solid color-mix(in srgb, var(--accent, var(--accent-butter)) 80%, transparent);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease 0.08s,
    margin 0.55s ease;
}

.team-photo.is-active .team-photo__quote {
  max-height: 6em;
  opacity: 1;
  margin-top: var(--space-4);
}

.team-showcase__wm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: clamp(48px, 8vh, 72px);
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 0;
}

.team-wm__char {
  display: inline-block;
  will-change: transform, opacity, filter;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 184, 75, 0.18);
  transform: translateY(105%) rotate(6deg) scale(0.82);
  opacity: 0;
  filter: blur(8px);
}

.team-showcase__wm.is-shown .team-wm__char {
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  transform: translateY(0) rotate(0deg) scale(1);
  opacity: 0.38;
  filter: blur(0);
  transition: none;
}

.team-showcase__wm.is-exiting .team-wm__char {
  animation: team-char-out 0.38s cubic-bezier(0.55, 0, 1, 0.45) forwards;
  animation-delay: calc(var(--i) * 28ms);
}

.team-showcase__wm.is-reveal .team-wm__char {
  animation: team-char-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 42ms + 40ms);
}

.team-showcase__wm.is-reveal::after {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(244, 215, 126, 0.28) 48%,
    transparent 58%
  );
  transform: translateX(-120%);
  animation: team-wm-shimmer 0.85s ease 0.15s forwards;
  pointer-events: none;
}

@keyframes team-char-out {
  to {
    opacity: 0;
    transform: translateY(-55%) rotate(-8deg) scale(0.75);
    filter: blur(10px);
  }
}

@keyframes team-char-in {
  0% {
    opacity: 0;
    transform: translateY(110%) rotate(10deg) scale(0.78);
    filter: blur(10px);
    -webkit-text-stroke: 1px rgba(232, 184, 75, 0.2);
    background: none;
    -webkit-text-fill-color: transparent;
  }
  55% {
    opacity: 0.9;
    transform: translateY(-6%) rotate(-2deg) scale(1.04);
    filter: blur(0);
    -webkit-text-stroke: 0;
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100% {
    opacity: 0.38;
    transform: translateY(0) rotate(0deg) scale(1);
    filter: blur(0);
    -webkit-text-stroke: 0;
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@keyframes team-wm-shimmer {
  to { transform: translateX(120%); }
}

/* ── Info panel (right) ── */
.team-info {
  padding: clamp(var(--space-6), 5vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-6));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  border-left: 1px solid var(--line-soft);
  background: var(--bg);
}

.team-info__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.team-info__cue {
  max-width: 32ch;
  font-size: var(--t-body-sm);
  color: var(--fg-2);
  font-style: italic;
  line-height: var(--leading-snug);
}

.team-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.team-nav__item {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--bg-muted);
  cursor: pointer;
  overflow: hidden;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.45s ease;
  user-select: none;
}

.team-nav__item:not(.is-active) {
  opacity: 0.55;
}

.team-nav__item:not(.is-active):hover {
  opacity: 0.88;
  border-color: var(--line);
}

.team-nav__item.is-active {
  opacity: 1;
  background: var(--bg);
  border-color: var(--line);
  box-shadow: var(--shadow-plinth);
}

.team-nav__bar {
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent, var(--color-patina));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.team-nav__item.is-active .team-nav__bar {
  transform: scaleY(1);
}

.team-nav__item[data-idx="0"] { --accent: var(--accent-lavender); }
.team-nav__item[data-idx="1"] { --accent: var(--accent-butter); }
.team-nav__item[data-idx="2"] { --accent: var(--accent-mint); }

.team-nav__num {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-mega);
  background: var(--foil);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  padding-top: 0.35em;
  width: 28px;
}

.team-nav__name {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  transition: font-size 0.5s var(--motion-unveil);
}

.team-nav__item.is-active .team-nav__name {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: -0.035em;
}

.team-nav__role {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin-top: var(--space-2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--motion-unveil), opacity 0.4s 0.08s;
}

.team-nav__item.is-active .team-nav__role {
  max-height: 4em;
  opacity: 1;
}

@media (max-width: 900px) {
  .team-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .team-showcase {
    padding-block: var(--space-7) var(--space-5);
    min-height: auto;
  }

  .team-photos {
    width: min(100%, 340px);
    min-height: clamp(420px, 58vh, 520px);
  }

  .team-photo {
    width: clamp(240px, 72vw, 340px);
  }

  .team-showcase__wm {
    font-size: clamp(2rem, 14vw, 3.25rem);
    min-height: 40px;
  }

  .team-info {
    border-left: none;
    border-top: 1px solid var(--line-soft);
    padding: var(--space-6) var(--page-pad) var(--space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-photo,
  .team-nav__item,
  .team-showcase__wm {
    transition: none;
    animation: none;
  }

  .team-wm__char,
  .team-showcase__wm.is-exiting .team-wm__char,
  .team-showcase__wm.is-reveal .team-wm__char {
    animation: none;
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.38;
    transform: none;
    filter: none;
  }

  .team-showcase__wm.is-reveal::after {
    display: none;
  }
}


/* ─────────────────────────────────────────────
   CONTACT — Dior-style footer layout
   ───────────────────────────────────────────── */
.contact {
  background: var(--bg-muted);
  color: var(--fg);
  min-height: auto;
}

.contact__canvas {
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--color-patina);
}

/* Ghost watermark */
.contact__wm {
  position: absolute;
  bottom: var(--space-5);
  right: calc(var(--page-pad) * -0.5);
  font-size: clamp(7rem, 18vw, 14rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(26,23,20,0.06);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
  z-index: 0;
}

.contact__honey {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Top: newsletter left + columns right */
.contact__top {
  display: flex;
  gap: clamp(var(--space-6), 8vw, var(--space-8));
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--line-soft);
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.contact__newsletter {
  flex: 0 0 clamp(260px, 38%, 440px);
}

/* Eyebrow */
.contact__nl-eyebrow {
  display: block;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--color-patina);
  margin-bottom: var(--space-3);
}

.contact__nl-label {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  margin-bottom: var(--space-5);
}

.contact__toast {
  margin-bottom: var(--space-3);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--color-patina-dk);
}

.contact__toast--error { color: #e07070; }

.contact__nl-form { display: flex; flex-direction: column; gap: 0; }

.contact__nl-row {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-patina);
  border-radius: 6px;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  gap: var(--space-2);
  background: var(--bg-raised);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.contact__nl-row:focus-within {
  border-color: var(--color-patina);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-patina) 20%, transparent);
}

.contact__nl-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: var(--space-2) 0;
  font-family: var(--font-ui);
  font-size: var(--t-body-sm);
  color: var(--fg);
  min-width: 0;
}

.contact__nl-input::placeholder { color: var(--fg-3); }

.contact__nl-btn {
  background: var(--color-patina);
  border: none;
  border-radius: 4px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1714;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  flex-shrink: 0;
  white-space: nowrap;
}
.contact__nl-btn:hover { background: var(--color-patina-dk); color: #fff; }
.contact__nl-btn:active { transform: scale(0.97); }

/* Columns */
.contact__cols {
  flex: 1;
  display: flex;
  gap: clamp(var(--space-5), 5vw, var(--space-7));
  justify-content: flex-end;
}

.contact__col-title {
  display: block;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-4);
}

.contact__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact__col ul a,
.contact__col ul span {
  font-size: var(--t-body-sm);
  color: var(--fg-2);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
}

.contact__col ul a:hover { color: var(--fg); }

/* Bottom bar */
.contact__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.contact__socials {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--t-meta);
  color: var(--fg-3);
}

.contact__socials span {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact__socials a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color 0.2s;
}
.contact__socials a:hover { color: var(--fg); }

.contact__brand {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}

.contact__bar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.contact__bar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.contact__copy {
  font-size: var(--t-meta);
  color: var(--fg-3);
}

.contact__cookie-btn {
  font-size: var(--t-meta);
  color: var(--fg-3);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.contact__cookie-btn:hover { color: var(--fg-2); }

@media (max-width: 768px) {
  .contact__top {
    flex-direction: column;
    gap: var(--space-6);
  }
  .contact__newsletter { flex: none; width: 100%; }
  .contact__cols { justify-content: flex-start; flex-wrap: wrap; }
  .contact__bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .contact__bar-right { align-items: flex-start; }
}


/* ─────────────────────────────────────────────
   COOKIE CONSENT — Dior-style
   ───────────────────────────────────────────── */
body.cookie-consent-open {
  overflow: hidden;
}

.cookie-consent,
.cookie-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(var(--space-4), 4vw, var(--space-6));
}

.cookie-consent[hidden],
.cookie-panel[hidden] {
  display: none;
}

.cookie-consent__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(120, 120, 120, 0.55);
  opacity: 1;
}

.cookie-consent__panel,
.cookie-panel__sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  padding: clamp(var(--space-5), 4.5vw, 3.25rem);
  background: var(--bg);
  box-shadow: 0 18px 48px rgba(26, 23, 20, 0.14);
  text-align: left;
  opacity: 1;
  transform: translateY(0);
}

.cookie-panel__sheet {
  width: min(100%, 560px);
  border-radius: 8px;
}

.cookie-consent.is-open .cookie-consent__panel,
.cookie-panel.is-open .cookie-panel__sheet {
  animation: cookie-panel-in 0.45s var(--motion-unveil);
}

@keyframes cookie-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cookie-consent__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-5), 4vw, var(--space-6));
}

.cookie-consent__body,
.cookie-consent__note,
.cookie-consent__guide,
.cookie-panel__intro,
.cookie-panel__body {
  font-size: clamp(0.92rem, 1.35vw, 1rem);
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}

.cookie-panel__title {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  color: var(--fg);
}

.cookie-consent__inline-link {
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.cookie-consent__inline-link:hover {
  color: var(--fg);
}

.cookie-consent__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.cookie-consent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.25rem;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--bg);
  background: var(--fg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.25s ease;
}

.cookie-consent__btn:hover {
  background: var(--color-ink-soft);
}

.cookie-consent__btn--ghost {
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
}

.cookie-consent__btn--ghost:hover {
  background: var(--bg-muted);
}

.cookie-panel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.cookie-panel__item {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}

.cookie-panel__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cookie-panel__item-head,
.cookie-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.cookie-panel__toggle {
  cursor: pointer;
}

.cookie-panel__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cookie-panel__item-name {
  font-size: var(--t-body-sm);
  font-weight: 600;
  color: var(--fg);
}

.cookie-panel__intro {
  margin-bottom: var(--space-5);
}

.cookie-panel__item--essential .cookie-panel__item-head {
  margin-bottom: var(--space-2);
}

.cookie-panel__badge {
  flex-shrink: 0;
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--fg-3);
  white-space: nowrap;
}

.cookie-panel__item-desc {
  font-size: var(--t-meta);
  line-height: var(--leading-snug);
  color: var(--fg-3);
}

.cookie-panel__switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  background: var(--line);
  border-radius: var(--radius-pill);
  transition: background 0.25s ease;
}

.cookie-panel__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  transition: transform 0.25s var(--motion-unveil);
}

.cookie-panel__toggle input:checked + .cookie-panel__switch {
  background: var(--fg);
}

.cookie-panel__toggle input:checked + .cookie-panel__switch::after {
  transform: translateX(20px);
}

.cookie-panel__save {
  width: 100%;
  margin-bottom: var(--space-3);
}

.cookie-panel__back {
  width: 100%;
}

@media (max-width: 760px) {
  .cookie-consent__actions {
    grid-template-columns: 1fr;
  }

  .cookie-consent__btn--accept {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent.is-open .cookie-consent__panel,
  .cookie-panel.is-open .cookie-panel__sheet {
    animation: none;
  }
}

/* ─────────────────────────────────────────────
   DARK MODE — overrides for hardcoded rgba ink values
   ───────────────────────────────────────────── */
[data-theme="dark"] .universe__wm,
[data-theme="dark"] .events__wm,
[data-theme="dark"] .contact__wm {
  -webkit-text-stroke: 1px rgba(242,239,233,0.07);
}

/* Hero — warm gold glow từ dưới */
[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 70% 50% at 30% 100%, rgba(240,195,85,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255,127,168,0.05) 0%, transparent 55%),
    var(--bg);
}

/* About mission quote — subtle warm glow */
[data-theme="dark"] .about {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(240,195,85,0.06) 0%, transparent 70%),
    var(--bg);
}

[data-theme="dark"] .universe__stage {
  background:
    repeating radial-gradient(circle at 50% 50%, rgba(242,239,233,0.03) 0 1px, transparent 1px 24px),
    var(--bg);
}

[data-theme="dark"] .mem-wall__stage {
  background:
    radial-gradient(ellipse 55% 45% at var(--spot-x) var(--spot-y), rgba(240,195,85,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,127,168,0.05) 0%, transparent 55%),
    repeating radial-gradient(circle at 50% 50%, rgba(242,239,233,0.04) 0 1px, transparent 1px 22px),
    var(--bg-muted);
}

[data-theme="dark"] .about__bg {
  background:
    repeating radial-gradient(circle at 50% 50%, rgba(242,239,233,0.025) 0 1px, transparent 1px 24px),
    var(--bg);
}

/* WWD dark card — giữ contrast tốt */
[data-theme="dark"] .wwd-card--dark {
  background: var(--bg-muted);
  color: var(--fg);
  border: 1px solid var(--line);
}

/* Universe + Team placeholder — cần visible trong dark */
[data-theme="dark"] .brand-item__shot.ph,
[data-theme="dark"] .team-photo__img.ph {
  background: var(--bg-muted);
  border: 1px solid var(--line);
}

/* Events section — thêm subtle warm tint */
[data-theme="dark"] .events,
[data-theme="dark"] .events__canvas {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(240,195,85,0.04) 0%, transparent 60%),
    var(--bg-raised);
}

/* Contact — subtle glow */
[data-theme="dark"] .contact__canvas {
  background:
    radial-gradient(ellipse 60% 50% at var(--spot-x) var(--spot-y), rgba(240,195,85,0.05) 0%, transparent 65%),
    var(--bg-raised);
}

[data-theme="dark"] .contact__wm {
  -webkit-text-stroke: 1px rgba(242,239,233,0.07);
}

/* ─────────────────────────────────────────────
   RESPONSIVE — mobile & tablet (≤768px)
   Desktop layout unchanged above 768px
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --page-pad: clamp(22px, 5.5vw, 28px);
    --gutter: 18px;
  }

  /* Vertical rhythm — less tall, more breathable */
  .moments { padding-block: var(--space-6) 0; }
  .about { padding-block: var(--space-6); }
  .universe__stage { padding-block: var(--space-6); }
  .events__canvas { padding-block: var(--space-6) var(--space-7); }
  .contact__top { padding-block: var(--space-6); }

  .moments,
  .about,
  .universe,
  .events,
  .team {
    min-height: auto;
  }

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

  /* Hero — full viewport, content centered (less dead space on top) */
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: 64px;
    padding-bottom: var(--space-4);
    justify-content: space-between;
  }

  .hero__wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
    padding-top: var(--space-2);
  }

  .hero__eyebrow {
    margin-bottom: var(--space-3);
  }

  .hero__title {
    font-size: clamp(3.5rem, 18vw, 5.5rem);
    letter-spacing: -0.03em;
    line-height: 0.9;
    margin-bottom: var(--space-3);
  }

  .hero__tag {
    font-size: clamp(1.2rem, 4.5vw, 1.65rem);
    line-height: 1.35;
  }

  .hero__foot {
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
  }

  .hero__caption {
    max-width: none;
  }

  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
  }

  /* Statement — full viewport on mobile */
  .statement {
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-6);
  }

  .statement__inner {
    width: 100%;
  }

  .statement__quote {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.45;
    max-width: none;
  }

  .statement__attr {
    margin-top: var(--space-5);
  }

  .section-label {
    margin-bottom: var(--space-4);
    padding-block: var(--space-3);
  }

  .universe__wrap .section-label {
    margin-bottom: var(--space-6);
  }

  /* Moments — see carousel rules above (line ~977) */

  /* About */
  .wwd-grid {
    gap: var(--space-3);
  }

  .wwd-card {
    min-height: 260px;
    padding: var(--space-5);
  }

  .wwd-card__title {
    font-size: 1.65rem;
  }

  .wwd-card__num {
    font-size: clamp(5rem, 28vw, 7rem);
  }

  /* Universe */
  .brand-list {
    gap: var(--space-6);
  }

  .brand-item {
    padding-top: var(--space-2);
  }

  .brand-item__idx,
  .brand-item:nth-child(even) .brand-item__idx {
    font-size: clamp(2.75rem, 16vw, 4rem);
    top: 0;
    left: 0;
    right: auto;
    opacity: 0.4;
  }

  .brand-item__inner {
    gap: var(--space-4);
  }

  .brand-item__name {
    font-size: clamp(1.75rem, 8.5vw, 2.5rem);
    max-width: none;
  }

  .brand-item__polaroid,
  .brand-item:nth-child(even) .brand-item__polaroid {
    max-width: min(100%, 260px);
    margin-inline: 0;
    transform: rotate(0deg);
  }

  /* Events */
  .events__head-grid {
    margin-bottom: var(--space-6);
    gap: var(--space-5);
  }

  .events__title {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem);
    max-width: none;
  }

  .events__lead {
    margin-top: var(--space-3);
  }

  .events__stats {
    flex-direction: column;
    gap: var(--space-3);
  }

  .events__stat {
    flex: none;
    width: 100%;
  }

  .events__sticker {
    display: none;
  }

  .events__timeline {
    gap: var(--space-6);
  }

  .events__spine {
    left: 11px;
  }

  .events__year-block {
    padding-left: var(--space-6);
  }

  .events__year-block::before {
    left: 6px;
    width: 12px;
    height: 12px;
  }

  .events__year-num {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .events__year-hd {
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
  }

  .events__cards {
    gap: var(--space-3);
  }

  .events__cta .lk {
    display: inline-block;
    margin-left: 0;
    margin-top: var(--space-2);
  }

  /* Team */
  .team-showcase {
    padding-block: var(--space-6) var(--space-4);
    gap: var(--space-4);
  }

  .team-photos {
    width: min(100%, 300px);
    min-height: clamp(360px, 52vh, 440px);
  }

  .team-photo {
    width: clamp(220px, 68vw, 300px);
  }

  .team-info {
    padding: var(--space-5) var(--page-pad) var(--space-6);
    gap: var(--space-5);
  }

  .team-nav__item {
    padding: var(--space-4);
  }

  /* Contact */
  .contact__top {
    gap: var(--space-6);
  }

  .contact__newsletter {
    width: 100%;
  }

  .contact__nl-label {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    margin-bottom: var(--space-4);
  }

  .contact__cols {
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .contact__col {
    width: 100%;
  }

  .contact__nl-row {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .contact__nl-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .contact__wm {
    font-size: clamp(3rem, 20vw, 5rem);
    right: 0;
    bottom: var(--space-3);
  }

  .contact__bar {
    gap: var(--space-4);
    padding-block: var(--space-5);
  }

  .contact__bar-right {
    align-items: flex-start;
    width: 100%;
  }

  /* Cookie */
  .cookie-consent__panel {
    width: 100%;
    max-width: none;
    padding: var(--space-5);
  }

  .cookie-consent__body,
  .cookie-consent__note,
  .cookie-consent__guide {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

/* ─────────────────────────────────────────────
   HERO ART — decorative layer (mobile-only, hidden on desktop)
   ───────────────────────────────────────────── */
.hero__art {
  display: none;
}

@media (max-width: 768px) {
  /* Warm glow bg for hero on mobile */
  .hero {
    background:
      radial-gradient(ellipse 90% 55% at 12% 88%, rgba(232,184,75,0.13) 0%, transparent 58%),
      radial-gradient(ellipse 70% 50% at 92% 10%, rgba(255,127,168,0.09) 0%, transparent 52%),
      var(--bg);
  }

  [data-theme="dark"] .hero {
    background:
      radial-gradient(ellipse 90% 55% at 12% 88%, rgba(240,195,85,0.11) 0%, transparent 58%),
      radial-gradient(ellipse 70% 50% at 92% 10%, rgba(255,127,168,0.07) 0%, transparent 52%),
      var(--bg);
  }

  /* Art container — flex child filling the gap */
  .hero__art {
    display: block;
    position: relative;
    flex: 1;
    min-height: 100px;
    pointer-events: none;
    overflow: hidden;
    margin-top: var(--space-5);
  }

  /* Floating stickers */
  .hero__art-spark {
    position: absolute;
    line-height: 1;
    opacity: 0;
    animation:
      hero-spark-in  0.55s var(--motion-unveil) forwards,
      hero-spark-float 5s ease-in-out infinite;
  }

  .hero__art-spark--a {           /* ✦ gold — top left */
    left: 6%;
    top: 28%;
    font-size: 1.7rem;
    color: var(--accent-butter);
    --r: -16deg;
    animation-delay: 1.1s, 1.1s;
  }

  .hero__art-spark--b {           /* ◎ bubblegum — right */
    right: 12%;
    top: 18%;
    font-size: 1.2rem;
    color: var(--accent-bubblegum);
    --r: 11deg;
    animation-delay: 1.45s, 1.45s;
  }

  .hero__art-spark--c {           /* ♥ mint — lower center */
    left: 46%;
    top: 60%;
    font-size: 0.9rem;
    color: var(--accent-mint);
    --r: -5deg;
    animation-delay: 1.75s, 1.75s;
  }

  /* Dashed SVG path */
  .hero__art-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: color-mix(in srgb, var(--color-patina) 38%, transparent);
    opacity: 0;
    animation: hero-thread-in 1.1s var(--motion-unveil) 0.85s forwards;
  }

  /* Horizontal hairline */
  .hero__art-thread {
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--color-patina) 42%, transparent) 30%,
      color-mix(in srgb, var(--color-patina) 48%, transparent) 55%,
      color-mix(in srgb, var(--color-patina) 42%, transparent) 78%,
      transparent
    );
    transform: rotate(-1deg);
    transform-origin: center;
    opacity: 0;
    animation: hero-thread-in 1s var(--motion-unveil) 0.7s forwards;
  }

  @keyframes hero-spark-in {
    from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.5) translateY(10px); }
    to   { opacity: 0.7; transform: rotate(var(--r, 0deg)) scale(1) translateY(0); }
  }

  @keyframes hero-spark-float {
    0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
    50%       { transform: rotate(calc(var(--r, 0deg) + 7deg)) translateY(-8px); }
  }

  @keyframes hero-thread-in {
    from { opacity: 0; transform: rotate(-1deg) scaleX(0.3); }
    to   { opacity: 1; transform: rotate(-1deg) scaleX(1); }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .hero__art-spark { animation: none; opacity: 0.6; }
    .hero__art-thread,
    .hero__art-svg   { animation: none; opacity: 0.5; }
  }
}

/* ─────────────────────────────────────────────
   MOBILE POLISH PASS — targeted improvements ≤ 768px
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── NAV: smooth slide-in when menu opens ── */
  .nav__links--open {
    animation: nav-slide-in 0.26s var(--motion-unveil) both;
  }

  @keyframes nav-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .nav__links a {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
  }

  .nav__links a:last-child {
    border-bottom: none;
  }

  /* ── HERO: title near top, bigger type, real button CTAs ── */
  .hero__wrap {
    justify-content: flex-start;
    padding-top: clamp(var(--space-4), 10vh, var(--space-6));
    padding-bottom: var(--space-5);
  }

  .hero__title {
    font-size: clamp(4.5rem, 23vw, 6.5rem);
    margin-bottom: var(--space-4);
  }

  .hero__tag {
    font-size: clamp(1.15rem, 4.2vw, 1.5rem);
  }

  .hero__foot {
    border-top: 1px solid var(--line-soft);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    gap: var(--space-4);
    flex-direction: column;
    align-items: stretch;
  }

  .hero__caption {
    font-size: var(--t-body-sm);
    color: var(--fg-2);
  }

  .hero__cta {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-3);
    align-items: stretch;
  }

  /* Turn bare links into proper touch-target buttons */
  .hero__cta .lk {
    flex: 1;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-3);
    border: 1.5px solid var(--fg);
    border-bottom: 1.5px solid var(--fg);
    border-radius: 3px;
    background: var(--fg);
    color: var(--bg);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
  }

  .hero__cta .lk--muted {
    background: transparent;
    color: var(--fg-2);
    border-color: var(--line);
  }

  /* ── STATEMENT: no full-viewport height needed on mobile ── */
  .statement {
    min-height: 0;
    padding-block: var(--space-7) calc(var(--space-7) * 1.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .statement__quote {
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    line-height: 1.4;
  }

  /* ── EVENTS STATS: horizontal row — 3 tiles side by side ── */
  .events__stats {
    flex-direction: row !important;
    gap: var(--space-2);
  }

  .events__stat {
    flex: 1 !important;
    width: auto !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: var(--space-3) var(--space-2);
  }

  .events__stat strong {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    min-width: auto;
  }

  .events__stat span {
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    line-height: 1.3;
  }

  /* ── UNIVERSE: tighter polaroid so section isn't a mile long ── */
  .brand-item__polaroid,
  .brand-item:nth-child(even) .brand-item__polaroid {
    max-width: min(220px, 58vw);
  }

  /* Bring the idx watermark closer so it doesn't bleed into next item */
  .brand-item__idx,
  .brand-item:nth-child(even) .brand-item__idx {
    font-size: clamp(2.5rem, 14vw, 3.5rem);
    opacity: 0.35;
  }

  /* ── TEAM: tighter photo stack height ── */
  .team-photos {
    min-height: clamp(300px, 44vh, 380px);
  }

  .team-photo {
    width: clamp(200px, 62vw, 280px);
  }

  .team-showcase__count {
    font-size: 0.625rem;
  }

  /* ── CONTACT: 2-col grid for nav columns ── */
  .contact__cols {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-4);
    flex-direction: unset !important;
    flex-wrap: unset !important;
    width: 100%;
  }

  .contact__col:last-child {
    grid-column: 1 / -1;
  }

  .contact__col ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .contact__nl-row {
    flex-direction: row;
    align-items: center;
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    gap: var(--space-2);
  }

  .contact__nl-btn {
    width: auto;
    flex-shrink: 0;
  }

  /* ── MOMENTS: gallery-editorial redesign ── */

  /* Section header: bigger cue, stronger border */
  .moments__head {
    margin-bottom: var(--space-4);
  }

  .moments__cue {
    font-size: clamp(1.05rem, 4.6vw, 1.25rem);
    line-height: 1.5;
    border-left-width: 3px;
    border-left-color: var(--color-patina);
    padding-left: var(--space-3);
    font-style: normal;
    color: var(--fg-2);
  }

  /* Polaroids: wider, more impact */
  .mem-polaroid {
    flex: 0 0 84vw;
    width: 84vw;
    max-width: 370px;
  }

  /* Active polaroid: stronger colored shadow */
  .mem-polaroid.is-mobile-active .mem-polaroid__open {
    box-shadow:
      0 4px 12px rgba(26,23,20,0.07),
      0 32px 72px color-mix(in srgb, var(--mobile-accent, var(--accent-butter)) 44%, rgba(26,23,20,0.06));
  }

  /* ── Live caption: flat exhibition-label style ── */
  .mem-wall__mobile-ui {
    padding: 0 var(--page-pad) var(--space-5);
    background: transparent;
    margin-top: var(--space-2);
  }

  .mem-wall__mobile-live {
    /* Reset card */
    display: block;
    position: relative;
    padding: var(--space-4) 0 var(--space-3);
    background: transparent;
    border: none;
    border-top: 2px solid var(--color-patina);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    min-height: auto;
    transition: border-color 0.4s ease;
  }

  /* Count: small monospaced label, absolute top-right */
  .mem-wall__mobile-count {
    position: absolute;
    top: var(--space-4);
    right: 0;
    font-size: 0.5625rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    line-height: 1;
    color: var(--fg-3);
    /* Reset gradient fill */
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--fg-3);
    white-space: nowrap;
  }

  .mem-wall__mobile-copy {
    gap: var(--space-2);
    padding-right: 52px; /* avoid overlap with count */
  }

  .mem-wall__mobile-date {
    font-size: 0.5625rem;
    font-weight: 900;
    letter-spacing: 0.22em;
  }

  /* Title: BIG editorial uppercase — this is the hero text */
  .mem-wall__mobile-title {
    font-size: clamp(1.5rem, 6.2vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.04;
    text-transform: uppercase;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Caption: italic serif — gallery label body copy */
  .mem-wall__mobile-cap {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--fg-2);
    letter-spacing: 0;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Progress indicators: flush-left, minimal tick marks */
  .mem-wall__mobile-progress {
    margin-top: var(--space-4);
    justify-content: flex-start;
    gap: var(--space-2);
  }

  .mem-wall__mobile-dot {
    width: 20px;
    height: 2px;
    padding: 0;
    border-radius: 1px;
    background: var(--line);
  }

  .mem-wall__mobile-dot.is-active {
    width: 44px;
    background: var(--color-patina);
  }

  /* Chrome: hide — caption + dots cover all UX needs */
  .mem-wall__chrome {
    display: none;
  }

  /* ── ABOUT/WWD CARDS: ensure readable at all phone widths ── */
  .wwd-card__desc {
    max-width: none;
    font-size: 0.875rem;
  }

  /* ── EVENTS YEAR BLOCK: compact heading ── */
  .events__year-hd {
    gap: var(--space-2);
  }

  .events__year-cue {
    font-size: 0.8125rem;
    width: 100%;
  }

  /* ── LIGHTBOX NAV: show prev/next as swipe hint on mobile ── */
  .moment-lb__inner {
    padding: var(--space-5) var(--space-4);
  }
}


/* ═══════════════════════════════════════════════
   MOMENTS — MOBILE: ART BOOK — EDITION FINALE
   Stage có hồn · Card có chiều sâu · Khám phá
═══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Stage: rich immersive atmosphere ── */
  .mem-wall__stage {
    min-height: min(76dvh, 580px);
    /* Accent halo rises strong from bottom + corner blooms */
    background:
      radial-gradient(ellipse 105% 78% at 50% 100%,
        color-mix(in srgb, var(--mobile-accent, var(--accent-lavender)) 48%, transparent) 0%,
        transparent 68%),
      radial-gradient(ellipse 72% 52% at 10% 22%,
        color-mix(in srgb, var(--mobile-accent, var(--accent-lavender)) 18%, transparent) 0%,
        transparent 60%),
      radial-gradient(ellipse 52% 38% at 90% 16%,
        color-mix(in srgb, var(--mobile-accent, var(--accent-lavender)) 10%, transparent) 0%,
        transparent 55%),
      /* subtle woven paper texture */
      repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 3px,
        rgba(255,255,255,0.022) 3px, rgba(255,255,255,0.022) 4px
      ),
      var(--bg-muted);
    transition: background 0s;
  }

  /* ── Chapter number watermark: top-zone editorial stamp ── */
  .mem-wall__mobile-wm {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translateX(-50%) rotate(-7deg);
    font-size: min(46vw, 210px);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 3px color-mix(in srgb, var(--mobile-accent, var(--color-patina)) 64%, rgba(26,23,20,0.16));
    white-space: nowrap;
    opacity: 1;
  }

  [data-theme="dark"] .mem-wall__mobile-wm {
    -webkit-text-stroke: 3px color-mix(in srgb, var(--mobile-accent, var(--color-patina)) 52%, rgba(242,239,233,0.18));
  }

  /* ── Stickers ── */
  .mem-mobile-sticker { font-size: 1.75rem; opacity: 0.55; }

  /* ── Edge fades: directional chevrons ── */
  .mem-wall__fade {
    width: clamp(36px, 13vw, 62px);
    z-index: 4;
  }
  .mem-wall__fade::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid color-mix(in srgb, var(--fg) 30%, transparent);
    border-right: 1.5px solid color-mix(in srgb, var(--fg) 30%, transparent);
    pointer-events: none;
  }
  .mem-wall__fade--l::after {
    right: 10px;
    transform: translateY(-50%) rotate(-135deg);
  }
  .mem-wall__fade--r::after {
    left: 10px;
    transform: translateY(-50%) rotate(45deg);
  }

  /* ── Canvas ── */
  .mem-wall__canvas {
    padding: var(--space-5) 0 var(--space-4);
    gap: calc(var(--space-3) * 0.35);
  }
  .mem-wall__canvas::before,
  .mem-wall__canvas::after {
    flex: 0 0 14vw;
    width: 14vw;
  }

  /* ── Cards: 3-tier depth ── */

  /* Tier 3 — far ghosts: nearly invisible */
  .mem-polaroid {
    flex: 0 0 72vw;
    width: 72vw;
    max-width: 320px;
    opacity: 0.07;
    filter: blur(4px) saturate(0.08) brightness(0.52);
    transform: rotate(var(--mobile-r, 0deg)) scale(0.56);
    transition:
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.5s ease,
      filter 0.5s ease;
  }
  .mem-polaroid[data-idx="0"] { --mobile-r: -21deg; }
  .mem-polaroid[data-idx="1"] { --mobile-r:  25deg; }
  .mem-polaroid[data-idx="2"] { --mobile-r: -16deg; }
  .mem-polaroid[data-idx="3"] { --mobile-r:  22deg; }
  .mem-polaroid[data-idx="4"] { --mobile-r: -19deg; }

  /* Tier 2 — adjacent peek: visible but receded */
  .mem-polaroid.is-mob-prev {
    opacity: 0.30;
    filter: blur(1.5px) saturate(0.30) brightness(0.70);
    transform: rotate(-16deg) scale(0.65);
  }
  .mem-polaroid.is-mob-next {
    opacity: 0.30;
    filter: blur(1.5px) saturate(0.30) brightness(0.70);
    transform: rotate(16deg) scale(0.65);
  }

  /* Tier 1 — active: front and center, held in hand */
  .mem-polaroid.is-mobile-active {
    opacity: 1;
    filter: none;
    transform: rotate(-2deg) scale(1.11);
    z-index: 3;
  }

  /* is-inview overrides */
  .mem-wall.is-inview .mem-polaroid,
  .mem-wall.is-inview .mem-polaroid:nth-child(n) {
    opacity: 0.07;
    transition-delay: 0ms;
  }
  .mem-wall.is-inview .mem-polaroid.is-mob-prev,
  .mem-wall.is-inview .mem-polaroid.is-mob-next {
    opacity: 0.30;
  }
  .mem-wall.is-inview .mem-polaroid.is-mobile-active {
    opacity: 1;
    transform: rotate(-2deg) scale(1.11);
  }

  /* Active card: warm cream paper + directional shadow */
  .mem-polaroid.is-mobile-active .mem-polaroid__open {
    background: linear-gradient(175deg, #ffffff 0%, #faf7f2 100%);
    box-shadow:
      0 1px 3px rgba(26,23,20,0.06),
      3px 10px 26px rgba(26,23,20,0.14),
      5px 26px 60px rgba(26,23,20,0.10),
      0 68px 130px color-mix(in srgb, var(--mobile-accent, var(--accent-butter)) 72%, rgba(26,23,20,0.22));
  }

  /* Photo area: tinted gradient — art even without images */
  .mem-polaroid.is-mobile-active .mem-polaroid__photo {
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent, var(--accent-lavender)) 30%, #fff) 0%,
      color-mix(in srgb, var(--accent, var(--accent-lavender)) 10%, #fff) 60%,
      #fff 100%
    );
  }

  /* Placeholder label: italic serif in accent tone */
  .mem-polaroid.is-mobile-active .ph__label {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--accent, var(--color-patina)) 62%, rgba(26,23,20,0.42));
  }

  /* Date stamp: accent-tinted glass */
  .mem-polaroid.is-mobile-active .mem-polaroid__stamp {
    background: color-mix(in srgb, var(--accent, var(--accent-lavender)) 14%, rgba(255,255,255,0.92));
    border-color: color-mix(in srgb, var(--accent, var(--accent-lavender)) 38%, transparent);
    color: color-mix(in srgb, var(--accent, var(--accent-lavender)) 68%, rgba(26,23,20,0.82));
  }

  /* Tape strips: vivid on active only */
  .mem-polaroid .mem-polaroid__open::before,
  .mem-polaroid .mem-polaroid__open::after {
    opacity: 0;
    transition: opacity 0.45s ease;
  }
  .mem-polaroid.is-mobile-active .mem-polaroid__open::before,
  .mem-polaroid.is-mobile-active .mem-polaroid__open::after {
    opacity: 1;
    box-shadow: 0 2px 10px rgba(26,23,20,0.18);
  }

  /* ── Caption: art-book chapter label ── */
  .mem-wall__mobile-ui {
    padding: 0 var(--page-pad) var(--space-5);
    background: transparent;
    margin-top: var(--space-1);
  }
  .mem-wall__mobile-live {
    position: relative;
    display: block;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    min-height: auto;
    transition: none;
  }
  /* Separator: colored punch → neutral hairline */
  .mem-wall__mobile-live::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--mobile-accent, var(--color-patina)) 0px,
      var(--mobile-accent, var(--color-patina)) 40px,
      var(--line-soft) 40px
    );
    margin-bottom: var(--space-4);
  }
  .mem-wall__mobile-count {
    position: absolute;
    top: 6px;
    right: 0;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--fg-3);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--fg-3);
    line-height: 1;
    white-space: nowrap;
  }
  .mem-wall__mobile-copy {
    padding-right: 52px;
    gap: 5px;
  }
  .mem-wall__mobile-copy.is-changing {
    animation: artbook-reveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes artbook-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .mem-wall__mobile-date {
    font-size: 0.5625rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-patina-dk);
  }
  .mem-wall__mobile-title {
    font-size: clamp(1.55rem, 6.8vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
    text-transform: uppercase;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    color: var(--fg);
  }
  .mem-wall__mobile-cap {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--fg-2);
    letter-spacing: 0;
    line-height: 1.38;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* ── Progress: film-frame rectangles ── */
  .mem-wall__mobile-progress {
    margin-top: var(--space-4);
    justify-content: flex-start;
    align-items: flex-end;
    gap: 6px;
  }
  .mem-wall__mobile-dot {
    width: 10px;
    height: 14px;
    padding: 0;
    border-radius: 2px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    cursor: pointer;
    transition:
      background 0.4s ease,
      border-color 0.4s ease,
      height 0.35s var(--motion-unveil),
      box-shadow 0.4s ease;
  }
  .mem-wall__mobile-dot.is-active {
    width: 10px;
    height: 22px;
    background: color-mix(in srgb, var(--mobile-accent, var(--color-patina)) 90%, var(--color-patina));
    border-color: color-mix(in srgb, var(--mobile-accent, var(--color-patina)) 55%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--mobile-accent, var(--color-patina)) 45%, transparent);
  }

  .mem-wall__chrome { display: none; }

  /* ── Dark mode ── */
  [data-theme="dark"] .mem-wall__stage {
    background:
      radial-gradient(ellipse 105% 78% at 50% 100%,
        color-mix(in srgb, var(--mobile-accent, var(--accent-lavender)) 30%, transparent) 0%,
        transparent 68%),
      radial-gradient(ellipse 72% 52% at 10% 22%,
        color-mix(in srgb, var(--mobile-accent, var(--accent-lavender)) 12%, transparent) 0%,
        transparent 60%),
      var(--bg-muted);
  }
  [data-theme="dark"] .mem-wall__fade::after {
    border-top-color: color-mix(in srgb, var(--fg) 22%, transparent);
    border-right-color: color-mix(in srgb, var(--fg) 22%, transparent);
  }
  [data-theme="dark"] .mem-polaroid.is-mobile-active .mem-polaroid__open::before,
  [data-theme="dark"] .mem-polaroid.is-mobile-active .mem-polaroid__open::after {
    opacity: 0.5;
  }
}

/* ─────────────────────────────────────────────
   HERO — MOBILE ENHANCEMENTS
   Stats pills + chạy chữ marquee
───────────────────────────────────────────── */

/* Hide new elements on desktop */
.hero__stats,
.hero__art-marquee {
  display: none;
}

@media (max-width: 768px) {

  /* ── Stats row ── */
  .hero__stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(8px);
    animation: hero-stats-in 0.55s var(--motion-unveil) 0.55s forwards;
  }

  @keyframes hero-stats-in {
    to { opacity: 1; transform: none; }
  }

  .hero__stat {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fg-3);
    letter-spacing: 0.01em;
  }

  .hero__stat strong {
    font-weight: 900;
    color: var(--color-patina-dk);
  }

  .hero__stat-sep {
    color: var(--color-patina);
    font-size: 0.55rem;
    line-height: 1;
  }

  /* ── Marquee chạy chữ ── */
  .hero__art-marquee {
    display: block;
    position: absolute;
    /* sit in the middle of the art area */
    top: 42%;
    left: 0;
    right: 0;
    overflow: hidden;
    /* fade out toward edges */
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
    padding-block: var(--space-2);
    opacity: 0;
    animation: hero-thread-in 0.8s var(--motion-unveil) 0.7s forwards;
  }

  .hero__art-marquee-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: max-content;
    animation: hero-marquee 24s linear infinite;
  }

  .hero__art-marquee-inner span {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-patina-dk);
    white-space: nowrap;
    opacity: 0.8;
  }

  .hero__art-marquee-inner i {
    font-style: normal;
    color: var(--color-patina);
    font-size: 0.4rem;
    flex-shrink: 0;
    opacity: 0.7;
  }

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

  @media (prefers-reduced-motion: reduce) {
    .hero__stats { animation: none; opacity: 1; transform: none; }
    .hero__art-marquee { animation: none; opacity: 0.7; }
    .hero__art-marquee-inner { animation: none; }
  }
}

/* ─────────────────────────────────────────────
   MOMENTS — MOBILE SIMPLIFIED
   Strip decorative layers, keep clean structure
───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Remove accent gradient background, reduce height */
  .mem-wall__stage,
  [data-theme="dark"] .mem-wall__stage {
    background: var(--bg-muted);
    transition: none;
    min-height: auto;
  }

  .mem-wall__canvas {
    min-height: auto;
    padding: var(--space-5) 0 var(--space-4);
  }

  /* Hide stickers + watermark */
  .mem-wall__mobile-scene {
    display: none;
  }

  /* Polaroids: no tilt, no blur on inactive */
  .mem-polaroid {
    opacity: 0.35;
    filter: none;
    transform: none !important;
  }
  .mem-polaroid[data-idx="0"],
  .mem-polaroid[data-idx="1"],
  .mem-polaroid[data-idx="2"],
  .mem-polaroid[data-idx="3"],
  .mem-polaroid[data-idx="4"] { --mobile-r: 0deg; }

  .mem-polaroid.is-mobile-active {
    opacity: 1;
    transform: none !important;
  }

  /* Active polaroid: simple shadow, no accent glow */
  .mem-polaroid.is-mobile-active .mem-polaroid__open {
    box-shadow: 0 4px 20px rgba(26,23,20,0.12);
  }

  /* Tape strips: hide */
  .mem-polaroid .mem-polaroid__open::before,
  .mem-polaroid .mem-polaroid__open::after,
  .mem-polaroid.is-mobile-active .mem-polaroid__open::before,
  .mem-polaroid.is-mobile-active .mem-polaroid__open::after {
    display: none;
  }

  /* Stamp: neutral, no accent tinting */
  .mem-polaroid.is-mobile-active .mem-polaroid__stamp {
    background: rgba(255,255,255,0.9);
    border-color: var(--line-soft);
    color: var(--fg-2);
  }

  /* Placeholder label: neutral */
  .mem-polaroid.is-mobile-active .ph__label {
    font-family: inherit;
    font-style: normal;
    font-size: var(--t-label);
    color: var(--fg-3);
  }

  /* Caption separator: remove colored line */
  .mem-wall__mobile-live::before {
    display: none;
  }

  /* Caption card: flat, no glass effect */
  .mem-wall__mobile-live {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    min-height: auto;
    padding: 0;
    gap: 0;
    grid-template-columns: 1fr;
  }

  /* Count: plain text color, no foil */
  .mem-wall__mobile-count {
    position: static;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fg-3);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--fg-3);
    margin-bottom: var(--space-2);
  }

  .mem-wall__mobile-copy {
    padding-right: 0;
  }

  /* Date: neutral */
  .mem-wall__mobile-date {
    color: var(--fg-3);
  }

  /* Progress dots: simple */
  .mem-wall__mobile-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    border: none;
    background: var(--line);
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .mem-wall__mobile-dot.is-active {
    width: 6px;
    height: 6px;
    background: var(--fg-2);
    border-color: transparent;
    box-shadow: none;
    transform: scale(1.3);
  }
}