/* wp-article.css: the 7d2d.net articles moved over from WordPress (templates/wp_article/).
   The site's dark design (site-dark.css: the html.hm tokens, the dark nav, the scene band under
   it, the moonlit city on the articles) rebuilt as one small file, because these pages do not
   load base.html's thirteen stylesheets. Keep the tokens in step with site-dark.css. */

html.hm {
    --hm-ink: #1b1816;
    --hm-red: #e81c23;
    --hm-red-dark: #b91c1c;
    --hm-link: #ff6b70;
    --hm-paper: #1b1816;
    --hm-card: rgba(39, 34, 32, 0.94);
    --hm-card-2: rgba(48, 42, 39, 0.96);
    --hm-line: rgba(255, 255, 255, 0.12);
    --hm-line-strong: rgba(255, 255, 255, 0.22);
    --hm-text: #efeae3;
    --hm-muted: #b8b1a9;
    --hm-faint: #8a8279;
    --hm-on-dark: #d6d3d1;
    --hm-on-dark-strong: #fafaf9;
    --hm-radius: 8px;
    --hm-radius-sm: 6px;
    --hm-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45);
    --hm-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html.hm body {
    margin: 0;
    background: var(--hm-paper);
    color: var(--hm-text);
    font-family: var(--hm-font);
    font-size: 17px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}
html.hm a { color: var(--hm-link); text-decoration: none; }
html.hm a:hover { text-decoration: underline; }
html.hm ::selection { background: rgba(232, 28, 35, 0.35); color: #fff; }

/* ---- nav ---- */
.wa-nav { background: var(--hm-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); position: relative; z-index: 2; }
.wa-nav-inner { max-width: 1140px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.wa-brand img { height: 52px; width: auto; display: block; }
.wa-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wa-links a { color: var(--hm-on-dark); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: var(--hm-radius-sm); }
.wa-links a:hover { color: var(--hm-on-dark-strong); background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.wa-links a.wa-cta { background: var(--hm-red); color: #fff; font-weight: 600; padding: 9px 18px; margin-left: 6px; }
.wa-links a.wa-cta:hover { background: var(--hm-red-dark); }

/* ---- the scene band and the title on it ---- */
.wa-main { position: relative; z-index: 0; }
.wa-main::before {
    content: "";
    position: absolute; z-index: -1; top: 0; left: 0; right: 0;
    height: 340px;
    background-image: linear-gradient(180deg, rgba(27, 24, 22, 0.58) 0px, rgba(27, 24, 22, 0.56) 120px, rgba(27, 24, 22, 0.86) 260px, var(--hm-paper) 340px), url("/static/img/cdn/scene-moon-city.webp");
    background-position: center top, center top;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
.wa-hero-inner { max-width: 860px; margin: 0 auto; padding: 48px 16px 28px; text-align: center; }
.entry-categories-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.entry-categories-inner a, .entry-categories-inner span {
    display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff; background: rgba(232, 28, 35, 0.85); border-radius: 999px; padding: 4px 12px;
}
.entry-categories-inner a:hover { background: var(--hm-red-dark); text-decoration: none; }
h1.post-title, h1.display-4 { margin: 18px 0 8px; color: var(--hm-on-dark-strong); font-size: 2.2rem; line-height: 1.25; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.wa-page .wa-hero-inner { padding-bottom: 36px; }
/* the WordPress pages are block-editor markup: columns and groups lay out as flex */
.wa-content .wp-block-columns, .wa-content .is-layout-flex { display: flex; flex-wrap: wrap; gap: 1.5em; }
.wa-content .wp-block-column { flex: 1 1 240px; min-width: 0; }
.wa-content .is-vertical { flex-direction: column; }
.wa-content .wp-block-image img { height: auto; }
.wa-content article { max-width: 100%; }
.post-meta, .post-meta p { margin: 0; color: var(--hm-muted); font-size: 15px; }

/* ---- the article ---- */
.wa-body { max-width: 860px; margin: 0 auto 40px; padding: 0 16px; }
.wa-content {
    background: var(--hm-card);
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow);
    padding: 36px 40px;
    overflow-wrap: anywhere;
}
.wa-content > :first-child { margin-top: 0; }
.wa-content h2 { font-size: 1.6rem; line-height: 1.3; margin: 2em 0 0.6em; color: var(--hm-on-dark-strong); }
.wa-content h3 { font-size: 1.25rem; line-height: 1.35; margin: 1.6em 0 0.5em; color: var(--hm-on-dark-strong); }
.wa-content h4 { font-size: 1.05rem; margin: 1.4em 0 0.4em; color: var(--hm-on-dark-strong); }
.wa-content p, .wa-content ul, .wa-content ol { margin: 0 0 1.1em; }
.wa-content li { margin: 0.25em 0; }
.wa-content img { max-width: 100%; height: auto; border-radius: var(--hm-radius-sm); }
.wa-content figure { margin: 1.5em 0; }
.wa-content figcaption, .wa-content .wp-caption-text { color: var(--hm-faint); font-size: 14px; text-align: center; margin-top: 6px; }
.wa-content .aligncenter, .wa-content .has-text-align-center { text-align: center; margin-left: auto; margin-right: auto; display: block; }
.wa-content .alignleft { float: left; margin: 0.3em 1.2em 1em 0; }
.wa-content .alignright { float: right; margin: 0.3em 0 1em 1.2em; }
.wa-content iframe { max-width: 100%; }
.wa-content iframe[src*="youtube"], .wa-content .wp-block-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hm-radius-sm); }
.wa-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; display: block; overflow-x: auto; }
.wa-content th, .wa-content td { border: 1px solid var(--hm-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.wa-content th, .wa-content thead td { background: rgba(255, 255, 255, 0.06); color: var(--hm-on-dark-strong); }
.wa-content tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.wa-content blockquote { margin: 1.4em 0; padding: 0.4em 1.2em; border-left: 3px solid var(--hm-line-strong); color: var(--hm-text); }
.wa-content code { background: rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 1px 5px; font-size: 0.92em; }
.wa-content pre { background: #141110; border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); padding: 14px; overflow-x: auto; }
.wa-content pre code { background: transparent; padding: 0; }
.wa-content hr { border: 0; border-top: 1px solid var(--hm-line); margin: 2em 0; }
.wa-content strong { color: var(--hm-on-dark-strong); }
#graphcomment { margin-top: 32px; }

/* ---- read next ---- */
.wa-related { max-width: 1140px; margin: 0 auto 48px; padding: 0 16px; }
.wa-related h2 { font-size: 1.3rem; color: var(--hm-on-dark-strong); margin: 0 0 14px; }
.wa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wa-card { display: flex; flex-direction: column; background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); overflow: hidden; color: var(--hm-text); box-shadow: var(--hm-shadow); }
.wa-card:hover { border-color: var(--hm-line-strong); text-decoration: none; }
.wa-card-date { color: var(--hm-faint); font-size: 13px; padding: 12px 16px 0; }
.wa-card-title { color: var(--hm-on-dark-strong); font-weight: 600; line-height: 1.4; padding: 4px 16px 16px; }

/* ---- footer ---- */
.wa-footer { background: var(--hm-ink); border-top: 1px solid var(--hm-line); padding: 32px 16px 24px; text-align: center; color: var(--hm-muted); font-size: 15px; }
.wa-footer p { margin: 0 0 12px; }
.wa-footer-q { font-size: 18px; color: var(--hm-on-dark-strong); }
.wa-footer-social a, .wa-footer-legal a { margin: 0 8px; color: var(--hm-on-dark); }
.wa-footer-pay { font-size: 12px; color: var(--hm-faint); }
.wa-footer-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }

@media (max-width: 860px) {
    .wa-cards { grid-template-columns: 1fr; }
    .wa-content { padding: 24px 18px; }
    h1.post-title, h1.display-4 { font-size: 1.7rem; }
    html.hm body { font-size: 16px; }
    .wa-links a { padding: 6px 8px; font-size: 14px; }
}