/* yonasmedia.com — colours and type lifted from the Squarespace site it replaces.
   Every colour is a custom property; nothing hardcodes a hex below :root. */
:root {
  --bg: #f2f2f2;
  --ink: #2d2d2e;
  --ink-soft: #6b6b6d;
  --accent: #f5ff86;
  --paper: #ffffff;
  --line: #d9d9da;
  --on-dark: #f2f2f2;
  --on-dark-soft: #a9a9ab;

  /* Obviously Wide on the old site is an Adobe font licensed through Squarespace.
     Archivo (Google, variable width) is the closest free stand-in for the nav. */
  --font-wide: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Archivo", Georgia, serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  /* Read off the live site's .content-wrapper: max-width 1700px, padding 0 4vw.
     A fixed 24px gutter went edge-to-edge on any laptop narrower than the cap,
     which is why every page looked wider and larger than the real one. */
  --wrap: 1700px;
  --gutter: 4vw;
  --gap: 28px;

  /* Squarespace's type scale, copied from its site.css: every size is
     min((v - 1) * 1.2vw + 1rem, max((v - 1) * 0.012 * 1700px + 1rem, v * 1rem)).
     Headings grow with the window and stop at a 1700px page; body text (v < 1)
     shrinks slightly as the window widens. Fixed px sizes read as "too big". */
  --sq-h2: min(calc(1rem + 2.64vw), 60.88px);    /* heading 2, v 3.2 */
  --sq-h3: min(calc(1rem + 1.2vw), 36.4px);      /* heading 3, v 2 */
  --sq-h4: min(calc(1rem + 0.24vw), 20.08px);    /* heading 4, v 1.2 */
  --sq-large: min(calc(1rem + 0.096vw), 17.63px); /* large text, v 1.08 */
  --sq-body: min(calc(1rem - 0.12vw), 14.4px);   /* normal text and nav, v .9 */
  --sq-small: min(calc(1rem - 0.228vw), 12.96px); /* small text, v .81 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--sq-body);
  line-height: 1.55;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  /* aligned to the same gutter as the content: the live logo sits at 4vw and is
     256px wide - ours was 128px, half size, at the top of every page */
  /* full width with the 4vw gutter, like the live header (measured 123px tall at
     1600, 144px at 2290 - its padding grows with the window) */
  gap: 24px; padding: calc(1.5vw + 12px) var(--gutter);
}
.logo img { width: 256px; }
/* live spacing: 2.4vw between items (55px at 2290), icons 17px apart */
.site-nav { display: flex; align-items: center; gap: 2.4vw; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-wide);
  font-weight: 600; font-size: var(--sq-body); letter-spacing: 0.26em;
  text-transform: uppercase; text-decoration: none;
  font-stretch: 125%;
}
.site-nav a:hover { background: var(--accent); }
.social { display: flex; gap: 17px; margin-left: 0.5vw; }
.social svg { width: 20px; height: 20px; }
.social a { display: inline-flex; opacity: .75; }
.social a:hover { opacity: 1; }

/* ---------- hero slider ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); }
/* transform-driven, not a scroll container — an overflow-x:auto track swallows
   the page's wheel events and the visitor cannot scroll past the hero. */
.hero-track { display: flex; transition: transform .5s ease; will-change: transform; }
/* The live site's reel gives every image the SAME HEIGHT and lets the width follow
   its own aspect ratio (measured: 476px tall, widths 476/572/682/714). Forcing thirds
   with object-fit:cover cropped every square portrait to 1.37 — heads cut off.
   48vh and "isCropping: false" are read from the live section's own markup. */
.hero-slide { flex: 0 0 auto; }
.hero-slide img, .hero-slide video {
  height: 48vh; min-height: 260px; width: auto; max-width: none;
}
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(242, 242, 242, .85); color: var(--ink);
  border: 0; width: 46px; height: 46px; cursor: pointer;
  font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.hero-arrow:hover { background: var(--accent); }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }

/* ---------- mobile menu button ---------- */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 5px 0; }

/* ---------- sections ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  /* the live site centres every section heading — ARTISTS, UPCOMING SHOWS, NEWS, TEAM */
  font-size: var(--sq-h2); margin: 64px 0 32px; text-align: center;
}
.band-dark { background: var(--ink); color: var(--on-dark); padding: 8px 0 64px; }
.section-title.accent { color: var(--accent); }
.section-title.centered { text-align: center; }

/* horizontal carousel — the featured strip scrolls rather than stacking */
.carousel-head { display: flex; align-items: baseline; justify-content: space-between; }
.carousel-arrows { display: flex; gap: 10px; }
.car-arrow {
  background: none; border: 0; color: var(--on-dark-soft);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.car-arrow:hover { color: var(--accent); }
.carousel {
  /* three across, like the live site's NEWS row (measured 541px items in a 1622px column) */
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); align-items: start;
  gap: var(--gap); overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar { display: none; }
.more { margin-top: 30px; }
.shows-home .more, .band-dark .more { text-align: center; }
.eyebrow {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-dark-soft); margin: 0 0 18px;
}
/* the live NEWS strip labels itself "Featured" in plain 14px body type */
.band-dark .carousel-head .eyebrow {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--on-dark);
}
.eyebrow.dark { color: var(--ink-soft); }

/* ---------- post grid ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
.post-grid.wide { gap: 34px var(--gap); }
.post-card { text-decoration: none; display: block; }
.post-card img, .post-card video { width: 100%; height: auto; }
/* The live NEWS row crops its thumbnails to 3:2 (measured 508x339). Two of them are
   animated and arrive 16:9, so without this they letterbox at half the size. */
.carousel .post-card img, .carousel .post-card video {
  aspect-ratio: 3 / 2; object-fit: cover; object-position: center 22%;
}
.post-card h3 {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  line-height: 1.35; margin: 12px 0 4px;
}
/* the homepage strip: titles 20px/500, dates 13px (measured on the live page) */
.carousel .post-card h3 { font-size: 20px; font-weight: 500; line-height: 1.2; }
.carousel .post-card .date { font-size: 13px; }
.post-card .date { font-size: 11px; color: var(--on-dark-soft); margin: 0; }
.post-card.light .date { color: var(--ink-soft); }
.post-card:hover h3 { background: var(--accent); color: var(--ink); }

/* ---------- artists ---------- */
.artist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gap); align-items: start; }
.artist-card { text-decoration: none; text-align: center; }
/* The live roster is a square grid (measured 507x507, object-fit:cover). Natural
   heights made the grid ragged and each photo smaller than the real page's. */
.artist-card img, .artist-card video {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%;
}
.artist-card .name {
  display: inline-block; margin-top: 14px; background: var(--accent);
  font-family: var(--font-wide); font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 2px 5px;
}

/* ---------- team (/about) ----------
   Measured on the live page: four across, 357x446 boxes (4:5) with object-fit
   CONTAIN, 34px gutter, name bold, role italic, black EMAIL button. The export
   gives this as a flat image/text stream, so it rendered as a tall single file. */
.team-grid {
  width: min(1530px, 100vw - 2 * var(--gutter));
  margin-left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  text-align: left; margin-bottom: 56px;
}
.team-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.team-who p { margin: 0 0 4px; font-size: 15px; }
.team-who p:first-child { margin-top: 14px; }
.team-who em { color: var(--ink-soft); font-size: 13px; }
.team-who a {
  display: inline-block; margin-top: 8px; background: var(--ink); color: var(--bg);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; padding: 4px 10px;
}
.team-who a:hover { background: var(--accent); color: var(--ink); }

/* ---------- shows ---------- */
.artist-shows { margin: 0 0 56px; }
/* measured on the live page: Bricolage 19.9px/700, letter-spacing 1.39px.
   /shows aligns these LEFT; only the homepage's two columns centre them. */
.artist-shows h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--sq-h4);
  letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 18px; text-align: left;
}
.shows-list.two-col .artist-shows h3 { text-align: center; }
.dates { list-style: none; margin: 0; padding: 0; }
/* The live rows stack: date, then venue @ time, then support, then city — all left,
   with the pills right-aligned against the date. A 130px date column plus a third
   column pushed the pills to the far edge of a full-width page. */
.dates li {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px;
  padding: 17px 0; border-top: 1px solid var(--line); align-items: start;
}
.d-when { grid-column: 1; }
.d-what { grid-column: 1; }
.d-links { grid-column: 2; grid-row: 1 / span 2; }
/* type read off the live rows: date 13/700 ls 0.5px, venue and city both 16/500 */
.d-date {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.d-what { display: flex; flex-direction: column; gap: 6px; }
.d-venue { font-size: 16px; font-weight: 500; }
.d-time { color: var(--ink-soft); }
.d-support { font-size: 13px; color: var(--ink-soft); }
.d-city { font-size: 16px; font-weight: 500; color: var(--ink-soft); }
.d-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  background: var(--accent); color: var(--ink); text-decoration: none;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.pill:hover { background: var(--ink); color: var(--accent); }
.empty { color: var(--ink-soft); font-style: italic; }
/* The homepage runs the artists in two columns (measured: 511px columns, 252px
   gutter). Column flow, not a grid — the live page lets a tall artist run on. */
/* A row stretched across the full content width is what reads as "blown up": the
   venue sat in a 1334px box with the pills stranded at the far edge. The live
   /shows column is 1123px at a 1628px viewport; the homepage pair totals 1275px. */
.shows-list { max-width: 1123px; margin: 0 auto; }
.shows-list.two-col { max-width: 1275px; column-count: 2; column-gap: clamp(40px, 13vw, 252px); }
.shows-list.two-col .artist-shows { break-inside: avoid; }

/* ---------- article / generic blocks ---------- */
/* A centred column with a readable measure. Squarespace ran this narrow and
   full-height, so one poster took three screens of scrolling; images here are
   capped in height and never cropped. */
.article { max-width: 900px; margin: 0 auto; padding: 40px 24px 72px; }
.article > .eyebrow, .article > h1 { text-align: center; }
.article h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.14; letter-spacing: 0.01em;
  margin: 10px auto 32px; max-width: 24ch;
}
.article .blk-text { margin-left: auto; margin-right: auto; }
.article .blk-img { text-align: center; }
.article .blk-img img, .article .blk-img video {
  max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto;
}
.article .blk-btn { display: inline-block; }
.article .tags { text-align: center; }
.blk-h {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em;
  margin: 44px 0 16px; line-height: 1.15;
}
h1.blk-h { font-size: clamp(30px, 6vw, 64px); text-transform: uppercase; }
h2.blk-h { font-size: clamp(24px, 4vw, 40px); text-transform: uppercase; }
h3.blk-h { font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-wide); }
h4.blk-h { font-size: 17px; font-family: var(--font-body); font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--ink-soft); }
.blk-text { max-width: 68ch; margin: 0 0 18px; }
.blk-text p { margin: 0 0 14px; }
.blk-img { margin: 26px 0; }
.blk-img figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.blk-btn {
  display: inline-block; background: var(--accent); color: var(--ink);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 16px; text-decoration: none; margin: 6px 8px 6px 0;
}
.blk-btn:hover { background: var(--ink); color: var(--accent); }
.blk-embed { position: relative; padding-top: 56.25%; margin: 26px 0; }
.blk-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.tags { margin-top: 40px; }
.tags a {
  display: inline-block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 4px 9px; margin: 0 6px 6px 0; text-decoration: none;
}

/* ---------- news post ----------
   As on the live post pages: an ink page, white type, the title centred in
   heading-3 size (36px at full width), and text, video and buttons all sharing
   one column the width of the page content (1580px at a 2290px window). */
.post-band { background: var(--ink); color: var(--on-dark); }
.article.post {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  padding: 3.3vmax calc(var(--gutter) + 3.5%) 6.6vmax;
}
.article.post > .eyebrow { color: var(--on-dark-soft); }
.article.post h1 {
  font-size: var(--sq-h3); line-height: 1.6; letter-spacing: 0.07em;
  max-width: none; margin: 10px auto 40px; color: var(--on-dark);
}
.article.post .blk-text { max-width: none; line-height: 1.92; }
.article.post .blk-text h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--sq-h4);
  letter-spacing: 0.07em; margin: 36px 0 14px;
}
.article.post .blk-text a { color: var(--accent); }
.article.post .blk-btn { margin: 0 8px 26px 0; }
.article.post hr { border-top-color: rgba(242, 242, 242, .2); margin: 56px 0; }
body:has(.post-band) .site-footer { margin-top: 0; }

/* ---------- footer ----------
   The live footer: logo badge, then "Follow Us" with the three icons and
   "Contact Us", all inside the 1700px page and inset an eighth from each side
   (measured: logo at 12.5%, Follow Us at 51%, Contact Us at 70% of the page). */
.site-footer { background: var(--ink); color: var(--on-dark); margin-top: 64px; }
.foot-inner {
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto;
  padding: 3.3vmax var(--gutter);
}
.foot-grid {
  display: grid; grid-template-columns: 38.7fr 19.2fr 17.1fr;
  margin: 0 12.5%; gap: 0; align-items: start;
}
/* the live badge is cropped to 184x148 from a screenshot with a margin round it */
.foot-logo img { width: 28%; min-width: 120px; aspect-ratio: 184 / 148; object-fit: cover; }
.site-footer h4 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--sq-h4);
  letter-spacing: 0.07em; color: var(--accent); margin: 18px 0 22px;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.foot-social { display: flex; gap: 12px; }
.foot-social svg { width: 20px; height: 20px; display: block; }
.foot-social a:hover { color: var(--accent); }
.site-footer .copyright {
  margin: 40px 12.5% 0; font-size: var(--sq-small); text-transform: uppercase;
}
.copyright .v { float: right; color: var(--on-dark-soft); }
.notfound { padding-top: 60px; min-height: 40vh; }

@media (max-width: 900px) {
  .post-grid, .artist-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .shows-list.two-col { column-count: 1; }
  .carousel { grid-auto-columns: minmax(230px, 70%); }
  .dates li { grid-template-columns: 1fr; gap: 6px; }
  .d-links { justify-content: flex-start; }
}
@media (max-width: 780px) {
  .site-header { padding: 16px 20px; position: relative; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg); padding: 8px 20px 20px; border-bottom: 1px solid var(--line);
  }
  body.nav-open .site-nav { display: flex; }
  .site-nav a { padding: 12px 0; font-size: 15px; }
  .social { margin: 12px 0 0; gap: 20px; }
  .artist-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; margin: 0; gap: 8px; }
  .site-footer .copyright { margin: 32px 0 0; }
  .hero-arrow { width: 38px; height: 38px; }
}


/* ---------- news list: image left, story right ---------- */
.news-band { padding-top: 56px; }
/* Measured on the live /news at a 1727px viewport: a 547x308 (16:9) thumbnail
   cropped with object-fit:cover, a 93px gutter, and a 645px text column - every
   row identical. Ours used the natural aspect, so a portrait still rendered 880px
   tall and each row was a different height. */
.news-band .wrap { max-width: 1285px; }
.news-row {
  display: grid; grid-template-columns: minmax(0, 547px) 1fr; gap: 93px;
  align-items: start; padding: 40px 0;
}
.news-media img, .news-media video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 22%;
}
.news-date {
  font-family: var(--font-ui); font-size: 12px; color: var(--on-dark-soft);
  margin: 0 0 14px;
}
.news-row h2 { margin: 0 0 18px; }
.news-row h2 a {
  font-family: var(--font-display); font-weight: 700; text-decoration: none;
  font-size: 20px; line-height: 1.5; letter-spacing: 0.01em;
}
.news-row h2 a:hover { color: var(--accent); }
.news-excerpt { max-width: 62ch; color: var(--on-dark); margin: 0 0 18px; }
.read-more {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 2px; font-size: 14px;
}

@media (max-width: 860px) {
  .news-row { grid-template-columns: 1fr; gap: 20px; padding: 26px 0; }
}

/* ---------- artist page ----------
   Measured on the live /jeremy-kittel at a 2303px viewport: a full-bleed hero
   image 2303x928 with the name in white over it at 87px, a centred pull-quote,
   then TWO columns - bio left at 688px, videos/website/socials right at 544px,
   179px between - and tour dates full width below. Section headings are 36.4px.
   The export delivers all of this as one flat stream, so it rendered as a single
   tall column of left-aligned text. */
.artist-hero { position: relative; }
.artist-hero img {
  width: 100%; height: min(40vw, 74vh); min-height: 280px; object-fit: cover;
  /* never crop through the artist's face */
  object-position: center 22%;
}
.artist-hero h1 {
  position: absolute; left: 0; right: 0; bottom: 6%;
  margin: 0; padding: 0 var(--gutter); text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 3.8vw, 88px); letter-spacing: 0.03em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.artist-quote {
  max-width: 1275px; margin: 56px auto 0; padding: 0 var(--gutter);
  text-align: center; font-size: 20px; font-style: italic; color: var(--ink-soft);
}
.artist-cols {
  display: grid; grid-template-columns: minmax(0, 688px) minmax(0, 544px);
  gap: 179px; justify-content: center; align-items: start;
  padding-top: 56px; padding-bottom: 40px;
}
.artist-cols .blk-h { margin-top: 0; }
.artist-cols h3.blk-h, .artist-full h3.blk-h {
  font-family: var(--font-display); font-size: 36px; font-weight: 700;
  letter-spacing: 0.02em; margin: 34px 0 18px;
}
.artist-col > :first-child { margin-top: 0; }
.artist-col .blk-btn { display: inline-block; margin: 0 8px 8px 0; }
.artist-col .blk-embed { margin: 18px 0; }
.artist-full { padding-bottom: 64px; }

@media (max-width: 1000px) {
  .artist-cols { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------------------
   Squarespace's own page grids, rebuilt.

   /roster and the twenty-three press kits are multi-column pages. The export
   flattens them to one stream of blocks, so they used to render as a single
   narrow strip of full-width photographs. tools/build_site.py keeps the
   structure now; these are the two grids it comes back in.

   Classic rows: twelve equal tracks, 34px gap. Inside the 1700px container that
   makes a span-4 column 544px and a span-3 400px, which is what the live pages
   measure. A nested row divides its parent, so it gets that parent's span as its
   track count and every track stays the same width.
   --------------------------------------------------------------------------- */
.sq-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
  gap: var(--row-gap, 34px);
  align-items: start;
}
.sq-col { min-width: 0; }
/* The live pages cap the CONTENT at 1700px and keep the 4vw gutter outside that
   cap, so at wide widths their roster squares are 544px and ours were 483px.
   Scoped to these pages; the rest of the site keeps the container it has. */
.sq-page { padding-bottom: 96px; }

/* The press-kit title band: ink behind, accent type, both centred. */
.mr-hero {
  background: var(--ink);
  padding: 92px 0 84px;
  text-align: center;
}
.mr-hero h1 {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 700;
  font-size: 87px;
  letter-spacing: 6px;
  line-height: 1.05;
  color: var(--accent);
  margin: 0;
}
.mr-kicker {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.4px;
  color: var(--accent);
  margin: 18px 0 0;
}

/* Roster cards: a square portrait with the artist's name in white over it.
   The live page crops these square, so we do too - biased upward, because the
   faces are the point. */
.roster .blk-img.poster { margin: 0 0 34px; }
/* the caption is a sibling of the <a>, so the figure is what it positions against */
.blk-img.poster { position: relative; }
.roster .sq-col > .blk-img.poster:last-child { margin-bottom: 0; }
.blk-img.poster a { display: block; position: relative; }
.blk-img.poster img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
}
.blk-img.poster a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: .1;
  transition: opacity .2s;
}
.blk-img.poster:hover a::after { opacity: .35; }
.blk-img.poster figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  pointer-events: none;
}
.blk-img.poster figcaption h1,
.blk-img.poster figcaption h2,
.blk-img.poster figcaption h3,
.blk-img.poster figcaption h4 {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 2.5px;
  line-height: 1.15;
  color: #fff;
  text-align: center;
  margin: 0;
}

@media (max-width: 900px) {
  .sq-row { grid-template-columns: 1fr; gap: 28px; }
  .sq-col { grid-column: 1 / -1 !important; }
  .mr-hero { padding: 56px 0 48px; }
  .mr-hero h1 { font-size: 44px; letter-spacing: 3px; }
}

/* Press-kit typography. An h4 on an artist page is a grey italic subtitle; on
   these pages it is a section label - BIO, PRESS, VIDEOS - and the live site
   sets it in Bricolage 700 at 20px, black, with 32px of air either side. */
.sq-page h3.blk-h,
.sq-page h4.blk-h {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.4px;
  font-style: normal;
  text-transform: none;
  color: #000;
  margin: 32px 0;
}
.sq-page .sq-col > .blk-h:first-child { margin-top: 0; }
.sq-page .blk-text { font-size: 14px; line-height: 1.9; max-width: none; }
.sq-page .blk-img { margin: 0 0 26px; }
.sq-page .blk-img img { width: 100%; height: auto; }
.sq-page .blk-img figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.sq-page .blk-btn { margin: 0 8px 10px 0; }
.sq-page .blk-embed { margin: 0 0 22px; }