/* ==========================================================================
   #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);
}

/* 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; }
}

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

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

.about__video {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Date, time and venue as a compact block. This was previously an outlined
   display heading plus an address filling the lower half of the hero — a
   lot of screen for one line of fact. */
.event-meta {
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding-left: 16px;
  border-left: 3px solid var(--violet);
}

.event-meta__when,
.event-meta__where { display: block; }

.event-meta__when {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.event-meta__where {
  margin-top: 4px;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 400;
  color: var(--ink-soft);
  opacity: .8;
}

/* --- Organiser ------------------------------------------------------------ */

.organiser {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.organiser__eyebrow {
  margin: 0 0 .6em;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet);
}

/* Sits under an eyebrow, so it needs less gap than a standalone title. */
.organiser .section__title { margin-bottom: .55em; }

.organiser__body p {
  max-width: 58ch;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
}

.organiser__link {
  display: inline-block;
  margin-top: 1.4em;
  font-weight: 700;
  color: var(--violet);
}

.organiser__link::after { content: " →"; }

.organiser__mark {
  display: flex;
  justify-content: center;
}

.organiser__mark img {
  width: min(300px, 100%);
  height: auto;
}

@media (max-width: 760px) {
  .organiser { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 40px); }
  .organiser__mark { justify-content: flex-start; }
  .organiser__mark img { width: min(200px, 60%); }
}

/* --- 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);
}

/* 280px min lands on three columns at the 1080px measure, so six talks read
   as a balanced 3x2 rather than 4+2 with a hole in the second row. Drops to
   two, then one, as the viewport narrows. */
.talks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 3vw, 28px);
}

/* No caption under these: the thumbnails already carry the talk title and
   the speaker as designed artwork, so repeating it as text underneath said
   everything twice. The title still reaches assistive tech and crawlers
   through the link's aria-label, and the VideoObject schema on 2025.html. */

/* Click-to-play facade. Looks like a video, is actually a link until
   clicked — see assets/js/video-facade.js. */
.video-facade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* YouTube's maxresdefault is padded to 16:9 for some uploads; cover
     crops the padding rather than showing bars. */
  transition: transform .4s ease, opacity .2s ease;
}

.video-facade:hover img,
.video-facade:focus-visible img {
  transform: scale(1.03);
  opacity: .85;
}

.video-facade:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Play triangle drawn in CSS — matches the dark circular controls used by
   the photo strip rather than importing YouTube's red button. */
/* Bottom-right rather than centred: these thumbnails carry the talk title
   and speaker as artwork down the left-hand side, and a centred button sat
   right on top of it. The lower-right corner is over the speaker photo on
   every one of them. */
.video-facade__play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(26, 26, 30, .72);
  backdrop-filter: blur(6px);
  transition: background-color .15s ease, transform .15s ease;
  pointer-events: none;
}

.video-facade__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
}

.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
  background: var(--violet);
  transform: scale(1.08);
}

/* A single large video (the aftermovie) rather than one of six in a grid.
   Its thumbnail has no text down the side, so the button can sit centred
   where it reads more obviously as "play this". */
.video-facade--feature .video-facade__play {
  right: auto;
  bottom: auto;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
}

.video-facade--feature .video-facade__play::after {
  border-width: 11px 0 11px 19px;
}

.video-facade--feature:hover .video-facade__play,
.video-facade--feature:focus-visible .video-facade__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.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; }