[data-opener] { padding: 3.6rem clamp(1.2rem, 6vw, 6rem) 3.4rem; background: var(--ground); }
[data-opener] > div { max-width: 60rem; margin-inline: auto; }
[data-stage] { margin-bottom: 1.1rem; font-size: 1rem; }
[data-deck] { max-width: 58ch; font-size: 1.22rem; line-height: 1.5; margin-block-end: 1.2rem; }
[data-kind="opening"] [data-opener] { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
[data-kind="opening"] h1 { max-width: 17ch; }
[data-kind="opening"] [data-opener] > div { margin: 0; }
article > section { padding: 3.5rem clamp(1.2rem, 6vw, 6rem); background: var(--stone); }
article > section:nth-of-type(2) { background: var(--clay); }
article > section:nth-of-type(3) { background: #c2c8cc; }
article > section > :is(p, ul, h2, dl) { max-width: 68ch; margin-inline: auto; }
article > section > h2 { width: min(100%, 38rem); max-width: 31rem; margin-inline: auto; }
article > section > ul { padding-inline-start: 1.4rem; }
article > section > p:last-child { margin-bottom: 0; }
article > [data-chapter-body] { background: var(--ground); padding-block-start: 2.7rem; }
[data-chapter-body] > section { max-width: 74ch; margin: 1.3rem auto 0; padding: 1.9rem 2rem; border-radius: 24px; background: var(--stone); }
[data-chapter-body] > section:nth-of-type(2) { background: var(--clay); }
[data-chapter-body] > section:nth-of-type(3) { background: #c2c8cc; }
[data-chapter-body] h3 { margin-top: 0; font-size: 1.75rem; line-height: 1.2; max-width: 29ch; }
[data-chapter-body] > section > p:last-child { margin-bottom: 0; }
article > section > [data-pill] { margin-inline: .3rem; }
article > [data-recap] { background: var(--ochre); padding-block: 2.8rem; }
[data-recap] p { font-size: 1.22rem; line-height: 1.5; }
[data-ground="separate"] [data-opener] { background: var(--clay); }
[data-ground="check"] [data-opener] { background: var(--leaf); }
[data-ground="ask"] [data-opener] { background: #c5bca5; }
[data-ground="review"] [data-opener] { background: #bdc5c8; }
figure[data-paper] { position: relative; isolation: isolate; margin: 0; padding: 1.25rem; border-radius: 26px; overflow: hidden; background: var(--clay); }
figure[data-paper]::before { content: ""; position: absolute; inset: 15% 9% 28% 18%; border-radius: 58% 42% 66% 34%; background: var(--ochre); transform: rotate(-16deg); z-index: -1; }
figure[data-paper]::after { content: ""; position: absolute; width: 58%; height: 30%; bottom: 22%; left: 9%; border-radius: 80% 20% 60% 40%; background: var(--leaf); transform: rotate(22deg); z-index: -1; }
figure[data-paper] img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 20px; font-size: 1rem; color: var(--ink); }
figure[data-paper] figcaption { margin-top: .8rem; line-height: 1.4; }
section > figure[data-paper] { max-width: 45rem; margin: 2rem auto 0; background: var(--ground); }
[data-reading] { margin-block: 1.8rem 0; }
[data-reading] dt { margin-top: 1.15rem; font-weight: 600; }
[data-reading] a { display: flex; align-items: center; min-height: 48px; padding: .6rem 1rem; border-radius: 24px; background: var(--milk); overflow-wrap: anywhere; }
[data-reading] a:hover { background: var(--ochre); }
[data-reading] dd { margin: .45rem 1rem 0; max-width: 61ch; }
:target { scroll-margin-block-start: 1.5rem; }
:is(h2, h3)[tabindex="-1"]:focus { outline: none; }

@media (min-width: 1500px) {
  [data-kind="opening"] [data-opener] { padding-inline: max(4rem, calc((100vw - 80rem) / 2)); }
}
@media (max-width: 950px) {
  [data-kind="opening"] [data-opener] { gap: 1.6rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  figure[data-paper] { padding: .9rem; }
}
@media (max-width: 700px) {
  [data-opener] { padding-block: 2rem 2.5rem; }
  [data-kind="opening"] [data-opener] { display: block; }
  [data-kind="opening"] figure { margin-top: 2rem; max-width: 30rem; }
  article > section { padding-block: 2.5rem; }
  article > section > h2 { margin-inline: 0; }
  [data-chapter-body] > section { padding: 1.4rem 1.2rem; }
  [data-deck] { font-size: 1.11rem; }
  figure[data-paper] img { aspect-ratio: 4 / 3; }
}