/* The homepage: as wide as /live, the site's paper and ink. The live panel reads the same
   snapshot as /live (home.js); without the script it keeps a sentence and its link. */
.hp main { max-width: 1160px; }

/* The hero: the boutique on the left, its Crews at work on the right. */
.hp-hero { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 4.5rem; align-items: start; padding: .6rem 0 3.6rem; border-bottom: 1px solid var(--ink); }
.hp-intro { padding-top: .4rem; }
.hp-intro h1 { font-size: 2.45em; line-height: 1.1; margin: 0 0 1.1rem; }
.hp-intro .lede { font-size: 1.12em; max-width: 33em; margin-bottom: 0; }
.hp-ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.7rem 0 0; }
.hp-ctas .btn { margin: 0; }
.hp-btn-alt, .hp-btn-alt:visited { background: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
    .hp-btn-alt:hover, .hp-btn-alt:visited:hover { background: var(--ink); color: var(--paper); }
}

.hp-live { border-top: 1px solid var(--ink); padding: 1rem 0 0; margin-top: .5rem; }
.hp-k { font: .875rem/1.3 var(--sans); color: var(--muted); margin: 0; }
.hp-clock { color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-live-static p { margin: .7rem 0 1rem; color: var(--body); }
.hp-live.on .hp-live-static { display: none; }
.hp-big { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 1.6rem; margin: 1.1rem 0 1.6rem; }
.hp-big .v { font-size: 2.35em; line-height: 1; margin: 0 0 .3rem; font-variant-numeric: tabular-nums; }
.hp-big .s { font: .875rem/1.35 var(--sans); color: var(--muted); margin: 0; }
.hp-strip-t { font: .875rem/1.3 var(--sans); color: var(--muted); margin: 0 0 .5rem; }
.hp-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: center; margin-bottom: 1.3rem; }
.hp-strip-l { font: .875rem/1 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-cells { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: var(--rowh, 14px); }
.hp-cell { box-shadow: inset 0 0 0 1px var(--rule); }
.hp-cell.on { box-shadow: none; }
.hp-cell.now { outline: 1px solid var(--ink); }
.hp-ticks { display: flex; justify-content: space-between; font: .875rem/1 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; margin-top: .25rem; }
.hp-checks { font: .875rem/1.4 var(--sans); color: var(--body); margin: 1rem 0 .75rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.hp-live-link { margin: 0; }
.hp-note { font: .875rem/1.45 var(--sans); color: var(--muted); margin: .75rem 0 0; }

/* The two practices, side by side. */
.hp-practices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2rem; margin-top: 4rem; }
.hp-card { display: flex; flex-direction: column; background: #FDFCF9; border: 1px solid var(--rule); padding: 1.9rem 2rem 1.7rem; }
.hp-card h2 { font-size: 1.3em; font-weight: normal; line-height: 1.25; margin: 0 0 .85rem; }
.hp-card h2 .n, .hp-record h2 .n { font: .875rem/1 var(--sans); color: var(--faint); letter-spacing: .06em; margin-right: .75rem; vertical-align: .3em; }
.hp-card p, .hp-card li { font-size: .97em; }
.hp-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: .4rem 0 .5rem; padding-top: .5rem; }
.hp-card .hint { font-size: .9em; }

/* Where we work: three columns. */
.hp-where { margin-top: 4.2rem; }
.hp-h { font-size: 1.3em; font-weight: normal; line-height: 1.25; margin: 0 0 1.3rem; }
.hp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2.6rem; }
.hp-cols > div { border-top: 1px solid var(--rule); padding-top: .8rem; }
.hp-cols p { margin: 0; font-size: .95em; color: var(--body); }
.hp-cols .hp-col-t { font-weight: bold; color: var(--ink); margin-bottom: .35rem; }

/* The record: what is active, then selected work flowing over two columns. */
.hp-rec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 2.6rem; }
.hp-record .group { margin-top: .6rem; }
.hp-rec-flow { columns: 2; column-gap: 2.6rem; }
.hp-rec-flow .item { break-inside: avoid; }
.hp-record .item { padding: .95rem 0; }
.hp-record .item p { font-size: .9em; }

/* The close: Santiago, and one way to reach him. */
.hp-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 3rem; }
.hp-close .sign { flex: 1 1 30rem; margin: 0; }
.hp-close-cta { margin: 0; }
.hp-close-t { margin: 0; font-size: 1.15em; max-width: 32em; }
.hp-close-cta .btn { margin: 0; }

@media (max-width: 860px) {
    .hp-hero { grid-template-columns: 1fr; gap: 2rem; }
    .hp-practices, .hp-cols, .hp-rec { grid-template-columns: 1fr; }
    .hp-rec-flow { columns: 1; }
}
@media (max-width: 640px) {
    .hp-intro h1 { font-size: 1.9em; }
    .hp-card { padding: 1.1rem 1.1rem 1rem; }
}

/* The Crew card's two facts: the Crew page's strip, two of its four. */

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

/* What clients got: four outcomes, a quiet line of names, the way to the full record. */
.hp-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.6rem; }
.hp-out > div { border-top: 1px solid var(--rule); padding-top: .9rem; }
.hp-out p { margin: 0; }
.hp-out-k { font: 600 .95rem/1.35 var(--sans); color: var(--ink); margin: 0 0 .35rem !important; }
.hp-names { color: var(--muted); font-size: .95em; margin: 2rem 0 .6rem; }
.ab-intro h1 { font-size: 2.2em; line-height: 1.1; margin: 0 0 1rem; }
.ab-intro .lede { max-width: 36em; }
@media (max-width: 860px) { .hp-out { grid-template-columns: 1fr; } }