.message-hero { background: var(--forest); color: #fff; padding: clamp(4rem, 10vw, 7rem) 1.5rem; }
.message-hero__inner, .messages-main { margin: auto; max-width: 76rem; }
.message-hero h1 { font-family: var(--serif); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 400; line-height: 1.05; margin: 0; }
.message-hero p:last-child { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; max-width: 43rem; }
.messages-main { padding: clamp(3rem, 7vw, 6rem) 1.5rem; }
.archive-tools { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 10rem auto; margin-bottom: 1.5rem; padding-bottom: 1.5rem; }
.archive-tools label { color: var(--forest); display: grid; font-size: .78rem; font-weight: 800; gap: .4rem; letter-spacing: .08em; text-transform: uppercase; }
.archive-tools input, .archive-tools select { background: #fff; border: 1px solid #bfc9c2; border-radius: 0; color: var(--ink); font: 1rem var(--sans); min-height: 2.75rem; padding: .5rem .7rem; }
#message-count { color: var(--muted); font-size: .92rem; margin-bottom: .65rem; white-space: nowrap; }
.message-table { border-collapse: collapse; width: 100%; }
.message-table th { border-bottom: 2px solid var(--forest); color: var(--forest); font-size: .73rem; letter-spacing: .09em; padding: .75rem; text-align: left; text-transform: uppercase; }
.sort-button { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-weight: inherit; letter-spacing: inherit; padding: 0; text-transform: inherit; }
.sort-button:hover, .sort-button:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.sort-button span { display: inline-block; font-size: 1em; margin-left: .15rem; }
.message-table td { border-bottom: 1px solid var(--line); padding: 1rem .75rem; vertical-align: middle; }
.message-table td:first-child { min-width: 16rem; }
.format-badge { border: 1px solid #bdc8c0; color: var(--forest); font-size: .7rem; font-weight: 800; letter-spacing: .08em; padding: .2rem .35rem; }
.listen-link { color: var(--forest); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: .18em; white-space: nowrap; }
.archive-status { background: var(--cream); border-left: 4px solid var(--gold); margin: 1rem 0; padding: 1rem 1.25rem; }
.archive-status a { color: var(--forest); font-weight: 800; }
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 2rem; }
.page-button { background: #fff; border: 1px solid #bbc6bf; color: var(--forest); cursor: pointer; font: 700 .8rem var(--sans); min-height: 2.4rem; min-width: 2.4rem; padding: .35rem .65rem; }
.page-button:hover:not(:disabled), .page-button:focus-visible { border-color: var(--forest); }
.page-button.is-current { background: var(--forest); color: #fff; }
.page-button:disabled { cursor: not-allowed; opacity: .5; }
.page-button-label { min-width: auto; }
.messages-footer { margin-top: 0; }
@media (max-width: 700px) { .archive-tools { align-items: stretch; grid-template-columns: 1fr; } #message-count { margin: 0; } .message-table thead { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .message-table, .message-table tbody, .message-table tr, .message-table td { display: block; width: 100%; } .message-table tr { border-bottom: 1px solid var(--line); padding: .75rem 0; } .message-table td { border: 0; min-width: 0 !important; padding: .18rem .2rem; } .message-table td::before { color: var(--muted); content: attr(data-label); display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; margin-right: .6rem; text-transform: uppercase; } }