/* =========================
   VARIABLES
========================= */

:root {
  --white: #ffffff;
  --ivory: #edf7fd;

  --soft-pink: #efb4c1;
  --soft-pink-light: #f8d8df;

  --soft-blue: #d9ebff;
  --soft-blue-deep: #a9cee5;

  --text-dark: #2b2527;
  --text-soft: #726a6c;

  --header-height: 102px;

  --transition: 220ms ease;
}


/* =========================
   RESET
========================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;

  background: var(--ivory);
  color: var(--text-dark);

  font-family: "DM Sans", sans-serif;
  line-height: 1.6;
}

body.menu-open {
  overflow: hidden;
}

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

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

button {
  padding: 0;
  font: inherit;
}


/* =========================
   HEADER
========================= */

.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  z-index: 1000;

  display: flex;
  align-items: center;

  min-height: var(--header-height);

  padding:
    20px
    clamp(42px, 4.5vw, 78px);

  color: var(--white);

  background:
    linear-gradient(
      to bottom,
      rgba(10, 12, 16, 0.45),
      rgba(10, 12, 16, 0.08),
      transparent
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    background var(--transition),
    box-shadow var(--transition),
    min-height var(--transition),
    padding var(--transition);
}

.site-header.is-scrolled {
  position: fixed;

  min-height: 72px;

  padding-top: 10px;
  padding-bottom: 10px;

  background: rgba(17, 18, 22, 0.91);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.14);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* =========================
   LOGO
========================= */

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  padding: 0;

  background: transparent;
  border: 0;
  box-shadow: none;
}

.brand-logo {
  width: 190px;
  height: auto;

  object-fit: contain;

  background: transparent;

  filter:
    drop-shadow(
      0 7px 18px rgba(0, 0, 0, 0.28)
    );

  transition:
    width var(--transition),
    transform var(--transition);
}

.brand:hover .brand-logo {
  transform: translateY(-1px);
}

.site-header.is-scrolled .brand-logo {
  width: 150px;
}


/* =========================
   DESKTOP NAVIGATION
========================= */

.desktop-nav {
  display: flex;
  align-items: center;

  gap: clamp(18px, 1.5vw, 28px);

  margin-left: auto;
  margin-right: 12px;
}

.nav-link {
  position: relative;

  padding: 10px 0;

  color: rgba(255, 255, 255, 0.94);

  font-size: 0.71rem;
  font-weight: 600;

  letter-spacing: 0.065em;
  text-transform: uppercase;

  transition: color var(--transition);
}

.nav-link::after {
  position: absolute;

  right: 0;
  bottom: 1px;
  left: 0;

  height: 1px;

  content: "";

  background: var(--soft-pink);

  transform: scaleX(0);
  transform-origin: center;

  transition: transform var(--transition);
}

.nav-link:hover {
  color: #ffffff;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}


/* =========================
   HEADER ACTIONS
========================= */

.header-actions {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-left: 12px;
}

.header-icon {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  color: var(--white);

  background: transparent;
  border: 0;

  border-radius: 50%;

  cursor: pointer;

  transition:
    background var(--transition),
    transform var(--transition);
}

.header-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.header-icon svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================
   HAMBURGER
========================= */

.menu-toggle {
  display: none;

  width: 30px;
  height: 30px;

  padding: 0;

  flex-direction: column;
  justify-content: center;

  gap: 5px;

  color: var(--white);

  background: transparent;
  border: 0;

  cursor: pointer;
}

.menu-toggle span {
  display: block;

  width: 23px;
  height: 1.5px;

  background: currentColor;

  transition:
    opacity var(--transition),
    transform var(--transition);
}

.menu-toggle.is-active span:nth-child(1) {
  transform:
    translateY(6.5px)
    rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
  transform:
    translateY(-6.5px)
    rotate(-45deg);
}


/* =========================
   MOBILE MENU
========================= */

.mobile-menu {
  display: none;
}

.mobile-menu.is-open {
  position: fixed;
  inset: 0;

  z-index: 950;

  display: flex;
  justify-content: flex-end;

  background: rgba(7, 9, 13, 0.66);
}

.mobile-menu-panel {
  display: flex;
  flex-direction: column;

  width: min(82vw, 370px);
  height: 100%;

  padding:
    115px
    34px
    40px;

  background:
    linear-gradient(
      160deg,
      rgba(22, 24, 29, 0.99),
      rgba(45, 38, 43, 0.99)
    );

  box-shadow:
    -16px 0 45px rgba(0, 0, 0, 0.22);

  animation:
    slideMenu
    260ms
    ease
    forwards;
}

@keyframes slideMenu {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.mobile-menu-panel a {
  padding: 13px 0;

  color: rgba(255, 255, 255, 0.92);

  font-family: "Cormorant Garamond", serif;
  font-size: 1.55rem;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.1);
}


/* =========================
   HERO
========================= */

.hero {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;

  min-height: 100svh;

  overflow: hidden;

  color: var(--white);

  background: #202328;
}

.hero-background {
  position: absolute;
  inset: 0;

  z-index: -3;

  background-image:
    url("../assets/images/hero-banner.jpg");

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;

  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(12, 14, 18, 0.62) 0%,
      rgba(12, 14, 18, 0.35) 30%,
      rgba(12, 14, 18, 0.09) 62%,
      rgba(12, 14, 18, 0.03) 100%
    ),
    linear-gradient(
      to top,
      rgba(8, 10, 14, 0.22),
      transparent 48%
    );
}


/* =========================
   HERO CONTENT
========================= */

.hero-content {
  width: min(580px, 100%);

  margin-left:
    clamp(135px, 9vw, 170px);

  padding:
    calc(var(--header-height) + 88px)
    30px
    90px;
}

.hero-title {
  margin: 0 0 18px;

  color: var(--soft-blue);

  font-family: "Great Vibes", cursive;
  font-size: clamp(5.5rem, 8vw, 8.5rem);

  font-weight: 400;
  line-height: 1;

  text-shadow:
    0 6px 24px rgba(0, 0, 0, 0.18);
}

.hero-heart {
  width: fit-content;

  margin: 0 0 22px;

  color: var(--soft-pink-light);

  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  line-height: 1;
}

.hero-description {
  margin: 0 0 14px;

  color: rgba(255, 255, 255, 0.95);

  font-size:
    clamp(1rem, 1.08vw, 1.16rem);

  line-height: 1.7;
}

.hero-hashtags {
  margin: 0 0 28px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 0.88rem;
}


/* =========================
   PRIMARY BUTTON
========================= */

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding: 0 27px;

  gap: 9px;

  color: var(--white);

  background:
    linear-gradient(
      135deg,
      #eba8b7,
      #f4c0cb
    );

  border:
    1px solid rgba(255, 255, 255, 0.2);

  border-radius: 999px;

  box-shadow:
    0 12px 30px rgba(192, 111, 130, 0.24);

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.06em;
  text-transform: uppercase;

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.primary-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 36px rgba(192, 111, 130, 0.34);
}


/* =========================
   HERO SOCIALS
========================= */

.hero-socials {
  position: absolute;

  top: 57%;

  left:
    clamp(28px, 3vw, 55px);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 20px;

  transform: translateY(-50%);
}

.hero-socials a {
  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 0.95rem;

  transition:
    color var(--transition),
    transform var(--transition);
}

.hero-socials a:hover {
  color: var(--soft-pink-light);
  transform: translateY(-2px);
}
.social-icon {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
}


.social-icon svg {

  width: 24px;
  height: 24px;

  fill: currentColor;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}


.social-icon:hover svg {

  transform: scale(1.15);
}
.social-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon svg {
    width: 24px;
    height: 24px;

    transition: transform 0.25s ease;
}

.social-icon:hover svg {
    transform: scale(1.15);
}

.social-line {
  width: 1px;
  height: 72px;

  margin-top: 4px;

  background: rgba(255, 255, 255, 0.5);
}


/* =========================
   SCROLL INDICATOR
========================= */

.scroll-indicator {
  position: absolute;

  right: 50%;
  bottom: 24px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 3px;

  color: rgba(255, 255, 255, 0.84);

  font-size: 0.65rem;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  transform: translateX(50%);
}

.scroll-indicator svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;

  animation:
    scrollBounce
    1.7s
    ease-in-out
    infinite;
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}


/* =========================
   STORY / UPCOMING
========================= */

.story-section {
  padding: 0;

  background:
    linear-gradient(
      135deg,
      #fffaf8 0%,
      #fbfcfd 52%,
      #f4f9fc 100%
    );
}

.story-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(380px, 0.95fr);

  width: min(1480px, 100%);

  margin: 0 auto;

  border-top:
    1px solid rgba(117, 127, 139, 0.08);
}


/* =========================
   STORY PANEL
========================= */

.story-panel {
  display: grid;

  grid-template-columns:
    minmax(390px, 1fr)
    minmax(360px, 1.05fr);

  align-items: center;

  min-height: 620px;

  gap:
    clamp(45px, 4vw, 70px);

  padding:
    72px
    clamp(55px, 6vw, 95px);
}

.story-copy-block {
  max-width: 470px;
}

.section-label {
  margin: 0 0 18px;

  color: #7399ae;

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-label::after {
  display: inline-block;

  width: 42px;
  height: 1px;

  margin:
    0
    0
    4px
    12px;

  content: "";

  background: #9eb9c8;
}

.story-copy-block h2 {
  margin: 0 0 24px;

  color: #282326;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3.2rem,
      3.7vw,
      4.25rem
    );

  font-weight: 500;

  line-height: 1.02;

  letter-spacing: -0.025em;
}

.story-copy {
  margin: 0 0 30px;

  color: #716a6b;

  font-size: 0.95rem;

  line-height: 1.9;
}


/* =========================
   SECONDARY BUTTON
========================= */

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 0 23px;

  color: #ffffff;

  background: #a8c9dc;

  border-radius: 4px;

  font-size: 0.69rem;
  font-weight: 600;

  letter-spacing: 0.06em;
  text-transform: uppercase;

  box-shadow:
    0 8px 22px rgba(111, 157, 184, 0.18);

  transition:
    transform var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.secondary-button:hover {
  transform: translateY(-2px);

  background: #95bdd3;

  box-shadow:
    0 12px 28px rgba(111, 157, 184, 0.25);
}


/* =========================
   STORY PHOTO
========================= */

.story-photo-wrap {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 410px;
}

.story-photo-frame {
  position: relative;

  width: min(360px, 100%);

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: #ffffff;

  border:
    1px solid rgba(238, 183, 194, 0.72);

  border-radius:
    180px
    180px
    12px
    12px;

  box-shadow:
    0 18px 50px rgba(74, 61, 68, 0.12);
}

.story-photo-frame::before {
  position: absolute;

  inset: 8px;

  z-index: 1;

  content: "";

  pointer-events: none;

  border:
    1px solid rgba(255, 255, 255, 0.72);

  border-radius:
    170px
    170px
    8px
    8px;
}

.story-photo {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center top;
}


/* =========================
   STORY BADGE
========================= */

.story-badge {
  position: absolute;

  top: 18px;
  right: 5%;

  z-index: 3;

  display: grid;
  place-items: center;

  width: 70px;
  height: 70px;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #b8d8eb,
      #91bdd9
    );

  border:
    4px solid rgba(255, 255, 255, 0.88);

  border-radius: 50%;

  box-shadow:
    0 10px 24px rgba(76, 124, 156, 0.24);

  font-size: 0.62rem;
  font-weight: 700;

  line-height: 1.15;
  letter-spacing: 0.04em;

  text-align: center;
}


/* =========================
   STORY FLOWERS
========================= */

.story-flower {
  position: absolute;

  z-index: 2;

  opacity: 0.72;

  filter:
    drop-shadow(
      0 4px 8px rgba(183, 117, 134, 0.18)
    );
}

.story-flower-left {
  left: 0;
  bottom: 34px;

  font-size: 2rem;
}

.story-flower-right {
  right: 5px;
  bottom: 8px;

  font-size: 1.45rem;
}


/* =========================
   UPCOMING PANEL
========================= */

.upcoming-panel {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 700px;

  overflow: hidden;

  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      #acd1e7 0%,
      #92bfd9 54%,
      #78a9c8 100%
    );

  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.18);
}

.upcoming-content {
  position: relative;

  z-index: 2;

  flex: 0 0 auto;

  padding:
    34px
    34px
    22px;
}

.upcoming-label {
  margin: 0 0 10px;

  color: rgba(255, 255, 255, 0.86);

  font-size: 0.67rem;
  font-weight: 600;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.upcoming-label::after {
  display: inline-block;

  width: 36px;
  height: 1px;

  margin:
    0
    0
    4px
    10px;

  content: "";

  background: rgba(255, 255, 255, 0.62);
}

.upcoming-panel h3 {
  margin: 0 0 16px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.8rem,
      3.6vw,
      4rem
    );

  font-weight: 500;

  line-height: 1;
}


/* =========================
   EVENT DETAILS
========================= */

.upcoming-event {
  margin-bottom: 18px;
}

.event-date {
  margin: 0 0 7px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 0.67rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-title {
  margin: 0;

  color: #ffffff;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.7rem;
  font-weight: 600;

  line-height: 1.05;

  letter-spacing: 0.03em;
}

.event-name {
  margin: 4px 0 0;

  color: #ffffff;

  font-size: 0.87rem;
  font-weight: 600;
}

.event-subtitle {
  max-width: 310px;

  margin: 4px 0 0;

  color: rgba(255, 255, 255, 0.8);

  font-size: 0.72rem;

  line-height: 1.5;
}

.event-time {
  margin: 8px 0 0;

  color: rgba(255, 255, 255, 0.92);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.045em;
}


/* =========================
   COUNTDOWN
========================= */

.countdown-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 7px;

  width: 100%;
  max-width: 390px;

  margin-bottom: 14px;
}

.countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 84px;

  padding:
    12px
    6px;

  background:
    rgba(255, 255, 255, 0.055);

  border:
    1px solid rgba(255, 255, 255, 0.4);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.countdown-box strong {
  display: block;

  min-width: 2ch;

  color: #ffffff;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2rem;
  font-weight: 500;

  line-height: 1;

  text-align: center;
}

.countdown-box span {
  margin-top: 7px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 0.53rem;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.countdown-status {
  margin: 0 0 20px;

  color: rgba(255, 255, 255, 0.76);

  font-size: 0.64rem;

  line-height: 1.5;

  letter-spacing: 0.02em;
}


/* =========================
   SCHEDULE BUTTON
========================= */

.schedule-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 0 24px;

  color: #946d77;

  background: #f7d8df;

  border-radius: 3px;

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.06em;
  text-transform: uppercase;

  box-shadow:
    0 8px 20px rgba(100, 132, 155, 0.15);

  transition:
    transform var(--transition),
    background var(--transition);
}

.schedule-button:hover {
  transform: translateY(-2px);

  background: #f5cad4;
}


/* =========================
   WHAT'S NEXT PHOTO
========================= */

.upcoming-photo-wrap {
  position: relative;

  flex: 1 1 auto;

  width: 100%;
  min-height: 300px;

  margin-top: 0;

  overflow: hidden;

  background: #8fb8d1;
}

.upcoming-photo {
  width: 100%;
  height: 100%;

  min-height: 300px;

  object-fit: cover;
  object-position: center top;
}


/* =========================================================
   EDITORIAL MOMENTS
========================================================= */

.moments-section {
  position: relative;

  padding:
    76px
    clamp(28px, 3.5vw, 54px)
    72px;

  background:
    linear-gradient(
      180deg,
      #fffdfc 0%,
      #fffafa 100%
    );

  border-top:
    1px solid rgba(44, 38, 40, 0.07);
}

.moments-inner {
  width: min(1480px, 100%);

  margin: 0 auto;
}


/* =========================
   MOMENTS INTRO
========================= */

.moments-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 32px;

  margin-bottom: 34px;
}

.moments-eyebrow {
  margin: 0 0 10px;

  color: #7aa0b5;

  font-size: 0.69rem;
  font-weight: 600;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.moments-eyebrow::after {
  display: inline-block;

  width: 38px;
  height: 1px;

  margin:
    0
    0
    4px
    10px;

  content: "";

  background: #9cb8c8;
}

.moments-heading {
  margin: 0;

  color: #292327;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.8rem,
      3.7vw,
      4.15rem
    );

  font-weight: 500;

  line-height: 0.96;

  letter-spacing: -0.025em;
}

.moments-view-all {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding-bottom: 5px;

  color: #d9899c;

  border-bottom:
    1px solid rgba(217, 137, 156, 0.42);

  font-size: 0.67rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition:
    color var(--transition),
    gap var(--transition),
    border-color var(--transition);
}

.moments-view-all:hover {
  gap: 12px;

  color: #c96f84;

  border-color: #c96f84;
}


/* =========================
   MOMENTS GRID
========================= */

.moments-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(
      20px,
      2vw,
      30px
    );
}


/* =========================
   MOMENT CARD
========================= */

.moment-card {
  min-width: 0;
}

.moment-image-link {
  display: block;
}

.moment-image-wrap {
  position: relative;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #f3f5f7,
      #ece8e8
    );

  border-radius: 8px;

  box-shadow:
    0 10px 26px rgba(45, 38, 40, 0.07);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.moment-image {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 450ms ease,
    filter 450ms ease;
}

.moment-image-sunset {
  object-position: center 48%;
}

.moment-image-studio {
  object-position: center 45%;
}

.moment-card:hover .moment-image-wrap {
  transform: translateY(-4px);

  box-shadow:
    0 16px 34px rgba(45, 38, 40, 0.12);
}

.moment-card:hover .moment-image {
  transform: scale(1.035);

  filter: brightness(1.02);
}


/* =========================
   MOMENT META
========================= */

.moment-meta {
  padding:
    14px
    2px
    0;
}

.moment-meta h3 {
  margin: 0 0 5px;

  color: #292327;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      1.3rem,
      1.5vw,
      1.62rem
    );

  font-weight: 600;

  line-height: 1.06;

  letter-spacing: -0.01em;
}

.moment-meta p {
  margin: 0 0 10px;

  color: #797072;

  font-size: 0.75rem;

  line-height: 1.5;
}

.moment-meta time {
  color: #9a9193;

  font-size: 0.62rem;

  letter-spacing: 0.03em;
}


/* =========================
   MOMENTS CONTROLS
========================= */

.moments-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 11px;

  margin-top: 24px;
}

.moments-arrow {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  color: #c9788c;

  background: transparent;

  border:
    1px solid rgba(201, 120, 140, 0.3);

  border-radius: 50%;

  cursor: pointer;

  transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.moments-arrow:hover {
  color: #ffffff;

  background: #d8899d;

  border-color: #d8899d;

  transform: translateY(-2px);
}

.moments-page {
  color: #9c9294;

  font-size: 0.62rem;

  letter-spacing: 0.08em;
}


/* =========================
   PLACEHOLDERS
========================= */

.placeholder-section {
  display: grid;
  place-items: center;

  min-height: 40vh;

  background: #fbf8f6;

  border-top:
    1px solid rgba(42, 37, 37, 0.07);
}

.placeholder-section:nth-of-type(even) {
  background: #f8eef2;
}

.placeholder-section span {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      6vw,
      5.2rem
    );
}


/* =========================
   DARK MODE
========================= */

body.dark-theme {
  background: #17181c;

  color: #f4efed;
}

body.dark-theme .story-section {
  background:
    linear-gradient(
      135deg,
      #191a1f,
      #20242b
    );
}

body.dark-theme .story-copy-block h2,
body.dark-theme .moments-heading,
body.dark-theme .moment-meta h3 {
  color: #f4efed;
}

body.dark-theme .story-copy,
body.dark-theme .moment-meta p {
  color: #bbb4b0;
}

body.dark-theme .moments-section {
  background:
    linear-gradient(
      180deg,
      #191a1f,
      #1f2025
    );

  border-color:
    rgba(255, 255, 255, 0.07);
}

body.dark-theme .moment-image-wrap {
  background: #25272e;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.16);
}

body.dark-theme .moment-meta time,
body.dark-theme .moments-page {
  color: #91898b;
}

body.dark-theme .placeholder-section {
  background: #1b1c21;

  border-color:
    rgba(255, 255, 255, 0.07);
}

body.dark-theme
.placeholder-section:nth-of-type(even) {
  background: #222027;
}


/* =========================
   RESPONSIVE - LARGE
========================= */

@media (max-width: 1360px) {

  .brand-logo {
    width: 160px;
  }

  .desktop-nav {
    gap: 17px;
  }

  .nav-link {
    font-size: 0.66rem;
  }

  .header-actions {
    margin-left: 10px;
  }

  .story-panel {
    grid-template-columns:
      minmax(330px, 1fr)
      minmax(330px, 1fr);
  }

  .countdown-grid {
    max-width: 360px;
  }

  .upcoming-panel {
    min-height: 660px;
  }

  .upcoming-photo-wrap,
  .upcoming-photo {
    min-height: 285px;
  }

  .moments-grid {
    gap: 20px;
  }
}


/* =========================
   RESPONSIVE - TABLET
========================= */

@media (max-width: 1180px) {

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

  .story-panel {
    grid-template-columns:
      minmax(300px, 0.95fr)
      minmax(320px, 1fr);
  }

  .upcoming-panel {
    min-height: auto;
  }

  .upcoming-content {
    padding:
      44px
      42px
      26px;
  }

  .countdown-grid {
    max-width: 390px;
  }

  .upcoming-photo-wrap {
    flex: none;
    height: 380px;
    min-height: 380px;
  }

  .upcoming-photo {
    min-height: 380px;

    object-position: center top;
  }

  .moments-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    row-gap: 34px;
  }
}


@media (max-width: 1100px) {

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .header-actions {
    margin-left: auto;
  }

  .hero-content {
    margin-left:
      clamp(
        80px,
        9vw,
        120px
      );
  }
}


/* =========================
   RESPONSIVE - MOBILE
========================= */

@media (max-width: 768px) {

  :root {
    --header-height: 76px;
  }

  .site-header {
    padding: 12px 18px;
  }

  .site-header.is-scrolled {
    min-height: 66px;
  }

  .brand-logo {
    width: 118px;
  }

  .site-header.is-scrolled .brand-logo {
    width: 105px;
  }

  /* MOBILE HERO */
  .hero {
    align-items: flex-end;
    min-height: 100svh;
  }

  .hero-background {
    background-image: url("../assets/images/hero-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 61% center;
  }

  .hero-overlay {
    background:
      linear-gradient(
        to top,
        rgba(8, 10, 14, 0.92) 0%,
        rgba(8, 10, 14, 0.56) 43%,
        rgba(8, 10, 14, 0.10) 78%
      );
  }

  .hero-content {
    width: 100%;
    margin-left: 0;

    /* Push the title below the faces */
    padding:
      calc(var(--header-height) + 315px)
      24px
      115px;

    text-align: center;
  }

  .hero-title {
    margin: 0 0 18px;
    font-size: clamp(4.8rem, 20vw, 6.3rem);
    line-height: 0.95;
  }

  .hero-heart {
    margin-right: auto;
    margin-left: auto;
  }

  .hero-description {
    max-width: 540px;
    margin-right: auto;
    margin-left: auto;
  }

  .scroll-indicator {
    display: none;
  }

  /* MOBILE SOCIAL LINKS */
  .hero-socials {
    position: absolute;
    top: auto;
    left: 50%;
    bottom: 18px;
    z-index: 20;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: 18px;
    transform: translateX(-50%);
  }

  .hero-socials .social-line {
    display: none;
  }

  .hero-socials .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
  }

  .hero-socials .social-icon svg {
    width: 24px;
    height: 24px;

    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
  }

  .hero-socials .social-icon:hover svg {
    transform: scale(1.15);
  }

  /* STORY */
  .story-panel {
    grid-template-columns: 1fr;
    gap: 46px;
    padding: 74px 24px;
  }

  .story-copy-block {
    max-width: none;
  }

  .story-copy-block h2 {
    font-size: clamp(3rem, 12vw, 4rem);
  }

  .story-photo-wrap {
    min-height: 0;
  }

  .story-photo-frame {
    width: min(360px, 90vw);
  }

  .story-badge {
    top: 16px;
    right: 7%;
  }

  /* UPCOMING */
  .upcoming-content {
    padding: 44px 24px 26px;
  }

  .countdown-grid {
    max-width: none;
  }

  .upcoming-photo-wrap {
    height: 320px;
    min-height: 320px;
  }

  .upcoming-photo {
    min-height: 320px;
    object-position: center top;
  }

  /* MOMENTS */
  .moments-section {
    padding: 62px 22px 60px;
  }

  .moments-intro {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 28px;
  }

  .moments-view-all {
    align-self: flex-start;
  }

  .moments-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .moment-image-wrap {
    aspect-ratio: 16 / 10;
  }

  .moments-controls {
    justify-content: flex-start;
  }
}


/* =========================
   RESPONSIVE - SMALL MOBILE
========================= */

@media (max-width: 430px) {

  .brand-logo {
    width: 100px;
  }

  .site-header.is-scrolled .brand-logo {
    width: 90px;
  }

  .hero-background {
    background-position: 63% center;
  }

  .hero-content {
    padding:
      calc(var(--header-height) + 325px)
      20px
      112px;
  }

  .hero-title {
    margin: 0 0 18px;
    font-size: 4.8rem;
    line-height: 0.95;
  }

  .hero-description br {
    display: none;
  }

  .hero-socials {
    bottom: 16px;
    gap: 14px;
  }

  .hero-socials .social-icon {
    width: 36px;
    height: 36px;
  }

  .hero-socials .social-icon svg {
    width: 21px;
    height: 21px;
  }

  .mobile-menu-panel {
    width: 86vw;
    padding-right: 28px;
    padding-left: 28px;
  }

  .story-copy-block h2 {
    font-size: 3.1rem;
  }

  .story-badge {
    width: 62px;
    height: 62px;
    font-size: 0.56rem;
  }

  .upcoming-panel h3 {
    font-size: 3rem;
  }

  .event-title {
    font-size: 1.5rem;
  }

  .event-subtitle {
    font-size: 0.68rem;
  }

  .event-time {
    font-size: 0.66rem;
  }

  .countdown-grid {
    gap: 5px;
  }

  .countdown-box {
    min-height: 68px;
    padding: 9px 3px;
  }

  .countdown-box strong {
    font-size: 1.5rem;
  }

  .countdown-box span {
    font-size: 0.48rem;
  }

  .upcoming-photo-wrap {
    height: 265px;
    min-height: 265px;
  }

  .upcoming-photo {
    min-height: 265px;
    object-position: center top;
  }

  .moments-section {
    padding: 54px 20px 54px;
  }

  .moments-heading {
    font-size: 2.75rem;
  }

  .moment-meta h3 {
    font-size: 1.4rem;
  }

  .moment-meta p {
    font-size: 0.73rem;
  }
}


/* =========================
   SHANGHAI EVENT OVERRIDES
========================= */

.upcoming-event {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.event-schedule {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.event-item {
  padding: 14px 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, background 0.25s ease;
}

.event-item:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.18);
}

.event-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.72);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-value {
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .event-item {
    padding: 12px;
  }

  .event-label {
    font-size: 0.58rem;
  }

  .event-value {
    font-size: 0.72rem;
  }
}

/* =========================
   STORY EDITORIAL
========================= */

.story-panel {
  min-height: auto;
}

.story-copy-block {
  max-width: 600px;
}

.story-intro {
  max-width: 580px;
  margin: 0 0 28px;

  color: #5f5a5c;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.15rem;
  font-style: italic;

  line-height: 1.7;
}

.story-editorial {
  max-width: 590px;
}

.story-editorial p {
  margin: 0 0 18px;

  color: #716a6b;

  font-size: 0.9rem;

  line-height: 1.9;
}

.story-closing {
  margin: 28px 0 30px;

  color: #4e484a;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.15rem;
  font-style: italic;

  line-height: 1.6;
}

@media (max-width: 768px) {
  .story-intro {
    font-size: 1.05rem;
    line-height: 1.65;
  }

  .story-editorial p {
    font-size: 0.88rem;
    line-height: 1.82;
  }

  .story-closing {
    font-size: 1.05rem;
  }
}

/* =========================================================
   OUR SOUNDTRACK — CLEAN STORY MINI PLAYER
========================================================= */

.story-visual-column {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 20px;

  min-width: 0;
}

.story-visual-column .story-photo-wrap {
  width: 100%;
}


/* PLAYER CARD */

.story-soundtrack {
  width: min(360px, 100%);

  padding:
    14px
    15px
    13px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.92),
      rgba(247, 251, 253, 0.96)
    );

  border:
    1px solid rgba(169, 206, 229, 0.42);

  border-radius: 14px;

  box-shadow:
    0 12px 32px rgba(74, 61, 68, 0.08);
}


/* TOP LINE */

.soundtrack-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 11px;
}

.soundtrack-eyebrow {
  margin: 0 0 2px;

  color: #7399ae;

  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.soundtrack-title {
  max-width: 250px;

  margin: 0;

  color: #5b5356;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 0.98rem;
  font-style: italic;

  line-height: 1.3;
}

.soundtrack-note {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 30px;
  height: 30px;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #b8d8eb,
      #91bdd9
    );

  border-radius: 50%;

  font-size: 0.78rem;

  box-shadow:
    0 7px 16px rgba(76, 124, 156, 0.18);
}


/* YOUTUBE PLAYER */

.soundtrack-player-shell {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #17191d;

  border-radius: 9px;
}

.soundtrack-player-shell iframe {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/* BOTTOM INFO */

.soundtrack-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 9px;
}

.soundtrack-loop {
  color: #91898c;

  font-size: 0.55rem;
  font-weight: 500;

  letter-spacing: 0.04em;
}

.soundtrack-youtube-link {
  color: #7399ae;

  font-size: 0.56rem;
  font-weight: 700;

  letter-spacing: 0.04em;

  white-space: nowrap;
}


/* DARK MODE */

.dark-theme .story-soundtrack {
  background:
    linear-gradient(
      145deg,
      rgba(31, 32, 37, 0.96),
      rgba(38, 41, 47, 0.96)
    );

  border-color:
    rgba(169, 206, 229, 0.16);
}

.dark-theme .soundtrack-title {
  color:
    rgba(255, 255, 255, 0.88);
}

.dark-theme .soundtrack-loop {
  color:
    rgba(255, 255, 255, 0.48);
}


/* TABLET */

@media (max-width: 1100px) {

  .story-soundtrack {
    width: min(390px, 100%);
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .story-visual-column {
    gap: 16px;
  }

  .story-soundtrack {
    width: min(360px, 100%);

    padding:
      13px
      13px
      12px;
  }

  .soundtrack-title {
    font-size: 0.94rem;
  }

}



/* =========================================================
   STORY DESKTOP LAYOUT — FINAL FIX
========================================================= */

@media (min-width: 1101px) {

  .story-panel {
    grid-template-columns:
      minmax(430px, 1.25fr)
      380px;

    align-items: start;

    gap:
      clamp(58px, 5vw, 88px);
  }

  .story-copy-block {
    max-width: 560px;
  }

  .story-visual-column {
    width: 380px;

    justify-self: end;

    align-items: center;

    padding-top: 34px;
  }

  .story-visual-column .story-photo-wrap {
    width: 360px;
    min-height: auto;
  }

  .story-photo-frame {
    width: 360px;
  }

  .story-soundtrack {
    width: 360px;
  }

  .soundtrack-bottom {
    gap: 16px;
  }

  .soundtrack-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

}


/* TABLET */

@media (min-width: 601px) and (max-width: 1100px) {

  .story-visual-column {
    width: 100%;
  }

  .story-visual-column .story-photo-wrap,
  .story-soundtrack {
    width: min(390px, 100%);
  }

}


/* MOBILE — keep the stacked layout that already works */

@media (max-width: 600px) {

  .story-visual-column {
    width: 100%;
  }

  .story-visual-column .story-photo-wrap,
  .story-soundtrack {
    width: min(360px, 100%);
  }

  .soundtrack-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

}



/* =========================================================
   GLOBAL POLISH — HOME PAGE MIGRATION
   Phase 1 / OB_00001 + OB_00003 + OB_00009
========================================================= */

/* ---------------------------------------------------------
   GLOBAL CANVAS / HOME IDENTITY
--------------------------------------------------------- */

.page-home {
  --home-light-blue: #edf7fd;
  --home-light-blue-soft: #f5fbff;
  --home-light-blue-deep: #dbeef9;

  background: var(--home-light-blue);
}

.page-home .story-section {
  background:
    linear-gradient(
      135deg,
      #edf7fd 0%,
      #f8fcff 52%,
      #eef8fd 100%
    );
}

.page-home .moments-section {
  background:
    linear-gradient(
      180deg,
      #f8fcff 0%,
      #eef8fd 100%
    );
}

.page-home .placeholder-section {
  background: var(--home-light-blue);
}


/* ---------------------------------------------------------
   GLOBAL HEADER INNER CANVAS
--------------------------------------------------------- */

.site-header-inner {
  display: flex;
  align-items: center;

  width: min(1480px, 100%);

  margin-inline: auto;
}

.brand-logo {
  width: clamp(108px, 8vw, 132px);
  max-width: none;
  max-height: 68px;
}

.site-header.is-scrolled .brand-logo {
  width: 108px;
}


/* ---------------------------------------------------------
   GLOBAL CONTENT WIDTH ALIGNMENT
--------------------------------------------------------- */

.story-grid,
.moments-inner {
  width: min(1480px, 100%);
}


/* ---------------------------------------------------------
   STANDARDIZED FOOTER
--------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 12px;

  width: 100%;

  padding:
    44px
    clamp(20px, 5vw, 72px);

  text-align: center;

  color: #6f686b;

  background:
    linear-gradient(
      180deg,
      #eef8fd 0%,
      #e6f3fb 100%
    );

  border-top:
    1px solid rgba(65, 57, 61, 0.08);
}

.footer-logo-link {
  display: inline-block;
  line-height: 0;
}

.footer-logo {
  display: block;

  width: clamp(82px, 6vw, 108px);
  height: auto;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.footer-logo-link:hover .footer-logo {
  opacity: 0.84;
  transform: translateY(-2px);
}

.footer-logo-link:focus-visible {
  outline: 2px solid #678ca4;
  outline-offset: 6px;
  border-radius: 6px;
}

.footer-copy {
  margin: 0;

  color: #7f777a;

  font-size: 0.66rem;
  font-weight: 500;

  letter-spacing: 0.025em;
}

.back-to-top {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  margin-top: 4px;

  color: #678ca4;

  background: rgba(255, 255, 255, 0.82);

  border:
    1px solid rgba(65, 57, 61, 0.08);

  border-radius: 50%;

  box-shadow:
    0 8px 20px rgba(67, 85, 97, 0.08);

  transition:
    transform 180ms ease,
    background 180ms ease;
}

.back-to-top:hover {
  transform: translateY(-2px);
  background: #ffffff;
}


/* ---------------------------------------------------------
   DARK MODE — GLOBAL FOOTER / HOME BACKGROUND
--------------------------------------------------------- */

body.dark-theme.page-home {
  background: #1d1e22;
}

body.dark-theme .site-footer {
  color: rgba(255, 255, 255, 0.70);

  background:
    linear-gradient(
      180deg,
      #22252a 0%,
      #1d1f23 100%
    );

  border-top-color:
    rgba(255, 255, 255, 0.07);
}

body.dark-theme .footer-copy {
  color: rgba(255, 255, 255, 0.52);
}

body.dark-theme .back-to-top {
  color: #a9cee5;
  background: #292a2f;
  border-color: rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1100px) {

  .brand-logo {
    width: 104px;
    max-height: 60px;
  }

  .site-header.is-scrolled .brand-logo {
    width: 96px;
  }

  .site-footer {
    padding:
      40px
      clamp(20px, 4vw, 36px);
  }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

  .brand-logo {
    width: 88px;
    max-height: 52px;
  }

  .site-header.is-scrolled .brand-logo {
    width: 82px;
  }

  .site-footer {
    padding:
      34px
      18px;
  }

  .footer-logo {
    width: 84px;
  }

  .footer-copy {
    font-size: 0.62rem;
  }

}



/* =========================================================
   V9 — HOME MIGRATION TO OOM/BAM MASTER SHELL
   OB_00001 + OB_00003 + OB_00009
========================================================= */

/* OUTER PAGE — HOME = LIGHT BLUE */
body.page-home {
  min-height: 100vh;

  padding:
    clamp(24px, 4vw, 62px)
    20px;

  display: block;

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(169, 213, 242, 0.40),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(220, 238, 249, 0.62),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #dceffa 0%,
      #eef8fd 48%,
      #d8edf8 100%
    );
}


/* OOM/BAM-STYLE MASTER CANVAS */
.home-shell {
  position: relative;

  width: min(1480px, 96vw);

  margin-inline: auto;

  overflow: hidden;

  background:
    rgba(255, 253, 249, 0.97);

  border:
    1px solid rgba(255, 255, 255, 0.96);

  border-radius: 22px;

  box-shadow:
    0 28px 80px rgba(64, 83, 96, 0.11);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


/* =========================================================
   HEADER — MATCH OOM/BAM STRUCTURE
========================================================= */

.page-home .site-header {
  position: relative;

  top: auto;
  right: auto;
  left: auto;

  z-index: 1000;

  min-height: 92px;

  padding:
    10px
    clamp(28px, 4vw, 54px);

  color: #20252d;

  background:
    rgba(255, 253, 249, 0.96);

  border-bottom:
    1px solid rgba(83, 72, 77, 0.10);

  box-shadow: none;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.page-home .site-header.is-scrolled {
  position: sticky;
  top: 0;

  min-height: 76px;

  padding-top: 8px;
  padding-bottom: 8px;

  color: #20252d;

  background:
    rgba(255, 253, 249, 0.96);

  box-shadow:
    0 10px 28px rgba(64, 83, 96, 0.07);
}

.page-home .site-header-inner {
  width: 100%;
}

.page-home .brand-logo {
  width: 96px;
  max-height: 62px;

  filter:
    drop-shadow(
      0 6px 14px rgba(54, 48, 51, 0.08)
    );
}

.page-home .site-header.is-scrolled .brand-logo {
  width: 88px;
}

.page-home .desktop-nav {
  gap:
    clamp(
      13px,
      1.7vw,
      27px
    );

  margin-right: 10px;
}

.page-home .nav-link {
  padding:
    9px
    2px;

  color: #5c5759;

  font-size: 0.70rem;
  font-weight: 600;

  letter-spacing: 0.08em;
}

.page-home .nav-link::after {
  background:
    linear-gradient(
      90deg,
      #678ca4,
      #a9cee5
    );
}

.page-home .nav-link:hover {
  color: #678ca4;
}

.page-home .nav-link.active {
  padding:
    9px
    17px;

  color: #678ca4;

  border:
    1px solid rgba(103, 140, 164, 0.48);

  border-radius: 999px;
}

.page-home .nav-link.active::after {
  display: none;
}

.page-home .header-icon,
.page-home .menu-toggle {
  color: #4e5157;
}

.page-home .header-icon:hover {
  background:
    rgba(169, 206, 229, 0.16);
}


/* =========================================================
   HERO — KEEP HOME IDENTITY INSIDE EDITORIAL SHELL
========================================================= */

.page-home .hero {
  min-height:
    clamp(
      610px,
      72vh,
      760px
    );

  margin:
    0
    clamp(28px, 4vw, 54px);

  border-radius:
    0
    0
    20px
    20px;
}

.page-home .hero-content {
  margin-left:
    clamp(86px, 7vw, 130px);

  padding-top:
    clamp(95px, 9vw, 138px);
}

.page-home .hero-socials {
  left:
    clamp(24px, 2.6vw, 42px);
}


/* =========================================================
   CONTENT SECTIONS — ALIGN TO SAME MASTER CANVAS
========================================================= */

.page-home .story-section,
.page-home .moments-section,
.page-home .placeholder-section {
  margin-inline:
    clamp(28px, 4vw, 54px);
}

.page-home .story-section {
  margin-top: 0;

  border-radius:
    0
    0
    20px
    20px;

  overflow: hidden;
}

.page-home .story-grid,
.page-home .moments-inner {
  width: 100%;
}

.page-home .moments-section {
  margin-top: 34px;

  border-radius: 20px;
}

.page-home .placeholder-section {
  border-radius: 18px;
}


/* =========================================================
   COMMUNITY-STYLE GLOBAL FOOTER
========================================================= */

.page-home .site-footer {
  display: block;

  width: auto;

  margin:
    38px
    clamp(28px, 4vw, 54px)
    0;

  padding:
    28px
    0
    15px;

  color: #6f7278;

  background:
    transparent;

  border-top:
    1px solid rgba(0, 0, 0, 0.06);
}

.page-home .footer-inner {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 30px;
}

.page-home .footer-logo {
  display: block;

  width: 120px;

  line-height: 0;
}

.page-home .footer-logo img {
  display: block;

  width: 100%;
  height: auto;
}

.page-home .footer-main-copy {
  margin: 0;

  color: #6f7278;

  font-size: 0.70rem;
}

.page-home .footer-message {
  margin: 0;

  color: #557da4;

  font-family:
    "Great Vibes",
    cursive;

  font-size: 1.45rem;

  line-height: 1.1;
}

.page-home .footer-bottom {
  margin-top: 18px;

  text-align: center;

  color: #aaa;

  font-size: 0.62rem;
}

.page-home .footer-bottom p {
  margin: 0;
}


/* =========================================================
   DARK MODE — KEEP SHELL COHESIVE
========================================================= */

body.dark-theme.page-home {
  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(87, 120, 143, 0.22),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(74, 89, 105, 0.22),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #16191e 0%,
      #20242a 48%,
      #171b20 100%
    );
}

body.dark-theme.page-home .home-shell {
  background:
    rgba(31, 32, 36, 0.98);

  border-color:
    rgba(255, 255, 255, 0.06);
}

body.dark-theme.page-home .site-header,
body.dark-theme.page-home .site-header.is-scrolled {
  color: #f4eff1;

  background:
    rgba(31, 32, 36, 0.96);

  border-bottom-color:
    rgba(255, 255, 255, 0.07);
}

body.dark-theme.page-home .nav-link,
body.dark-theme.page-home .header-icon,
body.dark-theme.page-home .menu-toggle {
  color:
    rgba(255, 255, 255, 0.78);
}

body.dark-theme.page-home .nav-link:hover,
body.dark-theme.page-home .nav-link.active {
  color: #a9cee5;
}

body.dark-theme.page-home .nav-link.active {
  border-color:
    rgba(169, 206, 229, 0.42);
}

body.dark-theme.page-home .site-footer {
  border-top-color:
    rgba(255, 255, 255, 0.07);
}

body.dark-theme.page-home .footer-main-copy,
body.dark-theme.page-home .footer-bottom {
  color:
    rgba(255, 255, 255, 0.52);
}

body.dark-theme.page-home .footer-message {
  color: #a9cee5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  body.page-home {
    padding:
      22px
      14px;
  }

  .home-shell {
    width: 100%;

    border-radius: 24px;
  }

  .page-home .site-header {
    min-height: 76px;

    padding:
      8px
      24px;
  }

  .page-home .brand-logo {
    width: 88px;
    max-height: 56px;
  }

  .page-home .hero {
    margin:
      0
      24px;

    min-height: 620px;
  }

  .page-home .hero-content {
    margin-left:
      clamp(56px, 7vw, 84px);
  }

  .page-home .story-section,
  .page-home .moments-section,
  .page-home .placeholder-section {
    margin-inline: 24px;
  }

  .page-home .site-footer {
    margin:
      34px
      24px
      0;
  }

  .page-home .footer-inner {
    grid-template-columns: 1fr;

    justify-items: center;

    gap: 14px;

    text-align: center;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  body.page-home {
    padding: 0;

    background:
      linear-gradient(
        145deg,
        #dceffa,
        #f4fbff 50%,
        #d8edf8
      );
  }

  .home-shell {
    width: 100%;

    min-height: 100vh;

    border: 0;
    border-radius: 0;

    box-shadow: none;
  }

  .page-home .site-header {
    min-height: 68px;

    padding:
      7px
      16px;
  }

  .page-home .brand-logo {
    width: 78px;
    max-height: 50px;
  }

  .page-home .site-header.is-scrolled .brand-logo {
    width: 74px;
  }

  .page-home .hero {
    min-height: 690px;

    margin: 0;

    border-radius: 0;
  }

  .page-home .hero-content {
    margin-left: 0;

    padding:
      145px
      24px
      82px;
  }

  .page-home .hero-socials {
    left: 16px;
  }

  .page-home .story-section,
  .page-home .moments-section,
  .page-home .placeholder-section {
    margin-inline: 0;

    border-radius: 0;
  }

  .page-home .moments-section {
    margin-top: 0;
  }

  .page-home .site-footer {
    margin:
      28px
      16px
      0;

    padding-bottom: 18px;
  }

  .page-home .footer-logo {
    width: 104px;
  }

  .page-home .footer-main-copy {
    font-size: 0.66rem;
  }

  .page-home .footer-message {
    font-size: 1.3rem;
  }

}


/* =========================================================
   MOBILE MENU — MATCH EDITORIAL SHELL
========================================================= */

@media (max-width: 1100px) {

  .page-home .mobile-menu.is-open {
    background:
      rgba(25, 22, 24, 0.42);
  }

  .page-home .mobile-menu-panel {
    background:
      linear-gradient(
        160deg,
        rgba(255, 253, 249, 0.995),
        rgba(239, 247, 252, 0.995)
      );
  }

  .page-home .mobile-menu-panel a {
    color: #4f4a4c;

    border-bottom-color:
      rgba(83, 72, 77, 0.09);
  }

  body.dark-theme.page-home .mobile-menu-panel {
    background:
      linear-gradient(
        160deg,
        #24262b,
        #1c1e22
      );
  }

  body.dark-theme.page-home .mobile-menu-panel a {
    color:
      rgba(255, 255, 255, 0.88);

    border-bottom-color:
      rgba(255, 255, 255, 0.08);
  }

}


/* =========================================================
   V10 — HOMEPAGE CONTENT REFINEMENT
========================================================= */

.page-home .desktop-nav { gap: clamp(11px, 1.45vw, 23px); }
.page-home .nav-link { font-size: .66rem; letter-spacing: .065em; }

.hero-kicker-home {
  margin: 0 0 8px;
  color: rgba(255,255,255,.84);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.page-home .hero-description { max-width: 410px; }

.page-home .story-grid {
  grid-template-columns: minmax(0,1fr) minmax(300px,.42fr);
  align-items: stretch;
}

.page-home .story-panel {
  grid-template-columns: minmax(360px,1fr) minmax(320px,.86fr);
  min-height: 560px;
  gap: clamp(34px,3.5vw,56px);
  padding: 62px clamp(48px,5vw,78px);
}

.page-home .story-copy-block { max-width: 520px; }
.page-home .story-editorial p { margin-bottom: 15px; }

.page-home .upcoming-panel {
  min-height: auto;
  color: #314252;
  background: linear-gradient(180deg,#eff8fd 0%,#e6f3fa 100%);
  border-left: 1px solid rgba(103,140,164,.12);
  box-shadow: none;
}

.page-home .upcoming-content { padding: 56px 38px 48px; }

.page-home .compact-upcoming {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.page-home .upcoming-label {
  margin-bottom: 22px;
  color: #6e96ac;
  font-size: .66rem;
  font-weight: 700;
}

.page-home .upcoming-kicker {
  margin: 0 0 8px;
  color: #7f9fb1;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.page-home .upcoming-panel h3 {
  margin: 0 0 16px;
  color: #2e3842;
  font-size: clamp(2.25rem,2.8vw,3rem);
}

.page-home .event-name {
  margin: 0;
  color: #3c4c5b;
  font-family: "Cormorant Garamond",serif;
  font-size: 1.3rem;
  font-weight: 600;
}

.page-home .event-meta-line {
  margin: 10px 0 0;
  color: #6e96ac;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.page-home .event-subtitle {
  max-width: 280px;
  margin: 10px 0 26px;
  color: #697783;
  font-size: .74rem;
  line-height: 1.6;
}

.page-home .compact-countdown {
  max-width: none;
  gap: 0;
  margin: 0 0 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(103,140,164,.18);
  border-bottom: 1px solid rgba(103,140,164,.18);
}

.page-home .compact-countdown .countdown-box {
  min-height: auto;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(103,140,164,.16);
  backdrop-filter: none;
}
.page-home .compact-countdown .countdown-box:last-child { border-right: 0; }
.page-home .compact-countdown strong { color: #314252; font-size: 1.7rem; }
.page-home .compact-countdown span { color: #7f9fb1; font-size: .5rem; }
.page-home .countdown-status { color: #82929e; font-size: .60rem; }

.page-home .schedule-button {
  align-self: flex-start;
  color: #557d95;
  background: transparent;
  border: 1px solid rgba(103,140,164,.28);
  border-radius: 999px;
  box-shadow: none;
}

.media-home-section,
.updates-home-section {
  margin: 34px clamp(28px,4vw,54px) 0;
  padding: 58px clamp(38px,5vw,70px);
  border-radius: 20px;
}

.media-home-section {
  background: linear-gradient(135deg,#f8fbfd 0%,#f4f9fc 100%);
  border: 1px solid rgba(103,140,164,.10);
}

.media-home-heading,
.updates-home-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 28px;
}

.media-home-heading h2,
.updates-home-heading h2,
.blossoms-home-section h2 {
  margin: 4px 0 0;
  color: #2f2b2d;
  font-family: "Cormorant Garamond",serif;
  font-size: clamp(2.35rem,3.2vw,3.4rem);
  font-weight: 500;
  line-height: 1;
}

.media-home-heading > p,
.updates-home-heading > p {
  max-width: 390px;
  margin: 0;
  color: #73777d;
  font-size: .78rem;
  line-height: 1.7;
}

.media-home-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.media-home-card {
  display: flex;
  align-items: flex-end;
  min-height: 230px;
  padding: 26px;
  background: linear-gradient(145deg,#fff,#edf6fb);
  border: 1px solid rgba(103,140,164,.11);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(64,83,96,.05);
}

.media-home-card-featured {
  background: linear-gradient(145deg,#fff4f7,#f4f9fd);
}

.media-home-card-copy span {
  color: #769bb0;
  font-size: .60rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.media-home-card-copy h3 {
  margin: 5px 0 7px;
  color: #343033;
  font-family: "Cormorant Garamond",serif;
  font-size: 1.65rem;
  font-weight: 500;
}

.media-home-card-copy p {
  max-width: 240px;
  margin: 0 0 17px;
  color: #777176;
  font-size: .72rem;
  line-height: 1.55;
}

.media-home-card-copy strong {
  color: #bd7184;
  font-size: .61rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.blossoms-home-section {
  margin: 34px clamp(28px,4vw,54px) 0;
  padding: 62px 34px;
  text-align: center;
  background: linear-gradient(135deg,#f1f8ef 0%,#fbfdf8 50%,#f5f1f7 100%);
  border: 1px solid rgba(121,150,106,.12);
  border-radius: 20px;
}

.blossoms-home-inner { max-width: 660px; margin-inline: auto; }

.blossoms-home-section p:not(.section-label) {
  max-width: 540px;
  margin: 0 auto 20px;
  color: #71766f;
  font-size: .82rem;
  line-height: 1.75;
}

.blossoms-home-link {
  display: inline-flex;
  padding-bottom: 3px;
  color: #79966a;
  border-bottom: 1px solid rgba(121,150,106,.34);
  font-size: .70rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.updates-home-section {
  background: #fffdfb;
  border: 1px solid rgba(83,72,77,.08);
}

.updates-list { border-top: 1px solid rgba(83,72,77,.09); }

.update-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 86px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(83,72,77,.09);
}

.update-row time {
  color: #8c969c;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.update-row div span {
  color: #7ea1b3;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.update-row h3 {
  margin: 3px 0 0;
  color: #373234;
  font-family: "Cormorant Garamond",serif;
  font-size: 1.25rem;
  font-weight: 500;
}

@media (max-width:1100px) {
  .page-home .story-grid { grid-template-columns: 1fr; }
  .media-home-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .media-home-card:last-child { grid-column: 1/-1; }
}

@media (max-width:700px) {
  .page-home .story-panel {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 46px 22px;
  }

  .page-home .upcoming-content { padding: 38px 22px; }

  .media-home-section,
  .blossoms-home-section,
  .updates-home-section {
    margin: 0;
    border-radius: 0;
  }

  .media-home-section,
  .updates-home-section { padding: 46px 22px; }
  .blossoms-home-section { padding: 52px 22px; }

  .media-home-heading,
  .updates-home-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .media-home-grid { grid-template-columns: 1fr; }
  .media-home-card:last-child { grid-column: auto; }
  .update-row { grid-template-columns: 64px 1fr auto; gap: 12px; }
}


/* =========================================================
   V11 — FINAL HOMEPAGE REFINEMENT PASS
========================================================= */

/* -------------------------
   MOBILE MENU — SMALLER
------------------------- */

@media (max-width: 1100px) {
  .page-home .mobile-menu-panel {
    width: min(76vw, 320px);
    padding: 96px 28px 34px;
  }

  .page-home .mobile-menu-panel a {
    padding: 11px 0;
    font-size: 1.15rem;
  }
}

/* -------------------------
   MOBILE HERO — PROTECT FACES
------------------------- */

@media (max-width: 600px) {
  .page-home .hero {
    position: relative;
    min-height: 720px;
    align-items: flex-end;
  }

  .page-home .hero-background {
    background-position: 38% 35%;
  }

  .page-home .hero-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(8,10,14,0.02) 0%,
        rgba(8,10,14,0.04) 42%,
        rgba(8,10,14,0.48) 68%,
        rgba(8,10,14,0.82) 100%
      );
  }

  .page-home .hero-content {
    position: absolute;
    right: 0;
    bottom: 22px;
    left: 0;

    width: 100%;
    margin: 0;
    padding: 0 22px 28px;

    text-align: center;
  }

  .page-home .hero-kicker-home {
    margin-bottom: 2px;
    font-size: 0.58rem;
  }

  .page-home .hero-title {
    margin-bottom: 4px;
    font-size: clamp(4.2rem, 18vw, 5.2rem);
  }

  .page-home .hero-heart {
    margin: 0 auto 8px;
    font-size: 1.55rem;
  }

  .page-home .hero-description {
    max-width: 340px;
    margin: 0 auto 8px;
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .page-home .hero-hashtags {
    margin-bottom: 16px;
    font-size: 0.73rem;
  }

  .page-home .primary-button {
    min-height: 44px;
    padding-inline: 22px;
    font-size: 0.64rem;
  }

  .page-home .scroll-indicator {
    display: none;
  }
}

/* -------------------------
   OUR STORY — CLEANER
------------------------- */

.page-home .story-visual-column {
  align-self: center;
}

.page-home .story-photo-wrap {
  margin-bottom: 0;
}

/* -------------------------
   WHAT'S NEXT + UPDATES
------------------------- */

.page-home .upcoming-content {
  justify-content: flex-start;
}

.upcoming-updates {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(103,140,164,.18);
}

.upcoming-updates-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.upcoming-updates-heading .upcoming-kicker {
  margin: 0;
}

.upcoming-updates-heading > span {
  color: #9aadb8;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.upcoming-update-list {
  border-top: 1px solid rgba(103,140,164,.12);
}

.upcoming-update-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  border-bottom: 1px solid rgba(103,140,164,.12);
  color: #435363;
}

.upcoming-update-row time {
  color: #80a0b3;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.upcoming-update-row span {
  font-family: "Cormorant Garamond", serif;
  font-size: .92rem;
  line-height: 1.15;
}

.upcoming-update-row strong {
  color: #bd7184;
  font-weight: 500;
}

/* -------------------------
   MOMENTS — NO CONTROLS
------------------------- */

.page-home .moments-controls {
  display: none !important;
}

.page-home .moment-image-link {
  cursor: default;
}

/* -------------------------
   MEDIA HEADING — DESCRIPTION BELOW
------------------------- */

.page-home .media-home-heading {
  display: block;
  margin-bottom: 30px;
}

.page-home .media-home-heading h2 {
  margin-top: 4px;
}

.page-home .media-home-description {
  max-width: 600px !important;
  margin: 14px 0 0 !important;
  color: #73777d;
  font-size: .78rem;
  line-height: 1.7;
}

/* -------------------------
   MEDIA CARDS
------------------------- */

.page-home .media-home-grid {
  align-items: stretch;
}

.page-home .media-home-card {
  min-height: 370px;
  padding: 0;
  overflow: hidden;
}

.page-home .media-home-card-copy {
  padding: 24px 25px 26px;
}

.page-home .media-fulfill-card {
  display: grid;
  grid-template-rows: 54% 46%;
  align-items: stretch;
}

.page-home .media-card-image-wrap {
  min-height: 0;
  overflow: hidden;
}

.page-home .media-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
  transition: transform 280ms ease;
}

.page-home .media-fulfill-card:hover .media-card-image {
  transform: scale(1.025);
}

.page-home .media-interviews-card {
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(circle at 78% 22%, rgba(169,206,229,.34), transparent 30%),
    linear-gradient(145deg,#fff,#edf6fb);
}

.page-home .media-interviews-card .media-home-card-copy {
  width: 100%;
  padding: 32px 28px;
}

.page-home .media-soundtrack-card {
  display: block;
  padding: 0;
  background: #23262c;
  border-color: rgba(255,255,255,.08);
}

.page-home .media-soundtrack-card .story-soundtrack {
  width: 100%;
  height: 100%;
  padding: 22px;
  color: #f8f3f4;
  background: #23262c;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-home .media-soundtrack-card .soundtrack-eyebrow {
  color: #8db5cc;
}

.page-home .media-soundtrack-card .soundtrack-title {
  color: #fff7f8;
}

.page-home .media-soundtrack-card .soundtrack-player-shell {
  margin-top: 14px;
}

.page-home .media-soundtrack-card .soundtrack-bottom {
  margin-top: 8px;
}

.page-home .media-soundtrack-card .soundtrack-loop {
  color: rgba(255,255,255,.50);
}

.page-home .media-soundtrack-card .soundtrack-youtube-link {
  color: #8db5cc;
}

/* -------------------------
   SEARCH
------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-search {
  display: none;
}

.site-search.is-open {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: start center;
  padding: 11vh 20px 30px;
}

.site-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18,20,24,.56);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-search-panel {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: 76vh;
  overflow-y: auto;
  padding: 30px;
  background: #fffdf9;
  border: 1px solid rgba(83,72,77,.10);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(24,28,32,.18);
}

.site-search-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.site-search-top h2 {
  margin: 2px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem,4vw,3rem);
  font-weight: 500;
}

.site-search-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid rgba(83,72,77,.12);
  border-radius: 50%;
  background: transparent;
  color: #635d60;
  font-size: 1.5rem;
  cursor: pointer;
}

.site-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #f7fafc;
  border: 1px solid rgba(103,140,164,.15);
  border-radius: 999px;
}

.site-search-field svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #769bb0;
  stroke-width: 1.6;
}

.site-search-field input {
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #343033;
}

.site-search-results {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.site-search-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 6px;
  border-bottom: 1px solid rgba(83,72,77,.08);
}

.site-search-result span {
  display: block;
  color: #769bb0;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-search-result strong {
  display: block;
  margin-top: 2px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.12rem;
  font-weight: 500;
}

.site-search-result > em {
  color: #bd7184;
  font-style: normal;
}

.site-search-empty {
  padding: 22px 0 6px;
  color: #817a7d;
  font-size: .82rem;
}

body.search-open {
  overflow: hidden;
}

body.dark-theme .site-search-panel {
  background: #24262b;
  border-color: rgba(255,255,255,.08);
  color: #f5eff1;
}

body.dark-theme .site-search-field {
  background: #1d1f23;
  border-color: rgba(255,255,255,.08);
}

body.dark-theme .site-search-field input {
  color: #f5eff1;
}

body.dark-theme .site-search-result {
  border-bottom-color: rgba(255,255,255,.07);
}

@media (max-width: 700px) {
  .page-home .media-home-grid {
    grid-template-columns: 1fr;
  }

  .page-home .media-home-card {
    min-height: 0;
  }

  .page-home .media-fulfill-card {
    grid-template-rows: 230px auto;
  }

  .page-home .media-soundtrack-card .story-soundtrack {
    padding: 18px;
  }

  .site-search.is-open {
    padding: 76px 14px 18px;
  }

  .site-search-panel {
    padding: 22px 18px;
    border-radius: 16px;
  }
}


/* =========================================================
   V12 — MOBILE HERO + COMPACT MEDIA + PLAYER FIX SUPPORT
========================================================= */

/* ---------------------------------------------------------
   MOBILE HERO — RESTORE THE BETTER FACE CROP
   Keep text low without pushing the image off-screen.
--------------------------------------------------------- */

@media (max-width: 600px) {

  .page-home .hero {
    min-height: 720px;
    background: #15181d;
  }

  .page-home .hero-background {
    /*
      Revert to the earlier focal point that showed both faces.
      The previous 38% rule shifted the crop too far.
    */
    background-position: 61% center;
    background-size: cover;
  }

  .page-home .hero-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(8, 10, 14, 0.02) 0%,
        rgba(8, 10, 14, 0.02) 47%,
        rgba(8, 10, 14, 0.34) 65%,
        rgba(8, 10, 14, 0.88) 100%
      );
  }

  .page-home .hero-content {
    bottom: 12px;
    padding:
      0
      22px
      20px;
  }

  .page-home .hero-title {
    font-size:
      clamp(
        3.65rem,
        16vw,
        4.65rem
      );
  }

  .page-home .hero-description {
    max-width: 320px;
    font-size: 0.82rem;
    line-height: 1.48;
  }

  .page-home .hero-hashtags {
    margin-bottom: 13px;
  }

}


/* ---------------------------------------------------------
   MEDIA — CUT CARD HEIGHT APPROXIMATELY IN HALF
--------------------------------------------------------- */

.page-home .media-home-section {
  padding-top: 44px;
  padding-bottom: 44px;
}

.page-home .media-home-heading {
  margin-bottom: 22px;
}

.page-home .media-home-grid {
  gap: 16px;
}

.page-home .media-home-card {
  min-height: 228px;
  max-height: 250px;
}

.page-home .media-home-card-copy {
  padding:
    17px
    19px
    18px;
}

.page-home .media-home-card-copy h3 {
  margin:
    3px
    0
    5px;

  font-size: 1.38rem;
}

.page-home .media-home-card-copy p {
  margin-bottom: 11px;

  font-size: 0.67rem;
  line-height: 1.45;
}

.page-home .media-home-card-copy strong {
  font-size: 0.56rem;
}


/* Fulfill — compact visual card */

.page-home .media-fulfill-card {
  grid-template-rows:
    118px
    1fr;
}

.page-home .media-card-image {
  object-position: center 34%;
}


/* Interviews */

.page-home .media-interviews-card {
  min-height: 228px;
}

.page-home .media-interviews-card .media-home-card-copy {
  padding: 25px 22px;
}


/* Soundtrack — preserve its character, shrink the player */

.page-home .media-soundtrack-card {
  min-height: 228px;
  max-height: 250px;
}

.page-home .media-soundtrack-card .story-soundtrack {
  display: flex;
  flex-direction: column;

  padding: 15px;

  overflow: hidden;
}

.page-home .media-soundtrack-card .soundtrack-topline {
  align-items: flex-start;
}

.page-home .media-soundtrack-card .soundtrack-eyebrow {
  margin-bottom: 2px;

  font-size: 0.54rem;
}

.page-home .media-soundtrack-card .soundtrack-title {
  max-width: 210px;

  font-size: 0.88rem;
  line-height: 1.18;
}

.page-home .media-soundtrack-card .soundtrack-note {
  width: 30px;
  height: 30px;

  font-size: 0.72rem;
}

.page-home .media-soundtrack-card .soundtrack-player-shell {
  flex: 0 0 112px;

  height: 112px;
  min-height: 112px;

  margin-top: 8px;

  border-radius: 9px;
}

.page-home .media-soundtrack-card #oombamYouTubePlayer,
.page-home .media-soundtrack-card #oombamYouTubePlayer iframe {
  width: 100% !important;
  height: 100% !important;

  border-radius: 9px;
}

.page-home .media-soundtrack-card .soundtrack-bottom {
  margin-top: 6px;

  font-size: 0.50rem;
}

.page-home .media-soundtrack-card .soundtrack-links {
  gap: 8px;
}


/* ---------------------------------------------------------
   MOBILE MEDIA
--------------------------------------------------------- */

@media (max-width: 700px) {

  .page-home .media-home-section {
    padding:
      40px
      18px;
  }

  .page-home .media-home-card {
    min-height: 210px;
    max-height: none;
  }

  .page-home .media-fulfill-card {
    grid-template-rows:
      132px
      auto;
  }

  .page-home .media-interviews-card {
    min-height: 190px;
  }

  .page-home .media-soundtrack-card {
    min-height: 244px;
    max-height: none;
  }

  .page-home .media-soundtrack-card .soundtrack-player-shell {
    flex-basis: 124px;

    height: 124px;
    min-height: 124px;
  }

}



/* =========================================================
   V13 — DESKTOP FIRST-FOLD + STORY CONTRAST + MEDIA REFINEMENT
========================================================= */

/* ---------------------------------------------------------
   WELCOME / HERO — FIRST VIEW SHOULD BE HERO ONLY
--------------------------------------------------------- */

@media (min-width: 1101px) {

  .page-home .hero {
    /*
      Fill the initial viewport beneath the desktop header so
      Our Story / What's Next do not appear in the first fold.
    */
    height: calc(100svh - 92px);
    min-height: 690px;
    max-height: 920px;
  }

  .page-home .hero-content {
    padding-top: clamp(110px, 13vh, 170px);
  }

}


/* Mobile first fold — keep the hero as the opening screen */
@media (max-width: 600px) {

  .page-home .hero {
    height: calc(100svh - 68px);
    min-height: 680px;
    max-height: none;
  }

}


/* ---------------------------------------------------------
   OUR STORY — DARK MODE READABILITY
--------------------------------------------------------- */

body.dark-theme.page-home .story-copy,
body.dark-theme.page-home .story-editorial,
body.dark-theme.page-home .story-editorial p {
  color: rgba(255, 255, 255, 0.76);
}

body.dark-theme.page-home .story-intro {
  color: rgba(255, 255, 255, 0.72);
}

body.dark-theme.page-home .story-closing {
  color: rgba(255, 255, 255, 0.64);
}

body.dark-theme.page-home .story-title,
body.dark-theme.page-home .story-copy h2 {
  color: #fff9fa;
}

body.dark-theme.page-home .story-kicker,
body.dark-theme.page-home .section-label {
  color: #8db5cc;
}

body.dark-theme.page-home .story-copy-block .primary-button {
  color: #172029;
  background: #a9cee5;
}

body.dark-theme.page-home .story-copy-block .primary-button:hover {
  background: #bddbeb;
}


/* ---------------------------------------------------------
   MOMENTS — SHORTER, SMALLER HEADLINE
--------------------------------------------------------- */

.page-home .moments-title {
  max-width: 560px;
  font-size: clamp(2.65rem, 4.2vw, 4.15rem);
  line-height: 0.96;
}

@media (max-width: 700px) {
  .page-home .moments-title {
    max-width: 330px;
    font-size: clamp(2.35rem, 10vw, 3.15rem);
  }
}


/* ---------------------------------------------------------
   MEDIA — SOUNDTRACK TILE: MORE BREATHING ROOM
--------------------------------------------------------- */

/*
  The overall media cards stay compact, but the soundtrack card
  gets slightly more vertical room so the YouTube controls remain
  usable and the card does not feel cramped.
*/

.page-home .media-home-grid {
  align-items: stretch;
}

.page-home .media-soundtrack-card {
  min-height: 278px;
  max-height: 294px;
}

.page-home .media-soundtrack-card .story-soundtrack {
  padding: 16px 16px 14px;
}

.page-home .media-soundtrack-card .soundtrack-topline {
  min-height: 46px;
  margin-bottom: 8px;
}

.page-home .media-soundtrack-card .soundtrack-title {
  max-width: 230px;
  font-size: 0.86rem;
  line-height: 1.22;
}

.page-home .media-soundtrack-card .soundtrack-note {
  width: 30px;
  height: 30px;
}

.page-home .media-soundtrack-card .soundtrack-player-shell {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}

.page-home .media-soundtrack-card #oombamYouTubePlayer,
.page-home .media-soundtrack-card #oombamYouTubePlayer iframe {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

.page-home .media-soundtrack-card .soundtrack-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 7px;
  min-height: 16px;
}

.page-home .media-soundtrack-card .soundtrack-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-home .media-soundtrack-card .soundtrack-youtube-link {
  font-size: 0.54rem;
  letter-spacing: 0.04em;
}


/* Keep the other two cards compact */
.page-home .media-fulfill-card,
.page-home .media-interviews-card {
  min-height: 228px;
  max-height: 250px;
}


/* Mobile — soundtrack gets enough room for native YouTube controls */
@media (max-width: 700px) {

  .page-home .media-soundtrack-card {
    min-height: 0;
    max-height: none;
  }

  .page-home .media-soundtrack-card .soundtrack-player-shell {
    aspect-ratio: 16 / 9;
  }

  .page-home .media-soundtrack-card .soundtrack-bottom {
    justify-content: flex-start;
  }

}


/* =========================================================
   V13.1 — MOBILE HERO FOCAL POINT REFINEMENT
   Show more of Oom on the right while keeping Bam visible.
========================================================= */

@media (max-width: 600px) {

  .page-home .hero-background {
    /*
      Shift the crop toward the right side of the source image.
      Higher X-position reveals more of Oom while preserving Bam.
    */
    background-position: 72% center;
  }

}


/* =========================================================
   V13.2 — MEDIA CARD UNIFORMITY + STORY READABILITY
========================================================= */

/* ---------------------------------------------------------
   MEDIA — ALL THREE DESKTOP TILES USE THE SAME FOOTPRINT
--------------------------------------------------------- */
@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  .page-home .media-home-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .page-home .media-fulfill-card,
  .page-home .media-interviews-card,
  .page-home .media-soundtrack-card {
    height: 294px;
    min-height: 294px;
    max-height: 294px;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Fulfill image/card */
  .page-home .media-fulfill-card {
    display: flex;
    flex-direction: column;
  }

  .page-home .media-fulfill-card .media-card-image,
  .page-home .media-fulfill-card .media-card-visual {
    flex: 0 0 140px;
    height: 140px;
    min-height: 140px;
  }

  .page-home .media-fulfill-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Interview tile */
  .page-home .media-interviews-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Soundtrack tile */
  .page-home .media-soundtrack-card .story-soundtrack {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .page-home .media-soundtrack-card .soundtrack-player-shell {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 170px;
  }

}


/* ---------------------------------------------------------
   OUR STORY — STRONGER LIGHT-MODE TYPOGRAPHY
--------------------------------------------------------- */

.page-home .story-copy,
.page-home .story-editorial,
.page-home .story-editorial p,
.page-home .story-copy-block p {
  color: #4f555b;
}

.page-home .story-intro {
  color: #596068;
  font-weight: 400;
}

.page-home .story-closing {
  color: #50575e;
}

.page-home .story-copy-block p {
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.72;
}

.page-home .story-intro,
.page-home .story-closing {
  font-size: clamp(1.05rem, 1.15vw, 1.16rem);
  line-height: 1.65;
}

.page-home .story-title,
.page-home .story-copy h2 {
  color: #28272a;
}


/* Preserve the stronger dark-mode contrast from v13 */
body.dark-theme.page-home .story-copy,
body.dark-theme.page-home .story-editorial,
body.dark-theme.page-home .story-editorial p,
body.dark-theme.page-home .story-copy-block p {
  color: rgba(255, 255, 255, 0.80);
}

body.dark-theme.page-home .story-intro {
  color: rgba(255, 255, 255, 0.76);
}

body.dark-theme.page-home .story-closing {
  color: rgba(255, 255, 255, 0.70);
}

body.dark-theme.page-home .story-title,
body.dark-theme.page-home .story-copy h2 {
  color: #fffafb;
}


/* Mobile/tablet: equal cards without forcing desktop height */
@media (max-width: 900px) {

  .page-home .media-fulfill-card,
  .page-home .media-interviews-card,
  .page-home .media-soundtrack-card {
    min-height: 0;
    max-height: none;
  }

}

/* =========================================================
   V13.3 — UNIFIED DARK MODE CANVAS
   Match outer page canvas with the inner Oom/Bam-style shell
========================================================= */

html[data-theme="dark"] body.page-home,
body.dark-theme.page-home {
  /* Match Bam's dark-mode outer canvas. */
  --ob-dark-bg: #090a0c;
  --ob-dark-panel: #111214;
  background: #090a0c !important;
  background-image: none !important;
}

html[data-theme="dark"] body.page-home .home-shell,
body.dark-theme.page-home .home-shell {
  background: #090a0c !important;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* Keep the dark header visually continuous with the shell. */
body.dark-theme.page-home .site-header,
body.dark-theme.page-home .site-header.is-scrolled {
  background: #090a0c;
}

/* Prevent the root canvas from revealing a lighter shade
   around the rounded desktop shell. */
html[data-theme="dark"],
html:has(body.dark-theme.page-home) {
  background: #090a0c;
}

/* Mobile has no outer shell spacing, but explicitly keep the
   same dark canvas so theme switching stays seamless. */
@media (max-width: 600px) {
  html[data-theme="dark"] body.page-home,
  html[data-theme="dark"] body.page-home .home-shell,
  body.dark-theme.page-home,
  body.dark-theme.page-home .home-shell {
    background: #090a0c !important;
  }
}


/* =========================================================
   V13.4 — BLOSSOMS / MEDIA / FOOTER REFINEMENT
========================================================= */

/* ---------------------------------------------------------
   BLOSSOMS — LEFT-ALIGNED EDITORIAL HEADER
--------------------------------------------------------- */

.page-home .blossoms-home-section {
  padding:
    50px
    clamp(38px, 5vw, 70px);

  text-align: left;
}

.page-home .blossoms-home-inner {
  max-width: 760px;
  margin-inline: 0;
}

.page-home .blossoms-home-section .section-label {
  margin-bottom: 16px;
  font-size: 0.76rem;
}

.page-home .blossoms-home-section h2 {
  max-width: 680px;
  margin: 0;

  font-size:
    clamp(
      2.7rem,
      3.5vw,
      3.8rem
    );

  line-height: 1.02;
}

.page-home .blossoms-home-section p:not(.section-label) {
  max-width: 650px;

  margin:
    22px
    0
    24px;

  color: #5f6662;

  font-size: 0.90rem;
  line-height: 1.82;
}

.page-home .blossoms-home-link {
  font-size: 0.72rem;
}


/* ---------------------------------------------------------
   MEDIA — GIVE FULFILL IMAGE MORE VISUAL WEIGHT
--------------------------------------------------------- */

@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  .page-home .media-fulfill-card {
    grid-template-rows: none;
  }

  .page-home .media-fulfill-card .media-card-image-wrap {
    flex:
      0
      0
      162px;

    height: 162px;
    min-height: 162px;
  }

  .page-home .media-fulfill-card .media-home-card-copy {
    flex: 1 1 auto;

    padding:
      14px
      18px
      16px;
  }

  .page-home .media-fulfill-card .media-home-card-copy h3 {
    margin:
      2px
      0
      4px;

    font-size: 1.30rem;
  }

  .page-home .media-fulfill-card .media-home-card-copy p {
    margin-bottom: 8px;

    font-size: 0.64rem;
    line-height: 1.42;
  }

}


/* ---------------------------------------------------------
   DARK MODE — MEDIA + BLOSSOMS JOIN THE DARK CANVAS
--------------------------------------------------------- */

body.dark-theme.page-home .media-home-section,
body.dark-theme.page-home .blossoms-home-section {
  /* Bam-style elevated dark surface over the #090a0c canvas. */
  background: #111214;
  border-color: rgba(255, 255, 255, 0.07);
}

body.dark-theme.page-home .media-home-heading h2,
body.dark-theme.page-home .blossoms-home-section h2 {
  color: #fffafb;
}

body.dark-theme.page-home .media-home-description,
body.dark-theme.page-home .blossoms-home-section p:not(.section-label) {
  color: rgba(255, 255, 255, 0.72);
}

body.dark-theme.page-home .media-home-card {
  background: #24262b;
  border-color: rgba(255, 255, 255, 0.08);

  box-shadow:
    0
    12px
    28px
    rgba(0, 0, 0, 0.14);
}

body.dark-theme.page-home .media-home-card-featured,
body.dark-theme.page-home .media-interviews-card {
  background:
    linear-gradient(
      145deg,
      #24262b,
      #202226
    );
}

body.dark-theme.page-home .media-home-card-copy h3 {
  color: #fffafb;
}

body.dark-theme.page-home .media-home-card-copy p {
  color: rgba(255, 255, 255, 0.68);
}

body.dark-theme.page-home .blossoms-home-link {
  color: #a9cba0;

  border-bottom-color:
    rgba(169, 203, 160, 0.32);
}


/* ---------------------------------------------------------
   FOOTER — COMPACT + SAME DARK CANVAS
--------------------------------------------------------- */

.page-home .site-footer {
  margin:
    28px
    clamp(28px, 4vw, 54px)
    0;

  padding:
    18px
    0
    12px;
}

.page-home .footer-inner {
  grid-template-columns:
    auto
    1fr
    auto;

  gap: 22px;
}

.page-home .footer-logo {
  width: 92px;
}

.page-home .footer-main-copy {
  color: #596066;

  font-size: 0.74rem;
  line-height: 1.55;
}

.page-home .footer-message {
  font-size: 1.32rem;
}

.page-home .footer-bottom {
  margin-top: 10px;

  color: #7d8388;

  font-size: 0.66rem;
  line-height: 1.45;
}


/* Dark footer should visually disappear into shell */
body.dark-theme.page-home .site-footer {
  color: rgba(255, 255, 255, 0.74);

  background: #090a0c;

  border-top-color:
    rgba(255, 255, 255, 0.07);
}

body.dark-theme.page-home .footer-main-copy {
  color: rgba(255, 255, 255, 0.72);
}

body.dark-theme.page-home .footer-bottom {
  color: rgba(255, 255, 255, 0.48);
}

body.dark-theme.page-home .footer-message {
  color: #a9cee5;
}


/* ---------------------------------------------------------
   TABLET / MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

  .page-home .blossoms-home-section {
    padding:
      44px
      24px;
  }

  .page-home .blossoms-home-section h2 {
    font-size:
      clamp(
        2.45rem,
        8vw,
        3.15rem
      );
  }

  .page-home .blossoms-home-section p:not(.section-label) {
    margin-top: 18px;
    font-size: 0.86rem;
  }

}


@media (max-width: 600px) {

  .page-home .blossoms-home-section {
    padding:
      42px
      22px;
  }

  .page-home .footer-inner {
    grid-template-columns: 1fr;

    justify-items: center;

    gap: 10px;

    text-align: center;
  }

  .page-home .footer-logo {
    width: 84px;
  }

  .page-home .footer-main-copy {
    max-width: 320px;

    font-size: 0.70rem;
  }

  .page-home .footer-message {
    font-size: 1.22rem;
  }

  .page-home .footer-bottom {
    margin-top: 8px;

    font-size: 0.62rem;
  }

}


/* =========================================================
   V13.5 — MOMENTS COPY + FOOTER BALANCE + DARK UPCOMING
========================================================= */

/* ---------------------------------------------------------
   MOMENTS — NEW HEADING + SUPPORTING NARRATIVE
--------------------------------------------------------- */

.page-home .moments-intro {
  align-items: flex-start;
}

.page-home .moments-intro > div {
  max-width: 720px;
}

.page-home .moments-heading {
  max-width: 520px;

  font-size:
    clamp(
      2.55rem,
      3.5vw,
      3.75rem
    );

  line-height: 1;
}

.page-home .moments-description {
  max-width: 620px;

  margin:
    16px
    0
    0;

  color: #666b70;

  font-size: 0.88rem;
  line-height: 1.72;
}

body.dark-theme.page-home .moments-description {
  color: rgba(255, 255, 255, 0.70);
}


/* ---------------------------------------------------------
   MEDIA — KEEP CTA VISIBLE INSIDE FULFILL CARD
--------------------------------------------------------- */

@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  .page-home .media-fulfill-card {
    height: 294px;
    min-height: 294px;
    max-height: 294px;
  }

  .page-home .media-fulfill-card .media-card-image-wrap {
    flex: 0 0 150px;
    height: 150px;
    min-height: 150px;
  }

  .page-home .media-fulfill-card .media-home-card-copy {
    display: flex;
    flex-direction: column;

    min-height: 0;

    padding:
      12px
      18px
      14px;
  }

  .page-home .media-fulfill-card .media-home-card-copy p {
    margin-bottom: 6px;
  }

  .page-home .media-fulfill-card .media-home-card-copy strong {
    display: block;

    margin-top: auto;

    color: #cf788e;

    font-size: 0.56rem;
    line-height: 1.2;
  }

}

body.dark-theme.page-home
.media-fulfill-card
.media-home-card-copy strong {
  color: #f1a1b3;
}


/* ---------------------------------------------------------
   WHAT'S NEXT — PARTICIPATES IN DARK MODE
--------------------------------------------------------- */

body.dark-theme.page-home .upcoming-panel {
  color: #f6f2f3;

  background: #111214;

  border-left-color:
    rgba(255, 255, 255, 0.07);

  box-shadow: none;
}

body.dark-theme.page-home .upcoming-panel h3,
body.dark-theme.page-home .event-name {
  color: #fffafb;
}

body.dark-theme.page-home .upcoming-label,
body.dark-theme.page-home .upcoming-kicker,
body.dark-theme.page-home .event-meta-line,
body.dark-theme.page-home .countdown-box span,
body.dark-theme.page-home .upcoming-update-row time {
  color: #8db5cc;
}

body.dark-theme.page-home .event-subtitle,
body.dark-theme.page-home .countdown-status {
  color: rgba(255, 255, 255, 0.66);
}

body.dark-theme.page-home .compact-countdown,
body.dark-theme.page-home .upcoming-updates,
body.dark-theme.page-home .upcoming-update-list,
body.dark-theme.page-home .upcoming-update-row {
  border-color:
    rgba(255, 255, 255, 0.09);
}

body.dark-theme.page-home
.compact-countdown
.countdown-box {
  border-right-color:
    rgba(255, 255, 255, 0.09);
}

body.dark-theme.page-home
.compact-countdown
strong {
  color: #fffafb;
}

body.dark-theme.page-home .upcoming-update-row {
  color: rgba(255, 255, 255, 0.82);
}

body.dark-theme.page-home
.upcoming-updates-heading > span {
  color: rgba(255, 255, 255, 0.42);
}


/* ---------------------------------------------------------
   FOOTER — CLEANER, MORE INTENTIONAL ALIGNMENT
--------------------------------------------------------- */

.page-home .site-footer {
  padding:
    16px
    0
    10px;
}

.page-home .footer-inner {
  display: grid;

  grid-template-columns:
    92px
    minmax(240px, 1fr)
    auto;

  align-items: center;

  column-gap: 28px;
}

.page-home .footer-logo {
  width: 82px;
}

.page-home .footer-main-copy {
  justify-self: start;

  margin: 0;

  font-size: 0.74rem;
  line-height: 1.45;

  text-align: left;
}

.page-home .footer-message {
  justify-self: end;

  margin: 0;

  font-size: 1.28rem;

  white-space: nowrap;
}

.page-home .footer-bottom {
  margin-top: 8px;

  padding-top: 8px;

  border-top:
    1px solid rgba(83, 72, 77, 0.06);

  font-size: 0.64rem;

  text-align: center;
}

body.dark-theme.page-home .footer-bottom {
  border-top-color:
    rgba(255, 255, 255, 0.06);
}


/* ---------------------------------------------------------
   MOBILE / TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

  .page-home .moments-description {
    font-size: 0.84rem;
  }

  .page-home .footer-inner {
    grid-template-columns: 1fr;

    justify-items: center;

    row-gap: 9px;

    text-align: center;
  }

  .page-home .footer-main-copy,
  .page-home .footer-message {
    justify-self: center;

    text-align: center;
  }

  .page-home .footer-message {
    white-space: normal;
  }

}

@media (max-width: 600px) {

  .page-home .moments-heading {
    font-size:
      clamp(
        2.35rem,
        10vw,
        3rem
      );
  }

  .page-home .moments-description {
    max-width: 330px;

    margin-top: 12px;

    font-size: 0.82rem;
    line-height: 1.65;
  }

}


/* =========================================================
   V13.6 — MOBILE HERO SOCIAL LINKS HOTFIX
   Keep all four official OomBam social icons visible.
========================================================= */

@media (max-width: 600px) {

  .page-home .hero-socials {
    position: absolute;

    top: auto;
    right: auto;
    bottom: 14px;
    left: 50%;

    z-index: 30;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: auto;
    max-width: calc(100% - 32px);

    gap: 14px;

    transform: translateX(-50%);
  }

  .page-home .hero-socials .social-line {
    display: none;
  }

  .page-home .hero-socials .social-icon {
    display: grid;
    place-items: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.94);
  }

  .page-home .hero-socials .social-icon svg {
    display: block;

    width: 21px;
    height: 21px;
  }

}


/* Extra breathing room for narrow phones */
@media (max-width: 390px) {

  .page-home .hero-socials {
    gap: 10px;
  }

  .page-home .hero-socials .social-icon {
    flex-basis: 36px;

    width: 36px;
    height: 36px;
  }

  .page-home .hero-socials .social-icon svg {
    width: 20px;
    height: 20px;
  }

}


/* =========================================================
   V13.6.1 — MOBILE SOCIAL ROW SPACING FIX
   Move social links below the CTA so they do not overlap text.
========================================================= */

@media (max-width: 600px) {

  .page-home .hero-content {
    /* Reserve enough room for CTA + social row */
    padding-bottom: 132px;
  }

  .page-home .hero-socials {
    bottom: 18px;
  }

  .page-home .hero-cta,
  .page-home .hero-button,
  .page-home .hero-content .primary-button {
    position: relative;
    z-index: 31;
  }

}


/* Slightly tighter spacing on very narrow screens */
@media (max-width: 390px) {

  .page-home .hero-content {
    padding-bottom: 126px;
  }

}


/* =========================================================
   V13.6.2 — MOBILE HERO COPY + SOCIAL ROW BALANCE
   Keep hero copy below the faces while preserving all socials.
========================================================= */

@media (max-width: 600px) {

  .page-home .hero-content {
    right: 0;
    bottom: 38px;
    left: 0;

    /* Restore compact hero spacing; v13.6.1's large
       bottom padding pushed the entire copy over the faces. */
    padding:
      0
      22px
      28px;
  }

  .page-home .hero-socials {
    bottom: 14px;
  }

}


/* Narrow phones */
@media (max-width: 390px) {

  .page-home .hero-content {
    bottom: 36px;

    padding:
      0
      18px
      28px;
  }

  .page-home .hero-socials {
    bottom: 12px;
  }

}


/* =========================================================
   V13.7 — MOBILE LANDSCAPE + COMPACT SCROLLABLE NAV
   Fix horizontal clipping on landscape phones and make the
   navigation drawer smaller, contained, and scrollable.
========================================================= */

/* ---------------------------------------------------------
   MOBILE / TABLET NAV — COMPACT SCROLLABLE DRAWER
--------------------------------------------------------- */
@media (max-width: 1100px) {

  .page-home .mobile-menu.is-open {
    align-items: flex-start;
    justify-content: flex-end;

    padding: 12px;

    overflow: hidden;
  }

  .page-home .mobile-menu-panel {
    width: min(68vw, 300px);
    height: auto;
    max-height: calc(100dvh - 24px);

    margin: 0;

    padding:
      72px
      24px
      20px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    border-radius: 18px;

    scrollbar-width: thin;
  }

  .page-home .mobile-menu-panel a {
    flex: 0 0 auto;

    padding: 9px 0;

    font-size: 1rem;
    line-height: 1.2;
  }

}


/* ---------------------------------------------------------
   LANDSCAPE PHONES / SHORT TABLETS
--------------------------------------------------------- */
@media
  (max-width: 1100px)
  and (max-height: 600px)
  and (orientation: landscape) {

  html,
  body.page-home {
    max-width: 100%;

    overflow-x: hidden;
  }

  body.page-home {
    padding:
      8px
      8px
      14px;
  }

  .page-home .home-shell {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

    border-radius: 16px;
  }

  /* HEADER */
  .page-home .site-header,
  .page-home .site-header.is-scrolled {
    min-height: 58px;

    padding:
      5px
      14px;
  }

  .page-home .brand-logo,
  .page-home .site-header.is-scrolled .brand-logo {
    width: 70px;
    max-height: 46px;
  }

  .page-home .header-actions {
    gap: 6px;
  }

  /* HERO — do not let portrait copy consume excessive height */
  .page-home .hero {
    min-height: max(410px, calc(100svh - 58px));

    margin:
      0
      12px;
  }

  .page-home .hero-content {
    max-width: 410px;

    margin-left: 32px;

    padding-top: 62px;
    padding-bottom: 52px;
  }

  .page-home .hero-title {
    font-size:
      clamp(
        3.6rem,
        10vw,
        5rem
      );
  }

  .page-home .hero-description {
    max-width: 360px;

    font-size: 0.86rem;
    line-height: 1.55;
  }

  /* STORY / WHAT'S NEXT
     Collapse inner story columns so nothing extends past viewport. */
  .page-home .story-section,
  .page-home .moments-section,
  .page-home .placeholder-section {
    width: auto;
    max-width: 100%;

    margin-inline: 12px;
  }

  .page-home .story-grid,
  .page-home .story-panel {
    grid-template-columns: 1fr;

    min-width: 0;
    min-height: auto;
  }

  .page-home .story-panel {
    gap: 28px;

    padding:
      38px
      32px;
  }

  .page-home .story-copy-block,
  .page-home .story-photo-wrap,
  .page-home .story-photo-frame,
  .page-home .upcoming-panel,
  .page-home .upcoming-content,
  .page-home .compact-upcoming {
    min-width: 0;
    max-width: 100%;
  }

  .page-home .story-photo-frame {
    width: min(360px, 58vw);

    margin-inline: auto;
  }

  .page-home .upcoming-content {
    padding:
      34px
      30px;
  }

  .page-home .compact-countdown {
    width: 100%;

    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }

  .page-home .compact-countdown .countdown-box {
    min-width: 0;

    padding:
      4px
      5px;
  }

  .page-home .compact-countdown strong {
    font-size: 1.35rem;
  }

  .page-home .upcoming-update-row,
  .page-home .update-row {
    min-width: 0;
  }

  /* MOBILE MENU — smaller in landscape */
  .page-home .mobile-menu.is-open {
    padding: 8px;
  }

  .page-home .mobile-menu-panel {
    width: min(46vw, 270px);
    max-height: calc(100dvh - 16px);

    padding:
      52px
      20px
      14px;

    border-radius: 14px;
  }

  .page-home .mobile-menu-panel a {
    padding: 7px 0;

    font-size: 0.92rem;
  }

  /* FOOTER */
  .page-home .site-footer {
    margin:
      24px
      12px
      0;
  }

}


/* ---------------------------------------------------------
   EXTRA-SHORT LANDSCAPE VIEWPORTS
--------------------------------------------------------- */
@media
  (max-width: 900px)
  and (max-height: 450px)
  and (orientation: landscape) {

  .page-home .mobile-menu-panel {
    width: min(44vw, 250px);

    padding-top: 44px;
  }

  .page-home .mobile-menu-panel a {
    padding: 6px 0;

    font-size: 0.86rem;
  }

}


/* =========================================================
   V13.7.1 — LANDSCAPE HERO SOCIAL ICON FIX
   Landscape phones can be wider than 600px, so explicitly
   switch the hero socials to the mobile horizontal layout.
========================================================= */

@media
  (max-width: 1100px)
  and (max-height: 600px)
  and (orientation: landscape) {

  .page-home .hero-socials {
    position: absolute;

    top: auto;
    right: auto;
    bottom: 14px;
    left: 50%;

    z-index: 30;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: auto;
    max-width: calc(100% - 40px);

    gap: 14px;

    transform: translateX(-50%);
  }

  .page-home .hero-socials .social-line {
    display: none;
  }

  .page-home .hero-socials .social-icon {
    display: grid;
    place-items: center;

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    margin: 0;
    padding: 0;

    color: rgba(255,255,255,.94);
  }

  .page-home .hero-socials .social-icon svg {
    display: block;

    width: 20px;
    height: 20px;
  }

}


/* Extra-short landscape phones */
@media
  (max-width: 900px)
  and (max-height: 450px)
  and (orientation: landscape) {

  .page-home .hero-socials {
    bottom: 10px;

    gap: 10px;
  }

  .page-home .hero-socials .social-icon {
    flex-basis: 34px;

    width: 34px;
    height: 34px;
  }

}

/* =========================================================
   V13.7.2 — HOMEPAGE HERO PHOTO CREDIT
   Editorial attribution for the hero photograph.
========================================================= */

.page-home .hero-photo-credit {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 32;

  display: inline-flex;
  align-items: center;
  gap: 4px;

  max-width: calc(100% - 36px);
  padding: 5px 9px;

  color: rgba(255, 255, 255, 0.9);
  background: rgba(15, 18, 23, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;

  font-family: "DM Sans", sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.page-home .hero-photo-credit a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 2px;
}

.page-home .hero-photo-credit a:hover,
.page-home .hero-photo-credit a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.page-home .hero-photo-credit a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Keep the credit above the social row on portrait phones. */
@media (max-width: 600px) {
  .page-home .hero-photo-credit {
    right: 10px;
    bottom: 68px;

    padding: 4px 7px;
    font-size: 0.54rem;
  }
}

/* Landscape phones also use a horizontal social row at the bottom. */
@media
  (max-width: 1100px)
  and (max-height: 600px)
  and (orientation: landscape) {

  .page-home .hero-photo-credit {
    right: 12px;
    bottom: 62px;

    padding: 4px 7px;
    font-size: 0.55rem;
  }
}

/* Very narrow phones: keep attribution compact and safely inside the hero. */
@media (max-width: 390px) {
  .page-home .hero-photo-credit {
    right: 8px;
    bottom: 62px;

    font-size: 0.51rem;
  }
}


/* =========================================================
   V13.7.4 — MOBILE HERO CREDIT + SOUNDTRACK CONSISTENCY
========================================================= */

/*
  Hero credit: on phones move attribution to the top-right of
  the photograph. This keeps it clear of both the primary CTA
  and the social-media row at the bottom of the hero.
*/
@media (max-width: 700px) {
  .page-home .hero-photo-credit {
    top: 12px;
    right: 10px;
    bottom: auto;
    left: auto;

    padding: 4px 7px;
    font-size: 0.53rem;
  }
}

@media
  (max-width: 1100px)
  and (max-height: 600px)
  and (orientation: landscape) {

  .page-home .hero-photo-credit {
    top: 10px;
    right: 12px;
    bottom: auto;
    left: auto;
  }
}

/*
  Soundtrack card: use the same light editorial surface as the
  other Media tiles. The embedded video itself retains its native
  YouTube appearance; only the surrounding card follows the page
  theme.
*/
.page-home .media-soundtrack-card {
  background:
    radial-gradient(circle at 82% 18%, rgba(169, 206, 229, 0.30), transparent 32%),
    linear-gradient(145deg, #ffffff, #edf6fb);
  border-color: rgba(169, 206, 229, 0.42);
}

.page-home .media-soundtrack-card .story-soundtrack {
  color: #4f555b;
  background: transparent;
}

.page-home .media-soundtrack-card .soundtrack-eyebrow {
  color: #7399ae;
}

.page-home .media-soundtrack-card .soundtrack-title {
  color: #4f555b;
}

.page-home .media-soundtrack-card .soundtrack-loop {
  color: #7d858c;
}

.page-home .media-soundtrack-card .soundtrack-youtube-link {
  color: #6f99b3;
}

/* Make the real YouTube iframe fill the media player area. */
.page-home .media-soundtrack-card .soundtrack-player-shell iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: inherit;
}

/* Dark mode stays consistent with the site's dark surfaces. */
body.dark-theme.page-home .media-soundtrack-card {
  background:
    linear-gradient(145deg, rgba(34, 37, 43, 0.98), rgba(27, 29, 34, 0.98));
  border-color: rgba(169, 206, 229, 0.16);
}

body.dark-theme.page-home .media-soundtrack-card .story-soundtrack {
  color: rgba(255, 255, 255, 0.76);
  background: transparent;
}

body.dark-theme.page-home .media-soundtrack-card .soundtrack-title {
  color: rgba(255, 255, 255, 0.88);
}

body.dark-theme.page-home .media-soundtrack-card .soundtrack-youtube-link {
  color: #8db5cc;
}

/* ==========================================================
   HOMEPAGE 13.9.0 — COMPACT HOMEPAGE EDITORIAL SYSTEM
   Known-issues consolidation:
   - Moments: compact 2 × 2 grid
   - Media: compact 2 × 2 grid
   - Blossoms: preserve approved icon layout
   - Hero: align outer edge with global header / page shell
   ========================================================== */

/* ---------- Shell continuity ---------- */
.page-home .home-shell {
  width: min(var(--ob-shell-max, 1480px), 96vw);
}

/* The hero is the first visual surface under the global header.
   Remove its former inner horizontal inset so the header and hero
   share one continuous left/right edge. */
.page-home .hero {
  margin-inline: 0;
}

.page-home .moments-editorial,
.page-home .media-editorial,
.page-home .blossoms-home-redesign {
  position: relative;
}

/* ---------- Moments: compact 2 × 2 editorial grid ---------- */
.page-home .moments-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(28px, 3vw, 42px);
}

.page-home .moment-compact-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 163, 187, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .46);
  box-shadow: 0 14px 36px rgba(48, 70, 84, .045);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.page-home .moment-compact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(126, 163, 187, .32);
  box-shadow: 0 18px 40px rgba(48, 70, 84, .075);
}

.page-home .moment-compact-media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #edf3f7;
}

.page-home .moment-compact-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
}

.page-home .moment-compact-card:hover .moment-compact-media img {
  transform: scale(1.025);
}

.page-home .moment-compact-copy {
  padding: clamp(17px, 1.7vw, 23px) clamp(18px, 1.9vw, 25px) clamp(20px, 2vw, 27px);
}

.page-home .moment-compact-number,
.page-home .media-compact-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #6f9ab7;
  font: 700 .64rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.page-home .moment-compact-copy h3,
.page-home .media-compact-copy h3 {
  margin: 0 0 7px;
  color: #322f31;
  font: 500 clamp(1.55rem, 2vw, 2.2rem)/1 "Cormorant Garamond", serif;
}

.page-home .moment-compact-copy p,
.page-home .media-compact-copy p {
  margin: 0;
  color: #6c7075;
  font: 400 .79rem/1.6 "DM Sans", sans-serif;
}

/* ---------- Media: compact 2 × 2 feature grid ---------- */
.page-home .media-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(28px, 3vw, 42px);
}

.page-home .media-compact-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(210px, .92fr);
  align-items: stretch;
  border: 1px solid rgba(126, 163, 187, .22);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(237,247,252,.82));
  box-shadow: 0 14px 36px rgba(48, 70, 84, .045);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.page-home .media-compact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(126, 163, 187, .36);
  box-shadow: 0 18px 42px rgba(48, 70, 84, .075);
}

.page-home .media-compact-visual {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 190px;
  background: #e9f1f5;
}

.page-home .media-compact-visual img,
.page-home .media-compact-player iframe {
  width: 100%;
  height: 100%;
  min-height: 190px;
  display: block;
  border: 0;
}

.page-home .media-compact-visual img {
  object-fit: cover;
  transition: transform .4s ease;
}

.page-home a.media-compact-visual:hover img {
  transform: scale(1.025);
}

.page-home .media-compact-copy {
  min-width: 0;
  padding: clamp(18px, 2vw, 27px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-home .media-compact-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(201,104,130,.32);
  color: #c96882;
  font: 700 .64rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-decoration: none;
}

.page-home .media-compact-link:hover { border-color: currentColor; }
.page-home .media-compact-link--muted { color: #8a8d91; cursor: default; }

.page-home .media-compact-visual--blog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(30,33,38,.55));
}

.page-home .media-blog-mark {
  position: absolute;
  z-index: 1;
  left: 16px;
  bottom: 14px;
  color: #fff;
  font: 500 clamp(1.35rem, 1.8vw, 1.9rem)/1 "Cormorant Garamond", serif;
}

.page-home .media-soundtrack-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Blossoms: preserve approved icon layout ---------- */
.page-home .blossoms-home-redesign .blossoms-home-inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(50px, 7vw, 110px);
}

.page-home .blossoms-home-copy { max-width: 620px; }

.page-home .blossoms-feature-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.page-home .blossoms-feature-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 188px;
  padding: 22px 20px;
  border: 1px solid rgba(118, 160, 133, .2);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,.54);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.page-home .blossoms-feature-link:hover {
  transform: translateY(-4px);
  border-color: rgba(118, 160, 133, .42);
  background: rgba(255,255,255,.82);
}

.page-home .blossoms-feature-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  border-radius: 50%;
  background: rgba(128, 179, 151, .13);
  color: #6f987a;
}

.page-home .blossoms-feature-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-home .blossoms-feature-link strong {
  display: block;
  margin-bottom: 7px;
  color: #34443a;
  font: 600 .88rem/1.3 "DM Sans", sans-serif;
}

.page-home .blossoms-feature-link small {
  display: block;
  color: #747d77;
  font: 400 .75rem/1.55 "DM Sans", sans-serif;
}

/* ---------- Dark mode ---------- */
body.dark-theme.page-home .moment-compact-card {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

body.dark-theme.page-home .moment-compact-copy h3,
body.dark-theme.page-home .media-compact-copy h3,
body.dark-theme.page-home .blossoms-feature-link strong { color: #f7f2ed; }

body.dark-theme.page-home .moment-compact-copy p,
body.dark-theme.page-home .media-compact-copy p,
body.dark-theme.page-home .blossoms-feature-link small { color: rgba(244,241,237,.68); }

body.dark-theme.page-home .media-compact-card {
  border-color: rgba(255,255,255,.085);
  background: linear-gradient(135deg, rgba(41,43,48,.96), rgba(34,38,43,.96));
  box-shadow: none;
}

body.dark-theme.page-home .blossoms-feature-link {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

body.dark-theme.page-home .blossoms-feature-link:hover {
  border-color: rgba(134,185,151,.28);
  background: rgba(255,255,255,.05);
}

body.dark-theme.page-home .blossoms-feature-icon {
  background: rgba(127,177,146,.11);
  color: #9cc9aa;
}

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
  .page-home .media-compact-card {
    grid-template-columns: 1fr;
  }

  .page-home .media-compact-visual,
  .page-home .media-compact-visual img,
  .page-home .media-compact-player iframe {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .page-home .blossoms-home-redesign .blossoms-home-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-home .moments-compact-grid,
  .page-home .media-compact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-home .moment-compact-card,
  .page-home .media-compact-card {
    border-radius: 18px;
  }

  .page-home .blossoms-feature-links {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-home .blossoms-feature-link {
    min-height: 0;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 15px;
    align-items: center;
    padding: 16px;
  }

  .page-home .blossoms-feature-icon {
    width: 46px;
    height: 46px;
    margin: 0;
  }

  .page-home .blossoms-feature-link strong { margin-bottom: 4px; }
}

@media (max-width: 600px) {
  .page-home .hero {
    margin-inline: 0;
  }
}


/* ==========================================================
   HOMEPAGE 13.9.1 — SHELL / HERO EDGE CORRECTION
   - Remove the rounded clipping at the top of the hero canvas.
   - Keep rounding only at the bottom of the homepage shell.
   ========================================================== */
.page-home .home-shell {
  border-top: 0;
  border-radius: 0 0 22px 22px;
}

.page-home .hero,
.page-home .hero-background,
.page-home .hero-overlay {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 760px) {
  .page-home .home-shell {
    border-radius: 0;
  }
}

/* =========================================================
   V13.9.2 — TABLET PORTRAIT LAYOUT STABILIZATION
   Target: iPad/tablets in portrait (761px–1100px).
   Goals:
   - keep the story readable without cramped columns
   - reduce unnecessary vertical whitespace
   - keep What's Next / Latest Updates inside the shell
   - prevent clipped labels and horizontal overflow
========================================================= */

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  /* Keep the page shell comfortably inside the tablet viewport. */
  body.page-home {
    padding-inline: 14px;
  }

  .page-home .home-shell {
    width: 100%;
    max-width: 100%;
  }

  /* Story + What's Next should stack as two clean editorial blocks. */
  .page-home .story-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  /* Preserve an editorial two-column story, but use tablet-safe proportions. */
  .page-home .story-panel {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
    align-items: center;
    min-height: 0;
    gap: clamp(28px, 4vw, 44px);
    padding: clamp(48px, 6vw, 68px) clamp(38px, 5vw, 58px);
  }

  .page-home .story-copy-block {
    width: 100%;
    max-width: 520px;
    min-width: 0;
  }

  .page-home .story-copy-block h2 {
    font-size: clamp(3rem, 6vw, 4rem);
  }

  .page-home .story-editorial,
  .page-home .story-editorial p,
  .page-home .story-intro,
  .page-home .story-closing {
    max-width: 100%;
  }

  .page-home .story-visual-column,
  .page-home .story-photo-wrap {
    min-width: 0;
  }

  .page-home .story-photo-wrap {
    min-height: 0;
  }

  .page-home .story-photo-frame {
    width: min(100%, 330px);
    margin-inline: auto;
  }

  .page-home .story-badge {
    right: max(0px, calc(50% - 185px));
  }

  /* What's Next becomes a compact tablet card instead of a tall sidebar. */
  .page-home .upcoming-panel {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-left: 0;
    border-top: 1px solid rgba(103, 140, 164, .12);
  }

  .page-home .upcoming-content {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
    grid-template-areas:
      "label updates"
      "event updates"
      "countdown updates"
      "status updates";
    column-gap: clamp(34px, 5vw, 64px);
    row-gap: 0;
    width: 100%;
    min-height: 0;
    padding: clamp(42px, 5vw, 58px) clamp(38px, 5vw, 58px);
  }

  .page-home .upcoming-label {
    grid-area: label;
    align-self: start;
  }

  .page-home .upcoming-kicker:not(.upcoming-updates-heading .upcoming-kicker),
  .page-home .upcoming-panel h3,
  .page-home .upcoming-event {
    grid-area: event;
  }

  /* Keep the event's internal flow together. */
  .page-home .upcoming-content > .upcoming-kicker {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  .page-home .upcoming-panel h3 {
    grid-column: 1;
    grid-row: 3;
    margin-top: 28px;
  }

  .page-home .upcoming-event {
    grid-column: 1;
    grid-row: 4;
    margin-top: 74px;
  }

  .page-home .compact-countdown {
    grid-column: 1;
    grid-row: 5;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
  }

  .page-home .countdown-status {
    grid-column: 1;
    grid-row: 6;
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
  }

  .page-home .upcoming-updates {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-left: clamp(26px, 4vw, 42px);
    border-left: 1px solid rgba(103, 140, 164, .16);
  }

  .page-home .upcoming-updates-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
  }

  .page-home .upcoming-updates-heading > span {
    flex: 0 0 auto;
    margin-left: 12px;
  }

  .page-home .upcoming-update-list {
    width: 100%;
    min-width: 0;
  }

  .page-home .upcoming-update-row {
    grid-template-columns: 64px minmax(0, 1fr) 18px;
    gap: 14px;
    width: 100%;
    min-width: 0;
  }

  .page-home .upcoming-update-row span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .page-home .compact-countdown {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .compact-countdown .countdown-box {
    min-width: 0;
    padding-inline: 6px;
  }

  .page-home .compact-countdown strong {
    font-size: 1.45rem;
  }
}

/* Narrow portrait tablets: stack the two What's Next columns before they get cramped. */
@media (min-width: 761px) and (max-width: 880px) and (orientation: portrait) {
  .page-home .story-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-home .story-copy-block {
    max-width: 640px;
  }

  .page-home .story-photo-frame {
    width: min(420px, 72vw);
  }

  .page-home .story-badge {
    right: max(7%, calc(50% - 245px));
  }

  .page-home .upcoming-content {
    display: block;
  }

  .page-home .upcoming-content > .upcoming-kicker,
  .page-home .upcoming-panel h3,
  .page-home .upcoming-event,
  .page-home .compact-countdown,
  .page-home .countdown-status,
  .page-home .upcoming-updates {
    margin-left: 0;
    margin-right: 0;
  }

  .page-home .upcoming-updates {
    margin-top: 34px;
    padding-top: 28px;
    padding-left: 0;
    border-top: 1px solid rgba(103, 140, 164, .16);
    border-left: 0;
  }
}

/* =========================================================
   V13.9.3 — COMBINED TABLET RESPONSIVE PASS
   Landscape: 881px–1366px
   Portrait: 761px–1100px handled by the portrait rules above.
   This block deliberately targets landscape only so the two
   tablet layouts cannot override each other.
========================================================= */
@media (min-width: 881px) and (max-width: 1366px) and (orientation: landscape) {
  body.page-home {
    padding-inline: 14px;
  }

  .page-home .home-shell {
    width: 100%;
    max-width: 100%;
  }

  /* Give Our Story and What's Next their own full-width rows. */
  .page-home .story-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  /* Keep the story editorial, but prevent text/photo overlap. */
  .page-home .story-panel {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr);
    align-items: center;
    min-height: 0;
    gap: clamp(34px, 4vw, 56px);
    padding: clamp(48px, 5vw, 64px) clamp(40px, 5vw, 64px);
  }

  .page-home .story-copy-block {
    width: 100%;
    max-width: 650px;
    min-width: 0;
  }

  .page-home .story-editorial,
  .page-home .story-editorial p,
  .page-home .story-intro,
  .page-home .story-closing {
    max-width: 100%;
  }

  .page-home .story-visual-column,
  .page-home .story-photo-wrap {
    min-width: 0;
  }

  .page-home .story-photo-wrap {
    min-height: 0;
  }

  .page-home .story-photo-frame {
    width: min(360px, 100%);
    margin-inline: auto;
  }

  /* What's Next becomes a full-width editorial panel below Story. */
  .page-home .upcoming-panel {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-left: 0;
    border-top: 1px solid rgba(103, 140, 164, .12);
  }

  .page-home .upcoming-content {
    width: min(100%, 1080px);
    min-height: 0;
    margin-inline: auto;
    padding: clamp(40px, 4vw, 54px) clamp(40px, 5vw, 64px);
  }

  .page-home .compact-countdown {
    width: min(100%, 620px);
    max-width: 620px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .compact-countdown .countdown-box {
    min-width: 0;
  }

  .page-home .event-subtitle {
    max-width: 620px;
  }

  /* Keep update rows inside the panel at tablet widths. */
  .page-home .upcoming-updates,
  .page-home .upcoming-update-list,
  .page-home .upcoming-update-row {
    width: 100%;
    min-width: 0;
  }

  .page-home .upcoming-update-row {
    grid-template-columns: 72px minmax(0, 1fr) 20px;
  }

  .page-home .upcoming-update-row span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}


/* =========================================================
   V14.0 — RESET BASELINE
   - Homepage light palette intentionally unchanged.
   - Dark outer canvas follows Bam: #090a0c.
   - Elevated homepage dark surfaces use Bam's #111214 family.
   - Mobile-menu anchoring is owned by Global.css + script.js.
========================================================= */


/* =========================================================
   v14.0.2 — HOMEPAGE EDITORIAL SHELL CURVATURE
   ---------------------------------------------------------
   Match the approved Oom/Bam profile shell treatment:
   - rounded top corners on the header
   - continuous square join between header and hero
   - rounded lower corners on the hero/banner
   - matching outer shell finish
   - mobile stays edge-to-edge
========================================================= */

@media (min-width: 1101px) {
  /* Header becomes the curved top cap of the homepage canvas. */
  body.page-home > .ob-header {
    width: min(1480px, 96vw);
    margin-inline: auto;
    border-radius: 24px 24px 0 0;
  }

  /* The homepage content continues directly from the header. */
  body.page-home > .home-shell {
    width: min(1480px, 96vw);
    margin-inline: auto;
    border-top: 0;
    border-radius: 0 0 24px 24px;
  }

  /* Hero/banner keeps the continuous top edge but gains the
     same premium rounded finish at its lower corners. */
  body.page-home .hero {
    overflow: hidden;
    border-radius: 0 0 24px 24px;
  }

  body.page-home .hero-background,
  body.page-home .hero-overlay {
    border-radius: inherit;
  }
}

/* Tablet keeps the same visual system at a slightly tighter radius. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.page-home > .ob-header {
    border-radius: 22px 22px 0 0;
  }

  body.page-home > .home-shell {
    border-top: 0;
    border-radius: 0 0 22px 22px;
  }

  body.page-home .hero {
    overflow: hidden;
    border-radius: 0 0 22px 22px;
  }

  body.page-home .hero-background,
  body.page-home .hero-overlay {
    border-radius: inherit;
  }
}

/* Mobile remains edge-to-edge, matching the established homepage
   hamburger/navigation behavior and avoiding clipped viewport edges. */
@media (max-width: 760px) {
  body.page-home > .ob-header,
  body.page-home > .home-shell,
  body.page-home .hero,
  body.page-home .hero-background,
  body.page-home .hero-overlay {
    border-radius: 0 !important;
  }
}


/* =========================================================
   HOMEPAGE v14.1 — COMPACT MOMENTS + MEDIA
   ---------------------------------------------------------
   Goal:
   - Reduce homepage vertical footprint
   - Keep all 4 Moments and all 4 Media categories visible
   - Desktop: 4 cards in one row
   - Tablet: 2 × 2
   - Mobile portrait: 1 per row
   - Mobile landscape: 2 per row
========================================================= */

/* ---------- Shared section width / spacing ---------- */
.page-home .moments-editorial .moments-inner,
.page-home .media-editorial .media-home-inner {
  width: min(1120px, calc(100% - 64px));
  margin-inline: auto;
}

.page-home .moments-editorial,
.page-home .media-editorial {
  padding-top: clamp(52px, 5vw, 76px);
  padding-bottom: clamp(52px, 5vw, 76px);
}

.page-home .moments-compact-grid,
.page-home .media-compact-grid {
  margin-top: clamp(24px, 2.6vw, 34px);
}

/* =========================================================
   MOMENTS — 4-CARD EDITORIAL STRIP
========================================================= */
.page-home .moments-compact-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-home .moment-compact-card {
  border-radius: 18px !important;
}

.page-home .moment-compact-media {
  aspect-ratio: 3 / 2 !important;
  min-height: 0 !important;
}

.page-home .moment-compact-copy {
  padding: 15px 16px 17px !important;
}

.page-home .moment-compact-number {
  margin-bottom: 6px !important;
  font-size: .60rem !important;
}

.page-home .moment-compact-copy h3 {
  margin-bottom: 5px !important;
  font-size: clamp(1.22rem, 1.45vw, 1.52rem) !important;
  line-height: 1.04 !important;
}

.page-home .moment-compact-copy p {
  font-size: .74rem !important;
  line-height: 1.48 !important;
}

/* =========================================================
   MEDIA — 4-CARD VERTICAL EDITORIAL STRIP
========================================================= */
.page-home .media-compact-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-home .media-compact-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  border-radius: 18px !important;
}

.page-home .media-compact-visual {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 10 !important;
  flex: 0 0 auto !important;
}

.page-home .media-compact-visual img,
.page-home .media-compact-player iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

.page-home .media-compact-copy {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  padding: 15px 16px 17px !important;
}

.page-home .media-compact-eyebrow {
  margin-bottom: 6px !important;
  font-size: .60rem !important;
}

.page-home .media-compact-copy h3 {
  margin-bottom: 5px !important;
  font-size: clamp(1.22rem, 1.45vw, 1.52rem) !important;
  line-height: 1.04 !important;
}

.page-home .media-compact-copy p {
  font-size: .74rem !important;
  line-height: 1.48 !important;
}

.page-home .media-compact-link {
  margin-top: auto !important;
  padding-top: 12px !important;
  font-size: .60rem !important;
}

.page-home .media-soundtrack-links {
  margin-top: auto !important;
  padding-top: 12px !important;
  gap: 9px !important;
}

.page-home .media-blog-mark {
  left: 13px !important;
  bottom: 11px !important;
  font-size: clamp(1.1rem, 1.25vw, 1.35rem) !important;
}

/* Keep YouTube visually identical to the other media thumbnails. */
.page-home .media-compact-player {
  background: #111 !important;
}

/* =========================================================
   TABLET — 2 × 2
========================================================= */
@media (min-width: 761px) and (max-width: 1100px) {
  .page-home .moments-editorial .moments-inner,
  .page-home .media-editorial .media-home-inner {
    width: min(920px, calc(100% - 44px));
  }

  .page-home .moments-compact-grid,
  .page-home .media-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .page-home .moment-compact-media {
    aspect-ratio: 16 / 10 !important;
  }

  .page-home .media-compact-visual {
    aspect-ratio: 16 / 9 !important;
  }
}

/* =========================================================
   MOBILE PORTRAIT — compact single column
========================================================= */
@media (max-width: 760px) and (orientation: portrait) {
  .page-home .moments-editorial .moments-inner,
  .page-home .media-editorial .media-home-inner {
    width: calc(100% - 32px) !important;
  }

  .page-home .moments-compact-grid,
  .page-home .media-compact-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .page-home .moment-compact-media,
  .page-home .media-compact-visual {
    aspect-ratio: 16 / 9 !important;
  }

  .page-home .moment-compact-copy,
  .page-home .media-compact-copy {
    padding: 14px 15px 16px !important;
  }
}

/* =========================================================
   MOBILE / TABLET LANDSCAPE — 2 across
========================================================= */
@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  .page-home .moments-editorial .moments-inner,
  .page-home .media-editorial .media-home-inner {
    width: calc(100% - 36px) !important;
  }

  .page-home .moments-compact-grid,
  .page-home .media-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .page-home .moment-compact-media,
  .page-home .media-compact-visual {
    aspect-ratio: 16 / 9 !important;
  }

  .page-home .moment-compact-copy,
  .page-home .media-compact-copy {
    padding: 12px 14px 14px !important;
  }
}


/* =========================================================
   HOMEPAGE v14.2 — DESKTOP HERO ALIGNMENT
   ---------------------------------------------------------
   Align the hero with the compact homepage content column.
   Desktop only:
   - same 1120px editorial width as Moments + Media
   - preserve original 16:9 artwork proportion
   - remove the old 100svh desktop height
   - keep tablet/mobile hero behavior unchanged
========================================================= */

@media (min-width: 1101px) {
  .page-home .hero {
    width: min(1120px, calc(100% - 64px)) !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;

    margin-inline: auto !important;

    border-radius: 0 0 20px 20px !important;
    overflow: hidden !important;
  }

  .page-home .hero-background,
  .page-home .hero-overlay {
    border-radius: inherit !important;
  }

  /* Keep the existing composition, but scale the copy with the
     narrower editorial hero instead of the old full-width canvas. */
  .page-home .hero-content {
    width: min(460px, 43%) !important;
    margin-left: clamp(90px, 8vw, 120px) !important;
  }

  .page-home .hero-title {
    font-size: clamp(4.2rem, 6vw, 6.5rem) !important;
  }

  .page-home .hero-description {
    max-width: 390px !important;
  }
}


/* =========================================================
   HOMEPAGE v14.3 — HERO SHELL ALIGNMENT
   ---------------------------------------------------------
   Corrects v14.2:
   The hero should NOT use the narrower Moments/Media preview width.
   On desktop it must span the same horizontal content area as the
   combined "Our Story + What's Next" section below it.
========================================================= */

@media (min-width: 1101px) {
  .page-home .hero {
    /* Match the main homepage content span / story section width */
    width: calc(100% - 64px) !important;
    max-width: none !important;

    /* Keep the hero proportional without making it excessively tall */
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;

    margin-left: 32px !important;
    margin-right: 32px !important;
    margin-inline: 32px !important;

    border-radius: 0 0 20px 20px !important;
    overflow: hidden !important;
  }

  .page-home .hero-background,
  .page-home .hero-overlay {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  /* Restore copy scale appropriate for the wider hero. */
  .page-home .hero-content {
    width: min(500px, 42%) !important;
    margin-left: clamp(84px, 7vw, 120px) !important;
  }

  .page-home .hero-title {
    font-size: clamp(4.6rem, 6.2vw, 7rem) !important;
  }

  .page-home .hero-description {
    max-width: 420px !important;
  }
}


/* =========================================================
   HOMEPAGE 13.10 — INTERVIEWS MEDIA ARCHIVE
========================================================= */

/* Updated category thumbnail */
.page-home .media-interviews-card .media-compact-visual {
  border: 0;
  padding: 0;
  cursor: pointer;
}

.page-home .media-interviews-card .media-compact-visual img {
  object-position: center;
}

.page-home .media-compact-button {
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  cursor: pointer;
}

/* Modal shell */
.interviews-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
}

.interviews-modal.is-open {
  display: block;
}

.interviews-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 18, 22, .68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.interviews-modal__panel {
  position: absolute;
  inset: clamp(18px, 3vw, 42px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(circle at 86% 10%, rgba(221, 190, 168, .14), transparent 32%),
    #fffdf9;
  border: 1px solid rgba(83, 72, 77, .11);
  border-radius: 26px;
  box-shadow: 0 34px 100px rgba(13, 16, 20, .28);
}

.interviews-modal__close {
  position: sticky;
  top: 0;
  z-index: 5;
  float: right;
  width: 42px;
  height: 42px;
  margin: -10px -10px 0 20px;
  border: 1px solid rgba(83,72,77,.12);
  border-radius: 50%;
  background: rgba(255,253,249,.92);
  color: #383234;
  font: 400 1.45rem/1 "DM Sans", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.interviews-modal__header {
  max-width: 760px;
  margin-bottom: 24px;
}

.interviews-modal__eyebrow {
  margin: 0 0 7px;
  color: #c96882;
  font: 700 .62rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .19em;
}

.interviews-modal__header h2 {
  margin: 0;
  color: #2f2b2d;
  font: 500 clamp(2.8rem, 6vw, 5.2rem)/.92 "Cormorant Garamond", serif;
}

.interviews-modal__header > p:last-child {
  margin: 12px 0 0;
  color: #73777d;
  font: 400 .82rem/1.65 "DM Sans", sans-serif;
}

.interviews-tabs {
  display: flex;
  gap: 9px;
  margin: 0 0 28px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.interviews-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid rgba(83,72,77,.13);
  border-radius: 999px;
  background: #fff;
  color: #666166;
  font: 600 .67rem/1 "DM Sans", sans-serif;
  cursor: pointer;
}

.interviews-tab.is-active {
  color: #b65471;
  background: #fff2f5;
  border-color: rgba(201,104,130,.34);
}

.interviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.interview-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 18px;
  border: 1px solid rgba(126,163,187,.17);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(48,70,84,.04);
}

.interview-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.interview-platform,
.interview-card__category {
  font: 700 .55rem/1 "DM Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.interview-platform {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef6fb;
  color: #628da8;
}

.interview-platform--youtube { background: #fff0f2; color: #b85767; }
.interview-platform--tiktok { background: #f1f1f3; color: #4a4c52; }
.interview-platform--x { background: #eef0f2; color: #30343a; }

.interview-card__category {
  color: #9a9598;
}

.interview-card h3 {
  margin: 16px 0 20px;
  color: #353033;
  font: 500 1.15rem/1.18 "Cormorant Garamond", serif;
}

.interview-card__action {
  align-self: flex-start;
  margin-top: auto;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(201,104,130,.32);
  background: transparent;
  color: #c96882;
  font: 700 .61rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.interview-player-view {
  max-width: 1040px;
}

.interview-player-back {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7a7276;
  font: 600 .72rem/1.2 "DM Sans", sans-serif;
  cursor: pointer;
}

.interview-player-shell {
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  border-radius: 20px;
  background: #111;
}

.interview-player-frame {
  display: block;
  width: 100%;
  border: 0;
}

.interview-player-frame--youtube {
  aspect-ratio: 16 / 9;
}

.interview-player-frame--tiktok {
  width: min(440px, 100%);
  min-height: 720px;
  margin: 0 auto;
  background: #111;
}

.interview-player-copy {
  padding-top: 22px;
}

.interview-player-platform {
  color: #6f9ab7;
  font: 700 .6rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.interview-player-copy h3 {
  max-width: 850px;
  margin: 8px 0 8px;
  color: #302c2e;
  font: 500 clamp(1.8rem, 3vw, 2.7rem)/1.05 "Cormorant Garamond", serif;
}

.interview-player-copy p {
  color: #767176;
  font: 400 .78rem/1.6 "DM Sans", sans-serif;
}

.interview-player-original {
  display: inline-flex;
  margin-top: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(201,104,130,.34);
  color: #c96882;
  font: 700 .64rem/1.2 "DM Sans", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

body.interviews-open {
  overflow: hidden;
}

/* Dark mode */
body.dark-theme .interviews-modal__panel {
  background:
    radial-gradient(circle at 86% 10%, rgba(221,190,168,.07), transparent 32%),
    #17191d;
  border-color: rgba(255,255,255,.08);
}

body.dark-theme .interviews-modal__close {
  color: #f3edef;
  background: rgba(34,37,43,.92);
  border-color: rgba(255,255,255,.10);
}

body.dark-theme .interviews-modal__header h2,
body.dark-theme .interview-card h3,
body.dark-theme .interview-player-copy h3 {
  color: #f5eff1;
}

body.dark-theme .interviews-modal__header > p:last-child,
body.dark-theme .interview-player-copy p {
  color: rgba(245,239,241,.65);
}

body.dark-theme .interviews-tab {
  color: rgba(245,239,241,.68);
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.10);
}

body.dark-theme .interviews-tab.is-active {
  color: #f29ab3;
  background: rgba(201,104,130,.12);
  border-color: rgba(201,104,130,.28);
}

body.dark-theme .interview-card {
  background: rgba(255,255,255,.028);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}

body.dark-theme .interview-card__category,
body.dark-theme .interview-player-back {
  color: rgba(245,239,241,.50);
}

/* Tablet */
@media (max-width: 1050px) {
  .interviews-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* Mobile */
@media (max-width: 700px) {
  .interviews-modal__panel {
    inset: 0;
    padding: 20px 16px 28px;
    border: 0;
    border-radius: 0;
  }

  .interviews-modal__close {
    width: 38px;
    height: 38px;
    margin: 0 0 0 14px;
  }

  .interviews-modal__header {
    padding-top: 22px;
  }

  .interviews-modal__header h2 {
    font-size: clamp(2.8rem, 14vw, 4.2rem);
  }

  .interviews-tabs {
    margin-right: -16px;
  }

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

  .interview-card {
    min-height: 0;
  }

  .interview-player-shell {
    min-height: 0;
    border-radius: 14px;
  }

  .interview-player-frame--tiktok {
    min-height: 640px;
  }
}


/* =========================================================
   HOMEPAGE 13.10.1 — INTERVIEWS THUMBNAIL PHOTO CREDIT
========================================================= */

.page-home .media-interviews-trigger {
  position: relative;
}

.page-home .media-photo-credit--interviews {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(18,20,24,.48);
  color: rgba(255,255,255,.92);
  font: 600 .54rem/1 "DM Sans", sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.page-home .media-photo-credit--interviews:hover,
.page-home .media-photo-credit--interviews:focus-visible {
  color: #fff;
  background: rgba(18,20,24,.62);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-home .media-photo-credit--interviews:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .page-home .media-photo-credit--interviews {
    right: 8px;
    bottom: 8px;
    padding: 4px 7px;
    font-size: .5rem;
  }
}


/* =========================================================
   HOMEPAGE 13.10.2 — INTERVIEWS CARD / THUMBNAIL FIX
   ---------------------------------------------------------
   Fixes:
   - no nested link inside button
   - thumbnail fills the same visual frame as Fulfill
   - card height is allowed to grow so CTA is never clipped
   - photo credit remains visible over the image
========================================================= */

.page-home .media-interviews-card {
  min-height: 0;
  max-height: none !important;
}

.page-home .media-interviews-visual {
  position: relative;
  overflow: hidden;
  min-height: 190px;
}

.page-home .media-interviews-image-button {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.page-home .media-interviews-image-button img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center 46%;
  transition: transform .4s ease;
}

.page-home .media-interviews-image-button:hover img,
.page-home .media-interviews-image-button:focus-visible img {
  transform: scale(1.025);
}

.page-home .media-interviews-image-button:focus-visible {
  outline: 3px solid rgba(201,104,130,.48);
  outline-offset: -3px;
}

.page-home .media-interviews-card .media-compact-copy {
  min-height: 0;
}

.page-home .media-interviews-card .media-compact-link {
  margin-top: 15px;
}

/* Keep both cards in each row visually balanced on desktop. */
@media (min-width: 1051px) {
  .page-home .media-compact-grid {
    align-items: stretch;
  }

  .page-home .media-interviews-card {
    height: 100%;
  }
}

/* Tablet: use the same 16:9 image treatment as other media cards. */
@media (max-width: 1050px) {
  .page-home .media-interviews-visual,
  .page-home .media-interviews-image-button,
  .page-home .media-interviews-image-button img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* Mobile: do not let older compact-card max-height rules crop the CTA. */
@media (max-width: 760px) {
  .page-home .media-interviews-card {
    max-height: none !important;
    height: auto !important;
  }

  .page-home .media-interviews-card .media-compact-copy {
    padding-bottom: 22px;
  }
}


/* =========================================================
   HOMEPAGE 14.4 — VLOGS MEDIA ARCHIVE
========================================================= */

/* Vlogs thumbnail */
.page-home .media-vlogs-card {
  min-height: 0;
  max-height: none !important;
}

.page-home .media-vlogs-visual {
  position: relative;
  overflow: hidden;
  min-height: 190px;
}

.page-home .media-vlogs-image-button {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.page-home .media-vlogs-image-button img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.page-home .media-vlogs-image-button:hover img,
.page-home .media-vlogs-image-button:focus-visible img {
  transform: scale(1.025);
}

.page-home .media-photo-credit--vlogs {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(18,20,24,.48);
  color: rgba(255,255,255,.92);
  font: 600 .54rem/1 "DM Sans", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.page-home .media-photo-credit--vlogs:hover,
.page-home .media-photo-credit--vlogs:focus-visible {
  color: #fff;
  background: rgba(18,20,24,.62);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Vlogs modal */
.vlogs-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
}

.vlogs-modal.is-open {
  display: block;
}

.vlogs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,18,22,.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vlogs-modal__panel {
  position: absolute;
  inset: clamp(18px,3vw,42px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px,4vw,56px);
  background:
    radial-gradient(circle at 86% 10%, rgba(169,206,229,.16), transparent 32%),
    #fffdf9;
  border: 1px solid rgba(83,72,77,.11);
  border-radius: 26px;
  box-shadow: 0 34px 100px rgba(13,16,20,.28);
}

.vlogs-modal__close {
  position: sticky;
  top: 0;
  z-index: 5;
  float: right;
  width: 42px;
  height: 42px;
  margin: -10px -10px 0 20px;
  border: 1px solid rgba(83,72,77,.12);
  border-radius: 50%;
  background: rgba(255,253,249,.92);
  color: #383234;
  font: 400 1.45rem/1 "DM Sans", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.vlogs-modal__header {
  max-width: 760px;
  margin-bottom: 28px;
}

.vlogs-modal__eyebrow {
  margin: 0 0 7px;
  color: #6f9ab7;
  font: 700 .62rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .19em;
}

.vlogs-modal__header h2 {
  margin: 0;
  color: #2f2b2d;
  font: 500 clamp(2.8rem,6vw,5.2rem)/.92 "Cormorant Garamond", serif;
}

.vlogs-modal__header > p:last-child {
  margin: 12px 0 0;
  color: #73777d;
  font: 400 .82rem/1.65 "DM Sans", sans-serif;
}

.vlogs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.vlog-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: 18px;
  border: 1px solid rgba(126,163,187,.17);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(48,70,84,.04);
}

.vlog-platform {
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef6fb;
  color: #628da8;
  font: 700 .55rem/1 "DM Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vlog-platform--youtube {
  background: #fff0f2;
  color: #b85767;
}

.vlog-platform--x {
  background: #eef0f2;
  color: #30343a;
}

.vlog-card h3 {
  margin: 16px 0 20px;
  color: #353033;
  font: 500 1.18rem/1.2 "Cormorant Garamond", serif;
}

.vlog-card__action {
  align-self: flex-start;
  margin-top: auto;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(201,104,130,.32);
  background: transparent;
  color: #c96882;
  font: 700 .61rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.vlog-player-view {
  max-width: 1040px;
}

.vlog-player-back {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7a7276;
  font: 600 .72rem/1.2 "DM Sans", sans-serif;
  cursor: pointer;
}

.vlog-player-shell {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #111;
}

.vlog-player-frame {
  display: block;
  width: 100%;
  border: 0;
}

.vlog-player-frame--youtube {
  aspect-ratio: 16 / 9;
}

.vlog-player-copy {
  padding-top: 22px;
}

.vlog-player-platform {
  color: #6f9ab7;
  font: 700 .6rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.vlog-player-copy h3 {
  max-width: 850px;
  margin: 8px 0;
  color: #302c2e;
  font: 500 clamp(1.8rem,3vw,2.7rem)/1.05 "Cormorant Garamond", serif;
}

.vlog-player-copy p {
  color: #767176;
  font: 400 .78rem/1.6 "DM Sans", sans-serif;
}

.vlog-player-original {
  display: inline-flex;
  margin-top: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(201,104,130,.34);
  color: #c96882;
  font: 700 .64rem/1.2 "DM Sans", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

body.vlogs-open {
  overflow: hidden;
}

/* Dark mode */
body.dark-theme .vlogs-modal__panel {
  background:
    radial-gradient(circle at 86% 10%, rgba(169,206,229,.07), transparent 32%),
    #17191d;
  border-color: rgba(255,255,255,.08);
}

body.dark-theme .vlogs-modal__close {
  color: #f3edef;
  background: rgba(34,37,43,.92);
  border-color: rgba(255,255,255,.10);
}

body.dark-theme .vlogs-modal__header h2,
body.dark-theme .vlog-card h3,
body.dark-theme .vlog-player-copy h3 {
  color: #f5eff1;
}

body.dark-theme .vlogs-modal__header > p:last-child,
body.dark-theme .vlog-player-copy p {
  color: rgba(245,239,241,.65);
}

body.dark-theme .vlog-card {
  background: rgba(255,255,255,.028);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}

body.dark-theme .vlog-player-back {
  color: rgba(245,239,241,.50);
}

@media (max-width: 1050px) {
  .page-home .media-vlogs-visual,
  .page-home .media-vlogs-image-button,
  .page-home .media-vlogs-image-button img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

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

@media (max-width: 700px) {
  .page-home .media-vlogs-card {
    max-height: none !important;
    height: auto !important;
  }

  .page-home .media-photo-credit--vlogs {
    right: 8px;
    bottom: 8px;
    padding: 4px 7px;
    font-size: .5rem;
  }

  .vlogs-modal__panel {
    inset: 0;
    padding: 20px 16px 28px;
    border: 0;
    border-radius: 0;
  }

  .vlogs-modal__close {
    width: 38px;
    height: 38px;
    margin: 0 0 0 14px;
  }

  .vlogs-modal__header {
    padding-top: 22px;
  }

  .vlogs-modal__header h2 {
    font-size: clamp(2.8rem,14vw,4.2rem);
  }

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

  .vlog-card {
    min-height: 0;
  }

  .vlog-player-shell {
    border-radius: 14px;
  }
}


/* =========================================================
   HOMEPAGE 14.5 — MEDIA SUBMENU TARGET FEEDBACK
========================================================= */

.page-home .media-compact-card.media-nav-target {
  animation: mediaNavFocus 1.15s ease;
}

@keyframes mediaNavFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(201,104,130,.34);
  }
  45% {
    box-shadow: 0 0 0 8px rgba(201,104,130,.10);
  }
  100% {
    box-shadow: 0 14px 36px rgba(48,70,84,.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .media-compact-card.media-nav-target {
    animation: none;
  }
}


/* =========================================================
   HOMEPAGE 14.6.0 — VLOGS DESKTOP THUMBNAIL FRAME FIX
   ---------------------------------------------------------
   The desktop 4-card Media layout forces .media-compact-visual
   to a 16:10 canvas. The Vlogs button/image previously relied
   on height:100% against an auto-height parent, so changing
   object-position did not reliably move the visible crop.

   Give the Vlogs button + image a definite 16:10 positioning
   box on desktop, then move the portrait focal point upward.
========================================================= */

@media (min-width: 1101px) {
  .page-home .media-vlogs-visual {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }

  .page-home .media-vlogs-image-button {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-home .media-vlogs-image-button img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;

    /* Portrait source: move visible crop upward to keep both faces in frame. */
    object-position: 50% 24% !important;
  }
}


/* =========================================================
   HOMEPAGE 14.6.1 — VLOGS MOBILE THUMBNAIL FACE FIT
   ---------------------------------------------------------
   On mobile, the Vlogs portrait source was still rendering
   in the generic card image flow, so the focal point stayed
   too low and cropped Oom's forehead. Give the mobile card
   its own definite 16:10 frame and bias the crop upward.
========================================================= */

@media (max-width: 760px) {
  .page-home .media-vlogs-visual {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }

  .page-home .media-vlogs-image-button {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-home .media-vlogs-image-button img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 50% 8% !important;
  }
}


/* =========================================================
   HOMEPAGE 15.0 — MONTHLY MOMENTS MODAL SYSTEM
   ---------------------------------------------------------
   - Replaces the older 4-card Moments strip with 5 monthly cards
   - Equal thumbnail image ratio across all cards
   - Modal-based monthly archive with 3–5 OomBam pair events
   - Responsive behavior for desktop, tablet portrait/landscape,
     and mobile portrait/landscape
========================================================= */

.page-home .moments-editorial {
  position: relative;
}

.page-home .moments-month-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(24px, 2.6vw, 34px);
}

.page-home .moment-month-card {
  flex: 0 1 calc((100% - 72px) / 5);
  max-width: calc((100% - 72px) / 5);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 163, 187, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 14px 36px rgba(48, 70, 84, 0.05);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.page-home .moment-month-card:hover {
  transform: translateY(-4px);
  border-color: rgba(126, 163, 187, 0.34);
  box-shadow: 0 18px 40px rgba(48, 70, 84, 0.08);
}

.page-home .moment-month-media {
  position: relative;
  background: #edf3f7;
}

.page-home .moment-month-image-button {
  width: 100%;
  display: block;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.page-home .moment-month-image-button img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 380ms ease;
}

.page-home .moment-month-card:hover .moment-month-image-button img,
.page-home .moment-month-image-button:focus-visible img {
  transform: scale(1.03);
}

.page-home .moments-photo-credit {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  width: calc(100% - 24px);
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(17, 21, 26, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  transition: background 220ms ease, transform 220ms ease;
}

.page-home a.moments-photo-credit:hover {
  background: rgba(17, 21, 26, 0.76);
  transform: translateY(-1px);
}

.page-home .moment-month-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 15px 16px 17px;
}

.page-home .moment-month-label {
  margin: 0 0 8px;
  color: #7399ae;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-home .moment-month-copy h3 {
  margin: 0 0 7px;
  color: #282326;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.22rem, 1.45vw, 1.56rem);
  font-weight: 500;
  line-height: 1.04;
}

.page-home .moment-month-copy p:not(.moment-month-label) {
  margin: 0;
  color: #6e6668;
  font-size: 0.76rem;
  line-height: 1.55;
}

.page-home .moment-month-link {
  margin-top: 14px;
  padding: 0;
  color: #7a9fb7;
  background: transparent;
  border: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 220ms ease, transform 220ms ease;
}

.page-home .moment-month-link:hover,
.page-home .moment-month-link:focus-visible,
.page-home .moment-month-image-button:focus-visible,
.page-home .moments-modal__close:focus-visible,
.page-home .moments-modal__nav:focus-visible {
  outline: none;
}

.page-home .moment-month-link:hover,
.page-home .moment-month-link:focus-visible {
  color: #5d85a0;
  transform: translateX(1px);
}

.page-home .moment-month-image-button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(122, 159, 183, 0.42);
}

/* ---------- Moments modal ---------- */
.moments-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.moments-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.moments-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 21, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.moments-modal__panel {
  position: relative;
  width: min(1040px, 100%);
  max-height: min(90vh, 940px);
  overflow: auto;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fbfd 100%);
  border: 1px solid rgba(126, 163, 187, 0.18);
  border-radius: 28px;
  box-shadow: 0 28px 84px rgba(10, 15, 20, 0.18);
  padding: clamp(24px, 3vw, 34px);
}

body.moments-open {
  overflow: hidden;
}

.moments-modal__close {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #557085;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(126, 163, 187, 0.18);
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(37, 56, 68, 0.08);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.moments-modal__header {
  margin-top: -14px;
}

.moments-modal__eyebrow {
  margin: 0 0 10px;
  color: #7399ae;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.moments-modal__header h2 {
  margin: 0 0 10px;
  color: #282326;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.3rem, 4vw, 3.55rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.moments-modal__intro {
  margin: 0;
  max-width: 70ch;
  color: #6a6467;
  font-size: 0.96rem;
  line-height: 1.75;
}

.moments-modal__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.75fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  margin-top: 24px;
}

.moments-modal__image-wrap {
  overflow: hidden;
  border: 1px solid rgba(126, 163, 187, 0.18);
  border-radius: 24px;
  background: #edf3f7;
  box-shadow: 0 14px 34px rgba(48, 70, 84, 0.08);
}

.moments-modal__image-wrap img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  object-position: center;
}

.moments-modal__aside {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 4px 0;
}

.moments-modal__credit,
.moments-modal__note {
  color: #6e6668;
  font-size: 0.82rem;
  line-height: 1.65;
}

.moments-modal__credit a {
  color: #6d92a8;
  font-weight: 600;
}

.moments-modal__timeline {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.moments-modal__event {
  display: grid;
  grid-template-columns: minmax(110px, 124px) minmax(0, 1fr);
  gap: 16px;
  padding: 18px 18px 18px 16px;
  border: 1px solid rgba(126, 163, 187, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.moments-modal__event.is-lead {
  border-color: rgba(130, 168, 191, 0.28);
  box-shadow: 0 12px 28px rgba(48, 70, 84, 0.05);
}

.moments-modal__event-date {
  align-self: start;
  color: #7399ae;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.moments-modal__event-copy h3 {
  margin: 0 0 6px;
  color: #2b2527;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.moments-modal__event-copy p {
  margin: 0;
  color: #6a6467;
  font-size: 0.90rem;
  line-height: 1.68;
}

.moments-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}

.moments-modal__nav {
  min-height: 42px;
  padding: 0 16px;
  color: #5c7f96;
  background: rgba(168, 201, 220, 0.14);
  border: 1px solid rgba(126, 163, 187, 0.22);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}

.moments-modal__nav:hover {
  background: rgba(168, 201, 220, 0.22);
  transform: translateY(-1px);
}

.moments-modal__nav[disabled] {
  opacity: 0.48;
  cursor: default;
  transform: none;
}

/* ---------- Dark theme ---------- */
body.dark-theme.page-home .moment-month-card {
  background: linear-gradient(160deg, rgba(33, 37, 44, 0.96), rgba(24, 27, 33, 0.96));
  border-color: rgba(169, 206, 229, 0.16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

body.dark-theme.page-home .moment-month-copy h3,
body.dark-theme .moments-modal__header h2,
body.dark-theme .moments-modal__event-copy h3 {
  color: rgba(255, 255, 255, 0.92);
}

body.dark-theme.page-home .moment-month-copy p:not(.moment-month-label),
body.dark-theme.page-home .moments-description,
body.dark-theme .moments-modal__intro,
body.dark-theme .moments-modal__credit,
body.dark-theme .moments-modal__note,
body.dark-theme .moments-modal__event-copy p {
  color: rgba(255, 255, 255, 0.72);
}

body.dark-theme .moments-modal__panel {
  background: linear-gradient(180deg, rgba(23, 26, 32, 0.98) 0%, rgba(18, 21, 26, 0.98) 100%);
  border-color: rgba(169, 206, 229, 0.14);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

body.dark-theme .moments-modal__close {
  color: #a7cadf;
  background: rgba(28, 32, 39, 0.92);
  border-color: rgba(169, 206, 229, 0.14);
}

body.dark-theme .moments-modal__event {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(169, 206, 229, 0.10);
}

body.dark-theme .moments-modal__event.is-lead {
  border-color: rgba(169, 206, 229, 0.20);
}

body.dark-theme .moments-modal__nav {
  color: #a7cadf;
  background: rgba(169, 206, 229, 0.08);
  border-color: rgba(169, 206, 229, 0.18);
}

body.dark-theme .moments-modal__credit a,
body.dark-theme.page-home .moment-month-link {
  color: #a7cadf;
}

/* ---------- Responsive alignment ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  .page-home .moment-month-card {
    flex-basis: calc((100% - 36px) / 3);
    max-width: calc((100% - 36px) / 3);
  }

  .moments-modal__panel {
    width: min(920px, 100%);
  }
}

@media (min-width: 761px) and (max-width: 860px) {
  .page-home .moment-month-card {
    flex-basis: calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
  }

  .moments-modal__hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .page-home .moment-month-card {
    flex-basis: 100%;
    max-width: 100%;
  }

  .page-home .moment-month-copy {
    padding: 14px 15px 16px;
  }

  .moments-modal {
    padding: 12px;
  }

  .moments-modal__panel {
    border-radius: 22px;
    padding: 18px 16px 20px;
  }

  .moments-modal__hero {
    grid-template-columns: 1fr;
  }

  .moments-modal__event {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .moments-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 1100px) and (max-height: 700px) and (orientation: landscape) {
  .page-home .moment-month-card {
    flex-basis: calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
  }

  .moments-modal {
    padding: 14px;
  }

  .moments-modal__panel {
    max-height: 88vh;
    padding: 20px 18px 22px;
  }

  .moments-modal__hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}


/* =========================================================
   HOMEPAGE 15.1 — APPROVED MOMENTS EDITORIAL VISUAL
========================================================= */
.page-home .moments-inner--editorial {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
}

.page-home .moments-editorial-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
}

.page-home .moments-editorial-head .moments-heading {
  margin-bottom: 6px;
  font-size: clamp(3rem, 4vw, 4.8rem);
  line-height: .95;
}

.page-home .moments-side-note {
  margin: 0 0 8px;
  color: rgba(82, 67, 74, .72);
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.55rem, 2.2vw, 2.3rem);
  line-height: 1.05;
  text-align: right;
  transform: rotate(-3deg);
}

.page-home .moments-magazine-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}

.page-home .moments-mag-card {
  position: relative;
  min-width: 0;
}

.page-home .moments-mag-trigger {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  padding: 0;
  background: #e8eef2;
  border: 1px solid rgba(126, 163, 187, .16);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(48, 70, 84, .05);
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.page-home .moments-mag-trigger img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms ease;
}

.page-home .moments-mag-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 14, 18, .74) 0%, rgba(12, 14, 18, .32) 38%, rgba(12, 14, 18, .02) 72%);
}

.page-home .moments-mag-card:hover .moments-mag-trigger,
.page-home .moments-mag-trigger:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(239, 180, 193, .58);
  box-shadow: 0 18px 40px rgba(48, 70, 84, .10);
  outline: none;
}

.page-home .moments-mag-card:hover .moments-mag-trigger img,
.page-home .moments-mag-trigger:focus-visible img {
  transform: scale(1.035);
}

.page-home .moments-mag-card.is-featured .moments-mag-trigger {
  border: 2px solid rgba(239, 180, 193, .92);
  box-shadow: 0 0 0 4px rgba(248, 216, 223, .36), 0 16px 38px rgba(201, 130, 149, .12);
}

.page-home .moments-mag-copy {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  color: #fff;
  text-align: left;
}

.page-home .moments-mag-month,
.page-home .moments-mag-year,
.page-home .moments-mag-title {
  grid-column: 1;
}

.page-home .moments-mag-month {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 2.8vw, 3rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: -.03em;
}

.page-home .moments-mag-year {
  margin-top: 7px;
  color: rgba(255,255,255,.78);
  font-size: .66rem;
  letter-spacing: .08em;
}

.page-home .moments-mag-title {
  margin-top: 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.04rem, 1.35vw, 1.34rem);
  font-weight: 600;
  line-height: 1.02;
}

.page-home .moments-mag-arrow {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  font-size: 1rem;
}

.page-home .moments-mag-credit {
  display: block;
  margin-top: 7px;
  color: rgba(73, 76, 81, .68);
  font-size: .58rem;
  text-align: center;
}
.page-home a.moments-mag-credit:hover { color: #6f96ad; }

.page-home .moments-editorial-signoff {
  display: grid;
  grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr);
  align-items: center;
  gap: 14px;
  width: min(470px, 72%);
  margin: 28px auto 0;
  color: rgba(80, 76, 79, .64);
}
.page-home .moments-editorial-signoff span { height: 1px; background: currentColor; opacity: .48; }
.page-home .moments-editorial-signoff small { font-size: .58rem; letter-spacing: .30em; white-space: nowrap; }

/* editorial modal */
.moments-modal__panel--editorial {
  width: min(1120px, calc(100vw - 40px));
  max-height: min(92vh, 920px);
  padding: 0;
  overflow: auto;
  border-radius: 14px;
  background: #fffafc;
}

.moments-modal__panel--editorial .moments-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  z-index: 8;
}

.moments-modal__masthead {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(380px, 1.15fr);
  min-height: 250px;
  background: linear-gradient(135deg, #fff8fb 0%, #f8edf2 100%);
}

.moments-modal__masthead-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 46px);
}

.moments-modal__masthead-copy .moments-modal__eyebrow {
  margin-bottom: 4px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.03em;
}

.moments-modal__masthead-copy h2 {
  margin: 4px 0 12px;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.2rem, 3.8vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
}

.moments-modal__masthead-copy .moments-modal__intro {
  max-width: 46ch;
  font-size: .88rem;
  line-height: 1.62;
}

.moments-modal__masthead-image {
  position: relative;
  min-height: 250px;
  overflow: hidden;
}
.moments-modal__masthead-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(255,248,251,.38), transparent 28%);
}
.moments-modal__masthead-image img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  object-position: center;
}
.moments-modal__script-note {
  position: absolute;
  top: 34px;
  right: 52px;
  z-index: 2;
  max-width: 180px;
  color: rgba(91, 70, 80, .76);
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  line-height: 1;
  text-align: right;
  transform: rotate(-5deg);
}

.moments-modal__events-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 22px 0;
}
.moments-modal__events-heading span { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; font-weight: 600; }
.moments-modal__events-heading small { color: #7c8790; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }

.moments-modal__event-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px 4px;
  margin-top: 0;
}

.moments-modal__event {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.moments-modal__event-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1e8ec;
}
.moments-modal__event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.moments-modal__event-date-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  padding: 5px;
  color: #2b2527;
  background: rgba(255, 245, 248, .94);
  border: 1px solid rgba(239,180,193,.45);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: .9;
  text-align: center;
}
.moments-modal__event-date-badge small { display:block; margin-top:3px; font-family:"DM Sans",sans-serif; font-size:.48rem; letter-spacing:.08em; }
.moments-modal__event-copy { padding: 11px 11px 13px; }
.moments-modal__event-copy h3 { font-size: .82rem; line-height: 1.28; }
.moments-modal__event-copy p { margin-top: 5px; font-size: .69rem; line-height: 1.45; }

.moments-modal__footer--editorial {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 22px;
}
.moments-modal__closing {
  margin: 0;
  color: #726a6c;
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-style: italic;
  text-align: center;
}

body.dark-theme.page-home .moments-side-note,
body.dark-theme.page-home .moments-editorial-signoff,
body.dark-theme.page-home .moments-mag-credit { color: rgba(255,255,255,.58); }
body.dark-theme .moments-modal__panel--editorial { background: #1b1d22; }
body.dark-theme .moments-modal__masthead { background: linear-gradient(135deg, #23262d 0%, #2f252b 100%); }
body.dark-theme .moments-modal__masthead-image::after { background: linear-gradient(90deg, rgba(35,38,45,.28), transparent 28%); }
body.dark-theme .moments-modal__event { background: #24272d; }
body.dark-theme .moments-modal__event-date-badge { color:#f6f2f4; background:rgba(43,35,40,.94); }
body.dark-theme .moments-modal__events-heading small,
body.dark-theme .moments-modal__closing { color: rgba(255,255,255,.64); }

@media (min-width: 861px) and (max-width: 1100px) {
  .page-home .moments-magazine-strip { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
  .page-home .moments-mag-card:nth-child(4), .page-home .moments-mag-card:nth-child(5) { width: 100%; }
  .moments-modal__event-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 761px) and (max-width: 860px) {
  .page-home .moments-magazine-strip { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .page-home .moments-mag-card:last-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
  .moments-modal__masthead { grid-template-columns: 1fr; }
  .moments-modal__masthead-image { min-height: 220px; }
  .moments-modal__event-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) and (orientation: portrait) {
  .page-home .moments-inner--editorial { width: calc(100% - 32px); }
  .page-home .moments-editorial-head { grid-template-columns: 1fr; }
  .page-home .moments-side-note { display: none; }
  .page-home .moments-magazine-strip {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .page-home .moments-mag-trigger {
    aspect-ratio: 16 / 10;
  }
  .page-home .moments-mag-copy { right: 16px; bottom: 14px; left: 16px; }
  .page-home .moments-mag-month { font-size: 2.35rem; }
  .page-home .moments-editorial-signoff { width: 100%; }
  .page-home .moments-editorial-signoff small { font-size: .5rem; letter-spacing: .18em; }
  .moments-modal__panel--editorial { width: calc(100vw - 20px); border-radius: 12px; }
  .moments-modal__masthead { grid-template-columns: 1fr; }
  .moments-modal__masthead-copy { padding: 24px 18px 18px; }
  .moments-modal__masthead-image { min-height: 210px; }
  .moments-modal__masthead-image img { min-height: 210px; }
  .moments-modal__script-note { top: 20px; right: 24px; max-width: 140px; }
  .moments-modal__event-grid { grid-template-columns: 1fr; padding-inline: 14px; }
  .moments-modal__event { display: grid; grid-template-columns: 118px minmax(0,1fr); }
  .moments-modal__event-thumb { aspect-ratio: 1 / 1; height: 100%; }
  .moments-modal__footer--editorial { grid-template-columns: 1fr 1fr; }
  .moments-modal__closing { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 1100px) and (max-height: 700px) and (orientation: landscape) {
  .page-home .moments-magazine-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-home .moments-mag-trigger { aspect-ratio: 16 / 10; }
  .page-home .moments-mag-card:last-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
  .moments-modal__masthead { grid-template-columns: minmax(0,.9fr) minmax(320px,1.1fr); }
  .moments-modal__event-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* =========================================================
   HOMEPAGE 15.2 — MOMENTS VISUAL CONSISTENCY + MODAL SCALE
   ---------------------------------------------------------
   1) Moments uses the exact Media section surface in both themes.
   2) Editorial modal is constrained to one predictable desktop size.
   3) Masthead image height is fixed per breakpoint so different
      source-photo proportions can never resize the modal.
========================================================= */

/* Match the Media section surface exactly. */
.page-home .moments-section.moments-editorial {
  background: linear-gradient(135deg, #f8fbfd 0%, #f4f9fc 100%) !important;
  border-color: rgba(103, 140, 164, .10) !important;
}

body.dark-theme.page-home .moments-section.moments-editorial {
  background: #111214 !important;
  border-color: rgba(255, 255, 255, .07) !important;
}

/* Keep month-card/photo geometry independent of source dimensions. */
.page-home .moments-mag-trigger {
  aspect-ratio: 3 / 5;
}
.page-home .moments-mag-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop modal: smaller, calmer editorial canvas. */
.moments-modal__panel--editorial {
  width: min(960px, calc(100vw - 56px));
  max-height: min(86vh, 780px);
  overflow-x: hidden;
  overflow-y: auto;
}

.moments-modal__masthead {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  height: 360px;
  min-height: 0;
}

.moments-modal__masthead-copy {
  min-width: 0;
  padding: clamp(26px, 3.2vw, 38px);
}

.moments-modal__masthead-copy .moments-modal__eyebrow {
  font-size: clamp(1.9rem, 3vw, 2.75rem);
}

.moments-modal__masthead-copy h2 {
  font-size: clamp(2rem, 3.2vw, 3.15rem);
}

.moments-modal__masthead-copy .moments-modal__intro {
  font-size: .82rem;
  line-height: 1.58;
}

.moments-modal__masthead-image {
  height: 360px;
  min-height: 0;
}

.moments-modal__masthead-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.moments-modal__script-note {
  top: 22px;
  right: 34px;
  max-width: 150px;
  font-size: clamp(1.25rem, 1.8vw, 1.9rem);
}

.moments-modal__events-heading {
  padding: 15px 20px 0;
}

.moments-modal__events-heading span {
  font-size: 1.42rem;
}

.moments-modal__event-grid {
  gap: 9px;
  padding: 11px 16px 4px;
}

.moments-modal__event-copy {
  padding: 9px 9px 11px;
}

.moments-modal__event-copy h3 {
  font-size: .76rem;
}

.moments-modal__event-copy p {
  font-size: .64rem;
  line-height: 1.42;
}

.moments-modal__footer--editorial {
  padding: 14px 18px 18px;
}

/* Tablet landscape / wider tablet. */
@media (min-width: 861px) and (max-width: 1100px) {
  .moments-modal__panel--editorial {
    width: min(900px, calc(100vw - 36px));
    max-height: 88vh;
  }
  .moments-modal__masthead,
  .moments-modal__masthead-image {
    height: 330px;
  }
}

/* Tablet portrait. */
@media (min-width: 761px) and (max-width: 860px) {
  .moments-modal__panel--editorial {
    width: min(720px, calc(100vw - 30px));
    max-height: 88vh;
  }
  .moments-modal__masthead {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    height: 300px;
  }
  .moments-modal__masthead-image {
    height: 300px;
    min-height: 0;
  }
  .moments-modal__masthead-image img {
    min-height: 0;
  }
  .moments-modal__masthead-copy {
    padding: 22px;
  }
  .moments-modal__event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile portrait: stack copy and image, but cap the image strongly. */
@media (max-width: 760px) and (orientation: portrait) {
  .moments-modal__panel--editorial {
    width: calc(100vw - 18px);
    max-height: 90vh;
  }
  .moments-modal__masthead {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .moments-modal__masthead-copy {
    padding: 22px 18px 16px;
  }
  .moments-modal__masthead-image {
    height: 210px;
    min-height: 210px;
  }
  .moments-modal__masthead-image img {
    height: 210px;
    min-height: 210px;
  }
  .moments-modal__event-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile / tablet landscape: preserve side-by-side masthead and reduce height. */
@media (max-width: 1100px) and (max-height: 700px) and (orientation: landscape) {
  .moments-modal__panel--editorial {
    width: min(920px, calc(100vw - 26px));
    max-height: 88vh;
  }
  .moments-modal__masthead {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    height: 260px;
  }
  .moments-modal__masthead-image {
    height: 260px;
    min-height: 0;
  }
  .moments-modal__masthead-image img {
    height: 260px;
    min-height: 0;
  }
  .moments-modal__masthead-copy {
    padding: 20px 22px;
  }
  .moments-modal__event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* HOMEPAGE 15.3 — KEY MOMENT EVENT MEDIA */
.moments-modal__event-thumb {
  aspect-ratio: 4 / 3;
}

.moments-modal__event-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.moments-modal__event-credit {
  display: inline-block;
  margin-top: 7px;
  color: #617f92;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.moments-modal__event-credit:hover,
.moments-modal__event-credit:focus-visible {
  text-decoration: underline;
}

body.dark-theme .moments-modal__event-credit {
  color: #8fc5e6;
}

@media (max-width: 860px) {
  .moments-modal__event-thumb {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* =================================================
   HOMEPAGE 15.4 — GIRLS CUP EVENT PHOTO STORY
================================================== */
.moments-modal__event.is-clickable {
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.moments-modal__event.is-clickable:hover,
.moments-modal__event.is-clickable:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(132, 192, 226, .7);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  outline: none;
}

.moments-modal__event-open-cue {
  display: inline-block;
  margin-top: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #7fc6ed;
}

.moments-modal__back-event {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 1rem;
  padding: .45rem .75rem;
  border: 1px solid rgba(126, 183, 216, .28);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}

.moments-modal__back-event:hover,
.moments-modal__back-event:focus-visible {
  border-color: rgba(126, 183, 216, .7);
  outline: none;
}

.moments-event-gallery {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  background: rgba(13, 16, 22, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.moments-event-gallery[hidden] { display: none !important; }

.moments-event-gallery__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.moments-event-gallery__tabs button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.82);
  padding: .32rem .65rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
}

.moments-event-gallery__tabs button.is-active,
.moments-event-gallery__tabs button:hover,
.moments-event-gallery__tabs button:focus-visible {
  background: rgba(255,255,255,.92);
  color: #171a20;
  outline: none;
}

.moments-event-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.moments-event-gallery__thumb {
  appearance: none;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #111;
  cursor: pointer;
}

.moments-event-gallery__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.moments-event-gallery__thumb.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(126, 198, 237, .72);
}

.moments-modal__masthead-image:has(.moments-event-gallery:not([hidden])) img {
  padding-bottom: 112px;
  box-sizing: border-box;
  object-fit: cover;
}

body.dark-theme .moments-modal__back-event {
  border-color: rgba(255,255,255,.16);
}

@media (max-width: 1024px) {
  .moments-event-gallery {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .moments-event-gallery__thumbs {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .moments-modal__masthead-image:has(.moments-event-gallery:not([hidden])) img {
    padding-bottom: 106px;
  }
}

@media (max-width: 680px) {
  .moments-event-gallery {
    position: relative;
    inset: auto;
    margin: 10px 12px 12px;
    background: rgba(20, 22, 28, .96);
  }

  .moments-modal__masthead-image:has(.moments-event-gallery:not([hidden])) img {
    padding-bottom: 0;
  }

  .moments-event-gallery__thumbs {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .moments-event-gallery__thumbs {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
  }
}


/* =================================================
   HOMEPAGE 15.5 — MOMENTS EVENT GALLERY POLISH
   Uniform hero canvas, arrow-only gallery, compact Key Moments.
================================================== */

/* Key Moments are now visual entry points: image + date + title only. */
.moments-modal__event-copy {
  padding: 10px 10px 12px;
}
.moments-modal__event-copy h3 {
  margin: 0;
  font-size: .78rem;
  line-height: 1.25;
}
.moments-modal__event-copy p,
.moments-modal__event-open-cue,
.moments-modal__event-credit {
  display: none !important;
}

/* Event-detail mode gives the gallery a larger, fixed and predictable canvas. */
.moments-modal__panel--editorial.is-event-detail {
  width: min(1040px, calc(100vw - 48px));
  max-height: min(90vh, 820px);
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead {
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  height: 440px;
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy,
.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
  height: 440px;
  min-height: 440px;
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy {
  overflow-y: auto;
  scrollbar-width: thin;
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
  position: relative;
  background: #0d0f13;
  overflow: hidden;
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  object-fit: contain;
  object-position: center center;
  background: #0d0f13;
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__script-note {
  display: none;
}

/* Arrow-only photo browser: no tabs, no black thumbnail tiles. */
.moments-event-gallery {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.moments-event-gallery[hidden] { display: none !important; }

.moments-event-gallery__arrow {
  appearance: none;
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(10,12,16,.58);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.moments-event-gallery__arrow--prev { left: 16px; }
.moments-event-gallery__arrow--next { right: 16px; }
.moments-event-gallery__arrow:hover,
.moments-event-gallery__arrow:focus-visible {
  background: rgba(10,12,16,.82);
  border-color: rgba(255,255,255,.8);
  outline: none;
}

.moments-event-gallery__meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(8,10,14,.66);
  color: rgba(255,255,255,.9);
  font-size: .66rem;
  letter-spacing: .04em;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.moments-event-gallery__meta a {
  color: #9ed7f5;
  font-weight: 700;
  text-decoration: none;
}
.moments-event-gallery__meta a:hover,
.moments-event-gallery__meta a:focus-visible { text-decoration: underline; }

/* Tablet */
@media (min-width: 761px) and (max-width: 1024px) {
  .moments-modal__panel--editorial.is-event-detail {
    width: min(900px, calc(100vw - 30px));
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead {
    grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
    height: 380px;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy,
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
    height: 380px;
    min-height: 380px;
  }
}

/* Mobile portrait */
@media (max-width: 760px) and (orientation: portrait) {
  .moments-modal__panel--editorial.is-event-detail {
    width: calc(100vw - 16px);
    max-height: 92vh;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
    height: 300px;
    min-height: 300px;
  }
  .moments-event-gallery__arrow {
    width: 40px;
    height: 40px;
    font-size: 1.7rem;
  }
  .moments-event-gallery__arrow--prev { left: 10px; }
  .moments-event-gallery__arrow--next { right: 10px; }
  .moments-event-gallery__meta {
    left: 10px;
    right: 10px;
    bottom: 9px;
    font-size: .6rem;
  }
}

/* Mobile / tablet landscape */
@media (max-width: 1100px) and (max-height: 700px) and (orientation: landscape) {
  .moments-modal__panel--editorial.is-event-detail {
    width: min(980px, calc(100vw - 22px));
    max-height: 92vh;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead {
    grid-template-columns: minmax(270px, .76fr) minmax(0, 1.24fr);
    height: 330px;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy,
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
    height: 330px;
    min-height: 330px;
  }
}

/* =========================================================
   HOMEPAGE 15.6 — MOMENTS TYPOGRAPHY + CLEAN GALLERY
========================================================= */
/* Use a restrained editorial serif for modal titles: elegant, readable,
   and consistent with the rest of the site. */
.moments-modal__masthead-copy h2,
.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: normal;
  line-height: .98;
  letter-spacing: -.025em;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
}

/* Remove decorative text overlay from modal/gallery photography so the
   image itself remains clean and photo credits carry the attribution. */
.moments-modal__script-note {
  display: none !important;
}

@media (max-width: 820px) {
  .moments-modal__masthead-copy h2,
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy h2 {
    font-size: clamp(1.85rem, 6.2vw, 2.65rem);
    line-height: 1;
  }
}

@media (max-width: 560px) {
  .moments-modal__masthead-copy h2,
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy h2 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
    letter-spacing: -.015em;
  }
}


/* =========================================================

/* =========================================================
   MOMENTS 15.19 — MONTH + EVENT MODAL REBUILD
   Scope: August month modal + event-detail gallery.
   Mobile homepage card sizing retained from approved behavior.
========================================================= */

/* ---------- Shared modal shell ---------- */
.moments-modal {
  z-index: 9999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}
.moments-modal.is-open { display: flex !important; }
.moments-modal__panel--editorial {
  overflow: hidden !important;
  border-radius: 20px !important;
}

/* =========================================================
   MONTH VIEW — compact editorial composition
========================================================= */
.moments-modal__panel--editorial:not(.is-event-detail) {
  width: min(980px, calc(100vw - 44px)) !important;
  max-height: min(640px, calc(100svh - 44px)) !important;
  overflow-y: auto !important;
}

.moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead {
  display: grid !important;
  grid-template-columns: minmax(350px, 42%) minmax(300px, 58%) !important;
  height: 330px !important;
  min-height: 0 !important;
}

.moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-copy {
  padding: 28px 32px 24px !important;
  overflow: hidden !important;
}

.moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__eyebrow {
  margin: 0 0 10px !important;
  color: #7399ae !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-copy h2 {
  margin: 0 0 15px !important;
  max-width: 12ch !important;
  color: inherit !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: clamp(2rem, 2.4vw, 2.45rem) !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -.022em !important;
}

.moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__intro {
  max-width: 46ch !important;
  margin: 0 !important;
  font-size: .82rem !important;
  line-height: 1.58 !important;
  text-align: left !important;
}

/* Old narrative-panel credit is intentionally suppressed. */
.moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__credit {
  display: none !important;
}

/* Month photo is preserved, not cropped. The visual panel is sized to a
   portrait-friendly editorial frame instead of stretching into a banner. */
.moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 330px !important;
  min-height: 0 !important;
  padding: 12px 24px !important;
  overflow: hidden !important;
  background: #111419 !important;
}
.moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__gallery-stage {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  overflow: visible !important;
}
.moments-modal__panel--editorial:not(.is-event-detail) .moments-gallery-photo-frame {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 306px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.moments-modal__panel--editorial:not(.is-event-detail) .moments-gallery-photo-frame > img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 306px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Credit belongs to the image itself. */
.moments-month-photo-credit {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 7 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(9, 12, 16, .58) !important;
  color: rgba(255,255,255,.94) !important;
  font-size: .60rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.moments-month-photo-credit[hidden] { display: none !important; }
.moments-month-photo-credit:hover,
.moments-month-photo-credit:focus-visible { background: rgba(9, 12, 16, .78) !important; }

/* Key Moments — clean editorial list; no dates or divider lines. */
.moments-modal__events-heading {
  padding: 17px 30px 5px !important;
}
.moments-modal__events-heading > span {
  font-size: 1.22rem !important;
}
.moments-modal__event-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  width: min(520px, calc(100% - 60px)) !important;
  margin: 0 30px 12px !important;
  padding: 0 !important;
}
.moments-modal__moment-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-align: left !important;
  font: inherit !important;
  font-size: .80rem !important;
  line-height: 1.35 !important;
}
button.moments-modal__moment-link.is-clickable::after {
  content: "→" !important;
  margin-left: 9px !important;
  color: #7297ad !important;
  transition: transform 180ms ease !important;
}
button.moments-modal__moment-link.is-clickable:hover::after,
button.moments-modal__moment-link.is-clickable:focus-visible::after {
  transform: translateX(3px) !important;
}
.moments-modal__footer--editorial {
  min-height: 54px !important;
  padding: 9px 24px 13px !important;
}

/* =========================================================
   EVENT DETAIL — gallery sizes to the photograph
========================================================= */
.moments-modal__panel--editorial.is-event-detail {
  width: fit-content !important;
  max-width: calc(100vw - 44px) !important;
  max-height: calc(100svh - 44px) !important;
  overflow: hidden !important;
}

.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead {
  display: grid !important;
  grid-template-columns: 330px auto !important;
  width: fit-content !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100svh - 44px) !important;
}

.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy {
  position: relative !important;
  width: 330px !important;
  min-width: 330px !important;
  height: auto !important;
  min-height: 500px !important;
  overflow-y: auto !important;
  padding: 74px 30px 28px !important;
}

.moments-modal__back-event {
  position: absolute !important;
  top: 20px !important;
  left: 30px !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  white-space: nowrap !important;
}
.moments-modal__back-event[hidden] { display: none !important; }

.moments-modal__panel--editorial.is-event-detail .moments-modal__eyebrow,
.moments-modal__panel--editorial.is-event-detail .moments-modal__credit,
.moments-modal__panel--editorial.is-event-detail .moments-modal__script-note,
.moments-modal__panel--editorial.is-event-detail .moments-month-photo-credit {
  display: none !important;
}

.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy h2 {
  margin: 0 0 18px !important;
  max-width: 11.5ch !important;
  white-space: normal !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.86rem !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.018em !important;
}

.moments-modal__panel--editorial.is-event-detail .moments-modal__intro {
  max-width: 40ch !important;
  margin: 0 !important;
  text-align: left !important;
  text-wrap: pretty;
  font-size: .87rem !important;
  line-height: 1.64 !important;
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__intro p {
  margin: 0 !important;
  text-align: left !important;
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__intro p + p {
  margin-top: .92rem !important;
}

/* No giant right-side canvas: this module shrink-wraps the active photo. */
.moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 500px !important;
  padding: 28px 60px 22px !important;
  overflow: visible !important;
  background: #0f1216 !important;
}
.moments-modal__panel--editorial.is-event-detail .moments-modal__gallery-stage {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
}
.moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  height: auto !important;
  max-width: min(600px, 54vw) !important;
  max-height: min(500px, calc(100svh - 90px)) !important;
  margin: 0 !important;
  overflow: visible !important;
  touch-action: pan-y !important;
  background: transparent !important;
}
.moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame > img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(600px, 54vw) !important;
  max-height: min(455px, calc(100svh - 135px)) !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* Arrows belong to the photo, not to the outer modal. */
.moments-event-gallery {
  position: absolute !important;
  inset: 0 0 28px !important;
  z-index: 4 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
.moments-event-gallery[hidden] { display: none !important; }
.moments-event-gallery__arrow {
  appearance: none !important;
  position: absolute !important;
  top: 50% !important;
  z-index: 5 !important;
  width: 38px !important;
  height: 38px !important;
  transform: translateY(-50%) !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  border-radius: 50% !important;
  background: rgba(10,12,16,.62) !important;
  color: #fff !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.moments-event-gallery__arrow--prev { left: -46px !important; }
.moments-event-gallery__arrow--next { right: -46px !important; }
.moments-event-gallery__arrow:hover,
.moments-event-gallery__arrow:focus-visible {
  background: rgba(10,12,16,.88) !important;
  outline: none !important;
}

/* Metadata line is only as wide as the photo. */
.moments-event-gallery__meta {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 6px 1px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.62) !important;
  font-size: .61rem !important;
  letter-spacing: .02em !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.moments-event-gallery__meta[hidden] { display: none !important; }
.moments-event-gallery__meta a {
  color: #9ccbe4 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.moments-event-gallery__meta a:hover,
.moments-event-gallery__meta a:focus-visible { text-decoration: underline !important; }

.moments-modal__panel--editorial.is-event-detail .moments-modal__events-heading,
.moments-modal__panel--editorial.is-event-detail .moments-modal__event-grid,
.moments-modal__panel--editorial.is-event-detail .moments-modal__footer--editorial {
  display: none !important;
}

/* =========================================================
   TABLET
========================================================= */
@media (min-width: 761px) and (max-width: 1100px) {
  .moments-modal { padding: 12px !important; }
  .moments-modal__panel--editorial:not(.is-event-detail) {
    width: min(880px, calc(100vw - 24px)) !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead {
    grid-template-columns: minmax(300px, 44%) minmax(260px, 56%) !important;
    height: 300px !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-image {
    height: 300px !important;
    padding: 10px 18px !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-gallery-photo-frame,
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-gallery-photo-frame > img {
    max-height: 280px !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-copy {
    padding: 24px 26px 20px !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-copy h2 {
    font-size: 2.05rem !important;
  }

  .moments-modal__panel--editorial.is-event-detail {
    max-width: calc(100vw - 24px) !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead {
    grid-template-columns: 300px auto !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy {
    width: 300px !important;
    min-width: 300px !important;
    min-height: 470px !important;
    padding: 68px 24px 24px !important;
  }
  .moments-modal__back-event { top: 16px !important; left: 24px !important; }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
    min-height: 470px !important;
    padding: 24px 50px 20px !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame,
  .moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame > img {
    max-width: min(520px, 50vw) !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame > img {
    max-height: min(420px, calc(100svh - 130px)) !important;
  }
  .moments-event-gallery__arrow--prev { left: -40px !important; }
  .moments-event-gallery__arrow--next { right: -40px !important; }
}

/* =========================================================
   MOBILE — retain compact gallery-first behavior
========================================================= */
@media (max-width: 760px) {
  .moments-modal {
    padding: 8px !important;
    align-items: center !important;
  }
  .moments-modal__panel--editorial {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 16px) !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }

  .moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-image {
    order: 1 !important;
    height: 230px !important;
    padding: 8px 12px !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-gallery-photo-frame,
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-gallery-photo-frame > img {
    max-height: 214px !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-copy {
    order: 2 !important;
    padding: 18px 18px 15px !important;
  }
  .moments-modal__panel--editorial:not(.is-event-detail) .moments-modal__masthead-copy h2 {
    max-width: none !important;
    font-size: 1.85rem !important;
  }
  .moments-modal__event-grid {
    width: calc(100% - 36px) !important;
    margin-inline: 18px !important;
  }
  .moments-modal__events-heading { padding-inline: 18px !important; }

  .moments-modal__panel--editorial.is-event-detail {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 16px) !important;
    overflow-y: auto !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
    order: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 42px 14px !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame,
  .moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame > img {
    max-width: calc(100vw - 100px) !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame > img {
    max-height: min(44svh, 360px) !important;
  }
  .moments-event-gallery__arrow--prev { left: -34px !important; }
  .moments-event-gallery__arrow--next { right: -34px !important; }
  .moments-event-gallery__arrow { width: 32px !important; height: 32px !important; font-size: 1.3rem !important; }

  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy {
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 56px 18px 18px !important;
  }
  .moments-modal__back-event { top: 12px !important; left: 18px !important; }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy h2 {
    max-width: 12ch !important;
    font-size: 1.6rem !important;
    margin-bottom: 12px !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__intro {
    max-width: none !important;
    font-size: .87rem !important;
    line-height: 1.62 !important;
  }
}

/* Mobile landscape — strict two-column, no overlap. */
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .moments-modal__panel--editorial.is-event-detail {
    overflow: hidden !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead {
    display: grid !important;
    grid-template-columns: minmax(220px, 40%) auto !important;
    width: fit-content !important;
    height: calc(100svh - 16px) !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy {
    order: initial !important;
    width: auto !important;
    min-width: 220px !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 50px 16px 14px !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-image {
    order: initial !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px 42px !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-gallery-photo-frame > img {
    max-height: calc(100svh - 54px) !important;
    max-width: 50vw !important;
  }
  .moments-modal__back-event { top: 9px !important; left: 16px !important; }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__masthead-copy h2 {
    font-size: 1.35rem !important;
  }
  .moments-modal__panel--editorial.is-event-detail .moments-modal__intro {
    font-size: .70rem !important;
    line-height: 1.4 !important;
  }
}

/* ---------- Homepage Moments card sizing retained ---------- */
@media (min-width: 761px) and (max-width: 900px) {
  .page-home .moments-magazine-strip {
    grid-template-columns: repeat(2, minmax(0, 280px)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  .page-home .moments-mag-card,
  .page-home .moments-mag-card:last-child {
    width: 100% !important;
    max-width: 280px !important;
    justify-self: center !important;
    grid-column: auto !important;
  }
  .page-home .moments-mag-card:last-child { grid-column: 1 / -1 !important; }
  .page-home .moments-mag-trigger { aspect-ratio: 4 / 5 !important; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .page-home .moments-magazine-strip {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
  }
  .page-home .moments-mag-card,
  .page-home .moments-mag-card:last-child {
    width: min(320px, 82vw) !important;
    max-width: 320px !important;
    grid-column: auto !important;
    justify-self: center !important;
  }
  .page-home .moments-mag-trigger {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 400px !important;
  }
  .page-home .moments-mag-trigger img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* =========================================================
   HOMEPAGE 14.6 — OUR STORY EDITORIAL MODAL
========================================================= */
.page-home .story-actions{margin-top:28px}.page-home .story-actions-label{margin:0 0 10px;font:500 .76rem/1.3 "DM Sans",sans-serif}.page-home .story-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.page-home .story-read-button{gap:12px;cursor:pointer;border:0}.page-home .story-profile-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:12px;padding:0 22px;border:1px solid rgba(229,137,157,.34);border-radius:999px;background:linear-gradient(135deg,#f6b7c5,#ef91a8);color:#38252b;font:600 .74rem/1 "DM Sans",sans-serif;text-decoration:none;box-shadow:0 9px 24px rgba(214,118,143,.16);transition:.2s ease}.page-home .story-profile-button:hover,.page-home .story-profile-button:focus-visible{transform:translateY(-2px);box-shadow:0 13px 28px rgba(214,118,143,.23)}
.page-home .story-instagram-source{display:inline-flex;width:min(360px,100%);align-items:center;gap:10px;margin-top:12px;padding:10px 13px;border:1px solid rgba(231,157,175,.28);border-radius:12px;color:inherit;text-decoration:none;background:rgba(255,255,255,.42)}.page-home .story-instagram-source__icon{display:grid;width:31px;height:31px;flex:0 0 auto;place-items:center;border-radius:9px;background:linear-gradient(145deg,#ffd36e,#ee5a77 48%,#7b55d6);color:#fff;font-size:1.1rem}.page-home .story-instagram-source strong,.page-home .story-instagram-source small{display:block}.page-home .story-instagram-source strong{font:600 .66rem/1.25 "DM Sans",sans-serif}.page-home .story-instagram-source small{margin-top:3px;opacity:.72;font:500 .58rem/1.25 "DM Sans",sans-serif}body.dark-theme.page-home .story-instagram-source{background:rgba(19,24,31,.55);border-color:rgba(246,182,198,.32)}
.story-modal{position:fixed;inset:0;z-index:9600;display:none}.story-modal.is-open{display:block}.story-modal__backdrop{position:absolute;inset:0;background:rgba(7,12,19,.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.story-modal__panel{position:absolute;inset:clamp(14px,2.4vw,34px);overflow:hidden;border:1px solid rgba(183,211,228,.42);border-radius:22px;background:radial-gradient(circle at 92% 4%,rgba(246,192,206,.28),transparent 24%),linear-gradient(145deg,#fffdfb 0%,#fff8f6 55%,#f6fbff 100%);color:#25242a;box-shadow:0 34px 90px rgba(0,0,0,.42)}.story-modal__close{position:absolute;top:18px;right:20px;z-index:6;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.76);color:#25242a;font:300 1.7rem/1 "DM Sans",sans-serif;cursor:pointer}.story-modal__topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;min-height:82px;padding:24px 78px 16px 34px;border-bottom:1px solid rgba(120,154,175,.16);background:rgba(255,253,251,.86);backdrop-filter:blur(14px)}.story-modal__topbar>p{margin:0;color:#6ca7ca;font:700 .7rem/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase}.story-modal__topbar>p::after{display:inline-block;width:38px;height:1px;margin:0 0 3px 12px;content:"";background:#93b7cb}.story-modal__topbar div{text-align:right;padding-right:8px}.story-modal__topbar span,.story-modal__topbar small{display:block;text-transform:uppercase;letter-spacing:.2em}.story-modal__topbar span{color:#9a6370;font:600 .58rem/1.2 "DM Sans",sans-serif}.story-modal__topbar small{margin-top:5px;color:#df8ca0;font:600 .51rem/1.2 "DM Sans",sans-serif}.story-modal__layout{display:grid;grid-template-columns:300px minmax(0,1fr);height:100%;padding-top:82px}.story-modal__sidebar{overflow:auto;padding:30px 24px 28px 30px;border-right:1px solid rgba(120,154,175,.16);background:rgba(248,251,253,.54)}.story-modal__sidebar h2{margin:0 0 24px;font:500 2.1rem/.96 "Cormorant Garamond",serif}.story-modal__nav{display:grid;gap:7px}.story-modal__nav-item{display:grid;grid-template-columns:28px 1fr;grid-template-areas:"num title" "num sub";gap:2px 8px;width:100%;padding:11px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;text-align:left;cursor:pointer}.story-modal__nav-item span{grid-area:num;color:#7d91a0;font:600 .72rem/1.4 "DM Sans",sans-serif}.story-modal__nav-item strong{grid-area:title;font:600 .72rem/1.25 "DM Sans",sans-serif}.story-modal__nav-item small{grid-area:sub;color:#7b7678;font:500 .55rem/1.25 "DM Sans",sans-serif}.story-modal__nav-item.is-active{border-color:rgba(121,170,199,.22);background:linear-gradient(135deg,rgba(184,216,235,.3),rgba(246,192,206,.14))}.story-modal__sidebar blockquote{margin:30px 8px 0;padding-top:22px;border-top:1px solid rgba(145,175,194,.3);color:#6f676a;font:italic 500 1.25rem/1.18 "Cormorant Garamond",serif}.story-modal__reader{overflow:auto;scroll-behavior:smooth;overscroll-behavior:contain;padding:0 clamp(28px,4vw,72px) 70px}.story-chapter{width:min(900px,100%);margin:0 auto;padding:52px 0 64px;scroll-margin-top:24px;border-bottom:1px solid rgba(128,161,180,.2)}.story-chapter__heading>p{margin:0 0 7px;color:#5b9bc3;font:700 .7rem/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase}.story-chapter__heading h3{margin:0;font:500 clamp(2.7rem,4vw,4.3rem)/.95 "Cormorant Garamond",serif;letter-spacing:-.035em}.story-chapter__heading em{display:block;margin-top:5px;color:#6e6668;font:italic 500 clamp(1.3rem,2vw,1.7rem)/1.1 "Cormorant Garamond",serif}.story-chapter__media{margin:26px 0 25px}.story-chapter__media img{display:block;width:100%;max-height:480px;aspect-ratio:16/8.4;object-fit:cover;object-position:center;border-radius:16px;box-shadow:0 18px 42px rgba(63,48,54,.12)}.story-chapter__media figcaption{margin-top:7px;color:#978b8f;font:500 .55rem/1.3 "DM Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase}.story-chapter__copy{max-width:790px;color:#49464a;font:400 .9rem/1.72 "DM Sans",sans-serif}.story-chapter__copy p{margin:0 0 14px}.story-sources{margin-top:25px;border-top:1px solid rgba(104,158,190,.32);border-bottom:1px solid rgba(104,158,190,.18)}.story-sources summary{display:flex;justify-content:space-between;padding:13px 0;color:#668ca4;font:700 .61rem/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;list-style:none}.story-sources summary::-webkit-details-marker{display:none}.story-sources ul{display:grid;gap:7px;margin:0;padding:0 0 15px;list-style:none}.story-sources a{display:grid;grid-template-columns:180px 1fr auto;gap:11px;color:#4b6676;text-decoration:none;font:500 .64rem/1.35 "DM Sans",sans-serif}.story-sources a span:first-child{color:#80929e}.story-sources a strong{font-weight:600}.story-chapter__footer{display:flex;justify-content:flex-end;margin-top:18px}.story-chapter-next{border:0;background:transparent;color:#5c99bc;font:700 .66rem/1 "DM Sans",sans-serif;cursor:pointer}body.story-modal-open{overflow:hidden}
@media(max-width:900px){.story-modal__panel{inset:10px;border-radius:18px}.story-modal__topbar{min-height:70px;padding:21px 64px 14px 22px}.story-modal__layout{grid-template-columns:1fr;padding-top:70px}.story-modal__sidebar{overflow:visible;padding:20px 18px 14px;border-right:0;border-bottom:1px solid rgba(120,154,175,.16)}.story-modal__sidebar h2,.story-modal__sidebar blockquote{display:none}.story-modal__nav{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none}.story-modal__nav-item{flex:0 0 auto;width:auto;min-width:116px;grid-template-columns:22px 1fr;padding:9px 10px}.story-modal__nav-item small{display:none}.story-modal__reader{padding:0 22px 48px}.story-chapter{padding:36px 0 48px}.story-sources a{grid-template-columns:1fr auto}.story-sources a span:first-child{grid-column:1/-1}}
@media(max-width:600px){.page-home .story-actions-row{display:grid;grid-template-columns:1fr 1fr}.page-home .story-read-button{grid-column:1/-1;width:100%}.page-home .story-profile-button{width:100%;padding-inline:14px}.page-home .story-instagram-source{margin-inline:auto}.story-modal__panel{inset:0;border:0;border-radius:0}.story-modal__topbar div{display:none}.story-modal__close{top:12px;right:12px}.story-modal__reader{padding-inline:18px}.story-chapter__heading h3{font-size:2.7rem}.story-chapter__media img{aspect-ratio:4/3;max-height:none}.story-chapter__copy{font-size:.84rem;line-height:1.68}}
@media(prefers-reduced-motion:reduce){.story-modal__reader{scroll-behavior:auto}.page-home .story-profile-button{transition:none}}

/* =========================================================
   HOMEPAGE 14.6.1 — OUR STORY SINGLE-FRAME DESKTOP FIT
   Keep the full Our Story experience visible in one desktop
   viewport while preserving the existing editorial direction.
========================================================= */
@media (min-width: 1101px) {
  .page-home .story-panel {
    grid-template-columns: minmax(430px, 1.18fr) minmax(300px, .72fr);
    align-items: center;
    min-height: 0;
    gap: clamp(28px, 2.6vw, 42px);
    padding: clamp(38px, 3.5vw, 50px) clamp(42px, 4vw, 62px);
  }

  .page-home .story-copy-block {
    max-width: 570px;
  }

  .page-home .story-copy-block h2 {
    margin-bottom: 20px;
    font-size: clamp(3.35rem, 4.2vw, 4.45rem);
    line-height: .94;
  }

  .page-home .story-intro {
    margin-bottom: 24px;
    font-size: .91rem;
    line-height: 1.6;
  }

  .page-home .story-editorial p {
    margin-bottom: 11px;
    font-size: .91rem;
    line-height: 1.62;
  }

  .page-home .story-closing {
    margin-top: 18px;
    margin-bottom: 0;
    font-size: .88rem;
  }

  .page-home .story-actions {
    margin-top: 18px;
  }

  .page-home .story-actions-label {
    margin-bottom: 8px;
  }

  .page-home .story-actions-row {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .page-home .story-read-button {
    min-height: 42px;
    padding-inline: 18px;
    white-space: nowrap;
  }

  .page-home .story-profile-button {
    min-height: 42px;
    padding-inline: 17px;
    white-space: nowrap;
  }

  .page-home .story-visual-column {
    width: min(340px, 100%);
    justify-self: center;
    padding-top: 0;
  }

  .page-home .story-visual-column .story-photo-wrap,
  .page-home .story-photo-frame,
  .page-home .story-instagram-source {
    width: min(340px, 100%);
  }

  .page-home .story-instagram-source {
    margin-top: 9px;
    padding: 8px 11px;
  }

  .page-home .story-instagram-source__icon {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .page-home .story-instagram-source strong {
    font-size: .61rem;
  }

  .page-home .story-instagram-source small {
    font-size: .53rem;
  }
}

/* Short desktop/laptop viewports need a slightly tighter editorial rhythm. */
@media (min-width: 1101px) and (max-height: 900px) {
  .page-home .story-panel {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .page-home .story-copy-block h2 {
    font-size: clamp(3.1rem, 3.8vw, 4rem);
    margin-bottom: 16px;
  }

  .page-home .story-intro {
    margin-bottom: 18px;
  }

  .page-home .story-editorial p {
    margin-bottom: 8px;
    line-height: 1.55;
  }

  .page-home .story-closing {
    margin-top: 14px;
  }

  .page-home .story-actions {
    margin-top: 14px;
  }

  .page-home .story-visual-column,
  .page-home .story-visual-column .story-photo-wrap,
  .page-home .story-photo-frame,
  .page-home .story-instagram-source {
    width: min(320px, 100%);
  }
}


/* =========================================================
   HOMEPAGE 15.21 — OUR STORY MODAL REFINEMENT
   Editorial reading panel • contained width • uncropped media
========================================================= */
.story-modal {
  padding: clamp(18px, 3vw, 42px);
  background: rgba(14, 18, 23, .68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.story-modal__dialog {
  width: min(1180px, calc(100vw - 48px));
  height: min(860px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
}
.story-modal__topbar {
  min-height: 76px;
  padding: 18px 28px;
}
.story-modal__layout {
  grid-template-columns: 245px minmax(0, 1fr);
  height: calc(100% - 76px);
}
.story-modal__rail {
  padding: 28px 22px;
  overflow-y: auto;
}
.story-modal__content {
  padding: 38px clamp(38px, 5vw, 70px) 54px;
  overflow-y: auto;
}
.story-chapter {
  width: min(100%, 760px);
  margin-inline: auto;
}
.story-chapter__title {
  font-size: clamp(2.55rem, 4vw, 4.25rem);
  line-height: .98;
}
.story-chapter__media {
  width: 100%;
  max-width: 720px;
  margin: 24px auto 26px;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  background: transparent;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(30, 26, 32, .10);
}
.story-chapter__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 470px;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* Modal palette follows the site's existing data-theme switch. */
html[data-theme="dark"] .story-modal {
  background: rgba(3, 7, 11, .82);
}
html[data-theme="dark"] .story-modal__dialog {
  background: #15191f;
  color: #f4f0ec;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 30px 100px rgba(0,0,0,.58);
}
html[data-theme="dark"] .story-modal__topbar,
html[data-theme="dark"] .story-modal__rail {
  background: #12161b;
  border-color: rgba(255,255,255,.09);
}
html[data-theme="dark"] .story-modal__content {
  background:
    radial-gradient(circle at 100% 0%, rgba(237,166,187,.08), transparent 34%),
    #181c22;
}
html[data-theme="dark"] .story-modal__title,
html[data-theme="dark"] .story-chapter__title,
html[data-theme="dark"] .story-chapter__subtitle,
html[data-theme="dark"] .story-modal__rail-title,
html[data-theme="dark"] .story-modal__quote {
  color: #f5f0ec;
}
html[data-theme="dark"] .story-chapter__body,
html[data-theme="dark"] .story-modal__nav-copy strong,
html[data-theme="dark"] .story-modal__brand,
html[data-theme="dark"] .story-modal__eyebrow {
  color: #e6e1dc;
}
html[data-theme="dark"] .story-modal__nav-copy small,
html[data-theme="dark"] .story-chapter__media-note,
html[data-theme="dark"] .story-source-list a,
html[data-theme="dark"] .story-source-list li {
  color: #aaaeb5;
}
html[data-theme="dark"] .story-modal__nav-item {
  color: #d8d9dc;
}
html[data-theme="dark"] .story-modal__nav-item:hover {
  background: rgba(255,255,255,.055);
}
html[data-theme="dark"] .story-modal__nav-item.is-active {
  background: linear-gradient(90deg, rgba(166,207,232,.13), rgba(238,166,188,.10));
  border-color: rgba(166,207,232,.25);
}
html[data-theme="dark"] .story-modal__close {
  background: rgba(255,255,255,.07);
  color: #f5f0ec;
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .story-chapter__sources,
html[data-theme="dark"] .story-chapter__footer {
  border-color: rgba(255,255,255,.10);
}

@media (max-width: 900px) {
  .story-modal { padding: 12px; }
  .story-modal__dialog {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
  }
  .story-modal__layout { grid-template-columns: 1fr; }
  .story-modal__rail { max-height: none; padding: 18px 20px; }
  .story-modal__content { padding: 28px 22px 42px; }
  .story-chapter__media img { max-height: none; }
}

@media (max-width: 560px) {
  .story-modal { padding: 0; }
  .story-modal__dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .story-modal__topbar { min-height: 66px; padding: 14px 16px; }
  .story-modal__layout { height: calc(100% - 66px); }
  .story-modal__content { padding: 24px 18px 38px; }
  .story-chapter__title { font-size: clamp(2.35rem, 12vw, 3.2rem); }
  .story-chapter__media { margin-block: 20px 22px; border-radius: 14px; }
  .story-chapter__media img { width: 100%; height: auto; max-height: none; object-fit: contain; }
}


/* =========================================================
   HOMEPAGE 15.22 — OUR STORY MODAL COMPACT REBUILD
   Correct component selectors • compact editorial canvas
========================================================= */

/* Actual modal component is .story-modal__panel */
.story-modal {
  padding: clamp(20px, 3vw, 42px);
}

.story-modal__panel {
  width: min(1040px, calc(100vw - 80px)) !important;
  height: min(820px, calc(100dvh - 52px)) !important;
  max-height: calc(100dvh - 52px) !important;
  margin: auto;
  border-radius: 22px;
  overflow: hidden;
}

.story-modal__topbar {
  min-height: 68px;
  padding: 15px 24px;
}

.story-modal__layout {
  grid-template-columns: 208px minmax(0, 1fr) !important;
  height: calc(100% - 68px);
}

/* Actual left rail is .story-modal__sidebar */
.story-modal__sidebar {
  width: auto !important;
  min-width: 0;
  padding: 24px 18px 28px;
  overflow-y: auto;
}

.story-modal__sidebar h2 {
  font-size: clamp(1.7rem, 2.2vw, 2.25rem);
  line-height: .96;
  margin-bottom: 20px;
}

.story-modal__nav {
  gap: 6px;
}

.story-modal__nav-item {
  padding: 10px 9px;
}

.story-modal__nav-item strong {
  font-size: .72rem;
}

.story-modal__nav-item small {
  font-size: .54rem;
}

/* Actual reading region is .story-modal__reader */
.story-modal__reader {
  min-width: 0;
  padding: 32px 38px 46px !important;
  overflow-y: auto;
}

.story-chapter {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  margin-inline: auto;
}

.story-chapter__heading {
  margin-bottom: 18px;
}

.story-chapter__heading h3,
.story-chapter__title {
  font-size: clamp(2.55rem, 4vw, 3.85rem);
  line-height: .96;
}

.story-chapter__heading em {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

/* IMPORTANT:
   The FIGURE itself now hugs the media instead of stretching across the reader.
   This removes the giant empty image panel around portrait images. */
.story-chapter__media {
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 20px auto 25px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 16px;
  overflow: visible !important;
  box-shadow: none !important;
}

.story-chapter__media img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 410px !important;
  margin-inline: auto;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 15px;
  box-shadow: 0 14px 32px rgba(28, 25, 30, .12);
}

/* Clickable Instagram credit */
.story-chapter__credit {
  width: min(100%, 360px);
  margin: 10px auto 0;
}

.story-chapter__credit a {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(231, 157, 181, .35);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  color: #34363b;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.story-chapter__credit a:hover,
.story-chapter__credit a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(231, 157, 181, .7);
  background: #fff;
}

.story-chapter__credit-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f6a066, #e84c88 52%, #8f67d8);
  color: #fff;
  font-size: 1rem;
}

.story-chapter__credit span:last-child {
  display: grid;
  gap: 1px;
  text-align: left;
}

.story-chapter__credit strong {
  font: 600 .66rem/1.25 "DM Sans", sans-serif;
}

.story-chapter__credit small {
  font: 500 .54rem/1.3 "DM Sans", sans-serif;
  opacity: .72;
}

/* Dark mode: cover the ACTUAL selectors used by the modal */
html[data-theme="dark"] .story-modal__panel {
  background: #15191f;
  color: #f4f0ec;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

html[data-theme="dark"] .story-modal__topbar,
html[data-theme="dark"] .story-modal__sidebar {
  background: #12161b;
  border-color: rgba(255,255,255,.09);
}

html[data-theme="dark"] .story-modal__reader {
  background:
    radial-gradient(circle at 100% 0%, rgba(235,157,181,.07), transparent 34%),
    #181c22;
}

html[data-theme="dark"] .story-modal__sidebar h2,
html[data-theme="dark"] .story-modal__sidebar blockquote,
html[data-theme="dark"] .story-chapter__heading h3,
html[data-theme="dark"] .story-chapter__heading em,
html[data-theme="dark"] .story-chapter__copy {
  color: #f2eeea;
}

html[data-theme="dark"] .story-modal__nav-item {
  color: #d5d8dd;
}

html[data-theme="dark"] .story-modal__nav-item.is-active {
  background: linear-gradient(90deg, rgba(166,207,232,.13), rgba(238,166,188,.09));
  border-color: rgba(166,207,232,.22);
}

html[data-theme="dark"] .story-chapter__credit a {
  background: rgba(255,255,255,.045);
  border-color: rgba(238,166,188,.22);
  color: #ece8e4;
}

html[data-theme="dark"] .story-chapter__credit a:hover,
html[data-theme="dark"] .story-chapter__credit a:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(238,166,188,.45);
}

/* Tablet */
@media (max-width: 900px) {
  .story-modal {
    padding: 12px;
  }

  .story-modal__panel {
    width: min(760px, calc(100vw - 24px)) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 18px;
  }

  .story-modal__layout {
    grid-template-columns: 1fr !important;
    height: calc(100% - 68px);
  }

  .story-modal__sidebar {
    display: block;
    padding: 14px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(31,38,46,.10);
  }

  .story-modal__sidebar h2,
  .story-modal__sidebar blockquote {
    display: none;
  }

  .story-modal__nav {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .story-modal__nav-item {
    flex: 0 0 auto;
    min-width: 145px;
  }

  .story-modal__reader {
    padding: 26px 24px 40px !important;
  }

  .story-chapter {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
  }

  .story-chapter__media img {
    max-height: 390px !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .story-modal {
    padding: 0;
  }

  .story-modal__panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0;
  }

  .story-modal__topbar {
    min-height: 62px;
    padding: 13px 15px;
  }

  .story-modal__layout {
    height: calc(100% - 62px);
  }

  .story-modal__sidebar {
    padding: 10px 14px;
  }

  .story-modal__nav-item {
    min-width: 125px;
    padding: 8px;
  }

  .story-modal__reader {
    padding: 22px 16px 34px !important;
  }

  .story-chapter__heading h3,
  .story-chapter__title {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .story-chapter__media {
    margin: 18px auto 22px !important;
  }

  .story-chapter__media img {
    max-width: 100% !important;
    max-height: min(55dvh, 390px) !important;
  }

  .story-chapter__credit {
    width: min(100%, 340px);
  }
}


/* =========================================================
   HOMEPAGE 15.23 — OUR STORY MODAL FINAL POLISH
   Exact IG post credits • true dark theme • compact media
========================================================= */

/* Keep the modal compact on wide displays. */
.story-modal__panel {
  width: min(980px, calc(100vw - 72px)) !important;
}

.story-modal__layout {
  grid-template-columns: 196px minmax(0, 1fr) !important;
}

.story-modal__reader {
  padding: 28px 34px 42px !important;
}

.story-chapter {
  width: min(100%, 610px) !important;
  max-width: 610px !important;
}

/* Media should follow the image, never the available row width. */
.story-chapter__media {
  display: table !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 18px auto 22px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.story-chapter__media img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 520px) !important;
  max-height: 430px !important;
  margin: 0 auto;
  object-fit: contain !important;
  border-radius: 14px;
}

.story-chapter__credit {
  width: min(100%, 340px) !important;
  margin: 9px auto 0 !important;
}

/* Full dark mode coverage using the same homepage theme state. */
html[data-theme="dark"] .story-modal,
body.dark-theme .story-modal {
  background: rgba(2, 5, 9, .88) !important;
}

html[data-theme="dark"] .story-modal__panel,
body.dark-theme .story-modal__panel {
  background: #11161c !important;
  color: #f2ede8 !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .story-modal__topbar,
body.dark-theme .story-modal__topbar,
html[data-theme="dark"] .story-modal__sidebar,
body.dark-theme .story-modal__sidebar {
  background: #0e1318 !important;
  border-color: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .story-modal__reader,
body.dark-theme .story-modal__reader,
html[data-theme="dark"] .story-modal__layout,
body.dark-theme .story-modal__layout,
html[data-theme="dark"] .story-chapter,
body.dark-theme .story-chapter {
  background: #141a20 !important;
  color: #eee9e4 !important;
}

html[data-theme="dark"] .story-modal__sidebar h2,
body.dark-theme .story-modal__sidebar h2,
html[data-theme="dark"] .story-modal__sidebar blockquote,
body.dark-theme .story-modal__sidebar blockquote,
html[data-theme="dark"] .story-chapter__heading h3,
body.dark-theme .story-chapter__heading h3,
html[data-theme="dark"] .story-chapter__heading em,
body.dark-theme .story-chapter__heading em,
html[data-theme="dark"] .story-chapter__copy,
body.dark-theme .story-chapter__copy,
html[data-theme="dark"] .story-chapter p,
body.dark-theme .story-chapter p {
  color: #eee9e4 !important;
}

html[data-theme="dark"] .story-modal__nav-item,
body.dark-theme .story-modal__nav-item {
  color: #d7d9dd !important;
}

html[data-theme="dark"] .story-modal__nav-item small,
body.dark-theme .story-modal__nav-item small,
html[data-theme="dark"] .story-modal__nav-item strong,
body.dark-theme .story-modal__nav-item strong {
  color: inherit !important;
}

html[data-theme="dark"] .story-modal__nav-item.is-active,
body.dark-theme .story-modal__nav-item.is-active {
  background: linear-gradient(90deg, rgba(166,207,232,.13), rgba(238,166,188,.10)) !important;
  border-color: rgba(166,207,232,.24) !important;
}

html[data-theme="dark"] .story-chapter__media,
body.dark-theme .story-chapter__media {
  background: transparent !important;
}

html[data-theme="dark"] .story-chapter__credit a,
body.dark-theme .story-chapter__credit a {
  background: #10161c !important;
  color: #f1ece7 !important;
  border-color: rgba(238,166,188,.24) !important;
}

html[data-theme="dark"] .story-chapter__credit small,
body.dark-theme .story-chapter__credit small {
  color: #b7bbc1 !important;
}

html[data-theme="dark"] .story-modal__close,
body.dark-theme .story-modal__close {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .story-modal__reader::-webkit-scrollbar-track,
body.dark-theme .story-modal__reader::-webkit-scrollbar-track,
html[data-theme="dark"] .story-modal__sidebar::-webkit-scrollbar-track,
body.dark-theme .story-modal__sidebar::-webkit-scrollbar-track {
  background: #10151a;
}

html[data-theme="dark"] .story-modal__reader::-webkit-scrollbar-thumb,
body.dark-theme .story-modal__reader::-webkit-scrollbar-thumb,
html[data-theme="dark"] .story-modal__sidebar::-webkit-scrollbar-thumb,
body.dark-theme .story-modal__sidebar::-webkit-scrollbar-thumb {
  background: #3d454e;
}

@media (max-width: 900px) {
  .story-modal__panel {
    width: min(740px, calc(100vw - 24px)) !important;
  }
  .story-chapter {
    width: min(100%, 600px) !important;
    max-width: 600px !important;
  }
}

@media (max-width: 560px) {
  .story-modal__panel {
    width: 100vw !important;
  }
  .story-chapter__media img {
    max-width: 100% !important;
    max-height: none !important;
  }
  .story-chapter__credit {
    width: min(100%, 320px) !important;
  }
}


/* =========================================================
   HOMEPAGE 15.24 — OUR STORY RESPONSIVE EDITORIAL REBUILD
   Desktop: one-screen magazine spread
   Mobile portrait: horizontal chapter rail + full-width reader
   Tablet (561–900px): intentionally preserved from 15.23
========================================================= */

/* ---------- DESKTOP ONLY ---------- */
@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .story-modal {
    padding: clamp(18px, 2.2vw, 32px);
  }

  .story-modal__panel {
    width: min(1120px, calc(100vw - 56px)) !important;
    height: min(760px, calc(100dvh - 40px)) !important;
    max-height: calc(100dvh - 40px) !important;
  }

  .story-modal__topbar {
    min-height: 64px;
    padding: 13px 22px;
  }

  .story-modal__layout {
    grid-template-columns: 188px minmax(0, 1fr) !important;
    height: calc(100% - 64px);
  }

  .story-modal__sidebar {
    padding: 22px 14px 20px !important;
    overflow: hidden !important;
  }

  .story-modal__sidebar h2 {
    width: 100%;
    margin: 0 4px 18px;
    font-size: 1.58rem !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em;
  }

  .story-modal__nav {
    gap: 3px !important;
  }

  .story-modal__nav-item {
    display: grid;
    grid-template-columns: 25px minmax(0,1fr);
    column-gap: 6px;
    row-gap: 1px;
    padding: 8px 7px !important;
    min-height: 48px;
  }

  .story-modal__nav-item > span {
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 1px;
    font-size: .66rem;
  }

  .story-modal__nav-item strong {
    font-size: .67rem !important;
    line-height: 1.15;
  }

  .story-modal__nav-item small {
    font-size: .49rem !important;
    line-height: 1.2;
  }

  .story-modal__sidebar blockquote {
    margin: 15px 5px 0;
    padding-top: 13px;
    font-size: .86rem !important;
    line-height: 1.25;
  }

  .story-modal__reader {
    padding: 24px 30px 26px !important;
    overflow-y: auto;
  }

  .story-chapter {
    width: min(100%, 840px) !important;
    max-width: 840px !important;
    min-height: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(270px, .88fr) minmax(0, 1.12fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 32px;
    row-gap: 12px;
    align-content: center;
  }

  .story-chapter__heading {
    grid-column: 1 / -1;
    margin: 0 0 4px !important;
  }

  .story-chapter__heading > p {
    margin-bottom: 5px;
  }

  .story-chapter__heading h3,
  .story-chapter__title {
    font-size: clamp(2.35rem, 3.2vw, 3.05rem) !important;
    line-height: .98 !important;
    letter-spacing: -.035em;
  }

  .story-chapter__heading em {
    display: block;
    margin-top: 6px;
    font-size: clamp(1.08rem, 1.5vw, 1.34rem) !important;
    line-height: 1.15;
  }

  .story-chapter__media {
    grid-column: 1;
    grid-row: 2 / span 2;
    align-self: start;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 330px !important;
    margin: 0 auto !important;
  }

  .story-chapter__media img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 410px !important;
    margin: 0 auto;
  }

  .story-chapter__media.is-portrait img {
    width: min(100%, 300px) !important;
    max-height: 410px !important;
  }

  .story-chapter__media.is-landscape {
    max-width: 350px !important;
  }

  .story-chapter__media.is-landscape img {
    width: 100% !important;
    max-height: 300px !important;
  }

  .story-chapter__media.is-square img {
    width: min(100%, 320px) !important;
    max-height: 330px !important;
  }

  .story-chapter__credit {
    width: min(100%, 330px) !important;
    margin: 8px auto 0 !important;
  }

  .story-chapter__credit a {
    gap: 8px;
    padding: 7px 9px !important;
    border-radius: 10px;
  }

  .story-chapter__credit-icon {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: .88rem;
  }

  .story-chapter__credit strong {
    font-size: .61rem !important;
  }

  .story-chapter__credit small {
    font-size: .48rem !important;
  }

  .story-chapter__copy {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: .82rem !important;
    line-height: 1.58 !important;
  }

  .story-chapter__copy p {
    margin: 0 0 .72em !important;
  }

  .story-sources,
  .story-chapter__sources {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    margin-top: 2px !important;
  }

  .story-sources summary,
  .story-chapter__sources summary {
    font-size: .68rem !important;
    padding-block: 7px !important;
  }

  .story-chapter__footer {
    grid-column: 2;
    margin-top: 5px !important;
    padding-top: 8px !important;
  }

  .story-chapter-next {
    font-size: .68rem !important;
    padding: 7px 10px !important;
  }
}

/* ---------- MOBILE PORTRAIT ONLY ----------
   Tablet rules remain unchanged because this starts at 560px and below.
*/
@media (max-width: 560px) {
  .story-modal__topbar {
    min-height: 58px !important;
    padding: 11px 14px !important;
  }

  .story-modal__topbar > div {
    display: none;
  }

  .story-modal__close {
    width: 42px !important;
    height: 42px !important;
    right: 10px !important;
    top: 8px !important;
    font-size: 1.55rem !important;
  }

  .story-modal__layout {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - 58px) !important;
    min-width: 0 !important;
  }

  .story-modal__sidebar {
    flex: 0 0 auto;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 12px 8px !important;
    overflow: hidden !important;
    border-right: 0 !important;
  }

  .story-modal__sidebar h2,
  .story-modal__sidebar blockquote {
    display: none !important;
  }

  .story-modal__nav {
    display: flex !important;
    width: 100%;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 3px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .story-modal__nav::-webkit-scrollbar {
    display: none;
  }

  .story-modal__nav-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 38px;
    padding: 7px 10px !important;
    display: flex !important;
    align-items: center;
    gap: 7px;
    border-radius: 999px !important;
    scroll-snap-align: start;
  }

  .story-modal__nav-item > span {
    font-size: .66rem !important;
  }

  .story-modal__nav-item strong {
    font-size: .68rem !important;
    white-space: nowrap;
  }

  .story-modal__nav-item small {
    display: none !important;
  }

  .story-modal__reader {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px 18px 34px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .story-chapter {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .story-chapter__heading {
    margin-bottom: 17px !important;
  }

  .story-chapter__heading > p {
    margin-bottom: 5px !important;
    font-size: .67rem !important;
  }

  .story-chapter__heading h3,
  .story-chapter__title {
    font-size: clamp(2.25rem, 11vw, 2.8rem) !important;
    line-height: .98 !important;
    letter-spacing: -.035em;
  }

  .story-chapter__heading em {
    display: block;
    margin-top: 7px;
    font-size: 1.18rem !important;
    line-height: 1.18 !important;
  }

  .story-chapter__media {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px !important;
  }

  .story-chapter__media img {
    width: auto !important;
    height: auto !important;
    max-width: 88% !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .story-chapter__media.is-portrait img {
    width: min(82vw, 330px) !important;
  }

  .story-chapter__media.is-landscape img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .story-chapter__media.is-square img {
    width: min(88vw, 350px) !important;
  }

  .story-chapter__credit {
    width: min(100%, 330px) !important;
    margin: 8px auto 0 !important;
  }

  .story-chapter__credit a {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .story-chapter__credit-icon {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .story-chapter__credit strong {
    font-size: .62rem !important;
  }

  .story-chapter__credit small {
    font-size: .49rem !important;
  }

  .story-chapter__copy {
    width: 100%;
    font-size: .96rem !important;
    line-height: 1.65 !important;
  }

  .story-chapter__copy p {
    margin-bottom: .9em !important;
  }

  .story-sources,
  .story-chapter__sources {
    margin-top: 16px !important;
  }
}


/* =========================================================
   HOMEPAGE 15.25 — DESKTOP + MOBILE FIX
   Tablet 561–900px intentionally preserved
========================================================= */

/* Global header collision fix */
.story-modal__topbar {
  position: relative;
  padding-right: 88px !important;
}

.story-modal__brandmark,
.story-modal__topbar > div:last-of-type {
  max-width: calc(100% - 86px);
  padding-right: 10px;
}

.story-modal__close {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
  z-index: 5;
}

/* One active chapter only */
.story-chapter[hidden] {
  display: none !important;
}

/* ---------- DESKTOP ONLY ---------- */
@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .story-modal__panel {
    width: min(1160px, calc(100vw - 54px)) !important;
    height: min(760px, calc(100dvh - 36px)) !important;
    max-height: calc(100dvh - 36px) !important;
  }

  .story-modal__layout {
    grid-template-columns: 218px minmax(0, 1fr) !important;
  }

  .story-modal__sidebar {
    padding: 20px 14px 18px !important;
    overflow: hidden !important;
  }

  .story-modal__sidebar h2 {
    margin: 0 6px 18px !important;
    font-size: 1.72rem !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em;
  }

  .story-modal__sidebar blockquote {
    display: none !important;
  }

  .story-modal__nav {
    gap: 4px !important;
  }

  .story-modal__nav-item {
    grid-template-columns: 30px minmax(0,1fr) !important;
    min-height: 58px !important;
    padding: 10px 10px !important;
    column-gap: 7px !important;
  }

  .story-modal__nav-item > span {
    font-size: .72rem !important;
    line-height: 1.2;
  }

  .story-modal__nav-item strong {
    font-size: .82rem !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
  }

  .story-modal__nav-item small {
    font-size: .66rem !important;
    line-height: 1.32 !important;
    opacity: .82 !important;
  }

  .story-modal__reader {
    padding: 26px 32px 26px !important;
    overflow-y: auto !important;
  }

  .story-chapter.is-active {
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    min-height: calc(100% - 2px);
    margin-inline: auto;
    display: grid !important;
    grid-template-columns: minmax(360px, .98fr) minmax(0, 1.02fr) !important;
    grid-template-rows: auto 1fr auto;
    column-gap: 34px !important;
    row-gap: 12px !important;
    align-content: center;
  }

  .story-chapter__heading {
    grid-column: 1 / -1;
    margin-bottom: 4px !important;
  }

  .story-chapter__heading h3,
  .story-chapter__title {
    font-size: clamp(2.45rem, 3vw, 2.95rem) !important;
    line-height: .98 !important;
  }

  .story-chapter__heading em {
    font-size: clamp(1.12rem, 1.45vw, 1.34rem) !important;
    line-height: 1.15 !important;
  }

  /* Photo area carries equal visual weight to write-up */
  .story-chapter__media {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    align-self: start;
    background: transparent !important;
    box-shadow: none !important;
  }

  .story-chapter__media img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 455px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    border-radius: 14px;
  }

  .story-chapter__media.is-portrait img {
    width: min(100%, 370px) !important;
  }

  .story-chapter__media.is-square img {
    width: min(100%, 385px) !important;
    max-height: 395px !important;
  }

  .story-chapter__media.is-landscape {
    max-width: 410px !important;
  }

  .story-chapter__media.is-landscape img {
    width: 100% !important;
    max-height: 335px !important;
  }

  /* Compact source chip */
  .story-chapter__credit {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 9px auto 0 !important;
  }

  .story-chapter__credit a {
    width: auto !important;
    min-width: 226px;
    max-width: 300px;
    padding: 7px 10px !important;
    gap: 8px !important;
    border-radius: 11px !important;
  }

  .story-chapter__credit strong {
    font-size: .72rem !important;
    line-height: 1.18 !important;
  }

  .story-chapter__credit small {
    font-size: .56rem !important;
    line-height: 1.2 !important;
  }

  .story-chapter__copy {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: .98rem !important;
    line-height: 1.62 !important;
  }

  .story-chapter__copy p {
    margin-bottom: .85em !important;
  }

  .story-sources,
  .story-chapter__sources {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    margin-top: 6px !important;
  }

  .story-chapter__footer {
    grid-column: 2;
    margin-top: 7px !important;
  }
}

/* ---------- MOBILE PORTRAIT ---------- */
@media (max-width: 560px) and (orientation: portrait) {
  .story-modal__topbar {
    min-height: 58px !important;
    padding: 10px 62px 10px 14px !important;
  }

  .story-modal__close {
    width: 40px !important;
    height: 40px !important;
    right: 10px !important;
  }

  .story-modal__layout {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - 58px) !important;
    min-width: 0 !important;
  }

  .story-modal__sidebar {
    width: 100% !important;
    flex: 0 0 auto !important;
    padding: 8px 12px 7px !important;
    overflow: hidden !important;
    border-right: 0 !important;
  }

  .story-modal__sidebar h2,
  .story-modal__sidebar blockquote {
    display: none !important;
  }

  .story-modal__nav {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 3px !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .story-modal__nav::-webkit-scrollbar {
    display: none;
  }

  .story-modal__nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 11px !important;
    display: flex !important;
    align-items: center;
    gap: 7px !important;
    border-radius: 999px !important;
    scroll-snap-align: center;
  }

  .story-modal__nav-item > span {
    font-size: .70rem !important;
  }

  .story-modal__nav-item strong {
    font-size: .75rem !important;
    white-space: nowrap;
  }

  .story-modal__nav-item small {
    display: none !important;
  }

  .story-modal__reader {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 22px 18px 34px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-top: 12px;
  }

  .story-chapter.is-active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .story-chapter__heading {
    margin-bottom: 18px !important;
  }

  .story-chapter__heading h3,
  .story-chapter__title {
    font-size: clamp(2.2rem, 10.5vw, 2.6rem) !important;
    line-height: .99 !important;
  }

  .story-chapter__heading em {
    font-size: 1.08rem !important;
    line-height: 1.2 !important;
  }

  /* No pale container/gap: image itself is the card */
  .story-chapter__media {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .story-chapter__media img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    border-radius: 13px;
  }

  .story-chapter__media.is-portrait img {
    width: min(76vw, 330px) !important;
  }

  .story-chapter__media.is-square img {
    width: min(88vw, 360px) !important;
  }

  .story-chapter__media.is-landscape img {
    width: 100% !important;
  }

  .story-chapter__credit {
    width: fit-content !important;
    max-width: calc(100vw - 56px) !important;
    margin: 9px auto 0 !important;
  }

  .story-chapter__credit a {
    min-width: 0 !important;
    width: auto !important;
    max-width: 270px !important;
    padding: 7px 9px !important;
    gap: 7px !important;
    border-radius: 11px !important;
  }

  .story-chapter__credit strong {
    font-size: .69rem !important;
  }

  .story-chapter__credit small {
    font-size: .53rem !important;
  }

  .story-chapter__copy {
    width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.68 !important;
  }
}

/* ---------- MOBILE LANDSCAPE ----------
   No quick links; chapter navigation uses Previous/Next only.
*/
@media (max-height: 560px) and (orientation: landscape) {
  .story-modal {
    padding: 8px !important;
  }

  .story-modal__panel {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
  }

  .story-modal__topbar {
    min-height: 52px !important;
    padding: 8px 58px 8px 14px !important;
  }

  .story-modal__close {
    width: 36px !important;
    height: 36px !important;
    right: 9px !important;
  }

  .story-modal__layout {
    display: block !important;
    height: calc(100% - 52px) !important;
  }

  .story-modal__sidebar {
    display: none !important;
  }

  .story-modal__reader {
    width: 100% !important;
    height: 100% !important;
    padding: 18px 22px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .story-chapter.is-active {
    display: grid !important;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: auto auto 1fr auto;
    gap: 10px 24px !important;
    width: min(100%, 920px) !important;
    max-width: 920px !important;
    margin: 0 auto !important;
  }

  .story-chapter__heading {
    grid-column: 1 / -1;
    margin-bottom: 2px !important;
  }

  .story-chapter__heading h3,
  .story-chapter__title {
    font-size: clamp(2rem, 4.6vw, 2.55rem) !important;
  }

  .story-chapter__heading em {
    font-size: 1rem !important;
  }

  .story-chapter__media {
    grid-column: 1;
    grid-row: 2 / span 3;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .story-chapter__media img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 250px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .story-chapter__credit {
    width: fit-content !important;
    max-width: 280px !important;
    margin: 7px auto 0 !important;
  }

  .story-chapter__copy {
    grid-column: 2;
    grid-row: 2;
    font-size: .9rem !important;
    line-height: 1.52 !important;
  }

  .story-sources,
  .story-chapter__sources {
    grid-column: 2;
    grid-row: 3;
  }

  .story-chapter__footer {
    grid-column: 2;
    grid-row: 4;
  }
}


/* =========================================================
   HOMEPAGE 15.26 — OUR STORY LAYOUT RESET
   Clean editorial geometry across desktop / tablet / mobile
========================================================= */

/* Shared shell */
.story-modal__panel {
  overflow: hidden !important;
}

.story-modal__topbar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 14px 18px 14px 22px !important;
  min-height: 64px !important;
}

.story-modal__topbar > p {
  margin: 0 !important;
}

.story-modal__topbar > div {
  max-width: none !important;
  padding: 0 !important;
  text-align: right !important;
}

.story-modal__close {
  position: static !important;
  transform: none !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  flex: 0 0 42px !important;
}

.story-chapter[hidden] { display: none !important; }

/* Photo wrapper becomes layout-only: no card, no empty panel. */
.story-chapter__media,
.story-chapter__media.is-portrait,
.story-chapter__media.is-landscape,
.story-chapter__media.is-square {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.story-chapter__media img {
  display: block !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 15px !important;
  box-shadow: 0 14px 34px rgba(24, 23, 28, .13) !important;
}

/* Compact IG chip */
.story-chapter__credit {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
}
.story-chapter__credit a {
  width: auto !important;
  max-width: 100% !important;
}

/* Shared quote/message under chapter links. */
.story-modal__sidebar blockquote {
  display: block !important;
  color: inherit !important;
}

.story-chapter__actions {
  min-width: 0;
}
.story-chapter__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
.story-chapter-prev,
.story-chapter-next {
  border: 0;
  background: transparent;
  color: #6caed2;
  font: 600 .72rem/1.2 "DM Sans", sans-serif;
  cursor: pointer;
  padding: 7px 8px;
}
.story-chapter-end {
  font: 500 .68rem/1.3 "DM Sans", sans-serif;
  opacity: .72;
}
html[data-theme="dark"] .story-chapter-prev,
html[data-theme="dark"] .story-chapter-next,
body.dark-theme .story-chapter-prev,
body.dark-theme .story-chapter-next { color: #8dc5e4; }

/* ================= DESKTOP ================= */
@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .story-modal__panel {
    width: min(1180px, calc(100vw - 44px)) !important;
    height: min(760px, calc(100dvh - 34px)) !important;
    max-height: calc(100dvh - 34px) !important;
  }

  .story-modal__layout {
    display: grid !important;
    grid-template-columns: 226px minmax(0,1fr) !important;
    height: calc(100% - 64px) !important;
  }

  .story-modal__sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 22px 16px 18px !important;
    overflow: hidden !important;
  }

  .story-modal__sidebar h2 {
    margin: 0 4px 17px !important;
    font-size: 1.72rem !important;
    line-height: 1.02 !important;
  }

  .story-modal__nav {
    display: grid !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .story-modal__nav-item {
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
    column-gap: 7px !important;
  }
  .story-modal__nav-item > span {
    grid-row: 1 / span 2;
    font-size: .73rem !important;
    color: #7895a7 !important;
  }
  .story-modal__nav-item strong {
    font-size: .82rem !important;
    line-height: 1.22 !important;
    color: #2d3339 !important;
  }
  .story-modal__nav-item small {
    display: block !important;
    font-size: .65rem !important;
    line-height: 1.3 !important;
    color: #6f757c !important;
    opacity: 1 !important;
  }
  html[data-theme="dark"] .story-modal__nav-item strong,
  body.dark-theme .story-modal__nav-item strong { color: #ece9e5 !important; }
  html[data-theme="dark"] .story-modal__nav-item small,
  body.dark-theme .story-modal__nav-item small { color: #b7bdc4 !important; }

  .story-modal__sidebar blockquote {
    margin: auto 6px 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(112,135,150,.22);
    font-size: .88rem !important;
    line-height: 1.3 !important;
  }

  .story-modal__reader {
    padding: 24px 30px 22px !important;
    overflow: hidden !important;
  }

  .story-chapter.is-active {
    display: grid !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    height: 100% !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(390px, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr auto !important;
    column-gap: 34px !important;
    row-gap: 12px !important;
    align-content: stretch !important;
  }

  .story-chapter__heading {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    align-self: start;
  }
  .story-chapter__heading > p { margin: 0 0 4px !important; }
  .story-chapter__heading h3 {
    font-size: clamp(2.35rem, 2.9vw, 2.8rem) !important;
    line-height: .98 !important;
  }
  .story-chapter__heading em {
    margin-top: 5px !important;
    font-size: 1.22rem !important;
    line-height: 1.15 !important;
  }

  .story-chapter__media {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 405px !important;
    margin: 0 !important;
  }
  .story-chapter__media img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 440px !important;
    margin: 0 auto !important;
  }
  .story-chapter__media.is-portrait img { width: min(100%, 390px) !important; }
  .story-chapter__media.is-square img { width: min(100%, 405px) !important; }
  .story-chapter__media.is-landscape img { width: 100% !important; max-height: 330px !important; }

  .story-chapter__credit {
    margin: 8px auto 0 !important;
  }
  .story-chapter__credit a {
    min-width: 235px !important;
    max-width: 290px !important;
    padding: 7px 10px !important;
    gap: 8px !important;
    border-radius: 11px !important;
  }
  .story-chapter__credit strong { font-size: .71rem !important; }
  .story-chapter__credit small { font-size: .55rem !important; }

  .story-chapter__copy {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: .93rem !important;
    line-height: 1.56 !important;
  }
  .story-chapter__copy p { margin: 0 0 .7em !important; }

  .story-chapter__actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    margin-top: 2px !important;
  }
  .story-sources { margin: 0 !important; }
  .story-sources summary { padding: 7px 0 !important; font-size: .7rem !important; }
  .story-chapter__footer { margin: 2px 0 0 !important; padding: 2px 0 0 !important; }
}

/* ================= TABLET ================= */
@media (min-width: 561px) and (max-width: 900px) {
  /* Preserve tablet body layout but explicitly restore message. */
  .story-modal__sidebar blockquote {
    display: block !important;
    margin: 10px 0 0 !important;
    padding-top: 10px !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }
}

/* ================= MOBILE PORTRAIT ================= */
@media (max-width: 560px) and (orientation: portrait) {
  .story-modal__topbar {
    min-height: 56px !important;
    padding: 9px 12px 9px 14px !important;
    grid-template-columns: 1fr auto !important;
  }
  .story-modal__topbar > div { display: none !important; }
  .story-modal__close { width: 38px !important; height: 38px !important; }

  .story-modal__layout {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - 56px) !important;
  }
  .story-modal__sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 8px 11px 6px !important;
    overflow: hidden !important;
    border-right: 0 !important;
  }
  .story-modal__sidebar h2 { display: none !important; }
  .story-modal__nav {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  .story-modal__nav::-webkit-scrollbar { display: none !important; }
  .story-modal__nav-item {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    border-radius: 999px !important;
  }
  .story-modal__nav-item small { display: none !important; }
  .story-modal__nav-item strong { font-size: .74rem !important; white-space: nowrap !important; }
  .story-modal__nav-item > span { font-size: .69rem !important; }

  .story-modal__sidebar blockquote {
    display: block !important;
    margin: 7px 4px 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid rgba(112,135,150,.18);
    font-size: .72rem !important;
    line-height: 1.28 !important;
  }

  .story-modal__reader {
    flex: 1 1 auto !important;
    padding: 18px 17px 74px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .story-chapter.is-active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .story-chapter__heading { margin: 0 0 16px !important; }
  .story-chapter__heading h3 { font-size: clamp(2.15rem, 10vw, 2.5rem) !important; }
  .story-chapter__heading em { font-size: 1.05rem !important; }

  .story-chapter__media {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
  }
  .story-chapter__media img {
    width: auto !important;
    max-width: 94% !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
  .story-chapter__media.is-portrait img { width: min(90vw, 380px) !important; }
  .story-chapter__media.is-square img { width: min(92vw, 390px) !important; }
  .story-chapter__media.is-landscape img { width: 100% !important; }

  .story-chapter__credit { margin: 8px auto 0 !important; }
  .story-chapter__credit a {
    min-width: 0 !important;
    max-width: 260px !important;
    padding: 7px 9px !important;
    gap: 7px !important;
  }
  .story-chapter__credit strong { font-size: .67rem !important; }
  .story-chapter__credit small { font-size: .51rem !important; }

  .story-chapter__copy { font-size: .98rem !important; line-height: 1.66 !important; }

  /* Actions stay reachable without hunting at the very bottom. */
  .story-chapter__actions {
    position: sticky !important;
    bottom: -1px !important;
    z-index: 4 !important;
    margin: 18px -4px -1px !important;
    padding: 7px 4px 5px !important;
    background: linear-gradient(to top, rgba(255,250,248,.98) 78%, rgba(255,250,248,0)) !important;
  }
  html[data-theme="dark"] .story-chapter__actions,
  body.dark-theme .story-chapter__actions {
    background: linear-gradient(to top, rgba(20,26,32,.98) 78%, rgba(20,26,32,0)) !important;
  }
  .story-sources summary { padding: 7px 0 !important; }
}

/* ================= MOBILE LANDSCAPE ================= */
@media (max-height: 560px) and (orientation: landscape) {
  .story-modal__panel {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .story-modal__topbar {
    min-height: 50px !important;
    padding: 7px 10px 7px 14px !important;
  }
  .story-modal__close { width: 34px !important; height: 34px !important; }
  .story-modal__layout { display: block !important; height: calc(100% - 50px) !important; }
  .story-modal__sidebar { display: none !important; }
  .story-modal__reader {
    width: 100% !important;
    height: 100% !important;
    padding: 14px 20px 54px !important;
    overflow-y: auto !important;
  }
  .story-chapter.is-active {
    display: grid !important;
    grid-template-columns: minmax(250px,.9fr) minmax(0,1.1fr) !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 9px 24px !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
  }
  .story-chapter__heading { grid-column: 1 / -1 !important; margin: 0 !important; }
  .story-chapter__heading h3 { font-size: clamp(1.95rem,4.4vw,2.4rem) !important; }
  .story-chapter__heading em { font-size: .96rem !important; }

  .story-chapter__media {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 315px !important;
    margin: 0 auto !important;
  }
  .story-chapter__media img { max-width: 100% !important; max-height: 245px !important; margin: 0 auto !important; }
  .story-chapter__credit { margin: 6px auto 0 !important; }

  .story-chapter__copy {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
  }
  .story-chapter__actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: inherit !important;
    padding-top: 4px !important;
  }
}


/* =========================================================
   HOMEPAGE 15.27 — OUR STORY TOP-SPACING REFINEMENT
   Removes excess top gaps without changing established layouts
========================================================= */

/* Shared: start chapter content at the top of the reader. */
.story-chapter.is-active {
  align-content: start !important;
}

/* Desktop */
@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .story-modal__reader {
    padding-top: 14px !important;
  }

  .story-chapter.is-active {
    padding-top: 0 !important;
  }

  .story-chapter__heading {
    margin-top: 0 !important;
  }
}

/* Tablet: conservative spacing-only correction */
@media (min-width: 561px) and (max-width: 900px) {
  .story-modal__reader {
    padding-top: 14px !important;
  }

  .story-chapter.is-active {
    align-content: start !important;
    padding-top: 0 !important;
  }

  .story-chapter__heading {
    margin-top: 0 !important;
  }
}

/* Mobile portrait */
@media (max-width: 560px) and (orientation: portrait) {
  .story-modal__reader {
    padding-top: 12px !important;
  }

  .story-chapter__heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .story-modal__sidebar {
    padding-bottom: 4px !important;
  }
}

/* Mobile landscape */
@media (max-height: 560px) and (orientation: landscape) {
  .story-modal__reader {
    padding-top: 10px !important;
  }

  .story-chapter__heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* =========================================================
   HOMEPAGE 15.28 — DESKTOP REBALANCE
   Fixes remaining desktop geometry from v15.27
========================================================= */

@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  /* Pull the editorial spread upward and reduce unused canvas. */
  .story-modal__reader {
    padding: 12px 24px 18px !important;
    overflow: hidden !important;
  }

  .story-chapter.is-active {
    width: min(100%, 920px) !important;
    max-width: 920px !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .98fr) minmax(410px, 1.02fr) !important;
    grid-template-rows: auto 1fr auto !important;
    column-gap: 36px !important;
    row-gap: 10px !important;
    align-content: start !important;
    align-items: start !important;
  }

  .story-chapter__heading {
    grid-column: 1 / -1 !important;
    margin: 0 0 6px !important;
  }

  .story-chapter__heading h3 {
    font-size: clamp(2.35rem, 2.8vw, 2.75rem) !important;
  }

  .story-chapter__heading em {
    margin-top: 5px !important;
    font-size: 1.2rem !important;
  }

  /* REMOVE the visible photo panel entirely.
     Figure becomes a transparent layout wrapper. */
  .story-chapter__media,
  .story-chapter__media.is-portrait,
  .story-chapter__media.is-landscape,
  .story-chapter__media.is-square {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 390px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Make the actual media visually substantial. */
  .story-chapter__media img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 455px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 15px !important;
    box-shadow: 0 14px 34px rgba(24,23,28,.13) !important;
    background: transparent !important;
  }

  .story-chapter__media.is-portrait img {
    width: min(100%, 360px) !important;
  }

  .story-chapter__media.is-square img {
    width: min(100%, 380px) !important;
    max-height: 405px !important;
  }

  .story-chapter__media.is-landscape img {
    width: 100% !important;
    max-height: 315px !important;
  }

  /* Compact attribution directly under the image. */
  .story-chapter__credit {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
  }

  .story-chapter__credit a {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 280px !important;
    padding: 6px 9px !important;
    gap: 7px !important;
    border-radius: 10px !important;
  }

  .story-chapter__credit-icon {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }

  .story-chapter__credit strong {
    font-size: .69rem !important;
  }

  .story-chapter__credit small {
    font-size: .53rem !important;
  }

  /* Align narrative with top of the image, not halfway down the page. */
  .story-chapter__copy {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin: 0 !important;
    padding-top: 0 !important;
    font-size: 1rem !important;
    line-height: 1.58 !important;
    max-width: 100% !important;
  }

  .story-chapter__copy p {
    margin: 0 0 .78em !important;
  }

  /* Keep sources + navigation visible inside the first desktop frame. */
  .story-chapter__actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    margin: 0 !important;
    padding-top: 4px !important;
  }

  .story-sources,
  .story-chapter__sources {
    margin: 0 !important;
  }

  .story-sources summary,
  .story-chapter__sources summary {
    padding: 7px 0 !important;
    font-size: .72rem !important;
  }

  .story-chapter__footer {
    margin: 2px 0 0 !important;
    padding: 2px 0 0 !important;
  }

  /* Left rail readability and geometry. */
  .story-modal__sidebar {
    padding: 18px 14px 16px !important;
  }

  .story-modal__sidebar h2 {
    font-size: 1.68rem !important;
    margin-bottom: 14px !important;
  }

  .story-modal__nav-item {
    min-height: 56px !important;
    padding: 9px 9px !important;
  }

  .story-modal__nav-item strong {
    font-size: .83rem !important;
    color: #283038 !important;
  }

  .story-modal__nav-item small {
    font-size: .67rem !important;
    line-height: 1.32 !important;
    color: #666f77 !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] .story-modal__nav-item strong,
  body.dark-theme .story-modal__nav-item strong {
    color: #f0ece7 !important;
  }

  html[data-theme="dark"] .story-modal__nav-item small,
  body.dark-theme .story-modal__nav-item small {
    color: #c3c7cc !important;
  }

  .story-modal__sidebar blockquote {
    margin-top: auto !important;
    font-size: .88rem !important;
    line-height: 1.28 !important;
  }
}


/* =========================================================
   HOMEPAGE 15.30 — DESKTOP OUR STORY CLEAN RESET
   Baseline: v15.28
   Scope: DESKTOP ONLY. Mobile/tablet intentionally untouched.
========================================================= */

@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  /* -------------------------------------------------------
     1. SHELL GEOMETRY
     Root fix for the persistent top gap:
     old base CSS had .story-modal__layout { padding-top:82px; }.
  ------------------------------------------------------- */
  #storyModal .story-modal__panel {
    display: grid !important;
    grid-template-rows: 64px minmax(0, 1fr) !important;
    width: min(1180px, calc(100vw - 44px)) !important;
    height: min(760px, calc(100dvh - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
  }

  #storyModal .story-modal__topbar {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 12px 14px 12px 22px !important;
  }

  #storyModal .story-modal__layout {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 226px minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;            /* ROOT FIX: removes 82px legacy gap */
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* -------------------------------------------------------
     2. LEFT RAIL
  ------------------------------------------------------- */
  #storyModal .story-modal__sidebar {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 18px 14px 15px !important;
    overflow: hidden !important;
  }

  #storyModal .story-modal__sidebar h2 {
    margin: 0 5px 14px !important;
    font-size: 1.68rem !important;
    line-height: 1.02 !important;
  }

  #storyModal .story-modal__nav {
    display: grid !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  #storyModal .story-modal__nav-item {
    display: grid !important;
    grid-template-columns: 29px minmax(0, 1fr) !important;
    grid-template-areas: "num title" "num sub" !important;
    width: 100% !important;
    min-height: 55px !important;
    padding: 8px 9px !important;
    column-gap: 7px !important;
    row-gap: 2px !important;
  }

  #storyModal .story-modal__nav-item > span {
    grid-area: num !important;
    font-size: .73rem !important;
    line-height: 1.25 !important;
    color: #7692a4 !important;
  }

  #storyModal .story-modal__nav-item strong {
    grid-area: title !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
    color: #283039 !important;
  }

  #storyModal .story-modal__nav-item small {
    grid-area: sub !important;
    display: block !important;
    font-size: .66rem !important;
    line-height: 1.28 !important;
    color: #626b73 !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] #storyModal .story-modal__nav-item strong,
  body.dark-theme #storyModal .story-modal__nav-item strong {
    color: #f0ece8 !important;
  }

  html[data-theme="dark"] #storyModal .story-modal__nav-item small,
  body.dark-theme #storyModal .story-modal__nav-item small {
    color: #c0c5cb !important;
  }

  #storyModal .story-modal__sidebar blockquote {
    display: block !important;
    margin: auto 6px 0 !important;
    padding: 13px 0 0 !important;
    border-top: 1px solid rgba(126, 154, 171, .23) !important;
    font-size: .88rem !important;
    line-height: 1.28 !important;
  }

  /* -------------------------------------------------------
     3. READER — no top blank band
  ------------------------------------------------------- */
  #storyModal .story-modal__reader {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 14px 24px 16px !important;
    overflow: hidden !important;
  }

  #storyModal .story-chapter[hidden] {
    display: none !important;
  }

  #storyModal .story-chapter.is-active {
    display: grid !important;
    grid-template-columns: minmax(345px, .92fr) minmax(405px, 1.08fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    column-gap: 36px !important;
    row-gap: 10px !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    align-content: start !important;
    align-items: start !important;
  }

  #storyModal .story-chapter__heading {
    grid-column: 1 / -1 !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
  }

  #storyModal .story-chapter__heading > p {
    margin: 0 0 4px !important;
  }

  #storyModal .story-chapter__heading h3 {
    margin: 0 !important;
    font-size: clamp(2.35rem, 2.7vw, 2.75rem) !important;
    line-height: .98 !important;
  }

  #storyModal .story-chapter__heading em {
    display: block !important;
    margin-top: 5px !important;
    font-size: 1.18rem !important;
    line-height: 1.14 !important;
  }

  /* -------------------------------------------------------
     4. MEDIA — IMAGE ITSELF IS THE VISUAL
     Root fix for the persistent pale "photo container":
     old base CSS forced aspect-ratio:16/8.4 ON THE IMG.
  ------------------------------------------------------- */
  #storyModal .story-chapter__media,
  #storyModal .story-chapter__media.is-portrait,
  #storyModal .story-chapter__media.is-square,
  #storyModal .story-chapter__media.is-landscape {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #storyModal .story-chapter__media::before,
  #storyModal .story-chapter__media::after {
    content: none !important;
    display: none !important;
  }

  #storyModal .story-chapter__media img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 485px !important;
    aspect-ratio: auto !important;     /* ROOT FIX: removes wide image box */
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 34px rgba(24,23,28,.14) !important;
  }

  #storyModal .story-chapter__media.is-portrait img {
    width: min(100%, 320px) !important;
  }

  #storyModal .story-chapter__media.is-square img {
    width: min(100%, 350px) !important;
    max-height: 410px !important;
  }

  #storyModal .story-chapter__media.is-landscape {
    max-width: 390px !important;
  }

  #storyModal .story-chapter__media.is-landscape img {
    width: 100% !important;
    max-height: 310px !important;
  }

  /* Source chip hugs content beneath photo. */
  #storyModal .story-chapter__credit {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #storyModal .story-chapter__credit a {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 280px !important;
    padding: 6px 9px !important;
    gap: 7px !important;
    border-radius: 10px !important;
  }

  #storyModal .story-chapter__credit-icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }

  #storyModal .story-chapter__credit strong {
    font-size: .69rem !important;
  }

  #storyModal .story-chapter__credit small {
    font-size: .53rem !important;
  }

  /* -------------------------------------------------------
     5. COPY + ACTIONS — aligned and in the same frame
  ------------------------------------------------------- */
  #storyModal .story-chapter__copy {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .96rem !important;
    line-height: 1.56 !important;
  }

  #storyModal .story-chapter__copy p {
    margin: 0 0 .72em !important;
  }

  #storyModal .story-chapter__actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 0 0 !important;
  }

  #storyModal .story-sources,
  #storyModal .story-chapter__sources {
    margin: 0 !important;
  }

  #storyModal .story-sources summary,
  #storyModal .story-chapter__sources summary {
    padding: 7px 0 !important;
    font-size: .7rem !important;
  }

  #storyModal .story-chapter__footer {
    margin: 2px 0 0 !important;
    padding: 2px 0 0 !important;
  }
}


/* =========================================================
   HOMEPAGE 15.31 — ISOLATED DESKTOP OUR STORY
   Completely separate desktop component to stop legacy CSS conflicts.
========================================================= */
.osd-panel{display:none}
@media (min-width:901px), (min-width:700px) and (max-width:900px) and (orientation:portrait){
  #storyModal .story-modal__panel--legacy{display:none!important}
  #storyModal .osd-panel{position:absolute;inset:clamp(10px,1.3vw,18px);display:grid;grid-template-rows:64px minmax(0,1fr);overflow:hidden;border:1px solid rgba(183,211,228,.42);border-radius:22px;background:radial-gradient(circle at 92% 4%,rgba(246,192,206,.22),transparent 25%),linear-gradient(145deg,#fffdfb 0%,#fff8f6 55%,#f6fbff 100%);color:#28262b;box-shadow:0 28px 80px rgba(0,0,0,.35)}
  #storyModal .osd-header{display:grid;grid-template-columns:1fr auto 44px;align-items:center;gap:18px;padding:0 16px 0 24px;border-bottom:1px solid rgba(120,154,175,.16);background:rgba(255,253,251,.9)}
  #storyModal .osd-kicker{margin:0;color:#6ca7ca;font:700 .7rem/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase}
  #storyModal .osd-kicker:after{display:inline-block;width:38px;height:1px;margin:0 0 3px 12px;content:"";background:#93b7cb}
  #storyModal .osd-mark{text-align:right}.osd-mark span,.osd-mark small{display:block;text-transform:uppercase;letter-spacing:.2em}.osd-mark span{color:#9a6370;font:600 .58rem/1.2 "DM Sans",sans-serif}.osd-mark small{margin-top:5px;color:#df8ca0;font:600 .51rem/1.2 "DM Sans",sans-serif}
  #storyModal .osd-close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.78);color:#25242a;font:300 1.6rem/1 "DM Sans",sans-serif;cursor:pointer}
  #storyModal .osd-body{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0;overflow:hidden}
  #storyModal .osd-rail{display:flex;flex-direction:column;min-height:0;padding:18px 14px 14px;border-right:1px solid rgba(120,154,175,.16);background:rgba(248,251,253,.5)}
  #storyModal .osd-rail h2{white-space:pre-line;margin:0 5px 15px;font:500 1.74rem/1 "Cormorant Garamond",serif}
  #storyModal .osd-nav{display:grid;gap:4px}
  #storyModal .osd-nav-item{display:grid;grid-template-columns:29px minmax(0,1fr);grid-template-areas:"n t" "n s";gap:2px 7px;width:100%;min-height:55px;padding:9px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;text-align:left;cursor:pointer}
  #storyModal .osd-nav-item>span{grid-area:n;color:#7692a4;font:600 .73rem/1.25 "DM Sans",sans-serif}.osd-nav-item strong{grid-area:t;font:600 .82rem/1.2 "DM Sans",sans-serif;color:#283039}.osd-nav-item small{grid-area:s;color:#626b73;font:500 .66rem/1.28 "DM Sans",sans-serif}.osd-nav-item.is-active{border-color:rgba(121,170,199,.24);background:linear-gradient(135deg,rgba(184,216,235,.28),rgba(246,192,206,.14))}
  #storyModal .osd-rail blockquote{margin:auto 6px 0;padding-top:13px;border-top:1px solid rgba(126,154,171,.24);color:#6f676a;font:italic 500 .88rem/1.28 "Cormorant Garamond",serif}
  #storyModal .osd-reader{min-width:0;min-height:0;padding:14px 24px 16px;overflow:hidden}
  #storyModal .osd-chapter[hidden]{display:none!important}
  #storyModal .osd-chapter.is-active{display:grid;height:100%;grid-template-rows:auto minmax(0,1fr);gap:10px;max-width:920px;margin:0 auto;min-height:0}
  #storyModal .osd-heading{margin:0}.osd-heading p{margin:0 0 4px;color:#5b9bc3;font:700 .7rem/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase}.osd-heading h3{margin:0;font:500 clamp(2.35rem,2.7vw,2.75rem)/.98 "Cormorant Garamond",serif;letter-spacing:-.03em}.osd-heading em{display:block;margin-top:5px;color:#6e6668;font:italic 500 1.18rem/1.14 "Cormorant Garamond",serif}
  #storyModal .osd-main{display:grid;grid-template-columns:minmax(340px,.92fr) minmax(410px,1.08fr);gap:36px;min-height:0;align-items:start}
  #storyModal .osd-media{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
  #storyModal .osd-media img{display:block;width:auto;height:min(440px,54vh);max-width:100%;object-fit:contain;border-radius:14px;box-shadow:0 14px 34px rgba(24,23,28,.14);background:transparent}
  #storyModal .osd-credit{display:inline-flex;align-items:center;gap:7px;width:auto;max-width:280px;margin-top:8px;padding:6px 9px;border:1px solid rgba(231,157,181,.34);border-radius:10px;background:rgba(255,255,255,.72);color:#34363b;text-decoration:none}.osd-credit-icon{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#f6a066,#e84c88 52%,#8f67d8);color:#fff}.osd-credit>span:last-child{display:grid;gap:1px}.osd-credit strong{font:600 .69rem/1.18 "DM Sans",sans-serif}.osd-credit small{font:500 .53rem/1.2 "DM Sans",sans-serif;opacity:.74}
  #storyModal .osd-copy-panel{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
  #storyModal .osd-copy{flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px;color:#49464a;font:400 .96rem/1.55 "DM Sans",sans-serif;scrollbar-width:thin}.osd-copy p{margin:0 0 .72em}
  #storyModal .osd-actions{position:relative;flex:0 0 auto;margin-top:6px;padding-top:5px;border-top:1px solid rgba(104,158,190,.28)}
  #storyModal .osd-sources{position:relative}.osd-sources summary{display:flex;justify-content:space-between;align-items:center;padding:7px 0;color:#668ca4;font:700 .7rem/1 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;list-style:none}.osd-sources summary::-webkit-details-marker{display:none}
  #storyModal .osd-source-list{position:absolute;right:0;bottom:40px;z-index:10;display:grid;gap:7px;width:min(520px,100%);max-height:220px;overflow:auto;margin:0;padding:12px;list-style:none;border:1px solid rgba(104,158,190,.24);border-radius:12px;background:#fffdfa;box-shadow:0 16px 38px rgba(30,30,35,.16)}.osd-source-list li{margin:0}.osd-source-list a{display:grid;grid-template-columns:150px 1fr;gap:8px;color:#4b6676;text-decoration:none;font:500 .64rem/1.3 "DM Sans",sans-serif}.osd-source-list a span:first-child{color:#80929e}.osd-source-list a strong{font-weight:600}
  #storyModal .osd-step{display:flex;justify-content:flex-end;gap:10px;margin-top:3px}.osd-step button{border:0;background:transparent;color:#5c99bc;font:700 .68rem/1 "DM Sans",sans-serif;cursor:pointer;padding:6px}.osd-step span{font:500 .68rem/1.2 "DM Sans",sans-serif;opacity:.7;padding:6px}
  html[data-theme="dark"] #storyModal .osd-panel,body.dark-theme #storyModal .osd-panel{background:#141a20;color:#eee9e4;border-color:rgba(255,255,255,.1)}html[data-theme="dark"] #storyModal .osd-header,body.dark-theme #storyModal .osd-header,html[data-theme="dark"] #storyModal .osd-rail,body.dark-theme #storyModal .osd-rail{background:#0e1318;border-color:rgba(255,255,255,.08)}html[data-theme="dark"] #storyModal .osd-nav-item strong,body.dark-theme #storyModal .osd-nav-item strong{color:#f0ece8}html[data-theme="dark"] #storyModal .osd-nav-item small,body.dark-theme #storyModal .osd-nav-item small{color:#c0c5cb}html[data-theme="dark"] #storyModal .osd-heading h3,body.dark-theme #storyModal .osd-heading h3,html[data-theme="dark"] #storyModal .osd-heading em,body.dark-theme #storyModal .osd-heading em,html[data-theme="dark"] #storyModal .osd-copy,body.dark-theme #storyModal .osd-copy{color:#eee9e4}html[data-theme="dark"] #storyModal .osd-credit,body.dark-theme #storyModal .osd-credit{background:#10161c;color:#f1ece7;border-color:rgba(238,166,188,.24)}html[data-theme="dark"] #storyModal .osd-source-list,body.dark-theme #storyModal .osd-source-list{background:#10161c;border-color:rgba(255,255,255,.12)}
}
@media (max-width:699px), (min-width:700px) and (max-width:900px) and (orientation:landscape){#storyModal .osd-panel{display:none!important}#storyModal .story-modal__panel--legacy{display:block!important}}


/* =========================================================
   HOMEPAGE 15.32 — ISOLATED DESKTOP POLISH
   Completes the missed desktop fixes from v15.31.
========================================================= */

@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  /* 1) Tighten header and eliminate the large band below it */
  #storyModal .osd-panel {
    grid-template-rows: 56px minmax(0, 1fr) !important;
  }

  #storyModal .osd-header {
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 14px 0 22px !important;
  }

  #storyModal .osd-close {
    width: 38px !important;
    height: 38px !important;
  }

  #storyModal .osd-body {
    min-height: 0 !important;
  }

  #storyModal .osd-rail {
    padding-top: 12px !important;
  }

  #storyModal .osd-reader {
    padding-top: 8px !important;
  }

  #storyModal .osd-heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 2) Remove dead space above the quote in the left rail */
  #storyModal .osd-rail blockquote {
    margin: 18px 6px 0 !important;
    padding-top: 12px !important;
  }

  /* 3) Keep media visually dominant without a visible container */
  #storyModal .osd-media {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  #storyModal .osd-media img {
    height: min(470px, 58vh) !important;
    max-height: 470px !important;
  }

  /* 4) Lock Source Articles and chapter navigation in one action bar */
  #storyModal .osd-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 8px !important;
    padding-top: 7px !important;
    border-top: 1px solid rgba(104,158,190,.28) !important;
  }

  #storyModal .osd-sources {
    position: relative !important;
    min-width: 0 !important;
  }

  #storyModal .osd-sources summary {
    padding: 6px 0 !important;
  }

  #storyModal .osd-step {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: max-content !important;
    margin: 0 !important;
  }

  #storyModal .osd-step button,
  #storyModal .osd-step span {
    white-space: nowrap !important;
  }

  /* Source list floats upward; opening it never changes row height
     and can never push/hide Previous/Next. */
  #storyModal .osd-source-list {
    position: absolute !important;
    right: auto !important;
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    width: min(560px, calc(100vw - 360px)) !important;
    max-height: 230px !important;
    overflow-y: auto !important;
    z-index: 30 !important;
    margin: 0 !important;
  }

  /* 5) Chapter 4 and all long source lists remain fully accessible */
  #storyModal .osd-source-list a {
    grid-template-columns: 145px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  #storyModal .osd-source-list strong,
  #storyModal .osd-source-list span {
    overflow-wrap: anywhere !important;
  }

  /* 6) Slightly tighten reader geometry so actions remain visible */
  #storyModal .osd-main {
    min-height: 0 !important;
    align-items: stretch !important;
  }

  #storyModal .osd-copy-panel {
    min-height: 0 !important;
    height: 100% !important;
  }

  #storyModal .osd-copy {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2px !important;
  }
}


/* =========================================================
   HOMEPAGE 15.33 — DESKTOP MODAL SCALE + QUOTE READABILITY
   Scope: isolated desktop Our Story only.
========================================================= */

@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  /* Make the editorial modal a contained desktop panel instead of
     nearly filling the entire viewport. */
  #storyModal .osd-panel {
    inset: 50% auto auto 50% !important;
    width: min(1180px, 92vw) !important;
    height: min(720px, 88vh) !important;
    max-width: 1180px !important;
    max-height: 720px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Keep internal geometry proportional to the reduced modal. */
  #storyModal .osd-body {
    grid-template-columns: 214px minmax(0, 1fr) !important;
  }

  #storyModal .osd-reader {
    padding: 8px 22px 14px !important;
  }

  #storyModal .osd-main {
    grid-template-columns: minmax(325px, .92fr) minmax(390px, 1.08fr) !important;
    gap: 32px !important;
  }

  #storyModal .osd-media img {
    height: min(430px, 54vh) !important;
    max-height: 430px !important;
  }

  /* Stronger quote contrast in light mode. */
  #storyModal .osd-rail blockquote {
    color: #51494d !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }

  /* Matching readable contrast in dark mode. */
  html[data-theme="dark"] #storyModal .osd-rail blockquote,
  body.dark-theme #storyModal .osd-rail blockquote {
    color: #d8d1cc !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   HOMEPAGE 15.34 — DESKTOP SOURCE DRAWER + SCALE REFINEMENT
   Scope: isolated desktop Our Story only.
========================================================= */

@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  /* Slightly more contained desktop modal */
  #storyModal .osd-panel {
    width: min(1100px, 90vw) !important;
    height: min(680px, 84vh) !important;
    max-width: 1100px !important;
    max-height: 680px !important;
  }

  #storyModal .osd-body {
    grid-template-columns: 205px minmax(0, 1fr) !important;
  }

  #storyModal .osd-reader {
    padding: 8px 20px 12px !important;
  }

  #storyModal .osd-main {
    grid-template-columns: minmax(315px, .9fr) minmax(380px, 1.1fr) !important;
    gap: 28px !important;
  }

  #storyModal .osd-media img {
    height: min(410px, 52vh) !important;
    max-height: 410px !important;
  }

  /* Softer quote tone: readable without harsh contrast */
  #storyModal .osd-rail blockquote {
    color: #746b6f !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] #storyModal .osd-rail blockquote,
  body.dark-theme #storyModal .osd-rail blockquote {
    color: #b7adb1 !important;
    opacity: 1 !important;
  }

  /* Right column is explicitly split into copy + actions.
     When sources open, the copy area shrinks/scrolls;
     the source drawer never overlays the write-up. */
  #storyModal .osd-copy-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  #storyModal .osd-copy {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
  }

  #storyModal .osd-actions {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 12px !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(118,150,170,.24) !important;
  }

  #storyModal .osd-sources {
    position: static !important;
    min-width: 0 !important;
  }

  #storyModal .osd-sources summary {
    color: #718b9b !important;
    padding: 6px 0 !important;
  }

  html[data-theme="dark"] #storyModal .osd-sources summary,
  body.dark-theme #storyModal .osd-sources summary {
    color: #9eb0bb !important;
  }

  /* Inline source drawer: max ~3 visible rows, scrolls internally if more.
     This replaces the old popover that covered the chapter text. */
  #storyModal .osd-source-list {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 132px !important;
    overflow-y: auto !important;
    margin: 5px 0 0 !important;
    padding: 5px 0 2px !important;
    border: 0 !important;
    border-top: 1px solid rgba(118,150,170,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #storyModal .osd-source-list li {
    min-height: 38px !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(118,150,170,.12) !important;
  }

  #storyModal .osd-source-list li:last-child {
    border-bottom: 0 !important;
  }

  #storyModal .osd-source-list a {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 8px !important;
    color: #61717b !important;
    font-size: .63rem !important;
    line-height: 1.28 !important;
  }

  #storyModal .osd-source-list a span:first-child {
    color: #87949c !important;
  }

  #storyModal .osd-source-list a strong {
    color: #4f616c !important;
    font-weight: 600 !important;
  }

  html[data-theme="dark"] #storyModal .osd-source-list a,
  body.dark-theme #storyModal .osd-source-list a {
    color: #aeb8bf !important;
  }

  html[data-theme="dark"] #storyModal .osd-source-list a span:first-child,
  body.dark-theme #storyModal .osd-source-list a span:first-child {
    color: #8f9aa2 !important;
  }

  html[data-theme="dark"] #storyModal .osd-source-list a strong,
  body.dark-theme #storyModal .osd-source-list a strong {
    color: #c3ccd2 !important;
  }

  #storyModal .osd-source-list a:hover strong,
  #storyModal .osd-source-list a:focus-visible strong {
    color: #5f95b5 !important;
  }

  html[data-theme="dark"] #storyModal .osd-source-list a:hover strong,
  body.dark-theme #storyModal .osd-source-list a:hover strong,
  html[data-theme="dark"] #storyModal .osd-source-list a:focus-visible strong,
  body.dark-theme #storyModal .osd-source-list a:focus-visible strong {
    color: #91c2df !important;
  }

  /* Keep chapter step navigation readable and fixed to the action row */
  #storyModal .osd-step {
    align-self: end !important;
    margin: 0 !important;
  }
}


/* =========================================================
   HOMEPAGE 15.35 — DESKTOP SOURCE ROW FIX
   Restores v15.33 modal scale and optimizes source rows.
========================================================= */

@media (min-width: 901px),
       (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {

  /* Restore roomier contained modal from v15.33 */
  #storyModal .osd-panel {
    width: min(1180px, 92vw) !important;
    height: min(720px, 88vh) !important;
    max-width: 1180px !important;
    max-height: 720px !important;
  }

  #storyModal .osd-body {
    grid-template-columns: 214px minmax(0, 1fr) !important;
  }

  #storyModal .osd-reader {
    padding: 8px 22px 14px !important;
  }

  #storyModal .osd-main {
    grid-template-columns: minmax(325px, .92fr) minmax(390px, 1.08fr) !important;
    gap: 32px !important;
  }

  #storyModal .osd-media img {
    height: min(430px, 54vh) !important;
    max-height: 430px !important;
  }

  /* Keep source drawer inline and non-overlapping */
  #storyModal .osd-source-list {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 138px !important;
    overflow-y: auto !important;
    margin: 5px 0 0 !important;
    padding: 4px 0 2px !important;
    border: 0 !important;
    border-top: 1px solid rgba(118,150,170,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #storyModal .osd-source-list li {
    min-height: 34px !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid rgba(118,150,170,.10) !important;
  }

  #storyModal .osd-source-list li:last-child {
    border-bottom: 0 !important;
  }

  /* Single-line source row:
     metadata left + title center + external-link affordance right */
  #storyModal .osd-source-list a {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    color: #5f6d76 !important;
    font-size: .64rem !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
  }

  #storyModal .osd-source-list a span:first-child {
    color: #7d8991 !important;
    white-space: nowrap !important;
  }

  #storyModal .osd-source-list a strong {
    min-width: 0 !important;
    color: #4b5f6b !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Existing trailing arrow/link span */
  #storyModal .osd-source-list a span:last-child {
    justify-self: end !important;
    white-space: nowrap !important;
  }

  #storyModal .osd-source-list a:hover strong,
  #storyModal .osd-source-list a:focus-visible strong {
    color: #5f95b5 !important;
  }

  html[data-theme="dark"] #storyModal .osd-source-list a,
  body.dark-theme #storyModal .osd-source-list a {
    color: #aeb7bd !important;
  }

  html[data-theme="dark"] #storyModal .osd-source-list a span:first-child,
  body.dark-theme #storyModal .osd-source-list a span:first-child {
    color: #8e989f !important;
  }

  html[data-theme="dark"] #storyModal .osd-source-list a strong,
  body.dark-theme #storyModal .osd-source-list a strong {
    color: #c2cad0 !important;
  }

  /* Softer quote colors retained */
  #storyModal .osd-rail blockquote {
    color: #746b6f !important;
  }

  html[data-theme="dark"] #storyModal .osd-rail blockquote,
  body.dark-theme #storyModal .osd-rail blockquote {
    color: #b7adb1 !important;
  }
}


/* =========================================================
   HOMEPAGE 15.36 — MOBILE OUR STORY FIX
   Baseline: verified working v15.35 package supplied by user
   Scope: legacy/mobile Our Story modal ONLY (<= 900px)
   Desktop isolated .osd-* component is intentionally untouched.
========================================================= */

/* ---------------------------------------------------------
   PHONE PORTRAIT
   Keep v15.35 proportions. Only remove excess top spacing,
   keep the real photo with no wrapper/card, and stop actions
   / source articles from floating over the chapter write-up.
--------------------------------------------------------- */
@media (max-width: 560px) and (orientation: portrait) {

  /* Compact the space between chapter rail and chapter heading. */
  #storyModal .story-modal__sidebar {
    padding-bottom: 2px !important;
  }

  #storyModal .story-modal__sidebar blockquote {
    margin-top: 4px !important;
    padding-top: 5px !important;
  }

  #storyModal .story-modal__reader {
    padding-top: 6px !important;
    padding-bottom: 28px !important;
  }

  #storyModal .story-chapter.is-active {
    padding-top: 0 !important;
    align-content: start !important;
  }

  #storyModal .story-chapter__heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Figure is layout only — retain the image itself. */
  #storyModal .story-chapter__media,
  #storyModal .story-chapter__media.is-portrait,
  #storyModal .story-chapter__media.is-square,
  #storyModal .story-chapter__media.is-landscape {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #storyModal .story-chapter__media::before,
  #storyModal .story-chapter__media::after {
    content: none !important;
    display: none !important;
  }

  #storyModal .story-chapter__media img {
    display: block !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  /* Source Articles and Previous/Next must follow the write-up in
     normal document flow. This is the overlap fix. */
  #storyModal .story-chapter__actions {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 6px 0 0 !important;
    background: transparent !important;
  }

  html[data-theme="dark"] #storyModal .story-chapter__actions,
  body.dark-theme #storyModal .story-chapter__actions {
    background: transparent !important;
  }

  #storyModal .story-sources {
    position: static !important;
    margin: 0 !important;
  }

  #storyModal .story-sources ul {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #storyModal .story-sources a {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 8px !important;
  }

  #storyModal .story-sources a span:first-child {
    grid-column: 1 / -1 !important;
  }

  #storyModal .story-sources a strong {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #storyModal .story-chapter__footer {
    position: static !important;
    margin-top: 8px !important;
  }
}


/* ---------------------------------------------------------
   PHONE / SMALL TABLET LANDSCAPE
   Keep photo left and write-up right. Sources become a normal
   third row underneath the write-up and therefore cannot overlap.
--------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {

  #storyModal .story-modal__reader {
    padding-top: 6px !important;
    padding-bottom: 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #storyModal .story-chapter.is-active {
    grid-template-columns:
      minmax(220px, .86fr)
      minmax(0, 1.14fr) !important;

    /* Content-driven rows allow an opened source list to add height.
       The reader scrolls instead of the source drawer covering text. */
    grid-template-rows:
      auto
      auto
      auto !important;

    align-content: start !important;
    align-items: start !important;
    gap: 7px 20px !important;
    padding-top: 0 !important;
  }

  #storyModal .story-chapter__heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Photo wrapper remains transparent; only the actual photo is shown. */
  #storyModal .story-chapter__media,
  #storyModal .story-chapter__media.is-portrait,
  #storyModal .story-chapter__media.is-square,
  #storyModal .story-chapter__media.is-landscape {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #storyModal .story-chapter__media::before,
  #storyModal .story-chapter__media::after {
    content: none !important;
    display: none !important;
  }

  #storyModal .story-chapter__media img {
    height: auto !important;
    max-height: 220px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  #storyModal .story-chapter__copy {
    align-self: start !important;
    min-height: 0 !important;
  }

  /* Critical: actions are no longer sticky. */
  #storyModal .story-chapter__actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    align-self: start !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 4px 0 0 !important;
    background: transparent !important;
  }

  #storyModal .story-sources {
    position: static !important;
    margin: 0 !important;
  }

  #storyModal .story-sources ul {
    position: static !important;
    max-height: none !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
  }

  /* Compact one-row source entries in landscape.
     Long article titles truncate instead of spilling over the copy. */
  #storyModal .story-sources a {
    grid-template-columns:
      128px
      minmax(0, 1fr)
      auto !important;
    gap: 6px !important;
    align-items: center !important;
  }

  #storyModal .story-sources a span:first-child,
  #storyModal .story-sources a strong {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #storyModal .story-sources a span:first-child {
    grid-column: auto !important;
  }

  #storyModal .story-chapter__footer {
    position: static !important;
    margin-top: 5px !important;
  }
}

/* =========================================================
   HOMEPAGE 15.37 — TABLET OUR STORY POLISH
   Baseline: matched v15.36 package
   Scope:
   - tablet portrait: 700–900px, portrait
   - tablet landscape: 901–1180px
   - Global.css untouched
========================================================= */

/* ---------------------------------------------------------
   TABLET PORTRAIT
   Use the same full vertical chapter rail seen in landscape.
   The right reading area stays single-column because portrait
   width is better used for comfortable text rather than forcing
   photo + copy into two cramped columns.
--------------------------------------------------------- */
@media (min-width:700px) and (max-width:900px) and (orientation:portrait) {

  #storyModal .story-modal__panel--legacy {
    display:none !important;
  }

  #storyModal .osd-panel {
    display:grid !important;
    width:min(760px, 94vw) !important;
    height:min(1040px, 90vh) !important;
    max-width:760px !important;
    max-height:1040px !important;
  }

  #storyModal .osd-body {
    grid-template-columns:190px minmax(0,1fr) !important;
  }

  /* Full landscape-style left rail */
  #storyModal .osd-rail {
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    padding:14px 12px 12px !important;
    overflow:hidden !important;
  }

  #storyModal .osd-rail h2 {
    display:block !important;
    margin:0 5px 12px !important;
    font-size:1.45rem !important;
    line-height:1 !important;
  }

  #storyModal .osd-nav {
    display:grid !important;
    gap:3px !important;
  }

  #storyModal .osd-nav-item,
  #storyModal .osd-nav-item[hidden] {
    display:grid !important;
    grid-template-columns:25px minmax(0,1fr) !important;
    grid-template-areas:"n t" "n s" !important;
    gap:1px 6px !important;
    min-height:49px !important;
    padding:7px 8px !important;
  }

  #storyModal .osd-nav-item > span {
    font-size:.66rem !important;
  }

  #storyModal .osd-nav-item strong {
    display:block !important;
    font-size:.72rem !important;
    line-height:1.15 !important;
  }

  #storyModal .osd-nav-item small {
    display:block !important;
    font-size:.57rem !important;
    line-height:1.18 !important;
  }

  #storyModal .osd-rail blockquote {
    margin:auto 5px 0 !important;
    padding-top:10px !important;
    font-size:.76rem !important;
    line-height:1.24 !important;
  }

  #storyModal .osd-reader {
    padding:9px 16px 12px !important;
    overflow:hidden !important;
  }

  #storyModal .osd-chapter.is-active {
    height:100% !important;
    min-height:0 !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    gap:7px !important;
  }

  #storyModal .osd-heading h3 {
    font-size:2.15rem !important;
  }

  #storyModal .osd-heading em {
    font-size:1.02rem !important;
  }

  /* Portrait reading column: photo, credit, then copy/actions */
  #storyModal .osd-main {
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  #storyModal .osd-media {
    flex:0 0 auto !important;
  }

  #storyModal .osd-media img {
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:330px !important;
    object-fit:contain !important;
  }

  #storyModal .osd-credit {
    margin-top:6px !important;
  }

  #storyModal .osd-copy-panel {
    display:grid !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
  }

  #storyModal .osd-copy {
    min-height:0 !important;
    overflow-y:auto !important;
    padding-right:5px !important;
    font-size:.88rem !important;
    line-height:1.48 !important;
  }

  #storyModal .osd-actions {
    position:static !important;
    flex:0 0 auto !important;
    margin-top:5px !important;
    padding-top:5px !important;
  }

  /* Inline sources consume their own space and never cover copy */
  #storyModal .osd-source-list {
    position:static !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    max-height:112px !important;
    overflow-y:auto !important;
    margin:4px 0 0 !important;
    padding:3px 0 1px !important;
    border:0 !important;
    border-top:1px solid rgba(118,150,170,.18) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #storyModal .osd-source-list li {
    min-height:30px !important;
    padding:3px 0 !important;
  }

  #storyModal .osd-source-list a {
    grid-template-columns:118px minmax(0,1fr) 14px !important;
    gap:7px !important;
    font-size:.58rem !important;
  }

  #storyModal .osd-source-list a span:first-child,
  #storyModal .osd-source-list a strong {
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #storyModal .osd-step {
    margin-top:3px !important;
  }
}


/* ---------------------------------------------------------
   TABLET LANDSCAPE
   Keep existing landscape composition, but make the right panel
   an explicit copy + actions grid so an opened source list can
   only reduce the scrollable copy area — never overlap it.
--------------------------------------------------------- */
@media (min-width:901px) and (max-width:1180px) {

  #storyModal .osd-copy-panel {
    display:grid !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  #storyModal .osd-copy {
    min-height:0 !important;
    overflow-y:auto !important;
    padding-right:6px !important;
  }

  #storyModal .osd-actions {
    position:static !important;
    inset:auto !important;
    align-self:end !important;
    margin-top:5px !important;
    padding-top:5px !important;
    background:transparent !important;
  }

  #storyModal .osd-sources {
    position:static !important;
  }

  #storyModal .osd-source-list {
    position:static !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    max-height:108px !important;
    overflow-y:auto !important;
    margin:4px 0 0 !important;
    padding:3px 0 1px !important;
    border:0 !important;
    border-top:1px solid rgba(118,150,170,.18) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #storyModal .osd-source-list li {
    min-height:29px !important;
    padding:3px 0 !important;
  }

  #storyModal .osd-source-list a {
    grid-template-columns:132px minmax(0,1fr) 14px !important;
    gap:8px !important;
    font-size:.59rem !important;
  }

  #storyModal .osd-source-list a span:first-child,
  #storyModal .osd-source-list a strong {
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* =========================================================
   HOMEPAGE 15.38 — MEDIA + MOMENTS EDITORIAL POLISH
   Built from locked v15.37 checkpoint. Global.css untouched.
========================================================= */
.page-home .moments-section.moments-editorial,
.page-home .media-home-section.media-editorial-v1538 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,225,233,.58), transparent 24%),
    radial-gradient(circle at 82% 8%, rgba(221,237,250,.72), transparent 29%),
    radial-gradient(circle at 94% 72%, rgba(255,225,236,.42), transparent 23%),
    linear-gradient(135deg,#fbfcfd 0%,#f4f9fc 52%,#fff8fa 100%) !important;
  border-color: rgba(103,140,164,.10) !important;
}
.page-home .moments-section.moments-editorial::before,
.page-home .media-home-section.media-editorial-v1538::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; opacity:.5;
  background:
    radial-gradient(ellipse at 5% 72%, rgba(245,174,196,.20) 0 5px, transparent 7px),
    radial-gradient(ellipse at 91% 20%, rgba(245,174,196,.22) 0 6px, transparent 8px),
    radial-gradient(ellipse at 72% 5%, rgba(245,174,196,.15) 0 4px, transparent 6px);
}
body.dark-theme.page-home .moments-section.moments-editorial,
body.dark-theme.page-home .media-home-section.media-editorial-v1538 {
  background: radial-gradient(circle at 82% 8%,rgba(90,125,148,.10),transparent 30%),#111417 !important;
  border-color:rgba(255,255,255,.07)!important;
}
/* Align Moments heading scale with the homepage editorial system. */
.page-home .moments-editorial-head .moments-heading,
.page-home .media-editorial-head h2 {
  font-size:clamp(2.65rem,3.45vw,4rem)!important; line-height:.98!important; letter-spacing:-.025em;
}
.page-home .media-editorial-head {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;margin-bottom:0;}
.page-home .media-side-note {margin:0 0 8px;color:rgba(82,67,74,.72);font:400 clamp(.78rem,1vw,.95rem)/1.45 "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;text-align:right;}
body.dark-theme .page-home .media-side-note{color:rgba(235,239,242,.65)}
.page-home .media-home-description{max-width:720px!important;margin:12px 0 0!important;}
.page-home .media-magazine-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:30px;}
.page-home .media-mag-card{min-width:0;}
.page-home .media-mag-trigger{position:relative;display:block;width:100%;aspect-ratio:3/5;overflow:hidden;padding:0;border:1px solid rgba(126,163,187,.16);border-radius:8px;background:#e8eef2;box-shadow:0 12px 28px rgba(48,70,84,.05);cursor:pointer;transition:transform .22s ease,box-shadow .22s ease;}
.page-home .media-mag-trigger:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(48,70,84,.10)}
.page-home .media-mag-trigger img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.page-home .media-mag-trigger:hover img{transform:scale(1.025)}
.page-home .media-mag-gradient{position:absolute;inset:34% 0 0;background:linear-gradient(to bottom,transparent,rgba(8,8,10,.82));}
.page-home .media-mag-copy{position:absolute;left:12px;right:10px;bottom:12px;color:#fff;text-align:left;}
.page-home .media-mag-eyebrow{display:block;margin-bottom:7px;font:700 .58rem/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;}
.page-home .media-mag-copy strong{display:block;max-width:calc(100% - 36px);font:500 clamp(1.15rem,1.4vw,1.6rem)/.98 "Cormorant Garamond",serif;}
.page-home .media-mag-arrow{position:absolute;right:0;bottom:0;width:31px;height:31px;border:1px solid rgba(255,255,255,.88);border-radius:50%;display:grid;place-items:center;font:400 1rem/1 sans-serif;}
.page-home .media-mag-credit{display:block;margin:7px 3px 0;color:#7b858d;font:500 .51rem/1.3 "DM Sans",sans-serif;text-align:center;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.page-home a.media-mag-credit:hover{color:#5f8da8;text-decoration:underline}.page-home .media-mag-credit--text{cursor:default}
.page-home .media-editorial-signoff{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px auto 0;color:#9aa6ae}.page-home .media-editorial-signoff span{width:90px;height:1px;background:currentColor;opacity:.55}.page-home .media-editorial-signoff small{font:600 .48rem/1 "DM Sans",sans-serif;letter-spacing:.28em;}
/* Generic detail modal for Series / Special Collection / Fan Perspective / Soundtrack */
.media-detail-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px}.media-detail-modal.is-open{display:flex}.media-detail-modal__backdrop{position:absolute;inset:0;background:rgba(7,12,16,.76);backdrop-filter:blur(7px)}
.media-detail-modal__panel{position:relative;z-index:1;width:min(900px,94vw);max-height:86vh;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);overflow:hidden;border:1px solid rgba(126,163,187,.22);border-radius:18px;background:#fbfaf9;box-shadow:0 28px 80px rgba(0,0,0,.28)}
.media-detail-modal__close{position:absolute;right:17px;top:13px;z-index:3;width:38px;height:38px;border:0;background:transparent;font-size:1.9rem;cursor:pointer}.media-detail-modal__image{min-height:420px;background:#e8eef2}.media-detail-modal__image img{width:100%;height:100%;display:block;object-fit:cover}.media-detail-modal__content{padding:clamp(30px,4vw,48px);align-self:center}.media-detail-modal__eyebrow{margin:0 0 5px;font:700 .65rem/1.2 "DM Sans",sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#6b91a9}.media-detail-modal__content h2{margin:0 0 14px;font:500 clamp(2.1rem,3vw,3.2rem)/1 "Cormorant Garamond",serif;color:#29282a}.media-detail-modal__description{margin:0;color:#555b60;font:.9rem/1.65 "DM Sans",sans-serif}.media-detail-modal__actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;padding-top:17px;border-top:1px solid rgba(126,163,187,.25)}.media-detail-modal__actions a{display:inline-flex;padding:10px 15px;border:1px solid rgba(82,112,130,.38);border-radius:999px;color:#38586c;text-decoration:none;font:600 .7rem/1 "DM Sans",sans-serif}.media-detail-modal__credit{margin-top:18px;color:#71808a;font:.68rem/1.5 "DM Sans",sans-serif}.media-detail-modal__credit a{color:inherit}.media-detail-modal__note{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(126,163,187,.18);color:#7b8085;font:.65rem/1.5 "DM Sans",sans-serif}
body.dark-theme .media-detail-modal__panel{background:#151a1e;border-color:rgba(255,255,255,.1)}body.dark-theme .media-detail-modal__content h2{color:#f3eee9}body.dark-theme .media-detail-modal__description,body.dark-theme .media-detail-modal__credit,body.dark-theme .media-detail-modal__note{color:#b9c1c6}body.dark-theme .media-detail-modal__close{color:#fff}
@media(max-width:1180px){.page-home .media-magazine-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.page-home .media-mag-trigger{aspect-ratio:4/5}}
@media(max-width:760px){.page-home .media-editorial-head{grid-template-columns:1fr}.page-home .media-side-note{display:none}.page-home .media-magazine-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.page-home .media-mag-trigger{aspect-ratio:3/4}.media-detail-modal{padding:10px}.media-detail-modal__panel{grid-template-columns:1fr;max-height:90vh;overflow-y:auto}.media-detail-modal__image{min-height:0;height:280px}.media-detail-modal__content{padding:24px 20px}.media-detail-modal__close{background:rgba(255,255,255,.86);border-radius:50%}}
@media(max-width:420px){.page-home .media-magazine-strip{grid-template-columns:1fr}.page-home .media-mag-trigger{aspect-ratio:4/5}}

/* =========================================================
   HOMEPAGE 15.39 — MEDIA QUICK CORRECTIONS
========================================================= */

/* Interview source image is landscape. On the narrow editorial tile,
   anchor the crop toward the people rather than the center microphone. */
.page-home #media-interviews .media-mag-trigger img {
  object-position: 82% center;
}

/* Direct soundtrack links use the same quiet credit line treatment
   as the other Media tiles. */
.page-home .media-mag-credit--links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:normal;
  overflow:visible;
}

.page-home .media-mag-credit--links a {
  color:inherit;
  text-decoration:none;
}

.page-home .media-mag-credit--links a:hover {
  color:#5f8da8;
  text-decoration:underline;
}

body.dark-theme.page-home .media-mag-credit--links a:hover {
  color:#9ac2da;
}


/* =========================================================
   HOMEPAGE 15.40 — MEDIA CORRECTIONS
   - restore embedded Fulfill OST player
   - show complete Interviews thumbnail
   - center mobile Media signoff
========================================================= */

/* ---------------------------------------------------------
   SOUNDTRACK — restore the previous embedded-video treatment
--------------------------------------------------------- */
.page-home .media-mag-card--soundtrack {
  display:grid;
  grid-template-rows:minmax(0, 58%) minmax(0, 42%);
  aspect-ratio:3 / 5;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(126,163,187,.16);
  border-radius:8px;
  background:rgba(248,252,254,.96);
  box-shadow:0 12px 28px rgba(48,70,84,.05);
}

.page-home .media-mag-soundtrack-player {
  position:relative;
  min-height:0;
  overflow:hidden;
  background:#111;
}

.page-home .media-mag-soundtrack-player iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.page-home .media-mag-soundtrack-copy {
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:12px 12px 10px;
  color:#46494e;
}

.page-home .media-mag-soundtrack-copy .media-mag-eyebrow {
  position:static;
  display:block;
  margin:0 0 5px;
  color:#6e9db8;
  font:700 .48rem/1.15 "DM Sans",sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.page-home .media-mag-soundtrack-copy > strong {
  display:block;
  margin:0;
  color:#3f3b3f;
  font:500 clamp(1rem,1.2vw,1.2rem)/1.03 "Cormorant Garamond",serif;
}

.page-home .media-mag-soundtrack-copy p {
  margin:6px 0 8px;
  color:#7a7e84;
  font:400 .55rem/1.4 "DM Sans",sans-serif;
}

.page-home .media-mag-soundtrack-links {
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  margin-top:auto;
}

.page-home .media-mag-soundtrack-links a {
  color:#df7190;
  font:700 .46rem/1.2 "DM Sans",sans-serif;
  letter-spacing:.04em;
  text-decoration:none;
  text-transform:uppercase;
  border-bottom:1px solid rgba(223,113,144,.28);
}

.page-home .media-mag-soundtrack-links a:hover {
  color:#c85d7b;
  border-bottom-color:currentColor;
}

body.dark-theme.page-home .media-mag-card--soundtrack {
  background:#171c21;
  border-color:rgba(255,255,255,.08);
}

body.dark-theme.page-home .media-mag-soundtrack-copy > strong {
  color:#f4eeee;
}

body.dark-theme.page-home .media-mag-soundtrack-copy p {
  color:#a5adb3;
}


/* ---------------------------------------------------------
   INTERVIEWS — show the entire source image.
   The landscape source cannot crop correctly into a narrow
   portrait tile while keeping both people visible, so contain
   it within the card instead of cutting either person out.
--------------------------------------------------------- */
.page-home #media-interviews .media-mag-trigger {
  background:#161a1e;
}

.page-home #media-interviews .media-mag-trigger img {
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  background:#161a1e;
}

.page-home #media-interviews .media-mag-trigger:hover img {
  transform:none !important;
}


/* ---------------------------------------------------------
   MEDIA SIGNOFF — mobile alignment
--------------------------------------------------------- */
@media (max-width:760px) {
  .page-home .media-editorial-signoff {
    display:grid !important;
    grid-template-columns:minmax(28px,1fr) auto minmax(28px,1fr) !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    gap:8px !important;
    margin:20px 0 0 !important;
    padding:0 4px !important;
    box-sizing:border-box !important;
  }

  .page-home .media-editorial-signoff span {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .page-home .media-editorial-signoff small {
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
    letter-spacing:.18em !important;
    font-size:.42rem !important;
  }

  .page-home .media-mag-card--soundtrack {
    aspect-ratio:3 / 4;
  }
}

@media (max-width:420px) {
  .page-home .media-editorial-signoff {
    grid-template-columns:minmax(18px,1fr) auto minmax(18px,1fr) !important;
    gap:6px !important;
  }

  .page-home .media-editorial-signoff small {
    letter-spacing:.12em !important;
    font-size:.39rem !important;
  }

  .page-home .media-mag-card--soundtrack {
    aspect-ratio:4 / 5;
  }
}


/* =========================================================
   HOMEPAGE 15.41 — MEDIA POLISH
   - Soundtrack matches Media card styling
   - Keep Oom/Bam soundtrack names
   - Crop Sakura promo text from card + modal
========================================================= */

/* ---------------------------------------------------------
   SOUNDTRACK — same visual language as Media editorial tiles
--------------------------------------------------------- */
.page-home .media-mag-card--soundtrack {
  display:grid !important;
  grid-template-rows:minmax(0,1fr) auto !important;
  aspect-ratio:3 / 5 !important;
  min-width:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.page-home .media-mag-card--soundtrack .media-mag-soundtrack-player {
  position:relative !important;
  min-height:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(126,163,187,.20) !important;
  border-radius:8px !important;
  background:#111 !important;
  box-shadow:0 12px 28px rgba(48,70,84,.05) !important;
}

.page-home .media-mag-card--soundtrack .media-mag-soundtrack-player iframe {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  z-index:1 !important;
}

.page-home .media-mag-card--soundtrack .media-mag-gradient {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      to bottom,
      transparent 46%,
      rgba(10,11,13,.12) 58%,
      rgba(10,11,13,.88) 100%
    ) !important;
}

.page-home .media-mag-card--soundtrack .media-mag-soundtrack-overlay {
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:14px !important;
  z-index:3 !important;
  pointer-events:none !important;
  color:#fff !important;
}

.page-home .media-mag-card--soundtrack .media-mag-soundtrack-overlay .media-mag-eyebrow {
  display:block !important;
  margin:0 0 5px !important;
  color:#d9edf7 !important;
  font:700 .48rem/1.15 "DM Sans",sans-serif !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

.page-home .media-mag-card--soundtrack .media-mag-soundtrack-overlay strong {
  display:block !important;
  margin:0 !important;
  color:#fff !important;
  font:500 clamp(1rem,1.15vw,1.18rem)/1.03 "Cormorant Garamond",serif !important;
}

.page-home .media-mag-credit--soundtrack {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:4px 6px !important;
  margin-top:7px !important;
  padding:0 3px !important;
  color:#7d858b !important;
  font:500 .43rem/1.25 "DM Sans",sans-serif !important;
  text-align:center !important;
}

.page-home .media-mag-credit--soundtrack a {
  color:#df7190 !important;
  font-weight:700 !important;
  text-decoration:none !important;
  text-transform:uppercase !important;
  letter-spacing:.03em !important;
  border-bottom:1px solid rgba(223,113,144,.28) !important;
}

.page-home .media-mag-credit--soundtrack a:hover {
  color:#c85d7b !important;
  border-bottom-color:currentColor !important;
}

/* No sub-description block remains in the soundtrack tile. */
.page-home .media-mag-card--soundtrack .media-mag-soundtrack-copy,
.page-home .media-mag-card--soundtrack .media-mag-soundtrack-copy p {
  display:none !important;
}


/* ---------------------------------------------------------
   WHEN SAKURA BLOOMS — crop the promotional text from the top
--------------------------------------------------------- */

/* Thumbnail:
   zoom and bias the source downward enough to remove the promo
   header while keeping both faces and the card title visible. */
.page-home #media-sakura .media-mag-trigger {
  overflow:hidden !important;
  background:#111 !important;
}

.page-home #media-sakura .media-mag-trigger img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 72% !important;
  transform:scale(1.20) !important;
  transform-origin:center center !important;
}

.page-home #media-sakura .media-mag-trigger:hover img {
  transform:scale(1.23) !important;
}

/* Modal:
   dedicated crop only when the Sakura collection is open. */
.media-detail-modal[data-media-key="sakura"] .media-detail-modal__image {
  overflow:hidden !important;
  background:#f3efeb !important;
}

.media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 72% !important;
  transform:scale(1.18) !important;
  transform-origin:center center !important;
}


/* ---------------------------------------------------------
   MOBILE / TABLET tuning
--------------------------------------------------------- */
@media (max-width:760px) {
  .page-home .media-mag-card--soundtrack {
    aspect-ratio:3 / 5 !important;
  }

  .page-home .media-mag-card--soundtrack .media-mag-soundtrack-overlay {
    left:10px !important;
    right:10px !important;
    bottom:11px !important;
  }

  .page-home .media-mag-credit--soundtrack {
    font-size:.40rem !important;
  }

  .page-home #media-sakura .media-mag-trigger img {
    object-position:center 74% !important;
    transform:scale(1.24) !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img {
    object-position:center 74% !important;
    transform:scale(1.22) !important;
  }
}


/* =========================================================
   HOMEPAGE 15.42 — CONSOLIDATED MEDIA COSMETIC POLISH
========================================================= */

/* Uniform tile content geometry */
.page-home .media-mag-card{
  display:grid;
  grid-template-rows:minmax(0,1fr) 20px;
  min-width:0;
}
.page-home .media-mag-trigger{height:100%}
.page-home .media-mag-copy{
  left:12px!important;
  right:10px!important;
  bottom:12px!important;
  min-height:92px;
  display:grid!important;
  grid-template-rows:16px minmax(44px,auto);
  align-content:end;
}
.page-home .media-mag-eyebrow{
  margin:0!important;
  align-self:end;
  font:700 .50rem/1 "DM Sans",sans-serif!important;
  letter-spacing:.14em!important;
}
.page-home .media-mag-copy strong{
  align-self:end;
  max-width:calc(100% - 38px)!important;
  margin-top:6px;
  font:500 clamp(1.12rem,1.22vw,1.38rem)/.94 "Cormorant Garamond",serif!important;
}
.page-home .media-mag-arrow{
  right:0!important;
  bottom:0!important;
  width:30px!important;
  height:30px!important;
}
.page-home .media-mag-credit{
  align-self:start;
  min-height:20px;
  margin:6px 2px 0!important;
  font-size:.46rem!important;
  line-height:1.2!important;
}

/* Soundtrack now behaves like every other editorial tile */
.page-home .media-mag-card--soundtrack{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) 20px!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.page-home .media-mag-card--soundtrack .media-mag-trigger{
  position:relative!important;
  display:block!important;
  width:100%!important;
  aspect-ratio:3/5!important;
  overflow:hidden!important;
  padding:0!important;
  border:1px solid rgba(126,163,187,.16)!important;
  border-radius:8px!important;
  background:#111!important;
  box-shadow:0 12px 28px rgba(48,70,84,.05)!important;
}
.page-home .media-mag-card--soundtrack .media-mag-trigger img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.page-home .media-mag-credit--soundtrack{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  min-height:20px!important;
  margin:6px 0 0!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.page-home .media-mag-credit--soundtrack a{
  color:#df7190!important;
  font:700 .42rem/1.15 "DM Sans",sans-serif!important;
  letter-spacing:.02em!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  border-bottom:1px solid rgba(223,113,144,.28)!important;
}

/* Sakura: aggressively remove all promo header text */
.page-home #media-sakura .media-mag-trigger{overflow:hidden!important;background:#111!important}
.page-home #media-sakura .media-mag-trigger img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 82%!important;
  transform:scale(1.48)!important;
  transform-origin:center 66%!important;
}
.page-home #media-sakura .media-mag-trigger:hover img{transform:scale(1.51)!important}
.media-detail-modal[data-media-key="sakura"] .media-detail-modal__image{overflow:hidden!important}
.media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 84%!important;
  transform:scale(1.45)!important;
  transform-origin:center 68%!important;
}

/* Generic collection modals: above global nav, calmer backdrop, unified close */
.media-detail-modal{
  z-index:20000!important;
  padding:clamp(22px,4vh,44px) clamp(18px,3vw,42px)!important;
}
.media-detail-modal__backdrop{
  background:rgba(7,12,16,.86)!important;
  backdrop-filter:blur(11px)!important;
  -webkit-backdrop-filter:blur(11px)!important;
}
.media-detail-modal__panel{width:min(980px,94vw)!important;max-height:86vh!important}
.media-detail-modal__close,
.interviews-modal__close,
.vlogs-modal__close{
  width:42px!important;
  height:42px!important;
  border:1px solid rgba(83,72,77,.12)!important;
  border-radius:50%!important;
  background:rgba(255,253,249,.94)!important;
  color:#383234!important;
  font:400 1.35rem/1 "DM Sans",sans-serif!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
  box-shadow:0 8px 20px rgba(25,30,34,.08);
}
body.dark-theme .media-detail-modal__close,
body.dark-theme .interviews-modal__close,
body.dark-theme .vlogs-modal__close{
  color:#f3edef!important;
  background:rgba(34,37,43,.94)!important;
  border-color:rgba(255,255,255,.10)!important;
}

/* Soundtrack player inside modal */
.media-detail-modal__video{
  display:block;
  width:100%;
  height:100%;
  min-height:420px;
  border:0;
  background:#111;
}

/* Interviews / Vlogs compact desktop archive */
@media (min-width:1181px){
  .interviews-modal__panel,
  .vlogs-modal__panel{
    inset:32px auto!important;
    left:50%!important;
    transform:translateX(-50%);
    width:min(1460px,94vw)!important;
    max-height:calc(100vh - 64px)!important;
    padding:34px 38px 38px!important;
    border-radius:22px!important;
  }
  .interviews-modal__header,
  .vlogs-modal__header{
    max-width:650px!important;
    margin-bottom:18px!important;
  }
  .interviews-modal__header h2,
  .vlogs-modal__header h2{
    font-size:clamp(2.9rem,4.2vw,4.25rem)!important;
    line-height:.92!important;
  }
  .interviews-modal__header>p:last-child,
  .vlogs-modal__header>p:last-child{
    margin-top:8px!important;
    font-size:.76rem!important;
    line-height:1.5!important;
  }
  .interviews-tabs{margin-bottom:18px!important}
  .interviews-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:11px!important;
  }
  .vlogs-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    max-width:1180px;
  }
  .interview-card,
  .vlog-card{
    min-height:132px!important;
    padding:13px 14px!important;
    border-radius:14px!important;
  }
  .interview-platform,
  .interview-card__category,
  .vlog-platform{font-size:.48rem!important}
  .interview-platform,
  .vlog-platform{padding:4px 7px!important}
  .interview-card h3,
  .vlog-card h3{
    margin:10px 0 12px!important;
    font-size:.98rem!important;
    line-height:1.14!important;
  }
  .interview-card__action,
  .vlog-card__action{font-size:.54rem!important}
}

/* Tablet archive density */
@media (min-width:701px) and (max-width:1180px){
  .interviews-modal__panel,
  .vlogs-modal__panel{
    inset:24px!important;
    padding:28px 28px 32px!important;
  }
  .interviews-grid,
  .vlogs-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .interview-card,
  .vlog-card{
    min-height:138px!important;
    padding:14px!important;
  }
  .interview-card h3,
  .vlog-card h3{
    margin:11px 0 13px!important;
    font-size:1.02rem!important;
  }
}

/* Mobile */
@media (max-width:700px){
  .media-detail-modal{padding:10px!important}
  .media-detail-modal__close,
  .interviews-modal__close,
  .vlogs-modal__close{
    width:38px!important;
    height:38px!important;
    font-size:1.2rem!important;
  }
  .media-detail-modal__video{
    min-height:240px;
    aspect-ratio:16/9;
  }
  .page-home #media-sakura .media-mag-trigger img{
    object-position:center 84%!important;
    transform:scale(1.52)!important;
  }
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img{
    object-position:center 86%!important;
    transform:scale(1.48)!important;
  }
  .interview-card,
  .vlog-card{padding:14px!important}
  .interview-card h3,
  .vlog-card h3{
    margin:11px 0 13px!important;
    font-size:1.02rem!important;
  }
}


/* =========================================================
   HOMEPAGE 15.43 — MEDIA + MOMENTS VISUAL POLISH
   ---------------------------------------------------------
   - restore visible Soundtrack YouTube player
   - align Soundtrack card with the Media tile system
   - clean Sakura title wrapping and remove all top promo text
   - unify Moments / Media side-note treatment
   - reduce Moments month typography
========================================================= */


/* ---------------------------------------------------------
   SHARED SIDE NOTE / QUOTE TREATMENT
   Chosen direction: the restrained uppercase editorial note
   used by Media. It better matches the site's section labels,
   dividers, and luxury-editorial typography than the script note.
--------------------------------------------------------- */
.page-home .moments-side-note,
.page-home .media-side-note {
  margin:0 0 8px !important;
  color:rgba(82,67,74,.72) !important;
  font-family:"DM Sans",sans-serif !important;
  font-size:clamp(.76rem,.95vw,.92rem) !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  text-align:right !important;
  transform:none !important;
}

body.dark-theme.page-home .moments-side-note,
body.dark-theme.page-home .media-side-note {
  color:rgba(235,239,242,.65) !important;
}


/* ---------------------------------------------------------
   MOMENTS — reduce month dominance
--------------------------------------------------------- */
.page-home .moments-mag-month {
  font-size:clamp(1.62rem,2.05vw,2.22rem) !important;
  line-height:.88 !important;
  letter-spacing:-.025em !important;
}

.page-home .moments-mag-year {
  margin-top:5px !important;
  font-size:.60rem !important;
}

.page-home .moments-mag-title {
  margin-top:11px !important;
}


/* ---------------------------------------------------------
   WHEN SAKURA BLOOMS — title + stronger crop
--------------------------------------------------------- */
.page-home #media-sakura .media-mag-copy strong {
  max-width:calc(100% - 34px) !important;
  font-size:clamp(1rem,1.08vw,1.18rem) !important;
  line-height:.94 !important;
  letter-spacing:-.015em !important;
}

/* Push the promotional header completely out of the visible tile. */
.page-home #media-sakura .media-mag-trigger img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 90% !important;
  transform:scale(1.60) !important;
  transform-origin:center 70% !important;
}

.page-home #media-sakura .media-mag-trigger:hover img {
  transform:scale(1.63) !important;
}

/* Same crop logic inside the Sakura modal. */
.media-detail-modal[data-media-key="sakura"] .media-detail-modal__image {
  overflow:hidden !important;
}

.media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 90% !important;
  transform:scale(1.58) !important;
  transform-origin:center 72% !important;
}


/* ---------------------------------------------------------
   SOUNDTRACK — VISIBLE EMBED + EDITORIAL TILE FORMAT
   Player remains functional. The lower metadata block uses the same
   category/title hierarchy and dark treatment as the other cards.
--------------------------------------------------------- */
.page-home .media-mag-card--soundtrack {
  display:grid !important;
  grid-template-rows:minmax(0,1fr) 20px !important;
  min-width:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.page-home .media-soundtrack-tile {
  display:grid !important;
  grid-template-rows:minmax(0,64%) minmax(76px,36%) !important;
  width:100% !important;
  aspect-ratio:3/5 !important;
  overflow:hidden !important;
  border:1px solid rgba(126,163,187,.16) !important;
  border-radius:8px !important;
  background:#0d1013 !important;
  box-shadow:0 12px 28px rgba(48,70,84,.05) !important;
}

.page-home .media-soundtrack-player {
  position:relative !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:#000 !important;
}

.page-home .media-soundtrack-player iframe {
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:#000 !important;
}

.page-home .media-soundtrack-meta {
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  min-height:0 !important;
  padding:11px 12px 13px !important;
  color:#fff !important;
  background:
    linear-gradient(180deg,#151a1e 0%,#0d1013 100%) !important;
}

.page-home .media-soundtrack-meta .media-mag-eyebrow {
  display:block !important;
  margin:0 0 7px !important;
  color:#d8edf7 !important;
  font:700 .50rem/1 "DM Sans",sans-serif !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

.page-home .media-soundtrack-meta strong {
  display:block !important;
  margin:0 !important;
  color:#fff !important;
  font:500 clamp(1.12rem,1.22vw,1.38rem)/.94 "Cormorant Garamond",serif !important;
}

.page-home .media-mag-credit--soundtrack {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  min-height:20px !important;
  margin:6px 0 0 !important;
  overflow:visible !important;
  white-space:nowrap !important;
}

.page-home .media-mag-credit--soundtrack a {
  color:#df7190 !important;
  font:700 .42rem/1.15 "DM Sans",sans-serif !important;
  letter-spacing:.02em !important;
  text-decoration:none !important;
  text-transform:uppercase !important;
  border-bottom:1px solid rgba(223,113,144,.28) !important;
}


/* ---------------------------------------------------------
   RESPONSIVE FINE TUNING
--------------------------------------------------------- */
@media (max-width:760px) {
  .page-home #media-sakura .media-mag-trigger img {
    object-position:center 92% !important;
    transform:scale(1.64) !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img {
    object-position:center 92% !important;
    transform:scale(1.62) !important;
  }

  .page-home .media-soundtrack-tile {
    grid-template-rows:minmax(0,62%) minmax(72px,38%) !important;
  }

  .page-home .media-soundtrack-meta {
    padding:9px 10px 11px !important;
  }

  .page-home .media-soundtrack-meta strong {
    font-size:1.05rem !important;
  }
}


/* =========================================================
   HOMEPAGE 15.44 — SAKURA COLLECTION + SOUNDTRACK ALIGNMENT
========================================================= */

/* Soundtrack: larger player zone, smaller editorial metadata zone. */
.page-home .media-soundtrack-tile{
  grid-template-rows:minmax(0,74%) minmax(68px,26%)!important;
}
.page-home .media-soundtrack-player{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:0!important;
  background:#000!important;
}
.page-home .media-soundtrack-player iframe{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
}
.page-home .media-soundtrack-meta{
  justify-content:center!important;
  padding:10px 12px 11px!important;
}
.page-home .media-soundtrack-meta .media-mag-eyebrow{
  margin-bottom:6px!important;
}
.page-home .media-mag-credit--soundtrack{
  min-height:20px!important;
  align-items:flex-start!important;
  padding-top:0!important;
}

/* Sakura becomes a full curated video collection. */
.media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel{
  width:min(1120px,94vw)!important;
  max-height:90vh!important;
  grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr)!important;
  grid-template-rows:auto auto!important;
  align-items:stretch!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
.media-detail-modal[data-media-key="sakura"] .media-detail-modal__image{
  grid-column:1!important;
  grid-row:1!important;
  min-height:430px!important;
}
.media-detail-modal[data-media-key="sakura"] .media-detail-modal__content{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  padding:clamp(30px,4vw,46px)!important;
}
.media-detail-modal__collection{
  grid-column:1 / -1;
  min-width:0;
}
.media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding:22px clamp(22px,3vw,34px) 30px;
  border-top:1px solid rgba(126,163,187,.20);
  background:linear-gradient(180deg,rgba(239,247,252,.42),rgba(255,251,249,.84));
}
.media-detail-modal__collection[hidden]{display:none!important}
.sakura-clip-card{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(126,163,187,.16);
  border-radius:14px;
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 24px rgba(42,63,75,.045);
}
.sakura-clip-card__player{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
}
.sakura-clip-card__player iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.sakura-clip-card__caption{
  margin:0;
  padding:12px 13px 14px;
  color:#636a70;
  font:500 .69rem/1.5 "DM Sans",sans-serif;
}
body.dark-theme .media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection{
  background:linear-gradient(180deg,rgba(28,35,41,.98),rgba(19,23,27,.98));
  border-top-color:rgba(255,255,255,.08);
}
body.dark-theme .sakura-clip-card{
  background:#171c21;
  border-color:rgba(255,255,255,.08);
}
body.dark-theme .sakura-clip-card__caption{color:#bac2c8}

@media (min-width:761px) and (max-width:1020px){
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel{
    width:min(900px,95vw)!important;
    grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr)!important;
  }
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image{
    min-height:380px!important;
  }
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection{
    gap:13px;
    padding:18px 20px 24px;
  }
  .sakura-clip-card__caption{font-size:.66rem}
}

@media (max-width:760px){
  .page-home .media-soundtrack-tile{
    grid-template-rows:minmax(0,72%) minmax(64px,28%)!important;
  }
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    max-height:92vh!important;
    overflow-y:auto!important;
  }
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image{
    grid-column:1!important;
    grid-row:1!important;
    height:300px!important;
    min-height:300px!important;
  }
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__content{
    grid-column:1!important;
    grid-row:2!important;
    padding:22px 19px 20px!important;
  }
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection{
    grid-column:1!important;
    grid-row:3!important;
    grid-template-columns:1fr!important;
    gap:12px;
    padding:16px 14px 22px;
  }
  .sakura-clip-card__caption{
    padding:10px 11px 12px;
    font-size:.66rem;
  }
}


/* =========================================================
   HOMEPAGE 15.45 — SAKURA RESPONSIVE FIX
   ---------------------------------------------------------
   Scope only:
   - mobile Media thumbnail alignment for When SAKURA Blooms
   - landscape Sakura YouTube player proportions
   - portrait Sakura modal remains unchanged
========================================================= */

/* ---------------------------------------------------------
   MOBILE THUMBNAIL
   Reduce the aggressive zoom from v15.43/15.44 and re-center
   the subjects so the card does not feel pushed/cropped off-axis.
--------------------------------------------------------- */
@media (max-width:760px) and (orientation:portrait) {
  .page-home #media-sakura .media-mag-trigger img {
    object-position:center 78% !important;
    transform:scale(1.38) !important;
    transform-origin:center 66% !important;
  }

  .page-home #media-sakura .media-mag-trigger:hover img {
    transform:scale(1.40) !important;
  }
}

/* ---------------------------------------------------------
   LANDSCAPE — SAKURA VIDEO COLLECTION
   Keep each YouTube embed at a real 16:9 shape instead of
   stretching to fill the entire wide modal column.
--------------------------------------------------------- */
@media (orientation:landscape) and (max-height:820px) {
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel {
    max-height:92vh !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:start !important;
  }

  .sakura-clip-card {
    align-self:start !important;
  }

  .sakura-clip-card__player {
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    max-height:none !important;
  }

  .sakura-clip-card__player iframe {
    display:block !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:16 / 9 !important;
    object-fit:contain !important;
  }

  .sakura-clip-card__caption {
    min-height:0 !important;
  }
}

/* Extra-short phone landscape: use one player per row so the video
   remains watchable and does not become an ultra-wide strip. */
@media (orientation:landscape) and (max-height:520px) and (max-width:980px) {
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection {
    grid-template-columns:1fr !important;
    max-width:720px !important;
    margin-inline:auto !important;
  }

  .sakura-clip-card__player {
    aspect-ratio:16 / 9 !important;
  }
}


/* =========================================================
   HOMEPAGE 15.46 — SAKURA MODAL QUALITY + WIDTH FIX
   ---------------------------------------------------------
   Root cause:
   - source cover is only 640×1136
   - previous rules enlarged it 1.4–1.6×, causing visible blur
   - modal width was too generous for this source resolution
   Strategy:
   - remove transform zoom completely
   - crop by using a dedicated overflow viewport + object-position
   - reduce Sakura modal width and image-column width
   - keep portrait mobile modal layout unchanged
========================================================= */


/* ---------------------------------------------------------
   SAKURA THUMBNAIL — CROP WITHOUT UPSCALING
--------------------------------------------------------- */
.page-home #media-sakura .media-mag-trigger {
  overflow:hidden !important;
  background:#111 !important;
}

.page-home #media-sakura .media-mag-trigger img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 74% !important;
  transform:none !important;
  filter:none !important;
}

.page-home #media-sakura .media-mag-trigger:hover img {
  transform:none !important;
}


/* ---------------------------------------------------------
   SAKURA DESKTOP/TABLET MODAL — NARROWER + SHARPER
--------------------------------------------------------- */
@media (min-width:761px) {
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel {
    width:min(900px,92vw) !important;
    max-width:900px !important;
    grid-template-columns:minmax(280px,340px) minmax(0,1fr) !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image {
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    background:#f1ece7 !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img {
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    object-fit:cover !important;
    object-position:center 76% !important;
    transform:none !important;
    filter:none !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__content {
    padding:clamp(26px,3vw,38px) !important;
  }
}


/* ---------------------------------------------------------
   MOBILE PORTRAIT THUMBNAIL — CENTER SUBJECTS
   No transform zoom; rely on the source crop itself.
--------------------------------------------------------- */
@media (max-width:760px) and (orientation:portrait) {
  .page-home #media-sakura .media-mag-trigger img {
    object-position:center 72% !important;
    transform:none !important;
  }
}


/* ---------------------------------------------------------
   MOBILE PORTRAIT MODAL — KEEP WORKING STACK,
   REMOVE BLUR-CAUSING SCALE ONLY
--------------------------------------------------------- */
@media (max-width:760px) and (orientation:portrait) {
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image {
    overflow:hidden !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 76% !important;
    transform:none !important;
    filter:none !important;
  }
}


/* ---------------------------------------------------------
   LANDSCAPE MODAL
   Slightly narrower player collection prevents over-wide stretching.
--------------------------------------------------------- */
@media (orientation:landscape) and (max-height:820px) {
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel {
    width:min(880px,92vw) !important;
    max-width:880px !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .sakura-clip-card__player,
  .sakura-clip-card__player iframe {
    aspect-ratio:16 / 9 !important;
    height:auto !important;
  }
}


/* =========================================================
   HOMEPAGE 15.47 — SAKURA + SOUNDTRACK FINAL COSMETIC PASS
   ---------------------------------------------------------
   Fixes:
   - reduce empty space in Sakura desktop modal
   - remove visible promo/header text from Sakura tile without
     over-enlarging the 640px source
   - keep Sakura image sharper by using a shorter crop viewport
   - explicitly align SOUNDTRACK / Fulfill OST like other Media tiles
========================================================= */


/* ---------------------------------------------------------
   WHEN SAKURA BLOOMS — THUMBNAIL
   Anchor the image from the bottom and make it slightly taller
   than the card. The extra height is clipped above the card,
   removing the source's promotional header without a heavy zoom.
--------------------------------------------------------- */
.page-home #media-sakura .media-mag-trigger {
  position:relative !important;
  overflow:hidden !important;
  background:#111 !important;
}

.page-home #media-sakura .media-mag-trigger img {
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;

  width:100% !important;
  height:118% !important;

  object-fit:cover !important;
  object-position:center bottom !important;

  transform:none !important;
  filter:none !important;
}

.page-home #media-sakura .media-mag-trigger:hover img {
  transform:none !important;
}


/* ---------------------------------------------------------
   SAKURA DESKTOP MODAL
   Make the editorial intro substantially more compact.
   The image becomes a 290×360-ish crop viewport instead of a
   full-height portrait column, so the video collection begins sooner.
--------------------------------------------------------- */
@media (min-width:1021px) {
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel {
    width:min(820px,90vw) !important;
    max-width:820px !important;

    grid-template-columns:290px minmax(0,1fr) !important;
    grid-template-rows:360px auto !important;

    align-items:start !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image {
    grid-column:1 !important;
    grid-row:1 !important;

    width:290px !important;
    height:360px !important;
    min-height:360px !important;

    overflow:hidden !important;
    background:#f1ece7 !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img {
    width:100% !important;
    height:116% !important;
    min-height:0 !important;

    object-fit:cover !important;
    object-position:center bottom !important;

    transform:none !important;
    filter:none !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__content {
    grid-column:2 !important;
    grid-row:1 !important;

    align-self:start !important;
    padding:38px 34px 24px !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__description {
    max-width:410px !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection {
    grid-column:1 / -1 !important;
    grid-row:2 !important;

    margin-top:0 !important;
  }
}


/* ---------------------------------------------------------
   TABLET / SMALL DESKTOP SAKURA INTRO
--------------------------------------------------------- */
@media (min-width:761px) and (max-width:1020px) {
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel {
    width:min(760px,92vw) !important;
    max-width:760px !important;

    grid-template-columns:260px minmax(0,1fr) !important;
    grid-template-rows:340px auto !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image {
    width:260px !important;
    height:340px !important;
    min-height:340px !important;
    overflow:hidden !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__image img {
    width:100% !important;
    height:116% !important;
    object-fit:cover !important;
    object-position:center bottom !important;
    transform:none !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__content {
    padding:30px 26px 22px !important;
  }
}


/* ---------------------------------------------------------
   MOBILE PORTRAIT SAKURA TILE
   Same bottom-anchored crop so promo text stays out of frame.
--------------------------------------------------------- */
@media (max-width:760px) and (orientation:portrait) {
  .page-home #media-sakura .media-mag-trigger img {
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;

    width:100% !important;
    height:116% !important;

    object-fit:cover !important;
    object-position:center bottom !important;

    transform:none !important;
  }
}


/* ---------------------------------------------------------
   SOUNDTRACK — FORCE THE SAME TYPOGRAPHIC GEOMETRY
   AS THE OTHER MEDIA CARDS
--------------------------------------------------------- */
.page-home .media-soundtrack-meta {
  position:relative !important;

  display:grid !important;
  grid-template-rows:16px minmax(42px,auto) !important;
  align-content:end !important;
  justify-items:start !important;

  min-height:0 !important;

  padding:11px 12px 13px !important;

  text-align:left !important;

  color:#fff !important;
  background:linear-gradient(180deg,#151a1e 0%,#0d1013 100%) !important;
}

.page-home .media-soundtrack-meta .media-mag-eyebrow {
  display:block !important;

  width:100% !important;
  margin:0 !important;

  align-self:end !important;

  color:#d8edf7 !important;

  font:700 .50rem/1 "DM Sans",sans-serif !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  text-align:left !important;
}

.page-home .media-soundtrack-meta strong {
  display:block !important;

  width:100% !important;
  max-width:100% !important;

  margin:6px 0 0 !important;

  align-self:end !important;

  color:#fff !important;

  font:500 clamp(1.12rem,1.22vw,1.38rem)/.94 "Cormorant Garamond",serif !important;
  letter-spacing:-.01em !important;
  text-align:left !important;
}


/* ---------------------------------------------------------
   SOUNDTRACK PLAYER / META PROPORTION
   Keep YouTube visible, but let the title area breathe naturally.
--------------------------------------------------------- */
.page-home .media-soundtrack-tile {
  grid-template-rows:minmax(0,70%) minmax(74px,30%) !important;
}


/* ---------------------------------------------------------
   LANDSCAPE: keep the intro compact, collection below.
--------------------------------------------------------- */
@media (orientation:landscape) and (max-height:820px) {
  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__panel {
    width:min(800px,90vw) !important;
    max-width:800px !important;
  }

  .media-detail-modal[data-media-key="sakura"] .media-detail-modal__collection {
    gap:12px !important;
  }
}


/* =========================================================
   v15.54 — MOMENTS PHOTO PRESENTATION NORMALIZATION
   Keeps all five cards visually consistent while preserving
   each source image's natural composition.
========================================================= */

/* One consistent card + credit footprint across the row */
.page-home .moments-magazine-strip {
  align-items: start;
}

.page-home .moments-mag-card {
  display: grid;
  grid-template-rows: auto 2.35rem;
  align-content: start;
}

/* Slightly less narrow editorial crop for a calmer, more balanced row */
.page-home .moments-mag-trigger {
  aspect-ratio: 2 / 3;
}

/* Every image fills exactly the same frame; focal point is controlled per month */
.page-home .moments-mag-trigger img {
  object-fit: cover;
  object-position: var(--moment-focus-x, 50%) var(--moment-focus-y, 50%);
}

/* Per-image focal points: move the crop, not the layout */
.page-home .moments-mag-card[data-month-card="april"]  { --moment-focus-x: 50%; --moment-focus-y: 44%; }
.page-home .moments-mag-card[data-month-card="may"]    { --moment-focus-x: 50%; --moment-focus-y: 46%; }
.page-home .moments-mag-card[data-month-card="june"]   { --moment-focus-x: 50%; --moment-focus-y: 43%; }
.page-home .moments-mag-card[data-month-card="july"]   { --moment-focus-x: 50%; --moment-focus-y: 42%; }
.page-home .moments-mag-card[data-month-card="august"] { --moment-focus-x: 50%; --moment-focus-y: 45%; }

/* Keep month/title blocks at the same visual baseline */
.page-home .moments-mag-copy {
  min-height: 8.75rem;
  align-content: end;
}

.page-home .moments-mag-title {
  min-height: 2.15em;
  display: flex;
  align-items: flex-end;
}

/* Equal credit zone beneath every card, including the longer July provenance */
.page-home .moments-mag-credit {
  box-sizing: border-box;
  min-height: 2.35rem;
  margin-top: 0;
  padding: 7px 4px 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.25;
}

/* July remains identifiable but no longer appears physically larger than the others */
.page-home .moments-mag-card.is-featured .moments-mag-trigger {
  border-width: 1px;
  box-shadow: 0 0 0 2px rgba(248, 216, 223, .28),
              0 16px 38px rgba(201, 130, 149, .10);
}

/* Tablet: preserve the same crop logic without forcing an overly tall card */
@media (min-width: 761px) and (max-width: 1100px) {
  .page-home .moments-mag-trigger {
    aspect-ratio: 2 / 3;
  }

  .page-home .moments-mag-copy {
    min-height: 7.8rem;
  }
}

/* Mobile cards can breathe a little more while retaining the same presentation */
@media (max-width: 760px) {
  .page-home .moments-mag-trigger {
    aspect-ratio: 4 / 5;
  }

  .page-home .moments-mag-copy {
    min-height: 7.25rem;
  }

  .page-home .moments-mag-credit {
    min-height: 2.1rem;
  }
}