/* The Crew page: as wide as the homepage and /live, the site's paper and ink. Prose keeps its
   reading width inside the grid; lists and small blocks become columns. */
.cp main { max-width: 1160px; }

/* The hero: the promise on the left, the strip's four facts on the right. */
.cp-hero { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 4.5rem; align-items: start; padding: .6rem 0 3.4rem; border-bottom: 1px solid var(--ink); }
.cp-intro { padding-top: .4rem; }
.cp-intro h1 { font-size: 2.45em; line-height: 1.1; margin: 0 0 1.1rem; }
.cp-intro .lede { font-size: 1.12em; max-width: 33em; }
.cp-intro .btn { margin-top: .5rem; }
.cp-facts .facts { grid-template-columns: 1fr; gap: 0; margin: .4rem 0 .5rem; padding: 0; border-top: 0; }
.cp-facts .facts > div { padding: .8rem 0; border-top: 1px solid var(--rule); }
.cp-facts .facts > div:first-child { border-top-color: var(--ink); }
.cp-facts .facts .v { font-size: 1.4em; margin: 0 0 .2rem; }
.cp-facts .facts .s { margin: 0; }
.cp-facts .note { margin: .5rem 0 0; }

/* The presentation spans the grid. */
.cp .deck-band { width: auto; margin: 2.6rem 0 0; }
.cp .deck-intro, .cp .deck-static { margin-left: 0; margin-right: 0; }

/* Prose keeps its reading width. */
.cp .part > p, .cp .part > .note, .cp .part > h3 { max-width: 37em; }
.cp .part > ul.l:not(.cp-grid3) { max-width: 44em; }

/* Points as a grid: three columns, each under a thin rule. */
.cp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 2.2rem; margin: .6rem 0 1.2rem; }
ul.l.cp-grid3 li { margin: 0; padding: .75rem 0 0; border-top: 1px solid var(--rule); font-size: .95em; }
ul.l.cp-grid3 li::before { content: none; }

/* The ladder (the standard) and the four weeks (Crew), each in one band. */
.cp .cp-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 1.6rem; margin: .6rem 0 1.3rem; max-width: 52em; }
.cp .cp-weeks4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem 1.6rem; margin: .6rem 0 1.3rem; }

/* The close: the page's rule, its words at reading width. */
.cp .close > * { max-width: 40em; }

@media (max-width: 960px) {
    .cp-grid3 { grid-template-columns: 1fr 1fr; }
    .cp .cp-weeks4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .cp-hero { grid-template-columns: 1fr; }
    .cp-hero { gap: 1.6rem; }
}
@media (max-width: 640px) {
    .cp-intro h1 { font-size: 1.9em; }
    .cp-grid3, .cp .cp-ladder, .cp .cp-weeks4 { grid-template-columns: 1fr; }
    .cp-facts .facts .v { font-size: 1.25em; }
}

/* The proof under "Why a Crew": a strip of four, then its note. */
.cp-proof { margin: 1.4rem 0 .4rem; }

/* The standard: the technical section stays closed until a reader opens it. */
.st-tech > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .9rem; min-height: 44px; cursor: pointer; font-size: 1.3em; line-height: 1.25; list-style: none; }
.st-tech > summary::-webkit-details-marker { display: none; }
.st-tech > summary::after { content: "+"; font: 1.2rem/1 var(--sans); margin-left: auto; color: var(--muted); }
.st-tech[open] > summary::after { content: "–"; }
.st-tech > summary .n { font: .875rem/1 var(--sans); color: var(--faint); letter-spacing: .06em; }
.st-tech > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.st-for { font: .875rem/1.3 var(--sans); color: var(--muted); }
.st-tech[open] > summary { margin-bottom: .6rem; }
.st-tech ul.l { max-width: 44em; }

/* The hero stacks before its headline would need three lines. */
@media (max-width: 1000px) {
    .cp-hero { grid-template-columns: 1fr; gap: 2.2rem; }
}