/* V2: a personal corner of the early web, with readable content and native controls. */
body.site-v2 { --display: Audiowide, Arial, sans-serif; --pixel: Silkscreen, 'Courier New', monospace; --mono: 'Courier New', Courier, monospace; --paper: #090530; --ink: #f3f1ff; --muted: #c7c5e6; --line: #7773a4; --soft: #262055; --focus: #ff38c6; --gutter: clamp(18px, 4vw, 54px); background: url('/assets/images/pixel-stars.svg') repeat, #100962; color: #f3f1ff; }
.site-v2 .site-header { min-height: 64px; padding: 8px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); border: 3px outset #e5e7f6; background: #cbd0e5; box-shadow: 0 3px #050326; color: #13113c; gap: 8px 18px; }
.site-v2 .wordmark { gap: 12px; font-size: 22px; font-weight: 400; text-shadow: 1px 1px #fff; letter-spacing: -.02em; }
.wordmark-symbol { display: grid; place-items: center; width: 31px; height: 31px; border: 2px outset #cacbff; background: #2815c3; color: #edff3c; font: 29px/1 Georgia, serif; text-shadow: none; }
.site-v2 .site-header nav { gap: 8px; }
.site-v2 .site-header nav a { min-height: 40px; padding: 7px 16px; border: 2px outset #f2f2ff; background: #dce0ee; color: #14113b; font: bold 11px/1.4 var(--mono); }
.site-v2 .site-header nav a[aria-current] { background: #eaff55; border-style: inset; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-v2 .site-header nav a::after { display: none; }
.site-v2 .site-footer { border-top: 2px solid #7267b3; background: #09052e; color: #bfbbe6; font-family: var(--mono); font-size: 13px; }
.site-v2 .site-footer > a { color: #e6ff53; }
.site-v2 .site-footer nav { gap: 4px 20px; }
.site-v2 .site-footer a { font-weight: normal; }
.site-v2 .skip-link, .site-v2.page-artist .skip-link { background: #eaff3c; color: #11082e; border: 3px solid #10042f; }
.site-v2 :focus-visible, .site-v2 .size-guide summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #10072f; }
.terminal-label { font: bold 11px/1.5 var(--mono); letter-spacing: .08em; }
.window-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 9px; background: #252cba; color: #fff; font: bold 11px/1.4 var(--mono); border-bottom: 2px solid #08052f; }
.window-bar > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.window-glyphs { flex-shrink: 0; letter-spacing: 3px; color: #efefff; font-size: 14px; }
.pixel-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 11px 15px; border: 2px outset #f4f5ff; background: #bcbcf3; color: #17113c; box-shadow: 3px 3px #17113c; font: bold 12px/1.4 var(--mono); }
.pixel-button.acid { background: #dbff47; border-color: #f4ffc5; }
.pixel-button.pink { background: #ff9ce9; border-color: #ffd6f5; }
/* Artist and official-link windows share the continuous V2 star field. */
.site-v2 .artist-main { width: min(100% - 44px, 500px); margin-block: 36px 0; }
.site-v2 .artist-profile { position: relative; padding: 29px 20px 24px; border: 3px solid #a8a2f6; background: #121040e8; box-shadow: 6px 6px #05031c; margin-bottom: 24px; }
.site-v2 .artist-profile::before { content: '★ OKAY DYLAN / OFFICIAL ★'; display: block; padding-bottom: 20px; color: #e7ff69; font: 10px/1.4 var(--mono); letter-spacing: .07em; }
.site-v2 .artist-avatar { width: 100px; height: 100px; border-radius: 0; border: 3px outset #e2dfff; box-shadow: 4px 4px #09052b; transform: rotate(-4deg); }
.site-v2 .artist-profile h1 { color: #edff63; font-size: 50px; text-shadow: 2px 2px #ba3ed8; }
.site-v2 .artist-profile p { font: 12px/1.8 var(--mono); color: #d9d7f5; text-shadow: none; }
.site-v2 .release { position: relative; padding: 54px 22px 20px; border: 3px solid #ddd9ff; border-radius: 0; box-shadow: 6px 6px #060321; background: #d9dcf3; color: #17123b; }
.site-v2 .release::before { content: '♫ now_playing / scatterbrain'; position: absolute; top: 0; left: 0; right: 0; background: #6422bc; color: #fff; padding: 7px 10px; border-bottom: 2px solid #1a0a44; font: bold 10px/1.4 var(--mono); }
.site-v2 .release-heading img { border-radius: 0; box-shadow: 3px 3px #2a2057; }
.site-v2 .release-heading .eyebrow { font: 9px/1.4 var(--mono); color: #514971; }
.site-v2 .release-heading h2 { font: 400 22px/1.25 var(--display); color: #191040; letter-spacing: 0; }
.site-v2 .release-heading p { font: 10px/1.6 var(--mono); color: #514971; }
.site-v2 .listen-link { border-radius: 0; font: bold 12px/1.4 var(--mono); border: 2px outset #f5ffc6; box-shadow: 3px 3px #211848; color: #171338; background: #d8ff4b; }
/* Keep the white keyboard outline distinct from the pale release panel. */
.site-v2 .listen-link:focus-visible { box-shadow: 0 0 0 7px #10072f; }
.site-v2 .listen-alternatives a { font: 11px/1.4 var(--mono); color: #322356; }
.site-v2 .artist-links { gap: 14px; margin-top: 24px; }
.site-v2 .artist-link { background: #211455ed; color: #f9ecff; border: 2px outset #bba8ef; border-radius: 0; box-shadow: 4px 4px #080323; padding-block: 17px; }
.site-v2 .artist-link:nth-child(2n) { background: #252365ed; }
.site-v2 .artist-link strong { font: bold 13px/1.4 var(--mono); }
.site-v2 .artist-link small { font: 10px/1.6 var(--mono); color: #c4bbe6; }
.site-v2 .link-artwork { border-radius: 0; }
.site-v2 .artist-resources a, .site-v2 .social-link { font: 12px/1.4 var(--mono); color: #fff; background: #0f0a36e8; padding: 11px 18px; border: 1px solid #a28ad2; }
.site-v2 .social-link { display: flex; width: fit-content; margin: 18px auto 0; }
/* Shop data, seven product destinations, and sizing content remain the source of truth. */
.site-v2.page-shop { background: url('/assets/images/pixel-stars.svg') repeat, #180959; }
.site-v2 .shop-main { width: min(100% - 44px, 1120px); padding-top: 42px; }
.site-v2 .collection-heading .eyebrow { font: 11px/1.5 var(--mono); color: #bca9e8; }
.site-v2 .collection-heading h1 { color: #e7ff4b; font-size: clamp(1.5rem, 6vw, 4.4rem); font-weight: 400; line-height: 1.2; text-shadow: 3px 3px #fc48b8, 6px 6px #070320; transform: rotate(-2deg); }
.site-v2 .collection-heading > p { color: #e0d7ef; font: 12px/1.6 var(--mono); margin-top: 20px; }
.site-v2 .collection-navigation { margin-top: 28px; padding: 8px; background: #b8b4d9; border: 3px outset #e2dffa; gap: 8px; border-radius: 0; }
.site-v2 .collection-navigation a { border: 2px outset #f2f0ff; background: #dcd5f0; color: #28113f; border-radius: 0; padding: 10px 14px; font: bold 11px/1.4 var(--mono); }
.site-v2 .collection-intro { color: #cac2e5; font: 11px/1.6 var(--mono); }
.site-v2 .collection-stage { gap: 24px; }
.site-v2 .color-collection, .site-v2 .more-pieces { padding: 22px; border: 3px solid #e0dbfa; border-radius: 0; box-shadow: 6px 6px #07031f; background: #dedeea; color: #1e133b; }
.site-v2 .color-heading { margin: -22px -22px 22px; padding: 13px 18px; border-bottom: 2px solid #1e133b; background: #552597; color: #fff; }
.site-v2 .color-heading h2 { font: 400 26px/1.2 var(--display); }
.site-v2 .color-heading p { font: 10px/1.6 var(--mono); color: #eee7ff; margin-top: 6px; }
.site-v2 .product-visual { background: #f0f0f2; border: 2px inset #f5f3ff; border-radius: 0; }
.site-v2 .product-photo { background: #eeeef1; }
.site-v2 .product-info h3 { font-size: 14px; }
.site-v2 .product-info > span { font: bold 12px/1.5 var(--mono); }
.site-v2 .product-color, .site-v2 .product-detail, .site-v2 .product-sizing-note { color: #554d67; }
.site-v2 .product-size-link { color: #542477; }
.site-v2 .shop-link { width: 100%; justify-content: space-between; background: #deff6c; border: 2px outset #efffc1; color: #1d1535; padding: 12px 10px; margin-top: 10px; font: bold 10px/1.4 var(--mono); }
.site-v2 .image-switch { border-radius: 0; background: #e9e7f3; border: 1px solid #5f537a; }
.site-v2 .image-switch button { border-radius: 0; color: #2b1842; font-family: var(--mono); }
.site-v2 .image-switch button[aria-pressed='true'] { background: #462774; color: #fff; }
.site-v2 .shop-notes, .site-v2 .shop-size-guides { border: 2px solid #77708f; background: #17103f; color: #f0e8ff; }
.site-v2 .shop-notes p, .site-v2 .shop-size-guides > p, .site-v2 .size-guide-note { color: #cac1df; }
.site-v2 .size-guide { background: #e3e1ef; color: #211632; border: 2px outset #eeebff; padding: 16px; margin-top: 12px; }
.site-v2 .size-guide p, .site-v2 .size-guide caption, .site-v2 .size-guide a { color: #3b2d53; }
.site-v2 .size-guide td, .site-v2 .size-guide th { color: #2a2041; border-color: #b6adc9; }
/* Information stays readable inside a simple browser window. */
.site-v2 .info-main, .site-v2 .catalog-main, .site-v2 .radio-main { --paper: #e4e5f2; --ink: #211643; --muted: #514d6b; --line: #b6b0ce; --soft: #d3d3ed; position: relative; color: var(--ink); background: var(--paper); border: 3px solid #f0efff; box-shadow: 7px 7px #050321; margin-top: 44px; padding: 65px clamp(20px, 5vw, 48px) 38px; width: min(100% - 44px, 820px); }
.site-v2 .info-main::before, .site-v2 .catalog-main::before, .site-v2 .radio-main::before { content: 'okay universe / explore'; position: absolute; top: 0; left: 0; right: 0; padding: 7px 12px; color: #fff; background: linear-gradient(90deg, #3323bd, #8438b9); border-bottom: 2px solid #161043; font: bold 11px/1.4 var(--mono); }
.site-v2 .catalog-main::before { content: 'music_library / okay dylan'; }
.site-v2 .radio-main::before { content: 'okay_radio / press play'; }
.site-v2 .info-heading .eyebrow, .site-v2 .catalog-heading .eyebrow, .site-v2 .radio-heading .eyebrow, .site-v2 .info-policy header > p:first-child { font-family: var(--mono); color: #593a8a; font-size: 10px; }
.site-v2 .info-main h1, .site-v2 .catalog-main h1, .site-v2 .radio-main h1 { color: #291460; }
.site-v2 .info-main .info-note, .site-v2 .catalog-release .eyebrow, .site-v2 .radio-note { color: #514d6b; }
.site-v2 .info-actions a, .site-v2 .radio-actions a, .site-v2 .catalog-links a { color: #492275; font-family: var(--mono); font-size: 12px; }
.site-v2 .radio-tracks audio { color-scheme: light; }
.site-v2 .unsubscribe-confirm button { border-radius: 0; border: 2px outset #f4ffc2; background: #d6ff4b; color: #221538; }
@media (hover: hover) { .site-v2 .site-header nav a:hover, .pixel-button:hover { background: #eaff55; color: #14113b; } .site-v2 .artist-link:hover { border-color: #fda2e6; background: #493084; } .site-v2 .listen-primary:hover { background: #edffa8; color: #16112c; } .site-v2 .collection-navigation a:hover { background: #eaff72; } .site-v2 .shop-link:hover { background: #f0ffc4; color: #211535; } }
@media (max-width: 600px) {
  .site-v2 .site-header { padding: 7px 12px; gap: 8px; min-height: 64px; }
  .site-v2 .wordmark { font-size: 18px; gap: 8px; }
  .wordmark-symbol { width: 26px; height: 26px; font-size: 24px; }
  .site-v2 .site-header nav { gap: 5px; }
  .site-v2 .site-header nav a { min-height: 40px; padding: 7px 9px; font-size: 10px; }
  .site-v2 .artist-main { margin-top: 24px; }
  .site-v2 .artist-profile h1 { font-size: 44px; }
  .site-v2 .release { padding-inline: 16px; }
  .site-v2 .release-heading { gap: 15px; }
  .site-v2 .release-heading img { width: 88px; height: 88px; }
  .site-v2 .artist-link { padding-inline: 15px; }
  .site-v2 .color-collection, .site-v2 .more-pieces { padding: 15px; }
  .site-v2 .color-heading { margin: -15px -15px 18px; }
  .site-v2 .info-main, .site-v2 .catalog-main, .site-v2 .radio-main { margin-top: 26px; padding-inline: 20px; width: calc(100% - 36px); }
  .site-v2 .collection-navigation { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .site-v2 .wordmark { font-size: 17px; }
  .site-v2 .site-header nav { margin-left: auto; }
  .site-v2 .artist-main { width: calc(100% - 32px); }
  .site-v2 .release-heading img { width: 72px; height: 72px; }
  .site-v2 .release-heading h2 { font-size: 20px; }
  .site-v2 .collection-heading h1 { font-size: 24px; }
}

/* Audiowide headlines; Silkscreen only for short bits of pixel UI. */
.site-v2 { font-synthesis: none; }
.site-v2 .terminal-label, .site-v2 .window-bar, .site-v2 .artist-profile::before,
.site-v2 .release::before, .site-v2 .info-main::before, .site-v2 .catalog-main::before,
.site-v2 .radio-main::before, .site-v2 .collection-heading .eyebrow { font-family: var(--pixel); font-weight: 400; line-height: 1.6; letter-spacing: .02em; }
.site-v2 .window-glyphs { font-family: var(--mono); }
.site-v2 .info-heading h1, .site-v2 .info-policy h1, .site-v2 .info-main > h1,
.site-v2 .catalog-heading h1, .site-v2 .radio-heading h1 { font-weight: 400; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.2; letter-spacing: -.025em; }
.site-v2 .artist-profile p, .site-v2 .collection-heading > p,
.site-v2 .collection-intro { font-family: var(--body); font-size: 14px; line-height: 1.7; }
.site-v2 .artist-link small, .site-v2 .release-heading p,
.site-v2 .color-heading p { font-family: var(--body); font-size: 12px; line-height: 1.6; }
.site-v2 .release-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.site-v2 .release-heading img { height: auto; aspect-ratio: 1; }
@media (max-width: 400px) {
  /* Reserve the loaded title's two lines while the display font arrives. */
  .site-v2 .artist-profile h1 { min-height: 2.2em; }
  .site-v2 .release-heading { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .site-v2 .release-heading img { margin-inline: auto; width: 104px; }
}

.site-v2 .faith-cross { display: inline-block; width: .85em; height: 1.1em; margin-left: .35em; vertical-align: -.12em; color: #e4b644; filter: drop-shadow(0 1px 0 #7b4f12); }

.streaming-options { display: grid; gap: 12px; }
.site-v2 .listen-apple { background: #ffb8ec; border-color: #ffe5f7; }
.site-v2 .listen-link > span { min-width: 0; }
.site-v2 .social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px auto 0; }
.site-v2 .social-links .social-link { width: 100%; margin: 0; padding: 11px 10px; gap: 6px; font-size: 11px; }
.site-v2 .social-link > span { min-width: 0; overflow-wrap: anywhere; }
.site-v2 .social-link > .icon:first-child { width: 18px; height: 18px; }
.site-v2 .social-link > .icon:last-child { width: 14px; height: 14px; }
@media (hover: hover) { .site-v2 .listen-apple:hover { background: #ffd5f4; } }

/* Separate the forthcoming edition from the already released streaming destinations. */
.site-v2 .release-deluxe::before { content: 'edition_preview / deluxe'; }
.site-v2 .release-deluxe h2 span { display: block; margin-top: 5px; font-size: .8em; }
.edition-preview-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px; margin: 20px 0; border: 2px outset #f6c7ef; background: #ffb8ec; color: #211535; font: bold 14px/1.6 var(--body); }
.original-release-note { font: 13px/1.8 var(--body); color: #51465f; margin: 0 0 12px; }