body { background: linear-gradient(115deg, #f8f5ef, var(--color-paper) 48%, #eeece5); }
.records-header, .records-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: min(calc(100% - 3rem), 88rem); margin: 0 auto; }
.records-header { padding-top: 1.65rem; }.records-header nav, .records-footer nav { display: flex; gap: 1.5rem; color: var(--color-ink-soft); font-size: 0.72rem; }
.records-shell { display: grid; grid-template-columns: minmax(14rem, 19rem) minmax(0, 48rem); gap: clamp(3rem, 9vw, 9rem); width: min(calc(100% - 3rem), 78rem); min-height: calc(100dvh - 10rem); margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 0 6rem; }
.record-index { position: sticky; top: 2rem; align-self: start; }.record-index-label { margin: 0 0 1.5rem; color: var(--color-sage-deep); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.record-index ol { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }.record-index a { display: grid; grid-template-columns: 2rem 1fr; gap: 0.4rem; padding: 0.62rem 0; border-bottom: 1px solid rgb(43 43 43 / 0.07); color: var(--color-ink-soft); font-size: 0.76rem; line-height: 1.35; text-decoration: none; }.record-index a[aria-current="page"] { color: var(--color-ink); font-weight: 680; }.record-index a span:first-child { opacity: 0.52; }
.record-selector { display: none; }
.record-reader header { padding-bottom: 2rem; border-bottom: 1px solid var(--color-line); }.record-status, .record-number { margin: 0; color: var(--color-sage-deep); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }.record-number { float: right; color: var(--color-ink-soft); }
.record-reader h1 { max-width: 14ch; margin: 1.1rem 0 0; font-size: clamp(2.8rem, 6vw, 5.6rem); font-weight: 470; letter-spacing: -0.068em; line-height: 0.94; }.record-deck { max-width: 34rem; margin: 1.6rem 0 0; color: var(--color-ink-soft); font-family: var(--font-record); font-size: 1.15rem; line-height: 1.55; }
.record-body { padding-top: 2rem; }.record-body p { margin: 0 0 1.35rem; font-family: var(--font-record); font-size: clamp(1.02rem, 1.5vw, 1.12rem); line-height: 1.78; }.record-body p:has(+ p) { text-wrap: pretty; }
.record-pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-line); }.record-pagination button { padding: 0.75rem 0; border: 0; background: none; color: var(--color-ink-soft); font-size: 0.74rem; cursor: pointer; }.record-pagination button:hover { color: var(--color-ink); }
.records-footer { padding-block: 1.5rem; border-top: 1px solid var(--color-line); color: var(--color-ink-soft); font-size: 0.68rem; }
@media (max-width: 767px) {
  .records-header { width: calc(100% - 2rem); }.records-header nav a:last-child { display: none; }.records-shell { display: block; width: calc(100% - 2rem); padding: 4.5rem 0; }.record-index { position: relative; z-index: 5; top: auto; margin-bottom: 3.5rem; }.record-index-label { margin-bottom: 0.7rem; }.record-selector { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.9rem 0; border: 0; border-block: 1px solid var(--color-line); background: none; color: var(--color-ink); text-align: left; }.record-index ol { position: absolute; top: 100%; right: 0; left: 0; max-height: 20rem; overflow: auto; padding: 0.7rem 1rem; border: 1px solid var(--color-line); background: var(--color-paper-raised); box-shadow: var(--shadow-card); }.record-index:not(.is-open) ol { display: none; }.record-reader h1 { font-size: clamp(3rem, 15vw, 4.6rem); }.record-body p { font-size: 1.05rem; }.records-footer { width: calc(100% - 2rem); }
}