/* Single journal entry */
.sse-post-head { padding: clamp(2rem, 6vw, 4rem) 0 2rem; }
.sse-post-meta { margin-bottom: 1.25rem; }
.sse-post-title { font-size: clamp(2.2rem, 5.5vw, 4.2rem); line-height: 1; letter-spacing: -0.045em; margin-bottom: 0.5em; max-width: 22ch; }
.sse-post-lead { margin-bottom: 1.5rem; }
.sse-post-byline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.sse-byline { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.sse-byline-img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); }
.sse-byline .sans { display: grid; line-height: 1.25; }
.sse-byline-name { font-size: 0.85rem; font-weight: 600; }
.sse-byline-role { font-size: 0.72rem; color: var(--ink-3); }
.sse-summarize { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sse-summarize-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.sse-summarize-list { display: flex; gap: 0.35rem; }
.sse-summarize-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--paper); transition: all 0.25s var(--ease); }
.sse-summarize-btn img { width: 18px; height: 18px; object-fit: contain; }
.sse-summarize-btn:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 3px 3px 0 var(--c-yellow); }
[data-theme="dark"] .sse-summarize-btn { background: var(--paper-3); }
[data-theme="dark"] .sse-summarize-btn img[src*="chatgpt"], [data-theme="dark"] .sse-summarize-btn img[src*="grok"] { filter: invert(1); }

.sse-post-hero { margin: 1rem auto 2.5rem; }
.sse-post-hero img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); }
.sse-post-hero figcaption { font-size: 0.76rem; color: var(--ink-3); margin-top: 0.6rem; text-align: center; }

.sse-post-layout { display: grid; gap: 2rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.sse-post-side { display: grid; gap: 1.5rem; align-content: start; }
.sse-post-body { min-width: 0; max-width: var(--measure); }

.sse-toc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); font-size: 0.84rem; }
.sse-toc-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.9rem 1rem; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.sse-toc-chev { margin-left: auto; transition: transform 0.3s var(--ease); }
.sse-toc-toggle[aria-expanded="true"] .sse-toc-chev { transform: rotate(180deg); }
.sse-toc-list { list-style: none; margin: 0; padding: 0 1rem 0.9rem; display: none; counter-reset: toc; }
.sse-toc.is-open .sse-toc-list { display: block; }
.sse-toc-list li { position: relative; }
.sse-toc-list li.lvl-3 { padding-left: 0.9rem; }
.sse-toc-list a { display: block; padding: 0.35rem 0 0.35rem 0.75rem; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; line-height: 1.35; transition: color 0.2s, border-color 0.2s; }
.sse-toc-list a:hover { color: var(--ink); border-color: var(--line-2); }
.sse-toc-list a.is-active { color: var(--ink); border-left-color: var(--ink); font-weight: 600; background: linear-gradient(90deg, var(--c-yellow) 0, transparent 70%); }

.sse-share { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.sse-share-label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 0.35rem; }
.sse-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); border: 1px solid var(--line-2); color: var(--ink-2); transition: all 0.25s var(--ease); position: relative; }
.sse-share-btn:hover, .sse-share-btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }
.sse-share-btn.is-done::after { content: attr(data-label); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-size: 0.68rem; padding: 0.25rem 0.5rem; border-radius: 4px; white-space: nowrap; }

/* Share sits under the article, not in the rail: a full-width band. */
.sse-share-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); }
.sse-share-hint { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.sse-share-row { gap: 0.4rem; }
.sse-share-row .sse-share-btn { width: 2.4rem; height: 2.4rem; background: var(--paper); }
.sse-share-row .sse-share-btn:hover, .sse-share-row .sse-share-btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* Focus mode straight from the post meta line. */
.sse-focus-btn { display: inline-flex; align-items: center; gap: 0.35rem; height: 1.9rem; padding: 0 0.65rem; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; transition: border-color 0.25s, color 0.25s, background 0.25s; }
.sse-focus-btn:hover { border-color: var(--ink); color: var(--ink); }
.sse-focus-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sse-focus-btn-off { display: none; }
.sse-focus-btn[aria-pressed="true"] .sse-focus-btn-on { display: none; }
.sse-focus-btn[aria-pressed="true"] .sse-focus-btn-off { display: inline; }
/* it must survive focus mode so people can switch back off */
.is-focus .sse-focus-btn { display: inline-flex !important; }

.sse-post-content { font-size: calc(var(--fs-body) * 1.04); }
.sse-post-content > p:first-of-type::first-letter { font-size: 3.4em; line-height: 0.85; float: left; padding: 0.1em 0.14em 0 0; font-weight: 700; letter-spacing: -0.02em; }
.sse-post-content h2 { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }
.sse-post-content h3 { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }

.sse-post-foot { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); display: grid; gap: 2rem; }
.sse-post-terms { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sse-google-follow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); background: var(--paper); transition: all 0.3s var(--ease); }
.sse-google-follow:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--c-blue); }
.sse-google-logo { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 8px; background: var(--paper-3); color: #4285F4; }
.sse-google-text { display: grid; }
.sse-google-over { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sse-google-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.sse-google-arrow { color: var(--ink-3); }
.sse-author { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); }
.sse-author-img { width: 5rem; height: 5rem; border-radius: 8px; object-fit: cover; border: 1.5px solid var(--ink); }
.sse-author-name { font-size: 1.3rem; margin: 0.2rem 0 0.3rem; letter-spacing: -0.025em; }
.sse-author-bio { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 0.75rem; }
.sse-author-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.sse-post-nav { display: grid; gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.sse-post-nav-card { display: grid; gap: 0.35rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); transition: all 0.3s var(--ease); }
.sse-post-nav-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 5px 5px 0 var(--c-gray); }
.sse-post-nav-card .sans { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sse-post-nav-card strong { font-weight: 600; font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.02em; }
.sse-post-nav-card.is-next { text-align: right; }
.sse-post-nav-card.is-next .sans { justify-content: flex-end; }
.sse-post-nav-card.is-empty { border: 0; }
.sse-related { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--line); }
.sse-related-grid { grid-template-columns: 1fr; }
@media (min-width: 620px) { .sse-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sse-related-grid { grid-template-columns: repeat(4, 1fr); } }
.sse-related-grid .sse-card-title { font-size: 1.1rem; }
.sse-related-grid .sse-card-body { padding: 1.1rem 1.2rem 1.2rem; gap: 0.6rem; }
.sse-related-grid .sse-card-media { aspect-ratio: 16 / 9; }
.sse-comments { padding: 2rem 0 4rem; }

@media (min-width: 720px) { .sse-post-nav { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
	.sse-post-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; }
	.sse-post-side { position: sticky; top: calc(var(--bar-h) + 1.5rem); max-height: calc(100vh - var(--bar-h) - 2rem); overflow: auto; }
	.sse-toc-toggle { pointer-events: none; }
	.sse-toc-chev { display: none; }
	.sse-toc-list { display: block; }
	.sse-toc { background: transparent; border: 0; }
	.sse-toc-toggle { padding: 0 0 0.5rem; }
	.sse-toc-list { padding: 0; }
	.sse-share-row { flex-direction: row; align-items: center; }
	.sse-share-label { margin: 0; }
}

/* Legacy Rank Math blocks inside older posts */
.sse-prose .wp-block-rank-math-faq-block { border-top: 1px solid var(--line); margin: 2rem 0; }
.sse-prose .rank-math-faq-item { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.sse-prose .rank-math-faq-item .rank-math-question { font-size: 1.1rem; margin: 0 0 0.4rem; letter-spacing: -0.02em; }
.sse-prose .rank-math-faq-item .rank-math-answer { color: var(--ink-2); font-size: 0.98rem; }
.sse-prose .rank-math-faq-item .rank-math-answer > :last-child { margin-bottom: 0; }
.sse-prose .wp-block-rank-math-toc-block { display: none; }
.sse-prose .wp-block-rank-math-howto-block .rank-math-howto-step { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.sse-prose .rank-math-step-title { font-weight: 600; }

/* Focus mode: sidebar is hidden, so collapse to a single centred column */
.is-focus .sse-post-layout { grid-template-columns: minmax(0, 1fr); }
.is-focus .sse-post-body { margin-inline: auto; }
.is-focus .sse-post-head, .is-focus .sse-post-hero { max-width: var(--measure); }
.is-focus .sse-post-hero { width: min(100% - 2 * var(--gutter), var(--measure)); }

/* Theme section blocks embedded inside article content */
.sse-prose .sse-faq, .sse-prose .sse-timeline { padding-block: 0.5rem 1rem; }
.sse-prose .sse-faq .sse-wrap-mid, .sse-prose .sse-timeline .sse-wrap-mid { width: 100%; }
.sse-prose .sse-faq-q { font-size: 1.05rem; }
.sse-prose .sse-tl-title { font-size: 1.15rem; }
.sse-prose .sse-tl-item { padding-bottom: 1.5rem; }

/* Comments */
.sse-comments-area { border-top: 1px solid var(--line); padding-top: 2rem; }
.sse-comments-title { font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.sse-comment-list, .sse-comment-list .children { list-style: none; margin: 0; padding: 0; }
.sse-comment-list .children { margin: 0 0 0 3.75rem; }
.sse-comment-list .comment, .sse-comment-list .pingback { padding: 1.25rem 0 0; }
.sse-comment-list > .comment { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
.sse-comment-list .children .comment { border-top: 1px solid var(--line); margin-top: 1.25rem; }
.comment-body { position: relative; padding-left: 3.75rem; min-height: 2.75rem; }
.comment-body .avatar { position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem; }
.comment-author { display: inline-flex; align-items: center; gap: 0.5rem; }
.comment-body .fn { font-style: normal; font-weight: 600; font-size: 0.95rem; }
.comment-body .fn a { text-decoration: none; }
.comment-body .says { display: none; }
.comment-metadata { font-size: 0.74rem; color: var(--ink-3); }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-metadata .edit-link { margin-left: 0.5rem; }
.comment-content { font-size: 0.98rem; color: var(--ink-2); margin-top: 0.5rem; }
.comment-content > :last-child { margin-bottom: 0; }
.comment-awaiting-moderation { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.8rem; padding: 0.55rem 0.8rem; border-radius: 6px; background: var(--c-yellow); color: var(--c-yellow-ink); }
.comment-body .reply { margin-top: 0.75rem; }
.comment-body .reply a { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 600; text-decoration: none; color: var(--ink); border: 1px solid var(--line-2); padding: 0.35rem 0.7rem; border-radius: 4px; }
.comment-body .reply a:hover { border-color: var(--ink); background: var(--c-yellow); }
.bypostauthor > .comment-body .fn::after { content: "Author"; margin-left: 0.5rem; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.4rem; border-radius: 3px; background: var(--c-green); color: var(--c-green-ink); vertical-align: middle; }
.comment-navigation { margin: 1rem 0; font-size: 0.85rem; }
.comment-respond { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); }
.comment-respond .comment-reply-title { font-size: 1.25rem; margin-bottom: 1rem; }
.comment-respond .comment-reply-title small { font-size: 0.75rem; margin-left: 0.75rem; }
.comment-respond .comment-reply-title small a { text-decoration: none; color: var(--ink-3); }
.comment-respond .sse-cform { gap: 0.9rem; }
.comment-respond .logged-in-as, .comment-respond .comment-notes { font-size: 0.8rem; color: var(--ink-3); margin: 0 0 0.5rem; }
.comment-respond .logged-in-as a { color: var(--ink); }
.comment-respond .form-submit { margin: 0; }
.comment-respond .comment-form-cookies-consent { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--ink-2); }
.comment-form p.must-log-in { font-size: 0.9rem; }

.sse-prose .sse-timeline.is-steps .sse-timeline-list { display: block; }
.sse-prose .sse-timeline.is-steps .sse-tl-item { grid-template-columns: 3rem 1fr; border: 0; padding: 0 0 1.5rem; }
.sse-prose .sse-timeline.is-steps .sse-tl-item::after { display: none; }