/* BAE SOUND · Full Experience — the deck that travels one day. Engine and night look come from site/ (base, sky, screens);
   this file adds the day and sunset palettes, the journey and flow screens, the full-day arc and the Moon Temples link. */

/* ---- day: warm ink on a pale sky; deep bronze titles ---- */
.deck[data-tod="day"] { --ivory: #2b2230; --mute: #5a4d5c; --dim: #8b7e86; --gold: #94702f; --gold-pale: #7a5a26; color-scheme: light; }
.deck[data-tod="day"] .wtitle { background-image: linear-gradient(100deg, transparent 45%, rgba(255,248,230,.5) 50%, transparent 55%), url(../assets/img/patina.jpg),
  linear-gradient(180deg, #a07a3a 0%, #7c5a26 45%, #5e4219 100%); }
.deck[data-tod="day"] .tglow { filter: drop-shadow(0 0 .6cqw rgba(255,240,210,.7)); }
.deck[data-tod="day"] .grain { opacity: .03; }
.deck[data-tod="day"] .music-btn { background: rgba(255,250,240,.55); color: #5a4d5c; border-color: rgba(148,112,47,.45); }
.deck[data-tod="day"] .rail button { opacity: .6; }
.deck[data-tod="day"] .s-cover .kicker { color: #8a6a34; } .deck[data-tod="day"] .s-cover .sub { color: #4d4150; }
.deck[data-tod="day"] .eyebrow::before, .deck[data-tod="day"] .eyebrow.c::after { background: linear-gradient(90deg, transparent, rgba(148,112,47,.8)); }
.deck[data-tod="day"] .orb .disc { fill: #ffe7b0; }
.deck[data-tod="day"] .codes svg, .deck[data-tod="day"] .codes i { filter: brightness(.42) sepia(.7) saturate(1.4); }
.deck[data-tod="day"] .hint { color: #7a5a26; }
/* the sun: a soft wide halo around the disc */
.deck:is([data-tod="day"], [data-tod="sunset"]) .orb .eglow { opacity: 1 !important; animation: none;
  background: radial-gradient(closest-side, rgba(255,214,140,.85), rgba(255,180,100,.42) 34%, rgba(255,170,90,.12) 62%, rgba(255,170,90,0) 78%); }
.deck[data-tod="sunset"] .orb .eglow { background: radial-gradient(closest-side, rgba(255,190,120,.95), rgba(245,120,80,.5) 32%, rgba(200,70,90,.15) 60%, rgba(200,70,90,0) 78%) !important; }
/* ---- sunset: ivory on coral and violet ---- */
.deck[data-tod="sunset"] { --mute: #f6e6d8; --dim: #fbe9dc; --gold: #ffe3b0; --gold-pale: #fff1d6; }
.deck[data-tod="sunset"] .counter, .deck[data-tod="sunset"] .jr-open, .deck[data-tod="sunset"] .fline span { text-shadow: 0 0 .6em rgba(80,20,40,.55); }
.deck[data-tod="sunset"] .tph { box-shadow: 0 0 0 .5cqw rgba(60,20,40,.35), 0 0 0 calc(.5cqw + 1px) rgba(255,214,160,.4), 0 3cqh 7cqh rgba(60,10,30,.45); }

/* ---- the journeys: the photo fills the whole screen, the story and its steps sit over a soft shade ---- */
.s-jr { --ivory: #f6f0e6; --mute: #e9dfd2; --dim: #d4c6b6; --gold: #ecd39c; --gold-pale: #f6e6c2; }
.deck[data-tod="day"] .s-jr .wtitle { background-image: linear-gradient(100deg, transparent 45%, rgba(255,248,230,.45) 50%, transparent 55%), url(../assets/img/patina.jpg), linear-gradient(180deg, #f6ecd2 0%, #e2c88f 38%, #c4a064 70%, #8c6a36 100%); }
.jr-bg { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; overflow: hidden; z-index: -1; }
.jr-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 9s ease-out; }
.s-jr.is-active .jr-bg img { transform: scale(1); }
.jr-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,6,14,.86) 0%, rgba(8,6,14,.62) 38%, rgba(8,6,14,.12) 70%, rgba(8,6,14,0) 100%),
  linear-gradient(0deg, rgba(8,6,14,.5), rgba(8,6,14,0) 40%); }
.deck[data-tod="sunset"] .jr-bg::after { background: linear-gradient(90deg, rgba(46,18,40,.88) 0%, rgba(70,26,48,.6) 40%, rgba(70,26,48,.1) 72%, transparent), linear-gradient(0deg, rgba(46,18,40,.5), transparent 40%); }
.jr-txt { position: absolute; left: 8cqw; top: 13cqh; width: 40cqw; }
.s-jr .wtitle { font-size: 4.2cqw; letter-spacing: .14em; margin-top: 2cqh; }
.s-jr .season { margin-top: 1.8cqh; font: 400 max(.8cqw, 9px)/1.6 'Raleway', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-pale); }
.s-jr .lead { margin-top: 1.8cqh; }
.s-jr .jr-open { margin-top: 2cqh; font: 400 max(.75cqw, 9px)/1.6 'Raleway', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.jr-flow { margin-top: 4cqh; counter-reset: f; }
.jr-flow li { position: relative; counter-increment: f; padding: 1.4cqh 0 1.4cqh 3.6cqw; border-top: 1px solid rgba(236,211,156,.25); }
.jr-flow li::before { content: counter(f, upper-roman); position: absolute; left: 0; top: 1.6cqh; font: 500 max(.8cqw, 9px)/1.4 var(--display); letter-spacing: .2em; color: var(--gold); }
.jr-flow b { display: block; font: 500 max(1.15cqw, 12px)/1.25 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-pale); }
.jr-flow span { display: block; margin-top: .5cqh; font: 300 max(.95cqw, 11px)/1.5 'Raleway', sans-serif; color: var(--mute); }
@container deck (orientation: portrait) {
  .jr-bg::after { background: linear-gradient(0deg, rgba(8,6,14,.92) 0%, rgba(8,6,14,.78) 52%, rgba(8,6,14,.2) 78%, rgba(8,6,14,.05) 100%); }
  .deck[data-tod="sunset"] .jr-bg::after { background: linear-gradient(0deg, rgba(46,18,40,.94) 0%, rgba(60,22,44,.8) 52%, rgba(60,22,44,.2) 78%, transparent); }
  .jr-txt { left: 8cqw; right: 8cqw; width: auto; top: auto; bottom: 6cqh; }
  .s-jr .wtitle { font-size: 8cqw; margin-top: 1cqh; } .s-jr .season, .s-jr .jr-open { font-size: max(2.1cqw, 9px); } .s-jr .lead { font-size: 4.2cqw; margin-top: 1cqh; }
  .jr-flow { margin-top: 1.8cqh; } .jr-flow li { padding: .9cqh 0 .9cqh 8cqw; } .jr-flow li::before { top: 1.1cqh; font-size: max(2.2cqw, 9px); }
  .jr-flow b { font-size: 3.4cqw; } .jr-flow span { font-size: max(2.9cqw, 10px); margin-top: .2cqh; }
}
@container deck (orientation: landscape) and (max-height: 500px) {
  .jr-txt { top: 8cqh; width: 46cqw; } .s-jr .lead, .s-jr .jr-open { display: none; } .jr-flow { margin-top: 1.6cqh; } .jr-flow li { padding: .7cqh 0 .7cqh 3.6cqw; } .jr-flow span { display: none; }
}

/* ---- the full day: an arc from sun to moon ---- */
.s-fullday .head .lead { margin-top: 2cqh; max-width: 52cqw; text-align: center; }
.arc { position: absolute; left: 10cqw; right: 10cqw; top: 38cqh; height: 30cqh; }
.arc svg { width: 100%; height: 100%; overflow: visible; }
.arc-path { fill: none; stroke: url(#none); stroke: rgba(226,200,143,.55); stroke-width: 1.4; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; }
.arc i { position: absolute; width: 3cqw; height: 3cqw; border-radius: 50%; transform: translate(-50%, -50%); }
.arc .s1 { left: 6%; top: 88%; background: radial-gradient(circle, #fff6dc 0 45%, rgba(255,214,150,.5) 46%, rgba(255,214,150,0) 72%); }
.arc .s2 { left: 50%; top: 4%; width: 3.6cqw; height: 3.6cqw; background: radial-gradient(circle, #ffd79a 0 45%, rgba(255,150,90,.55) 46%, rgba(240,110,80,0) 72%); }
.arc-moon { left: 94%; top: 88%; background: url(../assets/img/moon-real.jpg) center / cover; box-shadow: 0 0 1.4cqw rgba(239,223,184,.6); filter: sepia(.25) brightness(1.15); }
.arc-stops { position: absolute; left: 6cqw; right: 6cqw; top: 72cqh; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.arc-stops span { display: block; font: 400 max(.75cqw, 9px)/1 'Raleway', sans-serif; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.arc-stops b { display: block; margin-top: 1.4cqh; font: 500 max(1.5cqw, 13px)/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-pale); }
.arc-stops em { display: block; margin-top: 1cqh; font: italic 400 max(1.1cqw, 12px)/1.3 'Cormorant Garamond', serif; color: var(--ivory); }
@container deck (orientation: portrait) {
  .s-fullday .head .lead { max-width: none; padding: 0 8cqw; font-size: 4.2cqw; }
  .arc { left: 8cqw; right: 8cqw; top: 36cqh; height: 18cqh; } .arc i { width: 7cqw; height: 7cqw; } .arc .s2 { width: 8cqw; height: 8cqw; }
  .arc-stops { top: 60cqh; grid-template-columns: 1fr; gap: 3.6cqh; } .arc-stops span { font-size: max(2.2cqw, 9px); }
  .arc-stops b { font-size: 4.2cqw; margin-top: .8cqh; } .arc-stops em { font-size: 3.8cqw; margin-top: .5cqh; }
}
@container deck (orientation: landscape) and (max-height: 500px) { .arc { top: 34cqh; height: 26cqh; } .arc-stops { top: 70cqh; } .s-fullday .head .lead { display: none; } }

/* ---- Moon Temples: the night format, with a link to its own deck ---- */
.s-moonlink .head { top: 62cqh; }
.deck:has(#moon.is-active) .orb { --oy: 30cqh !important; --os: 1.05 !important; } /* the moon sits higher, the words below it */
.s-moonlink .head .wtitle, .s-moonlink .lead { text-shadow: 0 0 1.2em rgba(5,6,10,.9); }
.s-moonlink .lead { margin-top: 2.4cqh; max-width: 50cqw; text-align: center; }
.ml-btn { display: inline-block; margin-top: 4cqh; padding: 1em 2.2em; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-pale); text-decoration: none;
  font: 400 max(.8cqw, 10px)/1 'Raleway', sans-serif; letter-spacing: .3em; text-transform: uppercase; background: rgba(5,6,10,.4); transition: background .4s, color .4s; }
.ml-btn:hover, .ml-btn:focus-visible { background: rgba(210,178,122,.18); color: #fff7e6; outline: none; }
@container deck (orientation: portrait) { .s-moonlink .head { top: 50cqh; } .deck:has(#moon.is-active) .orb { --oy: 24cqh !important; --os: 1.6 !important; } .s-moonlink .lead { max-width: none; padding: 0 8cqw; font-size: 4.2cqw; } .ml-btn { font-size: max(2.4cqw, 10px); } }

/* ---- the end: the BAE Full Experience colours, softly blurred under a black veil ---- */
.endsky { position: absolute; inset: -4%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.8s ease; filter: blur(10px);
  background: linear-gradient(180deg, rgba(5,6,10,.55), rgba(5,6,10,.72)), url(../assets/img/end-sky.jpg) center / cover; }
.deck[data-tod="end"] .endsky { opacity: 1; }
.deck[data-tod="end"] .orb { opacity: 0; transition: opacity 1s ease; }
.deck[data-tod="end"] .stars { opacity: .3; }
.deck[data-tod="end"] .s-join .wtitle, .deck[data-tod="end"] .s-join p { text-shadow: 0 0 1em rgba(5,6,10,.85); }

/* ---- the opening: a soft bloom of pink, teal and gold behind the cover, darkened behind who-we-are ---- */
.bloomsky { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; background: url(../assets/img/bloom.jpg) center / cover; }
.bloomsky i { position: absolute; inset: 0; background: #05060a; opacity: 0; transition: opacity 1.4s ease; }
.deck[data-screen="0"] .bloomsky, .deck[data-screen="1"] .bloomsky { opacity: 1; }
.deck[data-screen="1"] .bloomsky i { opacity: .62; }
.deck:is([data-screen="0"], [data-screen="1"]) { --ivory: #fbf5ec; --mute: #f1e6e8; --dim: #eadbe0; --gold: #f6dfa6; --gold-pale: #fff0cc; }
.deck:is([data-screen="0"], [data-screen="1"]) .wtitle { background-image: linear-gradient(100deg, transparent 45%, rgba(255,248,230,.45) 50%, transparent 55%), url(../assets/img/patina.jpg), linear-gradient(180deg, #fff6e0 0%, #f0d9a2 40%, #d6b26f 72%, #a98446 100%); }
.deck[data-screen="0"] :is(.s-cover .kicker, .s-cover .sub, .s-cover .edition, .s-cover .year, .hint), .deck[data-screen="0"] .tglow { text-shadow: 0 0 .8em rgba(60,20,50,.45); }
.deck[data-screen="0"] .s-cover .kicker { color: #fff0cc; } .deck[data-screen="0"] .s-cover .sub { color: #fbf5ec; } .deck[data-screen="0"] .hint { color: #fff0cc; }
.deck[data-screen="0"] .codes svg, .deck[data-screen="0"] .codes i { filter: none; }
.deck:is([data-screen="0"], [data-screen="1"]) .music-btn { background: rgba(20,10,24,.35); color: #fbf5ec; border-color: rgba(255,240,204,.5); }

/* ---- the full day: the sky itself tells the day — sun-yellow, then rose, red and violet, down into night ---- */
.daysky { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  background: linear-gradient(180deg, #f6d36b 0%, #f3a65e 16%, #e8577a 34%, #b23a5e 48%, #7a3b8f 62%, #2c1f4f 80%, #0b0c17 100%); }
.deck[data-screen="2"] .daysky { opacity: 1; }
.deck[data-screen="2"] .s-fullday :is(.eyebrow, .wtitle, .lead) { text-shadow: 0 0 .9em rgba(90,30,40,.55); }
.deck[data-screen="2"] .s-fullday .eyebrow { color: #5a2a1a; }
.deck[data-screen="2"] .s-fullday .wtitle { background-image: linear-gradient(100deg, transparent 45%, rgba(255,248,230,.45) 50%, transparent 55%), url(../assets/img/patina.jpg), linear-gradient(180deg, #7a4a1c 0%, #5e3414 60%, #3e200c 100%); }
.deck[data-screen="2"] .s-fullday .head .lead { color: #3a1a24; text-shadow: none; }
.deck[data-screen="2"] .s-fullday .head .eyebrow::before, .deck[data-screen="2"] .s-fullday .head .eyebrow.c::after { background: linear-gradient(90deg, transparent, rgba(90,42,26,.8)); }
.deck[data-screen="0"] .bloomsky i { opacity: 1; background: radial-gradient(60% 42% at 50% 62%, rgba(30,10,30,.55), rgba(30,10,30,.18) 60%, rgba(30,10,30,0) 100%); }
.deck[data-screen="2"] .orb { opacity: 0; transition: opacity .8s ease; } /* the arc already holds the sun and the moon */

/* ==== Marcela 16 oct (2) ==== */
/* the cover gets its own soft black veil too */
.deck[data-screen="0"] .bloomsky i { opacity: 1; background: linear-gradient(rgba(5,6,10,.38), rgba(5,6,10,.38)), radial-gradient(60% 42% at 50% 62%, rgba(30,10,30,.45), rgba(30,10,30,0) 100%); }
/* members and clients: the same bloom, softer and darker */
.deck:is([data-screen="8"], [data-screen="9"]) .bloomsky { opacity: 1; filter: blur(22px); inset: -6%; }
.deck:is([data-screen="8"], [data-screen="9"]) .bloomsky i { opacity: .72; }
/* the journeys: the photo sits to the right, the words in the dark on the left, so the person playing is never covered */
.jr-bg { background: #0a0710; }
.jr-bg img { position: absolute; top: 0; left: 36%; width: 64%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.jr-bg::after { background: linear-gradient(90deg, rgba(8,6,14,.55) 0%, rgba(8,6,14,.25) 34%, rgba(8,6,14,0) 50%), linear-gradient(0deg, rgba(8,6,14,.45), rgba(8,6,14,0) 35%); }
.deck[data-tod="sunset"] .jr-bg { background: #2a1024; }
.deck[data-tod="sunset"] .jr-bg::after { background: linear-gradient(90deg, rgba(46,18,40,.55) 0%, rgba(46,18,40,.2) 34%, transparent 50%), linear-gradient(0deg, rgba(46,18,40,.4), transparent 35%); }
.jr-txt { width: 32cqw; }
#butterfly .jr-bg img { object-position: 50% 28% !important; }
#owl .jr-bg img { object-position: 50% 40% !important; }
/* the eagle: the photo drifts in very slowly around the DJ */
#eagle .jr-bg img { object-position: 52% 40% !important; transform-origin: 52% 38%; animation: slowzoom 40s ease-in-out infinite alternate; transition: none; }
@keyframes slowzoom { from { transform: scale(1); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { #eagle .jr-bg img { animation: none !important; } }
@container deck (orientation: portrait) {
  .jr-bg img { left: 0; width: 100%; height: 62%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .jr-bg::after { background: linear-gradient(0deg, rgba(8,6,14,.9) 0%, rgba(8,6,14,.7) 36%, rgba(8,6,14,0) 52%); }
  .deck[data-tod="sunset"] .jr-bg::after { background: linear-gradient(0deg, rgba(46,18,40,.92) 0%, rgba(46,18,40,.7) 36%, transparent 52%); }
  .jr-txt { width: auto; bottom: 5cqh; }
}
@container deck (orientation: landscape) and (max-height: 500px) { .jr-txt { width: 40cqw; } }
/* the full day: a real sunset sky under a black veil, the clouds stay */
.daysky { background: linear-gradient(rgba(5,6,10,.42), rgba(5,6,10,.42)), url(../assets/img/fullday-sky.jpg) center / cover; }
.deck[data-screen="2"] .s-fullday .eyebrow { color: var(--gold); }
.deck[data-screen="2"] .s-fullday .wtitle { background-image: linear-gradient(100deg, transparent 45%, rgba(255,248,230,.45) 50%, transparent 55%), url(../assets/img/patina.jpg), linear-gradient(180deg, #f6ecd2 0%, #e2c88f 38%, #c4a064 70%, #8c6a36 100%); }
.deck[data-screen="2"] .s-fullday .head .lead { color: var(--ivory); text-shadow: 0 0 .8em rgba(5,6,10,.7); }
.deck[data-screen="2"] .s-fullday .head .eyebrow::before, .deck[data-screen="2"] .s-fullday .head .eyebrow.c::after { background: linear-gradient(90deg, transparent, rgba(210,178,122,.8)); }

/* ==== Marcela 16 oct (3) ==== */
/* cover: the BAE emblem instead of the sun */
.deck[data-screen="0"] .orb { opacity: 0; transition: opacity .6s ease; }
.cover-emblem { display: block; width: 9cqw; margin: 0 auto 3.2cqh; filter: drop-shadow(0 0 1.2cqw rgba(255,230,180,.35)); }
@container deck (orientation: portrait) { .cover-emblem { width: 26cqw; margin-bottom: 3cqh; } }
@container deck (orientation: landscape) and (max-height: 500px) { .cover-emblem { width: 6cqw; margin-bottom: 1.4cqh; } }
/* journeys: lighter shades, the photo shows through */
.jr-bg { background: rgba(10,7,16,.55); }
.jr-bg::after { background: linear-gradient(90deg, rgba(8,6,14,.4) 0%, rgba(8,6,14,.15) 34%, rgba(8,6,14,0) 50%), linear-gradient(0deg, rgba(8,6,14,.25), rgba(8,6,14,0) 30%); }
.deck[data-tod="sunset"] .jr-bg { background: rgba(42,16,36,.35); }
.deck[data-tod="sunset"] .jr-bg::after { background: linear-gradient(90deg, rgba(46,18,40,.35) 0%, rgba(46,18,40,.12) 34%, transparent 50%), linear-gradient(0deg, rgba(46,18,40,.2), transparent 30%); }
#owl .jr-bg img { left: 42%; width: 58%; object-position: 50% 62% !important; }
#owl .jr-txt { top: 9cqh; width: 30cqw; }
@container deck (orientation: portrait) {
  .jr-bg::after { background: linear-gradient(0deg, rgba(8,6,14,.78) 0%, rgba(8,6,14,.5) 36%, rgba(8,6,14,0) 50%); }
  .deck[data-tod="sunset"] .jr-bg::after { background: linear-gradient(0deg, rgba(46,18,40,.8) 0%, rgba(46,18,40,.5) 36%, transparent 50%); }
  #owl .jr-bg img { left: 0; width: 100%; height: 58%; object-position: 50% 78% !important; }
}
/* the end: the moon never flashes in on the way to it */
.deck[data-tod="end"] .orb { opacity: 0 !important; transition: none !important; }
/* the cover block rises into the space the sun used to hold */
#cover .tb { top: 24cqh; }
@container deck (orientation: portrait) { #cover .tb { top: 26cqh; } }
@container deck (orientation: landscape) and (max-height: 500px) { #cover .tb { top: 8cqh; } }
@container deck (orientation: portrait) { #owl .jr-txt { width: auto; top: auto; } }
.cover-emblem { width: 11cqw; }
@container deck (orientation: portrait) { .cover-emblem { width: 28cqw; } }
@container deck (orientation: landscape) and (max-height: 500px) { .cover-emblem { width: 6cqw; } }


/* ==== Marcela 17 oct ==== */
/* no sun or moon popping in between screens on this deck: the orb stays out; the Moon Temples screen carries its own moon */
.deck .orb { opacity: 0 !important; transition: none !important; }
.ml-moon { position: absolute; left: 50%; top: 30cqh; width: 22cqw; height: 22cqw; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover;
  filter: sepia(.18) brightness(1.08); box-shadow: 0 0 4cqw rgba(239,223,184,.35), 0 0 1.2cqw rgba(239,223,184,.5); }
@container deck (orientation: portrait) { .ml-moon { top: 24cqh; width: 52cqw; height: 52cqw; } }
@container deck (orientation: landscape) and (max-height: 500px) { .ml-moon { top: 26cqh; width: 14cqw; height: 14cqw; } }
/* a soft passage between screens: the new one surfaces from a gentle blur, the old one dissolves */
.screen.is-active { animation: screenIn 1.15s cubic-bezier(.2,.7,.2,1) both; }
.screen.is-leaving { animation: screenOut .6s ease both; }
@keyframes screenIn { from { opacity: 0; filter: blur(14px); transform: scale(1.035); } to { opacity: 1; filter: none; transform: none; } }
@keyframes screenOut { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(10px); transform: scale(.985); } }
.deck.instant .screen { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .screen.is-active, .screen.is-leaving { animation: none !important; } }
/* bold words in who-we-are */
.s-who strong { font-weight: 500; color: #fff6e8; }
/* the end: the logo, as on the cover */
.s-join .cover-emblem { width: 9cqw; margin: 0 auto 3cqh; }
@container deck (orientation: portrait) { .s-join .cover-emblem { width: 24cqw; } }
@container deck (orientation: landscape) and (max-height: 500px) { .s-join .cover-emblem { width: 6cqw; margin-bottom: 1.4cqh; } }
.s-who .body em { font: italic 400 1.18em/1 'Cormorant Garamond', serif; color: #fff6e8; }
.s-fullday .head .lead { font-style: normal; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: max(1.15cqw, 13px); letter-spacing: .02em; line-height: 1.6; }
@container deck (orientation: portrait) { .s-fullday .head .lead { font-size: 3.6cqw; } }

/* Solar Temples: the luminous aura of the Solar deck, under a soft dark veil, linking to it */
.solsky { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(60% 70% at 50% 50%, rgba(10,6,4,.25), rgba(10,6,4,.55)), url(../assets/img/solar-aura.jpg) center / cover; }
.deck[data-screen="7"] .solsky { opacity: 1; }
.deck[data-screen="7"] { --ivory: #fbf3e6; --mute: #efe2d2; --gold: #f2d49a; --gold-pale: #fff0cc; }
.deck[data-screen="7"] .s-sollink .wtitle { background-image: linear-gradient(100deg, transparent 45%, rgba(255,248,230,.45) 50%, transparent 55%), url(../assets/img/patina.jpg), linear-gradient(180deg, #fff6e0 0%, #f0d9a2 40%, #d6b26f 72%, #a98446 100%); }
.deck[data-screen="7"] .music-btn { background: rgba(20,10,6,.35); color: #fbf3e6; border-color: rgba(255,240,204,.5); }
.s-sollink .head { top: 38cqh; }
.s-sollink .head .wtitle, .s-sollink .lead { text-shadow: 0 0 1.2em rgba(10,6,4,.8); }
.s-sollink .lead { margin-top: 2.4cqh; max-width: 50cqw; text-align: center; }
@container deck (orientation: portrait) { .s-sollink .head { top: 34cqh; } .s-sollink .lead { max-width: none; padding: 0 8cqw; font-size: 4.2cqw; } }
/* Solar Temples: a deeper veil and stronger ink so the words read clearly (Marcela 18 oct) */
.solsky { background: radial-gradient(55% 60% at 50% 50%, rgba(10,6,4,.5), rgba(10,6,4,.72)), url(../assets/img/solar-aura.jpg) center / cover !important; }
.s-sollink .head { background: radial-gradient(closest-side, rgba(10,6,4,.45), rgba(10,6,4,0)); padding: 4cqh 6cqw; }
.s-sollink .wtitle { font-size: 4.6cqw !important; }
.s-sollink .lead { color: #fff6e8 !important; font-size: max(1.6cqw, 15px); text-shadow: 0 0 1em rgba(10,6,4,.95), 0 0 .3em rgba(10,6,4,.8) !important; }
.s-sollink .eyebrow { color: #f6dca4 !important; text-shadow: 0 0 .8em rgba(10,6,4,.9); }
.deck[data-screen="7"] .s-sollink .tglow { filter: drop-shadow(0 0 1.2cqw rgba(10,6,4,.85)); }
.s-sollink .ml-btn { background: rgba(10,6,4,.55); color: #fff0cc; }
@container deck (orientation: portrait) { .s-sollink .wtitle { font-size: 9cqw !important; } .s-sollink .lead { font-size: 4.4cqw; } }