/* SE3K catalogue — shared styles for the generated pages.
   Generated by generate_catalog.py; edit there, not here. */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: #111; color: #d4d4d4;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.7;
}
a { color: #ffe080; }
header {
  background: #1a1a1a; border-bottom: 1px solid #333; padding: 14px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none;
         color: #d4d4d4; font-weight: 600; }
header nav { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap;
             font-size: 14px; }
header nav a { color: #aaa; text-decoration: none; }
header nav a:hover { color: #ffe080; }
header nav a.play { color: #111; background: #ffe080; border-radius: 4px;
                    padding: 4px 12px; font-weight: 600; }
main { max-width: 1040px; margin: 0 auto; padding: 24px; }
h1 { font-size: 30px; line-height: 1.25; margin: 8px 0 12px; color: #fff; }
h2 { font-size: 22px; margin: 32px 0 10px; color: #fff; }
h3 { font-size: 18px; margin: 24px 0 8px; color: #eee; }
.lead { font-size: 18px; color: #bbb; }
.crumbs { font-size: 13px; color: #777; margin-bottom: 14px; }
.crumbs a { color: #999; text-decoration: none; }
.count { color: #888; font-size: 14px; }
/* Media page */
.media { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
/* The width/height attributes already carry half the artwork's natural size;
   these rules only keep it from overflowing a narrow screen. */
.media .cover img { max-width: 100%; height: auto; border-radius: 8px;
                    box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.media .meta { flex: 1 1 380px; }
.credit { color: #999; margin: 0 0 12px; }
.cta { display: inline-block; background: #ffe080; color: #111;
       padding: 12px 22px; border-radius: 6px; font-weight: 700;
       text-decoration: none; margin: 8px 0 20px; }
.cta:hover { background: #fff0b0; }
.facts { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 18px; }
.facts > div { display: flex; gap: 10px; border-bottom: 1px solid #262626;
               padding-bottom: 6px; }
.facts dt { color: #888; min-width: 110px; margin: 0; }
.facts dd { margin: 0; color: #ddd; }
.note { color: #888; font-size: 14px; }
/* Share row — plain links, no third-party scripts. */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
         margin: 22px 0 0; padding-top: 16px; border-top: 1px solid #262626; }
.share span { color: #777; font-size: 13px; margin-right: 2px; }
.share a { font-size: 13px; color: #bbb; text-decoration: none;
           border: 1px solid #333; border-radius: 999px; padding: 4px 12px; }
.share a:hover { color: #ffe080; border-color: #ffe080; }
/* Grids */
.grid { list-style: none; padding: 0; display: grid; gap: 18px;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.grid a { display: block; text-decoration: none; color: #d4d4d4; }
.grid img { width: 100%; height: auto; border-radius: 6px; display: block;
            background: #1a1a1a; }
.grid .t { display: block; margin-top: 8px; font-weight: 600; font-size: 15px; }
.grid .c { display: block; color: #888; font-size: 13px; }
.cards { list-style: none; padding: 0; display: grid; gap: 18px;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards a { display: block; background: #1a1a1a; border: 1px solid #2c2c2c;
           border-radius: 8px; padding: 18px; text-decoration: none;
           color: #d4d4d4; height: 100%; }
.cards a:hover { border-color: #ffe080; }
.cards h2 { margin: 0 0 8px; font-size: 20px; }
/* Docs */
.docs { line-height: 2; }
.toc { background: #161616; border: 1px solid #262626; border-radius: 8px;
       padding: 12px 18px; margin: 18px 0 28px; }
.toc h2 { margin: 4px 0 8px; font-size: 16px; color: #ffe080; }
.toc ol { margin: 0; padding-left: 20px; }
.toc .l2 { margin-left: 12px; }
.toc .l3 { margin-left: 24px; }
.doc pre { background: #161616; border: 1px solid #242424; border-radius: 6px;
           padding: 14px; overflow-x: auto; font-size: 13.5px; line-height: 1.5;
           color: #cfcfcf; white-space: pre; }
footer { border-top: 1px solid #262626; margin-top: 48px; padding: 24px;
         color: #888; font-size: 14px; text-align: center; }
footer .small { font-size: 12px; color: #666; }
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  main { padding: 16px; }
  .media { gap: 20px; }
}