:root {
  color-scheme: dark;
  background: #000;
}

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

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #000; }

body { overflow-x: hidden; }

.homepage {
  position: relative;
  width: 100%;
  min-width: 320px;
  background: #000;
}

.approved-artwork {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* Semantic click targets map precisely onto the approved artwork without changing it. */
.site-header, footer {
  position: absolute;
  inset-inline: 0;
  color: transparent;
}

.site-header { top: 0; height: 9.1%; }
.site-header { z-index: 20; pointer-events: auto; }
.site-header a, .site-header nav { pointer-events: auto; }

.site-header a, footer { color: transparent; }

.brand, .site-header nav a { position: absolute; display: block; }
.brand { left: 0; top: 0; width: 18%; height: 100%; }
.menu-toggle { display: none; }
.mobile-social-links { display: none; }

.site-header > nav:first-of-type { position: absolute; inset: 0; }
.site-header > nav:first-of-type a { top: 34%; height: 44%; }
.site-header > nav:first-of-type a:nth-child(1) { left: 23%; width: 9%; }
.site-header > nav:first-of-type a:nth-child(2) { left: 34%; width: 8%; }
.site-header > nav:first-of-type a:nth-child(3) { left: 44.3%; width: 9%; }
.site-header > nav:first-of-type a:nth-child(4) { left: 55.6%; width: 10.5%; }
.site-header > nav:first-of-type a:nth-child(4) { cursor: pointer !important; }
.site-header > nav:first-of-type a:nth-child(5) { left: 68.4%; width: 6%; }

.social-links { position: absolute; inset: 0; }
.social-links a { top: 0; height: 100%; width: 2.8%; }
.social-links a:nth-child(1) { left: 76.8%; }
.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%; }
.resonance-direct { position: absolute; z-index: 10; left: 23%; top: 0; display: block; width: 9%; height: 100%; }
.memory-direct { position: absolute; z-index: 10; left: 34%; top: 0; display: block; width: 8%; height: 100%; }
.ceremony-direct { position: absolute; z-index: 10; left: 44.3%; top: 0; display: block; width: 9%; height: 100%; }
.revelations-direct { position: absolute; z-index: 10; left: 55.6%; top: 0; display: block; width: 10.5%; height: 100%; cursor: pointer; }
.portal-direct { position: absolute; z-index: 10; left: 68.4%; top: 0; display: block; width: 6%; height: 100%; }
.portal-direct::after { position:absolute; z-index:30; top:95%; left:-18%; width:136%; height:22px; background:#000; content:''; pointer-events:none; }

footer { position:fixed; z-index:100; right:0; bottom:0; left:0; top:auto; height:48px; display:flex; align-items:center; justify-content:center; background:#000; color:#e9e8e7 !important; font-family:Georgia,'Times New Roman',serif; font-size:12px; letter-spacing:.22em; text-align:center; visibility:visible !important; }

a:focus-visible { outline: 1px solid #e9e8e7; outline-offset: 3px; }

@media (min-aspect-ratio: 3/2) {
  .homepage { min-height: 100vh; }
  .approved-artwork { min-height: 100vh; object-fit: cover; }
}

@media (max-width: 768px) {
  html, body { min-height: 100svh; }

  .homepage { min-height: 100svh; height: 100svh; overflow: hidden; }

  .approved-artwork {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center center;
  }

  .site-header {
    height: 62px;
    background: rgba(0, 0, 0, .86);
    border-bottom: 1px solid rgba(233, 232, 231, .16);
  }
  .brand {
    left: 20px;
    top: 0;
    width: auto;
    height: 62px;
    z-index: 33;
    color: #e9e8e7 !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 62px;
    letter-spacing: .42em;
    text-decoration: none;
    text-transform: uppercase;
    pointer-events: auto;
  }

  .menu-toggle {
    position: absolute;
    z-index: 4;
    top: 13px;
    right: 16px;
    display: grid;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 7px 5px;
    border: 0;
    background: rgba(0, 0, 0, .82);
    cursor: pointer;
  }

  .menu-toggle span { display: block; height: 1px; width: 100%; background: #e9e8e7; }

  .site-header > nav:first-of-type {
    z-index: 3;
    left: 0;
    top: 62px;
    display: none;
    width: 100%;
    height: auto;
    padding: 18px 24px 22px;
    background: rgba(0, 0, 0, .97);
    border-top: 1px solid rgba(233, 232, 231, .18);
  }

  .site-header > nav:first-of-type.is-open { display: grid; gap: 16px; }
  .site-header > nav:first-of-type a {
    position: static;
    width: auto !important;
    height: auto;
    color: #e9e8e7;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(12px, 3.6vw, 18px);
    line-height: 1;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(233, 232, 231, .14);
  }
  .site-header > nav:first-of-type .mobile-social-links a {
    position: static;
    width: auto !important;
    height: auto;
    color: rgba(233, 232, 231, .78);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .social-links,
  .resonance-direct,
  .memory-direct,
  .ceremony-direct,
  .revelations-direct,
  .portal-direct { display: none; }
  footer { top: auto; bottom: 0; font-size:10px; }
}