/* ==========================================================================
   joya-art.org: the stylesheet

   1. Web fonts        Archivo Black (the original file) and the stand-in for proxima-nova
   2. Tokens           colours, the type scale, page gutter and widths
   3. Base             page, type, links
   4. Header + menu
   5. Sections         section heights, backgrounds, the wave divider
   6. Layout grids     the free-form grid ("fe") and the 12-column rows ("cl")
   7. Blocks           text, highlights, fitted titles, images, marquee, social icons,
                       video posters, the video player, SoundCloud, spacer
   8. Galleries        the image grid on the home page, the masonry columns
   9. Events           the events grid and the previous/next links

   Breakpoints, all inherited from the original:
     767 / 768px  every layout switches between the mobile and the desktop grid
     799 / 800px  the header switches between the burger and the full navigation
                  (also on touch screens up to 1024px wide)
     portrait phones size text by the window height, everything else by its width
   ========================================================================== */


/* ---------- 1. web fonts ---------- */

/* Headings, the marquee, the events titles: Archivo Black (SIL OFL 1.1), the same files
   the original served. Latin and latin-ext, split by unicode-range exactly as before. */
@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/archivo-black-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Body text, navigation, footer: the original used proxima-nova through the previous
   host's Adobe Fonts kit, licensed to that host only. This site ships Albert Sans
   (SIL OFL 1.1, latin, one variable file) tuned to take up the same space:
     size-adjust          scales it so words are as wide as in proxima-nova (least squares
                          over every word on the site, per weight)
     ascent/descent       proxima-nova's own vertical metrics divided by size-adjust, so the
                          baselines land where they did
   The numbers were measured; please do not round them. */
@font-face {
  font-family: "Albert Sans PN";
  src: url("/assets/fonts/albert-sans-latin-wght.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 95.22%;
  ascent-override: 113.4216%;   /* 1.08 / 0.9522 */
  descent-override: 34.6566%;   /* 0.33 / 0.9522 */
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans PN";
  src: url("/assets/fonts/albert-sans-latin-wght.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  size-adjust: 95.49%;
  ascent-override: 113.1008%;   /* 1.08 / 0.9549 */
  descent-override: 35.6058%;   /* 0.34 / 0.9549 */
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans PN";
  src: url("/assets/fonts/albert-sans-latin-wght.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 97.06%;
  ascent-override: 111.2714%;   /* 1.08 / 0.9706 */
  descent-override: 38.1208%;   /* 0.37 / 0.9706 */
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- 2. tokens ---------- */
:root {
  /* palette */
  --white: #fff;
  --black: #000;
  --accent: hsl(200.57 36.84% 81.37%);            /* the light blue behind the Joya Crystallized title */

  /* the white theme (every section that does not set its own) */
  --bg: var(--white);
  --text: var(--black);
  --link: var(--black);
  --overlay-color: var(--white);
  --highlight: var(--black);                        /* highlight strokes without a colour of their own */

  /* type */
  --font-heading: "Archivo Black", "Arial Black", sans-serif;
  /* "proxima-nova" comes first: it resolves only when an Adobe Fonts web project <link> is added
     to the pages (README, "Fonts"). Without it "Albert Sans PN" renders. */
  --font-body: "proxima-nova", "Albert Sans PN", "Helvetica Neue", Arial, sans-serif;
  --weight-body: 500;
  --weight-meta: 400;
  --lh-body: 1.8em;
  --lh-heading: 1.4em;
  --max-type-width: 1400px;                         /* text stops growing at this window width */

  /* layout */
  --gutter: 6vw;                                    /* page padding, left and right */
  --max-w: 1400px;                                  /* widest content */
  --gap: 11px;                                      /* free-form grid gap */
  --row-scale: .0215;                               /* free-form grid: row height = container width x this */
  --block-pad: 17px;                                /* 12-column rows: padding around each block */

  /* header */
  --header-pad: 2.8vw;
  --header-pad-shrunk: 1.8vw;
  --header-h: calc(var(--header-pad) * 2 + 2 * min(.24vw + 15px, 18.36px));   /* replaced by the script with the measured height */
  --logo-h: 35px;
  --nav-gap: 1.5vw;
  --ease-menu: cubic-bezier(.4, 0, .2, 1);

  /* social icons */
  --icon: 48px;
  --icon-gap: 12px;
}

/* Section themes */
.theme-black {
  --bg: var(--black);
  --text: var(--white);
  --link: var(--accent);
  --overlay-color: var(--black);
  --highlight: var(--accent);
}
.theme-bright {
  --bg: var(--accent);
  --text: var(--black);
  --link: var(--black);
  --overlay-color: var(--accent);
  --highlight: var(--black);
}


/* ---------- 3. base ---------- */
html { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer { margin-top: auto; position: relative; z-index: 0; }
main { position: relative; z-index: 9; outline: none; }
img, svg, video { display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* The type scale. Each style has a size value (--v); the size grows with the window width
   up to --max-type-width, and never drops below --v x 15px. On phones held upright it
   follows the window height instead. */
body                    { --v: 1.2; }
h1                      { --v: 4; }
h2                      { --v: 2.8; }
h3                      { --v: 2.2; }
h4                      { --v: 1.6; }
.t-large                { --v: 1.5; }
.t-small, pre code      { --v: 1; }
.works__title           { --v: 1.6; }
.pager__title           { --v: 2.2; }
.skip-link              { --v: .9; }

body, h1, h2, h3, h4, .t-large, .t-small, pre code, .works__title, .pager__title, .skip-link, .marquee__title {
  font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * .012 * var(--max-type-width) + 1rem), calc(var(--v) * 1rem)));
}
@media (max-width: 767px) and (orientation: portrait) {
  body, h1, h2, h3, h4, .t-large, .t-small, pre code, .works__title, .pager__title, .skip-link, .marquee__title {
    font-size: calc((var(--v) - 1) * .012 * min(100vh, 900px) + 1rem);
  }
}

h1, h2, h3, h4 {
  margin: 2rem 0;
  font-family: var(--font-heading);
  font-weight: 500;                              /* Archivo Black has one weight: this renders it */
  /* bigger headings get a little less line-height: 1.4em x (1 + (1 - v) / 25) */
  line-height: calc(var(--lh-heading) * (1 + (1 - var(--v)) / 25));
}
p { margin: 1rem 0; line-height: var(--lh-body); }
strong { font-weight: 700; }
pre { margin: 1em 0; font-family: monospace, serif; font-size: 1em; white-space: pre-wrap; }
pre code {
  font-family: var(--font-body);
  font-weight: var(--weight-meta);
  line-height: 1em;
  letter-spacing: .01em;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: 1.5em;
  left: -1000em;
  z-index: 12;
  padding: 1em 1.5em;
  font-family: var(--font-heading);
  line-height: 1.2em;
  text-decoration: underline;
  color: var(--white);
  background: var(--black);
}
.skip-link:focus { left: 1.3em; }


/* ---------- 4. header + menu ---------- */
.header {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 11;                                  /* above the open menu (10), which is above the page (9) */
  line-height: 1;
  pointer-events: none;
  transition: transform 140ms ease-in-out;
}
.header.is-hidden { transform: translateY(-100%); }
.header__bar {
  position: relative;
  padding: var(--header-pad) var(--gutter);
  background: var(--white);
  pointer-events: auto;
  transition: padding 140ms ease-in-out;
}
.header.is-shrunk .header__bar { padding-top: var(--header-pad-shrunk); padding-bottom: var(--header-pad-shrunk); }
.header__inner {
  display: flex;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.header__logo { flex: 0 0 auto; max-height: var(--logo-h); font-size: 0; }
.header__logo img { width: auto; max-width: 100%; max-height: var(--logo-h); }
.header__nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
  padding-left: 2.5vw;
  font-size: inherit;
}
.header__nav a {
  display: inline-flex;
  align-items: center;
  padding: .1em 0;
  white-space: nowrap;
  line-height: var(--lh-body);
  backface-visibility: hidden;
}
.header__nav a + a { margin-left: var(--nav-gap); }
.header__nav a[aria-current="page"] {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 calc(100% - .1em);
}
/* the nav sizes like body text but must not inherit a section's size */
.header__nav { --v: 1.2; }

/* burger: two 1px lines 11px apart in a 35px box; the button keeps the browser's own
   1px / 6px padding, as on the original, so it sits 6px in from the right edge */
.burger {
  display: none;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 1px 6px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.burger__box { position: relative; display: block; width: 35px; height: 35px; }
.burger__bun {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  margin: auto;
  background: currentColor;
  transition: transform 250ms cubic-bezier(.2, .6, .3, 1), width 250ms cubic-bezier(.2, .6, .3, 1);
}
.burger__bun:first-child { transform: translateY(-5.5px); }
.burger__bun:last-child { transform: translateY(5.5px); }
.menu-open .burger__bun:first-child { width: 28px; transform: translateX(3.5px) rotate(-135deg); }
.menu-open .burger__bun:last-child { width: 28px; transform: translateX(3.5px) rotate(135deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  padding-top: var(--header-h);
  background: var(--white);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  user-select: none;
  transition: visibility 600ms var(--ease-menu), opacity 400ms var(--ease-menu);
}
.menu__nav {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  transform: translateY(20px);
  transition: transform 600ms var(--ease-menu);
}
.menu__nav a {
  display: inline-flex;
  align-self: center;
  margin: 3vw 5vw;
  font-size: 8.5vmin;
  line-height: 1;
  transition: opacity 250ms var(--ease-menu);
}
@media (hover: hover) { .menu__nav a:hover { opacity: .9; } }
@media (min-width: 576px) { .menu__nav a { font-size: 6.6vmin; } }
@media (min-width: 768px) { .menu__nav a { font-size: 6vmin; } }
.menu-open { overflow: hidden; }
.menu-open .menu { opacity: 1; visibility: visible; }
.menu-open .menu__nav { transform: none; }

@media (max-width: 799px), (pointer: coarse) and (max-width: 1024px) {
  :root { --header-pad: 6vw; --header-pad-shrunk: min(6vw, 2vmax); --header-h: calc(12vw + 40px); }
  .header__bar { padding-left: 6vw; padding-right: 6vw; }
  .header__nav { display: none; }
  .header__logo { flex: 1 0 calc(100% - 50px); }
  .burger { display: block; }
  .menu { display: flex; }
}
@media (max-width: 767px) {
  /* 40px less one layout unit (1/64px): the original's phone logo comes out that tall, and the
     header height (which pushes every section down) follows it */
  :root { --logo-h: 39.984375px; }
}


/* ---------- 5. sections ---------- */
.section {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
}
.section--small  { min-height: 33vh; }
.section--medium { min-height: 66vh; }
.section--large  { min-height: 100vh; }
.section--custom { min-height: calc(var(--section-h) * 1vh); }            /* --section-h: the height chosen for that section */
.section--first  { padding-top: var(--header-h); }
.section__wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.section--small  > .section__wrap { padding: 3.3vmax 0; }
.section--medium > .section__wrap { padding: 6.6vmax 0; }
.section--large  > .section__wrap { padding: 10vmax 0; }
.section--custom > .section__wrap { padding: calc(max(1vw, 1vh) * var(--section-h) / 10) 0; }
.section__content { width: 100%; }
/* 12-column sections: page gutter on both sides, content at most --max-w wide, centred */
.section--classic > .section__wrap { max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 768px) {
  .section--narrow .section__content { width: 50%; }
}

/* background picture, covering the section, with the theme colour laid over it */
.section__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.section__bg img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.section__overlay { position: absolute; inset: 0; background: var(--overlay-color); opacity: var(--overlay, 0); }

/* wave divider: the section's lower edge rises from the left corner to --divider-h above the
   right corner, and the next section's background shows below the curve */
.has-divider { padding-bottom: var(--divider-h); }
.section__divider {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  width: 100%;
  height: var(--divider-h);
  fill: var(--white);
  pointer-events: none;
}


/* ---------- 6. layout grids ---------- */

/* The free-form grid. Mobile: 8 columns, desktop (768px and up): 24 columns, inside an outer
   column on each side that absorbs whatever the page gutter leaves. Each block carries its
   own position as content data: --m / --d (row-start / column-start / row-end / column-end),
   stacking order --mz / --dz, vertical placement --mj / --dj. Row counts: --mr / --dr. */
.fe {
  --outer: calc(var(--gutter) - var(--gap));
  --cell: calc((var(--max-w) - var(--gap) * 7) / 8);
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--mr), minmax(24px, auto));
  grid-template-columns: minmax(var(--outer), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--outer), 1fr);
  gap: var(--gap);
  overflow-x: hidden;
  overflow-x: clip;
}
.fe__block {
  grid-area: var(--m);
  z-index: var(--mz, 0);
  display: flex;
  flex-direction: column;
  justify-content: var(--mj, flex-start);
  min-width: 0;
}
@media (min-width: 768px) {
  .fe {
    --cell: calc((var(--max-w) - var(--gap) * 23) / 24);
    --container: min(var(--max-w), calc(100vw - var(--gutter) * 2));
    grid-template-rows: repeat(var(--dr), minmax(calc(var(--container) * var(--row-scale)), auto));
    grid-template-columns: minmax(var(--outer), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--outer), 1fr);
  }
  .fe__block { grid-area: var(--d); z-index: var(--dz, 0); justify-content: var(--dj, flex-start); }
}

/* The 12-column rows: columns float side by side, blocks get 17px around them, except that
   the first block in a column has no space above and a lone block none below either. */
.cl > .cl__row { margin: 0 calc(var(--block-pad) * -1); }
.cl__row::before, .cl__row::after { content: ""; display: table; }
.cl__row::after { clear: both; }
.cl__col { float: left; width: calc(var(--span) / 12 * 100%); }
.cl__block { position: relative; padding: var(--block-pad) 0; clear: both; }
.cl__block--text { clear: none; }
.cl__col .cl__block { padding-left: var(--block-pad); padding-right: var(--block-pad); }
.cl .cl__row .cl__block:first-child { padding-top: 0; }
.cl .cl__row .cl__block:first-child:last-child { padding-bottom: 0; }
.cl .cl__block + .cl__row .cl__block:first-child { padding-top: var(--block-pad); }
.cl .cl__block + .cl__row .cl__block:first-child:last-child { padding-bottom: var(--block-pad); }
.cl > .cl__row:first-child > .cl__col:first-child > .cl__block:not(:first-child):last-child,
.cl .cl__block + .cl__row .cl__block:last-child { padding-bottom: var(--block-pad); }
/* phones: columns stack, spacers go, and every block gets its 17px back (the original forces
   these with !important, over the first/last-child rules above) */
@media (max-width: 767px) {
  .cl .cl__col { float: none; width: auto; }
  .cl .cl__block--spacer { display: none; }
  .cl .cl__row .cl__block:first-child { padding-top: var(--block-pad) !important; }
  .cl .cl__row .cl__block:last-child { padding-bottom: var(--block-pad) !important; }
}


/* ---------- 7. blocks ---------- */

/* text */
.text { position: relative; z-index: 0; }
.text :is(h1, h2, h3, h4, p) { white-space: pre-wrap; }
.text__body > :first-child { margin-top: 0; }
.text__body > :last-child { margin-bottom: 0; }
.text :not(h1, h2, h3) { overflow-wrap: break-word; }
.text p[data-empty]:empty::before { content: ""; display: inline-block; }
.t-center { text-align: center; }
.text a {
  color: var(--link);
  text-decoration: underline 1px;
  text-underline-offset: .2em;
}

/* highlights: shapes drawn behind a few words (a marker, a curved underline, a circle, a
   scribble). site.js draws them; these are the stroke rules. */
.hl-shape {
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.hl-shape.is-front { z-index: 1; }
.hl-shape svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--stroke);
  stroke-width: max(1px, var(--stroke-width));
  stroke-linecap: square;
  stroke-linejoin: bevel;
}

/* titles fitted to the width of their block (site.js sets the size) */
.fit { height: auto; }
.fit__inner { display: inline-block; position: relative; margin: 0; padding: 0; white-space: nowrap; transform-origin: 0 0; }
.fit__inner :is(h1, h3) { margin: 0; padding: 0; line-height: 1; font-size: inherit; white-space: nowrap; }
.fit:not(.is-fitted) .fit__inner { white-space: normal; }

/* image filling its block */
/* the picture is laid out of flow, so it never makes its grid rows taller */
.image { position: relative; width: 100%; height: 100%; overflow: hidden; }
.image img, .image a { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.image img { object-fit: cover; object-position: var(--focal, 50% 50%); }

/* marquee: the words run along the block, repeated */
.marquee { position: relative; display: flex; align-items: center; width: 100%; overflow: hidden; }
.marquee__title {
  --v: var(--marquee-v, 8);
  margin: 0;
  width: 100%;
  line-height: 1.4;
  white-space: nowrap;
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
/* the original sets the words on an SVG path whose baseline sits .0506em lower than a plain
   line of the same height would put it */
.marquee__item { position: relative; top: .0506em; }
.marquee__item { flex: 0 0 auto; padding-right: .5em; }

/* social icons: black circles with the logo cut out */
.social { display: flex; align-items: center; justify-content: flex-end; }
.social__link {
  position: relative;
  display: block;
  width: var(--icon);
  height: var(--icon);
  margin-left: var(--icon-gap);
  overflow: hidden;
  border-radius: 50%;
  transition: opacity 170ms ease-in-out;
}
.social__link svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--text); }
.social__link:hover { opacity: .8; }

/* YouTube blocks: a poster with a play button; the player loads on click */
.video { position: relative; height: 0; padding-bottom: var(--ratio); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__overlay { position: absolute; inset: 0; overflow: hidden; cursor: pointer; }
/* the poster is the video's own YouTube still (16:9), covering the box */
.video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  padding: 2px;
  border: 0;
  background: none;
  cursor: pointer;
}
.video__play svg { width: 44px; height: 44px; overflow: visible; }
@media (min-resolution: 1.5dppx) { .video__play svg { width: 33px; height: 33px; margin: 5.5px; } }
.video.is-playing .video__overlay { display: none; }
.video__link { position: absolute; inset: 0; }

/* the video on Joya Crystallized: a 16:9 stage with the upright film's poster in the middle,
   a shade along the top and the bottom, an empty progress line and a round play button,
   as the original player showed it before playing. Playing swaps in the browser's own player. */
/* three sizes, by the player's own width, as on the original: small, medium from 480px, large from 768px */
.player {
  --play-pad: 7px; --play-icon: 30px; --play-gap: 0px;
  --bar-side: 10px; --bar-bottom: 9px; --shade-extra: 17px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
}
.player__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.player__poster {
  position: absolute; inset: 0;
  z-index: 1;
  background: no-repeat 50% 50% / contain;
  cursor: pointer;
}
.player__shade { position: absolute; right: 0; left: 0; pointer-events: none; }
.player__shade--top { top: 0; height: 15%; background-image: linear-gradient(rgb(0 0 0 / .3), rgb(0 0 0 / .1) 50%, rgb(0 0 0 / 0)); }
.player__shade--bottom {
  bottom: 0;
  z-index: 2;
  height: calc((100% + var(--shade-extra)) * .33);   /* a third of the original's control strip, which reached --shade-extra below the frame */
  background-image: linear-gradient(0deg, rgb(0 0 0 / .9), rgb(0 0 0 / .4) 50%, rgb(0 0 0 / 0));
}
.player__bar {
  position: absolute;
  right: var(--bar-side); bottom: var(--bar-bottom); left: var(--bar-side);
  z-index: 3;
  height: 3px;
  background: rgb(255 255 255 / .5125);          /* the buffer line (.35) under the empty track (.25) */
  pointer-events: none;
}
.player__play {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 4;
  padding: var(--play-pad);
  border: 0;
  border-radius: 100%;
  color: var(--white);
  background: rgb(0 0 0 / .5);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  opacity: .9;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: .3s;
}
.player__play svg { width: var(--play-icon); height: var(--play-icon); margin: var(--play-gap); fill: currentColor; }
@container (min-width: 479.5px) {
  .player__play, .player__bar, .player__shade { --play-pad: 15px; --play-icon: 48px; --play-gap: 1px; --bar-side: 20px; --bar-bottom: 22px; --shade-extra: 31px; }
}
@container (min-width: 768px) {
  .player__play { --play-icon: 72px; --play-gap: 9px; }
}
.player__play:hover, .player__play:focus-visible { background: rgb(0 0 0 / .7); opacity: 1; }
.player:not(.is-playing) .player__video { visibility: hidden; }
.player.is-playing :is(.player__poster, .player__play, .player__bar, .player__shade) { display: none; }

/* SoundCloud */
.soundcloud { position: relative; height: 0; padding-bottom: var(--ratio); }
.soundcloud iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* spacer in the 12-column rows */
.spacer { height: 34px; overflow: hidden; visibility: hidden; }


/* ---------- 8. galleries ---------- */
.section--gallery { display: block; }

/* image grid: a fixed number of columns (--cols, --mcols on phones), gaps proportional to
   the window (--grid-gap), pictures cropped to one aspect ratio (--ratio) */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--mcols), 1fr);
  gap: var(--grid-gap);
}
.grid--inset { max-width: var(--max-w); margin: 0 auto; padding: var(--gutter); }
/* the original's gallery script counts 768px as a phone width (its free-form grid does not) */
@media (min-width: 769px) { .grid { grid-template-columns: repeat(var(--cols), 1fr); } }
.grid__item { position: relative; margin: 0; height: 0; min-height: 1px; padding-bottom: var(--ratio); }   /* the original's 1px minimum makes each picture a pixel taller */
.grid__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }

/* masonry: equal columns, each picture goes under the shortest one (site.js); without
   the script the pictures simply run in columns */
.masonry--full { padding: var(--gutter); }
.masonry__wrap { position: relative; }
.masonry__item { margin: 0; }
.masonry__frame { position: relative; overflow: hidden; }
.masonry__item img { width: 100%; height: auto; object-fit: cover; object-position: var(--focal, 50% 50%); }
.masonry:not(.is-laid-out) .masonry__wrap { column-count: var(--cols); column-gap: var(--col-gap, 0); }
/* each box is as tall as its picture rounded up to a whole pixel; the picture keeps its own
   proportions (it may hang a fraction of a pixel below its box) and is clipped at the sides */
.masonry.is-laid-out .masonry__item { position: absolute; top: 0; left: 0; }

/* fade-up as each picture scrolls into view */
/* ends on translateY(0), not none: the original keeps the (identity) transform after the
   animation, and that changes how the browser draws the scaled picture */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-animate="fade-up"] .is-in > :is(.masonry__frame, img) {
  animation: fade-up 800ms cubic-bezier(.4, 0, .2, 1) both;
}
.js [data-animate="fade-up"] :is(.masonry__item, .grid__item):not(.is-in) > :is(.masonry__frame, img) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-animate="fade-up"] .is-in > :is(.masonry__frame, img) { animation: none; }
  .js [data-animate="fade-up"] :is(.masonry__item, .grid__item):not(.is-in) > :is(.masonry__frame, img) { opacity: 1; }
}


/* ---------- 9. events ---------- */
.section--works { display: block; }
.works {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  column-gap: 0;
  row-gap: 70px;
  box-sizing: border-box;
  width: 100%;
  min-height: 66vh;
  padding: 6.6vw var(--gutter);
}
@media (max-width: 767px) { .works { grid-template-columns: minmax(0, 1fr); } }
.works__item { display: flex; flex-direction: column; }
.works__image { position: relative; order: 1; margin: 0; padding-bottom: 75%; overflow: hidden; line-height: 0; }
.works__image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transition: transform 400ms ease;
}
@media (hover: hover) { .works__item:hover .works__image img { transform: scale(1.1); } }
.works__text { position: relative; order: 2; margin-top: 25px; }
.works__title { margin: 0 0 .5em; padding: 0; line-height: var(--lh-heading); }   /* 1.4em flat, unlike other headings */

.pager { display: flex; padding: 3vw var(--gutter); background: var(--bg); }
.pager__link { display: flex; align-items: center; max-width: 50%; text-align: left; }
.pager__link--prev { margin-right: auto; }
.pager__link--next { margin-left: auto; text-align: right; }
.pager__title { margin: 0; padding: 0; font-family: var(--font-heading); font-weight: 500; line-height: 1; }
.pager__icon { display: block; flex: 0 0 auto; width: 18px; height: 32px; padding-right: 25px; }
.pager__link--next .pager__icon { padding-right: 0; padding-left: 25px; }
.pager__icon svg { width: 18px; height: 32px; stroke: var(--text); stroke-width: 1px; }

@media (prefers-reduced-motion: reduce) {
  .header, .header__bar, .menu, .menu__nav, .burger__bun, .works__image img { transition: none; }
}