/* ==========================================================================
   Promoter of Theatre & Other Artists — slides 24, 25 and 26 of old.pptx.

   Every size below is a source size from the 1920x1080 canvas multiplied by
   1300/1704 = 0.763, expressed as clamp(min, Xvw, max) against the 1300px
   container, exactly as css/site.css does. Positions are percentages of the
   1704px content area measured from x=108.

   Geometry comes from the PowerPoint export cross-checked against the Canva
   element data (design DAGWh8EbLBY, pages 24-26). Canva reports `pos` as y,x —
   transposed — and reports image crops the PowerPoint drops, so the photos here
   are pre-cropped to the window the design actually shows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared type — slides 25 and 26 use an identical text column
   -------------------------------------------------------------------------- */

.pt-section {
  /* Ornaments bleed past the top and right edges on the slide, clipped by the
     canvas. `clip` rather than `hidden` so no scroll container is created. */
  overflow: clip;
}

/* A ground for the band, where a row has chosen one. Nothing is written when
   it has not: --section-bg falls back to none and the page's own paper shows
   through, which is what every one of these bands did before the field
   existed. Same three lines every other band in this theme carries.

   Worth knowing next to the Corner florals switch above it: the drawn sprays
   sit ON this ground, not under it, so a busy picture wants them turned off. */
.pt-kunqu {
  background-image: var(--section-bg, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.pt-section > .page { padding-block: clamp(2rem, 6vw, 4.9rem); }

/* 80px Cinzel -> 61.0px. Both titles are full capitals in the source; Cinzel
   sets lowercase as small capitals, so the copy must stay capitalised or the
   cap heights change. */
.pt-title {
  margin: 0 0 clamp(0.5rem, 1.18vw, 0.96rem);
  font-family: var(--font-engraved);
  font-size: clamp(1.75rem, 4.70vw, 3.815rem);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -0.048em;
  color: var(--c-ink);
}

/* "SADIR THEATER FESTIVAL" is one line in the source, and the source gives it a
   wider box than the copy beneath it: the title box runs x=89..1114 while the
   lede and lists run x=89..974. Measured from the text inset at x=108 that is
   1006 against 866, so the title is 1006/866 = 116.17% of its column. Without
   this the full-capital line wraps to two at every viewport, which the source
   never does. Nothing sits beside it — the nearest card starts at 55.7% and the
   line ends at 53.8% — and 116.17% of the column still lands inside the 1300px
   container, so nothing overflows. */
@media (min-width: 1025px) {
  .pt-sadir .pt-title { width: 116.17%; }
}

/* 32px bold -> 24.4px, the site body step. */
.pt-lede {
  margin: 0 0 clamp(1rem, 2.19vw, 1.78rem);
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.4;
}

.pt-label {
  margin: 0;
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.4;
}

/* Level-1 disc bullets, from the Canva element data. The PowerPoint export
   flattens these to plain paragraphs, which is why the deck looks unbulleted. */
.pt-list {
  margin: 0 0 clamp(0.75rem, 1.96vw, 1.6rem);
  padding-left: 1.15em;
  font-size: var(--step-body);
  line-height: 1.4;
}

.pt-list:last-child { margin-bottom: 0; }
.pt-list li { margin: 0; }

/* 26.67px -> 20.3px */
.pt-note {
  margin: clamp(0.75rem, 1.44vw, 1.18rem) 0 0;
  font-size: clamp(0.8rem, 1.57vw, 1.272rem);
  line-height: 1.28;
}

/* 24px -> 18.3px. The source paints these #5271FF — Canva's default link blue,
   which only reached 3.4:1 on the page texture. Changed to the body ink on
   request, with every other video link on the site: 5.25:1. Still underlined,
   which is now the only cue that these are links. */
.pt-url {
  font-size: clamp(0.75rem, 1.41vw, 1.145rem);
  line-height: 1.5;
  color: #6b5e54;
  overflow-wrap: anywhere;
}

.pt-url:hover,
.pt-url:focus-visible { color: var(--c-ink); }

/* Festival mark / play glyph beside their links. Source gaps are 20px and 20px
   at the canvas, i.e. ~15px rebased. */
.pt-linkrow {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.17vw, 0.95rem);
  margin: clamp(1rem, 2.46vw, 2rem) 0 0;
}

/* The festival mark, on its own. The source draws it on a 103.7px white disc
   -> 79.1px rebased, with the logo at 68.1% of that; the disc was dropped on
   request and only the artwork is left. The mark keeps the size it already had,
   which is that product rather than a new measurement: 38 x 0.681 = 25.88px,
   6.08 x 0.681 = 4.14vw, 79.1 x 0.681 = 53.87px.

   Scoped to picture so it cannot catch .pt-play, the SVG glyph that shares
   .pt-linkrow on the video row below. Width only — the mark is 108x115, not
   square, so height follows its own proportions the way it did inside the
   disc. */
.pt-linkrow picture {
  flex: 0 0 auto;
  display: block;
  width: clamp(25.88px, 4.14vw, 53.87px);
}

.pt-linkrow picture img { width: 100%; height: auto; display: block; }

/* 58.9px -> 45.0px. Drawn as an SVG rather than exported — the source asset is
   a flat red disc with a white triangle. */
.pt-play {
  flex: 0 0 auto;
  display: block;
  width: clamp(24px, 3.46vw, 45px);
}

.pt-play svg { display: block; width: 100%; height: auto; }

/* Decorative florals. Each is placed at its source x as a percentage of the
   1704px content area; the vertical offset is a percentage of the ornament's
   own height so it tracks the artwork rather than the viewport. */
.pt-ornament {
  position: absolute;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

.pt-ornament--sadir-stems {           /* x=601.5 y=-34.6  392x312 */
  left: 28.96%;
  width: 23.03%;
  transform: translateY(-11.09%);
}

.pt-ornament--sadir-spray {           /* x=1446.2 y=-143.4 536x448 rot -29.63 */
  left: 78.53%;
  width: 31.44%;
  transform: translateY(-32.04%) rotate(-29.63deg);
}

.pt-ornament--kunqu-stems {           /* x=635.7 y=0 347x514 */
  left: 30.97%;
  width: 20.36%;
}

.pt-ornament--kunqu-spray {           /* x=1517.6 y=-185.1 536x448 rot -29.63 */
  left: 82.72%;
  width: 31.44%;
  transform: translateY(-41.37%) rotate(-29.63deg);
}

/* --------------------------------------------------------------------------
   Hero — slide 24
   -------------------------------------------------------------------------- */

/* Full-bleed damask. Deliberately a plain block wrapper rather than 100vw: on a
   page with a scrollbar, 100vw includes it and pushes the layer past the
   content box. The element's 20% opacity in the design is baked into the
   asset's alpha, so it composites straight over the body texture. */
.pt-hero-bleed {
  background: url('../../images/promoter-theatre-damask.png') center top / cover no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/promoter-theatre-damask.webp') type('image/webp'),
    url('../../images/promoter-theatre-damask.png')  type('image/png')
  ));
}

.pt-hero { padding-block: clamp(1.5rem, 5.1vw, 4.15rem); }

/* 84.01px -> 64.1px */
.pt-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.93vw, 4.006rem);
  font-weight: 700;
  line-height: 1.23;
  letter-spacing: -0.048em;
  color: var(--c-ink);
}

/* Browser-window frame, drawn in CSS. Source: 985x1316 graphic with a 43.4px
   title bar, a 5.6px side rule, a 4.2px bottom rule, a 13.9px corner radius and
   three 15.3px dots centred at x=44.5 / 65.3 / 85.4 — all canvas pixels,
   rebased below. Colour is the recolour Canva applies (#808184 -> #DDCCC2).

   Borders rather than a painted background, so the interior stays transparent
   and the damask shows through it exactly as it does on the slide. */
.pt-browser {
  --pt-bw:  clamp(2px, 0.326vw, 4.24px);      /*   5.6 ->  4.24 */
  --pt-bar: clamp(15px, 2.55vw, 33.1px);      /*  43.4 -> 33.10 */
  --pt-dot: clamp(5px, 0.90vw, 11.7px);       /*  15.3 -> 11.68 */

  position: relative;
  border: var(--pt-bw) solid #ddccc2;
  border-top-width: var(--pt-bar);
  border-radius: clamp(4px, 0.82vw, 10.6px);
  padding: clamp(6px, 1.44vw, 18.8px) clamp(5px, 1.26vw, 16.3px) clamp(5px, 1.26vw, 16.3px);
}

/* The dots are transparent holes in the source graphic; here they sit on top of
   a painted border, so they take the panel tint instead — indistinguishable
   against the page at this size. Centres are percentages of the frame width. */
.pt-browser::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--pt-bar));
  left: calc(-1 * var(--pt-bw));
  width: calc(100% + 2 * var(--pt-bw));
  height: var(--pt-bar);
  background-image:
    radial-gradient(circle at 4.52% 50%, #f2f1ef 0 calc(var(--pt-dot) / 2), transparent calc(var(--pt-dot) / 2 + 0.5px)),
    radial-gradient(circle at 6.63% 50%, #f2f1ef 0 calc(var(--pt-dot) / 2), transparent calc(var(--pt-dot) / 2 + 0.5px)),
    radial-gradient(circle at 8.67% 50%, #f2f1ef 0 calc(var(--pt-dot) / 2), transparent calc(var(--pt-dot) / 2 + 0.5px));
}

/* Three rows, each with its own column split and a 9px canvas gutter
   (9/931 = 0.97%). Row height is fixed by --ratio so the rows stay level; the
   photos are already cropped to their slots, so `cover` re-crops nothing. */
.pt-mosaic {
  display: grid;
  gap: 0.97%;
}

.pt-mosaic__row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 0.97%;
  aspect-ratio: var(--ratio);
}

.pt-mosaic__row picture { height: 100%; }

.pt-mosaic__row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Photo clusters — slides 25 and 26
   Items are placed absolutely as percentages of the cluster box, which carries
   the source cluster's own proportions so the whole arrangement scales as one.
   `container-type` lets the handwritten captions be sized against the cluster
   rather than the viewport, so they hold their place in the card at any width.
   -------------------------------------------------------------------------- */

.pt-cluster {
  position: relative;
  container-type: inline-size;
}

.pt-cluster--sadir { aspect-ratio: 821.7 / 816; }
.pt-cluster--kunqu { aspect-ratio: 899.14 / 833.32; }

.pt-cluster > * {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  margin: 0;
  transform: rotate(var(--rot, 0deg));
}

/* Polaroid card. Source shape is a 430.4x500 frame whose photo window sits at
   x 21..403 and y 23.2..389.8, leaving a deep bottom band for the caption.
   The drop shadow is the source's blurred blob at 29%, drawn in CSS. */
.pt-polaroid {
  aspect-ratio: 430.4 / 500;
  background: #fffbf7;
  box-shadow: 0 clamp(4px, 0.95vw, 12px) clamp(8px, 1.7vw, 22px) rgba(60, 51, 51, 0.30);
}

.pt-polaroid picture {
  position: absolute;
  left: 4.879%;
  top: 4.640%;
  width: 88.755%;
  height: 73.320%;
}

.pt-polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption band, 93.6% of the card as in the source.

   The source face is "Canva Student Font", a licensed handwriting face that is
   not on the web, so a system handwriting stack stands in for it. A strict
   rebase of the source's 22.76px gives 17.4px, but the substitute is materially
   wider and pushed the longest caption out of the band. The size is reduced by
   the ratio of the two faces' widths — 2.769cqw x 0.82.

   Measured at a 1300px container that lands each caption inside its band with
   room to spare (deepest text sits 13.5px above the card edge), but one line
   longer than the source: 2 / 2 / 3 lines against the source's 1 / 1 / 2. The
   substitute is about 40% wider than the original, and the reduction needed to
   recover the source line count would take the type to roughly 10px, which is
   both illegible and much further from the rebase than the extra line is.
   Restore 2.769cqw if the real face is ever licensed. */
.pt-polaroid figcaption {
  position: absolute;
  left: 3.2%;
  right: 3.2%;
  top: 78.6%;
  bottom: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
  /* Floored at 12px. The proportional sizing is the point of these units and is
     kept, but on a narrow viewport the container shrinks with it and the
     caption measured 7.0px at 320px and 8.4px at 414px — below the point the
     note above already calls illegible. max() holds the rebase everywhere it
     is legible and stops there. */
  font-size: max(0.75rem, 1.095vw);
  font-size: max(0.75rem, 2.271cqw);
  line-height: 1.4;
  text-align: center;
  color: #000;
}

/* Slide 26 uses the same card with no caption. */
.pt-polaroid--plain { aspect-ratio: 430.4 / 500; }

/* Landscape photo frame, slide 25. Source asset is a white card 448.3x313.7
   with an even 23.1px border and a 3:2 photo, tilted 14.5deg inside its own
   bounding box — which is why the frame reads as -11.18deg on the slide while
   its container is placed at -25.64deg. */
.pt-frame {
  padding: 5.15%;
  background: #fffbf7;
  box-shadow: 0 clamp(4px, 0.95vw, 12px) clamp(8px, 1.7vw, 22px) rgba(60, 51, 51, 0.30);
}

.pt-frame img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Floats between the two cards, in the source's own 450.8px box.

   Type size is the one real deviation on this page. A strict rebase of the
   source's 46.67px gives 35.6px, but the source face is "Canva Student Font"
   and the substitute is materially wider — at 35.6px the line runs 100px past
   its box, over the photo on one side and off the container on the other. The
   size is reduced by the ratio of the two faces' widths so the line occupies
   the measure the design gives it, on one line, exactly where the source puts
   it. Restore 5.191cqw if the real face is ever licensed.

   Position is the second deviation, and it comes from the same substitution.
   The source box runs x=1395.5..1846.3, i.e. 34px past the right edge of the
   1704px content area, which is harmless on a 1920px canvas with 108px margins.
   The site's margin is --gutter: 15px, so once the container is at its 1300px
   maximum there is nothing like that much room, and the line — centred on
   78.74% of the cluster and wider in the substitute face than in the original —
   ran up to 7px past the viewport edge for every viewport between 1025px and
   ~1345px. It is therefore sized to its own line and flushed to the right edge
   of the cluster, which is also the right edge of the container. That moves it
   21.8px left of the source centre at a 1300px container: 28.6 canvas px, 1.7%
   of the content width, inside tolerance and invisible against the card it
   floats over. */
.pt-peony {
  left: auto;
  right: 0;
  top: 20.24%;
  width: max-content;
  max-width: none;
  transform: none;
  font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
  font-size: 2.19vw;
  font-size: max(0.75rem, 4.15cqw);
  line-height: 1.4;
  /* One line in the source, and it has to stay one line: a second line would
     drop straight onto the card below it. */
  white-space: nowrap;
  text-align: center;
  color: #000;
}

/* --------------------------------------------------------------------------
   Responsive — breakpoints match the live site: tablet 1024, mobile 767
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Copy leads, the pictures follow, as elsewhere on the site. The hero is the
     exception: its mosaic is the point of the slide, so it keeps source order. */
  .pt-hero-split > .media-col { order: 0; }
  .pt-hero-split { gap: clamp(1.25rem, 4vw, 2.5rem) !important; }

  .pt-sadir-split,
  .pt-kunqu-split { gap: clamp(2rem, 6vw, 3.5rem) !important; }

  .pt-sadir-split > .media-col,
  .pt-kunqu-split > .media-col { order: 2; }

  /* One column makes the cluster full width, which blows the cards up well past
     their designed size, so both are capped and centred. */
  .pt-cluster { max-width: 34rem; margin-inline: auto; }

  /* Below the split the ornaments have no column to sit beside, so they are
     pulled back to the edges and lightened rather than dropped. */
  .pt-ornament { opacity: 0.75; }
  .pt-ornament--sadir-stems,
  .pt-ornament--kunqu-stems { left: 4%; width: 32%; }
  .pt-ornament--sadir-spray,
  .pt-ornament--kunqu-spray { left: 66%; width: 42%; }
}

@media (max-width: 767px) {
  /* The three-across mosaic rows stay two-across but the frame chrome would
     eat the width, so the padding tightens. */
  .pt-browser { padding: 8px 6px 6px; }

  .pt-ornament { display: none; }

  .pt-cluster { max-width: 24rem; }

  /* cqw keeps the captions proportional to the card, but at this size the card
     itself is small enough that the floor matters more than the ratio. */
  .pt-polaroid figcaption { font-size: max(12px, 2.271cqw); }   /* floor was 7px */
  .pt-peony { font-size: max(13px, 4.15cqw); }
}