/* Josiah Dominski · palette "Ivory Keys": black, ivory, graphite. Mask: one glowing globe (ivory) + foil on buttons only. */
:root{--bg:#0b0b0b;--panel:#141414;--line:#262626;--ivory:#f3f1ec;--muted:#a6a39c;--dim:#75726c;--maxw:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ivory);font:16px/1.7 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}img{display:block;max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:200;background:var(--ivory);color:#000;padding:8px 12px;border-radius:6px}
.serif{font-family:"Cormorant Garamond",Georgia,serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* header */
.hd{position:sticky;top:0;z-index:50;background:#0b0b0bf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:18px;height:25px;fill:var(--ivory);flex:none}
.brand span{font:600 15px/1 Inter;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.nav{display:none;gap:30px;align-items:center}
.nav a{font:500 14px/1 Inter;text-decoration:none;color:#d8d5ce;letter-spacing:.04em}
.nav a:hover,.nav a[aria-current]{color:#fff}
.menu-btn{background:none;border:0;color:var(--ivory);width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.menu-btn i{display:block;width:22px;height:1.5px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
.drawer{display:none;position:fixed;inset:68px 0 0;z-index:49;background:#0b0b0b;padding:30px 22px;flex-direction:column;align-items:center;gap:6px}
.drawer.open{display:flex}.drawer a{font:500 30px/1.9 "Cormorant Garamond",serif;text-decoration:none}
@media(min-width:900px){.nav{display:flex}.menu-btn{display:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 Inter;text-decoration:none;border-radius:999px;padding:16px 28px;border:0;cursor:pointer;white-space:nowrap}
.btn.solid{background:var(--ivory);color:#0b0b0b}.btn.ghost{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1px #ffffff55}
.btn.sm{padding:11px 18px;font-size:13px}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn.solid,.btn.ghost{position:relative;overflow:hidden;isolation:isolate}
.btn.solid::after,.btn.ghost::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:30%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(165,165,165,.35) 30%,rgba(255,255,255,.95) 50%,rgba(165,165,165,.35) 70%,rgba(255,255,255,0));transform:translateX(-160%) skewX(-20deg);animation:foil 4.2s linear infinite}
.btn.ghost::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08) 30%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0));animation-delay:2.1s}
@keyframes foil{0%{transform:translateX(-160%) skewX(-20deg)}52%,100%{transform:translateX(400%) skewX(-20deg)}}
/* type */
.k{display:inline-flex;align-items:center;gap:12px;font:600 11px/1 Inter;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.k::before,.k::after{content:"";width:24px;height:1px;background:currentColor;opacity:.5}
.k.l::before{display:none}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;margin:0}
h2{font-size:clamp(38px,8.5vw,64px);line-height:1.02;margin:14px 0 12px}h2 em,h1 em{font-style:italic}
.lead{color:#d2cfc8;font-size:17px;max-width:46ch}
section{position:relative;z-index:1;padding:84px 0}
.sh{text-align:center;margin:0 auto 38px;max-width:640px}.sh .lead{margin:0 auto}
.rule{height:1px;background:linear-gradient(90deg,transparent,#ffffff26,transparent);border:0;margin:0}
/* hero (home) */
.hero{position:relative;z-index:1;padding:0}
.hero .grid{display:grid;gap:0}
.hero .ph{position:relative}
.hero .ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;filter:contrast(1.05)}
.hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--bg) 99%)}
.hero .tx{position:relative;text-align:center;padding:0 22px 64px;margin-top:-90px}
.hero h1{font-size:clamp(52px,13vw,108px);line-height:.94;letter-spacing:-.01em;margin:16px 0 14px}
.hero .role{font:600 12px/1 Inter;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.hero .tag{font:italic 500 clamp(22px,5.5vw,30px)/1.3 "Cormorant Garamond",serif;color:#dedbd4;margin:0 auto 32px;max-width:24ch}
@media(min-width:900px){
 .hero .grid{grid-template-columns:1.05fr .95fr;align-items:center;max-width:var(--maxw);margin:0 auto;padding:40px 22px 30px;gap:56px}
 .hero .ph{order:2}.hero .ph img{aspect-ratio:4/5;border-radius:4px}.hero .ph::after{display:none}
 .hero .tx{margin:0;text-align:left;padding:0}.hero .tag{margin-left:0}.hero .btns{justify-content:flex-start}
}
/* release */
.release{display:grid;gap:28px;align-items:center;justify-items:center;text-align:center}
.cover{position:relative;width:min(340px,82vw);aspect-ratio:1;overflow:hidden;border-radius:4px;box-shadow:0 30px 70px #000a}
.cover img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.62)}
.cover .ct{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;text-align:left}
.cover .ct b{font:500 34px/1 "Cormorant Garamond",serif}.cover .ct small{font:600 10px/1 Inter;letter-spacing:.3em;text-transform:uppercase;color:#cfccc5;margin-top:8px}
.cover svg{position:absolute;top:20px;left:22px;width:16px;height:22px;fill:var(--ivory)}
.plats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.plat{font:500 13px/1 Inter;padding:11px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:#d8d5ce}
.plat.off{opacity:.45}
@media(min-width:900px){.release{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:64px}.release .plats,.release .btns{justify-content:flex-start}.release .k::before{display:none}}
/* commission teaser / steps */
.occ{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.occ div{background:var(--bg);padding:26px 18px;text-align:center}
.occ b{display:block;font:500 28px/1.1 "Cormorant Garamond",serif;margin-bottom:6px}.occ span{font-size:14px;color:var(--muted)}
@media(min-width:900px){.occ{grid-template-columns:repeat(4,1fr)}}
.steps{display:grid;gap:14px;counter-reset:s}
.steps li{list-style:none;display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:start;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:500 34px/1 "Cormorant Garamond",serif;color:var(--muted)}
.steps b{display:block;font:500 24px/1.15 "Cormorant Garamond",serif;margin-bottom:4px}.steps span{color:var(--muted);font-size:15px}
@media(min-width:900px){.steps{grid-template-columns:repeat(2,1fr);padding:0}}
/* story */
.story{display:grid;gap:34px;align-items:center}
.story .imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.story .imgs img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.story .imgs figure{margin:0}.story .imgs figure.wide{grid-column:1/-1}.story .imgs figure.wide img{aspect-ratio:16/10}
figcaption{font-size:13px;color:var(--dim);margin-top:8px}
.story .tx{text-align:center}.story .tx p{color:#d2cfc8;margin:0 auto 14px;max-width:44ch}
@media(min-width:900px){.story{grid-template-columns:1fr 1fr;gap:64px}.story .tx{text-align:left}.story .tx p{margin-left:0}.story .k::before{display:none}}
/* gallery */
.rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 22px 12px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.rail img{flex:0 0 72%;max-width:340px;aspect-ratio:4/5;object-fit:cover;border-radius:4px;scroll-snap-align:center}
.rail img.w{flex-basis:90%;max-width:620px;aspect-ratio:16/9;align-self:center}
@media(min-width:900px){.rail{max-width:var(--maxw);margin:0 auto}}
/* about */
.about{display:grid;gap:30px;align-items:center;justify-items:center;text-align:center}
.about img{width:min(360px,82vw);aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:4px}
.about blockquote{margin:0;font:italic 500 clamp(28px,6vw,40px)/1.2 "Cormorant Garamond",serif;max-width:20ch}
.about p{color:#d2cfc8;max-width:44ch;margin:16px auto 0}
@media(min-width:900px){.about{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:64px}.about p{margin-left:0}.about .k::before{display:none}}
/* forms / cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:26px;max-width:640px;margin:0 auto}
.card h3{font-size:32px;text-align:center;margin-bottom:6px}.card>p{color:var(--muted);text-align:center;margin:0 0 20px}
form{display:grid;gap:14px}label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input,select,textarea{width:100%;font:15px Inter;color:var(--ivory);background:#0b0b0b;border:1px solid #2e2e2e;border-radius:6px;padding:13px 14px}
input:focus,select:focus,textarea:focus{outline:2px solid #ffffff55;outline-offset:1px}
textarea{min-height:120px;resize:vertical}
.two{display:grid;gap:14px}@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}
.fb{justify-self:center;margin-top:6px}
.small{font-size:13px;color:var(--dim);text-align:center;margin:12px 0 0}
.lf{display:flex;gap:8px;max-width:440px;margin:0 auto}.lf input{flex:1;min-width:0}.lf .btn{padding:13px 20px;flex:none}
/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}summary{cursor:pointer;font:500 22px/1.3 "Cormorant Garamond",serif;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--muted)}details[open] summary::after{content:"–"}details p{color:#cfccc5;margin:10px 0 0}
.faq{max-width:760px;margin:0 auto}
/* page head (sub pages) */
.ph-head{text-align:center;padding:76px 22px 30px}.ph-head h1{font-size:clamp(46px,11vw,86px);line-height:1;margin:16px 0 14px}.ph-head .lead{margin:0 auto}
.prose{max-width:720px;margin:0 auto;padding:0 22px 80px;color:#d2cfc8}.prose h2{font-size:30px;margin:34px 0 8px;color:var(--ivory)}
/* footer */
.ft{position:relative;z-index:1;border-top:1px solid var(--line);padding:56px 0 46px;text-align:center}
.ft .brand{justify-content:center;margin-bottom:20px}
.ft nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-bottom:22px}.ft nav a{font-size:14px;text-decoration:none;color:#cfccc5}
.ft p{font-size:13px;color:var(--dim);margin:6px 0}.ft p a{color:var(--muted)}
/* globe (Design Elements Library: glowing globe, from John Dominski's footer) */
.globe{position:fixed;left:50%;top:44%;width:min(620px,125vw);aspect-ratio:1;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(243,241,236,.085),rgba(243,241,236,.05) 40%,rgba(243,241,236,.02) 65%,rgba(243,241,236,0));transform:translate(-50%,-50%);animation:globe 24s linear infinite}
@keyframes globe{0%{transform:translate(-50%,-50%) translate(-28vw,-10%)}25%{transform:translate(-50%,-50%) translate(0,-22%) scale(1.06)}50%{transform:translate(-50%,-50%) translate(28vw,-10%)}75%{transform:translate(-50%,-50%) translate(0,6%) scale(.94)}100%{transform:translate(-50%,-50%) translate(-28vw,-10%)}}
@media(min-width:720px){@keyframes globe{0%{transform:translate(-50%,-50%) translate(-340px,-10%)}25%{transform:translate(-50%,-50%) translate(0,-22%) scale(1.06)}50%{transform:translate(-50%,-50%) translate(340px,-10%)}75%{transform:translate(-50%,-50%) translate(0,6%) scale(.94)}100%{transform:translate(-50%,-50%) translate(-340px,-10%)}}}
main{position:relative;z-index:1}
/* splash: the piano-key mark rises key by key, then the name; black, silent, once per visit, skippable */
#sp{position:fixed;inset:0;z-index:300;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .6s ease}
#sp.out{opacity:0;pointer-events:none}
#sp svg{width:64px;height:87px;fill:var(--ivory)}
#sp svg path{opacity:0;transform:translateY(14px);animation:keyup .7s cubic-bezier(.2,.7,.2,1) forwards}
#sp svg path:nth-child(2){animation-delay:.25s}#sp svg path:nth-child(3){animation-delay:.5s}
@keyframes keyup{to{opacity:1;transform:none}}
#sp .n{font:600 13px/1 Inter;letter-spacing:.42em;text-transform:uppercase;color:#d8d5ce;opacity:0;animation:nm 1s ease 1.05s forwards;padding-left:.42em}
@keyframes nm{to{opacity:1}}
#sp .glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(243,241,236,.12),transparent);opacity:0;animation:nm 1.6s ease .4s forwards}
#sp button{position:absolute;bottom:28px;right:22px;background:none;border:1px solid #ffffff33;color:#cfccc5;border-radius:999px;padding:8px 14px;font:500 12px Inter;letter-spacing:.1em;cursor:pointer}
@media (prefers-reduced-motion:reduce){.globe{animation:none;transform:translate(-50%,-50%) translate(-18vw,-10%)}.btn.solid::after,.btn.ghost::after{display:none}}
/* splash film (protocol: no poster, fade in once it can play, silent) */
#sp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;filter:brightness(.55)}
#sp.on video{opacity:1}
#sp .spx{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;opacity:0;transition:opacity .45s ease}
#sp.on .spx{opacity:1}
#sp.on .spx svg path{animation-play-state:running}
#sp .spx svg path{animation-play-state:paused}
#sp.on .n{animation-play-state:running}#sp .n{animation-play-state:paused}
/* hero portrait */
@media(min-width:900px){
 .hero{background:#000}
 .hero .grid{position:relative;display:block;max-width:none;padding:0;min-height:min(86vh,820px)}
 .hero .ph{position:absolute;inset:0}.hero .ph img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:62% 30%;border-radius:0}
 .hero .ph::after{display:block;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 32%,rgba(0,0,0,0) 62%),linear-gradient(180deg,transparent 70%,var(--bg))}
 .hero .tx{position:relative;max-width:var(--maxw);margin:0 auto;padding:min(22vh,200px) 22px 120px}
}
.film{width:min(420px,86vw);aspect-ratio:478/850;object-fit:cover;border-radius:4px;background:#000;box-shadow:0 30px 70px #000a;margin:0 auto;display:block}
@media(min-width:900px){#album .tx .btns{justify-content:flex-start}}
/* tighter phone page (Nov 12 QA) */
#album .imgs img.notes{aspect-ratio:1/1;object-position:50% 46%;max-height:520px}
@media(min-width:900px){#album .imgs img.notes{aspect-ratio:4/5}}
.film{width:min(300px,70vw)}
#piano .imgs{grid-template-columns:repeat(3,1fr);gap:8px}
#piano .imgs figure.wide{grid-column:auto}#piano .imgs figure.wide img{aspect-ratio:3/4}
#piano figcaption{font-size:12px;text-align:center}
section{padding:68px 0}