.page { --charcoal: #1A181B; --col: min(760px, 100% - 2 * var(--mx)); }
.page ::selection { background: var(--red); color: var(--bone); }


.t1-arch { position: relative; display: grid; justify-items: center; padding-top: var(--s2);
  background: radial-gradient(ellipse 34% 90% at 50% 100%, var(--charcoal), var(--ink) 75%); }   
.t1-arch::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge) 22%, var(--edge) 78%, transparent); }   
.sv-arch { width: 220px; overflow: hidden; }   


.t1-col { width: var(--col); margin-inline: auto; padding-bottom: var(--s4); }
.t1-h { margin-top: var(--s3); }
.t1-line { margin: var(--s1) auto 0; max-width: 54ch; text-wrap: pretty; }


.t1-secs { margin-top: var(--s3); counter-reset: sec; border-top: 1px solid var(--hair); }
.t1-secs li { counter-increment: sec; display: grid; grid-template-columns: 64px 1fr; column-gap: var(--s1); padding-block: var(--s2); border-bottom: 1px solid var(--hair); }
.t1-secs li::before { content: counter(sec); grid-row: 1 / span 2; font: 700 var(--h2)/0.8 var(--f-head); color: var(--bone); }   
.t1-secs h2, .t1-secs p { grid-column: 2; }
.t1-secs p { margin-top: 8px; max-width: 62ch; text-wrap: pretty; }

@container site (max-width: 720px) {
  .t1-arch { background: radial-gradient(ellipse 60% 90% at 50% 100%, var(--charcoal), var(--ink) 75%); }
  .sv-arch { width: 160px; }
  .t1-h { font-size: var(--h1); }
  .t1-secs li { grid-template-columns: 40px 1fr; column-gap: 8px; }
}