/* /talks/ — "Angels and Giants". The tokens, the bar, the .passage card and
   the dialog shell come from /pages.css; this adds the cards and the sheet. */

main { max-width: 1040px; }

.theme { margin-top: 38px; }
.theme h2 { font: 700 clamp(22px, 4vw, 28px)/1.2 var(--serif); margin: 0 0 6px; }
.theme .note { color: var(--muted); font-size: 14.5px; margin: 0; max-width: 70ch; }
.theme .n { color: var(--gold); font: 600 12px var(--sans); margin-top: 8px; display: inline-block; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; margin-top: 16px; }
.card {
    display: flex; flex-direction: column; text-align: start; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 0 0 12px; overflow: hidden;
    transition: border-color .18s, transform .18s, background .18s;
}
.card:hover, .card:focus-visible { border-color: var(--gold); background: var(--surface2); transform: translateY(-2px); outline: none; }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0f0d09; border-bottom: 1px solid var(--border); }
.card b { font: 600 16px/1.25 var(--serif); margin: 11px 13px 0; }
/* Four lines of gist, so a row of cards stays a row and not a column of
   paragraphs; the length sits on the bottom edge whatever the card's height. */
.card .gist {
    color: var(--muted); font-size: 13px; line-height: 1.5; margin: 6px 13px 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.card .len { color: var(--faint); font: 600 11.5px var(--sans); margin: auto 13px 0; padding-top: 9px; }

/* ---- the talk, opened ---- */
.sheet { max-width: 720px; }
.sheet .art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); background: #0f0d09; }
.sheet .artcredit { color: var(--faint); font-size: 11px; margin: 6px 0 0; }
.sheet h2 { font: 700 clamp(22px, 4.6vw, 30px)/1.18 var(--serif); margin: 14px 0 4px; }
.sheet .orig { color: var(--faint); font-size: 12.5px; }
.sheet .gist { color: var(--text); font: 400 17px/1.6 var(--scripture); margin: 12px 0 0; }
.sheet .body p { color: var(--muted); font-size: 15px; line-height: 1.68; margin: 12px 0 0; }
.sheet .watch {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 15px;
    font: 600 13.5px var(--sans); color: var(--gold);
}
.sheet .watch:hover { background: var(--gold-soft); text-decoration: none; }
.points { list-style: none; padding: 0; margin: 8px 0 0; }
.points li { border-inline-start: 2px solid var(--border-strong); padding: 2px 0 2px 12px; margin-bottom: 11px; }
.points p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.points .ref { color: var(--gold); font: 600 12px var(--sans); margin-top: 3px; display: inline-block; }

.chan { display: inline-block; margin-top: 14px; font: 600 14px var(--sans); }

@media (max-width: 560px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
    .card b { font-size: 14.5px; }
    .card .gist { display: none; }
}