/* --------------------------------------------------------------------------
   The Blue Boy Chronicles

   Attached to the bbc-hero band rather than a page slug. Type sizes are carried
   across from .am-hero, which this is modelled on and which measured them off
   the deck — no figure below is a new measurement, and no colour is a new hex.
   -------------------------------------------------------------------------- */

.bbc-hero {
  background-image: var(--section-bg, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-block: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
}

.bbc-hero__split { align-items: center; }

.bbc-hero__copy { min-width: 0; }

/* The kicker is the largest thing on the page and the heading proper — hence
   the heading level on it rather than on the line below. Light rather than
   bold, as the design sets it, which is what separates it from the headline. */
.bbc-hero__kicker {
  margin: 0 0 clamp(1.25rem, 3.4vw, 2.75rem);
  font-family: var(--font-engraved);
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   A pull-quote and a mark, both above the title
   -------------------------------------------------------------------------- */

/* Italic and light, with the marks set around it. The quotation is the text;
   the marks are ornament, so they are drawn here and hidden from the reading
   rather than typed into the field, where they would be read out as characters
   and would have to be maintained by hand. */
/* A row of its own, the full width of the container, above the two columns.
   Slide 51: the quote sits at y=110.8 running from x=196.4 to 1471.8 with its
   marks bracketing it at 108 and 1512.1, and nothing else is on that line —
   the ABOUT heading and its copy only begin at y=282, in a column 887.4 wide
   with the pictures beside it. The band's markup puts it outside .split for
   that reason; see the note in bbc-hero.php.

   The conversion is the one the rest of this theme uses: the deck is 1440x810pt,
   which is 1920x1080px, so a point is 1.3333px on the canvas, and the canvas is
   rebased to the 1300px container by 0.763. Anything that must stay locked to
   the type is written in em of the quote's own size instead, which holds the
   slide's ratio at every viewport: its line is 56px, so a 70.6px mark is 1.26em.

   THE MARKS ARE NOT QUOTATION GLYPHS. Freeform 36 and 40 are blipFills, and the
   svgBlip behind them (rId14) is two solid teardrops — the artwork below, taken
   from the deck unaltered and merely stripped of its wrappers. Lettering this
   with curly quotation marks missed, and could only ever have missed: it draws a
   blunt double comma and a serif quotation mark is a thin tapered one, so no
   size, face or offset brings them together. Hence a mask rather than a glyph —
   masked, not a background-image, so background-color still names the colour.

   The closing mark is the SAME artwork, not a mirrored twin: Freeform 40 sets
   flipH and flipV both true, which is a 180-degree turn. One mask, one rotate.

   The two marks do not sit level, and that is the design rather than a slip.
   Freeform 36's top is at 103.2 and Freeform 40's at 119.8, so the opening mark
   stands 7.6px above the line's top and the closing one 9.0px below it. They
   were on a shared centre here, which after the shape itself was the most
   visible thing wrong.

   Line spacing is the slide's exactly: the paragraph carries lnSpc spcPts 5880,
   which is 58.8pt against 42pt type — 1.4, not the 1.35 that was here.

   The row is 82.4% of the container. The opening mark starts on the content
   box's left edge at 108 and the closing one ends at 1512.1, so 1404.1px of the
   1704 box — 1071px at this container, or 66.9rem. A 68rem tried for this and
   landed within 17px of it, which is worth recording: the measure was never
   what made this look wrong, and widening it further will not help.

   Both insets are the slide's own: 88.4px on the left, 1.58em, and 40.3px on
   the right, 0.72em. A symmetric 1.58em was tried first and is wrong — it
   leaves the line 3.3px short of the 939.5px it needs and breaks it onto a
   second line, where slide 51 sets it on one. The deck's right inset gives the
   text the 973px its own box has, and 33.5px to spare.

   That inset is narrower than the closing mark, so a quote appreciably longer
   than this one would run beneath it. The deck has the same property and gets
   away with it for the same reason: the line is short. If a longer quote ever
   goes in this field, 1.26em is the value that clears the mark at any length —
   at the cost of the single line here, which is the thing being matched.

   Colour stays --c-ink, which is #6b5e54 — the exact srgbClr the run sets.

   The gap below is zero, on request. The slide's own is 95.4px on the canvas —
   its quote box ends at 186.6 and the ABOUT heading begins at 282.0 — which is
   72.8px rebased, and was written here as 4.55rem on a 5.60vw slope. The floor
   and the ceiling are now both 0rem, so the clamp resolves to 0 at every width
   and the 5.60vw between them can never be reached. It is kept only because it
   records the slope this gap had, should the ceiling ever go back up. */
.bbc-hero__quote {
  position: relative;
  max-width: 82.4%;
  margin: 0 0 clamp(0rem, 5.60vw, 0rem);
  padding-left: 1.58em;
  padding-right: 0.72em;
  font-family: 'Arapey', Georgia, serif;
  font-size: clamp(1.5rem, 3.29vw, 2.67rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--c-ink);
  --quote-mark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0.0%20-6.9%202880.9%202212.1'%3E%3Cpath%20fill='%23fff'%20d='m735.6,935.1c-126.4,0-244.2,37-343,100.8.7-6,0-12.1,1.5-28.6,1.5-15.8,3.7-27.5,6.3-40.8,3.6-18.9,7.3-33,9.4-40.8,18.5-69.5,45.5-130.3,45.5-130.3,9.5-21.3,26.5-57.2,50.2-95.8,38.8-63.1,78.5-105.7,133.5-161.7,115.4-117.6,201.8-221.8,358-329.7,19-13.2,35.7-29.5,55-42.4,0,0,46.5-31.2,58.1-56.5,3.3-7.2,3.1-14.1,3.1-14.1-.1-4.7-1.4-8.8-4.7-15.7-5.5-11.5-11.3-19.7-14.1-23.6-8.4-11.6-8.5-10.3-17.3-22-11.1-14.9-12.6-19.4-20.4-25.1,0,0-7.1-5.2-15.7-7.9-25.3-7.8-65.6,32.7-95.8,59.7-27.5,24.6-58.8,44.7-87.9,67.5-56.5,44.3-58.9,42.9-117.8,87.9-25.7,19.7-115.4,88.7-218.2,182.1-14.3,13-27.7,25.1-45.5,42.4-16.1,15.5-61.8,60.3-117.8,125.6-15.6,18.2-65.4,77-111.5,142.9-52.4,74.8-148.2,211.6-204.1,412.9C1.5,1269,0,1385.6,0,1421.9c.1,59.4,5.3,107.8,9.4,138.2,10.9,80.2,24.5,180.8,83.2,290.5,73.6,137.4,185.4,228.1,271.6,273.2,58.3,30.5,122.3,49.3,125.6,50.2,10.3,3,57.1,16.3,120.9,23.6,53.3,6.1,94.7,5.3,111.5,4.7,1,0,1.9,0,2.8,0,3.5,0,7,0,10.5,0,349.9,0,633.5-283.6,633.5-633.5s-283.6-633.5-633.5-633.5Z'/%3E%3Cpath%20fill='%23fff'%20d='m2247.5,936.7c-126.4,0-244.2,37-343,100.8.7-6,0-12.1,1.5-28.6,1.5-15.8,3.7-27.5,6.3-40.8,3.6-18.9,7.3-33,9.4-40.8,18.5-69.5,45.5-130.3,45.5-130.3,9.5-21.3,26.5-57.2,50.2-95.8,38.8-63.1,78.5-105.7,133.5-161.7,115.4-117.6,201.8-221.8,358-329.7,19-13.2,35.7-29.5,55-42.4,0,0,46.5-31.2,58.1-56.5,3.3-7.2,3.1-14.1,3.1-14.1-.1-4.7-1.4-8.8-4.7-15.7-5.5-11.5-11.3-19.7-14.1-23.6-8.4-11.6-8.5-10.3-17.3-22-11.1-14.9-12.6-19.4-20.4-25.1,0,0-7.1-5.2-15.7-7.9-25.3-7.8-65.6,32.7-95.8,59.7-27.5,24.6-58.8,44.7-87.9,67.5-56.5,44.3-58.9,42.9-117.8,87.9-25.7,19.7-115.4,88.7-218.2,182.1-14.3,13-27.7,25.1-45.5,42.4-16.1,15.5-61.8,60.3-117.8,125.6-15.6,18.2-65.4,77-111.5,142.9-52.4,74.8-148.2,211.6-204.1,412.9-40.9,147-42.5,263.7-42.4,299.9.1,59.4,5.3,107.8,9.4,138.2,10.9,80.2,24.5,180.8,83.2,290.5,73.6,137.4,185.4,228.1,271.6,273.2,58.3,30.5,122.3,49.3,125.6,50.2,10.3,3,57.1,16.3,120.9,23.6,53.3,6.1,94.7,5.3,111.5,4.7,1,0,1.9,0,2.8,0,3.5,0,7,0,10.5,0,349.9,0,633.5-283.6,633.5-633.5s-283.6-633.5-633.5-633.5Z'/%3E%3C/svg%3E");
}

.bbc-hero__quote::before,
.bbc-hero__quote::after {
  content: "";
  position: absolute;
  width: 1.26em;
  height: 0.97em;
  background-color: #ffffff;
  -webkit-mask: var(--quote-mark) no-repeat center / contain;
          mask: var(--quote-mark) no-repeat center / contain;
}

.bbc-hero__quote::before {
  left: 0;
  top: -0.136em;
}

/* Read from the bottom so the mark stays with the LAST line once the quote
   wraps, which the slide never has to do. On a single line the two agree: the
   content box is 1.4em, and 1.4 - 0.161 - 0.968 puts its top back at +0.161em. */
.bbc-hero__quote::after {
  right: 0;
  bottom: 0.272em;
  transform: rotate(180deg);
}

/* The festival's roundel above the title. Held to a width rather than a height:
   it is a circular lockup and its own file carries the disc, so scaling by
   width keeps the disc round whatever is inside it. */
.bbc-hero__mark {
  margin: 0 0 clamp(1rem, 2.6vw, 2rem);
  width: clamp(90px, 12vw, 168px);
}

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

/* The Awards & Media hero's title, for a page that wants that face here — the
   values are copied from .am-hero__title rather than approximated.

   Type only. The margin below stays this band's own: the kicker is followed by
   a headline, a subtitle and body copy that am-hero has no equivalent of, and
   taking its 4.9vw would open a gap this column was not spaced for. */
.bbc-hero__kicker--display {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.93vw, 4.01rem);
  font-weight: 700;
  line-height: 1.23;
  letter-spacing: normal;
  text-transform: none;
}

/* Bold, in caps and set tight — the loudest block in the column, but smaller
   than the kicker above it. A <p> and not a heading: it restates the page
   rather than opening a section, so it must not take a level.

   The display face rather than the engraved one, on request: Blue Boy and Ta
   Dhi Tom are the only two pages whose headline field is filled, so this rule
   reaches exactly those two and no other band that borrows bbc-hero. */
.bbc-hero__headline {
  margin: 0 0 clamp(0.9rem, 2.2vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.35vw, 1.95rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: var(--c-ink);
}

/* The line under the headline: the body face, not the engraved one, and not in
   caps — it is the festival's own name rather than a second shout, which is
   what stops the two competing. Sits tight under the headline and carries the
   gap down to the copy.

   2rem at the capped container, on request, up from 1.4rem. The slope is that
   figure rebased the same way the old one was — 22.4px was 1.72vw of a 1302px
   container, so 32px is 2.46vw of it — and the floor moves in the same
   proportion, which keeps the line fluid rather than fixed at 32px on a
   phone. Ta Dhi Tom is the only page with this field filled. */
.bbc-hero__subtitle {
  margin: 0 0 clamp(1rem, 2.6vw, 1.9rem);
  font-size: clamp(1.35rem, 2.46vw, 2rem);
  line-height: 1.3;
  color: var(--c-ink);
}

/* The body face at am-hero's caption size — 29.33px at the deck, 22.4 capped. */
.bbc-hero__body {
  margin: 0 0 0.6em;
  font-size: clamp(0.95rem, 1.72vw, 1.4rem);
  line-height: 1.32;
  color: var(--c-ink);
}

.bbc-hero__body:last-of-type { margin-bottom: 0; }

/* Bold, as the design sets it. No longer on the end of the last sentence: it
   opens the rest of the body now rather than continuing it, and a control reads
   as a control when it stands on a line of its own.

   The dialog opener is the shared .more-dialog__open from site.css; this only
   gives it the space this column wants. */
.bbc-hero__more {
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.bbc-hero__more::after { content: "\2026"; }

/* Both the dialog opener and the plain link get the same line of their own —
   whichever of the two a row ends up with, the copy above it is spaced the
   same. Less than .more-link gives a page on its own, because a bbc-hero body
   is followed by the video link and the two must not run together. */
.bbc-hero__copy .more-dialog__open,
.bbc-hero__morerow { margin-top: 1rem; }

.bbc-hero__morerow { margin-bottom: 0; }

.bbc-hero__more:hover,
.bbc-hero__more:focus-visible {
  color: var(--c-nav-active);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   The link below
   -------------------------------------------------------------------------- */

.bbc-hero__link {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 0.98rem);
  margin: clamp(1rem, 2.6vw, 2rem) 0 0;
}

/* Drawn rather than exported: a red disc with a white triangle, which is what
   the design puts here and what reads as "video" without a caption saying so.
   Sized against am-hero's own mark — 58.9px at the deck, 45px capped. */
.bbc-hero__play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(26px, 3.46vw, 45px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e8232a;
}

.bbc-hero__play::before {
  content: "";
  border-style: solid;
  border-width: 0.36em 0 0.36em 0.6em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(11px, 1.4vw, 18px);
  margin-left: 0.12em;
}

/* The address is a link and underlined, matching every other video link on the
   site — see the note beside .am-hero__link, where the source's #5271FF was
   dropped for failing AA and the underline became the only cue. */
.bbc-hero__link a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  word-break: break-word;
}

.bbc-hero__link a:hover,
.bbc-hero__link a:focus-visible { color: var(--c-nav-active); }

/* --------------------------------------------------------------------------
   The picture
   -------------------------------------------------------------------------- */

.bbc-hero__media { min-width: 0; }

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

/* One column at the width the rest of the site already breaks at. The words
   lead; the picture follows, as it reads on a narrow screen. */
@media (max-width: 1024px) {
  /* The 82.4% row is the slide's proportion on a slide-shaped screen. Below the
     breakpoint the column is already narrow and holding the quote to four
     fifths of it only makes the line wrap harder. */
  .bbc-hero__quote { max-width: none; }

  .bbc-hero__split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* The headline at the kicker's size, for a band whose headline IS the page
   title rather than a line under one — Ta Dhi Tom switches it on, Blue Boy
   does not. A modifier rather than the default, because on Blue Boy the
   headline is deliberately the quieter of the two and raising it globally
   would flatten that band's hierarchy. Figures are .team-hero__title's own. */
.bbc-hero__headline--large {
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  line-height: 1.05;
}