/* Saecred Sounds: finish layer for the static site. Same theme as ss.css: navy, gold, ivory, Ogg and DM Sans.
   Loaded after ss.css. html.fx means motion.js is driving the animation, so the scroll-linked CSS in ss.css is off. */

/* ---------- finish, with or without motion ---------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;scrollbar-color:rgba(220,188,116,.45) #212F54;scrollbar-width:thin}
body{-webkit-tap-highlight-color:transparent;overflow-wrap:break-word}
::selection{background:#DCBC74;color:#212F54}
.disp,.h1,.h2,.quote{text-wrap:balance}
p{text-wrap:pretty}
a,button,summary,.btn{touch-action:manipulation}
:focus-visible{outline:2px solid #DCBC74;outline-offset:3px;border-radius:4px}
.btn:focus-visible{border-radius:999px}
[id]{scroll-margin-top:84px}

/* a fine grain over the navy, like a printed page */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* photos: a hairline of gold and real depth */
.frame{outline:1px solid rgba(220,188,116,.13);outline-offset:-1px}
.frame:not(.pan):not(.hp){box-shadow:0 44px 90px -48px rgba(8,12,28,.75)}

/* words on photo cards stay readable: the shade gathers where the text sits */
.pcard>.tint,.pcard>.tint2{background-image:linear-gradient(180deg,rgba(33,47,84,0) 22%,rgba(33,47,84,.86) 78%);background-color:rgba(33,47,84,.14)}

/* buttons */
.btn{position:relative;overflow:hidden;white-space:nowrap;transition:background .5s,color .5s,border-color .5s,box-shadow .5s,scale .3s cubic-bezier(.2,.7,.2,1)}
.btn:active{scale:.965}
.gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 34px -16px rgba(220,188,116,.6)}
.gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 44px -14px rgba(243,241,233,.45)}
.ghost{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-i,.btn-c{display:inline-flex;align-items:center;gap:10px;transition:transform .65s cubic-bezier(.65,0,.15,1)}
.btn-c{position:absolute;inset:0;justify-content:center;transform:translateY(110%)}
@media (hover:hover){
.btn:hover .btn-i{transform:translateY(-160%)}
.btn:hover .btn-c{transform:none}
}
.btn-rp{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(243,241,233,.55);pointer-events:none}

/* navigation */
header.nav{transition:transform .6s cubic-bezier(.65,0,.15,1),background .5s;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
header.nav.away{transform:translateY(-101%)}
.navbar{position:absolute;left:0;right:0;bottom:0;height:1px;background:#DCBC74;transform:scaleX(0);transform-origin:left;pointer-events:none;opacity:.8}
.nav a.l{position:relative;padding:6px 0}
.nav a.l::before{content:"";position:absolute;left:0;right:.312em;bottom:0;height:1px;background:#DCBC74;transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.65,0,.15,1)}
.nav a.l:hover::before,.nav a.on::before{transform:scaleX(1);transform-origin:left}
.dd .ddp a{opacity:0;translate:0 8px;transition:opacity .4s,translate .5s cubic-bezier(.2,.7,.2,1),color .3s,padding .3s}
.dd:hover .ddp a,.dd:focus-within .ddp a{opacity:1;translate:0}
.dd .ddp a:nth-child(2){transition-delay:.04s,.04s,0s,0s}.dd .ddp a:nth-child(3){transition-delay:.08s,.08s,0s,0s}.dd .ddp a:nth-child(4){transition-delay:.12s,.12s,0s,0s}
.navgrid .btn{flex:none}
@media (min-width:1240px){.navgrid>nav,.navgrid>div{flex-wrap:nowrap!important;white-space:nowrap}}
@media (min-width:861px) and (max-width:1400px){
.navgrid>nav,.navgrid>div{column-gap:22px!important}
.navgrid .btn{padding:0 20px;letter-spacing:.22em}
}
.ddp::before{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px rgba(8,12,28,.8)}

/* links */
.tlink{border-bottom-color:rgba(220,188,116,.35);position:relative;width:fit-content}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#DCBC74;transform:scaleX(0);transform-origin:right;transition:transform .6s cubic-bezier(.65,0,.15,1)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
footer nav a,footer .lbl a{transition:color .35s}
footer nav a:hover,footer .lbl a:hover{color:#DCBC74}

/* forms */
.field{transition:border-color .4s,background .4s}
.field:hover{border-color:rgba(220,188,116,.55)}
.field:focus{background:rgba(243,241,233,.1);border-color:#DCBC74}

/* FAQ opens smoothly where the browser can */
details:not(.mnav)::details-content{block-size:0;overflow:clip;transition:block-size .55s cubic-bezier(.2,.7,.2,1),content-visibility .55s allow-discrete}
details:not(.mnav)[open]::details-content{block-size:auto}
html{interpolate-size:allow-keywords}
details:not(.mnav) summary{transition:color .35s}
details:not(.mnav) summary:hover{color:#DCBC74}

/* moving between pages */
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s ease both}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
}

/* no scroll animation at all: the horizontal journeys become plain swipe rows */
@media (prefers-reduced-motion:reduce){
.hz{height:auto!important}
.hzin{position:static;height:auto;overflow-x:auto;padding:32px 0}
}
@supports not (animation-timeline:view()){
html:not(.fx) .hz{height:auto!important}
html:not(.fx) .hzin{position:static;height:auto;overflow-x:auto;padding:32px 0}
}

/* first visit: the symbol opens the page */
#intro{display:none}
.fx-intro #intro{position:fixed;inset:0;z-index:100;background:#212F54;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
#intro img{display:block;height:auto}
#intro .sym{width:min(120px,28vw)}
#intro .wm2{width:min(240px,56vw)}

/* ---------- motion on: GSAP takes over from the CSS scroll timelines ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

.fx .rv,.fx .ci,.fx .grow,.fx .par,.fx .fd,.fx .ln,.fx .node b,.fx .lit,.fx .tr,.fx .hzm,.fx .su,.fx .spin,.fx .pageline path,.fx .gtile,
.fx .frame>img.fit,.fx .frame,.fx .bigring.rv,.fx section .lead,.fx section .dim,.fx section .lbl,.fx section .small,.fx section h3,
.fx section h2.disp,.fx section h2.h1,.fx section .btn,.fx section .pill,.fx section .tlink,.fx .trow,.fx .season,.fx section li,.fx section details,
.fx footer nav a,.fx footer .h1,.fx footer .h2,.fx footer .lbl,.fx .hw,.fx .hf,.fx .hp{animation:none!important}
.fx .node i{animation:pulse 2.6s ease-in-out infinite!important;animation-timeline:auto!important;animation-range:normal!important}
.fx .pageline path{stroke-dasharray:none}
/* the glowing tip of the wavy line, where it is being drawn (placed by motion.js) */
.pentip{position:fixed;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#DCBC74;pointer-events:none;z-index:0;
  box-shadow:0 0 10px 3px rgba(220,188,116,.45),0 0 26px 8px rgba(220,188,116,.14);transition:opacity .4s;will-change:transform}
.pentip::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(220,188,116,.35);animation:tipPulse 2.4s ease-out infinite}
@keyframes tipPulse{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
html:not(.fx) .pentip{display:none}
.fx .btn:hover,.fx .mcard:hover,.fx .pcard:hover img{transform:none}

/* hold the first screen back until it can play as one sequence */
.fx:not(.fx-go) #top h1,.fx:not(.fx-go) #top .disp,.fx:not(.fx-go) .hf,.fx:not(.fx-go) .hp{visibility:hidden}

/* masks for the text that rises into place */
.hwm{display:inline-block;overflow:clip;overflow-clip-margin:.04em;vertical-align:top;padding:.1em .05em .06em;margin:-.1em -.05em -.06em}
.hwm .hw{display:inline-block;animation:none}
.ch-mask{padding:.14em .04em .08em;margin:-.14em -.04em -.08em}
.sl-mask{padding:.14em .06em .1em;margin:-.14em -.06em -.1em}

/* horizontal journeys */
.fx .hz{padding:0!important}
.fx .hzin{top:0;height:100vh;height:100svh}
.fx .pan{height:min(620px,calc(100vh - 150px));height:min(620px,calc(100svh - 150px))}
.fx .track{will-change:transform}
.hzbar{position:absolute;left:48px;right:48px;bottom:max(28px,4vh);height:1px;background:rgba(243,241,233,.2)}
.hzbar i{display:block;height:100%;background:#DCBC74;transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px rgba(220,188,116,.7)}

/* cards: light follows the pointer */
.glare{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(220,188,116,.26),rgba(220,188,116,0) 70%)}
.pcard:hover .glare,.mcard:hover .glare,.jcard:hover .glare{opacity:1}
.pcard>div:not(.tint):not(.tint2):not(.mshade),.mcard>.mtxt,.jcard>.jtxt{z-index:2}

/* the wheel's outer names stay on the screen; the Community hero's words stay readable on the pale film */
@media (min-width:861px){
.wheelwrap{justify-self:start!important;margin-left:3.5vw}
html .wheel{width:min(440px,30vw)}
html .wheel .q{width:120px}
.wheel .q[style*="right:-150px"]{right:-84px!important}
.wheel .q[style*="left:-150px"]{left:-84px!important}
.wheel .q[style*="margin-left:-90px"]{margin-left:-60px!important}
#top[style*="min-height"]{min-height:calc(100vh - 76px)!important}
}
/* the letters of a one-word title sit in masks; keep the line below clear of them */
#top h1:has(.ch){padding-bottom:.14em}
#top .frame.hp::after{content:"";position:absolute;inset:0;background:rgba(33,47,84,.3);pointer-events:none}

/* floating ticket button on the phone */
.mcta{display:none}

/* ---------- phone ---------- */
@media (max-width:860px){
body{font-size:16px;line-height:1.65}
.lead{font-size:18px;line-height:1.6}
.disp{letter-spacing:.045em}
.h2{font-size:27px}
details summary{font-size:22px}
.btn{min-height:52px;padding:10px 26px;white-space:normal;text-align:center;line-height:1.5;justify-content:center;max-width:100%}
.btn-c{padding:10px 26px}
.trow{grid-template-columns:1fr!important}
.wheel{width:46vw!important}
.frame:not(.pan):not(.hp){box-shadow:0 30px 60px -36px rgba(8,12,28,.8)}

/* room to breathe between chapters, and no desktop-only fixed heights */
html.fx section:not(.hz){padding-top:76px!important;padding-bottom:76px!important}
.root>section[style*="height"]:not(.hz):not(.ehero){height:auto!important}
.root>section[style*="height: 90px"]{display:none}
.fx #top.g12,.fx #top.ehero{padding-top:0!important}
.fx #top.g12{padding-bottom:40px!important}
.fx #top.ehero{padding-bottom:0!important}
.fx #top:has(>.g12>.frame){padding:0 0 48px!important}

/* widths and alignments set by hand for the wide canvas */
.g12 p[style*="width:"],.g12 p[style*="width: "]{width:auto!important;max-width:100%}
.g12>.disp[style*="text-align:right"],.g12>.disp[style*="text-align: right"]{text-align:left!important}
.g12>[style*="left:"],.g12>[style*="left: "]{left:0!important}
.pageline path{opacity:.22}

/* heroes: the whole first screen is the film, the words sit on a soft shade */
.ehero::after,#top.g12>.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,47,84,.1) 30%,rgba(33,47,84,.88) 100%);pointer-events:none}
#top>.g12>.frame::after{background:linear-gradient(180deg,rgba(33,47,84,.12) 25%,rgba(33,47,84,.9) 100%)}
#top[style*="min-height"]{min-height:calc(100vh - 60px)!important;min-height:calc(100svh - 60px)!important}
#top[style*="min-height"]>.tint2{background:linear-gradient(180deg,rgba(33,47,84,.2) 20%,rgba(33,47,84,.9) 80%)!important}
.mpanel a[href="#top"]{color:#DCBC74}
.ehero-in{z-index:2;padding-bottom:64px}
.ehero .quote{font-size:28px!important}
#top h1.disp{font-size:clamp(40px,12.6vw,64px)}
#top.ehero h1.disp{font-size:clamp(72px,24vw,120px)}
#top>.wrap{z-index:2}
#top>.wrap>h1.disp{font-size:17vw!important}

/* full-screen menu, opening from the button */
header.nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(33,47,84,.97)!important}
.mnav summary{position:relative;z-index:2}
.mpanel{top:100%;height:calc(100vh - 60px);height:calc(100dvh - 60px);overflow-y:auto;overscroll-behavior:contain;padding:28px 20px calc(36px + env(safe-area-inset-bottom));gap:18px;border:0;background:#212F54}
.mpanel>a.lbl{font-family:Ogg,Georgia,serif;font-size:clamp(36px,11vw,48px);font-weight:400;letter-spacing:.04em;line-height:1.1}
.msub{margin:0;padding:2px 0 2px 16px;gap:6px 22px}
.msub a{font-size:22px;color:#DCBC74}
.mpanel .btn{margin-top:auto;width:100%;justify-content:center;flex:none}
.fx .mnav[open] .mpanel>*{animation:none}
html.menu-open,html.menu-open body{overflow:hidden}
.navbar{display:block}

/* horizontal journeys: one card in focus, the next one peeking in */
.fx .pan{height:min(560px,calc(100svh - 170px))!important}
.fx .pan.frame{box-shadow:0 30px 60px -30px rgba(8,12,28,.85)}
.hzbar{left:20px;right:20px;bottom:max(24px,env(safe-area-inset-bottom))}

/* the floating button appears once the first screen has passed */
.mcta{display:inline-flex;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;translate:-50% 180%;transition:translate .7s cubic-bezier(.2,.8,.2,1),background .5s;box-shadow:0 18px 40px -12px rgba(8,12,28,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.mcta.show{translate:-50% 0}
html.menu-open .mcta{translate:-50% 180%}
}

/* cookie consent (consent.js) */
.consent{position:fixed;z-index:80;right:24px;bottom:24px;width:min(440px,calc(100vw - 48px));padding:24px;border:1px solid rgba(243,241,233,.28);border-radius:12px;background:#212F54;color:#F3F1E9;box-shadow:0 30px 60px -20px rgba(8,12,28,.9);display:flex;flex-direction:column;gap:18px}
.consent[hidden]{display:none}
.consent p{margin:0;line-height:1.6;color:rgba(243,241,233,.85)}
.consent a{color:#F3F1E9;border-bottom:1px solid #DCBC74}
.consent-btns{display:flex;gap:10px}
.consent-btns .btn{flex:1;justify-content:center;padding:0 16px}
@media (max-width:860px){.consent{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;padding:20px}}
/* contact form messages */
.form-msg{margin:0;min-height:1.4em;color:#F0B69A}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* ---------- keep every line of text on screen ---------- */
/* mid-size desktops: the full header fits on one row */
@media (min-width:1180px) and (max-width:1279px){
  header.nav .navgrid>nav,header.nav .navgrid>div{gap:8px 20px!important;flex-wrap:nowrap!important}
  header.nav .navgrid .lbl{letter-spacing:.2em}
  header.nav .navgrid .btn{padding-left:18px;padding-right:18px;white-space:nowrap}
}
/* small desktops and tablets on their side: not enough room for every link beside the logo,
   so the header keeps the logo and the gold button and the rest goes in the menu, as on the phone */
@media (min-width:861px) and (max-width:1179px){
  header.nav .navgrid{display:flex!important;align-items:center;gap:24px}
  header.nav .navgrid>nav{display:none!important}
  header.nav .navgrid>div{margin-left:auto}
  header.nav .navgrid>div>a.l{display:none!important}
  header.nav .navgrid .btn{white-space:nowrap}
  .mnav{display:block;border:0!important;padding:0!important}
  .mnav summary{width:44px;height:44px;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:6px;font:inherit!important;position:relative;z-index:2;cursor:pointer}
  .mnav summary::after{content:none!important}
  .mnav summary span{display:block;width:22px;height:1.5px;background:#F3F1E9;transition:transform .3s,opacity .3s}
  .mnav[open] summary span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .mnav[open] summary span:nth-child(2){opacity:0}
  .mnav[open] summary span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .mpanel{position:absolute;left:0;right:0;top:100%;height:calc(100vh - 68px);height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;
    background:#212F54;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:40px max(48px,calc((100vw - 1440px) / 2 + 48px)) 48px}
  .mpanel>a.lbl{font-family:Ogg,Georgia,serif;font-size:48px;font-weight:400;letter-spacing:.04em;line-height:1.1}
  .msub{margin:0;padding:2px 0 2px 16px;gap:6px 22px}
  .msub a{font-size:22px;color:#DCBC74}
  .mpanel .btn{margin-top:auto}
  .mpanel a[href="#top"]{color:#DCBC74}
}
/* Vol.01: the artist cards are narrow here, so their name and handle get a little less spacing,
   and a handle too long for the card breaks rather than being cut off */
.jcard .tlink,.pcard .tlink{overflow-wrap:anywhere}
@media (min-width:861px) and (max-width:1179px){
  .jcard .tlink{letter-spacing:.16em}
  .jcard h3.h2{font-size:26px!important}
}
/* Community: the two headings beside the photo ("together" reached the edge) */
@media (min-width:861px) and (max-width:1279px){
  .disp[style*="5.4vw,88px"]{font-size:clamp(40px,4.6vw,88px)!important}
}
/* desktops up to 1400px: a paragraph given a fixed width on the canvas wraps inside its column instead of running off the screen */
@media (min-width:861px) and (max-width:1399px){
  .g12 p[style*="width:"],.g12 p[style*="width: "]{width:auto!important;max-width:100%}
}
/* Mycelia's big title never wider than the screen */
@media (min-width:861px){
  h1[style*="19vw"]{font-size:clamp(80px,min(19vw,calc((100vw - 96px) / 4.9)),300px)!important}
}
/* phone: a photo card that holds a whole block of text grows to fit it, with room inside */
@media (max-width:860px){
  .frame:has(>.g12){aspect-ratio:auto!important;height:auto!important;min-height:0!important}
  .frame>.g12{padding:48px 22px!important;column-gap:0!important;grid-template-columns:minmax(0,1fr)!important}
}