:root { color-scheme: light dark; --ink: #14181d; --muted: #5a646f; --line: #dfe3e8; --bg: #ffffff; --accent: #1668d6; --font-size: 17px; --measure: 46rem; }
@media (prefers-color-scheme: dark) { :root { --ink: #e8ecf1; --muted: #9aa4b0; --line: #2b3238; --bg: #14181d; --accent: #6aa8ff; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--font-size)/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--accent); }
.shell { max-width: var(--measure); margin: 0 auto; padding: 0 1.15rem; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem .75rem; border: 1px solid var(--line); }
.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; }
.site-header { border-bottom: 1px solid var(--line); }
.site-header .shell { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: baseline; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
.site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-header nav a { text-decoration: none; color: var(--muted); }
.site-header nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tagline { color: var(--muted); margin: .75rem auto 0; max-width: var(--measure); }
main { padding: 1.5rem 1.15rem 3rem; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: .5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 .35rem; }
h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.lede { color: var(--muted); font-size: 1.05rem; margin-top: 0; }
.section-title { margin-top: 2rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; }
.card h2 a, .card h3 a { text-decoration: none; }
/* A search result is one row: the small cover the article already has, then the
   category, title, summary and date. The panel around the list is what a
   template restyles, so the row itself is the same in every template and does
   not borrow the card the templates draw for a listing. */
.search-results { grid-template-columns: minmax(0, 1fr); gap: 0; }
.search-hit { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.search-hit:last-child { border-bottom: 0; }
.search-hit-media { display: block; width: 100%; border-radius: 8px; overflow: hidden; background: rgba(127, 127, 127, .12); }
.search-hit-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.search-hit-body { min-width: 0; }
/* When any row in the list has a picture, every row keeps a column for it, so a
   title still lines up with the titles around it. A blog whose articles have no
   covers indents nothing. */
.search-results.has-media .search-hit { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: start; gap: 0 1rem; }
.search-results.has-media .search-hit-body { grid-column: 2; }
.search-hit h2 { margin: 0; }
.search-hit h2 a { text-decoration: none; }
.search-hit h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.search-hit-summary { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }
.search-hit .meta { margin: .35rem 0 0; }
.meta { color: var(--muted); font-size: .9rem; margin: .2rem 0 .5rem; }
.terms { margin: .6rem 0 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .1rem .6rem; font-size: .82rem; text-decoration: none; color: var(--muted); }
.prose { margin-top: 1.5rem; }
.prose img { max-width: 100%; height: auto; }
.prose pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(127,127,127,.08); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; }
.prose blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--line); color: var(--muted); }
.cover { width: 100%; height: auto; border-radius: 10px; margin-top: 1rem; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; color: var(--muted); }
.related { margin-top: 2.5rem; }
.back { margin-top: 2rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--muted); font-size: .92rem; }
body[data-header="centered"] .site-header .shell { flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
body[data-header="centered"] .site-header nav { justify-content: center; }
body[data-header="centered"] .tagline { text-align: center; }
.site-footer p { margin: .2rem 0; }
.muted { color: var(--muted); }
.contact-form, .subscribe-form { display: grid; gap: .75rem; margin: 1.5rem 0; max-width: 32rem; }
.contact-form label, .subscribe-form label { display: grid; gap: .3rem; font-size: .95rem; }
.contact-form input, .contact-form textarea, .subscribe-form input { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }
.contact-form button, .subscribe-form button { font: inherit; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; justify-self: start; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Templates ------------------------------------------------------------------
   One stylesheet serves every template. A blog that chose nothing reads the
   rules above and nothing else, because every block below is scoped to a
   layout name. A template that has to draw a different page names its layout
   on the body, and these rules restyle exactly the same markup. */
body[data-layout="modern"] {
  --surface: #f6f7f9;
  --surface-2: #eceef2;
  --header-bg: rgba(255, 255, 255, .86);
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(16, 20, 27, .05), 0 14px 34px -20px rgba(16, 20, 27, .3);
  --accent-soft: rgba(232, 61, 33, .12);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  body[data-layout="modern"] {
    --surface: #15181e;
    --surface-2: #1d2128;
    --header-bg: rgba(20, 24, 29, .86);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -24px rgba(0, 0, 0, .9);
  }
}
body[data-layout="modern"] ::selection { background: var(--accent-soft); }
body[data-layout="modern"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
body[data-layout="modern"] .shell { max-width: 74rem; }
body[data-layout="modern"] main { padding: 1.8rem 1.25rem 4.5rem; }

/* The header sticks to the top of the window and blurs what passes under it. */
body[data-layout="modern"] .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); }
body[data-layout="modern"] .site-header .shell { display: flex; align-items: center; gap: 1.25rem; min-height: 4.2rem; padding-top: .7rem; padding-bottom: .7rem; }
body[data-layout="modern"] .brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.06rem; font-weight: 720; letter-spacing: -.03em; }
body[data-layout="modern"] .brand::before { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 9px; background: linear-gradient(140deg, var(--accent), var(--ink)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
body[data-layout="modern"] .site-header nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
body[data-layout="modern"] .site-header nav a { padding: .45rem .75rem; border-radius: 999px; color: var(--muted); font-size: .93rem; font-weight: 550; }
body[data-layout="modern"] .site-header nav a:hover { background: var(--surface); color: var(--ink); }
body[data-layout="modern"] .site-header nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
/* The menu collapses into a button on a narrow screen. The script decides
   that: it marks the header, and the button and the collapsed menu exist only
   under that mark, so a browser that never runs the script keeps the menu as a
   wrapping row rather than losing it. */
body[data-layout="modern"] .menu-toggle { display: none; align-items: center; gap: .5rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
body[data-layout="modern"] .menu-icon { width: 1.15rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body[data-layout="modern"] .menu-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) {
  body[data-layout="modern"] .site-header .shell { flex-wrap: wrap; gap: .2rem .9rem; }
  body[data-layout="modern"] .site-header nav { width: 100%; margin-left: 0; padding-bottom: .1rem; }
  body[data-layout="modern"] .site-header[data-menu] .menu-toggle { display: inline-flex; margin-left: auto; }
  body[data-layout="modern"] .site-header[data-menu] nav { display: none; }
  body[data-layout="modern"] .site-header[data-menu="open"] { position: static; background: var(--bg); }
  body[data-layout="modern"] .site-header[data-menu="open"] nav { display: flex; flex-direction: column; align-items: stretch; gap: .1rem; padding: .35rem 0 .6rem; }
  body[data-layout="modern"] .site-header[data-menu="open"] nav a { padding: .7rem .85rem; border-radius: 12px; font-size: 1rem; }
}

/* Home: a short hero, then the newest article as a lead story. */
body[data-layout="modern"] .hero { max-width: 46rem; padding: 2.8rem 0 1.4rem; }
body[data-layout="modern"] .hero h1 { margin: .2rem 0 .9rem; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; }
body[data-layout="modern"] .hero .lede { max-width: 40rem; margin: 0; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); line-height: 1.5; }
body[data-layout="modern"] .page-count { margin: 1.1rem 0 0; color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
body[data-layout="modern"] .lead { display: grid; gap: 1.5rem; align-items: center; margin: 2.2rem 0 .5rem; }
body[data-layout="modern"] .lead-media { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
body[data-layout="modern"] .lead-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
body[data-layout="modern"] .lead-body { display: grid; gap: .65rem; align-content: center; min-width: 0; }
body[data-layout="modern"] .lead h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
body[data-layout="modern"] .lead h2 a { text-decoration: none; }
body[data-layout="modern"] .lead h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
body[data-layout="modern"] .lead-summary { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
body[data-layout="modern"] .lead .meta { margin: 0; }
@media (min-width: 880px) {
  body[data-layout="modern"] .lead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.6rem; margin-top: 2.6rem; }
}

/* Listing pages: the term, how much is here, and the ways into it. */
body[data-layout="modern"] .list-head { padding: 1.4rem 0 0; }
body[data-layout="modern"] .list-head h1 { margin: .5rem 0 0; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem); line-height: 1.1; letter-spacing: -.035em; }
body[data-layout="modern"] .list-head .page-count { margin-top: .5rem; }
body[data-layout="modern"] .breadcrumb { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .85rem; }
body[data-layout="modern"] .breadcrumb a { color: var(--muted); text-decoration: none; }
body[data-layout="modern"] .breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
body[data-layout="modern"] .term-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.6rem 0 .2rem; }
body[data-layout="modern"] .chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: .25rem .7rem; color: var(--muted); font-size: .82rem; text-decoration: none; }
body[data-layout="modern"] .chip:hover { border-color: var(--ink); color: var(--ink); }
body[data-layout="modern"] .term-row .chip[aria-current="page"] { border-color: transparent; background: var(--accent); color: #fff; font-weight: 600; }
body[data-layout="modern"] .chip-count { margin-left: .45rem; font-size: .78em; opacity: .65; font-variant-numeric: tabular-nums; }

/* Cards: one image, one category, a title and the date. */
body[data-layout="modern"] .section-title { margin: 2.6rem 0 1.1rem; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body[data-layout="modern"] .cards { grid-template-columns: minmax(0, 1fr); gap: 2.2rem 1.6rem; margin-top: 1.3rem; }
body[data-layout="modern"] .card { display: grid; align-content: start; gap: .7rem; min-width: 0; border: 0; border-radius: 0; padding: 0; }
body[data-layout="modern"] .card p { margin: 0; }
body[data-layout="modern"] .card-media { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
body[data-layout="modern"] .card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
body[data-layout="modern"] .card-media:hover img { transform: scale(1.04); }
body[data-layout="modern"] .card h2 { margin: 0; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
body[data-layout="modern"] .card h2 a { text-decoration: none; }
body[data-layout="modern"] .card h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
body[data-layout="modern"] .card-summary { color: var(--muted); font-size: .96rem; line-height: 1.55; }
body[data-layout="modern"] .card .meta { font-size: .86rem; }
body[data-layout="modern"] .eyebrow { margin: 0; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body[data-layout="modern"] .eyebrow a { color: inherit; text-decoration: none; }
body[data-layout="modern"] .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  body[data-layout="modern"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  body[data-layout="modern"] .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The numbered pager, with the pages either side of this one. */
body[data-layout="modern"] .pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
body[data-layout="modern"] .pager-step { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .92rem; font-weight: 550; white-space: nowrap; text-decoration: none; }
body[data-layout="modern"] .pager-step:hover { color: var(--ink); }
body[data-layout="modern"] .pager-off { opacity: .4; }
body[data-layout="modern"] .pager-pages { display: flex; align-items: center; gap: .2rem; margin: 0 auto; padding: 0; list-style: none; }
body[data-layout="modern"] .pager-pages a { display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: 10px; color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; text-decoration: none; }
body[data-layout="modern"] .pager-pages a:hover { background: var(--surface); color: var(--ink); }
body[data-layout="modern"] .pager-pages a[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 650; }
body[data-layout="modern"] .pager-gap { color: var(--muted); padding: 0 .1rem; }
@media (max-width: 560px) {
  body[data-layout="modern"] .pager { flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; }
  body[data-layout="modern"] .pager-pages { order: -1; flex-basis: 100%; justify-content: center; margin: 0; }
  body[data-layout="modern"] .pager-step { flex: 1 1 auto; justify-content: center; }
}

/* One article: a reading column inside a wider page. */
body[data-layout="modern"] main.main-article { max-width: calc(var(--measure) + 7rem); }
body[data-layout="modern"] .post { padding-top: 1.4rem; }
body[data-layout="modern"] .post-head { margin-bottom: 1.7rem; }
body[data-layout="modern"] .post-head h1 { margin: .7rem 0 .9rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
body[data-layout="modern"] .post-head .lede { margin: 0 0 1.1rem; color: var(--muted); font-size: 1.14rem; line-height: 1.55; }
body[data-layout="modern"] .post-head .meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: .9rem; }
body[data-layout="modern"] .post-cover { margin: 0 0 2.2rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
body[data-layout="modern"] .post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
body[data-layout="modern"] .post .terms { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
body[data-layout="modern"] .post-foot { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
body[data-layout="modern"] .terms-label { margin-right: .55rem; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body[data-layout="modern"] .prose { margin-top: 0; font-size: 1.02rem; line-height: 1.78; overflow-wrap: break-word; }
body[data-layout="modern"] .prose p { margin: 0 0 1.2rem; }
body[data-layout="modern"] .prose h2 { margin: 2.4rem 0 .8rem; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.025em; }
body[data-layout="modern"] .prose h3 { margin: 1.9rem 0 .6rem; font-size: 1.22rem; letter-spacing: -.02em; }
body[data-layout="modern"] .prose h4 { margin: 1.6rem 0 .5rem; font-size: 1.06rem; }
body[data-layout="modern"] .prose ul, body[data-layout="modern"] .prose ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }
body[data-layout="modern"] .prose li { margin-bottom: .45rem; }
body[data-layout="modern"] .prose a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
body[data-layout="modern"] .prose a:hover { color: var(--accent); }
body[data-layout="modern"] .prose code { padding: .12em .4em; border-radius: 6px; background: var(--surface-2); font-size: .88em; }
body[data-layout="modern"] .prose pre { margin: 1.5rem 0; padding: 1.05rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: .9rem; line-height: 1.62; }
body[data-layout="modern"] .prose pre code { padding: 0; background: none; font-size: 1em; }
body[data-layout="modern"] .prose blockquote { margin: 1.6rem 0; padding: .1rem 0 .1rem 1.2rem; border-left: 3px solid var(--accent); color: var(--muted); font-size: 1.05rem; }
body[data-layout="modern"] .prose blockquote p:last-child { margin-bottom: 0; }
body[data-layout="modern"] .prose hr { margin: 2.2rem 0; border: 0; border-top: 1px solid var(--line); }
body[data-layout="modern"] .prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 1.5rem 0; }
body[data-layout="modern"] .prose th, body[data-layout="modern"] .prose td { padding: .6rem .85rem; border: 1px solid var(--line); }
body[data-layout="modern"] .prose th { background: var(--surface); }
body[data-layout="modern"] .prose img { max-width: 100%; height: auto; border-radius: 14px; }
body[data-layout="modern"] .prose .inline-image { margin: 2rem 0; }
body[data-layout="modern"] .prose .inline-image img { width: 100%; }
body[data-layout="modern"] .related { margin-top: 3.4rem; }
body[data-layout="modern"] .related .section-title { margin-top: 0; }
body[data-layout="modern"] .related .cards { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
@media (min-width: 640px) {
  body[data-layout="modern"] .related .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-layout="modern"] .subscribe-panel { margin-top: 3.4rem; padding: 1.7rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
body[data-layout="modern"] .subscribe-panel .section-title { margin-top: 0; }
body[data-layout="modern"] .back { margin-top: 2.4rem; font-size: .92rem; }
body[data-layout="modern"] .back a { color: var(--muted); text-decoration: none; }
body[data-layout="modern"] .back a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Forms and the footer, on every page of the blog. */
body[data-layout="modern"] .contact-form, body[data-layout="modern"] .subscribe-form { gap: .85rem; max-width: 30rem; }
body[data-layout="modern"] .contact-form input, body[data-layout="modern"] .contact-form textarea, body[data-layout="modern"] .subscribe-form input { padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
body[data-layout="modern"] .contact-form input:focus-visible, body[data-layout="modern"] .contact-form textarea:focus-visible, body[data-layout="modern"] .subscribe-form input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
body[data-layout="modern"] .contact-form button, body[data-layout="modern"] .subscribe-form button { padding: .6rem 1.4rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #fff; font-weight: 620; }
body[data-layout="modern"] .field-help { color: var(--muted); font-size: .9rem; }
body[data-layout="modern"] .site-footer { margin-top: 4rem; padding: 2.2rem 0 2.6rem; font-size: .92rem; }
body[data-layout="modern"] .site-footer .shell { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }
body[data-layout="modern"] .site-footer p { margin: 0; }
body[data-layout="modern"] .footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-left: auto; }
body[data-layout="modern"] .footer-nav a { color: var(--muted); text-decoration: none; }
body[data-layout="modern"] .footer-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 620px) {
  body[data-layout="modern"] .footer-nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-layout="modern"] .card-media img { transition: none; }
  body[data-layout="modern"] .card-media:hover img { transform: none; }
}
body[data-layout="modern"] .nav-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
body[data-layout="modern"] .site-header nav a.nav-search { display: inline-flex; align-items: center; gap: .4rem; }

/* Search opens over the page. On a wide screen it is a panel in the middle of
   the window; on a narrow one it hangs under the header, at the edge the
   reader's thumb is already near, and the page behind it stops scrolling. */
/* The panel is anchored near the top of the window rather than centred, so the
   field does not move down the screen while the reader is typing into it and
   the answer underneath grows and shrinks. */
body[data-layout="modern"] .search-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: min(76vh, 40rem); margin: 9vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink); box-shadow: 0 40px 90px -40px rgba(10, 14, 20, .55); }
body[data-layout="modern"] .search-dialog::backdrop { background: rgba(10, 14, 20, .45); backdrop-filter: blur(2px); }
body[data-layout="modern"] .search-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; animation: search-panel .18s ease-out; }
@keyframes search-panel {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
body[data-layout="modern"] .search-form { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
body[data-layout="modern"] .search-icon { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; }
body[data-layout="modern"] .search-form input { flex: 1 1 auto; min-width: 0; padding: .45rem .1rem; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 1.15rem; }
body[data-layout="modern"] .search-form input::placeholder { color: var(--muted); }
body[data-layout="modern"] .search-close { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
body[data-layout="modern"] .search-close:hover { border-color: var(--ink); color: var(--ink); }
body[data-layout="modern"] .search-close-icon { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body[data-layout="modern"] .search-status { margin: 0; padding: 1rem 1.25rem 0; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
body[data-layout="modern"] .search-results { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: .5rem .8rem .6rem; overflow: auto; overscroll-behavior: contain; }
body[data-layout="modern"] .search-results .search-hit { padding: .8rem .6rem; border-bottom: 0; border-radius: 14px; }
body[data-layout="modern"] .search-results.has-media .search-hit { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0 1rem; }
body[data-layout="modern"] .search-results .search-hit:hover { background: var(--surface); }
body[data-layout="modern"] .search-results .search-hit-media { border-radius: 10px; background: var(--surface-2); }
body[data-layout="modern"] .search-results .search-hit h2 { font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; }
body[data-layout="modern"] .search-results .search-hit h2 a:hover { text-decoration-thickness: 2px; text-underline-offset: 4px; }
body[data-layout="modern"] .search-results .search-hit .eyebrow { margin: 0 0 .2rem; font-size: .68rem; }
body[data-layout="modern"] .search-results .search-hit-summary { font-size: .9rem; line-height: 1.5; }
body[data-layout="modern"] .search-results .search-hit .meta { font-size: .78rem; }
body[data-layout="modern"] .search-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .8rem 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
body[data-layout="modern"] .search-hint kbd { padding: .1rem .35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font: inherit; font-size: .95em; }
body[data-layout="modern"] .search-all { color: var(--accent); font-weight: 600; text-decoration: none; }
body[data-layout="modern"] .search-all:hover { text-decoration: underline; text-underline-offset: 4px; }
/* The panel covers the page, so the page behind it does not scroll away. */
html:has(.search-dialog[open]) { overflow: hidden; }
@media (max-width: 640px) {
  body[data-layout="modern"] .search-dialog { width: 100vw; max-width: none; max-height: calc(100vh - var(--header-height, 0px) - 1.5rem); max-height: calc(100dvh - var(--header-height, 0px) - 1.5rem); margin: var(--header-height, 0px) 0 auto; border-width: 0 0 1px; border-radius: 0 0 20px 20px; }
  body[data-layout="modern"] .search-results.has-media .search-hit { grid-template-columns: 3.8rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-layout="modern"] .search-dialog[open] { animation: none; }
}