/*
Theme Name: Notion Garden
Author: 月火
Description: A calm, high-performance Full Site Editing personal knowledge garden.
Version: 2.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: notion-garden
*/

:root { --ng-shadow: 0 8px 24px rgba(41, 39, 37, .06); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 90px; }
body.admin-bar [id] { scroll-margin-top: 122px; }
html[lang="zh-CN"] body, html[lang^="zh"] body { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html[lang="ja"] body, html[lang^="ja"] body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; }
body { overflow-x: hidden; }
a { text-underline-offset: .16em; }
.ng-site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--wp--preset--color--border); }
/* FSE adds a one-row template-part wrapper: make the wrapper sticky as well. */
.wp-block-template-part:has(> .ng-site-header) { position: sticky; top: 0; z-index: 20; }
body.admin-bar .wp-block-template-part:has(> .ng-site-header) { top: 32px; }
@media (max-width: 782px) { body.admin-bar .wp-block-template-part:has(> .ng-site-header) { top: 46px; } }
.ng-header-inner { min-height: 58px; }
.ng-header-brand { flex-shrink: 1; min-width: 0; }
.ng-header-icon { flex: 0 0 28px; line-height: 0; }
.ng-header-icon a { display: block; border-radius: 6px; }
.ng-header-icon img { display: block; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.ng-header-icon a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }
.ng-header-brand .ng-breadcrumb { white-space: nowrap; }
.ng-breadcrumb { color: var(--wp--preset--color--muted); font-size: .86rem; letter-spacing: .01em; }
.ng-breadcrumb strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.ng-search-button { appearance: none; background: transparent; border: 1px solid var(--wp--preset--color--border); border-radius: 4px; color: var(--wp--preset--color--muted); cursor: pointer; font: inherit; font-size: .78rem; line-height: 1; padding: .34rem .45rem; white-space: nowrap; }
.ng-search-button:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.ng-search-dialog { width: min(calc(100vw - 32px), 460px); max-width: none; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 0; background: rgba(248,246,241,.9); -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); box-shadow: 0 12px 40px rgba(41,39,37,.12); color: var(--wp--preset--color--contrast); }
.ng-search-dialog::backdrop { background: rgba(41,39,37,.16); -webkit-backdrop-filter: blur(10px) saturate(85%); backdrop-filter: blur(10px) saturate(85%); }
.ng-search-form { align-items: center; display: flex; gap: 8px; margin: 0; padding: 10px; }
.ng-search-form input { flex: 1 1 0; min-width: 0; width: 100%; height: 34px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 4px; color: var(--wp--preset--color--contrast); font-family: inherit; font-size: 13px; line-height: 20px; margin: 0; padding: 6px 9px; }
.ng-search-form input:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }
.ng-search-form button { flex: 0 0 auto; border: 0; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; height: 34px; line-height: 20px; margin: 0; transition: background-color .16s ease, color .16s ease; white-space: nowrap; }
.ng-search-submit { background: var(--wp--preset--color--primary); color: #fffaf7; padding: 6px 12px; }
.ng-search-submit:hover { background: #c94c36; }
.ng-search-close { background: transparent; color: var(--wp--preset--color--muted); width: 34px; padding: 0; }
.ng-search-close:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
.ng-search-form button:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.ng-callout { background: var(--wp--preset--color--primary-subtle); border: 1px solid var(--wp--preset--color--border); border-left: 3px solid var(--wp--preset--color--primary); border-radius: 6px; padding: 1rem 1.15rem; }
.ng-callout p:last-child { margin-bottom: 0; }
.wp-block-quote.is-style-notion-callout { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-left: 3px solid var(--wp--preset--color--primary); border-radius: 6px; padding: 1rem 1.15rem; }
.wp-block-quote.is-style-notion-callout p { margin-top: 0; }
.wp-block-quote.is-style-notion-callout cite { color: var(--wp--preset--color--muted); }
p.is-style-notion-callout { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: .9rem 1rem; }
:not(pre) > code { background: var(--wp--preset--color--primary-subtle); border-radius: 4px; color: var(--wp--preset--color--primary); font-size: .88em; padding: .15em .38em; }
pre.wp-block-code { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 1rem; }
.ng-post-meta { color: var(--wp--preset--color--muted); font-size: .86rem; margin: .5rem 0 2rem; }
.ng-post-meta > span::before { content: "·"; margin: 0 .5rem; }
.ng-language-switcher { align-items: center; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 999px; display: inline-flex; font-size: .73rem; line-height: 1; overflow: hidden; padding: 2px; white-space: nowrap; }
.ng-language-switcher a, .ng-language-switcher span { border-radius: 999px; color: var(--wp--preset--color--muted); display: inline-block; padding: .28rem .42rem; text-decoration: none; }
.ng-language-switcher .is-current { background: var(--wp--preset--color--primary-subtle); color: var(--wp--preset--color--primary); font-weight: 650; }
.ng-language-switcher a:hover { color: var(--wp--preset--color--primary); }
.notion-portfolio { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.25rem 0; }
.notion-project-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 6px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.notion-project-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--border)); box-shadow: var(--ng-shadow); transform: translateY(-3px); }
/* The frame owns the ratio; intrinsic WordPress width/height must not size a card. */
.notion-project-media { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; background: var(--wp--preset--color--surface); }
.notion-project-media > img.notion-project-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.notion-project-content { display: flex; flex: 1; flex-direction: column; gap: .7rem; padding: 1rem; }
.notion-project-title { color: var(--wp--preset--color--contrast); font-size: 1rem; font-weight: 650; text-decoration: none; }
.notion-project-excerpt { color: var(--wp--preset--color--muted); font-size: .9rem; margin: 0; }
.notion-tech-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.notion-tech-tag { background: var(--ng-tag-bg, var(--wp--preset--color--primary-subtle)); border: 1px solid color-mix(in srgb, var(--ng-tag-bg, #fbe8e2) 70%, var(--wp--preset--color--border)); border-radius: 999px; color: var(--wp--preset--color--contrast); font-size: .73rem; padding: .2rem .5rem; }
.notion-project-links { display: flex; gap: .8rem; font-size: .82rem; }
.notion-project-links a { color: var(--wp--preset--color--primary); }
.ng-toc { position: fixed; left: calc(50% + 410px); top: 132px; width: min(190px, calc(50vw - 434px)); max-height: calc(100vh - 160px); overflow-y: auto; z-index: 5; }
.ng-toc[hidden] { display: none; }
.ng-toc-title { color: var(--wp--preset--color--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ng-toc-list { border-left: 1px solid var(--wp--preset--color--border); list-style: none; margin: .55rem 0; padding: 0; }
.ng-toc-list a { color: var(--wp--preset--color--muted); display: block; font-size: .78rem; line-height: 1.35; padding: .28rem 0 .28rem .7rem; text-decoration: none; }
.ng-toc-list a:hover, .ng-toc-list a.is-active { color: var(--wp--preset--color--primary); }
.ng-toc-list .ng-toc-h3 { padding-left: 1.35rem; }
.ng-site-footer { border-top: 1px solid var(--wp--preset--color--border); margin-top: 4rem; padding: 2.5rem 0; }
.ng-footer-inner { align-items: center; display: flex; gap: 1.5rem; justify-content: space-between; margin: 0 auto; max-width: var(--wp--style--global--wide-size, 1040px); padding: 0 1.25rem; }
.ng-footer-identity p { margin: 0; }
.ng-footer-copyright { color: var(--wp--preset--color--contrast); font-size: .84rem; line-height: 1.55; }
.ng-footer-meta { color: var(--wp--preset--color--muted); font-size: .72rem; line-height: 1.5; margin-top: .24rem !important; }
.ng-footer-links { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: flex-end; }
.ng-footer-links a { color: var(--wp--preset--color--muted); font-size: .8rem; text-decoration: none; transition: color .16s ease; }
.ng-footer-links a:hover, .ng-footer-links a:focus-visible { color: var(--wp--preset--color--primary); }
.ng-comments { font-size: 14px; line-height: 1.65; }
/* Override the block's preset utility, which WordPress declares !important. */
.ng-comments .wp-block-comments-title { font-size: 18px !important; line-height: 1.5; margin: 0 0 1.5rem; }
.ng-comments .wp-block-columns { flex-wrap: nowrap !important; gap: 12px; align-items: flex-start; }
.ng-comments .wp-block-columns > .wp-block-column:first-child { flex: 0 0 32px !important; }
.ng-comments .wp-block-columns > .wp-block-column:last-child { flex: 1 1 0 !important; min-width: 0; }
.ng-comments .wp-block-comment-template .children { padding-left: 20px; }
.ng-comments .wp-block-avatar img { border-radius: 50%; height: 32px; width: 32px; }
.ng-comments .wp-block-comment-author-name { font-size: 13px !important; font-weight: 650; }
.ng-comments .wp-block-comment-date, .ng-comments .wp-block-comment-date a { color: var(--wp--preset--color--muted); font-size: .78rem; text-decoration: none; }
.ng-comments .wp-block-comment-content { font-size: 14px; line-height: 1.7; margin-top: 8px; }
.ng-comments .wp-block-comment-content p { margin: 0 0 8px; }
.ng-comments .wp-block-comment-reply-link { color: var(--wp--preset--color--primary); font-size: 12px !important; margin-top: 4px; text-decoration: none; }
.ng-comments .comment-respond { margin-top: 2rem; }
.ng-comments .comment-reply-title { font-size: 16px; font-weight: 650; line-height: 1.5; margin: 0 0 12px; }
.ng-comments .comment-form { font-size: 14px; }
.ng-comments .comment-form > p { margin: 0 0 14px; }
.ng-comments .comment-form .logged-in-as, .ng-comments .comment-form .comment-notes { color: var(--wp--preset--color--muted); font-size: 12px; line-height: 1.65; margin-bottom: 16px; }
.ng-comments .comment-form label { color: var(--wp--preset--color--muted); display: block; font-size: 12px; margin: 0 0 6px; }
.ng-comments .comment-form textarea, .ng-comments .comment-form input:is([type="text"], [type="email"], [type="url"]) { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 6px; color: var(--wp--preset--color--contrast); font: inherit; line-height: 1.6; max-width: 100%; outline: none; padding: 8px 10px; transition: border-color .16s ease, box-shadow .16s ease; width: 100%; }
.ng-comments .comment-form textarea { display: block; height: 144px; min-height: 112px; resize: vertical; }
.ng-comments .comment-form textarea:focus, .ng-comments .comment-form input:is([type="text"], [type="email"], [type="url"]):focus { border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); }
.ng-comments .comment-form .comment-form-cookies-consent { align-items: flex-start; display: flex; gap: 8px; }
.ng-comments .comment-form input[type="checkbox"] { accent-color: var(--wp--preset--color--primary); flex: 0 0 auto; height: 16px; margin: 2px 0 0; width: 16px; }
.ng-comments .comment-form .form-submit { margin: 16px 0 0; }
/* Core renders #submit with button classes, but without a .submit class. */
.ng-comments .comment-form input[type="submit"] { appearance: none; background: var(--wp--preset--color--primary); border: 0; border-radius: 5px; color: #fffaf7; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 20px; min-height: 34px; padding: 7px 12px; width: auto; transition: background-color .16s ease; }
.ng-comments .comment-form input[type="submit"]:hover { background: #c94c36; }
.ng-comments .comment-form input[type="submit"]:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }
.ng-comments .wp-block-comments-pagination { display: flex; gap: .75rem; margin: 1rem 0; }
@media (max-width: 1279px) { .ng-toc { display: none; } }
@media (max-width: 480px) { .ng-header-icon { flex-basis: 24px; } .ng-header-icon img { width: 24px; height: 24px; } .ng-header-brand .ng-breadcrumb span, .ng-header-brand .ng-breadcrumb strong { display: none; } }
@media (max-width: 640px) { .notion-portfolio { grid-template-columns: 1fr; } .ng-header-inner { gap: .5rem; } .ng-search-button span { display: none; } .ng-footer-inner { align-items: flex-start; flex-direction: column; } .ng-footer-links { justify-content: flex-start; } }

/* Quiet grids, consistent rhythm, and a complete second colour scheme. */
html[data-theme="dark"] { color-scheme: dark; --wp--preset--color--base: #22211f; --wp--preset--color--surface: #2d2b28; --wp--preset--color--contrast: #e9e4db; --wp--preset--color--muted: #b1a99e; --wp--preset--color--primary: #ef806b; --wp--preset--color--primary-subtle: #432e28; --wp--preset--color--border: #47423b; --ng-shadow: 0 8px 24px rgba(12,11,10,.18); }
.ng-main { padding: 3rem 20px 2rem; }
.ng-main > h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.025em; }
.ng-header-inner { padding-inline: 20px; gap: 16px; }
.ng-header-brand { gap: 8px; }
.ng-header-inner .wp-block-navigation { margin-left: auto; font-size: .84rem; }
.ng-header-inner .wp-block-navigation__container { gap: 1rem; }
.ng-header-inner .wp-block-navigation__responsive-container-open, .ng-header-inner .wp-block-navigation__responsive-container-close { padding: 6px; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; color: var(--wp--preset--color--contrast); }
.ng-header-inner .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; padding: 28px; }
.ng-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ng-header-inner .wp-block-navigation__responsive-container.is-menu-open { min-height: 100dvh; }
.ng-header-inner .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; }
.ng-header-inner .is-menu-open .wp-block-navigation__container { align-items: stretch; width: 100%; gap: 0; text-align: left; }
.ng-header-inner .is-menu-open .wp-block-navigation-item { border-bottom: 1px solid var(--wp--preset--color--border); padding: 16px 0; width: 100%; font-size: 1.05rem; align-items: flex-start; }
.ng-theme-toggle { appearance: none; border: 1px solid var(--wp--preset--color--border); background: transparent; color: var(--wp--preset--color--muted); border-radius: 5px; padding: 4px 7px; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.ng-theme-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }
html[data-theme="dark"] .ng-search-dialog { background: rgba(34,33,31,.92); }
html[data-theme="dark"] .ng-search-dialog::backdrop { background: rgba(16,15,14,.3); }
.ng-project-cover { display: grid; place-items: center; background: linear-gradient(125deg, var(--wp--preset--color--surface), var(--wp--preset--color--primary-subtle)); }
.ng-project-cover span { font-size: 2.5rem; font-weight: 650; color: var(--wp--preset--color--muted); opacity: .65; }
.ng-tag-terracotta { --ng-tag-bg: #fbe8e2; }.ng-tag-sage { --ng-tag-bg: #e7f2ea; }.ng-tag-blue { --ng-tag-bg: #e7effa; }.ng-tag-lavender { --ng-tag-bg: #f4eaf8; }.ng-tag-sand { --ng-tag-bg: #f7f0d9; }
html[data-theme="dark"] .ng-tag-terracotta { --ng-tag-bg: #49312a; }html[data-theme="dark"] .ng-tag-sage { --ng-tag-bg: #293d32; }html[data-theme="dark"] .ng-tag-blue { --ng-tag-bg: #2b3647; }html[data-theme="dark"] .ng-tag-lavender { --ng-tag-bg: #3d3045; }html[data-theme="dark"] .ng-tag-sand { --ng-tag-bg: #423c28; }
.ng-project-overview { padding: 1.25rem; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; background: var(--wp--preset--color--surface); margin: 1.5rem 0; }
.ng-project-overview > p:first-child { margin-top: 0; }.ng-project-overview .notion-project-links { margin-top: 1rem; }
.ng-project-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1.5rem 0; font-size: 13px; }
.ng-project-filters input, .ng-project-filters select, .ng-project-filters button { font: inherit; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 5px; padding: 8px 10px; min-height: 36px; max-width: 100%; }
.ng-project-filters button { cursor: pointer; background: var(--wp--preset--color--primary); color: #fffaf7; border-color: transparent; }.ng-project-filters input:focus-visible,.ng-project-filters select:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }
.ng-eyebrow { color: var(--wp--preset--color--muted); font-size: 12px; letter-spacing: .02em; }
.ng-term-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; font-size: 12px; }.ng-term-links a { color: var(--wp--preset--color--muted); text-decoration: none; }.ng-term-links a:hover { color: var(--wp--preset--color--primary); }
.ng-note-row { padding: 1.5rem 0; border-bottom: 1px solid var(--wp--preset--color--border); }.ng-note-row h2 { font-size: 1.25rem; margin: .5rem 0; }.ng-note-row h2 a { color: var(--wp--preset--color--contrast); text-decoration: none; }.ng-note-row h2 a:hover { color: var(--wp--preset--color--primary); }.ng-note-row p { margin: .5rem 0; }.ng-read-more { font-size: 13px; }
.ng-list-description,.ng-empty { color: var(--wp--preset--color--muted); font-size: .9rem; }.ng-empty { border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 1.5rem; }.ng-pagination { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0; font-size: 14px; }.ng-pagination .current { color: var(--wp--preset--color--primary); }
.ng-toc-inline { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 12px 16px; margin: 1.5rem 0; }.ng-toc-inline summary { cursor: pointer; }.ng-toc-inline .ng-toc-list { margin-bottom: 0; }
.ng-comments { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--wp--preset--color--border); }.ng-comment-row { gap: 12px; align-items: flex-start; margin-bottom: 20px; }.ng-comment-row > .wp-block-avatar { flex: 0 0 32px; }.ng-comment-body { flex: 1; min-width: 0; }.ng-comment-meta { gap: 8px; }.ng-comment-meta > * { margin: 0; }
.ng-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }.ng-comments .comment-form-reply-optin label { display: flex; gap: 8px; align-items: flex-start; }
.wp-block-code { position: relative; overflow-x: auto; }.wp-block-code code { font-family: var(--wp--preset--font-family--mono); font-size: 13px; line-height: 1.7; display: block; padding-top: 24px; }.ng-code-copy { position: absolute; top: 8px; right: 8px; font: inherit; font-size: 11px; color: var(--wp--preset--color--muted); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 4px; padding: 3px 7px; cursor: pointer; }.ng-code-keyword { color: var(--wp--preset--color--primary); }.ng-code-string { color: #477558; }.ng-code-number { color: #85609a; }.ng-code-comment { color: var(--wp--preset--color--muted); }html[data-theme="dark"] .ng-code-string { color: #9bc4a3; }html[data-theme="dark"] .ng-code-number { color: #c2a0d5; }
@media (max-width: 640px) { .ng-header-inner { gap: 8px; padding-inline: 16px; }.ng-breadcrumb { font-size: 12px; }.ng-main { padding-top: 2rem; }.ng-project-filters > label:first-child { flex: 1 1 100%; }.ng-project-filters input { width: 100%; }.ng-search-button,.ng-theme-toggle { min-height: 36px; min-width: 36px; }.ng-site-header .ng-language-switcher a,.ng-site-header .ng-language-switcher span { padding-block: 9px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; animation: none !important; } }

/* Personal narrative: editable native blocks, quiet labels, no résumé cards. */
.ng-about-page .ng-about-page-title { color: var(--wp--preset--color--muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; margin-bottom: 2rem; }
.ng-about-layout > * { margin-block-start: 0; min-width: 0; }
.ng-about-layout p { font-size: 16px; line-height: 1.85; }
.ng-about-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 24px; padding-block: .5rem 3rem; }
.ng-about-hero > *, .ng-about-intro > * { margin-block: 0; }
.ng-about-avatar img { border-radius: 12px; display: block; }
.ng-about-intro .ng-about-name { color: var(--wp--preset--color--muted); font-size: 11px; letter-spacing: .1em; line-height: 1.6; }
.ng-about-intro .ng-about-greeting { font-size: clamp(1.65rem, 4vw, 2.1rem); font-weight: 650; line-height: 1.45; letter-spacing: -.03em; margin-block: 8px 16px; }
.ng-about-intro .ng-about-lead { max-width: 56ch; color: var(--wp--preset--color--muted); }
.ng-about-section { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; padding-block: 2rem; border-top: 1px solid var(--wp--preset--color--border); }
.ng-about-section > *, .ng-about-section-body > :first-child { margin-block-start: 0; }
.ng-about-section-body > :last-child { margin-block-end: 0; }
.ng-about-section .ng-about-section-title { font-size: 13px; font-weight: 600; line-height: 1.85; margin-block: 3px 0; }
.ng-about-section-body { min-width: 0; }
.ng-about-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ng-about-topic { margin-block: 0; }
.ng-about-topic .ng-about-topic-title { font-size: 15px; font-weight: 600; line-height: 1.7; margin-block: 0 8px; }
.ng-about-topic p { color: var(--wp--preset--color--muted); font-size: 14px; margin: 0; }
.ng-now-note { background: var(--wp--preset--color--surface); border-radius: 6px; padding: 20px; }
.ng-now-note > * { margin-block-start: 0; }
.ng-now-note .ng-now-updated { color: var(--wp--preset--color--muted); font-size: 12px; margin-block: 0 18px; }
.ng-now-entry + .ng-now-entry { margin-top: 20px; }
.ng-now-entry .ng-now-entry-title { color: var(--wp--preset--color--muted); font-size: 12px; font-weight: 500; margin: 0 0 4px; }
.ng-now-entry p { font-size: 15px; margin: 0; }
/* Only hide empty prompts on the public page, never in the page editor. */
body:not(.wp-admin):not(.editor-styles-wrapper) .ng-about-page .ng-about-optional:not(:has(.ng-about-section-body > :not(:empty))),
body:not(.wp-admin):not(.editor-styles-wrapper) .ng-about-page .ng-now-entry:not(:has(> p:not(:empty))),
body:not(.wp-admin):not(.editor-styles-wrapper) .ng-about-page .ng-about-now:not(:has(.ng-now-entry > p:not(:empty))),
body:not(.wp-admin):not(.editor-styles-wrapper) .ng-about-page .ng-now-updated:empty { display: none; }
@media (max-width: 640px) {
 .ng-about-page .ng-about-page-title { margin-bottom: 1.5rem; }
 .ng-about-hero { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-bottom: 2rem; }
 .ng-about-hero .wp-block-avatar, .ng-about-avatar img { width: 48px !important; height: 48px !important; }
 .ng-about-intro .ng-about-lead { font-size: 15px; }
 .ng-about-section { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 1.5rem; }
 .ng-about-section .ng-about-section-title { color: var(--wp--preset--color--muted); font-size: 12px; margin: 0; }
 .ng-about-topics { gap: 20px; }
 .ng-now-note { padding: 16px; }
}
@media (max-width: 380px) { .ng-about-topics { grid-template-columns: minmax(0, 1fr); } }

/* A note on the desk and a small calendar on the wall. */
.ng-moe-counter { margin: 1.5rem auto 0; padding-inline: 20px; text-align: center; max-width: 100%; }
.ng-moe-counter img { display: inline-block; max-width: 100%; height: auto; }
.ng-moe-counter figcaption { font-size: 11px; margin-top: 6px; }
.ng-moe-counter a { color: var(--wp--preset--color--muted); text-decoration: none; }
.ng-moe-counter a:hover { color: var(--wp--preset--color--primary); }
#pio-container[hidden] { display: none !important; }
#pio-container .pio-action:focus-within { opacity: 1; }
#pio-container [role="button"]:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.pio-container.right .pio-show { left: auto; right: 1em; }
.pio-container.left .pio-show { left: 1em; right: auto; }
#pio-container.left .pio-dialog { right: auto; }
.ng-home-widgets { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: stretch; gap: 24px; margin-block: 1rem 3rem; }
.ng-home-widgets > * { min-width: 0; margin: 0; }
.ng-jottings { position: relative; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 24px; min-height: 322px; }
.ng-widget-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ng-widget-heading h2 { font-size: 14px; font-weight: 600; letter-spacing: .02em; margin: 0; }
.ng-widget-heading a, .ng-jotting-read, .ng-jotting-compose { font-size: 12px; color: var(--wp--preset--color--muted); text-decoration: none; }
.ng-widget-heading a:hover, .ng-jotting-read:hover, .ng-jotting-compose:hover { color: var(--wp--preset--color--primary); }
.ng-jotting-entry { margin-top: 22px; }
.ng-jotting-entry > time { color: var(--wp--preset--color--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ng-jotting-entry h3 { margin: 8px 0 12px; font-size: 17px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ng-jotting-entry h3 a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ng-jotting-entry h3 a:hover { color: var(--wp--preset--color--primary); }
.ng-jotting-entry .ng-jotting-body { font-size: 14px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 18px; }
.ng-jotting-empty { padding-block: 22px 26px; }
.ng-jotting-empty > span { color: var(--wp--preset--color--primary); display: block; height: 38px; font-family: Georgia, serif; font-size: 56px; line-height: 1; }
.ng-jotting-empty p { font-size: 15px; line-height: 1.8; margin: 12px 0 0; }
.ng-jotting-empty .ng-jotting-hint { color: var(--wp--preset--color--muted); font-size: 13px; margin-top: 8px; }
.ng-jotting-compose { display: inline-block; border-top: 1px solid var(--wp--preset--color--border); padding-top: 12px; margin-top: 16px; }
.ng-calendar { position: relative; align-self: start; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; background: var(--wp--preset--color--base); padding: 24px 18px 14px; box-shadow: 0 3px 0 var(--wp--preset--color--surface), 0 4px 0 var(--wp--preset--color--border); }
.ng-calendar::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--wp--preset--color--primary); border-radius: 5px 5px 0 0; }
.ng-calendar-binding { position: absolute; top: -6px; inset-inline: 46px; display: flex; justify-content: space-between; pointer-events: none; }
.ng-calendar-binding i { display: block; width: 5px; height: 13px; background: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--base); border-radius: 3px; }
.ng-calendar-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.ng-calendar-kicker { font-size: 10px; letter-spacing: .08em; color: var(--wp--preset--color--muted); margin: 0 0 5px; }
.ng-calendar .ng-calendar-month { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; margin: 0; font-variant-numeric: tabular-nums; }
.ng-calendar-controls { display: flex; gap: 4px; }
.ng-calendar [hidden] { display: none; }
.ng-calendar button { appearance: none; border: 1px solid transparent; background: transparent; color: var(--wp--preset--color--muted); border-radius: 4px; font: inherit; cursor: pointer; padding: 0; }
.ng-calendar-controls button { width: 32px; height: 32px; font-size: 22px; line-height: 1; }
.ng-calendar button:hover:not(:disabled) { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); }
.ng-calendar button:focus-visible, .ng-jottings a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }
.ng-calendar button:disabled { opacity: .5; cursor: default; }
.ng-calendar-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.ng-calendar-table th, .ng-calendar-table td { border: 0; padding: 0; text-align: center; height: 32px; }
.ng-calendar-table th { font-size: 10px; font-weight: 400; color: var(--wp--preset--color--muted); }
.ng-calendar-table td time { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.ng-calendar-table .is-weekend { color: var(--wp--preset--color--muted); }
.ng-calendar-table [aria-current="date"] { background: var(--wp--preset--color--primary-subtle); color: var(--wp--preset--color--primary); font-weight: 700; }
.ng-calendar-footer { border-top: 1px solid var(--wp--preset--color--border); display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin-top: 12px; padding-top: 8px; font-size: 10px; color: var(--wp--preset--color--muted); }
.ng-calendar-footer .ng-calendar-today { font-size: 10px; min-height: 28px; padding-inline: 5px; }
@media (max-width: 640px) {
 .ng-home-widgets { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 2.5rem; }
 .ng-jottings { min-height: 0; padding: 20px; }
 .ng-jotting-empty { padding-block: 16px; }
 .ng-home-widgets .ng-calendar { width: min(100%, 320px); justify-self: center; }
}