/*
 * Responsive layer.
 *
 * The Wix export is a fixed 980px mesh: every component is a CSS-grid child
 * offset from a centred 980px column by `left: Npx` and
 * `margin-left: calc((100% - 980px) * 0.5)`, with its own pixel width and
 * height. There is not a single width media query in the exported CSS, and the
 * Wix runtime never supplied one either — Wix served a separate mobile document
 * from its servers, which the export did not capture.
 *
 * So this file supplies the missing behaviour. Above 1024px nothing here
 * applies and the desktop layout is untouched. Below it the mesh is converted
 * from a positioned grid into ordinary vertical flow, and the pixel dimensions
 * are released.
 *
 * Loaded after the exported CSS. `!important` is unavoidable: the rules being
 * overridden are per-id and would otherwise win on specificity.
 */

/* ── Always on ────────────────────────────────────────────────────────────── */

img {
  max-width: 100%;
}

/* ── Tablet and below: unpick the fixed mesh ──────────────────────────────── */

@media (max-width: 1023px) {

  /* The 980px floor that forced the horizontal scrollbar. */
  #site-root {
    min-width: 0 !important;
    overflow-x: hidden;
  }

  #SITE_CONTAINER,
  #masterPage,
  #SITE_PAGES,
  #PAGES_CONTAINER,
  #site-root {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    left: 0 !important;
  }

  /* Page background and page body are absolutely positioned 980px layers,
     centred with a negative offset. */
  #pageBackground_cjg9,
  [id^="pageBackground_"],
  .pTvOx2,
  ._c_gnD {
    width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
  }

  /* Mesh containers: grid -> vertical flow, so components that shared a grid
     row (the three-across project embeds, for one) stack instead of overlapping. */
  [data-mesh-id$="-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    row-gap: 20px;
  }

  [data-mesh-id$="inlineContent"] {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* The desktop grid pulls rows together with negative margins (the header
     container alone uses -89px). Stacked, those become overlaps. */
  [data-mesh-id$="-gridContainer"],
  [data-mesh-id$="-gridContainer"] > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Spacer cells sized for the desktop grid. */
  [data-mesh-id*="-wedge-"] {
    display: none !important;
  }

  /* Anchor markers share a grid row with the section they mark and, on desktop,
     sit on top of it. Stacked they would land *after* it, so the menu would
     scroll a whole section too far. Pull them in front and give them no height.
     (tools/build-stacking-order.py leaves anchors out of the generated `order`
     rules so this is not outranked by a per-id selector.) */
  .qe3oTb {
    order: -1 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The header does not stick at this width, so anchors need no offset. */
  #SCROLL_TO_TOP,
  .qe3oTb {
    scroll-margin-top: 0 !important;
  }

  /* Release each component from its pixel position and size. Image components
     are excluded from the width reset: they keep their own (usually small)
     width and are capped by max-width instead. */
  [data-mesh-id$="-gridContainer"] > * {
    position: relative !important;
    inset: auto !important;
    grid-area: auto !important;
    justify-self: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  [data-mesh-id$="-gridContainer"] > *:not(.wixui-image) {
    width: 100% !important;
  }

  /* Rotated decorations (the small arrows beside the bio buttons, and the
     scroll-down chevron) sit in their own wrapper, one level below the grid,
     so they keep their pixel offset unless named separately. */
  [data-mesh-id$="-rotated-wrapper"],
  [data-mesh-id$="-rotated-wrapper"] > *,
  .wixui-vector-image,
  .wixui-vector-image > a,
  .wixui-vector-image [data-testid^="svgRoot-"] {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  [data-mesh-id$="-rotated-wrapper"] {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Column strips are all single-column in this site, but their inner track
     still carries the desktop padding maths. */
  [data-testid="columns"] {
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  [data-testid="columns"] > * {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Gutters belong on the content, not on the containers — the sections are
     full-bleed and their backgrounds have to reach both edges. */
  .wixui-rich-text,
  .wixui-form,
  .wixui-button,
  [data-testid="richTextElement"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Sections own their own background; let them size to content. The 980px
     floor lives on the column strips too, not just on #site-root. */
  section[id],
  section[id] > [data-testid="columns"],
  .wixui-column-strip,
  .wixui-column-strip__column {
    min-width: 0 !important;
    height: auto !important;
  }

  section[id] {
    min-height: 0 !important;
  }

  /* Two column strips exist only to carry a full-bleed photo and have almost
     no content of their own, so content-driven height would collapse them to
     a sliver. Give them a proportional height and let the photo cover it. */
  #mediaiyk88e931 {
    height: 58vh !important;
    min-height: 300px !important;
  }

  #mediaiyk88e9417 {
    height: 40vh !important;
    min-height: 220px !important;
  }

  /* Two sections hold nothing at all — they are whitespace, sized for a 1440px
     canvas. Left alone, the taller one puts 612px of blank white above the
     contact form, most of a phone screen. Scale them with the viewport. */
  #comp-ih5xsigh,
  #comp-ih5xsigh .wixui-column-strip__column {
    height: clamp(56px, 16vw, 240px) !important;
    min-height: 0 !important;
  }

  #comp-iykll9bh,
  #comp-iykll9bh .wixui-column-strip__column {
    height: clamp(28px, 6vw, 90px) !important;
    min-height: 0 !important;
  }
}

/* ── Header and menu ──────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

  /* Not sticky at this width — a seven-item wrapped menu would eat a third of
     the screen. `relative` rather than `static`: the header's background layer
     is `position:absolute; inset:0`, so making the header static hands that
     layer a different containing block and it stretches over the whole
     document, swallowing every click below the header. */
  #SITE_HEADER {
    position: relative !important;
    top: auto !important;
  }

  /* The wordmark is a 719x195 image pinned 130px from the left. */
  #comp-iyk8whdm,
  #comp-iyk8whdm img {
    width: 100% !important;
    height: auto !important;
    max-width: 420px !important;
    object-fit: contain !important;
  }

  /* The menu chain is height:100% all the way down, so an `auto` height at the
     top collapses the whole thing to zero. Every level has to be released. */
  #DrpDwnMn0-5s3,
  #DrpDwnMn0-5s3navContainer,
  #DrpDwnMn0-5s3 .nzOiVF,
  #DrpDwnMn0-5s3 .U7fR3t,
  #DrpDwnMn0-5s3 .CUYeWp,
  #DrpDwnMn0-5s3 .qMvpu5 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* The nav and its list are absolutely positioned, so they contribute no
     height and the menu collapses to nothing. */
  #DrpDwnMn0-5s3navContainer,
  #DrpDwnMn0-5s3itemsContainer {
    position: relative !important;
    inset: auto !important;
  }

  #DrpDwnMn0-5s3 .CUYeWp,
  #DrpDwnMn0-5s3 .qMvpu5 {
    width: auto !important;
  }

  /* Labels are line-height:48px to centre inside the desktop bar. */
  #DrpDwnMn0-5s3 .is-2 {
    line-height: 1.4 !important;
  }

  /* Menu items carry per-label pixel widths (.is-1, .is-3 … .is-8). Let them
     size to their text and wrap onto as many rows as they need. */
  #DrpDwnMn0-5s3itemsContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }

  #DrpDwnMn0-5s3itemsContainer > li {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  #DrpDwnMn0-5s3itemsContainer > li > a {
    display: block !important;
    padding: 10px 14px !important;
  }

  #DrpDwnMn0-5s3itemsContainer p {
    line-height: 1.4 !important;
  }
}

/* ── Media: images, players, embeds ───────────────────────────────────────── */

@media (max-width: 1023px) {

  /* Full-bleed section backgrounds. Keep the crop, drop the fixed box. */
  .is-18,
  .is-48 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Cropped to portrait, a centred crop of the banner cuts the subject's head
     off. Bias the crop up and slightly right, where he actually is. */
  .is-18 {
    object-position: 62% 28% !important;
  }

  /* Wix reveals section backgrounds with a parallax trick: the media layer is
     200lvh taller than its section and pulled up by -100lvh, with a sticky
     image inside it. That depends on the desktop --motion-comp-height and is
     janky on a phone regardless, so the background becomes a plain cover. */
  [data-motion-part^="BG_MEDIA"] {
    height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  [data-motion-part^="BG_IMG"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  [data-hook="bgLayers"],
  [id^="bgMedia_"],
  [id^="bgLayers_"] {
    width: 100% !important;
    height: 100% !important;
  }

  wow-image,
  wow-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* Content images shrink to fit but are never blown up past their natural
     size — the footer mark is 85x194 and stretching it to the full width
     turns it into a smear. */
  /* Image components keep their own width and only shrink when they would
     overflow. Forcing them to 100% like the text blocks blows the 85x194
     footer mark up to full width. */
  .W4V2qg,
  .wixui-image {
    max-width: 100% !important;
    text-align: center !important;
  }

  .W4V2qg img,
  .wixui-image img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Social icon row: fixed 50px squares laid out by pixel offset. */
  #comp-iylre3bv,
  #comp-iylre3bv ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* The list is absolutely positioned, so the component around it collapses to
     zero height and whatever follows is drawn over the icons. */
  #comp-iylre3bv ul {
    position: relative !important;
    inset: auto !important;
  }

  #comp-iylre3bv li {
    position: relative !important;
    inset: auto !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  #comp-iylre3bv li img {
    width: 100% !important;
    height: 100% !important;
  }

  /* Back to top. On desktop this is a grey disc (#icytt1mt, 90x89, radius 50%)
     with the white chevron image laid over it — two separate components that
     happen to overlap in the same grid cell. Stacked, the disc stretches into a
     full-width ellipse and the chevron lands on its own, white on white, so the
     control disappears. Rebuild it as a single element: drop the disc, draw it
     behind the chevron instead, and move the whole thing above the "BACK TO
     TOP" caption so the order matches the desktop composition. */
  #icytt1mt {
    display: none !important;
  }

  #comp-iykbsyx0 {
    order: -1 !important;
    width: 90px !important;
    height: auto !important;
  }

  #comp-iykbsyx0 a {
    display: block !important;
    position: relative !important;
    width: 90px !important;
    height: 96px !important;
    overflow: hidden !important;
  }

  /* The disc, at the offset the desktop layout puts it (7px below the image
     top, which is where the chevron sits inside the artwork). */
  #comp-iykbsyx0 a::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 90px;
    height: 89px;
    border-radius: 50%;
    background: rgb(201, 199, 199);
  }

  #comp-iykbsyx0 img {
    position: relative !important;
    width: 85px !important;
    height: 194px !important;
    max-width: none !important;
  }

  /* Video and audio embeds: fixed pixel boxes become fluid, ratio-preserving. */
  wix-iframe,
  wix-iframe > iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* Video players keep a 16:9 box. */
  .wixui-video-player {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Spotify and SoundCloud widgets are fixed-height by design, and stretching
     a single-track player the full width of a tablet looks wrong. */
  wix-iframe[title="Spotify Player"],
  wix-iframe[title="SoundCloud Player"] {
    display: block !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  iframe {
    max-width: 100% !important;
  }
}

/* ── Typography ───────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

  /* Section headings are set at a flat 75px. */
  .is-19,
  .is-20,
  .is-36 {
    font-size: clamp(38px, 8vw, 75px) !important;
    line-height: 1.15 !important;
  }

  .is-38,
  .is-40 {
    font-size: clamp(19px, 3.4vw, 24px) !important;
  }

  .is-49,
  .is-50 {
    font-size: clamp(21px, 4vw, 28px) !important;
  }

  /* Justified body text sets badly in a narrow column. */
  .is-26,
  .is-27,
  .is-30 {
    text-align: left !important;
  }

  /* Indented list runs in the bio. */
  .is-30,
  .is-31,
  .is-32 {
    margin-left: 0 !important;
  }

  .wixui-rich-text p {
    overflow-wrap: break-word;
  }
}

/* ── Contact form ─────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

  #comp-kgbh1cwb {
    width: 100% !important;
    height: auto !important;
    max-width: 520px !important;
  }

  #comp-kgbh1cwb input,
  #comp-kgbh1cwb textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* stops iOS zooming the page on focus */
  }

  #comp-kgbh1cwb textarea {
    min-height: 120px !important;
  }

  #comp-kgbh1d0f,
  #comp-kgbh1d0f button {
    width: 100% !important;
    max-width: 260px !important;
  }

  /* Field labels are right-aligned against the desktop column. */
  .is-56 {
    text-align: left !important;
  }
}

/* ── Phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {

  [data-mesh-id$="-gridContainer"] {
    row-gap: 16px;
  }

  #DrpDwnMn0-5s3itemsContainer > li > a {
    padding: 8px 10px !important;
  }

  .is-22,
  .is-25,
  .is-26,
  .is-27,
  .is-28,
  .is-29 {
    font-size: 16px !important;
  }

  .is-41,
  .is-45 {
    font-size: 16px !important;
  }

  /* Section headings are letter-spaced 0.2em, which pushes the longest of them
     ("DISCOGRAPHY") onto a second line. */
  h2,
  h2 * {
    letter-spacing: 0.06em !important;
  }
}