/* ============================================
   Atlas of Uncertainty — Splash Page
   Responsive CSS with Osmo Scaling System
   Design frame: 1800px → page = 90rem (÷20)
   Ideal viewport: 1440px (--size-font = 16px)
   All rem values = design_px / 20
   ============================================ */

/* -------------------------
   Scaling System by Osmo
   [https://osmo.supply/]
   ------------------------- */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* Reset & Base */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--size-font);
  scroll-behavior: smooth;
}

body {
  background: #62455b;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: auto;
}

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

img {
  display: block;
}

input, button {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
}

/* ============================================
   Page Container — 90rem (1800/20)
   At 1440px viewport: 90rem × 16px = 1440px
   Scales with viewport via Osmo --size-font
   ============================================ */
.page {
  position: relative;
  width: 90rem;       /* 1800 */
  height: 207rem;     /* extended to fit Partners section (4 team rows) */
  margin: 0 auto;
  max-width: var(--size-container);
  background: #62455b;
  overflow: clip;
}

/* ============================================
   Border Frame
   ============================================ */
.border-frame {
  position: absolute;
  left: 3.85rem;      /* 77 */
  top: 5rem;          /* 100 */
  width: 82.35rem;    /* 1647 */
  height: 153.95rem;  /* 3079 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   Decorative Grid Guide Marks
   ============================================ */
.grid-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.guide-v {
  display: none;
}

.guide-h {
  display: none;
}

/* Single horizontal line at the very bottom of the page */
.grid-guides::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(217, 217, 217, 0.15);
}

/* ============================================
   Logo
   ============================================ */
.logo {
  position: absolute;
  left: 3.9rem;       /* 78 */
  top: 5.05rem;       /* 101 */
  width: 9.05rem;     /* 181 */
  height: 9.05rem;    /* 181 */
  z-index: 10;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   Sidebar Navigation
   ============================================ */
.sidebar-nav {
  position: fixed;
  left: 3.9rem;       /* 78 — aligned with Atlas logo */
  bottom: 2.4rem;     /* 48 design px */
  width: 7.25rem;     /* 145 */
  z-index: 10;
  color: #fff;
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;        /* 4 */
}

.nav-item {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 7.25rem;     /* 145 */
}

.nav-label {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.96rem;           /* 19.2 */
  line-height: 1.09;
  letter-spacing: -0.0288rem;   /* -0.576 */
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

/* Dashed line between label and numeral — animated left-to-right */
.nav-dash {
  flex: 1;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  margin: 0 0.2rem;             /* 4 */
  align-self: flex-end;
  margin-bottom: 0.15rem;       /* 3 */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-item:hover .nav-dash,
.nav-contact:hover .nav-dash,
.nav-item.active .nav-dash,
.nav-contact.active .nav-dash {
  transform: scaleX(1);
}

.nav-numeral {
  font-family: 'Bodoni 72', 'Bodoni MT', 'Libre Bodoni', Georgia, serif;
  font-weight: 700;
  font-size: 0.5555rem;          /* 11.11 */
  line-height: 1.09;
  letter-spacing: -0.0167rem;    /* -0.3333 */
  text-align: right;
  width: 0.55rem;               /* 11 */
  flex-shrink: 0;
  color: #fff;
}

.nav-contact {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 7.25rem;     /* 145 */
}


/* ============================================
   Card Wrappers (momentum hover targets)
   Position + z-index lives on wrappers so GSAP
   can transform the inner cards freely.
   ============================================ */
.main-content-wrap {
  position: absolute;
  left: 22.3rem;      /* 446 */
  top: 6.6rem;        /* 132 */
  width: 54.75rem;    /* 1095 */
  height: 198rem;     /* extended for Partners section with spacing (4 team rows) */
  z-index: 5;
}

.socials-card-wrap {
  position: absolute;
  left: 16.2rem;      /* 324 */
  top: 17.2rem;       /* 344 */
  width: 48rem;       /* 960 */
  height: 18.75rem;   /* ~375 — half of original 751 */
  z-index: 3;
}

.contact-card-wrap {
  position: absolute;
  left: 35.2rem;      /* 704 */
  top: 49.05rem;      /* 981 */
  width: 48rem;       /* 960 */
  min-height: 45.9rem;/* 918 — grows with textarea content */
  z-index: 3;
}

/* ============================================
   Main Content Area
   ============================================ */
.main-content {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.main-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 54.75rem;    /* 1095 */
  height: 198rem;     /* matches main-content-wrap */
  object-fit: cover;
  z-index: 0;
}

/* ============================================
   Section shared styles
   ============================================ */
.section-label {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.677rem;           /* 13.54 */
  line-height: 0.7174rem;        /* 14.348 */
  font-style: normal;
}

/* ============================================
   About Section
   ============================================ */
.about-section {
  position: absolute;
  left: 0;
  top: 0;
  width: 54.75rem;    /* 1095 */
  z-index: 1;
}

.about-header {
  position: absolute;
  top: 0.5rem;        /* 10 */
  left: 1rem;         /* 20 */
  width: 52.75rem;    /* 1055 */
  display: flex;
  align-items: baseline;
}

.about-header .section-label:first-child {
  color: #000;
}

.about-title-label {
  position: absolute;
  left: 35.45rem;     /* 709 */
  color: #000;
}

.about-year {
  position: absolute;
  right: 0.2rem;      /* 4 */
  color: #000;
}

.about-divider {
  position: absolute;
  top: 1.65rem;       /* 33 */
  left: 0;
  width: 54.75rem;    /* 1095 */
  height: 1px;
  background: #000;
}

.about-heading {
  position: absolute;
  top: 2.25rem;       /* 45 */
  left: 1rem;         /* 20 */
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.659rem;           /* 33.18 */
  line-height: 1.65rem;          /* 33 */
  letter-spacing: -0.0498rem;    /* -0.9954 */
  color: #000;
  width: 29.85rem;    /* 597 */
  font-style: normal;
}

.about-description {
  position: absolute;
  top: 2.2rem;        /* 44 */
  left: 36.45rem;     /* 729 */
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;             /* 16 */
  line-height: 1.09;
  letter-spacing: -0.024rem;     /* -0.48 */
  color: #000;
  width: 16.65rem;    /* 333 */
  font-style: normal;
}

.about-body {
  position: relative;
}

/* ============================================
   Newsletter Section
   ============================================ */
.newsletter-section {
  position: absolute;
  left: 0;
  top: 22.6rem;       /* 452 */
  width: 54.75rem;    /* 1095 */
  z-index: 1;
}

.newsletter-section > .section-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.75rem;    /* 1095 */
  height: 1px;
  background: #000;
}

.newsletter-body {
  position: relative;
  width: 54.75rem;    /* 1095 */
  height: 19.6rem;    /* 392 */
}

.newsletter-left {
  position: absolute;
  top: 1.45rem;       /* 29 */
  left: 1.1rem;       /* 22 */
  width: 16.35rem;    /* 327 */
}

.newsletter-heading {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 4.128rem;           /* 82.56 */
  line-height: 4.046rem;         /* 80.913 */
  letter-spacing: -0.1238rem;    /* -2.4768 */
  text-transform: uppercase;
  color: #000;
  width: 16.35rem;    /* 327 */
  font-style: normal;
}

.newsletter-divider-v {
  position: absolute;
  left: 18.1rem;      /* 362 */
  top: 1px;
  width: 1px;
  height: 19.6rem;    /* 392 */
  background: #000;
}

.newsletter-right {
  position: absolute;
  top: 0;
  left: 19.35rem;     /* 387 */
  right: 0;
}

.newsletter-numeral {
  position: absolute;
  right: 1.35rem;     /* 27 */
  top: 0.85rem;       /* 17 */
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.867rem;           /* 57.333 */
  line-height: 2.85rem;          /* 57 */
  letter-spacing: -0.086rem;     /* -1.72 */
  color: #000;
  text-align: right;
  font-style: normal;
}

.newsletter-desc {
  margin-top: 0.85rem; /* 17 */
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.659rem;           /* 33.18 */
  line-height: 1.65rem;          /* 33 */
  letter-spacing: -0.0498rem;    /* -0.9954 */
  color: #000;
  width: 24.4rem;     /* 488 */
  font-style: normal;
}

.newsletter-privacy {
  position: absolute;
  top: 17.6rem;
  left: 0;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.55rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.45);
  text-decoration: underline;
  width: 24.4rem;
}

.newsletter-thankyou {
  position: absolute;
  top: 15.45rem;
  left: 0;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #000;
  width: 24.4rem;
}

.newsletter-form {
  display: flex;
  position: absolute;
  top: 14.95rem;
  left: 0;
}

.newsletter-input-wrap {
  width: 28.55rem;    /* 571 */
  height: 2.35rem;    /* 47 */
  border: 1px solid #000;
  display: flex;
  align-items: center;
  padding: 0 0.75rem; /* 15 */
}

.newsletter-input {
  width: 100%;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;             /* 16 */
  line-height: 1.09;
  letter-spacing: -0.024rem;     /* -0.48 */
  color: #000;
  background: transparent;
}

.newsletter-input::placeholder {
  color: #000;
}

.newsletter-subscribe {
  width: 5.65rem;     /* 113 */
  height: 2.35rem;    /* 47 */
  background: #c36e62;
  color: #fff;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;             /* 16 */
  line-height: 1.09;
  letter-spacing: -0.024rem;     /* -0.48 */
  cursor: pointer;
  transition: background 0.2s;
}

.newsletter-subscribe:hover {
  background: #b35d52;
}

/* ============================================
   Exhibition Section
   ============================================ */
.exhibition-section {
  position: absolute;
  left: 0;
  top: 42.2rem;       /* 844 */
  width: 54.75rem;    /* 1095 */
  min-height: 8.9rem; /* leaves room for RSVP below the dates */
  z-index: 1;
}

.exhibition-section > .section-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.75rem;    /* 1095 */
  height: 1px;
  background: #000;
}

.exhibition-body {
  position: relative;
  min-height: 8.9rem;
  padding-top: 1.2rem; /* 24 — vertically centered */
}

.exhibition-left {
  position: absolute;
  left: 1rem;         /* 20 */
  top: 1.2rem;        /* 24 */
}

.exhibition-rsvp-button {
  margin-top: 1rem;
  min-width: 8.4rem;
  height: 2.35rem;
  padding: 0 1.2rem;
  background: #000;
  color: #f5f0eb;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: -0.024rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.exhibition-rsvp-button:hover {
  background: #c36e62;
  color: #000;
}

.exhibition-label-bold {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.96rem;            /* 19.2 — matches nav */
  line-height: 130%;
  letter-spacing: -0.0288rem;    /* -0.576 */
  color: #000;
  font-style: normal;
}

.exhibition-date {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.96rem;            /* 19.2 — matches nav */
  line-height: 130%;
  letter-spacing: -0.0288rem;    /* -0.576 */
  color: #000;
  font-style: normal;
}

.exhibition-date u {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.exhibition-right {
  position: absolute;
  right: 1rem;        /* 20 — mirror left margin */
  top: 1.2rem;        /* 24 */
  text-align: left;
}

/* ============================================
   Team Section
   ============================================ */
.team-section {
  position: absolute;
  left: 0;
  top: 51.1rem;       /* shifted down so exhibition divider sits below RSVP */
  width: 54.75rem;    /* 1095 */
  z-index: 1;
}

.team-section > .section-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.75rem;    /* 1095 */
  height: 1px;
  background: #000;
}

.team-header-divider {
  position: absolute;
  top: 13.05rem;      /* 261 */
  left: 0;
  width: 54.75rem;    /* 1095 — full width across section */
  height: 1px;
  background: #000;
}

.team-header {
  position: absolute;
  top: 13.95rem;      /* 279 */
  left: 1.2rem;       /* 24 — matches page margins */
  right: 1.2rem;      /* 24 */
  display: flex;
  align-items: baseline;
}

.team-heading {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 4.127rem;           /* 82.53 */
  line-height: 3.6rem;           /* 72 */
  letter-spacing: -0.1238rem;    /* -2.4759 */
  color: #000;
  font-style: normal;
}

.team-numeral {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.867rem;           /* 57.333 */
  line-height: 2.85rem;          /* 57 */
  letter-spacing: -0.086rem;     /* -1.72 */
  color: #000;
  text-align: right;
  position: absolute;
  right: 0;           /* 24px from page border via header's right: 1.2rem */
  font-style: normal;
}

.team-grid {
  position: absolute;
  top: 20.2rem;       /* 404 */
  left: 1.2rem;       /* 24 */
  right: 1.2rem;      /* 24 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;          /* 20 — 20px between cards */
}

.team-card {
  width: 100%;
  background: #62455b;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.team-card-img-wrap {
  margin: 0.3rem 0.25rem 0;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.team-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-info {
  flex: 1;
  padding: 0.9rem 0.6rem 1.2rem;
  display: flex;
  flex-direction: column;
}

.team-card-name {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.659rem;           /* 33.18 */
  line-height: 1.65rem;          /* 33 */
  letter-spacing: -0.06rem;
  color: #fff;
  margin-bottom: 0.4rem;
}

.team-card-role {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0.5rem;
}

.team-card-bio {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.667rem;
  line-height: 1.35;
  color: #fff;
  margin-top: auto;
  padding-top: 0.4rem;
}

/* ============================================
   Partners & Sponsors Section
   ============================================ */
.partners-section {
  position: absolute;
  left: 0;
  top: 177.6rem;      /* moved down to preserve spacing after exhibition/team shift */
  width: 54.75rem;    /* 1095 */
  z-index: 1;
}

.partners-section > .section-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.75rem;    /* 1095 */
  height: 1px;
  background: #000;
}

.partners-header {
  position: absolute;
  top: 0.9rem;        /* matches team: 0.9rem below divider line */
  left: 1.2rem;       /* 24 — matches page margins */
  right: 1.2rem;      /* 24 */
  display: flex;
  align-items: baseline;
}

.partners-heading {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 4.127rem;           /* 82.53 — matches team-heading */
  line-height: 3.6rem;           /* 72 */
  letter-spacing: -0.1238rem;    /* -2.4759 */
  color: #000;
  font-style: normal;
}

.partners-numeral {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.867rem;           /* 57.333 */
  line-height: 2.85rem;          /* 57 */
  letter-spacing: -0.086rem;     /* -1.72 */
  color: #000;
  text-align: right;
  position: absolute;
  right: 0;           /* 24px from page border via header's right: 1.2rem */
  font-style: normal;
}

.partners-grid {
  position: absolute;
  top: 6.5rem;         /* below heading with spacing */
  left: 1.2rem;        /* 24 — matches page margins */
  right: 1.2rem;       /* 24 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 1.5rem;
}

.partners-logo {
  width: 9rem;
  height: 3.75rem;
  object-fit: contain;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.partners-logo--inverted {
  filter: grayscale(1) invert(1);
}

.partners-placeholder {
  width: 6rem;         /* 120 */
  height: 3rem;        /* 60 */
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 0.667rem;           /* 13.33 */
  color: rgba(0, 0, 0, 0.3);
}

/* ============================================
   Socials Card (Overlapping — olive green)
   ============================================ */
.socials-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

.socials-bg {
  position: absolute;
  inset: 0;
  background: #7e7e55;
}

.socials-texture {
  position: absolute;
  inset: 0;
  background-image: url('assets/socials-texture.png');
  background-size: 13.55rem 42.85rem; /* 271 857 */
  background-position: top left;
  mix-blend-mode: darken;
}

.socials-header {
  position: absolute;
  top: 0.55rem;       /* 11 */
  left: 1rem;         /* 20 */
  right: 1rem;        /* 20 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.socials-label {
  color: #fff;
}

.socials-icons {
  display: flex;
  align-items: center;
  gap: 0.4rem;        /* 8 */
  position: absolute;
  right: 0;
  top: 0;
}

.social-icon {
  width: 0.8rem;      /* 16 */
  height: 0.8rem;     /* 16 */
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.2s;
}

.social-icon:hover {
  opacity: 0.7;
}

.socials-divider {
  position: absolute;
  top: 1.8rem;        /* 36 */
  left: 0.05rem;      /* 1 */
  width: 47.95rem;    /* 959 */
  height: 1px;
  background: #fff;
  z-index: 1;
}

.socials-title-row {
  position: absolute;
  top: 2.65rem;       /* 53 */
  left: 1rem;         /* 20 */
  right: 1rem;        /* 20 */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  z-index: 1;
}

.socials-heading {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.867rem;           /* 57.333 */
  line-height: 2.85rem;          /* 57 */
  letter-spacing: -0.086rem;     /* -1.72 */
  color: #fff;
  font-style: normal;
}

.socials-numeral {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.867rem;           /* 57.333 */
  line-height: 2.85rem;          /* 57 */
  letter-spacing: -0.086rem;     /* -1.72 */
  color: #fff;
  font-style: normal;
}

.socials-icons--bottom {
  position: absolute;
  bottom: 2.4rem;     /* 48px from card bottom */
  left: 1rem;         /* 20 — aligned with "Join the Conversation" heading */
  display: flex;
  align-items: center;
  gap: 1.2rem;
  z-index: 1;
}

.socials-icons--bottom .social-icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.2s;
  filter: brightness(0) invert(1);
}

.socials-icons--bottom .social-icon:hover {
  opacity: 0.7;
}

.socials-images {
  position: absolute;
  top: 7.7rem;        /* 154 */
  left: 1rem;         /* 20 */
  display: flex;
  gap: 0.8rem;        /* 16 */
  z-index: 1;
}

.socials-slide {
  width: 22.6rem;     /* 452 */
  height: 28.15rem;   /* 563 */
  overflow: hidden;
  position: relative;
}

.socials-slide:first-child img {
  position: absolute;
  top: 0;
  left: -39.93%;
  width: 179.87%;
  height: 144.4%;
  max-width: none;
}

.socials-slide:last-child img {
  position: absolute;
  top: 0;
  left: -31.89%;
  width: 163.78%;
  height: 131.62%;
  max-width: none;
}

/* Group-35 overlay on socials card — arrow on images area */
.socials-overlay {
  position: absolute;
  top: 8.55rem;         /* 22.8% of card = on images */
  left: 31.8rem;        /* 66.2% of card = right image area */
  width: 1.5rem;        /* 30 — small directional arrow */
  height: 1.5rem;       /* 30 */
  z-index: 2;
  cursor: pointer;
  transition: opacity 0.2s;
}

.socials-overlay:hover {
  opacity: 0.7;
}

.socials-overlay img {
  width: 100%;
  height: 100%;
}

/* Circular arrow — now lives in .socials-card-wrap (not card) to avoid overflow:hidden clipping */
.socials-arrow {
  position: absolute;
  right: 1.2rem;      /* right side of images, acts as next button */
  top: 20.375rem;     /* vertically centered on images: 7.7 + 28.15/2 - 1.4 = 20.375 */
  width: 2.8rem;      /* 56 */
  height: 2.8rem;     /* 56 */
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  z-index: 6;
  cursor: pointer;
  transition: opacity 0.2s;
}

.socials-arrow:hover {
  opacity: 0.7;
}

.socials-arrow img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.65));
}

/* ============================================
   Contact Card (Overlapping — terracotta)
   ============================================ */
.contact-card {
  position: relative;
  width: 100%;
  min-height: 45.9rem;/* base height — grows with content */
  overflow: hidden;
  cursor: pointer;
}

.contact-bg {
  position: absolute;
  inset: 0;
  background: #c36e62;
}

.contact-texture {
  position: absolute;
  inset: 0;
  background-image: url('assets/contact-texture.png');
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
}

.contact-header {
  position: absolute;
  top: 0.55rem;       /* 11 */
  left: 1rem;         /* 20 */
  right: 1rem;        /* 20 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.contact-label {
  color: #000;
}

.contact-label-right {
  color: #000;
  text-align: right;
}

.contact-divider {
  position: absolute;
  top: 1.8rem;        /* 36 */
  left: 0.05rem;      /* 1 */
  width: 47.95rem;    /* 959 */
  height: 1px;
  background: #000;
  z-index: 1;
}

.contact-body {
  position: absolute;
  top: 1.85rem;       /* 37 */
  left: 0;
  right: 0;
  height: 19.55rem;   /* 391 */
  z-index: 1;
}

.contact-left {
  position: absolute;
  left: 0.95rem;      /* 19 */
  top: auto;
  bottom: 2.4rem;     /* 48px from bottom line */
  width: 17.55rem;    /* 351 */
}

.contact-desc {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.659rem;           /* 33.18 */
  line-height: 1.65rem;          /* 33 */
  letter-spacing: -0.0498rem;    /* -0.9954 */
  color: #000;
  width: 17.55rem;    /* 351 */
  font-style: normal;
}

.contact-email {
  margin-top: 0.6rem;
  margin-bottom: 0.8rem;          /* 16 — gap before form */
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.96rem;            /* 19.2 — matches nav */
  line-height: 130%;
  color: #000;
}

.contact-email a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact-email a:hover {
  opacity: 0.6;
}

.contact-divider-v {
  position: absolute;
  left: 19.7rem;      /* 394 */
  top: 0;
  width: 1px;
  height: 19.55rem;   /* 391 */
  background: #000;
}

.contact-right {
  position: absolute;
  left: 20.95rem;     /* 419 */
  top: auto;
  bottom: 2.4rem;     /* 48px from bottom line */
  right: 0;
}

.contact-numeral {
  position: absolute;
  right: 1rem;        /* 20 */
  top: 1.2rem;        /* 24 — 24px below divider line */
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.867rem;           /* 57.333 */
  line-height: 2.85rem;          /* 57 */
  letter-spacing: -0.086rem;     /* -1.72 */
  color: #000;
  font-style: normal;
}

.contact-title {
  margin-top: 10rem;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 4.127rem;           /* 82.53 */
  line-height: 3.6rem;           /* 72 */
  letter-spacing: -0.1238rem;    /* -2.4759 */
  color: #000;
  width: 22.9rem;     /* 458 */
  font-style: normal;
}

.contact-title p {
  margin: 0;
}

/* Contact form */
.contact-form {
  position: relative;
  margin-top: 21.35rem;/* 427 */
  left: 0;
  right: 0;
  z-index: 1;
  padding-bottom: 3rem;/* space below submit button */
}

.form-row {
  position: relative;
  height: 4.75rem;    /* 95 */
}

.form-row--expand {
  height: auto;
  min-height: 4.75rem;
}

.form-divider {
  width: 47.95rem;    /* 959 */
  height: 1px;
  background: #000;
  margin-left: 0.05rem; /* 1 */
}

.form-content {
  display: flex;
  align-items: center;
  padding: 0.7rem 6rem 0.7rem 1rem; /* 14 120 14 20 — right padding clears form-badge */
  position: relative;
}

.form-row--expand .form-content {
  align-items: flex-start;
}

.form-number {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.659rem;           /* 33.18 */
  line-height: 1.65rem;          /* 33 */
  letter-spacing: -0.0498rem;    /* -0.9954 */
  color: #000;
  min-width: 19.95rem; /* 399 */
  font-style: normal;
}

.form-input {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 1.659rem;           /* 33.18 */
  line-height: 1.65rem;          /* 33 */
  letter-spacing: -0.0498rem;    /* -0.9954 */
  color: rgba(0, 0, 0, 0.21);
  flex: 1;
  font-style: normal;
  background: transparent;
  border: none;
  outline: none;
}

.form-input:focus {
  color: #000;
}

.form-input::placeholder {
  color: rgba(0, 0, 0, 0.21);
}

.form-input:focus::placeholder {
  color: rgba(0, 0, 0, 0.12);
}

textarea.form-textarea {
  resize: none;
  overflow: hidden;
  height: auto;
  line-height: 1.65rem;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
  word-break: break-word;
}

.form-badge {
  position: absolute;
  right: 1rem;        /* 20 */
  background: #000;
  color: #fff;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.5555rem;          /* 11.11 */
  line-height: 1.09;
  letter-spacing: -0.0167rem;    /* -0.3333 */
  text-align: right;
  padding: 0.35rem 0.55rem;     /* 7 11 */
  height: 1.35rem;    /* 27 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-submit {
  position: relative;
  margin-left: 20.95rem;/* 419 */
  margin-top: 1rem;
  width: 7.8rem;      /* 156 */
  height: 2.35rem;    /* 47 */
  background: #000;
  color: #fff;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;             /* 16 */
  line-height: 1.09;
  letter-spacing: -0.024rem;     /* -0.48 */
  cursor: pointer;
  transition: background 0.2s;
  z-index: 1;
}

.contact-submit:hover {
  background: #333;
}

.contact-thankyou {
  position: relative;
  z-index: 1;
  padding: 2rem 1.2rem;
  color: #000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/* ============================================
   Client-First structural refactor — desktop
   Main content flows naturally; overlay cards
   stay absolute within a stable page shell.
   ============================================ */
@media screen and (min-width: 992px) {
  .page,
  .page-wrapper {
    min-height: 100vh;
    height: auto;
  }

  .page-shell {
    position: relative;
    min-height: 100vh;
    padding-bottom: 4rem;
  }

  .border-frame {
    top: 5rem;
    bottom: 0;
    height: auto;
  }

  .main-wrapper {
    position: relative;
    padding-top: 6.6rem;
    padding-bottom: 6rem;
  }

  .container-main {
    width: 54.75rem;
  }

  .main-content-wrap {
    position: relative;
    left: auto;
    top: auto;
    margin-left: 22.3rem;
    width: 54.75rem;
    height: auto;
    min-height: 0;
  }

  .main-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
    background: #f5f0eb url('assets/paper-texture.png') center/cover;
    overflow: hidden;
  }

  .main-bg {
    display: none;
  }

  .main-content > section {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    z-index: 1;
  }

  .section_newsletter,
  .section_exhibition,
  .section_team,
  .section_partners {
    border-top: 1px solid #000;
  }

  .section_newsletter > .section-divider,
  .section_exhibition > .section-divider,
  .section_team > .section-divider,
  .section_partners > .section-divider {
    display: none;
  }

  .section_about {
    display: grid;
    grid-template-columns: minmax(0, 29.85rem) minmax(0, 16.65rem);
    align-items: start;
    column-gap: 6.6rem;
    min-height: 22.6rem;
    padding: 2.25rem 1rem 3rem;
  }

  .about-header {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }

  .about-divider {
    position: absolute;
    top: 1.65rem;
    left: 0;
    width: 100%;
  }

  .about-heading {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .about-description {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0.05rem;
  }

  .section_newsletter {
    min-height: 19.6rem;
    padding: 1.45rem 1.1rem 1.5rem;
  }

  .newsletter-body {
    width: auto;
    height: auto;
    min-height: 16.65rem;
    display: grid;
    grid-template-columns: 16.35rem 1px minmax(0, 1fr);
    column-gap: 1.25rem;
  }

  .newsletter-left {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .newsletter-divider-v {
    position: relative;
    left: auto;
    top: auto;
    width: 1px;
    height: auto;
    min-height: 100%;
  }

  .newsletter-right {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: flex;
    flex-direction: column;
    min-height: 16.65rem;
    padding-right: 1.35rem;
  }

  .newsletter-numeral {
    right: 0;
  }

  .newsletter-desc,
  .newsletter-privacy,
  .newsletter-thankyou {
    width: 24.4rem;
    max-width: 100%;
  }

  .newsletter-form,
  .newsletter-thankyou {
    position: relative;
    top: auto;
    left: auto;
    margin-top: auto;
  }

  .newsletter-privacy {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 0.45rem;
  }

  .section_exhibition {
    padding: 1.2rem 1rem 1.4rem;
    min-height: 0;
  }

  .exhibition-body {
    min-height: 0;
    padding-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
  }

  .exhibition-left,
  .exhibition-right {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .section_team {
    padding: 13.95rem 0 3rem;
  }

  .team-header-divider {
    position: absolute;
    top: 13.05rem;
    left: 0;
    width: 100%;
  }

  .team-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 1.2rem;
  }

  .team-grid {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 6.25rem 1.2rem 0;
  }

  .section_partners {
    padding: 0.9rem 0 3rem;
  }

  .partners-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 1.2rem;
  }

  .partners-grid {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 2rem 1.2rem 0;
  }
}

/* ============================================
   Media Kit Modal
   ============================================ */
.media-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(98, 69, 91, 0.8);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
}

.media-modal-backdrop.active {
  display: flex;
}

.media-modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-bottom: 0.15rem;
  cursor: pointer;
  transition: opacity 0.2s;
  z-index: 101;
}

.media-modal-close:hover {
  opacity: 0.7;
}

.media-modal {
  position: relative;
  width: 48rem;       /* 960 */
  height: 30rem;      /* 600 */
  overflow: hidden;
}

.media-modal-bg {
  position: absolute;
  inset: 0;
  background: #c36e62;
}

.media-modal-texture {
  position: absolute;
  inset: 0;
  background-image: url('assets/contact-texture.png');
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
}

.media-modal-header {
  position: absolute;
  top: 0.55rem;       /* 11 */
  left: 1rem;         /* 20 */
  right: 1rem;        /* 20 */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  z-index: 1;
}

.media-modal-label {
  color: #000;
}

.media-modal-label-right {
  color: #000;
  text-align: right;
}

.media-modal-divider-h {
  position: absolute;
  top: 1.8rem;        /* 36 */
  left: 0.05rem;      /* 1 */
  width: 47.95rem;    /* 959 */
  height: 1px;
  background: #000;
  z-index: 1;
}

.media-modal-body {
  position: absolute;
  top: 1.85rem;       /* 37 */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.media-modal-left {
  position: absolute;
  left: 0.95rem;      /* 19 */
  top: 10rem;
  width: 17.55rem;    /* 351 */
}

.media-modal-desc {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.659rem;           /* 33.18 */
  line-height: 1.65rem;          /* 33 */
  letter-spacing: -0.0498rem;    /* -0.9954 */
  color: #000;
  width: 17.55rem;    /* 351 */
  font-style: normal;
  margin-bottom: 1.5rem;
}

.media-modal-email {
  margin-top: 0.6rem;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.96rem;            /* 19.2 — matches nav */
  line-height: 130%;
  color: #000;
}

.media-modal-email a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.media-modal-email a:hover {
  opacity: 0.6;
}

.media-modal-download-btn {
  display: inline-block;
  margin-top: 1.2rem;
  width: 9.4rem;      /* 188 */
  height: 2.35rem;    /* 47 */
  background: #000;
  color: #fff;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;             /* 16 */
  line-height: 2.35rem;
  letter-spacing: -0.024rem;     /* -0.48 */
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}

.media-modal-download-btn:hover {
  background: #333;
}

.media-modal-divider-v {
  position: absolute;
  left: 19.7rem;      /* 394 */
  top: 0;
  width: 1px;
  bottom: 0;
  background: #000;
}

.media-modal-right {
  position: absolute;
  left: 20.95rem;     /* 419 */
  top: 0;
  right: 0;
}

.media-modal-numeral {
  position: absolute;
  right: 1rem;        /* 20 */
  top: 0.8rem;        /* 16 */
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.867rem;           /* 57.333 */
  line-height: 2.85rem;          /* 57 */
  letter-spacing: -0.086rem;     /* -1.72 */
  color: #000;
  font-style: normal;
}

.media-modal-title {
  margin-top: 0.8rem; /* 16 */
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 4.127rem;           /* 82.53 */
  line-height: 3.6rem;           /* 72 */
  letter-spacing: -0.1238rem;    /* -2.4759 */
  color: #000;
  font-style: normal;
}

.media-modal-title p {
  margin: 0;
}

.media-modal-links {
  position: absolute;
  top: 15rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;        /* 16 */
}

.media-modal-link {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.8rem;             /* 56 */
  line-height: 2.8rem;           /* 56 */
  letter-spacing: -0.0498rem;    /* -0.9954 */
  color: #000;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.media-modal-link:hover {
  opacity: 0.7;
}

/* ============================================
   RSVP modal
   ============================================ */
.rsvp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(98, 69, 91, 0.8);
  z-index: 610;
  display: none;
  align-items: center;
  justify-content: center;
}

.rsvp-modal-backdrop.active {
  display: flex;
}

.rsvp-modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0.15rem;
  cursor: pointer;
  transition: opacity 0.2s;
  z-index: 101;
}

.rsvp-modal-close:hover {
  opacity: 0.7;
}

.rsvp-modal {
  position: relative;
  width: 62rem;
  min-height: 36rem;
  overflow: hidden;
}

.rsvp-modal-bg {
  position: absolute;
  inset: 0;
  background: #c36e62;
}

.rsvp-modal-texture {
  position: absolute;
  inset: 0;
  background-image: url('assets/contact-texture.png');
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
}

.rsvp-modal-header {
  position: absolute;
  top: 0.55rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  z-index: 1;
}

.rsvp-modal-label {
  color: #000;
}

.rsvp-modal-divider-h {
  position: absolute;
  top: 1.8rem;
  left: 0.05rem;
  width: calc(100% - 0.1rem);
  height: 1px;
  background: #000;
  z-index: 1;
}

.rsvp-modal-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 24rem 1px 1fr;
  min-height: 36rem;
  padding-top: 1.85rem;
}

.rsvp-modal-left {
  position: relative;
  padding: 1rem 1rem 1.2rem;
}

.rsvp-modal-numeral {
  position: absolute;
  right: 1rem;
  top: 0.8rem;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.867rem;
  line-height: 2.85rem;
  letter-spacing: -0.086rem;
  color: #000;
}

.rsvp-modal-title {
  max-width: 15rem;
  margin-top: 2rem;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 3.25rem;
  line-height: 0.95;
  letter-spacing: -0.11rem;
  color: #000;
}

.rsvp-modal-desc {
  max-width: 18rem;
  margin-top: 1rem;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.35;
  letter-spacing: -0.02rem;
  color: rgba(0, 0, 0, 0.75);
}

.rsvp-modal-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.rsvp-modal-figure {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: rgba(245, 240, 235, 0.55);
  transition: opacity 0.2s, transform 0.2s;
}

.rsvp-modal-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rsvp-modal-figure:hover {
  opacity: 0.85;
  transform: translateY(-0.12rem);
}

.rsvp-modal-divider-v {
  background: #000;
}

.rsvp-modal-right {
  padding: 2.6rem 1.2rem 1.2rem;
}

.rsvp-modal-kicker {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.677rem;
  line-height: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.rsvp-modal-copy {
  max-width: 25rem;
  margin-top: 0.7rem;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.659rem;
  line-height: 1.05;
  letter-spacing: -0.0498rem;
  color: #000;
}

.rsvp-form-shell {
  position: relative;
  min-height: 24rem;
  margin-top: 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(245, 240, 235, 0.5);
}

.rsvp-form-embed {
  width: 100%;
  height: 24rem;
  border: 0;
  display: none;
  background: #f5f0eb;
}

.rsvp-form-shell.is-ready .rsvp-form-embed {
  display: block;
}

.rsvp-form-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  color: rgba(0, 0, 0, 0.7);
}

.rsvp-form-placeholder p:first-child {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02rem;
  color: #000;
}

.rsvp-form-placeholder p:last-child {
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.4;
}

.rsvp-form-shell.is-ready .rsvp-form-placeholder {
  display: none;
}

/* ── RSVP inline form (replaces Google Form embed) ── */
.rsvp-inline-form {
  position: relative;
  margin-top: 1.2rem;
}

.rsvp-inline-form .form-row {
  height: auto;
  min-height: 3.2rem;
}

.rsvp-inline-form .form-divider {
  width: 100%;
}

.rsvp-inline-form .form-content {
  padding: 0.7rem 5rem 0.7rem 1rem;
}

.rsvp-inline-form .form-number {
  min-width: 2.5rem;
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.rsvp-inline-form .form-input {
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.rsvp-inline-submit {
  position: relative;
  margin-top: 1rem;
  width: 100%;
  height: 2.35rem;
  background: #000;
  color: #fff;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.09;
  letter-spacing: -0.024rem;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
}

.rsvp-inline-submit:hover {
  background: #333;
}

.rsvp-inline-thankyou {
  position: relative;
  z-index: 1;
  padding: 2rem 0;
  color: #000;
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* ============================================
   Mobile-only elements (hidden on desktop)
   ============================================ */
.chapter-numeral,
.chapter-tag,
.nav-close {
  display: none;
}

/* ============================================
   Media Kit card — mobile only (hidden on desktop)
   ============================================ */
.media-kit-card {
  display: none;
}

/* Mobile navigation — hidden on desktop */
.mobile-navigation {
  display: none;
}

/* Socials slider — desktop: 2 slides visible side by side, arrow cycles when more slides added */
.socials-slider-track {
  display: flex;
  gap: 0.8rem;
}
.socials-slider-prev,
.socials-slider-next {
  display: none;
}

/* ============================================
   RESPONSIVE: Tablet (max-width: 991px)
   "Chapters" layout — rounded cards on plum
   canvas with desktop typography preserved
   ============================================ */
@media screen and (max-width: 991px) {
  .page {
    width: 100%;
    height: auto;
    overflow: visible;
    max-width: none;
    padding: 0 0.6rem 0.6rem;
  }

  /* Hide decorative desktop elements */
  .border-frame,
  .grid-guides {
    display: none;
  }

  /* Logo — relative, top of page */
  .logo {
    position: relative;
    left: auto;
    top: auto;
    width: 3rem;
    height: 3rem;
    margin: 1.2rem 0 0.8rem 0.9rem;
    z-index: 10;
  }

  /* Nav — fixed bottom-left, with backdrop for readability */
  .sidebar-nav {
    left: 1.25rem;
    bottom: 1.5rem;
    width: auto;
    background: rgba(98, 69, 91, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;
  }

  .nav-item,
  .nav-contact {
    width: auto;
  }

  .nav-label {
    font-size: 0.75rem;
  }

  /* ── Card wrappers — flow layout, rounded ── */
  .main-content-wrap,
  .socials-card-wrap,
  .contact-card-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: auto;
    z-index: 1 !important;
  }

  /* Main content wrap becomes transparent — sections are individual cards */
  .main-content-wrap {
    background: transparent;
    overflow: visible;
  }

  .main-content {
    height: auto;
    cursor: default;
    background: transparent;
    overflow: visible;
  }

  /* Hide the paper texture background on main content */
  .main-bg {
    display: none;
  }

  /* ── Every section becomes its own card (square corners, paper texture) ── */
  .about-section,
  .newsletter-section,
  .exhibition-section,
  .team-section,
  .partners-section {
    background: #f5f0eb url('assets/paper-texture.png') center/cover;
    border-radius: 0;
    margin-bottom: 0.625rem;
    overflow: hidden;
  }

  /* Socials + Contact cards — square corners on plum */
  .socials-card-wrap {
    margin-bottom: 0.625rem;
  }

  .socials-card {
    border-radius: 0;
    height: auto;
  }

  .contact-card-wrap {
    margin-bottom: 0.625rem;
  }

  .contact-card {
    border-radius: 0;
    height: auto;
    min-height: auto;
  }

  /* ── About section ── */
  .about-section {
    position: relative;
    width: 100%;
    padding: 0.8rem 1.2rem 2rem;
  }

  .about-header {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .about-title-label {
    position: relative;
    left: auto;
    margin-left: auto;
  }

  .about-year {
    position: relative;
    right: auto;
    margin-left: auto;
  }

  .about-divider {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0.5rem;
  }

  .about-heading {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 1rem;
  }

  .about-description {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 1rem;
  }

  /* ── Newsletter section ── */
  .newsletter-section {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0.8rem 1.2rem 1.5rem;
  }

  .newsletter-section > .section-divider {
    position: relative;
    width: 100%;
  }

  .newsletter-body {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding-top: 0.8rem;
  }

  .newsletter-left {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .newsletter-heading {
    font-size: 3rem;
    line-height: 2.9rem;
    width: 100%;
  }

  .newsletter-divider-v {
    display: none;
  }

  .newsletter-right {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .newsletter-numeral {
    position: relative;
    right: auto;
    top: auto;
    display: block;
    text-align: left;
    margin-bottom: 0.4rem;
  }

  .newsletter-desc {
    width: 100%;
  }

  .newsletter-form {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 1.2rem;
  }

  .newsletter-privacy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0.5rem;
  }

  .newsletter-thankyou {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 1rem;
  }

  .newsletter-input-wrap {
    flex: 1;
    width: auto;
  }

  /* ── Exhibition section — compact strip card ── */
  .exhibition-section {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0.8rem 1.2rem 1rem;
  }

  .exhibition-section > .section-divider {
    position: relative;
    width: 100%;
  }

  .exhibition-body {
    padding-top: 0.6rem;
  }

  .exhibition-left {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }

  .exhibition-right {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 0;
  }

  .exhibition-rsvp-button {
    margin-top: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    min-width: 0;
    width: auto;
    padding: 0 1.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
  }

  /* ── Team section — horizontal scroll ── */
  .team-section {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0.8rem 0 1.5rem;
  }

  .team-section > .section-divider {
    position: relative;
    width: 100%;
    margin-left: 1.2rem;
    margin-right: 1.2rem;
    width: calc(100% - 2.4rem);
  }

  .team-header-divider {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 2.4rem);
    margin: 1rem 1.2rem 0;
  }

  .team-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: calc(100% - 2.4rem);
    margin: 0.5rem 1.2rem 0;
  }

  .team-heading,
  .partners-heading {
    font-size: 3rem;
    line-height: 2.8rem;
  }

  .team-numeral {
    position: relative;
    right: auto;
  }

  /* Horizontal scroll strip — override grid */
  .team-grid {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 1.2rem;
    display: flex;
    overflow-x: auto;
    gap: 0.6rem;
    padding: 0 1.2rem 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .team-grid::-webkit-scrollbar {
    display: none;
  }

  .team-card {
    flex-shrink: 0;
    width: 9.5rem;
    height: auto;
    aspect-ratio: auto;
    scroll-snap-align: start;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
  }

  .team-card-img-wrap {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0.35rem 0.35rem 0 0;
  }

  .team-card-info {
    position: relative;
    left: auto;
    bottom: auto;
    right: auto;
    padding: 0.5rem 0.5rem 0.6rem;
  }

  .team-card-name {
    font-size: 1rem;
    line-height: 1.1rem;
    white-space: normal;
  }

  .team-card-role {
    font-size: 0.55rem;
    margin-bottom: 0.3rem;
  }

  .team-card-bio {
    font-size: 0.521rem;
    display: block;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 0.25rem;
    line-height: 1.35;
  }

  /* ── Partners section ── */
  .partners-section {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0.8rem 1.2rem 2rem;
  }

  .partners-section > .section-divider {
    position: relative;
    width: 100%;
  }

  .partners-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 0.6rem;
  }

  .partners-numeral {
    position: relative;
    right: auto;
    margin-left: auto;
  }

  .partners-grid {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
  }

  /* ── Socials card ── */
  .socials-card .socials-bg,
  .socials-card .socials-texture {
    position: absolute;
    border-radius: 0;
  }

  .socials-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 0.55rem 1.2rem 0;
    z-index: 1;
  }

  .socials-divider {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0.5rem;
  }

  .socials-title-row {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 0.8rem 1.2rem 0;
  }

  .socials-images {
    position: relative;
    top: auto;
    left: auto;
    padding: 1.2rem;
    flex-wrap: wrap;
  }

  .socials-slide {
    width: calc(50% - 0.4rem);
    height: auto;
    aspect-ratio: 452 / 563;
  }

  .socials-overlay {
    display: none;
  }

  .socials-arrow {
    display: none;
  }

  .socials-icons--bottom {
    position: relative;
    bottom: auto;
    left: auto;
    padding: 1.2rem;
    gap: 1rem;
  }

  .socials-icons--bottom .social-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* ── Contact card ── */
  .contact-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 0.55rem 1.2rem 0;
  }

  .contact-divider {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0.5rem;
  }

  .contact-body {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.2rem;
  }

  .contact-left {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
  }

  .contact-divider-v {
    display: none;
  }

  .contact-right {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    margin-top: 1rem;
  }

  .contact-title {
    font-size: 3rem;
    line-height: 2.8rem;
  }

  .contact-numeral {
    position: relative;
    right: auto;
    top: auto;
    text-align: left;
    margin-bottom: 0.5rem;
  }

  .contact-form {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0;
    padding: 0;
  }

  .form-divider {
    width: 100%;
  }

  .form-number {
    min-width: 3rem;
  }

  .form-input {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .contact-submit {
    position: relative;
    left: auto;
    top: auto;
    margin-left: 0;
    width: 100%;
    margin-top: 8px;
  }

  /* ── Media modal — full width ── */
  .media-modal {
    width: 90vw;
    height: auto;
    min-height: 30rem;
    border-radius: 1rem;
    overflow: hidden;
  }

  .media-modal-divider-h {
    width: calc(100% - 0.1rem);
  }

  .media-modal-body {
    position: relative;
    top: auto;
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column-reverse;
  }

  .media-modal-left {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 1.2rem;
    border-top: 1px solid #000;
  }

  .media-modal-divider-v {
    display: none;
  }

  .media-modal-right {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    padding: 1.2rem;
    border-top: none;
  }

  .media-modal-numeral {
    position: relative;
    right: auto;
    top: auto;
    text-align: left;
    margin-bottom: 0.5rem;
  }

  .media-modal-title {
    font-size: 3rem;
    line-height: 2.8rem;
    margin-bottom: 1.5rem;
  }

  .media-modal-links {
    position: relative;
    top: auto;
  }

  /* ── RSVP modal — scrollable + stacked ── */
  .rsvp-modal-backdrop {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2rem 0;
  }

  .rsvp-modal-close {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
  }

  .rsvp-modal {
    width: 90vw;
    min-height: 0;
    margin: 0 auto;
  }

  .rsvp-modal-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .rsvp-modal-divider-v {
    display: none;
  }

  .rsvp-modal-left,
  .rsvp-modal-right {
    padding: 1rem 1.2rem 1.2rem;
  }

  .rsvp-modal-numeral {
    position: relative;
    right: auto;
    top: auto;
    margin-bottom: 0.5rem;
  }

  .rsvp-inline-form .form-divider {
    width: 100%;
  }

  .rsvp-inline-form .form-number {
    min-width: 2rem;
  }

  .rsvp-inline-submit {
    width: 100%;
  }

  /* ── Tablet font scale — 0.727× desktop, preserving hierarchy ── */
  .newsletter-numeral,
  .team-numeral,
  .partners-numeral,
  .socials-numeral,
  .contact-numeral,
  .media-modal-numeral {
    font-size: 2.1rem;
  }

  .about-heading {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .newsletter-desc {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .socials-heading {
    font-size: 3rem;
    line-height: 2.8rem;
  }

  /* ── Media Kit card — visible on tablet/mobile, reuses modal classes ── */
  .media-kit-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 0.625rem;
  }

  .media-kit-card .media-modal-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 0.55rem 1.2rem 0;
  }

  .media-kit-card .media-modal-divider-h {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0.5rem;
  }

  .media-kit-card .media-modal-body {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  .media-kit-card .media-modal-right {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    padding: 0.8rem 1.2rem 0;
    border-top: none;
  }

  .media-kit-card .media-modal-title {
    font-size: 3rem;
    line-height: 2.8rem;
    margin-bottom: 0.8rem;
  }

  .media-kit-card .media-modal-links {
    position: relative;
    top: auto;
    margin-bottom: 1.2rem;
  }

  .media-kit-card .media-modal-left {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 1rem 1.2rem 1.2rem;
    border-top: 1px solid #000;
  }

  .media-kit-card .media-modal-desc {
    width: auto;
    margin-bottom: 0.75rem;
  }

  .media-kit-card .media-modal-download-btn {
    margin-top: 0;
  }

  .media-kit-card .media-modal-divider-v {
    display: none;
  }

  /* ══════════════════════════════════════════════
     Concept B: "Chapters & Curtains" — exact match
     All values: concept px ÷ 16 = rem
     ══════════════════════════════════════════════ */

  /* ── Page container ── */
  .page {
    padding: 0 0.75rem 0.75rem;
  }

  /* ── Flex reorder: exhibition before newsletter ── */
  .main-content {
    display: flex;
    flex-direction: column;
  }

  .main-bg { order: 0; }
  .about-section { order: 1; }
  .exhibition-section { order: 2; }
  .newsletter-section { order: 3; }
  .team-section { order: 4; }
  .partners-section { order: 5; }

  /* ── Logo top bar ── */
  .logo {
    width: 3.375rem;
    height: 3.375rem;
    margin: 1.25rem 0 1rem 0.75rem;
  }

  /* ── Hide desktop nav, show mobile hamburger ── */
  .desktop-nav {
    display: none !important;
  }

  .mobile-navigation {
    display: block;
    z-index: 500;
    pointer-events: none;
    position: fixed;
    inset: 0;
  }

  .navigation__dark-bg {
    transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
    opacity: 0;
    pointer-events: auto;
    visibility: hidden;
    background-color: #000;
    position: absolute;
    inset: 0;
  }

  [data-navigation-status="active"] .navigation__dark-bg {
    opacity: 0.33;
    visibility: visible;
  }

  .hamburger-nav {
    border-radius: 0;
    position: absolute;
    top: 1.25rem;
    right: 0.75rem;
  }

  .hamburger-nav__bg {
    transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
    background-color: #f5f0eb;
    border-radius: 0;
    width: 3.5em;
    height: 3.5em;
    position: absolute;
    top: 0;
    right: 0;
  }

  [data-navigation-status="active"] .hamburger-nav__bg {
    width: 100%;
    height: 100%;
  }

  .hamburger-nav__group {
    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
    pointer-events: auto;
    transform-origin: 100% 0;
    flex-flow: column;
    padding: 2.25em 2.5em 2em 2em;
    display: flex;
    position: relative;
    transform: scale(0.15) rotate(0.001deg);
    opacity: 0;
    visibility: hidden;
  }

  [data-navigation-status="active"] .hamburger-nav__group {
    transform: scale(1) rotate(0.001deg);
    opacity: 1;
    visibility: visible;
  }

  .hamburger-nav__menu-p {
    opacity: 0.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.75em;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.75em;
    font-weight: 700;
  }

  .hamburger-nav__ul {
    grid-row-gap: 0.375em;
    flex-flow: column;
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
  }

  .hamburger-nav__li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hamburger-nav__a {
    color: #131313;
    justify-content: space-between;
    align-items: baseline;
    text-decoration: none;
    display: flex;
  }

  .hamburger-nav__a[aria-current] .hamburger-nav__p {
    opacity: 0.33;
  }

  .hamburger-nav__p {
    white-space: nowrap;
    margin-bottom: 0;
    padding-right: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.75em;
    font-weight: 700;
  }

  .hamburger-nav__dot {
    display: none;
  }

  .hamburger-nav__dash {
    flex: 1;
    min-width: 1.5em;
    height: 1px;
    background-color: currentColor;
    opacity: 0.2;
    margin: 0 0.5em;
    align-self: flex-end;
    margin-bottom: 0.35em;
  }

  .hamburger-nav__numeral {
    flex-shrink: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.625em;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.4;
  }

  .hamburger-nav .hamburger-nav__a:hover .hamburger-nav__dot {
    transform: scale(1) rotate(0.001deg);
    opacity: 0.25;
  }

  .hamburger-nav__toggle {
    transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
    pointer-events: auto;
    cursor: pointer;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    width: 3.5em;
    height: 3.5em;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0em, 0em) rotate(0.001deg);
  }

  [data-navigation-status="active"] .hamburger-nav__toggle {
    transform: translate(-1em, 1em) rotate(0.001deg);
  }

  .hamburger-nav__toggle-bar {
    transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
    background-color: #62455b;
    width: 40%;
    height: 0.125em;
    position: absolute;
    transform: translateY(-0.15em) rotate(0.001deg);
  }

  [data-navigation-status="active"] .hamburger-nav__toggle-bar {
    background-color: #131313;
    transform: translateY(0em) rotate(45deg);
  }

  [data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) {
    transform: translateY(0em) rotate(-45deg);
  }

  .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) {
    transform: translateY(0.15em) rotate(0.001deg);
  }

  /* ── Card spacing ── */
  .about-section,
  .newsletter-section,
  .team-section,
  .partners-section {
    margin-bottom: 0.625rem;
  }

  .about-section {
    margin-bottom: 0;
  }

  .exhibition-section {
    margin-bottom: 0;
  }

  .socials-card-wrap,
  .contact-card-wrap {
    margin-bottom: 0.625rem;
  }

  /* ── Decorative chapter numerals ── */
  .chapter-numeral {
    display: block;
    font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: absolute;
    right: 1.25rem;
    top: calc(0.5rem + 4px);
    pointer-events: none;
    z-index: 3;
    color: rgba(0, 0, 0, 0.5);
  }

  .socials-card .chapter-numeral {
    color: rgba(255, 255, 255, 0.6);
  }

  .contact-card .chapter-numeral {
    color: rgba(0, 0, 0, 0.5);
  }

  /* ── Section labels (desktop style: text + line) ── */
  .chapter-tag {
    display: block;
    font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
    font-size: 0.521rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0 1.25rem 0.5rem;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    color: rgba(0, 0, 0, 0.5);
    margin: 0 -1.25rem 0.75rem;
    position: relative;
    z-index: 2;
  }

  .chapter-tag--accent {
    border-bottom-color: #c36e62;
    color: #c36e62;
  }

  .chapter-tag--dark {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.5);
  }

  .chapter-tag--light {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
  }

  /* ── Hide desktop chrome ── */
  .about-header,
  .about-divider,
  .newsletter-section > .section-divider,
  .exhibition-section > .section-divider,
  .team-section > .section-divider,
  .partners-section > .section-divider,
  .team-header-divider {
    display: none;
  }

  .newsletter-numeral,
  .team-numeral,
  .partners-numeral,
  .socials-numeral,
  .contact-numeral {
    display: none;
  }

  /* ── About card ── */
  .about-section {
    padding: calc(0.5rem + 4px) 1.25rem 1.75rem;
  }

  .about-heading {
    font-size: 1.555rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  .about-description {
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.55);
    font-weight: 400;
    width: 100%;
    margin-top: 0;
  }

  /* ── Exhibition — black strip ── */
  .exhibition-section {
    background: #000 !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
  }

  .exhibition-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 0;
    min-height: 0;
  }

  .exhibition-left {
    flex: 1;
    min-width: 0;
  }

  .exhibition-right {
    flex-shrink: 0;
    text-align: left;
  }

  .exhibition-label-bold {
    color: #fff;
    font-size: 0.625rem;
    line-height: 1.35;
    letter-spacing: 0.05em;
  }

  .exhibition-date {
    color: #fff;
    font-size: 0.625rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    font-weight: 400;
    opacity: 0.5;
    margin-top: 0.125rem;
  }

  .exhibition-date u {
    text-decoration: none;
  }

  .exhibition-rsvp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 0 20px;
    height: 36px;
    min-width: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    background: #c36e62;
    color: #fff;
    border: none;
  }

  .exhibition-rsvp-button:hover,
  .exhibition-rsvp-button:active {
    background: #b35d52;
    color: #fff;
  }

  /* ── Newsletter card ── */
  .newsletter-section {
    padding: calc(0.5rem + 4px) 1.25rem 1.75rem;
  }

  .newsletter-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0;
  }

  .newsletter-left {
    width: 100%;
  }

  .newsletter-right {
    width: 100%;
  }

  .newsletter-heading {
    font-size: 1.555rem;
    line-height: 0.95;
    letter-spacing: -0.03em;
    width: auto;
    margin-bottom: 0;
  }

  .newsletter-numeral {
    display: none;
  }

  .newsletter-desc {
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.55);
    width: 100%;
    max-width: none;
    margin-bottom: 0.875rem;
  }

  .newsletter-form {
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-direction: row;
    gap: 0;
    margin-top: 0;
  }

  .newsletter-input-wrap {
    border: none;
    height: 2.75rem;
    background: rgba(0, 0, 0, 0.03);
    padding: 0 0.875rem;
  }

  .newsletter-input {
    font-size: 0.9rem;
  }

  .newsletter-subscribe {
    height: 2.75rem;
    width: auto;
    padding: 0 1.125rem;
    font-size: 0.9rem;
  }

  /* ── Socials card ── */
  .socials-label {
    display: none;
  }

  .socials-header {
    position: absolute;
    top: 2.5rem;
    right: 1.25rem;
    left: auto;
    padding: 0;
    z-index: 3;
  }

  .socials-icons {
    position: relative;
    right: auto;
    top: auto;
    gap: 0.625rem;
  }

  .social-icon {
    opacity: 0.6;
  }

  .socials-divider {
    display: none;
  }

  /* Reorder socials: label + heading at top, icons at bottom */
  .socials-card {
    display: flex;
    flex-direction: column;
    padding: calc(0.5rem + 4px) 1.25rem 1.25rem;
  }

  .socials-card > .chapter-tag { order: 1; }
  .socials-card > .chapter-numeral { order: 2; }
  .socials-header { order: 3; }
  .socials-title-row { order: 4; }
  .socials-icons--bottom { order: 5; }

  .socials-title-row {
    padding: 0 0 0.75rem;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .socials-heading {
    font-size: 1.555rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
  }

  .socials-header {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    padding: 0;
    z-index: 3;
  }

  .socials-icons--bottom {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    gap: 0.625rem;
    margin-top: auto;
  }

  .socials-icons--bottom .social-icon {
    width: 1.2rem;
    height: 1.2rem;
    opacity: 0.6;
  }

  .socials-icons--bottom a:first-child .social-icon {
    width: 1.32rem;     /* Instagram */
  }

  .socials-icons--bottom a:nth-child(2) .social-icon {
    width: 1.203rem;    /* Facebook */
  }

  .socials-images {
    padding: 1rem 0 0;
    margin: 0 -1.25rem;
    position: relative;
    overflow: hidden;
  }

  /* Socials slider */
  .socials-slider-track {
    display: flex;
    transition: transform 0.4s ease;
    width: 200%;
  }

  .socials-slide {
    width: 50%;
    flex-shrink: 0;
  }

  .socials-slide img {
    width: 100%;
    height: 11.25rem;
    object-fit: cover;
    border-radius: 0;
  }

  .socials-slider-prev,
  .socials-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .socials-slider-prev { left: 1.75rem; }
  .socials-slider-next { right: 1.75rem; }

  .socials-arrow {
    display: none;
  }

  /* ── Team card ── */
  .team-section {
    padding: calc(0.5rem + 4px) 1.25rem 1.75rem;
  }

  .team-header {
    width: auto;
    margin: 0 0 0.75rem;
  }

  .team-heading,
  .partners-heading {
    font-size: 1.555rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
  }

  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 0.75rem;
    padding: 0 0 0.5rem;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .team-card {
    background: transparent !important;
    width: auto;
    min-width: unset;
    border-radius: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
  }

  .team-card-img-wrap {
    width: 100%;
    height: auto;
    margin: 0 0 0.375rem;
    border-radius: 0;
    border: none;
    aspect-ratio: 1 / 1;
    background: #62455b;
  }

  .team-card-img-wrap img {
    border-radius: 0;
  }

  .team-card-info {
    text-align: left;
    padding: 0;
  }

  .team-card-name {
    color: #1a1a1a;
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: normal;
    margin-bottom: 1px;
  }

  .team-card-role {
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 2px;
  }

  .team-card-bio {
    display: block !important;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 0;
    padding-top: 0;
  }

  /* ── Partners card ── */
  .partners-section {
    padding: calc(0.5rem + 4px) 1.25rem 1.75rem;
  }

  .partners-header {
    width: auto;
    margin-top: 0;
  }

  /* ── Contact card ── */
  .contact-card {
    display: flex;
    flex-direction: column;
    padding: calc(0.5rem + 4px) 1.25rem 1.25rem;
  }

  .contact-header,
  .contact-divider {
    display: none;
  }

  .contact-body {
    flex-direction: column;
    padding: 0;
  }

  .contact-right {
    order: 1;
    margin-top: 0;
  }

  .contact-left {
    order: 2;
    margin-top: 0;
  }

  .contact-title {
    font-size: 1.555rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
    margin-top: 0;
    width: auto;
  }

  .contact-title p {
    display: inline;
  }

  .contact-desc {
    font-size: 0.9rem;
    line-height: 1.45;
    opacity: 0.6;
    width: 100%;
    max-width: 16.25rem;
    margin-bottom: 0.5rem;
  }

  /* ── Contact form — rounded fields ── */
  .contact-form {
    padding: 0;
  }

  .form-row {
    height: auto;
    min-height: 0;
    margin-bottom: 8px;
  }

  .form-row--expand {
    min-height: 0;
  }

  .form-divider {
    display: none;
  }

  .form-content {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 0;
    padding: 0.75rem 0.875rem;
  }

  .form-number {
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.2;
    min-width: 1.125rem;
  }

  .form-input {
    font-size: 0.9rem;
    font-weight: 500;
  }

  .form-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
  }

  .form-badge {
    display: none;
  }

  .contact-submit {
    border-radius: 0;
    width: 100%;
    height: 3rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    margin-top: 8px;
  }

  /* ── Media modal square corners ── */
  .media-modal {
    border-radius: 0;
  }

  /* Socials slider arrows/buttons hidden on desktop, visible via tablet rules above */
  .socials-slider-prev,
  .socials-slider-next {
    display: flex;
  }
}

/* ============================================
   Touch active states — mirror hover for touch devices
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .nav-item:active .nav-dash,
  .nav-contact:active .nav-dash {
    transform: scaleX(1);
  }

  .newsletter-subscribe:active {
    background: #b35d52;
  }

  .contact-submit:active {
    background: #333;
  }

  .social-icon:active {
    opacity: 0.7;
  }

  .socials-arrow:active {
    opacity: 0.7;
  }

  .media-modal-close:active {
    opacity: 0.7;
  }

  .media-modal-download-btn:active {
    background: #333;
  }

  .media-modal-link:active {
    opacity: 0.7;
  }
}

/* ============================================
   RESPONSIVE: Mobile Landscape (max-width: 767px)
   ============================================ */
@media screen and (max-width: 767px) {
  /* Re-assert minor third (1.2×) scale — override pre-existing landscape rules */
  .about-heading {
    font-size: 1.555rem;
    line-height: 1.25;
  }

  .about-description {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .newsletter-heading {
    font-size: 1.555rem;
    line-height: 0.95;
  }

  .newsletter-desc {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .exhibition-label-bold,
  .exhibition-date {
    font-size: 0.625rem;
    line-height: 1.3;
  }

  .team-heading,
  .partners-heading {
    font-size: 1.555rem;
    line-height: 1.2;
  }

  .socials-heading {
    font-size: 1.555rem;
    line-height: 1.2;
  }

  .contact-title {
    font-size: 1.555rem;
    line-height: 1.2;
  }

  .media-kit-card .media-modal-title {
    font-size: 1.555rem;
    line-height: 1.2;
  }

  .contact-desc {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  /* Media modal — not part of Concept B, keep scaled */
  .media-modal-title {
    font-size: 2.2rem;
    line-height: 2.1rem;
  }

  .media-modal-desc {
    font-size: 0.9rem;
    line-height: 1rem;
  }

  .media-modal-link {
    font-size: 0.9rem;
    line-height: 1rem;
  }
}

/* ============================================
   RESPONSIVE: Mobile Portrait (max-width: 479px)
   ============================================ */
@media screen and (max-width: 479px) {
  /* Re-assert Concept B values — override pre-existing portrait rules */

  /* ── Page container ── */
  .page {
    padding: 0 0.75rem 0.75rem;
  }

  /* ── Logo ── */
  .logo {
    width: 3.375rem;
    height: 3.375rem;
    margin: 1.25rem 0 1rem 0.75rem;
  }

  /* ── About card ── */
  .about-section {
    padding: calc(0.5rem + 4px) 1.25rem 1.75rem;
  }

  .about-heading {
    font-size: 1.555rem;
    line-height: 1.25;
  }

  .about-description {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  /* ── Exhibition — black strip ── */
  .exhibition-section {
    padding: 1rem 1.25rem !important;
  }

  .exhibition-label-bold,
  .exhibition-date {
    font-size: 0.625rem;
    line-height: 1.3;
  }

  /* ── Newsletter card ── */
  .newsletter-section {
    padding: calc(0.5rem + 4px) 1.25rem 1.75rem;
  }

  .newsletter-heading {
    font-size: 1.555rem;
    line-height: 0.95;
  }

  .newsletter-desc {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .newsletter-form {
    flex-direction: row;
    gap: 0;
  }

  .newsletter-input-wrap {
    width: auto;
    flex: 1;
  }

  .newsletter-subscribe {
    width: auto;
    padding: 0 1.125rem;
  }

  /* ── Team card ── */
  .team-section {
    padding: calc(0.5rem + 4px) 1.25rem 1.75rem;
  }

  .team-header {
    margin: 0 0 0.75rem;
  }

  .team-grid {
    padding: 0 0 0.5rem;
  }

  .team-card-name {
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .team-card-role {
    font-size: 0.75rem;
  }

  /* ── Socials card ── */
  .socials-heading {
    font-size: 1.555rem;
    line-height: 1.2;
  }

  /* ── Partners card ── */
  .partners-section {
    padding: calc(0.5rem + 4px) 1.25rem 1.75rem;
  }

  /* ── Contact card ── */
  .contact-body {
    padding: 0;
  }

  .contact-title {
    font-size: 1.555rem;
    line-height: 1.2;
  }

  .media-kit-card .media-modal-title {
    font-size: 1.555rem;
    line-height: 1.2;
  }

  .contact-desc {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .contact-form {
    padding: 0;
  }

  .form-row {
    margin-bottom: 8px;
  }

  .form-content {
    padding: 0.75rem 0.875rem;
  }

  .form-number {
    min-width: 1.125rem;
    font-size: 0.9rem;
  }

  .form-input {
    font-size: 0.9rem;
  }

  .contact-submit {
    margin-top: 8px;
  }

  /* ── Media modal — not part of Concept B, keep scaled ── */
  .media-modal {
    width: 95vw;
    min-height: 25rem;
  }

  .rsvp-modal-backdrop {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2rem 0;
  }

  .rsvp-modal-close {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
  }

  .rsvp-modal {
    width: 95vw;
    min-height: 0;
    margin: 0 auto;
  }

  .rsvp-modal-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .rsvp-modal-divider-v {
    display: none;
  }

  .rsvp-modal-left,
  .rsvp-modal-right {
    padding: 1rem 1rem 1.2rem;
  }

  .rsvp-modal-title {
    max-width: 100%;
    margin-top: 1.6rem;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: -0.05rem;
  }

  .rsvp-modal-desc,
  .rsvp-modal-copy {
    max-width: 100%;
  }

  .rsvp-modal-copy {
    font-size: 1.15rem;
    line-height: 1.1;
  }

  .rsvp-inline-form .form-content {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.75rem 0.875rem;
  }

  .rsvp-inline-form .form-number {
    font-size: 0.9rem;
    min-width: 1.125rem;
    opacity: 0.2;
  }

  .rsvp-inline-form .form-input {
    font-size: 0.9rem;
  }

  .rsvp-inline-form .form-divider {
    display: none;
  }

  .rsvp-inline-form .form-badge {
    display: none;
  }

  .rsvp-inline-form .form-row {
    margin-bottom: 8px;
  }

  .rsvp-inline-submit {
    height: 3rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
  }

  .media-modal-title {
    font-size: 1.8rem;
    line-height: 1.7rem;
  }

  .media-modal-desc {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .media-modal-link {
    font-size: 0.75rem;
    line-height: 1.3;
  }
}