/* ==========================================================================
   WORK
   ========================================================================== */


/* ----------------------------------------------------------------- BIO ---- */
.bio { border-bottom: 1px solid var(--line-soft); }
.bio__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .bio__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.bio__text { margin-top: clamp(1.5rem, 3.5vh, 2.2rem); display: grid; gap: 1.1rem; }
.bio__text p { font-size: var(--t-base); line-height: 1.75; color: var(--fg-2); max-width: 56ch; }
.bio__disciplines {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vh, 2.2rem);
  padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
}
.bio__disciplines li {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 100px;
  padding: 0.4em 0.85em; color: var(--fg-3);
}


/* ==========================================================================
   WORK — section heads
   ========================================================================== */
.wsec__head {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  align-items: baseline; justify-content: space-between;
  margin-bottom: clamp(1.8rem, 4vh, 2.8rem);
}
.wsec__note { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); }

/* ------------------------------------------------------- DIRECTED VIDEO -- */
.wv-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
@media (min-width: 720px)  { .wv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wv { position: relative; }
.wv__media {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--bg-3);
}
.wv__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out), filter .6s var(--e-out); }
.wv:hover .wv__media img { transform: scale(1.04); filter: saturate(1.1); }
.wv__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(5,6,10,.72) 0%, rgba(5,6,10,.08) 55%);
  transition: opacity .45s var(--e-out);
}
.wv:hover .wv__scrim { opacity: .8; }

/* Play control — a real button, keyboard operable, obvious without a cursor. */
.wv__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem; width: 100%; color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
.wv__play-ring {
  width: clamp(56px, 7vw, 78px); height: clamp(56px, 7vw, 78px);
  border: 1px solid rgba(255,255,255,.38); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,9,14,.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .4s var(--e-out), border-color .4s var(--e-out), transform .4s var(--e-out), color .4s var(--e-out);
}
.wv__play-ring svg { width: clamp(15px, 1.7vw, 21px); height: auto; margin-left: 3px; }
.wv__play-txt {
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: all .4s var(--e-out);
}
.wv__play:hover .wv__play-ring,
.wv__play:focus-visible .wv__play-ring { background: var(--volt); border-color: var(--volt); color: #04150b; transform: scale(1.07); }
.wv__play:hover .wv__play-txt,
.wv__play:focus-visible .wv__play-txt { opacity: 1; transform: none; }
.wv__play:focus-visible { outline: 2px solid var(--volt); outline-offset: -4px; }

.wv__meta { padding-top: 1rem; display: grid; gap: 0.28rem; }
.wv__title {
  font-family: var(--f-display); font-weight: 900; font-stretch: 112%;
  text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: -0.035em; line-height: 1;
}
.wv__artist { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--volt); letter-spacing: 0.04em; }
.wv__role { font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--fg-4); }
.wv__badge {
  justify-self: start; margin-top: 0.5rem;
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #04150b; background: var(--volt); padding: 0.35em 0.7em;
}

/* ------------------------------------------------------------ RELEASES ---- */
.wr-grid { display: grid; gap: clamp(1.2rem, 2.6vw, 2.2rem); }
@media (min-width: 720px)  { .wr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wr { display: grid; gap: 1rem; align-content: start; }
.wr__art {
  aspect-ratio: 1; overflow: hidden; background: var(--bg-3);
  border: 1px solid var(--line-soft);
}
.wr__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out), filter .6s var(--e-out); }
.wr:hover .wr__art img { transform: scale(1.03); filter: saturate(1.08); }
.wr__meta { display: grid; gap: 0.3rem; }
.wr__title {
  font-family: var(--f-display); font-weight: 900; font-stretch: 112%;
  text-transform: uppercase; font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: -0.035em; line-height: 1;
}
.wr__artist { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--volt); letter-spacing: 0.04em; }
.wr__facts { font-size: var(--t-micro); letter-spacing: 0.14em; color: var(--fg-4); margin-top: 0.2rem; }
.wr__role { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.5; margin-top: 0.35rem; }
.wr__dist { font-size: var(--t-micro); letter-spacing: 0.14em; color: var(--fg-4); }
.wr__link {
  display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.6rem;
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
  border-bottom: 1px solid var(--line); padding-bottom: 3px; justify-self: start;
  transition: color .3s var(--e-out), border-color .3s var(--e-out);
}
.wr__link svg { width: 1em; height: 1em; }
.wr__link:hover { color: var(--volt); border-color: var(--volt); }

/* ------------------------------------------------------------ PROJECTS ---- */
.wp { padding-block: clamp(3rem, 8vh, 6rem); border-block: 1px solid var(--line-soft); }
.wp__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .wp__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.wp__badge {
  display: inline-block; margin-bottom: 1rem;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #04150b; background: var(--volt); padding: 0.4em 0.75em;
}
.wp__title { font-size: var(--t-2xl); line-height: 0.9; letter-spacing: -0.04em; }
.wp__artist { display: block; margin-top: 0.7rem; font-family: var(--f-mono); font-size: var(--t-base); color: var(--volt); letter-spacing: 0.04em; }
.wp__facts { margin-top: 1.4rem; display: grid; gap: 0; }
.wp__facts > div {
  display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 0.4rem 1.3rem; align-items: baseline;
  padding-block: 0.7rem; border-top: 1px solid var(--line-soft);
}
.wp__facts > div:last-child { border-bottom: 1px solid var(--line-soft); }
.wp__facts dt { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-4); }
.wp__facts dd { font-size: var(--t-sm); color: var(--fg); }
.wp__summary { margin-top: 1.3rem; font-size: var(--t-sm); color: var(--fg-2); line-height: 1.7; max-width: 50ch; }
.wp__link {
  display: inline-flex; align-items: center; gap: 0.45em; margin-top: 1.3rem;
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: color .3s var(--e-out), border-color .3s var(--e-out);
}
.wp__link svg { width: 1em; height: 1em; }
.wp__link:hover { color: var(--volt); border-color: var(--volt); }

/* ========================================================== VIDEO MODAL === */
.vbox {
  position: fixed; inset: 0; z-index: 340;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; transition: opacity .32s var(--e-out);
}
.vbox.is-open { opacity: 1; }
.vbox__scrim {
  position: absolute; inset: 0;
  background: rgba(3,4,7,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.vbox__inner {
  position: relative; z-index: 1;
  width: min(1280px, 100%);
  transform: scale(.96); transition: transform .5s var(--e-out);
}
.vbox.is-open .vbox__inner { transform: scale(1); }
.vbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-bottom: 0.9rem;
}
.vbox__title {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vbox__close {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line-hard); border-radius: 50%;
  display: grid; place-items: center;
  transition: all .3s var(--e-out);
}
.vbox__close svg { width: 15px; height: 15px; }
.vbox__close:hover { background: var(--volt); border-color: var(--volt); color: #04150b; }
.vbox__close:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
/* Reserved 16:9 box — the iframe drops in without shifting layout. */
.vbox__frame { position: relative; aspect-ratio: 16/9; width: 100%; background: #000; }
.vbox__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .vbox, .vbox__inner { transition: none; }
}

/* Direct link to the exact video, beneath the card metadata. */
.wv__artist em { font-style: normal; color: var(--fg-3); }
.wv__link {
  display: inline-flex; align-items: center; gap: 0.45em;
  margin-top: 0.55rem; justify-self: start;
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4);
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: color .3s var(--e-out), border-color .3s var(--e-out);
}
.wv__link svg { width: 1em; height: 1em; }
.wv__link:hover { color: var(--volt); border-color: var(--volt); }

/* ==========================================================================
   PROJECT BANNER — a supplied image that carries its own typography

   The artwork already says "Boss Arts Creative" and "2026 NAIDOC Award
   Winner". So it gets the full frame and nothing else: no heading over it,
   no scrim, no gradient, no tint, no crop. Every word the site adds sits
   underneath. The image's own black field meets the page's black field, so
   it reads as one continuous composition rather than a card.
   ========================================================================== */
.wp--banner { padding-block: 0 clamp(3rem, 8vh, 6rem); }
.wp__banner { margin: 0 0 clamp(2rem, 5vh, 3.5rem); }

.wp__frame {
  display: block; width: 100%; max-width: 2048px;   /* never upscale past native */
  margin-inline: auto; background: #000;
  cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.wp__frame picture { display: block; }
.wp__frame img { display: block; width: 100%; height: auto; }
.wp__frame:focus-visible { outline: 2px solid var(--volt); outline-offset: -4px; }

.wp__pan-hint { display: none; }

/* --- Desktop: full width, natural aspect, whole composition at once ------- */
@media (min-width: 701px) {
  .wp__pan { width: 100%; }
}

/* --- Narrow: pan a large image rather than shrink 2.7:1 into a strip ------
   Scaling the whole composition to a phone's width would leave the embedded
   caption a few pixels tall. Instead the image keeps a readable height and
   the frame scrolls — the same contained-rail idiom the Studio page uses. */
@media (max-width: 700px) {
  .wp__pan {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wp__pan::-webkit-scrollbar { display: none; }
  .wp__frame { width: max-content; max-width: none; margin-inline: 0; }
  .wp__frame img { width: auto; height: clamp(300px, 44vh, 380px); max-width: none; }

  .wp__pan-hint {
    display: block; margin-top: 0.85rem; padding-inline: var(--gutter);
    font-family: var(--f-mono); font-size: var(--t-micro);
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-4);
  }
}

/* ------------------------------------------------------------- CAPTION --- */
.wp__under { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .wp__under { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.wp__id .wp__artist { margin-top: 0; }
.wp__id .wp__title { margin-top: 0.5rem; }
.wp__disc {
  display: block; margin-top: 0.9rem;
  font-size: var(--t-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-4);
}
.wp__body .wp__summary { margin-top: 0; }
.wp__note { margin-top: 0.9rem; font-size: var(--t-micro); color: var(--fg-4); line-height: 1.6; }
.wp__facts dd strong { font-weight: 600; color: var(--volt); }

/* The bio portrait is a 3:2 photograph in a 4:5 frame. The subject sits right
   of centre, so the crop window is nudged right to centre him. */
#bio-portrait { object-position: 60% 50%; }

/* --------------------------------------------------------------- REELS ----
   One item, given room rather than dropped into the video grid — a show reel
   is a different kind of job from a music video and the credits differ. */
.reel { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 900px) { .reel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.reel__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.reel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out), filter .6s var(--e-out); }
.reel:hover .reel__media img { transform: scale(1.04); filter: saturate(1.1); }
.reel__body { display: grid; gap: 0.35rem; justify-items: start; }
.reel__k { font-size: var(--t-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--volt); }
.reel__title {
  margin-top: 0.4rem; font-size: var(--t-2xl); line-height: 0.9; letter-spacing: -0.04em;
}
.reel__role   { margin-top: 0.7rem; font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--fg-2); }
.reel__credit { font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--fg-4); }
.reel__note   { margin-top: 1.1rem; font-size: var(--t-sm); color: var(--fg-2); line-height: 1.7; max-width: 46ch; }
.reel .wv__link { margin-top: 1.2rem; }

/* A video with no usable thumbnail on YouTube's side shows the studio's own
   surface rather than a broken image. The play control still reads over it. */
.media.is-thumbless { background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); }
.media.is-thumbless img { display: none; }