:root{--page:#23415F;--shade:#1C344C;--tint:#E1DFD9;--score-w:168.6367;--score-h:9;--staff-top:3;--clef-w:2.6667;--clef-h:7.7778;--clef-top:1.0935}
.page-home{--page:#23415F;--shade:#1C344C;--tint:#E1DFD9}
.site-nav:has(li[data-part="0"]:is(.playing,:hover)) :is(.part[data-part="0"],.lent[data-part="0"]){color:var(--gold-soft)}
.site-nav:has(li[data-part="0"].current) :is(.part[data-part="0"],.lent[data-part="0"]){color:var(--gold)}
.to-home{--to:#23415F}
.page-children{--page:#1F5F63;--shade:#194C4F;--tint:#E0E2DA}
.site-nav:has(li[data-part="1"]:is(.playing,:hover)) :is(.part[data-part="1"],.lent[data-part="1"]){color:var(--gold-soft)}
.site-nav:has(li[data-part="1"].current) :is(.part[data-part="1"],.lent[data-part="1"]){color:var(--gold)}
.to-children{--to:#1F5F63}
.page-adults{--page:#2C6151;--shade:#234E41;--tint:#E2E3D8}
.site-nav:has(li[data-part="2"]:is(.playing,:hover)) :is(.part[data-part="2"],.lent[data-part="2"]){color:var(--gold-soft)}
.site-nav:has(li[data-part="2"].current) :is(.part[data-part="2"],.lent[data-part="2"]){color:var(--gold)}
.to-adults{--to:#2C6151}
.page-lessons{--page:#59601F;--shade:#474D19;--tint:#E6E2D3}
.site-nav:has(li[data-part="3"]:is(.playing,:hover)) :is(.part[data-part="3"],.lent[data-part="3"]){color:var(--gold-soft)}
.site-nav:has(li[data-part="3"].current) :is(.part[data-part="3"],.lent[data-part="3"]){color:var(--gold)}
.to-lessons{--to:#59601F}
.page-about{--page:#8A5A12;--shade:#6E480E;--tint:#EBE2D2}
.site-nav:has(li[data-part="4"]:is(.playing,:hover)) :is(.part[data-part="4"],.lent[data-part="4"]){color:var(--gold-soft)}
.site-nav:has(li[data-part="4"].current) :is(.part[data-part="4"],.lent[data-part="4"]){color:var(--gold)}
.to-about{--to:#8A5A12}
.page-video{--page:#96431F;--shade:#783619;--tint:#ECE0D3}
.site-nav:has(li[data-part="5"]:is(.playing,:hover)) :is(.part[data-part="5"],.lent[data-part="5"]){color:var(--gold-soft)}
.site-nav:has(li[data-part="5"].current) :is(.part[data-part="5"],.lent[data-part="5"]){color:var(--gold)}
.to-video{--to:#96431F}
.page-contact{--page:#5A3462;--shade:#482A4E;--tint:#E6DEDA}
.site-nav:has(li[data-part="6"]:is(.playing,:hover)) :is(.part[data-part="6"],.lent[data-part="6"]){color:var(--gold-soft)}
.site-nav:has(li[data-part="6"].current) :is(.part[data-part="6"],.lent[data-part="6"]){color:var(--gold)}
.to-contact{--to:#5A3462}
.bar.w6_6{width:calc(var(--s) * 6.6)}
.bar.w10_9{width:calc(var(--s) * 10.9)}
.bar.w9_5{width:calc(var(--s) * 9.5)}
.bar.w5_685{width:calc(var(--s) * 5.685)}
.bar.w6_685{width:calc(var(--s) * 6.685)}
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pt-serif-regular.woff2") format("woff2"); }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/pt-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/pt-serif-bold.woff2") format("woff2"); }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pt-sans-regular.woff2") format("woff2"); }

:root {
  --paper: #F6F1E7;
  --vellum: #ECE3D0;
  --ink: #3D352A;
  --walnut: #2E241E;
  --straw: #C9A24C;
  --gold: #E0B454;
  --gold-soft: #E8CD8C;
  --note: #D8CCB6;
  --ledger: #8F7440;
  --accent: #85570F;
  --accent-dark: #5E3D0A;
  --dust: #6A5F52;
  --line: #E3DACA;
  --mist: #CFC6B8;
  --whatsapp: #25D366;
  --maps: #EA4335;
  --youtube: #FF0000;
  --instagram: #E4405F;
  --facebook: #0866FF;
  --tiktok: #FFFFFF;
  --soundcloud: #FF5500;
  --linkedin: #0A66C2;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --sans: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  --col: 760px;
  --radius: 8px;
  --pad: 20px;
  --xs: 8px;
  --sm: 16px;
  --md: 24px;
  --lg: 40px;
  --xl: 64px;
  --aside: 260px;
  --aside-h: calc(var(--aside) / 2.22);
}
@media (min-width: 768px) { :root { --pad: 40px; } }

* { box-sizing: border-box; }
html { background: var(--walnut); color: var(--ink); font-family: var(--serif); font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; hyphens: auto; hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; -webkit-hyphenate-limit-lines: 2; }
body { margin: 0; background: var(--paper); overflow-x: clip; }

.frame, .lead, .col, .columns, .videos-frame { width: 100%; max-width: calc(var(--col) + 2 * var(--pad)); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }

.skip { position: absolute; left: -999em; top: 0; background: var(--gold); color: var(--walnut); padding: var(--xs) var(--sm); font-family: var(--sans); }
.skip:focus { left: var(--pad); z-index: 2; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
video:focus-visible { outline-offset: -3px; }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }

.site-header { background: var(--walnut); color: var(--paper); font-family: var(--sans); }
.site-header .frame { padding-top: var(--sm); padding-bottom: 20px; }
.site-header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); }
.brand { display: block; flex: none; }
.brand img { display: block; height: 40px; width: auto; }
.lang { margin: 0; padding: 0; list-style: none; display: flex; font-size: 15px; line-height: 1; }
.lang a, .lang span { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
.lang span { color: var(--gold); }
.lang a { color: var(--mist); text-decoration: none; }
.lang a:hover { color: var(--gold-soft); }

.site-nav { position: relative; margin-top: 12px; container-type: inline-size; }
.nav { margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; font-size: 17px; line-height: 24px; }
.nav li { margin: 0; }
.nav a { display: block; padding: 4px 0; color: var(--paper); text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav .hot a { color: var(--gold-soft); }
.nav .current a { color: var(--gold); }

.stave { --s: calc(100cqw / var(--score-w)); position: relative; display: flex; align-items: flex-start; height: calc(var(--s) * var(--score-h)); margin-top: var(--xs); color: var(--note); pointer-events: none; }
.stave .lent { color: var(--note); }
.lines { position: absolute; left: 0; right: 0; top: calc(var(--s) * var(--staff-top)); height: calc(var(--s) * 4 + 1px); border-top: 1px solid var(--ledger); border-bottom: 1px solid var(--ledger); }
.lines::before, .lines::after { content: ""; position: absolute; left: 0; right: 0; box-sizing: border-box; }
.lines::before { top: calc(var(--s) - 1px); height: calc(var(--s) * 2 + 1px); border-top: 1px solid var(--ledger); border-bottom: 1px solid var(--ledger); }
.lines::after { top: calc(var(--s) * 2 - 1px); height: 1px; background: var(--ledger); }
.clef { position: relative; flex: none; width: calc(var(--s) * var(--clef-w)); height: calc(var(--s) * var(--clef-h)); margin-top: calc(var(--s) * var(--clef-top)); background: var(--note); -webkit-mask: url("/assets/score/treble-clef.png") no-repeat center / contain; mask: url("/assets/score/treble-clef.png") no-repeat center / contain; }
.part { display: flex; flex: none; height: 100%; pointer-events: auto; cursor: pointer; }
.part.hot { color: var(--gold-soft); }
.bar { position: relative; flex: none; display: block; height: 100%; overflow: visible; }
.bar .head, .bar .stem, .bar .beam, .bar .dot, .prelude { fill: currentColor; }
.bar .hollow { fill: var(--walnut); stroke: currentColor; stroke-width: 1.15; }
.bar .barline { fill: var(--ledger); }
.prelude text { font-family: var(--serif); font-weight: 700; }

@media (max-width: 767.98px) {
  .site-nav { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .nav li:first-child, .nav li:nth-child(4) { scroll-snap-align: start; }
  .site-nav::-webkit-scrollbar { display: none; }
  .nav, .stave { width: var(--strip-w, 640px); }
  .stave { --s: calc(var(--strip-w, 640px) / var(--score-w)); }
  .nav { gap: var(--md); justify-content: flex-start; }
  .nav-wrap { position: relative; }
  .nav-arrow { position: absolute; top: 0; display: flex; align-items: center; width: calc(var(--pad) + 10px); height: 32px; padding: 0; border: 0; background: var(--walnut); color: var(--gold); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .nav-arrow svg { width: 10px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .nav-back { left: calc(-1 * var(--pad)); justify-content: flex-end; }
  .nav-more { right: calc(-1 * var(--pad)); justify-content: flex-start; }
  .can-back .nav-back, .can-more .nav-more { opacity: 1; pointer-events: auto; }
}
@media (min-width: 768px) { .nav-arrow { display: none; } }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0 0 var(--sm); text-wrap: balance; hyphens: manual; color: var(--ink); }
h1 { font-size: 26px; }
h2 { font-size: 21px; margin-top: var(--lg); margin-bottom: 12px; }
h3 { font-size: 16px; font-weight: 700; margin-top: var(--md); margin-bottom: var(--xs); }
@media (min-width: 768px) { h1 { font-size: 30px; } }
@media (min-width: 1280px) {
  html { font-size: 18px; }
  h1 { font-size: 34px; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  figcaption, table, .video, .site-footer { font-size: 15px; }
  .contact, .button { font-size: 16px; }
  .video-title { font-size: 19px; }
}
p { margin: 0 0 var(--sm); }
ul, ol { margin: 0 0 var(--sm); padding-left: var(--md); }
li { margin-bottom: var(--xs); }
li::marker { color: var(--accent); }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
strong { font-weight: 700; }

table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 15px; line-height: 1.5; margin: 0 0 var(--md); font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: var(--xs) var(--sm) var(--xs) 0; border-bottom: 1px solid var(--line); }
th { font-weight: 400; color: var(--dust); }
td:last-child, th:last-child { padding-right: 0; }

.icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
p.fact, .contact .fact { display: flex; gap: var(--xs); align-items: flex-start; }
p.fact .icon, .contact .fact .icon { margin-top: calc((1.6em - 18px) / 2); }
td.fact { white-space: nowrap; }
td.fact .icon { vertical-align: -3px; margin-right: var(--xs); }
.contact { font-family: var(--sans); font-size: 15px; margin: 0 0 var(--sm); }
.contact .fact + .fact { margin-top: 4px; }

.action { margin: var(--md) 0; }
.button { display: inline-flex; align-items: center; gap: var(--xs); min-height: 44px; padding: 10px 20px; font-family: var(--sans); font-size: 15px; line-height: 1.2; color: var(--paper); background: var(--walnut); border-radius: var(--radius); text-decoration: none; }
.button:hover { color: var(--gold); }
.button .glyph { flex: none; width: 18px; height: 18px; fill: var(--whatsapp); }

figure { margin: 0; }
figure img, figure video { display: block; width: 100%; height: auto; border-radius: var(--radius); }
figure video, .video .poster, .video iframe { clip-path: inset(0 round var(--radius)); }
figcaption { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--dust); margin-top: var(--xs); }
.fig { margin: var(--lg) 0; }
.fig-tall { max-width: 420px; }
.fig-side { float: right; width: 40%; max-width: 220px; margin: var(--xs) 0 var(--sm) var(--md); }
.findrow { display: grid; gap: var(--md); margin: var(--lg) 0; }
.findrow .fig { margin: 0; }
.map-frame { position: relative; overflow: hidden; contain: paint; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.map-still, .map-still picture, .map-still img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: calc(100% + 44px); border: 0; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.map-frame.live iframe { opacity: 1; pointer-events: auto; }
.map-frame.live .map-still { visibility: hidden; transition: visibility 0s 0.3s; }
@media (min-width: 768px) { .findrow { grid-template-columns: 16fr 9fr; align-items: start; } }

.page { padding: var(--lg) 0 var(--xl); }
.lead { display: grid; gap: var(--md); }
.lead .fig-lead { margin: 0; }
.lead-text > :first-child { margin-top: 0; }
.lead-text > :last-child { margin-bottom: 0; }
.lead-text h1 + h2 { margin-top: var(--md); }
.lead-landscape .fig-lead, .lead-solo .fig-lead { grid-row: 2; }
@media (max-width: 767.98px) {
  .lead:not(.lead-solo) { gap: 0; }
  .lead:not(.lead-solo) .lead-text { display: contents; }
  .lead:not(.lead-solo) .lead-text > :is(h1, h1 + h2, p:first-of-type) { order: -1; }
  .lead:not(.lead-solo) .lead-text h1 + h2 { margin-top: var(--xs); }
  .lead:not(.lead-solo) .fig-lead { grid-row: auto; margin: var(--xs) 0 var(--md); }
  .lead .intro { justify-self: center; }
  .intro video { max-height: 55svh; width: auto; max-width: 100%; }
}
@media (min-width: 768px) {
  .lead-portrait:not(.lead-solo) { grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--lg); align-items: start; }
  .lead-portrait:not(.lead-solo) .lead-text { grid-column: 1; grid-row: 1; }
  .lead-portrait:not(.lead-solo) .fig-lead { grid-column: 2; grid-row: 1; }
  .lead-solo .fig-lead img { max-height: 70vh; width: auto; }
}

.sec { display: flow-root; }
.sec > :first-child, .sec-body > :first-child { margin-top: 0; }
.sec > :last-child, .sec-body > :last-child { margin-bottom: 0; }
.sec + .sec { margin-top: var(--lg); }
.col + .col, .col + .columns, .columns + .col, .lead + .col, .lead + .columns, .fig + .col, .band-text .sec { margin-top: var(--lg); }
.split .column h3 a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.split .column h3 a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }

.band { margin-top: var(--xl); }
.band-inner { background: var(--vellum); border-radius: var(--radius); padding: var(--md); }
.band-inner > h2 { margin: 0 0 var(--md); }
.band-body { position: relative; }
.band-body .fig { margin: 0 0 var(--md); }
.band-text > :first-child { margin-top: 0; }
.band-text > :last-child { margin-bottom: 0; }
.band-text table, .band-text .action { margin: var(--md) 0 0; }
.band-text .contact { margin: var(--sm) 0 0; }
@media (min-width: 768px) {
  .band-inner { padding: 32px; }
  .band-inner > h2 { white-space: nowrap; }
  .band-body { min-height: var(--aside-h); }
  .band-body .fig { position: absolute; top: 0; right: 0; width: var(--aside); margin: 0; }
  .band-text > p:not(.contact), .band-text > ul, .band-text > ol { padding-right: calc(var(--aside) + 32px); }
}

.videos-frame { margin-top: var(--lg); }
.videos { display: flex; flex-direction: column; gap: 32px; margin: 0; }
.video { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; display: grid; gap: var(--sm); }
.video .poster { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; width: 100%; aspect-ratio: 4 / 3; background: var(--walnut); border-radius: var(--radius); }
.video .poster img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.intro { position: relative; font-family: var(--sans); }
.intro video { display: block; }
.video .play { position: absolute; left: var(--xs); bottom: var(--xs); background: var(--walnut); color: var(--paper); padding: 4px 10px; border-radius: var(--radius); font-size: 14px; }
.video .poster:hover .play { color: var(--gold); }
.intro .start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: rgb(46 36 30 / 0.82); color: var(--paper); cursor: pointer; }
.intro .start svg { width: 32px; height: 32px; margin-left: 4px; fill: currentColor; }
.intro .start:hover { color: var(--gold); }
.video figcaption { color: var(--ink); }
.video-title { display: block; font-family: var(--serif); font-size: 17px; line-height: 1.3; }
.video-about { display: block; margin-top: 4px; }
.video time { display: block; margin-top: 4px; color: var(--dust); }
.video iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); }
.video.v916 iframe { aspect-ratio: 9 / 16; }
.video.v169 iframe { aspect-ratio: 16 / 9; }
.video.live { display: block; }
.video.live figcaption { margin-top: var(--xs); }
.video.live.v916 iframe { width: auto; max-width: 100%; max-height: 72vh; margin: 0 auto; }
@media (min-width: 560px) {
  .video { grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: var(--md); }
}

.site-footer { background: var(--walnut); color: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.6; }
.site-footer .frame { padding-top: var(--lg); padding-bottom: var(--lg); }
.site-footer p { margin: 0 0 var(--sm); }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer .maps { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }
.maps .mark { width: 16px; height: 16px; fill: var(--maps); }
.links { list-style: none; margin: var(--md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--xs) var(--md); }
.links li { margin: 0; }
.links a { display: flex; align-items: center; gap: var(--xs); min-height: 40px; }
.mark { flex: none; display: block; width: 18px; height: 18px; fill: currentColor; }
.links-row { margin: var(--sm) 0 0; gap: 12px 20px; font-size: 15px; }
.links-row a { color: var(--ink); text-decoration: none; min-height: 36px; }
.links-row a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.links-row .mark { width: 20px; height: 20px; }
.mark-2 { fill: var(--youtube); }
.mark-3 { fill: var(--instagram); }
.mark-4 { fill: var(--facebook); }
.mark-5 { fill: var(--tiktok); }
.mark-6 { fill: var(--soundcloud); }
.mark-7 { fill: var(--linkedin); }
.links-row .mark-5 { fill: #111111; }
@media (prefers-reduced-motion: no-preference) {
  a, .button, .play { transition: color 0.2s, text-decoration-color 0.2s; }
  main.enter { animation: enter 0.45s cubic-bezier(0.2, 0.6, 0.2, 1); }
  .rise { transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
  .rise.held { opacity: 0; transform: translateY(8px); }
  main img.fade { opacity: 0; }
  main img { transition: opacity 0.5s; }
  .intro .start::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--paper); border-radius: 50%; opacity: 0; animation: ripple 2.8s ease-out 1s infinite; pointer-events: none; }
  .intro .start:hover::after { animation: none; }
}
@keyframes ripple { 0% { transform: scale(1); opacity: 0.7; } 55%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
@media print { .rise.held, main img.fade { opacity: 1; transform: none; } }