@font-face { font-family:'Barlow Condensed'; src:url('/fonts/barlow-condensed-semibold.ttf') format('truetype'); font-style:normal; font-weight:600; font-display:swap }
@font-face { font-family:Archivo; src:url('/fonts/archivo-normal.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap }
:root {
  --ground:#141512; --charcoal:#252620; --ivory:#e7e0d0; --muted:#c0b9ab;
  --crimson:#8c302d; --red-ink:#c85b51; --focus:#ed9489; --line:#555349;
  --display:'Barlow Condensed','Arial Narrow',sans-serif; --body:Archivo,Arial,sans-serif;
  --gut:clamp(24px,4.5vw,64px); --ease-out:cubic-bezier(.23,1,.32,1);
}
* { box-sizing:border-box }
html { scroll-padding-top:24px; scrollbar-color:var(--crimson) var(--ground) }
body { margin:0; color:var(--ivory); background:var(--ground); font:400 16px/1.7 var(--body); -webkit-font-smoothing:antialiased }
::selection { background:var(--crimson); color:var(--ivory) }
h1,h2,h3,p { margin:0 }
p { text-wrap:pretty }
a { color:inherit; text-underline-offset:6px; text-decoration-thickness:1px }
a:focus-visible,summary:focus-visible,audio:focus-visible { outline:2px solid var(--focus); outline-offset:6px }
main:focus { outline:none }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0 }
.wrap { width:min(calc(100% - 2 * var(--gut)),1240px); margin-inline:auto }
.skip-link { position:fixed; z-index:30; top:12px; left:24px; padding:8px 16px; background:var(--ivory); color:var(--ground); transform:translateY(-180%) }
.skip-link:focus { transform:none }
.site-header { background:#10110f; border-bottom:1px solid #383930 }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:12px }
.brand { font:600 25px/1 var(--display); text-transform:uppercase; letter-spacing:.04em; text-decoration:none }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:32px }
nav a,.back-top { min-height:44px; display:inline-flex; align-items:center; gap:12px; font-size:13px; text-decoration:none; position:relative }
nav a::after,.back-top::after { content:''; position:absolute; height:2px; bottom:6px; left:0; right:0; background:var(--red-ink); transform:scaleX(0); transform-origin:left; transition:transform 160ms var(--ease-out) }
.hero { background:#1b1a16; position:relative }
.hero-art { height:clamp(290px,38vw,500px); position:relative; overflow:hidden; max-width:1600px; margin:auto }
.hero-art h1 { font-size:inherit; line-height:0 }
.hero-art img { position:absolute; width:100%; height:auto; top:50%; left:50%; transform:translate(-50%,-50%); display:block; aspect-ratio:16 / 9 }
.hero-foot { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 0 24px }
.genre { font:600 17px/1.3 var(--display); text-transform:uppercase; letter-spacing:.13em; color:var(--muted) }
.action { min-height:48px; display:inline-flex; align-items:center; gap:28px; padding:10px 0; text-decoration:none; border-bottom:2px solid var(--red-ink); font-size:14px; transition:color 160ms ease,transform 140ms var(--ease-out) }
.action svg,.back-top svg { transition:transform 160ms var(--ease-out) }
.action:active,.back-top:active { transform:scale(.97) }
.action:focus-visible,.back-top:focus-visible { transition:none; transform:none }
.action:focus-visible svg,.back-top:focus-visible svg { transition:none; transform:none }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.listening-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px }
.action--listen { background:var(--crimson); color:var(--ivory); padding:12px 20px; border-bottom:2px solid var(--red-ink); font:600 20px/1.2 var(--display); text-transform:uppercase; letter-spacing:.025em }
.world { position:relative; isolation:isolate; background:var(--ground); overflow:hidden }
.world-atmosphere { position:absolute; z-index:-1; top:290px; right:-6%; width:94%; height:390px; opacity:.38; pointer-events:none; filter:grayscale(1) contrast(1.6); mix-blend-mode:screen; mask-image:linear-gradient(to right,transparent,black 16%,black 78%,transparent),linear-gradient(to bottom,transparent,black 18%,black 58%,transparent 92%); mask-composite:intersect }
.world-atmosphere svg { width:100%; height:100%; display:block; stroke:none }
.music-section { position:relative; isolation:isolate; padding:40px 0 24px }
.music-section::before { content:''; position:absolute; inset:0; pointer-events:none; background:url('/print-grain.svg'); opacity:.14; z-index:-1 }
.section-heading { display:flex; align-items:center; gap:24px; margin-bottom:24px }
h2 { font:600 clamp(34px,3vw,42px)/1 var(--display); text-transform:uppercase; letter-spacing:.015em }
.print-rule { height:1px; background:var(--line); flex:1 }
.sound-layout { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end }
 .sound-print { grid-column:1 / -1; position:relative; z-index:1; padding:0; margin-block:8px 0 }
.sound-words { font:600 clamp(64px,9vw,126px)/.94 var(--display); letter-spacing:-.02em; text-transform:uppercase; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); text-shadow:0 2px 8px #141512 }
.sound-words span { grid-column:1 / -1; display:block }
.sound-words span:nth-child(2) { grid-column:2 / -1 }
.sound-words span:last-child { grid-column:4 / -1; color:var(--ivory) }
.sound-copy { grid-column:1 / 7; padding:12px 24px 8px 0; max-width:40ch; position:relative; z-index:2; background:linear-gradient(90deg,var(--ground) 84%,transparent) }
.sound-copy>p { font-size:clamp(18px,1.5vw,21px); line-height:1.55; text-wrap:pretty }
.sound-copy::after { content:''; display:block; width:64px; height:3px; background:var(--crimson); margin-top:24px }
.identity-section { padding:16px 0 48px; position:relative; background:transparent }
.identity-layout { display:grid; grid-template-columns:1.4fr .8fr; align-items:center; gap:clamp(40px,7vw,104px) }
.identity-art { display:flex; justify-content:center; position:relative; grid-column:2; grid-row:1; margin-top:-132px }
.identity-copy { grid-column:1; grid-row:1 }
.identity-art img { width:244px; height:auto; aspect-ratio:1; display:block; border-radius:50% }
.identity-copy h2 { font-size:clamp(42px,5.3vw,72px); line-height:1; max-width:13ch }
.identity-lead { font-size:21px; line-height:1.5; margin-top:24px; max-width:36ch }
.identity-copy p+p { color:var(--muted); margin-top:16px; max-width:48ch }
.connect-section { padding:40px 0 }
.connect-layout { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap }
.verified-links { display:flex; flex-wrap:wrap; gap:24px 40px }
.link-group h3 { font:600 23px/1 var(--display); margin:0 0 12px; text-transform:uppercase }
.link-group ul,.track-list,.track-links { list-style:none; padding:0; margin:0 }
.link-group a,.track-links a { min-height:44px; display:inline-flex; align-items:center }
.track-list { margin-top:40px; display:grid; gap:24px }
.track { padding-top:24px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr); gap:24px }
.track:has(.track-art) { grid-template-columns:180px minmax(0,1fr) }
.track-art { width:100%; height:auto; display:block }
.track-art img { width:100%; height:auto; display:block }
.track h3 { font:600 32px/1.2 var(--display); text-transform:uppercase; margin-bottom:16px }
.track audio { width:min(100%,540px); display:block; margin-block:16px; color-scheme:dark }
.track-links { display:flex; flex-wrap:wrap; gap:24px }
.lyrics { margin-top:16px; max-width:62ch }
.lyrics summary { cursor:pointer; width:fit-content; padding-block:8px; min-height:44px; text-decoration:underline; text-underline-offset:6px }
.lyrics-body { white-space:pre-wrap; margin-top:16px; color:var(--muted) }
.site-footer { padding:16px 0 24px }
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; color:var(--muted); font-size:13px }
.footer-links { display:flex; flex-wrap:wrap; gap:24px; list-style:none; padding:0; margin:0 }
.footer-links a { display:inline-flex; align-items:center; min-height:44px }
.footer-inner p { text-transform:uppercase; font:600 15px/1.3 var(--display); letter-spacing:.08em }
@media(hover:hover) and (pointer:fine) {
  nav a:hover::after,.back-top:hover::after { transform:scaleX(1) }
  .action:hover { color:var(--focus) }
  .action--listen:hover { color:var(--ivory); background:#a03934 }
  .action:hover svg { transform:translateX(3px) }
  .back-top:hover svg { transform:translateY(-2px) }
  .brand:hover,.link-group a:hover,.track-links a:hover { color:var(--focus) }
}
@media(max-width:900px) {
  .sound-layout { gap:24px }
  .sound-words { font-size:clamp(64px,9vw,90px) }
  .world-atmosphere { top:240px; height:340px }
  .identity-art img { width:200px }
}
@media(max-width:640px) {
  .header-inner { min-height:64px; gap:16px; padding-block:8px }
  .brand { font-size:20px; letter-spacing:.015em }
  nav { gap:20px }
  .hero-art { height:252px }
  .hero-art img { width:170%; max-width:none }
  .hero-foot { gap:16px; padding:0 0 24px; align-items:flex-start }
  .genre { font-size:14px; max-width:13ch; line-height:1.5; padding-top:10px; letter-spacing:.09em }
  .action { gap:16px; font-size:13px; white-space:nowrap }
  .action--listen { font-size:20px }
  .music-section { padding:32px 0 40px }
  .section-heading { margin-bottom:20px }
  .sound-layout { grid-template-columns:1fr; gap:24px }
  .sound-print { grid-column:1; margin-top:4px }
  .sound-words { font-size:clamp(49px,14vw,78px); grid-template-columns:repeat(12,minmax(0,1fr)); line-height:1 }
  .sound-words span:nth-child(2) { grid-column:2 / -1 }
  .sound-words span:last-child { grid-column:3 / -1 }
  .sound-copy { grid-column:1; padding:4px 0 0; max-width:36ch; background:transparent }
  .world-atmosphere { top:170px; height:300px; width:150%; right:-30%; opacity:.28 }
  .sound-copy>p { font-size:18px }
  .sound-copy::after { margin-top:20px; width:40px }
  .identity-section { padding:12px 0 32px }
  .identity-layout { display:flex; flex-direction:column-reverse; gap:28px; align-items:stretch }
  .identity-copy h2 { font-size:48px; max-width:14ch }
  .identity-lead { font-size:19px; margin-top:20px }
  .identity-art { margin-top:0; justify-content:flex-end }
  .identity-art img { width:190px }
  .footer-inner { align-items:flex-start; gap:16px }
  .footer-inner p { max-width:14ch; font-size:13px; padding-top:10px }
  .back-top { white-space:nowrap }
  .track:has(.track-art) { grid-template-columns:1fr }
  .track-art { max-width:260px }
}
@media(max-width:360px) {
  .header-inner { gap:12px }
  .brand { font-size:18px }
  nav { gap:14px }
  nav a { font-size:12px }
  .hero-art { height:228px }
  .sound-words { font-size:46px }
  .identity-copy h2 { font-size:44px }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .action:hover svg,.back-top:hover svg,.action:active,.back-top:active { transform:none }
}