/* Reader and collection pages carry the colour of their own pillar. */
body[data-brand] .standalone-page {
  --brand-sheet: color-mix(in srgb, var(--pillar-color) 15%, #fffdf8);
  --brand-wash: color-mix(in srgb, var(--pillar-color) 27%, #fffdf8);
  --brand-rule: color-mix(in srgb, var(--pillar-color) 55%, #a8998c);
}

body[data-brand] .pillar-collection {
  --chapter-paper: var(--brand-sheet);
  --chapter-ink: var(--brand-ink);
  --chapter-rubric: #5e493d;
  --chapter-rule: var(--brand-rule);
}
body[data-brand] .collection-opening,
body[data-brand] .reader-front {
  background: var(--brand-sheet);
  border-color: var(--brand-rule);
}

body[data-brand] .collection-opening::after,
body[data-brand] .reader-front::before,
body[data-brand] :is(.chapter-partner,.chapter-stadium) .chapter-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* A slightly overprinted, oversized mark balances the typeset introduction. */
body[data-brand] .collection-opening::after {
  inset: -3.7rem -.6rem auto auto;
  width: clamp(12rem, 23vw, 23rem);
  aspect-ratio: 1;
  background: var(--pillar-color);
  mask: var(--pillar-shape) center / contain no-repeat;
  transform: none;
  opacity: .66;
}

body[data-brand] .collection-identity img,
body[data-brand] .reader-pillar img,
body[data-brand] .chapter-heading .chapter-meta img {
  display: block;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

body[data-brand] .collection-lead .collection-story {
  overflow: hidden;
  background: var(--pillar-color);
  border-radius: .95rem;
}
body[data-brand] .collection-lead .collection-story-body > p,
body[data-brand] .collection-lead .collection-action {
  color: var(--brand-ink);
}
body[data-brand] .collection-lead .collection-action {
  border-color: var(--brand-ink);
}
body[data-brand] .collection-empty {
  background: var(--brand-wash);
}
body[data-brand] .collection-photo {
  border-radius: .55rem;
}
body[data-brand] .collection-lead .collection-photo {
  border-radius: 0;
}

body[data-brand] .reader-front::before {
  background: var(--pillar-color);
  mask: var(--pillar-shape) center / contain no-repeat;
  width: min(34vw, 24rem);
  aspect-ratio: 1;
  top: -3.4rem;
  right: -1.4rem;
  opacity: .62;
}
body[data-brand] .reader-hero h1,
body[data-brand] .reader-pillar,
body[data-brand] .reader-copy h2,
body[data-brand] .reader-related h2,
body[data-brand] .reader-note h2,
body[data-brand] .reader-actions a,
body[data-brand] .reader-share,
body[data-brand] .reader-related-card {
  color: var(--brand-ink);
}
body[data-brand] .reader-photo > img {
  border-radius: .8rem;
  box-shadow: .36rem .36rem 0 var(--pillar-color);
}
body[data-brand] .reader-photo figcaption { margin-top: .8rem; }
body[data-brand] .reader-note {
  background: var(--brand-wash);
  border-top: .25rem solid var(--pillar-color);
}
body[data-brand] .reader-note :is(p,summary) {color: #584a40;}
body[data-brand] .reader-related {
  background: var(--brand-sheet);
  border-color: var(--brand-rule);
}
body[data-brand] .reader-related-card,
body[data-brand] .reader-note .reader-terms {border-color: var(--brand-rule);}
body[data-brand] .reader-related-card small {color: #625245;}

body[data-brand] :is(.chapter-partner,.chapter-stadium) .chapter-heading {
  background: var(--brand-wash);
  color: var(--brand-ink);
}
body[data-brand] :is(.chapter-partner,.chapter-stadium) .chapter-heading::before {
  width: clamp(14rem, 33vw, 32rem);
  aspect-ratio: 1;
  inset: -.8rem -2rem auto auto;
  mask: var(--pillar-shape) center / contain no-repeat;
  background: var(--pillar-color);
  opacity: .85;
}
body[data-brand] :is(.chapter-partner,.chapter-stadium) .chapter-heading :is(h1,.chapter-meta,.chapter-deck,p),
body[data-brand] :is(.chapter-partner,.chapter-stadium) .chapter-section h2 {
  color: var(--brand-ink);
}
body[data-brand] .chapter-heading .chapter-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
}
body[data-brand] .chapter-heading .recap-facts {border-color: var(--brand-rule);}
body[data-brand] .chapter-heading .recap-facts :is(dt,dd) {color: #57473d;}
body[data-brand] .chapter-partner :is(.primary, button[aria-pressed=true]) {
  color: var(--brand-ink);
  background: var(--pillar-color);
  border-color: var(--brand-ink);
}
body[data-brand] .chapter-partner .chapter-note {
  color: var(--brand-ink);
  background: var(--brand-wash);
  border-color: var(--pillar-color);
}
@media (max-width: 47rem) {
  body[data-brand] .collection-opening::after { inset: -3rem -3rem auto auto; width: 10rem; }
  body[data-brand] .reader-front::before { width: 11rem; top: -3rem; right: -3rem; }
  body[data-brand] :is(.chapter-partner,.chapter-stadium) .chapter-heading::before {
    width: 12rem; top: -2.15rem; right: -3.8rem;
  }
}

/* The values belong with the introduction, then resolve into a question in the story. */
body[data-brand] .collection-intro .brand-values {
  width: fit-content;
  max-width: 100%;
  margin: 1rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--brand-rule);
  font: 600 .78rem/1.5 DM, Arial, sans-serif;
  color: #514036;
}
body[data-brand] .brand-practice {
  margin: 1.8rem 0;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.15rem, 2.5vw, 2rem);
  background: var(--brand-wash);
  color: var(--brand-ink);
  border-inline-start: .3rem solid var(--pillar-color);
  border-radius: 0 .65rem .65rem 0;
}
body[data-brand] .brand-practice .brand-practice-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: #594437;
  font: 650 .72rem/1.45 DM, Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-brand] .brand-practice-label img {width: 1.5rem; height: 1.5rem; object-fit: contain;}
body[data-brand] .brand-practice h2 {
  margin: .6rem 0 .35rem;
  color: var(--brand-ink);
  font: 400 clamp(1.5rem, 2.25vw, 2rem)/1.09 var(--serif);
  letter-spacing: -.025em;
}
body[data-brand] .brand-practice p:last-child {
  max-width: 53ch;
  margin: .4rem 0 0;
  color: #503f34;
  font: 400 1rem/1.55 DM, Arial, sans-serif;
}
body[data-brand] .collection-intro > p:nth-child(2):not(.brand-values) {
  margin-top: .65rem;
  font: italic clamp(1.35rem, 2.1vw, 2rem)/1.24 var(--serif);
}
body[data-brand] .standalone-page :is(.chapter-partner,.chapter-stadium).chapter-reader {
  width: 100%;
  max-width: none;
  padding: 0 0 clamp(3.5rem, 6vw, 6.5rem);
}
body[data-brand] .standalone-page :is(.chapter-partner,.chapter-stadium) .chapter-heading {
  margin: 0;
  padding: clamp(2.8rem, 5.4vw, 5rem) max(var(--reader-gutter), calc((100% - var(--reader-width)) / 2));
}
body[data-brand] .chapter-reader .chapter-heading .brand-values {
  width: fit-content;
  margin-top: 1rem;
  padding-top: .55rem;
  border-top: 1px solid var(--brand-rule);
  font: 600 .78rem/1.5 DM, Arial, sans-serif;
}
.chapter-reader.chapter-partner .chapter-heading .primary { margin-top: 1.15rem; }
.chapter-reader.chapter-partner .chapter-heading .chapter-footnote {
  margin-top: .45rem;
  font-size: .8rem;
}