/* Primitives share layout and accessible interaction, never a product palette. */
* {
  box-sizing:border-box
}

body {
  margin:0
}

img {
  max-width:100%;
  height:auto
}

a {
  color:inherit
}

.container {
  width:min(100% - 96px,1280px);
  margin-inline:auto
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:52px;
  padding:16px 22px;
  text-decoration:none;
  font-weight:700;
  line-height:1.2;
  transition:background .18s,transform .18s
}

.button:hover {
  transform:translateY(-2px)
}

.button[aria-disabled=true] {
  cursor:not-allowed;
  transform:none
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--focus-color,currentColor);
  outline-offset:5px
}

.skip-link {
  position:absolute;
  top:-100px;
  left:16px;
  z-index:10;
  padding:14px;
  background:white;
  color:#111
}

.skip-link:focus {
  top:16px
}

[hidden] {
  display:none!important
}

@media(max-width:700px) {
  .container {
    width:calc(100% - 40px)
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important
  }

  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }

}

:root {
  --orange:#ff8a00;
  --ink:#111111;
  --paper:#f7f6f2;
  --muted:#595953;
  --line:#d7d6ce;
  --focus-color:#111
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  font-family:'Inter','Arial',sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,p,figure {
  margin:0
}

p {
  line-height:1.65
}

h1,h2,h3 {
  font-family:'Space Grotesk','Arial',sans-serif
}

h2 {
  font-size:clamp(36px,3.9vw,56px);
  line-height:1.05;
  letter-spacing:-2.3px;
  font-weight:750
}

h3 {
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.8px
}

a {
  text-underline-offset:5px
}

.mono,.eyebrow {
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:10px;
  letter-spacing:1px;
  font-weight:700
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:32px;
  line-height:1.5
}

.square {
  width:7px;
  height:7px;
  background:var(--orange);
  flex:none
}

.muted {
  color:#73736a
}

.orange-text {
  color:#a95000
}

.header {
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:30px
}

.brand {
  font-size:43px;
  font-weight:800;
  letter-spacing:-3px;
  line-height:.85;
  text-decoration:none
}

.brand>span {
  color:var(--orange)
}

.brand small {
  font:8px/1.5 'Courier New',monospace;
  letter-spacing:1px;
  display:block;
  margin-top:9px
}

.header nav {
  display:flex;
  gap:30px;
  font-size:12px
}

.header nav a {
  text-decoration:none
}

.header nav a:hover {
  text-decoration:underline
}

.button-dark {
  background:var(--ink);
  color:white
}

.button-dark:hover {
  background:#34342e
}

.button-dark:focus-visible {
  outline-color:var(--ink)
}

.button-dark[aria-disabled=true] {
  background:#383832;
  color:#fff
}

.button span {
  font-size:23px
}

.button-small {
  min-height:43px;
  font-size:11px;
  padding:12px 18px
}

.hero {
  display:grid;
  grid-template-columns:1.28fr 1fr;
  gap:48px;
  align-items:center;
  padding-top:60px;
  padding-bottom:70px
}

.hero h1 {
  font-size:clamp(45px,5.6vw,82px);
  line-height:.99;
  letter-spacing:-4.4px;
  font-weight:850;
  margin:0 0 27px
}

.hero h1>span {
  display:inline-block;
  position:relative;
  z-index:0
}

.hero h1>span:after {
  content:'';
  position:absolute;
  bottom:3px;
  left:-3px;
  right:-3px;
  height:20%;
  z-index:-1;
  background:var(--orange)
}

.hero-lead {
  max-width:435px;
  font-size:16px;
  color:#44443e;
  margin-bottom:30px
}

.hero .button {
  font-size:11px
}

.hero-note {
  font-size:11px;
  color:var(--muted);
  margin-top:14px
}

.hero-visual {
  position:relative
}

.editorial-art {
  position:relative;
  aspect-ratio:4/5;
  background:var(--orange);
  overflow:hidden;
  padding:25px
}

.art-collection {
  position:relative;
  font:8px/1.4 'Courier New',monospace;
  letter-spacing:1px;
  max-width:145px
}

.gear {
  position:absolute;
  width:295px;
  height:295px;
  right:-97px;
  top:-92px;
  background:var(--ink);
  border-radius:50%;
  border:20px dashed var(--orange)
}

.gear>div {
  position:absolute;
  inset:65px;
  border:20px solid var(--orange);
  border-radius:50%
}

.parallel-lines {
  position:absolute;
  left:0;
  right:0;
  top:37%;
  height:28px;
  background:repeating-linear-gradient(0deg,var(--ink) 0 2px,transparent 2px 6px)
}

.art-title {
  position:absolute;
  left:24px;
  right:24px;
  top:26%;
  letter-spacing:-3px;
  line-height:.94
}

.art-title>span {
  display:block;
  font-size:clamp(30px,4vw,54px);
  font-weight:500
}

.art-title>span+span {
  font-size:clamp(25px,3.2vw,43px);
  margin:9px 0 29px;
  background:var(--orange);
  width:max-content;
  padding-right:6px
}

.art-title strong {
  display:block;
  font-size:clamp(33px,4vw,57px);
  font-weight:900;
  letter-spacing:-2.5px
}

.art-title>b {
  display:block;
  font-size:clamp(92px,12vw,170px);
  letter-spacing:-9px;
  line-height:.85;
  margin-top:5px
}

.art-title>b>span {
  font-weight:400
}

.art-footer {
  position:absolute;
  bottom:22px;
  left:25px;
  right:25px;
  display:flex;
  justify-content:space-between;
  align-items:end
}

.art-footer>span:first-child {
  font:9px/1.5 'Courier New',monospace;
  letter-spacing:1px
}

.art-footer>span:last-child {
  font-size:54px;
  line-height:1
}

.hero-visual figcaption {
  font:8px/1.4 'Courier New',monospace;
  letter-spacing:1px;
  padding-top:14px;
  color:var(--muted)
}

.official-cover {
  display:block;
  width:100%;
  max-height:610px;
  object-fit:contain
}

.connection-strip {
  background:var(--ink);
  color:var(--paper);
  padding:29px 0
}

.connection-strip .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px
}

.connection-strip span {
  font-size:clamp(19px,2.2vw,33px);
  font-weight:700;
  letter-spacing:-1px
}

.connection-strip i {
  font-size:28px;
  font-style:normal;
  color:var(--orange)
}

.connection-strip b {
  color:var(--orange);
  font:13px 'Courier New',monospace;
  margin-left:40px
}

.section {
  padding-top:88px;
  padding-bottom:88px
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px
}

.body-copy {
  font-size:16px;
  color:#45453f
}

.body-copy p+p {
  margin-top:22px
}

.side-note {
  border-left:3px solid var(--orange);
  padding-left:18px;
  font-size:14px;
  font-weight:700;
  color:var(--ink)
}

.beyond {
  background:var(--ink);
  color:var(--paper);
  --focus-color:var(--orange)
}

.beyond-heading {
  display:flex;
  justify-content:space-between;
  gap:20px
}

.beyond-heading>.mono {
  color:var(--orange)
}

.beyond h2 {
  font-size:clamp(46px,5.5vw,76px);
  letter-spacing:-3px;
  margin-bottom:25px
}

.beyond h2 span {
  color:var(--orange)
}

.beyond p:not(.eyebrow) {
  max-width:400px;
  font-size:15px;
  color:#cccac1
}

.connection-map {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid #53534a;
  border-left:1px solid #53534a;
  position:relative
}

.connection-map:after {
  content:'+';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:48px;
  color:var(--orange);
  line-height:1;
  background:var(--ink);
  padding:0 8px
}

.connection-map>div {
  border-right:1px solid #53534a;
  border-bottom:1px solid #53534a;
  padding:23px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:13px
}

.connection-map span {
  font:10px 'Courier New',monospace;
  color:var(--orange)
}

.connection-map strong {
  font-size:22px;
  letter-spacing:-.6px
}

.connection-map small {
  font-size:12px;
  color:#c4c3ba
}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:end;
  margin-bottom:48px
}

.section-heading>p {
  max-width:360px;
  font-size:15px;
  color:var(--muted)
}

.topic-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px
}

.topic-grid article {
  border-top:2px solid var(--ink);
  padding-top:24px
}

.topic-mark {
  display:block;
  height:84px;
  font-size:66px;
  font-weight:400;
  line-height:1
}

.topic-grid .mono {
  margin:17px 0 11px;
  color:var(--muted)
}

.topic-grid h3 {
  margin-bottom:15px
}

.topic-grid article>p:last-child {
  font-size:14px;
  color:var(--muted)
}

.rings {
  width:55px;
  height:55px;
  margin:14px 0 15px;
  border:2px solid var(--ink);
  border-radius:50%;
  position:relative
}

.rings:before,.rings:after {
  content:'';
  position:absolute;
  border:2px solid var(--ink);
  border-radius:50%;
  inset:6px
}

.rings:after {
  inset:14px;
  background:var(--orange)
}

.content-note {
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:34px
}

.chapters {
  margin-top:38px;
  border-top:1px solid var(--line);
  padding-top:28px
}

.chapter-group {
  margin-top:26px
}

.chapter-group ul {
  list-style:none;
  padding:0
}

.chapter-group li {
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:14px
}

.chapter-group li span {
  font:11px 'Courier New',monospace;
  margin-right:16px
}

.example {
  background:#eae9e2
}

.process {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #aaa99f;
  border-bottom:1px solid #aaa99f
}

.process li {
  padding:26px 32px 30px 0;
  position:relative
}

.process li+li {
  padding-left:32px;
  border-left:1px solid #aaa99f
}

.process-number {
  font:10px 'Courier New',monospace;
  letter-spacing:1px
}

.signal-symbol,.investigate-symbol {
  height:110px;
  font-size:100px;
  line-height:1;
  color:#a95000;
  margin:22px 0 14px
}

.bars {
  height:110px;
  display:flex;
  align-items:end;
  gap:10px;
  margin:22px 0 14px;
  padding-bottom:10px
}

.bars i {
  display:block;
  width:18px;
  background:var(--ink);
  height:30%
}

.bars i:nth-child(2) {
  height:45%
}

.bars i:nth-child(3) {
  height:38%
}

.bars i:nth-child(4) {
  height:65%;
  background:var(--orange)
}

.bars i:nth-child(5) {
  height:85%;
  background:var(--orange)
}

.bars i:nth-child(6) {
  height:53%
}

.bars i:nth-child(7) {
  height:36%
}

.process h3 {
  margin-bottom:14px
}

.process p {
  font-size:14px;
  color:var(--muted)
}

.example-note {
  font:10px/1.7 'Courier New',monospace;
  color:var(--muted);
  margin-top:22px;
  max-width:830px
}

.audience .body-copy {
  max-width:350px;
  margin-top:25px
}

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

.audience-list li {
  display:flex;
  gap:23px;
  padding:20px 0;
  border-top:1px solid var(--line)
}

.audience-list li:last-child {
  border-bottom:1px solid var(--line)
}

.audience-list li>span {
  font:10px 'Courier New',monospace;
  padding-top:4px
}

.audience-list h3 {
  font-size:20px;
  margin-bottom:7px
}

.audience-list p {
  font-size:14px;
  color:var(--muted)
}

.product-section {
  background:white
}

.product-grid {
  align-items:center
}

.product-art {
  background:var(--paper);
  padding:40px;
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center
}

.product-art img {
  max-width:300px;
  width:100%;
  height:auto
}

.product-placeholder {
  background:var(--orange);
  width:290px;
  aspect-ratio:3/4;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:25px
}

.product-placeholder strong {
  font-size:42px;
  font-weight:850;
  line-height:.94;
  letter-spacing:-2px
}

.product-placeholder strong>span {
  font-size:80px;
  line-height:1
}

.product-placeholder small {
  font:8px/1.5 'Courier New',monospace;
  letter-spacing:1px
}

.format-label {
  font:10px 'Courier New',monospace;
  letter-spacing:1px;
  display:block;
  margin-bottom:25px
}

.product-copy h2 {
  margin-bottom:25px
}

.product-subtitle {
  font-size:21px;
  line-height:1.45;
  letter-spacing:-.3px;
  margin-bottom:22px
}

.product-copy>p:not(.product-subtitle) {
  font-size:15px;
  color:var(--muted);
  margin-bottom:25px
}

.text-link {
  font-size:12px;
  font-weight:700
}

.preview-section {
  margin-top:50px;
  border-top:1px solid var(--line);
  padding-top:30px
}

.preview-section>p {
  font-size:14px;
  color:var(--muted);
  margin-top:10px
}

.previews {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-top:25px
}

.previews img {
  display:block;
  border:1px solid var(--line)
}

.previews figcaption {
  font-size:12px;
  margin-top:14px
}

.collection {
  border-top:1px solid var(--line)
}

.collection-grid {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  align-items:center;
  gap:90px
}

.collection-word {
  font-size:clamp(80px,11vw,156px);
  font-weight:850;
  letter-spacing:-10px;
  line-height:1
}

.collection-word>span {
  color:var(--orange)
}

.collection h2 {
  font-size:clamp(31px,3.2vw,45px);
  margin-bottom:25px
}

.collection p:not(.eyebrow):not(.mono) {
  font-size:15px;
  color:var(--muted)
}

.collection-note {
  margin-top:25px;
  font-size:9px
}

.offer {
  background:var(--orange);
  padding:75px 0
}

.offer-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:80px;
  align-items:center
}

.offer h2 {
  font-size:clamp(43px,4.8vw,69px);
  letter-spacing:-3px;
  margin-bottom:25px
}

.offer h2>span {
  border-bottom:3px solid var(--ink)
}

.offer-grid>div>p:last-child {
  font-size:15px;
  max-width:350px
}

.offer-box {
  border-left:1px solid #1116;
  padding-left:45px
}

.offer-box h3 {
  font-size:25px;
  margin-top:15px;
  max-width:320px
}

.offer-cover {
  width:85px;
  height:auto;
  float:right;
  margin:0 0 18px 20px
}

.offer .price {
  font-size:24px;
  font-weight:700;
  margin:28px 0;
  letter-spacing:-.6px
}

.offer .button {
  width:100%;
  font-size:12px
}

.offer-status,.offer-footnote {
  font-size:11px;
  margin-top:16px;
  line-height:1.6
}

.offer-footnote {
  margin-top:9px
}

.faq details {
  border-top:1px solid var(--line)
}

.faq details:last-child {
  border-bottom:1px solid var(--line)
}

.faq summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:16px;
  font-weight:700;
  padding:24px 0;
  line-height:1.4
}

.faq summary::-webkit-details-marker {
  display:none
}

.faq summary>span {
  font-size:24px;
  line-height:1;
  font-weight:400
}

.faq details[open] summary>span {
  transform:rotate(45deg)
}

.faq details>p {
  font-size:14px;
  color:var(--muted);
  padding-bottom:24px
}

.footer {
  background:var(--ink);
  color:var(--paper);
  padding:38px 0 25px;
  --focus-color:var(--orange)
}

.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:32px
}

.footer-top .brand {
  font-size:48px
}

.footer .brand small {
  font-size:7px
}

.footer-bottom {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  border-top:1px solid #53534a;
  padding-top:22px;
  font-size:10px;
  color:#cccac1
}

.footer nav {
  display:flex;
  gap:15px
}

.noscript {
  padding:20px;
  font-size:14px;
  background:white;
  color:#111;
  text-align:center
}

@media(min-width:1600px) {
  .hero h1 {
    font-size:85px
  }

  .art-title strong {
    font-size:57px
  }

  .art-title>b {
    font-size:170px
  }

}

@media(max-width:1050px) {
  .container {
    width:calc(100% - 64px)
  }

  .hero {
    gap:30px
  }

  .hero h1 {
    font-size:clamp(44px,5.5vw,66px);
    letter-spacing:-3px
  }

  .split {
    gap:45px
  }

  .offer-grid {
    gap:45px
  }

  .section-heading {
    gap:35px
  }

  .collection-grid {
    gap:45px
  }

  .collection-word {
    letter-spacing:-7px
  }

  .topic-grid {
    gap:24px
  }

  .process li+li {
    padding-left:22px
  }

  .art-title strong {
    font-size:4vw
  }

  .art-title>b {
    font-size:12vw
  }

  .art-title>span+span {
    margin-bottom:20px
  }

  .connection-map>div {
    padding:18px
  }

  .connection-map small {
    font-size:11px
  }

}

@media(max-width:700px) {
  .container {
    width:calc(100% - 40px)
  }

  .header {
    height:87px;
    gap:15px
  }

  .header nav {
    display:none
  }

  .brand {
    font-size:36px
  }

  .brand small {
    font-size:6px;
    letter-spacing:.7px
  }

  .button-small {
    font-size:10px;
    padding:11px 14px;
    gap:17px;
    min-height:42px
  }

  .hero {
    grid-template-columns:1fr;
    gap:34px;
    padding-top:35px;
    padding-bottom:40px
  }

  .hero h1 {
    font-size:clamp(38px,9.5vw,65px);
    letter-spacing:-2.7px;
    line-height:1.03
  }

  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.7px;
    margin-bottom:22px
  }

  .hero-lead {
    font-size:15px;
    margin-bottom:23px
  }

  .hero-visual {
    max-width:440px;
    width:100%;
    margin:auto
  }

  .editorial-art {
    aspect-ratio:4/4.5
  }

  .art-title {
    top:23%
  }

  .art-title>span {
    font-size:45px
  }

  .art-title>span+span {
    font-size:35px;
    margin-bottom:23px
  }

  .art-title strong {
    font-size:clamp(38px,10.5vw,53px)
  }

  .art-title>b {
    font-size:clamp(108px,30vw,150px);
    letter-spacing:-7px
  }

  .gear {
    width:240px;
    height:240px;
    right:-100px;
    top:-90px
  }

  .gear>div {
    inset:50px;
    border-width:14px
  }

  .art-footer>span:last-child {
    font-size:40px
  }

  .hero-visual figcaption {
    font-size:7px
  }

  .connection-strip {
    padding:22px 0
  }

  .connection-strip .container {
    gap:8px
  }

  .connection-strip span {
    font-size:clamp(12px,3.7vw,20px);
    letter-spacing:-.5px
  }

  .connection-strip i {
    font-size:19px
  }

  .connection-strip b {
    display:none
  }

  .section {
    padding-top:54px;
    padding-bottom:54px
  }

  .eyebrow {
    font-size:9px;
    margin-bottom:24px
  }

  .split,.product-grid,.collection-grid,.offer-grid {
    grid-template-columns:1fr;
    gap:27px
  }

  h2 {
    font-size:36px;
    letter-spacing:-1.7px
  }

  .body-copy {
    font-size:15px
  }

  .beyond-heading>.mono {
    display:none
  }

  .beyond h2 {
    font-size:51px;
    letter-spacing:-2px
  }

  .connection-map {
    margin-top:5px
  }

  .connection-map>div {
    min-height:135px;
    padding:18px
  }

  .section-heading {
    display:block;
    margin-bottom:30px
  }

  .section-heading>p {
    margin-top:22px;
    font-size:14px;
    max-width:none
  }

  .topic-grid {
    grid-template-columns:1fr;
    gap:28px
  }

  .topic-grid article {
    position:relative;
    padding-left:74px;
    min-height:125px;
    padding-top:18px
  }

  .topic-mark {
    position:absolute;
    left:0;
    top:24px;
    font-size:58px;
    width:50px
  }

  .topic-grid .mono {
    margin-top:0
  }

  .topic-grid h3 {
    font-size:22px
  }

  .topic-mark.rings {
    height:48px;
    margin:0
  }

  .topic-grid article>p:last-child {
    font-size:14px
  }

  .process {
    grid-template-columns:1fr
  }

  .process li,.process li+li {
    padding:24px 0 25px;
    border-left:0
  }

  .process li+li {
    border-top:1px solid #aaa99f
  }

  .signal-symbol,.investigate-symbol {
    height:75px;
    font-size:80px;
    margin:18px 0 15px
  }

  .bars {
    height:75px;
    margin:18px 0 15px
  }

  .process p {
    max-width:360px
  }

  .example-note {
    font-size:9px
  }

  .audience .body-copy {
    margin-top:22px
  }

  .audience-list {
    margin-top:5px
  }

  .product-art {
    min-height:420px;
    padding:30px
  }

  .product-placeholder {
    max-width:260px
  }

  .product-placeholder strong {
    font-size:37px
  }

  .product-placeholder strong>span {
    font-size:72px
  }

  .product-copy {
    padding-top:10px
  }

  .product-subtitle {
    font-size:19px
  }

  .collection-word {
    font-size:110px;
    letter-spacing:-8px
  }

  .collection h2 {
    font-size:33px
  }

  .collection-note {
    font-size:8px
  }

  .offer {
    padding:50px 0
  }

  .offer h2 {
    font-size:42px;
    letter-spacing:-2.2px
  }

  .offer-box {
    border-left:0;
    border-top:1px solid #1116;
    padding:25px 0 0
  }

  .offer-box h3 {
    font-size:24px
  }

  .offer-grid {
    gap:28px
  }

  .offer .price {
    margin:24px 0
  }

  .faq summary {
    font-size:15px;
    padding:21px 0
  }

  .footer-top .brand {
    font-size:42px
  }

  .footer .brand small {
    font-size:6px;
    max-width:185px
  }

  .footer-top .text-link {
    font-size:10px
  }

  .footer-bottom {
    font-size:9px
  }

  .previews {
    grid-template-columns:1fr
  }

}

.split>* {
  min-width:0
}

.product-placeholder {
  width:min(290px,100%)
}

.arrow-icon {
  display:inline-block;
  width:24px;
  height:24px;
  vertical-align:middle;
  flex:none
}

.topic-mark>.arrow-icon {
  width:60px;
  height:60px
}

.investigate-symbol>.arrow-icon {
  width:90px;
  height:90px
}

.art-footer>span:last-child>.arrow-icon {
  width:44px;
  height:44px
}

.text-link>.arrow-icon {
  width:17px;
  height:17px;
  margin-left:7px
}

@media(max-width:700px) {
  .product-placeholder strong {
    font-size:clamp(30px,9vw,37px)
  }

  .product-placeholder strong>span {
    font-size:clamp(60px,18vw,72px)
  }

  .investigate-symbol>.arrow-icon {
    width:75px;
    height:75px
  }

}

#chapter-groups {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 48px
}

.chapter-group h4 {
  font:11px/1.6 "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0 0 14px
}

.chapter-group li {
  display:flex;
  gap:12px;
  align-items:baseline;
  line-height:1.6
}

.chapter-group li span {
  flex:none;
  margin-right:0
}

@media(max-width:700px) {
  #chapter-groups {
    grid-template-columns:1fr;
    gap:4px
  }

}