/* Francoobla Music: Apple Music-style layout (sidebar, shelves, tracklist, persistent player). Light theme. Change --ac to re-colour. */
:root{--bg:#fff;--sf:#f5f4f1;--ink:#1d1d1f;--gr:#6e6e73;--ln:#e5e2dc;--ac:#946a24;--ac2:#d1ad66;--sw:240px;--f:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box;margin:0}[hidden]{display:none!important}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:7.5rem}
img{display:block;max-width:100%;height:auto}a{color:var(--ac)}:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.025em;line-height:1.1}h1{font-size:clamp(2.4rem,7vw,4.6rem)}h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:.6rem}h3{font-size:1.1rem;margin:1.3rem 0 .4rem}
p{margin-bottom:1rem}.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--gr);font-weight:500;line-height:1.4}.note{font-size:.875rem;color:var(--gr)}
#loader{position:fixed;inset:0;background:#fff;display:grid;place-items:center;z-index:99;font:700 clamp(1.8rem,7vw,3rem) var(--f);letter-spacing:-.03em;transition:opacity .7s,visibility .7s}#loader span{animation:ld 1s both}#loader.off{opacity:0;visibility:hidden}@keyframes ld{from{opacity:0;transform:translateY(8px)}}
header{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:.8rem;padding:calc(.55rem + env(safe-area-inset-top,0px)) 1.1rem .55rem;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s}header.sc{border-color:var(--ln)}
.logo{margin-right:auto;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.lang{display:flex;background:var(--sf);border-radius:8px;padding:2px}.lang button{border:0;background:none;padding:.25rem .8rem;border-radius:6px;font:600 .8rem var(--f);color:var(--gr);cursor:pointer;min-height:32px}.lang [aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
#burger{width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}#burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);transition:.3s}#burger span:first-child{top:17px}#burger span:last-child{top:25px}
#burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}#burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
#nav{display:none;position:fixed;inset:0;z-index:35;background:#fff;padding:5rem 1.2rem 8rem;overflow:auto}#nav.on{display:block}#nav .nl{display:none}
#nav h4{font-size:.75rem;color:var(--gr);margin:1.2rem 0 .3rem .7rem;letter-spacing:0}#nav .sp{display:block;height:.9rem}
#nav a:not(.nl){display:block;padding:.55rem .7rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:1.05rem;transition:background .2s}#nav a:not(.nl):hover{background:rgba(0,0,0,.05)}#nav a.act:not(.nl){background:rgba(148,106,36,.13);color:var(--ac);font-weight:600}
main{padding:5rem 1.1rem 0}main>section{max-width:1040px;padding:2.2rem 0}footer{padding:2rem 1.1rem;color:var(--gr);font-size:.85rem}
@media(min-width:960px){#burger{display:none}header{left:var(--sw);justify-content:flex-end}header .logo{display:none}
#nav{display:block;inset:0 auto 0 0;width:var(--sw);background:var(--sf);border-right:1px solid var(--ln);padding:1.5rem .8rem 8rem}#nav .nl{display:block;font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:.2rem .7rem 1rem}#nav a:not(.nl){font-size:.95rem;padding:.4rem .7rem}
main,footer{margin-left:var(--sw)}main{padding:5.5rem 2.5rem 0}footer{padding:2rem 2.5rem}main>section{padding:3rem 0}}
.feat{position:relative;margin:0;border-radius:16px;overflow:hidden;min-height:min(72vh,560px);display:flex;align-items:flex-end;background:var(--sf)}.feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(24,16,6,.8))}
.feat figcaption{position:relative;z-index:1;padding:clamp(1.2rem,4vw,2.6rem);color:#fff}.feat h1,.feat p{color:#fff}.feat .lead{color:rgba(255,255,255,.9)}.feat .eb{font-weight:600;font-size:.9rem;margin-bottom:.4rem;opacity:.9}.feat .lead{margin:.6rem 0 0}
.intro{margin:1.4rem 0 0;max-width:42rem;color:var(--gr);font-size:1.05rem}
.btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.65rem 1.3rem;border-radius:999px;background:var(--ac);color:#fff;text-decoration:none;font:600 .95rem var(--f);border:0;cursor:pointer;min-height:44px;transition:filter .2s,transform .2s}.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.97)}.btn.ghost{background:rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.shelf{margin-top:3rem}.row{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem 0 1rem;scrollbar-width:none}.row::-webkit-scrollbar{display:none}
.tile{flex:0 0 min(60vw,220px);scroll-snap-align:start;text-decoration:none;color:var(--ink)}.tile .frame{aspect-ratio:1;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.14);transition:transform .3s}.tile:hover .frame{transform:scale(1.025)}.tile img{width:100%;height:100%;object-fit:cover}.tile b{display:block;margin-top:.6rem;font-size:.95rem}.tile small{color:var(--gr);font-size:.85rem}
.frame{display:block;overflow:hidden}.js .frame img{opacity:0;transition:opacity .9s}.js .frame.in img{opacity:1}
.two{display:grid;gap:1.8rem;align-items:start}@media(min-width:860px){.two{grid-template-columns:1.1fr 1fr;gap:2.8rem}#majestatis{grid-template-columns:1fr 1.1fr}}
.art{margin:0;border-radius:12px;box-shadow:0 14px 32px -14px rgba(0,0,0,.4)}.art img{width:100%}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}.tags li{background:var(--sf);border-radius:999px;padding:.2rem .85rem;font-size:.85rem;font-weight:500}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.2rem}.stats>div{background:var(--sf);border-radius:12px;padding:.9rem}.stats dt{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}.stats dd{font-size:.75rem;color:var(--gr);margin:.2rem 0 0;line-height:1.3}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 0}select,input:not([type=range]),textarea{font:inherit;color:var(--ink);background:var(--sf);border:0;border-radius:10px;padding:.8rem .9rem;width:100%}.filters select{width:auto;border-radius:999px;padding:.5rem 1rem}
.list{background:var(--sf);border-radius:14px;padding:.4rem;margin-top:1rem}.tracks{list-style:none;padding:0}.tracks button{display:flex;justify-content:space-between;gap:1rem;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:.7rem .9rem;font:inherit;color:var(--ink);cursor:pointer}.tracks button:hover{background:rgba(0,0,0,.05)}.tracks .on button{color:var(--ac);font-weight:600}.tracks small{color:var(--gr);font-weight:400}.list .note{padding:1rem;margin:0}
.ref{background:var(--sf);border-radius:12px;padding:.8rem 1rem;font-weight:600}.ref span{display:block;font-weight:400;font-size:.8rem;color:var(--gr)}.spec{border-left:3px solid var(--ac2);padding-left:1rem;margin:1.2rem 0}.spec h3{margin-top:0}
.seven{display:flex;gap:.4rem;margin:.5rem 0 .8rem}.seven i{flex:1;max-width:46px;aspect-ratio:1;display:grid;place-items:center;background:var(--sf);border-radius:8px;font:600 .9rem var(--f);font-style:normal;color:var(--gr)}.seven .v{background:var(--ac);color:#fff}
.gal{columns:1;gap:1rem;margin-top:1rem}@media(min-width:560px){.gal{columns:2}}@media(min-width:1100px){.gal{columns:3}}
.gal button{display:block;width:100%;margin-bottom:1rem;break-inside:avoid;border:0;padding:0;border-radius:10px;overflow:hidden;background:var(--sf);cursor:zoom-in}.gal img{width:100%;transition:opacity .4s}.gal button:hover img{opacity:.85}
.certs{display:grid;gap:.6rem;margin-top:1rem}.certs article{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1rem;background:var(--sf);border-radius:12px;padding:1rem 1.3rem}.certs h3{margin:0;font-size:1rem}.certs small{display:block;font-weight:400;font-size:.8rem;color:var(--gr);letter-spacing:0}.certs b{font-size:1.25rem;letter-spacing:-.02em}
form{display:grid;gap:.9rem}label span{display:block;font-size:.8rem;color:var(--gr);margin-bottom:.25rem}#fm{margin:0}form .btn{justify-self:start}
.pbar{position:fixed;inset:auto 0 0;z-index:45;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem .8rem;padding:.55rem 1rem calc(.45rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--ln)}
.pi{display:flex;align-items:center;gap:.8rem;min-width:0}.pa{flex:none;width:46px;height:46px;border-radius:6px;background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;display:grid;place-items:center;font-size:1.3rem}.now{min-width:0}.now b,.now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now b{font-size:.95rem}.now span{font-size:.8rem;color:var(--gr)}
.pc{display:contents}.ctl{display:flex;align-items:center;gap:.3rem;justify-content:center}.ctl button{width:42px;height:42px;border:0;background:none;color:var(--ink);font-size:1.1rem;cursor:pointer;border-radius:50%}.ctl button:hover{background:var(--sf)}.ctl .big{font-size:1.4rem;color:var(--ac)}
.bar{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:var(--gr);font-variant-numeric:tabular-nums}.vol{display:none}input[type=range]{accent-color:var(--ac);flex:1;min-width:0;height:24px}
@media(min-width:760px){body{padding-bottom:5.5rem}.pbar{grid-template-columns:1fr minmax(300px,1.4fr) 1fr;padding-block:.5rem}.pc{display:flex;flex-direction:column;align-items:center}.bar{width:100%}.vol{display:flex;justify-content:flex-end}.vol input{max-width:130px}}
@media(min-width:960px){.pbar{left:var(--sw)}}
#lb{position:fixed;inset:0;background:rgba(255,255,255,.97);display:none;place-items:center;z-index:90;cursor:zoom-out;padding:1rem}#lb.on{display:grid}#lb img{max-height:90vh;max-width:94vw;object-fit:contain;border-radius:8px}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .frame img{opacity:1}}

/* v4 motion: blur reveals, glass hero, ambient glow, progress line, sheen, playing pulse */
.orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.orbs i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;animation:dr 26s ease-in-out infinite alternate;will-change:transform}
.orbs i:nth-child(1){top:-22vmax;right:-14vmax;background:radial-gradient(circle,rgba(209,173,102,.42),transparent 66%)}
.orbs i:nth-child(2){bottom:-26vmax;left:6vmax;background:radial-gradient(circle,rgba(232,196,160,.38),transparent 66%);animation-duration:32s;animation-delay:-8s}
.orbs i:nth-child(3){top:34vh;left:-24vmax;background:radial-gradient(circle,rgba(196,176,156,.3),transparent 66%);animation-duration:38s;animation-delay:-16s}
@keyframes dr{to{transform:translate3d(9vw,7vh,0) scale(1.18)}}
header::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,var(--ac2),var(--ac));transform:scaleX(var(--p,0));transform-origin:left}
@keyframes ld{0%{opacity:0;filter:blur(18px);transform:scale(.92)}60%{opacity:1}100%{opacity:1;filter:blur(0);transform:none}}
#loader{transition:opacity .9s,visibility .9s,backdrop-filter .9s}#loader.off{backdrop-filter:blur(0)}
.js .rv{opacity:0;transform:translateY(30px);filter:blur(14px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1),filter .9s ease;transition-delay:var(--d,0s)}.js .rv.in{opacity:1;transform:none;filter:none}
.js .frame img{opacity:0;filter:blur(22px);transform:scale(1.1);transition:opacity 1.2s ease,filter 1.4s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}.js .frame.in img{opacity:1;filter:none;transform:none}
.js .feat img{opacity:0;animation:hero 2s .05s cubic-bezier(.2,.7,.2,1) both}@keyframes hero{from{opacity:0;filter:blur(32px);transform:scale(1.22)}to{opacity:1;filter:blur(0);transform:scale(1.03)}}
.feat figcaption{margin:clamp(.8rem,2vw,1.4rem);padding:clamp(1.1rem,3vw,2rem);border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.feat figcaption>*{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}.feat .eb{animation-delay:.3s}.feat h1{animation-delay:.42s}.feat .lead{animation-delay:.54s}.feat .btns{animation-delay:.66s}
@keyframes rise{from{opacity:0;filter:blur(14px);transform:translateY(26px)}}
.btn{position:relative;overflow:hidden}.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s}.btn:hover::after{transform:translateX(130%)}
.tile .frame{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}.tile:hover .frame{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 30px -10px rgba(0,0,0,.3)}
.gal button{transition:box-shadow .5s}.gal img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}.gal button:hover img{transform:scale(1.05);opacity:1;filter:saturate(1.1)}
.tracks button,#nav a:not(.nl),.lang button{transition:background .25s,color .25s,padding .25s}#nav a:not(.nl):hover{padding-left:1rem}.tracks button:hover{padding-left:1.2rem}
main{transition:opacity .28s,filter .28s}body.sw main{opacity:0;filter:blur(12px)}
.pbar.playing .pa{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(148,106,36,.5)}50%{box-shadow:0 0 0 9px rgba(148,106,36,0)}}
@media(prefers-reduced-motion:reduce){.js .rv,.js .frame img,.js .feat img{opacity:1;filter:none;transform:none}.orbs i{animation:none}}

/* v5 luxury: champagne glass over a live canvas of flowing gold waves. Bodoni + Hanken, gold foil accents. */
:root{--bg:#fbf8f2;--sf:rgba(255,255,255,.58);--ink:#1c1812;--gr:#6f6554;--ln:rgba(184,149,90,.34);--ac:#8f6726;--ac2:#d4b370;--gold:linear-gradient(135deg,#dcc088,#a67c33);--se:'Bodoni Moda','Didot',Georgia,serif;--f:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
html{background:var(--bg)}body{background:transparent;font-weight:300}#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.orbs{display:none}
h1,h2,h3,.logo,#loader,#nav .nl{font-family:var(--se);font-weight:400;letter-spacing:-.015em}h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}h3{font-size:1.3rem}
.lead{font:italic 400 clamp(1.15rem,2vw,1.45rem)/1.4 var(--se);color:#6a5430}.eb{text-transform:uppercase;letter-spacing:.22em;font-size:.7rem!important;font-weight:500}
header{background:rgba(251,248,242,.55);border-bottom:1px solid var(--ln)}header::after{background:var(--gold)}
#nav{background:rgba(251,248,242,.94)}@media(min-width:960px){#nav{background:rgba(251,248,242,.5);backdrop-filter:blur(26px) saturate(160%);border-right:1px solid var(--ln)}}
#nav h4{text-transform:uppercase;letter-spacing:.18em;font-size:.65rem}#nav a.act:not(.nl){background:rgba(184,149,90,.17);color:var(--ac)}
.btn{background:var(--gold);color:#fff;letter-spacing:.02em;box-shadow:0 8px 20px -8px rgba(143,103,38,.7),inset 0 1px 0 rgba(255,255,255,.45)}.btn.ghost{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.list,.stats>div,.certs article,.ref{background:var(--sf);backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--ln);box-shadow:0 18px 40px -26px rgba(80,55,15,.45)}
.stats dt,.certs b{font-family:var(--se);font-weight:400;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}.stats dt{font-size:2rem}.certs b{font-size:1.5rem}
.art{box-shadow:0 34px 60px -30px rgba(70,48,12,.55);outline:1px solid rgba(184,149,90,.55);outline-offset:9px}
main>section+section{background:linear-gradient(90deg,transparent,rgba(184,149,90,.55),transparent) top/100% 1px no-repeat}
.tags li,.seven i{background:var(--sf);border:1px solid var(--ln)}.seven i{font-family:var(--se)}.seven .v{background:var(--gold);border-color:transparent}
.pbar{background:rgba(251,248,242,.74);border-top:1px solid var(--ln)}.pa{background:var(--gold)}.tile .frame,.gal button{border:1px solid var(--ln)}.tile b{font:500 1.05rem var(--se)}
select,input:not([type=range]),textarea{background:rgba(255,255,255,.62);border:1px solid var(--ln)}.lang [aria-pressed=true]{background:var(--gold);color:#fff}
#loader{background:var(--bg);color:var(--ink);letter-spacing:.04em}
.feat{min-height:min(82vh,680px)}.feat::after{background:linear-gradient(180deg,rgba(24,16,6,.08) 30%,rgba(24,16,6,.72))}.feat figcaption{border-color:rgba(255,230,180,.45)}.feat h1{font-size:clamp(2.6rem,7.5vw,5.6rem);font-weight:400}


/* v7 Four Signature Projects (content = client PDF descriptions) */
.proj{padding:3.5rem 0}.proj+.proj{background:linear-gradient(90deg,transparent,rgba(184,149,90,.4),transparent) top/100% 1px no-repeat}
#signature>.lead{max-width:44rem}.proj .eb{color:var(--ac);margin-bottom:.8rem}.proj h3{font-size:clamp(2.1rem,4.6vw,3.4rem);margin:0 0 1rem;line-height:1.02}.proj h3 .sub{display:block;font:italic 400 .45em/1.3 var(--se);color:#6a5430;margin-top:.6rem;letter-spacing:0}.proj h4{font:600 .8rem var(--f);text-transform:uppercase;letter-spacing:.16em;color:var(--ac);margin:1.2rem 0 .2rem}
.vis{display:grid;gap:1rem}.crop{aspect-ratio:2.65;object-fit:cover;object-position:50% 0;width:100%}.lj{aspect-ratio:1.25;object-fit:cover;object-position:0 50%;width:100%}
.big,.math{background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:1.2rem 1.4rem;backdrop-filter:blur(18px);box-shadow:0 18px 40px -26px rgba(80,55,15,.45)}
.big b{display:block;font:400 clamp(3rem,8vw,4.6rem)/1 var(--se);background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}.big span{color:var(--gr);font-size:.9rem}.math svg{width:100%;height:auto;display:block}.math .seven{margin:0}.math .seven i{max-width:none}
.wide{position:relative}.wide img{aspect-ratio:16/9;width:100%;object-fit:cover}.wide figcaption{padding:1rem .2rem 0}.kb{margin-top:2.5rem;align-items:start}.kb .art img{max-height:560px;object-fit:contain;margin:auto;background:#000}
.rows{list-style:none;padding:0;margin:0}.rows li{padding:.9rem 0;border-top:1px solid var(--ln);font:italic 400 1.2rem var(--se)}
.tile .frame{position:relative}.tn{position:absolute;left:.55rem;top:.55rem;z-index:1;padding:.15rem .6rem;border-radius:999px;font:600 .78rem var(--f);letter-spacing:.1em;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);color:var(--ink)}
@media(min-width:760px){.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(24,16,6,.65));pointer-events:none}.wide figcaption{position:absolute;z-index:1;left:1.4rem;bottom:1.4rem;max-width:32rem;padding:1.2rem 1.6rem;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,230,180,.45);backdrop-filter:blur(20px);color:#fff}.wide figcaption h3,.wide figcaption .eb{color:#fff;margin-bottom:.6rem}.wide figcaption .tags{margin:0}.wide figcaption .tags li{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}}
@media(min-width:860px){.proj.rev>:first-child{order:2}}

/* v8 player: SVG icons, aligned grid, filled-track sliders */
.ic{width:1.1em;height:1.1em;fill:currentColor;flex:none}.btn .ic{width:.9em;height:.9em}
.pbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info ctl" "bar bar";align-items:center;column-gap:.8rem;row-gap:.1rem}
.pi{grid-area:info}.pc{display:contents}.ctl{grid-area:ctl;display:flex;align-items:center;gap:.2rem}.bar{grid-area:bar;display:flex;align-items:center;gap:.6rem;width:100%}
.ctl button{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:0;background:none;color:var(--ink);cursor:pointer;font-size:1.25rem}
.ctl .big{width:46px;height:46px;background:var(--gold);color:#fff;font-size:1.2rem;box-shadow:0 6px 14px -6px rgba(143,103,38,.8)}.ctl .big:hover{background:var(--gold);filter:brightness(1.08)}
.pa .ic{width:24px;height:24px;fill:none;stroke:#fff}.pa .ic circle{fill:#fff;stroke:none}
.vol{display:none;align-items:center;gap:.5rem;color:var(--gr);font-size:1.1rem;justify-content:flex-end}
input[type=range]{-webkit-appearance:none;appearance:none;background:none;height:20px;cursor:pointer;flex:1;min-width:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(var(--ac),var(--ac)) 0/var(--v,0%) 100% no-repeat,rgba(0,0,0,.14)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(0,0,0,.14)}input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--ac)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:2px solid var(--ac)}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--ac)}
@media(min-width:760px){.pbar{grid-template-columns:1fr minmax(320px,1.5fr) 1fr;grid-template-areas:none}.pi,.vol,.ctl,.bar{grid-area:auto}.pc{display:flex;flex-direction:column;align-items:center;gap:.1rem}.vol{display:flex}.vol input{max-width:130px}}

/* v9 extra project photos (cropped to the artwork; promotional captions stay out of frame) */
.crop-hs{aspect-ratio:1536/905;object-fit:cover;object-position:50% 0;width:100%}

/* v10 project tiles show photographs; the number is a small badge */
.tile .frame{position:relative}.tn{position:absolute;left:.6rem;top:.6rem;z-index:1;font:600 .75rem/1.6 var(--f);padding:.1rem .65rem;border-radius:999px;background:rgba(255,255,255,.82);-webkit-background-clip:border-box;background-clip:border-box;color:var(--ac);backdrop-filter:blur(8px);letter-spacing:.06em}

/* all five project tiles visible without scrolling on desktop */
@media(min-width:960px){.tile{flex:1 1 0;min-width:0}}

/* Embedded track players */
.suno-embeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1rem;margin:1.5rem 0}
.suno-embed-card{border:1px solid rgba(184,149,90,.28);background:rgba(255,255,255,.025);padding:1rem;border-radius:12px}
.suno-embed-card h3{font-size:1rem;margin:0 0 .75rem}
.suno-embed-card audio{display:block;width:100%;max-width:100%}
.suno-embed-card iframe{display:block;width:100%;min-height:150px;border:0;border-radius:8px}

/* v11 Music Library: black, champagne and gold track cards with in-page Suno players */
.libwrap{margin-top:1.6rem;padding:clamp(1rem,2.4vw,1.8rem);border-radius:22px;background:radial-gradient(120% 90% at 10% 0,#1d1710 0,#0d0b08 55%,#080706 100%);border:1px solid rgba(212,179,112,.45);box-shadow:0 40px 80px -40px rgba(30,20,5,.8),inset 0 1px 0 rgba(255,236,190,.12);color:#efe3c8}
.lib-head{position:sticky;top:3.6rem;z-index:5;margin:-.4rem -.4rem 1.2rem;padding:.6rem .4rem;border-radius:14px;background:rgba(14,12,9,.86);backdrop-filter:blur(10px)}
@media(min-width:960px){.lib-head{top:0}}
.lib-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.lib-search{position:relative;flex:1 1 280px;display:block}
.lib-search .ic{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.15rem;height:1.15rem;color:#d4b370;pointer-events:none}
.libwrap .lib-search input{width:100%;min-height:48px;padding:.75rem 2.8rem .75rem 2.9rem;border-radius:999px;background:rgba(255,246,222,.06);border:1px solid rgba(212,179,112,.5);color:#fff4d9;font:400 1rem var(--f);transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.libwrap .lib-search input::placeholder{color:rgba(239,227,200,.55)}
.libwrap .lib-search input:focus{outline:0;border-color:#e8cc8f;background:rgba(255,246,222,.1);box-shadow:0 0 0 3px rgba(212,179,112,.25)}
.lib-search input::-webkit-search-cancel-button{display:none}
.lib-clear{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:rgba(212,179,112,.2);color:#f4dca4;font-size:1.3rem;line-height:1;cursor:pointer}
.lib-clear:hover{background:rgba(212,179,112,.38)}
.lib-count{margin:0;font:italic 400 1.05rem var(--se);color:#d9c08a}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:1.1rem}
.tc{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#1a150e,#100d09);border:1px solid rgba(212,179,112,.28);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s;content-visibility:auto;contain-intrinsic-size:auto 330px}
.tc[hidden]{display:none}
.tc:hover{transform:translateY(-4px);border-color:rgba(232,204,143,.8);box-shadow:0 22px 40px -22px rgba(212,179,112,.55)}
.tc-art{position:relative;aspect-ratio:1;background:linear-gradient(135deg,#3a2c14,#13100a);overflow:hidden}
.tc-art img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .4s}
.tc:hover .tc-art img{transform:scale(1.06)}
.tc-n{position:absolute;left:.6rem;top:.6rem;padding:.1rem .65rem;border-radius:999px;background:rgba(10,8,5,.78);backdrop-filter:blur(8px);color:#f0d796;border:1px solid rgba(212,179,112,.5);font:600 .75rem/1.7 var(--f);letter-spacing:.12em}
.tc-mono{display:none;position:absolute;inset:0;place-items:center;font:400 clamp(3rem,9vw,4.6rem) var(--se);background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.tc.noart .tc-art img{opacity:0}.tc.noart .tc-mono{display:grid}
.tc-body{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem 1rem;flex:1}
.libwrap .tc-t{margin:0;font:400 1.15rem/1.25 var(--se);color:#fff1cf;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-by{margin:0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#bfa56f}
.tc-s{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.tc-s li{padding:.1rem .6rem;border-radius:999px;font-size:.72rem;color:#e8d7ae;background:rgba(212,179,112,.12);border:1px solid rgba(212,179,112,.3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-p{margin:.2rem 0 0;font-size:.78rem;font-style:italic;color:#9c8a62}
.tc-play{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem 1.25rem;border:0;border-radius:999px;background:var(--gold);color:#20170a;font:700 .9rem var(--f);letter-spacing:.04em;cursor:pointer;box-shadow:0 8px 18px -8px rgba(212,179,112,.8),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,filter .2s,box-shadow .2s}
.tc-body .tc-play{margin-top:.7rem}
.tc-play:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 12px 24px -8px rgba(232,204,143,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.tc-play:active{transform:scale(.97)}.tc-play:focus-visible{outline:2px solid #fff4d9;outline-offset:3px}
.tc-play .ic{width:1.05em;height:1.05em}
.tc-pl{padding:0 1rem 1rem}
.tc-ld{margin:0 0 .6rem;font-size:.82rem;color:#d9c08a;font-style:italic}.tc-ld.ok{color:#9c8a62}
.tc-if{display:block;width:100%;height:240px;border:0;border-radius:12px;background:#000}
/* an open card spans the row: artwork + info on the left, the Suno player on the right */
.tc.open{grid-column:1/-1;border-color:#e8cc8f;box-shadow:0 26px 50px -26px rgba(232,204,143,.7)}
@media(min-width:700px){.tc.open{display:grid;grid-template-columns:230px 1fr;grid-template-areas:"a p" "b p"}.tc.open .tc-art{grid-area:a}.tc.open .tc-body{grid-area:b}.tc.open .tc-pl{grid-area:p;padding:1rem 1rem 1rem 0;align-self:center}.tc.open .tc-art{align-self:start}}
@media(max-width:420px){.lib{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.tc-body{padding:.7rem .7rem .8rem}.libwrap .tc-t{font-size:1rem}.tc-play{padding:.5rem 1rem}.tc-s{display:none}}
.lib-none{text-align:center;padding:2rem 1rem;margin:0;font:italic 1.2rem var(--se);color:#d9c08a}
.lib-foot{margin:1.4rem 0 0}.lib-foot .btn.ghost{color:var(--ac);background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px var(--ln)}
.legacy[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.tc,.tc-art img,.tc-play{transition:none}.tc:hover{transform:none}.tc:hover .tc-art img{transform:none}}

.pbar.off{display:none}body.nopl{padding-bottom:1rem}
.tc-art img{font-size:0;color:transparent}