:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #000; }
body { overflow-x: hidden; }
.resonance-page { position: relative; width: 1536px; margin: 0 auto; background: #000; }
.approved-artwork { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.site-header, .release-grid, footer { position: absolute; inset-inline: 0; color: transparent; }
.site-header { top: 0; height: 9.8%; }
.site-header { z-index: 20; pointer-events: auto; }
.site-header a, .site-header nav { pointer-events: auto; }
.site-header a, .release-grid, .release-grid a, footer { color: transparent; }
.brand, .site-header nav a { position: absolute; display: block; }
.brand { left: 2%; top: 30%; width: 15%; height: 44%; }
.mobile-logo, .menu-toggle { display: none; }
#primary-navigation { position: absolute; inset: 0; }
#primary-navigation a { top: 30%; height: 44%; }
#primary-navigation a:nth-child(1) { left: 22%; width: 9%; }
#primary-navigation a:nth-child(2) { left: 34%; width: 8%; }
#primary-navigation a:nth-child(3) { left: 43.5%; width: 9%; }
#primary-navigation a:nth-child(4) { left: 54.5%; width: 11%; }
#primary-navigation a:nth-child(4) { cursor: pointer !important; }
#primary-navigation a:nth-child(5) { left: 67.5%; width: 7%; }
#primary-navigation a[aria-current="page"]::after { position: absolute; bottom: -12px; left: 10%; width: 80%; height: 1px; background: #e2c9a4; content: ''; }
#primary-navigation a[aria-current="page"]::before { position: absolute; bottom: -14px; left: calc(50% - 2px); width: 3px; height: 3px; border: 1px solid #e2c9a4; background: #000; content: ''; transform: rotate(45deg); }
.social-links { position: absolute; inset: 0; }
.social-links a { top: 29%; height: 48%; width: 2.8%; }
.social-links a:nth-child(1) { left: 76.4%; }.social-links a:nth-child(2) { left: 81%; }.social-links a:nth-child(3) { left: 84.5%; }.social-links a:nth-child(4) { left: 88%; }.social-links a:nth-child(5) { left: 92%; }.social-links a:nth-child(6) { left: 95.6%; }
.portal-direct { position: absolute; z-index: 10; left: 67.5%; top: 30%; display: block; width: 7%; height: 44%; }
.memory-direct { position: absolute; z-index: 10; left: 34%; top: 30%; display: block; width: 8%; height: 44%; }
.ceremony-direct { position: absolute; z-index: 10; left: 43.5%; top: 30%; display: block; width: 9%; height: 44%; }
.release-grid { top: 39%; left: 2.8%; right: 2.8%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.85%; height: 36%; }
.release { display: block; height: 100%; padding: 0; border: 0; background: transparent; font: inherit; text-align: inherit; cursor: pointer; }
.release img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; opacity: 1; }
.release:hover img { filter: brightness(1.08); }
.release .title, .release .year { display: block; color: #e2c9a4; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; text-align: center; text-transform: uppercase; }
.release .title { margin-top: 20px; font-size: 18px; line-height: 1; letter-spacing: .13em; white-space: nowrap; }
.release .year { margin-top: 15px; font-size: 13px; line-height: 1; letter-spacing: .28em; }
footer { top: auto; bottom: 5.2%; height: auto; color: #e2c9a4; font-family: Georgia, 'Times New Roman', serif; font-size: 11px; letter-spacing: .35em; text-align: center; }
a:focus-visible, .menu-toggle:focus-visible { outline: 1px solid #e2c9a4; outline-offset: 3px; }
.release:focus-visible { outline: none; }
.mobile-social-links { display: none; }
@media (max-width: 900px) {
  .resonance-page { min-width: 320px; width: 100%; min-height: 100svh; padding-bottom: 80px; background: #000 url('resonance-background.png') center top / auto 100% fixed no-repeat; }
  .approved-artwork { display: none; }
  .site-header { position: relative; height: 66px; background: rgba(0,0,0,.94); border-bottom: 1px solid rgba(226,201,164,.22); }
  .brand { display: none; }
  .mobile-logo { position: absolute; left: 18px; top: 15px; display: block; width: 142px; height: 30px; overflow: hidden; }
  .mobile-logo img { position: absolute; width: 970px; max-width: none; left: -22px; top: -27px; }
  .menu-toggle { position: absolute; z-index: 5; top: 15px; right: 18px; display: grid; gap: 5px; width: 34px; height: 34px; padding: 7px 5px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle span { display: block; width: 100%; height: 1px; background: #e2c9a4; }
  #primary-navigation { position: fixed; z-index: 4; inset: 0; display: none; width: auto; height: auto; padding: 100px 30px 30px; background: #000; }
  #primary-navigation.is-open { display: grid; align-content: start; gap: 24px; }
  #primary-navigation a { position: static; width: auto !important; height: auto; color: #e2c9a4; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(13px, 4vw, 19px); letter-spacing: .18em; line-height: 1; text-decoration: none; text-transform: uppercase; }
  #primary-navigation a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; }
  #primary-navigation a[aria-current="page"]::before, #primary-navigation a[aria-current="page"]::after { display: none; }
  .mobile-social-links { display: flex; gap: 12px; margin-top: 18px; }
  .mobile-social-links a { display: block; width: 22px; height: 22px; background-image: url('resonance-background.png'); background-repeat: no-repeat; background-size: 768px 512px; }
  .mobile-social-links .bandcamp { background-position: -607px -14px; }.mobile-social-links .facebook { background-position: -642px -14px; }.mobile-social-links .instagram { background-position: -668px -14px; }.mobile-social-links .youtube { background-position: -694px -14px; }.mobile-social-links .tiktok { background-position: -720px -14px; }.mobile-social-links .spotify { background-position: -746px -14px; }
  .social-links { display: none; }
  .portal-direct { display: none; }
  .memory-direct { display: none; }
  .ceremony-direct { display: none; }
  .release-grid { position: relative; top: auto; left: auto; right: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; height: auto; padding: 58px 22px 44px; }
  .release { color: #e2c9a4 !important; text-align: center; text-decoration: none; }
  .release img { width: 100%; opacity: 1; filter: brightness(1); }
  .release:hover img { filter: brightness(1.08); }
  .release .title, .release .year { display: block; }
  .release .title { margin-top: 13px; font-size: clamp(10px, 3.1vw, 14px); line-height: 1.3; letter-spacing: .14em; white-space: normal; }
  .release .year { margin-top: 8px; font-size: clamp(9px, 2.5vw, 12px); line-height: 1; letter-spacing: .26em; }
  .release:nth-child(5) { grid-column: 1 / -1; width: calc(50% - 9px); justify-self: center; }
  footer { position: relative; top: auto; bottom: auto; height: auto; color: #e2c9a4; padding: 18px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: 11px; letter-spacing: .35em; text-align: center; }
}

/* Compact desktop presentation: retain the approved composition within one viewport. */
@media (min-width: 901px) and (max-height: 1000px) { body { zoom: .86; } }
@media (min-width: 901px) and (max-height: 800px) { body { zoom: .76; } }

/* Fit the complete approved desktop artwork without vertical scrolling. */
@media (min-width: 901px) and (max-height: 1100px) { html, body { height: auto; overflow-x: hidden; overflow-y: auto; } body { zoom: .72; } }
@media (min-width: 901px) and (min-height: 1101px) { html, body { height: auto; overflow-x: hidden; overflow-y: auto; } body { zoom: .82; } }

/* Header geometry is shared with the approved title page.  The artwork below remains untouched. */
@media (min-width: 901px) {
  .resonance-page .site-header { height: 9.1%; }
  .resonance-page .brand { left: 2.5%; top: 35%; width: 15.5%; height: 42%; }
  .resonance-page #primary-navigation a { top: 34%; height: 44%; }
  .resonance-page #primary-navigation a:nth-child(1) { left: 23%; width: 9%; }
  .resonance-page #primary-navigation a:nth-child(2) { left: 34%; width: 8%; }
  .resonance-page #primary-navigation a:nth-child(3) { left: 44.3%; width: 9%; }
  .resonance-page #primary-navigation a:nth-child(4) { left: 55.6%; width: 10.5%; }
  .resonance-page #primary-navigation a:nth-child(5) { left: 68.4%; width: 6%; }
  .resonance-page .social-links a { top: 31%; }
  .resonance-page .social-links a:nth-child(1) { left: 76.8%; }
  .resonance-page .social-links a:nth-child(2) { left: 81%; }
  .resonance-page .social-links a:nth-child(3) { left: 84.5%; }
  .resonance-page .social-links a:nth-child(4) { left: 88%; }
  .resonance-page .social-links a:nth-child(5) { left: 92%; }
  .resonance-page .social-links a:nth-child(6) { left: 95.6%; }
  .resonance-page #primary-navigation a[aria-current="page"]::before,
  .resonance-page #primary-navigation a[aria-current="page"]::after { display: none; }
  .resonance-page .resonance-direct,
  .resonance-page .memory-direct,
  .resonance-page .ceremony-direct,
  .resonance-page .revelations-direct,
  .resonance-page .portal-direct { position: absolute; z-index: 10; top: 34%; display: block; height: 44%; }
  .resonance-page .resonance-direct { left: 23%; width: 9%; }
  .resonance-page .memory-direct { left: 34%; width: 8%; }
  .resonance-page .ceremony-direct { left: 44.3%; width: 9%; }
  .resonance-page .revelations-direct { left: 55.6%; width: 10.5%; cursor: pointer; }
  .resonance-page .portal-direct { left: 68.4%; width: 6%; }
}

@media (max-width: 900px) {
  .resonance-page .site-header { height: clamp(64px, 18vw, 100px); background: transparent; border: 0; }
  .resonance-page .mobile-logo { display: none; }
  .resonance-page .brand { left: 2.5%; top: 0; display: block; width: 22%; height: 100%; z-index: 6; cursor: pointer; }
  .resonance-page .menu-toggle { z-index: 4; top: 14px; background: rgba(0, 0, 0, .82); }
  .resonance-page .menu-toggle span { background: #e9e8e7; }
  .resonance-page #primary-navigation { position: absolute; z-index: 3; inset: auto; left: 0; top: clamp(62px, 18vw, 98px); display: none; width: 100%; height: auto; padding: 18px 24px 22px; background: rgba(0, 0, 0, .96); border-top: 1px solid rgba(233, 232, 231, .18); }
  .resonance-page #primary-navigation.is-open { display: grid; gap: 16px; }
  .resonance-page #primary-navigation a { color: #e9e8e7; font-size: clamp(12px, 3.6vw, 18px); }
  .resonance-page .mobile-social-links { display: none; }
  .resonance-page .social-links { display: block; }
  .resonance-page .resonance-direct,
  .resonance-page .memory-direct,
  .resonance-page .ceremony-direct,
  .resonance-page .revelations-direct,
  .resonance-page .portal-direct { display: none; }
}

/* Desktop: one proportional, full-viewport release composition. */
@media (min-width: 901px) {
  html, body { width: 100%; height: auto; overflow-x: hidden; overflow-y: auto; }
  body { zoom: 1; }
  .resonance-page { width: 100vw; min-height: 100vh; height: auto; margin: 0; overflow-x: hidden; overflow-y: visible; }
  .resonance-page .approved-artwork { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .resonance-page .brand { z-index: 30; left: 2.4%; top: 2.55vw; width: 15%; height: 2.1vw; cursor: pointer; }
  .resonance-page .social-links a:first-child { left: 79.2%; top: 2.85vw; width: 2.5%; height: 1.45vw; }
  .resonance-page .social-links a:nth-child(2) { left: 83.2%; top: 2.85vw; width: 1.6%; height: 1.45vw; }
  .resonance-page .social-links a:nth-child(3) { left: 86.25%; top: 2.85vw; width: 1.8%; height: 1.45vw; }
  .resonance-page .social-links a:nth-child(4) { left: 89.65%; top: 2.85vw; width: 1.85%; height: 1.45vw; }
  .resonance-page .social-links a:nth-child(5) { left: 93.35%; top: 2.85vw; width: 1.55%; height: 1.45vw; }
  .resonance-page #primary-navigation a[aria-current="page"]::after,
  .resonance-page #primary-navigation a[aria-current="page"]::before { display: block; }
  .resonance-page #primary-navigation a[aria-current="page"]::after { bottom: -22px; left: 7%; }
  .resonance-page #primary-navigation a[aria-current="page"]::before { bottom: -24px; }
}