:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #000; }
body { overflow-x: hidden; }
.release-page { position: relative; width: 100%; min-height: 100vh; overflow: hidden; background: #000; color: #e2c0a0; font-family: Georgia, 'Times New Roman', serif; }
.sun-artwork { position: absolute; z-index: 0; top: 92px; right: 0; width: 356px; height: 420px; object-fit: contain; pointer-events: none; }
.site-header { position: relative; z-index: 2; height: 96px; border-bottom: 1px solid rgba(226,192,160,.2); }
.logo { position: absolute; top: 34px; left: 36px; color: #e2c0a0; font-size: 28px; letter-spacing: .34em; line-height: 1; text-decoration: none; white-space: nowrap; }
#site-navigation { position: absolute; top: 38px; left: 50%; display: flex; gap: 54px; transform: translateX(-50%); }
#site-navigation a { position: relative; color: #e2c0a0; font-size: 16px; letter-spacing: .13em; line-height: 1; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
#site-navigation a[aria-current="page"]::after { position: absolute; top: 34px; left: 0; width: 100%; height: 1px; background: #e2c0a0; content: ''; }
#site-navigation a[aria-current="page"]::before { position: absolute; z-index: 1; top: 32px; left: calc(50% - 2px); width: 3px; height: 3px; border: 1px solid #e2c0a0; background: #000; content: ''; transform: rotate(45deg); }
.social-links { position: absolute; top: 28px; right: 28px; display: flex; gap: 13px; }
.social-links a { display: block; width: 32px; height: 35px; background-image: url('approved-mockup.png'); background-repeat: no-repeat; background-size: 1536px 1024px; }
.social-links .bandcamp { background-position: -1204px -30px; }.social-links .facebook { background-position: -1278px -30px; }.social-links .instagram { background-position: -1324px -30px; }.social-links .youtube { background-position: -1373px -30px; }.social-links .tiktok { background-position: -1427px -30px; }.social-links .spotify { background-position: -1474px -30px; }
.menu-toggle { display: none; }
.release-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(440px, 1fr) minmax(540px, 1.05fr); gap: 46px; max-width: 1480px; margin: 24px auto 0; padding: 0 30px; }
.cover-frame { width: 100%; margin: 0; background: #000; }
.cover-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.release-details { padding: 32px 28px 0 10px; }
.release-details h1 { margin: 0; font-size: clamp(34px, 3vw, 47px); font-weight: 400; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.year { margin: 18px 0 24px; font-size: 19px; letter-spacing: .18em; }
.divider { position: relative; width: 268px; height: 1px; margin: 23px 0 25px; background: rgba(226,192,160,.52); }.divider::after { position: absolute; top: -3px; left: calc(50% - 3px); width: 5px; height: 5px; border: 1px solid #e2c0a0; background: #000; content: ''; transform: rotate(45deg); }
.release-details h2 { margin: 0 0 15px; font-size: 21px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.release-details p { margin: 0 0 21px; font-size: 18px; letter-spacing: .06em; line-height: 1.35; }.quote { font-size: 22px !important; font-style: italic; letter-spacing: .07em !important; }
.player { width: 100%; min-height: 120px; }
.bandcamp-player { display: block; width: 100%; max-width: 100%; }
.buy-section { margin-top: 23px; }.buy-section h2 { padding-bottom: 12px; border-bottom: 1px solid rgba(226,192,160,.2); }.buy-section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.buy-section a { display: block; padding: 20px 10px; border: 1px solid rgba(226,192,160,.75); color: #e2c0a0; font-size: 22px; letter-spacing: .18em; text-align: center; text-decoration: none; text-transform: uppercase; }
.release-navigation { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1050px; margin: 50px auto 34px; padding: 0 30px; }.release-navigation a { color: #e2c0a0; font-size: 17px; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; }.release-navigation a:last-child { text-align: right; }.release-navigation a:nth-child(2) { display: grid; grid-template-columns: repeat(2, 9px); gap: 4px; }.release-navigation a:nth-child(2) span { width: 9px; height: 9px; border: 1px solid #e2c0a0; }
a:focus-visible, button:focus-visible { outline: 1px solid #e2c0a0; outline-offset: 4px; }
@media (max-width: 900px) {
  .release-page { min-height: 100svh; }.sun-artwork { top: 66px; width: 230px; height: 280px; opacity: .82; }.site-header { height: 66px; }.logo { top: 23px; left: 20px; font-size: 19px; letter-spacing: .28em; }.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; height: 1px; width: 100%; background: #e2c0a0; }
  #site-navigation { position: fixed; z-index: 4; inset: 0; display: none; gap: 24px; align-content: start; padding: 100px 30px 30px; background: #000; transform: none; }.site-header #site-navigation.is-open { display: grid; }.site-header #site-navigation a { font-size: 16px; }.site-header #site-navigation a[aria-current="page"]::after { top: 28px; }.site-header #site-navigation a[aria-current="page"]::before { top: 26px; }.social-links { display: none; }
  .release-layout { display: block; margin-top: 0; padding: 38px 22px 0; }.cover-frame { width: 100%; max-width: 520px; margin: 0 auto 36px; }.release-details { padding: 0; }.release-details h1 { font-size: clamp(27px, 9vw, 39px); }.release-details p { font-size: 16px; }.quote { font-size: 18px !important; }.divider { width: min(100%, 268px); }.player { min-height: 120px; }.buy-section > div { grid-template-columns: 1fr; gap: 12px; }.buy-section a { font-size: 17px; }.release-navigation { margin: 42px auto 28px; padding: 0 22px; }.release-navigation a { font-size: 10px; }
}

/* 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 composition 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; } }

/* Shared desktop header geometry — aligned with the title page. */
@media (min-width:901px){.site-header{height:94px;background:#000;border-bottom:1px solid rgba(226,192,160,.2)}.logo{top:34px;left:36px;font-size:28px}.site-header #site-navigation{top:38px;gap:54px}}

/* Separate sprite windows for the social icons. */
@media (min-width:901px) {
  .social-links { top:28px; right:28px; width:274px; justify-content:space-between; gap:0; align-items:center; }
  .social-links a { flex:0 0 32px; height:42px; overflow:hidden; background-color:transparent; }
  .social-links .bandcamp { flex-basis:45px; background-position:-1204px -32px; }
  .social-links .facebook { background-position:-1278px -32px; transform:translateX(3px); }
  .social-links .instagram { background-position:-1324px -32px; }
  .social-links .youtube { background-position:-1373px -32px; }
  .social-links .tiktok { background-position:-1427px -32px; }
  .social-links .spotify { background-position:-1474px -32px; }
}

/* Keep the active Resonance marker as a complete underline, not a lone diamond. */
@media (min-width:901px){
  #site-navigation a[href="../../resonance.html"][aria-current="page"]::after{display:block!important;top:34px!important;left:0!important;width:100%!important;height:1px!important;background:#e2c0a0!important}
  #site-navigation a[href="../../resonance.html"][aria-current="page"]::before{display:block!important;top:32px!important}
}

/* Open release presentation: no container frames; purchase links use the Add to Cart treatment. */
.site-header,.buy-section h2,.buy-section a,.release-navigation{border:0!important;outline:0;box-shadow:none}.buy-section{margin-top:103px}.buy-section a{background:transparent;color:#e2c0a0;font-family:Georgia,'Times New Roman',serif;font-size:20px;font-style:italic;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.buy-section a:hover,.buy-section a:focus-visible{background:transparent;color:#fff0dc;outline:0;text-shadow:0 0 9px rgba(255,240,220,.5)}