html, body { min-height: 100%; overflow-x: clip; }
body { display: flex; min-height: 100vh; flex-direction: column; }
body > main { width: 100%; flex: 1 0 auto; }

.menu-toggle { display: none; padding: .45rem; border: 1px solid rgba(255,255,255,.45); background: transparent; }
.menu-toggle svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.menu-icon-close { display: none; }
.library-cover-art { inset: 0; grid-template-columns: 1fr; }
.library-cover-art img { display: none; }
.library-cover-art img:nth-child(2) { display: block; }
.hero-actions form { margin: 0; }
.card-preview-close { display: none; }

.site-footer { margin-top: auto; padding: 0; background: #0d2119; color: #c7d1cb; text-align: left; }
.site-footer > div { width: min(100%,1080px); margin: auto; padding: 2rem 1.25rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; }
.site-footer p { margin: 0; font-size: .9rem; }
.site-footer nav { max-width: none; margin: 0; padding: 0; justify-content: flex-end; }
.site-footer nav a { color: #dce7e1; font-size: .9rem; }
.footer-brand { display: flex; align-items: center; color: #fff; }
.footer-brand img { display: block; width: auto; height: auto; max-width: 120px; max-height: 38px; object-fit: contain; }
.footer-brand .osm-wordmark { font-size: 1.65rem; }

@media (min-width: 700px) {
  .library-cover-art { grid-template-columns: repeat(2,1fr); }
  .library-cover-art img:nth-child(3) { display: block; }
}
@media (min-width: 1050px) {
  .library-cover-art { grid-template-columns: repeat(3,1fr); }
  .library-cover-art img:nth-child(1) { display: block; }
}
@media (min-width: 1700px) {
  .library-cover,
  .deck-hero-cover { width: calc(100vw - 6rem); max-width: 1600px; margin-left: 50%; border-radius: 0 0 .8rem .8rem; transform: translateX(-50%); }
}
@media (max-width: 700px) {
  header .brand { display: flex !important; }
  header nav { position: relative; align-items: center; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; margin-left: auto; }
  .menu-toggle[aria-expanded="true"] .menu-icon-open { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-icon-close { display: block; }
  .main-nav { display: none; position: absolute; z-index: 50; top: 100%; right: 0; left: 0; align-items: stretch; flex-direction: column; gap: 0 !important; padding: .6rem 1.25rem 1rem; background: #102a20; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 24px rgba(0,0,0,.2); }
  .main-nav.is-open { display: flex; }
  .main-nav > a, .main-nav summary { padding: .7rem 0; }
  .main-nav .user-menu summary span { display: inline; }
  .main-nav .user-dropdown { position: static; margin-top: .25rem; box-shadow: none; }
  .site-footer > div { grid-template-columns: 1fr; text-align: center; }
  .site-footer nav { justify-content: center; }
  .footer-brand { justify-content: center; }
}
@media (max-width: 600px) {
  body.preview-open { overflow: hidden; }
  .card-preview { display: none; position: fixed; z-index: 80; inset: 0; max-width: none; margin: 0; padding: 4rem 1.25rem 1.25rem; align-items: center; justify-content: center; background: rgba(5,12,9,.76); backdrop-filter: blur(5px); }
  .card-preview.is-open { display: flex; }
  .card-preview-frame { width: min(82vw,310px); padding: .6rem; background: var(--paper); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
  .card-preview-close { display: block; position: absolute; z-index: 1; top: 1rem; right: 1rem; padding: .15rem .65rem; background: #fff; color: var(--ink); font-size: 1.7rem; }
  .deck-list-columns { width: 100%; }
}