/* ==========================================================================
   Multifaceted Performer & Educator — slides 15-23 of old.pptx

   Every size here is a source size from the 1920x1080 canvas multiplied by
   1300/1704 = 0.763, expressed against the 1300px container exactly as
   css/site.css does. Positions inside the photo clusters are percentages of
   the cluster's own box and are set inline on the elements, so the source
   geometry stays next to the markup it belongs to and this file only carries
   behaviour.

   THE TWO THINGS THE PPTX EXPORT GETS WRONG, both corrected from the Canva
   element data (design DAGWh8EbLBY, pages 15-23):

   1. Image crops. Every picture is exported with `stretch` and no `srcRect`,
      so the crops are gone. The assets in images/ are pre-cut to the window
      Canva reports as `imageBox`, then drawn with `cover`.
   2. Rotations. Canva stores a rotation on the photo and another on the frame
      behind it; PowerPoint keeps the frame's and drops the photo's. The angles
      quoted below are the photo's — the angle the reader actually sees.

   Canva reports `pos` as (y, x), transposed. Every number in these comments is
   already un-transposed.

   The photo frames are drawn in CSS rather than exported, following the
   precedent set for the biography frames in site.css. There are three in the
   deck and their proportions are measured off the source artwork:

     image43.png  a white photo frame whose artwork is itself drawn tilted by
                  +14.49deg. De-rotating it gives a 1191x836 card with an even
                  61px border — 5.12% of the card width — and the window
                  concentric inside it. Because the tilt is baked into the
                  bitmap, the angle Canva stores on these elements is 14.49deg
                  short of the angle that shows.
     the #FFFBF7 polaroid SHAPE (viewBox 430.4x500, window x 21..403,
                  y 23.2..389.8): a deep-footed card, border 4.88% / 6.37% /
                  5.39% and a 25.61% foot, all as shares of the card width
                  because CSS resolves every padding percentage against width.
     a plain white rect (slide 20 only), border 4.2% / 8.6% and a 20.3% foot.

   The browser-window chrome on the hero and the drop shadows are drawn in CSS
   too; their source assets are flat outlines and blurred blobs.
   ========================================================================== */

.pe-hero,
.pe-section {
  /* 84px Cinzel Decorative Bold page title -> 64.1px */
  --pe-step-hero:  clamp(2rem,    4.93vw, 4.006rem);
  /* 80px Cinzel section headings -> 61.0px */
  --pe-step-title: clamp(1.75rem, 4.70vw, 3.815rem);
  /* 37.3px photo captions -> 28.5px */
  --pe-step-cap:   clamp(0.85rem, 2.19vw, 1.78rem);
  /* 26.7px link labels -> 20.4px */
  --pe-step-label: clamp(0.85rem, 1.57vw, 1.272rem);
  /* 24px link URLs -> 18.3px. The floor is 13.6px rather than the 12.5px a
     strict rebase of the clamp would give, matching .pd-linkrow on the
     Producer & Director page — a bare URL any smaller is unreadable. */
  --pe-step-link:  clamp(0.85rem, 1.41vw, 1.145rem);

  /* Was the deck's link blue, #5271FF. It measured 3.4:1 on the page
     background and failed AA at the 18.3px these links run at — noted here and
     in producer-director.css from the start, with #3A53C9 offered as the fix.

     Changed to the body ink instead, on request: the blue was the one cold
     colour in a warm palette and read as browser chrome rather than as part of
     the design. 5.25:1 on the page background, 4.67:1 on the author-publisher
     tint, so it passes everywhere these links appear. Every link is still
     underlined, which is now the only cue that it is one — that is why the
     underline must stay. */
  --c-link: #6b5e54;

  --pe-shadow: 6px 10px 24px rgba(107, 94, 84, 0.30);

  position: relative;
}

/* --------------------------------------------------------------------------
   Full-bleed decoration
   -------------------------------------------------------------------------- */

/* The floral canopy that hangs over slides 15 and 19 (image74.png at 20%
   opacity, full bleed). The opacity is baked into the asset's alpha so the
   layer costs nothing at runtime and still composites over the paper texture
   underneath. `100% auto` keeps it hanging from the top edge, which is what
   the slide does — `cover` would crop to the middle of the artwork. */
.pe-canopy {
  background: url('../../images/performer-educator-canopy.png') center top / 100% auto no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/performer-educator-canopy.webp') type('image/webp'),
    url('../../images/performer-educator-canopy.png')  type('image/png')
  ));
}

/* Slide 19 is the one page in this run whose Canva background is a flat
   #EBEBEB rather than the deck's paper texture. */
.pe-canopy--solid { background-color: #ebebeb; }

/* Slide 21: a second canopy, 891.6px of the 1920 canvas (46.4%) anchored to
   the left edge and again at 20% opacity. */
.pe-canopy-left {
  background: url('../../images/performer-educator-canopy-tall.png') -1.6% top / 46.4% auto no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/performer-educator-canopy-tall.webp') type('image/webp'),
    url('../../images/performer-educator-canopy-tall.png')  type('image/png')
  ));
}

/* Slide 18: the line-drawn canopy behind the phone, 858px of the canvas
   (44.7%) hard against the right edge. The asset is pre-cut to the part of it
   that is actually on the slide. */
.pe-canopy-right {
  background: url('../../images/performer-educator-canopy-line.png') right top / 44.7% auto no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/performer-educator-canopy-line.webp') type('image/webp'),
    url('../../images/performer-educator-canopy-line.png')  type('image/png')
  ));
}

/* A chosen background on the four bands that never had one.
   .pe-canopy, .pe-canopy-left and .pe-canopy-right above already read
   --section-bg, each falling back to its own artwork from the deck; pe-dancer,
   pe-residence, pe-jazz and pe-choreo had no background property at all, so a
   Background image chosen for them had nowhere to land.

   The :not() chain is doing real work, not decoration. .pe-section and
   .pe-canopy-right are the same specificity, so a bare .pe-section rule placed
   after them would win on source order and overwrite the canopy bands'
   measured `right top / 44.7% auto` placement. Excluding the three keeps this
   to the bands that need it.

   Falling back to `none` is what makes this invisible until an image is set:
   the four bands render exactly as they did. The band runs the full width of
   the page, so `cover` fills it edge to edge. */
.pe-section:not(.pe-canopy):not(.pe-canopy-left):not(.pe-canopy-right) {
  background-image: var(--section-bg, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Corner florals. In the source these run into the 108px gutters and off the
   canvas edge; here they are held inside the page box so nothing can escape
   the viewport at any width. Sizes are the source sizes as a share of the
   1704px content area. */
.pe-orn {
  position: absolute;
  top: var(--oy, 0);
  right: var(--ox, 0);
  width: var(--ow);
  transform: rotate(var(--or, 0deg));
  pointer-events: none;
}

.pe-orn--left {
  right: auto;
  left: var(--ox, 0);
}

/* One floral is mirrored in the source (slide 21). */
.pe-orn--flip { transform: rotate(var(--or, 0deg)) scaleX(-1); }

/* Content sits above the florals. */
.pe-section .page > *:not(.pe-orn) {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* Slide 15: 84px Cinzel Decorative Bold, line pitch 1.23, tracking -0.048em.
   The deck types its headings with erratic mid-word capitals so that Cinzel
   and Cinzel Decorative render the remaining letters as small capitals; the
   strings are reproduced exactly, because retyping them in caps would change
   what the page looks like, not just what the source says. */
.pe-hero__title {
  margin: 0 0 clamp(0.9rem, 2.4vw, 1.95rem);
  font-family: var(--font-display);
  font-size: var(--pe-step-hero);
  font-weight: 700;
  line-height: 1.23;
  letter-spacing: -0.048em;
  color: var(--c-ink);
}

/* Slides 16-23: 80px Cinzel, line pitch 1.01, tracking -0.048em. */
.pe-title {
  margin: 0 0 clamp(0.9rem, 2.4vw, 1.95rem);
  font-family: var(--font-engraved);
  font-size: var(--pe-step-title);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -0.048em;
  color: var(--c-ink);
}

/* 32px bold standfirst on slide 18. */
.pe-lead {
  margin: 0 0 1.3em;
  font-weight: 700;
  line-height: 1.4;
}

.pe-body {
  font-size: var(--step-body);
  line-height: 1.4;
}

/* "Training", "Performances", "Purpose", "Notable Performances" — bold runs at
   body size that head each list, not a smaller heading step. */
.pe-body h3 {
  margin: 0 0 0.6em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
}

/* Source indent is marL=518173 EMU = 54.4px -> 41.5px = 1.7em at body size. */
.pe-body ul {
  margin: 0 0 1.4em;
  padding-left: 1.7em;
  list-style: disc;
}

.pe-body ul:last-child { margin-bottom: 0; }
.pe-body li { margin-bottom: 1.1em; }
.pe-body li:last-child { margin-bottom: 0; }

/* The More under a cut bullet — slide 73.

   Two things have to be undone, and both are right where they were set. The
   opening is a <span>, so the control would run on to the end of the sentence;
   the slide puts it on a line of its own directly beneath, so the span becomes
   a block and the control starts a new line by itself.

   And .more-link carries margin-top: 1.5rem, which is the correct figure under
   a block of copy — it is what About and the team cards want — and far too much
   under one bullet, where the slide sets the control tight beneath the line it
   belongs to. 0.2em is that gap at body size. Overridden here rather than
   loosened there, because the 1.5rem is not wrong anywhere it currently lands. */
.pe-body .more-preview { display: block; }
.pe-body .more-dialog__open { margin-top: 0.2em; }

/* The annotations set beside the photographs on slides 17 and 19. Slide 19
   sets them in "Canva Student Font", a handwriting face that is not licensed
   for the web and appears nowhere else in the deck; the site body face stands
   in, at the source's 32px and 1.2 line pitch. */
.pe-note {
  margin: 0 0 clamp(0.8rem, 2vw, 1.6rem);
  font-size: var(--step-body);
  line-height: 1.2;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Video links — a 58.9px play badge, a 26.7px description and the bare 24px
   URL underneath it, exactly as the slides set them.
   -------------------------------------------------------------------------- */

.pe-videos {
  margin: clamp(1rem, 2.6vw, 2.1rem) 0 0;
  padding: 0;
  list-style: none;
}

.pe-videos__label {
  margin: clamp(1rem, 2.6vw, 2.1rem) 0 0;
  font-size: var(--pe-step-label);
  line-height: 1.5;
}

.pe-videos__label + .pe-videos { margin-top: 0.6em; }

.pe-videos li + li { margin-top: clamp(0.6rem, 1.4vw, 1.1rem); }

.pe-videos p {
  margin: 0;
  font-size: var(--pe-step-label);
  line-height: 1.5;
}

.pe-video {
  display: grid;
  grid-template-columns: clamp(24px, 3.46vw, 45px) 1fr;
  align-items: center;
  gap: clamp(0.4rem, 1.1vw, 14.5px);
  margin-top: 0.15em;
  font-size: var(--pe-step-link);
  line-height: 1.5;
  color: var(--c-link);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.pe-video img { width: 100%; }

/* --------------------------------------------------------------------------
   Photo frames
   -------------------------------------------------------------------------- */

.pe-frame {
  --pe-pad: 5.12%;                    /* image43.png, even border */
  --pe-win: 1069 / 715;               /* its window's aspect */
  position: relative;
  margin: 0;
  padding: var(--pe-pad);
  background: #fff;
  box-shadow: var(--pe-shadow);
  transform: rotate(var(--rot, 0deg));
}

/* The #FFFBF7 polaroid with the deep foot. */
.pe-frame--deep {
  --pe-pad: 5.39% 6.37% 25.61% 4.88%;
  --pe-win: 382 / 366.6;
  background: #fffbf7;
}

/* Slide 20's plain white card. */
.pe-frame--plain {
  --pe-pad: 8.60% 4.20% 20.30%;
  --pe-win: 363.06 / 415.99;
}

.pe-frame > picture,
.pe-frame__shot { display: block; }

/* The window aspect is asserted rather than inherited from the file so that
   the small rounding differences left by the crop maths cannot change the
   proportions of the card around it. */
.pe-frame img {
  width: 100%;
  aspect-ratio: var(--pe-win);
  object-fit: cover;
}

/* Captions written on the card's own foot. The foot is then sized by the
   caption rather than by the fixed 25.61%, so it can grow when the caption
   wraps on a narrow screen. */
.pe-frame--label { padding-bottom: 5.39%; }

.pe-frame--label figcaption {
  margin-top: 0.8em;
  font-size: var(--pe-step-cap);
  line-height: 1.4;
  text-align: center;
  color: #000;
}

/* Captions the design lays over the bottom of the photograph in white. A
   scrim is added so they clear 4.5:1 against whatever is behind them — the
   source relies on the photographs happening to be dark just there. */
.pe-frame__shot { position: relative; }

.pe-frame__shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6em 0.4em 0.35em;
  font-size: var(--pe-step-cap);
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
}

/* --------------------------------------------------------------------------
   Clusters
   Each slide's photo group is reproduced as an aspect-locked box with the
   frames placed absolutely as percentages of it, the same technique as
   .bio-cluster in site.css. The box is the union of the frames' rotated
   bounding boxes, so nothing escapes it at any width.
   -------------------------------------------------------------------------- */

.pe-cluster {
  position: relative;
  aspect-ratio: var(--ar);
}

/* CSS resolves every padding percentage against the *containing block's*
   width, so the card cannot be the positioned element itself — its border
   would be a share of the whole cluster rather than of the card. .pe-abs is
   the positioned box and the frame is its only child, which puts the card's
   own width in the denominator where it belongs. The same trap is documented
   on .pd-polaroid on the Producer & Director page. */
.pe-cluster > .pe-abs {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  z-index: var(--z, 1);
}

/* --------------------------------------------------------------------------
   Hero — slide 15
   -------------------------------------------------------------------------- */

/* The browser window the slide wraps around the photo grid: a Canva outline
   graphic (image24.png, 709x947 native) recoloured #808184 -> #DDCCC2. It is
   redrawn here rather than exported, as on the Producer & Director page — the
   asset is a 6KB flat outline that would have to be upscaled 1.39x.

   The source frame runs to y=1424 and is cut off by the bottom of the slide.
   On a page that has to close, so it closes with the same 27px inset it uses
   on the other three sides. */
.pe-window {
  border: clamp(2px, 0.327vw, 4.25px) solid #ddccc2;
  border-radius: clamp(8px, 1.63vw, 21px);
}

.pe-window__bar {
  display: flex;
  align-items: center;
  gap: 0.66%;
  height: clamp(14px, 2.61vw, 34px);
  padding-left: 3.81%;
  background: #ddccc2;
}

/* The dots are knockouts in the source artwork, so they show the page. */
.pe-window__bar span {
  width: 1.41%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-bg);
}

.pe-window__body { padding: 2.745%; }

/* Six photographs on a 931x910 stage, 13px gutters. */
.pe-mosaic {
  position: relative;
  aspect-ratio: 931.36 / 909.77;
}

.pe-mosaic > picture {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
}

.pe-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Slide 17 — the tall gopuram photograph beside the tilted frames
   In the source this photograph is full-bleed off the left edge of the canvas
   and runs the whole height of the slide. Here it is held inside the page's
   left column: a bleed would have to fight the container the rest of the page
   is built on for no gain.
   -------------------------------------------------------------------------- */

.pe-tall { margin: 0; }

/* Source order: the photograph leads and the frames follow, so it keeps its
   place rather than dropping below the group at the tablet breakpoint. */
.pe-s17 > .media-col { order: 0; }

/* --------------------------------------------------------------------------
   Slide 18 — phone mockup
   The frame proportions, screen inset, speaker slot and camera dot are the
   same component as the home page's, so .phone in site.css is reused; only its
   cap, its centring and its aspect are overridden so it fills its slot in the
   cluster exactly. Canva gives this one 463.78x917.67 against the home page's
   485x980.
   -------------------------------------------------------------------------- */

.pe-phone {
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 463.78 / 917.67;
}

/* --------------------------------------------------------------------------
   Slide 19 — collage
   The slide scatters four tilted frames with their annotations set loose
   around them. Reproduced as a row of four, each keeping its own rotation,
   with its annotation directly beneath it: the source's scatter depends on
   four blocks of running text being placed by hand in the gaps between the
   photographs, which cannot survive a fluid column.
   -------------------------------------------------------------------------- */

/* Slide 19's scatter. The slide places four cards across the band and sets the
   annotations loose in the gaps between them — one to the left of its
   photograph, one to the right, one underneath. This used to be reduced to a
   row of four with each note beneath its own frame, on the grounds that
   hand-placed blocks are not something a fluid column can promise. Reproduced
   properly on request, and that promise is kept a different way: the stage is
   aspect-locked and every child is a percentage of it, so the arrangement
   scales as one piece and cannot drift out of true at any width. Below the
   breakpoint it gives up and stacks, which is where a fluid column is the
   honest answer.

   1704 x 898 is the content box against the used part of the canvas —
   x=108..1812 by y=74..972. Every position is in the template, beside the
   source figure it came from. */
.pe-collage {
  position: relative;
  aspect-ratio: 1704 / 898;
  margin: 0;
  padding: 0;
}

/* Same reason as .pe-cluster > .pe-abs above: the card's border is a percentage
   of its own width, so the positioned box has to be the card's parent rather
   than the card itself. */
.pe-collage > .pe-abs {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  z-index: var(--z, 1);
}

/* The notes are positioned boxes too, so they carry no flow margin here. Two of
   the four set flush right on the slide, hard against the photograph they
   belong to. */
.pe-collage .pe-note { margin: 0; }

.pe-collage .pe-note--right { text-align: right; }

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

@media (max-width: 1024px) {
  /* Single column: hold the photo groups back so a full-width cluster does not
     dwarf the copy above it, exactly as .bio-cluster is held back. */
  .pe-cluster,
  .pe-window,
  .pe-tall {
    max-width: 34rem;
    margin-inline: auto;
  }

  /* The scatter gives up here. Four cards placed by hand across a 1704px stage
     have no room to be anywhere but on top of each other at this width, and the
     notes sit in gaps that no longer exist — so the stage stops being a stage
     and everything falls into the source order the template emits, which is
     each photograph followed by its own note. */
  .pe-collage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pe-collage > .pe-abs {
    position: static;
    width: 100%;
    max-width: 24rem;
    z-index: auto;
  }

  .pe-collage .pe-note,
  .pe-collage .pe-note--right {
    text-align: left;
    margin: clamp(0.7rem, 1.8vw, 1.45rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  }

  /* The florals are placed against a two-column layout that no longer exists;
     below the tablet breakpoint they only crowd the copy. */
  .pe-orn { display: none; }

  .pe-canopy-left,
  .pe-canopy-right { background-image: none; }
}

@media (max-width: 767px) {
  /* Rotations read as damage rather than character once a frame is only a few
     hundred pixels wide, so they are eased off. */
  .pe-frame { transform: rotate(calc(var(--rot, 0deg) * 0.45)); }
}

/* --------------------------------------------------------------------------
   Narrow viewports — touch targets
   The video rows measured 23px tall against the 24px minimum for a finger.
   The type is unchanged; only the row grows.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pe-video { min-height: 24px; }
}

/* --------------------------------------------------------------------------
   The captions under a collage — slide 47

   That slide is two photographs and one line under each, and nothing else: no
   title, no standfirst, no body. The composed picture the block takes carries
   the photographs but not the words, so these are the only place they exist.

   Left and right, at the slide's own insets. On the 1920 canvas TextBox 14 runs
   x=108 for 588 (5.63% to 36.25%) and TextBox 15 runs x=1429 for 405 (74.43% to
   95.52%), both starting at y=797, just under the pictures. The measures are
   narrow on purpose — that is how the slide sets them, five or six short lines
   each rather than two long ones.

   24pt on the canvas is 32px, rebased by the usual 0.763 to 24.4px, which is
   1.877vw of the 1300px container — the same arithmetic .pd-cap is measured
   with. Ink rather than the white .pd-cap uses, because these sit on the band's
   own #ebebeb ground and not over a photograph.
   -------------------------------------------------------------------------- */

/* The tracks ARE the slide's boxes: gutter, left caption, the gap between
   them, right caption, gutter. Written out rather than as two columns with
   percentage margins inside them, because a percentage on a grid item
   resolves against its own column and not against the row — which is how
   30.63% of the row quietly became 11% of it. 5.63 + 30.63 + 38.17 + 21.09
   + 4.48 = 100. */
.pe-canopy__captions {
  display: grid;
  grid-template-columns: 5.63% 30.63% 1fr 21.09% 4.48%;
  margin-top: clamp(0.6rem, 1.6vw, 1.1rem);
}

.pe-canopy__caption {
  margin: 0;
  font-size: clamp(0.78rem, 1.877vw, 1.526rem);   /* 32 -> 24.4px */
  line-height: 1.35;
  color: var(--c-ink);
}

.pe-canopy__caption--left  { grid-column: 2; }
.pe-canopy__caption--right { grid-column: 4; }

/* Side by side stops working long before the pictures do: at 21% of a phone
   screen the right caption is four characters wide. Stacked, each one takes
   the column and keeps its order, so it still reads as first picture then
   second. Same breakpoint as everything else on this page. */
@media (max-width: 1024px) {
  .pe-canopy__captions {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.6rem;
  }

  .pe-canopy__caption--left,
  .pe-canopy__caption--right {
    grid-column: 1;
  }
}