/* --------------------------------------------------------------------------
   The Sadir Theater Festival

   Attached to the two stf-* bands rather than to a page slug, so either can be
   placed elsewhere without its rules being left behind. Every colour and face
   here is already in site.css — ink, ground, rule, and the two Cinzels. Nothing
   new was introduced.

   One departure from the deck, deliberately: the source prints its links in a
   web blue that exists nowhere else on this site. They are set in --c-nav here,
   the colour every other link on the site uses.
   -------------------------------------------------------------------------- */

.stf-band {
  background-image: var(--section-bg, none);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* The engraved face, large and in caps — every slide on this deck titles itself
   this way, and it is the same treatment the Warrior Queen bands use. */
.stf-band__title {
  margin: 0 0 clamp(1.5rem, 3.4vw, 2.75rem);
  font-family: var(--font-engraved);
  font-size: clamp(1.6rem, 3.7vw, 3rem);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Plate — a composed picture, optionally with one standing beside it
   -------------------------------------------------------------------------- */

.stf-plate__split { align-items: center; }

.stf-plate__main,
.stf-plate__side {
  margin: 0;
  min-width: 0;
}

.stf-plate__main img,
.stf-plate__main picture,
.stf-plate__side img,
.stf-plate__side picture {
  width: 100%;
  height: auto;
  display: block;
}

/* The picture is the whole slide when it stands alone, so it takes the
   container's width rather than a measure of its own. */
.stf-plate > .page > .stf-plate__main { max-width: none; }

@media (max-width: 900px) {
  .stf-plate__split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
  }

  /* Upright and tall on its own row, a portrait would otherwise fill a phone
     on its own before the picture it belongs to is reached. */
  .stf-plate__side {
    max-width: 16rem;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Press cuttings

   Four to a row, measured off the design: each column is 19.6% of the content
   box and the space between them 7.2%. Eight tracks with each item spanning two
   express exactly that — 8t + 7g = 100% with g = 7.2% gives t = 6.2% and an item
   of 2t + g = 19.6% — and, unlike four integer columns, they let a short last
   row start on a half-column and centre itself.
   -------------------------------------------------------------------------- */

.stf-news__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 7.2%;
  row-gap: clamp(1.5rem, 3.6vw, 2.75rem);
}

.stf-news__item {
  grid-column: span 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* A short last row centres under the four above it. Each pair is "starts a row"
   and "this many remain", so only one of the three can match, and only when the
   remainder is genuinely the last row. The design shows a trailing pair sitting
   under columns two and three, which is the middle rule here. */
.stf-news__item:nth-child(4n + 1):nth-last-child(3) { grid-column: 2 / span 2; }
.stf-news__item:nth-child(4n + 1):nth-last-child(2) { grid-column: 3 / span 2; }
.stf-news__item:nth-child(4n + 1):nth-last-child(1) { grid-column: 4 / span 2; }

/* Small, bold and in caps above the card. --font-body leads with Century
   Gothic, which has a real bold, so this is a weight and not a synthesised one. */
.stf-news__headline {
  margin: 0 0 0.75rem;
  font-size: clamp(0.7rem, 0.85vw, 0.78rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* The white mount the cutting sits on, the same one the portraits use. */
.stf-news__card {
  padding: clamp(0.6rem, 1.2vw, 1rem);
  background: #fff;
  box-shadow: 0 3px 12px rgba(107, 94, 84, 0.18);
}

.stf-news__source {
  margin: 0 0 0.7rem;
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-ink);
}

.stf-news__shot {
  margin: 0;
}

.stf-news__shot img,
.stf-news__shot picture {
  width: 100%;
  height: auto;
  display: block;
}

/* Pushed to the bottom of the item so a run of cards with headlines of
   different depths still line their addresses up with each other. */
.stf-news__link {
  margin: 0.9rem 0 0;
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  line-height: 1.3;
}

/* The mark and the name sit on one line whether or not there is an address to
   go to — a cutting with no link still names where it came from.

   Colour is slide 57's own #5271FF, on request. Recording what that costs,
   because this file's sibling already carries the opposite decision: the same
   blue was measured at 3.41:1 on the page ground and taken off .am-news__url a
   and .am-hero__link a for failing AA at body size, which is what these are —
   .stf-news__link runs 12.5 to 14px. The colour it replaces here, --c-nav
   #8e7762, is 3.6:1 and site.css marks it "AA large pass" in the token table,
   so neither the old value nor the new one clears 4.5:1 and this is not a
   regression from passing to failing. #4059DB is the same hue at 4.80:1 if the
   ask is ever revisited.

   The gap is the slide's: the mark ends at 149.7 and the name starts at 166.3,
   16.6px, 0.86vw of the canvas, 0.79rem rebased. It was 0.55rem. */
.stf-news__where-row {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 0.86vw, 0.79rem);
  color: #5271ff;
  text-decoration: none;
}

a.stf-news__where-row:hover,
a.stf-news__where-row:focus-visible {
  color: #4059db;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The globe, drawn rather than exported — the same bargain the play mark on
   this band strikes. It is affordance and not content: it says "this goes to a
   publication" and the name beside it carries the meaning, so it needs no
   upload on any row, stays crisp at any size, and is hidden from the reading.

   Slide 57 sets it 39.1px square against the card's left edge, which rebases to
   29.8px — the same figure .stf-news__mark already caps at, so the two are
   interchangeable in the row. Its blue is the icon's own #3963A4 sampled off
   ppt/media/image59.png, not the link's #5271FF; the slide uses two blues here
   and reading them as one would flatten it.

   :has() keeps the two marks from stacking. A row that carries an uploaded
   .stf-news__mark keeps it and this draws nothing — the drawn glyph is the
   default, not an override. */
.stf-news__where-row:not(:has(.stf-news__mark))::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(22px, 2.2vw, 30px);
  height: clamp(22px, 2.2vw, 30px);
  background: center / contain no-repeat url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">\
<circle cx="20" cy="20" r="20" fill="%233963a4"/>\
<g fill="none" stroke="%23fff" stroke-width="1.5">\
<circle cx="20" cy="20" r="12.8"/><path d="M20 7.2v25.6M7.2 20h25.6"/>\
<ellipse cx="20" cy="20" rx="6.1" ry="12.8"/>\
<path d="M10.4 11.8a15.6 15.6 0 0 0 19.2 0M10.4 28.2a15.6 15.6 0 0 1 19.2 0"/>\
</g></svg>');
}

.stf-news__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(22px, 2.2vw, 30px);
  height: clamp(22px, 2.2vw, 30px);
}

.stf-news__mark img,
.stf-news__mark picture {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.stf-news__where { min-width: 0; }

/* Two to a row. Every row is then full or carries one trailing item, and the
   half-column offsets above would misplace that item rather than centre it. */
@media (max-width: 900px) {
  .stf-news__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1rem, 4vw, 2.5rem);
  }

  .stf-news__item:nth-child(4n + 1):nth-last-child(3),
  .stf-news__item:nth-child(4n + 1):nth-last-child(2),
  .stf-news__item:nth-child(4n + 1):nth-last-child(1) { grid-column: span 2; }
}

@media (max-width: 560px) {
  .stf-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Bands this page borrows, set the way this page wants them

   Everything above belongs to an stf-* band and so is this page's alone. The
   two rules below are not: about-intro is shared with About and Warrior Queen,
   and <em> is shared with the whole site. Both are scoped to
   body.sadir-festival — the slug→class map in functions.php, after
   womens-advocacy, bharatanatyam and warrior-queen.

   Scoped rather than left to load order. This sheet only ever loads here, since
   no other page carries an stf-* band, so an unscoped rule would usually win
   anyway — but only if it happened to be enqueued after site.css, which depends
   on where the bands sit on the page. The body class makes it specificity
   instead, which does not move when somebody reorders the sections.
   -------------------------------------------------------------------------- */

/* The Performance heading in the engraved face at 500.

   Worth knowing what 500 resolves to: the theme loads Cinzel at 400 and 600
   only. CSS weight matching for 500 tries 500, then descends — so this renders
   in the 400 face, lighter than the 700 .display-title asks for and lighter
   than the 600 Cinzel could give. That is what was asked for; 600 is the value
   if it should ever read bolder. The same call was made on Warrior Queen. */
body.sadir-festival .display-title {
  font-family: var(--font-engraved);
  font-weight: 500;
  /* Capped at 3.5rem on request, down from the 6.10rem of --step-display. The
     floor and the slope are that step's own, as on every other recap in this
     theme: flat at 3.5rem the word would stand at 56px on a 360px phone and run
     off the side, where recapping only moves the ceiling. Above 745px viewport
     the slope has already passed 3.5rem, so this IS a flat 3.5rem everywhere
     the design is seen at width. */
  font-size: clamp(2.25rem, 7.52vw, 3.5rem);   /* --step-display, recapped */
}

/* The play titles inside the Performance copy — Katkon Trikon, Broken Images.
   The deck sets every play name on slides 54 and 55 bold AND italic; the field
   allows <em> and nothing else, so the weight is the half that has to come from
   here.

   600 rather than 700, on request. --font-body leads with Century Gothic, which
   carries a real 600, so this is a face and not a synthesised one.

   Scoped to this page rather than to <em> everywhere: the same element is a
   film title on About and a book title on Author & Publisher, and both of those
   are set in the body weight on purpose. .body-copy is the block the about-intro
   band prints its copy into. */
body.sadir-festival .body-copy em { font-weight: 600; }

/* --------------------------------------------------------------------------
   The plays — words beside a picture

   Measured off the redrawn Performance slides, which are a 1177px artboard:
   the copy runs x=57..860 and the pictures x=938..1142, so 68.2% of copy, a
   6.6% gutter and 17.3% of picture. Expressed as fr so the gutter can stay a
   clamp and the two columns take what is left.

   A GRID ROW PER PLAY, not two independent columns. Each picture belongs to
   its own words: paired in rows they stay level however long a description
   runs, where two stacks would drift apart at the first uneven paragraph and
   caption the wrong photograph. align-items: start keeps a short block's
   picture at the top of its row rather than centred against it.
   -------------------------------------------------------------------------- */

.stf-plays__list {
  display: grid;
  gap: clamp(1.75rem, 4.6vw, 3.4rem);
}

.stf-play {
  display: grid;
  grid-template-columns: 68.2fr 17.3fr;
  column-gap: clamp(1.25rem, 6.6vw, 4.85rem);
  align-items: start;
}

.stf-play__title {
  margin: 0 0 0.5em;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.72vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-ink);
}

.stf-play__body {
  margin: 0 0 0.75em;
  font-size: clamp(0.92rem, 1.42vw, 1.16rem);
  line-height: 1.55;
  color: var(--c-ink);
}

.stf-play__body:last-child { margin-bottom: 0; }

/* The picture and the name under it read as one card: a white ground carried
   behind both, so the caption strip is part of the photograph rather than a
   line of text that happens to sit below it. */
.stf-play__media {
  margin: 0;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(107, 94, 84, 0.14);
}

.stf-play__media img,
.stf-play__media picture {
  display: block;
  width: 100%;
  height: auto;
}

.stf-play__media figcaption {
  padding: 0.6em 0.7em;
  font-size: clamp(0.64rem, 0.93vw, 0.76rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* One column at the width the rest of the site breaks at. The picture follows
   its words rather than leading them — the words are what the row is for, and
   a photograph above them would read as a heading for the next play. */
@media (max-width: 1024px) {
  .stf-play {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }

  /* Held to the width it has on the wide layout rather than filling the
     column: at full width these photographs dwarf the paragraph they belong
     to, and the caption strip stretches into a band. */
  .stf-play__media {
    max-width: 22rem;
  }
}