/* 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-warn-bg: rgba(245, 158, 11, 0.12);
    --hm-warn-text: #fde68a;
    --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; }
/* html.hm in front: without it "html.hm a" outweighs these and the nav links came out link pink,
   where the rest of the site's nav is light grey */
html.hm .wa-links a { color: var(--hm-on-dark); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: var(--hm-radius-sm); }
html.hm .wa-links a:hover { color: var(--hm-on-dark-strong); background: rgba(255, 255, 255, 0.06); text-decoration: none; }
html.hm .wa-links a.wa-cta { background: var(--hm-red); color: #fff; font-weight: 600; padding: 9px 18px; margin-left: 6px; }
html.hm .wa-links a.wa-cta:hover { background: var(--hm-red-dark); }

/* ---- the scene band and the title on it ---- */
/* at least as tall as the scene band, so on a short page the band does not reach over the footer's
   first line */
.wa-main { position: relative; z-index: 0; min-height: 340px; }
.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; }
/* WordPress drew the separator between two categories as a Material Symbols icon; that font is not
   loaded here, so it showed as a "MINIMIZE" pill. The gap already separates the pills. */
.entry-categories-inner .material-symbols-outlined { display: 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; }
/* some posts use h1 for their section headings (one has 44): sized like h2 so they do not outgrow the
   title; the empty h1 three posts carry takes no room */
.wa-content h1, .wa-content h2 { font-size: 1.6rem; line-height: 1.3; margin: 2em 0 0.6em; color: var(--hm-on-dark-strong); }
.wa-content h1:empty { display: none; }
.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); }
/* an image WordPress resized carries its pixel width and height inline; on a column narrower than
   that width the height has to follow, or the image is squashed (phones) */
.wa-content img[style*="width"][style*="height"] { height: auto !important; }
.wa-content figure { margin: 1.5em 0; }
.wa-content figcaption, .wa-content .wp-caption-text { color: var(--hm-muted); 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); }
/* cells keep whole words (the column's overflow-wrap: anywhere let a phone squeeze them to two
   letters a line); a table wider than the screen scrolls sideways instead */
.wa-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; display: block; overflow-x: auto; overflow-wrap: normal; }
.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); }
/* callouts written for WordPress's light theme carry a light inline background: on the dark page
   they become the raised card, the orange ones the warn panel (as site-dark.css does for the same
   boxes on the CMS pages); their coloured left border stays */
.wa-content :is([style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"]):not(a):not(img) {
    background: var(--hm-card-2) !important; color: var(--hm-text) !important;
}
.wa-content :is([style*="background:#fff5e8"], [style*="background: #fff5e8"]):not(a):not(img) { background: var(--hm-warn-bg) !important; color: var(--hm-warn-text) !important; }
.wa-content :is([style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"]) a { color: var(--hm-link) !important; }
.wa-content mark { background: rgba(245, 158, 11, 0.22); color: var(--hm-warn-text); padding: 0 0.15em; border-radius: 3px; }
/* WordPress button blocks: the site's red button */
.wa-content .wp-block-buttons { margin: 1.4em 0; }
.wa-content .wp-block-button__link { display: inline-block; background: var(--hm-red); color: #fff; font-weight: 600; line-height: 1.4; padding: 11px 24px; border-radius: var(--hm-radius-sm); text-decoration: none; }
.wa-content .wp-block-button__link:hover { background: var(--hm-red-dark); text-decoration: none; }
#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-muted); 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; }
    html.hm .wa-links a { padding: 6px 8px; font-size: 14px; }
}