/* ==========================================================================
   Dr Dmitry Zavialov

   One stylesheet, driven by the tokens in :root.

   The direction is taken from ninafield.co.nz: flat bands of colour doing the
   sectioning, a deep navy panel that overlaps photography, one warm red used
   four times and no more, and serif headings set at regular weight and never
   coloured differently from the type around them. Nothing floats. There are
   no shadows apart from the one the hero panel casts, and no corner radius
   anywhere except on the buttons, which are pills, and the play buttons,
   which are circles.
   ========================================================================== */

/* --- Typefaces, self-hosted ------------------------------------------------
   Source Serif 4 is the reference's own heading face: a transitional serif
   with modest contrast, which is what lets a 56px headline sit at weight 400
   without looking either thin or shouted. Mulish is the body: the closest
   freely licensed relative of Avenir, which the reference sets at light
   weights throughout. Serving both from this domain keeps the Content
   Security Policy at font-src 'self' and removes a third-party round trip.
   Latin first; the extended file is fetched only when a page needs a macron. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-wght-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-wght-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-wght-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-wght-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/mulish-wght-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Mulish';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/mulish-wght-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Tokens ----------------------------------------------------------------
   Six grounds and one accent. The navy, cream, mist, steel, and blush are the
   reference's own values. The accent is its coral taken four steps deeper:
   the original #FC5C65 carries white at 3.06:1, which fails AA at every size
   a caption or a button label is set at, and this site has to clear AA.
   #D7384A holds the same hue and reads as the same colour beside it, but
   carries white at 4.6:1 and so can be used for a button and a whole band.
   Small type set in the accent needs one step further still on the tinted
   grounds, which is what --accent-deep is for: 4.8:1 on the palest of them. */
:root {
  --navy:       #213d4a;
  --navy-deep:  #162b35;
  --accent:     #d7384a;
  --accent-deep:#bd2536;   /* small type in the accent colour on a tinted ground */
  --cream:      #fdf8ed;
  --mist:       #e6efec;
  --steel:      #dfe6e8;
  --blush:      #f5d0c6;
  --paper:      #ffffff;
  --slate:      #55686f;   /* body copy on light grounds, 5.3:1 on white */

  --rule:        rgba(33, 61, 74, .16);
  --rule-faint:  rgba(33, 61, 74, .09);
  --rule-onnavy: rgba(255, 255, 255, .22);

  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Mulish', 'Avenir Next', Avenir, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* One scale, quarter-step ratios, clamped so that nothing has to be
     re-declared at a breakpoint. */
  --t-display: clamp(2.125rem, 1.25rem + 3.9vw, 4.125rem);
  --t-h1:      clamp(1.875rem, 1.2rem + 3vw, 3.375rem);
  --t-h2:      clamp(1.625rem, 1.15rem + 2.1vw, 2.625rem);
  --t-h3:      clamp(1.25rem, 1.08rem + .75vw, 1.625rem);
  --t-quote:   clamp(1.25rem, 1rem + 1.15vw, 1.875rem);
  --t-lede:    clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  --t-body:    clamp(1rem, .97rem + .16vw, 1.0625rem);
  --t-small:   .875rem;
  --t-label:   .75rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --band:   clamp(3.75rem, 7vw, 7rem);
  --max:    78rem;
  --ease:   cubic-bezier(.22, 1, .36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; }
figure { margin: 0; }
img { display: block; height: auto; }
/* Every photograph is a <picture> offering WebP with a JPEG behind it. The
   wrapper takes no box of its own, so the <img> inside is laid out exactly as
   though it stood where the <picture> does, and every rule written for a
   photograph's <img> keeps working. */
picture { display: contents; }

::selection { background: var(--blush); color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.14; letter-spacing: -.012em; }
h2 { font-size: var(--t-h2); line-height: 1.18; letter-spacing: -.008em; }
h3 { font-size: var(--t-h3); line-height: 1.3; }
h4 { font-size: 1rem; line-height: 1.4; }

p { margin: 0 0 1.15em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--accent); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

em { font-style: italic; }
strong { font-weight: 700; color: var(--navy); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .85rem 1.25rem;
  font-size: var(--t-small);
}
.skip:focus { left: 0; }

/* --- Layout helpers -------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 46rem; }

.band { padding-block: var(--band); }
.band--cream { background: var(--cream); }
.band--mist  { background: var(--mist); }
.band--steel { background: var(--steel); }
.band--navy  { background: var(--navy); }
.band--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
/* For a section that follows a page head: the head's own bottom padding
   already separates the two, so this one only needs padding underneath. */
.band--top-flush { padding-top: 0; }

.band--navy,
.band--navy p { color: rgba(255, 255, 255, .84); }
.band--navy h2, .band--navy h3, .band--navy h4 { color: #fff; }
.band--navy .lede { color: rgba(255, 255, 255, .9); }

/* The section label. Used only where it names a real category: the tier of a
   workshop, the length of a talk, whether feedback was filmed or written. */
.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label-ink, var(--accent));
  margin: 0 0 1rem;
}
.band--cream, .band--mist, .band--steel { --label-ink: var(--accent-deep); }
.band--navy .label { color: var(--blush); }

.lede {
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.6;
  color: var(--navy);
  max-width: 60ch;
}
/* The two spacings that would otherwise be written on nearly every section:
   a lede under its heading, and whatever the lede introduces under the lede. */
:is(h1, h2, h3) + .lede { margin-top: 1.5rem; }
.lede + :is(.offers, .quotes, .sayings, .mosaic, .namelist, .video) { margin-top: 2.5rem; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.05rem 2rem;
  min-height: 44px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn--line {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--line:hover { background: var(--navy); color: #fff; }

.band--navy .btn--line,
.hero__panel .btn--line,
.offer__body .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.band--navy .btn--line:hover,
.hero__panel .btn--line:hover,
.offer__body .btn--line:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn-row {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 2rem;
}
.btn-row:first-child { margin-top: 0; }

/* --- Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--rule-faint); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  padding-block: .75rem;
}

.brand { text-decoration: none; display: block; color: var(--navy); }
.brand b {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(.9375rem, .85rem + .35vw, 1.1875rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.1;
}
.brand span {
  display: block;
  margin-top: .35rem;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--slate);
}

.nav ul { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav a {
  text-decoration: none;
  font-size: var(--t-small);
  color: var(--navy);
  padding-block: .5rem;
  display: inline-block;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--navy); }
.nav .btn { color: #fff; border-bottom: 0; padding: .9rem 1.6rem; }
.nav .btn:hover { border-bottom-color: transparent; }

.nav-toggle {
  display: none;
  font-family: var(--sans); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--navy); padding: .7rem 1.1rem; min-height: 44px; cursor: pointer;
}

@media (max-width: 62rem) {
  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-faint);
    display: none;
    padding: .5rem var(--gutter) 2rem;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-top: 1px solid var(--rule-faint); }
  .nav a { display: block; padding: 1rem 0; font-size: 1.0625rem; border-bottom: 0; }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav li:has(.btn) { border-top: 0; padding-top: 1.25rem; }
  .nav .btn { text-align: center; }

  /* A slimmer bar on phones and tablets. The header is sticky, so every pixel
     of it is taken from every screen of reading; at the desktop height it
     was about a fifth of a phone's viewport. The tagline goes, the name and
     the menu stay, and the toggle keeps a 44px touch target. */
  .site-header__inner { min-height: 60px; padding-block: .5rem; }
  .brand span { display: none; }
  .nav-toggle { padding: .55rem 1rem; }
}

/* --- Hero: photograph to the edge, navy panel laid over it ------------------
   This is the signature, and it recurs: the same navy block sits under the
   three offer photographs and again as the footer. Below 60rem the panel
   stops overlapping and sits under the photograph instead, because an overlap
   at phone width covers the face.

   The ground behind the panel is the pale mist rather than the panel's own
   navy. On navy the panel dissolved into a single dark slab and its shadow
   and overlap could not be seen; on mist it reads as what it is, a block laid
   across the edge of the photograph. */
.hero { position: relative; background: var(--mist); }
.hero__media img {
  width: 100%;
  height: clamp(17rem, 58vw, 26rem);
  object-fit: cover;
  object-position: var(--pos, 50% 20%);
}

.hero__panel {
  background: var(--navy);
  color: rgba(255, 255, 255, .86);
  padding: clamp(1.75rem, 6vw, 2.5rem) var(--gutter) clamp(2.25rem, 7vw, 3rem);
}
.hero__panel .label { color: var(--blush); }
.hero__panel h1 {
  color: #fff;
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  max-width: 16ch;
}
.hero__panel p { font-weight: 300; font-size: var(--t-lede); line-height: 1.55; max-width: 36ch; }

@media (min-width: 60rem) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: center; min-height: clamp(30rem, 44vw, 39rem); }
  .hero__media { grid-column: 1; grid-row: 1; align-self: stretch; }
  .hero__media img { height: 100%; min-height: clamp(30rem, 44vw, 39rem); object-position: var(--pos, 50% 22%); }
  .hero__panel {
    grid-column: 2; grid-row: 1; z-index: 2;
    margin-left: clamp(-5rem, -4vw, -2rem);
    padding: clamp(2.5rem, 3.4vw, 3.5rem) clamp(2.5rem, 5vw, 5.5rem) clamp(2.5rem, 3.4vw, 3.5rem) clamp(2.25rem, 3.2vw, 3.25rem);
    box-shadow: 0 26px 64px rgba(22, 43, 53, .22);
  }
}

/* --- The credentials line: one sentence, not a row of giant numbers -------- */
.creds {
  border-bottom: 1px solid var(--rule-faint);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.creds p {
  font-family: var(--serif);
  font-size: clamp(1rem, .95rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: var(--navy);
  max-width: 62ch;
}

/* --- Editorial two-column: heading holds the left rail --------------------- */
.editorial { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); }
@media (min-width: 55rem) {
  .editorial { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.editorial h2 { margin-bottom: 0; }
@media (min-width: 55rem) {
  .editorial--sticky > :first-child { position: sticky; top: 7rem; }
}

/* --- Split: photograph flush to one edge, tinted panel on the other -------- */
.split { display: grid; }
.split__media img { width: 100%; height: 100%; min-height: clamp(16rem, 45vw, 30rem); object-fit: cover; object-position: var(--pos, 50% 50%); }
.split__body { padding: clamp(2rem, 5.5vw, 4.5rem) var(--gutter); }
.split__body > * { max-width: 40rem; }

@media (min-width: 55rem) {
  .split { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split__body { padding-inline: clamp(2.5rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
  .split--flip .split__media { order: 2; }
}

/* A quote set left aligned under an accent rule: no card, no shadow, and no
   decorative marks. Used on its own, or two abreast inside .quotes. */
.quote { margin: 0; border-top: 2px solid var(--accent); padding-top: 1.5rem; max-width: 42rem; }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--serif); font-size: 1.125rem; line-height: 1.55; color: var(--navy); }
.quote figcaption { margin-top: 1rem; font-size: var(--t-small); color: var(--slate); letter-spacing: .04em; }
.quote figcaption b { display: block; font-weight: 600; color: var(--navy); }
.band--navy .quote figcaption b { color: #fff; }
.band--navy .quote p { color: #fff; }
.band--navy .quote figcaption { color: rgba(255, 255, 255, .78); }

.quotes { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 48rem) { .quotes { grid-template-columns: 1fr 1fr; } }

/* --- Offer blocks: a photograph with a navy panel under it ------------------
   Not a card. There is no radius, no shadow, and no border; the navy block is
   the bottom half of the same object. */
.offers { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48rem) { .offers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48rem) and (max-width: 59.999rem) { .offers--3 > :last-child { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .offers--3 { grid-template-columns: repeat(3, 1fr); } }

.offer { display: flex; flex-direction: column; }
.offer img { width: 100%; height: clamp(12rem, 22vw, 16rem); object-fit: cover; object-position: var(--pos, 50% 50%); }
.offer__body {
  background: var(--navy); color: rgba(255, 255, 255, .84);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  flex: 1;
}
.offer__body h3 { color: #fff; }
.offer__body .label { color: var(--blush); }
.offer__body p { max-width: 46ch; }
.offer__body a { color: #fff; }

/* The workshops page: the three formats as cards on one laptop screen, each
   with the facts a buyer scans for. The photograph is shorter than on the
   home page so that the three cards and the button under them fit without
   scrolling at 1440 by 900. */
.offers--compact img { height: clamp(8rem, 12vw, 9rem); }
.formats { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.formats h1 { font-size: var(--t-h2); margin-bottom: 0; }
.formats .lede { margin-top: .75rem; }
/* A laptop with a short screen keeps the cards and the button in view by
   letting the photographs go; the facts are what the page is for. */
@media (min-width: 60rem) and (max-height: 820px) {
  .offers--compact img { display: none; }
}
.offers--compact .offer__body { padding: clamp(1.25rem, 2.2vw, 1.75rem); }
.offers--compact h2 { color: #fff; font-size: var(--t-h3); margin-bottom: .5rem; }
.offers--compact .offer__body > p { font-size: var(--t-small); line-height: 1.6; margin-bottom: 1rem; }
.offer__facts {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem;
  margin: 0; padding-top: .9rem; border-top: 1px solid var(--rule-onnavy);
  font-size: var(--t-small); line-height: 1.45;
}
.offer__facts dt { color: var(--blush); font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; }
.offer__facts dd { margin: 0; color: rgba(255, 255, 255, .88); }
.offers--compact .offer__note { margin: .9rem 0 0; font-size: var(--t-small); color: rgba(255, 255, 255, .72); }
.formats .lede { margin-bottom: 0; }
.formats .offers { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.formats__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.formats__foot .btn-row { margin-top: 0; }
.formats__foot p { margin: 0; font-size: var(--t-small); max-width: 52ch; }

/* --- Testimonials ----------------------------------------------------------
   The participants' own words, set as the loudest type below the hero: the
   serif italic at quote size, each on a white panel lifted off the mist, with
   one large opening mark in the accent. Flat, like everything else: no
   shadow and no radius. */
.testimonials__grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: 2.5rem; }
@media (min-width: 48rem) { .testimonials__grid { grid-template-columns: 1fr 1fr; } }
.testimonial {
  margin: 0; display: flex; flex-direction: column;
  background: var(--paper);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.testimonial::before {
  content: "\201C";
  display: block; height: .45em; margin-bottom: .05em;
  font-family: var(--serif); font-size: clamp(4.5rem, 3rem + 4vw, 6.5rem); line-height: .85;
  color: var(--accent);
}
.testimonial blockquote { margin: 0; flex: 1; }
.testimonial p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.4375rem); line-height: 1.5;
  color: var(--navy); max-width: none;
}
.testimonial figcaption {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: var(--t-small); line-height: 1.5; color: var(--slate);
}
.testimonial figcaption b {
  display: block; margin-bottom: .15rem;
  font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--navy);
}
.testimonials__more { margin-top: 2rem; }

/* --- The heading over the list of organisations ---------------------------- */
.partners-head { font-size: var(--t-h3); }

/* --- Where the work has been delivered, set as names ------------------------
   Names rather than marks. A name is a statement of fact and needs nobody's
   permission; a logo is a trademark and needs everybody's. */
.namelist { margin: 2.25rem 0 0; }
.namelist h3 {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: .9rem;
}
.namelist h3:not(:first-child) { margin-top: 2.5rem; }
.namelist ul { list-style: none; margin: 0; padding: 0; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 40rem) { .namelist ul { columns: 2; } }
@media (min-width: 62rem) { .namelist ul { columns: 3; } }
.namelist li {
  break-inside: avoid;
  padding-block: .5rem;
  border-bottom: 1px solid var(--rule-faint);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--navy);
}

/* --- Figures --------------------------------------------------------------- */
.figure { margin: 0; }
.figure img { width: 100%; }
.figure figcaption,
.mosaic figcaption {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--slate);
  padding-top: .85rem;
  border-top: 1px solid var(--rule-faint);
  margin-top: 1rem;
  max-width: 44ch;
}
.band--navy .figure figcaption { color: rgba(255, 255, 255, .72); border-top-color: var(--rule-onnavy); }

/* A contact sheet: six photographs running to both edges of the viewport,
   set close together so that they read as one block rather than as six cards.
   The captions are the only words in the section. */
.mosaic { display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .mosaic--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .mosaic--4 { grid-template-columns: repeat(4, 1fr); } }
/* 4:5 rather than a landscape cell, because most of these photographs are
   portrait and several are multi-panel collages: at this ratio they are shown
   almost whole instead of being sliced through the middle. */
.mosaic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--pos, 50% 50%); }
.mosaic figcaption {
  font-size: var(--t-label); line-height: 1.45; color: var(--slate);
  margin-top: .6rem; border-top: 0; padding-top: 0; max-width: 34ch;
}
.bleed { padding-inline: var(--gutter); max-width: none; }
/* An odd photograph out at two columns takes the full row, landscape, rather
   than sitting alone beside a gap. */
@media (max-width: 47.999rem) {
  .mosaic > figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mosaic > figure:last-child:nth-child(odd) img { aspect-ratio: 16 / 10; }
}

/* A small line of text directly under a button, such as the date of the
   next session, so that the button label itself never has to change. */
.btn-note { font-size: var(--t-small); color: var(--slate); margin-top: .6rem; }


/* --- Prose, checklists, definition lists ----------------------------------- */
.prose h2 { margin-top: 2.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--slate); }

.checklist { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.checklist li {
  position: relative;
  padding: 0 0 1.25rem 1.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-faint);
  max-width: 68ch;
}
.checklist li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; background: var(--accent);
}
.checklist strong { font-family: var(--serif); font-weight: 600; }
/* Short one-line items, such as the list of who the work is for, sit closer
   together than the module lists, whose items carry a heading and a sentence. */
.checklist--compact li { padding-bottom: .6rem; margin-bottom: .6rem; line-height: 1.5; }
.checklist--compact li::before { top: .5em; }

.band--navy .checklist li { border-bottom-color: var(--rule-onnavy); }
.band--navy .checklist strong { color: #fff; }

.facts { margin: 0; font-size: var(--t-small); }
.facts dt {
  font-weight: 700; color: var(--navy);
  letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-label);
  margin-top: 1.25rem;
}
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: .3rem 0 0; color: var(--slate); }
.facts dd > a:only-child { display: inline-block; padding-block: .25rem; }

/* --- The book: the cover laid over the photograph --------------------------
   Two images of one object, so they are composed as one rather than set side
   by side. The cover overhangs the photograph's lower corner. */
.bookshot { position: relative; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.bookshot__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 32%;
}
.bookshot__cover {
  position: absolute;
  right: clamp(.75rem, 5%, 2rem);
  bottom: 0;
  width: clamp(5.5rem, 27%, 9rem);
  box-shadow: 0 1rem 2.25rem rgba(0, 0, 0, .42);
}
@media (min-width: 60rem) {
  .editorial--wide-left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* --- Video -----------------------------------------------------------------
   Every clip on the site is a vertical Short, so every frame is 9:16: a
   landscape frame showed the speaking-page clip as a narrow strip between two
   black bars. */
.video { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 55rem) { .video { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); } }
.video__frame { position: relative; aspect-ratio: 9 / 16; width: 100%; max-width: 20rem; background: var(--navy-deep); }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The poster and play button that stand in for the YouTube player until a
   visitor presses play. It is a link to the video on YouTube, so it still
   works with JavaScript off; with it on, site.js swaps in the player. */
.facade { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--navy-deep); }
.facade img { width: 100%; height: 100%; object-fit: cover; }
.facade__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(3.25rem, 22%, 4.25rem);
  color: var(--accent);
  transition: color .25s var(--ease), scale .25s var(--ease);
}
.facade__play svg { display: block; width: 100%; height: auto; overflow: visible; }
.facade__play circle { fill: currentColor; stroke: #fff; stroke-width: 2; }
.facade__play path { fill: #fff; }
.facade:hover .facade__play,
.facade:focus-visible .facade__play { color: var(--navy); scale: 1.06; }
.facade:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .facade__play { transition: none; } }

.sayings { display: grid; gap: clamp(1.5rem, 3vw, 2rem); max-width: 54rem; }
@media (min-width: 48rem) { .sayings { grid-template-columns: repeat(3, 1fr); } }
.saying { margin: 0; }
.saying__frame { position: relative; aspect-ratio: 9 / 16; background: var(--navy-deep); }
.saying__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.saying figcaption {
  font-family: var(--serif); font-size: 1.125rem; color: var(--navy);
  padding-top: .85rem; margin-top: .85rem; border-top: 1px solid var(--rule-faint);
}
.saying figcaption span {
  display: block; font-family: var(--sans); font-size: var(--t-small);
  font-weight: 400; color: var(--slate);
}

/* --- Form ------------------------------------------------------------------
   Underline fields, as the reference has them: no box, no fill, one rule that
   turns the accent colour on focus. */
.form { max-width: 34rem; }
.field { margin-bottom: 1.75rem; }
.field label {
  display: block;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); margin-bottom: .5rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; color: var(--navy);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: .6rem 0;
  min-height: 44px;
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field select { appearance: none; padding-right: 1.75rem; cursor: pointer; }
.field--select { position: relative; }
.field--select::after {
  content: ""; position: absolute; right: .35rem; bottom: 1.4rem;
  width: .5rem; height: .5rem; border-right: 1px solid var(--navy); border-bottom: 1px solid var(--navy);
  rotate: 45deg; pointer-events: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.field ::placeholder { color: var(--slate); }

.form__note { font-size: var(--t-small); color: var(--slate); margin-top: 1.25rem; }
.form__status { font-size: var(--t-small); padding: 1rem 1.25rem; margin: 0 0 1.25rem; border-left: 3px solid var(--accent); background: rgba(255,255,255,.6); }
.form__status--ok { border-left-color: var(--navy); }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .8); padding-block: var(--band) 2.5rem; }
.site-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--blush); }
.site-footer .brand { color: #fff; }
.site-footer .brand span { color: rgba(255, 255, 255, .62); }
.site-footer .foot-h {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blush);
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .35rem; font-size: var(--t-small); }
/* A link in a list is a target rather than a word in a sentence, so it is
   padded to clear the 24px minimum. */
.site-footer li a { display: inline-block; padding-block: .25rem; }
.site-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.site-footer__grid > :first-child p { margin-top: 1.25rem; max-width: 30ch; }
.site-footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 55rem) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .site-footer__grid > :first-child { grid-column: auto; }
}
.site-footer__base {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid var(--rule-onnavy);
  font-size: var(--t-label); letter-spacing: .06em;
  color: rgba(255, 255, 255, .62);
}
.site-footer__base p { margin: 0; }

/* --- The one orchestrated moment: the hero settles once, on load -----------
   Nothing else on the site animates without being asked to. */
@media (prefers-reduced-motion: no-preference) {
  .hero__panel > * { animation: rise .7s var(--ease) both; }
  .hero__panel > :nth-child(1) { animation-delay: .05s; }
  .hero__panel > :nth-child(2) { animation-delay: .15s; }
  .hero__panel > :nth-child(3) { animation-delay: .25s; }
  .hero__panel > :nth-child(4) { animation-delay: .35s; }
  @keyframes rise { from { opacity: 0; translate: 0 .9rem; } to { opacity: 1; translate: 0 0; } }
}

/* --- Print ----------------------------------------------------------------- */
@media print {
  .site-header, .nav, .btn-row, .video, .sayings { display: none; }
  body { color: #000; font-size: 11pt; }
  .band { padding-block: 1rem; }
}

/* --- Navigation without JavaScript -----------------------------------------
   The collapsed mobile menu depends on a button, so it is only applied once
   boot.js has marked the document as scripted. Without JavaScript the same
   narrow layout shows the whole list instead, stacked under the wordmark. */
@media (max-width: 62rem) {
  html:not([data-js]) .nav { display: block; position: static; padding: 0 0 1.5rem; border-bottom: 0; }
  html:not([data-js]) .nav-toggle { display: none; }
  html:not([data-js]) .site-header { position: static; }
  html:not([data-js]) .site-header__inner { flex-wrap: wrap; }
  html:not([data-js]) .nav { flex-basis: 100%; }
}

/* --- Focal points, one per photograph --------------------------------------
   Where a photograph is cropped to fit its box, this is the point kept in
   view. It belongs to the photograph rather than to the page showing it, so
   it is set once here, matched on the file name, and every page that shows
   the photograph agrees. (It was an inline style on each <img>, which the
   Content Security Policy then had to allow.) */
img[src*="/portrait-hero."]           { --pos: 50% 22%; }
img[src*="/speaking-community."]      { --pos: 40% 28%; }
img[src*="/workshop-room."]           { --pos: 58% 45%; }
img[src*="/speaking-conference."]     { --pos: 62% 20%; }
img[src*="/speaking-conference-2."]   { --pos: 45% 30%; }
img[src*="/facilitating-civic-room."] { --pos: 58% 30%; }
img[src*="/community-forum."]         { --pos: 40% 50%; }
img[src*="/online-delivery."]         { --pos: 55% 45%; }
img[src*="/walk-and-talk-group."]     { --pos: 50% 80%; }
img[src*="/clesol-speaking."]         { --pos: 60% 40%; }

/* --- Spacing utilities -----------------------------------------------------
   The handful of one-off gaps the pages need, named on a scale instead of
   written as style attributes. */
.mt-0  { margin-top: 0; }
.mt-s  { margin-top: 1.25rem; }
.mt-m  { margin-top: 2rem; }
.mt-l  { margin-top: 2.5rem; }
.mt-xl { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* Text for screen readers only, such as the name of a video on its play
   button. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}