/* Chinwe Zoe v13 "The era": the site dressed in Jesus Don Win. Tokens from BRIEF.md */
:root{
  --bg:#1C0B2B; --lift:#2A1440; --lift-2:#3A1D55; --lilac:#CDB8D9; --lilac-2:#A992B8; --tx:#F4EEF7; --gold:#D9A84A;
  --head:"Oswald",system-ui,sans-serif; --text:"Barlow",system-ui,sans-serif;
  --gut:clamp(16px,3.4vw,48px); --max:1320px;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.005em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:99;background:var(--lilac);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 26px;border-radius:999px;font:700 19px/1 var(--head);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;border:1.5px solid var(--tx);color:var(--tx);background:transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .35s}
.btn::before{content:"";position:absolute;inset:0;background:var(--tx);transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{color:var(--bg)} .btn:hover::before{transform:none}
.btn--solid{background:var(--lilac);border-color:var(--lilac);color:var(--bg)}
.btn--solid::before{background:var(--tx)}
.arrow{width:18px;height:12px}

/* bar: full width over the hero, shrinks to a floating pill on scroll (Resizable Navbar) */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:center;padding-top:14px;pointer-events:none}
.bar__in{pointer-events:auto;display:flex;align-items:center;gap:26px;width:min(var(--max),100% - 2*var(--gut));height:58px;padding:0 6px 0 4px;border-radius:999px;transition:width .5s cubic-bezier(.7,0,.2,1),background .4s,padding .4s,box-shadow .4s}
.bar.small .bar__in{width:min(920px,100% - 2*var(--gut));background:rgba(28,11,43,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:0 8px 0 22px;box-shadow:0 0 0 1px rgba(205,184,217,.18)}
.bar__name{font:700 25px/1 var(--head);text-transform:uppercase;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.bar__nav{display:flex;gap:4px;margin-left:auto}
.bar__nav a{font:700 17px/1 var(--head);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:10px 14px;border-radius:999px;position:relative}
.bar__nav a[aria-current=page]{color:var(--gold)}
.bar__nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.bar__nav a:hover::after,.bar__nav a[aria-current=page]::after{transform:scaleX(1)}
.bar .btn{min-height:44px;padding:0 20px;font-size:17px}
.bar__menu{display:none;background:none;border:0;color:var(--tx);font:700 19px/1 var(--head);text-transform:uppercase;letter-spacing:.04em;padding:12px 8px;cursor:pointer;margin-left:auto}

/* phone sheet: plain rows (Kevin 23 Oct) */
.sheet{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;padding:18px var(--gut) 28px;transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet__top{display:flex;justify-content:space-between;align-items:center;height:48px}
.sheet__top button{background:none;border:0;color:var(--tx);font:700 19px var(--head);text-transform:uppercase;cursor:pointer;padding:10px}
.sheet nav{display:flex;flex-direction:column;margin-top:34px}
.sheet nav a{font:700 clamp(44px,13vw,64px)/1.08 var(--head);text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--rule);padding:8px 0}
.sheet nav a[aria-current=page]{color:var(--gold)}
.sheet .marks{margin-top:auto}

/* hero: the era */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#cfc3d6}
.hero__photo,.hero canvas{position:absolute;inset:-4% 0 0 0;width:100%;height:104%;object-fit:cover;object-position:50% 22%}
.hero canvas{opacity:0;transition:opacity 1.2s}
.hero canvas.on{opacity:1}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,11,43,.72) 0,rgba(28,11,43,0) 150px),radial-gradient(62% 62% at 4% 14%,rgba(28,11,43,.9),rgba(28,11,43,.55) 45%,rgba(28,11,43,0) 78%),linear-gradient(180deg,rgba(28,11,43,0) 55%,rgba(28,11,43,.92) 100%)}
.hero__title{position:absolute;left:var(--gut);top:clamp(96px,13vh,140px);width:clamp(300px,42vw,640px);color:var(--gold);filter:drop-shadow(0 2px 2px rgba(28,11,43,.55)) drop-shadow(0 4px 26px rgba(28,11,43,.6))}
.hero__title svg{width:100%;height:auto}
.hero__title path{stroke:var(--gold);stroke-width:1.4;vector-effect:non-scaling-stroke}
.hero__foot{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,5vh,48px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* section heads: italic caps with a long hairline that draws across */
.sec{padding:clamp(64px,9vw,120px) 0 0}
.head{display:flex;align-items:center;gap:22px;margin-bottom:clamp(26px,3.4vw,44px)}
.head h2{font-size:clamp(34px,4.4vw,58px);white-space:nowrap}
.head i{flex:1;height:1px;background:var(--lilac);transform-origin:left;opacity:.55}
.head .more{font:700 17px var(--head);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px}

/* listen */
.listen{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center}
.listen__art{position:relative;aspect-ratio:1;border-radius:16px}
.listen__art::before{content:"";position:absolute;inset:6%;background:url(/assets/art/jesus-don-win-240.webp) center/cover;filter:blur(46px) saturate(1.5);opacity:.75;z-index:0;transform:scale(1.08)}
.listen__art img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.listen__date{font:700 clamp(30px,3vw,44px)/1 var(--head);text-transform:uppercase;margin-bottom:18px}
.listen__on{font-size:15px;color:var(--lilac);margin:22px 0 12px}
.player{background:var(--lift);border-radius:18px;padding:12px;box-shadow:0 0 0 1px var(--rule)}
.player iframe{width:100%;height:152px;border:0;border-radius:12px;background:var(--lift-2)}
.marks{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.marks a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--mark-line);transition:background .3s,color .3s,border-color .3s}
.marks a:hover{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.marks .ico{width:22px;height:22px;fill:currentColor}
.marks a:hover img.ico{filter:brightness(0)}
.listen__note{font-size:15px;color:var(--lilac);margin-top:14px}

/* videos */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.vid{display:block;text-align:left;background:none;border:0;padding:0;color:var(--tx);cursor:pointer;font:inherit}
.vid__img{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--lift)}
.vid__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.vid__img::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(205,184,217,.35) 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s}
.vid:hover .vid__img img{transform:scale(1.07)} .vid:hover .vid__img::after{transform:translateX(120%)}
.vid__play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--tx);display:grid;place-items:center;transition:transform .3s}
.vid__play svg{width:20px;height:20px;fill:var(--bg);margin-left:3px}
.vid:hover .vid__play{transform:scale(1.12)}
.vid__row{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
.vid__row b{font:700 22px/1.05 var(--head);text-transform:uppercase}
.vid__row span{font-size:15px;color:var(--lilac);text-align:right}

/* songs wall: each title in its own lettering; flips to the cover */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.song{display:block;text-decoration:none;perspective:1400px}
.song__card{position:relative;aspect-ratio:1;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.25,.4,1)}
.song:hover .song__card,.song:focus-visible .song__card{transform:rotateY(180deg)}
.song__face{position:absolute;inset:0;border-radius:14px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;padding:12%}
.song__face--back{transform:rotateY(180deg);padding:0}
.song__face--back img{width:100%;height:100%;object-fit:cover}
.song__face svg{width:100%;height:auto}
.s-jdw{background:radial-gradient(120% 90% at 30% 20%,#4B1E6B,#2B0F3F 70%);color:var(--gold)}
.s-und{background:linear-gradient(160deg,#9A5631,#6B3418);color:#FFF8F0}
.s-chi{background:radial-gradient(90% 70% at 50% 0%,#2A2116,#0B0809 75%);color:var(--gold)}
.song__cap{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:15px;color:var(--lilac)}
.song__cap b{font:700 22px/1 var(--head);text-transform:uppercase;color:var(--tx)}

/* book band */
.book{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.book__ph{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--lift)}
.book__ph img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.book h3{font-size:clamp(46px,6.4vw,92px);margin-bottom:18px}
.book p{font-size:clamp(18px,1.5vw,21px);color:var(--lilac);max-width:30ch;margin-bottom:28px}

/* sign up */
.signup{border:1.5px solid var(--box-line);border-radius:20px;padding:clamp(24px,4vw,52px);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(20px,4vw,56px);align-items:end}
.signup h3{font-size:clamp(38px,4.4vw,64px)}
.signup p.lead{color:var(--lilac);margin-top:12px}
.signup form{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:end}
.field label{display:block;font-size:14px;color:var(--lilac);margin-bottom:6px}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--tx);color:var(--tx);font:500 17px var(--text);padding:8px 0;border-radius:0}
.field input:focus,.field textarea:focus{border-color:var(--gold-text)}
.consent{grid-column:1/-1;font-size:14px;color:var(--lilac)}
.sent{grid-column:1/-1;color:var(--gold);font-weight:600}

/* footer */
.foot{margin-top:clamp(70px,9vw,120px);border-top:1px solid var(--rule);padding:30px 0 40px}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.foot small{font-size:14px;color:var(--lilac)}
.foot nav{display:flex;gap:18px;font-size:14px} .foot nav a{color:var(--lilac);text-decoration:none} .foot nav a:hover{color:var(--tx)}

/* dialog */
dialog.vd{border:0;padding:0;background:transparent;width:min(1100px,94vw);max-height:90vh;overflow:visible}
dialog.vd::backdrop{background:rgba(12,4,20,.86)}
dialog.vd .frame{aspect-ratio:16/9;width:100%;border-radius:14px;overflow:hidden;background:#000}
dialog.vd iframe{width:100%;height:100%;border:0}
dialog.vd button{position:absolute;right:0;top:-54px;background:none;border:1.5px solid var(--tx);color:var(--tx);border-radius:999px;padding:8px 18px;font:700 17px var(--head);text-transform:uppercase;cursor:pointer}

.totop{position:fixed;right:18px;bottom:18px;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--tx);background:var(--bar-bg);color:var(--tx);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s;z-index:40}
.totop.show{opacity:1;pointer-events:auto} .totop svg{width:18px;height:18px}

/* inner pages */
.page-top{padding:clamp(130px,16vw,190px) 0 0}
.page-top h1{font-size:clamp(64px,11vw,168px)}
.page-top p{color:var(--lilac);font-size:clamp(18px,1.6vw,21px);margin-top:16px;max-width:46ch}
.track{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(48px,6vw,80px) 0;border-bottom:1px solid var(--rule)}
.track__art{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1}
.track__art img{width:100%;height:100%;object-fit:cover}
.track__title{color:var(--gold);width:min(100%,520px);margin-bottom:22px}
.track__title.und{color:#FFF8F0}
.track p{color:var(--lilac);margin-bottom:22px;max-width:46ch}
.track .player{margin-bottom:18px}
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start;padding-top:clamp(40px,5vw,70px)}
.story__ph{position:sticky;top:110px;border-radius:16px;overflow:hidden;aspect-ratio:4/5}
.story__ph img{width:100%;height:100%;object-fit:cover}
.story__body p{font-size:clamp(18px,1.4vw,20px);margin-bottom:1.1em;max-width:62ch}
.quote{margin:44px 0;padding:28px 0;border-block:1px solid var(--lilac)}
.quote p{font:700 clamp(34px,4vw,56px)/1.02 var(--head);text-transform:uppercase;max-width:none}
.quote small{display:block;margin-top:12px;color:var(--lilac);font-size:15px}
.slider{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/8;background:var(--lift);margin-top:clamp(36px,5vw,64px)}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s,transform 6s linear}
.slider img.on{opacity:1;transform:scale(1)}
.slider__nav{position:absolute;right:16px;bottom:16px;display:flex;gap:8px}
.slider__nav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--tx);background:rgba(28,11,43,.6);color:var(--tx);cursor:pointer;display:grid;place-items:center}
.slider__nav svg{width:18px;height:12px}
.masonry{columns:3 280px;column-gap:14px;margin-top:14px}
.masonry figure{margin:0 0 14px;break-inside:avoid;border-radius:12px;overflow:hidden;background:var(--lift)}
.masonry img{width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.masonry figure:hover img{transform:scale(1.04)}
.bookpage{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,80px);padding-top:clamp(40px,5vw,70px)}
.bookform{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.bookform .full{grid-column:1/-1}
.press{background:var(--lift);border-radius:16px;padding:26px}
.press h2{font-size:30px;margin-bottom:14px}
.press dl{margin:0;display:grid;gap:12px}
.press dt{font-size:14px;color:var(--lilac)} .press dd{margin:0;font-weight:600}
.nf{min-height:80svh;display:grid;place-items:center;text-align:center}
.nf h1{font-size:clamp(90px,18vw,220px);color:var(--gold)}

/* motion: things render finished; JS adds .pre only to what is below the fold and watched (core 4c rule 8) */
.pre{opacity:0;transform:translateY(40px)}
.pre.in{opacity:1;transform:none;transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1)}
.pre[data-in=zoom]{transform:scale(.9)}
.pre[data-in=left]{transform:translateX(-60px)}
.pre[data-in=clip]{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.pre[data-in=clip].in{clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.head.pre{opacity:1;transform:none} .head.pre i{transform:scaleX(0)} .head.pre h2{transform:translateY(105%)}
.head{overflow:hidden} .head.pre.in i{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.7,0,.2,1) .15s} .head.pre.in h2{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1)}

@media (max-width:980px){
  .bar__nav,.bar .btn{display:none} .bar__menu{display:block}
  .bar.small .bar__in{padding:0 6px 0 18px}
  .listen,.book,.signup,.track,.story,.bookpage{grid-template-columns:1fr}
  .signup form{grid-template-columns:1fr}
  .vids{grid-template-columns:1fr 1fr} .vids .vid:last-child{grid-column:1/-1}
  .story__ph{position:relative;top:0;aspect-ratio:4/4.4}
}
@media (max-width:640px){
  .hero{height:100svh;min-height:560px}
  .hero__photo,.hero canvas{object-position:50% 18%}
  .hero__title{top:auto;bottom:178px;width:min(78vw,340px)}
  .hero__foot{flex-direction:column-reverse;align-items:stretch}
  .hero__cta{display:grid;grid-template-columns:1fr 1fr}
  .hero__cta .btn{padding:0 10px}
       .foot{padding-bottom:84px}
  .vids,.wall{grid-template-columns:1fr} .vids .vid:last-child{grid-column:auto}
  .head{gap:14px} .head .more{display:none}
  .slider{aspect-ratio:4/5}
  .bookform{grid-template-columns:1fr}
}
.song.flip .song__card{animation:flipOnce 2.4s cubic-bezier(.3,1.1,.4,1) .3s}
@keyframes flipOnce{0%,100%{transform:none}35%,65%{transform:rotateY(180deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero canvas{display:none}
  .song:hover .song__card{transform:none}
}

/* ===== Kevin, 30 Oct: light and dark, new phone menu, one-line icon rows, designed footer ===== */
:root{--mark-line:rgba(244,238,247,.55);--box-line:rgba(244,238,247,.7);--bar-bg:rgba(28,11,43,.82);--rule:rgba(205,184,217,.22);--on-photo:#F4EEF7}
[data-theme=light]{--mark-line:rgba(42,15,61,.4);--box-line:rgba(42,15,61,.45);--bg:#F3EDF7;--lift:#E7DDEF;--lift-2:#D9CBE4;--lilac:#5E3F75;--lilac-2:#7A5E8F;--tx:#2A0F3D;--bar-bg:rgba(243,237,247,.86);--rule:rgba(42,15,61,.16)}
html{background:var(--bg)}
body{transition:background-color .45s,color .45s}
[data-theme=light] .btn--solid{color:#F3EDF7}
[data-theme=light] .marks a:hover img.ico{filter:brightness(0) invert(1)}
[data-theme=light] .marks img.ico{filter:brightness(0) saturate(100%) invert(9%) sepia(40%) saturate(3000%) hue-rotate(260deg)}
.bar.small .bar__in{background:var(--bar-bg);box-shadow:0 0 0 1px var(--rule)}
.bar:not(.small){color:var(--on-photo)}
.bar:not(.small) .theme{color:var(--on-photo);border-color:rgba(244,238,247,.55)}
.hero .btn{color:var(--on-photo);border-color:var(--on-photo)}
.hero .btn--solid{background:#CDB8D9;border-color:#CDB8D9;color:#1C0B2B}
.hero .btn:not(.btn--solid):hover{color:#1C0B2B} .hero .btn::before{background:#F4EEF7}
.head i,.quote{border-color:var(--lilac)}
.foot{border-top:1px solid var(--rule)}

/* theme toggle (21st Theme Toggle idea, rebuilt): a moon and a sun that swap with a turn */
.theme{position:relative;width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--rule);background:transparent;color:var(--tx);cursor:pointer;display:grid;place-items:center;overflow:hidden}
.theme span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .55s cubic-bezier(.6,0,.2,1),opacity .4s}
.theme svg{width:20px;height:20px}
.theme__sun{transform:rotate(-90deg) scale(.4);opacity:0}
[data-theme=light] .theme__moon{transform:rotate(90deg) scale(.4);opacity:0}
[data-theme=light] .theme__sun{transform:none;opacity:1}
.bar .theme{margin-left:6px}

/* phone menu: big upright rows that rise in, the new song as a card, six marks on one line */
.sheet nav a{display:flex;align-items:center;justify-content:space-between;opacity:0;transform:translateY(24px);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1),color .3s;border-bottom:1px solid var(--rule)}
.sheet nav a::after{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.sheet nav a[aria-current=page]::after{opacity:1;transform:none}
.sheet.open nav a{opacity:1;transform:none}
.sheet.open nav a:nth-child(2){transition-delay:.05s}.sheet.open nav a:nth-child(3){transition-delay:.1s}.sheet.open nav a:nth-child(4){transition-delay:.15s}.sheet.open nav a:nth-child(5){transition-delay:.2s}.sheet.open nav a:nth-child(6){transition-delay:.25s}
.now{display:flex;align-items:center;gap:14px;margin-top:26px;padding:10px 12px 10px 10px;border-radius:16px;background:var(--lift);text-decoration:none;opacity:0;transform:translateY(16px);transition:opacity .5s .3s,transform .6s .3s}
.sheet.open .now{opacity:1;transform:none}
.now img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.now span{display:flex;flex-direction:column;line-height:1.15}
.now small{font-size:13px;color:var(--lilac)} .now b{font:700 20px/1.1 var(--head);text-transform:uppercase}
.now i{margin-left:auto;width:44px;height:44px;border-radius:50%;background:var(--tx);display:grid;place-items:center}
.now i svg{width:16px;height:16px;fill:var(--bg);margin-left:2px}
.sheet__foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marks--sm{flex-wrap:nowrap;gap:8px}
.marks--sm a{width:40px;height:40px}
.marks--sm .ico{width:18px;height:18px}

/* footer: one designed line, then the base line */
.foot .wrap{display:block}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.foot__name{font:700 clamp(30px,4vw,48px)/1 var(--head);text-transform:uppercase;text-decoration:none;letter-spacing:.01em}
.foot__base{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px}
.foot__base small{font-size:14px;color:var(--lilac)}
@media (max-width:640px){
  .foot__row{flex-direction:column;align-items:flex-start;gap:16px}
  .foot .marks--sm{gap:6px} .foot .marks--sm a{width:38px;height:38px}
  .bar .theme{display:none}
  .sheet nav a{font-size:clamp(40px,11.5vw,54px)}
}
@media (max-width:360px){.marks--sm{gap:5px}.marks--sm a{width:34px;height:34px}.marks--sm .ico{width:16px;height:16px}}

/* story page, revamped 30 Oct: photo opening, lead paragraph, quote band, songs alongside */
.st-hero{position:relative;height:min(78svh,760px);min-height:440px;overflow:hidden;display:flex;align-items:flex-end;padding-bottom:clamp(28px,5vw,64px)}
.st-hero img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:50% 30%;will-change:transform}
.st-hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,11,43,.55) 0,rgba(28,11,43,0) 30%,rgba(28,11,43,0) 50%,rgba(28,11,43,.88) 100%)}
.st-hero .wrap{position:relative} .st-hero h1{font-size:clamp(64px,11vw,168px);color:#F4EEF7}
.st{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);padding-top:clamp(48px,6vw,90px)}
.st__side{position:sticky;top:110px;align-self:start;display:grid;gap:12px}
.st__label{font-size:14px;color:var(--lilac);margin-bottom:4px}
.st__song{display:flex;align-items:center;gap:14px;text-decoration:none;padding:8px;border-radius:12px;transition:background .3s}
.st__song:hover{background:var(--lift)}
.st__song img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.st__song span{font:700 20px/1.1 var(--head);text-transform:uppercase}
.st__side .btn{margin-top:12px;justify-self:start}
.st__body p{font-size:clamp(18px,1.4vw,20px);margin-bottom:1.2em;max-width:60ch}
.st__body .st__lead{font-size:clamp(24px,2.4vw,34px);line-height:1.35;max-width:30ch}
.st-quote{margin-top:clamp(40px,6vw,80px);background:var(--lift);padding:clamp(48px,8vw,110px) 0;text-align:center}
.st-quote p{font:700 clamp(44px,7vw,108px)/.98 var(--head);text-transform:uppercase;max-width:14ch;margin:0 auto}
.st-quote small{display:block;margin-top:18px;color:var(--lilac);font-size:15px}
.st--end{padding-top:clamp(40px,5vw,70px)}
@media (max-width:980px){.st{grid-template-columns:1fr}.st__side{position:static;order:2}.st--end>div:first-child{display:none}}
.press__dl{margin-top:22px;width:100%} .press__note{font-size:13px;color:var(--lilac);margin-top:8px;text-align:center}
/* round 3 fixes: no orphan words in headings, footer clear of the back-to-top button */
h1,h2,h3,.st-quote p{text-wrap:balance}
.book h3{font-size:clamp(44px,5.4vw,80px)}
.foot__base{padding-right:66px}
.btn{white-space:nowrap}
@media (max-width:640px){.hero__cta .btn{font-size:16px;padding:0 12px;letter-spacing:.02em}}
@media (max-width:350px){.hero__cta{grid-template-columns:1fr}}
.bar:not(.small) .bar__menu{color:var(--on-photo)}

/* ===== PDOS pass 4 fixes, 30 Oct ===== */
:root{--gold-text:#D9A84A;--focus:#D9A84A;color-scheme:dark}
[data-theme=light]{--gold-text:#7A5410;--focus:#2A0F3D;color-scheme:light}
:focus-visible{outline-color:var(--focus)}
.bar__nav a[aria-current=page],.sheet nav a[aria-current=page],.sent,.nf h1{color:var(--gold-text)}
.bar:not(.small) .bar__nav a[aria-current=page]{color:#E9C77E}
.track__title{color:var(--gold-text)}
[data-theme=light] .track__title.und{color:#6B3418}
/* hero: darker backing under the gold title and the bar, so both read over the pale chiffon */
.hero__title::before{content:"";position:absolute;inset:-18% -14% -22% -10%;background:radial-gradient(closest-side,rgba(28,11,43,.78),rgba(28,11,43,.5) 60%,rgba(28,11,43,0));z-index:-1;pointer-events:none}
.hero__title{isolation:isolate}
.hero__veil{background:linear-gradient(180deg,rgba(28,11,43,.82) 0,rgba(28,11,43,.35) 110px,rgba(28,11,43,0) 190px),radial-gradient(62% 62% at 4% 14%,rgba(28,11,43,.9),rgba(28,11,43,.55) 45%,rgba(28,11,43,0) 78%),linear-gradient(180deg,rgba(28,11,43,0) 50%,rgba(28,11,43,.94) 100%)}
.bar:not(.small) .bar__nav a,.bar:not(.small) .bar__name,.bar:not(.small) .bar__menu{text-shadow:0 1px 10px rgba(28,11,43,.7)}
@media (max-width:640px){.hero__veil{background:linear-gradient(180deg,rgba(28,11,43,.82) 0,rgba(28,11,43,.3) 100px,rgba(28,11,43,0) 170px),linear-gradient(180deg,rgba(28,11,43,0) 38%,rgba(28,11,43,.72) 60%,rgba(28,11,43,.95) 100%)}}
/* video dialog close button keeps its light colour in both themes */
dialog.vd button{color:#F4EEF7;border-color:#F4EEF7}
/* forms: a ring you can see, a required marker, an error line */
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:2px}
.req{color:var(--lilac);font-size:13px}
.err{color:#F2A0A8;font-size:14px;margin-top:6px} [data-theme=light] .err{color:#A3172A}
.field input[aria-invalid=true]{border-bottom-color:#F2A0A8} [data-theme=light] .field input[aria-invalid=true]{border-bottom-color:#A3172A}
.field input[type=date]{min-height:41px}
.consent{max-width:70ch}
.st__body p{max-width:56ch}
/* back to top: out of the tab order while hidden */
.totop:not(.show){visibility:hidden}
/* phone menu: 44px marks on one line, toggle beside Close, scrolls on short phones */
.sheet{overflow-y:auto}
.sheet__tools{display:flex;align-items:center;gap:6px}
.marks--sm a{width:44px;height:44px} .marks--sm{gap:6px}
.sheet__top .bar__name{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:640px){.foot .marks--sm{gap:4px}.foot .marks--sm a{width:44px;height:44px}}
@media (max-width:360px){.marks--sm a,.foot .marks--sm a{width:40px;height:40px}.marks--sm{gap:3px}}
/* third-party frames get a visible ring when focus is inside them */
.player:focus-within{outline:2px solid var(--focus);outline-offset:3px}
/* slider pause */
.slider__pause svg{width:16px;height:16px} .slider__pause.is-paused svg path{d:path("M6 3l9 6-9 6z");fill:currentColor;stroke:none}
.slider__nav button{color:#F4EEF7;border-color:#F4EEF7;background:rgba(28,11,43,.6)}
.wall--two{grid-template-columns:repeat(2,1fr);max-width:880px}
@media (max-width:640px){.wall--two{grid-template-columns:1fr}}

/* PDOS pass 4, round 2 */
.hero__title path{stroke:rgba(20,6,32,.92);stroke-width:5px;paint-order:stroke fill;vector-effect:non-scaling-stroke;stroke-linejoin:round}
@media (max-width:640px){.hero__title path{stroke-width:4px}}
:focus-visible{box-shadow:0 0 0 5px var(--bg)}
.btn:focus-visible{outline-offset:4px}
.pre:focus,.pre:focus-within{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
.totop.at-foot{opacity:0;pointer-events:none;visibility:hidden}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent a{color:inherit}
.legal{max-width:68ch;margin-top:26px}
.legal h2{font-size:clamp(24px,2.4vw,32px);margin:34px 0 10px}
.legal p{color:var(--tx);opacity:.9;margin-bottom:12px}
.foot__base small a{color:inherit}

/* ===== PDOS pass 5 fixes, 30 Oct ===== */
.book__h{font-size:clamp(44px,5.4vw,80px);margin-bottom:18px}
.signup__h{font-size:clamp(38px,4.4vw,64px)}
/* errors sit under the line without pushing the row out of line */
.signup .field{position:relative}
.signup .field .err{position:absolute;left:0;top:100%;margin-top:6px;white-space:nowrap}
.signup form{row-gap:34px}
/* light theme: lettering in deep plum, not a muddy gold */
[data-theme=light] .track__title:not(.und){color:#3B1550}
/* music page buttons */
.track__btns{display:flex;flex-wrap:wrap;gap:12px}
.track p{text-wrap:pretty}
/* "All music" tile on song pages */
.s-all{background:var(--lift);color:var(--tx);border:1.5px solid var(--rule)}
.s-all span{font:700 clamp(26px,2.6vw,38px)/1 var(--head);text-transform:uppercase;display:flex;align-items:center;gap:12px}
.song--all .song__card{transform:none!important}
@media (max-width:640px){.wall{row-gap:34px}}
/* slider: a gentler crop so heads and geles stay in */
.slider{aspect-ratio:16/9}
@media (max-width:640px){.slider{aspect-ratio:4/5}}
/* footer: no reserved space now that back-to-top steps aside at the footer */
.foot__base{padding-right:0}
/* back to top only while scrolling up, so it never parks on the artwork */
.totop.show:not(.up){opacity:0;pointer-events:none;visibility:hidden}
.song__face.s-all svg.arrow{width:36px;height:24px;flex:none}