/* Orli v3 site · Evidence and impact (evidence.html)
   ---------------------------------------------------------------------------
   Honest, calm data. Every figure is a big number with who answered, the
   method and the respondents beside it, and every set of figures ends with
   what it can't show. No charts. System tokens only (v2/system/tokens.css);
   the approved buttons are used as they are.

     Hero ............ title + lead, the reading guide, the contents row
     Programme ....... what took place (counts) · results pending · limits
     Case studies .... at a glance, the full story in a disclosure, limits
     Video ........... click-to-load poster (review mode only, for now)
     Research ........ who took part, how, two findings, limits, the PDF
     Investigating ... the three-step chain (the third drawn open), plans
     Ask, Sources
     Review mode ..... ?verify=1 shows what's held back, each with a note
     Print ........... one clean document: no chrome, no video, no buttons,
                       every disclosure open

   Surfaces alternate so sections never blend: canvas (hero), warm
   (Sunderland), canvas (case study), warm (research), canvas
   (investigating), warm (ask), canvas (sources), then the warm footer.
   ------------------------------------------------------------------------- */

.ev-print-head, .ev-print-only { display: none; }

/* Shared: a group inside a section, its sub-head, notes and source lines */
.ev-group + .ev-group { margin-block-start: var(--o-space-8); }
.ev-subhead {
  margin-block-end: var(--o-space-4);
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); text-wrap: balance;
}
.ev-note, .ev-source {
  margin-block-start: var(--o-space-3);
  font-size: var(--o-text-small); line-height: var(--o-lh-small);
  color: var(--o-ink-2); max-inline-size: var(--o-measure); text-wrap: pretty;
}
.ev-source { margin-block-start: var(--o-space-4); }
.ev-source .o-link { white-space: nowrap; }
.ev-prose > * + * { margin-block-start: var(--o-space-3); }
.ev-prose p { max-inline-size: var(--o-measure); text-wrap: pretty; }
.ev-prose--quiet { color: var(--o-ink-2); }
/* Held back: hidden unless ?verify=1 (the shell sets html[data-verify="on"]).
   The same rule as orlis/, worlds/ and play/. */
html:not([data-verify="on"]) [data-verify-only] { display: none !important; }
/* A reviewer's note on held content: what it's waiting for. */
.ev-review {
  margin-block-end: var(--o-space-4); padding: var(--o-space-2) var(--o-space-3);
  border-radius: var(--o-r-control);
  background: color-mix(in srgb, var(--o-star) 16%, transparent);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink); text-wrap: pretty;
}
.ev-review .s-verify { font-family: var(--o-font-ui); font-weight: var(--o-weight-ui); }
.ev-held { margin-block-start: var(--o-space-5); }

/* Not yet: a result that will appear once it's checked. Drawn open, with
   a dashed edge, like the third step in What we're investigating. */
.ev-pending {
  display: flex; align-items: flex-start; gap: var(--o-space-3);
  padding: var(--o-space-5);
  border: 1.5px dashed var(--o-n3); border-radius: var(--o-r-card);
  color: var(--o-ink-2); text-wrap: pretty;
}
.ev-pending::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-block-start: 1px; background: var(--o-ink-2);
  -webkit-mask: url("../../../../design-kit/icons/schools-doodles/session--doodles--clock.svg") center / contain no-repeat;
          mask: url("../../../../design-kit/icons/schools-doodles/session--doodles--clock.svg") center / contain no-repeat;
}
@media (min-width: 600px) { .ev-pending { padding: var(--o-space-5) var(--o-space-6); } }
.ev-pending--small { padding: var(--o-space-4) !important; font-size: var(--o-text-small); line-height: var(--o-lh-small); }
.ev-pending--small::before { width: 20px; height: 20px; }

/* A pill on a warm band takes the white surface, so it still reads as one. */
.o-section--warm .o-pill { --pill-bg: var(--o-surface); }
.ev-list { display: grid; gap: var(--o-space-3); margin: 0; padding-inline-start: 1.2em; }
.ev-list li { padding-inline-start: var(--o-space-1); max-inline-size: var(--o-measure); text-wrap: pretty; }
.ev-list li::marker { color: var(--o-ink-2); }

/* ================================================================= hero */
.ev-hero { padding-block: var(--o-space-7) var(--o-space-8); }
.ev-hero__grid { display: grid; gap: var(--o-space-7); }
.ev-hero__head { margin: 0; }
@media (min-width: 900px) {
  .ev-hero { padding-block: var(--o-space-8); }
  .ev-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--o-space-8); align-items: center; }
}

/* The reading guide: three terms on one quiet card. */
.ev-guide {
  padding: var(--o-space-5);
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
@media (min-width: 600px) { .ev-guide { padding: var(--o-space-6); } }
.ev-guide__title {
  margin-block-end: var(--o-space-4);
  font: var(--o-weight-title) var(--o-text-body) / 1.3 var(--o-font-ui); letter-spacing: -.005em;
}
.ev-guide__list { display: grid; gap: var(--o-space-3); margin: 0; }
.ev-guide__list > div + div { padding-block-start: var(--o-space-3); border-block-start: 1px solid var(--o-line); }
.ev-guide__list dt { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); }
.ev-guide__list dd { margin: 0; font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }

/* On this page */
/* "On this page": the shared row (components/contents/contents.css). */

/* ========================================================= programme */
/* What took place: five counts on one white strip, hairlines between. */
.ev-reach {
  display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  background: var(--o-line); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow); overflow: clip;
}
.ev-reach > li {
  display: flex; flex-direction: column; gap: var(--o-space-1);
  padding: var(--o-space-5); background: var(--o-surface);
}
.ev-reach > li:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ev-reach { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ev-reach > li:last-child { grid-column: auto; }
  .ev-reach > li { padding: var(--o-space-5) var(--o-space-6); }
}
.ev-reach__n {
  font: var(--o-weight-title) var(--o-text-title) / 1 var(--o-font-ui);
  letter-spacing: var(--o-track-title); font-variant-numeric: lining-nums tabular-nums;
}
.ev-reach__l { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }

/* What people said: one figure per card, the number beside its words, who
   answered, the method and the respondents under a hairline. */
.ev-stats { display: grid; gap: var(--o-grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ev-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ev-stats--one { grid-template-columns: minmax(0, 1fr); } }
.ev-stat {
  display: flex; flex-direction: column; gap: var(--o-space-4);
  padding: var(--o-space-5);
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
@media (min-width: 600px) { .ev-stat { padding: var(--o-space-6); } }
.ev-stat__main {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: var(--o-space-4);
}
.ev-stat__n {
  min-inline-size: 2.75em;
  font: var(--o-weight-title) var(--o-text-title) / 1 var(--o-font-ui);
  letter-spacing: var(--o-track-title); font-variant-numeric: lining-nums tabular-nums;
}
.ev-stat__label { font-size: var(--o-text-body); line-height: 1.45; text-wrap: pretty; }
/* On a phone the number sits over its words, so the words get the width. */
@media (max-width: 599.98px) {
  .ev-stat__main { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--o-space-2); }
  .ev-stat__n { min-inline-size: 0; }
}

.ev-meta {
  display: grid; gap: var(--o-space-2); margin: 0;
  margin-block-start: auto; padding-block-start: var(--o-space-4);
  border-block-start: 1px solid var(--o-line);
  font-size: var(--o-text-small); line-height: var(--o-lh-small);
}
.ev-meta > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--o-space-3); }
.ev-meta dt { font-family: var(--o-font-ui); font-weight: var(--o-weight-ui); color: var(--o-ink); }
.ev-meta dd { margin: 0; color: var(--o-ink-2); text-wrap: pretty; }
/* On a phone, each label sits over its answer so the answer gets the width. */
@media (max-width: 599.98px) {
  .ev-meta { gap: var(--o-space-3); }
  .ev-meta > div, .ev-research .ev-meta > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Limits: a note on flat ground, set apart from the white figures. */
.ev-limits {
  margin-block-start: var(--o-space-7);
  padding: var(--o-space-5);
  background: var(--o-canvas); border: 1px solid var(--o-warm-high); border-radius: var(--o-r-card);
}
@media (min-width: 600px) { .ev-limits { padding: var(--o-space-6); } }
.ev-limits__title {
  display: flex; align-items: center; gap: var(--o-space-3);
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading);
}
.ev-limits__title .o-doodle { color: var(--o-ink); }
.ev-limits__list { display: grid; gap: var(--o-space-3); margin: var(--o-space-4) 0 0; padding-inline-start: 1.2em; }
.ev-limits__list li { padding-inline-start: var(--o-space-1); max-inline-size: var(--o-measure); text-wrap: pretty; }
.ev-limits__list li::marker { color: var(--o-ink-2); }
@media (min-width: 600px) { .ev-limits__list { margin-inline-start: calc(24px + var(--o-space-3)); } }
@media (min-width: 900px) { .ev-limits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-4) var(--o-space-8); } }
/* Inside a white case card, the note takes the warm fill instead. */
.ev-limits--case { background: var(--o-warm); border-color: transparent; }

/* ======================================================= case studies */
.ev-case {
  padding: var(--o-space-5);
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
@media (min-width: 600px) { .ev-case { padding: var(--o-space-6); } }
@media (min-width: 1100px) { .ev-case { padding: var(--o-space-7); } }
.ev-case + .ev-case { margin-block-start: var(--o-space-8); }
.ev-case__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-space-2); }
.ev-case__head > .o-pill { margin-block-end: var(--o-space-2); white-space: normal; text-align: start; line-height: 1.2; padding-block: var(--o-space-1); }
.ev-case__title {
  font: var(--o-weight-title) var(--o-text-title) / var(--o-lh-title) var(--o-font-ui);
  letter-spacing: var(--o-track-title); text-wrap: balance;
}
.ev-case__sub { font-size: var(--o-text-lead); line-height: var(--o-lh-lead); color: var(--o-ink); }
.ev-case__note { margin-block-start: var(--o-space-1); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); max-inline-size: var(--o-measure); }

/* At a glance: label over value, hairlines between, wrapping as it needs. */
.ev-glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--o-space-4) var(--o-space-5);
  margin: var(--o-space-6) 0 0; padding: var(--o-space-5) 0;
  border-block: 1px solid var(--o-line);
}
.ev-glance > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--o-space-1); }
.ev-glance dt { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.ev-glance dd {
  margin: 0; font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); font-variant-numeric: lining-nums;
}

/* The full story: one disclosure under at a glance, so the page scans and
   the limits stay in view. The label stays put; the chevron turns. */
.ev-more { margin-block-start: var(--o-space-4); }
.ev-more__toggle {
  display: inline-flex; align-items: center; gap: var(--o-space-2);
  min-height: var(--o-target); cursor: pointer; list-style: none;
  font: var(--o-weight-ui) var(--o-text-body) / 1.2 var(--o-font-ui);
  border-radius: var(--o-r-control);
}
.ev-more__toggle::-webkit-details-marker { display: none; }
.ev-more__label {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .24em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}
.ev-more__toggle:hover .ev-more__label { text-decoration-color: currentColor; }
.ev-more__chev {
  flex: none; width: 14px; height: 9px; background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.6 1.8c2.1 2 4.1 4.3 6.5 6.4 2.2-2.3 4.2-4.3 6.3-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: rotate var(--o-t-interact) var(--o-ease);
}
.ev-more[open] .ev-more__chev { rotate: 180deg; }
.ev-more[open] > .ev-more__toggle { margin-block-end: var(--o-space-2); }

/* The story and the figures: two columns that never compete (the figures
   sit behind a hairline, not on a second card). */
.ev-case__body { display: grid; gap: var(--o-space-7); margin-block-start: var(--o-space-5); }
@media (min-width: 900px) {
  .ev-case__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--o-space-8); }
  .ev-case__results { padding-inline-start: var(--o-space-7); border-inline-start: 1px solid var(--o-line); }
}
@media (max-width: 899.98px) {
  .ev-case__results { padding-block-start: var(--o-space-6); border-block-start: 1px solid var(--o-line); }
}
.ev-case__story { display: grid; gap: var(--o-space-6); align-content: start; }
.ev-part__title {
  margin-block-end: var(--o-space-3);
  font: var(--o-weight-title) var(--o-text-body) / 1.3 var(--o-font-ui); letter-spacing: -.005em;
}
.ev-case__results { display: flex; flex-direction: column; align-items: stretch; }
.ev-case__results > .ev-part__title { margin-block-end: var(--o-space-4); }
.ev-results__group {
  margin-block: var(--o-space-4) var(--o-space-2);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2);
}
.ev-case__results > .ev-part__title + .ev-results__group { margin-block-start: 0; }
.ev-figs { display: grid; gap: var(--o-space-3); margin: 0; padding: 0; list-style: none; }
.ev-figs > li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--o-space-3); align-items: baseline; }
.ev-figs > li > span:last-child { text-wrap: pretty; }
.ev-figs__n {
  font: var(--o-weight-title) var(--o-text-heading) / 1.2 var(--o-font-ui);
  letter-spacing: var(--o-track-heading); font-variant-numeric: lining-nums tabular-nums;
}
.ev-figs--words > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ev-figs--words > li + li { padding-block-start: var(--o-space-3); border-block-start: 1px solid var(--o-line); }
.ev-figs--words .ev-figs__n { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); letter-spacing: 0; color: var(--o-ink-2); }
.ev-meta--stack { margin-block-start: var(--o-space-6); }

/* One quote per case: words first, the role under them. */
.ev-quote { margin: var(--o-space-7) 0 0; padding-inline-start: var(--o-space-5); border-inline-start: 3px solid var(--o-mint); }
.ev-quote blockquote { margin: 0; }
.ev-quote blockquote p {
  max-inline-size: 40ch;
  font: 600 var(--o-text-lead) / var(--o-lh-lead) var(--o-font-ui); letter-spacing: -.008em; text-wrap: pretty;
}
.ev-quote blockquote p::before { content: "“"; }
.ev-quote blockquote p::after { content: "”"; }
.ev-quote figcaption { margin-block-start: var(--o-space-2); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.ev-limits--case { margin-block-start: var(--o-space-5); }

/* Outside the primary focus: quieter than the main case study. No white
   card or shadow, a hairline edge, a smaller title. */
.ev-case--quiet { background: transparent; box-shadow: none; }
.ev-case--quiet .ev-case__title { font-size: var(--o-text-heading); line-height: var(--o-lh-heading); letter-spacing: var(--o-track-heading); }
.ev-case--quiet .ev-case__sub { font-size: var(--o-text-body); color: var(--o-ink-2); }
.ev-case--quiet .ev-glance dd { font-size: var(--o-text-body); }

/* ================================================================ video
   For now a block at the end of the case studies (review mode only). */
.ev-video { margin-block-start: var(--o-space-8); padding-block-start: var(--o-space-7); border-block-start: 1px solid var(--o-line); }
.ev-video__title {
  margin-block-end: var(--o-space-5);
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading);
}
.ev-player { margin: 0; max-inline-size: 52rem; }
.ev-player__what { display: block; margin-block-end: var(--o-space-1); color: var(--o-ink); }
.ev-player__frame { background: var(--world-wash); }
.ev-player__frame:has(.ev-poster:focus-visible) { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
.ev-player__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The poster: drawn here, on Orla's wash, so nothing is fetched from
   YouTube before the visitor asks. Words on flat ground, one control. */
.ev-poster {
  position: absolute; inset: 0; z-index: 1; display: block;
  color: var(--o-ink); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ev-poster:focus-visible { outline: none; }
.ev-poster__text {
  position: absolute; inset-inline-start: 7%; inset-block-start: 11%; max-inline-size: 54%;
  display: flex; flex-direction: column; gap: var(--o-space-2);
}
.ev-poster__meta { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--world-deep); }
.ev-poster__title {
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); text-wrap: balance;
}
.ev-poster__play {
  position: absolute; inset-inline-start: 7%; inset-block-end: 12%;
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--o-action); color: #fff; border: 1.5px solid var(--o-action);
  box-shadow: 0 var(--o-lip) 0 0 var(--o-action-press);
  transition: translate var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease), background-color var(--o-t-interact) var(--o-ease);
}
.ev-poster__play .o-doodle { translate: 2px 0; }
@media (min-width: 600px) { .ev-poster__play { width: 76px; height: 76px; } }
@media (hover: hover) and (pointer: fine) {
  .ev-poster:hover .ev-poster__play { background: var(--o-action-hover); border-color: var(--o-ink); translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop); }
}
.ev-poster:focus-visible .ev-poster__play { border-color: var(--o-ink); translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop); }
.ev-poster:active .ev-poster__play { translate: 0 0; box-shadow: 0 0 0 0 var(--o-ink); background: var(--o-action-press); transition-duration: var(--o-t-press); }
/* Orla, sitting on the poster's floor on a soft contact shadow. */
.ev-poster__orla { position: absolute; inset-inline-end: 8%; inset-block-end: 12%; width: 30%; }
.ev-poster__orla::after {
  content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -7%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(25 84 64 / .22), rgb(25 84 64 / 0));
}
.ev-poster__orla img { width: 100%; height: auto; }

/* ============================================================= research */
.ev-research__grid { display: grid; gap: var(--o-space-8); }
@media (min-width: 900px) { .ev-research__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--o-space-8); } }
.ev-research__grid > .ev-group + .ev-group { margin-block-start: 0; }
.ev-who {
  margin-block-end: var(--o-space-7); padding: var(--o-space-5);
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
@media (min-width: 600px) { .ev-who { padding: var(--o-space-6); } }
.ev-who__total { display: flex; align-items: baseline; gap: var(--o-space-2); padding-block-end: var(--o-space-4); border-block-end: 1px solid var(--o-line); }
.ev-who__total .ev-reach__l { font-size: var(--o-text-body); }
.ev-who__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-4); margin: var(--o-space-4) 0 0; padding: 0; list-style: none; }
.ev-who__parts li { display: flex; flex-direction: column; gap: 2px; font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.ev-who__parts strong {
  font: var(--o-weight-title) var(--o-text-heading) / 1.2 var(--o-font-ui);
  letter-spacing: var(--o-track-heading); color: var(--o-ink); font-variant-numeric: lining-nums tabular-nums;
}
.ev-download { margin-block-start: var(--o-space-7); max-inline-size: 60ch; color: var(--o-ink-2); }

/* ======================================================== investigating */
/* Three steps, read left to right (top to bottom on a phone). The third is
   drawn open: a dashed edge and no card, because nothing shows it yet. */
.ev-chain {
  display: grid; gap: var(--o-space-7);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 900px) { .ev-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-space-7); } }
.ev-step {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-space-3);
  padding: var(--o-space-5);
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
@media (min-width: 600px) { .ev-step { padding: var(--o-space-6); } }
/* The arrow between steps (a Schools doodle), in the gap. */
.ev-step + .ev-step::before {
  content: ""; position: absolute; width: 24px; height: 15px; background: var(--o-ink-2);
  -webkit-mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-arrow-right.svg") center / contain no-repeat;
          mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-arrow-right.svg") center / contain no-repeat;
  inset-block-start: calc(-1 * (var(--o-space-7) + 15px) / 2 - 0px); inset-inline-start: calc(50% - 12px);
  rotate: 90deg;
}
@media (min-width: 900px) {
  .ev-step + .ev-step::before {
    inset-block-start: calc(50% - 7.5px); inset-inline-start: calc(-1 * (var(--o-space-7) + 24px) / 2);
    rotate: none;
  }
}
.ev-step__n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--o-warm); font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui);
}
.ev-step__title {
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading);
}
.ev-step__text { text-wrap: pretty; }
.ev-step__so-far {
  align-self: stretch; margin-block-start: auto; padding-block-start: var(--o-space-3);
  border-block-start: 1px solid var(--o-line);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty;
}
.ev-step__so-far > span { display: block; font-family: var(--o-font-ui); font-weight: var(--o-weight-ui); color: var(--o-ink); }
.ev-step--open { background: transparent; box-shadow: none; border: 1.5px dashed var(--o-n3); }
.ev-step--open .ev-step__n { background: transparent; border: 1.5px dashed var(--o-n3); }
.ev-step--open .ev-step__so-far { border-block-start-style: dashed; border-block-start-color: var(--o-n3); }

.ev-next__grid { display: grid; gap: var(--o-space-7); margin-block-start: var(--o-space-8); }
@media (min-width: 900px) { .ev-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-8); } }
.ev-plan { padding-block-start: var(--o-space-5); border-block-start: 1px solid var(--o-line); }
.ev-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-2) var(--o-space-3); margin-block-end: var(--o-space-4); }
.ev-plan__head .ev-subhead { margin: 0; }
.ev-plan__more { margin-block-start: var(--o-space-4); padding-inline-start: calc(1.2em + var(--o-space-1)); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.ev-plan__close { margin-block-start: var(--o-space-5); font: var(--o-weight-ui) var(--o-text-body) / 1.4 var(--o-font-ui); }

/* =========================================================== ask, sources */
.ev-ask .o-section-head { margin: 0; }
.ev-ask .o-title { max-inline-size: 18ch; }
.ev-ask .o-lead { text-wrap: balance; }
.ev-ask .o-small { max-inline-size: 52ch; }
.ev-ask .o-section-head > .o-small { margin-block-start: var(--o-space-2); }
/* Sources: a quiet footnote under a hairline, just before the closing ask. */
.ev-sources { padding-block: 0 var(--o-space-8); }
.ev-sources > .o-container { padding-block-start: var(--o-space-7); border-block-start: 1px solid var(--o-line); }
.ev-sources__title {
  margin-block-end: var(--o-space-4);
  font: var(--o-weight-title) var(--o-text-body) / 1.3 var(--o-font-ui);
}
/* Two columns that read down, then across (1 2 | 3 on the public page). */
.ev-sources__list {
  margin: 0; padding-inline-start: 1.4em;
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2);
}
.ev-sources__list li { max-inline-size: var(--o-measure); padding-inline-start: var(--o-space-1); break-inside: avoid; scroll-margin-top: calc(var(--o-header-h) + var(--o-space-4)); }
.ev-sources__list li + li { margin-block-start: var(--o-space-3); }
.ev-sources__list li:target { color: var(--o-ink); }
@media (min-width: 900px) {
  .ev-sources__list { columns: 2; column-gap: calc(var(--o-space-8) + 1.4em); }
  /* the first item of a column shouldn't carry the gap above it */
  .ev-sources__list li { margin-block-end: var(--o-space-3); }
  .ev-sources__list li + li { margin-block-start: 0; }
}
.ev-sources__ask { margin-block-start: var(--o-space-5); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }

/* ======================================================== motion levels
   The poster's play button follows the buttons: colour stays, travel goes. */
html:is([data-motion="reduced"], [data-motion="still"]) .ev-poster__play { translate: none !important; }
html:is([data-motion="reduced"], [data-motion="still"]) .ev-poster:is(:hover, :focus-visible) .ev-poster__play { box-shadow: 0 var(--o-lip) 0 0 var(--o-action-press); }
html[data-motion="still"] :is(.ev-poster__play, .ev-more__chev) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .ev-poster__play { translate: none !important; }
  html:not([data-motion]) .ev-more__chev { transition: none; }
  html:not([data-motion]) .ev-poster:is(:hover, :focus-visible) .ev-poster__play { box-shadow: 0 var(--o-lip) 0 0 var(--o-action-press); }
}

/* ======================================================= forced colours */
@media (forced-colors: active) {
  .ev-reach { background: CanvasText; }
  .ev-stat, .ev-case, .ev-who, .ev-step, .ev-limits, .ev-guide, .ev-pending { border-color: CanvasText; }
  .ev-more__chev, .ev-pending::before { background: CanvasText; }
  .ev-review { border: 1px solid CanvasText; }
  .ev-poster__play { forced-color-adjust: none; background: ButtonText; color: ButtonFace; border-color: ButtonText; }
  .ev-player__frame:has(.ev-poster:focus-visible) { outline-color: Highlight; }
  .ev-step + .ev-step::before { background: CanvasText; }
  .ev-quote { border-inline-start-color: CanvasText; }
}

/* ================================================================ print
   One clean document for a governors' pack: no header, footer, contents,
   video or buttons; the address on top, figures kept whole, external links
   written out. */
@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; }
  orli-header, orli-footer, .o-skip, .o-contents, .ev-ask, .ev-download, .ev-player__frame, [data-print],
  .o-link--arrow { display: none !important; }
  .ev-guide { margin-block-start: 5mm; padding: 4mm 5mm; border-color: #bbb; }
  .ev-guide__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5mm; }
  .ev-guide__list > div + div { padding-block-start: 0; border-block-start: 0; }
  .ev-print-head { display: block; margin: 0 0 6mm; padding-block-end: 3mm; border-block-end: 1px solid #999; font: 600 9pt/1.3 var(--o-font-ui); color: #444; }
  .ev-print-only { display: inline; }
  .o-section { padding-block: 0 !important; margin-block-end: 9mm; background: none !important; }
  .o-container { width: 100% !important; }
  .o-section-head { margin-block-end: 5mm; }
  .o-display { font-size: 24pt; max-inline-size: none; }
  .o-title { font-size: 17pt; max-inline-size: none; }
  .o-lead { font-size: 11.5pt; max-inline-size: none; }
  .ev-subhead, .ev-limits__title, .ev-case__title, .ev-step__title { font-size: 13pt; }
  .ev-hero__grid { display: block; }
  .ev-group + .ev-group { margin-block-start: 6mm; }
  :is(.ev-stat, .ev-case, .ev-reach, .ev-who, .ev-step, .ev-guide) { box-shadow: none !important; }
  :is(.ev-stat, .ev-reach, .ev-who, .ev-step) { border-color: #bbb; }
  .ev-reach { background: #bbb; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ev-reach > li:last-child { grid-column: auto; }
  .ev-reach > li { padding: 3mm 4mm; }
  .ev-cases, .ev-next { break-before: page; }
  .ev-sources .o-container { break-inside: avoid; }
  .ev-research .o-section-head { break-inside: avoid; }
  .ev-video { display: none !important; }
  /* Every disclosure prints open (the script opens them too, for browsers
     without ::details-content). */
  .ev-more > .ev-more__toggle { display: none; }
  .ev-more::details-content { content-visibility: visible; }
  .ev-pending { padding: 3mm 4mm; border-color: #999; }
  .ev-pending::before { display: none; }
  .ev-review { background: none; border: 1px solid #999; }
  .ev-sources__list { columns: 1; }
  .ev-reach__n, .ev-stat__n { font-size: 20pt; }
  .ev-stat { padding: 4mm 5mm; gap: 3mm; }
  .ev-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
  .ev-stats--one { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-limits { margin-block-start: 5mm; padding: 4mm 5mm; background: none !important; border: 1px solid #999 !important; }
  .ev-limits__title .o-doodle { display: none; }
  .ev-limits__list { margin-inline-start: 0; }
  .ev-case { padding: 0; border: 0; }
  .ev-case + .ev-case { break-before: page; margin-block-start: 0; }
  .ev-case__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8mm; margin-block-start: 5mm; }
  .ev-case__results { padding: 0 0 0 6mm; border-block-start: 0; border-inline-start: 1px solid #bbb; }
  .ev-glance { margin-block-start: 4mm; padding-block: 3mm; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ev-glance dd { font-size: 12pt; }
  .ev-case__title { font-size: 15pt; }
  .ev-case__sub { font-size: 11.5pt; }
  .ev-step__n { border: 1px solid #bbb; }
  .ev-figs__n { font-size: 12pt; }
  .ev-quote { margin-block-start: 5mm; border-inline-start-color: #999; }
  .ev-quote blockquote p { font-size: 11pt; }
  .ev-research__grid { grid-template-columns: minmax(0, 1fr); gap: 6mm; }
  .ev-research__who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8mm; align-items: start; }
  .ev-research__who > .ev-subhead:first-child { grid-column: 1; grid-row: 1; }
  .ev-research__who > .ev-who { grid-column: 1; grid-row: 2; margin: 0; }
  .ev-research__who > .ev-subhead:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .ev-research__who > .ev-prose { grid-column: 2; grid-row: 2; }
  .ev-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8mm; }
  .ev-step + .ev-step::before { display: none; }
  .ev-step { padding: 4mm; }
  .ev-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8mm; margin-block-start: 6mm; }
  .o-pill { border: 1px solid #999; background: none !important; }
  :is(.ev-stat, .ev-limits, .ev-figs > li, .ev-list > li, .ev-prose > p, .ev-step, .ev-quote, .ev-reach, .ev-who, .ev-glance, .ev-meta, .ev-plan, .ev-case__head, .ev-pending) { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  :is(h2, h3, h4, .o-section-head) { break-after: avoid; }
  a { color: inherit; }
}

/* =================================================== design uplift, 3 Nov
   Ryan: "a big design uplift to match the rest of the site". The site's own
   felt language, nothing new: the home hero's warm sky and school island in
   a sewn frame with the felt star (as on Safeguarding and Data protection),
   little felt Orli faces on the counts and the reading guide, About's rings with an Orli
   riding to each figure, the home page's handmade classroom beside Gillas
   Lane, and world-coloured number discs on the three steps. */

/* ---------------------------------------------------------------- hero */
.ev-hero { position: relative; isolation: isolate; overflow: clip; }
.ev-hero__sky {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../../hero/school/assets/sky-wide-1920.webp) center top / cover no-repeat;
  scale: -1 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 86%), linear-gradient(to right, #000 0%, rgb(0 0 0 / .9) 40%, rgb(0 0 0 / .25) 64%, transparent 84%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 86%), linear-gradient(to right, #000 0%, rgb(0 0 0 / .9) 40%, rgb(0 0 0 / .25) 64%, transparent 84%);
          mask-composite: intersect;
}
.ev-hero__art { position: relative; justify-self: start; width: min(100%, 460px); margin-block: var(--o-space-2) var(--o-space-4); }
@media (min-width: 900px) { .ev-hero__art { justify-self: end; } }
.ev-hero__pic {
  position: relative; aspect-ratio: 1; border-radius: var(--o-r-card); overflow: clip;
  background: #f3dcc0 url(../../hero/school/assets/sky-wide-1280.webp) 70% 30% / cover no-repeat;
  box-shadow: var(--o-shadow-raised);
}
.ev-hero__pic > img { position: absolute; inset: 6% 4% 2%; width: 92%; height: 92%; object-fit: contain; }
.ev-hero__pic::after {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 2px dashed rgb(255 246 228 / .78); border-radius: calc(var(--o-r-card) - 8px);
}
.ev-hero__star {
  position: absolute; z-index: 3; inset-block-start: -22px; inset-inline-end: -14px;
  width: 72px; height: 72px; rotate: 12deg; pointer-events: none;
  filter: drop-shadow(0 0 12px rgb(255 226 168 / .5)) drop-shadow(0 4px 6px rgb(60 57 50 / .22));
}
html[data-motion="full"] .ev-hero__star { animation: ev-star 7s ease-in-out infinite; }
@keyframes ev-star { 0%, 100% { translate: 0 0; rotate: 12deg; } 50% { translate: 0 -7px; rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .ev-hero__star { animation: none; } }

/* The reading guide: under the words, three terms side by side on wide screens. */
.ev-hero .ev-guide { margin-block-start: var(--o-space-6); }
@media (min-width: 900px) {
  .ev-guide__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-space-6); }
  .ev-guide__list > div + div { padding-block-start: 0; border-block-start: 0; padding-inline-start: var(--o-space-6); border-inline-start: 1px solid var(--o-line); }
}
.ev-guide__list dt { display: flex; align-items: center; gap: var(--o-space-2); margin-block-end: 2px; }

/* A little felt Orli face: the counts' and the guide's colour marks. */
.ev-dot { display: block; flex: none; width: 22px; height: 22px; border-radius: 50%; filter: drop-shadow(0 1px 1px rgb(47 46 43 / .2)); }
.ev-reach > li { position: relative; }
.ev-reach > li > .ev-dot { width: 28px; height: 28px; margin-block-end: var(--o-space-2); }
.ev-reach__n { font-size: calc(var(--o-text-title) * 1.2); }
@media (max-width: 899.98px) { .ev-reach__n { font-size: var(--o-text-title); } }

/* ------------------------------------------- the four figures, as rings
   About's rings (about.css .a-stat): the figure inside, the ring drawn to
   it, and an Orli sitting where the ring ends. */
.ev-ring {
  --ring: 108px;
  position: relative; display: grid; place-items: center; flex: none;
  inline-size: var(--ring); block-size: var(--ring);
}
@media (max-width: 599.98px) { .ev-ring { --ring: 92px; } }
.ev-ring__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; rotate: -90deg; overflow: visible; }
.ev-ring__track, .ev-ring__fill { fill: none; stroke-width: 5; }
.ev-ring__track { stroke: var(--track, var(--w-orla-soft)); }
.ev-ring__fill { stroke: var(--tone, var(--o-action)); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.ev-ring[data-tone="orla"] { --tone: var(--w-orla-accent); --track: var(--w-orla-soft); }
.ev-ring[data-tone="luna"] { --tone: var(--w-luna-accent); --track: var(--w-luna-soft); }
.ev-ring[data-tone="rory"] { --tone: var(--w-rory-accent); --track: var(--w-rory-soft); }
.ev-ring[data-tone="joy"] { --tone: var(--w-joy-accent); --track: var(--w-joy-soft); }
.ev-ring__roll {
  --rs: calc(var(--ring) * .42); --a: calc(var(--p) * 3.6deg);
  position: absolute; z-index: 1;
  inset-block-start: calc(var(--ring) / 2 - var(--rs) / 2); inset-inline-start: calc(var(--ring) / 2 - var(--rs) / 2);
  inline-size: var(--rs); block-size: var(--rs); max-width: none;
  transform: rotate(var(--a)) translateY(calc(var(--ring) * -.47)) rotate(calc(-1 * var(--a)));
  filter: drop-shadow(0 2px 2px rgb(47 46 43 / .2));
}
.ev-ring .ev-stat__n { min-inline-size: 0; font-size: calc(var(--ring) * .24); }
.ev-stat__main:has(.ev-ring) { gap: var(--o-space-5); }
@media (max-width: 599.98px) { .ev-stat__main:has(.ev-ring) { grid-template-columns: auto minmax(0, 1fr); } }

/* ---------------------------------------------- Gillas Lane, the picture */
.ev-case__top { display: grid; gap: var(--o-space-5); align-items: center; }
@media (min-width: 900px) { .ev-case__top { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--o-space-7); } }
.ev-case__art {
  position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--o-r-card); overflow: clip;
  background: #e7d6bd; box-shadow: var(--o-shadow-raised);
}
.ev-case__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-case__art::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 2px dashed rgb(255 246 228 / .78); border-radius: calc(var(--o-r-card) - 8px);
}
.ev-case__top + .ev-glance { margin-block-start: var(--o-space-6); }

/* ------------------------------------------------ the three steps' discs */
.ev-step__n {
  width: 40px; height: 40px; color: #fff; background: var(--w-orla-accent);
  font-size: var(--o-text-body); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12), 0 1px 2px rgb(47 46 43 / .2);
}
.ev-step:nth-child(2) .ev-step__n { background: var(--w-joy-accent); color: var(--o-ink); }
.ev-step:nth-child(3):not(.ev-step--open) .ev-step__n { background: var(--w-luna-accent); }
.ev-step--open .ev-step__n { background: transparent; color: var(--o-ink); box-shadow: none; }

@media (forced-colors: active) {
  .ev-hero__pic::after, .ev-case__art::after { border-color: CanvasText; }
  .ev-step__n { background: Canvas; border: 1px solid CanvasText; color: CanvasText; }
}
@media print { .ev-hero__sky, .ev-hero__art, .ev-case__art, .ev-ring__roll { display: none; } }