/* ==========================================================================
   Producer & Director — slides 6, 7, 8 and 9 of old.pptx

   Every size below is a source size from the 1920x1080 canvas multiplied by
   1300/1704 = 0.763, and expressed against the 1300px container exactly as
   css/site.css does. Where a section is full bleed the multiplier is applied
   to the whole 1920 canvas instead, which lands the canvas at 1465px — and
   because 108 x 0.763 = 82.5 = (1465 - 1300) / 2, canvas x=108 falls exactly
   on the container's left edge. The full-bleed sections therefore line up
   with the contained ones without any special casing.

   Positions inside the collages are percentages of their own local canvas and
   are set inline on the elements, so this file only carries the behaviour.
   ========================================================================== */

/* The hero band is NOT in this list, and its rules are not in this file: it is
   also used on the home page, so it lives in css/sections/pd-hero.css and sets
   its own --c-link there. See the note at the top of that file. */
.pd-film,
.pd-gallery,
.pd-mwki {
  /* Was the deck's link blue, #5271FF, which measured 3.4:1 and did not pass
     AA for the 18.3px links in these sections. Changed to the body ink on
     request — 5.25:1 on the page background. The underline is now the only cue
     that these are links, so it must stay.

     The hero band declares the same token for itself in
     css/sections/pd-hero.css; change both together.                        */
  --c-link: #6b5e54;
}

/* --------------------------------------------------------------------------
   Shared: absolutely placed collage pieces
   `.pd-abs` reads --x / --y / --w / --r / --z off the element, so the source
   geometry stays next to the markup it belongs to.
   -------------------------------------------------------------------------- */

.pd-abs {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  margin: 0;
  transform: rotate(var(--r, 0deg));
  z-index: var(--z, 1);
}

.pd-abs > picture,
.pd-abs > img { width: 100%; }

/* The white polaroid card, measured off the source frame asset
   (ppt/media/image43.png, 1472x1116). That artwork has +14.460deg of rotation
   baked into it — the slide always pairs it with a frame rotation 14.460deg
   short of the group's, to cancel it — so it has to be de-rotated before
   anything can be read off it. De-rotated, the card is 1189x833 with the photo
   window 1068x712 dead centre: a flat 60.5px border on all four sides, which
   is 5.088% of the card width. There is no deep polaroid foot.

   `.pd-abs` is sized to the card, so percentage padding here resolves against
   the card width on all four sides, which is what keeps the border square.
   The drop shadow in the asset is drawn in CSS instead. */
.pd-polaroid {
  margin: 0;
  padding: 5.088%;
  background: #fff;
  box-shadow: 6px 9px 20px rgba(107, 94, 84, 0.32);
}

/* The photo window is 1068x712 = exactly 3:2. The photographs are all within
   2% of that, so they are covered into it rather than allowed to push the card
   off its measured proportions. */
.pd-polaroid img {
  width: 100%;
  aspect-ratio: 1068 / 712;
  object-fit: cover;
  display: block;
}

/* Handwritten captions in the source ("Canva Student Font", which has no web
   release). Set in the site body face instead. The shadow is an addition:
   plain white over a photograph is not reliably legible. */
.pd-cap {
  font-size: clamp(0.75rem, 1.807vw, 1.468rem);   /* 30.78 -> 23.5px */
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.pd-cap--center { text-align: center; }

/* --------------------------------------------------------------------------
   Film sections — slides 7 and 9
   -------------------------------------------------------------------------- */

/* The mirrored line-drawn canopy that runs across the top of slide 7. The
   asset is already cropped to the window the slide shows (the top 11.8% of
   the artwork sits above the slide edge) and its 39% element opacity is baked
   into the alpha, so it only has to be pinned to the top at full width. */
.pd-film {
  background: url('../../images/producer-director-canopy.png') center top / 100% auto no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/producer-director-canopy.webp') type('image/webp'),
    url('../../images/producer-director-canopy.png')  type('image/png')
  ));
}

.pd-film__head { padding-bottom: clamp(1rem, 2.35vw, 30.6px); }

/* The banner starts 59px above the title on the slide; reproduced by pushing
   the text down rather than pulling the banner up, so the section keeps a
   clean top edge. */
.pd-film__intro { margin-top: clamp(0px, 3.47vw, 45.1px); }

.pd-film__title {
  margin: 0 0 clamp(0.4rem, 1.13vw, 14.7px);
  font-family: var(--font-engraved);
  font-size: clamp(1.6rem, 5.008vw, 4.07rem);   /* 85.33 -> 65.1px */
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.048em;
  color: var(--c-ink);
}

.pd-film__role {
  margin: 0;
  font-size: var(--step-body);
  line-height: 1.2;
  color: var(--c-ink);
}

.pd-film__role--wrap { line-height: 1.5; max-width: 22em; }

/* The field takes paragraphs now, so there can be more than one of these in a
   row. The gap is the body face's own em rather than a figure of its own, so
   it holds at whatever size --step-body resolves to. */
.pd-film__role + .pd-film__role { margin-top: 0.8em; }

/* The role set out as parts — one <p> per line, each line two pieces with a
   weight of its own. Slide 46 writes it that way: a bold label and a light
   run after it, twice. See the note in pd-mwki.php.

   The 20px below the block is on the wrapper rather than on .pd-film__role,
   so it belongs to the parts alone — the single-line roles on Producer &
   Director and Warrior Queen keep the spacing they were set with. A round
   figure, not a rebased one: it was asked for as 20px. */
.pd-film__roles { margin-bottom: 20px; }

/* Cinzel is not in play here — this is the body face, which carries a real
   400 and a real 700, so both weights are faces rather than synthesised. */
.pd-film__part--bold   { font-weight: 700; }
.pd-film__part--normal { font-weight: 400; }

/* The control that opens the rest of a long Role, on a line of its own under
   it. The opener itself is the shared .more-dialog__open from site.css; this
   only gives it the space this column wants, matching the gap .pd-linkrow
   takes below the copy.

   Nothing on Producer & Director shows one: both rows there are a single
   short line, well inside the budget. It is the Spirit of the Rani row on the
   Warrior Queen page that runs to a hundred words. */
.pd-mwki .more-dialog__open { margin-top: 1.1em; }

/* 8px cream stroke in the source. */
.pd-film__banner {
  margin: 0;
  border: clamp(3px, 0.47vw, 6.1px) solid #fffbf7;
}

.pd-film__banner img { width: 100%; }

/* Full-bleed hairline: the source line is 2024px long on a 1920px canvas. */
.pd-film__rule { border-top: 1px solid var(--c-ink); }

.pd-film__body { padding-top: clamp(0.9rem, 1.82vw, 23.7px); }

/* Two equal halves with the source's second rule running down the middle of
   the gap, which is where x=960 falls. */
.pd-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4.05%;
}

.pd-cols::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-ink);
}

.pd-copy {
  font-size: clamp(0.85rem, 1.409vw, 1.145rem);   /* 24 -> 18.3px */
  line-height: 1.5;
  color: var(--c-ink);
}

.pd-copy--lg { font-size: clamp(0.88rem, 1.487vw, 1.208rem); }   /* 25.3 -> 19.3px */
.pd-copy--lg ul { line-height: 1.8; }

.pd-copy__h {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.5;
}

.pd-copy__h--gap { margin-top: 1.5em; }

.pd-copy ul {
  margin: 0;
  padding-left: clamp(1rem, 2.346vw, 30.5px);   /* marL 40 in the source */
}

.pd-copy li { margin: 0; }

.pd-copy em { font-style: italic; }

.pd-linkrow {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.1vw, 14.5px);
  margin: 1.1em 0 0;
  font-size: clamp(0.85rem, 1.409vw, 1.145rem);
  line-height: 1.4;
}

/* Under the picture in the stacked arrangement, so it starts at the media
   column's left edge rather than the page's. Nothing to set but the gap: the
   row is already a flex line and .media-col is already a column. */
.pd-mwki__split .media-col .pd-linkrow { margin-top: 0.9em; }

.pd-linkrow__icon { flex: 0 0 clamp(28px, 3.458vw, 45px); }   /* 58.9 -> 45px */
.pd-linkrow__icon img { width: 100%; }

.pd-linkrow a,
.pd-gallery__link a {
  color: var(--c-link);
  text-decoration: underline;
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   Gallery — slide 8, full bleed
   The stage is the whole 1920x1080 canvas at the site's 0.763 scale, capped
   at 1465px. Font sizes inside it are therefore expressed against 1920 rather
   than 1300: X = source_px / 1920 x 100, max = source_px x 0.763.
   -------------------------------------------------------------------------- */

.pd-gallery {
  /* The poster runs 21px past the bottom of the slide and the largest
     polaroid 17px past the top; both are cut by the slide edge in the source,
     so they are cut here too. */
  overflow: hidden;
}

/* Held to the container, on request. This band used to run to 1465px — the
   deck's 1920 canvas at the site's 0.763 scale, which is what let canvas x=108
   land on the container's left edge while the artwork ran past it on both
   sides. At the container it is the same canvas, just narrower: every child is
   placed as a percentage of this box, so the whole arrangement rescales
   together and nothing has to be re-measured. */
.pd-stage {
  position: relative;
  width: min(calc(100% - var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.pd-canvas { aspect-ratio: 1920 / 1080; }

.pd-gallery__poster { height: 101.92%; }
.pd-gallery__poster img { width: 100%; height: 100%; object-fit: cover; }

.pd-gallery__strip { height: 68.14%; }
.pd-gallery__strip img { width: 100%; height: 100%; object-fit: fill; }

.pd-note {
  font-size: clamp(0.75rem, 1.389vw, 1.272rem);   /* 26.67 -> 20.4px */
  line-height: 1.2;
  color: #000;
}

.pd-gallery .pd-cap { font-size: clamp(0.75rem, 1.323vw, 1.211rem); }  /* 25.4 */

.pd-gallery__link {
  font-size: clamp(0.75rem, 1.25vw, 1.145rem);     /* 24 -> 18.3px */
  line-height: 1.4;
}

/* Capped at 1rem on Warrior Queen, down from the 1.145rem the band takes on
   Producer & Director, which is slide 8's 24pt rebased. The floor and the slope
   are the base rule's, untouched — only the ceiling moves.

   Scoped because pd-gallery is on both pages and only this one was asked about;
   Producer & Director has no body class of its own and keeps the original.

   The narrow-screen size has to be repeated under this selector further down.
   This one is 0,2,1 against the media query's 0,1,0, so without the repeat the
   desktop cap would win below the breakpoint as well and the link would come
   out at 12px where the reflowed gallery sets it at 13.6. */
body.warrior-queen .pd-gallery__link { font-size: clamp(0.75rem, 1.25vw, 1rem); }

.pd-gallery__label {
  font-size: clamp(0.75rem, 1.319vw, 1.208rem);   /* 25.33 -> 19.3px */
  line-height: 1.5;
  color: var(--c-ink);
}

.pd-gallery__icon,

/* --------------------------------------------------------------------------
   The Man Who Knew Infinity — slide 9
   The art sits on its own local canvas, x=900..1920 by y=-124..1066 of the
   slide. Its grid track runs from the end of the source's 811px copy box
   (canvas x=900) to the container edge (canvas x=1812); the remaining 108
   canvas px are bleed, which is how the right-hand floral panel runs off the
   page as it runs off the slide.
   -------------------------------------------------------------------------- */

/* Belt and braces for the bleed. `clip` rather than `hidden` because it must
   not become a scroll container. */
.pd-mwki { overflow-x: clip; }

/* Column gap 0: on the slide the copy box ends at x=900 and the art canvas
   starts there. The row gap still has to exist for the stacked layout. */
.pd-mwki__split {
  column-gap: 0;
  row-gap: clamp(1rem, 3vw, 39px);
}

/* The source title box is 933 canvas px (x=89..1022) — wider than the copy
   box that sets the column. Without this it wraps to three lines instead of
   the source's two. Nothing is drawn in the overhang, so it cannot collide. */
.pd-mwki .pd-film__title { margin-right: -15%; }

.pd-cluster {
  position: relative;
  /* 108 canvas px of bleed = 82.4px at the 0.763 rebase — but only ever as
     much of it as the viewport has margin to give. (100vw - 1330px) / 2 is the
     gap between the page shell and the viewport edge; it stays 7.5px inside
     the real client width even when a classic scrollbar is present, because
     the shell is capped at 1300px of content plus two 15px gutters. Capping
     here rather than clipping is the point: clipping this cluster cut a
     photograph off the right edge at every viewport under ~1520px. */
  --bleed: clamp(0px, calc((100vw - 1330px) / 2 - 4px), 82.4px);
  width: calc(100% + var(--bleed));
  aspect-ratio: 1020 / 1190;
}

.pd-mwki__floral img { width: 100%; }

.pd-mwki__label {
  margin: clamp(1.5rem, 3.4vw, 44px) 0 0;
  font-size: clamp(0.88rem, 1.487vw, 1.208rem);
  line-height: 1.5;
  color: var(--c-ink);
}

.pd-mwki .pd-linkrow { margin-top: 0.6em; }

/* --------------------------------------------------------------------------
   Responsive — breakpoints match css/site.css (tablet 1024, mobile 767)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .pd-film__intro { margin-top: 0; }

  /* Single column: nothing to overhang into. */
  .pd-mwki .pd-film__title { margin-right: 0; }

  /* One column: the divider rule has nothing left to divide. */
  .pd-cols { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .pd-cols::before { display: none; }


  /* Both collages give up their fixed canvas and reflow: the pieces keep
     their polaroid framing but lose the rotations, which only read as
     deliberate at the size the slide draws them. Captions become ordinary
     text on the page background, where they need the ink colour. */
  .pd-canvas,
  .pd-cluster {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(0.9rem, 2.6vw, 1.75rem);
  }

  .pd-gallery { overflow: visible; padding-block: clamp(1.5rem, 4vw, 3rem); }

  .pd-abs {
    position: static;
    width: auto;
    transform: none;
  }

  .pd-item { flex: 0 1 min(100%, 21rem); }

  .pd-note,
  .pd-cap {
    flex: 0 1 min(100%, 16rem);
    color: var(--c-ink);
    text-shadow: none;
    text-align: left;
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  }

  .pd-gallery__poster { flex: 0 1 min(100%, 17rem); height: auto; }
  .pd-gallery__poster img { height: auto; }

  /* Decorative only, and they have no anchor once the canvas is gone. */
  .pd-gallery__strip,
  .pd-gallery__corner,
  .pd-mwki__floral { display: none; }

  .pd-gallery__icon { flex: 0 0 2.1rem; }

  .pd-gallery__link { flex: 1 1 60%; font-size: clamp(0.85rem, 1.8vw, 1.05rem); }
  /* Repeated under the scoped selector, which would otherwise outrank this. */
  body.warrior-queen .pd-gallery__link { font-size: clamp(0.85rem, 1.8vw, 1.05rem); }
  .pd-gallery__label { flex: 1 1 100%; text-align: center; font-size: clamp(0.85rem, 1.8vw, 1.05rem); }
}


/* --------------------------------------------------------------------------
   Stacked: title across the top, link under both columns

   Slide 32 gives this band a different shape from slides 7 and 9 — the title
   runs the width above the two columns rather than opening the left one, and
   the link closes the band beneath them both. Only the pieces that move are
   here; the columns themselves are still .pd-mwki__split.
   -------------------------------------------------------------------------- */

/* The title box on the slide is 12813950 of a 16230600 content box — 79% — and
   wraps rather than running the full measure. */
.pd-mwki__title--wide {
  max-width: 79%;
  margin-bottom: clamp(1rem, 2.6vw, 2rem);
}

/* Under both columns, and aligned with the words rather than the picture: the
   link belongs to the copy it follows. */
.pd-mwki .page > .pd-linkrow {
  margin-top: clamp(1rem, 2.6vw, 2rem);
}

@media (max-width: 1024px) {
  .pd-mwki__title--wide { max-width: none; }
}