/* ============================================================
   Still Petals — styles.css
   One continuous cinematic journey. No boxes. No sections.
   Photography is the architecture.
   ============================================================ */

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

/* ── Tokens ── */
:root {
  --ink:     #09080f;
  --ivory:   #ede8df;
  --cream:   #f4efe6;
  --glow:    #c8b49a;
  --rose:    #c0977e;
  --mist:    #a09898;
  --dim:     #5a5460;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'DM Sans', sans-serif;
}

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--mist);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* No scroll snap — let the user move freely */
}

/* ════════════════════════════════════════════════════════════
   CHAPTER I — BEDROOM
   The emotional anchor. Full viewport. Warmest image.
   Text sits inside the photograph, not above it.
   Headline goes left over the dark curtain area.
   The candle glow on the right pulls attention inward.
════════════════════════════════════════════════════════════ */

.ch-bedroom {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.ch-bedroom__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  /* Slight warmth, preserve the candle glow */
  filter: brightness(0.58) saturate(0.9);
  /* Slow scale-in on load — barely perceptible */
  transform: scale(1.04);
  transition: transform 10s cubic-bezier(0.25, 0, 0, 1);
  will-change: transform;
}
.ch-bedroom__photo.loaded { transform: scale(1); }

/* Gradient system — bottom-heavy so text reads clearly */
.ch-bedroom__scrim {
  position: absolute;
  inset: 0;
  background:
    /* Top: subtle darkening so logo reads */
    linear-gradient(to bottom,
      rgba(9,8,15,0.55) 0%,
      rgba(9,8,15,0.1)  22%,
      rgba(9,8,15,0)    40%,
      rgba(9,8,15,0)    52%,
      rgba(9,8,15,0.45) 72%,
      rgba(9,8,15,0.88) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* Content sits at bottom-left — over the dark curtain */
.ch-bedroom__content {
  position: relative;
  z-index: 2;
  padding: 0 64px 80px;
  max-width: 680px;
}

.ch-bedroom__logo {
  position: absolute;
  top: 44px;
  left: 64px;
  z-index: 3;
  width: 80px;
  height: auto;
  opacity: 0;
  /* Final target opacity set in animation */
  animation: logo-in 1.6s 0.2s ease forwards;
  filter: drop-shadow(0 0 24px rgba(200,180,154,0.3));
}

.ch-bedroom__eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose);
  opacity: 0;
  animation: rise-in 1s 0.6s ease forwards;
  display: block;
  margin-bottom: 20px;
}

.ch-bedroom__headline {
  font-family: var(--serif);
  font-weight: 300;
  /* Large — fills the dark lower-left of the bedroom image */
  font-size: clamp(52px, 8.5vw, 110px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cream);
  opacity: 0;
  animation: rise-in 1.4s 0.85s cubic-bezier(0.2, 0, 0, 1) forwards;
  margin-bottom: 24px;
}
.ch-bedroom__headline em {
  font-style: italic;
  color: var(--glow);
}

.ch-bedroom__sub {
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 300;
  color: rgba(237,232,223,0.55);
  line-height: 1.8;
  max-width: 320px;
  opacity: 0;
  animation: rise-in 1s 1.2s ease forwards;
  margin-bottom: 44px;
}

.ch-bedroom__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  border: 0.5px solid rgba(237,232,223,0.28);
  padding: 14px 36px;
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.06);
  transition: border-color 0.4s, background 0.4s, color 0.2s;
  opacity: 0;
  animation: rise-in 1s 1.45s ease forwards;
}
.ch-bedroom__cta:hover {
  border-color: rgba(237,232,223,0.5);
  background: rgba(255,255,255,0.1);
}
.ch-bedroom__cta:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 4px;
}
.ch-bedroom__cta-arrow {
  font-size: 15px;
  transition: transform 0.35s;
}
.ch-bedroom__cta:hover .ch-bedroom__cta-arrow { transform: translateX(6px); }

/* Scroll line — very bottom center */
.ch-bedroom__scroll {
  position: absolute;
  bottom: 40px;
  right: 64px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: fade-in 1s 2s ease forwards;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.ch-bedroom__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(237,232,223,0.5), transparent);
  animation: breathe 3s ease-in-out infinite;
}
.ch-bedroom__scroll-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237,232,223,0.3);
}

/* ════════════════════════════════════════════════════════════
   TRANSITION — bedroom fades into pure ink
   This is a CSS gradient, not an image. The page continues.
════════════════════════════════════════════════════════════ */

.fade-to-night {
  height: 120px;
  background: linear-gradient(to bottom, var(--ink), var(--ink));
  /* The bedroom image's own bottom scrim already handles this */
}

/* ════════════════════════════════════════════════════════════
   INTERLUDE — pure dark. Text only.
   The mind slows before the next image arrives.
════════════════════════════════════════════════════════════ */

.interlude {
  background: var(--ink);
  padding: 140px 64px 120px;
  position: relative;
}
.interlude::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(90,60,110,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.interlude__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  opacity: 0.5;
  margin-bottom: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.interlude__text {
  max-width: 540px;
  margin: 0 auto;
}
.interlude__text p {
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 300;
  color: rgba(193,185,176,0.55);
  line-height: 1.9;
  margin-bottom: 24px;
}
.interlude__text p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   CHAPTER II — FLOWER
   Cosmos in soft focus. Recognition.
   Image positioned right. Text overlaps left edge.
   Feels like looking through a window at the flowers.
════════════════════════════════════════════════════════════ */

.ch-flower {
  position: relative;
  /* Tall but not full-screen — it's a moment, not a chapter */
  height: 88vh;
  min-height: 520px;
  overflow: hidden;
}

.ch-flower__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  filter: brightness(0.42) saturate(0.8);
}

/* Top and bottom blend into ink */
.ch-flower__fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to bottom, var(--ink), transparent);
  z-index: 1;
  pointer-events: none;
}
.ch-flower__fade-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, var(--ink), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Text sits at vertical center, left-aligned */
.ch-flower__content {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0 64px;
  max-width: 560px;
}

.ch-flower__headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ivory);
  margin-bottom: 28px;
}
.ch-flower__headline em {
  font-style: italic;
  color: var(--glow);
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════
   RELIEF — pure ink again. The exhale.
   Very large serif. Feels like a breath.
════════════════════════════════════════════════════════════ */

.relief {
  background: var(--ink);
  padding: 160px 64px 140px;
  text-align: center;
  position: relative;
}

.relief__prose {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 4vw, 48px);
  line-height: 1.5;
  color: var(--ivory);
  max-width: 560px;
  margin: 0 auto 72px;
  letter-spacing: -0.01em;
}
.relief__prose em {
  font-style: italic;
  color: var(--glow);
}

.relief__lines {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.relief__lines li {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 30px);
  color: var(--rose);
  line-height: 2.1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease, transform 1s ease;
}
.relief__lines li.visible {
  opacity: 0.6;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   CHAPTER III — PAMPAS
   Golden hour, open, warm. Audio lives here.
   Image is the warmest — this is the product moment.
   Invitation text floats in the upper-centre of the image.
   Audio tracks sit low, barely styled — just the words.
════════════════════════════════════════════════════════════ */

.ch-pampas {
  position: relative;
  height: 92vh;
  min-height: 580px;
  overflow: hidden;
}

.ch-pampas__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: brightness(0.38) saturate(0.85);
}

.ch-pampas__fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to bottom, var(--ink), transparent);
  z-index: 1;
  pointer-events: none;
}
.ch-pampas__fade-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to top, var(--ink), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Invitation — drifts in the upper-middle of the image */
.ch-pampas__invite {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 48px;
  pointer-events: none;
}
.ch-pampas__invite p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 3.5vw, 40px);
  color: var(--cream);
  opacity: 0.8;
  line-height: 1.4;
}

/* Audio — floats near the bottom of the pampas image */
.ch-pampas__audio {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  max-width: 560px;
  padding: 0 48px 60px;
}

.story {
  padding: 22px 0;
  border-top: 0.5px solid rgba(237,232,223,0.1);
}
.story:last-of-type {
  border-bottom: 0.5px solid rgba(237,232,223,0.1);
}

.story__num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 10px;
  color: var(--rose);
  opacity: 0.35;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.story__title {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--ivory);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.story__desc {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: rgba(237,232,223,0.35);
  line-height: 1.6;
  margin-bottom: 14px;
}

audio {
  width: 100%;
  height: 28px;
  opacity: 0.35;
  display: block;
  transition: opacity 0.3s;
}
audio:hover, audio:focus { opacity: 0.85; }

.ch-pampas__note {
  text-align: center;
  padding-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: rgba(237,232,223,0.2);
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════
   CHAPTER IV — SKY
   The most minimal image. 70% empty sky.
   The quietest ask on the quietest image.
   Form elements float in the lower sky — nearly weightless.
════════════════════════════════════════════════════════════ */

.ch-sky {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch-sky__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  /* Gentle — this image is already pale and vast */
  filter: brightness(0.28) saturate(0.65);
}

.ch-sky__fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 25%;
  background: linear-gradient(to bottom, var(--ink), transparent);
  z-index: 1;
  pointer-events: none;
}
.ch-sky__fade-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to top, var(--ink), transparent);
  z-index: 1;
  pointer-events: none;
}

.ch-sky__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 120px 36px;
  width: 100%;
  max-width: 560px;
}

.ch-sky__headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 6.5vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 18px;
}
.ch-sky__headline em {
  font-style: italic;
  color: var(--glow);
}

.ch-sky__sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(237,232,223,0.42);
  line-height: 1.85;
  max-width: 300px;
  margin: 0 auto 52px;
}

/* Form — no background, no border radius on container */
.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.email-label {
  /* Visually hidden but accessible */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.email-input {
  width: 100%;
  max-width: 340px;
  background: rgba(9,8,15,0.5);
  border: 0.5px solid rgba(237,232,223,0.16);
  border-radius: 999px;
  color: var(--cream);
  padding: 15px 28px;
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 300;
  outline: none;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: border-color 0.35s, background 0.35s;
}
.email-input::placeholder { color: rgba(237,232,223,0.2); }
.email-input:focus {
  border-color: rgba(200,180,154,0.42);
  background: rgba(9,8,15,0.65);
}

.btn-submit {
  width: 100%;
  max-width: 340px;
  background: var(--glow);
  color: #190f08;
  border: none;
  border-radius: 999px;
  padding: 15px 32px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sans);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.25s, transform 0.18s;
}
.btn-submit:hover { background: #d8c4aa; transform: translateY(-1px); }
.btn-submit:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }

.privacy-note {
  font-size: 11px;
  color: rgba(237,232,223,0.2);
  line-height: 1.8;
  margin-top: 4px;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 340px;
  text-align: left;
  cursor: pointer;
}
.consent-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--glow);
  cursor: pointer;
}
.consent-label span {
  font-size: 12px;
  font-weight: 300;
  color: rgba(237,232,223,0.45);
  line-height: 1.6;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  font-size: 12px;
  color: var(--rose);
  line-height: 1.7;
  margin-top: 4px;
  text-align: center;
}
.form-error a { color: inherit; }

.success-message {
  display: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 3vw, 30px);
  color: var(--glow);
  line-height: 1.6;
  padding: 28px 0;
}

/* ════════════════════════════════════════════════════════════
   FOOTER — barely there
════════════════════════════════════════════════════════════ */

.footer {
  background: var(--ink);
  padding: 64px 36px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  border-top: 0.5px solid rgba(255,255,255,0.05);
}
.footer__logo {
  width: 56px;
  height: auto;
  opacity: 0.15;
  display: block;
}
.footer__nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__nav a {
  font-size: 12px;
  color: var(--dim);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--mist); }
.footer__copy {
  font-size: 11px;
  color: var(--dim);
  opacity: 0.45;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════════════════ */

.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .js-ready .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity  1.1s cubic-bezier(0.25, 0, 0, 1),
      transform 1.1s cubic-bezier(0.25, 0, 0, 1);
  }
  .js-ready .reveal.in { opacity: 1; transform: none; }
  .js-ready .reveal-d1 { transition-delay: 0.14s; }
  .js-ready .reveal-d2 { transition-delay: 0.28s; }
  .js-ready .reveal-d3 { transition-delay: 0.42s; }
}

/* Full reduced-motion support: the block above only skips the
   scroll-reveal effect. This stops every other animation too
   (hero logo/headline/sub/CTA entrance, scroll-line breathing,
   the 10s hero image scale-in). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ch-bedroom__photo { transform: none; }
  .ch-bedroom__logo,
  .ch-bedroom__eyebrow,
  .ch-bedroom__headline,
  .ch-bedroom__sub,
  .ch-bedroom__cta,
  .ch-bedroom__scroll { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════════════════ */

@keyframes logo-in {
  from { opacity: 0; }
  to   { opacity: 0.82; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.45; transform: scaleY(1); }
  50%       { opacity: 0.85; transform: scaleY(1.06); }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .ch-bedroom__content  { padding: 0 28px 64px; }
  .ch-bedroom__logo     { left: 28px; width: 64px; }
  .ch-bedroom__scroll   { right: 28px; }
  .ch-flower__content   { padding: 0 28px; }
  .ch-pampas__audio     { padding: 0 28px 48px; }
  .ch-pampas__invite    { padding: 0 28px; }
  .ch-sky__content      { padding: 100px 28px; }
  .interlude            { padding: 100px 28px 80px; }
  .relief               { padding: 120px 28px 100px; }
}

/* ── Tablet / iPad — portrait & landscape (641–1180px) ──
   Fixes text clipping/overflow reported on iPad landscape Safari:
   large clamp() headlines + short landscape viewport height
   (iPad landscape is short: ~768–834px) meant text sat too close
   to section edges and could be cut off by parent overflow:hidden.
   This tightens padding/sizing in that range and gives every
   large text block a safety net so it wraps instead of clipping. */
@media (min-width: 641px) and (max-width: 1180px) {
  .ch-bedroom__content { padding: 0 48px 64px; max-width: 620px; }
  .ch-bedroom__headline { font-size: clamp(44px, 7vw, 84px); }
  .ch-bedroom__logo    { left: 48px; }
  .ch-bedroom__scroll  { right: 48px; }
  .ch-flower__content  { padding: 0 48px; max-width: 480px; }
  .ch-flower__headline { font-size: clamp(30px, 4.4vw, 48px); }
  .ch-pampas__invite    { padding: 0 40px; }
  .ch-pampas__invite p  { font-size: clamp(20px, 3vw, 32px); }
  .ch-pampas__audio     { padding: 0 40px 48px; max-width: 480px; }
  .ch-sky__content      { padding: 90px 40px; max-width: 480px; }
  .ch-sky__headline     { font-size: clamp(34px, 5.4vw, 60px); }
  .interlude            { padding: 110px 48px 90px; }
  .relief               { padding: 130px 48px 110px; }
  .relief__prose        { font-size: clamp(24px, 3.4vw, 38px); }
}

/* ── Short viewport height (landscape tablets/phones) ──
   Reduces vertical padding when height is constrained so
   content never gets pushed past the fold / clipped by
   overflow:hidden ancestors. */
@media (max-height: 850px) and (min-width: 641px) and (orientation: landscape) {
  .ch-bedroom            { min-height: 0; }
  .ch-bedroom__content   { padding-bottom: 40px; }
  .ch-sky                { min-height: 0; }
  .ch-sky__content       { padding: 56px 40px; }
  /* NOTE: .ch-flower and .ch-pampas are intentionally left alone here.
     Both position their content with `position: absolute` + top/bottom
     percentages, which are calculated against the section's own height.
     Their existing 88vh/92vh already shrinks correctly with a shorter
     viewport (down to ~676-767px on an iPad landscape height of
     768-834px), well above their 520px/580px min-height floors.
     Switching to height:auto here previously collapsed the section
     (absolutely-positioned children don't contribute to auto height),
     which re-anchored the invite text and audio block against a much
     shorter box and risked them overlapping. Adjust padding on the
     inner __content/__invite/__audio elements instead if more room
     is needed, not the section height. */
  .interlude             { padding: 70px 48px 56px; }
  .relief                { padding: 80px 48px 64px; }
}

/* ── Overflow safety net for all large text blocks ──
   Guarantees text wraps within its container instead of being
   cut off by an ancestor's overflow: hidden, on any viewport. */
.ch-bedroom__headline,
.ch-bedroom__sub,
.ch-flower__headline,
.ch-sky__headline,
.ch-sky__sub,
.relief__prose,
.ch-pampas__invite p,
.interlude__text p,
.interlude__label,
.story__title,
.story__desc {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ════════════════════════════════════════════════════════════
   POLICY PAGES
════════════════════════════════════════════════════════════ */

.policy {
  max-width: 660px;
  margin: 0 auto;
  padding: 120px 36px 100px;
}
.policy-back {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-decoration: none;
  margin-bottom: 64px;
  transition: color 0.2s;
}
.policy-back:hover { color: var(--mist); }
.policy h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--ivory);
  margin-bottom: 48px;
  letter-spacing: -0.01em;
}
.policy h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 20px;
  color: var(--mist);
  margin: 44px 0 14px;
}
.policy p, .policy li {
  font-size: 15px;
  color: var(--dim);
  line-height: 1.9;
  margin-bottom: 16px;
}
.policy ul { padding-left: 20px; }
.policy a  { color: var(--glow); text-decoration: none; border-bottom: 0.5px solid rgba(200,180,154,0.3); }
.policy-date {
  display: block;
  font-size: 12px;
  color: var(--dim);
  opacity: 0.5;
  letter-spacing: 0.06em;
  margin-bottom: 52px;
}