/* A folio: rubricated numeral and the question, the seismograph in the left margin, the
   machine's text, and the record — Gabe's own facts — in the right margin. */
.folio, .write { max-width: var(--page); margin: 0 auto; padding: 3.2rem var(--gutter) 2.8rem; position: relative; }
.folio::before, .write::before { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); height: 3px; }
.folio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); column-gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
.folio-head { grid-column: 1 / -1; display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) auto; column-gap: clamp(1rem, 2.4vw, 2rem); align-items: baseline; margin-bottom: 1.6rem; }
.folio-no { font: italic 400 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--serif); color: var(--rubric); text-align: right; }
.folio-q { margin: 0; font: italic 400 clamp(1.25rem, 1rem + 0.9vw, 1.7rem)/1.2 var(--serif); color: var(--ink-2); }
.q-mark { font-style: normal; color: var(--rubric); }
.folio-meta { margin: 0; color: var(--ink-3); text-align: right; white-space: nowrap; }
.write .folio-head { grid-template-columns: 3.75rem minmax(0, 1fr); }

.ms-wrap { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.variants { grid-column: 2; margin-top: 1.4rem; }

.record { font-size: 0.9rem; color: var(--ink-2); border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2vw, 1.6rem); }
.rec-label { margin: 0 0 0.6rem; color: var(--rubric); text-transform: uppercase; }
.rec-org { font: 400 1.7rem/1.1 var(--serif); margin: 0 0 0.25rem; color: var(--ink); }
.rec-role { margin: 0 0 0.8rem; font-weight: 600; color: var(--ink); }
.rec-role .mono { display: block; font-weight: 400; color: var(--ink-3); margin-top: 0.2rem; }
.rec-points, .rec-facts { margin: 0 0 0.9rem; padding: 0; list-style: none; }
.rec-points li, .rec-facts li { position: relative; padding-left: 1rem; margin-bottom: 0.55rem; line-height: 1.45; }
.rec-points li::before, .rec-facts li::before { content: '§'; position: absolute; left: 0; color: var(--rubric); font-size: 0.8em; top: 0.1em; }
.rec-points b, .rec-facts b { color: var(--ink); }
.rec-stack { color: var(--ink-3); margin: 0 0 0.6rem; line-height: 1.7; }
.rec-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; }
.rec-links a { color: var(--ink); }
.rec-note { margin: 0.8rem 0 0; font: italic 400 1.05rem/1.35 var(--serif); color: var(--ink-2); }

.plate { margin: 0 0 1.2rem; }
.plate img { background: var(--paper-3); filter: sepia(0.28) saturate(0.85) contrast(1.02); mix-blend-mode: multiply; transition: filter 0.4s; border: 1px solid var(--rule); }
.plate:hover img { filter: none; }
.plate figcaption { font: italic 400 1rem/1.3 var(--serif); color: var(--ink-2); margin-top: 0.45rem; }
.plate figcaption .mono { font-style: normal; color: var(--rubric); margin-right: 0.4rem; }
.plate-portrait img { aspect-ratio: 1; object-fit: cover; }

.folio-wide { grid-template-columns: minmax(0, 1fr); }
.folio-wide .ms { max-width: 31em; }
.folio-wide .record { border-left: 0; padding-left: 0; margin-top: 2.2rem; }
.plates { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; }
.plates .plate:nth-child(even) { margin-top: 2.2rem; }

@media (max-width: 1080px) {
    .folio { grid-template-columns: minmax(0, 1fr); }
    .record { border-left: 0; padding-left: 0; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px dashed var(--rule); max-width: 40rem; }
    .record .plate { max-width: 22rem; }
    .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .folio-wide .record { max-width: none; }
}
@media (max-width: 640px) {
    .folio, .write { padding-top: 2.4rem; }
    .folio-head, .write .folio-head { grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.7rem; }
    .folio-meta { grid-column: 2; text-align: left; white-space: normal; margin-top: 0.4rem; }
    .ms-wrap { grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.7rem; }
    .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
    .plates .plate:nth-child(even) { margin-top: 1.4rem; }
    .plate-portrait { max-width: 13rem; }
}