/* BeatNation home page. Everything is scoped under .bn-home so it cannot leak
   into the Groove Scribe pages. Brand tokens and fonts are in brand.css, which
   every BeatNation page links first.
   Linked from /index.html as home.css?v=dev; scripts/inject-html-bundles.mjs swaps
   in a content hash at deploy, since s/css is served without hashed filenames. */
.bn-home {
  --surface: #161d1d; --text: #eef1ec; --muted: #a7b2a9;
  background: var(--surface); color: var(--text);
  font: 400 1.0625rem/1.55 var(--bn-body);
}
@media (prefers-color-scheme: light) {
  .bn-home { --surface: #e8ece6; --text: #161d1d; --muted: #50605a; --bn-green-line: #9aa79c; }
}
.bn-home *, .bn-home *::before, .bn-home *::after { box-sizing: border-box; }
.bn-home a { color: inherit; }
.bn-home :focus-visible { outline: 3px solid var(--bn-brass); outline-offset: 3px; border-radius: 2px; }
/* The side gutter clears a notch in landscape (index.html sets viewport-fit=cover). */
.bn-wrap { --bn-gutter: clamp(1.1rem, 4vw, 2.5rem); max-width: 1180px; margin: 0 auto;
  padding: 0 max(var(--bn-gutter), env(safe-area-inset-right)) 0 max(var(--bn-gutter), env(safe-area-inset-left)); }
/* The header (brand.css) lines up with the sections below: the same column as .bn-wrap.
   Sticky here, so the page scrolls things into view below it, not under it. */
.bn-home .bn-topbar { --page-max: 1180px; --gutter: clamp(1.1rem, 4vw, 2.5rem); position: sticky; top: 0; z-index: 30; }
html { scroll-padding-top: calc(var(--bn-header-h) + env(safe-area-inset-top, 0px)); }

/* hero */
.bn-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bn-stage); color: #eef1ec; }
.bn-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .55;
  background: url(/images/hero.jpg) center 30% / cover no-repeat; }
.bn-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,18,19,.2) 0%, rgba(12,18,19,.55) 45%, var(--bn-stage) 100%); }
.bn-hero .bn-wrap { padding-top: clamp(3rem, 9vw, 7rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.bn-hero h1 { font: 700 clamp(3.1rem, 9.5vw, 7.4rem)/.9 var(--bn-display); margin: 0; text-wrap: balance; }
/* Two lines: "Every session" / "leaves a track." */
.bn-hero h1 span { display: block; }
.bn-lede { max-width: 34rem; font-size: 1.2rem; color: #d4dbd3; margin: 1.4rem 0 .5rem; }
.bn-tagline { margin: 0 0 1.8rem; color: var(--bn-brass); font-weight: 600; }
.bn-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.bn-btn { display: inline-block; font: 600 1rem/1 var(--bn-body); text-decoration: none; padding: .95rem 1.4rem;
  border-radius: 3px; border: 2px solid transparent; cursor: pointer; }
.bn-home .bn-primary { background: var(--bn-brass); color: var(--bn-brass-ink); }
.bn-primary:hover { background: var(--bn-brass-hover); }
.bn-ghost { border-color: #7e8b80; color: #eef1ec; }
.bn-ghost:hover { border-color: #fff; }
.bn-outline { border-color: var(--bn-green-line); color: var(--text); }

/* playable groove */
.bn-pad { margin-top: clamp(2.5rem, 6vw, 4.5rem); max-width: 880px; padding: 1.1rem 1.2rem 1.2rem;
  background: rgba(12,18,19,.82); backdrop-filter: blur(6px); border: 1px solid var(--bn-green-line); border-radius: 6px; color: #eef1ec; }
/* Title row: "Try a beat" and the play button; the tempo slider sits underneath. */
.bn-pad-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .4rem; }
.bn-pad-top h2 { font: 600 1.25rem/1 var(--bn-display); letter-spacing: .03em; margin: 0 auto 0 0; }
.bn-play { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--bn-brass); color: var(--bn-brass-ink); cursor: pointer; }
.bn-play svg { width: 20px; height: 20px; }
.bn-bpm { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; color: #a7b2a9; font-size: .95rem; }
.bn-bpm input { accent-color: var(--bn-brass); width: min(160px, 34vw); }
.bn-bpm output { min-width: 3.2ch; color: #eef1ec; font-weight: 600; font-variant-numeric: tabular-nums; }
.bn-grid { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: var(--bn-row-gap) .8rem; align-items: center; }
.bn-lab { font: 600 1.1rem/1 var(--bn-display); letter-spacing: .04em; color: var(--bn-text); }
/* Flex, not a 16-column grid: each step takes an equal share of what's left after the gaps,
   so the row always fits its box and every circle is the same size. (1fr grid tracks can't
   shrink below their content, which pushed the last step past the edge.) */
.bn-steps { display: flex; align-items: center; gap: var(--bn-step-gap); }
.bn-steps button { flex: 1 1 0; min-width: 0; aspect-ratio: 1; padding: 0; border-radius: 50%; border: var(--bn-step-border) solid var(--bn-outline); background: transparent;
  cursor: pointer; transition: background .08s, transform .08s; }
.bn-steps button:nth-child(4n+1):not(:first-child) { margin-left: var(--bn-beat-gap); }
.bn-steps button[aria-pressed="true"] { background: #eef1ec; border-color: #eef1ec; }
/* The hi-hat is drawn as on a drum chart (and the Scribe's grid): a bare X, no circle. */
.bn-row-hat button { display: grid; place-items: center; color: #eef1ec; font: 800 clamp(1.3rem, 4vw, 2.1rem)/1 var(--bn-display);
  -webkit-text-stroke: clamp(.8px, .25vw, 1.6px) currentColor; }
.bn-row-hat button[aria-pressed="true"] { background: transparent; border-color: transparent; }
.bn-row-hat button[aria-pressed="true"]::after { content: '✕'; }
.bn-row-snare button[aria-pressed="true"] { background: var(--bn-brass); border-color: var(--bn-brass); }
/* As in the Scribe's grid (scribe.css .bn-grid-hit): the kick is a circle in kick green,
   and the playhead is a brass ring. */
.bn-row-kick button[aria-pressed="true"] { background: var(--bn-kick); border-color: var(--bn-kick); }
.bn-steps button:focus-visible, .bn-play:focus-visible { border-radius: 50%; }   /* keep the shape under the .bn-home focus ring */
.bn-steps button.bn-now { transform: scale(1.08); box-shadow: 0 0 0 3px var(--bn-brass); }
.bn-pad small { display: block; margin-top: .9rem; color: #a7b2a9; font-size: .9rem; }

/* sections */
.bn-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.bn-sec { font: 700 clamp(2.1rem, 5vw, 3.4rem)/1 var(--bn-display); margin: 0 0 1rem; max-width: 18ch; }
.bn-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.bn-two h3 { font: 700 1.7rem/1 var(--bn-display); margin: 0 0 .6rem; padding-top: 1rem; border-top: 4px solid var(--bn-green); }
.bn-two p { margin: 0 0 1rem; color: var(--muted); max-width: 34rem; }
.bn-two ul { margin: 0; padding-left: 1.1rem; }
.bn-two li { margin: .35rem 0; }
.bn-closing-copy { max-width: 36rem; color: var(--muted); }
.bn-closing-copy + .bn-cta { margin-top: 1.4rem; }
.bn-band { background: var(--bn-green); color: #fff; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.bn-band-grid { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "copy peek" "cta peek";
  gap: 0 clamp(2rem, 5vw, 4rem); align-items: center; }
.bn-band-copy { grid-area: copy; align-self: end; }
.bn-band-peek { grid-area: peek; }
.bn-band p { color: #dce4dc; max-width: 32rem; }
.bn-band .bn-cta { grid-area: cta; align-self: start; margin-top: 1.4rem; }
/* The example library is one link to the real one, so nothing in it looks like a button. */
.bn-lib { display: block; text-decoration: none; background: #161d1d; border: 1px solid var(--bn-green-line); border-radius: 6px;
  padding: .4rem 1rem; color: #eef1ec; font-size: .97rem; }
.bn-lib:hover { border-color: var(--bn-brass); }
.bn-artist { display: flex; justify-content: space-between; align-items: center; min-height: 3rem; padding: .3rem .4rem;
  border-bottom: 1px solid #2c3736; font: 600 1.15rem/1 var(--bn-display); letter-spacing: .03em; }
.bn-artist:last-child { border-bottom: 0; }
.bn-artist span { font: 500 .8rem var(--bn-body); color: #a7b2a9; border: 1px solid #3a4745; border-radius: 99px; padding: .15rem .6rem; }
.bn-groove { padding: .55rem .4rem .7rem; border-bottom: 1px solid #2c3736; font-weight: 500; }
.bn-groove em { display: block; font-style: normal; color: #a7b2a9; font-size: .85rem; }
.bn-band .bn-lib-hint { margin: .5rem 0 0; font-size: .9rem; color: #cbd5c9; }

/* Teacher / student tabs: rendered on phones only (home_page.js), one panel at a time. */
.bn-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 1.1rem 0 1.2rem; border: 1.5px solid var(--bn-outline);
  border-radius: var(--bn-radius); overflow: hidden; }
.bn-tabs button { min-height: 50px; border: 0; background: transparent; color: var(--text); font: 600 1.05rem/1 var(--bn-body); cursor: pointer; }
.bn-tabs button[aria-selected="true"] { background: var(--bn-brass); color: var(--bn-brass-ink); }
.bn-tabs button:focus-visible { outline-offset: -5px; }

@media (max-width: 820px) {
  .bn-band-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "cta" "peek"; }
  .bn-band-peek { margin-top: clamp(2rem, 5vw, 4rem); }
}
@media (max-width: 760px) { .bn-two { grid-template-columns: 1fr; } }
/* Phones: one bar of eight big steps (home_page.js adds .bn-pad-eighths below 600px), each
   drum's name above its row, the count over the top, and a bigger play button. */
@media (max-width: 600px) {
  .bn-pad { margin-top: 1.4rem; padding: 14px 14px 12px; border-radius: 10px; background: rgba(12,18,19,.9); }
  .bn-pad-top h2 { font-size: 1.5rem; font-weight: 700; }
  .bn-play { width: 56px; height: 56px; }
  .bn-play svg { width: 24px; height: 24px; }
  .bn-bpm { margin: .5rem 0 .7rem; color: var(--bn-muted); }
  .bn-bpm input { flex: 1; width: auto; height: 32px; }
  .bn-pad small { margin-top: .6rem; color: var(--bn-muted); }
}
.bn-pad-eighths .bn-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bn-pad-eighths .bn-lab { font: 600 .95rem/1 var(--bn-display); letter-spacing: .05em; color: var(--bn-muted); margin-bottom: 5px; }
.bn-pad-eighths .bn-steps { gap: 5px; margin-bottom: 9px; }
.bn-pad-eighths .bn-steps button:nth-child(n) { margin-left: 0; }   /* no extra beat gap: the count marks the beats */
.bn-counts { display: flex; gap: 5px; margin-bottom: 8px; }
.bn-counts span { flex: 1 1 0; text-align: center; font: 600 .9rem/1 var(--bn-display); color: var(--bn-muted); }
.bn-counts .bn-beat { color: var(--bn-text); font-size: 1.1rem; }
/* Phones: buttons share a row as big tap targets; the library example comes before its button. */
@media (max-width: 600px) {
  /* An 800px portrait crop of the hero photo instead of the 4096px original (phones never
     fetch that one: only the winning background is downloaded). Made from images/hero.jpg:
       sips -c 2296 1531 hero.jpg --out crop.jpg     (centred 2:3 crop)
       cwebp -q 72 -m 6 crop.jpg -resize 800 1200 -o hero-phone.webp
       sips -z 1200 800 crop.jpg --out x.jpg && sips -s format jpeg -s formatOptions 60 x.jpg --out hero-phone.jpg
     It covers the top of the hero; the stronger gradient keeps the sub-line readable over
     the cymbals and fades into the stage before the pad. */
  .bn-hero::before { opacity: .6; background: url(/images/hero-phone.jpg) center top / 100% auto no-repeat;
    background-image: image-set(url(/images/hero-phone.webp) type("image/webp"), url(/images/hero-phone.jpg) type("image/jpeg")); }
  .bn-hero::after { background: linear-gradient(180deg, rgba(12,18,19,.35) 0, rgba(12,18,19,.72) 160px,
    rgba(12,18,19,.82) 320px, var(--bn-stage) 600px); }
  .bn-hero .bn-wrap { padding-top: 2.75rem; padding-bottom: 1.5rem; }
  .bn-hero h1 { font-size: clamp(3rem, 15vw, 3.9rem); line-height: .92; }
  .bn-lede { font-size: 1.15rem; line-height: 1.5; color: #e4eae3; margin: .9rem 0 .5rem; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
  .bn-tagline { margin-bottom: 1.3rem; }
  .bn-section { padding: 2.75rem 0; }
  .bn-sec { font-size: clamp(2.2rem, 10vw, 2.7rem); max-width: none; text-wrap: balance; }
  .bn-cta { flex-wrap: nowrap; gap: .6rem; }
  .bn-cta .bn-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 52px; padding: .6rem .8rem; border-radius: var(--bn-radius); }
  .bn-hero .bn-ghost { background: rgba(12,18,19,.55); }
  .bn-band-grid { grid-template-areas: "copy" "peek" "cta"; }
  .bn-band-peek { margin-top: .3rem; }
  .bn-band .bn-lib-hint { margin-bottom: 1.3rem; }
  .bn-band .bn-cta { margin-top: 0; }
  .bn-two > [role="tabpanel"] h3 { padding-top: 0; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-steps button { transition: none; }
  .bn-steps button.bn-now { transform: none; }
}