/* @fonts-start — self-hosted (no third-party requests); the preview build swaps this block for Google Fonts */
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-italic-latin-ext.woff2) format("woff2");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:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-italic-latin.woff2) format("woff2");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:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-latin-ext.woff2) format("woff2");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:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-latin.woff2) format("woff2");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:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/newsreader-roman.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/newsreader-italic.woff2) format("woff2")}
/* @fonts-end */

/* Layout: ebony and ivory. Black-lacquer sections (the instrument, the stage) alternate with
   ivory score-paper sections. Gold is the accent everywhere (bright on the lacquer, antique
   on the paper); red, the colour of the felt above the keys, marks initials and dates on the
   paper, as the rubrics of a printed programme. */
:root{
  color-scheme:dark;
  --ebony:#0B0A0A;          /* black lacquer */
  --ebony-2:#141211;        /* raised lacquer: panels */
  --ivory:#F4EEE2;          /* paper and keys */
  --ivory-2:#EAE2D2;
  --ink:#1B1714;            /* text on ivory, 15:1 */
  --ink-2:#4F4438;          /* secondary on ivory, 8.1:1 */
  --gold:#C7A35E;           /* gold leaf on lacquer: rules, borders, buttons (8.3:1) */
  --gold-text:#D8B672;      /* gold for small text on lacquer, a little brighter (10.2:1) */
  --gold-hi:#EAD39F;
  --gold-lo:#8F6F37;        /* gold lines and curves on ivory */
  --gold-ink:#5C4419;       /* gold text on ivory: deep antique gold (7.9:1) */
  --felt:#8C1D2B;           /* the red of the felt: initials and dates on paper (rubrics), errors (7.8:1) */
  --text:#E6DFD2;           /* running text on lacquer, 15:1 */
  --mute:#BDB3A6;           /* secondary on lacquer, 9.6:1 */
  --line-dk:rgba(244,238,226,.2);
  --line-dk-2:rgba(244,238,226,.36);
  --line-lt:rgba(27,23,20,.22);
  --line-lt-2:rgba(27,23,20,.42);
  --f-display:"Bodoni Moda","Bodoni 72","Didot","Bodoni MT",Georgia,serif;
  --f-text:"Newsreader",Georgia,"Times New Roman",serif;
  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(84px,11vw,156px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(78px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--ebony);color:var(--text);font:400 1.125rem/1.65 var(--f-text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.paper :focus-visible{outline-color:var(--gold-ink)}
::selection{background:var(--gold);color:var(--ebony)}
.paper ::selection{background:var(--gold-ink);color:var(--ivory)}
[data-lang="it"] [data-l="en"],[data-lang="en"] [data-l="it"]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:12px 18px;background:var(--gold);color:var(--ebony);font:600 .8rem/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- The two materials ---------- */
.lacquer{background:var(--ebony);color:var(--text);color-scheme:dark}
.paper{position:relative;background:var(--ivory);color:var(--ink);color-scheme:light;isolation:isolate}
/* the faint tooth of score paper */
.paper::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.sec{padding-block:var(--sec)}

/* inside the lid: the strings of a grand piano (bass strings crossing over the treble ones),
   in gold, barely visible behind the black sections */
.lacquer.sec,.foot{position:relative;z-index:1;isolation:isolate}
/* the black sections rise into the ivory one above with the S-curve of a grand piano's side
   (the bentside), and a thin gold line runs inside the edge, like an inlay on the case */
.bent{position:absolute;left:0;right:0;bottom:calc(100% - 1px);display:block;width:100%;height:clamp(40px,7.5vw,120px);overflow:visible;pointer-events:none}
.bent__fill{fill:var(--ebony)}
.bent__line{fill:none;stroke:var(--gold);stroke-width:1.25;vector-effect:non-scaling-stroke}
.lacquer.sec::before,.foot::before,.phead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='1200' y1='0' x2='520' y2='800'%3E%3Cstop offset='0' stop-color='%23C7A35E'/%3E%3Cstop offset='.5' stop-color='%23C7A35E' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23C7A35E' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url%28%23f%29' stroke-linecap='round'%3E%3Cline x1='170.0' y1='760.0' x2='460.3' y2='-404.4' stroke-width='1.0'/%3E%3Cline x1='183.1' y1='758.3' x2='471.2' y2='-406.6' stroke-width='1.0'/%3E%3Cline x1='196.2' y1='756.6' x2='482.1' y2='-408.9' stroke-width='1.0'/%3E%3Cline x1='209.3' y1='754.9' x2='492.9' y2='-411.1' stroke-width='1.0'/%3E%3Cline x1='222.4' y1='753.2' x2='503.8' y2='-413.3' stroke-width='1.0'/%3E%3Cline x1='235.5' y1='751.5' x2='514.7' y2='-415.5' stroke-width='1.0'/%3E%3Cline x1='248.5' y1='749.9' x2='525.5' y2='-417.7' stroke-width='1.0'/%3E%3Cline x1='261.6' y1='748.3' x2='536.4' y2='-419.8' stroke-width='1.0'/%3E%3Cline x1='274.7' y1='746.8' x2='547.3' y2='-421.9' stroke-width='1.0'/%3E%3Cline x1='287.8' y1='745.2' x2='558.1' y2='-423.9' stroke-width='1.0'/%3E%3Cline x1='300.9' y1='743.8' x2='569.0' y2='-425.9' stroke-width='1.0'/%3E%3Cline x1='314.0' y1='742.4' x2='579.9' y2='-427.8' stroke-width='1.0'/%3E%3Cline x1='327.1' y1='741.0' x2='590.7' y2='-429.7' stroke-width='1.0'/%3E%3Cline x1='340.2' y1='739.7' x2='601.6' y2='-431.5' stroke-width='1.0'/%3E%3Cline x1='353.3' y1='738.5' x2='612.4' y2='-433.2' stroke-width='0.7'/%3E%3Cline x1='366.4' y1='737.3' x2='623.3' y2='-434.8' stroke-width='0.7'/%3E%3Cline x1='379.5' y1='736.2' x2='634.2' y2='-436.4' stroke-width='0.7'/%3E%3Cline x1='392.5' y1='735.2' x2='645.0' y2='-437.9' stroke-width='0.7'/%3E%3Cline x1='405.6' y1='734.3' x2='655.9' y2='-439.3' stroke-width='0.7'/%3E%3Cline x1='418.7' y1='733.5' x2='666.7' y2='-440.6' stroke-width='0.7'/%3E%3Cline x1='431.8' y1='732.7' x2='677.6' y2='-441.9' stroke-width='0.7'/%3E%3Cline x1='444.9' y1='732.0' x2='688.4' y2='-443.0' stroke-width='0.7'/%3E%3Cline x1='458.0' y1='731.5' x2='699.3' y2='-444.0' stroke-width='0.7'/%3E%3Cline x1='471.1' y1='731.0' x2='710.1' y2='-445.0' stroke-width='0.7'/%3E%3Cline x1='484.2' y1='730.6' x2='721.0' y2='-445.8' stroke-width='0.7'/%3E%3Cline x1='497.3' y1='730.3' x2='731.8' y2='-446.5' stroke-width='0.7'/%3E%3Cline x1='510.4' y1='730.1' x2='742.7' y2='-447.2' stroke-width='0.7'/%3E%3Cline x1='523.5' y1='730.0' x2='753.5' y2='-447.7' stroke-width='0.7'/%3E%3Cline x1='536.5' y1='730.0' x2='764.4' y2='-448.2' stroke-width='0.7'/%3E%3Cline x1='549.6' y1='730.1' x2='775.2' y2='-448.5' stroke-width='0.7'/%3E%3Cline x1='562.7' y1='730.3' x2='786.1' y2='-448.7' stroke-width='0.7'/%3E%3Cline x1='575.8' y1='730.6' x2='796.9' y2='-448.9' stroke-width='0.7'/%3E%3Cline x1='588.9' y1='731.0' x2='807.8' y2='-448.9' stroke-width='0.7'/%3E%3Cline x1='602.0' y1='731.5' x2='818.6' y2='-448.8' stroke-width='0.7'/%3E%3Cline x1='615.1' y1='732.0' x2='829.5' y2='-448.7' stroke-width='0.7'/%3E%3Cline x1='628.2' y1='732.7' x2='840.3' y2='-448.4' stroke-width='0.7'/%3E%3Cline x1='641.3' y1='733.5' x2='851.2' y2='-448.0' stroke-width='0.7'/%3E%3Cline x1='654.4' y1='734.3' x2='862.0' y2='-447.6' stroke-width='0.7'/%3E%3Cline x1='667.5' y1='735.2' x2='872.8' y2='-447.1' stroke-width='0.7'/%3E%3Cline x1='680.5' y1='736.2' x2='883.7' y2='-446.4' stroke-width='0.7'/%3E%3Cline x1='693.6' y1='737.3' x2='894.5' y2='-445.7' stroke-width='0.7'/%3E%3Cline x1='706.7' y1='738.5' x2='905.3' y2='-445.0' stroke-width='0.7'/%3E%3Cline x1='719.8' y1='739.7' x2='916.2' y2='-444.1' stroke-width='0.7'/%3E%3Cline x1='732.9' y1='741.0' x2='927.0' y2='-443.2' stroke-width='0.7'/%3E%3Cline x1='746.0' y1='742.4' x2='937.9' y2='-442.2' stroke-width='0.7'/%3E%3Cline x1='759.1' y1='743.8' x2='948.7' y2='-441.1' stroke-width='0.7'/%3E%3Cline x1='772.2' y1='745.2' x2='959.5' y2='-440.0' stroke-width='0.7'/%3E%3Cline x1='785.3' y1='746.8' x2='970.4' y2='-438.9' stroke-width='0.7'/%3E%3Cline x1='798.4' y1='748.3' x2='981.2' y2='-437.7' stroke-width='0.7'/%3E%3Cline x1='811.5' y1='749.9' x2='992.0' y2='-436.4' stroke-width='0.7'/%3E%3Cline x1='824.5' y1='751.5' x2='1002.9' y2='-435.1' stroke-width='0.7'/%3E%3Cline x1='837.6' y1='753.2' x2='1013.7' y2='-433.8' stroke-width='0.7'/%3E%3Cline x1='850.7' y1='754.9' x2='1024.5' y2='-432.5' stroke-width='0.7'/%3E%3Cline x1='863.8' y1='756.6' x2='1035.3' y2='-431.1' stroke-width='0.7'/%3E%3Cline x1='876.9' y1='758.3' x2='1046.2' y2='-429.7' stroke-width='0.7'/%3E%3Cline x1='890.0' y1='760.0' x2='1057.0' y2='-428.3' stroke-width='0.7'/%3E%3Cline x1='40.0' y1='770.0' x2='527.0' y2='-435.3' stroke-width='2.2'/%3E%3Cline x1='51.3' y1='769.3' x2='532.7' y2='-438.3' stroke-width='2.2'/%3E%3Cline x1='62.7' y1='768.7' x2='538.4' y2='-441.2' stroke-width='2.2'/%3E%3Cline x1='74.0' y1='768.0' x2='544.1' y2='-444.0' stroke-width='2.2'/%3E%3Cline x1='85.3' y1='767.3' x2='549.8' y2='-446.9' stroke-width='2.2'/%3E%3Cline x1='96.7' y1='766.7' x2='555.5' y2='-449.7' stroke-width='2.2'/%3E%3Cline x1='108.0' y1='766.0' x2='561.1' y2='-452.5' stroke-width='2.2'/%3E%3Cline x1='119.3' y1='765.3' x2='566.8' y2='-455.2' stroke-width='2.2'/%3E%3Cline x1='130.7' y1='764.7' x2='572.4' y2='-458.0' stroke-width='2.2'/%3E%3Cline x1='142.0' y1='764.0' x2='578.1' y2='-460.7' stroke-width='2.2'/%3E%3Cline x1='153.3' y1='763.3' x2='583.7' y2='-463.4' stroke-width='2.2'/%3E%3Cline x1='164.7' y1='762.7' x2='589.3' y2='-466.0' stroke-width='2.2'/%3E%3Cline x1='176.0' y1='762.0' x2='594.9' y2='-468.6' stroke-width='2.2'/%3E%3Cline x1='187.3' y1='761.3' x2='600.5' y2='-471.2' stroke-width='2.2'/%3E%3Cline x1='198.7' y1='760.7' x2='606.1' y2='-473.8' stroke-width='2.2'/%3E%3Cline x1='210.0' y1='760.0' x2='611.7' y2='-476.4' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat 100% 0/min(1100px,92%) auto;-webkit-mask-image:linear-gradient(180deg,transparent,#000 140px);mask-image:linear-gradient(180deg,transparent,#000 140px)}

/* ---------- Type ---------- */
.eyebrow{margin:0 0 20px;font:600 .84rem/1.4 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
/* a double rule under each title, as on an engraved title page */
/* under every title, the S-curve of a grand piano's side, in small: the same line as the edges of the black sections */
.filetto{display:block;width:120px;height:16px;margin-top:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 2H30C56 2 62 14 86 14H120' fill='none' stroke='%23C7A35E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/120px 16px}
.paper .filetto{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 2H30C56 2 62 14 86 14H120' fill='none' stroke='%238F6F37' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.sub{margin:0 0 22px;font:480 clamp(1.45rem,1.25rem + .6vw,1.8rem)/1.2 var(--f-display);color:var(--ivory);text-wrap:balance}
.paper .sub{color:var(--ink)}
.prose{max-width:64ch}
.prose p{font-size:1.12rem;line-height:1.7}
.prose p+p{margin-top:1.05em}
.smallcaps{font-size:.86em;letter-spacing:.08em;text-transform:uppercase}
.lead .smallcaps{font-size:1em;letter-spacing:.06em}
.note{font:italic 400 1.02rem/1.5 var(--f-text);color:var(--mute)}
.paper .note{color:var(--ink-2)}

/* ---------- Buttons: plaques, like the maker's plate on a piano ---------- */
.plaque{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border:1px solid var(--gold);background:transparent;color:var(--gold-hi);font:600 .8rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.plaque:hover{background:var(--gold);color:var(--ebony)}
.plaque--solid{background:var(--gold);color:var(--ebony)}
.plaque--solid:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.paper .plaque{border-color:var(--ink);color:var(--ink)}
.paper .plaque:hover{background:var(--ink);color:var(--ivory)}
.paper .plaque--solid{background:var(--ink);color:var(--ivory)}
.paper .plaque--solid:hover{background:var(--gold-ink);border-color:var(--gold-ink)}
.plaque svg{width:15px;height:15px;flex:none}
.plaque[disabled]{opacity:.55;cursor:progress}
.textlink{display:inline-flex;align-items:center;gap:10px;padding:10px 0;border:0;background:none;font:600 .8rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--gold-hi);cursor:pointer;border-bottom:1px solid currentColor}
.paper .textlink{color:var(--gold-ink)}
.textlink svg{width:14px;height:14px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line-dk-2);color:var(--text);font:600 .76rem/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:border-color .3s,color .3s,background-color .3s}
.chip:hover{border-color:var(--gold);color:var(--gold-hi)}
.paper .chip{border-color:var(--line-lt-2);color:var(--ink)}
.paper .chip:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.chip svg{width:13px;height:13px}

/* ---------- Header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);color:var(--ivory);transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.top.is-solid{background:rgba(11,10,10,.97);box-shadow:0 1px 0 rgba(199,163,94,.3)}
@supports (backdrop-filter:blur(8px)){.top.is-solid{background:rgba(11,10,10,.93);backdrop-filter:blur(12px)}}
.top__in{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);min-height:76px}
.mark{display:flex;align-items:center;gap:14px;margin-right:auto;min-height:44px;color:var(--ivory);text-decoration:none}
.mark__glyph{width:38px;height:36px;flex:none}
.mark__name{font:500 .82rem/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.nav ul{display:flex;gap:clamp(16px,2.1vw,32px);margin:0;padding:0;list-style:none}
.nav a{position:relative;display:block;padding:12px 0;font:600 .78rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--text)}
.nav a::after{content:"";position:absolute;left:0;right:.22em;bottom:5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--gold-hi)}
.nav a.nav__cta{margin-left:4px;padding:13px 18px;border:1px solid var(--gold);color:var(--gold-hi);transition:background-color .3s var(--ease),color .3s var(--ease)}
.nav a.nav__cta::after{display:none}
.nav a.nav__cta:hover,.nav a.nav__cta[aria-current]{background:var(--gold);color:var(--ebony)}
.lang{display:flex;align-items:center}
.lang button{min-width:40px;min-height:44px;padding:0;border:0;background:none;font:600 .8rem/1 var(--f-display);letter-spacing:.16em;color:var(--mute);cursor:pointer}
.lang button[aria-pressed="true"]{color:var(--gold-hi)}
.lang__sep{width:1px;height:12px;background:var(--line-dk-2)}
.menu-btn{display:none;align-items:center;gap:12px;min-height:44px;padding:0 4px;border:0;background:none;font:600 .8rem/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.menu-btn__lines{position:relative;width:24px;height:9px;border-block:1px solid currentColor}
@media (max-width:1240px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (max-width:560px){.mark__name{display:none}}

/* ---------- Drawer (phone menu) ---------- */
.drawer{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);border:0;background:var(--ebony);color:var(--text);color-scheme:dark}
.drawer::backdrop{background:rgba(0,0,0,.6)}
.drawer[open]{display:flex;flex-direction:column}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.drawer__top .mark__glyph{color:var(--gold)}
.icon-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:var(--ivory);cursor:pointer}
.icon-btn svg{width:20px;height:20px}
.drawer__nav{flex:1;display:flex;align-items:center}
.drawer__nav ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.drawer__nav a{display:block;padding:8px 0;font:400 clamp(2rem,8vw,3rem)/1.1 var(--f-display);color:var(--ivory);text-decoration:none}
.drawer__nav a:hover,.drawer__nav a[aria-current]{color:var(--gold-hi)}
.drawer__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:24px 28px;border-top:1px solid var(--line-dk)}
.drawer__social{display:flex;gap:22px}
.drawer__social a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 .78rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--text)}
.drawer__social svg{width:18px;height:18px;color:var(--gold)}

/* ---------- Hero: the open fallboard and the keys ---------- */
.hero{position:relative;display:grid;grid-template-rows:1fr auto auto auto;min-height:max(660px,100svh);background:var(--ebony);overflow:hidden}
.hero__lid{position:relative;isolation:isolate;display:grid;place-items:end center;padding:calc(104px + env(safe-area-inset-top,0px)) var(--gut) clamp(52px,8vh,88px);background:linear-gradient(180deg,#0f0e0d 0%,#0a0909 62%,#050505 100%);border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden}
/* the pianist, caught in the lacquer like a reflection */
.hero__reflect{position:absolute;inset:0;z-index:-1;opacity:.92;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.4) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.4) 100%)}
.hero__reflect img{width:100%;height:100%;object-fit:cover;object-position:64% 30%;filter:grayscale(1) brightness(.94) contrast(1.06)}
/* gloss on the black lacquer */
.hero__lid::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(103deg,transparent 0 16%,rgba(255,250,240,.05) 22%,transparent 29%),
  linear-gradient(103deg,transparent 0 61%,rgba(255,250,240,.035) 66%,transparent 72%),
  radial-gradient(110% 80% at 50% -10%,rgba(255,246,228,.07),transparent 62%),
  radial-gradient(52% 36% at 50% 74%,rgba(5,5,5,.8),rgba(5,5,5,.45) 62%,transparent 88%)}
.hero__plate{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(18px,2.6vh,28px);max-width:1080px;text-align:center}
.hero__name{margin:0;padding-left:.16em;font:500 clamp(2.05rem,.9rem + 4.7vw,5.1rem)/1.06 var(--f-display);letter-spacing:.16em;text-transform:uppercase;text-wrap:balance;color:var(--gold-hi);filter:drop-shadow(0 2px 16px rgba(0,0,0,.6))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__name{background:linear-gradient(180deg,#F4E2B0 0%,#E2C58A 40%,#CDA862 66%,#EBD29A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero__role{display:flex;align-items:center;gap:20px;font:600 .86rem/1 var(--f-display);letter-spacing:.42em;text-transform:uppercase;color:var(--gold-hi);padding-left:.42em;text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
.hero__role::before,.hero__role::after{content:"";width:clamp(34px,6vw,90px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero__role::after{background:linear-gradient(270deg,transparent,var(--gold))}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(6px,1.4vh,16px)}
/* the printer's fist above the keys: "press here"; it leaves once the visitor has played */
.hero__hand{position:absolute;right:var(--gut);bottom:7px;z-index:1;width:clamp(14px,1.1vw,17px);height:auto;aspect-ratio:366/747;color:var(--gold);filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));pointer-events:none;transition:opacity .8s var(--ease)}
.hero__hand.is-placed{right:auto;transform:translateX(-50%)}
.hero__hand.is-gone{opacity:0}
@media (prefers-reduced-motion:no-preference){.hero__hand.is-tapping{animation:tap 1.15s var(--ease) 3}}
@keyframes tap{0%,100%{translate:0 0}40%{translate:0 5px}}
/* the name of the note, over the key that is played */
.hero__note{position:absolute;left:0;bottom:12px;z-index:1;transform:translateX(-50%);font:500 1.2rem/1 var(--f-display);letter-spacing:.04em;white-space:nowrap;color:var(--gold-hi);text-shadow:0 1px 10px rgba(0,0,0,.9);pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
.hero__note.is-on{opacity:1}
.felt{height:clamp(6px,.6vw,9px);background:linear-gradient(180deg,#4a0c15 0%,#86202c 42%,#6a1622 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 #000}
.keys{--n:24;--bw:calc(100% / var(--n) * .58);position:relative;display:flex;height:clamp(128px,22svh,226px);background:#020202;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.kw{position:relative;flex:1 1 0;height:100%;margin-right:1px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#d4cab6 0%,#f2ebdf 5%,#f6f0e5 68%,#ede4d3 90%,#dcd0ba 100%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.09),inset 1px 0 0 rgba(255,255,255,.6);transform-origin:50% 0;transition:transform 90ms var(--ease),background .3s var(--ease);cursor:pointer}
.kw:last-child{margin-right:0}
.kw.is-down{transform:scaleY(.986);background:linear-gradient(180deg,#c9bfaa 0%,#e9e2d4 7%,#eee7da 72%,#e2d8c5 100%)}
.kw.is-hint{background:linear-gradient(180deg,#b28c47 0%,#e8d096 8%,#f2e2b8 70%,#d8bd7f 100%)}
.kb{position:absolute;top:0;z-index:2;width:var(--bw);height:62%;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#000 0%,#1c1a19 6%,#0f0e0e 72%,#2b2827 93%,#121110 100%);box-shadow:0 6px 8px -3px rgba(0,0,0,.75),inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(0,0,0,.8);transform-origin:50% 0;transition:transform 90ms var(--ease),background .3s var(--ease);cursor:pointer}
.kb.is-down{transform:scaleY(.975);box-shadow:0 2px 3px -1px rgba(0,0,0,.75),inset 1px 0 0 rgba(255,255,255,.05)}
.kb.is-hint{background:linear-gradient(180deg,#2a1f0d 0%,#a8853f 30%,#c7a35e 80%,#8f6f37 100%)}
.slip{height:clamp(10px,1.2vw,16px);background:linear-gradient(180deg,#161413,#090808);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* ---------- Biography ---------- */
.bio__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:start}
.prose .lead{font-size:1.28rem;line-height:1.62}
/* a red initial, on the same line as the name */
.lead::first-letter{margin-right:.03em;font:500 1.9em/1 var(--f-display);color:var(--felt)}

/* ---------- Media and press kit ---------- */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.video{position:relative;aspect-ratio:16/9;background:#000;box-shadow:0 0 0 1px rgba(199,163,94,.35),0 30px 60px -30px rgba(0,0,0,.9)}
.video__poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.video__poster img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:transform 1.4s var(--ease),opacity .6s var(--ease)}
.video__poster:hover img{transform:scale(1.03);opacity:1}
.video__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:88px;height:88px;margin:-44px 0 0 -44px;border:1px solid var(--gold);border-radius:50%;background:rgba(11,10,10,.55);color:var(--gold-hi);transition:background-color .35s var(--ease),color .35s var(--ease)}
.video__poster:hover .video__play{background:var(--gold);color:var(--ebony)}
.video__play svg{width:24px;height:24px;margin-left:4px}
.video__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.feature__side{display:grid;gap:14px;align-content:center}
.feature__title{margin:0;font:400 clamp(1.9rem,1.3rem + 1.8vw,2.9rem)/1.05 var(--f-display);color:var(--ivory)}
.feature__work{font:italic 400 1.15rem/1.4 var(--f-text);color:var(--text)}
.feature__links{display:grid;gap:2px;margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-dk)}
.feature__links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;border-bottom:1px solid var(--line-dk);text-decoration:none;color:var(--text);font:400 1.02rem/1.3 var(--f-text);transition:color .3s}
.feature__links a:hover{color:var(--gold-hi)}
.feature__links svg{width:15px;height:15px;color:var(--gold);flex:none}
.photos{margin-top:clamp(72px,9vw,128px)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(240px,30vw,440px);gap:clamp(10px,1.4vw,18px)}
.shot{position:relative;display:block;overflow:hidden;background:#000;text-decoration:none}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.shot:hover img{transform:scale(1.035)}
.shot__cap{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 14px;background:linear-gradient(180deg,transparent,rgba(5,5,5,.82));font:italic 400 1.02rem/1.35 var(--f-text);color:var(--ivory)}
.g-lake{grid-column:span 7}.g-lugcol{grid-column:span 5}.g-organ{grid-column:span 5}.g-hall{grid-column:span 7}
.g-lugcol img{object-position:50% 70%}.g-organ img{object-position:50% 35%}
.press{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);margin-top:clamp(72px,9vw,128px);padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--line-dk)}
.shortbio{padding:clamp(26px,4vw,48px);border:1px solid var(--line-dk-2);background:var(--ebony-2);font:400 1.1rem/1.72 var(--f-text);color:var(--text)}
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.copy-status{flex-basis:100%;min-height:1.4em;font:italic .95rem/1.4 var(--f-text);color:var(--gold-hi)}
.docs{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-dk)}
.doc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:20px 0;border-bottom:1px solid var(--line-dk)}
.doc__title{display:block;font:400 1.4rem/1.2 var(--f-display);color:var(--ivory)}
.doc__meta{display:block;margin-top:8px;font:600 .8rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.doc__dl{display:flex;gap:8px}
.press .note{margin-top:20px}

/* ---------- Concerts ---------- */
.concerts__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(44px,6vw,104px);align-items:start}
.program{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.program li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:6px 32px;padding:26px 0;border-bottom:1px solid var(--line-lt)}
.program__date{font:500 1.25rem/1.35 var(--f-display);color:var(--felt)}
.program__title{margin:0;font:400 clamp(1.45rem,1.15rem + .9vw,1.95rem)/1.12 var(--f-display);color:var(--ink)}
.program__venue{margin-top:6px;font:italic 400 1.08rem/1.4 var(--f-text);color:var(--ink-2)}
.season{position:relative;padding:clamp(30px,3.4vw,44px);border:1px solid var(--ink)}
/* a second, inner rule: a concert card */
.season::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-lt-2);pointer-events:none}
.season__title{margin:0 0 14px;font:400 2rem/1.05 var(--f-display);color:var(--ink)}
.season p{color:var(--ink-2)}
.season .plaque{margin-top:26px}

/* ---------- Interlude ---------- */

/* ---------- Repertoire: a printed programme ---------- */
.rep__pdf{display:grid;gap:12px;justify-items:start}
.rep__pdf .note{max-width:30ch}
.rep__pdf div{display:flex;flex-wrap:wrap;gap:8px}
.cats{border-top:1px solid var(--ink)}
.cat{border-bottom:1px solid var(--line-lt-2)}
.cat__sum{display:flex;align-items:center;gap:clamp(16px,3vw,40px);min-height:44px;padding:clamp(22px,3vw,32px) 0;cursor:pointer;list-style:none}
.cat__sum::-webkit-details-marker{display:none}
.cat__sum::marker{content:""}
.cat__head{flex:1;min-width:0;display:grid;gap:8px}
.cat__title{font:400 clamp(1.6rem,1.2rem + 1.2vw,2.3rem)/1.1 var(--f-display);text-wrap:balance;color:var(--ink);transition:color .3s}
.cat__preview{font:italic 400 1.08rem/1.45 var(--f-text);color:var(--ink-2)}
/* + that turns into −, in a ring like a piano's tuning-pin plate */
.cat__icon{position:relative;flex:none;width:48px;height:48px;border:1px solid var(--line-lt-2);border-radius:50%;transition:border-color .3s,background-color .3s}
.cat__icon::before,.cat__icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--gold-ink);transform:translate(-50%,-50%)}
.cat__icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease)}
.cat[open] .cat__icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.cat__sum:hover .cat__title,.cat[open] .cat__title{color:var(--gold-ink)}
.cat__sum:hover .cat__icon,.cat[open] .cat__icon{border-color:var(--gold-ink)}
.cat[open] .cat__icon{background:rgba(119,89,34,.07)}
.cat__body{padding:4px 0 clamp(30px,4vw,48px)}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  @media (prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}
    .cat::details-content{height:0;overflow:clip;transition:height .5s var(--ease),content-visibility .5s allow-discrete}
    .cat[open]::details-content{height:auto}
  }
}
.rep-cols{columns:2 360px;column-gap:clamp(40px,5vw,80px)}
.composer{break-inside:avoid;margin:0 0 30px}
.composer__name{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.7em;margin:0 0 10px;font:600 .9rem/1.5 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.composer__dates{font:italic 400 1.02rem/1.3 var(--f-text);letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--felt)}
.works{margin:0;padding:0;list-style:none}
.works li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;padding:4px 0}
.work{font:400 1.08rem/1.45 var(--f-text);color:var(--ink)}
.dots{flex:1 1 24px;min-width:24px;border-bottom:1px dotted var(--line-lt-2);transform:translateY(-.3em)}
.cat-no{font:400 1.02rem/1.45 var(--f-text);font-variant-numeric:oldstyle-nums;white-space:nowrap;color:var(--ink-2)}
.inst{flex-basis:100%;font:italic 400 .94rem/1.4 var(--f-text);color:var(--ink-2)}

/* ---------- Lessons ---------- */
.lessons__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(44px,7vw,112px);align-items:center}
.lessons__lead{max-width:30ch;font:400 clamp(1.45rem,1.15rem + 1vw,2rem)/1.3 var(--f-display);color:var(--ivory)}
.lessons__body{max-width:54ch;margin-top:20px;font-size:1.12rem;color:var(--text)}
.lessons__body+.plaque{margin-top:32px}
/* the academy keeps its own mark: shown as it is, on an ivory plate */
.academy{position:relative;display:grid;place-items:center;margin:0;padding:clamp(36px,5vw,64px);background:var(--ivory);box-shadow:0 30px 60px -32px rgba(0,0,0,.9)}
.academy::before{content:"";position:absolute;inset:8px;border:1px solid rgba(143,111,55,.45);pointer-events:none}
.academy img{width:min(100%,320px);mix-blend-mode:multiply}
.academy-col{display:grid;gap:18px;min-width:0}
.academy__links{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-dk-2)}
.academy__links a{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:60px;padding:10px 0;border-bottom:1px solid var(--line-dk);text-decoration:none;color:var(--ivory);font:600 .8rem/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;transition:color .3s}
.academy__links a:hover{color:var(--gold-hi)}
.academy__links svg{flex:none;width:20px;height:20px;color:var(--gold)}
.academy__handle{flex:1 1 auto;min-width:0;text-align:right;font:italic 400 1.05rem/1.3 var(--f-text);letter-spacing:0;text-transform:none;color:var(--mute);overflow-wrap:anywhere}

/* ---------- Contact ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(44px,7vw,112px);align-items:start}
.profiles{margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.profile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:72px;border-bottom:1px solid var(--line-lt);text-decoration:none;color:var(--ink);transition:color .3s}
.profile:hover{color:var(--gold-ink)}
.profile svg{width:20px;height:20px}
.profile__icon{color:var(--gold-ink)}
.profile__name{display:block;font:600 .84rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase}
.profile__handle{display:block;margin-top:6px;font:italic 400 1.08rem/1.3 var(--f-text);color:var(--ink-2);overflow-wrap:anywhere}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field--full{grid-column:1/-1}
.field label{font:500 1.02rem/1.3 var(--f-text);color:var(--ink)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;font:400 1.12rem/1.4 var(--f-text);color:var(--ink);transition:border-color .3s,box-shadow .3s}
.field select{appearance:none;-webkit-appearance:none;padding-right:28px;background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) calc(100% - 12px) 55%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink) 50%) calc(100% - 6px) 55%/6px 6px no-repeat;cursor:pointer}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold-ink);box-shadow:0 1px 0 var(--gold-ink)}
.field [aria-invalid="true"]{border-bottom-color:var(--felt)}
.err{min-height:1.2em;font:italic 400 .92rem/1.35 var(--f-text);color:var(--felt)}
.err:empty{min-height:0}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.form-status{flex:1 1 240px;font:italic 400 1rem/1.45 var(--f-text);color:var(--ink)}
.form-note{grid-column:1/-1;font:400 1.02rem/1.5 var(--f-text);color:var(--ink-2)}
.form-note a{color:var(--gold-ink)}
.hp{position:absolute;left:-9999px}

/* ---------- Footer: the end of the instrument, where the pedal lyre is ---------- */
.foot{position:relative;padding-top:clamp(64px,8vw,104px)}
.foot--flat{border-top:1px solid rgba(199,163,94,.28)}
.pedals{display:block;width:78px;height:auto;margin:0 auto clamp(48px,6vw,72px);color:var(--gold)}
.pedals *{vector-effect:non-scaling-stroke;stroke-width:1.15px}
.foot__grid{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:36px 56px;padding-bottom:clamp(48px,6vw,80px)}
.foot__brand .mark__glyph{width:56px;height:52px;color:var(--gold)}
.foot__name{margin-top:22px;font:400 clamp(1.7rem,1.3rem + 1vw,2.3rem)/1.05 var(--f-display);color:var(--ivory)}
.foot__brand .eyebrow{margin:10px 0 0}
.foot__list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.foot__list a{display:inline-flex;align-items:center;gap:10px;min-height:40px;font:400 1.02rem/1.3 var(--f-text);text-decoration:none;color:var(--text);transition:color .3s}
.foot__list a:hover{color:var(--gold-hi)}
.foot__list a span{min-width:0;overflow-wrap:normal}
.foot__list svg{width:16px;height:16px;color:var(--gold)}
.foot__base{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-block:18px calc(20px + env(safe-area-inset-bottom,0px));font:600 .8rem/1.6 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.foot__base::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--line-dk)}
.foot__base nav{display:flex;gap:22px}
.foot__base a{display:inline-flex;align-items:center;min-height:40px;color:var(--mute);text-decoration:none}
.foot__base a:hover{color:var(--gold-hi)}

/* ---------- Lightbox ---------- */
.lb{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:rgba(5,5,5,.97);color:var(--text);color-scheme:dark}
.lb::backdrop{background:rgba(0,0,0,.85)}
.lb__stage{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:72px 16px 24px}
.lb__fig{display:grid;gap:14px;justify-items:center;margin:0;max-width:min(1400px,100%)}
.lb__fig img{max-height:calc(100svh - 170px);width:auto;object-fit:contain}
.lb__cap{display:flex;gap:16px;align-items:baseline;font:italic 400 1rem/1.4 var(--f-text);color:var(--text)}
.lb__count{font:600 .8rem/1 var(--f-display);letter-spacing:.16em;font-style:normal;color:var(--mute)}
.lb__btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid var(--line-dk-2);border-radius:50%;background:rgba(11,10,10,.6);color:var(--ivory);cursor:pointer}
.lb__btn:hover{border-color:var(--gold);color:var(--gold-hi)}
.lb__btn svg{width:18px;height:18px}
.lb__close{top:calc(14px + env(safe-area-inset-top,0px));right:16px}
.lb__prev{left:16px;top:50%;margin-top:-26px}
.lb__prev svg{transform:rotate(180deg)}
.lb__next{right:16px;top:50%;margin-top:-26px}

/* ---------- Pages: the title on the fallboard, then the keys (they play here too) ---------- */
#main:focus{outline:0}
.phead{position:relative;isolation:isolate;overflow:hidden;padding:calc(76px + env(safe-area-inset-top,0px) + clamp(40px,6vw,96px)) 0 clamp(40px,5.5vw,76px);background:linear-gradient(180deg,#0f0e0d 0%,#0a0909 64%,#060606 100%)}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(103deg,transparent 0 18%,rgba(255,250,240,.045) 24%,transparent 31%),radial-gradient(90% 90% at 30% -20%,rgba(255,246,228,.06),transparent 60%)}
.phead__title{margin:0;font:480 clamp(2.6rem,1.3rem + 4vw,5.2rem)/1.02 var(--f-display);letter-spacing:-.01em;text-wrap:balance;color:var(--ivory)}
.phead__intro{max-width:54ch;margin-top:22px;font:italic 400 clamp(1.1rem,1rem + .3vw,1.25rem)/1.55 var(--f-text);color:var(--text)}
.phead__link{margin-top:18px}
.keys--page{height:clamp(76px,10vw,124px)}
.rep__pdf--page{margin-bottom:clamp(36px,5vw,64px)}

/* the photograph of each page, on the right of its title, fading into the lacquer */
.phead--photo{display:grid;align-items:end;min-height:clamp(420px,64svh,660px)}
.phead__photo{position:absolute;top:0;right:0;z-index:-1;width:min(64%,1180px);height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.84)}
.phead--photo::after{background:linear-gradient(90deg,#0b0a0a 0%,#0b0a0a 35%,rgba(11,10,10,.8) 45%,rgba(11,10,10,.3) 64%,rgba(11,10,10,.1) 100%),linear-gradient(0deg,rgba(6,6,6,.7) 0%,transparent 32%),linear-gradient(180deg,rgba(11,10,10,.65) 0%,transparent 24%)}
.phead--bio .phead__photo{object-position:50% 26%}
.phead--media .phead__photo{object-position:70% 30%}
.phead--concerts .phead__photo{object-position:40% 62%}
.phead--rep .phead__photo{object-position:50% 36%}
.phead--lessons .phead__photo{object-position:45% 62%}
.phead--contact .phead__photo{object-position:50% 55%}
@media (max-width:980px){
  .phead--photo{min-height:clamp(420px,68svh,580px)}
  .phead--contact .phead__photo{object-position:38% 50%}
  .phead__photo{width:100%}
  .phead--photo::after{background:linear-gradient(180deg,rgba(11,10,10,.7) 0%,rgba(11,10,10,.25) 26%,rgba(11,10,10,.4) 52%,rgba(11,10,10,.92) 82%,#0b0a0a 100%)}
}

/* entrances: the parts of each section rise into place once, as they come into view (only with the script,
   never with reduced motion; without it everything is simply there) */
.in-ready [data-in]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--in-d,0ms)}
.in-ready [data-in].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.in-ready [data-in]{opacity:1;transform:none;transition:none}}
@media print{.in-ready [data-in]{opacity:1!important;transform:none!important}}

/* the biography opens like every other paragraph, with only the red initial */
.bio .prose .lead{font-size:1.12rem;line-height:1.7}
.bio .lead .smallcaps{font-size:1em;letter-spacing:0;text-transform:none}

/* a smooth change of page: the page fades, the bar at the top stays put (never with reduced motion) */
@view-transition{navigation:auto}
.top{view-transition-name:topbar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* the black keys at the two edges of the keyboard are cut by its frame */
.keys{overflow:hidden}

/* hidden means hidden, whatever the layout of the element */
[hidden]{display:none!important}

/* ---------- The next concert: a page of a printed programme ---------- */
.concerts__next{margin-bottom:clamp(72px,9vw,132px)}
.recital{position:relative;padding:clamp(26px,4.4vw,64px);border:1px solid var(--ink);background:#FBF8F1}
.recital::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-lt-2);pointer-events:none}
.recital__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px clamp(28px,4.4vw,64px);padding-bottom:clamp(28px,3.6vw,44px);border-bottom:1px solid var(--line-lt)}
.recital__date{margin:0;padding-right:clamp(28px,4.4vw,64px);border-right:1px solid var(--line-lt)}
.recital__date time{display:grid;justify-items:center;text-align:center}
.recital__day{font:480 clamp(4.4rem,3.2rem + 3.6vw,6.6rem)/.92 var(--f-display);font-variation-settings:"opsz" 8;color:var(--felt)}
.recital__month{margin-top:12px;font:600 .84rem/1.3 var(--f-display);font-variation-settings:"opsz" 6;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.recital__time{margin-top:8px;font:italic 400 1.06rem/1.4 var(--f-text);color:var(--ink-2)}
.recital__title{margin:0;font:480 clamp(1.9rem,1.35rem + 1.7vw,2.9rem)/1.08 var(--f-display);font-variation-settings:"opsz" 8;text-wrap:balance;color:var(--ink)}
.recital__venue{margin-top:12px;font:italic 400 clamp(1.1rem,1.02rem + .25vw,1.25rem)/1.45 var(--f-text);color:var(--ink-2)}
.recital__kind{margin-top:4px;font:400 clamp(1.05rem,1rem + .2vw,1.15rem)/1.45 var(--f-text);color:var(--ink)}
/* the programme opens like a list of the repertoire, inside the card */
.recital{padding-bottom:clamp(6px,1.2vw,18px)}
.recital .cat{border-bottom:0}
.recital .cat__title{font-size:clamp(1.35rem,1.2rem + .45vw,1.6rem);line-height:1.2}
.recital__cols{columns:2 340px;column-gap:clamp(40px,5vw,80px)}
.recital__cols .composer{margin-bottom:26px}
.recital__link{margin-top:clamp(18px,2.2vw,26px)}
/* in the lists: the time below the date; on the home page "Next concert", then "Recent concerts" */
.program__date time{display:block}
.hconcerts__sub{margin:clamp(28px,3.5vw,40px) 0 16px}
.hconcerts__sub~.hconcerts__sub{margin-top:clamp(36px,4.4vw,52px)}
.hconcerts__sub+.program--home{margin-top:0}
.program__time{display:block;margin-top:4px;font:italic 400 1rem/1.4 var(--f-text);color:var(--ink-2)}
.program__more{margin-top:10px;padding:8px 0}
@media (max-width:640px){
  /* a work, its dots and its number keep to one line on a phone whenever they can */
  .works li{column-gap:8px}
  .dots{flex-basis:14px;min-width:14px}
  .recital__head{grid-template-columns:minmax(0,1fr)}
  .recital__date{padding:0 0 22px;border-right:0;border-bottom:1px solid var(--line-lt)}
  .recital__date time{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;justify-items:start;align-items:end;column-gap:18px;text-align:left}
  .recital__day{grid-row:1/span 2;align-self:center}
  .recital__month{margin-top:0}
  .recital__time{margin-top:2px;align-self:start}
}
@media print{.recital::before{display:none}}

/* a hidden theme: its title, in a small label at the foot of the screen */
.egg{position:absolute;left:50%;top:0;z-index:150;max-width:calc(100% - 32px);width:max-content;margin:0;padding:7px 16px;transform:translate(-50%,8px);border:1px solid rgba(199,163,94,.5);background:var(--ebony);color:var(--text);font:italic 400 .95rem/1.35 var(--f-text);text-align:center;pointer-events:none;opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.egg.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.egg{transition:none;transform:translate(-50%,0)}}
@media print{.egg{display:none}}
/* the drawings of the hidden themes, above the keyboard (--ky: its top on the screen) */
.eggfx{position:fixed;inset:0;z-index:140;pointer-events:none;overflow:hidden}
.eggfx__ghost{position:absolute;left:50%;top:var(--ky);width:clamp(150px,16vw,210px);margin-left:calc(clamp(150px,16vw,210px) / -2);opacity:0;animation:egg-ghost 5s var(--ease) forwards}
.eggfx__float{animation:egg-sway 1.6s ease-in-out infinite alternate;transform-origin:100px 120px}
@keyframes egg-ghost{0%{opacity:0;transform:translateY(-10%) scale(.5)}14%{opacity:.95;transform:translateY(-118%) scale(1)}80%{opacity:.9;transform:translateY(-132%)}100%{opacity:0;transform:translateY(-190%) scale(.92)}}
@keyframes egg-sway{from{transform:translateX(-14px) rotate(-6deg)}to{transform:translateX(14px) rotate(6deg)}}
.egg-knock{animation:egg-knock 2s linear .65s}
@keyframes egg-knock{0%,100%{transform:none}4%{transform:translateX(-6px)}8%{transform:none}10%{transform:translateX(-6px)}14%{transform:none}16%{transform:translateX(-6px)}20%{transform:none}24%{transform:translate(-12px,3px)}30%{transform:translate(10px,-2px)}36%{transform:translate(-6px,1px)}44%{transform:none}}
.eggfx__dark{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 25%,rgba(0,0,0,.78) 100%);opacity:0;animation:egg-dark 5s ease forwards}
@keyframes egg-dark{0%{opacity:0}15%,75%{opacity:1}100%{opacity:0}}
.eggfx__fly{position:absolute;left:0;top:calc(var(--ky) - 46vh);width:clamp(170px,17vw,240px);filter:drop-shadow(0 0 10px rgba(199,163,94,.35));animation:egg-fly 4.2s cubic-bezier(.45,.05,.55,.95) .4s both}
@keyframes egg-fly{0%{transform:translate(-130px,30vh)}30%{transform:translate(30vw,4vh)}55%{transform:translate(55vw,18vh) scale(1.15)}80%{transform:translate(80vw,0)}100%{transform:translate(calc(100vw + 30px),-12vh)}}
.eggfx__bat{display:block;width:100%}
.eggfx__wl,.eggfx__wr{animation:egg-flap .18s ease-in-out infinite alternate}
.eggfx__wl{transform-origin:97px 108px}.eggfx__wr{transform-origin:143px 108px;animation-name:egg-flap-r}
@keyframes egg-flap{from{transform:rotate(0)}to{transform:rotate(22deg)}}
@keyframes egg-flap-r{from{transform:rotate(0)}to{transform:rotate(-22deg)}}
.eggfx__medal{position:absolute;left:50%;top:var(--ky);width:clamp(150px,15vw,200px);margin-left:calc(clamp(150px,15vw,200px) / -2);filter:drop-shadow(0 10px 24px rgba(0,0,0,.7));opacity:0;animation:egg-medal 6.6s var(--ease) forwards}
@keyframes egg-medal{0%{opacity:0;transform:translateY(0) scale(.5)}12%{opacity:1;transform:translateY(-150%) scale(1)}88%{opacity:1;transform:translateY(-154%) scale(1)}100%{opacity:0;transform:translateY(-180%) scale(.95)}}
.eggfx__stern{animation:egg-stern 6.6s linear forwards}.eggfx__smile{animation:egg-smile 6.6s linear forwards}
@keyframes egg-stern{0%,52%{opacity:1}58%,100%{opacity:0}}
@keyframes egg-smile{0%,52%{opacity:0}58%,100%{opacity:1}}
.eggfx__hop{position:absolute;left:0;top:calc(var(--ky) + 6px);width:54px;animation:egg-across 5s linear forwards}
@keyframes egg-across{from{transform:translateX(-70px)}to{transform:translateX(calc(100vw + 20px))}}
.eggfx__doll{display:block;width:100%;animation:egg-hop .42s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes egg-hop{from{transform:translateY(0) rotate(-7deg)}to{transform:translateY(-34px) rotate(7deg)}}
.eggfx__snow{position:absolute;top:-12px;width:8px;height:8px;border-radius:50%;background:#F4EEE2;box-shadow:0 0 6px rgba(244,238,226,.8);opacity:.9;animation:egg-snow 3.2s linear both}
@keyframes egg-snow{from{transform:translate(0,0)}to{transform:translate(30px,105vh);opacity:.2}}
/* the five surprises: the monogram, the letters of B-A-C-H, the teacher's stamp, a wobble, a sheen */
.eggfx__mono{position:absolute;top:var(--ky);width:96px;height:90px;margin-left:-48px;color:var(--gold-hi);filter:drop-shadow(0 0 14px rgba(234,211,159,.55));animation:egg-rise 3.6s var(--ease) forwards}
@keyframes egg-rise{0%{opacity:0;transform:translateY(0) scale(.4)}22%{opacity:1;transform:translateY(-150%) scale(1.1)}70%{opacity:1;transform:translateY(-170%) scale(1)}100%{opacity:0;transform:translateY(-230%) scale(1)}}
.eggfx__letter{position:absolute;top:var(--ky);width:54px;margin-left:-27px;text-align:center;font:480 56px/1 var(--f-display);color:var(--gold-hi);text-shadow:0 2px 14px rgba(0,0,0,.6);opacity:0;animation:egg-letter 3.4s var(--ease) both}
@keyframes egg-letter{0%{opacity:0;transform:translateY(0) scale(.4)}25%{opacity:1;transform:translateY(-250%) scale(1.1)}75%{opacity:1;transform:translateY(-270%) scale(1)}100%{opacity:0;transform:translateY(-330%) scale(1)}}
.eggfx__stamp{position:absolute;left:50%;top:calc(var(--ky) - 240px);display:grid;place-items:center;width:132px;height:132px;margin-left:-66px;border:4px double var(--ivory);border-radius:50%;background:var(--felt);box-shadow:0 10px 30px -10px rgba(0,0,0,.8);opacity:0;animation:egg-stamp 3.6s cubic-bezier(.2,1.4,.4,1) forwards}
.eggfx__stamp span{font:italic 480 30px/1 var(--f-display);color:var(--ivory)}
@keyframes egg-stamp{0%{opacity:0;transform:scale(2.4) rotate(-30deg)}14%{opacity:1;transform:scale(1) rotate(-12deg)}80%{opacity:1;transform:scale(1) rotate(-12deg)}100%{opacity:0;transform:scale(.9) rotate(-12deg)}}
.egg-wobble{animation:egg-wobble .8s ease-in-out}
@keyframes egg-wobble{0%,100%{transform:none}15%{transform:rotate(-1.2deg)}30%{transform:rotate(1deg)}45%{transform:rotate(-.8deg)}60%{transform:rotate(.6deg)}75%{transform:rotate(-.3deg)}}
.eggfx__shine{position:absolute;left:0;right:0;background:linear-gradient(100deg,transparent 30%,rgba(234,211,159,.55) 48%,rgba(255,250,235,.8) 50%,rgba(234,211,159,.55) 52%,transparent 70%) no-repeat;background-size:40% 100%;mix-blend-mode:screen;animation:egg-shine 1.4s ease-in-out 2 forwards}
@keyframes egg-shine{from{background-position:-60% 0}to{background-position:160% 0}}
@media (prefers-reduced-motion:reduce){.eggfx{display:none}.egg-knock,.egg-wobble{animation:none}}
@media print{.eggfx{display:none}}

/* the dash of a range (2026–27, 1685–1757) in the text face: in Bodoni it is a hairline */
.nd{font-family:var(--f-text)}

/* ---------- Biography: the steps at a glance, beside the text ---------- */
.steps{position:sticky;top:110px}
.steps__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.steps__list li{display:grid;grid-template-columns:minmax(0,5.6rem) minmax(0,1fr);gap:4px 18px;padding:16px 0;border-bottom:1px solid var(--line-lt)}
.steps__k{grid-row:1/span 2;font:500 1.06rem/1.4 var(--f-display);color:var(--felt)}
.steps__t{grid-column:2;font:480 1.2rem/1.25 var(--f-display);color:var(--ink)}
.steps__d{grid-column:2;font:italic 400 1rem/1.45 var(--f-text);color:var(--ink-2)}
@media (max-width:980px){.steps{position:static;max-width:560px}}

/* ---------- Home: a short tour of the site, each part with the way to its page ---------- */
.intro,.listen,.hconcerts,.hrep,.doors{--sec:clamp(76px,9vw,132px)}
.htitle{margin:0;font:480 clamp(2.25rem,1.35rem + 2.7vw,3.7rem)/1.06 var(--f-display);letter-spacing:-.01em;text-wrap:balance;color:var(--ivory)}
.paper .htitle{color:var(--ink)}
.htitle i{font-style:italic}
.hactions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:clamp(28px,3.5vw,40px)}
/* who he is: one sentence, where he trained and played, three facts, the portrait */
.intro__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". fig" "head fig" "body fig" ". fig";column-gap:clamp(40px,7vw,112px)}
.intro__head{grid-area:head}
.intro__body{grid-area:body}
.intro__fig{position:relative;grid-area:fig;align-self:center;justify-self:center;width:100%;margin:0}
.intro__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.04)}
.intro__lead{max-width:54ch;margin-top:30px;font-size:clamp(1.15rem,1.05rem + .35vw,1.3rem);line-height:1.62}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(18px,2.2vw,30px);margin:clamp(30px,4vw,44px) 0 0;padding:0;list-style:none}
.facts li{display:grid;align-content:start;gap:6px;padding-top:16px;border-top:1px solid var(--gold-lo)}
.fact__t{font:480 1.3rem/1.2 var(--f-display);color:var(--ink)}
.fact__d{font:italic 400 1rem/1.45 var(--f-text);color:var(--ink-2)}
/* where he plays: the hall of Lugano Piano and the latest dates */
.hconcerts__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:stretch}
.hconcerts__fig{position:relative;min-height:440px;margin:0;overflow:hidden;background:#000}
.hconcerts__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 60%;filter:grayscale(1) contrast(1.04)}
.hconcerts__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;background:linear-gradient(180deg,transparent,rgba(5,5,5,.78));font:italic 400 1.02rem/1.3 var(--f-text);color:var(--ivory)}
.program--home{margin-top:clamp(28px,3.5vw,40px)}
.program--home li{padding:20px 0}
.hconcerts__season{max-width:56ch;margin-top:24px;color:var(--ink-2)}
.hconcerts__season strong{font:500 1.06em/1 var(--f-display);color:var(--felt)}
/* what he plays: three lists, like the movements of a programme */
.hrep__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(36px,5vw,64px)}
.hrep__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,40px);margin:0;padding:0;list-style:none}
.hrep__list a{display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;height:100%;padding-top:24px;border-top:1px solid var(--gold);text-decoration:none;color:var(--text)}
.hrep__n{font:600 .86rem/1 var(--f-display);letter-spacing:.24em;color:var(--gold-text)}
.hrep__title{margin:0;font:480 clamp(1.55rem,1.2rem + 1vw,2.1rem)/1.12 var(--f-display);text-wrap:balance;color:var(--ivory);transition:color .3s var(--ease)}
.hrep__names{font:italic 400 1.06rem/1.55 var(--f-text);color:var(--mute)}
.hrep__more{display:inline-flex;align-items:center;gap:10px;font:600 .78rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.hrep__more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.hrep__list a:hover .hrep__title{color:var(--gold-hi)}
.hrep__list a:hover .hrep__more svg{transform:translateX(4px)}
/* lessons and contact: an ivory key and a black one */
.doors__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,40px)}
.door{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,4.6vw,64px);border:1px solid var(--ink);background:#FBF8F1}
.door::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-lt-2);pointer-events:none}
.door__title{font-size:clamp(2rem,1.4rem + 1.8vw,3rem)}
.door__lead{max-width:30ch;margin-top:22px;font:480 clamp(1.2rem,1.05rem + .45vw,1.42rem)/1.42 var(--f-display);color:var(--ink)}
.door__plate{width:min(100%,230px);height:auto;margin-top:26px;mix-blend-mode:multiply}
.door .hactions{margin-top:auto;padding-top:clamp(28px,3.5vw,40px)}
.door--dark{border-color:var(--ebony);background:var(--ebony);color:var(--text);color-scheme:dark}
.door--dark::before{border-color:rgba(199,163,94,.45)}
.door--dark .htitle,.door--dark .door__lead{color:var(--ivory)}
.door--dark .filetto{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 2H30C56 2 62 14 86 14H120' fill='none' stroke='%23C7A35E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.door__mail{display:inline-flex;align-items:center;gap:12px;max-width:100%;margin-top:22px;padding-bottom:6px;border-bottom:1px solid rgba(199,163,94,.45);font:italic 400 clamp(1rem,.94rem + .3vw,1.15rem)/1.3 var(--f-text);color:var(--gold-hi);text-decoration:none;transition:color .3s var(--ease),border-color .3s var(--ease)}
.door__mail:hover{border-color:var(--gold);color:var(--ivory)}
.door__mail svg{flex:none;width:18px;height:18px;color:var(--gold)}
.door__mail span{min-width:0;overflow-wrap:normal}
.door__mail{min-height:44px}
.js-mail-text{overflow-wrap:normal}
.door--dark .plaque--solid{border-color:var(--gold);background:var(--gold);color:var(--ebony)}
.door--dark .plaque--solid:hover{border-color:var(--gold-hi);background:var(--gold-hi);color:var(--ebony)}
.door--dark :focus-visible{outline-color:var(--gold)}
.door--dark ::selection{background:var(--gold);color:var(--ebony)}
@media (max-width:980px){
  .intro__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "fig" "body";row-gap:clamp(32px,6vw,48px)}
  .intro__fig{width:min(100%,520px)}
  .intro__fig img{aspect-ratio:4/3;object-position:50% 24%}
  .intro__lead{margin-top:0}
  .hconcerts__grid{grid-template-columns:minmax(0,1fr)}
  .hconcerts__fig{min-height:0;aspect-ratio:3/2}
  .hrep__list{grid-template-columns:minmax(0,1fr);gap:0}
  .hrep__list a{grid-template-rows:none;gap:10px;padding:22px 0 26px}
}
@media (max-width:820px){.doors__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .facts{grid-template-columns:minmax(0,1fr);gap:0}
  .facts li{padding:14px 0 16px}
  .program--home li:nth-child(n+3){display:none}
}

/* ---------- Media: the press kit printed on paper ---------- */
.press-sec .press{margin-top:0;padding-top:0;border-top:0}
.paper .shortbio{border-color:var(--line-lt-2);background:#FBF8F1;color:var(--ink)}
.paper .copy-status{color:var(--gold-ink)}
.paper .docs{border-top-color:var(--ink)}
.paper .doc{border-bottom-color:var(--line-lt)}
.paper .doc__title{color:var(--ink)}
.paper .doc__meta{color:var(--ink-2)}

/* ---------- Lessons on paper ---------- */
.paper .lessons__lead{color:var(--ink)}
.paper .lessons__body{color:var(--ink-2)}
.paper .academy{background:#FBF8F1;box-shadow:0 22px 44px -30px rgba(27,23,20,.55)}
.paper .academy__links{border-top-color:var(--line-lt-2)}
.paper .academy__links a{border-bottom-color:var(--line-lt);color:var(--ink)}
.paper .academy__links a:hover{color:var(--gold-ink)}
.paper .academy__links svg{color:var(--gold-ink)}
.paper .academy__handle{color:var(--ink-2)}

/* ---------- Privacy: the policy printed on ivory, one clause per row ---------- */
.legal{padding:clamp(60px,8vw,116px) 0 clamp(76px,10vw,136px)}
.legal__body{counter-reset:s}
.legal__body p,.legal__body li{font-size:1.125rem;line-height:1.75;color:var(--ink)}
.legal__body .legal__lead{max-width:50ch;margin-bottom:clamp(40px,5vw,64px);font-size:clamp(1.2rem,1.1rem + .35vw,1.4rem);line-height:1.6}
.clause{padding:clamp(28px,3.4vw,40px) 0;border-top:1px solid var(--line-lt)}
.clause:last-of-type{border-bottom:1px solid var(--line-lt)}
.clause h2{counter-increment:s;margin:0 0 .7em;font:480 clamp(1.4rem,1.2rem + .7vw,1.75rem)/1.18 var(--f-display);font-variation-settings:"opsz" 8;color:var(--ink);text-wrap:balance}
.clause h2::before{content:counter(s,upper-roman);display:block;margin-bottom:12px;font:600 .86rem/1 var(--f-display);font-variation-settings:"opsz" 6;letter-spacing:.24em;color:var(--felt)}
.clause__body{max-width:68ch}
.clause__body p+p,.clause__body ul+p{margin-top:1em}
.clause__body ul{margin:0;padding-left:1.15em}
.clause__body p+ul{margin-top:.6em}
.clause__body li{padding-left:.35em}
.clause__body li+li{margin-top:.55em}
.clause__body li::marker{color:var(--gold-ink)}
.legal__body strong{font-weight:500}
.legal__body a{color:var(--gold-ink)}
.legal__body .plaque{margin-top:52px}
.plaque--back svg{transform:scaleX(-1)}
@media (min-width:900px){
  .clause{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 clamp(32px,5vw,80px)}
  .clause h2{margin:0}
}

/* ---------- 404: an open fallboard with nothing on the music desk ---------- */
.stage{display:grid;grid-template-rows:1fr auto auto auto;min-height:100svh;background:var(--ebony)}
.stage__lid{position:relative;overflow:hidden;display:grid;place-items:center;padding:calc(76px + env(safe-area-inset-top,0px) + clamp(40px,7vh,88px)) 0 clamp(48px,8vh,96px);background:linear-gradient(180deg,#0f0e0d 0%,#0a0909 62%,#050505 100%)}
.stage__lid::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(103deg,transparent 0 16%,rgba(255,250,240,.05) 22%,transparent 29%),linear-gradient(103deg,transparent 0 61%,rgba(255,250,240,.035) 66%,transparent 72%),radial-gradient(110% 80% at 50% -10%,rgba(255,246,228,.07),transparent 62%)}
.stage__in{position:relative;z-index:1;display:grid;justify-items:center;text-align:center}
.stage__fermata{width:clamp(64px,7vw,92px);height:auto;aspect-ratio:160/72;margin-bottom:clamp(26px,4vh,40px);color:var(--gold)}
.stage__title{margin:0;font:480 clamp(2.5rem,1.3rem + 4vw,5rem)/1.04 var(--f-display);font-variation-settings:"opsz" 8;letter-spacing:-.01em;text-wrap:balance;color:var(--gold-hi);filter:drop-shadow(0 2px 14px rgba(0,0,0,.5))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stage__title{background:linear-gradient(180deg,#F3E2B4 0%,#D9BC7C 40%,#B8914C 66%,#E2C78A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.stage__title i{font-style:italic}
.stage__text{max-width:40ch;margin-top:22px;font:italic 400 1.2rem/1.55 var(--f-text);color:var(--text)}
.stage .plaque{margin-top:clamp(30px,4.5vh,44px)}

/* ---------- Bodoni at display sizes ----------
   A sturdier optical size than the automatic one and a little more weight, so the hairlines
   of e, h, n, A, N stay visible;
   placed after every rule that sets "font", because that shorthand resets it. */
.sub,.drawer__nav a,.feature__title,.doc__title,.program__date,.program__title,.season__title,.cat__title,.lessons__lead,.foot__name,.lead::first-letter,.hero__note,.phead__title,.htitle,.fact__t,.hrep__title,.door__lead,.steps__k,.steps__t{font-variation-settings:"opsz" 8}
.sub,.drawer__nav a,.feature__title,.doc__title,.program__title,.season__title,.cat__title,.lessons__lead,.foot__name,.htitle,.fact__t,.hrep__title,.door__lead,.steps__t{font-weight:480}
.hero__name{font-variation-settings:"opsz" 6;font-weight:540}
/* small capitals: the sturdiest optical size, so their thin strokes hold at 13-14px */
.skip,.eyebrow,.plaque,.textlink,.chip,.mark__name,.nav a,.lang button,.menu-btn,.drawer__social a,.hero__role,.doc__meta,.composer__name,.academy__links a,.profile__name,.foot__base,.lb__count,.hrep__n,.hrep__more{font-variation-settings:"opsz" 6}

/* ---------- Narrow screens ---------- */
@media (max-width:980px){
  .bio__grid,.feature,.press,.concerts__grid,.lessons__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-auto-rows:auto}
  .g-lake,.g-lugcol,.g-organ,.g-hall{grid-column:span 12;aspect-ratio:4/3}
  .g-lugcol,.g-organ{aspect-ratio:4/5}
  .academy,.academy-col{max-width:520px}
}
@media (min-width:640px) and (max-width:980px){
  .g-lake,.g-hall{grid-column:span 12}
  .g-lugcol,.g-organ{grid-column:span 6}
}
@media (max-width:620px){
  .form{grid-template-columns:minmax(0,1fr)}
  .program li{grid-template-columns:minmax(0,1fr)}
  .doc{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}
@media print{
  .top,.hero__reflect,.keys,.felt,.slip,.hero__hand,.hero__note,.hero__cta,.video,.feature__links,.copy-row,.form,.pedals,.drawer,.lb,.skip,.cat__icon,.lacquer.sec::before,.foot::before,.bent,.phead::before,.phead::after,.phead__photo{display:none!important}
  body,.lacquer,.paper{background:#fff!important;color:#000!important}
  .hero{min-height:0}
  .hero__lid{padding:24px 0;background:none}
  .hero__name{background:none;color:#000}
  .lessons__lead,.feature__title,.doc__title,.foot__name,.phead__title,.htitle,.hrep__title,.hrep__names,.door__lead,.door__mail{color:#000}
  .door--dark{background:#fff;border-color:#000}
}