:root{--gold:#D4AF37;--gold-hi:#F1DC8A;--gold-lo:#A8862A;--text:#F2F0EA;--muted:#C9C4B6;--panel:rgba(0,0,0,.8);--sky:#030818;--script:"Michroma","Open Sans",sans-serif;--sans:"Open Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:var(--text);font:400 1.0625rem/1.65 var(--sans);overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:var(--gold-hi)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#0a0a0a;padding:10px 16px;z-index:100;border-radius:6px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.wrap{width:min(1100px,100% - 32px);margin-inline:auto}
.wrap.narrow{width:min(820px,100% - 32px)}
/* fixed sky: his page background video */
.skyfix-old{}

/* header */
.top{position:absolute;inset:10px 10px auto 10px;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;background:rgba(0,0,0,.72);border:1px solid var(--gold-lo);border-radius:999px;padding:2px 10px}
.mark{font:400 1.7rem/1 var(--script);color:var(--gold);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.top nav{display:flex;flex-wrap:wrap}
.top nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;min-height:44px;min-width:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;transition:color .25s,background .25s}
.top nav a:hover{color:var(--gold-hi);background:rgba(212,175,55,.14)}
/* script headings */
h1,h2,h3{font-family:var(--script);font-weight:400;color:var(--gold);margin:0;line-height:1.1}
.h2{font-size:clamp(2.4rem,6vw,3.8rem)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:var(--gold);color:#0a0a0a;font:700 1rem var(--sans);text-decoration:none;border-radius:999px;border:2px solid var(--gold);cursor:pointer;transition:box-shadow .3s,background .3s,transform .3s}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi);box-shadow:0 0 26px rgba(212,175,55,.55);transform:translateY(-2px)}
.btn.ghost{background:rgba(0,0,0,.6);color:var(--gold);}
.btn.ghost:hover{background:rgba(212,175,55,.2);color:var(--gold-hi)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:20px 0 0}
/* panels over his sky */
.panel{background:var(--panel);border:1px solid var(--gold-lo);border-radius:16px;padding:clamp(18px,3vw,34px);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 60px rgba(0,0,0,.45)}
/* hero */
.hero{position:relative;min-height:100svh;padding:92px 16px 36px;display:flex;flex-direction:column;align-items:center;gap:18px}
.hero-poster{width:min(807px,92vw,calc(64svh*.683));height:auto;border-radius:6px;box-shadow:0 0 0 2px var(--gold-lo),0 24px 70px rgba(0,0,0,.55)}
.hero-card{text-align:center;max-width:860px;width:100%}
.hero h1{font-size:clamp(2.3rem,7.2vw,4.4rem)}
.welcome{position:relative;padding:3vw 0 6vw}
.welcome .panel{margin-bottom:18px}
.welcome h2{font-size:clamp(2.2rem,5.6vw,3.6rem);text-align:center;margin-bottom:14px}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);text-align:center;margin:0 auto;max-width:62ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.card{background:var(--panel);border:1px solid var(--gold-lo);border-radius:14px;padding:22px 24px 26px;transition:box-shadow .3s,border-color .3s}
.card:hover{box-shadow:0 0 30px rgba(212,175,55,.28);border-color:var(--gold)}
.card h3{font-size:2.2rem;margin-bottom:6px}
.card p{margin:0}
.rule{height:1px;width:min(520px,70%);margin:6px auto 22px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.links{padding:0 0 7vw}
.links .panel{text-align:center}
.links h2{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:16px}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:12px}
.tile{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px;background:#06070b;border:1px solid var(--gold-lo);border-radius:12px;color:var(--text);text-decoration:none;font-weight:600;text-align:left;transition:border-color .25s,box-shadow .3s,transform .3s}
.tile:hover{border-color:var(--gold-hi);box-shadow:0 0 22px rgba(212,175,55,.35);transform:translateY(-2px)}
.ico{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
.ico.dk{background:#15161b}
.ico img{width:30px;height:30px;object-fit:contain}
.ico.cv{border-radius:8px;background:#000}.ico.cv img{width:44px;height:44px;object-fit:cover}
.tlab{font-size:.95rem;line-height:1.2;overflow-wrap:anywhere;min-width:0}
/* his layered scene: water band, sticky highway, forest band */
.scene{position:relative}
.road{position:sticky;top:0;height:100svh;z-index:0;overflow:hidden;background:#222}

.flow{position:relative;z-index:1;margin-top:-100svh}
.band{position:relative;overflow:hidden;background:#0b1a33}
.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.water{height:min(713px,72.8vw)}
.window{height:min(528px,53.9vw)}
.forest{height:min(375px,38.3vw)}
.skywin{height:min(554px,56.5vw);position:relative;z-index:1}
/* music area: his white album behind everything */
.player-sec{position:relative;padding:clamp(40px,6vw,90px) 0 clamp(70px,9vw,130px);background:#e9ecee center/cover no-repeat;z-index:2}
.player{background:rgba(0,0,0,.645);border:1px solid var(--gold);border-radius:16px;padding:clamp(16px,3vw,30px);box-shadow:0 20px 70px rgba(0,0,0,.45)}
.player h2{font-size:clamp(2.4rem,5.5vw,3.6rem);margin-bottom:14px}
.now{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.cover{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--gold-lo);flex:none}
.artist{margin:0;font:400 1.6rem/1 var(--script);color:var(--gold)}
.nt{margin:4px 0 0;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cb{width:48px;height:48px;border-radius:50%;border:1px solid var(--gold-lo);background:#0b0c11;color:var(--gold);display:grid;place-items:center;cursor:pointer;transition:background .25s,box-shadow .3s}
.cb:hover{background:#1a1b22;box-shadow:0 0 18px rgba(212,175,55,.45);color:var(--gold-hi)}
.cb svg{width:22px;height:22px;fill:currentColor}
.cb.play{width:58px;height:58px;background:var(--gold);color:#0a0a0a;border-color:var(--gold)}
.cb.play:hover{background:var(--gold-hi);color:#0a0a0a}
.seek{flex:1 1 220px;display:flex;align-items:center;gap:12px;min-width:200px}
.seek input{flex:1;min-height:44px;accent-color:var(--gold)}
.tm{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--muted);white-space:nowrap}
.trl{list-style:none;margin:0;padding:0;max-height:min(62vh,560px);overflow-y:auto;border-top:1px solid var(--gold-lo);scrollbar-color:var(--gold) #000}
.trl li{display:flex;align-items:stretch;border-bottom:1px solid rgba(212,175,55,.2)}
.tr{flex:1;min-width:0;display:grid;grid-template-columns:2.6em 1fr auto;gap:10px;align-items:start;text-align:left;background:none;border:0;color:var(--text);padding:12px 8px;min-height:48px;cursor:pointer;font:inherit;font-size:.95rem;transition:background .2s}
.tr:hover{background:rgba(212,175,55,.12)}
.tr .no,.tr .du{color:var(--muted);font-variant-numeric:tabular-nums}
.tr .ti{overflow-wrap:anywhere}
.tr[aria-current="true"]{background:rgba(212,175,55,.2);color:#fff}
.tr[aria-current="true"] .no{color:var(--gold-hi)}
.dl{align-self:center;margin:0 6px;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--gold-lo);border-radius:999px;font-size:.85rem;font-weight:600;text-decoration:none;color:var(--gold)}
.dl:hover{background:rgba(212,175,55,.2);color:var(--gold-hi)}
.alt-listen{margin:16px 4px 0;color:var(--muted);font-size:.95rem}
.player-sec/* welcome listeners over the milky way */
.stars{padding:clamp(54px,8vw,110px) 0;background:#05070f}
.stars .wrap{position:relative;z-index:3}
.lis-text{font:italic 600 clamp(1.05rem,2.2vw,1.35rem)/1.65 var(--sans);color:#fff;text-align:center;margin:0 0 22px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.lis-text a{color:var(--gold-hi)}
.stars .cta{text-align:center}
/* waterfall + painting */
.falls{height:min(1023px,104vw);display:grid;place-items:center}
.painting{position:relative;z-index:3;margin:0;width:min(600px,64vw)}
.painting img{width:100%;height:auto;border-radius:6px;box-shadow:0 0 0 2px var(--gold-lo),0 24px 70px rgba(0,0,0,.6)}
.waves{height:min(250px,25.5vw)}
.jukebox{padding:clamp(30px,6vw,80px) 0;background:#000}
.jukebox img{width:min(1088px,100%);height:auto;margin:0 auto;border-radius:8px;box-shadow:0 0 0 1px var(--gold-lo),0 0 60px rgba(212,175,55,.18)}
[data-fade]{opacity:0}
/* photo wall */
.archive{padding:clamp(30px,5vw,70px) 0;background:#000}
.archive h2{font-size:clamp(2.4rem,5.6vw,3.6rem);margin-bottom:6px;text-align:center}
.arc-note{color:var(--muted);text-align:center;margin:0 0 22px}
dialog#viewer{border:0;background:#000;color:var(--text);width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:0;margin:0}
dialog#viewer::backdrop{background:#000}
dialog#viewer[open]{display:grid;place-items:center}
.vwrap{display:contents}
#vimg{max-width:94vw;max-height:86vh;object-fit:contain}
.vx{position:absolute;top:12px;right:12px;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--gold);background:#000;color:var(--gold);cursor:pointer;font:600 1rem var(--sans)}
.vp,.vn{position:absolute;top:calc(50% - 26px);width:52px;height:52px;border-radius:50%;border:1px solid var(--gold);background:#000;color:var(--gold);cursor:pointer;display:grid;place-items:center}
.vp{left:10px}.vn{right:10px}
.vp svg,.vn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.4}
.vc{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--muted);margin:0}
/* keepsakes: his centred column */
.keeps{padding:clamp(24px,4vw,60px) 0;background:#000}
.col{display:grid;gap:clamp(14px,2.5vw,26px);justify-items:center}
.keep{margin:0}
.keep img{height:auto;max-width:100%;border:1px solid var(--gold-lo)}
.copy-line{font:400 clamp(1.7rem,4vw,2.3rem)/1.2 var(--script);color:var(--gold);text-align:center;margin:0}
.banner-crop img{width:min(980px,100%);height:min(275px,28vw);object-fit:cover}
/* blog */
.bloghero{padding:clamp(110px,16vw,190px) 0 24px;text-align:center}
.bloghero h1{font-size:clamp(3rem,9vw,5.2rem)}
.bloghero .lead{margin-top:6px}
.postlist{padding:10px 0 clamp(50px,8vw,100px)}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pcard{display:grid;grid-template-columns:minmax(120px,300px) 1fr;gap:clamp(16px,3vw,32px);background:#06070b;border:1px solid var(--gold-lo);border-radius:12px;overflow:hidden;color:var(--text);text-decoration:none;transition:box-shadow .3s,border-color .3s}
.pcard:hover{box-shadow:0 0 34px rgba(212,175,55,.3);border-color:var(--gold)}
.pimg{background:#000;display:grid;place-items:center;min-height:180px}
.pimg img{width:100%;height:100%;object-fit:cover;max-height:300px}
.noimg{font:400 2rem var(--script);color:var(--gold);padding:20px;text-align:center}
.ptxt{padding:22px 24px 24px 0;display:grid;gap:8px;align-content:center}
.pd{color:var(--gold-hi);font-weight:600;font-size:.9rem}
.pt{font:400 clamp(1.9rem,4vw,2.6rem)/1.1 var(--script);color:var(--gold)}
.px{color:var(--muted)}
@media(max-width:640px){.pcard{grid-template-columns:1fr}.ptxt{padding:0 20px 22px}}
.post{padding:clamp(100px,14vw,170px) 0 clamp(50px,8vw,100px)}
.post h1{font-size:clamp(2.6rem,7vw,4.4rem);margin:0 0 8px}
.meta{color:var(--muted);margin:0 0 24px}
.eyebrow{margin:0 0 10px}
.backlink{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-weight:600}
.postimg{display:block;margin:0 0 26px}
.postimg img{width:100%;height:auto;border:1px solid var(--gold-lo)}
.lede{font-size:1.25rem}
.body h2{font:400 2.2rem/1.1 var(--script);color:var(--gold);margin:26px 0 6px}
.body p{margin:0 0 16px}.body .seo{color:var(--muted);font-size:.95rem}
.pull{margin:26px 0;padding:6px 0 6px 20px;border-left:2px solid var(--gold);font:400 clamp(1.7rem,3.4vw,2.3rem)/1.25 var(--script);color:var(--gold-hi)}
@media(min-width:900px){.cols{column-count:2;column-gap:48px}.cols h2{break-after:avoid}.cols .pull{break-inside:avoid}.post .wrap.narrow:has(.cols){width:min(1100px,100% - 32px)}}
.back{margin-top:32px}
/* footer */
.foot{background:transparent;border-top:1px solid var(--gold-lo);padding:40px 16px 90px;text-align:center;position:relative;z-index:2}
.foot p{margin:6px 0;color:var(--muted)}
.foot .foot-mark{font:400 2.2rem/1 var(--script);color:var(--gold)}
.badge{position:fixed;right:12px;bottom:12px;z-index:60;max-width:calc(100vw - 24px);background:rgba(0,0,0,.9);color:var(--muted);border:1px solid var(--gold-lo);border-radius:999px;padding:8px 14px;font:600 .75rem var(--sans);text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.badge:hover{color:var(--gold-hi);border-color:var(--gold)}
#wixheadless-banner-container{display:none !important}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}.js .reveal{opacity:1;transform:none}[data-fade]{opacity:1 !important}.road{position:relative;height:auto;aspect-ratio:1600/961}.flow{margin-top:0}.scene{display:flex;flex-direction:column}.flow{position:relative}}

/* ===== Version Three ===== */
/* fixed sky: never larger than the video's own 1920x1080, centred, edges fade */
.skyfix{position:fixed;inset:0;z-index:-1;display:grid;place-items:center;background:#02060f;overflow:hidden}
.skyfix .skybox{position:relative;width:min(100vw,1920px);height:min(100vh,1080px);background:#6f9fd0 center/cover no-repeat}
.skyfix video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

}
/* highway scene: pinned; the picture is never shown larger than 1600x961 */
.road{display:grid;place-items:start center;background:transparent}
.road .roadbox{position:sticky;top:0;width:min(100%,1600px);height:min(100svh,961px);overflow:hidden}
.road .roadbox img{width:100%;height:100%;object-fit:cover}
.road{position:sticky;top:0;height:100svh;overflow:visible;background:transparent}
.road .roadbox{position:relative;top:auto;margin:0 auto}
.road::before{content:"";position:absolute;inset:0;background:#000;z-index:-1}
/* bands never wider than the 1920 px of their video */
.band{max-width:1920px;margin-inline:auto}
.window{max-width:1920px}
/* painting on the waterfall */
.falls{display:block;position:relative}
.falls .painting{position:absolute;left:0;top:0;margin:0;width:638px;z-index:3;transform-origin:0 0}
.falls .painting img{width:100%;height:auto;display:block;border-radius:0;box-shadow:none}
/* player text over the album */
.player,.player p,.player li,.player span{text-shadow:0 1px 2px rgba(0,0,0,.85)}
.player .tr .no,.player .tr .du,.player .tm,.player .alt-listen{color:#E6E1D2}
.player .dl,.player .artist,.player .alt-listen a{color:var(--gold-hi)}
/* chapters */
.story{background:#000;padding:clamp(26px,4vw,60px) 0 clamp(10px,2vw,30px)}
.story .intro{text-align:center;color:var(--muted);margin:0 0 6px}
.story h2{font-size:clamp(2.6rem,6vw,3.8rem);text-align:center;margin:0 0 4px}
.chapter{width:min(1280px,100% - 16px);margin:clamp(24px,4vw,56px) auto 0}
.chapter h3{font-size:clamp(2.2rem,5vw,3rem);text-align:center;margin:0 0 6px}
.chapter .rule{margin:4px auto 16px}
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.grid[hidden]{display:none}
.grid.more{margin-top:10px}
.ph{flex:0 0 215px;height:286px;border:1px solid var(--gold-lo);background:#06070b;padding:0;border-radius:3px;overflow:hidden;cursor:pointer;display:grid;place-items:center;transition:box-shadow .3s,border-color .3s}
.ph:hover{box-shadow:0 0 22px rgba(212,175,55,.5);border-color:var(--gold-hi)}
.ph img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:560px){.ph{flex:0 0 calc(50% - 5px);height:auto;aspect-ratio:215/286}}
.morebtn{text-align:center;margin:14px 0 0}
/* keepsakes: one centred column */
.keeps{background:#000;padding:clamp(18px,3vw,40px) 0 0}
.col{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.5vw,26px);width:min(1100px,100% - 32px);margin-inline:auto}
.col .keep{margin:0;display:block}
.col .keep img{display:block;width:100%;height:auto;max-width:none;border:1px solid var(--gold-lo)}
.copy-line{margin:0}
.banner-crop img{height:auto;aspect-ratio:980/275;object-fit:cover}
/* the page ends in the clouds: black frame above, sky below */

.endsky{height:clamp(200px,34vh,420px)}
.foot{background:transparent;border-top:0;padding:0 16px 80px}
.foot-plate{width:min(560px,100%);margin:0 auto;background:rgba(0,0,0,.7);border:1px solid var(--gold-lo);border-radius:14px;padding:18px 20px}
.foot-plate p{text-shadow:0 1px 2px rgba(0,0,0,.9)}
.foot-plate .foot-mark{color:var(--gold-hi)}
.foot-plate p,.foot-plate a{color:#F1ECDD}
.foot-plate a{color:var(--gold-hi)}
/* blog and post pages: black reading area, sky at the end */
.blackground{background:#000;position:relative}
.postimg img,.pimg img{height:auto}
.pimg{background:#000}
.pimg img{object-fit:contain;max-height:300px}
.postimg{display:block;margin:0 0 26px;width:min(var(--nat,100%),100%)}
.postimg img{width:100%}
/* no scale, zoom or Ken Burns anywhere */
.reveal{transform:none !important}
@media(prefers-reduced-motion:reduce){.road{position:relative;height:auto}.road .roadbox{position:relative;height:auto;aspect-ratio:1600/961}}

.falls video{object-position:var(--ox,50%) 50%}
.falls{--ox:50%}
@media(max-width:700px){.falls{--ox:60%;height:120vw}}
.falls .painting{position:absolute;left:0;top:0;width:638px}
.endsky{height:clamp(320px,64vh,720px)}

/* ===== Version Four ===== */
/* the sky: his page background. Fixed, full screen, behind everything. Never enlarged past the video's own 1920x1080; beyond that the scene is extended with a colour-matched sky gradient and the video edge dissolves into it. */
html,body{background:#6f8396}
body{background:transparent}
.skyfix{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(#3f4f72 0,#4c5f7e 12%,#6b8094 30%,#8f9c9f 48%,#9ea3a0 60%,#8a9090 100%)}
.skyfix video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100%,1920px);height:min(100%,1080px);object-fit:cover;display:block}



/* nothing below the stage hides the sky */
.road::before{display:none}
.road,.scene,.flow,.skywin,.window{background:transparent}
.jukebox,.photos,.keeps,.blackground,.foot,main{background:transparent}
.band{background:transparent}
.jukebox{padding:clamp(24px,4vw,56px) 0}
.jukebox img{box-shadow:0 8px 30px rgba(0,0,0,.35);border-radius:0}
/* the name */
.nm{font-family:Arial,Helvetica,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.3em;font-style:normal;color:var(--gold-hi)}
.mark .nm{font-size:1.05rem}
.artist .nm{font-size:1rem}
.foot-mark .nm{font-size:1.3rem}
/* waterfall and waves: butted, same width, same axis */
.falls{height:min(1023px,104vw);display:block;position:relative}
.waves{height:min(250px,25.5vw)}
.falls .painting{position:absolute;left:0;top:0;margin:0;width:638px;z-index:3;transform:none;opacity:1;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
.falls .painting img{border:0;box-shadow:none;width:100%;height:auto}
/* photo display: his 15 sideways sliders */
.photos{padding:clamp(18px,3vw,40px) 0 clamp(18px,3vw,40px)}
.prow{position:relative;width:min(1202px,100%);margin:0 auto 17px}
.ptrack{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;margin:0 56px;overscroll-behavior-x:contain;outline-offset:4px}
.ptrack::-webkit-scrollbar{display:none}
.ptrack.drag{scroll-snap-type:none;cursor:grabbing}
.ph{flex:0 0 var(--tw);width:var(--tw);height:var(--th);scroll-snap-align:start;padding:0;margin:0;border:1px solid var(--gold);background:rgba(0,0,0,.15);cursor:pointer;overflow:hidden;box-shadow:0 5px 16px rgba(0,0,0,.35);transition:box-shadow .25s}
.ph:hover{box-shadow:0 0 0 1px var(--gold-hi),0 6px 22px rgba(0,0,0,.45)}
.ph img,.ph video{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.parr{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:0;background:transparent;color:var(--gold-hi);cursor:pointer;display:grid;place-items:center;z-index:2;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))}
.parr svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pprev{left:2px}.pnext{right:2px}
.parr.off{visibility:hidden}
@media(max-width:700px){.ptrack{margin:0;scroll-padding:0 8px;padding:0 8px}.parr{width:48px;height:48px;margin-top:-24px;background:rgba(0,0,0,.45)}.pprev{left:6px}.pnext{right:6px}.prow{margin-bottom:12px}}
/* keepsakes: three shared widths, one centre axis */
.keeps{padding:clamp(14px,2.5vw,30px) 0 clamp(40px,6vw,90px)}
.col{width:min(1100px,100% - 32px)}
.keep img{box-shadow:0 8px 26px rgba(0,0,0,.35)}
.copy-line{font:400 clamp(1.7rem,4vw,2.3rem)/1.2 var(--script);color:var(--gold-hi);text-shadow:0 2px 6px rgba(0,0,0,.7)}
/* footer straight on the clouds */
.foot{padding:20px 16px 90px}
.foot-in{width:min(640px,100%);margin:0 auto}
.foot p,.foot a{text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.45)}
.foot p{color:#F6F1E2}
.foot .foot-mark{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.5)}
/* blog */
.bloghero h1,.post h1{text-shadow:0 2px 8px rgba(0,0,0,.75)}
.bloghero .lead,.meta,.body,.body p,.lede{color:#F6F1E2;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.4)}
.pcard{background:rgba(0,0,0,.5)}
.post .wrap{position:relative}

/* ---- the flow: nothing here that his original does not have ---- */
.top{background:none;border:0;border-radius:0;padding:0 8px;inset:6px 6px auto 6px}
.top nav a{color:#fff}
.top nav a:hover{background:none;color:var(--gold-hi)}
.mark{font-family:Arial,Helvetica,sans-serif}
.panel,.card{background:none;border:0;box-shadow:none;border-radius:0}
.stars,.band,.water,.forest,.waves,.falls{background:transparent}
.ph{background:none;box-shadow:none}
.ph:hover{box-shadow:none;border-color:var(--gold-hi)}
.parr{filter:none}
.jukebox img{box-shadow:none}
.keep img{box-shadow:none;border:0}
.col .keep img{border:0}
.copy-line{text-shadow:none;color:var(--gold-hi)}
.foot p,.foot a,.foot .foot-mark{text-shadow:none}
.pcard{background:none;border:0;border-radius:0;box-shadow:none}
.pcard:hover{box-shadow:none}
.bloghero h1,.post h1{text-shadow:none}
.bloghero .lead,.meta,.body,.body p,.lede{text-shadow:none}
.postimg img,.pimg img{border:0}
/* intro, as he built it: poster, one tagline, one text block, floating icons, all straight on the sky */
.intro{position:relative;padding:0;text-align:center;color:#fff}
.hero-poster{width:min(807px,100%);height:auto;margin:0 auto;border-radius:0;box-shadow:none;display:block}
.tag{font:400 clamp(.95rem,2.4vw,1.2rem)/1.9 var(--nm-font);font-style:normal;font-synthesis:none;letter-spacing:.12em;-webkit-text-stroke:.032em currentColor;paint-order:stroke fill;color:#fff;max-width:min(578px,100% - 24px)}
.introtxt{width:min(960px,100% - 24px)}
.introtxt .wel,.introtxt p{font:italic 700 24px/1.5 Fraunces,Georgia,serif;color:#fff}

.introtxt .nm{font-size:.8em;color:inherit}
.icons{list-style:none;padding:0 12px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 40px;width:min(1240px,100%)}
.icons li{display:block}
.icons a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.icons img{display:block;width:auto;height:auto;max-width:108px}
@media(max-width:700px){.tag{font-size:28px}.introtxt .wel,.introtxt p{font-size:20px}.icons img{max-width:84px}}
.falls .painting{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
.stars .wrap{position:relative}
.post h1,.bloghero h1{overflow-wrap:anywhere;word-break:break-word;font-size:clamp(2.2rem,7vw,4.4rem)}

/* ===== Version Five ===== */
/* ONE shared definition for the name. FINAL: Michroma, step E (semi-bold look), chosen by DOJO.
   Michroma has one weight (400); the heavier look is a same-colour stroke in em, painted under the fill.
   Change the face here and only here: --nm-font, --nm-weight, --nm-stroke, --nm-track. */
@font-face{font-family:"Michroma";src:url(../fonts/michroma-latin-400-normal.754fdb31.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
:root{--nm-font:"Michroma",sans-serif;--nm-weight:400;--nm-stroke:.045em;--nm-track:.3525em;
 --img-border:5px;--img-border-color:#FFBE0B;--tile-gap:18px;--row-gap:28px}
.nm-t{font-family:var(--nm-font);font-weight:var(--nm-weight);font-style:normal;font-kerning:none;font-synthesis:none;text-transform:uppercase;color:var(--gold-hi);
 -webkit-text-stroke:var(--nm-stroke) currentColor;paint-order:stroke fill;letter-spacing:var(--nm-track);white-space:nowrap;
 margin-right:calc(-1*var(--nm-track));word-spacing:.9em}
.mark .nm-t{font-size:.95rem}
.artist .nm-t{font-size:1rem}
.foot-mark{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:1.8em;row-gap:.8em;margin:0 0 18px}
.foot-mark .nm-t{font-size:clamp(.74rem,3.3vw,1.05rem)}
.introtxt .wel .nm-t{font-size:.72em}
@media(max-width:700px){.mark .nm-t{font-size:.78rem}.artist .nm-t{font-size:.85rem}}

/* bands: full width of the frame at every size (his original: left 0, width = viewport, no max width) */
.band,.window,.skywin{max-width:none;margin-inline:0;width:100%}
/* the pinned road: a picture that stays fixed to the screen while the 528 px window slides over it (his original). Window clips, picture is sticky inside a taller block that starts one screen above the window. */
.flow{margin-top:0}
.window{position:relative;overflow:clip;max-width:none}
.window .wmedia{position:absolute;left:0;right:0;top:calc(-1*100svh);height:calc(200svh + 100%)}
.window .roadimg{position:sticky;top:0;display:block;width:100%;height:100svh;max-width:none;object-fit:cover}
@media(prefers-reduced-motion:reduce){.window .wmedia{top:0;height:100%}.window .roadimg{position:relative;height:100%}}

/* heavier dark gold tangerine border on every still image; added around the picture, never inside it */
.hero-poster{box-sizing:content-box;width:min(807px,calc(100% - 2*var(--img-border)));border:var(--img-border) solid var(--img-border-color);border-radius:0;box-shadow:none}
.jukebox img{box-sizing:content-box;width:min(1088px,calc(100% - 2*var(--img-border)));border:var(--img-border) solid var(--img-border-color);border-radius:0;box-shadow:none}
.keep,.postimg{box-sizing:content-box;display:block;width:min(var(--w),calc(100% - 2*var(--img-border)));border:var(--img-border) solid var(--img-border-color);margin:0;line-height:0}
.keep img,.postimg img{display:block;width:100%;height:auto;max-width:none;border:0;box-shadow:none}
.postimg{margin:0 0 26px}
.pimg img{box-sizing:border-box;border:var(--img-border) solid var(--img-border-color)}
.cover{box-sizing:content-box;border:var(--img-border) solid var(--img-border-color)}

/* photo display: one system, 15 rows */
.prow{margin:0 auto var(--row-gap)}
.ptrack{gap:var(--tile-gap)}
.ph{box-sizing:content-box;flex:0 0 215px;width:215px;height:286px;border:var(--img-border) solid var(--img-border-color);box-shadow:none}
.ph:hover{border-color:var(--img-border-color);box-shadow:none}
@media(max-width:700px){.prow{margin-bottom:var(--row-gap)}}
.col{gap:var(--row-gap)}

/* the name inside running text: capitals, no spacing, no extra styling */
.nm:not(.nm-t){font:inherit;letter-spacing:0;text-transform:none;color:inherit}

/* sky: clear to the full width, no side fog, fade, mask or gradient. Cover-fills the screen, as his page background video does. */
.skyfix video{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;transform:none;object-fit:cover;-webkit-mask-image:none;mask-image:none}

/* his icon row: 97 px and 108 px round icons, 50 px apart, centred, floating on the sky, no backing */
.icons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 50px;width:100%;max-width:none;list-style:none}
.icons li{display:block;flex:none}
.icons img{display:block;max-width:none;border-radius:0}
.icons li.spin img{border-radius:50%}
@keyframes motion-fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes motion-blurIn{0%{filter:blur(6px)}100%{filter:blur(0)}}
@keyframes motion-growIn{0.0001%{transform:translate(0,120px) scale(.8)}100%{transform:translate(0,0) scale(1)}}
@keyframes motion-spin-1{0%{rotate:-360deg}100%{rotate:0deg}}
.js .icons li{opacity:0}
.js .icons li.in{opacity:1;animation:motion-fadeIn 1.4s cubic-bezier(.47,0,.745,.715) 1ms backwards,motion-blurIn 2s linear 1ms backwards}
.js .icons li.spin.in{animation:motion-fadeIn .96s cubic-bezier(.645,.045,.355,1) 1ms backwards,motion-growIn 1.2s cubic-bezier(.645,.045,.355,1) 1ms backwards,motion-spin-1 28s linear 1ms infinite}
@media(prefers-reduced-motion:reduce){.js .icons li,.js .icons li.in{opacity:1;animation:none !important}}
.icons img[width="108"]{width:108px;height:108px}
.icons img[width="97"]{width:97px;height:97px}
.icons li{width:auto}

/* ===== palette (DOJO, 5:33 and 5:36am): one place to change ===== */
:root{--c-yellow:#FFBE0B;--c-orange:#FB5607;--c-pink:#FF006E;--c-purple:#8338EC;--c-blue:#3A86FF;--c-green:#00FF00;
 /* one light source for the page: the sun high in the sky, a little left of centre. Every shadow on large text falls down and a touch right, same softness. */
 --shadow-large:1px 3px 7px rgba(8,16,36,.6)}
/* roles. Applied only where the colour stays readable. The intro (tagline, welcome text) stays white and untouched; the name keeps its Michroma look and gold.
   Large type only: yellow headings with one soft shadow (see --shadow-large). Small text keeps its current colour: none of the six reaches readable contrast over the mid-grey sky or the player panel without a backing, which is not allowed. */
.copy-line,.post h1,.bloghero h1,.pt,.player h2{color:var(--c-yellow);text-shadow:var(--shadow-large)}
.top nav a:hover,.alt-listen a:hover,.foot a:hover,.backlink:hover,.player .tr:hover .ti{color:var(--c-pink)}

/* water, window (road) and forest keep the original's fixed pixel heights at every width (713, 528, 375), so the road scene has the same room and the same pinned travel on a phone as on a desktop. Video and picture are cover-fitted, never stretched. */
.band.water{height:713px}
.window{height:528px}
.band.forest{height:375px}
.band.water .bgvid,.band.forest .bgvid{object-position:50% 50%}


/* ===== COPYRIGHT lettering (DOJO, Oct 24 10:42am): one shared definition ===== */
/* Michroma (same embedded file as the name), upper case, wide even tracking, smaller and quieter than the name. No script, no backing.
   Change the look here and only here: --cr-size, --cr-track, --cr-stroke. Colour is left as each place had it. */
:root{--cr-size:.78rem;--cr-size-lg:1rem;--cr-track:.22em;--cr-stroke:.02em}
.cr{font-family:var(--nm-font);font-weight:400;font-style:normal;font-synthesis:none;text-transform:uppercase;letter-spacing:var(--cr-track);font-size:var(--cr-size);line-height:1.7;
 -webkit-text-stroke:var(--cr-stroke) currentColor;paint-order:stroke fill;text-shadow:none;padding-left:var(--cr-track);text-align:center}
.copy-line.cr{font-size:var(--cr-size-lg);text-shadow:none}
.cr .nm-t{font-size:1em;margin-right:calc(-1*var(--nm-track));-webkit-text-stroke:var(--nm-stroke) currentColor}
@media(max-width:700px){:root{--cr-size:.7rem;--cr-size-lg:.82rem;--cr-track:.16em}}

/* ===== MUSIC PLAYER (DOJO, Oct 24 11:22am): spring leaf green, half the opacity, floating above the album ===== */
/* was: background rgba(0,0,0,.645); box-shadow 0 20px 70px rgba(0,0,0,.45). Now a plain translucent tint over the sharp album: no blur, no overlay, no filter.
   Olive highlight (.tr[aria-current] background rgba(212,175,55,.2)) is untouched. Change the player look here only. */
:root{--pl-green:44,112,82;--pl-alpha:.3225;--pl-ink:#0B2A10;--pl-ink2:#173A1C;--pl-gold:#4A3800}
.player{background:rgba(var(--pl-green),var(--pl-alpha));
 box-shadow:4px 10px 14px -4px rgba(8,16,36,.36),inset 1px 1px 0 rgba(255,255,255,.4)}
.player,.player p,.player li,.player span,.player h2{text-shadow:none}
.player h2{color:var(--pl-ink)}
.player .nt,.player .tr,.player .tr .ti,.player .tr:hover .ti{color:var(--pl-ink)}
.player .tr:hover .ti{color:var(--pl-ink)}
.player .tr .no,.player .tr .du,.player .tm,.player .alt-listen{color:var(--pl-ink2)}
.player .tr[aria-current="true"]{color:var(--pl-ink)}
.player .tr[aria-current="true"] .no{color:var(--pl-gold)}
.player .dl,.player .artist,.player .artist .nm-t,.player .alt-listen a{color:var(--pl-gold)}
.player .dl{border-color:var(--pl-gold)}
.player .trl{scrollbar-color:var(--gold) transparent}

/* ===== JEWELS AND GOLD (DOJO, Oct 24 11:25am and 11:28am: pirate turned good) ===== */
/* Material only, on small controls. Light source: sun high, a little left of centre: highlights top-left, shadows down-right.
   Nothing here changes a size, position, border colour of any photo, or the olive highlight on the active track row. */
/* Round brilliant stones for previous/back and next/forward. */
:root{--emerald-round:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 44%22 shape-rendering=%22geometricPrecision%22%3E%3Cpath d=%22M 22.00 2.00 A 20 20 0 0 1 29.65 3.52 L 28.43 6.48 A 16.8 16.8 0 0 0 22.00 5.20 Z%22 fill=%22%23C98F00%22/%3E%3Cpath d=%22M 29.65 3.52 A 20 20 0 0 1 36.14 7.86 L 33.88 10.12 A 16.8 16.8 0 0 0 28.43 6.48 Z%22 fill=%22%23FFBE0B%22/%3E%3Cpath d=%22M 36.14 7.86 A 20 20 0 0 1 40.48 14.35 L 37.52 15.57 A 16.8 16.8 0 0 0 33.88 10.12 Z%22 fill=%22%23FFBE0B%22/%3E%3Cpath d=%22M 40.48 14.35 A 20 20 0 0 1 42.00 22.00 L 38.80 22.00 A 16.8 16.8 0 0 0 37.52 15.57 Z%22 fill=%22%23FFD75E%22/%3E%3Cpath d=%22M 42.00 22.00 A 20 20 0 0 1 40.48 29.65 L 37.52 28.43 A 16.8 16.8 0 0 0 38.80 22.00 Z%22 fill=%22%23FFE9A3%22/%3E%3Cpath d=%22M 40.48 29.65 A 20 20 0 0 1 36.14 36.14 L 33.88 33.88 A 16.8 16.8 0 0 0 37.52 28.43 Z%22 fill=%22%23FFE9A3%22/%3E%3Cpath d=%22M 36.14 36.14 A 20 20 0 0 1 29.65 40.48 L 28.43 37.52 A 16.8 16.8 0 0 0 33.88 33.88 Z%22 fill=%22%23FFE9A3%22/%3E%3Cpath d=%22M 29.65 40.48 A 20 20 0 0 1 22.00 42.00 L 22.00 38.80 A 16.8 16.8 0 0 0 28.43 37.52 Z%22 fill=%22%23FFE9A3%22/%3E%3Cpath d=%22M 22.00 42.00 A 20 20 0 0 1 14.35 40.48 L 15.57 37.52 A 16.8 16.8 0 0 0 22.00 38.80 Z%22 fill=%22%23FFD75E%22/%3E%3Cpath d=%22M 14.35 40.48 A 20 20 0 0 1 7.86 36.14 L 10.12 33.88 A 16.8 16.8 0 0 0 15.57 37.52 Z%22 fill=%22%23FFBE0B%22/%3E%3Cpath d=%22M 7.86 36.14 A 20 20 0 0 1 3.52 29.65 L 6.48 28.43 A 16.8 16.8 0 0 0 10.12 33.88 Z%22 fill=%22%23FFBE0B%22/%3E%3Cpath d=%22M 3.52 29.65 A 20 20 0 0 1 2.00 22.00 L 5.20 22.00 A 16.8 16.8 0 0 0 6.48 28.43 Z%22 fill=%22%23C98F00%22/%3E%3Cpath d=%22M 2.00 22.00 A 20 20 0 0 1 3.52 14.35 L 6.48 15.57 A 16.8 16.8 0 0 0 5.20 22.00 Z%22 fill=%22%238A6A00%22/%3E%3Cpath d=%22M 3.52 14.35 A 20 20 0 0 1 7.86 7.86 L 10.12 10.12 A 16.8 16.8 0 0 0 6.48 15.57 Z%22 fill=%22%238A6A00%22/%3E%3Cpath d=%22M 7.86 7.86 A 20 20 0 0 1 14.35 3.52 L 15.57 6.48 A 16.8 16.8 0 0 0 10.12 10.12 Z%22 fill=%22%238A6A00%22/%3E%3Cpath d=%22M 14.35 3.52 A 20 20 0 0 1 22.00 2.00 L 22.00 5.20 A 16.8 16.8 0 0 0 15.57 6.48 Z%22 fill=%22%238A6A00%22/%3E%3Cpolygon points=%2222.00,13.80 24.42,9.84 28.43,6.48 24.42,9.84%22 fill=%22%2333B867%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2222.00,13.80 25.14,14.42 24.42,9.84%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2224.42,9.84 22.00,5.20 28.43,6.48%22 fill=%22%231E9B58%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2225.14,14.42 28.89,11.69 33.88,10.12 28.89,11.69%22 fill=%22%231E9B58%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2225.14,14.42 27.80,16.20 28.89,11.69%22 fill=%22%2333B867%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2228.89,11.69 28.43,6.48 33.88,10.12%22 fill=%22%231E9B58%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2227.80,16.20 32.31,15.11 37.52,15.57 32.31,15.11%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2227.80,16.20 29.58,18.86 32.31,15.11%22 fill=%22%231E9B58%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2232.31,15.11 33.88,10.12 37.52,15.57%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2229.58,18.86 34.16,19.58 38.80,22.00 34.16,19.58%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2229.58,18.86 30.20,22.00 34.16,19.58%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2234.16,19.58 37.52,15.57 38.80,22.00%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2230.20,22.00 34.16,24.42 37.52,28.43 34.16,24.42%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2230.20,22.00 29.58,25.14 34.16,24.42%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2234.16,24.42 38.80,22.00 37.52,28.43%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2229.58,25.14 32.31,28.89 33.88,33.88 32.31,28.89%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2229.58,25.14 27.80,27.80 32.31,28.89%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2232.31,28.89 37.52,28.43 33.88,33.88%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2227.80,27.80 28.89,32.31 28.43,37.52 28.89,32.31%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2227.80,27.80 25.14,29.58 28.89,32.31%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2228.89,32.31 33.88,33.88 28.43,37.52%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2225.14,29.58 24.42,34.16 22.00,38.80 24.42,34.16%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2225.14,29.58 22.00,30.20 24.42,34.16%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2224.42,34.16 28.43,37.52 22.00,38.80%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2222.00,30.20 19.58,34.16 15.57,37.52 19.58,34.16%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2222.00,30.20 18.86,29.58 19.58,34.16%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2219.58,34.16 22.00,38.80 15.57,37.52%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2218.86,29.58 15.11,32.31 10.12,33.88 15.11,32.31%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2218.86,29.58 16.20,27.80 15.11,32.31%22 fill=%22%231E9B58%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2215.11,32.31 15.57,37.52 10.12,33.88%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2216.20,27.80 11.69,28.89 6.48,28.43 11.69,28.89%22 fill=%22%231E9B58%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2216.20,27.80 14.42,25.14 11.69,28.89%22 fill=%22%2333B867%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2211.69,28.89 10.12,33.88 6.48,28.43%22 fill=%22%231E9B58%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2214.42,25.14 9.84,24.42 5.20,22.00 9.84,24.42%22 fill=%22%2333B867%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2214.42,25.14 13.80,22.00 9.84,24.42%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%229.84,24.42 6.48,28.43 5.20,22.00%22 fill=%22%231E9B58%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2213.80,22.00 9.84,19.58 6.48,15.57 9.84,19.58%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2213.80,22.00 14.42,18.86 9.84,19.58%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%229.84,19.58 5.20,22.00 6.48,15.57%22 fill=%22%2333B867%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2214.42,18.86 11.69,15.11 10.12,10.12 11.69,15.11%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2214.42,18.86 16.20,16.20 11.69,15.11%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2211.69,15.11 6.48,15.57 10.12,10.12%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2216.20,16.20 15.11,11.69 15.57,6.48 15.11,11.69%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2216.20,16.20 18.86,14.42 15.11,11.69%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2215.11,11.69 10.12,10.12 15.57,6.48%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2218.86,14.42 19.58,9.84 22.00,5.20 19.58,9.84%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2218.86,14.42 22.00,13.80 19.58,9.84%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2219.58,9.84 15.57,6.48 22.00,5.20%22 fill=%22%2333B867%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%228.20%22 fill=%22%2350C878%22/%3E%3Cpath d=%22M 22 22 L 27.8 16.2 A 8.2 8.2 0 0 1 16.2 27.8 Z%22 fill=%22%232E9E5B%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%228.20%22 fill=%22none%22 stroke=%22%23173B20%22 stroke-width=%22.45%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%2220%22 fill=%22none%22 stroke=%22%236B4E00%22 stroke-width=%22.7%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%2216.8%22 fill=%22none%22 stroke=%22%236B4E00%22 stroke-opacity=%22.75%22 stroke-width=%22.45%22/%3E%3Cpath d=%22M 14.8 16.2 L 18 14.6 L 17.2 18.2 Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M 18.2 11.6 L 20.1 12.1 L 18.8 14.2 L 17.1 14.4 Z%22 fill=%22%23fff%22 fill-opacity=%22.92%22/%3E%3C/svg%3E");;--rail-h:11px;--rail-edge:#3F2E00}
.player #next,.player #prev{border:2px solid var(--gold);box-shadow:2px 3px 5px -1px rgba(8,16,36,.35);color:#021F0F}
.player #next{background:var(--gem-em) center/100% 100% no-repeat}
.player #prev{background:var(--gem-em) center/100% 100% no-repeat;color:#1C0004}
.player #next:hover,.player #prev:hover{border-color:var(--gold);box-shadow:2px 3px 5px -1px rgba(8,16,36,.35);filter:brightness(1.1)}
.player #next:hover{background:var(--gem-em) center/100% 100% no-repeat;color:#021F0F}
.player #prev:hover{background:var(--gem-em) center/100% 100% no-repeat;color:#1C0004}
.parr::before{border:2px solid #FFBE0B;background:var(--gem-em) center/100% 100% no-repeat;box-shadow:2px 3px 5px -1px rgba(8,16,36,.45)}
.parr.pprev::before{background:var(--gem-em) center/100% 100% no-repeat}
.parr:hover::before{background:var(--gem-em) center/100% 100% no-repeat;filter:brightness(1.1)}
.parr.pprev:hover::before{background:var(--gem-em) center/100% 100% no-repeat}
.parr svg{stroke:#021F0F;stroke-width:2.6;width:22px;height:22px}
.parr.pprev svg{stroke:#021F0F}
.player #next:focus-visible,.player #prev:focus-visible,.parr:focus-visible{outline:3px solid #FFE9A3;outline-offset:3px;box-shadow:0 0 0 3px #3F2E00}
/* timeline: a worked gold rail. --f is the played fraction (0 to 1), set by site.js. Layers, top to bottom: engraved ticks, polish and shade, played gold, aged gold. */
.player .seek input[type=range]::-webkit-slider-runnable-track{height:var(--rail-h);box-sizing:border-box;border:1px solid var(--rail-edge);border-radius:6px;box-shadow:2px 3px 3px -1px rgba(8,16,36,.45);background-repeat:no-repeat;background-color:#7A5A00;
 background-image:repeating-linear-gradient(90deg,rgba(63,46,0,.55) 0 1px,transparent 1px 10px),linear-gradient(180deg,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,rgba(255,255,255,.16) 1px,rgba(255,255,255,0) 45%,rgba(40,26,0,0) 55%,rgba(40,26,0,.4) 100%),linear-gradient(180deg,#FFE9A3 0,#FFBE0B 38%,#E0A100 70%,#B98700 100%),linear-gradient(180deg,#B89A4A 0,#8A6A00 40%,#6B4F00 75%,#4F3A00 100%);
 background-size:100% 55%,100% 100%,calc(18px + (100% - 36px)*var(--f,0)) 100%,100% 100%;background-position:0 100%,0 0,0 0,0 0}
.player .seek input[type=range]::-moz-range-track{height:var(--rail-h);box-sizing:border-box;border:1px solid var(--rail-edge);border-radius:6px;box-shadow:2px 3px 3px -1px rgba(8,16,36,.45);background-repeat:no-repeat;background-color:#7A5A00;
 background-image:repeating-linear-gradient(90deg,rgba(63,46,0,.55) 0 1px,transparent 1px 10px),linear-gradient(180deg,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,rgba(255,255,255,.16) 1px,rgba(255,255,255,0) 45%,rgba(40,26,0,0) 55%,rgba(40,26,0,.4) 100%),linear-gradient(180deg,#FFE9A3 0,#FFBE0B 38%,#E0A100 70%,#B98700 100%),linear-gradient(180deg,#B89A4A 0,#8A6A00 40%,#6B4F00 75%,#4F3A00 100%);
 background-size:100% 55%,100% 100%,calc(18px + (100% - 36px)*var(--f,0)) 100%,100% 100%;background-position:0 100%,0 0,0 0,0 0}
.player .seek input[type=range]::-webkit-slider-thumb{margin-top:calc((var(--rail-h) - 36px)/2)}
@media(max-width:700px){:root{--rail-h:9px}}

/* BUILD 17 correction: round brilliant cuts, retaining the round control footprints. */
:root{--gem-emerald:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 44%22 shape-rendering=%22geometricPrecision%22%3E%3Cpath d=%22M 22.00 2.00 A 20 20 0 0 1 29.65 3.52 L 28.43 6.48 A 16.8 16.8 0 0 0 22.00 5.20 Z%22 fill=%22%23C98F00%22/%3E%3Cpath d=%22M 29.65 3.52 A 20 20 0 0 1 36.14 7.86 L 33.88 10.12 A 16.8 16.8 0 0 0 28.43 6.48 Z%22 fill=%22%23FFBE0B%22/%3E%3Cpath d=%22M 36.14 7.86 A 20 20 0 0 1 40.48 14.35 L 37.52 15.57 A 16.8 16.8 0 0 0 33.88 10.12 Z%22 fill=%22%23FFBE0B%22/%3E%3Cpath d=%22M 40.48 14.35 A 20 20 0 0 1 42.00 22.00 L 38.80 22.00 A 16.8 16.8 0 0 0 37.52 15.57 Z%22 fill=%22%23FFD75E%22/%3E%3Cpath d=%22M 42.00 22.00 A 20 20 0 0 1 40.48 29.65 L 37.52 28.43 A 16.8 16.8 0 0 0 38.80 22.00 Z%22 fill=%22%23FFE9A3%22/%3E%3Cpath d=%22M 40.48 29.65 A 20 20 0 0 1 36.14 36.14 L 33.88 33.88 A 16.8 16.8 0 0 0 37.52 28.43 Z%22 fill=%22%23FFE9A3%22/%3E%3Cpath d=%22M 36.14 36.14 A 20 20 0 0 1 29.65 40.48 L 28.43 37.52 A 16.8 16.8 0 0 0 33.88 33.88 Z%22 fill=%22%23FFE9A3%22/%3E%3Cpath d=%22M 29.65 40.48 A 20 20 0 0 1 22.00 42.00 L 22.00 38.80 A 16.8 16.8 0 0 0 28.43 37.52 Z%22 fill=%22%23FFE9A3%22/%3E%3Cpath d=%22M 22.00 42.00 A 20 20 0 0 1 14.35 40.48 L 15.57 37.52 A 16.8 16.8 0 0 0 22.00 38.80 Z%22 fill=%22%23FFD75E%22/%3E%3Cpath d=%22M 14.35 40.48 A 20 20 0 0 1 7.86 36.14 L 10.12 33.88 A 16.8 16.8 0 0 0 15.57 37.52 Z%22 fill=%22%23FFBE0B%22/%3E%3Cpath d=%22M 7.86 36.14 A 20 20 0 0 1 3.52 29.65 L 6.48 28.43 A 16.8 16.8 0 0 0 10.12 33.88 Z%22 fill=%22%23FFBE0B%22/%3E%3Cpath d=%22M 3.52 29.65 A 20 20 0 0 1 2.00 22.00 L 5.20 22.00 A 16.8 16.8 0 0 0 6.48 28.43 Z%22 fill=%22%23C98F00%22/%3E%3Cpath d=%22M 2.00 22.00 A 20 20 0 0 1 3.52 14.35 L 6.48 15.57 A 16.8 16.8 0 0 0 5.20 22.00 Z%22 fill=%22%238A6A00%22/%3E%3Cpath d=%22M 3.52 14.35 A 20 20 0 0 1 7.86 7.86 L 10.12 10.12 A 16.8 16.8 0 0 0 6.48 15.57 Z%22 fill=%22%238A6A00%22/%3E%3Cpath d=%22M 7.86 7.86 A 20 20 0 0 1 14.35 3.52 L 15.57 6.48 A 16.8 16.8 0 0 0 10.12 10.12 Z%22 fill=%22%238A6A00%22/%3E%3Cpath d=%22M 14.35 3.52 A 20 20 0 0 1 22.00 2.00 L 22.00 5.20 A 16.8 16.8 0 0 0 15.57 6.48 Z%22 fill=%22%238A6A00%22/%3E%3Cpolygon points=%2222.00,13.80 24.42,9.84 28.43,6.48 24.42,9.84%22 fill=%22%232E9E5B%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2222.00,13.80 25.14,14.42 24.42,9.84%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2224.42,9.84 22.00,5.20 28.43,6.48%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2225.14,14.42 28.89,11.69 33.88,10.12 28.89,11.69%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2225.14,14.42 27.80,16.20 28.89,11.69%22 fill=%22%232E9E5B%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2228.89,11.69 28.43,6.48 33.88,10.12%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2227.80,16.20 32.31,15.11 37.52,15.57 32.31,15.11%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2227.80,16.20 29.58,18.86 32.31,15.11%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2232.31,15.11 33.88,10.12 37.52,15.57%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2229.58,18.86 34.16,19.58 38.80,22.00 34.16,19.58%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2229.58,18.86 30.20,22.00 34.16,19.58%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2234.16,19.58 37.52,15.57 38.80,22.00%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2230.20,22.00 34.16,24.42 37.52,28.43 34.16,24.42%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2230.20,22.00 29.58,25.14 34.16,24.42%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2234.16,24.42 38.80,22.00 37.52,28.43%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2229.58,25.14 32.31,28.89 33.88,33.88 32.31,28.89%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2229.58,25.14 27.80,27.80 32.31,28.89%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2232.31,28.89 37.52,28.43 33.88,33.88%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2227.80,27.80 28.89,32.31 28.43,37.52 28.89,32.31%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2227.80,27.80 25.14,29.58 28.89,32.31%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2228.89,32.31 33.88,33.88 28.43,37.52%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2225.14,29.58 24.42,34.16 22.00,38.80 24.42,34.16%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2225.14,29.58 22.00,30.20 24.42,34.16%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2224.42,34.16 28.43,37.52 22.00,38.80%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2222.00,30.20 19.58,34.16 15.57,37.52 19.58,34.16%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2222.00,30.20 18.86,29.58 19.58,34.16%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2219.58,34.16 22.00,38.80 15.57,37.52%22 fill=%22%23064E2A%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2218.86,29.58 15.11,32.31 10.12,33.88 15.11,32.31%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2218.86,29.58 16.20,27.80 15.11,32.31%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2215.11,32.31 15.57,37.52 10.12,33.88%22 fill=%22%23046307%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2216.20,27.80 11.69,28.89 6.48,28.43 11.69,28.89%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2216.20,27.80 14.42,25.14 11.69,28.89%22 fill=%22%232E9E5B%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2211.69,28.89 10.12,33.88 6.48,28.43%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2214.42,25.14 9.84,24.42 5.20,22.00 9.84,24.42%22 fill=%22%232E9E5B%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2214.42,25.14 13.80,22.00 9.84,24.42%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%229.84,24.42 6.48,28.43 5.20,22.00%22 fill=%22%230E8650%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2213.80,22.00 9.84,19.58 6.48,15.57 9.84,19.58%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2213.80,22.00 14.42,18.86 9.84,19.58%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%229.84,19.58 5.20,22.00 6.48,15.57%22 fill=%22%232E9E5B%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2214.42,18.86 11.69,15.11 10.12,10.12 11.69,15.11%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2214.42,18.86 16.20,16.20 11.69,15.11%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2211.69,15.11 6.48,15.57 10.12,10.12%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2216.20,16.20 15.11,11.69 15.57,6.48 15.11,11.69%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2216.20,16.20 18.86,14.42 15.11,11.69%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2215.11,11.69 10.12,10.12 15.57,6.48%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2218.86,14.42 19.58,9.84 22.00,5.20 19.58,9.84%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.22%22 stroke-linejoin=%22round%22 fill-opacity=%220.92%22/%3E%3Cpolygon points=%2218.86,14.42 22.00,13.80 19.58,9.84%22 fill=%22%2350C878%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2219.58,9.84 15.57,6.48 22.00,5.20%22 fill=%22%232E9E5B%22 stroke=%22%23173B20%22 stroke-width=%220.18%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%228.20%22 fill=%22%2350C878%22/%3E%3Cpath d=%22M 22 22 L 27.8 16.2 A 8.2 8.2 0 0 1 16.2 27.8 Z%22 fill=%22%232E9E5B%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%228.20%22 fill=%22none%22 stroke=%22%23173B20%22 stroke-width=%22.45%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%2220%22 fill=%22none%22 stroke=%22%236B4E00%22 stroke-width=%22.7%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%2216.8%22 fill=%22none%22 stroke=%22%236B4E00%22 stroke-opacity=%22.75%22 stroke-width=%22.45%22/%3E%3Cpath d=%22M 14.8 16.2 L 18 14.6 L 17.2 18.2 Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M 18.2 11.6 L 20.1 12.1 L 18.8 14.2 L 17.1 14.4 Z%22 fill=%22%23fff%22 fill-opacity=%22.92%22/%3E%3C/svg%3E");--rail-h:11px}
.player #next,.player #prev{border:0;border-radius:50%;background-color:transparent;background-position:center;background-size:110% 110%;box-shadow:2px 3px 5px -1px rgba(8,16,36,.35);transition:filter .25s}
.player #next{background-image:var(--gem-emerald);color:#021F0F}
.player #prev{background-image:var(--gem-emerald);color:#fff}
.player #next:hover,.player #prev:hover{filter:brightness(1.1);background-color:transparent;border:0;box-shadow:2px 3px 5px -1px rgba(8,16,36,.35)}
.player .seek input[type=range]::-webkit-slider-runnable-track{height:11px;box-sizing:border-box;border:1px solid #3F2E00;border-radius:6px;box-shadow:2px 3px 3px -1px rgba(8,16,36,.45);background-repeat:no-repeat;background-color:#7A5A00;background-image:radial-gradient(circle,#FFE9A3 0 1px,#8A6A00 1.5px 3px,transparent 3.5px),radial-gradient(circle,#FFE9A3 0 1px,#8A6A00 1.5px 3px,transparent 3.5px),repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(63,46,0,.72) calc(10% - 1px) 10%),linear-gradient(180deg,rgba(255,255,255,.72) 0 1px,rgba(255,255,255,.14) 1px,transparent 45%,rgba(40,26,0,.38) 100%),linear-gradient(180deg,#FFE9A3 0%,#FFBE0B 28%,#C98F00 70%,#8A6A00 100%),linear-gradient(180deg,#9C7C2C 0%,#7A5A00 55%,#4F3A00 100%);background-size:11px 11px,11px 11px,100% 55%,100% 100%,calc(18px + (100% - 36px)*var(--f,0)) 100%,100% 100%;background-position:left center,right center,0 100%,0 0,0 0,0 0}
.player .seek input[type=range]::-moz-range-track{height:11px;box-sizing:border-box;border:1px solid #3F2E00;border-radius:6px;box-shadow:2px 3px 3px -1px rgba(8,16,36,.45);background-repeat:no-repeat;background-color:#7A5A00;background-image:radial-gradient(circle,#FFE9A3 0 1px,#8A6A00 1.5px 3px,transparent 3.5px),radial-gradient(circle,#FFE9A3 0 1px,#8A6A00 1.5px 3px,transparent 3.5px),repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(63,46,0,.72) calc(10% - 1px) 10%),linear-gradient(180deg,rgba(255,255,255,.72) 0 1px,rgba(255,255,255,.14) 1px,transparent 45%,rgba(40,26,0,.38) 100%),linear-gradient(180deg,#FFE9A3 0%,#FFBE0B 28%,#C98F00 70%,#8A6A00 100%),linear-gradient(180deg,#9C7C2C 0%,#7A5A00 55%,#4F3A00 100%);background-size:11px 11px,11px 11px,100% 55%,100% 100%,calc(18px + (100% - 36px)*var(--f,0)) 100%,100% 100%;background-position:left center,right center,0 100%,0 0,0 0,0 0}
.player .seek input[type=range]::-webkit-slider-thumb{margin-top:-12.5px}
.player .seek input[type=range]::-moz-range-thumb{width:36px;height:36px}
.parr::before{content:"";position:absolute;inset:7px;border:0;border-radius:50%;background:var(--gem-emerald) center/110% 110% no-repeat;z-index:-1;box-shadow:2px 3px 5px -1px rgba(8,16,36,.45);transition:filter .25s}
.parr.pnext::before{background-image:var(--gem-emerald)}
.parr:hover::before{filter:brightness(1.1)}
.parr svg{stroke:#021F0F;stroke-width:2.6;width:26px;height:26px}
.parr.pprev svg{stroke:#fff}

/* Build 17 final cascade correction: photo arrows use the same ROUND gems, not the older octagon defaults. */
.parr::before{inset:7px;border:0;border-radius:50%;background:var(--gem-emerald) center/110% 110% no-repeat;box-shadow:2px 3px 5px -1px rgba(8,16,36,.45);transition:filter .25s}
.parr.pnext::before{background-image:var(--gem-emerald)}
.parr.pprev::before{background-image:var(--gem-emerald)}
.parr:hover::before{filter:brightness(1.1)}
.parr.pnext:hover::before{background-image:var(--gem-emerald)}
.parr.pprev:hover::before{background-image:var(--gem-emerald)}
.parr svg{stroke:#021F0F;stroke-width:2.6;width:26px;height:26px}
.parr.pprev svg{stroke:#fff}
/* Previous transport control mirrors the emerald next control. */
.player .cb#prev{background-image:var(--gem-emerald);color:#fff}
.player .cb#prev:hover{background-image:var(--gem-emerald);color:#fff;border:0;background-color:transparent;filter:brightness(1.1);box-shadow:2px 3px 5px -1px rgba(8,16,36,.35)}
.player .cb#next{background-image:var(--gem-emerald);color:#021F0F}
.player .cb#next:hover{background-image:var(--gem-emerald);color:#021F0F;border:0;background-color:transparent;filter:brightness(1.1);box-shadow:2px 3px 5px -1px rgba(8,16,36,.35)}

/* ===== BUILD 18: ROUND brilliant emerald transport controls, same circle footprint and hard-edged facets ===== */
:root{--stone-emerald:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' shape-rendering='geometricPrecision'%3E%3Ccircle cx='22' cy='22' r='21.9' fill='%23C98F00'/%3E%3Cpath d='M13.62,1.77 A21.9 21.9 0 0 1 30.38,1.77 L28.89,5.37 A18 18 0 0 0 15.11,5.37 Z' fill='%23FFD75E'/%3E%3Cpath d='M30.38,1.77 A21.9 21.9 0 0 1 42.23,13.62 L38.63,15.11 A18 18 0 0 0 28.89,5.37 Z' fill='%23FFBE0B'/%3E%3Cpath d='M42.23,13.62 A21.9 21.9 0 0 1 42.23,30.38 L38.63,28.89 A18 18 0 0 0 38.63,15.11 Z' fill='%23C98F00'/%3E%3Cpath d='M42.23,30.38 A21.9 21.9 0 0 1 30.38,42.23 L28.89,38.63 A18 18 0 0 0 38.63,28.89 Z' fill='%238A6A00'/%3E%3Cpath d='M30.38,42.23 A21.9 21.9 0 0 1 13.62,42.23 L15.11,38.63 A18 18 0 0 0 28.89,38.63 Z' fill='%23C98F00'/%3E%3Cpath d='M13.62,42.23 A21.9 21.9 0 0 1 1.77,30.38 L5.37,28.89 A18 18 0 0 0 15.11,38.63 Z' fill='%23FFBE0B'/%3E%3Cpath d='M1.77,30.38 A21.9 21.9 0 0 1 1.77,13.62 L5.37,15.11 A18 18 0 0 0 5.37,28.89 Z' fill='%23FFD75E'/%3E%3Cpath d='M1.77,13.62 A21.9 21.9 0 0 1 13.62,1.77 L15.11,5.37 A18 18 0 0 0 5.37,15.11 Z' fill='%23FFE9A3'/%3E%3Ccircle cx='22' cy='22' r='18' fill='%23047A3D'/%3E%3Cpath d='M22.00,4.00 A18 18 0 0 1 34.73,9.27 L27.89,7.77 Z' fill='%2300A152'/%3E%3Cpolygon points='22.00,10.40 30.20,13.80 27.89,7.77' fill='%2300C46A'/%3E%3Cpolygon points='22.00,10.40 27.89,7.77 22.00,4.00 16.11,7.77' fill='%2300A152'/%3E%3Cpath d='M34.73,9.27 A18 18 0 0 1 40.00,22.00 L36.23,16.11 Z' fill='%23047A3D'/%3E%3Cpolygon points='30.20,13.80 33.60,22.00 36.23,16.11' fill='%2300A152'/%3E%3Cpolygon points='30.20,13.80 36.23,16.11 34.73,9.27 27.89,7.77' fill='%23047A3D'/%3E%3Cpath d='M40.00,22.00 A18 18 0 0 1 34.73,34.73 L36.23,27.89 Z' fill='%2303592C'/%3E%3Cpolygon points='33.60,22.00 30.20,30.20 36.23,27.89' fill='%23047A3D'/%3E%3Cpolygon points='33.60,22.00 36.23,27.89 40.00,22.00 36.23,16.11' fill='%2303592C'/%3E%3Cpath d='M34.73,34.73 A18 18 0 0 1 22.00,40.00 L27.89,36.23 Z' fill='%2303592C'/%3E%3Cpolygon points='30.20,30.20 22.00,33.60 27.89,36.23' fill='%23047A3D'/%3E%3Cpolygon points='30.20,30.20 27.89,36.23 34.73,34.73 36.23,27.89' fill='%2303592C'/%3E%3Cpath d='M22.00,40.00 A18 18 0 0 1 9.27,34.73 L16.11,36.23 Z' fill='%23047A3D'/%3E%3Cpolygon points='22.00,33.60 13.80,30.20 16.11,36.23' fill='%2300A152'/%3E%3Cpolygon points='22.00,33.60 16.11,36.23 22.00,40.00 27.89,36.23' fill='%2303592C'/%3E%3Cpath d='M9.27,34.73 A18 18 0 0 1 4.00,22.00 L7.77,27.89 Z' fill='%2300A152'/%3E%3Cpolygon points='13.80,30.20 10.40,22.00 7.77,27.89' fill='%2300C46A'/%3E%3Cpolygon points='13.80,30.20 7.77,27.89 9.27,34.73 16.11,36.23' fill='%23047A3D'/%3E%3Cpath d='M4.00,22.00 A18 18 0 0 1 9.27,9.27 L7.77,16.11 Z' fill='%2300C46A'/%3E%3Cpolygon points='10.40,22.00 13.80,13.80 7.77,16.11' fill='%233DDC93'/%3E%3Cpolygon points='10.40,22.00 7.77,16.11 4.00,22.00 7.77,27.89' fill='%2300A152'/%3E%3Cpath d='M9.27,9.27 A18 18 0 0 1 22.00,4.00 L16.11,7.77 Z' fill='%2300C46A'/%3E%3Cpolygon points='13.80,13.80 22.00,10.40 16.11,7.77' fill='%233DDC93'/%3E%3Cpolygon points='13.80,13.80 16.11,7.77 9.27,9.27 7.77,16.11' fill='%2300C46A'/%3E%3Ccircle cx='22' cy='22' r='11.6' fill='%233DDC93'/%3E%3Ccircle cx='22' cy='22' r='18' fill='none' stroke='%232A1A00' stroke-opacity='.55' stroke-width='.45'/%3E%3Ccircle cx='22' cy='22' r='11.6' fill='none' stroke='%2303592C' stroke-width='.4' stroke-opacity='.7'/%3E%3Cpolygon points='12.395680984919732,7.3070322437351365 12.923680984919732,9.179032243735136 14.795680984919732,9.707032243735137 12.923680984919732,10.235032243735137 12.395680984919732,12.107032243735137 11.867680984919732,10.235032243735137 9.995680984919732,9.707032243735137 11.867680984919732,9.179032243735136' fill='%23fff'/%3E%3Cpolygon points='16.544039956158038,17.349999999999998 16.874039956158036,18.52 18.044039956158038,18.849999999999998 16.874039956158036,19.179999999999996 16.544039956158038,20.349999999999998 16.21403995615804,19.179999999999996 15.044039956158038,18.849999999999998 16.21403995615804,18.52' fill='%23fff'/%3E%3C/svg%3E");}
.player .cb#next,.player .cb#prev{border:0;border-radius:50%;background-color:transparent;background-position:center;background-size:100% 100%;background-repeat:no-repeat;box-shadow:2px 3px 5px -1px rgba(8,16,36,.35);transition:filter .25s}
.player .cb#next{background-image:var(--stone-emerald);color:#021F0F}
.player .cb#prev{background-image:var(--stone-emerald);color:#021F0F}
.player .cb#next:hover,.player .cb#prev:hover{background-color:transparent;border:0;filter:brightness(1.1);box-shadow:2px 3px 5px -1px rgba(8,16,36,.35)}
.player .cb#next:hover{background-image:var(--stone-emerald);color:#021F0F}
.player .cb#prev:hover{background-image:var(--stone-emerald);color:#021F0F}
.parr::before{inset:0;border:0;border-radius:50%;background-size:100% 100%;background-position:center;background-repeat:no-repeat;box-shadow:2px 3px 5px -1px rgba(8,16,36,.45)}
.parr.pnext::before,.parr.pnext:hover::before{background-image:var(--stone-emerald)}
.parr.pprev::before,.parr.pprev:hover::before{background-image:var(--stone-emerald)}
.parr:hover::before{filter:brightness(1.1)}
.parr svg{stroke:#021F0F;stroke-width:2.6;width:26px;height:26px}
.parr.pprev svg{stroke:#021F0F}

/* ===== BUILD 19 (DOJO, Oct 24 2:03pm): NO SCRIPT FACE ANYWHERE ===== */
/* Great Vibes and Lobster are gone from every rule and every page's font link. One clean face for every
   heading, title, card line and label: Michroma, the name's own family, bold-look via the same-colour
   stroke trick, wide even tracking. Long sentence-case body text stays Open Sans / Fraunces, never script.
   Capitals stay exactly as he typed them. Colour roles unchanged: yellow at rest, pink on touch. */
:root{--hd-track:.07em;--hd-stroke:.032em}
h1,h2,h3{font-family:var(--nm-font);font-weight:400;font-style:normal;font-synthesis:none;-webkit-text-stroke:var(--hd-stroke) currentColor;paint-order:stroke fill;letter-spacing:var(--hd-track);line-height:1.5}
.lis-text{font-family:var(--sans);font-weight:600;-webkit-text-stroke:0;letter-spacing:0;font-style:italic}
.introtxt p{-webkit-text-stroke:0}
.introtxt .wel{font:400 clamp(1rem,2.2vw,1.3rem)/1.7 var(--nm-font);font-style:normal;letter-spacing:var(--hd-track);-webkit-text-stroke:var(--hd-stroke) currentColor;paint-order:stroke fill}
/* the BLOG title is the ONE place DOJO said the print is fine: it keeps its own Great Vibes face, exactly as it was */
.bloghero h1{font-family:"Great Vibes","Snell Roundhand",cursive;font-weight:400;font-style:normal;font-synthesis:none;-webkit-text-stroke:0;paint-order:normal;letter-spacing:0;line-height:1.1}
.post h1{font-size:clamp(1.15rem,4vw,1.9rem);letter-spacing:.06em}
.pt{font-size:clamp(.95rem,2.4vw,1.4rem);line-height:1.5;letter-spacing:.07em}
.pcard:hover .pt,.pcard:active .pt,.pcard:focus-visible .pt{color:var(--c-pink)}
.body h2{font-size:clamp(1rem,2.8vw,1.35rem);line-height:1.5;letter-spacing:.08em}
.pull{font-size:clamp(1rem,2.6vw,1.3rem);line-height:1.6;letter-spacing:.06em}
.player h2{font-size:clamp(1.1rem,3.2vw,1.6rem);letter-spacing:.14em;text-align:center}
.noimg{font-size:clamp(.85rem,2.6vw,1.15rem);line-height:1.6}.noimg .nm-t{font-size:1em}
.copy-line.cr{font-size:var(--cr-size)}
.copy-line.cr{color:#F6F1E2}
@media(max-width:700px){.tag{font-size:.95rem}}

/* ===== BUILD 19: the EMAIL button (DOJO, Oct 24 1:52pm) ===== */
/* No address shown anywhere. One gold metal faceted button, same family as the player stones:
   hard-edged light and dark planes, one sun top-left, thin bright edge, no blur, no glow, no zoom.
   Dark text on the gold (measured 10.7:1 on the flat centre plane). Hover brightens 10 percent only. */
.mailcta{text-align:center;margin:10px 0 4px}
.foot p{color:#F6F1E2}

/* ===== BUILD 20 (DOJO, Oct 24): player heading and bold-gold print ===== */
.jukebox-title{display:flex;flex-direction:column;align-items:center;gap:.12em;text-align:center;line-height:1.35!important;font-family:var(--nm-font)!important;font-size:clamp(.95rem,3vw,1.35rem)!important;font-weight:400!important;letter-spacing:0!important;-webkit-text-stroke:0!important;color:var(--c-yellow)!important;text-shadow:var(--shadow-large)!important}
.jukebox-title span{display:block;font-family:var(--nm-font);font-weight:400;letter-spacing:.025em;-webkit-text-stroke:.045em currentColor;paint-order:stroke fill;white-space:nowrap}
.player .artist .nm-t{font-size:1.5rem;color:var(--c-yellow);-webkit-text-stroke:.06em currentColor;text-shadow:var(--shadow-large);letter-spacing:.24em;margin-right:-.24em}
@media(max-width:700px){.player .artist .nm-t{font-size:1.275rem;letter-spacing:.21em;margin-right:-.21em}}
.player .nt,.player .tr,.player .tr .no,.player .tr .ti,.player .tr .du,.player .dl,.player .tm,.player .alt-listen,.player .alt-listen a{font-weight:700!important;color:var(--c-yellow)!important;text-shadow:var(--shadow-large)!important}
.player .tr[aria-current="true"],.player .tr[aria-current="true"] .no,.player .tr[aria-current="true"] .ti,.player .tr[aria-current="true"] .du{color:var(--c-yellow)!important}

/* ===== BUILD 21 (DOJO, Oct 24): entryway typography hierarchy ===== */
.tag{font-family:var(--sans);font-size:clamp(1.75rem,5vw,4.2rem);font-weight:700;font-style:normal;line-height:1.2;letter-spacing:.13em;text-transform:uppercase;text-wrap:balance;color:var(--c-yellow);-webkit-text-stroke:.035em currentColor;paint-order:stroke fill;text-shadow:var(--shadow-large);max-width:min(1100px,100% - 24px)}
.introtxt .wel{font:700 clamp(1.25rem,1.85vw,1.65rem)/1.5 var(--sans);font-style:normal;letter-spacing:0;text-align:center;color:#fff;-webkit-text-stroke:0}
.wel-copy{display:block;font:inherit;letter-spacing:0;-webkit-text-stroke:0}
.entry-name{display:inline-block;position:relative;font-family:var(--nm-font);font-weight:400;font-style:normal;font-size:clamp(3.75rem,7vw,6.5rem);line-height:1.08;letter-spacing:var(--nm-track);margin-right:calc(-1*var(--nm-track));white-space:nowrap;text-transform:uppercase;color:transparent;background:linear-gradient(180deg,#8A6A00 0%,#C99700 14%,#FFBE0B 30%,#FFF3B8 47%,#FFE066 52%,#FFBE0B 62%,#B88400 80%,#8A6A00 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.045em #FFBE0B;paint-order:stroke fill;filter:drop-shadow(-1px -1px 0 rgba(255,246,205,.95)) drop-shadow(1.6px 1.6px 0 rgba(84,56,0,.85)) drop-shadow(2px 8px 9px rgba(8,16,36,.5))}
.introtxt p{max-width:960px}
@media(max-width:700px){.tag{font-size:clamp(1.75rem,6vw,2.4rem);line-height:1.25}.introtxt .wel{font-size:20px}.entry-name{font-size:60px}}
@media(max-width:700px){.wel{overflow-x:clip;max-width:100%}}
/* Keep the monolith name centred after its optical width correction. */

.entry-name{align-self:center}
/* Keep the long Michroma wordmark text centred within its responsive line before its optical width correction. */
.entry-name{display:block;width:100%;text-align:center;margin-right:0}
/* DOJO, Oct 24 2:26pm: spread the JYPSYEYE JUKEBOX wordmark across the player head. */
.jukebox-title{flex-direction:row;justify-content:space-between;gap:3em;width:100%;font-size:clamp(1.9rem,5vw,3.4rem)!important;line-height:1.15!important}
.jukebox-title span{-webkit-text-stroke:.045em currentColor;letter-spacing:0;white-space:nowrap}
.player .artist .nm-t{font-size:2.25rem;letter-spacing:.18em;margin-right:-.18em;-webkit-text-stroke:.06em currentColor}
@media(max-width:700px){.jukebox-title{flex-direction:column;justify-content:center;gap:.12em;font-size:clamp(1.9rem,5vw,2.1rem)!important}.player .artist .nm-t{font-size:1.75rem;letter-spacing:.12em;margin-right:-.12em}}
/* Phone-sized artist wordmark stays on one line beside the cover; desktop uses the requested 36px. */
.player .artist .nm-t{font-size:2.25rem;letter-spacing:.3525em;margin-right:-.3525em;-webkit-text-stroke:.06em currentColor}
@media(max-width:700px){.player .artist .nm-t{font-size:1.95rem;letter-spacing:.12em;margin-right:-.12em}}

/* BUILD 23: previous controls reuse the identical emerald stone, with only their chevron direction mirrored. */
.player .cb#prev,.player .cb#prev:hover{background-image:var(--stone-emerald)!important;color:#021F0F!important}
.player .cb#prev svg{fill:#021F0F}
.parr.pprev::before,.parr.pprev:hover::before{background-image:var(--stone-emerald)!important}
.parr.pprev svg{stroke:#021F0F!important}

/* ===== PIECE 1 (DOJO, Oct 24 3pm): sapphire play stone and progress stone restored (build 24 lost them); player body print regular weight, 2px larger. Colours and every text-shadow untouched. ===== */
:root{--gem:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 44%22 shape-rendering=%22geometricPrecision%22%3E%3Cpolygon points=%2240.02,29.46 29.46,40.02 28.05,36.60 36.60,28.05%22 fill=%22%238A6A00%22/%3E%3Cpolygon points=%2229.46,40.02 14.54,40.02 15.95,36.60 28.05,36.60%22 fill=%22%238A6A00%22/%3E%3Cpolygon points=%2214.54,40.02 3.98,29.46 7.40,28.05 15.95,36.60%22 fill=%22%23FFBE0B%22/%3E%3Cpolygon points=%223.98,29.46 3.98,14.54 7.40,15.95 7.40,28.05%22 fill=%22%23FFE9A3%22/%3E%3Cpolygon points=%223.98,14.54 14.54,3.98 15.95,7.40 7.40,15.95%22 fill=%22%23FFE9A3%22/%3E%3Cpolygon points=%2214.54,3.98 29.46,3.98 28.05,7.40 15.95,7.40%22 fill=%22%23FFE9A3%22/%3E%3Cpolygon points=%2229.46,3.98 40.02,14.54 36.60,15.95 28.05,7.40%22 fill=%22%23FFBE0B%22/%3E%3Cpolygon points=%2240.02,14.54 40.02,29.46 36.60,28.05 36.60,15.95%22 fill=%22%238A6A00%22/%3E%3Cpolygon points=%2236.60,28.05 30.63,30.63 28.05,36.60%22 fill=%22%231B3FA0%22/%3E%3Cpolygon points=%2225.29,29.95 30.63,30.63 28.05,36.60 22.00,34.20%22 fill=%22%231B3FA0%22/%3E%3Cpolygon points=%2229.95,25.29 25.29,29.95 30.63,30.63%22 fill=%22%231B3FA0%22/%3E%3Cpolygon points=%2228.05,36.60 22.00,34.20 15.95,36.60%22 fill=%22%231B3FA0%22/%3E%3Cpolygon points=%2218.71,29.95 22.00,34.20 15.95,36.60 13.37,30.63%22 fill=%22%230F52BA%22/%3E%3Cpolygon points=%2225.29,29.95 18.71,29.95 22.00,34.20%22 fill=%22%230F52BA%22/%3E%3Cpolygon points=%2215.95,36.60 13.37,30.63 7.40,28.05%22 fill=%22%232F73E0%22/%3E%3Cpolygon points=%2214.05,25.29 13.37,30.63 7.40,28.05 9.80,22.00%22 fill=%22%233A86FF%22/%3E%3Cpolygon points=%2218.71,29.95 14.05,25.29 13.37,30.63%22 fill=%22%232F73E0%22/%3E%3Cpolygon points=%227.40,28.05 9.80,22.00 7.40,15.95%22 fill=%22%237FB0FF%22/%3E%3Cpolygon points=%2214.05,18.71 9.80,22.00 7.40,15.95 13.37,13.37%22 fill=%22%237FB0FF%22/%3E%3Cpolygon points=%2214.05,25.29 14.05,18.71 9.80,22.00%22 fill=%22%237FB0FF%22/%3E%3Cpolygon points=%227.40,15.95 13.37,13.37 15.95,7.40%22 fill=%22%237FB0FF%22/%3E%3Cpolygon points=%2218.71,14.05 13.37,13.37 15.95,7.40 22.00,9.80%22 fill=%22%237FB0FF%22/%3E%3Cpolygon points=%2214.05,18.71 18.71,14.05 13.37,13.37%22 fill=%22%237FB0FF%22/%3E%3Cpolygon points=%2215.95,7.40 22.00,9.80 28.05,7.40%22 fill=%22%237FB0FF%22/%3E%3Cpolygon points=%2225.29,14.05 22.00,9.80 28.05,7.40 30.63,13.37%22 fill=%22%233A86FF%22/%3E%3Cpolygon points=%2218.71,14.05 25.29,14.05 22.00,9.80%22 fill=%22%237FB0FF%22/%3E%3Cpolygon points=%2228.05,7.40 30.63,13.37 36.60,15.95%22 fill=%22%232F73E0%22/%3E%3Cpolygon points=%2229.95,18.71 30.63,13.37 36.60,15.95 34.20,22.00%22 fill=%22%230F52BA%22/%3E%3Cpolygon points=%2225.29,14.05 29.95,18.71 30.63,13.37%22 fill=%22%232F73E0%22/%3E%3Cpolygon points=%2236.60,15.95 34.20,22.00 36.60,28.05%22 fill=%22%231B3FA0%22/%3E%3Cpolygon points=%2229.95,25.29 34.20,22.00 36.60,28.05 30.63,30.63%22 fill=%22%231B3FA0%22/%3E%3Cpolygon points=%2229.95,18.71 29.95,25.29 34.20,22.00%22 fill=%22%230F52BA%22/%3E%3Cpolygon points=%2229.95,25.29 25.29,29.95 18.71,29.95 14.05,25.29 14.05,18.71 18.71,14.05 25.29,14.05 29.95,18.71%22 fill=%22%235E9BFF%22/%3E%3Cpolygon points=%2229.95,25.29 25.29,29.95 18.71,29.95 14.05,25.29 14.05,18.71%22 fill=%22%233A86FF%22/%3E%3Cpath d=%22M29.95 25.29L30.63 30.63M25.29 29.95L30.63 30.63M36.60 28.05L30.63 30.63M28.05 36.60L30.63 30.63M25.29 29.95L22.00 34.20M25.29 29.95L28.05 36.60M25.29 29.95L22.00 34.20M18.71 29.95L22.00 34.20M28.05 36.60L22.00 34.20M15.95 36.60L22.00 34.20M18.71 29.95L13.37 30.63M18.71 29.95L15.95 36.60M18.71 29.95L13.37 30.63M14.05 25.29L13.37 30.63M15.95 36.60L13.37 30.63M7.40 28.05L13.37 30.63M14.05 25.29L9.80 22.00M14.05 25.29L7.40 28.05M14.05 25.29L9.80 22.00M14.05 18.71L9.80 22.00M7.40 28.05L9.80 22.00M7.40 15.95L9.80 22.00M14.05 18.71L13.37 13.37M14.05 18.71L7.40 15.95M14.05 18.71L13.37 13.37M18.71 14.05L13.37 13.37M7.40 15.95L13.37 13.37M15.95 7.40L13.37 13.37M18.71 14.05L22.00 9.80M18.71 14.05L15.95 7.40M18.71 14.05L22.00 9.80M25.29 14.05L22.00 9.80M15.95 7.40L22.00 9.80M28.05 7.40L22.00 9.80M25.29 14.05L30.63 13.37M25.29 14.05L28.05 7.40M25.29 14.05L30.63 13.37M29.95 18.71L30.63 13.37M28.05 7.40L30.63 13.37M36.60 15.95L30.63 13.37M29.95 18.71L34.20 22.00M29.95 18.71L36.60 15.95M29.95 18.71L34.20 22.00M29.95 25.29L34.20 22.00M36.60 15.95L34.20 22.00M36.60 28.05L34.20 22.00M29.95 25.29L30.63 30.63M29.95 25.29L36.60 28.05M29.95 25.29L25.29 29.95L18.71 29.95L14.05 25.29L14.05 18.71L18.71 14.05L25.29 14.05L29.95 18.71ZM36.60 28.05L28.05 36.60L15.95 36.60L7.40 28.05L7.40 15.95L15.95 7.40L28.05 7.40L36.60 15.95Z%22 fill=%22none%22 stroke=%22%230B2E7A%22 stroke-opacity=%22.55%22 stroke-width=%22.5%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2240.02,29.46 29.46,40.02 14.54,40.02 3.98,29.46 3.98,14.54 14.54,3.98 29.46,3.98 40.02,14.54%22 fill=%22none%22 stroke=%22%236B4E00%22 stroke-width=%22.7%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2236.60,28.05 28.05,36.60 15.95,36.60 7.40,28.05 7.40,15.95 15.95,7.40 28.05,7.40 36.60,15.95%22 fill=%22none%22 stroke=%22%236B4E00%22 stroke-opacity=%22.7%22 stroke-width=%22.45%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2217.30,18.95 20.21,19.35 21.15,21.15 18.66,20.65%22 fill=%22%23fff%22/%3E%3Cpolygon points=%2214.00,12.79 16.49,13.18 15.61,15.38 13.42,15.77%22 fill=%22%23fff%22 fill-opacity=%22.92%22/%3E%3C/svg%3E');--gem-sapphire:#3A86FF;--gold-deep:#8A6A00;--gold-thread:#7A5C00}
.player .cb.play,.player .cb.play[aria-label="Pause"]{background:var(--gem) center/100% 100% no-repeat;border:0;box-shadow:none;color:#06174A}
.player .cb.play:hover,.player .cb.play[aria-label="Pause"]:hover{background:var(--gem) center/100% 100% no-repeat;color:#06174A;filter:brightness(1.1)}
.player .seek input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:36px;height:36px;margin-top:-12.5px;border:0;border-radius:0;background:var(--gem) center/100% 100% no-repeat;box-shadow:none}
.player .seek input[type=range]::-moz-range-thumb{width:36px;height:36px;border:0;border-radius:0;background:var(--gem) center/100% 100% no-repeat;box-shadow:none}
.player .nt{font-size:19px}
.player .tr{font-size:17.2px}
.player .dl{font-size:15.6px}
.player .tm{font-size:16.4px}
.player .alt-listen,.player .alt-listen a{font-size:17.2px}
.player .nt,.player .tr,.player .tr .no,.player .tr .ti,.player .tr .du,.player .dl,.player .tm,.player .alt-listen,.player .alt-listen a{font-weight:400!important}
/* player panel green faded to half strength (DOJO, Oct 24 3:15pm): alpha .3225 -> .16125, same green 44,112,82; nothing else on the panel changes */
:root{--pl-alpha:.16125}
/* ===== J Y P S Y E Y E / J U K E B O X heading: cut gold metal, one sun top-left (DOJO, Oct 24 3:16pm) ===== */
.jukebox-title span{color:transparent!important;background:linear-gradient(180deg,rgba(255,255,255,.26) 0 46%,rgba(60,38,0,.18) 46% 100%),linear-gradient(135deg,#FFF6CD 0 7%,#FFE066 7% 18%,#FFBE0B 18% 31%,#FFF3B8 31% 37%,#D9A000 37% 52%,#FFBE0B 52% 63%,#B88400 63% 78%,#8A6A00 78% 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.03em #E8AE00;paint-order:stroke fill;text-shadow:none!important;filter:drop-shadow(-1px -1px 0 rgba(255,246,205,.95)) drop-shadow(1.5px 1.5px 0 rgba(84,56,0,.85)) drop-shadow(1px 3px 7px rgba(8,16,36,.6))}
.jukebox-title{text-shadow:none!important;box-sizing:border-box;max-width:100%}
@media(max-width:700px){.jukebox-title{font-size:clamp(1.1rem,6.4vw,2.1rem)!important;gap:.2em}}
@media(min-width:701px){.jukebox-title{font-size:clamp(1.9rem,3.4vw,3.4rem)!important;gap:2em;justify-content:space-between}}
.player .seek input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;accent-color:auto;height:44px;min-height:44px}
/* heading fit: side by side only where both words plus a 2em gap clear the player padding (30px at 901px and up); stacked and centred below */
@media(min-width:901px){.jukebox-title{flex-direction:row;justify-content:space-between;gap:2em;font-size:clamp(1.9rem,3.1vw,3.4rem)!important}}
@media(min-width:701px) and (max-width:900px){.jukebox-title{flex-direction:column;justify-content:center;gap:.2em;font-size:clamp(1.9rem,5.2vw,2.6rem)!important}}
/* cover art: faceted gold metal frame, one sun top-left. Lit top and left, shaded bottom and right, hard-edged mitres, no blur */
.player .cover{border:0!important;box-sizing:content-box;padding:7px;border-radius:0;background:
conic-gradient(from -45deg at 50% 50%,#FFE9A3 0 25%,#FFBE0B 0 50%,#8A6A00 0 75%,#FFD75E 0 100%) center/calc(100% - 7px) calc(100% - 7px) no-repeat,
conic-gradient(from -45deg at 50% 50%,#FFF6CD 0 25%,#C98F00 0 50%,#6B4E00 0 75%,#FFE066 0 100%) center/100% 100% no-repeat}
/* streaming line: deep emerald of the stone family, measured on the faded panel (DOJO, Oct 24 3:24pm). Weight, size and text-shadow stay as they are. */
.player .alt-listen,.player .alt-listen a{color:#013A1B!important}
.player .alt-listen a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.player .alt-listen a:hover,.player .alt-listen a:focus-visible{text-decoration-thickness:2px}
/* streaming line centred on the player's axis, wraps to centred lines (DOJO, Oct 24 3:31pm) */
.player .alt-listen{text-align:center;margin-left:auto;margin-right:auto}
/* heading spacing (DOJO, Oct 24 3:33pm): one centred line, one letter space inside each word, ONE word gap of 3 letter spaces (3 x 0.2838em) between the words, no space-between */
@media(min-width:901px){.jukebox-title{justify-content:center;gap:.8514em;font-size:clamp(1.9rem,calc((100vw - 120px)/20),3.3rem)!important}}
/* streaming line, bright emerald of the stones (DOJO, Oct 24 3:41pm): #00C46A, legibility carried by the player's own sun shadow, same value layered twice, same direction and colour, no box */
.player .alt-listen,.player .alt-listen a{color:#00C46A!important;text-shadow:1px 3px 7px rgba(8,16,36,.6),1px 3px 7px rgba(8,16,36,.6)!important}

/* ===== Version Five: five solid photos across, all whole-tile gaps shared ===== */
:root{--album-gap:56px;--album-phone-gap:40px}
.jukebox{padding-bottom:0}
.photos{padding:0}
.prow{width:min(1098px,calc(100% - 32px));margin:var(--album-gap) auto}
.ptrack{box-sizing:border-box;width:100%;margin:0;gap:var(--album-gap);scroll-snap-type:x mandatory;scroll-padding:0}
.ph{box-sizing:border-box;flex:0 0 calc((100% - 4*var(--album-gap))/5);width:calc((100% - 4*var(--album-gap))/5);height:auto;aspect-ratio:225/296;scroll-snap-align:start}
@media(max-width:700px){
 :root{--album-gap:40px}
 .prow{width:min(1098px,calc(100% - 32px));margin:var(--album-gap) auto}
 .ptrack{width:calc(100% - 112px);margin:0 auto;gap:var(--album-gap);scroll-padding:0}
 .ph{flex-basis:calc((100% - var(--album-gap))/2);width:calc((100% - var(--album-gap))/2)}
 .parr{width:48px;height:48px;margin-top:-24px;background:rgba(0,0,0,.45)}
 .pprev{left:4px}.pnext{right:4px}
}


/* ===== Intro spacing: one scale from poster through the scene ===== */
:root{--intro-top:43px;--intro-poster-tag:90px;--intro-tag-welcome:110px;--intro-welcome-name:32px;--intro-name-first-copy:100px;--intro-copy-gap:56px;--intro-copy-icons:100px;--intro-icons-scene:120px;--intro-sandwich-welcome:120px;--portal-size:680px;--portal-art-radius:162px;--portal-r2:198px;--portal-r3:234px;--portal-r4:270px;--portal-r5:306px;--portal-r6:330px;--portal-r7:338px;--icons-lower-height:108px}
.intro{padding:var(--intro-top) 0 var(--intro-icons-scene)}
.hero-poster{margin:0 auto}
.tag{margin:var(--intro-poster-tag) auto var(--intro-tag-welcome)}
.introtxt{width:min(820px,calc(100% - 32px));margin:var(--intro-sandwich-welcome) auto 0}
.introtxt .wel{display:flex;flex-direction:column;align-items:center;gap:var(--intro-welcome-name);margin:0 auto var(--intro-name-first-copy);font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.4}
.entry-name{font-size:clamp(3.75rem,7vw,6.5rem);letter-spacing:.18em;margin:0;transform:none}
.introtxt p{font-size:24px;line-height:1.75;max-width:100%;margin:0!important}
.introtxt p+p{margin-top:var(--intro-copy-gap)!important}
.icons{width:100%;margin:0 auto;padding:0;justify-content:center}
@media(max-width:700px){
 :root{--intro-top:20px;--intro-poster-tag:40px;--intro-tag-welcome:48px;--intro-welcome-name:24px;--intro-name-first-copy:52px;--intro-copy-gap:32px;--intro-copy-icons:50px;--intro-icons-scene:64px;--intro-sandwich-welcome:64px;--portal-size:min(400px,100vw);--portal-art-radius:125.5px;--portal-r2:143px;--portal-r3:157px;--portal-r4:170px;--portal-r5:180px;--portal-r6:188px;--portal-r7:193px;--icons-lower-height:70px}
 .tag{font-size:clamp(1.75rem,6vw,2.4rem);line-height:1.25}
 .introtxt{width:min(820px,calc(100% - 32px))}
 .introtxt .wel{font-size:20px;line-height:1.4}
 .entry-name{font-size:60px;letter-spacing:.12em}
 .introtxt p{font-size:20px;line-height:1.75}
 .icons img{max-width:84px}
}

/* ===== Version Five: player typography colours, one authoritative block ===== */
:root{
 --player-opal:#FFF8FC;
 --player-opal-base:#FFF8FC;
 --player-turquoise:#A6FFF4;
 --player-amethyst:rgba(143,91,204,.26);
 --player-amethyst-edge:rgba(211,185,255,.48);
 --player-extra-sun:0 0 1px rgba(8,16,36,.96),var(--shadow-large);
}
.player .artist .nm-t,
.player .nt,
.player .tr .ti,
.player .tr[aria-current="true"] .ti{
 color:var(--player-opal-base)!important;
 background-image:none!important;
 background-clip:border-box!important;
 -webkit-background-clip:border-box!important;
 -webkit-text-fill-color:var(--player-opal-base)!important;
 text-shadow:var(--player-extra-sun)!important;
}
.player .artist .nm-t{-webkit-text-stroke:.02em rgba(210,255,248,.82)!important}
.player .nt,.player .tr .ti{-webkit-text-stroke:0!important}
.player .tr .no,
.player .tr .du,
.player .tm,
.player .tr[aria-current="true"] .no,
.player .tr[aria-current="true"] .du{
 color:var(--player-turquoise)!important;
 -webkit-text-fill-color:var(--player-turquoise)!important;
 text-shadow:var(--player-extra-sun)!important;
}
.player .tr[aria-current="true"]{
 color:var(--player-opal-base)!important;
 background:var(--player-amethyst)!important;
 box-shadow:inset 0 0 0 1px var(--player-amethyst-edge),0 0 16px rgba(166,112,235,.42)!important;
}
.player .dl,.player .dl:hover,.player .dl:focus-visible{
 color:#FFBE0B!important;
 text-shadow:var(--player-extra-sun)!important;
}
.player .nt,.player .tr,.player .tr .no,.player .tr .ti,.player .tr .du,.player .dl,.player .tm{
 font-weight:400!important;
}


/* Spinning artwork link: centered full row, original spin and grow animations retained. */
.icons li.spin{flex:0 0 100%;width:100%;height:460px;margin:0;display:flex;align-items:center;justify-content:center}
.icons li.spin a{width:324px;height:324px;flex:0 0 324px;min-width:0;min-height:0}
.icons li.spin img{display:block;width:324px;height:324px;max-width:min(324px,calc(100vw - 32px));aspect-ratio:1/1;object-fit:cover;border-radius:50%}
@media(max-width:700px){
 .icons{width:min(100%,calc(100vw - 32px));margin-left:auto;margin-right:auto}
 .icons li.spin{height:min(358px,calc(100vw - 32px))}
 .icons li.spin a{width:min(252px,calc(70.7vw - 24.6px));height:auto;flex:0 0 min(252px,calc(70.7vw - 24.6px))}
 .icons li.spin img{width:100%;height:auto;max-width:100%;aspect-ratio:1/1}
}
.js .icons li.spin.in{animation:motion-fadeIn .96s cubic-bezier(.645,.045,.355,1) 1ms backwards}
.js .icons li.spin.in a{animation:motion-growIn 1.2s cubic-bezier(.645,.045,.355,1) 1ms backwards;transform-origin:center}
.js .icons li.spin.in img{animation:motion-spin-1 28s linear 1ms infinite}
@media(prefers-reduced-motion:reduce){.js .icons li.spin.in,.js .icons li.spin.in a,.js .icons li.spin.in img{animation:none!important;transform:none!important;rotate:0deg!important;opacity:1!important}}

/* Quiet italic Open Sans Now Playing label, above the existing opal track title. */
.player .artist{margin:0!important;font-family:"Open Sans",var(--sans)!important;font-size:14px!important;font-weight:400!important;font-style:italic!important;line-height:1.3!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:#C8D1CF!important;text-shadow:0 1px 3px rgba(8,16,36,.32)!important;-webkit-text-stroke:0!important}
.player .artist .nm-t{font:inherit!important;font-style:italic!important;letter-spacing:inherit!important;margin:0!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;-webkit-text-stroke:0!important;background:none!important;background-image:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important;text-shadow:inherit!important}
.player .nt{margin-top:8px!important}


/* The removed gallery copyright formerly occupied one 28px flex gap; keep 56px at this break. */
.col>.keep.bcrop{margin-top:28px}


/* Side-mounted photo-row jewels: keep both arrows outside the track. */
:root{--stone-amber:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2044'%20shape-rendering='geometricPrecision'%3E%3Ccircle%20cx='22'%20cy='22'%20r='21.9'%20fill='%23C98F00'/%3E%3Cpath%20d='M13.62,1.77%20A21.9%2021.9%200%200%201%2030.38,1.77%20L28.89,5.37%20A18%2018%200%200%200%2015.11,5.37%20Z'%20fill='%23FFD75E'/%3E%3Cpath%20d='M30.38,1.77%20A21.9%2021.9%200%200%201%2042.23,13.62%20L38.63,15.11%20A18%2018%200%200%200%2028.89,5.37%20Z'%20fill='%23FFBE0B'/%3E%3Cpath%20d='M42.23,13.62%20A21.9%2021.9%200%200%201%2042.23,30.38%20L38.63,28.89%20A18%2018%200%200%200%2038.63,15.11%20Z'%20fill='%23C98F00'/%3E%3Cpath%20d='M42.23,30.38%20A21.9%2021.9%200%200%201%2030.38,42.23%20L28.89,38.63%20A18%2018%200%200%200%2038.63,28.89%20Z'%20fill='%238A6A00'/%3E%3Cpath%20d='M30.38,42.23%20A21.9%2021.9%200%200%201%2013.62,42.23%20L15.11,38.63%20A18%2018%200%200%200%2028.89,38.63%20Z'%20fill='%23C98F00'/%3E%3Cpath%20d='M13.62,42.23%20A21.9%2021.9%200%200%201%201.77,30.38%20L5.37,28.89%20A18%2018%200%200%200%2015.11,38.63%20Z'%20fill='%23FFBE0B'/%3E%3Cpath%20d='M1.77,30.38%20A21.9%2021.9%200%200%201%201.77,13.62%20L5.37,15.11%20A18%2018%200%200%200%205.37,28.89%20Z'%20fill='%23FFD75E'/%3E%3Cpath%20d='M1.77,13.62%20A21.9%2021.9%200%200%201%2013.62,1.77%20L15.11,5.37%20A18%2018%200%200%200%205.37,15.11%20Z'%20fill='%23FFE9A3'/%3E%3Ccircle%20cx='22'%20cy='22'%20r='18'%20fill='%23E44B00'/%3E%3Cpath%20d='M22.00,4.00%20A18%2018%200%200%201%2034.73,9.27%20L27.89,7.77%20Z'%20fill='%23FF6A00'/%3E%3Cpolygon%20points='22.00,10.40%2030.20,13.80%2027.89,7.77'%20fill='%23FFB347'/%3E%3Cpolygon%20points='22.00,10.40%2027.89,7.77%2022.00,4.00%2016.11,7.77'%20fill='%23FF6A00'/%3E%3Cpath%20d='M34.73,9.27%20A18%2018%200%200%201%2040.00,22.00%20L36.23,16.11%20Z'%20fill='%23E44B00'/%3E%3Cpolygon%20points='30.20,13.80%2033.60,22.00%2036.23,16.11'%20fill='%23FF6A00'/%3E%3Cpolygon%20points='30.20,13.80%2036.23,16.11%2034.73,9.27%2027.89,7.77'%20fill='%23E44B00'/%3E%3Cpath%20d='M40.00,22.00%20A18%2018%200%200%201%2034.73,34.73%20L36.23,27.89%20Z'%20fill='%23A62F00'/%3E%3Cpolygon%20points='33.60,22.00%2030.20,30.20%2036.23,27.89'%20fill='%23E44B00'/%3E%3Cpolygon%20points='33.60,22.00%2036.23,27.89%2040.00,22.00%2036.23,16.11'%20fill='%23A62F00'/%3E%3Cpath%20d='M34.73,34.73%20A18%2018%200%200%201%2022.00,40.00%20L27.89,36.23%20Z'%20fill='%23A62F00'/%3E%3Cpolygon%20points='30.20,30.20%2022.00,33.60%2027.89,36.23'%20fill='%23E44B00'/%3E%3Cpolygon%20points='30.20,30.20%2027.89,36.23%2034.73,34.73%2036.23,27.89'%20fill='%23A62F00'/%3E%3Cpath%20d='M22.00,40.00%20A18%2018%200%200%201%209.27,34.73%20L16.11,36.23%20Z'%20fill='%23E44B00'/%3E%3Cpolygon%20points='22.00,33.60%2013.80,30.20%2016.11,36.23'%20fill='%23FF6A00'/%3E%3Cpolygon%20points='22.00,33.60%2016.11,36.23%2022.00,40.00%2027.89,36.23'%20fill='%23A62F00'/%3E%3Cpath%20d='M9.27,34.73%20A18%2018%200%200%201%204.00,22.00%20L7.77,27.89%20Z'%20fill='%23FF6A00'/%3E%3Cpolygon%20points='13.80,30.20%2010.40,22.00%207.77,27.89'%20fill='%23FFB347'/%3E%3Cpolygon%20points='13.80,30.20%207.77,27.89%209.27,34.73%2016.11,36.23'%20fill='%23E44B00'/%3E%3Cpath%20d='M4.00,22.00%20A18%2018%200%200%201%209.27,9.27%20L7.77,16.11%20Z'%20fill='%23FFB347'/%3E%3Cpolygon%20points='10.40,22.00%2013.80,13.80%207.77,16.11'%20fill='%23FFD176'/%3E%3Cpolygon%20points='10.40,22.00%207.77,16.11%204.00,22.00%207.77,27.89'%20fill='%23FF6A00'/%3E%3Cpath%20d='M9.27,9.27%20A18%2018%200%200%201%2022.00,4.00%20L16.11,7.77%20Z'%20fill='%23FFB347'/%3E%3Cpolygon%20points='13.80,13.80%2022.00,10.40%2016.11,7.77'%20fill='%23FFD176'/%3E%3Cpolygon%20points='13.80,13.80%2016.11,7.77%209.27,9.27%207.77,16.11'%20fill='%23FFB347'/%3E%3Ccircle%20cx='22'%20cy='22'%20r='11.6'%20fill='%23FFD176'/%3E%3Ccircle%20cx='22'%20cy='22'%20r='18'%20fill='none'%20stroke='%232A1A00'%20stroke-opacity='.55'%20stroke-width='.45'/%3E%3Ccircle%20cx='22'%20cy='22'%20r='11.6'%20fill='none'%20stroke='%23A62F00'%20stroke-width='.4'%20stroke-opacity='.7'/%3E%3Cpolygon%20points='12.395680984919732,7.3070322437351365%2012.923680984919732,9.179032243735136%2014.795680984919732,9.707032243735137%2012.923680984919732,10.235032243735137%2012.395680984919732,12.107032243735137%2011.867680984919732,10.235032243735137%209.995680984919732,9.707032243735137%2011.867680984919732,9.179032243735136'%20fill='%23fff'/%3E%3Cpolygon%20points='16.544039956158038,17.349999999999998%2016.874039956158036,18.52%2018.044039956158038,18.849999999999998%2016.874039956158036,19.179999999999996%2016.544039956158038,20.349999999999998%2016.21403995615804,19.179999999999996%2015.044039956158038,18.849999999999998%2016.21403995615804,18.52'%20fill='%23fff'/%3E%3C/svg%3E")}
@media(min-width:701px){
 .prow{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;column-gap:12px;align-items:center;width:min(1226px,calc(100% - 32px))}
 .parr{position:relative;top:auto;left:auto;right:auto;margin:0;width:52px;height:52px;justify-self:center}
 .ptrack{width:100%;margin:0}
}
@media(max-width:700px){
 .prow{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;column-gap:12px;align-items:center}
 .parr{position:relative;top:auto;left:auto;right:auto;margin:0;width:44px;height:44px;justify-self:center;background:rgba(0,0,0,.45)}
 .pprev,.pnext{left:auto;right:auto}
 .ptrack{width:100%;margin:0;padding:0 8px}
}
/* Photo arrows, DOJO Oct 25 12:50am: BOTH photo album arrows are the same amber-orange jewel. The right one reuses the left one's rules; only the glyph direction differs. The player's emerald buttons are not touched (they are #prev/#next, not .parr). */
.parr.pprev::before,.parr.pprev:hover::before,.parr.pnext::before,.parr.pnext:hover::before{background-image:var(--stone-amber)!important}
.parr.pprev,.parr.pnext{filter:drop-shadow(0 0 8px rgba(255,116,0,.9)) drop-shadow(0 0 15px rgba(255,165,0,.58))}
.parr.pprev svg,.parr.pnext svg{stroke:#402000!important}
@font-face{font-family:"BarlowC";src:url(../fonts/barlow-condensed-600.215a93c6.woff2) format("woff2");font-weight:600;font-style:normal;font-display:block}

/* ===== FOOTER STACK (DOJO, Oct 24 7pm): visitor odometer, EMAIL badge, copyright. One centred column floating on open sky, no box. ===== */
.foot{background:none;border:0;padding:72px 16px 96px}
.foot-in{display:flex;flex-direction:column;align-items:center;width:min(640px,100%);margin:0 auto}
.odo-stack{display:flex;flex-direction:column;align-items:center;margin:0}
.odo{display:flex;gap:3px;padding:12px 14px;border-radius:10px;background:linear-gradient(135deg,#F4F6F8 0,#B9BEC4 38%,#E6E9EC 55%,#9AA0A7 100%);border:1px solid #fff;box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),inset -1px -1px 0 rgba(60,70,80,.35);filter:drop-shadow(1px 3px 7px rgba(8,16,36,.6));position:relative}
.odo .drum{display:block;width:50px;height:76px;overflow:hidden;border-radius:4px;background:linear-gradient(#cfd3d7,#f3f4f5 30%,#f3f4f5 70%,#bfc4c9);box-shadow:inset 0 3px 5px rgba(8,16,36,.35),inset 0 -3px 5px rgba(8,16,36,.3);position:relative;--h:76px}
.odo .reel{display:block;transform:translateY(calc((var(--d) + 10) * var(--h) * -1));will-change:transform}
.odo .reel i{display:block;height:var(--h);font:600 60px/var(--h) "BarlowC",sans-serif;font-style:normal;text-align:center;color:#101114}
.odo .drum::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.28),transparent 28%,transparent 72%,rgba(0,0,0,.28));pointer-events:none}
.odo.spin .reel{animation:odoRoll 2.6s cubic-bezier(.16,.8,.2,1) both}
.odo.spin .drum:nth-child(1) .reel{animation-duration:1.6s}.odo.spin .drum:nth-child(2) .reel{animation-duration:1.9s}.odo.spin .drum:nth-child(3) .reel{animation-duration:2.2s}.odo.spin .drum:nth-child(4) .reel{animation-duration:2.5s}.odo.spin .drum:nth-child(5) .reel{animation-duration:2.8s}.odo.spin .drum:nth-child(6) .reel{animation-duration:3.1s}
@keyframes odoRoll{from{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.odo.spin .reel{animation:none}}
.odo-cap{font:400 11px/1 var(--nm-font);letter-spacing:.3em;padding-left:.3em;color:#F6F1E2;text-align:center;margin:14px 0 0;text-transform:uppercase;text-shadow:var(--shadow-large)}
.foot-mail{display:flex;flex-direction:column;align-items:center;margin:64px 0 0}
.foot .foot-ask{margin:0 0 14px;color:#F6F1E2;text-shadow:var(--shadow-large);text-align:center}
.foot .mailcta{margin:0}
.foot-copy{margin:64px 0 0;display:flex;flex-direction:column;align-items:center}
.foot-copy .foot-mark{margin:0 0 18px}
.foot-copy p{margin:0}
.foot .cr,.foot .foot-mark .nm-t,.foot .cr .nm-t{text-shadow:var(--shadow-large)}
@media(max-width:700px){
 .foot{padding:72px 16px 96px}
 .odo{padding:8px 9px;gap:2px}
 .odo .drum{width:40px;height:62px;--h:62px}
 .odo .reel i{font-size:50px}
 .odo-cap{font-size:9px;letter-spacing:.2em;padding-left:.2em;margin-top:10px}
 .foot-mail{margin-top:48px}.foot-copy{margin-top:48px}
}

/* Footer wordmark line (DOJO, Oct 24 8:09pm): JYPSYEYE and est. 1996 on one centred line, one deliberate 22px gap. */
.foot-copy .foot-mark{flex-wrap:nowrap;column-gap:22px;row-gap:0;align-items:baseline}
.foot-mark .nm-t.est{text-transform:none;word-spacing:.45em}
@media(max-width:700px){.foot-copy .foot-mark{column-gap:18px}.foot-mark .nm-t{letter-spacing:.3em;margin-right:-.3em}}

/* streaming line, track-number turquoise (DOJO, Oct 24 10:10pm): the line and its links take exactly the colour and sun shadow of the track numbers. Colour only. */
.player .alt-listen,.player .alt-listen a,.player .alt-listen a:hover,.player .alt-listen a:focus-visible{color:var(--player-turquoise)!important;-webkit-text-fill-color:var(--player-turquoise)!important;text-shadow:var(--player-extra-sun)!important}

/* ===== Played marker (DOJO, Oct 24 10:24pm, corrected 10:28pm): a track really listened to for about 10 seconds turns SKY BLUE (number and title) for the rest of this visit. In memory only: every visit starts fresh, nothing is stored in the browser. Later rule wins over the stacked track colour rules above. ===== */
:root{--player-sky:#8FD3FF}
.player .tr[data-played] .no,.player .tr[data-played] .ti,
.player .tr[data-played][aria-current="true"] .no,.player .tr[data-played][aria-current="true"] .ti,
.player .tr[data-played]:hover .ti,.player .tr[data-played]:focus-visible .ti{
 color:var(--player-sky)!important;
 -webkit-text-fill-color:var(--player-sky)!important;
 text-shadow:var(--player-extra-sun)!important;
}

/* PHONE NAME FIT (DOJO, Oct 24 10:37pm): the gold intro name J Y P S Y E Y E fits whole inside the screen on a phone and sits centred on the page axis. Phone only. Size follows the screen width; letter-spacing stays .12em of the size; same face, gold and shadow. */
@media(max-width:700px){
 .entry-name{font-size:calc((100vw - 40px)/9);padding-left:.12em;box-sizing:border-box}
}

/* ===== Now Playing visibility (DOJO, Oct 24 10:43pm): a clear, substantive player label above the unchanged track title. Same Michroma wordmark face, wide tracking, italic, heavy same-colour stroke, light opal and the track-number sun shadow. ===== */
.player .artist,.player .artist .nm-t{
 font-family:var(--nm-font)!important;
 font-size:21px!important;
 font-weight:400!important;
 font-style:italic!important;
 font-synthesis:style!important;
 line-height:1.28!important;
 letter-spacing:.22em!important;
 margin-right:-.22em!important;
 text-transform:uppercase!important;
 color:var(--player-opal-base)!important;
 -webkit-text-fill-color:var(--player-opal-base)!important;
 -webkit-text-stroke:.065em var(--player-opal-base)!important;
 paint-order:stroke fill!important;
 text-shadow:var(--player-extra-sun)!important;
 background:none!important;
 background-image:none!important;
 background-clip:border-box!important;
 -webkit-background-clip:border-box!important;
}
@media(max-width:700px){.player .artist,.player .artist .nm-t{font-size:18px!important}}

/* ===== Played-marker colour correction (DOJO, Oct 24 10:51pm): polished metallic gold, bold and one 2px size step larger on desktop; darker blue, original weight and size on phones. Overrides every earlier played marker rule. ===== */
.player .tr[data-played] .no,.player .tr[data-played] .ti,
.player .tr[data-played][aria-current="true"] .no,.player .tr[data-played][aria-current="true"] .ti,
.player .tr[data-played]:hover .ti,.player .tr[data-played]:focus-visible .ti{
 color:#FFBE0B!important;
 background-color:transparent!important;
 background-image:linear-gradient(180deg,#FFE9A3 0%,#FFBE0B 42%,#A8862A 100%)!important;
 background-clip:text!important;
 -webkit-background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
 -webkit-text-stroke:0!important;
 font-size:calc(1em + 2px)!important;
 font-weight:700!important;
 filter:drop-shadow(1px 3px 7px rgba(8,16,36,.6))!important;
 text-shadow:none!important;
}
@media(max-width:700px){
 .player .tr[data-played] .no,.player .tr[data-played] .ti,
 .player .tr[data-played][aria-current="true"] .no,.player .tr[data-played][aria-current="true"] .ti,
 .player .tr[data-played]:hover .ti,.player .tr[data-played]:focus-visible .ti{
  color:#4FA8F5!important;
  background:none!important;
  background-image:none!important;
  background-clip:border-box!important;
  -webkit-background-clip:border-box!important;
  -webkit-text-fill-color:#4FA8F5!important;
  font-size:inherit!important;
  font-weight:400!important;
  filter:none!important;
  text-shadow:var(--player-extra-sun)!important;
 }
}


/* ===== Portal link sandwich (DOJO, Oct 24 10:58pm): small links above and below the same spinning JYPSYEYE artwork, which stays linked to its original page. Rings float on open sky behind every icon. ===== */
.intro{overflow:clip}
.icons{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0;position:relative}
.icons .icon-group{display:flex;flex:0 0 auto;width:100%;justify-content:center;align-items:center;position:relative;z-index:2}
.icons .icon-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 50px;width:100%;max-width:none;list-style:none;margin:0;padding:0}
.icons .icon-links li{display:block;flex:none;width:auto}
.icons li.spin{position:relative;isolation:isolate;z-index:1;flex:0 0 var(--portal-size);width:100%;height:var(--portal-size);margin:0;display:flex;align-items:center;justify-content:center}
.icons li.icon-group-bottom{margin-top:calc(0px - var(--icons-lower-height))}
.icons li.spin>a{position:relative;z-index:3;isolation:isolate;width:324px;height:324px;flex:0 0 324px;min-width:0;min-height:0;overflow:visible}
.icons li.spin img{position:relative;z-index:2;display:block;width:324px;height:324px;max-width:min(324px,calc(100vw - 32px));aspect-ratio:1/1;object-fit:cover;border-radius:50%;filter:drop-shadow(1px 3px 7px rgba(8,16,36,.6))}
.icons li.spin::before,.icons li.spin::after{content:"";position:absolute;left:50%;top:50%;width:var(--portal-size);height:var(--portal-size);border-radius:50%;pointer-events:none;}
.icons li.spin::before{
 z-index:0;
 background:radial-gradient(circle at center,
  transparent 0 calc(var(--portal-art-radius) - 3px),rgba(166,255,244,.82) calc(var(--portal-art-radius) - 2px),rgba(255,190,11,.96) var(--portal-art-radius),rgba(255,233,163,.86) calc(var(--portal-art-radius) + 2px),transparent calc(var(--portal-art-radius) + 5px),
  transparent calc(var(--portal-r2) - 2px),rgba(255,190,11,.54) var(--portal-r2),rgba(166,255,244,.64) calc(var(--portal-r2) + 2px),transparent calc(var(--portal-r2) + 5px),
  transparent calc(var(--portal-r3) - 2px),rgba(58,134,255,.43) var(--portal-r3),rgba(255,190,11,.52) calc(var(--portal-r3) + 2px),transparent calc(var(--portal-r3) + 5px),
  transparent calc(var(--portal-r4) - 2px),rgba(166,255,244,.40) var(--portal-r4),rgba(255,190,11,.47) calc(var(--portal-r4) + 2px),transparent calc(var(--portal-r4) + 5px),
  transparent calc(var(--portal-r5) - 2px),rgba(255,190,11,.34) var(--portal-r5),rgba(58,134,255,.32) calc(var(--portal-r5) + 2px),transparent calc(var(--portal-r5) + 5px),
  transparent calc(var(--portal-r6) - 2px),rgba(166,255,244,.27) var(--portal-r6),rgba(255,190,11,.28) calc(var(--portal-r6) + 1px),transparent calc(var(--portal-r6) + 4px),
  transparent calc(var(--portal-r7) - 2px),rgba(255,233,163,.16) var(--portal-r7),transparent calc(var(--portal-r7) + 2px));
 filter:drop-shadow(1px 3px 7px rgba(8,16,36,.38));
 animation:portal-inward 12s ease-in-out infinite;
 will-change:transform,opacity;
}
.icons li.spin::after{
 z-index:1;opacity:.72;
 background:conic-gradient(from 0deg,transparent 0deg,rgba(166,255,244,.36) 12deg,transparent 28deg,transparent 66deg,rgba(255,190,11,.38) 82deg,transparent 102deg,transparent 158deg,rgba(58,134,255,.26) 178deg,transparent 196deg,transparent 258deg,rgba(255,233,163,.28) 278deg,transparent 300deg,transparent 360deg);
 filter:drop-shadow(1px 3px 7px rgba(8,16,36,.35));
 animation:portal-turn-a 64s linear infinite;
}
.icons li.spin>a::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:var(--portal-size);height:var(--portal-size);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);background:conic-gradient(from 180deg,transparent 0deg,rgba(0,255,0,.24) 22deg,transparent 38deg,transparent 112deg,rgba(166,255,244,.27) 136deg,transparent 154deg,transparent 218deg,rgba(255,190,11,.24) 238deg,transparent 256deg,transparent 332deg,rgba(58,134,255,.24) 348deg,transparent 360deg);opacity:.6;animation:portal-turn-b 82s linear infinite reverse}
.icons li.spin>a::after{content:"";position:absolute;z-index:3;inset:-2px;border-radius:50%;border:2px solid rgba(166,255,244,.82);box-shadow:0 0 10px rgba(166,255,244,.65),0 0 18px rgba(255,190,11,.48);pointer-events:none}
@keyframes portal-inward{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.86}50%{transform:translate(-50%,-50%) scale(.965);opacity:.42}}
@keyframes portal-turn-a{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes portal-turn-b{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:700px){
 .icons .icon-links{width:min(100%,calc(100vw - 32px));gap:20px 50px}
 .icons img{max-width:84px}
 .icons li.spin{height:var(--portal-size)}
 .icons li.spin>a{width:min(252px,calc(70.7vw - 24.6px));height:auto;flex:0 0 min(252px,calc(70.7vw - 24.6px))}
 .icons li.spin img{width:100%;height:auto;max-width:100%;aspect-ratio:1/1}
 .icons li.spin>a::after{inset:-2px}
}
@media(prefers-reduced-motion:reduce){
 .icons li.spin::before,.icons li.spin::after,.icons li.spin>a::before{animation:none!important;transform:translate(-50%,-50%)!important;opacity:.66!important}
 .js .icons li.spin.in a{animation:none!important;transform:none!important}
 .js .icons li.spin.in img{animation:none!important;rotate:0deg!important;transform:none!important}
}
/* Keep the original spinning artwork at its native pixel size. Fade it in without the old grow animation. */
.js .icons li.spin.in{animation:motion-fadeIn .96s cubic-bezier(.645,.045,.355,1) 1ms backwards}
.js .icons li.spin.in>a{animation:motion-fadeIn .96s cubic-bezier(.645,.045,.355,1) 1ms backwards;transform:none!important}
.js .icons li.spin.in img{animation:motion-spin-1 28s linear 1ms infinite;transform:none!important}
@media(prefers-reduced-motion:reduce){.js .icons li.spin.in>a{animation:none!important;transform:none!important}.js .icons li.spin.in img{animation:none!important;rotate:0deg!important;transform:none!important}}
/* Keep the narrow phone viewport clipped at the root while the tunnel rings fill the phone width. */
@media(max-width:700px){html{overflow-x:clip!important}}

/* ===== NOW PLAYING fix (DOJO, Oct 24 11:36pm): faded bold black label, this one label only. Michroma italic caps, wide tracking, same size and place. Solid charcoal equal to a faded black over the panel, same-colour stroke for the bold look, light pearl halo. ===== */
.player .artist,.player .artist .nm-t{
 color:#2B3238!important;
 -webkit-text-fill-color:#2B3238!important;
 -webkit-text-stroke:.055em #2B3238!important;
 paint-order:stroke fill!important;
 text-shadow:0 0 2px rgba(255,255,255,.7)!important;
}
/* Now Playing on a phone: tighter tracking so N O W  P L A Y I N G stays whole inside the player (it ran past the right edge at 390). */
/* Now Playing word gap (DOJO 11:43pm): the .9em word-spacing of the wordmark rule made NOW and PLAYING sit far apart. Even letter gaps, one deliberate word break about twice a letter gap. */
.player .artist .nm-t{letter-spacing:.14em!important;word-spacing:-.1em!important;margin-right:-.14em!important;white-space:nowrap!important}
@media(max-width:700px){.player .artist .nm-t{letter-spacing:.12em!important;word-spacing:-.1em!important;margin-right:-.12em!important}}

/* ===== PHOTO ARROWS (DOJO, Oct 24 11:47pm): both jewels always visible on every row, smaller (38px desktop, 34px phone), 44px tap area kept. At a row's start or end the arrow stays and wraps to the other end. ===== */
.parr.off{visibility:visible!important;opacity:1!important}
@media(min-width:701px){
 .parr{width:44px;height:44px}
 .parr::before{inset:3px!important}
 .parr svg{width:19px!important;height:19px!important}
}
@media(max-width:700px){
 .parr{width:44px;height:44px;background:transparent!important}
 .parr::before{inset:5px!important}
 .parr svg{width:17px!important;height:17px!important}
}

/* ===== FOOTER ORDER (DOJO, Oct 25 12:02am): inquiries line and EMAIL badge, the name and est. line, both copyright lines, then the visitor counter last. One centred column, 64px between stack items (48px phone). ===== */
.foot-mail{margin-top:0}
.foot-copy{margin-top:64px}
.odo-stack{margin-top:64px}
@media(max-width:700px){.foot-mail{margin-top:0}.foot-copy{margin-top:48px}.odo-stack{margin-top:48px}}



/* ===== ENTRANCE VORTEX (DOJO, Oct 25 12:56am): a rendered light field (WebGL, then 2D, then CSS rings) sits under the spinning link; the ten links drift free-form on its fringe. Pinwheels are never drawn: only soft rays and the receding cone of rings show. ===== */
:root{--stageH:752px;--intro-tag-stage:110px;--intro-sandwich-welcome:84px}
.icons li.spin::before,.icons li.spin::after,.icons li.spin>a::before{content:none!important;display:none!important;animation:none!important}
.vortex{position:absolute;left:50%;top:50%;translate:-50% -50%;width:100vw;height:calc(var(--stageH) + 80px);display:block;pointer-events:none;z-index:0;background:none;border:0}
.portal{display:none;position:absolute;left:50%;top:50%;translate:-50% -50%;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:0}
.portal .pr-rings{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at center,transparent 0,transparent 166.0px,rgba(27,95,208,.5) 167px,transparent 168.0px,transparent 174.9px,rgba(14,143,106,.5) 176px,transparent 177.1px,transparent 185.7px,rgba(138,106,0,.5) 187px,transparent 188.3px,transparent 198.6px,rgba(27,95,208,.5) 200px,transparent 201.4px,transparent 212.5px,rgba(0,200,120,.5) 214px,transparent 215.5px,transparent 227.3px,rgba(255,190,11,.5) 229px,transparent 230.7px,transparent 241.2px,rgba(58,134,255,.5) 243px,transparent 244.8px,transparent 253.1px,rgba(166,255,244,.6) 255px,transparent 256.9px,transparent 261.9px,rgba(255,190,11,.6) 264px,transparent 266.1px,transparent 268.8px,rgba(255,233,163,.6) 271px,transparent 273.2px);-webkit-mask-image:radial-gradient(circle,#000 0,#000 55%,transparent 70%);mask-image:radial-gradient(circle,#000 0,#000 55%,transparent 70%)}
.icons li.spin.nogl .portal{display:block}
.icons li.spin.nogl .vortex{display:none}
.tag{margin-bottom:var(--intro-tag-stage)}
@media(min-width:701px){
 .icons{display:block;position:relative;width:100%;height:var(--stageH);margin:0 auto;padding:0}
 .icons li.spin{position:absolute;left:50%;top:50%;translate:-50% -50%;width:324px;height:324px;flex:none;margin:0;display:flex;align-items:center;justify-content:center}
 .icons li.orb{position:absolute;left:50%;top:50%;width:0;height:0;margin:0;z-index:2;opacity:1!important;rotate:var(--a0)}
 .icons li.orb>a{position:absolute;left:0;top:0;translate:calc(var(--r) - 50%) -50%;rotate:calc(0deg - var(--a0))}
 .js .icons li.orb,.js .icons li.orb.in{opacity:1;animation:v-arm 420s linear infinite}
 .js .icons li.orb>a{animation:v-up 420s linear infinite}
 .icons:has(li.orb:hover) li.orb,.icons:has(li.orb:hover) li.orb>a,.icons:has(li.orb:focus-within) li.orb,.icons:has(li.orb:focus-within) li.orb>a{animation-play-state:paused}
}
@keyframes v-arm{from{rotate:var(--a0)}to{rotate:calc(var(--a0) + 360deg)}}
@keyframes v-up{from{rotate:calc(0deg - var(--a0))}to{rotate:calc(0deg - var(--a0) - 360deg)}}
@keyframes v-bob{to{translate:var(--bx) var(--by)}}
.icons li.orb>a{isolation:isolate;filter:drop-shadow(1px 3px 7px rgba(8,16,36,.6)) drop-shadow(0 0 10px rgba(255,190,11,.28))}
.icons li.orb img{animation:v-bob var(--bp,9s) ease-in-out infinite alternate}
.icons li.orb:nth-child(2){--a0:119.9deg;--r:333px;--px:19px;--py:230px;--bp:8.5s;--bx:7px;--by:-5px}
.icons li.orb:nth-child(3){--a0:332.4deg;--r:359px;--px:-101px;--py:268px;--bp:10.5s;--bx:-6px;--by:6px}
.icons li.orb:nth-child(4){--a0:192.9deg;--r:291px;--px:130px;--py:-131px;--bp:7.5s;--bx:5px;--by:-7px}
.icons li.orb:nth-child(5){--a0:267.3deg;--r:320px;--px:13px;--py:-267px;--bp:11s;--bx:-7px;--by:5px}
.icons li.orb:nth-child(6){--a0:154.3deg;--r:346px;--px:-117px;--py:-289px;--bp:9s;--bx:6px;--by:-6px}
.icons li.orb:nth-child(7){--a0:227.6deg;--r:377px;--px:124px;--py:161px;--bp:12s;--bx:-5px;--by:7px}
.icons li.orb:nth-child(8){--a0:8.2deg;--r:258px;--px:-135px;--py:141px;--bp:7s;--bx:7px;--by:-5px}
.icons li.orb:nth-child(9){--a0:87.7deg;--r:299px;--px:-127px;--py:-151px;--bp:10s;--bx:-6px;--by:6px}
.icons li.orb:nth-child(10){--a0:46.8deg;--r:273px;--px:131px;--py:296px;--bp:8s;--bx:5px;--by:-7px}
.icons li.orb:nth-child(11){--a0:297.8deg;--r:388px;--px:133px;--py:-326px;--bp:11.5s;--bx:-7px;--by:5px}
@media(max-width:700px){
 :root{--stageH:734px;--intro-tag-stage:60px;--intro-sandwich-welcome:27px;--intro-welcome-name:18px;--intro-name-first-copy:55px;--intro-copy-gap:31px;--intro-icons-scene:66px}
 .icons{display:block;position:relative;width:100%;height:var(--stageH);margin:0 auto;padding:0}
 .icons li.spin{position:absolute;left:50%;top:50%;translate:-50% -50%;width:252px;height:252px;flex:none;margin:0;display:flex;align-items:center;justify-content:center}
 .portal{width:420px;height:420px}
 .portal .pr-rings{background:radial-gradient(circle at center,transparent 0,transparent 128.3px,rgba(27,95,208,.5) 129px,transparent 129.7px,transparent 133.2px,rgba(14,143,106,.5) 134px,transparent 134.8px,transparent 139.2px,rgba(138,106,0,.5) 140px,transparent 140.8px,transparent 146.1px,rgba(27,95,208,.5) 147px,transparent 147.9px,transparent 154.1px,rgba(0,200,120,.5) 155px,transparent 155.9px,transparent 162.0px,rgba(255,190,11,.5) 163px,transparent 164.0px,transparent 169.0px,rgba(58,134,255,.5) 170px,transparent 171.0px,transparent 174.9px,rgba(166,255,244,.6) 176px,transparent 177.1px,transparent 179.9px,rgba(255,190,11,.6) 181px,transparent 182.1px,transparent 183.8px,rgba(255,233,163,.6) 185px,transparent 186.2px)}
 .icons li.orb{position:absolute;left:50%;top:50%;width:0;height:0;margin:0;z-index:2;opacity:1!important;rotate:none;animation:none}
 .icons li.orb>a{position:absolute;left:0;top:0;translate:calc(var(--px) - 50%) calc(var(--py) - 50%);rotate:none;animation:none}
 .icons li.orb img{width:84px!important;height:84px!important;max-width:none}
}
@media(prefers-reduced-motion:reduce){.js .icons li.orb,.js .icons li.orb>a,.icons li.orb img{animation:none!important}}

/* ===== TAGLINE, VERSION ONE'S LOOK IN CAPITALS (DOJO, Oct 25 1:46am): Fraunces serif bold italic at Version One's size (73.6px at 1440, 33.5px at 390), real capitals, gold, heavy soft back shadow from the one sun (down and a touch right). Clean serif, no script, no scale() or zoom. ===== */
.tag{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(2.1rem,5.11vw,4.6rem);line-height:1.12;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance;text-shadow:var(--shadow-large),3px 9px 18px rgba(8,16,36,.5),6px 16px 34px rgba(8,16,36,.4)}
@media(max-width:700px){.tag{font-size:clamp(1.75rem,8.6vw,2.4rem);line-height:1.15}}

/* ===== Player control green (DOJO, Oct 25 1:40am): the streaming line, its links and the track numbers take the exact green of the lit table of the emerald control stones (#3DDC93, the circle r=11.6 in --stone-emerald). Supersedes the turquoise for these only. Colour only: titles, times, played marker, controls untouched. ===== */
:root{--player-control-green:#3DDC93}
.player .tr:not([data-played]) .no,
.player .tr:not([data-played])[aria-current="true"] .no,
.player .alt-listen,.player .alt-listen a,.player .alt-listen a:hover,.player .alt-listen a:focus-visible{
 color:var(--player-control-green)!important;
 -webkit-text-fill-color:var(--player-control-green)!important;
 text-shadow:var(--player-extra-sun)!important;
}

/* ===== Player green print: deeper sun shadow (DOJO, Oct 25 1:50am): the green streaming line, its links and the track numbers keep #3DDC93 exactly. Only the shadow deepens: one sun, falling down and slightly right, a tight dark core near the letters plus stacked softer layers, bluer-grey, no black, no plate. Shadow only. ===== */
:root{--player-green-sun:0 0 1px rgba(10,22,48,.98),1px 2px 2px rgba(10,22,48,.88),1px 3px 5px rgba(12,26,56,.78),2px 5px 10px rgba(12,26,56,.62),3px 9px 20px rgba(14,30,62,.45)}
.player .tr:not([data-played]) .no,
.player .tr:not([data-played])[aria-current="true"] .no,
.player .alt-listen,.player .alt-listen a,.player .alt-listen a:hover,.player .alt-listen a:focus-visible{
 text-shadow:var(--player-green-sun)!important;
}
/* first paragraph under the gold name (DOJO 2:40am): 40px at 1440, 22px at 390 */
:root{--intro-name-first-copy:40px}
@media(max-width:700px){:root{--intro-name-first-copy:22px}}

/* ===== Streaming line in metallic gold (DOJO, Oct 25 2:14am and 2:31am): the line and its four links take exactly the J Y P S Y E Y E / J U K E B O X heading gold (same gradient, stroke and drop-shadow stack, held in variables). Supersedes the green for this line only; the track numbers stay #3DDC93. Paint only: no size, weight, font or spacing change, no plate. ===== */
:root{
 --gold-metal-bg:linear-gradient(180deg,rgba(255,255,255,.26) 0 46%,rgba(60,38,0,.18) 46% 100%),linear-gradient(135deg,#FFF6CD 0 7%,#FFE066 7% 18%,#FFBE0B 18% 31%,#FFF3B8 31% 37%,#D9A000 37% 52%,#FFBE0B 52% 63%,#B88400 63% 78%,#8A6A00 78% 100%);
 --gold-metal-stroke:.03em #E8AE00;
 --gold-metal-filter:drop-shadow(-1px -1px 0 rgba(255,246,205,.95)) drop-shadow(1.5px 1.5px 0 rgba(84,56,0,.85)) drop-shadow(1px 3px 7px rgba(8,16,36,.6));
}
.player .alt-listen{width:fit-content;max-width:100%;box-sizing:border-box;background:var(--gold-metal-bg)!important;-webkit-background-clip:text!important;background-clip:text!important;filter:var(--gold-metal-filter);paint-order:stroke fill}
.player .alt-listen,.player .alt-listen a,.player .alt-listen a:hover,.player .alt-listen a:focus-visible{color:#D9A000!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke:var(--gold-metal-stroke);text-shadow:none!important}
/* ===== VORTEX EDGE FADE (DOJO, Oct 25 2:56am): the light of the vortex dissolves into the sky before it reaches the tagline above and the Welcome text below. Transparency of the light only; the same curve and the same distance at the top and the bottom; nothing on the left and right sides. ===== */
:root{--vf:230px}
.vortex,.portal{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.04) calc(var(--vf)*.2),rgba(0,0,0,.2) calc(var(--vf)*.45),rgba(0,0,0,.55) calc(var(--vf)*.7),rgba(0,0,0,.88) calc(var(--vf)*.9),#000 var(--vf),#000 calc(100% - var(--vf)),rgba(0,0,0,.88) calc(100% - var(--vf)*.9),rgba(0,0,0,.55) calc(100% - var(--vf)*.7),rgba(0,0,0,.2) calc(100% - var(--vf)*.45),rgba(0,0,0,.04) calc(100% - var(--vf)*.2),rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.04) calc(var(--vf)*.2),rgba(0,0,0,.2) calc(var(--vf)*.45),rgba(0,0,0,.55) calc(var(--vf)*.7),rgba(0,0,0,.88) calc(var(--vf)*.9),#000 var(--vf),#000 calc(100% - var(--vf)),rgba(0,0,0,.88) calc(100% - var(--vf)*.9),rgba(0,0,0,.55) calc(100% - var(--vf)*.7),rgba(0,0,0,.2) calc(100% - var(--vf)*.45),rgba(0,0,0,.04) calc(100% - var(--vf)*.2),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media(max-width:700px){:root{--vf:200px}}

/* ===== Streaming line gold rework (DOJO, Oct 25 2:54am): the first pass read flat on a one-line box. The gold now repeats once per text line (background-size follows the line height) in bands that match the J Y P S Y E Y E / J U K E B O X heading: pale top highlight, bright gold, deep gold body, bronze foot, with the heading's light edge and bronze rim. The four links inherit it. Paint only: no size, weight, font, spacing or underline change. ===== */
:root{
 --gold-line-bg:linear-gradient(180deg,#FFF8D2 0 12%,#FFE266 12% 30%,#FFC918 30% 47%,#EDAA00 47% 49%,#E3A200 49% 70%,#CC9200 70% 86%,#A87800 86% 100%);
 --gold-line-stroke:.03em #E8AE00;
 --gold-line-filter:drop-shadow(-.8px -.8px 0 rgba(255,248,215,.98)) drop-shadow(1.2px 1.4px 0 rgba(84,56,0,.9)) drop-shadow(1px 3px 6px rgba(8,16,36,.6));
}
.player .alt-listen{background:var(--gold-line-bg)!important;background-size:100% 1.65em!important;background-repeat:repeat-y!important;-webkit-background-clip:text!important;background-clip:text!important;filter:var(--gold-line-filter)}
.player .alt-listen,.player .alt-listen a,.player .alt-listen a:hover,.player .alt-listen a:focus-visible{-webkit-text-stroke:var(--gold-line-stroke);paint-order:stroke fill}

/* ===== LINK CONSTELLATION (DOJO, Oct 25 3:04am): the ten links sit as in his screenshot: top pair X and Amazon, shoulders YouTube and Apple Music, mid pair Rumble and TikTok, then Blogger and Instagram, bottom pair SoundCloud and Bandcamp. Clockwise from the top: X, Amazon, Apple Music, TikTok, Instagram, Bandcamp, SoundCloud, Blogger, Rumble, YouTube. Resting positions and sizes in px from the artwork centre; the drift is now only a small slow float around them. Plain links: no bezel, no tint. ===== */
:root{--intro-tag-stage:67px;--intro-sandwich-welcome:127px}
@media(min-width:701px){
 .js .icons li.orb,.js .icons li.orb.in,.icons li.orb{animation:none;rotate:none}
 .icons li.orb>a,.js .icons li.orb>a{animation:none;rotate:none;translate:calc(var(--dx) - 50%) calc(var(--dy) - 50%)}
 .icons li.orb img{width:var(--s)!important;height:var(--s)!important;max-width:none}
 .icons li.orb:nth-child(2){--dx:136px;--dy:-267px;--s:80px}
 .icons li.orb:nth-child(3){--dx:-277px;--dy:169px;--s:92px}
 .icons li.orb:nth-child(4){--dx:262px;--dy:29px;--s:96px}
 .icons li.orb:nth-child(5){--dx:25px;--dy:292px;--s:102px}
 .icons li.orb:nth-child(6){--dx:274px;--dy:-152px;--s:112px}
 .icons li.orb:nth-child(7){--dx:242px;--dy:242px;--s:112px}
 .icons li.orb:nth-child(8){--dx:-222px;--dy:-22px;--s:92px}
 .icons li.orb:nth-child(9){--dx:-29px;--dy:-267px;--s:80px}
 .icons li.orb:nth-child(10){--dx:-175px;--dy:-175px;--s:92px}
 .icons li.orb:nth-child(11){--dx:-146px;--dy:321px;--s:92px}
}
@media(max-width:700px){
 :root{--intro-tag-stage:30px;--intro-sandwich-welcome:57px}
 .icons li.orb>a{translate:calc(var(--px) - 50%) calc(var(--py) - 50%)}
 .icons li.orb img{width:var(--s)!important;height:var(--s)!important;max-width:none}
 .icons li.orb:nth-child(2){--px:70px;--py:-219px;--s:56px}
 .icons li.orb:nth-child(3){--px:-144px;--py:139px;--s:65px}
 .icons li.orb:nth-child(4){--px:150px;--py:84px;--s:67px}
 .icons li.orb:nth-child(5){--px:13px;--py:239px;--s:72px}
 .icons li.orb:nth-child(6){--px:142px;--py:-124px;--s:79px}
 .icons li.orb:nth-child(7){--px:125px;--py:199px;--s:79px}
 .icons li.orb:nth-child(8){--px:-150px;--py:-80px;--s:65px}
 .icons li.orb:nth-child(9){--px:-15px;--py:-219px;--s:56px}
 .icons li.orb:nth-child(10){--px:-91px;--py:-144px;--s:65px}
 .icons li.orb:nth-child(11){--px:-76px;--py:263px;--s:65px}
}

/* ===== MOTION ON ONE 28 s CLOCK (DOJO, Oct 25 3:09am): centre link turns once per 28 s; the links float on 28 s and 14 s cycles from the same clock. ===== */
.icons li.orb:nth-child(2){--bp:14s}
.icons li.orb:nth-child(3){--bp:7s}
.icons li.orb:nth-child(4){--bp:14s}
.icons li.orb:nth-child(5){--bp:7s}
.icons li.orb:nth-child(6){--bp:14s}
.icons li.orb:nth-child(7){--bp:7s}
.icons li.orb:nth-child(8){--bp:14s}
.icons li.orb:nth-child(9){--bp:7s}
.icons li.orb:nth-child(10){--bp:14s}
.icons li.orb:nth-child(11){--bp:7s}

/* ===== GOLD BAR EMAIL (DOJO, Oct 25 3:11am): the footer EMAIL JYPSYEYE button is a cast gold ingot drawn in inline SVG and CSS, floating on the sky with no box. Light from the one sun (upper left), shadow falls down and a touch right. ===== */

/* ===== PHONE ONLY: water band shows only the rippling surface (DOJO, Oct 25 3:30am) =====
   Measured on 40 frames across the 26.1s video: sky ends near 9.6% of frame height, the far shore sits at 9.6% to 14%, the boat waterline is at about 14.8% (boat is in every frame).
   The video keeps its full cover fit (713px tall, no zoom); the top 18% (128px) is cut off by the band, so only water is left. */
@media(max-width:700px){
.band.water{height:585px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);mask-image:linear-gradient(to bottom,transparent 0,#000 56px)}
.band.water .bgvid{inset:auto;left:0;top:-128px;width:100%;height:713px;object-fit:cover;object-position:50% 50%}
}

/* ===== PHONE ONLY (max-width 700px): portal spacing and light transfer (DOJO, Oct 25 3:30am) =====
   The lit portal (artwork and the ten links, 247px above the artwork centre and 298px below) now sits 24px from the tagline above and 24px from the Welcome text below. The stage is exactly that tall. The light canvas is 542px tall and its soft vertical fade (130px) is scaled with the shorter stage so it ends at the text. */
@media(max-width:700px){
 :root{--intro-tag-stage:0px;--intro-sandwich-welcome:0px;--stageH:593px;--vf:130px}
 .icons li.spin,.icons li.orb{top:271px}
 .vortex{height:542px}
}

/* ===== LINKS ON ONE CIRCLE (DOJO, Oct 25 3:56am): the ten links sit round the vortex on a gentle ellipse, evenly spaced by angle with a little natural wobble, clear air round each one. Clockwise from the top: X, Amazon, Apple Music, TikTok, Instagram, Bandcamp, SoundCloud, Blogger, Rumble, YouTube. ===== */
@media(min-width:701px){
 .icons li.orb:nth-child(9){--dx:21px;--dy:-300px;--s:80px}
 .icons li.orb:nth-child(2){--dx:222px;--dy:-261px;--s:80px}
 .icons li.orb:nth-child(6){--dx:388px;--dy:-81px;--s:112px}
 .icons li.orb:nth-child(4){--dx:401px;--dy:79px;--s:96px}
 .icons li.orb:nth-child(7){--dx:215px;--dy:251px;--s:112px}
 .icons li.orb:nth-child(5){--dx:14px;--dy:300px;--s:102px}
 .icons li.orb:nth-child(11){--dx:-262px;--dy:238px;--s:92px}
 .icons li.orb:nth-child(3){--dx:-375px;--dy:110px;--s:92px}
 .icons li.orb:nth-child(8){--dx:-389px;--dy:-104px;--s:92px}
 .icons li.orb:nth-child(10){--dx:-255px;--dy:-229px;--s:92px}
}

/* ===== LINKS ON ONE ELLIPSE, PHONE (DOJO, Oct 25 3:56am): same circular order as the desktop, evenly spaced by angle with a little wobble, taller than wide to fit the width. 24px of clear space above and below. ===== */
@media(max-width:700px){
 :root{--stageH:927px}
 .icons li.spin,.icons li.orb{top:460px}
 .vortex{height:987px}
 .icons li.orb:nth-child(9){--px:5px;--py:-410px;--s:52px}
 .icons li.orb:nth-child(2){--px:81px;--py:-349px;--s:52px}
 .icons li.orb:nth-child(6){--px:139px;--py:-112px;--s:72px}
 .icons li.orb:nth-child(4){--px:142px;--py:114px;--s:62px}
 .icons li.orb:nth-child(7){--px:79px;--py:341px;--s:72px}
 .icons li.orb:nth-child(5){--px:5px;--py:410px;--s:66px}
 .icons li.orb:nth-child(11){--px:-91px;--py:326px;--s:60px}
 .icons li.orb:nth-child(3){--px:-135px;--py:145px;--s:60px}
 .icons li.orb:nth-child(8){--px:-138px;--py:-141px;--s:60px}
 .icons li.orb:nth-child(10){--px:-89px;--py:-321px;--s:60px}
}

/* ===== LINKS, EQUAL SPACING (DOJO, Oct 25 4:12am): ten links on one circle round the vortex, equal gap between neighbours measured along the path, no wobble, clockwise from the top: X, Amazon, Apple Music, TikTok, Instagram, Bandcamp, SoundCloud, Blogger, Rumble, YouTube. 24px clear of the tagline above and the Welcome text below. ===== */
@media(min-width:701px){
 :root{--stageH:728px;--intro-tag-stage:24px;--intro-sandwich-welcome:24px}
 .icons li.spin,.icons li.orb{top:50%}
 .vortex{height:808px}
 .icons li.orb:nth-child(9){--dx:0px;--dy:-320px;--s:72px}
 .icons li.orb:nth-child(2){--dx:185px;--dy:-261px;--s:72px}
 .icons li.orb:nth-child(6){--dx:305px;--dy:-97px;--s:88px}
 .icons li.orb:nth-child(4){--dx:302px;--dy:105px;--s:72px}
 .icons li.orb:nth-child(7){--dx:178px;--dy:266px;--s:88px}
 .icons li.orb:nth-child(5){--dx:-17px;--dy:320px;--s:72px}
 .icons li.orb:nth-child(11){--dx:-199px;--dy:251px;--s:72px}
 .icons li.orb:nth-child(3){--dx:-307px;--dy:89px;--s:72px}
 .icons li.orb:nth-child(8){--dx:-302px;--dy:-105px;--s:72px}
 .icons li.orb:nth-child(10){--dx:-185px;--dy:-261px;--s:72px}
}
@media(max-width:700px){
 :root{--stageH:710px;--intro-tag-stage:24px;--intro-sandwich-welcome:24px;--vf:130px}
 .icons li.spin,.icons li.orb{top:50%}
 .vortex{height:750px}
 .icons li.orb:nth-child(9){--px:0px;--py:-330px;--s:50px}
 .icons li.orb:nth-child(2){--px:112px;--py:-227px;--s:50px}
 .icons li.orb:nth-child(6){--px:150px;--py:-76px;--s:58px}
 .icons li.orb:nth-child(4){--px:149px;--py:80px;--s:50px}
 .icons li.orb:nth-child(7){--px:110px;--py:231px;--s:58px}
 .icons li.orb:nth-child(5){--px:-10px;--py:329px;--s:50px}
 .icons li.orb:nth-child(11){--px:-115px;--py:219px;--s:50px}
 .icons li.orb:nth-child(3){--px:-150px;--py:72px;--s:50px}
 .icons li.orb:nth-child(8){--px:-149px;--py:-80px;--s:50px}
 .icons li.orb:nth-child(10){--px:-112px;--py:-227px;--s:50px}
}
@media(max-width:380px){
 :root{--stageH:704px}
 .vortex{height:744px}
 .icons li.orb:nth-child(9){--px:0px;--py:-330px;--s:44px}
 .icons li.orb:nth-child(2){--px:106px;--py:-224px;--s:44px}
 .icons li.orb:nth-child(6){--px:140px;--py:-75px;--s:50px}
 .icons li.orb:nth-child(4){--px:140px;--py:78px;--s:44px}
 .icons li.orb:nth-child(7){--px:105px;--py:226px;--s:50px}
 .icons li.orb:nth-child(5){--px:-8px;--py:329px;--s:44px}
 .icons li.orb:nth-child(11){--px:-108px;--py:218px;--s:44px}
 .icons li.orb:nth-child(3){--px:-141px;--py:72px;--s:44px}
 .icons li.orb:nth-child(8){--px:-140px;--py:-78px;--s:44px}
 .icons li.orb:nth-child(10){--px:-106px;--py:-224px;--s:44px}
}

/* ===== PLAYER TRACK NUMBERS, BRIGHT EMERALD (DOJO, Oct 25 4:16am): the unplayed track numbers take the bright lit green of the emerald control, not the dark facets. Regular weight, same size and sun shadow, no plate. The streaming line stays metallic gold and the played tracks stay gold. ===== */
:root{--player-number-green:#50C878}
.player .tr:not([data-played]) .no,
.player .tr:not([data-played])[aria-current="true"] .no{
 color:var(--player-number-green)!important;
 -webkit-text-fill-color:var(--player-number-green)!important;
}

/* ===== WELCOME PARAGRAPHS, LAYOUT ONLY (DOJO, Oct 25 4:13am): the font, size, weight, colour, line height and shadow are untouched. The column scales with the screen (820px at 1440, wider on a big display, never narrower than 760px) and the lines are balanced so the ends are even. Paragraph gap stays at the intro scale (56px = 1.33 line heights). ===== */
@media(min-width:701px){
 .introtxt{width:min(calc(100% - 48px),clamp(760px,57vw,1060px))}
 .introtxt p{text-wrap:balance}
}
@media(max-width:700px){.introtxt p{text-wrap:pretty}}

/* ===== EMAIL gold bar (photoreal cast bar image, lettering is real text engraved into the top face) =====
   Top face measured on the image: edges slope about -11 degrees, centre at 49% across and 29% down. Lettering follows that angle exactly, solid dark warm fill, dark inner edge up-left and a thin bright edge down-right (engraved), no stroke, no script. Desktop shows EMAIL over J Y P S Y E Y E. Phones show EMAIL alone in the bar (the name line cannot be read at 130px) and keep the accessible name Email JYPSYEYE. */
.goldbar{--gbw:380px;position:relative;display:inline-block;width:var(--gbw);max-width:100%;line-height:0;min-height:44px;border-radius:14px;text-decoration:none;filter:drop-shadow(2px 9px 9px rgba(8,16,36,.55));transition:filter .25s}
.goldbar .gb-img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none}
.goldbar .gb-lbl{position:absolute;left:49%;top:29%;width:62%;transform:translate(-50%,-50%) rotate(-11deg);display:flex;flex-direction:column;align-items:center;gap:calc(var(--gbw)*.02);line-height:1;pointer-events:none}
.goldbar .mb1,.goldbar .mb2{font-family:var(--nm-font);font-weight:400;font-synthesis:none;white-space:nowrap;color:#4E2D00;-webkit-text-fill-color:#4E2D00;background:none;filter:none;text-shadow:-1px -1px 1px rgba(35,18,0,.55),1px 1px 0 rgba(255,238,175,.9),2px 2px 2px rgba(255,226,140,.35)}
.goldbar .mb1{font-size:calc(var(--gbw)*.078);letter-spacing:.3em;padding-left:.3em}
.goldbar .mb2{font-size:calc(var(--gbw)*.04);letter-spacing:.34em;padding-left:.34em}
.goldbar:hover{filter:drop-shadow(2px 9px 9px rgba(8,16,36,.55)) brightness(1.08) saturate(1.05)}
.goldbar:focus-visible{outline:3px solid var(--gold-hi);outline-offset:6px}
.mailcta{text-align:center;margin:10px 0 4px}
.foot .mailcta{margin:0}
@media(max-width:700px){
 .goldbar{--gbw:33.3vw;min-width:120px}
 .goldbar .mb2{display:none}
 .goldbar .mb1{font-size:calc(var(--gbw)*.115);letter-spacing:.24em;padding-left:.24em}
 .goldbar .gb-lbl{top:30%;width:70%}
 .cta:has(.goldbar){margin:44px 0 44px}
 .foot-mail{margin-top:56px}
 .foot .mailcta{margin:0 0 4px}
}

/* ===== PHONE GAPS EQUAL (DOJO, Oct 25 4:12am order): phone only. The clear space from the nearest link edge to the tagline above equals the clear space from the lowest link edge to the Welcome line below, 26px at 360, 390 and 430. The links sit 5px inside the top of the stage and 3px past its bottom, so the two margins differ by that offset. Desktop untouched. ===== */
@media(max-width:700px){
 :root{--intro-tag-stage:21px;--intro-sandwich-welcome:29.3px}
}
@media(max-width:380px){
 :root{--intro-tag-stage:27px;--intro-sandwich-welcome:26px}
}
@media(min-width:381px) and (max-width:410px){:root{--intro-tag-stage:27px;--intro-sandwich-welcome:26px}}
@media(min-width:411px) and (max-width:700px){:root{--intro-tag-stage:27px;--intro-sandwich-welcome:26px}}

/* ===== PHONE: gentle link float kept small so the clear space never dips under 24px (DOJO, Oct 25 4:12am order). Float is 40 percent of the desktop amount (at most 2.8px). ===== */
@keyframes v-bob-s{to{translate:calc(var(--bx)*.4) calc(var(--by)*.4)}}
@media(max-width:700px){.icons li.orb img{animation-name:v-bob-s}}

/* track numbers: exact lit face of the emerald stone image (#50C878, sampled from --gem-emerald pixels, 48,000 px at 400px), replacing the by-eye #5CF0A0 (DOJO 4:16am) */

/* ===== TAGLINE 15 percent smaller (DOJO, Oct 25 4:54am): 73.6px to 62.5px at 1440, 33.5px to 28.5px at 390. Only the font size changes. ===== */
.tag{font-size:clamp(1.785rem,4.34vw,3.91rem)}
@media(max-width:700px){.tag{font-size:clamp(1.49rem,7.3vw,2.04rem)}}

/* ===== PHOTO ARROWS, small real gems (DOJO, Oct 25 4:53am): too big and cartoonish. The jewel is about half size (38 to 20px desktop, 34 to 18px phone), the 44px tap area stays, the cartoon glow and halo are gone, only the one-sun shadow stays. The faceted stone art is unchanged and both arrows are identical. ===== */
.parr.pprev,.parr.pnext{filter:drop-shadow(1px 2px 2px rgba(8,16,36,.55))}
@media(min-width:701px){
 .parr::before{inset:12px!important}
 .parr svg{width:10px!important;height:10px!important;stroke-width:2.4!important}
}
@media(max-width:700px){
 .parr::before{inset:13px!important}
 .parr svg{width:9px!important;height:9px!important;stroke-width:2.4!important}
}

/* ===== WELCOME BLOCK UP 48px (DOJO, Oct 25 4:52am), desktop only: --intro-sandwich-welcome 24px to -24px, nothing else. The links, portal and tagline do not move. ===== */
@media(min-width:701px){:root{--intro-sandwich-welcome:-24px}}

/* gold bar on phones: at least 40px of air above the footer bar and below it */
@media(max-width:700px){.foot .foot-ask{margin-bottom:40px}.foot .mailcta{margin-bottom:40px}}

/* Blog fix (DOJO, Oct 24-25): card and post dates and description lines are Open Sans bold. Titles stay Michroma. The BLOG title keeps its own lettering. */
.pd,.px,.meta,.meta time,.post .body p{font-family:"Open Sans",var(--sans);font-weight:700;font-style:normal;-webkit-text-stroke:0;letter-spacing:0}
.pd{font-size:.95rem}
/* Blog fix: dates and description lines keep the sun shadow so they stay readable over the bright clouds. Colour roles unchanged for dates (gold-hi); descriptions warm white. */
.pd,.px,.meta{text-shadow:var(--shadow-large)}
.px{color:#FFF8E1}

/* ===== CLEAR WELCOME LINE BELOW BANDCAMP (DOJO, Oct 25 9:53am): restore enough desktop space below the drifting Bandcamp icon for 16px+ visual clearance. Phone page flow is retained; restore the owner-approved 32px line/name and 40px name/copy spacing. ===== */
@media (min-width:1200px) and (max-width:1399px){:root{--intro-sandwich-welcome:104.75px;--intro-welcome-name:94.25px;--intro-name-first-copy:103.25px}}
@media (min-width:1400px) and (max-width:1499px){:root{--intro-sandwich-welcome:105.5px;--intro-welcome-name:92px;--intro-name-first-copy:104px}}
@media (min-width:1500px) and (max-width:1700px){:root{--intro-sandwich-welcome:104.75px;--intro-welcome-name:91.75px;--intro-name-first-copy:102.75px}}
@media (max-width:700px){:root{--intro-sandwich-welcome:33px;--intro-welcome-name:25.5px;--intro-name-first-copy:26.5px}}

/* ===== HOME INQUIRY BAR HALF SIZE (DOJO, Oct 25 9:56am): only the first EMAIL bar, beside the sky/video inquiry band, is half size. Footer and blog bars keep the shared original dimensions. Keep EMAIL alone at readable phone sizing inside the existing 44px minimum hit area. ===== */
#lis-h + .cta{text-align:center}
#lis-h + .cta .goldbar{--gbw:190px;width:190px;max-width:100%;margin-inline:auto}
#lis-h + .cta .goldbar .mb2{display:none}
@media(max-width:700px){
 #lis-h + .cta .goldbar{--gbw:16.667vw;width:var(--gbw);min-width:0;max-width:100%;min-height:44px}
 #lis-h + .cta .goldbar .mb1{font-size:clamp(8px,2.3vw,9.9px);letter-spacing:.08em;padding-left:.08em}
}

/* ===== EVEN POSTER, TAGLINE AND PORTAL SPACING (DOJO, Oct 25 10:34am): adjust only the poster-to-tag and tag-to-stage margins. Visible glyph-to-edge gaps are equal at each target width; poster, tagline styling, portal, links, Welcome and all lower content remain in place. */
@media (min-width:1200px) and (max-width:1399px){:root{--intro-poster-tag:109.75px;--intro-tag-stage:90.25px}}
@media (min-width:1400px) and (max-width:1499px){:root{--intro-poster-tag:110px;--intro-tag-stage:90px}}
@media (min-width:1500px) and (max-width:1700px){:root{--intro-poster-tag:109.75px;--intro-tag-stage:90.25px}}
@media (max-width:700px){:root{--intro-poster-tag:35.7px;--intro-tag-stage:31.3px}}

/* ===== FIVE INTRO GAPS, ONE EQUAL VALUE PER WIDTH CLASS (DOJO, Oct 25): poster to tagline, tagline to portal, portal to Welcome line (and so the Bandcamp link to the Welcome line), Welcome line to name, name to first paragraph. Values below are the CSS variables, each set so the measured gap is 100px on desktop and 30px on phone. Spacing only. ===== */
@media(min-width:701px){:root{--intro-top:32px;--intro-poster-tag:32px;--intro-tag-stage:89.2px;--intro-sandwich-welcome:96.8px;--intro-welcome-name:98.4px;--intro-name-first-copy:100px}}
@media(max-width:700px){:root{--intro-top:10px;--intro-poster-tag:10px;--intro-tag-stage:28.9px;--intro-sandwich-welcome:30.1px;--intro-welcome-name:29px;--intro-name-first-copy:30px}}

/* ===== Player: turquoise out (DOJO, Oct 25 4:33pm): no turquoise in the player. Times (rows and the 00:00 / 03:50 clock) take the same pearl cream as the track titles. Unplayed track numbers take the lit emerald of the control stones (#00C46A, the lit facet of --stone-emerald) with the green sun shadow. Colour only. Played rows, streaming line, heading, stones, panel, spacing untouched. ===== */
:root{--player-number-emerald:#00C46A}
.player .tr:not([data-played]) .du,
.player .tr:not([data-played])[aria-current="true"] .du,
.player .tm{
 color:var(--player-opal-base)!important;
 -webkit-text-fill-color:var(--player-opal-base)!important;
 text-shadow:var(--player-extra-sun)!important;
}
.player .tr:not([data-played]) .no,
.player .tr:not([data-played])[aria-current="true"] .no{
 color:var(--player-number-emerald)!important;
 -webkit-text-fill-color:var(--player-number-emerald)!important;
 text-shadow:var(--player-green-sun)!important;
}

/* ===== Player: faded silver family (DOJO, Oct 25 5:23pm): track numbers, titles and times (rows and the 00:00 / 03:50 clock) move from emerald and pearl cream to one cool silver family. Titles and times #E6EAEF, numbers one step deeper #D5DCE4, all with the green sun shadow. Colour only. Played rows, streaming line, heading, Now Playing, Download pills, stones, panel and spacing untouched. ===== */
:root{--player-silver:#E6EAEF;--player-silver-deep:#D5DCE4}
.player .tr:not([data-played]) .ti,
.player .tr:not([data-played])[aria-current="true"] .ti,
.player .tr:not([data-played]) .du,
.player .tr:not([data-played])[aria-current="true"] .du,
.player .tm{
 color:var(--player-silver)!important;
 -webkit-text-fill-color:var(--player-silver)!important;
 text-shadow:var(--player-green-sun)!important;
}
.player .tr:not([data-played]) .no,
.player .tr:not([data-played])[aria-current="true"] .no{
 color:var(--player-silver-deep)!important;
 -webkit-text-fill-color:var(--player-silver-deep)!important;
 text-shadow:var(--player-green-sun)!important;
}

/* Player: the time on a played row also takes the silver (it was still the old turquoise). The gold number and title of a played row are untouched. */
.player .tr[data-played] .du,
.player .tr[data-played][aria-current="true"] .du{
 color:var(--player-silver)!important;
 -webkit-text-fill-color:var(--player-silver)!important;
 text-shadow:var(--player-green-sun)!important;
}

/* ===== Player panel: neutral silver veil (DOJO, Oct 25 5:49pm and 5:55pm): the faded leaf green of the glass becomes a faded neutral gray at the same half strength (alpha .16125 stays), so the white album shows clearly through and the face reads as one piece with it. Print takes a neutral pearl family for best visibility on the new face: titles, times and clock #F6F7F9, numbers one step deeper #E2E5EA, with the sun shadow. Colour only. Gold frame, heading, emerald stones, sapphire, played rows, streaming line, Download pills, fonts, sizes and spacing untouched. ===== */
:root{--pl-green:118,118,118;--player-silver:#F6F7F9;--player-silver-deep:#E2E5EA}

/* Player streaming line (DOJO, Oct 25 6:01pm): the "Prefer a streaming app?" line and its four links leave the metallic gold for the same neutral pearl as the track titles. Paint only: the gold fill, bronze rim and gold filter come off; size 17.2px, position, centring, underline and links are untouched; the sun shadow stays. */
.player .alt-listen,
.player .alt-listen a,
.player .alt-listen a:hover,
.player .alt-listen a:focus-visible{
 background:none!important;
 background-image:none!important;
 filter:none!important;
 -webkit-text-stroke:0!important;
 paint-order:normal!important;
 color:var(--player-silver)!important;
 -webkit-text-fill-color:var(--player-silver)!important;
 text-decoration-color:var(--player-silver)!important;
 text-shadow:var(--player-green-sun)!important;
}

/* ===== PHONES: every animation plays even with Reduce Motion on (DOJO, Oct 25 7:22pm). Phones only (touch, 700px and under). The portal (vortex, rings, centre link, drifting links) is not touched here. ===== */
@media (prefers-reduced-motion:reduce) and (hover:none) and (pointer:coarse) and (max-width:700px){
 /* scroll-in fade of the player and welcome block */
 .js .reveal{opacity:0;transition:opacity .4s ease,transform .4s ease!important}
 .js .reveal.in{opacity:1}
 /* scroll-linked fade of the painting and the jukebox picture */
 [data-fade]{opacity:var(--fade-o,0)!important}
 /* the road keeps its pinned scroll motion */
 .road{position:sticky;height:100svh;aspect-ratio:auto}
 .road .roadbox{height:min(100svh,961px);aspect-ratio:auto}
 .flow{margin-top:0}
 .scene{display:block}
 .window .wmedia{top:calc(-1*100svh);height:calc(200svh + 100%)}
 .window .roadimg{position:sticky;height:100svh}
 /* footer odometer rolls */
 .odo.spin .reel{animation:odoRoll 2.6s cubic-bezier(.16,.8,.2,1) both!important}
 .odo.spin .drum:nth-child(1) .reel{animation-duration:1.6s!important}.odo.spin .drum:nth-child(2) .reel{animation-duration:1.9s!important}.odo.spin .drum:nth-child(3) .reel{animation-duration:2.2s!important}.odo.spin .drum:nth-child(4) .reel{animation-duration:2.5s!important}.odo.spin .drum:nth-child(5) .reel{animation-duration:2.8s!important}.odo.spin .drum:nth-child(6) .reel{animation-duration:3.1s!important}
}


/* ===== ELECTRIC VORTEX (DOJO, Oct 25 2026), DESKTOP ONLY: a second light layer on the live vortex (same class, so the same top and bottom dissolve), rings and slow electricity pulling in from the page edges to the spinning link. The ten links also turn slowly on their own axes while they drift. Nothing here applies on phones or touch screens. ===== */
#fxe{opacity:0;transition:opacity 2.6s ease;mix-blend-mode:screen}
#fxe.on{opacity:1}
@keyframes v-turn{to{rotate:360deg}}
@media(min-width:701px) and (not (pointer:coarse)) and (not (any-pointer:coarse)){
 .icons li.orb img{animation:v-bob var(--bp,9s) ease-in-out infinite alternate,v-turn var(--tp,60s) linear infinite var(--td,normal)}
 .icons li.orb:nth-child(2){--tp:52s;--td:normal}
 .icons li.orb:nth-child(3){--tp:64s;--td:reverse}
 .icons li.orb:nth-child(4){--tp:76s;--td:normal}
 .icons li.orb:nth-child(5){--tp:58s;--td:reverse}
 .icons li.orb:nth-child(6){--tp:70s;--td:normal}
 .icons li.orb:nth-child(7){--tp:46s;--td:reverse}
 .icons li.orb:nth-child(8){--tp:84s;--td:normal}
 .icons li.orb:nth-child(9){--tp:60s;--td:reverse}
 .icons li.orb:nth-child(10){--tp:72s;--td:normal}
 .icons li.orb:nth-child(11){--tp:66s;--td:reverse}
}
@media(prefers-reduced-motion:reduce){#fxe{transition:none}}

/* ===== FOOTER FINISH, option A tight and quiet (DOJO, Oct 25 11:23pm). Desktop only: spacing of the stack under the gold bar, nothing else. ===== */
@media (min-width:701px) and (not (pointer:coarse)) and (not (any-pointer:coarse)){
 .foot .foot-copy{margin-top:38px}
 .foot .foot-copy .foot-mark{margin-bottom:10px}
 .foot .odo-stack{margin-top:35px}
 .foot{padding-bottom:58px}
}

/* ===== FOOTER FINISH, phone (DOJO, Oct 25 11:42pm): same tight and quiet gaps under the footer gold bar. Spacing only. ===== */
@media (max-width:700px){
 .foot .foot-copy{margin-top:30px}
 .foot .foot-copy .foot-mark{margin-bottom:10px}
 .foot .odo-stack{margin-top:28px}
 .foot{padding-bottom:60px}
}