/* BAE SOUND · Solar (built on the Full Experience styles) — 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 ---- */
.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 ---- */
.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%); }

/* ==== 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 */
/* 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 */

/* ==== 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; } }


/* ==================== BAE Solar ==================== */
/* members and the end: the bloom, softer and darker */
.deck:is([data-screen="7"], [data-screen="8"]) .bloomsky { opacity: 1; filter: blur(22px); inset: -6%; }
.deck:is([data-screen="7"], [data-screen="8"]) .bloomsky i { opacity: .62; }
.deck:is([data-screen="7"], [data-screen="8"]) { --ivory: #fbf5ec; --mute: #efe4e6; --dim: #e2d4da; --gold: #f2d9a0; --gold-pale: #fff0cc; }
.deck:is([data-screen="7"], [data-screen="8"]) .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%); }
.s-join .cover-emblem { width: 9cqw; margin: 0 auto 3cqh; }
@container deck (orientation: portrait) { .s-join .cover-emblem { width: 24cqw; } }
.solar-line { margin-top: 1.6cqh; } .solar-line em { font: italic 400 1.2em/1.3 'Cormorant Garamond', serif; color: #fff6e8; }

/* the offerings: a photo or a colour texture fills the screen; the words sit on the left over a soft shade */
.s-off { --ivory: #fbf5ec; --mute: #efe5dc; --dim: #e0d2c4; --gold: #f2d9a0; --gold-pale: #fff0cc; }
.deck[data-tod="day"] .s-off .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%); }
.off-bg { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; overflow: hidden; z-index: -1; background: #241a22; }
.off-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%);
  transform-origin: 50% 50%; animation: slowzoom 40s ease-in-out infinite alternate; }
.off-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,18,.5) 0%, rgba(20,12,18,.2) 34%, rgba(20,12,18,0) 52%), linear-gradient(0deg, rgba(20,12,18,.3), transparent 32%); }
.off-bg .tex { position: absolute; inset: -4%; filter: blur(8px); }
.tex-earth { background: linear-gradient(rgba(20,16,10,.38), rgba(20,16,10,.5)), linear-gradient(140deg, #6f7b3e 0%, #b88a3e 45%, #c9603a 75%, #6d3b52 100%); }
.tex-family { background: linear-gradient(rgba(20,10,20,.3), rgba(20,10,20,.45)), url(../assets/img/bloom.jpg) center / cover; }
@keyframes slowzoom { from { transform: scale(1); } to { transform: scale(1.1); } }
.off-txt { position: absolute; left: 8cqw; top: 12cqh; width: 38cqw; }
.s-off .wtitle { font-size: 4cqw; letter-spacing: .12em; margin-top: 2cqh; }
.s-off .lead { margin-top: 1.8cqh; }
.off-list { margin-top: 4cqh; display: grid; gap: 2.4cqh; }
.off-list li { display: grid; grid-template-columns: 3.4cqw 1fr; column-gap: 1.4cqw; align-items: start; padding-top: 1.8cqh; border-top: 1px solid rgba(242,217,160,.25); }
.off-list .ico { width: 3cqw; height: 3cqw; color: var(--gold); }
.off-list .ico * { stroke-width: .9; }
.off-list b { display: block; font: 500 max(1.2cqw, 12px)/1.25 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-pale); }
.off-list span { display: block; margin-top: .6cqh; font: 300 max(.98cqw, 11px)/1.5 'Raleway', sans-serif; color: var(--mute); }
@container deck (orientation: portrait) {
  .off-bg img { left: 0; width: 100%; height: 50%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .off-bg::after { background: linear-gradient(0deg, rgba(20,12,18,.85) 0%, rgba(20,12,18,.6) 45%, rgba(20,12,18,0) 60%); }
  .off-txt { left: 8cqw; right: 8cqw; width: auto; top: auto; bottom: 6cqh; }
  .off-earth .off-txt, .off-family .off-txt { bottom: auto; top: 12cqh; }
  .s-off .wtitle { font-size: 8cqw; } .s-off .lead { font-size: 4.2cqw; margin-top: 1cqh; }
  .off-list { margin-top: 2cqh; gap: 1.4cqh; } .off-list li { grid-template-columns: 8cqw 1fr; column-gap: 3cqw; padding-top: 1.2cqh; }
  .off-list .ico { width: 7cqw; height: 7cqw; } .off-list b { font-size: 3.5cqw; } .off-list span { font-size: max(3cqw, 10px); }
}
@container deck (orientation: landscape) and (max-height: 500px) {
  .off-txt { top: 7cqh; width: 44cqw; } .s-off .lead { display: none; } .off-list { margin-top: 1.6cqh; gap: 1cqh; } .off-list span { display: none; } .off-list li { padding-top: .8cqh; }
}
@media (prefers-reduced-motion: reduce) { .off-bg img { animation: none !important; } }

/* how we work */
.s-how .head .lead { margin-top: 2cqh; max-width: 54cqw; text-align: center; font-style: normal; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: max(1.15cqw, 13px); line-height: 1.6; }
.how-steps { position: absolute; left: 14cqw; right: 14cqw; top: 52cqh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; text-align: center; }
.how-steps li { border-top: 1px solid rgba(148,112,47,.4); padding-top: 2.4cqh; }
.how-steps span { display: block; font: 500 max(.85cqw, 9px)/1 var(--display); letter-spacing: .3em; color: var(--gold); }
.how-steps b { display: block; margin-top: 1.4cqh; font: 500 max(1.6cqw, 14px)/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-pale); }
.how-steps em { display: block; margin-top: 1.2cqh; font: italic 400 max(1.15cqw, 13px)/1.3 'Cormorant Garamond', serif; color: var(--ivory); }
@container deck (orientation: portrait) {
  .s-how .head .lead { max-width: none; padding: 0 8cqw; font-size: 3.8cqw; }
  .how-steps { left: 10cqw; right: 10cqw; top: 46cqh; grid-template-columns: 1fr; gap: 3.4cqh; } .how-steps b { font-size: 4.6cqw; } .how-steps em { font-size: 4cqw; }
}
@container deck (orientation: landscape) and (max-height: 500px) { .how-steps { top: 58cqh; } }
/* how we work: a warm morning sky */
.deck[data-screen="6"]::before { background: radial-gradient(120% 90% at 50% 10%, #fff4dc 0%, #f8dcc0 42%, #efc6b0 70%, #d9b3c4 100%); }
/* families: the bloom texture, kept bright */
.tex-family { background: linear-gradient(rgba(30,12,26,.18), rgba(30,12,26,.38)), url(../assets/img/bloom.jpg) center / cover; filter: blur(4px); }

/* review: on the dark offering screens, members and the end, the rail, counter and Music pill turn light */
.deck:is([data-screen="2"], [data-screen="3"], [data-screen="4"], [data-screen="5"], [data-screen="7"], [data-screen="8"]) { --ivory: #fbf5ec; --mute: #efe4e6; --dim: #e2d4da; --gold: #f2d9a0; --gold-pale: #fff0cc; }
.deck:is([data-screen="2"], [data-screen="3"], [data-screen="4"], [data-screen="5"], [data-screen="7"], [data-screen="8"]) .music-btn { background: rgba(20,10,24,.35); color: #fbf5ec; border-color: rgba(255,240,204,.5); }
@container deck (orientation: portrait) { .off-txt { bottom: 13cqh; } }
.deck[data-screen="6"] :is(.how-steps span, .eyebrow) { color: #7a5a26; }

/* ===== living environment (Marcela 17 oct) ===== */
/* her photos fill each screen, under a soft black veil; light ink; the photos drift very slowly; golden motes float up;
   a 3D crystal bowl turns on the cover and the end */
.deck.solar, .deck.solar[data-screen] { --ivory: #fbf3e6; --mute: #efe2d2; --dim: #e0cfbb; --gold: #f2d49a; --gold-pale: #fff0cc; color-scheme: dark; }
.deck.solar .s-off, .deck.solar .s-jr { --ivory: #fbf3e6; --mute: #efe2d2; --dim: #e0cfbb; --gold: #f2d49a; --gold-pale: #fff0cc; }
.deck.solar .bloomsky, .deck.solar .off-bg { display: none; }
.deck.solar .stars, .deck.solar .aurora-wrap, .deck.solar .vignette { opacity: 0 !important; }
.deck.solar .mist { opacity: .3; }
.deck.solar .grain { opacity: .035; }
.deck.solar .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%) !important; }
.deck.solar .tglow { filter: drop-shadow(0 0 1cqw rgba(20,10,4,.45)); }
.deck.solar :is(.lead, .body, .off-list span, .off-list b, .how-steps em, .s-cover .sub, .s-cover .kicker, .hint, .eyebrow) { text-shadow: 0 0 .9em rgba(10,6,4,.6); }
.deck.solar .s-cover .kicker, .deck.solar .s-cover .sub, .deck.solar .hint, .deck.solar .s-cover .year { color: #fff0cc !important; }
.deck.solar .codes svg, .deck.solar .codes i { filter: none !important; }
.deck.solar .music-btn { background: rgba(20,10,6,.35) !important; color: #fbf3e6 !important; border-color: rgba(255,240,204,.5) !important; }
.deck.solar .eyebrow::before, .deck.solar .eyebrow.c::after { background: linear-gradient(90deg, transparent, rgba(242,212,154,.85)); }
.deck.solar .s-who strong, .deck.solar .s-who .body em, .deck.solar .solar-line em { color: #fff6e8; }
.deck.solar .off-list li, .deck.solar .how-steps li { border-top-color: rgba(242,212,154,.3); }
.deck.solar .how-steps span, .deck.solar[data-screen="6"] .eyebrow { color: #f2d49a !important; }
.deck[data-screen="6"]::before { opacity: 0 !important; }
/* the photos */
.solarsky { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; background: #2a1a10; }
.solarsky .sk { position: absolute; inset: -4%; opacity: 0; transition: opacity 1.6s ease; background-size: cover; background-position: center; will-change: transform; }
.solarsky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,6,4,.62) 0%, rgba(10,6,4,.42) 45%, rgba(10,6,4,.25) 100%), linear-gradient(0deg, rgba(10,6,4,.35), transparent 40%); }
.sk-cover { background-image: url(../assets/img/ph-cover.jpg); background-position: 50% 70% !important; }
.sk-who { background-image: url(../assets/img/ph-who.jpg); background-position: 62% 30% !important; }
.sk-sound { background-image: url(../assets/img/ph-sound.jpg); background-position: 50% 45% !important; }
.sk-body { background-image: url(../assets/img/ph-body.jpg); background-position: 62% 40% !important; }
.sk-earth { background-image: url(../assets/img/ph-earth.jpg); background-position: 50% 30% !important; }
.sk-family { background-image: url(../assets/img/ph-family.jpg); background-position: 50% 40% !important; }
.sk-how { background-image: url(../assets/img/sky-sunburst.jpg); }
.sk-members { background-image: url(../assets/img/ph-members.jpg); filter: blur(5px); }
.sk-end { background-image: url(../assets/img/ph-end.jpg); background-position: 40% 60% !important; }
.deck[data-screen="0"] .sk-cover, .deck[data-screen="1"] .sk-who, .deck[data-screen="2"] .sk-sound, .deck[data-screen="3"] .sk-body, .deck[data-screen="4"] .sk-earth,
.deck[data-screen="5"] .sk-family, .deck[data-screen="6"] .sk-how, .deck[data-screen="7"] .sk-members, .deck[data-screen="8"] .sk-end { opacity: 1; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.6%, -1.2%); } }
@media (prefers-reduced-motion: reduce) { .solarsky .sk { animation: none !important; } }
/* drifting light and the 3D bowl */
.motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.bowl3d { position: absolute; right: 4%; top: 50%; width: 42cqw; height: 42cqw; max-height: 80vh; transform: translateY(-50%); z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.deck.bowl-on .bowl3d { opacity: 1; }
#cover .tb { left: 6cqw; right: auto; width: 52cqw; top: 26cqh; text-align: left; }
#cover .tb .cover-emblem { margin-left: 0; }
#cover .codes, #cover .edition { justify-content: flex-start; }
#cover .s-cover .wtitle, #cover .wtitle { margin-right: 0; }
.deck.solar .s-join .jb { left: 6cqw; right: auto; width: 52cqw; text-align: left; align-items: flex-start; }
.deck.solar .s-join .cover-emblem { margin-left: 0; }
.deck.solar .s-join .cta { justify-content: flex-start; }
@container deck (orientation: portrait) {
  .solarsky::after { background: linear-gradient(0deg, rgba(10,6,4,.78) 0%, rgba(10,6,4,.45) 55%, rgba(10,6,4,.25) 100%); }
  .bowl3d { right: auto; left: 50%; top: 4%; width: 78cqw; height: 78cqw; transform: translateX(-50%); }
  #cover .tb { left: 6cqw; right: 6cqw; width: auto; top: 50cqh; text-align: center; } #cover .tb .cover-emblem { margin: 0 auto 3cqh; } #cover .codes, #cover .edition { justify-content: center; }
  .deck.solar .s-join .jb { left: 6cqw; right: 6cqw; width: auto; text-align: center; align-items: center; } .deck.solar .s-join .cover-emblem { margin: 0 auto 3cqh; } .deck.solar .s-join .cta { justify-content: center; }
}

.solarsky::after { background: linear-gradient(90deg, rgba(10,6,4,.74) 0%, rgba(10,6,4,.55) 45%, rgba(10,6,4,.32) 100%), linear-gradient(0deg, rgba(10,6,4,.4), transparent 40%); }
.bowl3d { right: 6%; top: 52%; width: 34cqw; height: 34cqw; }
.deck.solar .s-join .jb { top: 30cqh; }
@container deck (orientation: portrait) { .solarsky::after { background: linear-gradient(0deg, rgba(10,6,4,.82) 0%, rgba(10,6,4,.55) 55%, rgba(10,6,4,.3) 100%); } .bowl3d { top: 5%; width: 70cqw; height: 70cqw; } .deck.solar .s-join .jb { top: 46cqh; } }
@container deck (orientation: portrait) { #cover .tb { top: 44cqh; } }

/* ===== light screens (Marcela 17 oct, 2) ===== */
/* the cover and How We Work rest on the luminous aura, Hands & Earth on the desert collage — light pages, warm dark ink */
.sk-cover { background-image: url(../assets/img/sky-aura.jpg) !important; background-position: center !important; }
.sk-how { background-image: url(../assets/img/sky-aura.jpg) !important; }
.sk-earth { background-image: linear-gradient(90deg, rgba(255,247,234,.9) 0%, rgba(255,247,234,.72) 34%, rgba(255,247,234,.15) 58%, rgba(255,247,234,0) 70%), url(../assets/img/sky-desert.jpg) !important; background-position: center !important; }
@container deck (orientation: portrait) { .sk-earth { background-image: linear-gradient(0deg, rgba(255,247,234,.92) 0%, rgba(255,247,234,.75) 45%, rgba(255,247,234,.1) 70%), url(../assets/img/sky-desert.jpg) !important; background-position: 62% center !important; } }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .solarsky::after { opacity: 0; }
.solarsky::after { transition: opacity 1.4s ease; }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]), .deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .s-off { --ivory: #3a2a2e; --mute: #5c4a4c; --dim: #8a7672; --gold: #9a6a2c; --gold-pale: #7a4f1e; }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .wtitle { background-image: linear-gradient(100deg, transparent 45%, rgba(255,248,230,.5) 50%, transparent 55%), url(../assets/img/patina.jpg), linear-gradient(180deg, #b0782e 0%, #8a5a20 45%, #5e3a14 100%) !important; }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .tglow { filter: drop-shadow(0 0 .8cqw rgba(255,244,220,.85)); }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) :is(.lead, .body, .off-list span, .off-list b, .how-steps em, .s-cover .sub, .s-cover .kicker, .hint, .eyebrow) { text-shadow: 0 0 .9em rgba(255,246,228,.9); }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) :is(.s-cover .kicker, .s-cover .sub, .hint, .s-cover .year) { color: #6a4520 !important; }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .codes :is(svg, i) { filter: brightness(.45) sepia(.8) saturate(1.5) !important; }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .music-btn { background: rgba(255,248,236,.7) !important; color: #5c4a4c !important; border-color: rgba(154,106,44,.5) !important; }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .eyebrow::before, .deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .eyebrow.c::after { background: linear-gradient(90deg, transparent, rgba(154,106,44,.8)); }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) :is(.off-list li, .how-steps li) { border-top-color: rgba(154,106,44,.3); }
.deck.solar[data-screen="6"] :is(.how-steps span, .eyebrow) { color: #9a6a2c !important; }
.deck.solar:is([data-screen="0"], [data-screen="4"], [data-screen="6"]) .motes { mix-blend-mode: normal; opacity: .7; }
/* the cover: the 3D bowl rests inside the aura */
.deck[data-screen="0"] .bowl3d { right: auto; left: 50%; top: 52%; width: 26cqw; height: 26cqw; transform: translate(-50%, -50%); }
#cover .tb { width: 32cqw; }
@container deck (orientation: portrait) { .deck[data-screen="0"] .bowl3d { top: 26%; width: 60cqw; height: 60cqw; } #cover .tb { width: auto; } }
@container deck (orientation: landscape) and (max-height: 500px) { #cover .tb { top: 6cqh; width: 40cqw; } .deck[data-screen="0"] .bowl3d { width: 20cqw; height: 20cqw; } }

/* ===== Marcela 17 oct (3) ===== */
/* who: her bowls photo (no face under the words); family: the forest sound healer, set to the right of the words */
.sk-who { background-image: url(../assets/img/ph-cover.jpg) !important; background-position: 50% 70% !important; }
.sk-family { background-image: url(../assets/img/ph-earthwoods.jpg) !important; left: 34%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%); mask-image: linear-gradient(90deg, transparent 0%, #000 20%); background-position: 50% 30% !important; }
@container deck (orientation: portrait) { .sk-family { left: -4%; -webkit-mask-image: none; mask-image: none; } }
/* the cover: no bowl; spacing so the year never meets the call to begin */
#cover .tb { top: 22cqh; }
#cover .year { margin-top: 2.4cqh; }
@container deck (orientation: portrait) { #cover .tb { top: 30cqh; } .deck.solar[data-screen="0"] .hint { bottom: 13cqh; } }
/* Hands & Earth: the words fill the page */
.off-earth .off-txt { top: 14cqh; width: 46cqw; }
.off-earth .wtitle { font-size: 5.2cqw; }
.off-earth .lead { font-size: max(1.6cqw, 15px); margin-top: 2.6cqh; }
.off-earth .off-list { margin-top: 7cqh; gap: 5cqh; }
.off-earth .off-list li { grid-template-columns: 4.4cqw 1fr; padding-top: 3cqh; }
.off-earth .off-list .ico { width: 3.8cqw; height: 3.8cqw; }
.off-earth .off-list b { font-size: max(1.5cqw, 13px); }
.off-earth .off-list span { font-size: max(1.2cqw, 12px); margin-top: 1.2cqh; max-width: 36cqw; }
@container deck (orientation: portrait) { .off-earth .off-txt { top: auto; bottom: 12cqh; width: auto; } .off-earth .wtitle { font-size: 9cqw; } .off-earth .lead { font-size: 4.6cqw; }
  .off-earth .off-list { margin-top: 3cqh; gap: 2.6cqh; } .off-earth .off-list li { grid-template-columns: 9cqw 1fr; } .off-earth .off-list .ico { width: 8cqw; height: 8cqw; }
  .off-earth .off-list b { font-size: 4cqw; } .off-earth .off-list span { font-size: 3.4cqw; max-width: none; } }
@container deck (orientation: landscape) and (max-height: 500px) { .off-earth .off-list { margin-top: 2cqh; gap: 1.4cqh; } .off-earth .lead { display: block; } }
/* How We Work: title and words above the aura, the three steps at its feet, the oval left clear */
.s-how .head { top: 7cqh; }
.how-steps { top: 74cqh; left: 10cqw; right: 10cqw; gap: 8cqw; }
.how-steps li { border-top: 0; padding-top: 0; }
.how-steps b { font-size: max(1.9cqw, 15px); }
.how-steps em { font-size: max(1.3cqw, 13px); }
@container deck (orientation: portrait) { .s-how .head { top: 6cqh; } .how-steps { top: 62cqh; gap: 3.6cqh; } }
@container deck (orientation: landscape) and (max-height: 500px) { .how-steps { top: 70cqh; } }
/* the end: only the ripples, sound spreading out of the centre */
.ripples { position: absolute; left: 70%; top: 50%; width: 0; height: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.deck[data-screen="8"] .ripples { opacity: 1; }
.ripples i { position: absolute; left: 0; top: 0; width: 46cqw; height: 46cqw; margin: -23cqw 0 0 -23cqw; border-radius: 50%; border: 1px solid rgba(255,226,170,.75);
  box-shadow: 0 0 1.2cqw rgba(255,214,150,.35), inset 0 0 1.2cqw rgba(255,214,150,.25); transform: scale(.1); opacity: 0; animation: ripple 8s cubic-bezier(.2,.6,.3,1) infinite; }
.ripples i:nth-child(2) { animation-delay: 2s; } .ripples i:nth-child(3) { animation-delay: 4s; } .ripples i:nth-child(4) { animation-delay: 6s; }
@keyframes ripple { 0% { transform: scale(.1); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ripples i { animation: none; opacity: .5; transform: scale(calc(.4 + var(--k, 0))); } }
@container deck (orientation: portrait) { .ripples { left: 50%; top: 26%; } .ripples i { width: 80cqw; height: 80cqw; margin: -40cqw 0 0 -40cqw; } }
.solarsky .sk-family { left: 30%; background-position: 40% 30% !important; }
@container deck (orientation: portrait) { .solarsky .sk-family { left: -4%; } }
#cover .tb { width: 40cqw; }
.off-earth .off-txt { width: 40cqw; }
.off-earth .off-list span { max-width: 32cqw; }
@container deck (orientation: portrait) { #cover .tb { width: auto; } .off-earth .off-txt { width: auto; } }
@container deck (orientation: portrait) {
  .solarsky .sk-family { inset: -4% -4% 42% -4%; background-position: 50% 25% !important; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .off-family .off-txt { top: auto; bottom: 12cqh; }
}

/* ===== Marcela 17 oct (4) ===== */
/* cover: Solar Edition — the aura under a dark veil, smoke drifting, everything centred so the emblem sits in the heart of the oval */
.deck.solar[data-screen="0"] .solarsky::after { opacity: 1; background: radial-gradient(60% 70% at 50% 50%, rgba(10,6,4,.28), rgba(10,6,4,.5) 100%); }
.deck.solar[data-screen="0"] .mist { opacity: .9; }
.deck.solar[data-screen="0"], .deck.solar[data-screen="0"] .s-cover { --ivory: #fbf3e6; --mute: #efe2d2; --gold: #f2d49a; --gold-pale: #fff0cc; }
.deck.solar[data-screen="0"] .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%) !important; }
.deck.solar[data-screen="0"] .tglow { filter: drop-shadow(0 0 1cqw rgba(20,10,4,.5)); }
.deck.solar[data-screen="0"] :is(.s-cover .kicker, .s-cover .sub, .hint, .s-cover .year) { color: #fff0cc !important; text-shadow: 0 0 .9em rgba(10,6,4,.6) !important; }
.deck.solar[data-screen="0"] .codes :is(svg, i) { filter: none !important; }
.deck.solar[data-screen="0"] .music-btn { background: rgba(20,10,6,.35) !important; color: #fbf3e6 !important; border-color: rgba(255,240,204,.5) !important; }
.deck.solar[data-screen="0"] .eyebrow::before, .deck.solar[data-screen="0"] .eyebrow.c::after { background: linear-gradient(90deg, transparent, rgba(242,212,154,.85)); }
.deck.solar[data-screen="0"] .motes { mix-blend-mode: screen; opacity: 1; }
.sk-cover { background-position: 50% 50% !important; }
#cover .tb { left: 0; right: 0; width: auto; top: 50%; transform: translateY(-38%); text-align: center; }
#cover .tb .cover-emblem { margin: 0 auto 3cqh; width: 8cqw; }
#cover .codes, #cover .edition { justify-content: center; }
@container deck (orientation: portrait) { #cover .tb { top: 50%; transform: translateY(-34%); } #cover .tb .cover-emblem { width: 24cqw; } }
@container deck (orientation: landscape) and (max-height: 500px) { #cover .tb { top: 50%; transform: translateY(-46%); width: auto; } #cover .tb .cover-emblem { width: 5cqw; margin-bottom: 1cqh; } }
/* sound: the forest healer; families: the rainbow bowls */
.sk-sound { background-image: url(../assets/img/ph-earthwoods.jpg) !important; left: 30% !important; background-position: 40% 30% !important; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%); mask-image: linear-gradient(90deg, transparent 0%, #000 20%); }
.solarsky .sk-family { background-image: url(../assets/img/ph-sound.jpg) !important; left: 30%; background-position: 50% 40% !important; }
@container deck (orientation: portrait) { .sk-sound { left: -4% !important; inset: -4% -4% 42% -4% !important; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } .off-sound .off-txt { top: auto; bottom: 12cqh; } }
/* body: a deep fade on the left, where there are no dancers, under the words */
.deck.solar[data-screen="3"] .solarsky::after { background: linear-gradient(90deg, rgba(10,6,4,.88) 0%, rgba(10,6,4,.7) 34%, rgba(10,6,4,.2) 60%, rgba(10,6,4,.1) 100%); }
@container deck (orientation: portrait) { .deck.solar[data-screen="3"] .solarsky::after { background: linear-gradient(0deg, rgba(10,6,4,.9) 0%, rgba(10,6,4,.6) 50%, rgba(10,6,4,.15) 100%); } }
/* How We Work: the aura under a dark veil, light ink, the words in proportion: a short lead, the three steps in one row */
.deck.solar[data-screen="6"] .solarsky::after { opacity: 1; background: radial-gradient(60% 70% at 50% 50%, rgba(10,6,4,.32), rgba(10,6,4,.55) 100%); }
.deck.solar[data-screen="6"], .deck.solar[data-screen="6"] .s-how { --ivory: #fbf3e6; --mute: #efe2d2; --gold: #f2d49a; --gold-pale: #fff0cc; }
.deck.solar[data-screen="6"] .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%) !important; }
.deck.solar[data-screen="6"] .tglow { filter: drop-shadow(0 0 1cqw rgba(20,10,4,.5)); }
.deck.solar[data-screen="6"] :is(.lead, .how-steps em, .eyebrow) { text-shadow: 0 0 .9em rgba(10,6,4,.6); }
.deck.solar[data-screen="6"] :is(.how-steps span, .eyebrow) { color: #f2d49a !important; }
.deck.solar[data-screen="6"] .music-btn { background: rgba(20,10,6,.35) !important; color: #fbf3e6 !important; border-color: rgba(255,240,204,.5) !important; }
.deck.solar[data-screen="6"] .motes { mix-blend-mode: screen; opacity: 1; }
.s-how .head { top: 14cqh; }
.s-how .head .lead { max-width: 44cqw; font-size: max(1.05cqw, 13px); }
.how-steps { top: 62cqh; left: 12cqw; right: 12cqw; grid-template-columns: repeat(3, 1fr); gap: 4cqw; }
.how-steps li { border-top: 1px solid rgba(242,212,154,.35) !important; padding-top: 2cqh; }
.how-steps b { font-size: max(1.5cqw, 13px); }
.how-steps em { font-size: max(1.15cqw, 12px); }
@container deck (orientation: portrait) {
  .s-how .head { top: 10cqh; } .s-how .head .lead { max-width: none; font-size: 3.6cqw; }
  .how-steps { top: 50cqh; left: 10cqw; right: 10cqw; grid-template-columns: 1fr; gap: 3cqh; } .how-steps b { font-size: 4.2cqw; } .how-steps em { font-size: 3.8cqw; }
}
@container deck (orientation: landscape) and (max-height: 500px) { .s-how .head { top: 8cqh; } .how-steps { top: 62cqh; } }
.deck.solar[data-screen="0"] .mist { opacity: .5; }
.deck.solar[data-screen="0"] .solarsky::after { background: radial-gradient(55% 65% at 50% 47%, rgba(10,6,4,.14), rgba(10,6,4,.42) 100%); }
#cover .tb { top: 41%; transform: none; }
@container deck (orientation: portrait) { #cover .tb { top: 42%; transform: none; } }
@container deck (orientation: landscape) and (max-height: 500px) { #cover .tb { top: 30%; transform: none; } }
.deck.solar[data-screen="6"] .solarsky::after { background: radial-gradient(55% 65% at 50% 47%, rgba(10,6,4,.16), rgba(10,6,4,.44) 100%); }
.deck.solar[data-screen="6"] .mist { opacity: .2; }
.deck.solar[data-screen="0"] .mist { opacity: .35; }
.deck.solar:is([data-screen="0"], [data-screen="6"]) .solarsky::after { background: radial-gradient(55% 65% at 50% 47%, rgba(10,6,4,.24), rgba(10,6,4,.5) 100%); }

/* ===== Marcela 17 oct (5) ===== */
/* cover: the sound ripples of the end instead of crosses, from the heart of the aura; the call to begin sits in the text's own flow */
.deck[data-screen="0"] .ripples { opacity: 1; left: 50%; top: 47%; }
.deck.solar[data-screen="0"] .hint { display: none; }
#cover .tap { margin-top: 3.4cqh; font: 400 max(.75cqw, 10px)/1 'Raleway', sans-serif; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: #fff0cc; text-shadow: 0 0 .9em rgba(10,6,4,.6); }
#cover .tb { top: 50%; transform: translateY(-50%); }
#cover .tb .cover-emblem { margin-bottom: 2cqh; }
#cover .year { margin-top: 1.6cqh; }
@container deck (orientation: portrait) { .deck[data-screen="0"] .ripples { left: 50%; top: 46%; } #cover .tb { top: 50%; transform: translateY(-50%); } #cover .tap { font-size: max(2.3cqw, 9px); } }
@container deck (orientation: landscape) and (max-height: 500px) { #cover .tb { top: 50%; transform: translateY(-50%); } #cover .tap { margin-top: 1.4cqh; } #cover .s-cover .kicker { display: none; } }
/* sound: a lighter veil, more of the photo */
.deck.solar[data-screen="2"] .solarsky::after { background: linear-gradient(90deg, rgba(10,6,4,.6) 0%, rgba(10,6,4,.38) 40%, rgba(10,6,4,.1) 70%, rgba(10,6,4,0) 100%) !important; }
@container deck (orientation: portrait) { .deck.solar[data-screen="2"] .solarsky::after { background: linear-gradient(0deg, rgba(10,6,4,.72) 0%, rgba(10,6,4,.4) 45%, rgba(10,6,4,0) 65%) !important; } }
/* body: the dancers move right; the left, where nobody stands, is black */
.solarsky .sk-body { left: 28%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); background-position: 60% 40% !important; }
.deck.solar[data-screen="3"] .solarsky { background: #050302; }
.deck.solar[data-screen="3"] .solarsky::after { background: linear-gradient(90deg, rgba(5,3,2,.9) 0%, rgba(5,3,2,.6) 30%, rgba(5,3,2,0) 50%) !important; }
@container deck (orientation: portrait) { .solarsky .sk-body { left: -4%; inset: -4% -4% 40% -4%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } .off-body .off-txt { top: auto; bottom: 12cqh; } }
/* families: her hands-and-light artwork, full screen */
.solarsky .sk-family { background-image: url(../assets/img/ph-hands.jpg) !important; left: -4% !important; -webkit-mask-image: none !important; mask-image: none !important; background-position: 50% 45% !important; }
@container deck (orientation: portrait) { .solarsky .sk-family { inset: -4% !important; } .off-family .off-txt { top: auto; bottom: 12cqh; } }
/* How We Work: the steps spread around the aura — Intention on the left, Experience on the right, Design at its feet */
.how-steps { position: absolute; inset: 0; display: block; }
.how-steps li { position: absolute; width: 22cqw; border-top: 1px solid rgba(242,212,154,.35) !important; padding-top: 2cqh; }
.how-steps li:nth-child(1) { left: 7cqw; top: 46cqh; text-align: left; }
.how-steps li:nth-child(2) { left: 50%; margin-left: -11cqw; top: 80cqh; text-align: center; }
.how-steps li:nth-child(3) { right: 7cqw; top: 46cqh; text-align: right; }
.how-steps b { font-size: max(1.8cqw, 14px); }
.how-steps em { font-size: max(1.3cqw, 13px); }
@container deck (orientation: portrait) {
  .how-steps li { width: auto; left: 10cqw !important; right: 10cqw !important; margin: 0 !important; text-align: center !important; }
  .how-steps li:nth-child(1) { top: 44cqh; } .how-steps li:nth-child(2) { top: 60cqh; } .how-steps li:nth-child(3) { top: 76cqh; }
}
@container deck (orientation: landscape) and (max-height: 500px) { .how-steps li:nth-child(1), .how-steps li:nth-child(3) { top: 42cqh; } .how-steps li:nth-child(2) { top: 74cqh; } }

/* ===== Marcela 17 oct (6) ===== */
.deck.solar[data-screen="0"] .solarsky::after { background: radial-gradient(55% 65% at 50% 47%, rgba(10,6,4,.4), rgba(10,6,4,.62) 100%) !important; }
.deck.solar[data-screen="0"] .mist { opacity: .25; }
.sk-members { background-image: url(../assets/img/ph-forest.jpg) !important; filter: none !important; background-position: 50% 40% !important; }
.deck.solar[data-screen="7"] .solarsky::after { background: linear-gradient(rgba(10,6,4,.45), rgba(10,6,4,.55)); }

/* ===== Marcela 17 oct (7) ===== */
/* Hands & Earth: dew on a leaf under a dark veil, light ink, and a big "Botanical Art" */
.solarsky .sk-earth { background-image: url(../assets/img/ph-botanical.jpg) !important; background-position: 50% 30% !important; }
.deck.solar[data-screen="4"] .solarsky::after { opacity: 1 !important; background: linear-gradient(90deg, rgba(10,6,4,.7) 0%, rgba(10,6,4,.45) 45%, rgba(10,6,4,.25) 100%) !important; }
.deck.solar[data-screen="4"], .deck.solar[data-screen="4"] .s-off { --ivory: #fbf3e6; --mute: #efe2d2; --dim: #e0cfbb; --gold: #f2d49a; --gold-pale: #fff0cc; }
.deck.solar[data-screen="4"] .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%) !important; }
.deck.solar[data-screen="4"] .tglow { filter: drop-shadow(0 0 1cqw rgba(20,10,4,.5)); }
.deck.solar[data-screen="4"] :is(.lead, .off-list span, .off-list b, .eyebrow) { text-shadow: 0 0 .9em rgba(10,6,4,.6); }
.deck.solar[data-screen="4"] .off-list li { border-top-color: rgba(242,212,154,.3); }
.deck.solar[data-screen="4"] .eyebrow::before { background: linear-gradient(90deg, transparent, rgba(242,212,154,.85)); }
.deck.solar[data-screen="4"] .music-btn { background: rgba(20,10,6,.35) !important; color: #fbf3e6 !important; border-color: rgba(255,240,204,.5) !important; }
.deck.solar[data-screen="4"] .motes { mix-blend-mode: screen; opacity: 1; }
.botanical { position: absolute; right: 6cqw; bottom: 9cqh; max-width: 44cqw; text-align: right; z-index: 1; pointer-events: none;
  font: italic 400 7.4cqw/.95 'Cormorant Garamond', serif; letter-spacing: .01em; color: rgba(255,244,222,.92); text-shadow: 0 0 2cqw rgba(10,6,4,.45); }
@container deck (orientation: portrait) { .botanical { right: 6cqw; left: 6cqw; max-width: none; top: 9cqh; bottom: auto; font-size: 15cqw; text-align: center; } .off-earth .off-txt { top: auto; bottom: 12cqh; } }
@container deck (orientation: landscape) and (max-height: 500px) { .botanical { font-size: 6cqw; bottom: 8cqh; } }
@container deck (orientation: landscape) and (max-height: 500px) { .botanical { bottom: 20cqh; } }
@container deck (orientation: portrait) { .off-earth .off-list span { max-width: none !important; } }

/* ===== Marcela 17 oct (8) ===== */
/* How We Work: her lilac flower macro (small file: a soft blur hides the pixels), under a dark veil */
.solarsky .sk-how { background-image: url(../assets/img/ph-flower-how.jpg) !important; background-position: 30% 50% !important; filter: blur(2px); }
.deck.solar[data-screen="6"] .solarsky::after { background: radial-gradient(60% 70% at 50% 50%, rgba(10,6,4,.32), rgba(10,6,4,.55) 100%) !important; }
.deck.solar[data-screen="6"] .mist { opacity: .15; }
/* the end: the wave and the setting sun, the sun centred, the ripples spreading out of it */
.solarsky .sk-end { background-image: url(../assets/img/ph-wave-final.jpg) !important; background-position: 50% 34% !important; filter: none; }
.deck[data-screen="8"] .ripples { left: 50%; top: 55%; }
.deck.solar[data-screen="8"] .solarsky::after { background: linear-gradient(90deg, rgba(10,6,4,.6) 0%, rgba(10,6,4,.3) 50%, rgba(10,6,4,.2) 100%) !important; }
@container deck (orientation: portrait) { .solarsky .sk-end { background-position: 50% 30% !important; } .deck[data-screen="8"] .ripples { top: 32%; } .deck.solar[data-screen="8"] .solarsky::after { background: linear-gradient(0deg, rgba(10,6,4,.75) 0%, rgba(10,6,4,.35) 50%, rgba(10,6,4,.15) 100%) !important; } }
/* the end, centred: the sun high in the middle with its ripples, the words centred beneath it */
.solarsky .sk-end { background-position: 50% 34% !important; }
.deck[data-screen="8"] .ripples { top: 30%; }
.deck.solar .s-join .jb { left: 0; right: 0; width: auto; top: 44cqh; text-align: center; align-items: center; }
.deck.solar .s-join .cover-emblem { margin: 0 auto 2cqh; }
.deck.solar .s-join .cta { justify-content: center; }
.deck.solar[data-screen="8"] .solarsky::after { background: linear-gradient(0deg, rgba(10,6,4,.7) 0%, rgba(10,6,4,.4) 55%, rgba(10,6,4,.15) 100%) !important; }
@container deck (orientation: landscape) and (max-height: 500px) { .deck.solar .s-join .jb { top: 36cqh; } }

/* ===== Marcela 17 oct (9) ===== */
/* Sound & Medicine: the whole photo of the healer at her bowls on the right, a soft blurred echo of it behind, the words in a narrow column on the left */
.deck.solar[data-screen="2"] .solarsky { background: #120c08 url(../assets/img/ph-earthwoods.jpg) center / cover; }
.deck.solar[data-screen="2"] .solarsky::before { content: ''; position: absolute; inset: -6%; background: inherit; filter: blur(28px) brightness(.55); }
.solarsky .sk-sound { left: 34% !important; right: 0 !important; top: 0 !important; bottom: 0 !important; background-size: contain !important; background-repeat: no-repeat; background-position: 60% 50% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%); animation: none !important; }
.deck.solar[data-screen="2"] .solarsky::after { background: linear-gradient(90deg, rgba(10,6,4,.78) 0%, rgba(10,6,4,.5) 32%, rgba(10,6,4,0) 46%) !important; }
.off-sound .off-txt { left: 6cqw; width: 28cqw; top: 12cqh; }
.off-sound .off-list span { max-width: 26cqw; }
@container deck (orientation: portrait) {
  .solarsky .sk-sound { left: 0 !important; bottom: 40% !important; background-size: cover !important; background-position: 50% 30% !important; -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, #000 75%, transparent 100%); }
  .deck.solar[data-screen="2"] .solarsky::after { background: linear-gradient(0deg, rgba(10,6,4,.85) 0%, rgba(10,6,4,.5) 45%, rgba(10,6,4,0) 62%) !important; }
  .off-sound .off-txt { left: 8cqw; right: 8cqw; width: auto; top: auto; bottom: 12cqh; } .off-sound .off-list span { max-width: none; }
}
@container deck (orientation: landscape) and (max-height: 500px) { .off-sound .off-txt { width: 34cqw; top: 7cqh; } }
/* body: closer on the dancers */
.solarsky .sk-body { background-size: 145% auto !important; background-position: 62% 38% !important; }
@container deck (orientation: portrait) { .solarsky .sk-body { background-size: cover !important; transform: scale(1.35); transform-origin: 60% 40%; animation: none !important; } .solarsky .sk-sound { bottom: 44% !important; } }
@container deck (orientation: portrait) { .solarsky .sk-body { transform: scale(1.15); transform-origin: 60% 15%; } }

/* ===== Marcela 17 oct (10) ===== */
/* who we are, mirrored from Moon Temples: the mission large on the left with the three pillars stacked beneath it; the story on the right */
.deck.solar .s-who .col { left: 54cqw; top: 12cqh; width: 38cqw; }
.deck.solar .s-who .body, .deck.solar .s-who .fine { max-width: 38cqw; }
.deck.solar .s-who .before { margin-top: 1.6cqh; font: 400 max(.85cqw, 10px)/1 'Raleway', sans-serif; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 .9em rgba(10,6,4,.6); }
.deck.solar .s-who .mission { left: 8cqw; top: 14cqh; width: 38cqw; font-size: max(3cqw, 18px); line-height: 1.25; padding-left: 2.4cqw; border-left: 1px solid rgba(242,212,154,.5); }
.deck.solar .s-who .pillars { left: 8cqw; right: auto; width: 38cqw; top: 52cqh; grid-template-columns: 1fr; gap: 2.4cqh; }
.deck.solar .s-who .pillars li { display: grid; grid-template-columns: 13cqw 1fr; column-gap: 1.6cqw; align-items: baseline; padding-top: 1.6cqh; }
.deck.solar .s-who .pillars span { margin-top: 0; }
.deck.solar[data-screen="1"] .solarsky::after { background: linear-gradient(90deg, rgba(10,6,4,.55) 0%, rgba(10,6,4,.5) 50%, rgba(10,6,4,.7) 100%) !important; }
@container deck (orientation: portrait) {
  .deck.solar .s-who .col, .deck.solar .s-who .mission, .deck.solar .s-who .pillars { left: auto; width: auto; }
  .deck.solar .s-who .body, .deck.solar .s-who .fine { max-width: none; }
  .deck.solar .s-who .before { font-size: max(2.2cqw, 9px); }
  .deck.solar .s-who .mission { font-size: 5cqw; padding-left: 4cqw; }
  .deck.solar .s-who .pillars li { grid-template-columns: 1fr; }
}
@container deck (orientation: landscape) and (max-height: 500px) { .deck.solar .s-who .pillars { top: 50cqh; gap: 1cqh; } .deck.solar .s-who .pillars span { display: none; } .deck.solar .s-who .mission { font-size: 2.4cqw; } }
.deck.solar .s-who .pillars li { grid-template-columns: 15cqw 1fr; }
.deck.solar .s-who .pillars b { letter-spacing: .18em; }
@container deck (orientation: portrait) {
  .deck.solar .s-who { gap: 2cqh; }
  .deck.solar .s-who .fine, .deck.solar .s-who .pillars span { display: none; }
  .deck.solar .s-who .mission { font-size: 4.4cqw; }
  .deck.solar .s-who .pillars { display: flex; flex-wrap: wrap; gap: 1cqh 5cqw; }
  .deck.solar .s-who .pillars li { display: block; padding-top: 1cqh; }
}
@container deck (orientation: portrait) { .deck.solar .s-who :is(.col, .mission, .pillars) { top: auto !important; } }

/* ===== Marcela 17 oct (11) ===== */
/* who: her butterfly-of-light artwork, centred; the three pillars drift, glimmer and fade in and out, one after another */
.solarsky .sk-who { background-image: url(../assets/img/ph-butterfly.jpg) !important; background-position: 50% 45% !important; }
.deck.solar[data-screen="1"] .solarsky::after { background: linear-gradient(90deg, rgba(10,6,4,.5) 0%, rgba(10,6,4,.35) 50%, rgba(10,6,4,.6) 100%) !important; }
.deck.solar .s-who.is-active .pillars li { animation: pillarGlow 9s ease-in-out infinite both; }
.deck.solar .s-who.is-active .pillars li:nth-child(2) { animation-delay: 3s; }
.deck.solar .s-who.is-active .pillars li:nth-child(3) { animation-delay: 6s; }
@keyframes pillarGlow {
  0% { opacity: .15; transform: translateY(1.2cqh); filter: blur(3px); }
  18% { opacity: 1; transform: translateY(0); filter: blur(0); text-shadow: 0 0 1.4em rgba(255,230,170,.75); }
  26% { opacity: .75; } 32% { opacity: 1; } 40% { opacity: .8; }
  60% { opacity: 1; transform: translateY(-.4cqh); }
  100% { opacity: .15; transform: translateY(-1cqh); filter: blur(3px); }
}
@media (prefers-reduced-motion: reduce) { .deck.solar .s-who .pillars li { animation: none !important; opacity: 1; } }
/* who: a deeper veil so the words stand out (Marcela 17 oct, 12) */
.deck.solar[data-screen="1"] .solarsky::after { background: linear-gradient(90deg, rgba(10,6,4,.7) 0%, rgba(10,6,4,.58) 50%, rgba(10,6,4,.78) 100%) !important; }
@container deck (orientation: portrait) { .deck.solar[data-screen="1"] .solarsky::after { background: rgba(10,6,4,.72) !important; } }
/* How We Work: bigger steps (Marcela 17 oct, 14) */
.how-steps b { font-size: max(2.4cqw, 18px) !important; }
.how-steps em { font-size: max(1.7cqw, 16px) !important; }
.how-steps span { font-size: max(1.1cqw, 11px) !important; }
@container deck (orientation: portrait) { .how-steps b { font-size: 6.4cqw !important; } .how-steps em { font-size: 5cqw !important; } .how-steps span { font-size: 3cqw !important; } }
@container deck (orientation: landscape) and (max-height: 500px) { .how-steps b { font-size: 2.4cqw !important; } .how-steps em { font-size: 1.8cqw !important; } }