/* The public face of the jukebox.
   Loaded after app.css and only on the landing page, so the tokens, buttons
   and chrome all come from there and nothing here weighs on the party pages.

   Same amber-on-charcoal identity, but given room to breathe: a wider measure,
   full-bleed bands, and one motif borrowed from the brand mark -- the warm
   glow of a record under a light. */

.landing {
  /* The guest pages are a single column with a hard measure. A landing page
     is not, so the sections manage their own padding. */
  --wrap-wide: 62rem;
}

.landing main { padding-block: 0; }

.wrap--wide { width: min(100% - 2rem, var(--wrap-wide, 62rem)); }

.landing__header { position: static; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 10vw, 6.5rem) clamp(2.5rem, 8vw, 5rem);
  border-bottom: 1px solid var(--line);
}

/* The glow off the brand mark, blown up to light the whole hero. */
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 90%;
  background: radial-gradient(50% 60% at 50% 60%, rgba(255, 179, 64, 0.16), transparent 70%);
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__title {
  font-size: clamp(2.1rem, 7vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0.35rem 0 0;
  text-wrap: balance;
}

.hero__title-accent {
  background: linear-gradient(180deg, #fff3e0, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  max-width: 34rem;
  margin: 1.1rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.9rem;
}

/* ---------------------------------------------------------------- sections */

.section { padding-block: clamp(2.5rem, 7vw, 4.25rem); }

.section--raised {
  background: var(--bg-sunken);
  border-block: 1px solid var(--line);
}

.section-title {
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  text-wrap: balance;
}

/* ------------------------------------------------------------------- steps */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.steps__item { position: relative; padding-top: 0.4rem; }

.steps__num {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  /* Outlined rather than filled: three big amber slabs would shout over the
     headings they are meant to be numbering. */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--amber-deep);
  margin-bottom: 0.35rem;
}

.steps__title {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.steps__item p {
  margin: 0;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- features */

.features {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.feature {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.3rem;
}

.feature__title {
  font-size: 1rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

/* A single amber tick of a leading rule, so the cards read as a set. */
.feature__title::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--amber-deep);
  margin-bottom: 0.7rem;
}

.feature p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
  text-wrap: pretty;
}

/* ------------------------------------------------------- note for guests */

.party-note {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--bg-raised);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
}

.party-note__icon {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--amber);
  margin: 0.1rem 0 0;
  flex: none;
}

.party-note__title {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.party-note p { margin: 0 0 0.5rem; color: var(--ink-muted); text-wrap: pretty; }
.party-note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ footer */

.landing__footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.landing__footer-inner p { margin: 0; max-width: 42rem; }
.landing__footer-links a { color: var(--ink-muted); }

/* The one place a landing page tends to forget itself. */
@media (prefers-reduced-motion: reduce) {
  .landing * { animation: none !important; transition: none !important; }
}