/* ═══════════════════════════════════════════════════════════════════════════
   Diverse Talent · pages/reads.css  ·  Everybody Reads  (src/pages/reads.html)

   A partner's platform, told plainly, in the partner's own colours (see the first block). The set piece is the open book of the hero: two leaves of the mark side by
   side, one page each for the two things the platform sets apart (reads.js opens them from the spine).

   Unlayered, so it wins over the design system. Everything is scoped to .page--reads or to an rd-
   name. Logical properties only, colours from tokens, nothing under 16px, no uppercase.
   Nothing is hidden here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────── Everybody Reads' own colours ──
   This page wears the partner's brand, read from their poster and logo on 11 Oct 2026:
   purple #5B3A93 · orange #F99420 · blue #339EE4 · magenta #C12996 · cream #FAF6ED.
   The raw palette is re-pointed inside the page only, so every tone and component follows by itself:
   what the system calls clay is their purple here, plum their blue, gold their orange, forest (buttons,
   the closing panel) their purple. The header and the footer are outside <main> and stay ours. */
.page--reads {
  --er-purple: #5B3A93; --er-purple-deep: #452A75; --er-purple-mist: #EFE9F7;
  --er-orange: #F99420; --er-blue: #339EE4; --er-magenta: #C12996; --er-cream: #FAF6ED;
  --er-ribbon: linear-gradient(90deg, var(--er-orange), var(--er-magenta) 48%, var(--er-blue)); /* lint-ok: the ribbon of the partner's own mark */

  --bone: var(--er-cream); --bone-deep: #F1EADB;
  --ink: #2A2433; --ink-deep: #FFFFFF; --slate: #5A5361;
  --forest: var(--er-purple); --forest-deep: var(--er-purple-deep); --forest-mist: var(--er-purple-mist);
  --on-forest-muted: #E4DAF3;
  --gold: var(--er-orange); --gold-hover: #E88410;
  --clay: var(--er-purple); --clay-deep: var(--er-purple-deep); --clay-mist: var(--er-purple-mist);
  --plum: #1E7FC7; --plum-deep: #17629B; --plum-mist: #E6F2FB;
  --blue: var(--er-magenta); --sage: var(--er-blue);

  --bg: var(--bone); --fg: var(--ink); --fg-muted: var(--slate); --heading: var(--ink);
  --link: var(--forest); --accent: var(--forest); --focus: var(--forest-deep);
  --ghost: var(--bone-deep); --error: #A3261B;
  --btn-bg: var(--forest); --btn-bg-hover: var(--forest-deep); --btn-line: var(--forest);
  --p1: var(--er-orange); --p2: var(--er-blue); --p3: var(--er-magenta); --p4: var(--er-purple); --p5: var(--er-orange); --p6: var(--er-blue);
  background: var(--er-cream);
}
/* On their purple the words are white (the system's clay takes dark words); white buttons keep dark words. */
.page--reads :is(.section--clay, .panel--clay) { --btn-fg: var(--ink); --btn-line: #FFFFFF; --rule: rgb(255 255 255 / .3); }
.page--reads :is(.section--clay, .panel--clay) :is(.panel--white, .panel--bone) { --error: #A3261B; }
/* Their cards: white, round, standing on a thick edge of the brand purple (as on their poster). */
.page--reads :is(.rd-part, .rd-event__card, .rd-status, .rd-poster__frame, .rd-book__page--end) { box-shadow: 0 .4rem 0 var(--er-purple); }
.page--reads .section--clay .rd-part { box-shadow: 0 .4rem 0 var(--er-orange); }
.page--reads .rd-how__item:not(.rd-how__item--lead) { background: var(--white); box-shadow: 0 .4rem 0 var(--er-purple); }
.page--reads .section--white { --bg: var(--er-cream); }
/* The ribbon of their mark, as a rule under a heading. */
.rd-ribbon::after { content: ""; display: block; inline-size: min(100%, 9rem); block-size: .4rem; margin-block-start: .9rem; border-radius: 1rem; background: var(--er-ribbon); }

.er-logo { display: block; }
.er-logo > img { display: block; inline-size: 100%; block-size: auto; }

/* The lockup over the headline: their mark and name, a small cross, our mark and name. */
.rd-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin: 0; font-weight: var(--fw-strong); color: var(--heading); }
.rd-lockup__er, .rd-lockup__dt { display: inline-flex; align-items: center; gap: .7rem; }
.rd-lockup__logo { inline-size: clamp(5.5rem, 4.5rem + 3.4vw, 8rem); }
.rd-lockup__name { font-size: var(--fs-sub); line-height: 1.1; color: var(--er-purple); }
.rd-lockup__with { position: relative; inline-size: 1rem; block-size: 1rem; flex: none; }
.rd-lockup__with::before, .rd-lockup__with::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline: 0; block-size: 2px; background: var(--slate); border-radius: 2px; rotate: 45deg; }
.rd-lockup__with::after { rotate: -45deg; }
.rd-lockup__mark { display: block; inline-size: 2.25rem; block-size: 2.25rem; }
.rd-lockup__mark > .mark { inline-size: 100%; block-size: 100%; }
.rd-what__logo { display: block; inline-size: clamp(10rem, 7rem + 12vw, 16rem); padding: clamp(1.25rem, 1rem + 1.4vw, 2rem); border-radius: var(--r-panel); background: var(--white); box-shadow: 0 .4rem 0 var(--er-purple); }

.page--reads :is(p, li, figcaption, dd) {
  hyphenate-limit-chars: 12 5 5;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
  -webkit-hyphenate-limit-lines: 2;
}

/* A line with a petal before it: the partner's name over the headline, the status, the notes. */
.rd-hero__name,
.rd-status,
.rd-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: baseline; margin: 0; }
.rd-hero__name > .petal,
.rd-status > .petal,
.rd-note > .petal { translate: 0 .12em; }
.rd-hero__name { font-size: var(--fs-lead); font-weight: var(--fw-strong); color: var(--heading); }
.rd-note { color: var(--fg-muted); max-inline-size: 38em; }

/* ───────────────────────────────────────────────────────────── 1 Hero ── */

.rd-hero { --hero-next: var(--bone); }
.rd-hero__text > h1 { max-inline-size: 12em; }
.rd-hero__text > .lead { max-inline-size: 30em; }
/* The plain status: a white pill of a row, so the admission is the easiest thing to find. */
.rd-status {
  padding: .9rem 1.25rem;
  border-radius: var(--r-row, 14px);
  background: var(--white);
  color: var(--heading);
  font-weight: var(--fw-strong);
  max-inline-size: 30em;
}

/* The open book. Two pages meet at the spine; the leaves round the outer top corners and the inner
   foot, the way a book lies open. The pages lean a little apart so the spine reads. */
.rd-book { display: grid; gap: 1.1rem; max-inline-size: 34rem; inline-size: 100%; margin: 0; justify-self: center; }
.rd-book__pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.4rem, .2rem + .6vw, .75rem); align-items: stretch; }
.rd-book__page { display: grid; align-content: start; gap: .7rem; padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem); min-block-size: clamp(15rem, 11rem + 14vw, 21rem); }
.rd-book__page > * + * { margin-block-start: 0; }
.rd-book__page--start { padding-block-start: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.rd-book__page--end { padding-block-start: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.rd-book__title { font-family: var(--font-display, inherit); font-size: var(--fs-sub); font-weight: var(--fw-strong); line-height: 1.15; color: var(--heading); margin: 0; }
.rd-book__body { margin: 0; }
.rd-book > figcaption { color: var(--fg-muted); text-align: center; }
@media (min-width: 56rem) {
  .rd-hero .page-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .rd-book { justify-self: end; }
}
@media (max-width: 26rem) {
  .rd-book__page { padding-inline: 1rem; min-block-size: 0; }
}

/* ─────────────────────────────────────────────────────── 2 What it is ── */

.rd-what__head { display: grid; gap: clamp(1rem, .7rem + 1.4vw, 1.75rem); justify-items: start; }
.rd-what__text > .cluster { margin-block-start: 1.75rem; }

/* ──────────────────────────────────────────────── 3 How a student reads ──
   Five things, not five identical cards: the second (their level, their age) is the heart of the
   platform, so it is the solid clay leaf and takes two columns on a wide screen. */

.rd-how__grid { display: grid; gap: clamp(.9rem, .6rem + 1vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.rd-how__item { display: grid; align-content: start; gap: .7rem; }
.rd-how__item > * + * { margin-block-start: 0; }
.rd-how__item > h3 { font-size: var(--fs-sub); }
@media (min-width: 40rem) {
  .rd-how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-how__item--lead { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .rd-how__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rd-how__item { grid-column: span 2; }
  .rd-how__item:first-child { grid-column: 1 / span 2; grid-row: 1; }
  .rd-how__item--lead { grid-column: 3 / span 2; grid-row: 1 / span 2; align-content: center; padding: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); }
  .rd-how__item:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
  .rd-how__item--lead > h3 { font-size: var(--fs-section); }
  .rd-how__item--lead > p { font-size: var(--fs-lead); }
}

/* ───────────────────────────────────────────────────── 4 Who does what ── */

.rd-parts__head { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); margin-block-end: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.rd-parts__why { display: grid; gap: .8rem; max-inline-size: 36em; }
.rd-parts__why > h3 { font-size: var(--fs-sub); }
.rd-parts__why > p { margin: 0; }
@media (min-width: 60rem) {
  .rd-parts__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
}
.rd-parts__grid { display: grid; gap: clamp(1rem, .6rem + 1.6vw, 2rem); }
@media (min-width: 48rem) {
  .rd-parts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rd-part > h3 { font-size: var(--fs-sub); }
.rd-part__logo { display: block; inline-size: 9rem; block-size: 4.5rem; }
.rd-part__logo .er-logo { block-size: 100%; }
.rd-part__logo img { block-size: 100%; inline-size: auto; }
.rd-part__mark { display: block; inline-size: 4.5rem; block-size: 4.5rem; }
.rd-part__mark > .mark { inline-size: 100%; block-size: 100%; }
.rd-parts__cost {
  margin-block-start: clamp(2rem, 1.4rem + 2.8vw, 3.75rem);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-section);
  font-weight: var(--fw-hero, 700);
  line-height: 1.1;
  color: var(--heading);
  max-inline-size: 16em;
  hyphens: manual;
}

/* ───────────────────────────────────────────────────────── 5 The event ── */

.rd-event__grid { display: grid; gap: clamp(2rem, 1.2rem + 3.4vw, 4rem); align-items: start; }
.rd-event__text { display: grid; gap: clamp(1.1rem, .9rem + 1vw, 1.6rem); }
.rd-event__text > p { margin: 0; }
.rd-event__sign { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.rd-event__sign > h2 { flex: 1 1 0; min-inline-size: min(100%, 8em); }
.rd-event__card { display: grid; gap: 1.25rem; }
.rd-event__card > * + * { margin-block-start: 0; }
.rd-event__name { font-size: var(--fs-sub); line-height: 1.2; }
.rd-facts { display: grid; gap: 0; margin: 0; }
.rd-facts > div { display: grid; gap: .15rem 1.25rem; padding-block: .85rem; border-block-start: 1px solid color-mix(in srgb, var(--plum) 22%, transparent); }
.rd-facts > div:last-child { border-block-end: 1px solid color-mix(in srgb, var(--plum) 22%, transparent); }
.rd-facts dt { color: var(--fg-muted); }
.rd-facts dd { margin: 0; color: var(--heading); font-weight: var(--fw-strong); }
@media (min-width: 30rem) {
  .rd-facts > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}
/* The organiser's poster, whole: a plain rounded frame on white, because a leaf would cut its words. */
.rd-poster { max-inline-size: 28rem; inline-size: 100%; justify-self: center; }
.rd-poster__frame {
  display: block;
  padding: clamp(.4rem, .3rem + .4vw, .7rem);
  border-radius: var(--r-panel);
  background: var(--white);
  transition: transform var(--dur-2, .3s) var(--ease-out);
}
.rd-poster__frame img { display: block; inline-size: 100%; block-size: auto; border-radius: calc(var(--r-panel) - .5rem); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rd-poster__frame:hover { transform: translateY(-4px) rotate(calc(var(--dir, 1) * -1deg)); }
}
@media (min-width: 60rem) {
  .rd-event__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rd-poster { justify-self: end; position: sticky; inset-block-start: calc(var(--header-h, 5rem) + 1.5rem); }
}

/* ──────────────────────────────────────────────────── 6 Before you ask ── */

.rd-know__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rd-know__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(1rem, .7rem + 1.2vw, 1.75rem); align-items: start; padding-block: clamp(1.25rem, 1rem + 1vw, 1.9rem); border-block-start: 1px solid color-mix(in srgb, var(--clay) 26%, transparent); }
.rd-know__row:last-child { border-block-end: 1px solid color-mix(in srgb, var(--clay) 26%, transparent); }
.rd-know__row h3 { font-size: var(--fs-sub); margin-block-end: .4rem; }
.rd-know__row p { margin: 0; color: var(--fg-muted); }
.rd-know__row p + p { margin-block-start: .6rem; }

/* ─────────────────────────────────────────────── 7 How a school can ask ── */

.rd-ask__text { color: var(--heading); font-size: var(--fs-lead); line-height: 1.4; margin: 0; }
.rd-ask__act { display: grid; gap: 1.1rem; justify-items: start; margin-block-start: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }

.rd-closing { padding-block-start: calc(var(--section-pad) * .5 + var(--seam-h)); }