@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/spacegrotesk.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/spacemono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/spacemono-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --red: #d81f33; --sans: 'Space Grotesk', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #0d0c0b; }
img { -webkit-user-drag: none; user-select: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── shared page shell (dark + film grain) ── */
.page { position: relative; max-width: 1180px; margin: 0 auto; min-height: 100vh; background: #0d0c0b; color: #d9d4c8; font-family: var(--mono); }
.page::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.page > * { position: relative; z-index: 1; }

/* ── modern cross-document view transitions (progressive enhancement) ── */
@view-transition { navigation: auto; }
.vC-mast { view-transition-name: site-header; }   /* stays locked across navigations */
.vR-cover { view-transition-name: album-cover; }  /* morphs sleeve→sleeve on prev/next */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.001ms !important; }
}

/* ── masthead (shared) ── */
.vC-mast { display: flex; align-items: flex-end; gap: 30px; padding: 70px 60px 0; }
.vC-logo { width: 220px; height: auto; aspect-ratio: 859 / 410; display: block; }
.vC-logo-link { display: block; }
.vC-head-meta { padding-bottom: 8px; }
.vC-title { font-family: var(--sans); font-size: 30px; font-weight: 700; letter-spacing: 7px; color: #f0ebe0; margin: 0; text-decoration: none; }
a.vC-title:hover { color: var(--red); }
.vC-sub { font-size: 12.5px; color: #7c7468; letter-spacing: 1px; margin-top: 6px; }

/* ── intro blurb ── */
.vC-blurb { padding: 32px 60px 16px; margin: 0; font-size: 13.5px; color: #8f8676; letter-spacing: 0.3px; }

/* ── ledger table (home) ── */
.vC-table { padding: 0 60px 28px; }
.vC-thead { display: grid; grid-template-columns: 132px 1fr 232px 54px; gap: 20px; padding: 11px 16px; font-size: 11px; letter-spacing: 2px; color: #6f675b; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); }
.vC-trow { display: grid; grid-template-columns: 132px 1fr 232px 54px; gap: 20px; padding: 13px 16px; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; transition: background 0.12s; text-decoration: none; color: inherit; cursor: pointer; }
.vC-trow::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 0; background: var(--red); transition: width 0.15s; }
.vC-trow:hover { background: rgba(255,255,255,0.03); }
.vC-trow:hover::before { width: 3px; }
.vC-cat { font-size: 12.5px; color: #b7b0a3; letter-spacing: 0.5px; }
.vC-ttl { font-family: var(--sans); font-size: 16px; color: #e8e3d8; letter-spacing: -0.2px; }
.vC-ttl b { font-weight: 600; }
.vC-ttl i { color: var(--red); font-style: normal; padding: 0 2px; }
.vC-trow:hover .vC-ttl { color: #fff; }
.vC-fmt { font-size: 11.5px; color: #8f8676; }
.vC-yr { font-size: 13px; color: var(--red); text-align: right; }
.vC-ty { text-align: right; }

/* ── footer (shared) ── */
.vC-foot { display: flex; align-items: center; gap: 16px; padding: 24px 60px 56px; font-size: 12px; color: #7c7468; letter-spacing: 1px; }
.vC-foot-mark { color: var(--red); font-size: 10px; }
.vC-foot a { color: #8f8676; text-decoration: none; margin-left: auto; }
.vC-foot a:hover { color: var(--red); }

/* ── cover object (shared: home placeholders + release pages) ── */
.cf-cover { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; background: #0a0908; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; }
.cf-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"); }
.cf-cover-top { display: flex; justify-content: space-between; align-items: center; }
.cf-cover-mark { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: #5a5349; }
.cf-cover.k-comp .cf-cover-mark { color: var(--red); }
.cf-cover-dot { font-size: 9px; color: var(--red); }
.cf-cover-mid { flex: 1; display: flex; align-items: center; }
.cf-cover-cat { font-family: var(--mono); font-size: 29px; font-weight: 700; color: #ddd6c9; letter-spacing: -0.5px; line-height: 1; }
.cf-cover-fmt { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #7c7468; }
.cf-cover-art { padding: 0; }
.cf-cover-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── release page (desktop two-column) ── */
.m-top { display: none; }                   /* mobile top utility bar (shared) */
.vR { display: grid; grid-template-columns: 340px 1fr; gap: 48px; padding: 40px 60px 8px; align-items: start; }
.vR-cover { position: relative; }
.vR-cat { font-size: 12px; color: #7c7468; letter-spacing: 2px; }
.vR-title { font-family: var(--sans); font-weight: 700; font-size: 34px; line-height: 1.12; letter-spacing: -0.5px; color: #f0ebe0; margin: 10px 0 0; }
.vR-title i { color: var(--red); font-style: normal; padding: 0 4px; }
.vR-tags { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.vR-tags-fmt { font-size: 12.5px; letter-spacing: 0.5px; color: #b7b0a3; }
.vR-tags-gen { font-size: 12px; letter-spacing: 0.4px; color: #7c7468; line-height: 1.5; }
.vR-tracks { list-style: none; margin: 30px 0 0; padding: 0; }
.vR-tracks-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: #6f675b; padding: 11px 16px; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); }
.vR-track { display: grid; grid-template-columns: 34px 1fr auto; gap: 16px; align-items: baseline; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; }
.vR-track::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 0; background: var(--red); transition: width 0.14s; }
.vR-track:hover::before { width: 3px; }
.vR-tnum { font-size: 11.5px; color: #6f675b; }
.vR-ttitle { font-family: var(--sans); font-size: 15px; color: #e3ded2; }
.vR-ttitle b { font-weight: 600; color: #fff; }
.vR-ttitle .dash { color: var(--red); padding: 0 5px; }
.vR-tdur { font-size: 11.5px; color: #7c7468; }
.vR-links { margin-top: 24px; font-size: 12.5px; }
.vR-links a { color: var(--red); text-decoration: none; letter-spacing: 1px; }
.vR-links a:hover { text-decoration: underline; }
.vR-nav { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 60px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.vR-nav-cell { display: flex; flex-direction: column; gap: 6px; padding: 18px 4px; text-decoration: none; color: #8f8676; }
.vR-nav-next { align-items: flex-end; text-align: right; border-left: 1px solid rgba(255,255,255,0.12); }
.vR-nav-lbl { font-size: 10px; letter-spacing: 2px; color: #5a5349; }
.vR-nav-cat { font-family: var(--sans); font-size: 16px; color: #e8e3d8; }
.vR-nav-cell:hover .vR-nav-cat { color: var(--red); }

/* ── responsive ── */
@media (min-width: 781px) and (max-width: 1040px) { }
@media (max-width: 780px) {
  /* shared mobile top utility bar (same on homepage + release → no shift on nav) */
  .m-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; color: #7c7468; }
  .m-top a { color: #7c7468; text-decoration: none; }
  .m-top a:active { color: var(--red); }
  .m-top .dot { color: var(--red); font-size: 9px; }
  .m-top .rel-pos b { color: #b7b0a3; font-weight: 700; }

  /* shared mobile masthead — IDENTICAL on homepage + release so the brand block
     (logo + DISCOGRAPHY + place) stays put when navigating between them */
  .vC-mast { display: block; padding: 0 22px 22px; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .vC-logo { width: 138px; }
  .vC-head-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; padding-bottom: 0; }
  .vC-title { font-size: 15px; letter-spacing: 5px; }
  .vC-sub { font-size: 10.5px; letter-spacing: 1px; color: #6f675b; margin-top: 0; }
  .sub-full { display: none; }              /* desktop-only sub text → mobile shows just "Thessaloniki" */

  /* homepage ledger */
  .vC-blurb { padding: 22px 22px 12px; }
  .vC-table { padding: 0 22px 24px; }
  .vC-thead { display: none; }
  .vC-trow { grid-template-columns: 1fr auto; grid-template-areas: "cat yr" "ttl ttl" "fmt fmt"; gap: 3px 14px; padding: 14px 4px; }
  .vC-trow::before { left: -22px; }          /* bleed the tap accent to the screen edge, clear of the text */
  .vC-cat { grid-area: cat; } .vC-yr { grid-area: yr; } .vC-ttl { grid-area: ttl; font-size: 15px; } .vC-fmt { grid-area: fmt; }
  .vC-foot { flex-wrap: wrap; padding: 24px 22px 48px; }
  .vC-foot a { margin-left: 0; flex-basis: 100%; }

  /* release page → mobile album layout (matches Album - Mobile design) */
  .rel .vR { display: block; padding: 0; }
  .rel .vR-cover { max-width: none; padding: 22px 22px 0; }
  .rel .vR-info { padding: 0 22px; }
  .rel .vR-cat { padding-top: 24px; }
  .rel .vR-title { font-size: 33px; line-height: 1.05; letter-spacing: -0.6px; margin-top: 12px; }
  .rel .vR-title i { padding: 0 0.12em; }
  .rel .vR-tracks { margin-top: 26px; }
  .rel .vR-tracks-h { padding: 11px 2px; }   /* mobile: align header with rows (bar bleeds to edge) */
  .rel .vR-track { grid-template-columns: 26px 1fr auto; padding: 14px 2px; }
  .rel .vR-track::before { left: -22px; }
  .rel .vR-track:hover::before { width: 0; }
  .rel .vR-track:active::before { width: 3px; }
  .rel .vR-tnum { font-size: 12px; }
  .rel .vR-ttitle { font-size: 17px; }
  .rel .vR-tdur { font-size: 12px; }
  .rel .vR-links { padding: 26px 0 6px; margin-top: 0; }
  .rel .vR-links a { display: block; font-size: 13px; }
  .rel .vR-nav { margin: 18px 0 0; }
  .rel .vR-nav-cell { padding: 18px 22px; }
}