/* Diego Galvao | Film Director · Muted Atmospheric Realism
   Single-axis composition: everything the viewer must read lives on the
   vertical centerline. Title cards low, work above them, one story at a time.
   House style: no em dashes anywhere in user-facing copy. */

:root, .sw-root {
  --sw-bg: #12151a;
  --sw-ink: #E9E4D8;
  --sw-ink-soft: #97a0a8;
  --sw-accent: #C2A165;
  --sw-font-display: 'Cormorant Garamond', Georgia, serif;
  --sw-font-body: 'Space Grotesk', system-ui, sans-serif;
}

html { scrollbar-color: #C2A165 #12151a; }
body { background: #12151a; }
::selection { background: #C2A165; color: #12151a; }

/* ---------- accessibility ---------- */
/* WCAG 2.4.7: every interactive element shows a visible keyboard focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #C2A165;
  outline-offset: 3px;
  border-radius: 3px;
}
/* a faded band is inert, so it never collects keyboard focus */
[inert] { visibility: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* A (re)attaching video on iOS can paint one frame at intrinsic size before
   object-fit applies, so keep the element invisible until it has genuinely
   painted (the engine adds .has-clip only after the first seeked frame). */
.sw-scene:not(.has-clip) .sw-scene__video { visibility: hidden; }

/* ---------- quiet the chrome: no rail, no particles, no corner noise ---------- */
.sw-route { display: none; }
.sw-pt { display: none; }
.sw-hint { display: none; }

.sw-brand__mark {
  border-radius: 1px; width: 11px; height: 24px;
  background: linear-gradient(180deg, #d8c9a8, #C2A165 60%, #6e5a35);
  box-shadow: none;
}
.sw-brand__name {
  font-family: var(--sw-font-body); font-weight: 400; font-size: .88rem;
  letter-spacing: .34em; text-transform: uppercase; color: #E9E4D8;
}
.sw-nav {
  background: rgba(18,21,26,.38);
  border: 1px solid rgba(233,228,216,.1);
  backdrop-filter: blur(12px);
}
.sw-nav__item { color: #97a0a8; font-family: var(--sw-font-body); letter-spacing: .08em; font-size: .78rem; }
.sw-nav__item:hover { color: #E9E4D8; }
.sw-nav__item.is-active { color: #12151a; background: #C2A165; }
.sw-topcta {
  color: #12151a; background: #C2A165;
  font-family: var(--sw-font-body); letter-spacing: .05em; font-weight: 500;
}

/* ---------- copy: centered lower-third title cards ---------- */
.sw-copylayer::before {
  width: 100%; height: 48%; top: auto; bottom: 0; left: 0;
  background: linear-gradient(0deg, rgba(18,21,26,.88) 0%, rgba(18,21,26,.44) 48%, transparent 100%);
}
.sw-copy {
  left: 0; right: 0; margin: 0 auto;
  top: auto; bottom: clamp(130px, 19vh, 230px);
  width: min(760px, 88vw);
  text-align: center;
}
.sw-copy__num { display: none; }
.sw-copy__eyebrow {
  font-family: var(--sw-font-body);
  font-weight: 500; letter-spacing: .46em; font-size: .7rem;
  color: #C2A165; margin-top: 14px;
}
.sw-copy__title {
  font-family: var(--sw-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.3rem);
  line-height: 1.08;
  text-shadow: 0 2px 34px rgba(18,21,26,.95);
  margin: 10px auto 0;
  max-width: 20ch;
  /* even line lengths; site.js additionally binds the last two words so a
     single word can never be stranded on the final line */
  text-wrap: balance;
}
.sw-copy__body {
  font-family: var(--sw-font-body); font-weight: 300;
  color: #b7b1a4; max-width: 52ch;
  margin: 14px auto 0;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  text-shadow: 0 1px 16px rgba(18,21,26,.95);
}
/* pills detach from the text block and anchor low, so the copy sits between
   the work above and the pills below */
.sw-copy__tags {
  position: absolute; left: 0; right: 0;
  top: calc(100% + clamp(24px, 6vh, 64px));
  justify-content: center; margin: 0;
}
.sw-copy__tags li {
  font-family: var(--sw-font-body);
  font-weight: 400; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #cfc4a9;
  background: rgba(194,161,101,.07);
  border: 1px solid rgba(194,161,101,.22);
}
.sw-copy__cta { justify-content: center; margin-top: 24px; }
.sw-btn { font-family: var(--sw-font-body); letter-spacing: .05em; }
.sw-btn--primary { color: #12151a; background: #C2A165; }
.sw-btn--ghost { color: #E9E4D8; border-color: rgba(233,228,216,.28); }

/* hero name: the one oversized moment */
.sw-copy:first-child { bottom: clamp(130px, 19vh, 230px); }
.sw-copy:first-child .sw-copy__title {
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: 1; max-width: none; letter-spacing: .02em;
  animation: dg-reveal 1.8s cubic-bezier(.2, .6, .2, 1) .2s both;
}
@keyframes dg-reveal {
  from { opacity: 0; letter-spacing: .14em; filter: blur(8px); }
  to   { opacity: 1; letter-spacing: .02em; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-copy:first-child .sw-copy__title { animation: none; }
}

/* ---------- work rail: same axis, above the copy ---------- */
.dg-worklayer { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
.dg-workgroup {
  position: absolute; left: 50%; top: 32%;
  transform: translate(-50%, -50%) translateY(var(--dy, 0px));
  display: flex; gap: clamp(10px, 1.2vw, 18px);
  opacity: 0; pointer-events: none;
}
.dg-card {
  position: relative;
  width: clamp(96px, 10.5vw, 150px);
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(233,228,216,.14);
  background: #191d23;
  box-shadow: 0 22px 54px rgba(0,0,0,.6);
  transition: border-color .3s, transform .3s;
  /* clickability inherits from the group, which the scroll driver toggles.
     an invisible card must never swallow a tap */
}
.dg-card:hover { border-color: rgba(194,161,101,.6); transform: translateY(-4px); }
/* no tilt: precision reads as craft, jaunty reads as scrapbook */
.dg-card video, .dg-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.dg-card__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 9px 9px;
  background: linear-gradient(0deg, rgba(10,12,15,.94) 0%, rgba(10,12,15,.4) 60%, transparent 100%);
  font-family: var(--sw-font-body);
}
/* two lines, so a real title is never clipped mid-word */
.dg-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  color: #E9E4D8;
  font-size: .68rem; font-weight: 500; letter-spacing: .03em; line-height: 1.25;
}
/* two lines here as well, so a descriptor is never clipped mid-word */
.dg-card__stat {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px; line-height: 1.3;
  color: #C2A165; font-size: .56rem; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase;
}
.dg-card__play {
  position: absolute; top: 7px; right: 7px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(18,21,26,.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(233,228,216,.22);
  display: grid; place-items: center;
}
.dg-card__play::before {
  content: ""; width: 0; height: 0; margin-left: 2px;
  border: 4px solid transparent; border-left: 7px solid #E9E4D8;
}

/* ---------- stats: centered row on the same axis ---------- */
/* Anchored from the BOTTOM off the same expression the title card uses, not
   from a viewport percentage. The card is bottom-anchored and its height is
   near-constant, so a top-% stat row collides with it as the window gets
   shorter. Sharing the offset makes the viewport term cancel: the clearance
   is (the 400px constant - the card's height), identical at every height. */
.dg-stats {
  position: absolute; left: 50%;
  top: auto; bottom: calc(clamp(130px, 19vh, 230px) + 400px);
  transform: translateX(-50%) translateY(var(--dy, 0px));
  display: flex; flex-direction: row; gap: clamp(26px, 5vw, 84px);
  text-align: center;
  opacity: 0; pointer-events: none;
}
.dg-stat__num {
  display: block;
  font-family: var(--sw-font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  line-height: 1;
  color: #E9E4D8;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 26px rgba(18,21,26,.95);
}
.dg-stat__label {
  display: block; margin-top: 8px;
  font-family: var(--sw-font-body);
  font-size: .62rem; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: #97a0a8;
  text-shadow: 0 1px 12px rgba(18,21,26,.98), 0 0 22px rgba(18,21,26,.9);
}

/* ---------- credits: the film-poster block ---------- */
.dg-credits {
  position: absolute; left: 50%; top: 33%;
  transform: translate(-50%, -50%) translateY(var(--dy, 0px));
  width: min(720px, 90vw);
  text-align: center;
  opacity: 0; pointer-events: none;
  font-family: var(--sw-font-body);
}
.dg-credits::before, .dg-credits::after {
  content: ""; display: block;
  height: 1px; width: 64px;
  background: rgba(194,161,101,.45);
  margin: 0 auto 24px;
}
.dg-credits::after { margin: 24px auto 0; }
.dg-credits__row {
  margin: 0 0 12px;
  font-size: .66rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.85;
  color: #97a0a8;
  text-shadow: 0 1px 14px rgba(18,21,26,.95);
}
.dg-credits__row:last-of-type { margin-bottom: 0; }
.dg-credits__lead { color: #E9E4D8; }
.dg-credits i { font-style: normal; color: rgba(194,161,101,.65); margin: 0 .65em; }

/* ---------- tools of the craft ----------
   Its own layer, anchored just above the timecode, so the kit list reads as
   a footer to the band rather than a tail on the credits card. */
.dg-tools {
  position: absolute; left: 50%;
  bottom: clamp(30px, 4.4vh, 48px);
  transform: translateX(-50%) translateY(var(--dy, 0px));
  width: min(860px, 92vw);
  text-align: center;
  opacity: 0; pointer-events: none;
}
/* the credits card rides higher so the tools footer has clear air above it */
.dg-copy--credits { bottom: clamp(190px, 24vh, 260px); }
.dg-tools__label {
  display: block; margin-bottom: 12px;
  font-family: var(--sw-font-body);
  font-size: .6rem; letter-spacing: .34em; text-transform: uppercase;
  color: #97a0a8;
}
.dg-tools__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 20px;
}
.dg-tools__list a {
  font-family: var(--sw-font-body);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: #cfc4a9; text-decoration: none;
  border-bottom: 1px solid rgba(194,161,101,.3);
  padding-bottom: 2px;
}
.dg-tools__list a:hover { color: #E9E4D8; border-color: rgba(233,228,216,.55); }
/* each sentence takes its own line regardless of viewport width */
.dg-tools__note > span { display: block; }
.dg-tools__note {
  display: block; margin: 10px auto 0; max-width: 112ch;
  font-family: var(--sw-font-body);
  font-size: .62rem; line-height: 1.65; letter-spacing: .01em;
  color: #858c94;
}
.dg-tools__aff {
  display: block; margin: 6px auto 0;
  font-family: var(--sw-font-body);
  font-size: .58rem; line-height: 1.5; letter-spacing: .02em;
  color: #7d848c;   /* dimmer than the note but still 4.84:1, above WCAG AA */
}

/* ---------- the set: fixed cinematic background image ---------- */
/* A 15% wash of the base colour sits over the plate, so more solid black
   shows through and the texture reads lighter under the copy. */
.dg-bg {
  position: fixed; inset: 0; z-index: 5;
  background-color: #0d0e11;
  background-image:
    linear-gradient(rgba(13,14,17,.15), rgba(13,14,17,.15)),
    url('assets/bg_desktop.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media (max-width: 860px), (orientation: portrait) {
  .dg-bg {
    background-image:
      linear-gradient(rgba(13,14,17,.15), rgba(13,14,17,.15)),
      url('assets/bg_mobile.webp');
  }
}

/* ---------- the portraits: blended into the dark ----------
   The plates are graded to true black, so `screen` drops the surround away
   entirely and only the lit subject survives. Dust drifts in front of him.

   No mask and no will-change. A masked, screen-blended, promoted layer can
   composite for a frame before its mask lands, which flashes the plate's
   rectangular edge mid-scroll. The feather is baked into the WebP instead,
   so there is no mask to lose. Offsets stay whole pixels so the blended
   layer never straddles a subpixel column. */
.dg-portrait {
  position: fixed;
  right: 32px;
  bottom: 0;
  z-index: 8;
  width: clamp(300px, 40vw, 580px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translateY(var(--dy, 0px));
}
.dg-portrait img { width: 100%; height: auto; display: block; }

/* the camera frame anchors the opposite edge; its feather is baked mirrored */
.dg-portrait--director { right: auto; left: 32px; }

/* ---------- the crew: a wide section plate in the credits band ---------- */
.dg-crew {
  position: fixed;
  left: 50%; top: 50%;
  z-index: 8;
  width: min(920px, 76vw);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) translateY(var(--dy, 0px));
}
/* No mask at all. The falloff is baked into the plate on both axes as a
   photographic ramp over wide black padding, which dissolves far more
   smoothly than a mask edge; a CSS gradient here would reintroduce a seam. */
.dg-crew img { width: 100%; height: auto; display: block; }

/* Every title card stays on the centerline. Only the plates are placed.
   The credit block lifts so the crew plate has clear air beneath it. */
@media (min-width: 861px) {
  .dg-credits { top: 16%; }
  .dg-crew { top: 42%; width: min(1150px, 84vw); }

  /* The hero sits on the vertical centre rather than the lower third.
     `translate` is used instead of `transform` because the engine writes an
     inline transform on every card, which would win the cascade. */
  .sw-copy:first-child {
    top: 50%; bottom: auto;
    translate: 0 -50%;
  }
}

/* ---------- procedural atmosphere: beam + dust + smoke (no video) ---------- */
.dg-atmos {
  position: fixed; inset: 0; z-index: 15;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .8;
}

/* ---------- cinema finish ---------- */
.dg-grain {
  position: fixed; inset: -60px; z-index: 46; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .07;
  mix-blend-mode: overlay;
  animation: dg-grain 0.6s steps(3) infinite;
}
@keyframes dg-grain {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-24px, 18px); }
  66% { transform: translate(18px, -30px); }
  100% { transform: translate(0, 0); }
}
.dg-vignette {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background: radial-gradient(115% 88% at 50% 44%, transparent 52%, rgba(10,12,15,.5) 100%);
}
.dg-timecode {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: clamp(10px, 1.8vh, 20px);
  z-index: 47; pointer-events: none;
  font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
  font-size: .64rem; letter-spacing: .22em;
  color: rgba(194,161,101,.7);
  text-shadow: 0 1px 10px rgba(18,21,26,.9);
}
.dg-timecode b { font-weight: 400; color: rgba(233,228,216,.4); }
@media (prefers-reduced-motion: reduce) { .dg-grain { animation: none; } }

/* Book of Matthew watch line inside the scripture title card */
.dg-watchline { margin-top: 18px; }
.dg-watchline a {
  font-family: var(--sw-font-body);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: #C2A165; text-decoration: none;
  border-bottom: 1px solid rgba(194,161,101,.35);
  padding-bottom: 3px;
}
.dg-watchline a:hover { color: #E9E4D8; border-color: rgba(233,228,216,.5); }

/* social links, rendered inside the final copy card */
.dg-social-inline {
  display: flex; justify-content: center; gap: 26px;
  margin-top: 26px;
  font-family: var(--sw-font-body); font-size: .68rem;
  letter-spacing: .24em; text-transform: uppercase;
}
.dg-social-inline a { color: #97a0a8; text-decoration: none; }
.dg-social-inline a:hover { color: #C2A165; }

/* ---------- contact form ---------- */
.dg-contact {
  position: fixed; inset: 0; z-index: 210;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,12,15,.9);
  backdrop-filter: blur(14px);
  padding: 18px;
}
.dg-contact.is-open { display: flex; }
.dg-contact__panel {
  position: relative;
  width: min(480px, 94vw);
  max-height: 92vh; overflow-y: auto;
  background: #171b21;
  border: 1px solid rgba(194,161,101,.28);
  border-radius: 10px;
  padding: clamp(22px, 4vw, 38px);
  box-shadow: 0 40px 120px rgba(0,0,0,.75);
}
.dg-contact__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(233,228,216,.25); background: transparent;
  color: #E9E4D8; font-size: .95rem; cursor: pointer;
}
.dg-contact__eyebrow {
  font-family: var(--sw-font-body); font-weight: 500;
  font-size: .66rem; letter-spacing: .42em; text-transform: uppercase;
  color: #C2A165;
}
.dg-contact__title {
  font-family: var(--sw-font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15;
  color: #E9E4D8; margin: 10px 0 20px;
}
.dg-contact__form label {
  display: block; margin-bottom: 14px;
  font-family: var(--sw-font-body); font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; color: #97a0a8;
}
.dg-contact__form input, .dg-contact__form textarea {
  display: block; width: 100%; margin-top: 6px;
  box-sizing: border-box;
  background: #12151a;
  border: 1px solid rgba(233,228,216,.16);
  border-radius: 6px;
  padding: 11px 12px;
  color: #E9E4D8;
  font-family: var(--sw-font-body); font-size: .95rem; letter-spacing: normal;
  resize: vertical;
}
.dg-contact__form input:focus, .dg-contact__form textarea:focus {
  outline: none; border-color: rgba(194,161,101,.6);
}
.dg-contact__send {
  font-family: var(--sw-font-body); font-weight: 600; font-size: .95rem;
  letter-spacing: .05em;
  color: #12151a; background: #C2A165;
  border: 0; border-radius: 999px;
  padding: 13px 28px; cursor: pointer;
  margin-top: 4px;
}
.dg-contact__send:disabled { opacity: .6; cursor: default; }
.dg-contact__note {
  font-family: var(--sw-font-body); font-size: .72rem;
  color: #97a0a8; margin: 12px 0 0;
}
.dg-contact__status { font-family: var(--sw-font-body); font-size: .82rem; margin: 10px 0 0; min-height: 1em; }
.dg-contact__status.is-ok { color: #a8c2a1; }
.dg-contact__status.is-error { color: #c98a7a; }
.dg-contact__success {
  display: flex; align-items: center;
  min-height: 150px;
  border-top: 1px solid rgba(194,161,101,.28);
}
.dg-contact__success[hidden] { display: none; }
.dg-contact__success p {
  max-width: 36ch; margin: 0;
  font-family: var(--sw-font-body); font-size: .96rem; line-height: 1.75;
  color: #c9c5bb;
}
.dg-contact.is-submitted .dg-contact__title { margin-bottom: 18px; }

/* ---------- lightbox ---------- */
.dg-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,12,15,.92);
  backdrop-filter: blur(14px);
}
.dg-lightbox.is-open { display: flex; }
.dg-lightbox__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dg-lightbox video {
  max-height: 82vh; max-width: min(92vw, 440px);
  border-radius: 8px;
  border: 1px solid rgba(194,161,101,.3);
  box-shadow: 0 40px 120px rgba(0,0,0,.75);
  background: #000;
}
.dg-lightbox__cap {
  font-family: var(--sw-font-body); text-align: center;
  color: #b7b1a4; font-size: .82rem; letter-spacing: .05em;
}
.dg-lightbox__cap b { color: #E9E4D8; font-weight: 500; }
.dg-lightbox__cap span { color: #C2A165; }
.dg-lightbox__close {
  position: absolute; top: -44px; right: -6px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(233,228,216,.3); background: transparent;
  color: #E9E4D8; font-size: 1rem; cursor: pointer;
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .sw-hint { display: none; }
  /* The card sits roughly midway between the plate and the page foot.
     The engine injects its own stylesheet AFTER this file, so a bare
     `.sw-copy` here loses the cascade at equal specificity and the desktop
     value silently wins on touch. Anchor to #world to take it back. */
  /* Two shared footing offsets. Every layer in a band hangs off the SAME one
     its title card uses, so the viewport term cancels out of every gap and
     clearance stays constant from a 667px handset to a 932px one. A phone
     browser showing its address bar is ~90px shorter than the emulated
     viewport, which is exactly where percentage-positioned layers collided. */
  :root {
    --dg-foot: calc(clamp(100px, 17vh, 155px) + env(safe-area-inset-bottom, 0px));
    --dg-foot-credits: calc(clamp(200px, 27vh, 262px) + env(safe-area-inset-bottom, 0px));
  }
  #world .sw-copy { bottom: var(--dg-foot); }
  #world .dg-copy--credits { bottom: var(--dg-foot-credits); }
  .sw-copy__tags { top: calc(100% + 14px); }
  .sw-copy:first-child .sw-copy__title { font-size: clamp(2.7rem, 12vw, 3.9rem); }
  .sw-copy__title { font-size: clamp(1.7rem, 6.4vw, 2.3rem); }
  .sw-copy__body { font-size: .92rem; }
  .sw-copylayer::before {
    height: 62%;
    background: linear-gradient(0deg, rgba(18,21,26,.94) 8%, rgba(18,21,26,.6) 48%, transparent 100%);
  }
  .dg-workgroup { top: 30%; gap: 8px; }
  .dg-card { width: clamp(84px, 22vw, 110px); border-radius: 5px; }
  .dg-workgroup .dg-card:nth-child(n+4) { display: none; }
  .dg-card__meta { padding: 20px 6px 6px; }
  .dg-card__title { font-size: .58rem; }
  .dg-card__stat { font-size: .52rem; letter-spacing: .1em; }
  .dg-card__play { width: 18px; height: 18px; }
  /* one row, riding a fixed distance above the title card (412px - card height) */
  .dg-stats {
    top: auto; bottom: calc(var(--dg-foot) + 412px);
    transform: translateX(-50%) translateY(var(--dy, 0px));
    width: 96vw;
    gap: clamp(6px, 2vw, 14px);
    flex-wrap: nowrap; justify-content: center;
  }
  .dg-stat { flex: 1 1 0; min-width: 0; }
  .dg-stat__num { font-size: clamp(1.05rem, 5vw, 1.55rem); }
  .dg-stat__label { font-size: .44rem; letter-spacing: .1em; margin-top: 5px; }
  .dg-timecode { display: none; }

  /* portrait recentres, rides high, and sits back so the stats stay legible */
  .dg-portrait {
    right: 50%; left: auto; bottom: auto; top: 4vh;
    width: min(64vw, 280px);
    transform: translateX(50%) translateY(var(--dy, 0px));
  }
  .dg-portrait img { opacity: .58; }

  /* short screens: pull both footings in so the stacks clear the top bar */
  @media (max-height: 800px) {
    :root {
      --dg-foot: calc(clamp(70px, 11vh, 110px) + env(safe-area-inset-bottom, 0px));
      --dg-foot-credits: calc(clamp(180px, 22vh, 210px) + env(safe-area-inset-bottom, 0px));
    }
  }
  /* Runs past the viewport so the black padding falls off-screen and the
     people, not the falloff, fill the width. Capped so its height stays
     near-constant across handset widths, which keeps the stack predictable. */
  .dg-crew {
    top: auto; bottom: calc(var(--dg-foot-credits) + 153px);
    width: min(128vw, 480px);
    transform: translateX(-50%) translateY(var(--dy, 0px));
  }
  .dg-credits {
    top: auto; bottom: calc(var(--dg-foot-credits) + 301px);
    transform: translateX(-50%) translateY(var(--dy, 0px));
    width: 92vw;
  }
  .dg-credits::before { margin-bottom: 18px; }
  .dg-credits::after { margin-top: 18px; }
  .dg-credits__row { font-size: .56rem; letter-spacing: .15em; line-height: 1.75; margin-bottom: 9px; }
  .dg-credits i { margin: 0 .45em; }
  .dg-tools { margin-top: 20px; }
  .dg-tools__list { gap: 6px 14px; }
  .dg-tools__list a { font-size: .64rem; letter-spacing: .1em; }
  .dg-tools__note { font-size: .58rem; max-width: none; }
}

/* ---------- short handsets, and any phone showing its browser chrome ----------
   A phone with its address bar visible loses roughly 90px, so an 844px device
   behaves like a 750px one. The credits band stacks four elements and cannot
   fit at that height at full size. Everything stays bottom-anchored, so the
   constant clearances above still hold; only the sizes come in. This block
   must follow the main mobile block to win at equal specificity. */
@media (max-width: 860px) and (max-height: 800px) {
  .dg-tools__label { font-size: .55rem; margin-bottom: 8px; }
  .dg-tools__list a { font-size: .58rem; letter-spacing: .08em; }
  .dg-tools__note { font-size: .53rem; line-height: 1.45; margin-top: 8px; }
  .dg-tools__aff { font-size: .5rem; margin-top: 4px; }
  .dg-credits__row { font-size: .52rem; line-height: 1.6; margin-bottom: 8px; }
  /* a shorter crew plate lets the credit list drop clear of the top bar */
  .dg-crew { width: min(112vw, 400px); }
  .dg-credits { bottom: calc(var(--dg-foot-credits) + 280px); }
}