/* EX-L-ENT — shared colors and typography */
:root {
  --background: #090d10;
  --ink: #edf3ef;
  --muted: #a9b4b9;
  --cyan: #8ae1e8;
  --red: #ff5a65;
  --line: #ffffff24;
  font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--ink);
  background: var(--background);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { width: min(1240px, 88%); margin-inline: auto; }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 7px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; z-index: 20; padding: 14px; background: white; color: black; }
.skip-link:focus { left: 10px; top: 10px; }

/* Header and navigation */
.site-header { border-bottom: 1px solid var(--line); background: #090d10; }
.header-inner { min-height: 88px; display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.wordmark { font-size: 1.1rem; font-weight: 800; letter-spacing: .12em; }
.wordmark span { color: var(--red); }
nav { display: flex; flex-wrap: wrap; gap: 30px; }
nav a { font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; }
nav a:hover { color: var(--cyan); }
.eyebrow, .section-number, .status, .hero-foot, .stage-caption, .frequency-caption {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.signal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 8px; box-shadow: 0 0 12px #ff5a6566; }
.text-link { display: inline-flex; align-items: center; gap: 24px; border-bottom: 1px solid currentColor; padding-bottom: 12px; font-size: .8rem; font-weight: 700; }
.text-link span[aria-hidden] { font-size: 1.35rem; }
.text-link:hover { color: var(--red); }

/* Opening artist presentation */
.hero {
  overflow: hidden;
  background: radial-gradient(ellipse at 82% 48%, #16323970, transparent 48%), #090d10;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 7%; padding: 90px 0 80px; min-height: 650px; }
.eyebrow { color: var(--muted); margin: 0 0 26px; }
.hero h1 { font-size: clamp(3.8rem, 7.4vw, 7.4rem); line-height: 1; letter-spacing: -.075em; margin: 0 0 25px; }
.hero-line { font-size: clamp(2.5rem, 4.5vw, 4.8rem); letter-spacing: -.055em; line-height: 1.05; margin: 0 0 27px; font-weight: 600; }
em { color: var(--cyan); font-style: normal; }
.hero-description { max-width: 450px; font-size: 1.08rem; line-height: 1.65; color: var(--muted); margin-bottom: 32px; }
.emblem-stage { position: relative; min-height: 440px; display: flex; flex-direction: column; justify-content: center; align-items: center; isolation: isolate; }
.emblem { width: min(100%, 360px); height: auto; position: relative; mix-blend-mode: screen; }
.orbit { position: absolute; width: 420px; height: 420px; max-width: 110%; border: 1px solid #8ae1e830; transform: rotate(45deg); z-index: -1; }
.orbit-two { width: 385px; height: 385px; border-color: #ff5a652a; transform: rotate(15deg); }
.stage-caption { color: #a9b4b9; margin-top: 30px; font-size: .62rem; }
.hero-foot { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .65rem; }
.signal-strip { padding: 28px 6%; background: var(--cyan); color: #111a1e; display: flex; align-items: center; gap: 30px; font-family: Consolas, monospace; font-size: .78rem; letter-spacing: .2em; font-weight: 700; }
.strip-line { height: 1px; background: #111a1e70; flex: 1; }

/* Artist introduction */
.sound-section { padding: 115px 0; background: #edf0e8; color: #142025; }
.sound-grid { display: grid; grid-template-columns: .35fr 1fr; gap: 7%; }
.section-number { margin: 0 0 32px; color: var(--cyan); }
.sound-section .section-number { color: #526b72; }
h2 { font-size: clamp(2.6rem, 5.8vw, 5.6rem); line-height: 1.02; letter-spacing: -.065em; margin: 0 0 32px; }
.sound-section em { color: #28747d; }
.large-copy { font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.45; letter-spacing: -.025em; max-width: 790px; margin: 0 0 24px; }
.support-copy { max-width: 680px; line-height: 1.75; color: #4a5d63; font-size: 1.05rem; }
.sound-words { display: flex; flex-wrap: wrap; gap: 18px 35px; padding-top: 25px; margin-top: 35px; border-top: 1px solid #14202530; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }

/* Upcoming project: abstract art is not album cover artwork */
.project-section { padding: 115px 0; }
.project-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 10%; align-items: center; }
.project-copy h2 { font-size: clamp(2.8rem, 4.7vw, 4.7rem); }
.status { color: var(--muted); margin-bottom: 24px; }
.project-copy > p:not(.section-number):not(.status) { font-size: 1.08rem; line-height: 1.7; max-width: 500px; }
.muted { color: var(--muted); }
.frequency-art { position: relative; min-height: 430px; overflow: hidden; background: #10191e; border-top: 1px solid var(--cyan); border-bottom: 1px solid var(--red); isolation: isolate; }
.frequency-grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 39px, #8ae1e813 40px), repeating-linear-gradient(90deg, transparent 0 39px, #8ae1e813 40px); }
.wave { position: absolute; width: 130%; height: 210px; left: -15%; top: 105px; border: 1px solid var(--cyan); border-radius: 50%; transform: rotate(-27deg); box-shadow: 0 0 35px #8ae1e822; }
.wave-red { transform: rotate(27deg); border-color: var(--red); height: 190px; top: 118px; box-shadow: 0 0 35px #ff5a6522; }
.frequency-center { position: relative; text-align: center; padding-top: 85px; font-size: 3.5rem; font-weight: 800; line-height: .95; letter-spacing: -.08em; color: #edf3ef; text-shadow: 0 4px 20px #090d10; }
.frequency-center span { color: var(--red); }
.frequency-caption { position: absolute; bottom: 22px; left: 22px; color: var(--muted); font-size: .6rem; }

/* Label relationship and footer */
.label-section { padding: 95px 0 110px; border-top: 1px solid var(--line); background: #111b20; }
.label-inner { max-width: 1000px; }
.label-inner h2 { font-size: clamp(2.7rem, 5vw, 4.8rem); }
.label-inner > p:not(.section-number) { max-width: 620px; color: var(--muted); line-height: 1.7; margin-bottom: 30px; }
.site-footer { padding: 32px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; font-size: .74rem; color: var(--muted); }
.footer-inner .wordmark { color: var(--ink); font-size: .9rem; }

/* Tablet and phone layouts */
@media (max-width: 850px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 4%; }
  .emblem-stage { min-height: 320px; }
  .emblem { width: 280px; }
  .orbit { width: 280px; height: 280px; }
  .orbit-two { width: 255px; height: 255px; }
  .sound-grid { grid-template-columns: 1fr; gap: 10px; }
  .project-grid { gap: 6%; }
  .frequency-art { min-height: 370px; }
}
@media (max-width: 600px) {
  .wrap { width: 88%; }
  .header-inner { display: block; padding: 22px 0; }
  nav { margin-top: 20px; gap: 23px; }
  nav a { font-size: .65rem; }
  .hero-grid { grid-template-columns: 1fr; padding: 55px 0 35px; }
  .hero h1 { font-size: clamp(3.7rem, 15vw, 5.5rem); }
  .hero-line { font-size: 2.8rem; }
  .emblem-stage { margin-top: 45px; min-height: 350px; }
  .hero-foot { flex-wrap: wrap; font-size: .58rem; }
  .signal-strip { gap: 12px; font-size: .61rem; letter-spacing: .1em; }
  .sound-section, .project-section, .label-section { padding: 72px 0; }
  .project-grid { grid-template-columns: 1fr; gap: 40px; }
  .frequency-art { min-height: 390px; }
  .label-inner .text-link { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}