/* Team, about and case-study pages. */
.figure__ph, .member__ph {
  display: grid; place-content: center; text-align: center;
  border: 2px dashed var(--surface-line); border-radius: var(--radius-lg);
  color: var(--text-lo); font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: var(--s-8); min-height: 16rem; line-height: 1.6;
}
.member__ph { min-height: 0; aspect-ratio: 1; padding: var(--s-4); }

.team { display: grid; gap: var(--s-8); }
.member {
  display: grid; gap: var(--s-6); grid-template-columns: 1fr;
  padding-bottom: var(--s-8); border-bottom: 1px solid var(--surface-line);
}
@media (min-width: 48rem) { .member { grid-template-columns: 12rem 1fr; align-items: start; } }
/* The founder gets more room — hierarchy, not decoration. */
@media (min-width: 62rem) { .member--lead { grid-template-columns: 18rem 1fr; gap: var(--s-12); } }

.member__name { font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.member--lead .member__name { font-size: var(--fs-h2); }
.member__role {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: var(--s-4);
}
.member__bio { color: var(--text-mid); }
.member__creds { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.member__creds li {
  font-size: var(--fs-sm); color: var(--text-mid);
  padding-left: var(--s-5); position: relative;
}
.member__creds li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--y-yellow);
}
.team__note { margin-top: var(--s-8); color: var(--text-lo); font-size: var(--fs-sm); }

/* Case studies */
.case__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.case__body { max-width: 68ch; }
.case__body h2 { font-size: var(--fs-h3); margin-top: var(--s-12); }
.case__body p { color: var(--text-mid); }
.case__needs {
  display: inline-block; padding: 0.1em 0.5em; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--y-red) 18%, transparent);
  color: var(--y-red-300); font-family: var(--font-mono); font-size: 0.85em;
}
.case__list { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); }
.case__list li { padding-left: var(--s-6); position: relative; color: var(--text-mid); }
.case__list li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--y-yellow);
}

/* --- Case study list --------------------------------------------------- */
.caselist { display: grid; gap: 0; }
.caserow {
  display: block; padding: var(--s-8) 0;
  border-bottom: 1px solid var(--surface-line);
  text-decoration: none;
  transition: padding-left var(--dur) var(--ease-out);
}
.caserow:first-child { border-top: 1px solid var(--surface-line); }
.caserow:hover { padding-left: var(--s-4); }
.caserow__tag {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-lo); margin-bottom: var(--s-3);
}
.caserow__title {
  font-size: var(--fs-h3); color: var(--text-hi);
  margin-bottom: var(--s-2); max-width: 24ch;
}
/* The flagship gets more type. Hierarchy in a list of six, not decoration. */
.caserow--lead .caserow__title { font-size: var(--fs-h2); }
.caserow__hook { color: var(--text-mid); max-width: 62ch; }
.caserow__go { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Case rows with artwork.

   The rows were text-only across the full width, so the right half of every
   one was empty. Each now carries the actual artefact — a live screenshot of
   the site we built, a frame from the film we made, the published YouTube
   still — which is the difference between a portfolio and a list of claims.
   -------------------------------------------------------------------------- */
.caserow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(var(--s-5), 3vw, var(--s-10));
  align-items: center;
}
.caserow__copy { min-width: 0; }

.caserow__art {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--surface-line);
  background: var(--surface-1);
  aspect-ratio: 16 / 10;
}
.caserow__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Screenshots are top-weighted — the header and hero are the recognisable
     part — so the crop holds the top rather than centring on body content. */
  object-position: 50% 12%;
  /* Muted at rest so six plates down a page do not shout over the headings;
     colour returns on the row being read. */
  filter: saturate(0.72) brightness(0.82);
  transform: scale(1.02);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.caserow:hover .caserow__art img { filter: none; transform: scale(1.06); }

/* The lead row gets a larger plate — it is the flagship and reads as one. */
.caserow--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }

/* Below ~54rem the plate would be a letterbox strip beside squeezed type, so
   it stacks above the copy where it still does its job. */
@media (max-width: 54rem) {
  .caserow { grid-template-columns: 1fr; }
  .caserow--lead { grid-template-columns: 1fr; }
  .caserow__art { order: -1; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   CASE STUDY — media-first.
   The prose version ran ~900 words per study. These pages now lead with the
   artefacts and carry the argument in captions; the grid is deliberately
   irregular so it reads as a wall of work rather than a product listing.
   ========================================================================== */

/* --- stat band — NOT CURRENTLY RENDERED ---
   Removed from every case study in includes/work.php; the rules are kept so
   restoring the band is uncommenting one block there, not rebuilding a layout.
   If it is still unused when this file is next touched, delete it. */
.casestat__band { padding-block: clamp(var(--s-6), 3vw, var(--s-10)); }
.casestat {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.casestat__item { border-top: 2px solid var(--y-yellow); padding-top: var(--s-4); }
.casestat__n {
  font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--text-hi); margin: 0 0 var(--s-2);
  font-variant-numeric: tabular-nums;
}
.casestat__l { color: var(--text-mid); font-size: var(--fs-sm); margin: 0; }

/* --- the grid --- */
/* Uniform tiles, three across.
   The first pass ran every third card full width for rhythm, but at these
   image sizes a full-width card was ~600px tall and the page turned into one
   enormous picture per screen. Same size for everything reads as a contact
   sheet of the work, which is what a portfolio grid should be. */
.casegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s-4), 2vw, var(--s-6));
}
.casecard { margin: 0; min-width: 0; }

@media (max-width: 60rem) { .casegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .casegrid { grid-template-columns: 1fr; } }

.casecard__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--surface-line);
  background: var(--surface-1);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
/* One ratio for every tile, so the grid lines up on every row regardless of
   whether the source is a 16:9 screenshot or a 9:16 reel. */
.casecard__frame { max-height: 15rem; }
.casecard:hover .casecard__frame {
  border-color: rgb(240 198 74 / 0.5);
  box-shadow: var(--glow-yellow);
}
.casecard__m {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Screenshots and scene frames are both top-weighted — the header of a site
     and the subject of a shot both sit above centre. */
  object-position: 50% 18%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.casecard:hover .casecard__m { transform: scale(1.04); }

.casecard__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgb(255 255 255 / 0.14), transparent 62%);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.casecard:hover .casecard__sheen { opacity: 1; }

/* Video cards get a play mark so a still frame is not mistaken for a photo. */
.casecard__play {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgb(13 13 15 / 0.7); border: 1px solid rgb(255 255 255 / 0.25);
  backdrop-filter: blur(8px);
}
.casecard__play::after {
  content: ""; position: absolute; top: 50%; left: 55%; translate: -50% -50%;
  border-style: solid; border-width: 0.36rem 0 0.36rem 0.6rem;
  border-color: transparent transparent transparent var(--y-white);
}

.casecard__cap { display: grid; gap: 2px; padding-top: var(--s-3); }
.casecard__tag {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--accent-ink);
}
.casecard__note { color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-snug); }

/* --- handover note --- */
.caseadmin {
  margin: clamp(var(--s-8), 4vw, var(--s-12)) 0 0;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius);
  border: 1px solid rgb(240 198 74 / 0.32);
  background: rgb(240 198 74 / 0.05);
  color: var(--text-mid); max-width: none;
  display: grid; gap: var(--s-2);
}
.caseadmin__k {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--y-yellow);
}

/* --- portrait grid (all-reel case studies) --------------------------------
   Sikha and Ge'sha are entirely 9:16 source — reels at 576×1024 and stills up
   to 1000×1968. The shared 16:10 tile centre-cropped every one of them into a
   letterbox, cutting the top of the head off a talking-head reel. These pages
   opt in via `orient` in case_media() and get true 9:16 tiles.

   Deliberately placed AFTER the .casegrid media queries above: those carry the
   same specificity, so anything declared earlier would lose to them on source
   order and the portrait grid would silently revert to 2-up on tablets.

   `--cols` comes from PHP so the last row is not ragged. The max-width caps a
   tile at ~17rem; without it a 3-column portrait grid on a wide screen makes
   each tile ~400px wide and 710px tall, which is a poster, not a contact
   sheet. */
.casegrid--portrait {
  /* minmax(0, 21rem) caps a tile at phone width so a 3-column grid does not
     grow 400px-wide, 710px-tall posters on a large screen, while still letting
     columns shrink below the cap when --cols is 4 and they cannot all fit.
     `justify-content: start` keeps the grid's left edge on the section heading;
     centring it inside a left-aligned section reads as a layout bug. */
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 21rem));
  justify-content: start;
}
.casegrid--portrait .casecard__frame {
  aspect-ratio: 9 / 16;
  max-height: none;
}
/* The reels are exactly 9:16 so they sit uncropped. The stills vary from 4:5
   to roughly 1:2, so some crop is unavoidable — bias upward, because the face
   is above centre in every one of them. */
.casegrid--portrait .casecard__m { object-position: 50% 22%; }

@media (max-width: 60rem) {
  .casegrid--portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .casegrid--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (hover: none) { .casecard__frame { transform: none; } .casecard__sheen { display: none; } }

/* --- live site embed ------------------------------------------------------
   A frame of the site actually serving traffic, not a screenshot. Only
   rendered where the client's server permits framing; see case_live_site(). */
.livesite {
  margin-top: clamp(var(--s-8), 4vw, var(--s-12));
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
}
.livesite__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--surface-line);
  font-size: var(--fs-sm);
}
.livesite__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--y-green);
  animation: live-pulse 2s var(--ease-inout) infinite; flex: none;
}
@keyframes live-pulse { 50% { opacity: .3; } }
.livesite__label { color: var(--text-mid); }
.livesite__open { margin-left: auto; color: var(--accent-ink); white-space: nowrap; }
.livesite__frame { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
.livesite__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) { .livesite__dot { animation: none; } }