@font-face { font-family: "Rye"; src: url(/fonts/Rye.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Alfa Slab One"; src: url(/fonts/AlfaSlabOne.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/fonts/SourceSans3-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/fonts/SourceSans3-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --parchment: #f3e4c4; --parchment-2: #ead2a4; --paper-edge: #c99a62;
  --wood: #2b1a12; --wood-2: #4a2e1d; --ink: #2b1a12; --muted: #5e3f2a;
  --rust: #9b301c; --rust-dark: #6e2012; --sand: #d9772b; --sky: #3f8fcf; --sky-pale: #cfe6f5;
  --violet: #5b2d82; --gutter: 16px;
  --slab: "Alfa Slab One", "Rockwell", Georgia, serif;
  --display: "Rye", "Alfa Slab One", Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--parchment); background-image: var(--grain), radial-gradient(ellipse at 50% 0, #f8edd4 0, var(--parchment) 55%, var(--parchment-2) 100%); background-size: 220px 220px, 100% 100%; color: var(--ink); font: 400 18px/1.6 "Source Sans 3", system-ui, sans-serif; }
img, video { max-width: 100%; }
a { color: var(--rust); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right)); }
svg.i { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; flex: none; }

/* Header */
header.top { background: var(--wood); background-image: var(--grain), linear-gradient(180deg, #3a2417, var(--wood)); border-bottom: 4px solid var(--rust); padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 10; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
header.top .brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--display); font-size: 22px; color: var(--parchment); text-decoration: none; letter-spacing: .04em; }
header.top .brand { white-space: nowrap; }
header.top .brand img { border-radius: 6px; }
header.top nav { display: flex; flex-wrap: wrap; }
header.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 18px; font-family: var(--slab); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #f0d9b0; text-decoration: none; }
header.top nav a:hover { color: var(--sand); }

/* Hero */
.hero { padding: 36px 0 20px; text-align: center; }
.hero h1 { margin: 0; font-weight: 400; line-height: 1; }
.banner { position: relative; display: inline-block; padding: .16em .4em .1em; white-space: nowrap; font-family: var(--display); font-size: clamp(34px, 10.5vw, 116px); letter-spacing: .03em; color: #f6e7c8; background: var(--rust); background-image: var(--grain), linear-gradient(180deg, #ad3a22, var(--rust-dark)); clip-path: polygon(0 6%, 4% 0, 30% 4%, 58% 0, 84% 5%, 100% 1%, 98% 50%, 100% 96%, 72% 100%, 44% 95%, 18% 100%, 1% 94%, 2% 50%); text-shadow: 0 3px 0 rgba(43,26,18,.55); }
.hero .tag { margin: 20px auto 0; max-width: 30em; font-family: var(--slab); font-size: clamp(18px, 4.4vw, 26px); line-height: 1.3; color: var(--wood-2); letter-spacing: .02em; }

/* Sections */
section { padding: 40px 0; scroll-margin-top: 64px; }
section h2 { display: inline-block; margin: 0 0 18px; padding: 6px 18px 4px; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 6vw, 38px); line-height: 1.15; color: #f6e7c8; background: var(--wood); background-image: var(--grain), linear-gradient(180deg, #4a2e1d, var(--wood)); clip-path: polygon(0 4%, 50% 0, 100% 6%, 98% 52%, 100% 94%, 46% 100%, 2% 96%, 1% 50%); }
.lede { margin: 0 0 20px; color: var(--muted); }

/* Music */
.tracks { display: grid; gap: 20px; grid-template-columns: 1fr; }
.track { padding: 18px; background: #f7ead0; background-image: var(--grain); border: 2px solid var(--wood-2); border-top: 8px solid var(--sky); border-radius: 4px; box-shadow: 0 6px 16px rgba(43,26,18,.18); }
.track h4 { margin: 0 0 6px; font-family: var(--slab); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--wood); }
.track .blurb { margin: 0 0 10px; }
.track .meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 14px; font-size: 16px; }
.track dt { font-weight: 600; color: var(--rust); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; padding-top: 2px; }
.track dd { margin: 0; color: var(--muted); }
.take { margin-top: 10px; }
.take-label { display: block; margin-bottom: 4px; font-family: var(--slab); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--wood-2); }
.take audio { display: block; width: 100%; height: 40px; }
.empty { margin: 0; font-size: 20px; color: var(--muted); }

/* Rival sounds */
.sound-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; background: var(--rust); color: #fbefd6; border: 2px solid var(--rust-dark); border-radius: 4px; font: 400 15px/1 var(--slab); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 3px 0 var(--rust-dark); }
.sound-btn:hover { background: #ad3a22; }
.sound-btn.on { background: var(--wood); border-color: #000; box-shadow: 0 3px 0 #000; }
.sound-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rust-dark); }
.sound-card { padding: 18px; background: #f7ead0; background-image: var(--grain); border: 2px solid var(--wood-2); border-left: 8px solid var(--sand); border-radius: 4px; box-shadow: 0 6px 16px rgba(43,26,18,.18); }
.sound-card.general { margin-bottom: 20px; border-left-color: var(--sky); }
.sound-card h3 { margin: 0 0 6px; font-family: var(--slab); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--wood); }
.sound-sig { margin: 0 0 4px; font-weight: 600; }
.sound-char { margin: 0 0 14px; color: var(--muted); }
.sound-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.layers { display: grid; gap: 8px; margin-top: 14px; }
.layer { display: grid; grid-template-columns: auto 5.5em 1fr; align-items: center; gap: 8px; min-height: 36px; font-weight: 600; color: var(--wood-2); }
.layer input[type=range] { width: 100%; min-width: 0; accent-color: var(--rust); height: 28px; }
@media (min-width: 760px) { .sound-grid { grid-template-columns: 1fr 1fr; } }

/* Footer */
footer { margin-top: 20px; padding: 26px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--wood); background-image: var(--grain); border-top: 4px solid var(--rust); color: #ead7b4; font-size: 16px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }

@media (min-width: 760px) {
  .tracks { grid-template-columns: repeat(3, 1fr); }
}

.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; z-index: 50; background: var(--sand); color: var(--wood); padding: 10px 14px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* Header nav and the Wishlist button (every page) */
header.top .main-nav { margin-left: auto; }
header.top .main-nav a[aria-current="page"] { color: var(--sand); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: var(--rust); color: #fbefd6; border: 2px solid #c4512f; border-radius: 4px; font: 400 14px/1 var(--slab); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 3px 0 var(--rust-dark); white-space: nowrap; }
.nav-cta:hover { background: #ad3a22; }
@media (max-width: 720px) {
  header.top { position: static; }
  header.top .wrap { flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
  header.top .main-nav { order: 3; width: 100%; margin-left: 0; column-gap: 18px; padding-bottom: 4px; }
  header.top .main-nav a { padding: 0; min-height: 38px; font-size: 13px; }
}

.more-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; min-height: 44px; padding: 0 18px; background: var(--rust); color: #fbefd6; border: 2px solid var(--rust-dark); border-radius: 4px; font: 400 15px/1 var(--slab); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 3px 0 var(--rust-dark); }
.more-link:hover { background: #ad3a22; }
.more-link.light { background: transparent; color: var(--parchment); border-color: rgba(243,228,196,.6); box-shadow: none; }
.more-link.light:hover { background: rgba(243,228,196,.12); }

/* Inner page heading (music) */
.page-head { padding: 34px 0 6px; }
.page-head h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 8vw, 60px); line-height: 1.05; color: var(--rust-dark); }
.page-head p { margin: 10px 0 0; max-width: 42em; color: var(--muted); font-size: 19px; }
.sub-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sub-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; background: var(--parchment-2); border: 1px solid var(--paper-edge); border-radius: 18px; color: var(--wood); font-weight: 600; text-decoration: none; }
.sub-nav a:hover { background: #e2c792; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-nav a { color: #f0d9b0; }

/* Home: splash */
.splash { position: relative; display: grid; place-items: center; min-height: min(92vh, 860px); padding: 64px 0 56px; overflow: hidden; color: #fbefd6; text-align: center; isolation: isolate; }
.splash-art { position: absolute; inset: 0; z-index: -2; }
.splash-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.splash::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 42%, rgba(27,16,10,.28) 0, rgba(27,16,10,.6) 60%, rgba(27,16,10,.86) 100%), linear-gradient(180deg, rgba(27,16,10,.35), rgba(27,16,10,0) 30%, rgba(27,16,10,.75)); }
.splash-inner { display: flex; flex-direction: column; align-items: center; }
.logo { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(52px, 14.5vw, 168px); line-height: .92; letter-spacing: .02em; white-space: nowrap; color: #f8e3b5; -webkit-text-stroke: .025em var(--wood); paint-order: stroke fill; text-shadow: 0 .045em 0 var(--wood), 0 .09em 0 var(--rust-dark), 0 .2em .4em rgba(0,0,0,.55); }
.ribbon { margin: 18px 0 0; padding: 8px 30px 6px; font-family: var(--slab); font-size: clamp(20px, 4.6vw, 32px); letter-spacing: .03em; color: #fbefd6; background: var(--rust); background-image: var(--grain), linear-gradient(180deg, #b13c22, var(--rust-dark)); clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); text-shadow: 0 2px 0 rgba(43,26,18,.6); }
.pitch { max-width: 34em; margin: 22px auto 0; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.5; color: #fff4e0; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.splash-ctas { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; max-width: 680px; margin-top: 26px; }
.splash .interest.hero-form { flex: 1 1 400px; max-width: 520px; margin: 0; justify-content: stretch; }
.splash .interest .msg:empty { display: none; }
.splash .interest .msg { color: #fff4e0; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.splash .interest[data-state=done] .msg { color: #b9f0a8; }
.splash .interest[data-state=error] .msg { color: #ffc2ae; }
.btn-wishlist, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; font-family: var(--slab); font-size: 1rem; letter-spacing: .03em; text-decoration: none; border-radius: 4px; }
.btn-wishlist { color: var(--wood); background: #f8e3b5; border: 2px solid var(--wood); box-shadow: 0 3px 0 var(--wood); }
.btn-wishlist:hover { background: #fff1cf; }
.btn-ghost { color: var(--parchment); background: var(--wood); border: 2px solid var(--wood-2); }
.btn-ghost:hover { background: var(--wood-2); }
.splash .interest input[type=email], .splash .interest button { min-height: 50px; }
.fine { margin: 8px 0 0; font-size: 15px; color: #f0d9b0; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* Home: bands */
.band { padding: 56px 0; }
.band.dark { background: var(--wood); background-image: var(--grain), linear-gradient(180deg, #3a2417, var(--wood)); color: var(--parchment); }
.band.dark h2 { background: var(--rust); background-image: var(--grain), linear-gradient(180deg, #ad3a22, var(--rust-dark)); }
.band.dark .lede { color: #e6cfa6; }
.world-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.world-card { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 4px solid var(--wood); border-radius: 6px; box-shadow: 0 0 0 2px var(--paper-edge), 0 8px 18px rgba(43,26,18,.28); background: var(--wood); }
.world-card.big { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.world-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.world-card:hover img { transform: scale(1.04); }
.world-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font: 400 clamp(14px, 3.6vw, 19px)/1.2 var(--slab); letter-spacing: .04em; color: #fbefd6; text-transform: uppercase; background: linear-gradient(180deg, transparent, rgba(27,16,10,.85)); }
.rival-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.rival-card { --accent: var(--rust); margin: 0; overflow: hidden; background: #f7ead0; background-image: var(--grain); color: var(--ink); border: 3px solid #000; border-radius: 6px; }
.rival-card.spark { --accent: var(--violet); }
.rival-card.devils { --accent: #a2421f; }
.rival-card.ghost { --accent: #3b2c27; }
.rival-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; }
.rival-card h3 { margin: 0; padding: 8px 12px 5px; font: 400 clamp(15px, 4vw, 20px)/1.15 var(--slab); letter-spacing: .03em; text-transform: uppercase; color: #f8ecd2; background: var(--accent); }
.rival-card p { margin: 0; padding: 8px 12px 12px; font-size: 15px; font-weight: 600; color: var(--muted); }
.features { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.features li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding: 18px; background: #f7ead0; background-image: var(--grain); border: 2px solid var(--wood-2); border-radius: 6px; box-shadow: 0 6px 14px rgba(43,26,18,.15); }
.features svg.i { grid-row: span 2; width: 44px; height: 44px; padding: 9px; color: #fbefd6; background: var(--rust); border-radius: 50%; }
.features h3 { margin: 2px 0 4px; font: 400 21px/1.2 var(--slab); color: var(--wood); }
.features p { margin: 0; }
.teaser { display: grid; gap: 22px; align-items: center; }
.teaser-player { padding: 18px; background: rgba(243,228,196,.08); border: 1px solid rgba(243,228,196,.3); border-radius: 6px; }
.teaser-player .empty { color: #e6cfa6; }
.teaser-track { margin: 0 0 10px; font: 400 20px/1.2 var(--slab); }
.teaser-player audio { display: block; width: 100%; }
.closer { text-align: center; }
.closer .lede { max-width: 34em; margin-left: auto; margin-right: auto; }
.closer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
@media (min-width: 760px) {
  .world-grid { grid-template-columns: repeat(3, 1fr); }
  .rival-row { grid-template-columns: repeat(4, 1fr); }
  .features { grid-template-columns: 1fr 1fr; }
  .teaser { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 759px) {
  .world-grid .world-card:last-child:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .splash { min-height: 0; padding: 44px 0 40px; }
  .splash-ctas .btn-wishlist, .splash .interest button { flex: 1 1 100%; justify-content: center; }
  .band { padding: 40px 0; }
}

/* Interest list */
.interest { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 560px; margin: 18px auto 0; }
.interest input[type=email] { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 1.05rem; padding: 12px 14px; color: var(--ink); background: #fffaf0; border: 2px solid var(--wood-2); border-radius: 4px; }
.interest input[type=email]:focus { outline: 3px solid var(--sky); outline-offset: 1px; }
.interest button { display: inline-flex; align-items: center; gap: 8px; font-family: var(--slab); font-size: 1rem; letter-spacing: .03em; padding: 12px 20px; color: #fff4e0; background: var(--rust); border: 2px solid var(--rust-dark); border-radius: 4px; cursor: pointer; }
.interest button:hover { background: var(--rust-dark); }
.interest button:disabled { opacity: .6; cursor: progress; }
.interest .msg { flex-basis: 100%; min-height: 1.4em; margin: 4px 0 0; font-weight: 600; }
.interest[data-state=done] .msg { color: #2f6b2a; }
.interest[data-state=error] .msg { color: var(--rust); }
.interest .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }