:root{
  --mauve:#c5b3bc;
  --mauve-light:#d9cdd2;
  --mauve-deep:#ab949e;
  --charcoal:#252126;
  --charcoal-soft:#332e34;
  --ink:#211e22;
  --soft:#554e53;
  --pink:#ed5f95;
  --pink-dark:#a82f5c;
  --paper:#f7f1f4;
  --white:#fffafb;
  --line:rgba(33,30,34,.14);
  --display:"Merriweather",serif;
  --body:"Noto Serif",serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 5%,rgba(255,255,255,.28),transparent 26rem),
    radial-gradient(circle at 86% 46%,rgba(237,95,149,.10),transparent 30rem),
    var(--mauve);
  background-attachment:fixed;
  font:17px/1.7 var(--body);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.site-shell{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.section{padding:clamp(72px,8vw,110px) 0}

.masthead{padding:28px 0 10px}
.masthead-inner{display:grid;justify-items:center;gap:14px}

.brand-lockup{
  position:relative;
  width:min(460px,80vw);
  min-height:180px;
  display:grid;
  place-items:center;
}

.brand-tape{
  position:relative;
  z-index:2;
  display:inline-block;
  padding:24px 38px 22px;
  color:var(--white);
  background:
    linear-gradient(rgba(15,15,16,.97),rgba(26,24,27,.97)),
    repeating-linear-gradient(90deg,transparent 0 12px,rgba(255,255,255,.035) 13px 14px);
  font-family:var(--mono);
  font-size:clamp(1.65rem,4vw,2.55rem);
  letter-spacing:.16em;
  transform:rotate(-2.5deg);
  box-shadow:0 8px 18px rgba(35,32,36,.18);
  clip-path:polygon(2% 7%,98% 0,100% 88%,4% 100%,0 18%);
  text-shadow:0 1px 0 rgba(255,255,255,.15);
}

.brand-star{
  position:absolute;
  z-index:3;
  color:var(--pink);
  font-family:Arial,sans-serif;
  font-weight:400;
  line-height:1;
}
.star-one{left:7%;top:36%;font-size:2.8rem;transform:rotate(-12deg)}
.star-two{right:7%;top:3%;font-size:4.3rem;transform:rotate(9deg)}
.star-three{right:13%;bottom:10%;font-size:3.1rem;transform:rotate(-5deg)}

.socials{display:flex;gap:12px}
.socials a{
  width:48px;height:48px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.24);
  transition:.18s ease;
}
.socials a:hover{background:var(--pink);border-color:var(--pink);transform:translateY(-2px)}
.socials svg,.socials img{width:23px;height:23px}
.socials svg{stroke:var(--charcoal);fill:none;stroke-width:1.8}
.fill-dot{fill:var(--charcoal);stroke:none}

.hero{padding-top:clamp(34px,5vw,56px)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(320px,.84fr) minmax(0,1.16fr);
  gap:clamp(44px,7vw,84px);
  align-items:center;
}

.vinyl-wrap{display:grid;place-items:center}
.vinyl{width:min(430px,76vw);filter:drop-shadow(16px 18px 0 rgba(35,32,36,.12))}
.spinning{animation:spin 26s linear infinite}

.feature-panel{
  padding:clamp(34px,5vw,54px);
  border-radius:8px;
  background:var(--charcoal);
  color:var(--white);
  box-shadow:10px 10px 0 var(--pink),20px 20px 0 rgba(35,32,36,.11);
}

.tape-status{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:rotate(-2deg);
  clip-path:polygon(1% 10%,99% 0,100% 90%,3% 100%,0 18%);
}

.live-dot{
  width:10px;height:10px;border-radius:50%;
  background:#d1212b;
  animation:pulse 1.35s infinite;
}

.series-name{
  margin:16px 0 12px;
  color:var(--pink);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

h1,h2,h3{
  margin-top:0;
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1.02;
}
h1{margin-bottom:18px;font-size:clamp(3.4rem,7vw,5.8rem)}
h2{margin-bottom:15px;font-size:clamp(2.7rem,5vw,4.4rem)}
h3{margin-bottom:10px;font-size:clamp(1.95rem,2.8vw,2.65rem)}

.feature-lead{
  margin-bottom:18px;
  font-size:clamp(1.08rem,1.7vw,1.28rem);
  font-weight:600;
}
.feature-copy{margin:0;color:rgba(255,250,251,.72)}

.setlist-grid{
  display:grid;
  grid-template-columns:minmax(250px,.62fr) minmax(470px,1.38fr);
  gap:clamp(38px,7vw,76px);
  align-items:center;
}
.setlist-copy p{max-width:390px;color:var(--soft)}
.button{
  display:inline-block;
  margin-top:8px;
  padding:12px 17px;
  background:var(--charcoal);
  color:var(--white);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.button:hover{background:var(--pink);color:var(--charcoal)}
iframe{display:block;border-radius:10px;box-shadow:10px 10px 0 var(--pink)}

.section-heading{max-width:780px;margin:0 auto 34px;text-align:center}
.section-heading p{max-width:650px;margin:0 auto;color:var(--soft)}

.series-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.series-card{
  min-height:360px;
  padding:28px;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(rgba(247,241,244,.94),rgba(247,241,244,.94)),
    repeating-linear-gradient(0deg,transparent 0 13px,rgba(35,32,36,.025) 14px 15px);
  border:1px solid rgba(35,32,36,.10);
  box-shadow:8px 8px 0 rgba(35,32,36,.10);
}
.series-card.active{box-shadow:8px 8px 0 var(--pink)}

.series-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:auto;
}

.book-number{
  color:var(--pink-dark);
  font:900 1.7rem var(--display);
}

.book-label{
  padding:7px 11px;
  background:var(--charcoal);
  color:var(--white);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:rotate(-2deg);
}

.series-card p{color:var(--soft)}
.book-status{
  margin-top:auto;
  color:var(--pink-dark);
  font-size:.8rem;
  font-weight:700;
}

.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.98fr);
  gap:clamp(44px,7vw,88px);
  align-items:start;
}

.about-copy{max-width:620px;padding-top:28px}
.about-copy h2{max-width:560px;font-size:clamp(2.4rem,4vw,3.6rem)}
.about-copy p{color:var(--soft)}

.pass-scene{position:relative;display:grid;justify-items:center;padding-top:52px}
.lanyard{
  position:absolute;
  top:0;
  left:50%;
  width:18px;
  height:82px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--pink),#f18ab2);
  border-radius:10px;
  box-shadow:0 5px 10px rgba(35,32,36,.15);
}
.lanyard::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16px;
  width:34px;
  height:34px;
  transform:translateX(-50%);
  border:8px solid var(--paper);
  border-radius:50%;
  background:transparent;
  box-shadow:0 3px 8px rgba(35,32,36,.12);
}

.backstage-pass{
  position:relative;
  width:min(100%,440px);
  min-height:560px;
  overflow:hidden;
  border-radius:28px;
  background:var(--charcoal);
  box-shadow:12px 12px 0 var(--pink),22px 22px 0 rgba(35,32,36,.10);
  animation:floatPass 4.8s ease-in-out infinite;
}

.pass-image{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(20,18,21,.22),rgba(20,18,21,.92)),
    url("images/the-knight-project-tour-poster.jpg") center 16% / cover no-repeat;
  filter:saturate(.45) contrast(1.05);
  opacity:.82;
}

.pass-overlay{
  position:relative;
  z-index:2;
  min-height:560px;
  display:flex;
  flex-direction:column;
}

.pass-top{
  display:flex;
  justify-content:space-between;
  padding:18px 24px 15px;
  background:linear-gradient(90deg,var(--pink),#f58bb5);
  color:var(--charcoal);
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.pass-main{
  margin-top:auto;
  padding:26px 24px 22px;
  background:linear-gradient(180deg,transparent,rgba(28,24,29,.88) 18%,rgba(28,24,29,.98));
}

.pass-series{
  margin:0 0 8px;
  color:var(--pink);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.pass-main h2{
  margin-bottom:10px;
  font-size:clamp(2.5rem,4vw,3.6rem);
  color:var(--white);
}
.pass-main p{color:rgba(255,250,251,.78)}

.signup-form{display:grid;gap:12px;margin-top:20px}
.signup-form input,.signup-form button{min-height:54px;padding:0 16px;font:inherit}
.signup-form input{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:var(--white);
}
.signup-form input::placeholder{color:rgba(255,255,255,.55)}
.signup-form button{
  border:0;
  background:var(--pink);
  color:var(--charcoal);
  font-weight:700;
  cursor:pointer;
}
.signup-form button:hover{background:var(--white)}

.pass-bottom{
  padding:14px 24px 18px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(25,22,26,.98);
  color:rgba(255,255,255,.66);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

footer{padding:32px 16px 42px;text-align:center;color:var(--soft);font-size:.8rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(209,33,43,.65)}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@keyframes floatPass{
  0%,100%{transform:translateY(0) rotate(.25deg)}
  50%{transform:translateY(-7px) rotate(-.25deg)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .spinning,.live-dot,.backstage-pass{animation:none}
}

@media(max-width:980px){
  .hero-grid,.setlist-grid,.series-grid,.about-grid{grid-template-columns:1fr}
  .feature-panel{max-width:720px;margin:auto}
  .setlist-copy{text-align:center}
  .setlist-copy p{margin-inline:auto}
  .series-card{min-height:280px}
}

@media(max-width:620px){
  body{font-size:16px}
  .section{padding:62px 0}
  .brand-lockup{min-height:150px}
  .brand-tape{padding:20px 26px;font-size:1.45rem}
  .star-one{font-size:2.2rem}
  .star-two{font-size:3.3rem}
  .star-three{font-size:2.5rem}
  .vinyl{width:min(390px,84vw)}
  .feature-panel{padding:28px 24px}
  .backstage-pass,.pass-overlay{min-height:520px}
}


/* Final polish overrides */
.brand-lockup{
  width:min(470px,84vw);
  min-height:auto;
  display:grid;
  place-items:center;
}

.brand-logo-image{
  width:min(470px,84vw);
  height:auto;
  filter:drop-shadow(0 10px 16px rgba(35,32,36,.08));
}

/* disable old CSS tape/stars */
.brand-tape,.brand-star{display:none !important;}

.tape-status{
  transform:none;
  clip-path:none;
  border-radius:2px;
  padding:8px 14px;
  letter-spacing:.09em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.series .section-heading{
  max-width:100%;
}

.series .section-heading h2{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.series .section-heading p{
  max-width:none;
  text-align:center;
}

@media (min-width: 981px){
  .series .section-heading p{
    white-space:nowrap;
  }
}

@media(max-width:620px){
  .brand-logo-image{width:min(360px,86vw);}
  .series .section-heading p{white-space:normal;}
}


/* 10/10 refinement overrides */
.masthead{padding:26px 0 8px}
.masthead-inner{gap:10px}
.brand-logo-image{
  width:min(520px,86vw);
  height:auto;
  filter:drop-shadow(0 10px 16px rgba(35,32,36,.06));
}
.socials{gap:14px}
.socials a{
  width:50px;
  height:50px;
  background:rgba(255,255,255,.28);
}
.hero-grid{align-items:center}
.vinyl{width:min(440px,76vw);filter:drop-shadow(14px 16px 0 rgba(35,32,36,.10))}
.feature-panel{
  box-shadow:8px 8px 0 var(--pink),16px 16px 0 rgba(35,32,36,.09);
}
.tape-status{
  font-family:Arial, Helvetica, sans-serif;
  font-size:.71rem;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1;
  transform:rotate(-1.3deg);
  border-radius:1px;
  padding:9px 14px;
  text-shadow:none;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.series .section-heading{
  max-width:980px;
  margin-bottom:38px;
}
.series .section-heading h2{margin-bottom:8px}
.series .section-heading p{
  max-width:900px;
  font-size:1.05rem;
  line-height:1.55;
}
.series-grid{align-items:stretch}
.series-card{min-height:332px;padding:28px 28px 26px}
.series-topline{margin-bottom:28px}
.series-card h3{
  min-height:2.4em;
  display:flex;
  align-items:flex-end;
}
.series-card p{
  min-height:4.8em;
  margin-bottom:18px;
}
.book-status{margin-top:auto}
.about-grid{align-items:center}
.about-copy{max-width:590px;padding-top:10px}
.about-copy p{max-width:56ch}
.pass-main h2{line-height:.96}
.pass-main p{max-width:30ch}
footer{padding-top:28px}

@media (min-width:981px){
  .series .section-heading p{white-space:nowrap;}
}
@media(max-width:980px){
  .about-grid{gap:56px}
  .series .section-heading p{white-space:normal;}
}
@media(max-width:620px){
  .brand-logo-image{width:min(420px,90vw)}
  .series-card h3,.series-card p{min-height:unset}
}