/* P324 landing (design A3, frame A0cxQk): the tokens every section of the home page shares.
   Sections own their own stylesheet beside this one; nothing here styles a single section. */

@font-face {
  font-family: 'Big Shoulders';
  src: url('/assets/fonts/BigShoulders-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ♭ ♮ ♯: none of the faces above has the accidentals, so chord names like B♭ and F♯ fell back to a
   thin system font. A 1 KB subset of DejaVu Sans Condensed (Bitstream Vera licence, LICENSE-DejaVu.txt)
   serves the body and mono stacks, and ♮ for display. It is its own family, first in those stacks; its
   unicode-range is just those three code points, so every other character falls through to the real face.
   (Same-named faces with a unicode-range made Chrome skip the full face.) */
@font-face {
  font-family: 'CL Accidentals';
  src: url('/assets/fonts/Accidentals-Regular.woff2') format('woff2');
  font-weight: 100 900;
  unicode-range: U+266E-266F;
  font-display: swap;
}

/* DejaVu's ♭ is a hairline with a bowl half the cap height: at body sizes it reads as a speck beside
   the letter (P324). Its own face, scaled 130%, brings the bowl to the x-height; ♮ and ♯ are already cap-sized. */
@font-face {
  font-family: 'CL Accidentals';
  src: url('/assets/fonts/Accidentals-Regular.woff2') format('woff2');
  font-weight: 100 900;
  unicode-range: U+266D;
  size-adjust: 130%;
  font-display: swap;
}

/* The display stack's own ♭ and ♯: Big Shoulders' own 'b' and '#' (the chord-chart convention), mapped to
   U+266D / U+266F in a 1.4 KB variable subset, so they match the letters' weight and width at every size.
   DejaVu's music glyphs are too light beside 900-weight display type. ♮ falls through to the face above. */
@font-face {
  font-family: 'CL Accidentals Display';
  src: url('/assets/fonts/Accidentals-Display.woff2') format('woff2');
  font-weight: 100 900;
  unicode-range: U+266D, U+266F;
  font-display: swap;
}

@font-face {
  font-family: 'Permanent Marker';
  src: url('/assets/fonts/PermanentMarker-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --lp-bg: #060607;
  --lp-surface: #0e0e12;
  --lp-surface-2: #16161b;
  --lp-line: #ffffff17;
  --lp-line-strong: #ffffff2e;
  --lp-ink: #f5f5f6;
  --lp-ink-2: #c9c9d1;
  --lp-ink-3: #8a8a94;
  --lp-red: #e0184f;          /* solid action red: white text 4.8:1 */
  --lp-red-hover: #c8143f;
  --lp-hot: #ff2d55;          /* display red (HEAR, eyebrows); never behind white body text */
  --lp-gold: #ffd166;
  --lp-chord-lit: #ffe8b8;
  --lp-cream: #f4efe6;
  --lp-paper-ink: #111014;
  --lp-action: linear-gradient(90deg, #e0184f 0%, #b0179a 55%, #6d28d9 100%);
  --lp-pro: linear-gradient(200deg, #ff2d55, #e0187a, #8b2be2);
  --lp-stem-vocals: #ff4d6d;
  --lp-stem-drums: #f5a524;
  --lp-stem-bass: #8b5cf6;
  --lp-stem-piano: #2dd4bf;
  --lp-stem-guitar: #3b82f6;
  --lp-stem-other: #a3e635;
  /* Song sections, the Studio's dark values (studio/tokens.css --st-sect-*). */
  --lp-sect-intro: #60a5fa;
  --lp-sect-verse: #a78bfa;
  --lp-sect-chorus: #f472b6;
  --lp-sect-bridge: #2dd4bf;
  --lp-sect-outro: #fbbf24;

  --lp-font: 'CL Accidentals', 'Geist', system-ui, sans-serif;
  --lp-mono: 'CL Accidentals', 'Geist Mono', ui-monospace, monospace;
  --lp-display: 'CL Accidentals Display', 'Big Shoulders', 'CL Accidentals', 'Geist', sans-serif;
  --lp-hand: 'Permanent Marker', 'Geist', cursive;

  /* Motion tokens, spec M1–M21 */
  --lp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lp-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --lp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lp-beat: 420ms;           /* 143 BPM, the demo song's tempo */

  --lp-page: 1440px;
  --lp-gutter: clamp(20px, 5.5vw, 80px);

  /* Tape on a paper card: one colour and height; top: var(--lp-tape-top) sits it half on, half off the top edge. */
  --lp-tape: #d9b25acc;
  --lp-tape-h: 30px;
  --lp-tape-top: calc(var(--lp-tape-h) / -2);
}

.lp {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--lp-font);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

.lp-shell {
  width: 100%;
  max-width: var(--lp-page);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
  box-sizing: border-box;
}

.lp-section {
  --lp-pad: clamp(80px, 10vw, 140px);
  position: relative;
  padding-block: var(--lp-pad);
  /* A #link or glide lands the section's first line 32 px under the fixed header (12 px + 58 px bar), not its padding. */
  scroll-margin-top: calc(70px + 32px - var(--lp-pad));
}

/* Display type: the poster headline face. */
.lp-display {
  font-family: var(--lp-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.01em;
  margin: 0;
}

.lp-h2 {
  font-size: clamp(56px, 8.4vw, 120px);
}

.lp-eyebrow {
  font-family: var(--lp-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-hot);
  margin: 0 0 14px;
}

.lp-hand {
  font-family: var(--lp-hand);
  color: var(--lp-gold);
  font-weight: 400;
  display: inline-block;
  transform: rotate(-3deg);
}

/* A script note under its display heading clears the heading's text box: that box hangs ~0.18em of the
   heading's size below its 0.85 line, and the note's tilt (-3°, up to -7° with the scroll lean) lifts
   its far end. 1.7em of the note's own size covers both at every width; the note never moves on its own. */
.lp-display + .lp-hand { margin-top: 1.7em; }

.lp-body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--lp-ink-2);
}

/* Buttons. One gradient pill (the nav's Add to Chrome only), one solid red, one white, one outline. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  font: 700 16px/1 var(--lp-font);
  text-decoration: none;
  cursor: pointer;
  padding: 16px 26px;
  transition: transform 250ms var(--lp-ease-spring), background-color 200ms, box-shadow 250ms;
}

.lp-btn:focus-visible {
  outline: 2px solid var(--lp-gold);
  outline-offset: 3px;
}

.lp-btn--solid {
  background: var(--lp-red);
  color: #fff;
  box-shadow: 0 14px 40px #e0184f66;
}

.lp-btn--solid:hover {
  background: var(--lp-red-hover);
  transform: translateY(-1px);
}

.lp-btn--action {
  background: var(--lp-action);
  background-size: 160% 100%;
  color: #fff;
  box-shadow: 0 6px 18px #b0179a66;
  transition: transform 250ms var(--lp-ease-spring), background-position 250ms var(--lp-ease-out), box-shadow 250ms;
}

.lp-btn--action:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px #b0179a88;
}

.lp-btn--white {
  background: #fff;
  color: #e0185a;
}

.lp-btn--outline {
  background: transparent;
  color: var(--lp-ink);
  box-shadow: inset 0 0 0 1.5px var(--lp-line-strong);
}

.lp-btn:active {
  transform: scale(0.97);
}

.lp .sprite {
  display: none; /* icons are used through <use href>; the sheet itself takes no room */
}

.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .lp *,
  .lp *::before,
  .lp *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}