/* LIFFT shared styles: used by every page on liftmusik.com */
:root{
  /* LIFT tokens. Swap --pink for the logo's main color once the logo is in. */
  --black:#000000;
  --concrete:#16171a;
  --line:#2a2c31;
  --dim:#5f626b;
  --fog:#9a9da5;
  --strobe:#f3f4f6;
  --pink:#ff2d95;
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --narrow:62%;
  --gutter:clamp(16px,4vw,40px);
  /* Layout: left-aligned stacked acronym beside the station panel, then one list of what LIFT runs, then the signup. */
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--black);scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--strobe);
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance}

.wrap{width:min(1200px,100% - 2 * var(--gutter));margin-inline:auto}

/* Header */
.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:22px;
}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:40px;width:auto}
.wordmark{
  font-weight:900;font-stretch:var(--narrow);
  font-size:2.1rem;line-height:1;letter-spacing:.01em;
}
/* LIFFT logo: Unbounded Black with the backwards F, as vector shapes so it stays sharp at any size */
.logo-mark{display:block;height:28px;width:calc(28px * 3609 / 750);fill:var(--strobe)}
.site-nav ul{display:flex;gap:28px;list-style:none;padding:0}
.site-nav a{
  text-decoration:none;color:var(--fog);font-weight:500;font-size:.95rem;
  padding-block:6px;border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--strobe);border-bottom-color:var(--pink)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;
  font:inherit;font-weight:600;font-size:1rem;line-height:1;
  color:var(--strobe);background:transparent;
  border:2px solid var(--strobe);border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--strobe);color:var(--black)}
/* Hot pink buttons carry black text: white on this pink is too faint to read comfortably. */
.btn-solid{background:var(--pink);border-color:var(--pink);color:var(--black)}
.btn-solid:hover{background:var(--strobe);border-color:var(--strobe);color:var(--black)}
.btn-solid:focus-visible{outline-color:var(--strobe)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.9rem}
.btn[disabled]{opacity:.6;cursor:progress}

:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* Hero */
.hero{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);
  gap:clamp(32px,5vw,72px);align-items:start;
  padding-block:clamp(32px,6vw,80px) clamp(56px,8vw,104px);
}
.hero-copy{container-type:inline-size;min-width:0}
.acronym{
  display:grid;
  font-weight:900;font-stretch:var(--narrow);
  font-size:clamp(4rem,11vw,10.5rem);
  font-size:clamp(4rem,26cqi,10.5rem);
  line-height:.84;letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--dim);
}
.acronym b{
  font-weight:inherit;
  color:var(--strobe);
  color:color-mix(in oklab, var(--pink) calc(var(--pulse, 0) * 100%), var(--strobe));
}
.acronym > span{justify-self:start;white-space:nowrap}/* Fourth headline line rotates: F*CKING, FRIENDS +, FASHION +. The lit F stays put; the rest lifts out and in. */
.rot-words{display:inline-grid}
.rot-words > span{grid-area:1/1;opacity:0;transform:translateY(.4em);transition:opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.rot-words > .is-active{opacity:1;transform:none}
.rot-words > .is-leaving{opacity:0;transform:translateY(-.4em)}
.lede{max-width:30ch;margin-top:32px;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.45}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Station panel */
.station{
  display:grid;gap:16px;
  background:var(--concrete);border:1px solid var(--line);
  padding:clamp(20px,2.5vw,28px);
}
/* Line the panel's top edge up with the top of the letters in LIFE (the headline box starts a little above them) */
.hero > .station{margin-top:clamp(4px,0.9vw,12px)}
.station-head{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--fog)}
.live{
  width:10px;height:10px;border-radius:50%;
  background:var(--dim);flex:none;
}
.station.is-on .live{background:var(--pink)}
.bpm{margin-left:auto;font-variant-numeric:tabular-nums}
.station h2{
  font-weight:800;font-stretch:var(--narrow);text-transform:uppercase;
  font-size:2.6rem;line-height:.95;
}
.station p{color:var(--fog);max-width:40ch}
.station .btn{width:100%}
.sc-wrap{display:grid}
.sc-wrap iframe{display:block;width:100%;height:300px;border:0;background:var(--concrete)}
.sc-fallback[hidden]{display:none}

/* Rooms */
.band{padding-block:clamp(56px,9vw,112px);border-top:1px solid var(--line)}
.section-title{
  font-weight:900;font-stretch:var(--narrow);text-transform:uppercase;
  font-size:clamp(2.75rem,7vw,5rem);line-height:.9;
}
.rooms{list-style:none;padding:0;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.room{
  display:grid;grid-template-columns:minmax(9rem,17rem) minmax(0,1fr);
  gap:10px 40px;align-items:baseline;
  padding-block:28px;border-bottom:1px solid var(--line);
  scroll-margin-top:24px;
}
.room h3{
  font-weight:800;font-stretch:var(--narrow);text-transform:uppercase;
  font-size:clamp(2.25rem,4.5vw,3.5rem);line-height:1;
}
.room p{max-width:56ch;font-size:1.125rem}
.text-link{color:var(--strobe);font-weight:600;text-decoration-color:var(--pink);text-underline-offset:4px;text-decoration-thickness:2px}
.text-link:hover{color:var(--pink)}

/* Signup */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;scroll-margin-top:24px}
.signup-intro p{margin-top:20px;max-width:40ch;font-size:1.125rem;color:var(--fog)}
.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{font-weight:500;font-size:.95rem}
.field input,.field textarea{
  width:100%;min-height:52px;padding:0 16px;
  font:inherit;color:var(--strobe);
  background:var(--concrete);border:1px solid var(--line);border-radius:2px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus{border-color:var(--pink);outline:none;box-shadow:0 0 0 1px var(--pink)}
.check{display:flex;gap:12px;align-items:center;font-size:1rem;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--pink);flex:none}
.demo-fields{display:grid;gap:18px}
.demo-fields[hidden]{display:none}
.form .btn{justify-self:start}
.form-msg{min-height:1.55em;color:var(--fog)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Footer */
.site-foot{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;
  padding-block:32px 40px;border-top:1px solid var(--line);
  color:var(--fog);font-size:.95rem;
}
.site-foot .wordmark{font-size:1.6rem;color:var(--strobe)}
.foot-domain{text-decoration:none;border-bottom:2px solid transparent}
.foot-domain:hover{border-bottom-color:var(--pink)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;align-items:start}
  .signup{grid-template-columns:1fr}
}
@media (max-width:720px){
  .site-nav{display:none}
  .room{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .rot-words > span{transition:none}
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* Current page in the menu */
.site-nav a[aria-current="page"]{color:var(--strobe);border-bottom-color:var(--pink)}

/* Textareas share the input look, with room to write */
.field textarea{min-height:132px;padding:14px 16px;line-height:1.5;resize:vertical}

/* ---- FML page ---- */
.fml-hero .hero-side{display:grid;gap:0;align-self:end}
.fml-hero .lede{margin-top:0;max-width:26ch;font-size:clamp(1.3rem,2vw,1.6rem)}
.intro-text{margin-top:24px;max-width:56ch;font-size:1.125rem;color:var(--fog)}

/* First drop: product image beside its copy */
.drop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.drop-media{margin:0}
.drop-media img{display:block;width:100%;height:auto;border-radius:2px}
/* front/back: hovering the photo shows the other side; the button flips it for good (and is the only way on touch) */
.flip-stage{position:relative}
.flip-stage img{transition:opacity .35s ease}
.flip-stage .flip-back{position:absolute;inset:0;opacity:0}
.drop-media.is-back .flip-back{opacity:1}
@media (hover:hover){
  .flip-stage{cursor:pointer}
  .flip-stage:hover .flip-back{opacity:1}
  .drop-media.is-back .flip-stage:hover .flip-back{opacity:0}
}
.flip-toggle{margin-top:12px;padding:4px 0;background:none;border:0;font:inherit;font-size:.9375rem;color:var(--fog);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.flip-toggle:hover{color:var(--strobe)}
@media (prefers-reduced-motion:reduce){.flip-stage img{transition:none}}
.drop-name{margin-top:16px;font-weight:600;font-size:1.25rem}
.drop-copy > p:not(.drop-name){margin-top:12px;max-width:44ch;font-size:1.125rem;color:var(--fog)}
.drop-copy .ctas{margin-top:24px}

/* Three reasons, set as plain columns */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:clamp(32px,4vw,56px)}
.point{border-top:2px solid var(--strobe);padding-top:20px}
.point h3{font-weight:800;font-stretch:var(--narrow);text-transform:uppercase;font-size:clamp(1.9rem,3vw,2.5rem);line-height:1}
.point p{margin-top:14px;max-width:38ch}

/* How a line comes together: a real sequence, so it's numbered */
.steps{list-style:none;padding:0;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line);counter-reset:step}
.step{
  display:grid;grid-template-columns:4.5rem minmax(9rem,17rem) minmax(0,1fr);
  gap:10px 32px;align-items:baseline;padding-block:28px;border-bottom:1px solid var(--line);
  counter-increment:step;
}
.step::before{
  content:counter(step);
  font-weight:900;font-stretch:var(--narrow);font-size:clamp(2.5rem,4.5vw,3.5rem);line-height:1;
  color:var(--pink);font-variant-numeric:tabular-nums;
}
.step h3{font-weight:800;font-stretch:var(--narrow);text-transform:uppercase;font-size:clamp(1.9rem,3.5vw,2.75rem);line-height:1}
.step p{max-width:52ch;font-size:1.125rem}

/* Fans and artists side by side */
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.join-col{display:grid;gap:20px;scroll-margin-top:24px}
.col-title{font-weight:900;font-stretch:var(--narrow);text-transform:uppercase;font-size:clamp(2.4rem,4.5vw,3.5rem);line-height:.92}
.join-col > p{color:var(--fog);font-size:1.125rem;max-width:40ch}

@media (max-width:900px){
  .points,.join,.drop{grid-template-columns:1fr}
}
@media (max-width:720px){
  .step{grid-template-columns:3rem minmax(0,1fr)}
  .step p{grid-column:2}
}