/* ------------------------------------------------------------------
   Charley Wren - Music For My Family
   Title, hero, tagline and photo strip. The music player is the Elfsight
   widget (see the paste spot at the bottom of index.html).
   Colors and spacing were measured from screenshots of the live site.
------------------------------------------------------------------- */

@font-face {
  font-family: "Ojuju";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/ojuju-latin-wght-normal.woff2") format("woff2");
}

:root {
  --bg: #757263;
  --text: #ffffff;

  --gutter: clamp(16px, 6vw, 113px);      /* left margin */
  --gutter-r: clamp(16px, 1.5vw, 28px);   /* right margin: the original sits close to the playlist panel */

  /* Space kept free on the right for the Elfsight playlist panel on wide screens (296px on the live site).
     If the widget already pushes the page over by itself, or its playlist starts closed, set this to 0px. */
  --player-reserve: 296px;
  --player-bar-h: 54px;                    /* room kept at the bottom for the sticky player bar */

  --font-display: "Ojuju", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Page ---------- */

.page {
  /* Lets children size themselves from the content width (cqw units). */
  container-type: inline-size;
  padding: 8px var(--gutter-r) calc(var(--player-bar-h) + 64px) var(--gutter);
}

@media (min-width: 900px) {
  .page { margin-right: var(--player-reserve); }
}

.site-title {
  height: 30px;                              /* keeps the hero at the same position as the live site */
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: min(26.5px, 6.1cqw);            /* full size on desktop, shrinks so it stays on one line on phones */
  line-height: 22px;                         /* nudges the lettering up 4px to sit where it does on the live site */
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1467 / 836;   /* the live site shows the 1366x768 image slightly cropped */
  object-fit: cover;
  border-radius: 22px;                 /* fallback */
  border-radius: 1.6cqw;               /* scales with the image, like the original */
}

/* Tagline: live text in Ojuju Bold, sized like the original's fit-text (5.6% of the content width),
   with a floor so it wraps into readable lines on phones. */
.tagline {
  /* 0.158em compensates for Ojuju's ascent so the lettering sits where it does on the live site */
  margin: calc(clamp(28px, 4vw, 57px) - 0.158em) 0 calc(clamp(48px, 7vw, 100px) + 0.158em);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(5.6cqw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- Photo strip ---------- */

.filmstrip {
  position: relative;
  margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1);   /* run edge to edge; first photo lines up with the content column */
}

.strip-track {
  display: flex;
  margin: 0;
  padding: 0 var(--gutter-r) 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter) var(--gutter-r);
  scrollbar-width: none;
  outline-offset: 4px;
}
.strip-track::-webkit-scrollbar { display: none; }

.strip-track li { flex: 0 0 auto; scroll-snap-align: start; }

.strip-track img {
  display: block;
  height: clamp(220px, 32vw, 397px);
  width: auto;
  max-width: none;
}

.strip-btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: #2b2b2b;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.strip-btn:hover { background: #fff; }
.strip-btn[disabled] { opacity: 0; pointer-events: none; }
.strip-prev { left: 15px; }
.strip-next { right: 15px; }

/* ---------- Focus ---------- */

:where(button, [tabindex]):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}