.theme-picker {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 5;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-picker label {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.theme-picker select {
  width: auto;
  min-width: 13rem;
  padding: 6px 8px;
  font-size: 13px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--rule);
}
header.site { position: relative; padding-right: 14rem; }

.theme-modal {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  max-width: 1080px;
  width: calc(100% - 24px);
  max-height: 90vh;
  overflow: auto;
}
.theme-modal::backdrop { background: rgba(12, 12, 14, 0.62); }
.theme-modal-inner { padding: 18px 20px 24px; }
.theme-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-modal-bar h2 { margin: 0; font-size: 22px; }
.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.theme-card { text-decoration: none; color: inherit; display: block; }
.theme-card span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.3;
}
.theme-card img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: 162px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--rule);
  background: #c8c2b6;
}
.theme-card:hover img { outline: 2px solid var(--accent); outline-offset: 2px; }

.cover-rail-wrap {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}
.cover-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 0 14px;
  scrollbar-width: thin;
}
.cover-rail a {
  flex: 0 0 92px;
  width: 92px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.cover-rail img {
  width: 92px;
  height: 132px;
  object-fit: cover;
  display: block;
  margin: 0 auto 7px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.cover-rail .rail-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Folio — only cream letterpress */
[data-theme="folio"] {
  --paper: #f3ead9;
  --ink: #1a1612;
  --rule: #c4b49a;
  --accent: #7a1f2b;
  --muted: #6b6156;
  --white: #fffdf8;
}

/* Midnight — black study */
[data-theme="midnight"] {
  --paper: #0c0b0a;
  --ink: #f0e6d2;
  --rule: #3a3226;
  --accent: #e0b15a;
  --muted: #b9a78a;
  --white: #171411;
}
[data-theme="midnight"] header.site {
  background: #000;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
}
[data-theme="midnight"] .masthead, [data-theme="midnight"] .tagline, [data-theme="midnight"] nav.primary a { color: var(--ink); }
[data-theme="midnight"] .btn { background: var(--accent); color: #111; }
[data-theme="midnight"] .cover-rail-wrap { background: #111; }

/* Swiss — International Typographic Style */
[data-theme="swiss"] {
  --paper: #ffffff;
  --ink: #111111;
  --rule: #111111;
  --accent: #e30613;
  --muted: #555;
  --white: #ffffff;
}
[data-theme="swiss"] body { font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif; }
[data-theme="swiss"] h1, [data-theme="swiss"] h2, [data-theme="swiss"] h3,
[data-theme="swiss"] .masthead, [data-theme="swiss"] .display {
  font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 0;
  font-weight: 600;
}
[data-theme="swiss"] header.site {
  border-bottom: 0;
  border-top: 10px solid var(--accent);
  padding-top: 10px;
}
[data-theme="swiss"] .masthead { text-align: left; letter-spacing: 0; text-transform: none; }
[data-theme="swiss"] .masthead strong { font-size: 28px; letter-spacing: 0; margin-top: 0; }
[data-theme="swiss"] .tagline { text-align: left; letter-spacing: 0; text-transform: none; }
[data-theme="swiss"] nav.primary { justify-content: flex-start; text-transform: none; letter-spacing: 0; }
[data-theme="swiss"] .btn { background: var(--accent); text-transform: none; letter-spacing: 0; }

/* Harbor — navy band, seafoam */
[data-theme="harbor"] {
  --paper: #eef4f6;
  --ink: #10233a;
  --rule: #9bb8c4;
  --accent: #1f7a7a;
  --muted: #4a6678;
  --white: #ffffff;
}
[data-theme="harbor"] header.site {
  background: #0b2a44;
  color: #e8f4f8;
  border-bottom: 0;
}
[data-theme="harbor"] .masthead, [data-theme="harbor"] .tagline,
[data-theme="harbor"] nav.primary a { color: #e8f4f8; }
[data-theme="harbor"] .masthead strong { color: #7fd3c7; }
[data-theme="harbor"] .cover-rail-wrap { background: #12344f; }
[data-theme="harbor"] .cover-rail a { color: #ffffff; }
[data-theme="harbor"] .btn { background: #1f7a7a; }

/* Meadow — forest */
[data-theme="meadow"] {
  --paper: #132016;
  --ink: #e9f0dc;
  --rule: #3d5a40;
  --accent: #c4d36a;
  --muted: #a9c0a4;
  --white: #1c2c20;
}
[data-theme="meadow"] header.site { background: #0d1810; border-bottom: 1px solid #3d5a40; }
[data-theme="meadow"] .btn { background: var(--accent); color: #132016; }
[data-theme="meadow"] .cover-rail-wrap { background: #1c2c20; }

/* Cinder — industrial charcoal */
[data-theme="cinder"] {
  --paper: #2a2a2c;
  --ink: #f4f1ea;
  --rule: #4a4a4e;
  --accent: #ff6a2a;
  --muted: #c5c0b6;
  --white: #343438;
}
[data-theme="cinder"] body { font-family: "IBM Plex Sans", sans-serif; }
[data-theme="cinder"] header.site { background: #1a1a1c; border-bottom: 4px solid var(--accent); }
[data-theme="cinder"] .masthead { text-transform: none; letter-spacing: 0.08em; }
[data-theme="cinder"] .btn { background: var(--accent); color: #111; }
[data-theme="cinder"] .cover-rail-wrap { background: #1f1f22; }

/* Vermilion — red header magazine */
[data-theme="vermilion"] {
  --paper: #fff;
  --ink: #160a08;
  --rule: #ead8d3;
  --accent: #d01212;
  --muted: #6e4a44;
  --white: #fff;
}
[data-theme="vermilion"] header.site {
  background: #d01212;
  color: #fff;
  border-bottom: 0;
}
[data-theme="vermilion"] .masthead, [data-theme="vermilion"] .tagline,
[data-theme="vermilion"] nav.primary a { color: #fff; }
[data-theme="vermilion"] .masthead strong { color: #fff; font-style: italic; }
[data-theme="vermilion"] .hero h1 { font-style: italic; }
[data-theme="vermilion"] .btn { background: #d01212; }
[data-theme="vermilion"] .cover-rail-wrap { background: #fff5f3; }

/* Atelier — gallery */
[data-theme="atelier"] {
  --paper: #ffffff;
  --ink: #111;
  --rule: #ececec;
  --accent: #111;
  --muted: #888;
  --white: #ffffff;
}
[data-theme="atelier"] .masthead strong { font-size: 22px; letter-spacing: 0.5em; font-weight: 400; }
[data-theme="atelier"] header.site { border-bottom: 0; }
[data-theme="atelier"] .hero { border: 0; padding-top: 72px; }
[data-theme="atelier"] .card { border: 0; background: transparent; padding: 0; }
[data-theme="atelier"] img.cover { margin: 0 0 12px; width: 100%; height: 260px; }
[data-theme="atelier"] .cover-rail-wrap { border-top: 1px solid #ececec; }

@media (max-width: 800px) {
  header.site { padding-right: 0; padding-top: 52px; }
  .theme-picker { right: 12px; top: 10px; }
  .theme-picker select { min-width: 9.5rem; font-size: 12px; }
}