/* 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; } }

/* NOTEBOOK layout (wmsforsmallbusiness.com): one narrow column on ruled paper with a margin line and punched holes,
   hand-written accents, taped polaroid covers, sticky-note panels. Terracotta on cream, no sidebar. */
.theme-notebook { --maxw: 780px; font-size: 18px; line-height: 32px; background: var(--bg); }
.theme-notebook h1, .theme-notebook h2, .theme-notebook h3, .theme-notebook h4 { font-weight: 800; letter-spacing: -.015em; line-height: 1.22; }
.theme-notebook .hand, .theme-notebook .eyebrow, .theme-notebook .entry-kicker, .theme-notebook .entry-meta, .theme-notebook .crumbs, .theme-notebook .meta { font-family: var(--font-hand); }

/* header: handwritten name, slash nav, no bar */
.theme-notebook .site-header { background: transparent; border: 0; }
.theme-notebook .site-header .wrap { max-width: 780px; }
.theme-notebook .header-row { padding-top: 26px; padding-bottom: 8px; gap: 8px 24px; }
.theme-notebook .logo-text { font-family: var(--font-hand); font-size: 1.9rem; font-weight: 700; letter-spacing: 0; color: var(--accent-ink); }
.theme-notebook .site-header nav { gap: 0; }
.theme-notebook .site-header nav a { padding: 4px 8px; font-size: .95rem; font-weight: 700; color: var(--ink); border-radius: 0; text-decoration: none; }
.theme-notebook .site-header nav a + a::before { content: "/"; margin-right: 16px; margin-left: -8px; color: var(--accent-ink); font-weight: 400; }
.theme-notebook .site-header nav a:hover { color: var(--accent-ink); }
.theme-notebook .site-header nav a[aria-current="page"] { text-decoration: underline wavy var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; }

/* the paper */
.theme-notebook main { position: relative; max-width: 780px; margin: 14px auto 0; padding: 40px 44px 52px 104px; background-color: var(--surface); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 1px 0 var(--line), 5px 6px 0 -1px rgba(120, 80, 50, .12);
  background-image:
    radial-gradient(circle at 30px 90px, var(--bg) 0 9px, rgba(120, 80, 50, .28) 9px 10px, transparent 10px),
    radial-gradient(circle at 30px 50%, var(--bg) 0 9px, rgba(120, 80, 50, .28) 9px 10px, transparent 10px),
    radial-gradient(circle at 30px calc(100% - 90px), var(--bg) 0 9px, rgba(120, 80, 50, .28) 9px 10px, transparent 10px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--x-rule) 31px 32px);
  background-position: 0 0, 0 0, 0 0, 0 16px; }
.theme-notebook main::before { content: ""; position: absolute; left: 76px; top: 0; bottom: 0; border-left: 2px solid var(--x-margin); }
.theme-notebook main .wrap { max-width: none; padding: 0; margin: 0; }
.theme-notebook .page, .theme-notebook .article { padding: 0; max-width: none; }
.theme-notebook main p, .theme-notebook main li { margin-top: 0; margin-bottom: 0; }

/* home */
.theme-notebook .t-hero { padding: 0 0 16px; }
.theme-notebook .t-hero .hero-grid { grid-template-columns: 1fr; gap: 20px; }
.theme-notebook .eyebrow { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent-ink); margin: 0; }
.theme-notebook .t-hero h1 { font-size: clamp(2rem, 5.2vw, 2.9rem); line-height: 1.15; margin: 0 0 16px; text-wrap: balance; }
.theme-notebook .t-hero .lede { font-size: 1.1rem; line-height: 32px; color: var(--muted); }
.theme-notebook .hero-panel { position: relative; margin: 14px 0 6px; padding: 26px 26px 18px; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border: 0; border-radius: 2px; box-shadow: 3px 4px 0 rgba(120, 80, 50, .2); transform: rotate(-.8deg); }
.theme-notebook .hero-panel::before, .theme-notebook .art-cover::before, .theme-notebook .entry-cover::before { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: color-mix(in srgb, var(--accent) 30%, transparent); transform: rotate(-3deg); }
.theme-notebook .hero-panel h2 { margin: 0 0 6px; font-family: var(--font-hand); font-size: 1.35rem; font-weight: 700; }
.theme-notebook .hero-panel ul { list-style: none; padding: 0; margin: 0; }
.theme-notebook .hero-panel li { position: relative; padding-left: 24px; line-height: 28px; margin: 6px 0; }
.theme-notebook .hero-panel li::before { content: "\2013"; position: absolute; left: 4px; color: var(--accent-ink); font-weight: 800; }
.theme-notebook .t-note { padding-top: 14px; }
.theme-notebook .disclosure-note { margin: 0; padding: 12px 16px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 0; border-left: 4px solid var(--accent); border-radius: 2px; font-size: .96rem; line-height: 26px; font-weight: 600; }
.theme-notebook .t-intro, .theme-notebook .t-topics, .theme-notebook .t-feature, .theme-notebook .demo-band { padding-top: 16px; padding-bottom: 16px; }
.theme-notebook .t-intro h2, .theme-notebook .demo-band h2, .theme-notebook .t-topics > h2 { font-size: 1.55rem; margin: 20px 0 10px; text-decoration: underline wavy var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.theme-notebook .t-intro .prose p { margin-bottom: 32px; }
.theme-notebook .prose { max-width: none; }
.theme-notebook .entries { gap: 0; display: block; }
.theme-notebook .entry { display: block; position: relative; padding: 22px 0 20px; border-bottom: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--surface)); overflow: hidden; }
.theme-notebook .entry:last-child { border-bottom: 0; }
.theme-notebook .entry-cover { position: relative; float: right; width: 196px; margin: 4px 6px 12px 22px; padding: 8px 8px 28px; background: #fff; box-shadow: 2px 3px 0 rgba(120, 80, 50, .22), 0 0 0 1px rgba(120, 80, 50, .12); transform: rotate(2deg); overflow: visible; }
.theme-notebook .entry:nth-child(even) .entry-cover { float: left; margin: 4px 22px 12px 6px; transform: rotate(-2deg); }
.theme-notebook .entry-cover img { aspect-ratio: 4 / 3; height: auto; }
.theme-notebook .entry-kicker { font-size: 1.1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent-ink); gap: 8px; margin-bottom: 0; }
.theme-notebook .entry-no::before { content: "No. "; }
.theme-notebook .entry h3, .theme-notebook .entry h4 { font-size: 1.4rem; margin: 0 0 6px; line-height: 1.25; }
.theme-notebook .entry h3 a { color: var(--ink); text-decoration: none; }
.theme-notebook .entry h3 a:hover { text-decoration: underline wavy var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.theme-notebook .entry-ex { font-size: 1rem; line-height: 28px; margin: 0 0 6px; }
.theme-notebook .entry-meta { font-size: 1.02rem; color: var(--muted); }

/* articles */
.theme-notebook .crumbs { font-size: 1rem; margin-bottom: 8px; }
.theme-notebook .crumbs a { color: var(--accent-ink); }
.theme-notebook .art-head .eyebrow { margin-bottom: 0; }
.theme-notebook .article h1, .theme-notebook .page h1 { font-size: clamp(2rem, 5.2vw, 2.8rem); line-height: 1.15; margin: 4px 0 14px; text-wrap: balance; }
.theme-notebook .meta { font-size: 1.1rem; margin-bottom: 18px; color: var(--muted); }
.theme-notebook .art-cover { position: relative; width: min(100%, 520px); margin: 26px auto 42px; padding: 12px 12px 46px; background: #fff; box-shadow: 3px 4px 0 rgba(120, 80, 50, .22), 0 0 0 1px rgba(120, 80, 50, .12); transform: rotate(-1.2deg); }
.theme-notebook .art-cover img { aspect-ratio: 4 / 3; }
.theme-notebook .prose p, .theme-notebook .prose ul, .theme-notebook .prose ol { margin-bottom: 32px; }
.theme-notebook .prose li { margin: 0; }
.theme-notebook .prose h2 { font-size: 1.6rem; margin: 52px 0 16px; text-decoration: underline wavy var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.theme-notebook .prose h3 { font-size: 1.25rem; margin: 36px 0 8px; color: var(--accent-ink); }
.theme-notebook .prose ul { list-style: none; padding-left: 26px; }
.theme-notebook .prose ul > li { position: relative; }
.theme-notebook .prose ul > li::before { content: "\2013"; position: absolute; left: -22px; color: var(--accent-ink); font-weight: 800; }
.theme-notebook .prose ol { padding-left: 30px; }
.theme-notebook .prose ol > li::marker { color: var(--accent-ink); font-weight: 800; }
.theme-notebook .prose a { text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.theme-notebook blockquote { margin: 0 0 32px; padding: 6px 0 6px 22px; border-left: 3px solid var(--accent); background: transparent; color: var(--ink); font-family: var(--font-hand); font-size: 1.35rem; line-height: 30px; transform: rotate(-.5deg); }
.theme-notebook .table-wrap { margin: 0 0 32px; background: var(--surface); border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--surface)); border-radius: 3px; }
.theme-notebook table { font-size: .9rem; line-height: 22px; min-width: 460px; }
.theme-notebook th, .theme-notebook td { padding: 7px 12px; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.theme-notebook thead th { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); font-weight: 800; }
.theme-notebook tbody th { font-weight: 700; background: transparent; }
.theme-notebook code { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-size: .88em; }
.theme-notebook .cta-box { margin: 52px 0 32px; padding: 18px 22px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 2px dashed var(--accent); border-radius: 3px; transform: rotate(.4deg); }
.theme-notebook .cta-box a { font-size: 1.04rem; line-height: 28px; font-weight: 700; text-decoration: underline wavy var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.theme-notebook .faq { border-top: 0; margin-top: 52px; }
.theme-notebook .faq h3 { font-size: 1.15rem; margin: 26px 0 0; line-height: 28px; }
.theme-notebook .faq h3::before { content: "Q: "; font-family: var(--font-hand); color: var(--accent-ink); font-size: 1.2em; }
.theme-notebook .faq p { margin-bottom: 8px; }
.theme-notebook .sources { border-top: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--surface)); margin-top: 40px; font-size: .94rem; }
.theme-notebook .sources h2 { text-decoration: none; font-size: 1.15rem; margin: 18px 0 6px; font-family: var(--font-hand); }
.theme-notebook .sources li { line-height: 26px; }
.theme-notebook .shot img { border: 8px solid #fff; border-radius: 0; box-shadow: 2px 3px 0 rgba(120, 80, 50, .22); }
.theme-notebook .shot figcaption { font-family: var(--font-hand); font-size: 1.02rem; line-height: 22px; }
.theme-notebook .demo-band .demo-intro { line-height: 28px; }

/* footer: quiet, centred */
.theme-notebook .site-footer { margin-top: 40px; padding: 28px 0 34px; border-top: 2px dotted var(--accent); text-align: center; }
.theme-notebook .site-footer .footer-grid { flex-direction: column; align-items: center; gap: 12px; }
.theme-notebook .site-footer nav { justify-content: center; }
.theme-notebook .site-footer .logo-text { font-size: 1.6rem; color: var(--accent-ink); }
.theme-notebook .footer-tag { margin: 4px auto 0; }
.theme-notebook .footer-disclosure { border-top: 0; margin-top: 8px; padding-top: 0; }

@media (max-width: 700px) {
  .theme-notebook main { margin: 10px 10px 0; padding: 28px 18px 40px 48px; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--x-rule) 31px 32px); background-position: 0 16px; }
  .theme-notebook main::before { left: 34px; }
  .theme-notebook .entry-cover, .theme-notebook .entry:nth-child(even) .entry-cover { float: none; width: min(100%, 300px); margin: 6px auto 20px; }
  .theme-notebook .art-cover { width: 100%; padding-bottom: 34px; }
  .theme-notebook .site-header .wrap { padding: 0 20px; }
  .theme-notebook .logo-text { font-size: 1.6rem; }
}