/* Themed sites: shared skeleton. Loaded first; the layout file (docs.css, editorial.css, ...) follows in the same
   theme.css and carries each site's real look. Colours, fonts, radius and density arrive as CSS variables from the
   site's "theme" block (see themeVars in build.mjs). System fonts only, no JavaScript, no external requests.
   This file only resets what style.css does and gives every component a neutral default. */
:root { --maxw: 1080px; --d: var(--dens, 1); }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; }
a { color: var(--accent-ink); }
.wrap { max-width: var(--maxw); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.site-header :focus-visible { outline-color: var(--head-ink); }
.site-footer :focus-visible { outline-color: var(--foot-ink); }

/* header and wordmark */
.site-header { border: 0; border-bottom: 1px solid var(--line); background: var(--head-bg); color: var(--head-ink); }
.header-row { padding-top: 14px; padding-bottom: 14px; }
.brand { color: var(--head-ink); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-text { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.1; }
.logo-mark { height: 32px; width: 32px; flex: none; display: block; }
.site-header nav a { color: var(--head-ink); border-radius: var(--radius); }
.site-header nav a:hover { background: transparent; }
.site-header nav a[aria-current="page"] { background: transparent; color: var(--head-ink); }

/* hero (home) */
.t-hero { padding: calc(52px * var(--d)) 0 calc(40px * var(--d)); }
.t-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.t-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: 0 0 14px; letter-spacing: -.015em; }
.t-hero .lede { color: var(--muted); font-size: 1.12rem; margin: 0; max-width: 38em; }
.eyebrow { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.hero-panel { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 20px 22px; }
.hero-panel h2 { margin: 0 0 8px; font-size: 1rem; }
.hero-panel ul { margin: 0; padding-left: 1.1em; }
.hero-panel li { margin: .35em 0; }
.t-note { margin-bottom: 8px; }
.t-note .disclosure-note, .article .disclosure-note { margin: 18px 0; border-radius: var(--radius); }
.t-intro, .t-topics, .t-feature { padding-top: calc(24px * var(--d)); padding-bottom: calc(24px * var(--d)); }
.t-intro h2 { margin-top: 0; }
.t-topics > h2 { margin: 0 0 calc(18px * var(--d)); font-size: 1.5rem; }
.t-soon { color: var(--muted); font-size: .92rem; margin-top: 18px; }

/* entries (home lists) */
.entries { display: grid; gap: calc(20px * var(--d)); }
.entry { display: grid; gap: 10px; }
.entry-cover { display: block; overflow: hidden; background: var(--surface); }
.entry-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.entry-ph { display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.entry-body { min-width: 0; }
.entry-kicker { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.entry-no { font-variant-numeric: tabular-nums; }
.entry h3, .entry h4 { margin: 0 0 6px; font-size: 1.2rem; }
.entry h3 a, .entry h4 a, .feature h2 a { color: var(--ink); text-decoration: none; }
.entry h3 a:hover, .entry h4 a:hover, .feature h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.entry-ex { margin: 0 0 8px; color: var(--muted); font-size: .97rem; }
.entry-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--muted); }
.group-head h3 { margin: 0 0 4px; font-size: 1.2rem; }
.group-blurb { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.group { margin: 0 0 calc(34px * var(--d)); }
.feature { display: grid; gap: 18px; }
.feature-cover { display: block; overflow: hidden; }
.feature-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature h2 { margin: 0 0 10px; }

/* simple pages and articles */
.page, .article { max-width: 800px; padding-top: calc(36px * var(--d)); padding-bottom: calc(56px * var(--d)); }
.page h1, .article h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin: 0 0 14px; letter-spacing: -.015em; }
.page .prose h2, .article .prose h2 { font-size: 1.45rem; margin: 2em 0 .5em; }
.prose { max-width: 44rem; }
.article .art-head .eyebrow { margin-bottom: 8px; }
.meta { color: var(--muted); }
.art-cover { margin: 0 0 28px; }
.art-cover img { display: block; width: 100%; height: auto; object-fit: cover; }
.facts { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; }
.facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { margin: .3em 0; font-size: .92rem; }
.toc-title { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.table-wrap { border-radius: var(--radius); }
table { font-size: .95rem; }
thead th { background: var(--surface); color: var(--ink); }
tbody th { background: transparent; }
th, td { border-bottom-color: var(--line); }
.table-wrap { border-color: var(--line); }
code { background: var(--surface); }
blockquote { border-left-color: var(--accent); color: var(--muted); }
.faq { border-top-color: var(--line); }
.sources { border-top-color: var(--line); }
.cta-box { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); }
.cta-box a { color: var(--ink); text-decoration-color: var(--accent); }
.crumbs, .crumbs a, .crumbs li + li::before { color: var(--muted); }
.crumbs [aria-current="page"] { color: var(--ink); }
.draft-banner { border-radius: var(--radius); }
.shot img { border-color: var(--line); }
.shot figcaption { color: var(--muted); }
.demo-band { padding-top: calc(24px * var(--d)); padding-bottom: calc(24px * var(--d)); }
.demo-band .demo-intro { color: var(--muted); }
.demo-band .demo-link a { font-weight: 700; }

/* footer */
.site-footer { margin-top: calc(48px * var(--d)); background: var(--foot-bg); color: var(--foot-ink); border: 0; padding: 36px 0 26px; }
.site-footer .brand { color: var(--foot-ink); }
.site-footer a { color: var(--foot-ink); }
.site-footer nav a { color: var(--foot-ink); font-weight: 600; }
.footer-tag { color: var(--foot-ink); opacity: .86; }
.footer-disclosure { border-top: 1px solid color-mix(in srgb, var(--foot-ink) 28%, transparent); }
.footer-disclosure p { color: var(--foot-ink); opacity: .9; }
.footer-note { margin-top: 6px !important; font-size: .82rem !important; opacity: .78 !important; }

/* docs sidebar markup exists only on the docs layout; hidden everywhere else just in case */
.docs-toggle, .docs-toggle-label { display: none; }

@media (max-width: 860px) {
  .t-hero .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .page, .article { padding-top: 26px; padding-bottom: 40px; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .header-row { gap: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* CARDS layout (wmscostguide.com): calculator style. Cream page, chunky bordered keys and cards with hard offset
   shadows, rounded type, big display numerals used only as decoration. Green with a dark green outline. */
.theme-cards { --maxw: 1100px; font-size: 18px; line-height: 1.7; --key: 0 4px 0 var(--accent2); --card: 6px 6px 0 var(--accent2); }
.theme-cards h1, .theme-cards h2, .theme-cards h3, .theme-cards h4 { font-weight: 800; letter-spacing: -.025em; }

/* header: wordmark and nav are keys */
.theme-cards .site-header { background: var(--bg); border-bottom: 4px solid var(--accent2); }
.theme-cards .header-row { padding-top: 16px; padding-bottom: 18px; gap: 14px 24px; }
.theme-cards .brand:not(:has(.logo-mark)) .logo-text { display: inline-block; padding: 7px 16px 8px; background: var(--accent); color: #fff; border: 3px solid var(--accent2); border-radius: 14px; box-shadow: var(--key); font-size: 1.15rem; font-weight: 800; }
.theme-cards .brand:has(.logo-mark) .logo-text { font-size: 1.3rem; font-weight: 800; color: var(--accent2); }
.theme-cards .site-header nav { gap: 10px; }
.theme-cards .site-header nav a { padding: 6px 15px 7px; background: var(--surface); color: var(--ink); border: 3px solid var(--accent2); border-radius: 12px; box-shadow: var(--key); font-size: .92rem; font-weight: 800; transition: transform .08s ease, box-shadow .08s ease; }
.theme-cards .site-header nav a:hover { background: var(--x-tint); }
.theme-cards .site-header nav a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent2); }
.theme-cards .site-header nav a[aria-current="page"] { background: var(--accent); color: #fff; }

/* home */
.theme-cards .t-hero { padding: calc(52px * var(--d)) 0 calc(44px * var(--d)); }
.theme-cards .t-hero .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 44px; align-items: center; }
.theme-cards .eyebrow { display: inline-block; padding: 4px 14px; background: var(--x-tint); color: var(--accent2); border: 2px solid var(--accent2); border-radius: 99px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; }
.theme-cards .t-hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.5rem); line-height: 1; letter-spacing: -.035em; margin: 18px 0 18px; color: var(--ink); }
.theme-cards .t-hero .lede { font-size: 1.25rem; color: var(--muted); }
.theme-cards .hero-panel { background: var(--accent); border: 4px solid var(--accent2); border-radius: 28px; box-shadow: 0 8px 0 var(--accent2); padding: 18px; }
.theme-cards .hero-panel h2 { margin: 0 0 14px; padding: 12px 16px; background: var(--accent2); color: var(--x-cream2); border-radius: 14px; font-family: var(--font-mono); font-size: 1rem; font-weight: 600; letter-spacing: .02em; text-align: right; }
.theme-cards .hero-panel ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.theme-cards .hero-panel li { margin: 0; padding: 10px 14px; background: var(--surface); color: var(--ink); border: 3px solid var(--accent2); border-radius: 12px; box-shadow: var(--key); font-weight: 700; font-size: .98rem; line-height: 1.4; }
.theme-cards .t-intro .prose { font-size: 1.15rem; max-width: 46rem; }
.theme-cards .t-intro h2 { font-size: 1.9rem; }
.theme-cards .t-topics > h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 8px; }
.theme-cards .group { margin: 0 0 calc(44px * var(--d)); }
.theme-cards .group-head h3 { font-size: 1.5rem; }
.theme-cards .group-blurb { font-size: 1.05rem; }
.theme-cards .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 34px; padding-right: 6px; padding-bottom: 6px; }
.theme-cards .entry { position: relative; gap: 0; background: var(--surface); border: 3px solid var(--accent2); border-radius: 22px; box-shadow: var(--card); overflow: hidden; transition: transform .1s ease, box-shadow .1s ease; }
.theme-cards .entry:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--accent2); }
.theme-cards .entry-cover { aspect-ratio: 3 / 2; border-bottom: 3px solid var(--accent2); }
.theme-cards .entry-ph { background: var(--accent2); color: var(--x-cream2); justify-content: space-between; align-items: stretch; padding: 16px 20px; }
.theme-cards .ph-cat { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--x-cream2); opacity: .9; }
.theme-cards .ph-no { align-self: flex-end; font-family: var(--font-mono); font-size: 4.6rem; line-height: .9; font-weight: 600; color: var(--x-cream2); }
.theme-cards .entry-body { padding: 18px 22px 22px; }
.theme-cards .entry-kicker { color: var(--accent-ink); font-size: .74rem; letter-spacing: .08em; }
.theme-cards .entry-no { display: none; }
.theme-cards .entry h4 { font-size: 1.28rem; line-height: 1.2; }
.theme-cards .entry h4 a::after { content: ""; position: absolute; inset: 0; }
.theme-cards .entry-ex { font-size: .98rem; }
.theme-cards .entry-meta span { padding: 2px 10px; background: var(--x-tint); border-radius: 99px; color: var(--accent2); font-weight: 700; }

/* articles */
.theme-cards .article, .theme-cards .page { max-width: 880px; }
.theme-cards .crumbs { font-weight: 600; font-size: .88rem; }
.theme-cards .crumbs a { color: var(--accent-ink); }
.theme-cards .article h1, .theme-cards .page h1 { font-size: clamp(2.2rem, 5.5vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em; }
.theme-cards .meta { display: inline-block; padding: 4px 14px; background: var(--surface); border: 2px solid var(--accent2); border-radius: 99px; color: var(--ink); font-weight: 700; font-size: .84rem; }
.theme-cards .art-cover { margin: 22px 0 44px; border: 4px solid var(--accent2); border-radius: 26px; box-shadow: 8px 8px 0 var(--accent2); overflow: hidden; }
.theme-cards .art-cover img { aspect-ratio: 16 / 9; }
.theme-cards .prose { font-size: 1.1rem; line-height: 1.78; counter-reset: sec; }
.theme-cards .prose h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.1; margin: 2.2em 0 .6em; counter-increment: sec; }
.theme-cards .prose > h2::before { content: counter(sec); display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .5em; background: var(--accent); color: #fff; border: 3px solid var(--accent2); border-radius: .42em; box-shadow: 0 3px 0 var(--accent2); font-size: .72em; vertical-align: .12em; letter-spacing: 0; }
.theme-cards .prose h3 { font-size: 1.3rem; margin: 1.6em 0 .4em; }
.theme-cards .prose li::marker { color: var(--accent); font-weight: 800; }
.theme-cards .prose a { font-weight: 700; }
.theme-cards blockquote { margin: 1.6em 0; padding: 16px 22px; background: var(--x-tint); border: 3px solid var(--accent2); border-left-width: 10px; border-radius: 16px; color: var(--ink); font-weight: 600; }
.theme-cards .table-wrap { border: 3px solid var(--accent2); border-radius: 16px; background: var(--surface); box-shadow: 5px 5px 0 var(--accent2); margin: 1.6em 5px 1.9em 0; }
.theme-cards table { font-size: 1rem; }
.theme-cards thead th { background: var(--accent); color: #fff; font-weight: 800; border-bottom: 3px solid var(--accent2); }
.theme-cards tbody th { font-weight: 800; background: var(--x-cream2); }
.theme-cards tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--x-cream2) 40%, #fff); }
.theme-cards th, .theme-cards td { border-bottom: 2px solid var(--x-tint); }
.theme-cards .cta-box { background: var(--x-tint); border: 3px solid var(--accent2); border-radius: 22px; box-shadow: var(--card); padding: 22px 26px; margin: 3em 6px 8px 0; }
.theme-cards .cta-box a { font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.theme-cards .cta-box a:hover { text-decoration: underline; }
.theme-cards .faq { border-top: 4px solid var(--accent2); }
.theme-cards .faq h3 { font-size: 1.2rem; margin-top: 1.5em; }
.theme-cards .sources { border-top: 3px solid var(--accent2); }
.theme-cards .disclosure-note { background: var(--x-tint); border: 3px solid var(--accent2); border-radius: 16px; font-weight: 700; }
.theme-cards .shot img { border: 3px solid var(--accent2); border-radius: 14px; }
.theme-cards .demo-band h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.theme-cards .site-footer { margin-top: 64px; border-radius: 34px 34px 0 0; border-top: 6px solid var(--accent); }
.theme-cards .site-footer .logo-text { font-weight: 800; }

@media (max-width: 860px) {
  .theme-cards .entries { grid-template-columns: 1fr; padding-right: 6px; }
  .theme-cards .t-hero .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .theme-cards { font-size: 17px; }
  .theme-cards .site-header nav a { padding: 5px 11px 6px; font-size: .86rem; }
  .theme-cards .art-cover { box-shadow: 5px 5px 0 var(--accent2); border-radius: 20px; }
}