button,input,textarea{font:inherit}

.featured-item:nth-child(1){grid-column:1/7}
.featured-item:nth-child(2){grid-column:8/13}
.featured-item:nth-child(3){grid-column:1/-1}
.featured-theatre{min-height:0;background:#111;padding:1.4rem;gap:2rem}
.featured-theatre:after{display:none}
.featured-theatre .featured-top,.featured-theatre .featured-bottom{padding-left:0;padding-right:0}
.featured-theatre .featured-bottom{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 3rem;align-items:end}
.featured-theatre .featured-bottom h3{margin:0;grid-row:1/3}
.featured-theatre .featured-description{margin:0}
.featured-theatre .text-link{justify-self:start}
.featured-poster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.65rem,1.5vw,1.4rem)}
.featured-item .featured-poster-grid img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:#090909;filter:saturate(.72) brightness(.88);transform:none}
.featured-item:hover .featured-poster-grid img{filter:saturate(.82) brightness(.95);transform:none}

.poster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);padding:0 0 3.5rem 7rem}
.poster-grid .poster-card{width:auto;min-width:0}
.poster-grid .poster-frame{height:auto;aspect-ratio:2/3}
.poster-grid .poster-card figcaption{justify-content:flex-start;line-height:1.35}
.theatre-audio{padding:0 0 4.5rem 7rem;max-width:58rem}
.theatre-audio .track-stack{margin-top:0}

.contact-section{min-height:auto;padding-top:9rem;padding-bottom:7rem}
.contact-section h2{margin-bottom:5rem}
.contact-form{border-top:1px solid var(--line-light)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.contact-form label{display:grid;gap:.8rem;padding:1.5rem 0;border-bottom:1px solid var(--line-light);color:var(--mid);font-size:.75rem;letter-spacing:.06em}
.contact-form input,.contact-form textarea{width:100%;border:0;outline:0;background:transparent;color:var(--paper);padding:0;font-size:1rem;line-height:1.6;border-radius:0;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 1px 0 var(--paper)}
.contact-form input:user-invalid,.contact-form textarea:user-invalid{box-shadow:0 1px 0 #b98282}
.form-message{grid-column:1/-1}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-top:1.5rem}
.form-status{min-height:1.5rem;margin:0;color:var(--mid);font-size:.78rem}
.form-status.error{color:#d3a2a2}
.form-actions button{display:flex;align-items:center;gap:2rem;border:1px solid var(--paper);background:transparent;color:var(--paper);padding:.9rem 1.15rem;cursor:pointer;transition:background .2s,color .2s}
.form-actions button:hover,.form-actions button:focus-visible{background:var(--paper);color:var(--ink)}
.contact-meta{padding-top:1rem;border-top:1px solid var(--line-light);margin-top:4rem}

@media(max-width:1000px){
  .featured-item:nth-child(1),.featured-item:nth-child(2){grid-column:span 6}
  .featured-item:nth-child(3){grid-column:1/-1}
  .poster-grid,.theatre-audio{padding-left:5rem}
}

@media(max-width:720px){
  .featured-theatre{padding:1rem}
  .featured-theatre .featured-bottom{display:block}
  .featured-theatre .featured-bottom h3{margin-bottom:1rem}
  .featured-theatre .featured-description{margin-bottom:1.4rem}
  .featured-poster-grid,.poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .poster-grid,.theatre-audio{padding-left:3.2rem}
  .poster-grid{padding-bottom:3rem}
  .form-grid{grid-template-columns:1fr}
  .form-message{grid-column:auto}
  .form-actions{align-items:flex-start;flex-direction:column}
  .form-actions button{width:100%;justify-content:space-between}
}

/* One shared motion vocabulary, with no layout animation. */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1);--motion-reveal:.65s;--motion-hover:.65s}
[hidden],#hero-focus:empty,#music-intro:empty,#sound-intro:empty,#contact-availability:empty{display:none!important}
.hero{position:relative;isolation:isolate;max-width:none;background:#050506;overflow:hidden}
.hero> :not(canvas){position:relative;z-index:1}
#hero-ribbon{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:blur(.7px)}
.hero h1{animation:hero-emerge 2.7s var(--motion-ease) 1.05s both}
.hero-role{border-color:rgba(230,230,230,.2);animation:hero-emerge 2s var(--motion-ease) 2.1s both}
.hero-role #hero-role{font-size:clamp(.875rem,1.2vw,1.1rem);font-weight:300;letter-spacing:.12em;color:#aaa9a7}
.hero .eyebrow,.scroll-cue{animation:hero-emerge 2s var(--motion-ease) 2.4s both}
.site-header{animation:header-emerge 1.8s var(--motion-ease) 2.5s both}
.wordmark{font-weight:400;letter-spacing:.14em}
.about-lead{max-width:24ch;font-size:clamp(2rem,4vw,4rem);line-height:1.35;font-weight:300}
.reveal{transition:opacity var(--motion-reveal) var(--motion-ease) var(--reveal-delay,0ms),filter .4s var(--motion-ease) var(--reveal-delay,0ms),transform var(--motion-reveal) var(--motion-ease) var(--reveal-delay,0ms)}
.reveal-pending{opacity:0;filter:blur(1.5px);transform:translateY(6px)}
.sound-detail,.soundscape-groups{animation:none}
.featured-item img,.featured-item:hover img{transform:none}
.featured-item img,.play-button,.form-actions button,.site-header nav,.site-header nav a:after,.expand-icon{transition-duration:var(--motion-hover);transition-timing-function:var(--motion-ease)}
@keyframes ribbon-emerge{from{opacity:0}to{opacity:1}}
@keyframes hero-emerge{from{opacity:0;filter:blur(3px);transform:translateY(5px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes header-emerge{from{opacity:0}to{opacity:1}}
@media(max-width:720px){
  .reveal-pending{filter:blur(1.5px);transform:translateY(6px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1,.hero-role,.hero .eyebrow,.scroll-cue,.site-header,#hero-ribbon{animation:none!important;opacity:1;filter:none;transform:none}
  .reveal,.reveal-pending{transition:none!important;opacity:1;filter:none;transform:none}
}

.hero #hero-ribbon{animation:ribbon-emerge 3.8s var(--motion-ease) .5s both}
.ambience-ribbon{position:relative;grid-column:1/3;grid-row:1;min-height:280px;align-self:stretch;overflow:hidden;isolation:isolate;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 72%)}
.ambience-ribbon #hero-ribbon{opacity:.56;animation:none;filter:blur(1.2px)}
@media(max-width:1000px){.ambience-ribbon{grid-column:2;min-height:200px;max-height:250px}.sound-standard .sound-copy{grid-row:2}}
@media(max-width:720px){.ambience-ribbon{min-height:150px;height:150px}.reveal-pending{filter:blur(1px);transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.hero #hero-ribbon{animation:none!important}}
