/* ==========================================================================
   #musictech at Slush — site styles
   Sections stack in normal document flow. No absolute positioning, no
   pixel coordinates: add or remove a <section> and everything below reflows.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

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

/* --- Design tokens -------------------------------------------------------- */

:root {
  --ink: #1a1a1e;          /* dark backgrounds and dark-on-light text */
  --ink-soft: #1f2128;     /* body copy on light backgrounds */
  --paper: #ffffff;
  --accent: #17e87a;       /* links, highlights (green from the logo) */
  --violet: #7c74bf;       /* buttons (violet from the logo) */
  --violet-band: rgba(90, 80, 176, 0.77);
  --muted: rgba(255, 255, 255, 0.62);

  --font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Dosis", var(--font);

  --nav-h: 46px;           /* sticky bar height: 12px padding x2 + ~22px line */
  --measure: 1080px;       /* content column width, matches the original */
  --gutter: clamp(20px, 5vw, 108px);
  --section-y: clamp(48px, 8vw, 104px);
}

/* --- Base ----------------------------------------------------------------- */

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; font-weight: 800; }
p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

/* Visible only to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Layout primitives ---------------------------------------------------- */

.section {
  padding: var(--section-y) var(--gutter);
}

.section--dark {
  background: var(--ink);
  color: var(--paper);
}

.section--violet {
  background: var(--violet-band);
  color: var(--paper);
}

.section__inner {
  max-width: var(--measure);
  margin-inline: auto;
}

.section__title {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 1em;
}

.section--dark .section__title,
.section--violet .section__title { color: var(--paper); }

.lede {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  max-width: 62ch;
}

/* Grey italic note under a call to action */
.note {
  font-size: 14px;
  color: var(--muted);
  max-width: 24ch;
}

/* --- Button --------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 14px 28px;
  background: var(--violet);
  color: var(--paper);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s ease;
}

.button:hover {
  background: #6b62b4;
  color: var(--paper);
  text-decoration: none;
}

/* --- Site nav ------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ink);
  padding: 12px var(--gutter);
}

/* Keep a jumped-to section's heading clear of the sticky bar. */
[id] { scroll-margin-top: var(--nav-h); }

.nav__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  gap: 28px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.nav a {
  color: var(--paper);
  font-size: 14px;
  font-weight: 400;
}

.nav a:hover { color: var(--accent); text-decoration: none; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(56px, 9vw, 120px);
}

/* Two fragments of the brand's "#" mark, cropped from the same source image
   and pinned to the hero's own top-left and bottom-right corners.

   This used to be one image stretched to `100% 100%` of the hero so both
   fragments landed in their corners at once. That broke once the hero grew
   a second row (the photo beside the date): stretching to fill the hero's
   height meant the artwork's vertical scale — and therefore where each
   shape actually fell — depended on how tall the hero's content happened
   to be. It had already crossed the venue address once (looked like a
   strikethrough) by the time this was caught.

   Splitting it into two small, independently-sized accents fixes that for
   good: each is sized in vw (tied to viewport width, which doesn't move
   when a row is added) and capped with clamp(), so neither can ever grow
   into the middle of the hero no matter how much content stacks up above
   or below. `background-size` is a fixed percentage of each box — not the
   hero — chosen so the crop shows only that one fragment at native
   proportions; see the git history for the source pixel math if this ever
   needs re-deriving from a different export of the artwork. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  background: url("../img/hero-bg.png") no-repeat;
  pointer-events: none;
}

.hero::before {
  top: 0;
  left: 0;
  width: clamp(90px, 10vw, 160px);
  aspect-ratio: 635 / 1041;
  background-position: top left;
  background-size: 545% 168%;
}

.hero::after {
  bottom: 0;
  right: 0;
  width: clamp(180px, 22vw, 340px);
  aspect-ratio: 1110 / 608;
  background-position: bottom right;
  background-size: 312% 287%;
}

.hero__inner {
  position: relative;          /* lifts the content above the motif */
  max-width: var(--measure);
  margin-inline: auto;
}

/* The wordmark is the page's <h1> (its alt text is the accessible page
   title), but visually it should still just be an image — no heading
   margin of its own on top of the logo's spacing below. */
.hero h1 {
  margin: 0;
}

.hero__logo {
  width: min(754px, 100%);
  margin-bottom: clamp(28px, 4vw, 52px);
}

.hero__lede {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  max-width: 46ch;
  margin-bottom: 1.6em;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: clamp(40px, 6vw, 80px);
}

/* Hollow outlined date: dark fill on a dark ground, ringed by a 1px white
   shadow in four directions. Reproduces the original Unbounce treatment. */
.hero__date {
  font-size: clamp(34px, 6vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 clamp(24px, 4vw, 44px);
  color: var(--ink);
  text-shadow:
    -1px -1px 0 var(--paper),
     1px -1px 0 var(--paper),
    -1px  1px 0 var(--paper),
     1px  1px 0 var(--paper);
}

/* Photo strip. Scrolls sideways so a dozen photos cost one row of height
   instead of a whole screen. Native scrolling, with arrows layered on top
   purely as an affordance — the strip still scrolls by drag, wheel, and
   keyboard if the arrows never appear. Sits on the light About section, so
   its furniture is dark-on-light. */
.about__gallery {
  margin-top: clamp(40px, 6vw, 72px);
}

.gallery {
  position: relative;
}

.gallery__strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 26, 30, .35) transparent;
}

.gallery__strip::-webkit-scrollbar { height: 6px; }
.gallery__strip::-webkit-scrollbar-track { background: rgba(26, 26, 30, .08); }
.gallery__strip::-webkit-scrollbar-thumb { background: rgba(26, 26, 30, .35); }

.gallery__strip:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

.gallery__strip img {
  flex: 0 0 auto;
  width: clamp(190px, 24vw, 280px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  scroll-snap-align: start;
}

.gallery__arrow {
  position: absolute;
  top: calc(50% - 12px);            /* 12px offsets the scrollbar gutter */
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(26, 26, 30, .15);
  border-radius: 50%;
  background: rgba(26, 26, 30, .78);
  backdrop-filter: blur(6px);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

.gallery__arrow svg { width: 20px; height: 20px; }

.gallery__arrow--prev { left: -10px; }
.gallery__arrow--next { right: -10px; }

.gallery__arrow:hover { background: var(--violet); }

.gallery__arrow:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.gallery__arrow:disabled {
  opacity: .28;
  cursor: default;
}

.gallery__arrow:disabled:hover { background: rgba(26, 26, 30, .78); }

/* Touch devices scroll by swiping, so the arrows are redundant clutter. */
@media (hover: none) {
  .gallery__arrow { display: none; }
}

/* Date/venue paired with a photo, photo leading — on mobile that's a stacked
   "here's what it looks like" beat before the logistics; on desktop, flowing
   left to right, the same order reads as the photo introducing the details
   beside it.

   Deliberately flex, not grid: a grid split across the full measure (as
   this first was) gives the text column the entire remaining width, which
   left-aligns the text and anchors the photo at the far right — a dead gap
   between them, photo stranded on its own. Flex with no grow on either
   child sizes the group to its content instead, so the photo and text sit
   adjacent with just `gap` between, and any leftover space falls after the
   text rather than between the two. */
.hero__details {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.hero__photo {
  /* <figure> carries a UA default of `margin: 1em 40px`. Left unreset it
     offsets the photo 40px and pushes it past the content column on the
     stacked layout, where the photo is width:100%. */
  margin: 0;
  flex: 0 0 clamp(200px, 22vw, 270px);
}

.hero__photo img {
  width: 100%;
  aspect-ratio: 320 / 412;
  object-fit: cover;
}

.hero__info {
  flex: 0 1 auto;
}

@media (max-width: 700px) {
  .hero__details { flex-direction: column; align-items: flex-start; }
  .hero__photo { flex-basis: auto; width: 100%; margin-bottom: clamp(20px, 4vw, 32px); }
}

.hero__venue {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 1.4;
}

/* --- About ---------------------------------------------------------------- */

.about__body {
  max-width: 74ch;          /* full section width reads too wide as prose */
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 400;
}

/* --- Program -------------------------------------------------------------- */

.program__list {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
}

.program__item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
}

.program__time {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  text-align: right;
  color: var(--paper);
  white-space: nowrap;
}

.program__title {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700;
  margin: 0 0 .35em;
  color: var(--paper);
}

.program__detail {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 400;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 620px) {
  .program__item { grid-template-columns: 1fr; gap: 4px; }
  .program__time { text-align: left; color: var(--accent); }
}

/* --- Last year's talks (Program filler until 2026 speakers land) ---------- */

.talks {
  margin-top: clamp(40px, 6vw, 64px);
}

.talks__intro {
  font-size: clamp(17px, 1.8vw, 20px);
  margin-bottom: clamp(20px, 3vw, 32px);
}

.talks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 3vw, 28px);
}

.talks__caption {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}

.video--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 12px;
}

/* --- Speakers ------------------------------------------------------------- */

.speakers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.speaker__photo {
  width: 198px;
  height: 198px;
  object-fit: cover;
  margin-bottom: 16px;
}

.speaker__name {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 .4em;
  color: var(--ink);
}

.speaker__bio {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
}

/* --- FAQ ------------------------------------------------------------------ */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 44px);
  margin: 0;
}

.faq__q {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 700;
  color: var(--paper);
  margin-bottom: .5em;
}

.faq__a {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

/* --- Video ---------------------------------------------------------------- */

.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Partners ------------------------------------------------------------- */

.partners__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(28px, 5vw, 64px);
}

.partners__row img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

/* --- Placeholder (used where content is not announced yet) ---------------- */

.placeholder {
  border: 1px dashed currentColor;
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 500;
  opacity: .75;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 28px var(--gutter);
  font-size: 16px;
}

.footer__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
}

/* --- Archive banner ------------------------------------------------------- */

.archive-banner {
  /* margin:0 matters — this is a <p>, and the base paragraph margin would
     otherwise show a strip of the white page background under the banner. */
  margin: 0;
  background: var(--violet);
  color: var(--paper);
  padding: 12px var(--gutter);
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}

.archive-banner a { color: var(--paper); text-decoration: underline; }