/* Resources pages: the Chapters design. Ronnie chose it on 9 October 2026.
   A white cover with the title, summary, date and the orange short wave. Each group of
   questions is a full width chapter: white, aubergine or ink blue, alternating with white.
   The waitlist is always the last chapter, on bottle green, with the white short wave.
   On desktop the group heading sits in a left column and stays put while its answers scroll.
   Tokens only, from :root in styles.css. No new colours, no tints, no radius, no shadow, no kicker.
   The fonts in /fonts have the o+e ligature removed, so "does" no longer prints as "dœs";
   the ligature settings below are belt and braces for any font that still carries it. */

.resource-page {
  margin: 0;
  background: var(--white);
  color: var(--wordmark-dark);
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'dlig' 0, 'hlig' 0, 'rlig' 0;
}

.resource-page ::selection {
  background: var(--bottle-green);
  color: var(--white);
}

.resource-page a:focus-visible,
.resource-page button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Zero specificity, so the component rules below set the spacing. */
:where(.resource-page) :where(h1, h2, h3) {
  font-weight: 700;
  margin: 0;
  max-width: none;
  color: inherit;
  text-wrap: balance;
}

:where(.resource-page) p {
  text-wrap: pretty;
}

/* ---------- Cover ---------- */

.resource-cover {
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--watermark-grey);
}

.resource-cover__inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

.resource-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem;
}

.resource-bar__mark {
  display: block;
  width: 2.25rem;
  height: auto;
}

.resource-bar__back {
  font-size: 0.9375rem;
  color: var(--wordmark-dark);
  text-decoration: none;
  text-underline-offset: 3px;
}

.resource-bar__back:hover {
  text-decoration: underline;
}

.resource-cover__title {
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: clamp(2rem, 8vw, 6rem) 0 0;
  max-width: 10ch;
}

.resource-page .resource-cover__title {
  max-width: 10ch;
}

.resource-cover__lede {
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  max-width: 36ch;
  margin: 2rem 0 0;
}

.resource-cover__date {
  display: block;
  font-size: 0.9375rem;
  margin-top: 1.25rem;
}

.resource-cover__wave {
  display: block;
  width: clamp(10rem, 22vw, 16rem);
  height: auto;
  margin-top: clamp(3rem, 8vw, 5rem);
}

/* ---------- Chapters ---------- */

.resource-chapter {
  padding: clamp(4rem, 10vw, 7.5rem) var(--gutter);
}

.resource-chapter__inner {
  max-width: 72rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

/* A page with no groups: one white chapter, answers only. */
.resource-chapter__inner--solo {
  max-width: 46rem;
}

@media (min-width: 60rem) {
  .resource-chapter__inner:not(.resource-chapter__inner--solo) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }

  .resource-chapter__title {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
}

.resource-chapter__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 11ch;
}

.resource-page .resource-chapter__title {
  max-width: 11ch;
}

.resource-chapter__body {
  min-width: 0;
}

.resource-chapter--white + .resource-chapter--white {
  border-top: 1px solid var(--watermark-grey);
}

.resource-chapter--aubergine {
  background: var(--aubergine);
  color: var(--white);
}

.resource-chapter--ink {
  background: var(--ink-blue);
  color: var(--white);
}

.resource-chapter--green {
  background: var(--bottle-green);
  color: var(--white);
}

.resource-chapter--aubergine ::selection,
.resource-chapter--ink ::selection,
.resource-chapter--green ::selection {
  background: var(--white);
  color: var(--ink-blue);
}

/* ---------- Questions and answers ---------- */

.resource-qa + .resource-qa {
  margin-top: 2.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--watermark-grey);
}

.resource-chapter--aubergine .resource-qa + .resource-qa,
.resource-chapter--ink .resource-qa + .resource-qa {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.resource-qa__q {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.25;
  margin-bottom: 0.75rem;
  max-width: 32ch;
}

.resource-page .resource-qa__q {
  max-width: 32ch;
}

.resource-qa__a p,
.resource-qa__a li {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 62ch;
}

.resource-qa__a p {
  margin: 0 0 1rem;
}

.resource-qa__a ul {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}

.resource-qa__a li {
  margin-bottom: 0.4rem;
}

.resource-qa__a a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Waitlist chapter ---------- */

.resource-join {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(8rem, 16vw, 11rem);
}

.resource-join .resource-chapter__title {
  position: static;
}

.resource-join__lede {
  font-size: 1.1875rem;
  line-height: 1.5;
  max-width: 40ch;
  margin: 0 0 1.25rem;
}

.resource-join .waitlist-form__input {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.6);
  font-size: 1.0625rem;
}

.resource-join .waitlist-form__input::placeholder {
  color: var(--white);
  opacity: 0.7;
}

.resource-join .waitlist-form__input:focus,
.resource-join .waitlist-form__input:invalid:not(:placeholder-shown) {
  border-bottom-color: var(--orange);
}

.resource-join .waitlist-form__submit {
  background: var(--white);
  color: var(--bottle-green);
  font-size: 1.0625rem;
}

.resource-join .waitlist-form__submit:hover {
  background: var(--watermark-grey);
}

.resource-join .waitlist-form__note {
  color: var(--white);
  font-size: 0.9375rem;
}

.resource-join .waitlist-confirm p {
  color: var(--white);
}

.resource-join__wave {
  position: absolute;
  left: var(--gutter);
  bottom: 2rem;
  width: clamp(10rem, 22vw, 16rem);
  height: auto;
}

/* ---------- The list at /resources/ ---------- */

.resource-index {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resource-index__item {
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--watermark-grey);
}

.resource-index__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.resource-index__date {
  display: block;
  font-size: 0.9375rem;
  margin: 0 0 0.5rem;
}

.resource-index__link {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bottle-green);
  text-decoration: underline 2px transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.25s var(--ease);
}

.resource-index__link:hover {
  text-decoration-color: var(--bottle-green);
}

.resource-index__summary {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 50ch;
  margin: 0.75rem 0 0;
}

/* ---------- Footer ---------- */

.resource-footer {
  border-top: 1px solid var(--watermark-grey);
  padding-inline: var(--gutter);
}

.resource-footer__inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.resource-footer__copy {
  font-size: 0.875rem;
  margin: 0;
}

.resource-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.resource-footer__links a {
  font-size: 0.875rem;
  color: var(--wordmark-dark);
  text-decoration: none;
}

.resource-footer__links a:hover {
  color: var(--orange);
}