/* Sean Kennedy — HEARTSICK era · "Neon night" */

/* Display font: Norman (Adobe Fonts). Add your Adobe Fonts web project <link> in each page's <head>
   (see README) and it will be used automatically. Instrument Serif is the free fallback. */
:root {
  --midnight: #07040A;
  --panel: #120A16;
  --line: #22152A;
  --field: #4A3550;
  --neon: #FF2D45;
  --violet: #8A5BFF;
  --glow-white: #FFEDEF;
  --cream: #F3EAE3;
  --text-soft: #E6D8E3;
  --haze: #B3A3B0;
  --font-display: "norman", "Norman", "Norman Variable", "Instrument Serif", Georgia, serif;
  /* Type controls (tweak these to resize) */
  --display-scale: 1;
  --display-weight: 400;
  --display-tracking: 0em;
  --wordmark-size: 33px;
  --nav-size: 13px;
  --body-size: 16px;
  --label-size: 13px;
  color-scheme: dark;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1120px;
  --glow-text: 0 0 4px rgba(255,255,255,.35), 0 0 12px var(--neon), 0 0 28px var(--neon), 0 0 64px rgba(255,45,69,.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--midnight); color: var(--cream);
  font-family: var(--font-body); font-size: var(--body-size); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--cream); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Film grain over everything (never blocks clicks) */
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .08; mix-blend-mode: overlay; }
.grain svg { width: 100%; height: 100%; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); }
.site-header.over-hero { position: absolute; top: 0; left: 0; right: 0; border-bottom: 0; }
.site-header .bar { max-width: 1280px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font-family: var(--font-display); font-size: var(--wordmark-size); font-weight: var(--display-weight); line-height: 1; color: var(--cream); text-decoration: none; white-space: nowrap; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a, .footer-links a, .quiet {
  color: var(--haze); text-decoration: none; font-size: var(--nav-size); letter-spacing: .16em; text-transform: uppercase;
  transition: color .2s, text-shadow .2s;
}
.nav a:hover, .nav a[aria-current="page"], .footer-links a:hover, .quiet:hover { color: var(--glow-white); text-shadow: 0 0 8px rgba(255,45,69,.9); }
.cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--haze); cursor: pointer; }
.cart-btn:hover { color: var(--glow-white); }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--neon); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 10px rgba(255,45,69,.8); }
.cart-count[hidden] { display: none; }
.menu-btn { display: none; min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--cream); cursor: pointer; }
.header-actions { display: flex; align-items: center; gap: 8px; }

@media (max-width: 820px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav { position: fixed; inset: 0; z-index: 90; flex-direction: column; justify-content: center; gap: 28px; background: rgba(7,4,10,.97); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .nav a { font-size: 18px; }
  body.menu-open .nav { opacity: 1; visibility: visible; }
  .nav-close { position: absolute; top: 20px; right: 20px; }
}
@media (min-width: 821px) { .nav .nav-close { display: none; } }

/* ---------- Type & shared pieces ---------- */
.neon { color: var(--glow-white); text-shadow: var(--glow-text); }
.flicker { animation: flicker 7s infinite; }
@keyframes flicker { 0%,17%,21%,61%,64%,100% { opacity: 1; } 19%,62.5% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .flicker { animation: none; } html { scroll-behavior: auto; } }

.display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: .9; margin: 0; }
.eyebrow { margin: 0; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-soft); }

.nbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 34px;
  border: 1.5px solid var(--neon); background: transparent; color: var(--glow-white); text-decoration: none; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255,45,69,.55), inset 0 0 14px rgba(255,45,69,.3); text-shadow: 0 0 8px var(--neon);
  transition: background .2s, box-shadow .2s;
}
.nbtn:hover { background: rgba(255,45,69,.14); box-shadow: 0 0 24px rgba(255,45,69,.85), inset 0 0 18px rgba(255,45,69,.5); }
.nbtn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.nbtn.block { width: 100%; }

.section { padding: 40px 0; }
@media (max-width: 720px) { .section { padding: 32px 0; } }
.section-head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.section-head h2 { margin: 0; font-size: var(--label-size); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.section-head .count { font-size: 13px; color: var(--haze); }
.rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,45,69,.75), rgba(138,91,255,.55) 55%, rgba(138,91,255,0)); }

.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.card .media { overflow: hidden; aspect-ratio: 1; background: var(--panel); }
.card .media.light { background: rgba(236, 232, 229, .5); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, box-shadow .5s ease; }
.card:hover img { box-shadow: 0 0 28px rgba(138,91,255,.55); }
.card .title { font-size: 14px; line-height: 1.4; color: var(--cream); }
.card .meta { font-size: 14px; color: var(--haze); margin-top: -6px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: min(92vh, 900px); min-height: 600px; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero .haze { position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 60% 55% at 12% 88%, rgba(255,45,69,.45), rgba(255,45,69,0) 70%),
              radial-gradient(ellipse 50% 50% at 88% 10%, rgba(138,91,255,.4), rgba(138,91,255,0) 70%); }
.hero .fade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--midnight) 0%, rgba(7,4,10,.3) 50%, rgba(7,4,10,.6) 100%); }
.hero .content { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 0 24px 112px; }
.hero h1 { font-size: calc(clamp(54px, 14.5vw, 176px) * var(--display-scale)); text-transform: uppercase; font-weight: 500; } /* album title: Norman Medium */
.hero .eyebrow { margin-top: 26px; }
.hero .nbtn { margin-top: 36px; }

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255,45,69,.5), 0 0 60px rgba(255,45,69,.25), 0 0 120px rgba(138,91,255,.15); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 24px; border: 0; background: none; color: var(--glow-white); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.video .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.video .poster svg, .video .poster span { position: relative; }
.video .poster svg { filter: drop-shadow(0 0 10px var(--neon)); transition: transform .3s; }
.video .poster:hover svg { transform: scale(1.06); }
.video .poster span { font-family: var(--font-display); font-size: calc(clamp(26px, 4vw, 44px) * var(--display-scale)); line-height: 1.1; }

/* ---------- Forms ---------- */
.signup { position: relative; text-align: center; }
.signup::before { content: ""; position: absolute; left: 50%; top: 0; width: 1100px; max-width: 100%; height: 100%; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(138,91,255,.16), rgba(138,91,255,0) 70%); pointer-events: none; }
.signup .inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 40px 24px 40px; }
.signup h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(clamp(32px, 5vw, 44px) * var(--display-scale)); line-height: 1.1; margin: 0; }
.inline-form { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 240px; min-height: 52px; padding: 0 18px; font: inherit; font-size: 15px; color: var(--cream); background: rgba(255,255,255,.03); border: 1px solid var(--field); border-radius: 0; }
.inline-form input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 12px rgba(255,45,69,.4); }
.fine { font-size: 12px; color: var(--haze); margin: 12px 0 0; }
.form-status:empty { min-height: 0; margin: 0; }
.form-status { min-height: 1.6em; margin: 12px 0 0; font-size: 14px; color: var(--text-soft); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--haze); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 8px 2px; font: inherit; font-size: 15px; color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--neon); box-shadow: 0 6px 12px -8px rgba(255,45,69,.9); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .inner { padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 12px; color: var(--haze); text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.footer-links a { display: inline-flex; padding: 4px; color: var(--cream); transition: color .2s, transform .2s; }
.footer-links a:hover { color: var(--glow-white); transform: translateY(-1px); }
.footer-links svg { display: block; width: 28px; height: 28px; }
@media (max-width: 480px) { .footer-links { gap: 14px; } .footer-links svg { width: 24px; height: 24px; } }
.footer-small { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; font-size: 13px; color: var(--text-soft); }
.footer-small a { color: var(--text-soft); text-decoration: none; }
.footer-small a:hover { color: var(--glow-white); }

/* ---------- Page title ---------- */
.page-title { text-align: center; padding: 36px 24px 0; }
@media (max-width: 600px) { .page-title { padding-top: 28px; } }
.page-title h1 { font-size: calc(clamp(48px, 8vw, 72px) * var(--display-scale)); }

/* ---------- Music ---------- */
.album-feature { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; padding: 88px 0 104px; }
.album-feature img { flex: 1 1 340px; max-width: 480px; width: 100%; aspect-ratio: 1; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,45,69,.45), 0 0 70px rgba(255,45,69,.35), 0 0 160px rgba(138,91,255,.22); }
.album-feature .text { flex: 1 1 320px; }
.album-feature h1 { font-size: calc(clamp(64px, 9vw, 96px) * var(--display-scale)); text-transform: uppercase; margin-top: 16px; }
.album-feature p.desc { margin: 24px 0 0; max-width: 420px; color: var(--text-soft); line-height: 1.7; }
.album-feature .nbtn { margin-top: 32px; }
.platforms { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px 16px; }
.grid.small .title { font-size: 13px; }
.grid.small .meta { font-size: 12px; }

/* ---------- Gallery ---------- */
.album-tabs { border-bottom: 1px solid var(--line); }
.album-tabs .inner { max-width: 1100px; margin: 0 auto; padding: 0 12px; display: flex; justify-content: center; flex-wrap: nowrap; }
.album-tabs button { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; min-height: 52px; padding: 6px 16px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--haze); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .2s, text-shadow .2s; }
.album-tabs button:hover { color: var(--glow-white); text-shadow: 0 0 8px rgba(255,45,69,.9); }
.album-tabs button[aria-current="true"] { color: var(--glow-white); border-bottom-color: var(--neon); box-shadow: 0 6px 14px -6px rgba(255,45,69,.9); }
.album-head { text-align: center; padding: 56px 20px 48px; }
.album-head h2 { transition: opacity .25s ease; margin: 0; font-size: calc(clamp(40px, 6vw, 68px) * var(--display-scale)); font-weight: 400; line-height: 1.05; }
.album-head .year { margin: 14px 0 10px; color: var(--haze); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.album-head p { margin: 0; color: var(--haze); font-size: 14px; }
.photo-grid { max-width: 1100px; margin: 0 auto; padding: 0 20px 112px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 70px; grid-auto-flow: dense; gap: 10px; }
.photo-grid figure { margin: 0; overflow: hidden; border-radius: 4px; background: var(--panel); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.r6 { grid-row: span 6; } .r5 { grid-row: span 5; } .r4 { grid-row: span 4; } .r3 { grid-row: span 3; }
@media (max-width: 720px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 52px; gap: 6px; padding: 0 8px 80px; } }
@font-face { font-family: "Oswald SK"; font-weight: 300; font-display: block; src: url(/assets/fonts/Oswald.woff2) format("woff2"); }
@font-face { font-family: "Dark Paradise"; font-weight: 700; font-display: block; src: url(/assets/fonts/Dark-Paradise.woff2) format("woff2"); }
@font-face { font-family: "Steelfish"; font-weight: 400; font-display: block; src: url(/assets/fonts/Steelfish.woff2) format("woff2"); }
@font-face { font-family: "Topazia"; font-weight: 400; font-display: block; src: url(/assets/fonts/Topazia.woff2) format("woff2"); }
@font-face { font-family: "Selawik"; font-weight: 700; font-display: block; src: url(/assets/fonts/Selawik.woff2) format("woff2"); }

/* ---------- Store ---------- */
.filters { margin: 28px 0 32px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.filters button { min-height: 44px; padding: 0 14px; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--haze); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.filters button[aria-pressed="true"] { color: var(--glow-white); border-bottom-color: var(--neon); box-shadow: 0 6px 12px -8px rgba(255,45,69,.9); }
.product { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.product .badge { display: inline-block; margin-left: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--neon); text-shadow: 0 0 8px rgba(255,45,69,.7); }

/* Dialogs (product + cart) */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(4,2,6,.72); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--midnight); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .3s ease, box-shadow .3s ease; }
.drawer.open { transform: none; box-shadow: -20px 0 80px rgba(138,91,255,.15); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.icon-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--haze); cursor: pointer; }
.icon-btn:hover { color: var(--glow-white); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.drawer-foot { padding: 20px 24px 28px; border-top: 1px solid var(--line); }
.line-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.line-item img { width: 72px; height: 72px; object-fit: cover; background: rgba(236, 232, 229, .5); }
.line-item .name { font-size: 14px; line-height: 1.4; }
.line-item .var { font-size: 12px; color: var(--haze); }
.qty { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--field); }
.qty button { width: 32px; height: 32px; background: none; border: 0; color: var(--cream); cursor: pointer; }
.qty span { min-width: 24px; text-align: center; font-size: 13px; }
.line-item .price { font-size: 14px; text-align: right; }
.line-item .remove { display: block; margin-top: 8px; background: none; border: 0; padding: 0; color: var(--haze); font-size: 12px; text-decoration: underline; cursor: pointer; }
.subtotal { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 15px; }
.empty { padding: 48px 0; text-align: center; color: var(--haze); }

.modal { position: fixed; z-index: 85; left: 50%; top: 50%; width: min(880px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; transform: translate(-50%, -48%); opacity: 0; visibility: hidden;
  background: var(--midnight); border: 1px solid var(--line); box-shadow: 0 0 80px rgba(255,45,69,.15); transition: opacity .25s, transform .25s, visibility .25s; }
.modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.modal .close { position: absolute; top: 8px; right: 8px; z-index: 1; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal-grid .pic { background: rgba(236, 232, 229, .5); }
.modal-grid .pic img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.modal-grid .info { padding: 48px 36px 36px; display: flex; flex-direction: column; gap: 16px; }
.modal-grid h2 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(34px * var(--display-scale)); line-height: 1.1; }
.modal-grid .price { font-size: 18px; color: var(--text-soft); }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sizes button { min-width: 52px; min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--field); color: var(--cream); cursor: pointer; }
.sizes button[aria-pressed="true"] { border-color: var(--neon); box-shadow: 0 0 10px rgba(255,45,69,.5), inset 0 0 8px rgba(255,45,69,.3); }
.note { font-size: 13px; color: var(--haze); margin: 0; }
@media (max-width: 720px) { .modal-grid { grid-template-columns: 1fr; } .modal-grid .info { padding: 28px 22px; } }

/* ---------- Contact ---------- */
.about { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; padding: 96px 0; }
.about img { flex: 1 1 320px; max-width: 440px; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 30% 20%; }
.about .text { flex: 1 1 340px; }
.about h1 { font-size: calc(56px * var(--display-scale)); line-height: 1; }
.about .copy { margin-top: 24px; max-width: 480px; color: var(--text-soft); line-height: 1.75; }
.contact { border-top: 1px solid var(--line); }
.contact .inner { max-width: 640px; margin: 0 auto; padding: 96px 24px 112px; }
.contact h2 { text-align: center; font-size: calc(56px * var(--display-scale)); }
.contact form { margin-top: 48px; display: flex; flex-direction: column; gap: 28px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

/* ---------- Videos ---------- */
.video-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 40px 28px; padding-bottom: 104px; }
.video-list .poster span { display: none; }
.video-list h2 { font-size: calc(22px * var(--display-scale)) !important; }
.video-list h2 { margin: 18px 0 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(28px * var(--display-scale)); }

/* ---------- Instagram ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ig-grid a[hidden] { display: none; }
.ig-more { text-align: center; margin-top: 28px; }
.ig-more[hidden] { display: none; }
.ig-grid a { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; }
.ig-grid a.is-video::after { content: ""; position: absolute; top: 10px; right: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--glow-white); opacity: .9; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, box-shadow .5s; }
.ig-grid a:hover img { box-shadow: 0 0 28px rgba(138,91,255,.55); }
@media (max-width: 720px) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ---------- Success ---------- */
.success { max-width: 640px; margin: 0 auto; padding: 96px 24px 120px; text-align: center; }
.success h1 { font-size: calc(clamp(48px, 8vw, 72px) * var(--display-scale)); }
.downloads { margin: 32px 0 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.grid.fit { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.album-head h2.loading { opacity: 0; }
@media (max-width: 720px) {
  .album-tabs .inner { padding: 0 4px; }
  .album-tabs button { padding: 6px 4px; font-size: 10px; letter-spacing: .03em; }
}
.album-tabs button.short { white-space: nowrap; flex-shrink: 0; }
.album-tabs button.long { text-wrap: balance; }

/* ---------- News ---------- */
.news-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 44px 28px; padding: 32px 0 72px; }
.news-card .media { aspect-ratio: 4/3; }
.news-card .media.empty { display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(138,91,255,.18), transparent 70%), var(--panel); }
.news-card .media.empty span { font-size: 44px; }
.news-card .meta { order: -1; margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.news-card .media { order: -2; }
.news-card .title { font-family: var(--font-display); font-size: calc(24px * var(--display-scale)); line-height: 1.15; }
.news-card .excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--haze); }
.post { max-width: 720px; margin: 0 auto; padding: 36px 24px 72px; }
.post-head { text-align: center; margin-bottom: 44px; }
.post-head .back { display: table; margin: 0 auto 28px; font-size: 13px; }
.post-head h1 { margin-top: 14px; font-size: calc(clamp(38px, 6vw, 60px) * var(--display-scale)); line-height: 1.05; }
.post-body { color: var(--text-soft); font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 1.2em; }
.post-body h2, .post-body h3, .post-body h4 { font-family: var(--font-display); color: var(--cream); font-weight: var(--display-weight); line-height: 1.2; margin: 1.6em 0 .6em; }
.post-body h2 { font-size: 32px; } .post-body h3 { font-size: 26px; } .post-body h4 { font-size: 21px; }
.post-body a { color: var(--glow-white); text-decoration-color: var(--neon); text-underline-offset: 3px; }
.post-body a:hover { text-shadow: 0 0 8px rgba(255,45,69,.9); }
.post-body strong { color: var(--cream); }
.post-body ul, .post-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.post-body blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--neon); color: var(--cream); font-style: italic; }
.post-body figure { margin: 2em 0; }
.post-body .post-img img { display: block; width: 100%; height: auto; }
.post-body figcaption { margin-top: 10px; font-size: 13px; color: var(--haze); text-align: center; }
.post-body .post-video .poster span { display: none; }
.post-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 2em 0; }
.post-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.post-embed { margin: 2em 0; } .post-embed iframe { width: 100%; min-height: 360px; border: 0; }
.post-body audio { width: 100%; margin: 1em 0; }
.post-button { text-align: center; margin: 2em 0; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255,45,69,.25); }
.post-nav a { text-decoration: none; color: var(--cream); font-family: var(--font-display); font-size: 20px; line-height: 1.25; }
.post-nav a:hover { color: var(--glow-white); text-shadow: 0 0 8px rgba(255,45,69,.9); }
.post-nav .newer { text-align: right; }
.post-nav .label { display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--haze); }
@media (max-width: 600px) { .post-body { font-size: 16px; } .post-nav { grid-template-columns: 1fr; } .post-nav .newer { text-align: left; } }

/* Only the hero title glows. Everything else is plain text (hover = colour change only). */
.neon, .nbtn, .badge, .nav a, .footer-links a, .quiet, .album-tabs button, .post-body a, .post-nav a, .product .badge { text-shadow: none !important; }
:not(.hero) .neon { color: var(--cream); }
:not(.hero) .flicker { animation: none; }
.hero .neon { color: var(--glow-white); text-shadow: var(--glow-text) !important; }
.hero .flicker { animation: flicker 7s infinite; }
@media (prefers-reduced-motion: reduce) { .hero .flicker { animation: none; } }

/* ---------- Terms / Privacy ---------- */
.legal { max-width: 760px; padding-bottom: 72px; }
.legal-body { color: var(--text-soft); font-size: 16px; line-height: 1.75; }
.legal-body h2 { margin: 2.2em 0 .6em; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.legal-body p, .legal-body ul, .legal-body ol { margin: 0 0 1.1em; }
.legal-body ul, .legal-body ol { padding-left: 1.3em; }
.legal-body li { margin-bottom: .4em; }
.legal-body strong { color: var(--cream); font-weight: 600; }
.legal-body a { color: var(--glow-white); text-decoration-color: var(--neon); text-underline-offset: 3px; }
.legal-body .legal-caps { font-size: 14px; }

/* Text links (links inside sentences): red and underlined, a deeper red matching the section lines. */
main p a:not(.nbtn):not(.quiet), main li a, .post-body a, .legal-body a, .fine a {
  color: #C9293E; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; text-shadow: none;
}
main p a:not(.nbtn):not(.quiet):hover, main li a:hover, .post-body a:hover, .legal-body a:hover, .fine a:hover { color: #E8394F; }

/* Music page: singles get one more per row than albums, so they're smaller. */
.grid.small.albums { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); } /* all albums share one row */
.grid.small.singles { grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); } /* one more per row than albums */
@media (max-width: 960px) { .grid.small.albums { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.small.singles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid.small.albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.small.singles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.video-empty { grid-column: 1 / -1; text-align: center; color: var(--haze); padding: 40px 0; }

/* Videos page: dropdown (plain text + red arrow, no box). Custom so "Behind the Scenes" can stack on two lines. */
.video-picker { position: relative; display: flex; flex: none; }
.vp-btn { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); text-align: right; line-height: 1.25; }
.vp-btn::after { content: ""; flex: none; width: 12px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FF2D45' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center; transition: transform .2s; }
.vp-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.vp-btn:hover { color: var(--glow-white); }
.vp-btn:focus, .vp-btn:focus-visible { outline: none; }
.vp-btn:focus-visible .vp-label { text-decoration: underline; text-decoration-color: var(--neon); text-underline-offset: 4px; }
.vp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; margin: 0; padding: 6px 0; list-style: none;
  background: #120c16; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.6); }
.vp-menu[hidden] { display: none; }
.vp-menu li { padding: 11px 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--haze); cursor: pointer; text-align: right; white-space: nowrap; }
.vp-menu li:hover, .vp-menu li:focus { outline: none; color: var(--glow-white); background: rgba(255,45,69,.08); }
.vp-menu li[aria-selected="true"] { color: var(--glow-white); }
@media (max-width: 600px) { .vp-btn { font-size: 11px; letter-spacing: .1em; gap: 8px; } .vp-btn::after { width: 10px; } .vp-menu { min-width: 190px; } }
/* Page header in the style of the home page section headers (title, line, control), larger and in Norman. */
.section-head.page-head { margin: 48px 0 32px; gap: 24px; }
.section-head.page-head h1 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(40px * var(--display-scale)); line-height: 1; letter-spacing: var(--display-tracking); white-space: nowrap; }
@media (max-width: 600px) {
  .section-head.page-head { margin-top: 28px; margin-bottom: 24px; gap: 12px; }
  .section-head.page-head h1 { font-size: calc(28px * var(--display-scale)); }
}

/* Single version: the hero title reads as the song title (title case), not the album (caps). */
.hero h1.single { text-transform: none; }
/* Single version: hero uses the "Heartsick" single artwork photo (portrait), framed on Sean's face. */
.hero > img.single-art { object-position: 35% 0%; }

/* Single version hero: the whole photo on the left (like the single artwork) fading into black, title block on the right. */
.hero-single { background: #000; }
.hero-single .haze { display: none; }
.hero-single .fade { background: linear-gradient(0deg, var(--midnight) 0%, rgba(7,4,10,0) 30%); }
.hero-single > img.single-art { right: auto; width: auto; max-width: 62%; aspect-ratio: 1376 / 1600; object-position: 0 0;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.hero-single .content { align-items: center; justify-content: center; padding: 0 9vw 0 50%; }
@media (min-width: 821px) {
  /* Zoomed in: the photo fills more of the width (cropping some of the lower body), less empty space on the right. */
  .hero-single { height: min(86vh, 860px); }
  .hero-single > img.single-art { width: 70%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: 30% 8%;
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
  /* The title block is centered under the navigation (site.js sets the left padding to match the menu's position). */
  .hero-single .content { padding: 0 0 0 var(--hero-pad-left, 50%); }
}
.hero-single h1 { font-size: calc(clamp(64px, 9.5vw, 150px) * var(--display-scale)); }
.hero-single .eyebrow { margin-top: 18px; }
.hero-single .nbtn { margin-top: 30px; }
@media (max-width: 820px) {
  /* Phones: photo fills the hero, title centered over it, a bit above the bottom. */
  .hero-single > img.single-art { width: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: 30% 0;
    -webkit-mask-image: none; mask-image: none; }
  .hero-single .fade { background: linear-gradient(0deg, var(--midnight) 0%, rgba(7,4,10,.35) 45%, rgba(7,4,10,.15) 100%); }
  .hero-single .content { justify-content: flex-end; padding: 0 24px 22vh; }
  .hero-single h1 { font-size: calc(clamp(44px, 13vw, 64px) * var(--display-scale)); }
  .hero-single .eyebrow { margin-top: 14px; }
  .hero-single .nbtn { margin-top: 22px; min-height: 40px; padding: 0 22px; font-size: 11px; }
  .hero-single h1 { white-space: nowrap; line-height: .95; }
}
/* Page header line: runs all the way to the dropdown (the home page fade is too quick when the line is short). */
.section-head.page-head .rule { min-width: 24px; background: linear-gradient(90deg, rgba(255,45,69,.75), rgba(138,91,255,.55) 70%, rgba(138,91,255,.25)); }
@media (max-width: 600px) { .section-head.page-head .rule { margin-top: 4px; } }
/* Norman sits low in its line box; lift the title so it's centered on the line and dropdown. */
.section-head.page-head h1 { position: relative; top: -0.1em; }

/* Home page store on phones: one product at a time, swipe sideways for the next. */
.swipe-dots { display: none; }
@media (max-width: 600px) {
  .grid.fit.home-merch { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .home-merch::-webkit-scrollbar { display: none; }
  .home-merch > .card { flex: 0 0 100%; scroll-snap-align: center; }
  .swipe-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .swipe-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .2s; }
  .swipe-dots span.on { background: var(--neon); }
}

/* Email sign-up: field + Join always on one line; heading and fine print fit one line on phones. */
.inline-form { flex-wrap: nowrap; }
.inline-form input { flex: 1 1 auto; min-width: 0; }
.inline-form .nbtn { flex: none; }
@media (max-width: 600px) {
  .signup h2 { font-size: calc(clamp(22px, 6.6vw, 32px) * var(--display-scale)); white-space: nowrap; }
  .inline-form { margin-top: 22px; gap: 8px; }
  .inline-form input { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .inline-form .nbtn { min-height: 44px; padding: 0 18px; font-size: 11px; }
  .signup .fine { font-size: 10.5px; white-space: nowrap; }
}
/* Footer on phones: copyright, Privacy Policy and Terms stacked and centered. */
@media (max-width: 600px) { .footer-small { flex-direction: column; align-items: center; gap: 8px; } }

/* Keep the header identical on every page: same height (icons don't make the bar taller), the cart's space is
   reserved on pages without a cart, and the page doesn't shift sideways when a scrollbar appears. */
html { scrollbar-gutter: stable; }
.site-header .cart-btn, .site-header .menu-btn { margin: -6px 0; }
.cart-placeholder { visibility: hidden; pointer-events: none; }
@media (max-width: 820px) { .cart-placeholder { display: none; } }

/* Store pages: centered name + cart, no menu. */
.store-header .bar { display: grid; grid-template-columns: 44px 1fr 44px; }
.store-header .wordmark { justify-self: center; }
.store-header .cart-btn { justify-self: end; }

/* ---------- Product pages ---------- */
.product-page { padding-top: 28px; padding-bottom: 80px; }
.pp-back { display: inline-block; margin-bottom: 24px; font-size: 13px; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pp-pic { background: rgba(236, 232, 229, .5); }
.pp-pic.dark { background: #000; }
.pp-pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pp-info { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; position: sticky; top: 24px; }
.pp-info h1 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(clamp(34px, 4vw, 48px) * var(--display-scale)); line-height: 1.05; }
.pp-price { font-size: 20px; color: var(--text-soft); }
.pp-label { margin: 0 0 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--haze); }
.pp-note { margin: 0; font-size: 14px; color: var(--haze); line-height: 1.6; }
.pp-desc { color: var(--text-soft); line-height: 1.75; font-size: 15px; }
.pp-desc p { margin: 0 0 1em; }
.product-page .nbtn.block { width: 100%; }
@media (max-width: 760px) { .pp-grid { grid-template-columns: 1fr; gap: 28px; } .pp-info { position: static; } .product-page { padding-top: 20px; } }

/* Singles 2 and 3: photo on the right (full height, natural shape), fading in from the left; title block on the left. */
@media (min-width: 821px) {
  .hero-right > img.single-art { left: auto; right: 0; width: auto; height: 100%; max-width: 60%; aspect-ratio: auto; object-fit: cover; object-position: 50% 0;
    -webkit-mask-image: linear-gradient(270deg, #000 70%, transparent); mask-image: linear-gradient(270deg, #000 70%, transparent); }
  .hero-right .content { padding: 0 var(--hero-pad-right, 46%) 0 3vw; }
  .hero-right h1 { font-size: calc(clamp(56px, 6.6vw, 118px) * var(--display-scale)); white-space: nowrap; }
}
@media (max-width: 820px) {
  .hero-right > img.single-art { object-position: 62% 0; }
}

/* Singles 2 and 3: a soft dark band at the top so the menu stays readable over the photo's lights. */
.hero-right .fade { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 18%), linear-gradient(0deg, var(--midnight) 0%, rgba(7,4,10,0) 30%); }

/* Singles 2 and 3: wide photo fills the whole hero; the title sits in the photo's empty side. */
.hero-full-title-left > img.single-art, .hero-full-title-right > img.single-art {
  left: 0; right: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
.hero-full-title-left > img.single-art { object-position: 80% 30%; }
.hero-full-title-right > img.single-art { object-position: 35% 30%; }
.hero-full-title-left .fade, .hero-full-title-right .fade { background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 22%), linear-gradient(0deg, var(--midnight) 0%, rgba(7,4,10,0) 30%); }
@media (min-width: 821px) {
  .hero-full-title-left .content { padding: 0 52% 0 4vw; }
  .hero-full-title-right .content { padding: 0 4vw 0 56%; }
  .hero-full-title-left h1, .hero-full-title-right h1 { font-size: calc(clamp(56px, 6.6vw, 118px) * var(--display-scale)); white-space: nowrap; }
}
@media (max-width: 820px) {
  .hero-full-title-left > img.single-art { object-position: 82% 0; }
  .hero-full-title-right > img.single-art { object-position: 40% 0; }
}

/* Singles 2 and 3 (desktop): photo sits on the right at full height (shifted by --shift so Sean lands right of
   center), fading into black on the left. The title block's left edge lines up with "Sean Kennedy" in the header;
   the date and button stay centered under the title. */
@media (min-width: 821px) {
  .hero-full-title-left { background: #000; }
  .hero-full-title-left > img.single-art { left: auto; right: calc(-1 * var(--shift, 0%) * 1.5); width: auto; height: 100%; max-width: none;
    object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
  .hero-full-title-left .content { display: grid; justify-content: start; justify-items: center; align-content: center; text-align: center;
    padding: 0 0 0 var(--title-left, 24px); }
}

/* Singles 2 and 3 (desktop): photo zoomed and placed like Sean's mockups. Sizes are fractions of the page width
   (--img-w width, --img-x left edge, --img-y top, set per single in the build). */
@media (min-width: 821px) {
  .hero-full-title-left > img.single-art { left: var(--img-x, 0); right: auto; top: 0; margin-top: var(--img-y, 0);
    width: var(--img-w, 100%); height: auto; max-width: none; object-fit: fill; -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 821px) {
  /* No Way in Hell: the photo's left edge sits on the page, so fade it into the black. */
  [data-version="no-way-in-hell"] .hero-full-title-left > img.single-art {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 30%); }
}

/* Album version hero: same height as the single versions; photo and text sit a little lower. */
.hero:not(.hero-single) { height: min(86vh, 860px); }
.hero:not(.hero-single) > img { object-position: 60% 16%; }
.hero:not(.hero-single) .content { padding-bottom: 40px; }
.hero:not(.hero-single) h1 { font-size: calc(clamp(54px, 11vw, 150px) * var(--display-scale)); }
@media (max-width: 820px) { .hero:not(.hero-single) .content { padding-bottom: 56px; } }

/* Single versions: the date line is layered above the title, so letters that dip below the line (the y in "Way")
   pass behind it instead of covering it. */
.hero-single h1 { position: relative; z-index: 1; }
.hero-single .eyebrow { position: relative; z-index: 2; }
@media (max-width: 820px) { [data-version="no-way-in-hell"] .hero-single > img.single-art { object-position: 40% 0; } }
@media (min-width: 821px) {
  /* On shorter-wide windows the zoomed photo could end above the bottom of the section; make it always reach. */
  .hero-full-title-left > img.single-art { min-height: calc(100% + 10vw); object-fit: cover; object-position: 50% 0; }
}

/* ---------- Contact page: form first, bio + press kit as a side card ---------- */
.contact-page { padding-bottom: 80px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.contact-main .section-head.page-head { margin-bottom: 20px; }
.contact-main .section-head.page-head h2 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(40px * var(--display-scale)); line-height: 1; letter-spacing: var(--display-tracking); text-transform: none; position: relative; top: -0.1em; }
.contact-direct { margin: 0 0 28px; color: var(--haze); font-size: 14px; }
.contact-main form { display: flex; flex-direction: column; gap: 24px; }
.about-card { margin-top: 48px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.about-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.about-card-text { padding: 22px 24px 26px; }
.about-card h2 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cream); }
.about-card p { margin: 0 0 12px; color: var(--text-soft); font-size: 14px; line-height: 1.7; }
.nbtn.small { min-height: 40px; padding: 0 20px; font-size: 11px; margin-top: 8px; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-card { margin-top: 0; }
  .contact-main .section-head.page-head { margin-top: 28px; }
  .contact-main .section-head.page-head h2 { font-size: calc(28px * var(--display-scale)); }
}

/* ---------- Contact: About card matches the form's height and is narrower ---------- */
@media (min-width: 861px) {
  .contact-grid { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
  .about-card { display: flex; flex-direction: column; margin-top: 0; align-self: stretch; }
  .about-card img { flex: 1 1 0; min-height: 180px; aspect-ratio: auto; height: auto; object-position: 50% 25%; }
  .about-card-text { flex: none; }
}
.about-card p { font-size: 13.5px; line-height: 1.65; }

/* ---------- EPK ---------- */
.epk { padding-top: 32px; padding-bottom: 96px; }
.epk-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; margin-bottom: 72px; }
.epk-portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 30%; display: block; border: 1px solid var(--line); }
.epk-intro h1 { font-size: clamp(48px, 7vw, 96px); margin: 14px 0 10px; }
.epk-tag { margin: 0 0 28px; color: var(--haze); font-size: 15px; }
.epk-facts { margin: 0 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.epk-facts > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.epk-facts dt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--haze); margin-bottom: 4px; }
.epk-facts dd { margin: 0; color: var(--cream); font-size: 15px; line-height: 1.45; }
.epk-facts a, .epk-contact a { color: #C9293E; text-decoration: underline; text-underline-offset: 3px; }
.epk-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.epk-actions .nbtn.small { margin-top: 0; }
.epk-sec { margin-top: 72px; }
.epk-bio { columns: 2; column-gap: 48px; }
.epk-bio p { margin: 0 0 18px; color: var(--text-soft); font-size: 15px; line-height: 1.75; break-inside: avoid; }
.epk-rel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.epk-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.epk-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.epk-photos figure { margin: 0; }
.epk-photos a { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); }
.epk-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.epk-photos .dl { position: absolute; right: 10px; bottom: 10px; padding: 6px 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); background: rgba(10, 6, 12, .72); border: 1px solid var(--line); opacity: 0; transition: opacity .25s; }
.epk-photos a:hover .dl, .epk-photos a:focus-visible .dl { opacity: 1; }
.epk-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.epk-contact .pp-label { margin: 0 0 6px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--haze); }
.epk-contact > div { font-size: 14px; line-height: 1.6; color: var(--text-soft); overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .epk-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .epk-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .epk-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .epk-portrait { aspect-ratio: 4 / 3; }
  .epk-bio { columns: 1; }
  .epk-videos { grid-template-columns: 1fr; }
  .epk-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .epk-sec { margin-top: 56px; }
}
@media (max-width: 520px) {
  .epk-facts { grid-template-columns: 1fr; }
  .epk-contact { grid-template-columns: 1fr; }
  .epk-photos .dl { opacity: 1; }
}

/* Save as PDF: clean, light, ink-friendly */
@media print {
  @page { size: letter; margin: 14mm; }
  html, body { background: #fff !important; color: #111 !important; }
  .site-header, header.site-header, .nav, .footer, footer, .preview-bar, .epk-actions, .section-head .quiet, .epk-videos, #epk-video, .skip-link { display: none !important; }
  .epk-sec:has(.epk-videos) { display: none !important; }
  .epk { padding: 0; }
  .epk *, .epk a { color: #111 !important; text-shadow: none !important; box-shadow: none !important; }
  .epk-facts dt, .epk-contact .pp-label, .epk-tag, .card .meta { color: #666 !important; }
  .epk-facts, .epk-facts > div, .section-head .rule { border-color: #ccc !important; }
  .section-head .rule { background: #ccc !important; }
  .epk-head { grid-template-columns: 0.8fr 1.2fr; gap: 28px; margin-bottom: 28px; }
  .epk-intro h1 { font-size: 54px; }
  .epk-sec { margin-top: 28px; break-inside: avoid-page; }
  .epk-bio { columns: 2; column-gap: 28px; }
  .epk-bio p { font-size: 11pt; line-height: 1.5; }
  .epk-rel { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .epk-photos { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .epk-photos .dl { display: none; }
  .epk-contact { grid-template-columns: repeat(4, 1fr); }
  .epk-portrait, .epk-photos a, .card .media { border: 0; background: none; }
}
@media (min-width: 861px) {
  /* card runs from the top of the Contact heading to the bottom of the Send button */
  .about-card { margin-top: 44px; margin-bottom: 26px; }
}
.epk .video .poster span { display: none; }
.epk-rel { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 960px) { .epk-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .epk-rel { grid-template-columns: repeat(var(--n, 4), 1fr); } }
@media (min-width: 861px) {
  /* the card sets the height; the message box grows so the form ends level with it */
  .contact-grid { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
  .about-card img { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .contact-main { display: flex; flex-direction: column; }
  .contact-main form { flex: 1; }
  .contact-main form .field:has(textarea) { flex: 1; display: flex; flex-direction: column; }
  .contact-main form textarea { flex: 1; min-height: 160px; resize: none; }
}
@media (min-width: 861px) { .about-card { margin-bottom: 0; } }
@media print { .epk-portrait { aspect-ratio: 4 / 5 !important; height: auto !important; } .epk-contact > div { font-size: 9.5pt; } }
@media print {
  body::before, body::after, html::before, html::after, .grain { display: none !important; }
  main, .epk, .wrap { background: none !important; }
  .epk-head { align-items: start; }
  .epk-contact { grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr; }
  .epk-contact > div { overflow-wrap: normal; }
}

/* ---------- EPK music showcase ---------- */
.epk-feature { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 48px; }
.epk-feature-art { display: block; aspect-ratio: 1; overflow: hidden; background: var(--panel); }
.epk-feature-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.epk-feature-text .eyebrow { font-size: 11px; }
.epk-feature-text h3 { font-size: clamp(40px, 5vw, 64px); margin: 12px 0 8px; font-weight: 400; color: var(--cream); }
.epk-feature-text h3.is-album { font-weight: 500; }
.epk-feature-date { margin: 0 0 20px; color: var(--haze); font-size: 15px; }
.epk-feature .nbtn.small { margin-top: 0; }
.epk-also { margin-top: 28px; }
.epk-also .pp-label, .epk-sub { margin: 0 0 12px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--haze); }
.epk-also-row { display: flex; gap: 16px; flex-wrap: wrap; }
.epk-also-row a { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; font-size: 14px; }
.epk-also-row img { width: 48px; height: 48px; object-fit: cover; display: block; }
@media (max-width: 820px) {
  .epk-feature { grid-template-columns: 1fr; gap: 24px; }
  .epk-feature-art { max-width: 340px; }
  .epk-rel { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) { .epk-rel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media print {
  .epk-feature { grid-template-columns: 180px 1fr; gap: 24px; margin-bottom: 20px; break-inside: avoid; }
  .epk-feature .nbtn { display: none; }
  .epk-feature-text h3 { font-size: 40px; }
  .epk-rel { grid-template-columns: repeat(5, 1fr) !important; gap: 10px; }
  .epk-rel .card .title { font-size: 9pt; }
}

/* Face centered in the bio photo (face sits at ~41% across the original) */
.epk-portrait { object-position: 31% 30%; }
.about-card img { object-position: 0% 30%; }
@media (min-width: 861px) { .about-card img { aspect-ratio: 5 / 4; } }
@media (max-width: 820px) { .epk-portrait { object-position: 0% 30%; } }
@media print { .epk-portrait { object-position: 31% 30% !important; } }
@media print {
  .epk-feature { grid-template-columns: 130px 1fr; margin-bottom: 14px; }
  .epk-feature-text h3 { font-size: 32px; margin: 6px 0 4px; }
  .epk-photos a { aspect-ratio: 16 / 9; }
  .epk-sec { margin-top: 22px; }
  .epk-rel .card { gap: 6px; }
}
/* Same portrait crop on the Press Kit and the Contact card, head a touch left of where it was */
.epk-portrait { object-position: 40% 30%; }
@media print { .epk-portrait { object-position: 40% 30% !important; } }
@media (min-width: 861px) { .about-card img { aspect-ratio: 4 / 5; object-position: 40% 30%; } }
/* Contact card keeps its own (wider) shape, cropped in so the face sits where it does on the Press Kit portrait */
@media (min-width: 861px) { .about-card img { aspect-ratio: 5 / 4; object-position: 32% 30%; } }
@media (min-width: 861px) { .about-card img { object-position: 12% 30%; } }

/* Cart: shipping destination */
.ship-to { margin: 0 0 16px; }
.ship-label { margin: 0 0 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--haze); }
.ship-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px; }
.ship-row select[hidden] + input { grid-column: span 2; }
.ship-row select, .ship-row input { width: 100%; height: 40px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--cream); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 0; color-scheme: dark; }
.ship-row select:focus, .ship-row input:focus { outline: none; border-color: var(--neon); }
.ship-row [hidden] { display: none; }
.ship-line { color: var(--text-soft); font-size: 14px; }

/* Product page: extra photos */
.pp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; margin-top: 10px; }
.pp-thumbs button { padding: 0; border: 1px solid transparent; background: rgba(236, 232, 229, .5); cursor: pointer; }
.pp-thumbs button[aria-pressed="true"] { border-color: var(--neon); }
.pp-thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Store pages: violet glow rising from the bottom of the window */
html:has(.store-header) body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 55vh; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 75% 100% at 50% 100%, rgba(138,91,255,.16), rgba(138,91,255,.05) 45%, rgba(138,91,255,0) 75%); }
.store-empty { min-height: 52vh; display: grid; place-items: center; margin: 0; text-align: center; color: var(--haze); font-size: 16px; }
[data-home-store][hidden] { display: none; }
.filters[hidden] { display: none; }
/* Homepage store row while there are no products */
.merch-placeholder .media { display: grid; place-items: center; }
.merch-placeholder .ph-mark { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); color: rgba(7, 4, 10, .28); letter-spacing: .02em; }
.merch-placeholder .meta { color: var(--haze); }
/* Hero: a touch more room between the title, the date line and the button */
.hero-single .eyebrow { margin-top: 26px; }
.hero-single .nbtn { margin-top: 34px; }
.hero:not(.hero-single) .eyebrow { margin-top: 32px; }
.hero:not(.hero-single) .nbtn { margin-top: 40px; }
@media (max-width: 820px) {
  .hero-single .eyebrow { margin-top: 18px; }
  .hero-single .nbtn { margin-top: 26px; }
}
/* Privacy / Terms: name above the title, and room under it */
.legal .page-title { padding-bottom: 44px; }
.legal .legal-owner { margin: 0 0 14px; }
@media (max-width: 600px) { .legal .page-title { padding-bottom: 32px; } }