@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --ink: #242822;
  --muted: #6f756c;
  --paper: #f4f0e8;
  --copper: #ae6039;
  --green: #405c4b;
  --line: #d9d1c3;
}

body { background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
.container { max-width: 1180px; }
.page-header { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
.eyebrow { color: var(--copper); font-size: .75rem; font-weight: 700; letter-spacing: .16em; margin-bottom: .7rem; text-transform: uppercase; }
h1, h2 { font-family: 'Playfair Display', serif; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; margin-bottom: .8rem; }
.lead { color: var(--muted); max-width: 600px; }
.year-filter { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.year-filter select { background-color: transparent; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); font-size: .95rem; margin-top: .35rem; min-width: 150px; padding: .65rem 2rem .65rem .75rem; }
.magazine-grid { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.magazine-tile { min-width: 0; }
.cover-button { background: #ddd7cc; border: 0; box-shadow: 8px 8px 0 rgba(64, 92, 75, .18); display: block; overflow: hidden; padding: 0; position: relative; width: 100%; }
.cover-button::after { background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3), transparent 70%); content: ''; inset: 0; opacity: 0; position: absolute; transition: opacity .2s; }
.cover-button:hover::after, .cover-button:focus-visible::after { opacity: 1; }
.cover-canvas { display: block; height: 330px; opacity: 0; transition: opacity .25s; width: 100%; }
.cover-canvas.is-ready { opacity: 1; }
.cover-fallback { align-items: center; color: var(--green); display: flex; font-size: 2rem; font-weight: 700; inset: 0; justify-content: center; letter-spacing: .1em; position: absolute; }
.cover-canvas.is-ready + .cover-fallback { display: none; }
.tile-info { align-items: start; display: flex; gap: .75rem; justify-content: space-between; padding-top: 1rem; }
.tile-info h2 { font-size: 1.25rem; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.tile-info p { color: var(--muted); font-size: .8rem; margin: .35rem 0 0; }
.open-button { background: transparent; border: 1px solid var(--copper); color: var(--copper); cursor: pointer; flex: 0 0 auto; font-size: .8rem; padding: .45rem .65rem; }
.open-button:hover, .open-button:focus-visible { background: var(--copper); color: #fff; }
.empty-state, .filter-empty { color: var(--muted); text-align: center; }
.empty-state { border: 1px dashed var(--line); margin-top: 2rem; padding: 4rem 1.5rem; }
.empty-state h2 { color: var(--ink); margin-top: 1rem; }
.empty-mark { color: var(--copper); font-weight: 700; letter-spacing: .15em; }
code { color: var(--green); }
.modal-content { border: 0; border-radius: 0; }
.modal-header { align-items: center; background: var(--green); color: #fff; }
.modal-title { font-size: 1.4rem; }
.modal-actions { align-items: center; display: flex; gap: .75rem; margin-left: auto; }
.modal-actions .btn-primary { background: var(--copper); border-color: var(--copper); border-radius: 0; }
.modal-header .btn-close { filter: invert(1); }
#pdfViewer { border: 0; display: block; height: min(78vh, 900px); width: 100%; }
@media (max-width: 575px) { .magazine-grid { gap: 2rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cover-canvas { height: 240px; } .tile-info { display: block; } .open-button { margin-top: .7rem; } }