/* ═══════════════════════════════════════════════════════════════════════════
   Diverse Talent · pages/work.css
   Page-only styles for Our work. Not in a cascade layer, so it wins over the design
   system; everything is scoped to .page--work and nothing shared is restyled.

   The set piece: three colour chapters and one dial. The hero and the three chapters
   share one frame (.work-top). One dial stays beside them, and the field behind them
   takes each chapter's colour as its aim is read. Two states:

     still   every chapter stands on its own flat colour, joined by the petal seam.
             This is the page without scripts, under reduced motion and after a failsafe.
     live    (html.work-live, set before the first paint when motion is allowed) the
             chapters are clear and one sticky field shows through them; work.js opens
             each colour out of the dial's core as its chapter arrives.

   Either way every word stands on a ground of its own that never changes under it: the
   chapter heads carry their chapter's colour, the rest are mist or white panels, captions
   are white plates. Nothing reads its contrast off the field.

   Contents
     1  The frame and its two columns     5  Photographs on the field
     2  Hero                              6  How young people take part
     3  The rail: the dial, the aims      7  A screening day
     4  The field and the chapters        8  Worked alongside, closing
   ═══════════════════════════════════════════════════════════════════════════ */

.page--work {
  --rail-w: clamp(16.5rem, 22vw, 19.5rem);
  --cols-gap: clamp(2.5rem, 5vw, 5rem);
  --chapter-pad: clamp(3rem, 2rem + 4.6vw, 6rem);
  --hero-pad: clamp(2.5rem, 1.6rem + 4.4vw, 6rem);       /* the page hero's own top padding */
  --stack: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);       /* between the parts of a chapter */
}

/* ─────────────────────────────── 1 The frame and its two columns ──
   Text on the start side, the dial's lane on the end side from 64rem. Each band (the hero, a
   chapter) is full width with its own container, so its colour runs to both edges; the lane is
   laid over all of them and the rail sticks inside it. */
.page--work .work-top { position: relative; isolation: isolate; }
.page--work .work-cols { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) {
  /* The text column stops at 50rem: that is also the widest the largest photograph here may be shown. */
  .page--work .work-cols { grid-template-columns: minmax(0, 50rem) var(--rail-w); justify-content: space-between; column-gap: var(--cols-gap); }
  .page--work .work-cols > * { grid-column: 1; }
  .page--work .work-cols > .work-rail { grid-column: 2; }
}

/* ───────────────────────────────────────────────────────── 2 Hero ──
   The seam into the first chapter belongs to that chapter here (on a phone the dial stands
   between the two), so the hero's own is switched off and its room given back. */
.page--work .work-hero { z-index: 1; padding-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); overflow: visible; }
.page--work .work-hero::after { content: none; }
.page--work .work-hero__text { max-inline-size: 46rem; }
.page--work .work-hero__text > .lead { max-inline-size: 31em; }
@media (min-width: 64rem) {
  /* Tall enough that the first chapter starts below the reading line however tall the window is:
     the dial is the whole, still mark while the hero is read. */
  .page--work .work-hero { min-block-size: 44vh; padding-block-end: calc(1.5rem + var(--seam-h)); }
}

/* Reading marks for the dial (bloom.js follows the mark that crosses the reading line). A mark is as
   tall as its band and cannot be pointed at, so the dial answers the scroll and nothing else. The
   hero's mark has no petal of its own: the dial keeps the whole mark until the first chapter arrives. */
.page--work .work-read { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 1px; pointer-events: none; }

/* ────────────────────────────── 3 The rail: the dial, the three aims ──
   One dial for the whole frame. Its disc and the three rows are white, so they stand on
   bone and on every colour the field takes. */
.page--work .work-lane { position: relative; z-index: 2; padding-block-end: calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) + var(--seam-h)); }
.page--work .work-rail { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.page--work .work-rail__dial { inline-size: min(64vw, 17rem); }
.page--work .work-rail__dial > .dial,
.page--work .work-mini__disc > .dial { --dial-size: 100%; position: relative; inset-block-start: auto; box-shadow: none; }
.page--work .work-rail__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; inline-size: min(100%, 30rem); }
.page--work .work-rail__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .85rem;
  min-block-size: 3.5rem;
  padding-block: .375rem;
  padding-inline: .375rem 1.15rem;
  border-radius: 1.75rem;
  background: var(--white);
  color: var(--ink);
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, scale var(--dur-1) var(--ease-out);
}
.page--work .work-rail__link:active { scale: .98; }
.page--work .work-rail__link:focus-visible { outline-offset: -3px; }   /* inside the white row: the field outside may be any colour */
.page--work .work-rail__stop { transition: background-color var(--dur-3) ease, color var(--dur-3) ease, scale var(--dur-3) var(--ease-pop); }
/* While a chapter is being read its row keeps the full colour and the other two step back. */
.page--work .work-rail__list.has-current .work-rail__link:not([aria-current]) { color: var(--slate); font-weight: var(--fw-medium); }
.page--work .work-rail__list.has-current .work-rail__link:not([aria-current]) .work-rail__stop { background: var(--c-mist); color: var(--c-deep); scale: .84; }
@media (hover: hover) and (pointer: fine) {
  .page--work .work-rail__link:hover { background: var(--c-mist); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .page--work .work-rail__link, .page--work .work-rail__stop { transition: none; }
}

@media (min-width: 64rem) {
  .page--work .work-lane { position: absolute; inset: 0; padding-block-end: 0; pointer-events: none; }
  .page--work .work-lane > .work-cols {
    grid-template-rows: minmax(0, 1fr);
    block-size: 100%;
    padding-block: var(--hero-pad) calc(var(--chapter-pad) + var(--seam-h));
  }
  .page--work .work-rail { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); align-self: start; pointer-events: auto; }
  .page--work .work-rail__dial { inline-size: min(100%, 17rem, 36vh); }
}
@media (min-width: 64rem) and (max-height: 44rem) {
  .page--work .work-rail { gap: .9rem; inset-block-start: calc(var(--header-h) + .75rem); }
  .page--work .work-rail__dial { inline-size: min(100%, 26vh); }
  .page--work .work-rail__link { min-block-size: 3rem; }
}

/* The small dial for narrow screens: it floats at the foot of the window while the chapters are
   read. A holder with no height sticks to the bottom of the frame; work.js shows the disc. */
.page--work .work-mini { display: none; }
@media (max-width: 63.99rem) {
  html.js:not(.dt-failsafe) .page--work .work-mini {
    display: block;
    position: sticky;
    inset-block-end: calc(1rem + var(--dock-h, 0px));
    z-index: 3;
    block-size: 0;
    pointer-events: none;
  }
}
.page--work .work-mini__disc {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: max(.75rem, var(--gutter) - .25rem);
  inline-size: 4.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: var(--shadow);
  opacity: 0;
  scale: .6;
  visibility: hidden;
  transition: opacity var(--dur-3) ease, scale var(--dur-4) var(--ease-pop), visibility 0s linear var(--dur-3);
}
.page--work .work-mini.is-on .work-mini__disc { opacity: 1; scale: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .page--work .work-mini__disc { scale: 1; transition: none; }
}

/* ─────────────────────────────────── 4 The field and the chapters ── */
.page--work .work-field { display: none; }
.page--work .work-field__c { position: absolute; inset: 0; clip-path: circle(0 at 50% 50%); }
.page--work .work-field__c--gold { background: var(--gold); }
.page--work .work-field__c--forest { background: var(--forest); }
.page--work .work-field__c--clay { background: var(--clay); }
.page--work .work-field__c--blue { background: var(--blue); }

.page--work .chapter { z-index: 1; padding-block: var(--chapter-pad) calc(var(--chapter-pad) + var(--seam-h)); }
/* The body of a chapter is a container: what stands side by side inside it goes by the room the column
   really has (beside the rail, across a tablet, down a phone), not by the width of the window. */
.page--work .chapter__body { container: chapter / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack); }
.page--work .chapter__body > * { min-inline-size: 0; }

@media (prefers-reduced-motion: no-preference) {
  html.work-live:not(.dt-failsafe) .page--work .work-field {
    display: block;
    position: sticky;
    inset-block-start: 0;
    z-index: 0;
    block-size: 100vh;
    margin-block-end: -100vh;
    overflow: clip;
    pointer-events: none;
  }
  @supports (block-size: 100lvh) {
    html.work-live:not(.dt-failsafe) .page--work .work-field { block-size: 100lvh; margin-block-end: -100lvh; }
  }
  html.work-live:not(.dt-failsafe) .page--work :is(.work-hero, .chapter) { background: none; }
  html.work-live:not(.dt-failsafe) .page--work .chapter > .seam { display: none; }
  /* No seams to make room for: the bands close up. */
  html.work-live:not(.dt-failsafe) .page--work .chapter:not(.chapter--inclusion) { padding-block-end: var(--chapter-pad); }
  html.work-live:not(.dt-failsafe) .page--work .work-lane { padding-block-end: clamp(.5rem, 2vw, 1.5rem); }
  @media (min-width: 64rem) {
    html.work-live:not(.dt-failsafe) .page--work .work-hero { padding-block-end: 0; }
    html.work-live:not(.dt-failsafe) .page--work .work-lane { padding-block-end: 0; }
  }
}

/* The head of a chapter: its colour is its own, so it reads the same while the field is still
   turning, and once the field has turned the two are one surface. A link from another page lands here. */
.page--work .chapter__head { display: grid; grid-template-columns: minmax(0, 1fr); scroll-margin-block-start: 0; }
.page--work .chapter__head:focus { outline: none; }   /* a place to land, not a control */
.page--work .chapter__head > * { margin-block-start: 0; }
.page--work .chapter__title {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, .6rem + 1.4vw, 1.5rem);
  margin-block-end: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
}
.page--work .chapter__title > h2 { min-inline-size: 0; }
.page--work .chapter__title > .medallion { --size: clamp(3.75rem, 3rem + 2.6vw, 5.5rem); }
@media (max-width: 29.99rem) {
  /* On a phone the title takes the whole line: a long one beside the medallion would break four times. */
  .page--work .chapter__title { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* The three labelled parts of every chapter: what we work towards, what we have done so far,
   what would help next. Real sub-headings, each marked with the petal. */
.page--work .chapter__label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .65rem;
  color: var(--heading);
  font-size: var(--fs-lead);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
}
.page--work .chapter__label::before {
  content: "";
  block-size: 1.15rem;
  aspect-ratio: 20.648 / 45.125;
  margin-block-start: calc((1lh - 1.15rem) / 2);
  background: var(--accent);
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
}
.page--work .chapter__aim {
  max-inline-size: 27em;
  margin-block-start: .75rem;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: calc(clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem) * var(--display-scale));
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-wrap: balance;
}
.page--work .chapter__text { margin-block-start: 1.1rem; }

.page--work .chapter__sofar > * { margin-block-start: 0; }
.page--work .chapter__sofar > .chapter__label { margin-block-end: 1.1rem; }
.page--work .chapter__note { max-inline-size: none; margin-block-start: 1.25rem; color: var(--fg-muted); }
@media (max-width: 39.99rem) {
  /* On a phone the rows take nearly the whole panel: a row inside a panel inside a gutter leaves its text too little room. */
  .page--work .chapter__sofar { padding: 1.25rem .625rem .625rem; }
  .page--work .chapter__sofar > :is(.chapter__label, .chapter__note) { padding-inline: .625rem; }
  .page--work .chapter__sofar > .chapter__note { padding-block-end: .625rem; }
}

/* What would help next: a white leaf with the medallion of who is being asked. */
.page--work .chapter__next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1rem clamp(1rem, .6rem + 1.6vw, 1.75rem);
}
.page--work .chapter__next > * { margin-block-start: 0; }
.page--work .chapter__nexttext { display: grid; gap: .6rem; }
.page--work .chapter__nexttext > .lead { color: var(--fg); }
@media (min-width: 34rem) {
  .page--work .chapter__next { grid-template-columns: auto minmax(0, 1fr); }
}

/* The third chapter: its evidence beside the room it happened in, and the plain admission. */
.page--work .chapter__pairing { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack); align-items: start; }
@container chapter (min-width: 44rem) {
  .page--work .chapter__pairing { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
  .page--work .chapter__pairing > .shot { margin-block-start: clamp(1.5rem, 4vw, 3rem); }
}
.page--work .chapter__honest > * { margin-block-start: 0; }
.page--work .chapter__admission {
  max-inline-size: 22em;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: calc(clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem) * var(--display-scale));
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-wrap: balance;
}
.page--work .chapter__honest > .lead { margin-block-start: 1.1rem; }
.page--work .chapter__honest > .btn { margin-block-start: 1.6rem; justify-self: start; }

/* ─────────────────────────────────── 5 Photographs on the field ──
   The frames stand on the colour itself; each caption is a white plate under its frame, so
   it reads on any of the four. Widths keep every photograph inside its limit (BRIEF 7). */
.page--work .shot { margin: 0; justify-items: start; }
.page--work .shot > .frame { inline-size: 100%; }
.page--work .shot > figcaption.tone-white { padding: .7rem 1rem .75rem .85rem; border-radius: var(--r-row); }
.page--work .shot--petal > .frame--rim { --c: var(--white); }      /* the rim on a colour is white: gold on gold would be lost */

.page--work .shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack); }
.page--work .shots--youth > .shot--petal { inline-size: min(58vw, 15rem); justify-self: center; }
.page--work .shots--youth > :is(.shot--a, .shot--b) { inline-size: min(100%, 22rem); }
.page--work .shots--youth > .shot--b { justify-self: end; }
@container chapter (min-width: 36rem) {
  .page--work .shots--youth {
    grid-template-columns: minmax(0, 15rem) minmax(0, 20rem);
    justify-content: space-evenly;
    column-gap: clamp(1.5rem, 5vw, 4rem);
    align-items: start;
  }
  .page--work .shots--youth > .shot--petal { grid-row: 1 / span 2; inline-size: 100%; }
  .page--work .shots--youth > :is(.shot--a, .shot--b) { grid-column: 2; inline-size: 100%; }
}

.page--work .shot--lead { inline-size: min(100%, 50rem); }
.page--work .shots--seniors > .shot { inline-size: min(100%, 28rem); }
.page--work .shots--seniors > .shot--b { justify-self: end; }
@container chapter (min-width: 36rem) {
  .page--work .shots--seniors { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .page--work .shots--seniors > .shot { inline-size: 100%; }
  .page--work .shots--seniors > .shot--b { margin-block-start: clamp(2rem, 6vw, 4.5rem); }
}

.page--work .shot--side { inline-size: min(100%, 22rem); justify-self: end; }
.page--work .shot--wide { inline-size: min(100%, 40rem); }
@container chapter (min-width: 44rem) {
  .page--work .shot--side { inline-size: 100%; }
}

/* ─────────────────────────── 6 How young people take part ──
   Four petal rows. From 48rem they stand round the mark as four petals round the core, each a
   leaf whose point is at the core; work.js opens them out of it one after another. On a phone
   they are a column of leaves. */
.page--work .part__bloom { position: relative; }
.page--work .part__core { display: none; }
.page--work .part__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.page--work .part__petal {
  --leaf: clamp(3.5rem, 2rem + 8vw, 7.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: .7rem;
  padding: clamp(1.5rem, 1.1rem + 2.2vw, 3rem);
}
.page--work .part__petal > * { margin-block-start: 0; }
.page--work .part__petal > .medallion { margin-block-end: .35rem; }
.page--work .part__petal > p { color: var(--fg-muted); }
.page--work .part__verb { font-size: var(--fs-section); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.page--work .part__petal:nth-child(odd) { border-start-start-radius: var(--leaf); border-end-end-radius: var(--leaf); }
.page--work .part__petal:nth-child(even) { border-start-end-radius: var(--leaf); border-end-start-radius: var(--leaf); }
@media (min-width: 48rem) {
  .page--work .part__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The round sides of each leaf face its neighbours; its two points are the outer corner and the core. */
  .page--work .part__petal { border-radius: var(--r-row); }
  .page--work .part__petal:is(.part__petal--1, .part__petal--4) { border-start-end-radius: var(--leaf); border-end-start-radius: var(--leaf); border-start-start-radius: var(--r-row); border-end-end-radius: var(--r-row); }
  .page--work .part__petal:is(.part__petal--2, .part__petal--3) { border-start-start-radius: var(--leaf); border-end-end-radius: var(--leaf); border-start-end-radius: var(--r-row); border-end-start-radius: var(--r-row); }
  /* The lower pair starts a little lower, clear of the mark. Nothing is added at the side: the two columns keep one edge each. */
  .page--work .part__petal:is(.part__petal--3, .part__petal--4) { padding-block-start: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
  .page--work .part__core {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 6rem;
    block-size: 6rem;
    margin-block-start: -3rem;
    margin-inline-start: -3rem;
    border-radius: 50%;
    background: var(--bg, var(--bone));
  }
  .page--work .part__core > .mark { inline-size: 5.25rem; block-size: auto; }
}

/* ─────────────────────────────────────── 7 A screening day ── */
.page--work .day__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; margin-block-end: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.page--work .day__head { margin-block-end: 0; }
.page--work .day__head > .lead { max-inline-size: 30em; }
.page--work .day__tall { inline-size: min(58vw, 15rem); justify-self: center; }
@media (min-width: 52rem) {
  .page--work .day__top { grid-template-columns: minmax(0, 1fr) 15rem; }
  .page--work .day__tall { inline-size: 100%; }
}
/* The four steps in full (the steps partial). On a wide screen a step with two lines of text is shorter than its
   own ghost numeral, so 2 ran into 3 and 3 into 4. Here each step is at least as tall as its numeral: the numerals
   stand clear of one another and the four stops fall at even distances along the line. */
@media (min-width: 56rem) {
  .page--work .daysteps--full .daysteps__step { min-block-size: calc(var(--fs-ghost) * .8 - var(--g) + .75rem); }
}
.page--work .day__proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.4rem + 3vw, 4.5rem); align-items: start; margin-block-start: clamp(2.5rem, 1.8rem + 3.4vw, 5rem); }
.page--work .day__shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 1.25rem; align-items: start; }
.page--work .day__lead { grid-column: 1 / -1; inline-size: min(100%, 44rem); }
.page--work .day__small { grid-column: 4 / -1; inline-size: min(100%, 20rem); justify-self: end; }
/* This frame is shown from its left edge to four fifths of its width only (BRIEF 7: a half face stands at the
   right edge), held low so the ceiling goes too. The picture is enlarged inside its leaf and never mirrored. */
.page--work .day__small > .frame img { scale: 1.25; transform-origin: 0% 72%; }
@media (min-width: 62rem) {
  .page--work .day__proof { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ─────────────────────────── 8 Worked alongside, closing ── */
.page--work :is(.part, .day, .along) .section__head { scroll-margin-block-start: .5rem; }
.page--work .section__head:focus { outline: none; }   /* a place to land, not a control */