/*
Theme Name: E63 Recordings
Theme URI: https://e63recordings.com
Author: E63 Recordings
Description: Custom editorial one-page theme for E63 Recordings — exact layout port of the original build. Pure CSS, no page builder, no third-party trackers.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: e63-recordings
*/

:root {
  --ink: #0a0a0a;
  --paper: #f1f0ea;
  --acid: #dfff00;
  --line: rgba(10, 10, 10, 0.22);
  --line-inverse: rgba(255, 255, 255, 0.22);
  --pad: clamp(18px, 2.2vw, 38px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.25;
  text-rendering: geometricPrecision;
}
html.modalOpen, html.modalOpen body { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--acid); color: var(--ink); }

.admin-bar .siteHeader { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .siteHeader { top: 46px; }
}

.siteHeader {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px var(--pad);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.siteHeader > * { pointer-events: auto; }
.brandLink { justify-self: start; }
.headerCenter { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.headerMeta { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.langSwitch {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.menuButton {
  justify-self: end;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .04em;
}
.logo { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; white-space: nowrap; }
.logoMark {
  /* Pre-cropped/recolored white PNG (see assets/images/e63-logo-white.png)
     instead of CSS-masking the raw source SVG: that SVG wraps an
     embedded raster in a <pattern>, which several browsers refuse to
     read as a mask source (renders as a solid unmasked box instead). */
  display: inline-block;
  height: 40px;
  width: 52.7px;
  background-image: var(--e63-logo-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.logoWord { font-size: 11px; letter-spacing: .06em; }

.siteMenu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--acid);
  transform: translateY(-105%);
  transition: transform .65s cubic-bezier(.76, 0, .24, 1);
}
.siteMenu--open { transform: translateY(0); }
.siteMenuInner { min-height: 100%; padding: 100px var(--pad) 28px; display: flex; flex-direction: column; }
.menuLinks { margin-top: auto; margin-bottom: auto; border-top: 1px solid var(--ink); }
.menuLinks a {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding: 8px 0 10px;
  font-size: clamp(42px, 7.5vw, 108px);
  text-transform: uppercase;
  letter-spacing: -.065em;
  line-height: .9;
}
.menuLinks a span { font-size: 11px; letter-spacing: 0; }
.menuLinks a:hover { padding-left: 12px; }
.menuFoot { display: flex; gap: 22px; font-size: 12px; text-transform: uppercase; }

section { position: relative; }
.sectionDark { background: var(--ink); color: #f7f7f2; }
.sectionLight { background: var(--paper); color: var(--ink); }
.sectionAcid { background: var(--acid); color: var(--ink); }
.sectionIndex { position: absolute; top: 22px; left: var(--pad); font-size: 12px; letter-spacing: .08em; }
.eyebrow { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }

.hero {
  min-height: 100svh;
  padding: 90px var(--pad) 56px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  right: -14vw;
  top: 4vh;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(223,255,0,.92), transparent 21%),
    radial-gradient(circle at 60% 55%, rgba(255,255,255,.18), transparent 30%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 12px, rgba(223,255,0,.12) 13px 14px),
    #111;
  filter: blur(.2px);
  animation: pulse 10s ease-in-out infinite alternate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.06) 3px 4px);
  mix-blend-mode: screen;
}
@keyframes pulse { to { transform: scale(1.08) rotate(8deg); } }
.heroMeta { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; font-size: 10px; text-transform: uppercase; }
.heroMeta span:last-child { text-align: right; }
.heroTitleWrap {
  position: relative;
  z-index: 1;
  margin: auto 0;
  margin-left: clamp(-12px, -.65vw, -6px);
}
.heroLine {
  text-transform: uppercase;
  font-weight: 900;
}
.heroLine--e63 {
  font-size: clamp(140px, 31vw, 520px);
  line-height: .78;
  letter-spacing: -.058em;
  margin-left: -0.04em;
}
.heroLine--recordings {
  margin-top: clamp(14px, 1.15vw, 24px);
  font-size: clamp(56px, 13.6vw, 220px);
  line-height: .80;
  letter-spacing: -.052em;
  white-space: nowrap;
}
.heroBottom { position: relative; z-index: 1; margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.heroBottom p { margin: 0; font-size: clamp(18px, 2vw, 30px); letter-spacing: -.03em; }
.circleLink { width: 58px; height: 58px; flex-shrink: 0; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 22px; transition: .25s; }
.circleLink:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); transform: translateY(4px); }
.arrowIcon { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; display: inline-block; }

.coverArt {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  background: #171717;
  color: #fff;
}
.coverGrid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 7.5% 7.5%; mix-blend-mode: overlay; }
.coverArt--a { background: linear-gradient(135deg, #111 5%, #353535 47%, #090909 48%); }
.coverArt--a::before { content:""; position:absolute; width:80%; height:18%; background:var(--acid); left:-10%; top:40%; transform:rotate(-17deg); filter: blur(1px); }
.coverArt--b { background: radial-gradient(circle at 50% 50%, #dfff00 0 8%, #1a1a1a 8.2% 14%, #dfff00 14.2% 14.8%, #111 15% 100%); }
.coverArt--c { background: linear-gradient(160deg, #eee 0 32%, #8e8e8e 32% 35%, #0b0b0b 35% 67%, #dfff00 67% 100%); color:#0a0a0a; }
.coverHalo { position:absolute; border-radius:50%; border:1px solid currentColor; opacity:.8; }
.coverHalo--one { width:72%; aspect-ratio:1; top:14%; left:14%; }
.coverHalo--two { width:44%; aspect-ratio:1; top:28%; left:28%; border-style:dashed; animation:spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.artistPhoto { position: relative; aspect-ratio: 1; overflow: hidden; isolation: isolate; background: #171717; color: #fff; }
.artistPhoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.artistPhoto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.7) 100%); }

.coverCode, .coverTitle, .coverStamp { position:absolute; z-index:2; text-transform:uppercase; font-size:11px; letter-spacing:.07em; }
.coverCode { top:18px; left:18px; }
.coverTitle { left:18px; bottom:18px; font-size:clamp(28px,4vw,64px); font-weight:800; letter-spacing:-.06em; line-height:.86; max-width:70%; }
.coverStamp { right:18px; bottom:18px; writing-mode:vertical-rl; }

.about { min-height: 95vh; padding: 110px var(--pad) 0; overflow: hidden; }
.aboutGrid { display:grid; grid-template-columns:.4fr 1fr; gap:40px; }
.aboutCopy { max-width: 1120px; }
.aboutCopy p { max-width: 720px; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: -.035em; }
.aboutCopy .largeStatement { max-width:none; margin:0 0 70px; font-size: clamp(54px, 8.5vw, 132px); line-height:.88; letter-spacing:-.065em; }
.aboutTicker { margin: 120px calc(var(--pad) * -1) 0; border-top: 1px solid var(--ink); white-space: nowrap; display:flex; width:max-content; animation: marquee 28s linear infinite; font-size: clamp(56px, 9vw, 135px); line-height:.9; text-transform:uppercase; letter-spacing:-.06em; }
.aboutTicker span { padding-right:.35em; }
@keyframes marquee { to { transform: translateX(-50%); } }

.sound { padding: 110px var(--pad) 140px; }
.sectionHead { display: grid; grid-template-columns: minmax(180px, .38fr) 1fr; gap: 20px; align-items: start; margin-bottom: 60px; }
.sectionHead h2 { margin: -.08em 0 0; font-size: clamp(72px, 13vw, 190px); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.sectionHead--inverse { margin-bottom: 90px; }
.sectionHead--inverse h2 { color: #fff; }
.soundGrid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,90px); }
.soundCard--offset { margin-top: 180px; }
.soundCardText { display:grid; grid-template-columns:50px 1fr; gap:0 20px; border-top:1px solid var(--line-inverse); padding-top:10px; margin-top:14px; }
.soundCardText span { font-size:11px; }
.soundCardText h3 { margin:0; font-size:clamp(38px,5vw,76px); line-height:.9; letter-spacing:-.055em; }
.soundCardText p { grid-column:2; max-width:560px; font-size:18px; color:#bfbfb8; }
.artistLink { grid-column:2; width:max-content; margin-top:14px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:inherit; text-decoration:none; border-bottom:1px solid var(--line-inverse); padding-bottom:2px; transition:opacity .2s; }
.artistLink:hover { opacity:.65; }

.demos { padding: 110px var(--pad) 150px; }
.demoGrid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,7vw,120px); }
.demoGrid h2 { margin:30px 0 0; font-size:clamp(72px,11vw,170px); line-height:.82; letter-spacing:-.07em; text-transform:uppercase; }
.demoCopy { padding-top: 38px; }
.demoCopy > p { margin-top:0; max-width:690px; font-size:clamp(24px,3vw,46px); letter-spacing:-.04em; }
.demoCopy__secondary { max-width:560px; font-size:clamp(16px,1.6vw,20px) !important; letter-spacing:-.01em !important; color:rgba(10,10,10,.68); margin:30px 0 70px !important; }
.bigButton { display:inline-flex; align-items:center; justify-content:space-between; width:100%; min-height:86px; padding:0 20px; border:1px solid var(--ink); text-transform:uppercase; font-size:20px; transition:.25s; }
.bigButton:hover { background:var(--ink); color:#fff; }

.contact { padding: 110px 0 40px; overflow:hidden; }
.contact .sectionIndex, .contact > .eyebrow { margin-left:var(--pad); }
.contactMarquee { display:block; width:100%; margin:90px 0 120px; line-height:.72; letter-spacing: -.058em; font-weight:900; text-transform:uppercase; transition: color .25s; }
.contactMarquee:hover { color:var(--acid); }
.contactMarquee .fitText { display:inline-block; white-space:nowrap; font-size:clamp(28px,9vw,160px); }
.contactFoot { padding:0 var(--pad); display:grid; grid-template-columns:1fr auto; gap:20px; align-items:end; border-top:1px solid var(--line-inverse); padding-top:12px; }
.contactFoot > a { font-size:clamp(24px,4vw,60px); letter-spacing:-.05em; }
.socialLinks { display:flex; gap:18px; font-size:11px; text-transform:uppercase; }

.footer { background:var(--ink); color:#fff; padding:16px var(--pad) 22px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid var(--line-inverse); font-size:11px; text-transform:uppercase; }
.footer > span:nth-child(2) { text-align:center; }
.footerLegal { justify-self:end; display:flex; gap:14px; }
.footerLegal button { border:0; background:transparent; padding:0; cursor:pointer; text-transform:uppercase; font-size:11px; }
.footerLegal button:hover { color:var(--acid); }

.legalBackdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55); display:flex; justify-content:flex-end; }
.legalBackdrop[hidden] { display:none; }
.legalPanel { width:min(760px,100%); height:100%; overflow:auto; background:var(--paper); color:var(--ink); padding:80px clamp(22px,5vw,70px); position:relative; box-shadow:-20px 0 60px rgba(0,0,0,.25); }
.legalClose { position:absolute; top:20px; right:22px; width:42px; height:42px; border:1px solid var(--ink); border-radius:50%; background:transparent; cursor:pointer; font-size:24px; }
.legalContent h2 { margin:18px 0 50px; font-size:clamp(34px,6vw,56px); line-height:.98; letter-spacing:-.03em; text-transform:uppercase; overflow-wrap:break-word; }
.legalContent h3 { margin:45px 0 10px; font-size:24px; }
.legalContent p { font-size:17px; line-height:1.55; max-width:610px; }
.legalContent a { border-bottom:1px solid currentColor; }

@media (max-width: 820px) {
  .siteHeader { grid-template-columns:auto 1fr auto; }
  .headerMeta { display:none; }
  .hero { min-height: 100svh; }
  .hero::before { width:110vw; right:-55vw; top:18vh; }
  .heroTitleWrap { margin-left:-4px; }
  .heroLine--e63 { font-size:clamp(132px,44vw,300px); line-height:.8; letter-spacing:-.052em; }
  .heroLine--recordings { margin-top:10px; font-size:clamp(38px,13vw,90px); line-height:.84; letter-spacing:-.045em; }
  .heroBottom { align-items:flex-end; }
  .sectionHead, .aboutGrid, .soundGrid, .demoGrid { grid-template-columns:1fr; }
  .sectionHead { gap:35px; }
  .sectionHead h2, .demoGrid h2 { font-size:clamp(42px,10vw,120px); }
  .contactMarquee { margin:60px 0 70px; }
  .aboutCopy .largeStatement { margin-top:35px; }
  .soundCard--offset { margin-top:60px; }
  .demoCopy { padding-top:0; }
  .contactFoot { grid-template-columns:1fr; }
  .socialLinks { margin-top:20px; flex-wrap:wrap; }
  .footer { grid-template-columns:1fr auto; gap:16px; }
  .footer > span:nth-child(2) { display:none; }
  .menuLinks a { grid-template-columns:44px 1fr; font-size:clamp(50px,15vw,95px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* --------------------------------------------------------------------------
   Pinned release carousel (scroll-driven covers + vinyl reveal)
   -------------------------------------------------------------------------- */
.albums {
  --album-count: 3;
  height: calc(var(--album-count) * 122svh);
  background: var(--ink);
  color: #f5f4ef;
}

.albums__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #080808;
}

.albums__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), transparent 26%, transparent 70%, rgba(0,0,0,.34)),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px);
}

.albums__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1900px;
}

.albums__item {
  position: absolute;
  width: min(36vw, 460px);
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.albums__vinyl {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.35), transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.4) 2px 4px);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  will-change: transform, opacity;
  display: flex;
  align-items: center;
  justify-content: center;
}

.albums__vinylLabel {
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vinyl-accent, #dfff00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: var(--vinyl-label-fg, #090909);
  padding: 6px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.4);
}

.albums__vinylLabel::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #050505;
}

.albums__sleeve {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  background-color: #111;
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}

.albums__topline {
  position: absolute;
  z-index: 3;
  top: clamp(74px, 8vh, 105px);
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.albums__title {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  bottom: clamp(76px, 10vh, 132px);
  width: min(86vw, 1450px);
  margin: 0;
  font-size: clamp(66px, 10.8vw, 196px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.068em;
  text-transform: uppercase;
  text-wrap: balance;
}

.albums__title span {
  display: block;
  margin-bottom: .18em;
  font-size: .105em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .09em;
}

@keyframes albumTitleIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.albums__meta {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  right: var(--pad);
  bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.albums__num {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(28px, 3.1vw, 54px);
  line-height: 1;
  letter-spacing: -.055em;
}

.albums__num-dash {
  margin-right: .06em;
  font-weight: 300;
}

.albums__link {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.albums__scroll {
  position: absolute;
  z-index: 3;
  right: var(--pad);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%) rotate(90deg) translateX(50%);
  transform-origin: right center;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.albums__scroll i {
  display: block;
  width: 56px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.4);
}

.albums__scroll i::after {
  content: "";
  display: block;
  width: 60%;
  height: 100%;
  background: currentColor;
  animation: albumScrollLine 1.8s ease-in-out infinite;
}

@keyframes albumScrollLine {
  0% { transform: translateX(-110%); }
  55%, 100% { transform: translateX(180%); }
}

@media (max-width: 820px) {
  .albums { height: calc(var(--album-count) * 112svh); }
  .albums__topline { top: 76px; }
  .albums__title {
    bottom: 104px;
    width: calc(100% - (var(--pad) * 2));
    font-size: clamp(54px, 17vw, 116px);
    line-height: .84;
    letter-spacing: -.062em;
  }
  .albums__title span { font-size: 12px; margin-bottom: 12px; }
  .albums__num { font-size: 30px; }
  .albums__scroll { display: none; }
}