/* Two connected entrances, shaped around a shared fault. */
.music-hero.portal-hero {
  padding-top:48px;
  padding-bottom:32px;
  min-height:680px;
  overflow:hidden;
}
.portal-hero:after {
  background:linear-gradient(180deg,#080e11ec 0%,#101719b8 40%,#080e11e8 100%);
}
.portal-hero .music-heading { width:100%; }
.portal-hero .music-heading .eyebrow { margin:0 0 12px; text-align:center; }
.portal-hero .music-heading h1 {
  font-size:clamp(3.25rem,5.7vw,5.75rem);
  line-height:1.08;
  text-align:center;
  margin:0;
}
.portal-hero .music-heading > p:not(.eyebrow) {
  max-width:none;
  margin:16px auto 28px;
  text-align:center;
}
.portal-gateways.tectonic-gateways {
  position:relative;
  display:block;
  isolation:isolate;
  width:100%;
  max-width:none;
  min-height:22.5rem;
  height:clamp(22.5rem,30vw,27.5rem);
  overflow:visible;
  background:radial-gradient(ellipse at 50% 60%,#be876b24,transparent 55%);
}
.tectonic-gateways .tectonic-plate {
  position:absolute;
  inset:0;
  display:block;
  padding:0;
  border:0;
  border-radius:0;
  color:#eaf2f0;
  text-decoration:none;
  will-change:auto;
  transition:transform 650ms cubic-bezier(.2,.75,.25,1),filter 450ms ease;
  -webkit-tap-highlight-color:transparent;
}
.tectonic-gateways .music-plate {
  clip-path:polygon(0 0,56% 0,55% 7%,58% 14%,54% 22%,55% 29%,51% 36%,53% 43%,49% 50%,50% 57%,46% 64%,47% 72%,43% 80%,45% 88%,42% 95%,43% 100%,0 100%);
  background:linear-gradient(135deg,#264550dd,#11272cee 55%,#0d191df8),url('/assets/nocturne.webp') center/cover;
  transform:translateX(-4px);
}
.tectonic-gateways .editorial-plate {
  clip-path:polygon(56% 0,100% 0,100% 100%,43% 100%,42% 95%,45% 88%,43% 80%,47% 72%,46% 64%,50% 57%,49% 50%,53% 43%,51% 36%,55% 29%,54% 22%,58% 14%,55% 7%);
  background:linear-gradient(145deg,#201b22f2,#3b292ce9 65%,#684b38cc),url('/assets/nocturne.webp') right center/cover;
  transform:translateX(4px);
}
.tectonic-plate:before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(155deg,#ffffff0d,transparent 38%,#00000020);
}
.tectonic-plate .plate-copy {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:34%;
  gap:16px;
  left:6%;
  top:19%;
}
.editorial-plate .plate-copy { left:63%; top:auto; bottom:15%; width:31%; }
.tectonic-plate .plate-copy strong {
  font:400 clamp(2.75rem,5.25vw,5.25rem)/1.08 var(--serif);
  color:#eaf2f0;
  letter-spacing:-.035em;
}
.editorial-plate .plate-copy strong { color:#f5e1d1; }
.tectonic-plate .plate-description {
  font-size:1rem;
  line-height:1.5;
  max-width:27ch;
  color:#c2d5d8;
}
.editorial-plate .plate-description { color:#ddc5b8; }
.tectonic-plate .plate-action {
  font-size:.9375rem;
  line-height:1.5;
  color:#eaf2f0;
  margin-top:12px;
  padding-bottom:5px;
  border-bottom:1px solid #bdd7dd80;
}
.editorial-plate .plate-action { color:#f5e1d1; border-color:#e3b99a80; }
.tectonic-gateways .tectonic-plate:hover { filter:brightness(1.1); }
.tectonic-gateways .music-plate:hover { transform:translate(-13px,-3px); }
.tectonic-gateways .editorial-plate:hover {
  transform:translate(13px,3px);
  background:linear-gradient(145deg,#201b22f2,#3b292ce9 65%,#684b38cc),url('/assets/nocturne.webp') right center/cover;
}
.tectonic-gateways .tectonic-plate:focus-visible {
  outline:0;
  filter:brightness(1.22);
  box-shadow:inset 0 0 0 3px #d3e6e5;
}
.tectonic-plate:focus-visible .plate-action {
  outline:2px solid currentColor;
  outline-offset:7px;
}
.tectonic-gateways .tectonic-plate:active { filter:brightness(1.18); }
.tectonic-fault {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  opacity:.5;
}
.tectonic-fault path {
  fill:none;
  stroke:#d7b49b;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.portal-listening-link { display:table; margin:22px auto 0; }
@media(max-width:1150px) {
  .music-hero.portal-hero { padding-left:32px; padding-right:32px; }
}
@media(max-width:700px) {
  .music-hero.portal-hero { min-height:0; padding:32px 20px 28px; }
  .portal-hero .music-heading h1 { font-size:clamp(2.6rem,9vw,4rem); }
  .portal-hero .music-heading .eyebrow { font-size:.8125rem; }
  .portal-hero .music-heading > p:not(.eyebrow) { margin-bottom:22px; }
  .portal-gateways.tectonic-gateways { height:34.375rem; min-height:34.375rem; }
  .tectonic-gateways .music-plate {
    clip-path:polygon(0 0,100% 0,100% 43%,95% 42%,88% 45%,80% 43%,72% 47%,64% 46%,57% 50%,50% 49%,43% 53%,36% 51%,29% 55%,22% 54%,14% 58%,7% 55%,0 56%);
    transform:translateY(-4px);
  }
  .tectonic-gateways .editorial-plate {
    clip-path:polygon(0 56%,7% 55%,14% 58%,22% 54%,29% 55%,36% 51%,43% 53%,50% 49%,57% 50%,64% 46%,72% 47%,80% 43%,88% 45%,95% 42%,100% 43%,100% 100%,0 100%);
    transform:translateY(4px);
  }
  .tectonic-plate .plate-copy { width:76%; left:8%; top:8%; gap:10px; }
  .editorial-plate .plate-copy { width:74%; left:18%; top:auto; bottom:8%; }
  .tectonic-plate .plate-copy strong { font-size:clamp(2.75rem,10vw,3.75rem); }
  .tectonic-plate .plate-action { margin-top:8px; }
  .tectonic-gateways .music-plate:hover { transform:translateY(-9px); }
  .tectonic-gateways .editorial-plate:hover { transform:translateY(9px); }
  .tectonic-fault { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .tectonic-gateways .tectonic-plate { transition:none; }
  .tectonic-gateways .music-plate:hover { transform:translateX(-4px); }
  .tectonic-gateways .editorial-plate:hover { transform:translateX(4px); }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce) {
  .tectonic-gateways .music-plate:hover { transform:translateY(-4px); }
  .tectonic-gateways .editorial-plate:hover { transform:translateY(4px); }
}
@media(forced-colors:active) {
  .portal-gateways.tectonic-gateways { display:grid; grid-template-columns:1fr 1fr; gap:20px; height:auto; min-height:0; }
  .tectonic-gateways .tectonic-plate { position:relative; inset:auto; clip-path:none; transform:none!important; background:Canvas; border:2px solid LinkText; min-height:260px; }
  .tectonic-gateways .editorial-plate:hover { background:Canvas; }
  .tectonic-plate .plate-copy { position:relative; inset:auto; width:auto; padding:24px; }
  .tectonic-plate .plate-copy strong,.tectonic-plate .plate-description,.tectonic-plate .plate-action { color:LinkText; }
  .tectonic-plate:before,.tectonic-fault { display:none; }
}
@media(max-width:700px) and (forced-colors:active) {
  .portal-gateways.tectonic-gateways { grid-template-columns:1fr; }
}