@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,560;9..144,650&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--dark:#322118;--nav:#241a15;--accent:#e89551;--cream:#fff8ef;--sand:#f7dac2;--ink:#302018;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:140px}body{margin:0;color:var(--ink);background:var(--cream);font:16px/1.65 Manrope,system-ui,sans-serif}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}img{display:block;width:100%;object-fit:cover}h1,h2,h3,p{margin:0 0 .65em}h1,h2{font-family:Fraunces,Georgia,serif;line-height:1.06;font-weight:400}h1{font-size:clamp(4rem,8vw,8rem)}h2{font-size:clamp(2.8rem,5.6vw,5.3rem)}h3{font-size:1.38rem}.wrap{width:min(1320px,calc(100% - 48px));margin-inline:auto}.section{padding-block:clamp(52px,7vw,108px)}.kicker{text-transform:uppercase;letter-spacing:.15em;font-size:.79rem;font-weight:700}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:0;border-radius:99px;padding:12px 24px;background:var(--accent);color:#2d190d;text-decoration:none;font-weight:700}.button:hover{background:#f3b47e}.dark-button{background:var(--dark);color:var(--cream)}.dark-button:hover{background:#65422d}header{position:sticky;top:0;z-index:10;background:var(--dark);color:var(--cream)}.top{display:flex;justify-content:space-between;gap:1rem;padding:9px 16px;font-size:.8rem}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:83px;padding:12px 27px;background:var(--nav);border-radius:var(--radius) var(--radius) 0 0}.brand{font:2rem/1 Fraunces,Georgia,serif;text-decoration:none;white-space:nowrap}.brand small{display:block;margin-top:6px;font:600 .56rem Manrope,sans-serif;letter-spacing:.22em}.nav nav{display:flex;gap:clamp(15px,3vw,44px)}nav a{text-decoration:none;font-weight:500}.menu{display:none}.hero{min-height:clamp(520px,71vh,790px);display:grid;place-items:center;text-align:center;color:white;background:linear-gradient(100deg,#21150dbd,#291a13a0),url(/joris.jpg) center 42%/cover}.hero-content{padding-block:100px}.hero .kicker{font-size:clamp(.82rem,1.7vw,1rem)}.hero h1{margin-bottom:.32em}.benefits{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d5b29a;margin-top:-62px;border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 40px #331c1525}.benefits article{background:var(--sand);padding:28px;text-align:center}.benefits h2{font:700 1.2rem Manrope,sans-serif}.benefits span{font-size:2rem;line-height:1;color:#864123}.benefits p{margin-bottom:0}.section-head,.foot{display:flex;justify-content:space-between;align-items:end;gap:20px}.arrows{display:flex;gap:8px}.arrows button{border:0;border-radius:50%;width:49px;height:49px;background:var(--sand);color:var(--ink);font-size:1.3rem}.rail{display:flex;gap:18px;overflow:auto;scroll-snap-type:x mandatory;padding:8px 3px 14px}.tile{min-width:calc((100% - 36px)/3);aspect-ratio:4/4.1;position:relative;overflow:hidden;border-radius:var(--radius);color:white;text-decoration:none;scroll-snap-align:start;background:var(--dark)}.tile img{position:absolute;height:100%;transition:transform .3s}.tile:hover img{transform:scale(1.045)}.tile span{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:end;gap:1rem;padding:64px 22px 22px;background:linear-gradient(transparent,#241810e8);font-size:1.3rem;font-weight:700}.tile b{color:var(--accent)}.band,footer{background:var(--dark);color:var(--cream)}.band .kicker{color:var(--accent)}.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,6vw,80px)}.rounded{border-radius:var(--radius);aspect-ratio:4/3}.portrait{object-position:center 35%}details{border-bottom:1px solid #f7dac26b;padding:13px 0}summary{cursor:pointer;font-size:1.2rem;font-weight:600}details p{margin:10px 0 0}.programme{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:23px 0}.programme article{border-radius:var(--radius);background:var(--sand);padding:22px}.programme p{margin:0}form{display:grid;gap:11px;padding:24px;border-radius:var(--radius);background:var(--sand)}label{display:grid;gap:4px;font-weight:600}input,select,textarea{width:100%;min-height:43px;padding:8px 12px;border-radius:8px;border:1px solid #8b624e;background:white;color:var(--ink)}form button{justify-self:start}pre{margin:0;white-space:pre-wrap;font:inherit}.form-note{font-size:.85rem}.foot{align-items:center;padding-block:32px;flex-wrap:wrap}:focus-visible{outline:3px solid #b65a23;outline-offset:4px}
@media(max-width:1100px){.nav{min-height:66px;padding:9px 18px;position:relative}.nav nav{display:none;position:absolute;inset:100% 0 auto;padding:20px;background:var(--nav);border-radius:0 0 18px 18px;flex-direction:column}.nav nav.open{display:flex}.menu{display:block;background:var(--accent);border:0;border-radius:99px;padding:9px 16px;margin-left:auto}.nav-cta{display:none}.tile{min-width:calc((100% - 18px)/2)}}
@media(max-width:620px){html{scroll-padding-top:110px}.wrap{width:calc(100% - 28px)}.top{padding-inline:5px;font-size:.72rem}.top a{display:none}.brand{font-size:1.65rem}.hero{min-height:500px}.hero-content{padding:74px 0 105px}.benefits{grid-template-columns:1fr}.benefits article{padding:15px}.benefits article span{display:none}.split,.programme{grid-template-columns:1fr}.tile{min-width:84%}.section-head{align-items:center}.arrows button{width:42px;height:42px}.foot{display:grid;gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
:root {
  --dark:#4d321b; --nav:#352116; --accent:#e89551; --cream:#fffaf4;
  --sand:#f7dac2; --ink:#332219; --radius:24px;
}
body{background:#fffaf4}
header .wrap,.hero-shell,.surface{width:min(1540px,calc(100% - 48px));margin-inline:auto}
header .top{padding-inline:clamp(18px,5vw,76px)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;padding-inline:clamp(18px,5vw,76px)}
.nav nav{grid-column:1;grid-row:1;gap:clamp(12px,2.1vw,34px);align-items:center}
.nav .brand{grid-column:2;grid-row:1;text-align:center}
.nav .nav-cta{grid-column:3;grid-row:1;justify-self:end}
.nav details{position:relative;padding:0;border:0}
.nav summary{list-style:none;font:inherit;white-space:nowrap}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:' ▾';color:var(--accent)}
.nav details a{display:block;padding:9px 12px}
.dropdown{position:absolute;top:calc(100% + 12px);left:0;min-width:210px;border-radius:15px;background:var(--dark);padding:8px;box-shadow:0 12px 28px #23180f55}
.hero-section{padding:0 0 20px;background:var(--dark)}
.hero-shell{overflow:hidden;border-radius:0 0 var(--radius) var(--radius);text-align:center;background:radial-gradient(ellipse at center,#9b6336 0%,#4d321b 70%);color:white}
.hero-content{padding:clamp(52px,7vw,100px) 0 22px}
.hero-content h1{margin-bottom:.3em}
.hero-visual{padding-bottom:clamp(25px,4vw,50px)}
.hero-visual img{width:min(660px,100%);aspect-ratio:16/8;object-position:center 39%;margin:0 auto;border-radius:var(--radius)}
.surface{border-radius:var(--radius);margin-top:20px}
.usp{background:var(--sand);padding-block:clamp(26px,5vw,56px)}
.usp .benefits{margin-top:0;gap:20px;box-shadow:none;background:none;overflow:visible}
.usp .benefits article{border-radius:var(--radius);background:white;padding:25px 22px;text-align:left;display:grid;grid-template-columns:34px 1fr;gap:12px}
.usp .benefits h2{font-family:Fraunces,Georgia,serif;font-size:1.35rem}
.carousel-surface{background:#f0c5a2;overflow:hidden}
.carousel-surface .section-head{display:block;text-align:center;margin-bottom:28px}
.carousel-surface .arrows{justify-content:center;margin-top:16px}
.carousel-surface .arrows button{background:white}
.carousel-surface .rail{padding-inline:4px}
.carousel-surface .tile{min-width:clamp(270px,31%,400px)}
.surface.band .section{padding-block:clamp(35px,5vw,76px)}
.audience img{height:auto;aspect-ratio:4/3}
.repertoire{background:var(--sand)}
.repertoire .rail article{background:white;padding:27px;border-radius:var(--radius);min-width:clamp(260px,34%,380px);scroll-snap-align:start}
.request-surface{background:#f0c5a2;margin-bottom:20px}
.request-surface form{background:white}
@media(max-width:1100px){
  .nav{display:flex;position:relative}.nav .brand{order:0}.nav .menu{order:1}
  .nav nav.open{align-items:stretch}.nav nav{grid-column:auto;grid-row:auto}
  .dropdown{position:static;box-shadow:none;margin-top:8px}
}
@media(max-width:620px){
  header .wrap,.hero-shell,.surface{width:calc(100% - 24px)}
  .hero-content h1{font-size:clamp(3.2rem,13vw,5.5rem)}
  .hero-visual img{aspect-ratio:4/3}
  .usp .benefits{gap:12px}.usp .benefits article{display:block;padding:16px}
  .carousel-surface .tile{min-width:86%}
}
:root {
  --display:'Fraunces',Georgia,serif;
  --body:'Manrope',system-ui,sans-serif;
  --dark:#40291d;
  --nav:#302017;
  --cream:#fffaf3;
  --sand:#f6e4d3;
}
body{font-family:var(--body)}
h1,h2,.brand,.usp .benefits h2{font-family:var(--display);font-optical-sizing:auto;letter-spacing:-.045em}
h1,h2{font-weight:560}
.brand small{font-family:var(--body)}
.nav{min-height:76px}
.hero-shell{background:radial-gradient(ellipse at 50% 75%,#905735,#41281b 68%)}
.hero-content{padding-top:clamp(56px,7vw,94px);padding-bottom:30px}
.hero-content h1{font-size:clamp(3.65rem,8.8vw,8.3rem);line-height:.92;margin:.12em auto .24em;max-width:12ch;text-wrap:balance}
.hero-intro{max-width:47ch;margin:0 auto 21px;color:#fff4e7;font-size:clamp(1rem,2vw,1.2rem)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hero-visual img{width:min(820px,100%);aspect-ratio:2/1;object-position:center 43%}
.section-head h2,.split h2{text-wrap:balance}
.carousel-surface{background:#efd2b8}
.tile{border:0;padding:0;text-align:left;font:inherit;cursor:pointer}
.tile span{background:linear-gradient(transparent,#21140ff0)}
.tile:focus-visible{outline-offset:-5px}
.arrows button:disabled{opacity:.35;cursor:default}
.repertoire{background:var(--sand)}
.repertoire .rail article{min-width:clamp(245px,34%,380px)}
.form-note a{color:#713d22}
.request-surface input,.request-surface select,.request-surface textarea{min-height:46px}
@media(max-width:620px){
  .hero-content h1{font-size:clamp(3rem,13vw,5.3rem)}
  .hero-content{padding-top:47px}
  .hero-visual img{aspect-ratio:4/3}
  .section-head h2{font-size:clamp(2.25rem,9vw,3.4rem)}
  .request-surface form{padding:17px}
}
/* Shared navigation, service pages and footer for the workshop site. */
header{isolation:isolate}
header .top{position:relative;z-index:2}
.nav{position:relative;z-index:1}
.brand{line-height:1}
#navigation a{white-space:nowrap}
.menu-icon{width:23px;height:18px;display:grid;align-content:space-between}
.menu-icon span{height:2px;width:23px;background:currentColor;display:block;border-radius:2px;transition:transform .28s ease,opacity .2s ease}
.menu[aria-expanded="true"] .menu-icon span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu[aria-expanded="true"] .menu-icon span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] .menu-icon span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.page-intro{background:var(--sand);padding:clamp(48px,8vw,116px) 0}
.page-intro h1{font-size:clamp(3.15rem,8.3vw,7rem);text-wrap:balance;line-height:.96}
.page-intro p:not(.kicker){max-width:58ch;font-size:1.1rem}
.detail{align-items:start}
.detail p{max-width:57ch}
.detail-actions{justify-content:flex-start;align-items:center}
.source-link{margin-top:20px;font-size:.86rem}
.listing{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.listing-card{overflow:hidden;border-radius:var(--radius);background:var(--sand)}
.listing-card a{display:block;height:100%;text-decoration:none}
.listing-card img{aspect-ratio:16/10}
.listing-card a>div{padding:23px}
.listing-card h2{font-size:clamp(1.8rem,4vw,2.55rem)}
.listing-card span{font-weight:750}
.listing-card a:hover span{text-decoration:underline}
.section-action{margin-top:24px}
.contact-page{padding-inline:clamp(16px,4vw,40px);border-radius:var(--radius);margin-block:24px}
.archive-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.archive-links a{padding:14px;background:var(--sand);border-radius:10px}
.tile{display:block}
.will-reveal{opacity:0;transform:translateY(26px) scale(.985);transition:transform .64s cubic-bezier(.2,.7,.3,1),opacity .55s ease}
.will-reveal.is-visible{opacity:1;transform:none}
.rail .tile:nth-child(2n){transition-delay:75ms}
.site-footer{padding-block:clamp(45px,7vw,86px) 22px}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.2fr;gap:clamp(18px,4vw,56px)}
.footer-grid h2{font:750 1rem var(--body);letter-spacing:0;margin:0 0 13px}
.footer-grid p{max-width:35ch}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer-grid a:not(.button):not(.brand){text-decoration-thickness:1px;text-underline-offset:3px}
.footer-legal{border-top:1px solid #fff3;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;font-size:.85rem;color:#f7dac2}
@media(max-width:1100px){
  header .nav{background:var(--nav)}
  .nav .menu{display:grid;place-items:center;width:48px;height:46px;padding:0;color:var(--ink)}
  .nav #navigation{display:flex;position:absolute;inset:100% 0 auto;z-index:-1;visibility:hidden;opacity:0;transform:translateY(-18px);pointer-events:none;transition:opacity .22s ease,transform .32s ease,visibility .32s;box-shadow:0 20px 35px #21140f66;padding:19px}
  .nav #navigation.open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.will-reveal{opacity:1;transform:none}}

.footer-grid .brand{display:inline-block;margin-bottom:14px}
.footer-grid a{overflow-wrap:anywhere}
.mobile-contact{display:none}
@media(max-width:1100px){.mobile-contact{display:block}}
@media(min-width:1101px){header .nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
.video-section{background:var(--sand)}
.video-player{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--radius);background:var(--dark)}
.video-player iframe,.video-start{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-start{padding:0;background:none}
.video-start img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.video-start span{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--ink);font-size:1.4rem}
.video-start:focus-visible{outline-offset:-5px}
.video-start:hover img{filter:brightness(1)}

.back-to-top {
  position:fixed;
  z-index:8;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  padding:0;
  border:1px solid #fff9;
  border-radius:50%;
  background:var(--dark);
  color:var(--cream);
  box-shadow:0 8px 25px #21140f45;
  font:700 1.45rem/1 var(--body);
  opacity:0;
  transform:translateY(10px);
  visibility:hidden;
  transition:opacity .26s ease,transform .26s ease,visibility .26s;
}
.back-to-top.is-visible{opacity:1;transform:none;visibility:visible}
.back-to-top:hover{background:#65422d}

/* Textile accents frame photographs and separate sections. */
.hero-shell::before,
.batik-photo,
.repertoire-indisch::before {
  background: #301805 url("/batik.webp") repeat center / var(--batik-scale, 370px) auto;
}
.hero-shell {
  position: relative;
  isolation: isolate;
}
.hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .36;
  --batik-scale: clamp(270px, 32vw, 460px);
  mask-image: radial-gradient(ellipse 65% 62% at 50% 40%, transparent 43%, #000 100%);
}
@media (max-width: 620px) {
  .hero-shell::before {
    opacity: .29;
    mask-image: radial-gradient(ellipse 78% 59% at 50% 37%, transparent 44%, #000 100%);
  }
}
.batik-photo {
  --batik-scale: clamp(225px, 28vw, 360px);
  padding: clamp(10px, 1.6vw, 24px);
  padding-bottom: clamp(46px, 5vw, 76px);
  border-radius: var(--radius);
}
.batik-photo .rounded {
  border-radius: calc(var(--radius) / 2);
}

/* Keep actions together and give text links their own touch target. */
[hidden] { display: none !important; }
.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--cream);
  background: var(--dark);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }
.action-row,
.listen-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.text-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  text-underline-offset: .22em;
}
.text-action:hover { text-decoration-thickness: 2px; }
.action-row .button,
.hero-actions .button {
  max-width: 100%;
  text-align: center;
}

/* The portrait and first action share the first screen on wide displays. */
.hero-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 76px);
  padding: clamp(38px, 6vw, 100px);
  text-align: left;
}
.hero-shell .wrap {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.hero-content h1 {
  margin-inline: 0;
  max-width: 11ch;
  font-size: clamp(3rem, 6.3vw, 7rem);
}
.hero-intro { margin-inline: 0; }
.hero-actions { justify-content: flex-start; gap: 8px 20px; }
.hero-visual img { aspect-ratio: 4 / 3; }
.usp .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.usp .benefits article { display: block; }
.usp .benefits article > span { display: none; }
.carousel-surface .workshop-heading {
  display: flex;
  align-items: end;
  text-align: left;
}
#workshops > .section,
.repertoire > .section,
#aanvraag > .section { padding-bottom: clamp(36px, 5vw, 72px); }
.workshop-heading h2 { margin-bottom: 0; }
.workshop-heading .arrows { margin: 0; flex-shrink: 0; }
.arrows button { width: 44px; height: 44px; }
.rail { scroll-padding-inline: 4px; }
.carousel-surface .tile { min-width: calc((100% - 36px) / 3); }
.listing-spaced { margin-top: 26px; }
.repertoire-list .listing-card {
  position: relative;
  background: var(--cream);
  border: 1px solid #57362124;
}
.repertoire-list a {
  display: flex;
  padding-top: 9px;
}
.repertoire-list a > div { display: flex; flex-direction: column; }
.repertoire-list h3 {
  margin-bottom: .45em;
  font: 560 clamp(1.8rem, 3vw, 2.5rem) / 1.08 var(--display);
  letter-spacing: -.035em;
}
.repertoire-list p { margin-bottom: 16px; }
.repertoire-list span { margin-top: auto; }
.repertoire-indisch::before {
  --batik-scale: 250px;
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  pointer-events: none;
}
.audience summary { padding-block: 5px; min-height: 44px; }
.audience details a { text-underline-offset: .2em; }
.request-surface form,
.request-surface form label,
.request-surface form :is(input, select, textarea) { min-width: 0; }
.request-surface form .form-note { margin: 0; }
#request-email { justify-self: start; text-align: center; }

.site-footer { padding-block: clamp(24px, 4vw, 56px) 22px; }
.site-footer .wrap { width: min(1320px, calc(100% - 40px)); }
.listen-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 28px;
  margin-bottom: clamp(32px, 5vw, 72px);
  padding: clamp(20px, 4vw, 44px);
  border: 1px solid #f7dac240;
  border-radius: var(--radius);
  background: #302017;
}
.listen-panel h2 {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 3.65rem);
  text-wrap: balance;
}
.listen-panel .kicker { color: #f3b47e; }
.listen-play { gap: 8px; }
.soundcloud-player {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 8px;
}
.soundcloud-player iframe {
  display: block;
  width: 100%;
  height: 166px;
  border: 0;
  border-radius: 12px;
  background: var(--cream);
}
.footer-top {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  text-decoration: underline;
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-top: 32px;
}
.footer-socials h2 {
  margin: 0;
  font: 750 1rem var(--body);
  letter-spacing: normal;
}
.footer-socials ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 13px;
  border: 1px solid #f7dac25c;
  border-radius: 100px;
  font-size: .9rem;
}
.footer-socials a:hover {
  background: #f7dac21a;
  border-color: var(--accent);
}
.footer-socials a span { color: var(--accent); }
@media (max-width: 520px) {
  .footer-socials ul {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-socials a { display: flex; justify-content: space-between; }
}
.footer-legal { align-items: center; }
.site-footer :focus-visible,
.hero-shell :focus-visible,
header :focus-visible,
.band :focus-visible { outline-color: #ffbe87; }

@media (1101px <= width <= 1250px) {
  .nav nav { gap: 12px; }
}
@media (max-width: 1100px) {
  .carousel-surface .tile { min-width: calc((100% - 18px) / 2); }
  .nav #navigation {
    max-height: calc(100dvh - 115px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .nav #navigation > a,
  .nav #navigation summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .nav #navigation { gap: 4px; }
  .nav details a { min-height: 44px; }
}
@media (min-width: 801px) {
  .hero-shell::before {
    opacity: .31;
    mask-image: radial-gradient(ellipse 70% 68% at 40% 46%, transparent 43%, #000 100%);
  }
}
@media (max-width: 800px) {
  .hero-shell { grid-template-columns: 1fr; padding: clamp(20px, 5vw, 44px); }
  .hero-content h1 { font-size: clamp(2.85rem, 10vw, 5rem); }
  .hero-visual img { width: 100%; aspect-ratio: 5 / 3; }
  .split { grid-template-columns: 1fr; }
  .listen-panel { grid-template-columns: 1fr; }
  .listen-panel h2 { text-wrap: pretty; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 78px; }
  header .top { display: none; }
  header .nav { min-height: 66px; border-radius: 0; }
  .nav #navigation { max-height: calc(100dvh - 66px); }
  .section { padding-block: 36px; }
  .hero-section { padding-bottom: 12px; }
  .hero-shell { padding-top: 30px; gap: 20px; }
  .hero-visual img { aspect-ratio: 4 / 3; }
  .hero-content h1 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-actions, .action-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .usp .benefits { grid-template-columns: 1fr; }
  .carousel-surface .workshop-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .carousel-surface .tile { min-width: 83%; }
  .tile span { padding: 48px 16px 16px; font-size: 1.12rem; }
  .page-intro h1 { font-size: clamp(2.25rem, 9.2vw, 3.45rem); overflow-wrap: anywhere; }
  .site-footer .footer-grid { gap: 26px 20px; }
  .footer-legal { display: grid; gap: 8px; }
}