/* Small, open text compositions: the coast remains the visual setting. */
@font-face {
  font-family: DelendaMenu;
  src: url('assets/menu-light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

.home > .featured {
  top: max(27svh, calc(8svh + clamp(84px, 8.8vw, 168px) + 24px));
  bottom: auto;
}

.home > .featured h2 {
  margin-bottom: 18px;
  color: #f1f3f2;
  font-size: clamp(1.5rem, 1.8vw, 2rem);
  line-height: 1.35;
  letter-spacing: .2em;
  text-indent: .2em;
  text-shadow: 0 2px 16px #020507bf;
}

.featured .work-actions { gap: clamp(20px, 2.2vw, 32px); }
.featured .text-link {
  color: #e6eae9;
  font-size: 1rem;
  letter-spacing: .075em;
  text-shadow: 0 2px 12px #020507b3;
}
.featured .listen-action {
  min-height: 58px;
  gap: 16px;
  color: #fff;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 500;
}
.listen-action .play-medallion {
  width: 52px;
  height: 52px;
  flex: none;
  border-color: #e7edeb;
  background: #0b111526;
}
.listen-action .play-medallion svg { fill: currentColor; stroke: none; }
.listen-action:hover .play-medallion,
.listen-action:focus-visible .play-medallion { background: #c1cdcf24; border-color: #fff; }
.listen-action:hover .play-medallion::before,
.listen-action:focus-visible .play-medallion::before { opacity: 1; }
.featured .work-actions:has(a:hover) a:not(:hover) { opacity: .85; }

.coast-bottom .navigation {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  justify-content: start;
  width: min(84%, 1400px);
  max-width: none;
  gap: clamp(24px, 4.5vw, 88px);
  margin: 0 auto clamp(44px, 7svh, 90px);
}

.coast-bottom .navigation a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
  padding: 8px 0;
  color: #e4e5e2;
  text-align: left;
  text-transform: none;
  white-space: normal;
  letter-spacing: normal;
  text-shadow: 0 1px 14px #03070955;
  transition: color .75s ease, opacity .75s ease;
}

.navigation a::before,
.navigation a::after,
.panel-navigation a::before,
.panel-navigation a::after {
  display: none;
}

.nav-poem {
  display: block;
  flex: 1;
  font: 300 clamp(1.625rem, 2.25vw, 2.6875rem)/1.04 DelendaMenu, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.035em;
  transition: opacity .75s ease;
}

.nav-poem > span {
  display: block;
  white-space: normal;
}

.nav-caption {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 18px;
  font: 400 .875rem/1.4 var(--sans);
  letter-spacing: .025em;
  color: #d2d8d9;
  transition: color .75s ease;
}

.nav-plus {
  display: inline-block;
  font: 300 22px/.7 DelendaMenu, sans-serif;
  color: #eff2f1;
  opacity: .35;
  transition: opacity .75s ease;
}

@media (hover: hover) {
  .coast-bottom .navigation:has(a:hover) a:not(:hover) { opacity: 1; }
  .coast-bottom .navigation:has(a:hover) a:not(:hover) .nav-poem { opacity: .65; }
}

.coast-bottom .navigation a:hover,
.coast-bottom .navigation a:focus-visible { color: #fff; }
.navigation a:hover .nav-caption,
.navigation a:focus-visible .nav-caption { color: #e4e9e9; }
.navigation a:hover .nav-plus,
.navigation a:focus-visible .nav-plus { opacity: 1; }
.coast-bottom .navigation a:focus-visible {
  outline: 1px solid #c3cccf;
  outline-offset: 9px;
}

/* Keep the smaller in-page navigation clear and typographically related. */
.panel-navigation a {
  font: 300 15px/1.2 DelendaMenu, 'Helvetica Neue', Arial, sans-serif;
  text-transform: lowercase;
  letter-spacing: -.02em;
}
.panel-navigation a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: #aeb9bd;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .coast-bottom .navigation {
    width: 91%;
    gap: 24px;
  }
  .nav-poem { font-size: clamp(1.4375rem, 2.5vw, 1.75rem); }
}

/* Let the composition flow vertically on phones instead of squeezing it. */
@media (max-width: 760px) {
  .home {
    height: auto;
    min-height: 100svh;
    padding-top: calc(180px + 56.308655vw);
  }
  .masthead { top: 45px; }
  .scene {
    inset: 158px 0 auto;
    height: 56.308655vw;
    mask-image: linear-gradient(transparent, #000 12%, #000 72%, transparent);
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 72%, transparent);
  }
  .scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .home > .featured {
    position: relative;
    inset: auto;
    margin: 0 20px;
  }
  .home > .featured h2 { margin-bottom: 14px; }
  .featured .work-actions { flex-wrap: wrap; gap: 10px 20px; }
  .featured .film-action { font-size: .9375rem; }
  .featured .listen-action { gap: 12px; }
  .listen-action .play-medallion { width: 46px; height: 46px; }
  .featured .action-divider { display: none; }
  .coast-bottom {
    position: relative;
    inset: auto;
    padding: 40px 22px max(18px, env(safe-area-inset-bottom));
  }
  .coast-bottom .navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 490px;
    gap: 31px clamp(28px, 10vw, 74px);
    margin-bottom: 42px;
  }
  .coast-bottom .navigation a { min-width: 0; height: 100%; padding: 6px 0; }
  .nav-poem { font-size: clamp(1.6875rem, 5.5vw, 2.25rem); }
  .nav-caption { margin-top: 15px; }
  .coast-bottom .site-footer { column-gap: 10px; }
  .coast-bottom .scene-controls { column-gap: 9px; }
}

@media (max-height: 650px) and (min-width: 761px) {
  .home > .featured { top: 154px; }
  .coast-bottom .navigation { margin-bottom: 34px; }
  .nav-poem { font-size: 1.75rem; }
}

@media (max-width: 370px) {
  .coast-bottom { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .coast-bottom .navigation,
  .coast-bottom .navigation a,
  .nav-poem,
  .nav-caption,
  .nav-plus { transition: none; }
}