/* ===================== ONE LONG PAINTING =====================
   Test design (from the composite mockup): night-blue paintings by Dulac, Bakst, Clarke,
   Pyle and Nielsen blend into one long still painting behind each page, with the words
   resting in its open sky, sea and shadow. Loaded after style.css.
   Computers: .art holds the blended painting; text blocks sit over it (placed by hand on the
   home page, flowing down the painting on the other pages).
   Phones: the "darker painting wall": a blended wall of paintings drifts behind dark text panels.
   (The .plate paintings in the HTML are unused for now.) */

@media(min-width:901px){
  body::before{background:linear-gradient(180deg,#0a1126,#0e1a3d 40%,#0b1430)}
  #dusk,canvas#sky{display:none}

  /* readability over paint: soft shadows on the words, a dark mist behind each block */
  .sub,.lede,.offer-intro,.offer li,.arc-list li,.qa p,.truths li,.signs li,.book-note{
    text-shadow:0 0 2px rgba(4,6,18,1),0 1px 3px rgba(4,6,18,.95),0 0 10px rgba(4,6,18,.9),0 0 22px rgba(4,6,18,.8)}
  h1,h2,h3,.qa summary,.eyebrow,.over{text-shadow:0 0 3px rgba(4,6,18,.95),0 2px 8px rgba(4,6,18,.9),0 0 30px rgba(4,6,18,.75)}
  /* the small gold labels: a touch heavier so they hold up over paint */
  .eyebrow,.over{font-weight:400}
  /* rainbow words can't take a shadow (it shows through the gradient), so they get a soft dark glow behind instead */
  h1 em,h2 em,.prism{text-shadow:none;filter:drop-shadow(0 0 3px rgba(4,6,18,.95)) drop-shadow(0 2px 10px rgba(4,6,18,.8))}
  .scene > header,.scene > section{position:relative;isolation:isolate}
  .scene > header::after,.scene > section::after{content:"";position:absolute;z-index:-1;pointer-events:none;
    background:rgba(6,10,26,.72)}
  /* boxes become darker glass so the painting shows at the edges but not under the words */
  .card,.offer,.arc.program-card{background:rgba(8,13,34,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .offer.leave{background:
      radial-gradient(circle at 15% 0%, rgba(255,154,181,.10), transparent 60%),
      radial-gradient(circle at 100% 100%, rgba(154,214,255,.10), transparent 60%),
      rgba(8,13,34,.8)}
  .portrait{box-shadow:0 20px 60px rgba(0,0,0,.5)}
}

/* ---------- computers: one long composite painting ---------- */
@media(min-width:901px){
  :root{--u:min(1vw,15px)}
  .plate{display:none}
  .scene{position:relative;width:calc(var(--u) * 100);margin:0 auto;min-height:calc(var(--u) * var(--h));overflow-x:clip}
  .art{position:absolute;left:0;top:0;width:100%;overflow:hidden;height:calc(var(--u) * var(--h));pointer-events:none;z-index:0;
    background:radial-gradient(ellipse at 50% 30%, #13224d, #0b1430 70%)}
  .art::after{content:"";position:absolute;inset:0;
    background-image:radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55), transparent),
      radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.45), transparent),
      radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,240,220,.5), transparent),
      radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,.4), transparent);
    background-size:calc(var(--u) * 17) calc(var(--u) * 13), calc(var(--u) * 23) calc(var(--u) * 19), calc(var(--u) * 31) calc(var(--u) * 27), calc(var(--u) * 11) calc(var(--u) * 15);
    opacity:.7;mix-blend-mode:screen}
  .lay{position:absolute;left:calc(var(--u) * var(--l));top:calc(var(--u) * var(--t));width:calc(var(--u) * var(--w));
    aspect-ratio:var(--ar);background:var(--img) var(--bgp,0 0) / var(--bgs,100% 100%) no-repeat;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 var(--mt),#000 var(--mb),transparent 100%),
                       linear-gradient(to right,transparent 0%,#000 var(--ml),#000 var(--mr),transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0%,#000 var(--mt),#000 var(--mb),transparent 100%),
                       linear-gradient(to right,transparent 0%,#000 var(--ml),#000 var(--mr),transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}

  /* text blocks: no page margins of their own, a soft dark mist behind, sizes that scale with the painting */
  .scene > header,.scene > section,.scene > footer{z-index:2;margin:0;max-width:none;padding:0;text-align:left;min-height:0}
  .scene > header::after,.scene > section::after{inset:calc(var(--u) * -3.2);border-radius:calc(var(--u) * 4);
    filter:blur(calc(var(--u) * 2.4))}
  .scene h1{font-size:calc(var(--u) * 6.4);line-height:1.02;margin:calc(var(--u) * .6) 0 calc(var(--u) * 1.6)}
  .scene h2{font-size:calc(var(--u) * 3.6);line-height:1.12;margin:0 0 calc(var(--u) * 1.6)}
  .scene .final h2{font-size:calc(var(--u) * 4.2)}
  .scene h3,.scene .qa h3{font-size:calc(var(--u) * 2.2);margin-bottom:calc(var(--u) * .5)}
  .scene .arc h3{font-size:calc(var(--u) * 2.5)}
  .scene .offer.leave h3{font-size:calc(var(--u) * 2.3)}
  .scene .eyebrow,.scene .over{font-size:calc(var(--u) * .95);margin:0 0 calc(var(--u) * 1)}
  .scene .sub,.scene .lede,.scene .signs li,.scene .qa p,.scene .truths li{font-size:calc(var(--u) * 1.62);line-height:1.55;max-width:none}
  .scene .card .lede,.scene .arc .lede,.scene .offer-intro,.scene .offer li,.scene .arc-list li{font-size:calc(var(--u) * 1.5);max-width:none}
  .scene .arc-list.signs li{font-size:calc(var(--u) * 1.62)}
  .scene .sub + .sub,.scene .lede + .lede{margin-top:calc(var(--u) * .9)}
  .scene .signs,.scene .faq,.scene .truths{max-width:none;margin-top:calc(var(--u) * 1.4)}
  .scene .signs li,.scene .arc-list li{padding:calc(var(--u) * .7) 0}
  .scene .truths li{padding:calc(var(--u) * 1.1) calc(var(--u) * .3) calc(var(--u) * 1.1) calc(var(--u) * 2.6)}
  .scene .truths li::before{top:calc(var(--u) * 1.6)}
  .scene .signs-after{margin-top:calc(var(--u) * 1.6)}
  .scene .qa{padding:calc(var(--u) * 1.1) 0}
  .scene .card{margin-top:calc(var(--u) * 2.4);padding:calc(var(--u) * 2.8);max-width:none}
  .scene .offer{padding:calc(var(--u) * 2.2)}
  .scene .btn{font-size:calc(var(--u) * .95);padding:calc(var(--u) * 1) calc(var(--u) * 2.2)}
  .scene .btn.hero-btn{font-size:calc(var(--u) * 1.05);padding:calc(var(--u) * 1.2) calc(var(--u) * 2.6)}
  .scene .btn.arc-btn-long{font-size:calc(var(--u) * 1.15);max-width:calc(var(--u) * 38);padding:calc(var(--u) * 1) calc(var(--u) * 1.8)}
  .scene #book .arc-btn{font-size:calc(var(--u) * 1.1)}
  .scene .cta-row{margin-top:calc(var(--u) * 2.2);justify-content:flex-start}
  .scene .page-links{margin-top:calc(var(--u) * 2);gap:calc(var(--u) * 1.2)}
  .scene .arc-btn{margin-top:calc(var(--u) * 1.8)}
  .scene .further-then{margin-top:calc(var(--u) * 2)}
  .scene .scroll-cue{display:none}
  .scene .final{text-align:center}
  .scene .final .cta-row{justify-content:center}
  .scene > footer{border-top:1px solid var(--line);padding:calc(var(--u) * 1.6) calc(var(--u) * 3);font-size:calc(var(--u) * .8);
    background:rgba(6,10,26,.6)}

  /* blocks flow down the painting; each sets how far in from the left (--x), how wide (--bw)
     and how much painting shows above it (--gap), all in painting units */
  .flow{display:flex;flex-direction:column;padding-top:calc(var(--u) * 10)}
  .flow > header,.flow > section{margin:calc(var(--u) * var(--gap,0)) 0 0 calc(var(--u) * var(--x,5));width:calc(var(--u) * var(--bw,60))}
  .flow > section.page-top{padding-top:0}
  .flow > #contact{--gap:8;margin-left:auto;margin-right:auto;--bw:70;margin-bottom:calc(var(--u) * 6)}
  .flow > footer{margin-top:auto}
  /* other pages: one painting that stretches to fill the whole page behind the words */
  .flow .art{height:auto;bottom:0}
  .lay.fill{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;background-size:cover;background-position:center top}
  .flow #session.page-top{--bw:90}
  .flow .boxes{width:auto;margin-left:0;grid-template-columns:1.5fr 1fr;gap:calc(var(--u) * 2);margin-top:calc(var(--u) * 3)}
  .flow .session-intro{gap:calc(var(--u) * 4)}
  .scene .book-note{font-size:calc(var(--u) * 1.2);max-width:calc(var(--u) * 19)}
  .flow .about-grid{grid-template-columns:2fr 3fr;gap:calc(var(--u) * 3)}
  /* My Story: Dulac's fairies flying to the moon, full width; photo and title at the upper left, the story running
     down the open night sky on the left, leaving the fairies and the moon clear */
  .flow > section.story{--x:2.5;--bw:58;--gap:0}
  /* the words flow around the fairies: an invisible shape traces their outline, so lines lengthen in the open
     sky and shorten where an arm or the moon reaches in */
  .flow .story .story-wrap{display:block;float:right;width:calc(var(--u) * 58);height:calc(var(--u) * 91);
    shape-outside:polygon(77% 0%,77% 13%,73% 17%,66% 25%,59% 29%,47% 36%,42% 39%,42% 47%,53% 50%,56% 62%,61% 67%,65% 76%,75% 84%,78% 100%,100% 100%,100% 0);
    shape-margin:calc(var(--u) * 1.4)}
  /* no dark box behind these words (it would dim the fairies); a stronger shadow on each letter instead */
  .story-page > section.story::after{display:none}
  .story-page .story h2,.story-page .story .lede{text-shadow:0 0 2px rgba(4,6,18,1),0 1px 3px rgba(4,6,18,.95),0 0 10px rgba(4,6,18,.9),0 0 22px rgba(4,6,18,.8)}
  .flow .story .about-grid{grid-template-columns:1fr}
  /* the photo sits on its own at the top, above the title */
  .flow .story .about-grid > div:first-child{width:calc(var(--u) * 13)}
  .flow .story .portrait{box-shadow:0 10px 30px rgba(0,0,0,.45)}

  /* home page: the words sit in the open sky, sea and shadow around the figures */
  .home > #top{--x:56;--bw:41;display:block}
  .home > #familiar{--x:4;--bw:36;--gap:30}
  .home > #about{--x:4;--bw:62;--gap:21}
  .home > #session{--x:50;--bw:46;--gap:49}
  /* questions run across the page in two columns, below the swimmers' faces */
  .home > #faq{--x:6;--bw:88;--gap:29}
  .home #faq .faq{columns:2;column-gap:calc(var(--u) * 5)}
  .home #faq .qa{break-inside:avoid}
  .home > #contact{--gap:19}
  /* My Philosophy: the words on the left, the embracing mermaid couple clear on the right */
  .philosophy > section.page-top{--x:4;--bw:44}
  .philosophy .lay.fill{left:28%;width:72%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0%,#000 26%,#000 100%)}
}

/* ---------- phones: the "darker painting wall" ----------
   Dulac and Bakst paintings blend into one long wall that drifts up slowly behind the page
   (moved by wall.js); each section sits on a dark, mostly opaque panel. */
.grove,.grove-veil{display:none}
.story-wrap{display:none}
@media(max-width:900px){
  .art,.plate{display:none}
  #dusk{display:none}
  .grove{display:block;position:fixed;left:0;right:0;top:0;z-index:-1;pointer-events:none;will-change:transform}
  .grove-veil{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse 75% 85% at 50% 50%, rgba(8,13,32,.68), rgba(8,13,32,.46) 80%)}
  /* each painting the same height, each later one fading in over the one before */
  .grove .seg{position:relative;width:100%;aspect-ratio:1/1.15;background-size:cover;background-repeat:no-repeat}
  .grove .seg + .seg{margin-top:-46%;
    -webkit-mask-image:linear-gradient(transparent 0%, #000 40%);mask-image:linear-gradient(transparent 0%, #000 40%)}
  .grove .grove-bakst{background-image:url(/art/bakst-grove.webp);background-position:center 40%}
  .grove .peacocks{background-image:url(/art/dulac-peacocks.webp);background-position:center 40%}
  .grove .mermaids{background-image:url(/art/dulac-mermaids.webp);background-position:center 45%}
  .grove .rescue{background-image:url(/art/dulac-mermaid-rescue.webp);background-position:center 100%}
  .grove .mermaid{background-image:url(/art/comp/17-moon-fairies.webp);background-position:center 40%}
  /* the couple's faces are near the top, so a shorter fade keeps them clear */
  .grove .lovers{background-image:url(/art/dulac-lovers-garden.webp);background-position:center top}
  .grove .seg + .lovers{margin-top:-22%;
    -webkit-mask-image:linear-gradient(transparent 0%, #000 19%);mask-image:linear-gradient(transparent 0%, #000 19%)}

  /* quiet text panels: each section sits on a dark, mostly opaque box over the paintings */
  .wrap section{background:rgba(9,14,34,.84);border:1px solid rgba(232,200,135,.18);
    box-shadow:0 30px 70px -30px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    margin:40px 12px;padding:60px 20px}
  .wrap section.page-top{margin-top:90px;padding-top:56px}
  /* the opening title gets a softer panel so the first painting still greets you */
  header > *{position:relative;z-index:1}
  header::before{content:"";position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);
    width:92vw;height:min(660px,84%);background:rgba(9,14,34,.72);border:1px solid rgba(232,200,135,.16)}
  .wrap section .card,.wrap section .offer{background:rgba(23,37,90,.35)}
  .wrap section .boxes{width:auto;margin-left:0;grid-template-columns:1fr}
  footer{background:rgba(9,14,34,.84)}
}

/* ---------- My Story on computers: bigger reading text; the invitation below the painting ---------- */
@media(min-width:901px){
  .flow.story-page .story .lede{font-size:calc(var(--u) * 1.72);line-height:1.5}
  .flow.story-page .story h2{font-size:calc(var(--u) * 4.4)}
  .flow.story-page > #contact{--gap:30}
}
}