/* Shared structure. Skins override colour, type and card layout. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 5; background: #fff; color: #000; padding: 8px; }
.top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 20px; }
.logo { font-weight: 700; text-decoration: none; }
.nav { display: flex; gap: 12px; flex-wrap: wrap; }
.nav a { text-decoration: none; }
.main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 64px; }
.btn { display: inline-block; text-decoration: none; padding: 10px 16px; }
.crumbs { font-size: 0.9rem; margin-bottom: 16px; }
.aeo { padding: 14px 16px; margin: 12px 0 20px; }
.sheet-head { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: center; margin-bottom: 12px; }
.cover img, .cover .ph, .thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.thumb { display: block; overflow: hidden; }
.ph { display: grid; place-items: center; font-weight: 700; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.facts div { padding: 10px; }
.facts dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.facts dd { margin: 4px 0 0; font-weight: 650; }
.prose p { line-height: 1.55; }
.steps { line-height: 1.5; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.card { text-decoration: none; display: flex; flex-direction: column; }
.card-meta { display: block; font-size: 0.85rem; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills a { text-decoration: none; padding: 6px 10px; }
.pager { display: flex; gap: 16px; align-items: center; margin: 20px 0; }
.faq-item { padding: 8px 0; }
.foot { padding: 24px 20px 40px; font-size: 0.9rem; }
.kicker { margin: 0 0 6px; font-size: 0.85rem; }
.inline-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 720px) {
  .sheet-head { grid-template-columns: 1fr; }
  .top { align-items: flex-start; }
}