/* Ear to the Wall Records */
:root{
  --night:#232A33; --slate:#3A4450; --edge:#4E5A68; --steel:#688393;
  --ink:#EEF1F1; --ink-2:#C9D2D7; --ink-3:#B4C3CB;
  --amber:#FFB347; --amber-hi:#FFC978; --pink:#F02A8A;
  --serif:'Caladea',Georgia,serif; --sans:'IBM Plex Sans',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:96px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--amber)}a:hover{color:var(--amber-hi)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;hyphens:none}
p{margin:0;text-wrap:pretty;hyphens:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.label{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-3)}
.label.amber{color:var(--amber)}
.muted{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.syd-name{font-family:var(--serif);font-variant:small-caps;letter-spacing:.05em;white-space:nowrap}

/* buttons */
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 24px;border-radius:4px;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;cursor:pointer;font-family:var(--sans)}
.btn-amber{background:var(--amber);color:var(--night);border:0}.btn-amber:hover{background:var(--amber-hi);color:var(--night)}
.btn-ghost{border:2px solid var(--ink);color:var(--ink);background:transparent}.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-line{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:4px;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.btn-line:hover{border-color:var(--amber);color:var(--amber)}

/* header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:10}
.site-header.solid{position:relative;border-bottom:1px solid var(--slate)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:92px}
.home-link{display:flex;align-items:center;gap:16px;text-decoration:none}
.home-link svg{display:block}
.nav{display:flex;gap:32px;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.nav a{color:var(--ink);text-decoration:none}.nav a:hover,.nav a[aria-current="page"]{color:var(--amber)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.neon{font-family:'Damion',cursive;line-height:1;color:var(--amber);text-shadow:0 0 5px rgba(255,179,71,.85),0 0 14px rgba(255,140,0,.45);white-space:nowrap}
.drop{position:relative;top:.14em}

/* hero: after hours */
.hero{position:relative;overflow:hidden;text-align:center;padding:212px 0 88px}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 85%;transform:scale(1.25);transform-origin:50% 100%;filter:saturate(.5) brightness(.4) blur(2px)}
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,rgba(35,42,51,.25) 0%,rgba(35,42,51,.85) 60%,var(--night) 100%)}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 20px}
.sign{font-family:'Damion',cursive;line-height:1;color:#FFD08A;white-space:nowrap;font-size:104px;margin-bottom:54px;
  text-shadow:0 0 4px #FFE2B0,0 0 12px var(--amber),0 0 32px rgba(255,150,30,.85),0 0 80px rgba(255,130,0,.55),0 0 140px rgba(255,120,0,.35)}
.sign .br{display:none}
.hero h1{font-size:64px;line-height:1.05;white-space:nowrap}
.hero p{font-size:19px;line-height:1.5;color:var(--ink-2);max-width:560px;margin-bottom:10px}
.hero-ctas{display:flex;gap:14px;justify-content:center}

/* sections */
.section{padding:80px 0;border-top:1px solid var(--slate)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:28px}
.section-head h2{font-size:48px;line-height:1.04}
.section-head p{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:380px}

/* demo */
.demo{padding:64px 0 0}
.demo .section-head{align-items:baseline;margin-bottom:16px}
.demo .section-head h2{font-size:42px}
.demo-band{border-top:1px solid var(--slate);border-bottom:1px solid var(--slate)}
.wave-row{display:flex;align-items:center;gap:24px;padding:28px 0 8px}
.wave-row+.wave-row{padding:8px 0 28px}
.wave-row .label{width:96px;flex-shrink:0}
.wave-row svg{flex:1;min-width:0;height:110px;display:block}
.wave-row.dim{opacity:.45}
.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0 28px;border-top:1px solid var(--slate)}
.demo-buttons{display:flex;align-items:center;gap:16px}
.play{width:56px;height:56px;border-radius:28px;border:0;background:var(--amber);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.pill{height:44px;padding:0 18px;border-radius:22px;border:2px solid var(--edge);background:transparent;color:var(--ink-3);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.02em;cursor:pointer}
.pill[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.pill.after[aria-pressed="true"]{border-color:var(--amber);color:var(--amber);text-shadow:0 0 8px rgba(255,179,71,.6)}
.demo-credit{font-family:var(--mono);font-size:13px;color:var(--ink-3)}

/* rack */
.rack{display:grid;grid-auto-rows:1fr;gap:6px;padding:18px 14px;background:#161B21;border-radius:6px;box-shadow:inset 0 0 0 1px #2E3640}
.unit{display:flex;background:linear-gradient(#46515E,#39424D);border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 #0D1014}
.ear{flex-shrink:0;width:34px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;background:rgba(0,0,0,.12)}
.screw{width:12px;height:12px;border-radius:6px;background:radial-gradient(circle at 40% 35%,#C9D2D7,#6B7783);box-shadow:0 1px 1px #000}
.face{flex:1;min-width:0;display:grid;grid-template-columns:12px minmax(0,1fr) 110px 130px 200px;grid-template-areas:"led name vu price cta";align-items:center;gap:28px;padding:24px 28px}
.led{grid-area:led;width:12px;height:12px;border-radius:6px;background:var(--amber);box-shadow:0 0 8px var(--amber),0 0 18px rgba(255,150,30,.6)}
.unit-name{grid-area:name;display:flex;flex-direction:column;gap:6px}
.unit-name h3{font-size:28px;line-height:1.1}
.unit-name p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.vu{grid-area:vu;position:relative;width:110px;height:64px;border-radius:6px;background:linear-gradient(#FFE7BF,#F5C77E);box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 0 24px rgba(255,170,60,.35);overflow:hidden}
.needle{position:absolute;left:54px;bottom:-14px;width:2px;height:66px;background:var(--night);transform-origin:50% 100%}
.price{grid-area:price;font-family:var(--serif);font-size:44px;line-height:1;text-align:right}
.price small{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-3);margin-top:4px}
.unit .btn{grid-area:cta;height:46px;font-size:15px;padding:0 20px}
.rack-note{margin-top:28px;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* split sections */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split h2{font-size:48px;line-height:1.04}
.stack{display:flex;flex-direction:column;gap:20px}
.stack p{font-size:18px;line-height:1.6;color:var(--ink-2)}
.photo{border-radius:8px;overflow:hidden;position:relative}
.photo img{width:100%;height:100%;object-fit:cover}
.big-line{font-size:24px;line-height:1.3;font-weight:600;color:var(--ink)!important}
.signoff{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.3;color:var(--ink)}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.contact h2{font-size:77px;line-height:1.04}
.book-panel{display:flex;flex-direction:column;gap:18px;padding:32px;background:var(--slate);border:1px solid var(--edge);border-radius:8px}
.book-panel h3{font-size:30px;line-height:1.15}
.book-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.book-steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.5;color:var(--ink-2)}
.book-steps span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:14px;border:1.5px solid var(--amber);color:var(--amber);font-family:var(--mono);font-size:13px}
.terms{font-size:14px;line-height:1.5;color:var(--ink-3)}
.contact-links{display:flex;flex-direction:column;gap:8px;font-size:16px;color:var(--ink-2)}

/* artists */
.intro{padding:72px 0 24px}
.intro h1{font-size:64px;line-height:1.04;margin:14px 0}
.intro p{font-size:18px;line-height:1.55;color:var(--ink-2)}
.passes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding-top:10px;padding-bottom:80px}
.artist{display:flex;flex-direction:column;gap:40px;min-width:0}
.hang{position:relative;width:334px;max-width:100%;padding-top:120px;margin-left:60px;transform-origin:50% 0}
.strap{position:absolute;top:-10px;left:150px;width:34px;height:150px;border-radius:2px;box-shadow:inset -6px 0 8px rgba(0,0,0,.25);-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.clip{position:absolute;top:128px;left:153px;width:28px;height:30px;border-radius:6px;background:linear-gradient(#DDE3E6,#8D99A2);box-shadow:0 3px 6px rgba(0,0,0,.4)}
.pass{position:relative;padding:44px 18px 18px;border-radius:16px;background:rgba(238,241,241,.06);border:1px solid rgba(238,241,241,.25);box-shadow:0 30px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.slot{position:absolute;left:50%;top:16px;width:50px;height:10px;margin-left:-25px;border-radius:5px;background:var(--night);box-shadow:inset 0 1px 2px #000}
.pass img{width:100%;height:340px;object-fit:cover;border-radius:6px}
.band{height:10px;border-radius:5px;margin-top:14px}
.syd .strap,.syd .band{background:var(--pink)}
.fta .strap{background:linear-gradient(180deg,#4A1A6B 0%,#F02A8A 52%,#FF7A1A 100%)}
.fta .band{background:linear-gradient(90deg,#4A1A6B 0%,#F02A8A 52%,#FF7A1A 100%)}
.syd .hang{transform:rotate(-2deg)}.fta .hang{transform:rotate(2.5deg)}
.artist-text{display:flex;flex-direction:column;gap:18px}
.artist-text .names{display:flex;flex-direction:column;gap:8px}
.artist-text h2.syd-name{font-size:60px;line-height:1}
.artist-text .fta-mark{width:100%;height:auto;max-width:560px;margin-left:-3.4%}
.artist-text p{font-size:17px;line-height:1.6;color:var(--ink)}
.artist-text p.credit{font-size:15px;color:#C9D2D7}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.socials{color:var(--ink);font-size:15px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--edge);padding:10px 0;align-self:flex-start}
.socials:hover{color:var(--amber)}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:48px;padding-bottom:48px;border-top:1px solid var(--slate)}
.cta-band h2{font-size:40px;line-height:1.1}
.cta-band p{color:var(--ink-2);margin-top:6px}

/* footer */
.site-footer{border-top:1px solid var(--slate);font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--ink-3)}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:32px;padding-bottom:32px}
.site-footer .left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer .neon{font-size:24px;letter-spacing:0}
.site-footer .syd-name{font-size:1.2em;color:var(--ink)}

/* ---------- phone ---------- */
@media (max-width:900px){
  :root{--pad:20px}
  body{font-size:16px}
  .site-header .wrap{height:72px}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--night);border-bottom:1px solid var(--slate);padding:8px 20px 16px}
  .nav a{padding:12px 0;font-size:15px}
  .nav.open{display:flex}
  .menu-btn{display:inline-flex}
  .hero{padding:150px 0 64px}
  .sign{font-size:56px;margin-bottom:26px}.sign .br{display:inline}
  .hero h1{font-size:40px}
  .hero p{font-size:16px}
  .hero-ctas{flex-direction:column;gap:12px;width:100%}
  .hero-ctas .btn{width:100%}
  .section{padding:44px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:18px}
  .section-head h2{font-size:34px}
  .section-head p{font-size:15px}
  .demo{padding:44px 0 0}.demo .section-head h2{font-size:30px}
  .wave-row{flex-direction:column;align-items:stretch;gap:8px;padding:20px 0 4px}.wave-row+.wave-row{padding:4px 0 20px}
  .wave-row svg{height:70px}
  .demo-controls{flex-direction:column;align-items:flex-start}
  .rack{padding:12px 8px}
  .ear{width:22px}
  .face{grid-template-columns:74px minmax(0,1fr) auto;grid-template-areas:"name name price" "desc desc desc" "vu cta cta";gap:12px 12px;padding:18px 14px}
  .face .led{display:none}
  .unit-name{display:contents}
  .unit-name h3{grid-area:name;font-size:21px;white-space:nowrap;display:flex;align-items:center;gap:10px}
  .unit-name h3::before{content:"";width:12px;height:12px;border-radius:6px;background:var(--amber);box-shadow:0 0 8px var(--amber),0 0 18px rgba(255,150,30,.6);flex-shrink:0}
  .unit-name p{grid-area:desc;font-size:14px}
  .price{font-size:30px}.price small{font-size:11px}
  .vu{width:74px;height:44px}.needle{left:36px;height:46px;bottom:-10px}
  .unit .btn{width:100%;font-size:14px}
  .split,.contact{grid-template-columns:1fr;gap:24px}
  .split h2{font-size:32px}
  .stack p{font-size:16px}
  .big-line{font-size:20px}
  .contact h2{font-size:48px}
  .book-panel{padding:22px}
  .intro{padding:40px 0 10px}.intro h1{font-size:40px}.intro p{font-size:16px}
  .passes{grid-template-columns:1fr;gap:12px;padding-bottom:48px}
  .home-link .neon{display:none}
  .artist{gap:30px}
  .hang{width:280px;margin:0 auto}
  .strap{left:123px}.clip{left:126px}
  .pass img{height:290px}
  .artist-text h2.syd-name{font-size:40px}
  .cta-band{flex-direction:column;align-items:stretch;padding-top:36px;padding-bottom:44px}
  .cta-band h2{font-size:30px}
  .cta-band .btn{width:100%}
  .site-footer .wrap{flex-direction:column;align-items:flex-start}
}
.m-br{display:none}
@media (max-width:900px){.m-br{display:inline}}