/* Three complete journeys; they use the same live content and RSVP form. */
body:is([data-design-layout="coastal"],[data-design-layout="earth"],[data-design-layout="deco"]) #heroSection {
  position: relative; gap: 0; min-width: 0;
}
body:is([data-design-layout="coastal"],[data-design-layout="earth"],[data-design-layout="deco"]) .hero-kinetic-title {
  align-items: center; width: 100%;
}
body:is([data-design-layout="coastal"],[data-design-layout="earth"],[data-design-layout="deco"]) .hero-name-item {
  font-family: var(--font-serif); font-size: calc(clamp(43px,7vw,86px) * var(--atelier-name-scale) * var(--cover-fit));
}

/* Costa: a panoramic postcard, blue borders and a quiet horizon. */
body[data-design-layout="coastal"] #heroSection {
  padding: 48px 0 38px; text-align: center; border-block: 2px solid var(--text-primary);
}
body[data-design-layout="coastal"] #atelierEventTitle { margin: 0 auto 26px; }
body[data-design-layout="coastal"] .hero-kinetic-title { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px 20px; margin: 0 0 24px; }
body[data-design-layout="coastal"] .hero-name-item { max-width: 100%; font-style: italic; }
body[data-design-layout="coastal"] .hero-ampersand { font: italic 30px/1.2 var(--font-serif); }
body[data-design-layout="coastal"] #heroSection > .hero-photo-frame {
  grid-row: 4; aspect-ratio: 16/9; width: 100%; max-width: none; margin: 10px 0 30px;
  padding: 8px; border: 1px solid var(--atelier-rule); background: var(--bg-card);
}
body[data-design-layout="coastal"] .hero-quote { grid-row: 7; font: italic 24px/1.5 var(--font-serif); max-width: 28em; }
body[data-design-layout="coastal"] .hero-date-badge { grid-row: 5; border: 0; padding: 0; font-size: 22px; }
body[data-design-layout="coastal"] #heroSection > .wedding-city-text { grid-row: 6; }
body[data-design-layout="coastal"] .journey-cover-mark { display: none; }
body[data-design-layout="coastal"] #envelopeScreen { background: var(--bg-parchment); }
body[data-design-layout="coastal"] .envelope-flap-chassis { border-color: var(--text-primary); }

/* Tierra: linen, a sunlit oval portrait and an asymmetrical signed story. */
body[data-design-layout="earth"] #heroSection {
  text-align: center; padding: 55px 0 65px;
  background: radial-gradient(ellipse at 50% 25%,color-mix(in oklab,var(--gold-primary) 10%,transparent),transparent 65%);
}
body[data-design-layout="earth"] #atelierEventTitle { letter-spacing: .17em; margin: 0 auto 23px; }
body[data-design-layout="earth"] .hero-name-item { font-style: italic; }
body[data-design-layout="earth"] .hero-ampersand { font: italic 31px/1.1 var(--font-serif); }
body[data-design-layout="earth"] #heroSection > .hero-photo-frame {
  width: 70%; max-width: 350px; aspect-ratio: 4/5; border-radius: 48% 48% 44% 44%;
  outline: 1px solid var(--atelier-rule); outline-offset: 9px; margin: 30px auto;
}
body[data-design-layout="earth"] .hero-quote { font: italic 25px/1.5 var(--font-serif); max-width: 24em; }
body[data-design-layout="earth"] .hero-date-badge { font-size: 22px; }
body[data-design-layout="earth"] #envelopeScreen { background: var(--bg-parchment); }
body[data-design-layout="earth"] .stage-wax-seal .sacred-geometry-medallion { display: none; }
body[data-design-layout="earth"] .stage-wax-seal .envelope-classic-card {
  background: var(--bg-parchment); border: 1px solid var(--atelier-rule); border-radius: 32px 32px 4px 4px;
  padding: 50px clamp(22px,4vw,45px) 35px; box-shadow: 0 24px 55px #241d2326;
}
body[data-design-layout="earth"] .stage-wax-seal .envelope-classic-card::before {
  background: none; border: 1px solid var(--atelier-rule); inset: 10px; border-radius: 23px 23px 0 0;
}
body[data-design-layout="earth"] .stage-wax-seal .envelope-monogram {
  background: none; color: var(--text-primary); -webkit-text-fill-color: var(--text-primary);
  font: 400 clamp(52px,11vw,72px)/1.2 var(--font-script);
}
body[data-design-layout="earth"] .stage-wax-seal :is(.envelope-subtitle,.envelope-prompt) {
  color: var(--text-primary); opacity: 1; font-size: 12px; line-height: 1.7; letter-spacing: .08em;
}
body[data-design-layout="earth"] .stage-wax-seal .envelope-prompt { animation: none; }

/* Salón: stepped art deco framing and a portrait medallion. */
body[data-design-layout="deco"] #heroSection {
  text-align: center; padding: 52px clamp(22px,4vw,55px) 58px; margin-block: 8px 65px;
  border: 1px solid var(--gold-primary);
}
body[data-design-layout="deco"] #heroSection::before {
  content: ''; position: absolute; inset: 8px; pointer-events: none; z-index: -1;
  border: 1px solid var(--atelier-rule); clip-path: polygon(0 18px,18px 18px,18px 0,calc(100% - 18px) 0,calc(100% - 18px) 18px,100% 18px,100% calc(100% - 18px),calc(100% - 18px) calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,18px calc(100% - 18px),0 calc(100% - 18px));
}
body[data-design-layout="deco"] .journey-cover-mark {
  display: block; font: 400 24px/1.4 var(--font-serif); letter-spacing: .08em;
  border-block: 1px solid var(--atelier-rule); width: fit-content; margin: 0 auto 28px; padding: 12px 23px;
}
body[data-design-layout="deco"] #atelierEventTitle { font-size: 10px; letter-spacing: .24em; }
body[data-design-layout="deco"] .hero-kinetic-title { margin: 8px 0 24px; }
body[data-design-layout="deco"] .hero-name-item { font-style: normal; letter-spacing: .01em; }
body[data-design-layout="deco"] .hero-ampersand { font: italic 28px/1 var(--font-serif); }
body[data-design-layout="deco"] #heroSection > .hero-photo-frame {
  width: min(64%,260px); aspect-ratio: 4/5; border-radius: 50% 50% 0 0;
  border: 6px solid var(--bg-parchment); outline: 1px solid var(--gold-primary); outline-offset: 5px; margin: 28px auto;
}
body[data-design-layout="deco"] .hero-quote { font: italic 22px/1.5 var(--font-serif); max-width: 26em; }
body[data-design-layout="deco"] .hero-date-badge { border-block: 1px solid var(--atelier-rule); padding: 15px 22px; font-size: 20px; }
body[data-design-layout="deco"] #envelopeScreen { background: var(--bg-parchment); }

/* Complete story scenes; finish and user-selected palette remain authoritative. */
body[data-journey] #historiaSection:is([data-scene="coastal"],[data-scene="earth"],[data-scene="deco"]) .historia-editorial-body {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 30px; align-items: center;
}
body[data-journey] #historiaSection[data-scene="coastal"] { border-block: 1px solid var(--atelier-rule) !important; }
body[data-journey] #historiaSection[data-scene="coastal"] .hero-photo-frame { aspect-ratio: 5/4; padding: 7px; border: 1px solid var(--atelier-rule); }
body[data-journey] #historiaSection[data-scene="coastal"] #historiaShortText { text-align: left; }
body[data-journey] #historiaSection[data-scene="earth"] .hero-photo-frame { aspect-ratio: 4/5; border-radius: 48% 48% 44% 44%; width: 80%; max-width: 340px; margin: 0 auto !important; }
body[data-journey] #historiaSection[data-scene="earth"] #historiaShortText { font-style: italic !important; text-align: left; }
body[data-journey] #historiaSection[data-scene="deco"] { padding-inline: clamp(20px,4vw,48px); border: 1px solid var(--atelier-rule) !important; }
body[data-journey] #historiaSection[data-scene="deco"] .hero-photo-frame { aspect-ratio: 1; width: min(75%,300px); border-radius: 50%; margin: 0 auto !important; padding: 7px; border: 1px solid var(--atelier-rule); }
body[data-journey] #historiaSection[data-scene="deco"] #historiaShortText { text-align: center; }
body[data-journey] #historiaSection:is([data-scene="coastal"],[data-scene="earth"],[data-scene="deco"]) .journey-signature { margin-top: 0; }

/* Program, places and reply follow their cover's visual language. */
body[data-journey] #cronogramaSection:is([data-scene="coastal"],[data-scene="earth"],[data-scene="deco"]) .timeline-horizontal-track { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
body[data-journey] #cronogramaSection[data-scene="coastal"] .timeline-milestone-card { text-align: left; border-top: 1px solid var(--atelier-rule) !important; padding: 25px 18px; }
body[data-journey] #cronogramaSection[data-scene="earth"] .timeline-milestone-card { border-left: 1px solid var(--atelier-rule) !important; padding: 24px 30px; text-align: left; }
body[data-journey] #cronogramaSection[data-scene="deco"] .timeline-milestone-card { border-block: 1px solid var(--atelier-rule) !important; padding: 30px 20px; margin-block: -1px 0; text-align: center; }
body[data-journey] #itinerarySection[data-scene="coastal"] .venue-card { padding: 32px 24px; text-align: left; border: 1px solid var(--atelier-rule) !important; }
body[data-journey] #itinerarySection[data-scene="earth"] .venue-card { padding: 30px 24px; border-top: 1px solid var(--atelier-rule) !important; text-align: left; }
body[data-journey] #itinerarySection[data-scene="deco"] .venue-card { padding: 38px 24px; border: 1px solid var(--atelier-rule) !important; text-align: center; }
body[data-journey] #rsvpSection:is([data-scene="coastal"],[data-scene="earth"],[data-scene="deco"]) { padding-inline: clamp(19px,4vw,48px); }
body[data-journey] #rsvpSection[data-scene="coastal"] { border-block: 2px solid var(--text-primary) !important; }
body[data-journey] #rsvpSection[data-scene="earth"] { border: 1px solid var(--atelier-rule) !important; border-radius: 36px 36px 0 0 !important; }
body[data-journey] #rsvpSection[data-scene="deco"] { border: 1px solid var(--gold-primary) !important; outline: 1px solid var(--atelier-rule); outline-offset: -8px; }
body[data-journey] :is([data-scene="coastal"],[data-scene="earth"],[data-scene="deco"]) :is(input,select,textarea,button,a):focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }

@media(min-width:760px) {
  body[data-design-layout="earth"] #heroSection { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); column-gap: 55px; }
  body[data-design-layout="earth"] #heroSection > * { grid-column: 1; }
  body[data-design-layout="earth"] #heroSection > .hero-photo-frame { grid-column: 2; grid-row: 1 / span 6; width: 100%; align-self: center; }
  body[data-design-layout="earth"] .hero-quote { grid-column: 1 / -1; margin-top: 40px; }
  body[data-journey] #historiaSection:is([data-scene="coastal"],[data-scene="earth"]) .historia-editorial-body { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); column-gap: 45px; }
  body[data-journey] #historiaSection:is([data-scene="coastal"],[data-scene="earth"]) .hero-photo-frame { grid-column: 1; grid-row: 1 / span 2; }
  body[data-journey] #historiaSection:is([data-scene="coastal"],[data-scene="earth"]) :is(#historiaShortText,.journey-signature) { grid-column: 2; }
  body[data-journey] #cronogramaSection[data-scene="coastal"] .timeline-horizontal-track { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 30px; }
}
@media(max-width:759px) {
  body[data-design-layout="coastal"] .hero-kinetic-title { flex-direction: column; gap: 7px; }
  body[data-design-layout="coastal"] #heroSection > .hero-photo-frame { aspect-ratio: 5/4; }
  body[data-design-layout="earth"] #heroSection > .hero-photo-frame { width: 78%; }
  body[data-design-layout="deco"] #heroSection { padding-inline: 20px; }
  body[data-design-layout="deco"] #heroSection > .hero-photo-frame { width: 72%; }
  body[data-design-layout="deco"] .hero-name-item { font-size: calc(clamp(38px,12vw,70px) * var(--atelier-name-scale) * var(--cover-fit)); }
}
body[data-hero-photo="hide"][data-design-layout="earth"] #heroSection { grid-template-columns: minmax(0,1fr); }
body[data-hero-photo="hide"][data-design-layout="earth"] #heroSection > * { grid-column: 1; grid-row: auto; }

/* Línea de tiempo en lectura a 320-360 px: la columna de detalle quedaba en ~80 px y un título de 25 px («Ceremonia») no
   cabía en la tarjeta. Hora e ícono más angostos, menos relleno y un título de 21 px. */
@media (max-width: 360px) {
  body[data-journey] #cronogramaSection:is([data-scene="coastal"], [data-scene="earth"], [data-scene="deco"]) .timeline-milestone-card {
    grid-template-columns: [time] 3.7rem [icon] 1.2rem [detail] minmax(0, 1fr) [end];
    column-gap: 8px;
    padding-inline: 12px;
  }

  body[data-journey] #cronogramaSection:is([data-scene="coastal"], [data-scene="earth"], [data-scene="deco"]) .milestone-title {
    font-size: 21px;
    overflow-wrap: break-word;
  }
}