@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa_opsz-wght.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa-Italic_opsz-wght.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-normal-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-normal-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-normal-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--base:#04120D;--emerald:#0B5A45;--teal:#0E6873;--jade:#3F8F7C;--copper:#61413C;--ember:#C9532F;--amber:#D98A45;--cream:#F3EAD9;--btn:#A8442A;
 --small:rgba(243,234,217,.88);--gut:clamp(24px,6.4vw,104px);--top:96px;--read:640px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--base)}
body{background:var(--base);color:var(--cream);font:400 15px/1.8 "Montserrat",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--base);padding:10px 14px;z-index:99}.skip:focus{left:8px}

/* ---------- type ---------- */
.name,.h1,.h2,.h3,.quote{font-family:"Bodoni Moda",Didot,serif;font-weight:560;font-variation-settings:"opsz" 18;font-optical-sizing:none;color:var(--cream);letter-spacing:.004em}
.h1{font-size:clamp(46px,6.4vw,92px);line-height:1}
.h2{font-size:clamp(36px,4.4vw,64px);line-height:1.04}
.h3{font-size:clamp(26px,2.4vw,34px);line-height:1.12}
.h1 em,.h2 em,.h3 em{font-style:italic}
.kicker{font:600 12px/1.6 "Montserrat",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--small);margin-bottom:28px}
.lead{font-size:clamp(16px,1.25vw,18px);line-height:1.8;color:var(--small);max-width:var(--read)}
p{color:var(--small);max-width:var(--read)}
p+p{margin-top:1.1em}
.small{font-size:14px;color:var(--small)}
.tbc{font-weight:600;color:var(--cream);background:rgba(63,143,124,.42);padding:1px 6px;letter-spacing:.04em;white-space:nowrap}
.cap{font-size:14px;line-height:1.6;color:var(--small);margin-top:16px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--btn);color:var(--cream);font:600 12px/1 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:18px 28px;border:0;cursor:pointer;transition:background .25s}
.btn:hover{background:#923a23}
.more{display:inline-block;font:600 12px/1.4 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.ctas{display:flex;flex-wrap:wrap;gap:22px 34px;align-items:center;margin-top:44px}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--top);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);transition:background .3s}
.top.solid{background:rgba(4,18,13,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mono{font-family:"Bodoni Moda",serif;font-weight:560;font-variation-settings:"opsz" 18;font-size:22px;letter-spacing:.01em;text-decoration:none;color:var(--cream);white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav a{font:500 12px/1 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--small)}
.nav a:hover,.nav a[aria-current=page]{color:var(--cream);text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:1px}
.nav a.btn{color:var(--cream);padding:15px 22px;text-decoration:none}
.burger{display:none;background:none;border:0;color:var(--cream);font:600 12px/1 "Montserrat";letter-spacing:.2em;text-transform:uppercase;padding:12px 0;cursor:pointer}

/* ---------- the art layer (backgrounds read bg.css) ---------- */
.sec{position:relative;isolation:isolate;padding:clamp(112px,15vh,176px) var(--gut)}
.wrap{max-width:1240px;margin:0 auto}
.field::before,.field::after{content:"";position:absolute;inset:-16vh 0;z-index:-2;pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%)}
.field::before{background:var(--art)}
.field::after{z-index:-1;background:var(--grain);opacity:var(--grain-o)}
.f-a{--art:var(--art-field-a)}.f-b{--art:var(--art-field-b)}.f-album{--art:var(--art-album)}.f-events{--art:var(--art-events)}
.divider{position:relative;height:clamp(150px,22vh,260px);pointer-events:none}
.divider::before{content:"";position:absolute;inset:0;background:var(--art-divider);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 60%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 60%,transparent)}

/* ---------- hero: name on the colour field, photo clean beside it ---------- */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);align-items:stretch}
.hero-art{position:absolute;inset:0 0 -18vh 0;z-index:-2;background:var(--art-hero);-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
.hero-art.events{background:var(--art-events)}
.hero-text{align-self:center;padding:calc(var(--top) + 40px) clamp(24px,4vw,64px) 96px var(--gut)}
.hero-text{position:relative}
.hero-text::before{content:"";position:absolute;inset:12% 0;z-index:-1;pointer-events:none;background:var(--name-veil,none)}
.name{font-size:clamp(56px,7vw,112px);line-height:.94;font-weight:430;font-variation-settings:"opsz" 96;letter-spacing:-.004em}
.name span{display:block}
.role{margin-top:30px;font:500 13px/1.7 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--small)}
.hero-photo{position:relative;margin-top:var(--top);overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,48% 50%);
 /* feathered left + bottom edges (<=12%), away from face, hands and keys */
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%),linear-gradient(to bottom,transparent 0,#000 7%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent 0,#000 12%),linear-gradient(to bottom,transparent 0,#000 7%,#000 90%,transparent 100%);mask-composite:intersect}
.page-hero{min-height:auto;grid-template-columns:minmax(0,52fr) minmax(0,48fr)}
.page-hero .hero-text{padding-bottom:120px}
.page-hero .hero-photo{margin:calc(var(--top) + 24px) 0 0}
.page-hero .hero-photo img{height:auto;aspect-ratio:var(--ar,4/5)}

/* ---------- layouts ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,7vw,120px);align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px)}
.stack>*+*{margin-top:22px}
.photo img{width:100%}
.feather-l img{-webkit-mask-image:linear-gradient(to right,transparent,#000 12%);mask-image:linear-gradient(to right,transparent,#000 12%)}
.feather-r img{-webkit-mask-image:linear-gradient(to left,transparent,#000 12%);mask-image:linear-gradient(to left,transparent,#000 12%)}
.feather-b img{-webkit-mask-image:linear-gradient(to top,transparent,#000 12%);mask-image:linear-gradient(to top,transparent,#000 12%)}
.teaser{display:block;text-decoration:none}
.teaser .h3{margin:26px 0 14px}
.teaser p{font-size:15px}
.teaser .more{margin-top:22px}
.teaser .swatch{aspect-ratio:4/5;background:var(--art-album);position:relative;display:flex;align-items:flex-end;padding:28px;
 -webkit-mask-image:radial-gradient(130% 100% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(130% 100% at 50% 50%,#000 60%,transparent 100%)}
.teaser .swatch span{font-family:"Bodoni Moda",serif;font-weight:560;font-variation-settings:"opsz" 18;font-size:32px;line-height:1.05}
.teaser .ph{aspect-ratio:4/5;overflow:hidden}.teaser .ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .8s}
.teaser:hover .ph img{transform:scale(1.02)}
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;font:500 12px/1.6 "Montserrat",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--small);text-align:center}
.center{text-align:center}.center p{margin-left:auto;margin-right:auto}
.quote{font-size:clamp(26px,2.7vw,40px);line-height:1.3;max-width:960px;margin:0 auto}
.quote em{font-style:italic}
.cite{margin-top:30px;font:500 12px/1.7 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--small)}
.cite a{text-underline-offset:5px}
.list{list-style:none}
.list li{padding:14px 0;color:var(--small)}
.list li+li{box-shadow:0 -1px 0 rgba(243,234,217,.12)}
.tracks{list-style:none;counter-reset:t;max-width:760px}
.tracks li{counter-increment:t;display:grid;grid-template-columns:48px 1fr;padding:18px 0;align-items:baseline}
.tracks li+li{box-shadow:0 -1px 0 rgba(243,234,217,.14)}
.tracks li::before{content:counter(t,decimal-leading-zero);font:500 12px/1 "Montserrat";letter-spacing:.14em;color:var(--small)}
.tracks .comp{display:block;font:500 12px/1.6 "Montserrat";letter-spacing:.2em;text-transform:uppercase;color:var(--small)}
.tracks .work{display:block;font-family:"Bodoni Moda",serif;font-weight:560;font-variation-settings:"opsz" 18;font-size:clamp(22px,2vw,28px);line-height:1.25;color:var(--cream);margin-top:4px}
.album-hero{min-height:92vh;display:flex;align-items:center}
.album-hero .h1{font-size:clamp(60px,9vw,140px);font-weight:430;font-variation-settings:"opsz" 96;line-height:.95}
.meta{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:34px;font:500 13px/1.6 "Montserrat";letter-spacing:.2em;text-transform:uppercase;color:var(--small)}

/* Events: cream-to-dark-emerald band, dark text on the cream end */
.cream-band{position:relative;isolation:isolate;color:#1b1714}
.cream-band::before{content:"";position:absolute;inset:-200px 0;z-index:-1;pointer-events:none;
 background:radial-gradient(1500px 640px at 22% 50%,#F3EAD9 0%,#F3EAD9 50%,#DFE4D7 61%,#A9C2B4 70%,#4E8A77 80%,#0E4F40 90%,rgba(4,18,13,0) 100%)}
.cream-band .kicker,.cream-band p,.cream-band li{color:#2a2420}
.cream-band .h2{color:#04120D}
.cream-band .inner{max-width:620px}
.cream-band .list li+li{box-shadow:0 -1px 0 rgba(4,18,13,.12)}

/* media */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 48px}
.yt{position:relative;aspect-ratio:16/9;background:#06231c;overflow:hidden}
.yt button{all:unset;cursor:pointer;position:absolute;inset:0;display:block}
.yt img{width:100%;height:100%;object-fit:cover}
.yt button::before{content:"";position:absolute;inset:0;background:rgba(11,90,69,.16);mix-blend-mode:multiply;z-index:1}
.yt button::after{content:"";position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;background:rgba(4,18,13,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M28 22l20 12-20 12z' fill='%23F3EAD9'/%3E%3C/svg%3E") center/68px no-repeat;z-index:2;transition:background-color .2s}
.yt button:hover::after,.yt button:focus-visible::after{background-color:rgba(63,143,124,.92)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcap{margin-top:16px;font-size:14px;color:var(--small)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.gallery figure{cursor:zoom-in}
.gallery img{width:100%;height:100%;object-fit:cover}
.g-a{grid-column:1/8}.g-b{grid-column:8/13}.g-c{grid-column:1/6}.g-d{grid-column:6/13}.g-e{grid-column:1/5}.g-f{grid-column:5/9}.g-g{grid-column:9/13}.g-h{grid-column:2/8}.g-i{grid-column:8/12}
.gallery .r{aspect-ratio:3/2}.gallery .t{aspect-ratio:4/5}
.lb{position:fixed;inset:0;z-index:90;background:rgba(4,18,13,.96);display:none;align-items:center;justify-content:center;padding:4vw}
.lb.on{display:flex}.lb img{max-height:90vh;width:auto}
.lb button{position:absolute;top:22px;right:28px;background:none;border:0;color:var(--cream);font:400 34px/1 "Montserrat";cursor:pointer}

/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px}
.form .full{grid-column:1/-1}
.form label{display:block;font:600 11px/1.4 "Montserrat";letter-spacing:.22em;text-transform:uppercase;color:var(--small);margin-bottom:10px}
.form input,.form select,.form textarea{width:100%;background:rgba(4,18,13,.62);color:var(--cream);border:0;border-radius:0;padding:16px 16px;font:400 15px/1.5 "Montserrat",sans-serif;-webkit-appearance:none;appearance:none}
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F3EAD9' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px}
.form textarea{min-height:170px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--cream);outline-offset:0}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .note{font-size:13px;color:var(--small)}
.status{font-size:15px;line-height:1.7}
.status:empty{display:none}
.status.ok{color:var(--cream);background:rgba(14,104,115,.55);padding:18px 20px}
.status.err{color:var(--cream);background:rgba(4,18,13,.88);padding:18px 20px}
.status a{color:var(--cream);font-weight:600;text-underline-offset:4px}
.status .test{display:block;margin-top:6px;font-size:13px;color:var(--small)}
.btn[disabled]{opacity:.6;cursor:progress}
.facts dt{font:600 11px/1.4 "Montserrat";letter-spacing:.22em;text-transform:uppercase;color:var(--small);margin-top:26px}
.facts dd{color:var(--cream);margin-top:6px}

/* footer */
.foot{padding:72px var(--gut) 56px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center;font-size:13px;color:var(--small)}
.foot nav{display:flex;gap:28px;flex-wrap:wrap}
.foot a{text-decoration:none;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.foot a:hover{text-decoration:underline;text-underline-offset:6px}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}.rv.in{opacity:1;transform:none}

/* ---------- tablet / phone ---------- */
@media (max-width:1080px){.nav{gap:18px}.nav a{letter-spacing:.14em}}
@media (max-width:900px){
 :root{--top:72px}
 .burger{display:block}
 .nav{position:fixed;inset:var(--top) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;padding:12px var(--gut) 32px;background:rgba(4,18,13,.97);transform:translateY(-130%);transition:transform .35s;visibility:hidden}
 .menu-open .nav{transform:none;visibility:visible}
 .nav a{display:block;padding:16px 0;font-size:13px}
 .nav a.btn{margin-top:14px;padding:16px 24px}
 .top{background:rgba(4,18,13,.92)}
 .grid2,.grid3{grid-template-columns:1fr}
 .videos{grid-template-columns:1fr}
 .gallery{grid-template-columns:1fr 1fr}
 .gallery>figure{grid-column:auto!important}
 .gallery .wide{grid-column:1/-1!important}
}
@media (max-width:760px){
 body{font-size:15px}
 .f-a{--art:var(--art-field-a-m)}.f-b{--art:var(--art-field-b-m)}.f-album{--art:var(--art-album-m)}.f-events{--art:var(--art-events-m)}
 .divider::before{background:var(--art-divider-m)}
 .field::after{opacity:var(--grain-o-m)}
 .hero,.page-hero{display:flex;flex-direction:column;min-height:auto}
 .hero-art{background:var(--art-hero-m);inset:0 0 -12vh 0}
 .hero-art.events{background:var(--art-events-m)}
 .hero-photo{order:-1;margin-top:var(--top);height:62vh;height:62svh;min-height:380px}
 .hero-photo img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 12%);mask-image:linear-gradient(to top,transparent 0,#000 12%);object-position:var(--pos-m,var(--pos,48% 50%))}
 .page-hero .hero-photo{height:auto;margin-top:var(--top)}
 .page-hero .hero-photo img{aspect-ratio:var(--ar-m,4/5)}
 .hero-text{padding:28px var(--gut) 88px}
 .name{font-size:clamp(42px,12.4vw,60px);font-weight:560;font-variation-settings:"opsz" 18}
 .h1{font-size:clamp(42px,12vw,54px)}
 .h2{font-size:clamp(32px,9vw,42px)}
 .sec{padding:96px var(--gut)}
 .small,.cap,.form .note,.vcap,.kicker{font-size:13px}
 .lead{font-size:15px}
 .tracks li{grid-template-columns:40px 1fr}
 .form{grid-template-columns:1fr}
 .gallery{grid-template-columns:1fr}
 .cream-band{padding-top:210px;padding-bottom:210px}
 .cream-band::before{inset:0;background:linear-gradient(180deg,rgba(4,18,13,0) 0,#0E4F40 50px,#4E8A77 95px,#C9D6C9 135px,#F3EAD9 170px,#F3EAD9 calc(100% - 170px),#C9D6C9 calc(100% - 135px),#4E8A77 calc(100% - 95px),#0E4F40 calc(100% - 50px),rgba(4,18,13,0) 100%)}
 .album-hero{min-height:84vh}
 .foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
.gallery{align-items:start}.gallery .r,.gallery .t{overflow:hidden}
[id]{scroll-margin-top:var(--top)}

/* TAB-FIX comp: composer names not uppercased, so Fazıl keeps its dotless ı */
.comp{text-transform:none!important;letter-spacing:.04em!important;font-size:13px!important}

/* TAB-FIX feather: shorter bottom feather so hands and keys at a photo's lower edge stay crisp */
.hero-photo img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%),linear-gradient(to bottom,transparent 0,#000 6%,#000 95%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 8%),linear-gradient(to bottom,transparent 0,#000 6%,#000 95%,transparent 100%)}
@media (max-width:760px){.hero-photo img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 5%);mask-image:linear-gradient(to top,transparent 0,#000 5%)}}

/* TAB-FIX halo: a soft dark halo under the small hero labels, for legibility on the colour field */
.hero-text .kicker,.hero-text .role,.album-hero .kicker,.album-hero .meta{text-shadow:0 0 16px rgba(4,18,13,.85),0 0 4px rgba(4,18,13,.55)}

/* ===================== v14 additions ===================== */
/* hero epigraph (first draft) */
.epigraph{margin-top:46px;max-width:430px}
.epigraph p{font-family:"Bodoni Moda",serif;font-style:italic;font-weight:460;font-variation-settings:"opsz" 18;font-size:17px;line-height:1.6;color:var(--small)}
.epigraph figcaption{margin-top:10px;font:500 11px/1.6 "Montserrat";letter-spacing:.22em;text-transform:uppercase;color:var(--small)}
.epigraph figcaption::before{content:"— "}
.hero-text .epigraph{text-shadow:0 0 16px rgba(4,18,13,.85),0 0 4px rgba(4,18,13,.55)}
/* second button: deep emerald, cream label (ember stays for Enquire) */
.btn.alt{background:#0B5A45}
.btn.alt:hover{background:#0E6873}
/* Ramble on Piano countdown box */
.ramble{position:relative;max-width:820px;margin:0 auto;text-align:center;padding:clamp(56px,7vw,96px) clamp(24px,5vw,72px);isolation:isolate}
.ramble::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 70% at 50% 50%,rgba(4,18,13,.66) 0%,rgba(4,18,13,.5) 55%,rgba(4,18,13,0) 100%)}
.ramble .kicker{margin-bottom:22px}
.ramble .nw{white-space:nowrap}
.ramble .rtitle{font-family:"Bodoni Moda",serif;font-weight:430;font-variation-settings:"opsz" 96;font-size:clamp(52px,7.6vw,112px);line-height:.98;color:var(--cream)}
.ramble .rtitle em{font-style:italic}
.ramble .lead{margin:22px auto 0}
.count{display:flex;justify-content:center;gap:clamp(28px,5vw,72px);margin-top:44px}
.count div{min-width:74px}
.count span{display:block;font-family:"Bodoni Moda",serif;font-weight:500;font-variation-settings:"opsz" 48;font-size:clamp(44px,5vw,72px);line-height:1;color:var(--cream);font-variant-numeric:lining-nums tabular-nums}
.count small{display:block;margin-top:12px;font:600 11px/1 "Montserrat";letter-spacing:.2em;text-transform:uppercase;color:var(--small)}
.ramble-band{padding-top:clamp(80px,11vh,140px);padding-bottom:clamp(80px,11vh,140px)}
.album-hero .ramble{padding-top:calc(var(--top) + 40px)}
/* moving strip (marquee) of venues */
.marquee{position:relative;overflow:hidden;padding:30px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 48s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-list{display:flex;list-style:none;margin:0;padding:0}
.mq-list li{white-space:nowrap;font:500 13px/1.6 "Montserrat",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);padding:0 28px}
.mq-list li::after{content:"✦";color:var(--jade);margin-left:56px;font-size:11px;letter-spacing:0;display:inline-block;transform:translateX(-0px)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
 .mq-track{animation:none!important;width:auto;justify-content:center}
 .mq-list{flex-wrap:wrap;justify-content:center;row-gap:8px;padding:0 var(--gut)}
 .mq-list[aria-hidden]{display:none}
 .marquee{-webkit-mask-image:none;mask-image:none}
}
/* short / long bio tabs */
.tabs{display:flex;gap:34px;margin-bottom:30px}
.tabs button{all:unset;cursor:pointer;font:600 12px/1.4 "Montserrat",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--small);padding:6px 0;text-decoration:none}
.tabs button[aria-selected=true]{color:var(--cream);text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:1px}
.tabs button:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.bio p{color:var(--small)}
.bio p+p{margin-top:18px}
.bio .copy{all:unset;cursor:pointer;margin-top:26px;display:inline-block;font:600 12px/1.4 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
/* home: three categories, no photos */
.moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px);margin-top:64px}
.moves a{display:flex;flex-direction:column;text-decoration:none;padding-top:30px;box-shadow:0 -1px 0 rgba(243,234,217,.22)}
.moves .h3{margin-bottom:18px}
.moves p{color:var(--small);flex:1}
.moves .go{margin-top:26px;font:600 12px/1.4 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.moves a:hover .h3{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
/* recitals: chamber sub-blocks */
.grid2.sub{margin-top:72px}
.sub .h3{margin-bottom:6px}
.facts dd{color:var(--cream)}
/* events duo: text only */
.duo{max-width:720px}
/* STEPDANCE tracklist */
.sdtracks{list-style:none;max-width:640px}
.sdtracks li{display:grid;grid-template-columns:40px 1fr auto;gap:0 14px;padding:9px 0;align-items:baseline}
.sdtracks li .n{font:500 12px/1 "Montserrat";letter-spacing:.12em;color:var(--small)}
.sdtracks li .t{font-family:"Bodoni Moda",serif;font-weight:560;font-variation-settings:"opsz" 18;font-size:clamp(19px,1.6vw,22px);line-height:1.3;color:var(--cream)}
.sdtracks li .d{font:500 13px/1 "Montserrat";letter-spacing:.08em;color:var(--small);font-variant-numeric:tabular-nums}
.sdtracks .sd-comp{display:block;padding:26px 0 6px;box-shadow:0 -1px 0 rgba(243,234,217,.14)}
.sdtracks .sd-comp:first-child{box-shadow:none;padding-top:0}
.sdtracks .sd-comp .comp{font:500 12px/1.6 "Montserrat";letter-spacing:.2em;text-transform:uppercase;color:var(--small)}
.sdtracks .sd-work{margin-left:14px;font:500 12px/1.6 "Montserrat";letter-spacing:.12em;color:var(--small)}
.sdtracks .sd-total{margin-top:14px;box-shadow:0 -1px 0 rgba(243,234,217,.22);padding-top:18px}
.sdtracks .sd-total .t{font:600 12px/1 "Montserrat";letter-spacing:.2em;text-transform:uppercase;color:var(--small)}
/* media: a featured solo video, room for a second one beside it later (no empty box) */
.videos.solo{grid-template-columns:minmax(0,1fr);max-width:960px}
.videos.solo:has(figure+figure){grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
/* media: one unified photo composition. 4 columns x 3 rows; verticals left and right, a landscape UNDER each */
.gallery.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
.mosaic figure{position:relative;overflow:hidden;aspect-ratio:3/2;margin:0;cursor:zoom-in}
.gallery.mosaic{align-items:stretch}
.mosaic figure.tall{aspect-ratio:auto}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.mosaic figure:hover img{transform:scale(1.02)}
.mosaic figure:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.gallery.mosaic .m-garden{grid-column:1!important;grid-row:1/3!important}.gallery.mosaic .m-iseg{grid-column:2!important;grid-row:1!important}.gallery.mosaic .m-stage{grid-column:3!important;grid-row:1!important}.gallery.mosaic .m-bw{grid-column:4!important;grid-row:1/3!important}
.gallery.mosaic .m-ens{grid-column:2!important;grid-row:2!important}.gallery.mosaic .m-hall{grid-column:3!important;grid-row:2!important}
.gallery.mosaic .m-close{grid-column:1!important;grid-row:3!important}.gallery.mosaic .m-red{grid-column:2!important;grid-row:3!important}.gallery.mosaic .m-bos{grid-column:3!important;grid-row:3!important}.gallery.mosaic .m-app{grid-column:4!important;grid-row:3!important}
@media (max-width:760px){
 .gallery.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .gallery.mosaic .m-garden{grid-column:1!important;grid-row:1/3!important}.gallery.mosaic .m-iseg{grid-column:2!important;grid-row:1!important}.gallery.mosaic .m-stage{grid-column:2!important;grid-row:2!important}
 .gallery.mosaic .m-ens{grid-column:1!important;grid-row:3!important}.gallery.mosaic .m-hall{grid-column:2!important;grid-row:3!important}
 .gallery.mosaic .m-close{grid-column:1!important;grid-row:4!important}.gallery.mosaic .m-bw{grid-column:2!important;grid-row:4/6!important}.gallery.mosaic .m-red{grid-column:1!important;grid-row:5!important}
 .gallery.mosaic .m-bos{grid-column:1!important;grid-row:6!important}.gallery.mosaic .m-app{grid-column:2!important;grid-row:6!important}
}
@media (max-width:1080px){
 .moves{grid-template-columns:1fr;gap:44px}
 .count div{min-width:0}
}
@media (max-width:760px){
 .ramble{padding-left:8px;padding-right:8px}
 .count{gap:26px}
 .epigraph{margin-top:34px}
 .epigraph p{font-size:16px}
 .tabs{gap:26px}
 .sdtracks li{grid-template-columns:30px 1fr auto}
 .album-hero .ramble{padding-top:calc(var(--top) + 24px)}
}

/* v14: let the page wash (bg.css body::before) show through */
html body{background:transparent}
.ramble::before{background:radial-gradient(closest-side,rgba(4,18,13,.68) 0%,rgba(4,18,13,.52) 60%,rgba(4,18,13,0) 100%);inset:-6% -10%}
.epi-sec{padding-top:24px;padding-bottom:0}
.epi-sec .epigraph{margin:0 auto;text-align:center;max-width:620px}
.ramble-band,.album-hero,.sec{overflow-x:clip}

/* v14 contrast fixes (measured) */
.marquee{background:linear-gradient(to bottom,rgba(4,18,13,0) 0,rgba(4,18,13,.5) 32%,rgba(4,18,13,.5) 68%,rgba(4,18,13,0) 100%)}
.ramble::before{inset:-14% -12%;background:radial-gradient(closest-side,rgba(4,18,13,.72) 0%,rgba(4,18,13,.62) 65%,rgba(4,18,13,0) 100%)}
.pg-recitals .hero-text,.pg-events .hero-text{--name-veil:radial-gradient(85% 75% at 40% 50%,rgba(4,18,13,.5) 0%,rgba(4,18,13,.3) 50%,rgba(4,18,13,0) 80%)}
.album-hero .ramble::before{inset:-12% -12% -26%}


/* ===================== v15 (29 Oct, night) ===================== */
/* G5 videos graded alike: one grade per source (SVG matrices in each page), poster and playing video both */
.yt[data-grade=warm]{filter:url(#g-warm)}
.yt[data-grade=isg]{filter:url(#g-isg)}
.yt[data-grade=neu]{filter:url(#g-neu)}

/* G1 heroes: photo takes more of the width and melts into the colour field on a slight diagonal */
.hero-text{z-index:1}
@media (min-width:761px){
 .hero,.page-hero{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
 body .hero-photo{z-index:0;margin-left:calc(-1 * var(--ov,13vw))}
 body .hero-photo img{
  -webkit-mask-image:linear-gradient(var(--fa,103deg),transparent 0,transparent var(--f0,4%),rgba(0,0,0,.14) var(--f1,14%),rgba(0,0,0,.42) var(--f2,25%),rgba(0,0,0,.76) var(--f3,36%),#000 var(--f4,48%)),linear-gradient(to right,transparent 0,rgba(0,0,0,.5) var(--fl,14%),#000 var(--fl2,26%)),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.6) 7%,#000 15%,#000 var(--fb,82%),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(var(--fa,103deg),transparent 0,transparent var(--f0,4%),rgba(0,0,0,.14) var(--f1,14%),rgba(0,0,0,.42) var(--f2,25%),rgba(0,0,0,.76) var(--f3,36%),#000 var(--f4,48%)),linear-gradient(to right,transparent 0,rgba(0,0,0,.5) var(--fl,14%),#000 var(--fl2,26%)),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.6) 7%,#000 15%,#000 var(--fb,82%),transparent 100%);
  mask-composite:intersect}
 body .page-hero .hero-photo{margin-top:calc(var(--top) - 12px)}
 body .page-hero .hero-photo img{aspect-ratio:auto;height:min(92vh,880px);min-height:560px;object-fit:cover}
 body .hero-text{padding-right:clamp(12px,2vw,32px)}
}
@media (max-width:760px){
 body .hero-photo img,body .page-hero .hero-photo img{
  -webkit-mask-image:linear-gradient(172deg,#000 0,#000 var(--mb,64%),rgba(0,0,0,.72) calc(var(--mb,64%) + 12%),rgba(0,0,0,.3) calc(var(--mb,64%) + 24%),transparent 100%);
  mask-image:linear-gradient(172deg,#000 0,#000 var(--mb,64%),rgba(0,0,0,.72) calc(var(--mb,64%) + 12%),rgba(0,0,0,.3) calc(var(--mb,64%) + 24%),transparent 100%)}
 body .hero-text{margin-top:-14vw}
 body .hero-photo{height:68vh;height:68svh}
 body .page-hero .hero-photo{height:auto}
}
.pg-events .hero-photo{--f0:12%;--f1:18%;--f2:26%;--f3:34%;--f4:44%}

/* H2 poem back up: small, left, in the hero above the Ramble on Piano box */
.hero-text .epigraph{margin-top:52px;max-width:400px}
.hero-text .epigraph p{font-size:16px}

/* G2 side photos: heading spans the row; photo starts level with the body text; all four edges feathered */
.side-grid{row-gap:44px}
.side-grid .side-head{grid-column:1/-1}
.side-grid .side-head .h2{max-width:900px}
.side-photo{position:relative}
.side-photo img{
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.credit{margin-top:-4px;font:500 10px/1.4 "Montserrat",sans-serif;letter-spacing:.12em;color:var(--small);text-align:right;padding-right:16%}

/* G3 varied palette fields (generated from the background she loves: copper/amber into teal, soft vertical lines) */
.f-newmusic{--art:url(img/art/v15/newmusic_desk.webp) center / cover no-repeat, #04120D}
.f-film{--art:url(img/art/v15/film_desk.webp) center / cover no-repeat, #04120D}
.f-work{--art:url(img/art/v15/work_desk.webp) center / cover no-repeat, #04120D}
.f-singers{--art:url(img/art/v15/singers_desk.webp) center / cover no-repeat, #04120D}
.f-appear{--art:url(img/art/v15/appear_desk.webp) center / cover no-repeat, #04120D}
.f-duo{--art:url(img/art/v15/duo_desk.webp) center / cover no-repeat, #04120D}
.f-facts{--art:url(img/art/v15/liked2_desk.webp) center / cover no-repeat, #04120D}
.f-cta2{--art:url(img/art/v15/cta_desk.webp) center / cover no-repeat, #04120D}
/* About: the short-bio background, kept for the long bio too (tiles down, never stretches), with a hint more amber */
.f-bio{--art:url(img/art/v15/bio_desk.webp) center top / 100% auto repeat-y, #04120D}
@media (max-width:760px){
 .f-newmusic{--art:url(img/art/v15/newmusic_mob.webp) center / cover no-repeat, #04120D}
 .f-film{--art:url(img/art/v15/film_mob.webp) center / cover no-repeat, #04120D}
 .f-work{--art:url(img/art/v15/work_mob.webp) center / cover no-repeat, #04120D}
 .f-singers{--art:url(img/art/v15/singers_mob.webp) center / cover no-repeat, #04120D}
 .f-appear{--art:url(img/art/v15/appear_mob.webp) center / cover no-repeat, #04120D}
 .f-duo{--art:url(img/art/v15/duo_mob.webp) center / cover no-repeat, #04120D}
 .f-facts{--art:url(img/art/v15/liked2_mob.webp) center / cover no-repeat, #04120D}
 .f-cta2{--art:url(img/art/v15/cta_mob.webp) center / cover no-repeat, #04120D}
 .f-bio{--art:url(img/art/v15/bio_mob.webp) center top / 100% auto repeat-y, #04120D}
}
/* page washes: varied palette under every page (no flat green gaps) */
.pg-home{--wash:url(img/art/v15/wash_home_desk.webp)!important}
.pg-about{--wash:url(img/art/v15/wash_about_desk.webp)!important}
.pg-recitals{--wash:url(img/art/v15/wash_recitals_desk.webp)!important}
.pg-events{--wash:url(img/art/v15/wash_events_desk.webp)!important}
.pg-recordings{--wash:url(img/art/v15/wash_recordings_desk.webp)!important}
.pg-media,.pg-enquire{--wash:url(img/art/v15/wash_media_desk.webp)!important}
@media (max-width:760px){
 .pg-home{--wash:url(img/art/v15/wash_home_mob.webp)!important}
 .pg-about{--wash:url(img/art/v15/wash_about_mob.webp)!important}
 .pg-recitals{--wash:url(img/art/v15/wash_recitals_mob.webp)!important}
 .pg-events{--wash:url(img/art/v15/wash_events_mob.webp)!important}
 .pg-recordings{--wash:url(img/art/v15/wash_recordings_mob.webp)!important}
 .pg-media,.pg-enquire{--wash:url(img/art/v15/wash_media_mob.webp)!important}
}

/* R3 Selected appearances: a typographic constellation */
.appear .center .h2{margin-bottom:12px}
.stars{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:clamp(30px,4vw,64px) clamp(36px,5vw,84px);max-width:1180px;margin:72px auto 0;position:relative}
.stars::before{content:"";position:absolute;inset:-12% -6%;z-index:-1;pointer-events:none;
 background:radial-gradient(42% 46% at 30% 40%,rgba(217,138,69,.16),transparent 70%),radial-gradient(40% 50% at 72% 62%,rgba(201,83,47,.14),transparent 70%),radial-gradient(36% 40% at 55% 20%,rgba(63,143,124,.14),transparent 70%)}
.st{display:flex;flex-direction:column;align-items:center;text-align:center}
.st .v{font-family:"Bodoni Moda",Didot,serif;font-weight:440;font-variation-settings:"opsz" 72;color:var(--cream);line-height:1.02;letter-spacing:-.005em;text-shadow:0 0 26px rgba(4,18,13,.6)}
.st .v em{font-style:italic}
.st-i .v{font-style:italic}.st-i .v em{font-style:normal}
.st .c{margin-top:10px;font:600 11px/1.4 "Montserrat",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--small)}
.st-xl .v{font-size:clamp(40px,5.6vw,84px)}
.st-l .v{font-size:clamp(32px,4vw,58px)}
.st-m .v{font-size:clamp(26px,2.9vw,42px)}
.st-s .v{font-size:clamp(22px,2.2vw,32px)}
.st:nth-child(3n+2){transform:translateY(18px)}
.st:nth-child(4n){transform:translateY(-14px)}
.stars .rv{opacity:0;transition:opacity 1.1s ease var(--d,0ms),translate 1.1s ease var(--d,0ms);translate:0 22px}
.stars .rv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.stars .rv{opacity:1;translate:none;transition:none}}
@media (max-width:760px){
 .stars{gap:26px 26px;margin-top:48px}
 .st:nth-child(3n+2),.st:nth-child(4n){transform:none}
 .st .c{font-size:10px;margin-top:6px}
}

/* C1 Recordings: the "ball", slatted sphere with glitch edges; the announcement sits inside it */
.ball-hero{min-height:calc(min(1180px,94vw) + var(--top) + 40px);display:flex;align-items:center;justify-content:center;overflow:clip;padding-top:calc(var(--top) + 20px);padding-bottom:40px}
.ball{position:absolute;left:50%;top:calc(50% + var(--top) / 2);width:min(1180px,94vw);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
 background:url(img/art/v15/ball.webp) center / contain no-repeat}
.ball::after{content:"";position:absolute;inset:-18% -30% -70%;z-index:-1;background:radial-gradient(50% 42% at 50% 40%,rgba(14,104,115,.34),rgba(38,92,150,.14) 45%,rgba(4,18,13,0) 75%)}
.ball-hero .ramble{padding-top:0!important;padding-bottom:0;max-width:640px}
.ball-hero .ramble::before{inset:-4% -2%!important;background:radial-gradient(closest-side,rgba(4,18,13,.42) 0%,rgba(4,18,13,.26) 60%,rgba(4,18,13,0) 100%)!important}
.ball-hero .wrap::before{display:none}
.ball-hero .rtitle{font-size:clamp(46px,6.2vw,96px)}
@media (max-width:760px){
 .ball-hero{min-height:calc(156vw + var(--top) + 20px);padding-top:calc(var(--top) + 10px)}
 .ball{width:156vw}
 .ball-hero .kicker.date{margin-bottom:14px}
 .ball-hero .ramble{max-width:330px}
 .ball-hero .rtitle{font-size:46px}
 .ball-hero .count{gap:20px;margin-top:28px}
 .ball-hero .ctas{margin-top:28px;gap:16px 24px}
}

/* C3 STEPDANCE: Tracklist heading over the tracks, credits on the other side, one line each */
.sd-tlh{margin-bottom:26px}
.sd-credits{padding-top:52px}
.sd-credits .small{max-width:none;line-height:2;letter-spacing:.03em}
@media (max-width:900px){.sd-credits{padding-top:0}}

/* M3 credit inside the media mosaic: a slim strip under the photo, never over it */
.mosaic figure.m-bw img{bottom:20px;height:calc(100% - 20px)}
.mosaic figure.m-bw .credit{position:absolute;left:0;right:0;bottom:0;height:20px;margin:0;padding:4px 2px 0;text-align:right;font-size:9.5px}

.pg-home .hero-photo{--fl:20%;--fl2:36%}
.hero-text .epigraph{max-width:360px}
.hero-text .epigraph{position:relative;isolation:isolate}
.hero-text .epigraph::before{content:"";position:absolute;inset:-34px -60px -30px -50px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(4,18,13,.82),rgba(4,18,13,.6) 55%,rgba(4,18,13,0))}
@media (max-width:760px){.ball{background-image:url(img/art/v15/ball-800.webp)}}
@media (max-width:760px){.pg-events .hero-photo{--mb:74%}.pg-events .page-hero .hero-photo img{aspect-ratio:1/1}}
.hero-text .epigraph figcaption{display:inline-block}
.hero-text .epigraph::before{inset:-40px -70px -80px -70px;background:radial-gradient(closest-side,rgba(4,18,13,.88),rgba(4,18,13,.7) 60%,rgba(4,18,13,0))}
.ball-hero .kicker.date{position:relative;isolation:isolate}
.ball-hero .kicker.date::before{content:"";position:absolute;inset:-14px -40px;z-index:-1;background:radial-gradient(closest-side,rgba(4,18,13,.6),rgba(4,18,13,0))}


/* ===================== v16 (29 Oct, late night) ===================== */
/* G1 all colour fields run the same way as the heroes: soft horizontal, gently wavy bands; each tile is mirrored so it repeats down a longer section without stretching or a seam */
.f-newmusic{--art:url(img/art/v16/newmusic_desk.webp) center top / 100% auto repeat-y, #04120D}
.f-film{--art:url(img/art/v16/film_desk.webp) center top / 100% auto repeat-y, #04120D}
.f-work{--art:url(img/art/v16/work_desk.webp) center top / 100% auto repeat-y, #04120D}
.f-singers{--art:url(img/art/v16/singers_desk.webp) center top / 100% auto repeat-y, #04120D}
.f-duo{--art:url(img/art/v16/duo_desk.webp) center top / 100% auto repeat-y, #04120D}
.f-facts{--art:url(img/art/v16/liked2_desk.webp) center top / 100% auto repeat-y, #04120D}
.f-cta2{--art:url(img/art/v16/cta_desk.webp) center top / 100% auto repeat-y, #04120D}
.f-appear{--art:radial-gradient(60% 50% at 70% 35%,rgba(14,104,115,.30),transparent 70%),radial-gradient(50% 45% at 20% 75%,rgba(38,92,150,.16),transparent 70%),url(img/art/v16/appear_desk.webp) center top / 100% auto repeat-y, #04120D}
.pg-events .f-solo{--art:url(img/art/v16/liked2_desk.webp) center top / 100% auto repeat-y, #04120D}
.f-green{--art:radial-gradient(40% 50% at 82% 60%,rgba(217,190,140,.10),transparent 70%),url(img/art/v16/discreet_desk.webp) center top / 100% auto repeat-y, #04120D}
@media (max-width:760px){
 .f-newmusic{--art:url(img/art/v16/newmusic_mob.webp) center top / 240% auto repeat-y, #04120D}
 .f-film{--art:url(img/art/v16/film_mob.webp) center top / 240% auto repeat-y, #04120D}
 .f-work{--art:url(img/art/v16/work_mob.webp) center top / 240% auto repeat-y, #04120D}
 .f-singers{--art:url(img/art/v16/singers_mob.webp) center top / 240% auto repeat-y, #04120D}
 .f-duo{--art:url(img/art/v16/duo_mob.webp) center top / 240% auto repeat-y, #04120D}
 .f-facts{--art:url(img/art/v16/liked2_mob.webp) center top / 240% auto repeat-y, #04120D}
 .f-cta2{--art:url(img/art/v16/cta_mob.webp) center top / 240% auto repeat-y, #04120D}
 .f-appear{--art:radial-gradient(70% 40% at 60% 30%,rgba(14,104,115,.30),transparent 70%),url(img/art/v16/appear_mob.webp) center top / 240% auto repeat-y, #04120D}
 .pg-events .f-solo{--art:url(img/art/v16/liked2_mob.webp) center top / 240% auto repeat-y, #04120D}
 .f-green{--art:url(img/art/v16/discreet_mob.webp) center top / 240% auto repeat-y, #04120D}
}
/* G1/G2 sections melt into each other: longer feather, no hairline dividers */
.field::before,.field::after{inset:-20vh 0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%)}
.divider{display:none}

/* A1 About hero: Home's diagonal melt, photo less cropped so her whole dress and more of the tree show */
@media (min-width:761px){
 .pg-about .hero.page-hero{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
 .pg-about .hero-photo{--ov:7vw;--fl:20%;--fl2:36%;--f0:2%;--f1:12%;--f2:24%;--f3:36%;--f4:50%}
 .pg-about .page-hero .hero-photo img{height:min(100vh,960px);min-height:600px;object-position:50% 62%}
}

/* E1 Events hero: the melt starts further left and is more gradual; champagne-gold from the photo's own wall in the field */
@media (min-width:761px){
 .pg-events .hero-photo{--ov:15vw;--f0:0%;--f1:8%;--f2:18%;--f3:30%;--f4:44%;--fl:8%;--fl2:22%}
}
.hero-art.events::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(32% 40% at 46% 30%,rgba(217,190,140,.16),transparent 70%),radial-gradient(28% 36% at 40% 72%,rgba(201,170,120,.12),transparent 70%),radial-gradient(22% 30% at 18% 50%,rgba(217,190,140,.06),transparent 70%)}
@media (max-width:760px){.hero-art.events::after{background:radial-gradient(70% 30% at 50% 58%,rgba(217,190,140,.14),transparent 70%)}}

/* E2 Events: "Solo piano" label gone; right-hand text starts level with the heading */
.ev-solo .stack>.lead:first-child{margin-top:0}
.ev-solo .h2{margin-top:0}

/* R2 Singers & opera photo: lower and a touch bigger; script.js lines it up with "Now" … "Mancini" */
@media (min-width:1081px){
 #singers .side-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
 #singers .side-photo{align-self:start}
 #singers .side-photo img{width:100%;object-fit:cover}
}
/* R3 appearances: a very slight teal/blue in the glow, less amber */
.stars::before{background:radial-gradient(42% 46% at 30% 40%,rgba(217,138,69,.10),transparent 70%),radial-gradient(40% 50% at 72% 62%,rgba(201,83,47,.08),transparent 70%),radial-gradient(40% 44% at 55% 22%,rgba(63,143,124,.16),transparent 70%),radial-gradient(38% 44% at 80% 30%,rgba(14,104,115,.16),transparent 70%),radial-gradient(36% 40% at 15% 70%,rgba(38,92,150,.08),transparent 70%)}

/* R4 Recitals video: a little bigger and centred on the page */
.pg-recitals .f-film .grid2{display:block}
.pg-recitals .f-film figure{max-width:760px;margin:48px auto 0}

/* C1 Ramble ball: slightly thicker slats, softer cuts */
.ball{background-image:url(img/art/v16/ball.webp)}
@media (max-width:760px){.ball{background-image:url(img/art/v16/ball-800.webp)}}

/* C2 STEPDANCE: credits in the album description (a touch bigger); videos stacked beside the tracklist */
#stepdance .sd-credits{padding-top:0;margin-top:22px;font:400 15px/1.85 "Montserrat",sans-serif;letter-spacing:.02em;color:var(--small)}
.sd-stack{display:grid;grid-template-columns:1fr!important;gap:40px}
.sd-vids{padding-top:52px}
@media (max-width:900px){.sd-vids{padding-top:24px}}

/* M1 self-hosted warm-up video, graded like the embeds */
.yt.vid{aspect-ratio:16/9;overflow:hidden;background:#04120D}
.yt.vid video{display:block;width:100%;height:100%;object-fit:cover}

/* M5 one long horizontal photo in the middle of the gallery */
.gallery.mosaic .m-main{grid-column:2/4!important;grid-row:2!important;aspect-ratio:1.85/1}
@media (max-width:760px){.gallery.mosaic .m-main{grid-column:1/3!important;grid-row:3!important}}
.mosaic figure.m-bw img{bottom:0;height:100%}

/* G4 press kit page (not linked from the site) */
.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.pk-ph{margin:0;aspect-ratio:3/2;overflow:hidden}
.pk-ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (min-width:761px){.pg-about .page-hero .hero-photo img{height:min(94vh,900px);object-position:50% 92%}}

/* H1 poem: one line per sentence */
@media (min-width:1000px){.hero-text .epigraph{max-width:none}.hero-text .epigraph p{white-space:nowrap;font-size:15.5px}}
.hero-text .epigraph figcaption{color:var(--cream)}
.hero-text .epigraph::before{inset:-40px -80px -110px -70px}
.hero-text .epigraph figcaption{position:relative;isolation:isolate}
.hero-text .epigraph figcaption::after{content:"";position:absolute;inset:-12px -30px;z-index:-1;background:radial-gradient(closest-side,rgba(4,18,13,.75),rgba(4,18,13,0))}

/* ===================== v17 (29 Oct, ~midnight) ===================== */
/* H1 Home: one background style all the way down. The Ramble band's cream streaks are melted into soft copper/teal bands (img/art/v17/album_soft_*),
   and the Home fields below use softened copies of the same wave tiles, so the page flows in gradual gradients with no streaks or crisp wave lines */
.pg-home .f-album{--art:url(img/art/v17/album_soft_desk.webp) center / cover no-repeat, #04120D}
.pg-home .f-newmusic{--art:url(img/art/v17/newmusic_soft_desk.webp) center top / 100% auto repeat-y, #04120D}
.pg-home .f-work{--art:url(img/art/v17/work_soft_desk.webp) center top / 100% auto repeat-y, #04120D}
.pg-home .f-film{--art:url(img/art/v17/film_soft_desk.webp) center top / 100% auto repeat-y, #04120D}
@media (max-width:760px){
 .pg-home .f-album{--art:url(img/art/v17/album_soft_mob.webp) center / cover no-repeat, #04120D}
 .pg-home .f-newmusic{--art:url(img/art/v17/newmusic_soft_mob.webp) center top / 240% auto repeat-y, #04120D}
 .pg-home .f-work{--art:url(img/art/v17/work_soft_mob.webp) center top / 240% auto repeat-y, #04120D}
 .pg-home .f-film{--art:url(img/art/v17/film_soft_mob.webp) center top / 240% auto repeat-y, #04120D}
}

/* R1 Recitals 'Ramble on Piano in recital': right-hand text sits a little lower (starts level with the heading, not the kicker) */
@media (min-width:901px){section[aria-labelledby="prog-h"] .grid2>.stack{padding-top:58px}}
/* R2 the new album tracklist a touch smaller */
.pg-recitals .tracks li{padding:14px 0}
.pg-recitals .tracks .work{font-size:clamp(19px,1.6vw,23px)}
.pg-recitals .tracks .comp{font-size:11px}
/* R3 'Chamber music': right-hand intro lower */
@media (min-width:901px){#chamber .grid2:first-child>.stack{padding-top:58px}}
/* R4 Singers & opera photo: show more of her (crop from her side, gentler feather on the left) */
#singers .side-photo img{object-position:16% 45%;
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 80%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
 mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 80%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%)}
/* R5 'In recital' video: off-centre to the right and 2% smaller */
.pg-recitals .f-film figure{max-width:745px;margin:48px 4% 0 auto}
@media (max-width:760px){.pg-recitals .f-film figure{max-width:98%;margin:32px 0 0 auto}}

/* E1 Events hero: the cream streaks under ENQUIRE take on the champagne-gold of the photo's wall beside them (img/art/v17/events_gold_*) */
.hero-art.events{background:url(img/art/v17/events_gold_desk.webp) center / cover no-repeat, #04120D}
@media (max-width:760px){.hero-art.events{background:url(img/art/v17/events_gold_mob.webp) center / cover no-repeat, #04120D}}
/* E2 Events 'One instrument. Every feeling.': right-hand text lower */
@media (min-width:901px){.ev-solo>.stack{padding-top:72px}}

/* C2 STEPDANCE: the "STEPDANCE on film" title is back above the videos */
.sd-vids{padding-top:0}
.sdv-h{font-size:clamp(34px,3.4vw,52px);margin:10px 0 40px}

/* C1 Recordings ball: same thick slats, but the cuts between them are now soft shaded gaps that fade toward the middle, each slat shading gently from top to bottom (like her reference photos) */
.ball{background-image:url(img/art/v17/ball.webp)}
@media (max-width:760px){.ball{background-image:url(img/art/v17/ball-800.webp)}}

/* M2 Media gallery: the blond / gold-wall Steinway photo moves to the far right of its row (the other three shift left), then swaps with the blazer photo, so it sits above (tall, top right) and the blazer photo sits below */
.gallery.mosaic .m-close{grid-column:4!important;grid-row:1/3!important}
.gallery.mosaic .m-red{grid-column:1!important;grid-row:3!important}.gallery.mosaic .m-bos{grid-column:2!important;grid-row:3!important}.gallery.mosaic .m-app{grid-column:3!important;grid-row:3!important}
.gallery.mosaic .m-bw{grid-column:4!important;grid-row:3!important}
@media (max-width:760px){
 .gallery.mosaic .m-close{grid-column:2!important;grid-row:4/6!important}
 .gallery.mosaic .m-bw{grid-column:1!important;grid-row:4!important}
 .gallery.mosaic .m-red{grid-column:1!important;grid-row:5!important}
 .gallery.mosaic .m-bos{grid-column:1!important;grid-row:6!important}.gallery.mosaic .m-app{grid-column:2!important;grid-row:6!important}
}

/* M1 Media duo videos harmonised: Gershwin a touch less golden, the Syde warm-up warmed toward cream with softer whites — a middle ground between the two */
.yt[data-grade=duoL]{filter:url(#g-duoL)}
.yt[data-grade=duoR]{filter:url(#g-duoR)}

/* H1 (cont.) Home hero: the bright cream streaks in the lower part of the hero melt into the same soft bands, so hero → Ramble → About flows as one gradient */
.pg-home .hero-art{background:url(img/art/v17/hero_soft_desk.webp) center / cover no-repeat, #04120D}
@media (max-width:760px){.pg-home .hero-art{background:url(img/art/v17/hero_soft_mob.webp) center / cover no-repeat, #04120D}}


/* ===================== v18 (30 Oct, from her 09:49 feedback) ===================== */
/* H1 Home bio: the background no longer changes when "Long bio" is chosen. The fades top and bottom keep their short-bio lengths
   (they were percentages, so the taller long bio faded more of the amber band and it read darker), and the extra height is filled
   by gently stretching the lower half of the short-bio field (script.js), so the short-bio background simply grows */
.pg-home #about.bio-long::before{bottom:auto;height:var(--bio-top);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--bio-fade));mask-image:linear-gradient(to bottom,transparent 0,#000 var(--bio-fade))}
.pg-home #about.bio-long::after{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--bio-fade),#000 calc(100% - var(--bio-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--bio-fade),#000 calc(100% - var(--bio-fade)),transparent 100%)}
.bio-ext{display:none}
.pg-home #about.bio-long .bio-ext{display:block;position:absolute;left:0;right:0;z-index:-2;pointer-events:none;background:var(--art)}
.pg-home #about.bio-long .bio-low{top:var(--bio-split);height:var(--bio-low);background-position-y:calc(-1 * var(--bio-top));transform-origin:50% 0;transform:scaleY(var(--bio-scale,1));
 -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--bio-lfade)),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--bio-lfade)),transparent 100%)}

/* H2 Home "All videos & photos": a full-size tap target that nothing can sit on top of (on phones the tap could land on the layer above) */
.pg-home .f-film .more{position:relative;z-index:3;display:inline-block;padding:14px 0;margin:-14px 0;touch-action:manipulation;-webkit-tap-highlight-color:rgba(243,234,217,.15)}
.pg-home .f-film .videos{position:relative;z-index:1}

/* A1 About hero: the melt into the garden photo starts further left at the top, like Recitals */
@media (min-width:761px){
 .pg-about .hero.page-hero{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
 .pg-about .hero-photo{--ov:13vw;--fa:100deg;--f0:0%;--f1:7%;--f2:16%;--f3:27%;--f4:40%;--fl:6%;--fl2:20%}
}
/* A2 About "Ensemble, opera and training": the list starts level with the title, not above it */
@media (min-width:901px){.f-facts .facts{padding-top:var(--facts-pad,36px)}.f-facts .facts dt:first-child{margin-top:0}}

/* R1 + R2 Recitals "Ramble on Piano in recital": text under the title on the left; the recital programme (7 works) on the right */
.prog-text{margin-top:40px}
.prog-list .tracks{max-width:none}
@media (min-width:901px){.prog-list{padding-top:var(--prog-pad,0px)}.prog-list .tracks li:first-child{padding-top:0}}
@media (max-width:900px){.prog-list{margin-top:24px}}
/* R3 Singers & opera photo: the left edge now melts as softly as the right (the photo is extended on the left with its own dark stage, so the fade never cuts into her) */
#singers .side-photo img{object-position:26% 45%;
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
 mask-image:linear-gradient(to right,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%)}

@media (max-width:1080px){#singers .side-photo img{width:100%;aspect-ratio:1563/1241;height:auto;object-fit:cover;object-position:26% 45%}}

/* E1 Events hero: more champagne-gold in the top part, melting into the photo's gold wall; the strongest gold sits where her blond hair is,
   so the copper streaks of the field no longer run across her hair */
.hero-art.events::after{background:
 radial-gradient(12% 12% at 51% 16%,rgba(170,136,76,.55),rgba(170,136,76,0) 100%),
 radial-gradient(24% 46% at 55% 26%,rgba(176,140,78,.62),rgba(160,124,64,.38) 45%,rgba(140,108,52,0) 100%),
 radial-gradient(40% 34% at 46% 8%,rgba(196,162,104,.40),rgba(196,162,104,0) 100%),
 radial-gradient(34% 22% at 24% 0%,rgba(196,162,104,.30),rgba(196,162,104,0) 100%),
 linear-gradient(180deg,rgba(186,150,92,.28) 0,rgba(186,150,92,.14) 24%,rgba(186,150,92,0) 46%),
 radial-gradient(28% 36% at 40% 72%,rgba(201,170,120,.10),transparent 70%)}
@media (max-width:760px){.hero-art.events::after{background:radial-gradient(70% 30% at 50% 58%,rgba(217,190,140,.14),transparent 70%),linear-gradient(180deg,rgba(186,150,92,.22),rgba(186,150,92,0) 40%)}}
/* E2 "One instrument. Every feeling.": the text is bigger and sits lower, centred between "Every feeling" and "Music that belongs to the setting" (script.js measures it) */
.ev-solo .stack .lead{font-size:clamp(19px,1.6vw,22px);line-height:1.6;color:var(--cream)}
.ev-solo .stack p:not(.lead){font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:var(--cream)}
@media (min-width:901px){.ev-solo>.stack{padding-top:0;margin-top:var(--solo-mt,200px)}section.f-solo{padding-bottom:40px}}
/* E3 occasion cards: "Weddings & ceremonies", and all three descriptions larger */
.pg-events .f-work .grid3 p{font-size:clamp(16px,1.3vw,18px);line-height:1.7}
/* E4 white blazer photo: a soft, round, oval melt instead of the square edge */
.pg-events .f-green .side-photo img{
 -webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,#000 46%,rgba(0,0,0,.84) 60%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.18) 89%,transparent 100%);
 mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,#000 46%,rgba(0,0,0,.84) 60%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.18) 89%,transparent 100%)}

/* C1 Recordings: "New solo album · GB Records · Out 5 February 2027" a little larger */
.pg-recordings .kicker.date{font-size:clamp(13px,1vw,14.5px);letter-spacing:.18em}
@media (min-width:901px){.pg-recordings .kicker.date{white-space:nowrap;width:max-content;max-width:none;margin-left:50%;transform:translateX(-50%)}}
/* C2 Recordings tracklist: the first track lines up with "The album" on the left */
@media (min-width:901px){#album .tracks{padding-top:var(--alb-pad,0px)}#album .tracks li:first-child{padding-top:0}}

/* M3 Media gallery: the original crops back (blond / Steinway photo landscape, white-blazer photo tall), blond above, blazer tall below it */
.gallery.mosaic .m-close{grid-column:4!important;grid-row:1!important}
.gallery.mosaic .m-bw{grid-column:4!important;grid-row:2/4!important}
.gallery.mosaic .m-red{grid-column:1!important;grid-row:3!important}.gallery.mosaic .m-bos{grid-column:2!important;grid-row:3!important}.gallery.mosaic .m-app{grid-column:3!important;grid-row:3!important}
@media (max-width:760px){
 .gallery.mosaic .m-close{grid-column:2!important;grid-row:4!important}
 .gallery.mosaic .m-bw{grid-column:2!important;grid-row:5/7!important}
 .gallery.mosaic .m-red{grid-column:1!important;grid-row:4!important}
 .gallery.mosaic .m-bos{grid-column:1!important;grid-row:5!important}.gallery.mosaic .m-app{grid-column:1!important;grid-row:6!important}
}

/* Press kit (direct link /press, not in the menu): logo placeholder, contact list, photo credit */
.pk-logo{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:34px 36px;background:radial-gradient(120% 120% at 20% 20%,rgba(14,104,115,.35),rgba(4,18,13,.2))}
.pk-mono{font-family:"Bodoni Moda",serif;font-size:64px;line-height:1;color:var(--cream)}
.pk-name{font:500 12px/1.4 "Montserrat",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--cream)}
.pk-contact dt:first-child{margin-top:28px}
.pk-contact a{color:var(--cream)}
.pk-ph{position:relative}
.pk-cap{position:absolute;right:6px;bottom:4px;font:500 10px/1.4 "Montserrat",sans-serif;letter-spacing:.1em;color:var(--cream);text-shadow:0 0 6px rgba(4,18,13,.9)}

/* EN | IT language switch (header on desktop, inside the menu on phones) */
.lang{display:inline-flex;align-items:center;gap:8px;margin-left:4px;font:500 12px/1 "Montserrat",sans-serif;letter-spacing:.16em}
.nav .lang a{color:var(--small);padding:6px 2px;text-decoration:none}
.nav .lang a[aria-current]{color:var(--cream);text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:1px}
.lang .sep{color:var(--small)}
@media (max-width:900px){.nav .lang{margin:18px 0 0;gap:12px}.nav .lang a{display:inline-block;padding:10px 4px;font-size:13px}}

/* v18: no sideways scroll on phones (the appearances strip was 55px wider than the screen when motion is reduced) */
.marquee{overflow:hidden;max-width:100%}
@media (prefers-reduced-motion:reduce){.mq-list li{white-space:normal;text-align:center;padding:0 12px}.mq-list li::after{margin-left:24px}}
@media (max-width:760px){.hero-text .epigraph::before{inset:-30px -20px -70px -20px}.hero{overflow-x:clip}}
/* the EN | IT switch needs a little room in the desktop menu: tighter spacing on narrower desktops (the Italian labels are longer) */
@media (min-width:901px) and (max-width:1320px){.nav{gap:clamp(12px,1.5vw,30px)}.nav a{letter-spacing:.12em}.lang{margin-left:0}}
@media (min-width:901px) and (max-width:1100px){.mono{font-size:19px}.nav a.btn{padding:13px 16px}}
@media (min-width:901px) and (max-width:1000px){.nav{gap:10px}.nav a{font-size:11px;letter-spacing:.08em}.mono{font-size:17px}.nav a.btn{padding:12px 12px}}

/* v19b (30 Oct, 12:35) E4 white blazer photo: the same kind of fade as the other side photos (Home 'hall', Recitals 'singers'): two straight
   feathers crossed (16% left/right, 14% top/bottom), eased, no oval. The bright white wall is first toned down toward the page green
   from each edge (an overlay inside the same masked wrapper, so photo and tone fade out together: no ring, no pale card) */
.pg-events .f-green .side-photo .tone{display:block;position:relative;
 -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,0.06) 2.4%,rgba(0,0,0,0.22) 4.8%,rgba(0,0,0,0.43) 7.2%,rgba(0,0,0,0.65) 9.6%,rgba(0,0,0,0.84) 12.0%,rgba(0,0,0,0.97) 14.4%,#000 16%,#000 84%,rgba(0,0,0,0.97) 85.6%,rgba(0,0,0,0.84) 88.0%,rgba(0,0,0,0.65) 90.4%,rgba(0,0,0,0.43) 92.8%,rgba(0,0,0,0.22) 95.2%,rgba(0,0,0,0.06) 97.6%,transparent 100%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,0.06) 2.1%,rgba(0,0,0,0.22) 4.2%,rgba(0,0,0,0.43) 6.3%,rgba(0,0,0,0.65) 8.4%,rgba(0,0,0,0.84) 10.5%,rgba(0,0,0,0.97) 12.6%,#000 14%,#000 86%,rgba(0,0,0,0.97) 87.4%,rgba(0,0,0,0.84) 89.5%,rgba(0,0,0,0.65) 91.6%,rgba(0,0,0,0.43) 93.7%,rgba(0,0,0,0.22) 95.8%,rgba(0,0,0,0.06) 97.9%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,0.06) 2.4%,rgba(0,0,0,0.22) 4.8%,rgba(0,0,0,0.43) 7.2%,rgba(0,0,0,0.65) 9.6%,rgba(0,0,0,0.84) 12.0%,rgba(0,0,0,0.97) 14.4%,#000 16%,#000 84%,rgba(0,0,0,0.97) 85.6%,rgba(0,0,0,0.84) 88.0%,rgba(0,0,0,0.65) 90.4%,rgba(0,0,0,0.43) 92.8%,rgba(0,0,0,0.22) 95.2%,rgba(0,0,0,0.06) 97.6%,transparent 100%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,0.06) 2.1%,rgba(0,0,0,0.22) 4.2%,rgba(0,0,0,0.43) 6.3%,rgba(0,0,0,0.65) 8.4%,rgba(0,0,0,0.84) 10.5%,rgba(0,0,0,0.97) 12.6%,#000 14%,#000 86%,rgba(0,0,0,0.97) 87.4%,rgba(0,0,0,0.84) 89.5%,rgba(0,0,0,0.65) 91.6%,rgba(0,0,0,0.43) 93.7%,rgba(0,0,0,0.22) 95.8%,rgba(0,0,0,0.06) 97.9%,transparent 100%);mask-composite:intersect}
.pg-events .f-green .side-photo .tone img{display:block;-webkit-mask-image:none;mask-image:none;filter:brightness(0.88)}
.pg-events .f-green .side-photo .tone::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(to bottom,rgba(14,78,70,0.9) 0,rgba(14,78,70,0.76) 12.0%,rgba(14,78,70,0.45) 24.0%,rgba(14,78,70,0.14) 36.0%,rgba(14,78,70,0) 48%),linear-gradient(to right,rgba(14,78,70,0.8) 0,rgba(14,78,70,0.68) 8.5%,rgba(14,78,70,0.40) 17.0%,rgba(14,78,70,0.12) 25.5%,rgba(14,78,70,0) 34%),linear-gradient(to left,rgba(14,78,70,0.65) 0,rgba(14,78,70,0.55) 6.5%,rgba(14,78,70,0.33) 13.0%,rgba(14,78,70,0.10) 19.5%,rgba(14,78,70,0) 26%),linear-gradient(to top,rgba(14,78,70,0.62) 0,rgba(14,78,70,0.52) 6.5%,rgba(14,78,70,0.31) 13.0%,rgba(14,78,70,0.10) 19.5%,rgba(14,78,70,0) 26%)}


/* v19c (30 Oct, 13:16) Selected appearances: back to the animated, roughly circular cluster, wider at the top (as first built in v15 at 1440),
   now with fixed row breaks so it keeps that shape at every desktop width: 1 / 2 / 3 / 3 / 1 venues, gentle offsets, staggered rise + slow float */
.stars{row-gap:clamp(10px,1.6vw,26px);column-gap:clamp(30px,4.4vw,76px);max-width:1240px;padding:0 12px}
.stars .st-br{flex-basis:100%;width:100%;height:0;margin:0;padding:0;list-style:none}
.stars .st,.stars .st:nth-child(3n+2),.stars .st:nth-child(4n){transform:none;position:relative;left:var(--x,0);top:var(--y,0)}
.stars .st .v{display:inline-block}
.stars .st>span{animation:stFloat var(--fd,8s) ease-in-out var(--fdl,0s) infinite}
.stars .st .c{animation-name:stFloatC}
@keyframes stFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--fx,3px),-7px)}}
@keyframes stFloatC{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--fx,3px),-5px)}}
.stars .rv{transition:opacity 1.3s ease var(--d,0ms),translate 1.3s cubic-bezier(.2,.7,.2,1) var(--d,0ms),scale 1.3s cubic-bezier(.2,.7,.2,1) var(--d,0ms);translate:0 26px;scale:.94}
.stars .rv.in{translate:0 0;scale:1}
@media (prefers-reduced-motion:reduce){.stars .rv{opacity:1;translate:none;scale:none;transition:none}.stars .st>span{animation:none}}
@media (max-width:760px){
 .stars{row-gap:24px;column-gap:22px;padding:0}
 .stars .st-br{display:none}.stars .st .v{max-width:calc(100vw - 72px)}
 .stars .st,.stars .st:nth-child(3n+2),.stars .st:nth-child(4n){left:0;top:0;flex-basis:100%}
 .stars .st:nth-child(odd of .st){left:-10px}.stars .st:nth-child(even of .st){left:10px}
 .stars .st:first-child{left:0}
}

/* v19c Singers & opera: the four languages sit under the photo, as a small caption centred on its visible (unfaded) part */
#singers .side-photo .lang-cap{margin:2px 12% 0;text-align:center;display:flex;flex-direction:column;gap:8px}
#singers .lang-cap .lc-k{font:600 10.5px/1.5 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--small)}
#singers .lang-cap .lc-l{font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-size:clamp(18px,1.5vw,22px);line-height:1.3;color:var(--cream)}
@media (max-width:1080px){#singers .side-photo .lang-cap{margin:4px 8% 0}}
@media (max-width:600px){#singers .side-photo .lang-cap{margin:2px 0 0}#singers .lang-cap .lc-k{font-size:9.5px;letter-spacing:.12em}#singers .lang-cap .lc-l{font-size:18px}}

/* v19c (30 Oct, 13:17/13:26) Duo with baritone: the "Let Beauty Awake" photo (Metchosin, Aug 2022) in the empty right-hand side, as ONE photo
   with its own grey wall kept across the middle, the same fade as the blazer photo above (two eased straight feathers, 16% left/right,
   14% top/bottom, on a span wrapper). The image file has soft extended margins so both faces sit inside the full-strength area, and its outer
   band is toned toward the page green from each edge (faces untouched); a light edge tone inside the same mask. No oval, no ring, no holes. */
.duo-grid{align-items:center}
/* v19d: softer corners (her note 14:35) via a third radial layer */
/* v5 (30 Oct 14:50): photo outpainted on all sides; the fade now lives only in the added background, both people fully opaque */
/* v5b (30 Oct 15:00): one soft rounded fade, no rectangle edges/corners (her note 14:57) */
.duo-photo .tone{display:block;position:relative;-webkit-mask-image:radial-gradient(ellipse 56% 58% at 54% 48.5%,#000 0,#000 66%,rgba(0,0,0,0.962) 70.2%,rgba(0,0,0,0.854) 74.5%,rgba(0,0,0,0.691) 78.8%,rgba(0,0,0,0.500) 83.0%,rgba(0,0,0,0.309) 87.2%,rgba(0,0,0,0.146) 91.5%,rgba(0,0,0,0.038) 95.8%,rgba(0,0,0,0.000) 100.0%),linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in,source-in;mask-image:radial-gradient(ellipse 56% 58% at 54% 48.5%,#000 0,#000 66%,rgba(0,0,0,0.962) 70.2%,rgba(0,0,0,0.854) 74.5%,rgba(0,0,0,0.691) 78.8%,rgba(0,0,0,0.500) 83.0%,rgba(0,0,0,0.309) 87.2%,rgba(0,0,0,0.146) 91.5%,rgba(0,0,0,0.038) 95.8%,rgba(0,0,0,0.000) 100.0%),linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect,intersect}
.duo-photo .tone img{display:block;width:100%;height:auto;-webkit-mask-image:none;mask-image:none}
@media (min-width:901px){.duo-photo{margin-top:80px}}
.duo-photo .credit{text-align:center;padding:0 12%;margin-top:-2px;line-height:1.6}
@media (max-width:900px){.duo-photo{margin-top:8px}.duo-photo .credit{padding:0 3%}}

/* ===== CMS: upcoming concerts (Home; the section appears only when content/concerts.json has future dates) ===== */
.concerts-sec{padding-top:72px;padding-bottom:72px}
.concerts{list-style:none;margin-top:40px;display:grid;gap:34px}
.concerts li{display:grid;grid-template-columns:minmax(160px,230px) 1fr auto;gap:4px 36px;align-items:baseline}
.concerts .cc-when{font:600 11px/1.6 "Montserrat",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--small);grid-row:1/4}
.concerts .cc-what{font:400 24px/1.25 "Bodoni Moda",serif;grid-column:2}
.concerts .cc-where{grid-column:2;color:var(--small);font-size:14px}
.concerts .cc-more{grid-column:2;font-size:14px}
.concerts .more{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap}
@media (max-width:760px){.concerts li{grid-template-columns:1fr}.concerts .cc-when,.concerts .cc-what,.concerts .cc-where,.concerts .cc-more,.concerts .more{grid-column:1;grid-row:auto;justify-self:start}}