/* =========================================================
   E.S. AESTHETIC — styles.css 
   ========================================================= */

:root{
  /* ===== DARK THEME (default) ===== */
  --bg: #050507;
  --bg2:#0b0b12;

  --text: rgba(248,248,252,.92);
  --muted: rgba(248,248,252,.62);
  --muted2: rgba(248,248,252,.42);

  --line: rgba(255,255,255,.14);
  --line2: rgba(255,255,255,.22);

  --panel: rgba(255,255,255,.040);
  --panel2: rgba(255,255,255,.060);

  --accent: #ff1493;

  --font-display: "Anton", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --radius: 10px;
  --shadow: 0 18px 60px rgba(0,0,0,.60);

  /* Wordmark lock */
  --wm-gap: .26rem;
  --wm-track: .02em;
  --wm-stroke: 2px;
}

/* ================= RESET ================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; }
::selection{ background: rgba(255,20,147,.28); }

/* ================= GLOBAL TYPE ================= */
body{
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(900px 650px at 22% 12%, rgba(255,20,147,.08), transparent 62%),
    radial-gradient(900px 650px at 78% 30%, rgba(255,255,255,.04), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

p{ font-size: .95rem; letter-spacing: .05em; }
strong{ font-weight: 700; }

/* Ensure content sits above all background layers */
.hero, section, footer{ position:relative; z-index:2; }

/* ================= BACKGROUND LAYERS ================= */
.atmosphere,
.atmosphere::before,
.atmosphere::after,
.orb,
.grid-floor{
  pointer-events:none !important;
}

.atmosphere{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
}

.atmosphere::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(255,255,255,0.018) 3px,
    rgba(255,255,255,0.018) 5px
  );
  opacity:.65;
}

.atmosphere::after{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 140px);
  opacity:.05;
  transform: rotate(-9deg);
}

/* Orbs */
.orb{
  position:absolute;
  border-radius:50%;
  filter: blur(90px);
  opacity:.35;
  transform: translate3d(0,0,0);
  animation: drift 18s ease-in-out infinite;
}
.orb--1{
  width:520px; height:520px;
  background: radial-gradient(circle, rgba(255,20,147,.30), transparent 70%);
  top: 6%;
  left:-14%;
}
.orb--2{
  width:640px; height:640px;
  background: radial-gradient(circle, rgba(255,20,147,.18), transparent 70%);
  bottom: 8%;
  right:-18%;
  animation-delay:-8s;
}
.orb--3{
  width:420px; height:420px;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  top:55%;
  left:26%;
  animation-delay:-13s;
}
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(36px,-26px) scale(1.05); }
}

/* Grid floor */
.grid-floor{
  position:fixed;
  bottom:-2px;
  left:-50%;
  right:-50%;
  height:36vh;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.065) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.065) 1px, transparent 1px);
  background-size: 72px 44px;
  transform: perspective(560px) rotateX(62deg);
  transform-origin:center top;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 72%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 72%);
  opacity:.52;
  animation: gridScroll 26s linear infinite;
}
@keyframes gridScroll{
  0%{ background-position: 0 0; }
  100%{ background-position: 0 440px; }
}

/* ================= HERO ================= */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 2.5rem 1.5rem;
}

.hero-badge{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  padding: .55rem 1.1rem;
  margin-bottom: 1.6rem;
}

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Wordmark */
.es-wordmark{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap: var(--wm-gap);
  white-space:nowrap;
  width: min(1200px, 96vw);
  margin: 0 auto 1.2rem;
  color: var(--text); /* drives outline via currentColor */
}

.es-wordmark .es-outline,
.es-wordmark .es-solid{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 6.1rem);
  line-height: .90;
  letter-spacing: var(--wm-track);
  text-transform: uppercase;
}

/* E.S. OUTLINE — FIXED: uses currentColor so it works in light mode */
.es-wordmark .es-outline{
  color: transparent;
  -webkit-text-stroke: var(--wm-stroke) currentColor;
          text-stroke: var(--wm-stroke) currentColor;

  /* Helps dot/period readability without HTML changes */
  padding-inline: .06em;
}

/* AESTHETIC SOLID */
.es-wordmark .es-solid{
  color: currentColor;
  padding-inline: .02em;
}

.hero-genres{
  font-family: var(--font-mono);
  font-size:.86rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color: var(--muted2);
  margin-bottom: 2.6rem;
}
.hero-genres span{ color: rgba(255,20,147,.78); }

.hero-cta{
  display:flex;
  gap: 1.1rem;
  flex-wrap:wrap;
  justify-content:center;
}

.btn{
  font-family: var(--font-mono);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,20,147,.45);
  background: rgba(255,255,255,0.04);
}
.btn--primary{
  background: rgba(248,248,252,.92);
  color: rgba(10,10,14,.96);
  border-color: rgba(248,248,252,.70);
}
.btn--outline{
  background: rgba(255,255,255,0.02);
  color: var(--text);
}

.scroll-line{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform: translateX(-50%);
  width:1px;
  height:64px;
  background: linear-gradient(to bottom, rgba(248,248,252,.40), transparent);
  opacity:.7;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.8; height:64px; }
  50%{ opacity:.35; height:44px; }
}

/* ================= SECTIONS ================= */
section{
  padding: 6.25rem 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

.section-header{
  text-align:center;
  margin-bottom: 3.6rem;
}

.section-tag{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: rgba(255,20,147,.78);
  display:inline-block;
  margin-bottom:.75rem;
}

.section-title{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height:.95;
  color: var(--text);
}

/* ================= STEP AND REPEAT WORDMARK ================= */
.wordmark-section {
  padding: 0 0 3rem;
  margin-top: -6rem;
  overflow: hidden;
  position: relative;
  z-index: 5;
}

.step-repeat-container {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.step-repeat-track {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transform: rotate(-6deg);
  margin: -1.5rem 0;
}

.step-repeat-row {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: scrollLeft 28s linear infinite;
}

.step-repeat-row--offset {
  animation: scrollRight 32s linear infinite;
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.sr-word {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  flex-shrink: 0;
}

.sr-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text);
  text-stroke: 1.5px var(--text);
  opacity: 0.45;
}

.sr-solid {
  color: var(--text);
  opacity: 0.85;
}

/* Light mode adjustments for step-repeat */
@media (prefers-color-scheme: light) {
  .sr-outline {
    -webkit-text-stroke-color: rgba(10,10,14,0.85);
    opacity: 0.35;
  }
  .sr-solid {
    color: rgba(10,10,14,0.92);
    opacity: 0.75;
  }
}

@media (max-width: 600px) {
  .step-repeat-track {
    gap: 0.25rem;
  }
  .step-repeat-row {
    gap: 1.5rem;
  }
  .sr-word {
    font-size: 1.1rem;
  }
  .sr-outline {
    -webkit-text-stroke-width: 1px;
  }
}

/* Waveform */
.waveform{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:7px;
  height:120px;
  margin: 0 auto 4rem;
  max-width:900px;
}
.wave-bar{
  width:10px;
  border-radius:7px;
  background: rgba(248,248,252,.75);
  opacity:.55;
  animation: wave 1s ease-in-out infinite;
}
.wave-bar:nth-child(1){ height:20%; animation-delay:0s;}
.wave-bar:nth-child(2){ height:50%; animation-delay:.1s;}
.wave-bar:nth-child(3){ height:80%; animation-delay:.2s;}
.wave-bar:nth-child(4){ height:60%; animation-delay:.3s;}
.wave-bar:nth-child(5){ height:100%; animation-delay:.4s;}
.wave-bar:nth-child(6){ height:70%; animation-delay:.5s;}
.wave-bar:nth-child(7){ height:90%; animation-delay:.6s;}
.wave-bar:nth-child(8){ height:45%; animation-delay:.7s;}
.wave-bar:nth-child(9){ height:75%; animation-delay:.8s;}
.wave-bar:nth-child(10){ height:55%; animation-delay:.9s;}
.wave-bar:nth-child(11){ height:35%; animation-delay:1.0s;}
.wave-bar:nth-child(12){ height:25%; animation-delay:1.1s;}
@keyframes wave{
  0%,100%{ transform: scaleY(1); }
  50%{ transform: scaleY(.35); }
}

/* Genre blocks */
.genre-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.genre-block{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.4rem;
  text-align:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.genre-block:hover{
  transform: translateY(-4px);
  border-color: rgba(255,20,147,.40);
  background: var(--panel2);
}
.genre-icon{
  width:44px; height:44px;
  margin: 0 auto 1rem;
  color: rgba(248,248,252,.82);
  opacity:.9;
}
.genre-icon svg{ width:100%; height:100%; stroke: currentColor; stroke-width: 1.5; fill:none; }
.genre-name{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size: 1.25rem;
  line-height:.95;
  color: var(--text);
}

/* About */
.about-layout{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 3.2rem;
  align-items:center;
}
.about-visual{ width:210px; height:210px; position:relative; }
.vinyl-glow{
  position:absolute;
  inset:-30%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,20,147,.14), transparent 60%);
  opacity:.55;
  filter: blur(12px);
}
.vinyl{
  width:100%; height:100%;
  border-radius:50%;
  background: repeating-radial-gradient(
    circle at center,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(255,255,255,0.08) 3px,
    rgba(255,255,255,0.08) 4px
  );
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 35px rgba(0,0,0,0.75), var(--shadow);
  animation: spin 9s linear infinite;
  background-color: rgba(255,255,255,0.02);
  position:relative;
}
.vinyl::before{
  content:"";
  position:absolute;
  inset:34%;
  border-radius:50%;
  background: rgba(248,248,252,.92);
  opacity:.12;
}
.vinyl::after{
  content:"ES";
  position:absolute;
  inset:34%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-mono);
  font-weight:700;
  letter-spacing:.18em;
  color: rgba(248,248,252,.85);
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.about-text h3{
  font-family: var(--font-display);
  font-weight:400;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size: 1.9rem;
  line-height:1;
  margin-bottom:1.2rem;
  color: var(--text);
}
.about-text p{
  color: var(--muted);
  max-width: 66ch;
  margin-bottom:1rem;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.6rem;
}
.tag{
  font-family: var(--font-mono);

  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(248,248,252,.75);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  padding: .55rem .75rem;
  border-radius: 999px;
}

/* Services */
.services-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.service-item{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.service-item:hover{
  transform: translateY(-3px);
  border-color: rgba(255,20,147,.35);
  background: var(--panel2);
}
.service-item h4{
  font-family: var(--font-display);
  font-weight:400;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size: 1.35rem;
  line-height:.95;
  margin-bottom:.75rem;
  color: var(--text);
}
.service-item p{ color: var(--muted); font-size: .92rem; }

/* Expect grid */
.expect-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  text-align:center;
}
.expect-item{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 2.1rem 1.3rem;
}
.expect-num{
  font-family: var(--font-mono);
  font-weight:700;
  letter-spacing:.18em;
  color: var(--text);
  font-size: 2.2rem;
  margin-bottom:.75rem;
}
.expect-item h4{
  font-family: var(--font-display);
  font-weight:400;
  letter-spacing:.10em;
  font-size: 1.2rem;
  line-height:.95;
  margin-bottom:.5rem;
  color: var(--text);
}
.expect-item p{ color: var(--muted2); font-size: .86rem; }

/* Creator */
.creator-section{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 5.5rem;
}
.creator-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 2.6rem;
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 2.2rem;
  align-items:center;
}
.creator-visual{ width:120px; height:120px; }
.creator-icon{
  width:100%; height:100%;
  border-radius: var(--radius);
  border: 1px solid rgba(255,20,147,0.35);
  background: rgba(255,20,147,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.creator-icon svg{
  width:64px; height:64px;
  stroke: rgba(248,248,252,0.9);
  stroke-width:1.5;
  fill:none;
  opacity:.9;
}
.creator-content h3{
  font-family: var(--font-display);
  font-weight:400;
  letter-spacing:.10em;
  font-size: 1.55rem;
  line-height:.98;
  margin-bottom:.75rem;
  color: var(--text);
}
.creator-content p{
  color: var(--muted);
  margin-bottom: 1.2rem;
  max-width: 72ch;
}
.creator-link{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-family: var(--font-mono);
  font-size:.75rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  padding: .85rem 1.1rem;
  border-radius: 999px;
  text-decoration:none;
  margin-right: .65rem;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.creator-link:hover{
  transform: translateY(-2px);
  border-color: rgba(255,20,147,.45);
  background: rgba(255,255,255,0.04);
}
.creator-link svg{
  width:16px; height:16px;
  stroke: currentColor;
  stroke-width:2;
  fill:none;
}

/* Contact */
.contact-section{ text-align:center; padding-bottom: 8rem; }
.contact-card{
  max-width:720px;
  margin: 0 auto;
  padding: 3.2rem 2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.contact-card h3{
  font-family: var(--font-display);
  font-weight:400;
  letter-spacing:.10em;
  font-size: 1.8rem;
  line-height:1;
  margin-bottom:.75rem;
  color: var(--text);
}
.contact-card > p{ color: var(--muted); margin-bottom:2rem; }

.contact-email{
  display:inline-block;
  font-family: var(--font-mono);
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--text);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
  padding: 1rem 1.25rem;
  border-radius: 999px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.contact-email:hover{
  transform: translateY(-2px);
  border-color: rgba(255,20,147,.55);
  background: rgba(255,255,255,0.04);
}

.socials{
  display:flex;
  justify-content:center;
  gap:.9rem;
  margin-top:1.6rem;
}
.social{
  width:48px; height:48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(248,248,252,0.75);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.social:hover{
  transform: translateY(-2px);
  border-color: rgba(255,20,147,.5);
  background: rgba(255,255,255,0.04);
  color: rgba(248,248,252,0.92);
}
.social svg{ width:20px; height:20px; fill: currentColor; }

/* Footer */
footer{
  text-align:center;
  padding: 3rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}
.footer-brand{
  font-family: var(--font-display);
  font-weight:400;
  letter-spacing:.22em;
  font-size: 1.4rem;
  line-height:1;
  margin-bottom: 1.1rem;
  color: var(--text);
}
.footer-links{
  display:flex;
  gap: 1.6rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom: 1.1rem;
}
.footer-links a{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--muted2);
  text-decoration:none;
  padding: .35rem .15rem;
}
.footer-links a:hover{ color: rgba(255,20,147,.85); }
.footer-copy{
  font-size:.75rem;
  color: rgba(248,248,252,0.45);
}
.footer-copy a{ color: rgba(248,248,252,0.60); text-decoration:none; }
.footer-copy a:hover{ color: rgba(255,20,147,.85); }

/* ================= MIXCLOUD SECTION (safe even if not present) ================= */
.mixcloud-card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items:stretch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: var(--shadow);
}
.mixcloud-meta h3{
  font-family: var(--font-display);
  font-weight:400;
  letter-spacing:.10em;
  font-size: 1.55rem;
  line-height:.98;
  margin-bottom:.75rem;
  color: var(--text);
}
.mixcloud-meta p{ color: var(--muted); margin-bottom: 1.4rem; }
.mixcloud-actions{ display:flex; gap:.9rem; flex-wrap:wrap; }
.mixcloud-embed{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.28);
  padding: 1.1rem;
}
.mixcloud-embed iframe{
  width:100%;
  border:0;
  border-radius: 8px;
  display:block;
  background: transparent;
}
.mixcloud-fineprint{
  margin-top:.9rem;
  font-family: var(--font-mono);
  font-size:.70rem;
  letter-spacing:.18em;
  color: var(--muted2);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .genre-row{ grid-template-columns: repeat(2, 1fr); }
  .expect-grid{ grid-template-columns: repeat(2, 1fr); }
  .services-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 850px){
  .about-layout{ grid-template-columns: 1fr; text-align:center; }
  .about-visual{ margin: 0 auto; }
  .tags{ justify-content:center; }
  .creator-card{ grid-template-columns: 1fr; text-align:center; }
  .creator-visual{ margin: 0 auto; }
  .mixcloud-card{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  section{ padding: 5.25rem 1.25rem; }
  .hero-cta{ flex-direction:column; width:100%; max-width: 420px; }
  .btn{ width:100%; text-align:center; }
  .hero-genres{ font-size:.80rem; }
  .contact-card{ padding: 2.4rem 1.3rem; }
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* =========================================================
   LIGHT MODE — FIXES “WHITE ON WHITE” EVERYWHERE
   ========================================================= */
@media (prefers-color-scheme: light){
  :root{
    --bg:  #f4f4f7;
    --bg2: #ffffff;

    --text: rgba(10,10,14,.94);
    --muted: rgba(10,10,14,.70);
    --muted2: rgba(10,10,14,.54);

    --line: rgba(10,10,14,.18);
    --line2: rgba(10,10,14,.28);

    --panel: rgba(10,10,14,.045);
    --panel2: rgba(10,10,14,.065);

    --shadow: 0 16px 55px rgba(0,0,0,.14);
  }

  body{
    color: var(--text);
    background:
      radial-gradient(900px 650px at 22% 12%, rgba(255,20,147,.10), transparent 64%),
      radial-gradient(900px 650px at 78% 30%, rgba(0,0,0,.06), transparent 64%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  }

  /* Tone down background art so it doesn’t wash things out */
  .atmosphere::before{ opacity:.14; }
  .atmosphere::after{ opacity:.02; }
  .grid-floor{ opacity:.08; }
  .orb{ opacity:.14; }

  /* All text-bearing UI gets darker foreground */
  .hero-badge,
  .tag,
  .genre-block,
  .service-item,
  .expect-item,
  .creator-card,
  .contact-card,
  .mixcloud-card{
    color: var(--text);
    border-color: var(--line);
    background: rgba(255,255,255,.78);
  }

  .about-text p,
  .service-item p,
  .creator-content p,
  .contact-card > p,
  .mixcloud-meta p{
    color: var(--muted);
  }

  .hero-genres{ color: var(--muted2); }

  /* Wordmark fix in light mode: outline is now dark because it uses currentColor */
  .es-wordmark{ color: var(--text); }

  /* Buttons: keep authority */
  .btn{
    background: rgba(255,255,255,.78);
    color: var(--text);
    border-color: var(--line2);
  }
  .btn--primary{
    background: rgba(10,10,14,.92);
    color: rgba(255,255,255,.96);
    border-color: rgba(10,10,14,.72);
  }

  /* Footer readable */
  footer{
    background: rgba(255,255,255,.70);
    border-top-color: var(--line);
  }
  .footer-links a{ color: rgba(10,10,14,.60); }
  .footer-links a:hover{ color: rgba(255,20,147,.85); }
  .footer-copy{ color: rgba(10,10,14,.46); }
  .footer-copy a{ color: rgba(10,10,14,.60); }

  /* Mixcloud embed panel light mode */
  .mixcloud-embed{
    background: rgba(255,255,255,.88);
    border-color: var(--line);
  }
}

/* =========================================================
   VISIBILITY HOTFIX — WORDMARK + VINYL "ES"
   Paste at VERY BOTTOM of styles.css
   ========================================================= */

/* 1) WORDMARK: force visible outline in ALL browsers */
.es-wordmark{
  color: var(--text) !important; /* drives currentColor */
}

.es-wordmark .es-outline{
  color: transparent !important;

  /* Force stroke color explicitly (don’t rely on currentColor) */
  -webkit-text-stroke-width: var(--wm-stroke) !important;
  -webkit-text-stroke-color: var(--text) !important;

  /* Fallback for browsers that ignore text-stroke:
     creates an “outline” using shadows */
  text-shadow:
    1px 0 0 var(--text),
   -1px 0 0 var(--text),
    0 1px 0 var(--text),
    0 -1px 0 var(--text),
    1px 1px 0 var(--text),
   -1px -1px 0 var(--text),
    1px -1px 0 var(--text),
   -1px 1px 0 var(--text);
}

/* 2) VINYL "ES" center label: make it readable in BOTH themes */
.vinyl::after{
  color: var(--text) !important;
  opacity: .90 !important;
}

/* Optional: increase groove contrast slightly so record isn't invisible */
.vinyl{
  border-color: rgba(255,255,255,0.18) !important;
  background-color: rgba(255,255,255,0.03) !important;
}

/* 3) LIGHT MODE: explicitly switch the vinyl/record label to dark */
@media (prefers-color-scheme: light){
  .vinyl{
    border-color: rgba(10,10,14,0.22) !important;
    background-color: rgba(10,10,14,0.04) !important;
  }
  .vinyl::before{
    background: rgba(10,10,14,0.85) !important;
    opacity: .12 !important;
  }
  .vinyl::after{
    color: rgba(10,10,14,0.90) !important;
  }
}

/* =========================================================
   LIGHT MODE VISIBILITY: BOOK ICON + VINYL GROOVES
   Paste at VERY BOTTOM of styles.css
   ========================================================= */

@media (prefers-color-scheme: light){

  /* ---------- BOOK SYMBOL (SVG ICONS) ---------- */
  /* Most of your icons are stroke-based */
  .genre-icon,
  .creator-icon svg,
  .genre-icon svg{
    color: rgba(10,10,14,0.92) !important;     /* currentColor -> dark */
    opacity: 1 !important;
  }

  .genre-icon svg,
  .creator-icon svg{
    stroke: rgba(10,10,14,0.92) !important;
  }

  /* If any icon uses fill */
  .genre-icon svg [fill]:not([fill="none"]),
  .creator-icon svg [fill]:not([fill="none"]){
    fill: rgba(10,10,14,0.92) !important;
  }

  /* ---------- RECORD DETAILS / GROOVES ---------- */
  /* Rebuild the groove gradient for light mode with dark lines */
  .vinyl{
    background:
      repeating-radial-gradient(
        circle at center,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0) 2px,
        rgba(10,10,14,0.22) 3px,
        rgba(10,10,14,0.22) 4px
      ) !important;

    /* Keep the disc visible */
    background-color: rgba(10,10,14,0.03) !important;
    box-shadow:
      inset 0 0 35px rgba(0,0,0,0.18),
      0 18px 55px rgba(0,0,0,0.10) !important;
  }

  /* Center label ring also needs contrast */
  .vinyl::before{
    background: rgba(10,10,14,0.92) !important;
    opacity: 0.10 !important;
  }

  /* If you have any other “icon box” wrappers that look washed out */
  .creator-icon{
    border-color: rgba(10,10,14,0.22) !important;
    background: rgba(10,10,14,0.04) !important;
  }
}

/* ================= FEATURE PORTRAIT ================= */

.portrait-section{
  display: flex;
  justify-content: center;
  padding: 6rem 1.5rem;
}

.portrait-frame{
  width: min(420px, 92vw);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Subtle industrial overlay */
.portrait-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.0),
      rgba(0,0,0,0.22)
    );
  pointer-events:none;
}

.portrait-frame img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
}

/* Light mode */
@media (prefers-color-scheme: light){
  .portrait-frame{
    background: rgba(255,255,255,0.78);
    border-color: rgba(10,10,14,0.22);
  }
  .portrait-frame::after{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.0),
        rgba(255,255,255,0.18)
      );
  }
}

/* =========================================================
   PHOTO GRID (drop-in, scalable, no future changes needed)
   ========================================================= */

.photo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}

.photo-card{
  margin:0;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);

  /* makes every tile consistent even if images vary */
  aspect-ratio: 3 / 4;
  position: relative;
}

.photo-card img{
  width:100%;
  height:100%;
  object-fit: cover;        /* no stretching */
  object-position: center;  /* keeps face centered */
  display:block;

  /* “cold” photographic treatment without being cheesy */
  filter: contrast(1.05) saturate(0.95);
}

/* subtle brutalist overlay (very light) */
.photo-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.22));
  pointer-events:none;
  opacity: .55;
}

/* hover = slight authority “lift” */
@media (hover:hover){
  .photo-card{
    transition: transform .18s ease, border-color .18s ease;
  }
  .photo-card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,20,147,.35);
  }
}

/* Light mode: flip borders + overlay so it never disappears */
@media (prefers-color-scheme: light){
  .photo-card{
    background: rgba(255,255,255,.78);
    border-color: rgba(10,10,14,.22);
    box-shadow: 0 16px 55px rgba(0,0,0,.12);
  }
  .photo-card::after{
    background: linear-gradient(180deg, rgba(255,255,255,0.00), rgba(255,255,255,0.18));
    opacity: .65;
  }
  .photo-card img{
    filter: contrast(1.02) saturate(0.92);
  }
}
/* =========================================================
   MOBILE LIGHT MODE: clean E.S. outline (remove “black blob”)
   Paste at VERY BOTTOM of the CSS on BOTH sites
   ========================================================= */

@media (prefers-color-scheme: light) and (max-width: 560px){

  /* Target BOTH wordmark implementations */
  .es-wordmark .es-outline,
  .es-tile-wordmark .es-tile-es{
    /* Remove the heavy fallback outline that causes the blob */
    text-shadow: none !important;

    /* Use a cleaner, thinner stroke for mobile */
    -webkit-text-stroke-width: 1.2px !important;
    -webkit-text-stroke-color: rgba(10,10,14,0.92) !important;

    /* Keep fill transparent */
    color: transparent !important;

    /* Helps stroke render on top in some browsers */
    paint-order: stroke fill;
  }
}
@media (prefers-color-scheme: light) and (max-width: 560px){
  .es-wordmark .es-outline,
  .es-tile-wordmark .es-tile-es{
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }
}

/* --- TIGHTEN SECTIONS & ALIGN IMAGES --- */

/* 1. Reduce the massive gaps between sections */
section {
  padding: 2.5rem 1.5rem !important; /* Forces a much smaller gap */
}

/* 2. Specific fix for the photo section to sit closer to the Hero */
#photos {
  padding-top: 0 !important;
  margin-top: -2rem; /* Pulls the photos up slightly into the hero's orbit */
}

/* 3. Grid fix for side-by-side images */
.photo-grid {
  display: flex !important;
  justify-content: center;
  gap: 1rem;
  max-width: 800px; /* Limits how wide the whole gallery can get */
  margin: 0 auto;
}

.photo-card {
  flex: 1;
  max-width: 300px; /* Prevents images from becoming giant on desktop */
  aspect-ratio: 3 / 4;
  border-radius: 12px; /* Slightly tighter radius for a cleaner look */
}

/* 4. Reduce Header spacing */
.section-header {
  margin-bottom: 1.5rem !important;
}

/* 5. Condense the About section layout */
.about-layout {
  gap: 1.5rem !important;
}

/* --- PHOTO SECTION REFINEMENT --- */

#photos {
  padding-top: 0 !important;
  margin-top: -5rem; /* This pulls the images up much closer to the Hero text */
  position: relative;
  z-index: 10;
}

.photo-grid {
  display: flex;
  align-items: flex-end; /* Aligns smaller photos to the bottom of the featured one */
  justify-content: center;
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Base style for all photo cards */
.photo-card {
  flex: 0 1 200px; /* Smaller default size */
  max-width: 200px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform 0.3s ease;
}

/* THE HIGHLIGHT: This makes the featured image significantly larger */
.photo-card--featured {
  flex: 0 1 350px; 
  max-width: 350px;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive: Stack them on small screens */
@media (max-width: 600px) {
  #photos { margin-top: -2rem; }
  
  .photo-grid {
    flex-wrap: wrap;
    padding: 0 1rem;
  }
  
  .photo-card--featured {
    flex: 1 1 100%;
    max-width: 100%;
  }
  
  .photo-card:not(.photo-card--featured) {
    flex: 1 1 45%; /* Two small ones side-by-side below the main one */
  }
}

/* --- PHOTO GRID: HIGHLIGHT CENTER & HOVER --- */

#photos {
  padding-top: 0 !important;
  padding-bottom: 2rem !important;
  margin-top: -8rem; /* Pulls images very close to the Hero wordmark */
  position: relative;
  z-index: 10;
}

.photo-grid {
  display: flex;
  align-items: center; /* Centers them vertically against each other */
  justify-content: center;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.photo-card {
  flex: 0 1 220px; 
  max-width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth expansion */
  cursor: pointer;
}

/* THE CENTER PIECE */
.photo-card--featured {
  flex: 0 1 380px;
  max-width: 380px;
}

/* HOVER EFFECT: Small photos grow to the size of the featured one */
.photo-card:hover {
  flex: 0 1 380px;
  max-width: 380px;
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  z-index: 20;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.photo-card:hover img {
  transform: scale(1.05); /* Subtle zoom on hover */
}

/* Mobile: Stack them but keep the center one prominent */
@media (max-width: 768px) {
  #photos { margin-top: -4rem; }
  
  .photo-grid {
    flex-direction: column;
    align-items: center;
  }
  
  .photo-card, .photo-card--featured, .photo-card:hover {
    flex: 1 1 auto;
    width: 90%;
    max-width: 400px;
  }
}

/* =========================================
   External Project Links
   ========================================= */

/* Base external button enhancement */
.project-links .external-link {
  position: relative;
  padding-right: 2.2rem; /* room for arrow */
}

/* External arrow icon */
.project-links .external-link::after {
  content: "↗";
  position: absolute;
  right: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  opacity: 0.7;
  transition: transform .18s ease, opacity .18s ease;
}

/* Hover interaction */
.project-links .external-link:hover::after {
  transform: translateY(-50%) translateX(3px);
  opacity: 1;
}

/* Optional: slightly stronger visual weight for project CTAs */
.project-links .btn {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
  );
  border-color: var(--border-accent);
}

/* Light mode refinement */
@media (prefers-color-scheme: light) {
  .project-links .btn {
    background: linear-gradient(
      180deg,
      rgba(62,42,102,.06),
      rgba(62,42,102,.02)
    );
  }
}

/* =========================================
   MOBILE DARK MODE — CLEAN E.S. OUTLINE
   Fix unreadable glow on mobile only
   ========================================= */

@media (prefers-color-scheme: dark) and (max-width: 560px) {

  .es-wordmark .es-outline {
    /* Kill the shadow fallback that causes the blob */
    text-shadow: none !important;

    /* Use a thinner, cleaner stroke on mobile */
    -webkit-text-stroke-width: 1.2px !important;
    -webkit-text-stroke-color: rgba(248,248,252,0.92) !important;

    /* Keep fill transparent */
    color: transparent !important;

    /* Improve stroke rendering */
    paint-order: stroke fill;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }
}

/* Footer brand link cleanup */
footer a {
  text-decoration: none;
}

footer a:hover .footer-brand {
  color: rgba(255,20,147,.85); /* same pink accent you use elsewhere */
}