/* Shared visual language for modules and blogs. */
:root {
  --editorial-bg: #fff;
  --editorial-surface: #f8f5f8;
  --editorial-raised: #fff;
  --editorial-line: #e6e0e7;
  --editorial-ink: #211b28;
  --editorial-muted: #716875;
  --editorial-accent: #54245b;
  --editorial-soft-accent: #a77bb1;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --editorial-bg: #140d17;
  --editorial-surface: #201525;
  --editorial-raised: #24182a;
  --editorial-line: #3a2d40;
  --editorial-ink: #f4edf6;
  --editorial-muted: #b9aebe;
  --editorial-accent: #c6a2d1;
  --editorial-soft-accent: #d8b9df;
}

body:has(.modules-shell), body:has(.blogs-shell), body:has(.article-shell) {
  min-height: 100vh;
  background: var(--editorial-bg);
  color: var(--editorial-ink);
  font-family: "Manrope", Arial, sans-serif;
}
body:has(.modules-shell) .site-header,
body:has(.blogs-shell) .site-header,
body:has(.article-shell) .site-header {
  background: var(--editorial-bg);
  border-bottom: 1px solid var(--editorial-line);
}
body:has(.modules-shell) .nav-links a,
body:has(.blogs-shell) .nav-links a,
body:has(.article-shell) .nav-links a,
body:has(.modules-shell) .login-link,
body:has(.blogs-shell) .login-link,
body:has(.article-shell) .login-link { color: var(--editorial-muted); }
body:has(.modules-shell) .nav-links a.active,
body:has(.blogs-shell) .nav-links a.active,
body:has(.article-shell) .nav-links a.active,
body:has(.modules-shell) .nav-links a:hover,
body:has(.blogs-shell) .nav-links a:hover,
body:has(.article-shell) .nav-links a:hover { color: var(--editorial-ink); }
body:has(.modules-shell) .brand,
body:has(.blogs-shell) .brand,
body:has(.article-shell) .brand { color: var(--editorial-ink); }
body:has(.modules-shell) .icon-link,
body:has(.blogs-shell) .icon-link,
body:has(.article-shell) .icon-link { color: var(--editorial-muted); }
body:has(.modules-shell) .theme-toggle,
body:has(.blogs-shell) .theme-toggle,
body:has(.article-shell) .theme-toggle { color: var(--editorial-accent); border-color: var(--editorial-line); }

.modules-shell, .blogs-shell, .article-shell { width: min(1180px, calc(100% - 72px)); margin: 0 auto; }
.modules-shell { padding: 70px 0 110px; }
.blogs-shell { padding: 70px 0 110px; }
.eyebrow, .article-label { color: var(--editorial-soft-accent); font: 700 10px/1.3 "DM Mono", monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.modules-shell > h1, .blogs-header h1 { color: var(--editorial-ink); font: 500 clamp(40px, 5vw, 66px)/1.05 Manrope, Arial, sans-serif; letter-spacing: -2.5px; margin: 16px 0 18px; }
.lede, .blogs-header p { max-width: 690px; color: var(--editorial-muted); font-size: 15px; line-height: 1.8; margin: 0; }
.module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.module-card { background: var(--editorial-raised); border: 1px solid var(--editorial-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(43,10,48,.06); }
.module-card:hover { border-color: var(--editorial-accent); box-shadow: 0 18px 38px rgba(43,10,48,.13); }
.module-card img { height: 190px; }
.module-card-body { padding: 22px 24px 25px; }
.module-card h2 { color: var(--editorial-ink); font: 600 24px/1.2 Manrope, Arial, sans-serif; letter-spacing: -.5px; margin: 9px 0 10px; }
.module-card p, .module-summary p, .room-card p { color: var(--editorial-muted); }
.module-pill { border-color: var(--editorial-line); color: var(--editorial-muted); background: var(--editorial-surface); }
.module-detail { gap: 48px; margin-top: 46px; }
.room-panel h2 { color: var(--editorial-ink); font: 600 27px/1.2 Manrope, Arial, sans-serif; letter-spacing: -.6px; }
.room-card { background: var(--editorial-raised); border-color: var(--editorial-line); border-radius: 9px; }
.room-card:hover { border-color: var(--editorial-accent); background: var(--editorial-surface); }
.room-card h3 { color: var(--editorial-ink); font: 600 15px/1.3 Manrope, Arial, sans-serif; }
.room-card .room-tag { color: var(--editorial-soft-accent); }
.module-summary { background: var(--editorial-surface); border-color: var(--editorial-line); border-radius: 10px; }
.module-summary h2 { color: var(--editorial-ink); font: 600 25px/1.2 Manrope, Arial, sans-serif; }
.back-link { color: var(--editorial-muted); }
.back-link:hover { color: var(--editorial-ink); }

.blogs-header { padding-bottom: 34px; border-bottom: 1px solid var(--editorial-line); }
.post-list { margin-top: 0; }
.post-card { padding: 32px 0 36px; border-bottom: 1px solid var(--editorial-line); }
.post-meta, .article-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--editorial-muted); font: 13px/1.4 Manrope, Arial, sans-serif; }
.post-meta span + span::before, .article-meta span + span::before { content: "·"; margin-right: 14px; color: var(--editorial-muted); }
.post-card h2 { color: var(--editorial-ink); font: 600 25px/1.3 Manrope, Arial, sans-serif; letter-spacing: -.3px; margin: 13px 0 10px; }
.post-card:hover h2 { color: var(--editorial-accent); }
.post-card p { max-width: 720px; color: var(--editorial-muted); font-size: 15px; line-height: 1.75; margin: 0; }

.article-shell { width: min(860px, calc(100% - 72px)); padding: 58px 0 110px; }
.article-header { padding-bottom: 38px; border-bottom: 1px solid var(--editorial-line); }
.article-header h1 { color: var(--editorial-ink); font: 600 clamp(38px, 6vw, 66px)/1.06 Manrope, Arial, sans-serif; letter-spacing: -2.8px; margin: 16px 0 20px; }
.article-deck { max-width: 700px; color: var(--editorial-muted); font-size: 17px; line-height: 1.75; margin: 0; }
.article-meta { margin-top: 22px; }
.article-body { max-width: 730px; padding-top: 42px; }
.article-body h2 { color: var(--editorial-ink); font: 600 29px/1.25 Manrope, Arial, sans-serif; letter-spacing: -.8px; margin: 48px 0 16px; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { color: var(--editorial-ink); font-size: 17px; line-height: 1.9; margin: 0 0 22px; }
.article-body strong { color: var(--editorial-ink); }
.article-body em { color: var(--editorial-accent); }
.article-end { border-top-color: var(--editorial-line); color: var(--editorial-muted); }
.article-end a { color: var(--editorial-accent); }

@media (max-width: 760px) {
  .modules-shell, .blogs-shell, .article-shell { width: min(100% - 40px, 620px); padding-top: 44px; }
  .module-grid, .module-detail { grid-template-columns: 1fr; }
  .module-summary { position: static; grid-row: 1; }
  .modules-shell > h1, .blogs-header h1 { font-size: 42px; }
  .article-body p { font-size: 16px; line-height: 1.8; }
}