/*
Theme Name: Mentalism Records V8
Theme URI: https://mentalismrecords.com/
Author: Mentalism Records
Description: Custom Mentalism Records theme featuring Mr. Hypnotic as the flagship artist. Black and gold visual identity, Roman-style typography, responsive layout, artist roster, releases, submissions, and contact sections.
Version: 8.0.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: mentalism-records
*/


:root{
  --bg:#060606;
  --bg2:#0a0a0a;
  --fg:#f4f1ea;
  --muted:#8c8c86;
  --gold:#c8a45f;
  --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{width:min(1440px,calc(100% - 56px));margin:auto}
header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:linear-gradient(to bottom,rgba(6,6,6,.86),rgba(6,6,6,0));
}
.nav{
  height:88px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px
}
.logo img{width:210px;max-width:100%;height:auto}
.navlinks{display:flex;justify-content:center;gap:30px}
.navlinks a{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.68
}
.navlinks a:hover{opacity:1}
.navcta{
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:12px 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px
}

.hero{
  min-height:100vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 72% 38%,rgba(201,164,95,.12),transparent 22%),
    radial-gradient(circle at 52% 80%,rgba(255,255,255,.035),transparent 22%),
    #060606;
}
.hero-noise{
  position:absolute;inset:0;opacity:.17;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)
}
.hero-orbit{
  position:absolute;right:-8vw;top:7vh;width:min(56vw,760px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 0 0 38px rgba(255,255,255,.015),0 0 0 76px rgba(255,255,255,.012)
}
.hero-orbit:before{
  content:"";position:absolute;inset:14%;border:1px solid rgba(200,164,95,.22);border-radius:50%
}
.hero-logo{
  position:absolute;right:6vw;top:12vh;width:min(40vw,560px);filter:drop-shadow(0 24px 60px rgba(0,0,0,.62))
}
.hero-content{position:relative;z-index:3;padding:150px 0 68px;width:100%}
.eyebrow{
  font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#b9b7b1
}
.hero h1{
  margin:18px 0 22px;
  font-size:clamp(72px,11vw,170px);
  line-height:.77;
  letter-spacing:-.075em;
  font-weight:850;
  max-width:1050px;
  text-transform:uppercase;
}
.hero h1 span{display:block;color:transparent;-webkit-text-stroke:1px rgba(244,241,234,.72)}
.hero-bottom{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;border-top:1px solid var(--line);padding-top:24px
}
.hero-copy{max-width:610px;color:#b6b4ae;font-size:16px;line-height:1.7}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:.25s
}
.btn:hover{background:#fff;color:#000}
.btn.primary{background:var(--fg);color:#050505;border-color:var(--fg)}
.btn.primary:hover{background:var(--gold);border-color:var(--gold)}

.marquee{
  overflow:hidden;border-bottom:1px solid var(--line);border-top:1px solid var(--line);white-space:nowrap
}
.marquee-track{
  display:inline-block;padding:16px 0;animation:scroll 24s linear infinite;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#75736e
}
.marquee-track b{color:#d9d5cd}
@keyframes scroll{to{transform:translateX(-50%)}}

.section{padding:118px 0}
.section.dark2{background:var(--bg2)}
.section-head{
  display:grid;grid-template-columns:1fr .45fr;gap:60px;align-items:end;margin-bottom:54px
}
.section h2{
  margin:8px 0 0;font-size:clamp(54px,7vw,104px);line-height:.86;letter-spacing:-.06em;
  text-transform:uppercase;font-weight:850
}
.section h2 span{color:#6f6f6b}
.copy{color:var(--muted);line-height:1.72;font-size:15px}

.flagship{
  position:relative;display:grid;grid-template-columns:1.25fr .75fr;min-height:680px;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.flagship-art{
  position:relative;min-height:680px;background:#080808;overflow:hidden
}
.flagship-art:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,transparent 70%,#060606 100%);
  z-index:4
}
.cover{position:absolute;width:min(33%,360px);aspect-ratio:1;object-fit:cover;box-shadow:0 28px 70px rgba(0,0,0,.55)}
.c1{left:5%;top:10%;transform:rotate(-7deg)}
.c2{left:31%;top:24%;transform:rotate(5deg);z-index:2}
.c3{left:18%;top:51%;transform:rotate(-1deg);z-index:3}
.flagship-copy{
  position:relative;z-index:5;padding:80px 36px 72px 54px;display:flex;flex-direction:column;justify-content:flex-end;background:#060606
}
.flagship-copy h3{
  margin:12px 0 18px;font-size:clamp(48px,5.4vw,86px);line-height:.88;letter-spacing:-.055em;text-transform:uppercase
}
.flagship-copy .meta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#77736d;margin:22px 0}
.genres{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 28px}
.tag{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:7px 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#9b9891
}

.release-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.release{position:relative;overflow:hidden;background:#111}
.release img{width:100%;aspect-ratio:1;object-fit:cover;transition:.4s}
.release:hover img{transform:scale(1.03)}
.release-overlay{
  position:absolute;inset:auto 0 0 0;padding:60px 20px 20px;
  background:linear-gradient(transparent,rgba(0,0,0,.88))
}
.release small{display:block;color:#b6b2aa;font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.release strong{font-size:24px;letter-spacing:-.025em}

.manifesto{
  min-height:72vh;display:grid;place-items:center;text-align:center;padding:100px 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.manifesto p{
  max-width:1180px;margin:0;font-size:clamp(44px,6.5vw,96px);font-weight:800;line-height:.96;letter-spacing:-.055em;text-transform:uppercase
}
.manifesto p span{color:#5e5e5a}

.values{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.value{padding:38px;min-height:280px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.value .n{font-size:10px;letter-spacing:.18em;color:#777}
.value h3{margin:50px 0 12px;font-size:29px;letter-spacing:-.03em}
.value p{color:#85827b;line-height:1.7;font-size:14px}

.roster{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;padding:90px 0
}
.roster h3{font-size:clamp(48px,6vw,92px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase;margin:10px 0 0}
.roster-right{max-width:560px;margin-left:auto}
.roster-right p{color:#8f8c85;line-height:1.72}

.pagehero{padding:160px 0 80px;border-bottom:1px solid var(--line)}
.pagehero h1{font-size:clamp(70px,10vw,150px);line-height:.8;letter-spacing:-.07em;text-transform:uppercase;margin:18px 0}
.pagehero h1 span{color:#666560}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:#080808;padding:44px;min-height:260px}.card h3{font-size:32px;margin:50px 0 12px;letter-spacing:-.03em}.card p{color:#8a877f;line-height:1.7}
.form{display:grid;gap:12px;max-width:800px}
.form input,.form textarea,.form select{background:#090909;border:1px solid rgba(255,255,255,.12);padding:16px;color:#eee;font:inherit;border-radius:10px}
.form textarea{min-height:180px}
.note{color:#66625d;font-size:11px}

footer{padding:56px 0;border-top:1px solid var(--line)}
.footer{display:flex;justify-content:space-between;gap:28px;align-items:end}
.footer img{width:250px;max-width:100%;height:auto}.footer-meta{color:#66635e;font-size:10px;line-height:1.8;letter-spacing:.13em;text-transform:uppercase;text-align:right}

@media(max-width:980px){
  .navlinks{display:none}.hero-logo{opacity:.32;right:-8vw;top:20vh;width:62vw}.hero-bottom,.section-head,.roster{grid-template-columns:1fr;display:grid}
  .flagship{grid-template-columns:1fr}.flagship-art{min-height:560px}.flagship-copy{padding:44px 0 0}.release-grid,.values,.cards{grid-template-columns:1fr}
  .section{padding:84px 0}.roster-right{margin:0}.footer{align-items:flex-start;flex-direction:column}.footer-meta{text-align:left}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 28px)}.nav{height:72px}.logo img{width:150px}.navcta{display:none}.hero-content{padding-top:130px}.hero h1{font-size:68px}
  .hero-bottom{gap:20px}.hero-actions{margin-top:6px}.section h2{font-size:52px}.flagship-art{min-height:430px}.cover{width:45%}
  .c1{left:2%}.c2{left:43%;top:18%}.c3{left:23%;top:52%}.flagship-copy h3{font-size:52px}.manifesto p{font-size:43px}
}

body{
  background:
    radial-gradient(circle at 18% 8%,rgba(118,40,255,.11),transparent 26%),
    radial-gradient(circle at 82% 18%,rgba(0,210,255,.08),transparent 22%),
    radial-gradient(circle at 70% 78%,rgba(200,164,95,.08),transparent 24%),
    #060606;
}
.hero{
  background:
    radial-gradient(circle at 77% 32%,rgba(200,164,95,.18),transparent 20%),
    radial-gradient(circle at 67% 45%,rgba(118,40,255,.12),transparent 25%),
    radial-gradient(circle at 87% 58%,rgba(0,210,255,.08),transparent 20%),
    #060606;
}
.glowline{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(118,40,255,.7),rgba(0,210,255,.6),rgba(200,164,95,.55),transparent);
  box-shadow:0 0 18px rgba(118,40,255,.35);
}
.hero-logo{animation:floatLogo 7s ease-in-out infinite}
@keyframes floatLogo{50%{transform:translateY(-10px) rotate(.5deg)}}
.release,.flagship-art{box-shadow:0 30px 80px rgba(0,0,0,.28)}

.preview-navlinks a{cursor:pointer}
.preview-section{scroll-margin-top:90px}



:root {
  --mentalism-display: "Cinzel","Trajan Pro","Times New Roman",Georgia,serif;
}
body {
  font-family: var(--mentalism-display);
  letter-spacing: .005em;
}
.hero h1,
.section h2,
.flagship-copy h3,
.manifesto p,
.roster h3,
.pagehero h1,
.card h3,
.value h3,
.release strong {
  font-family: var(--mentalism-display);
  font-weight: 500;
  letter-spacing: -.035em;
}
.hero h1 {
  letter-spacing: -.045em;
}
.section h2,
.pagehero h1 {
  letter-spacing: -.04em;
}
.eyebrow,
.navlinks a,
.navcta,
.btn,
.tag,
.release small,
.footer-meta,
.marquee-track,
.value .n,
.flagship-copy .meta {
  font-family: var(--mentalism-display);
  font-weight: 600;
  letter-spacing: .17em;
}
.hero-copy,
.copy,
.value p,
.card p,
.roster-right p,
.form input,
.form textarea,
.form select {
  font-family: var(--mentalism-display);
  font-weight: 400;
  letter-spacing: .015em;
}
.form input::placeholder,
.form textarea::placeholder {
  font-family: var(--mentalism-display);
}



:root{
  --mentalism-gold:#d6b56a;
  --mentalism-gold-bright:#f0d493;
  --mentalism-gold-deep:#9f7432;
}

/* Major display typography now carries the logo's gold identity */
.hero h1,
.hero h1 span,
.section h2,
.section h2 span,
.flagship-copy h3,
.manifesto p,
.manifesto p span,
.roster h3,
.pagehero h1,
.pagehero h1 span,
.card h3,
.value h3,
.release strong{
  color:var(--mentalism-gold-bright) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:
    0 0 18px rgba(214,181,106,.10),
    0 1px 0 rgba(255,255,255,.05);
}

/* Keep secondary/body typography restrained */
.hero-copy,
.copy,
.value p,
.card p,
.roster-right p{
  color:#a7a39b;
}

/* Navigation accents and small labels stay elegant gold */
.eyebrow,
.navlinks a:hover,
.navlinks a.active,
.release small,
.value .n{
  color:var(--mentalism-gold);
}

/* Every button gets the same gold treatment */
.btn,
.btn.primary,
.navcta{
  background:linear-gradient(135deg,var(--mentalism-gold-deep),var(--mentalism-gold-bright)) !important;
  color:#070707 !important;
  border-color:rgba(240,212,147,.75) !important;
  box-shadow:
    0 8px 26px rgba(159,116,50,.14),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.btn:hover,
.btn.primary:hover,
.navcta:hover{
  background:linear-gradient(135deg,#b88a3f,#f3d99d) !important;
  color:#050505 !important;
  border-color:#f3d99d !important;
  transform:translateY(-2px);
  box-shadow:
    0 12px 34px rgba(214,181,106,.20),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* Multi-page label and event interface */
.nav{gap:20px}.navlinks{gap:18px}.menu-toggle{display:none}.navlinks a{font-size:10px}.pagehero h1{font-size:clamp(48px,8vw,110px);line-height:1.05}.pagehero+.section{padding-top:70px}.lead{font-size:clamp(22px,3vw,34px);line-height:1.5;max-width:960px;color:#e6dcc7}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.detail-art{width:100%;max-width:600px}.detail-grid h2{font-size:clamp(32px,4vw,60px);line-height:1.1}.card h3{margin-top:26px}.card .btn{margin-top:16px}.card:focus-within{outline:1px solid var(--gold)}.event-meta{color:var(--mentalism-gold);line-height:1.8}.event-body{line-height:1.8;color:#b9b5ad}.event-empty{border:1px solid var(--line);padding:48px}.ticket-dialog{width:min(640px,calc(100% - 28px));max-height:90vh;overflow:auto;background:#0b0b0b;color:var(--fg);border:1px solid var(--gold);padding:32px;border-radius:18px}.ticket-dialog::backdrop{background:rgba(0,0,0,.85)}.ticket-dialog h2{color:var(--mentalism-gold-bright);font-size:32px}.dialog-close{float:right;background:transparent;color:#fff;border:1px solid #777;padding:10px;cursor:pointer}.ticket-dialog .form textarea{min-height:100px}.ticket-actions{display:flex;flex-wrap:wrap;gap:12px}.form label{display:grid;gap:8px}.status{padding:20px;border:1px solid var(--gold)}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.event-card{border:1px solid var(--line);padding:32px;background:#090909}.event-card h2{font-size:32px;line-height:1.2}.event-card img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:24px}
@media(max-width:1100px){.nav{grid-template-columns:auto 1fr auto}.menu-toggle{display:block;justify-self:end;background:#090909;color:var(--gold);border:1px solid var(--gold);padding:10px}.navlinks{display:none}.navlinks.open{display:flex;position:absolute;top:88px;left:0;right:0;flex-direction:column;background:#090909;padding:24px;gap:20px}.detail-grid,.event-grid{grid-template-columns:1fr}}
@media(max-width:620px){.nav{grid-template-columns:1fr auto}.navlinks.open{top:72px}.pagehero{padding-top:130px}.ticket-dialog{padding:22px}.card{padding:28px}.hero h1{font-size:clamp(48px,12vw,68px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-logo,.marquee-track{animation:none}.btn,.release img{transition:none}}

/* Clear the fixed navigation logo on every page, including Genres and Events. */
main > .section:first-child,
main > .pagehero:first-child { padding-top: 220px; }
main > .hero:first-child .hero-content { padding-top: 220px; }
@media (max-width: 980px) {
  main > .section:first-child,
  main > .pagehero:first-child { padding-top: 200px; }
  main > .hero:first-child .hero-content { padding-top: 200px; }
}
@media (max-width: 620px) {
  main > .section:first-child,
  main > .pagehero:first-child { padding-top: 180px; }
  main > .hero:first-child .hero-content { padding-top: 180px; }
}