:root {
--cn-bg: var(--wp--preset--color--base);
--cn-ink: var(--wp--preset--color--contrast);
--cn-ink-soft: var(--wp--preset--color--ink-soft);
--cn-meta: var(--wp--preset--color--accent-4);
--cn-surface: var(--wp--preset--color--accent-5);
--cn-surface-2: var(--wp--preset--color--surface-2);
--cn-rule: var(--wp--preset--color--accent-6);
--cn-rule-strong: var(--wp--preset--color--rule-strong);
--cn-hover: var(--wp--preset--color--hover);
--cn-red: var(--wp--preset--color--accent-1);
--cn-red-soft: var(--wp--preset--color--accent-1-soft); --cn-accent: var(--cn-red);
--cn-accent-soft: var(--cn-red-soft);
--cat: var(--cn-red); --cn-field-rule: color-mix(in oklch, var(--cn-ink) 55%, var(--cn-bg));
--cn-sans: var(--wp--preset--font-family--sans);
--cn-code: var(--wp--preset--font-family--mono); --cn-heavy: 2px solid var(--cn-ink);
--cn-hair: 1px solid var(--cn-rule); --cn-fs-label: var(--wp--preset--font-size--x-small); --cn-fs-meta: var(--wp--preset--font-size--small); --cn-fs-ui: var(--wp--preset--font-size--medium); --cn-fs-excerpt: var(--wp--preset--font-size--excerpt); --cn-fs-lede: var(--wp--preset--font-size--lede); --cn-fs-body: var(--wp--preset--font-size--body); --cn-fs-title: var(--wp--preset--font-size--large); --cn-fs-headline: var(--wp--preset--font-size--x-large); --cn-fs-section: var(--wp--preset--font-size--section); --cn-fs-display: var(--wp--preset--font-size--xx-large); --cn-ease: cubic-bezier(.16, 1, .3, 1); --cn-wide: 1350px;
--cn-gutter: 32px; --cn-edge: max(0px, min(var(--cn-gutter), calc(var(--cn-gutter) - (100vw - var(--cn-wide)) / 2)));
--cn-top: var(--wp-admin--admin-bar--height, 0px);
color-scheme: light;
} :root[data-theme="dark"] {
--wp--preset--color--base: oklch(0.165 0 0);
--wp--preset--color--contrast: oklch(0.95 0 0);
--wp--preset--color--accent-1: oklch(0.68 0.19 29);
--wp--preset--color--accent-4: oklch(0.7 0 0);
--wp--preset--color--accent-5: oklch(0.2 0 0);
--wp--preset--color--accent-6: oklch(0.31 0 0);
--wp--preset--color--ink-soft: oklch(0.83 0 0);
--wp--preset--color--surface-2: oklch(0.255 0 0);
--wp--preset--color--rule-strong: oklch(0.46 0 0);
--wp--preset--color--hover: oklch(0.205 0 0);
--wp--preset--color--accent-1-soft: oklch(0.3 0.07 29);
color-scheme: dark;
} body {
font-family: var(--cn-sans);
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color .25s, color .25s;
} body :is(
.wp-site-blocks,
.wp-block-template-part,
.cn-site-header,
.cn-site-header__top,
.cn-site-header__id,
.cn-site-header__nav,
.cn-now,
.cn-home,
.cn-feed,
.cn-sidebar,
.cn-sidebar__block,
.cn-articlebar,
.cn-article-grid,
.cn-article,
.cn-article__end,
.cn-archive,
.cn-page,
.cn-site-footer,
.cn-comments,
.cn-comment,
.cn-comment__meta,
.cn-notfound
) > * {
margin-block: 0;
} .cn-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.cn-accent,
.cn-stop { color: var(--cn-red); } .cn-label,
body .cn-sidebar .cn-label {
margin: 0 0 10px;
font: 700 var(--cn-fs-label)/1.4 var(--cn-sans);
letter-spacing: 0;
text-transform: none;
color: var(--cn-ink);
}
::selection { background: var(--cn-red); color: #fff; }
html { caret-color: var(--cn-red); scrollbar-color: var(--cn-rule-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cn-rule-strong); border: 3px solid var(--cn-bg); }
:focus-visible { outline: 2px solid var(--cn-red); outline-offset: 2px; }
a { text-underline-offset: 3px; }
@keyframes cn-clap-pop {
0% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.22) rotate(-6deg); }
55% { transform: scale(0.94) rotate(4deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes cn-clap-float {
0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
20% { opacity: 1; }
100% { transform: translate(0, -42px) scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
} .cn-site-header {
max-width: var(--cn-wide);
margin: 0 auto;
padding: 40px var(--cn-gutter) 0;
}
body .cn-site-header__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 26px;
}
body .cn-brand {
margin: 0;
font: 800 2.5rem/1 var(--cn-sans);
letter-spacing: -0.035em;
}
.cn-brand a { color: var(--cn-ink); text-decoration: none; }
.cn-brand a:hover { color: var(--cn-ink); }
body .cn-tagline {
margin: 10px 0 0;
font: 400 var(--cn-fs-ui)/1.4 var(--cn-sans);
color: var(--cn-meta);
}
.cn-tagline::first-letter { text-transform: uppercase; }
.cn-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: -4px -8px 0 0;
padding: 0;
border: 0;
background: transparent;
color: var(--cn-ink);
cursor: pointer;
transition: color .2s;
}
.cn-theme-toggle:hover { color: var(--cn-red); }
.cn-theme-toggle svg { width: 20px; height: 20px; }
.cn-theme-toggle .cn-icon-sun { display: none; }
:root[data-theme="dark"] .cn-theme-toggle .cn-icon-sun { display: block; }
:root[data-theme="dark"] .cn-theme-toggle .cn-icon-moon { display: none; }
body .cn-site-header__nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 12px 32px;
border-bottom: var(--cn-heavy);
}
body .cn-site-header__nav > * { margin: 0; } body .cn-site-header__end {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px 28px;
margin-left: auto;
}
body .cn-site-header__end > * { margin: 0; } .wp-block-cn-category-nav { position: relative; }
.cn-catnav {
display: flex;
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
.cn-catnav a {
position: relative;
display: block;
padding: 0 0 13px;
font: 600 var(--cn-fs-ui)/1.2 var(--cn-sans);
color: var(--cn-ink-soft);
text-decoration: none;
white-space: nowrap;
transition: color .15s;
}
.cn-catnav a:hover { color: var(--cn-ink); }
.cn-catnav a[aria-current] { color: var(--cn-ink); font-weight: 700; }
.cn-catnav a[aria-current]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 4px;
background: var(--cn-red);
}
.cn-catnav__mark {
position: absolute;
left: 0;
bottom: -3px;
width: var(--w, 0px);
height: 4px;
background: var(--cn-red);
transform: translateX(var(--x, 0px));
opacity: 0;
pointer-events: none;
transition: transform .45s var(--cn-ease), width .45s var(--cn-ease), opacity .2s;
}
.wp-block-cn-category-nav.is-live .cn-catnav a[aria-current]::after { display: none; }
.wp-block-cn-category-nav.is-live .cn-catnav__mark { opacity: 1; }
.wp-block-cn-category-nav.is-settling .cn-catnav__mark { transition: none; }
.cn-pagelinks {
display: flex;
gap: 22px;
margin: 0;
padding: 0 0 13px;
list-style: none;
font: 600 var(--cn-fs-ui)/1.2 var(--cn-sans);
}
.cn-pagelinks a { color: var(--cn-ink); text-decoration: none; transition: color .15s; }
.cn-pagelinks a:hover { color: var(--cn-red); }
.cn-pagelinks a[aria-current] { text-decoration: underline; text-decoration-color: var(--cn-red); text-decoration-thickness: 2px; text-underline-offset: 6px; } .cn-hsearch { position: relative; display: flex; align-items: center; width: 230px; } .cn-hsearch__icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(calc(-50% - 1px));
width: 16px;
height: 16px;
color: var(--cn-meta);
pointer-events: none;
}
.cn-hsearch__input {
width: 100%;
min-width: 0;
padding: 4px 28px 5px 24px;
border: 0;
border-bottom: 1.5px solid var(--cn-field-rule);
border-radius: 0;
background: transparent;
color: var(--cn-ink);
font: 500 var(--cn-fs-ui)/1.4 var(--cn-sans);
outline: none;
transition: border-color .15s;
}
.cn-hsearch__input::placeholder { color: var(--cn-meta); opacity: 1; }
.cn-hsearch__input:focus { border-bottom-color: var(--cn-red); }
.cn-hsearch__input:focus-visible { outline: none; }
.cn-hsearch__input::-webkit-search-cancel-button { display: none; }
.cn-hsearch__key {
position: absolute;
right: 0;
top: 50%;
transform: translateY(calc(-50% - 1px));
min-width: 18px;
padding: 2px 5px 4px;
border: 1px solid var(--cn-rule-strong);
font: 600 var(--cn-fs-label)/1 var(--cn-sans);
text-align: center;
color: var(--cn-meta);
pointer-events: none;
}
.cn-hsearch:focus-within .cn-hsearch__key { display: none; } body .cn-now {
max-width: var(--cn-wide);
margin: 0 auto;
padding: 14px var(--cn-gutter);
border-bottom: var(--cn-hair);
display: flex;
gap: 6px 18px;
align-items: baseline;
flex-wrap: wrap;
font: 400 var(--cn-fs-excerpt)/1.5 var(--cn-sans);
color: var(--cn-ink);
}
body .cn-now__label { font-weight: 800; color: var(--cn-red); }
body .cn-now__text { flex: 1 1 300px; }
body .cn-now__updated { font-size: var(--cn-fs-meta); color: var(--cn-meta); white-space: nowrap; } body .cn-home {
max-width: var(--cn-wide);
margin: 0 auto;
padding: 40px var(--cn-gutter) 96px;
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 64px;
} body .cn-home.cn-home--grid { display: block; padding-inline: var(--cn-edge); }
body .cn-home__row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 64px; }
body .cn-home__row > * { margin-block: 0; }
body .cn-home__row + .cn-home__row { margin-top: 80px; }
body .cn-home__row.cn-home__row--3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
body .cn-home__row.cn-home__row--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body .cn-sidebar { display: flex; flex-direction: column; gap: 36px; padding-top: 6px; }
.cn-sidebar ul { list-style: none; margin: 0; padding: 0; }
body .cn-sidebar__block { padding-top: 10px; border-top: var(--cn-heavy); }
.cn-sidebar .wp-block-archives { display: flex; flex-direction: column; }
.cn-sidebar .wp-block-archives li { border-bottom: var(--cn-hair); }
.cn-sidebar .wp-block-archives a {
display: flex;
justify-content: space-between;
padding: 7px 0;
font: 600 var(--cn-fs-ui)/1.3 var(--cn-sans);
color: var(--cn-ink);
text-decoration: none;
}
.cn-sidebar .wp-block-archives a:hover,
.cn-sidebar .wp-block-archives a[aria-current] { color: var(--cn-red); }
.cn-count { font-size: var(--cn-fs-meta); font-weight: 400; color: var(--cn-meta); }
.cn-activity { display: flex; flex-direction: column; gap: 10px; }
.cn-activity li { font-size: var(--cn-fs-meta); line-height: 1.5; color: var(--cn-meta); }
.cn-activity__who { font-weight: 700; color: var(--cn-ink); }
.cn-activity a { font-weight: 600; color: var(--cn-ink); text-decoration: none; }
.cn-activity a:hover { color: var(--cn-red); }
.cn-activity__when { display: block; margin-top: 1px; }
.cn-activity__empty { font-size: var(--cn-fs-meta); color: var(--cn-meta); }
.cn-elsewhere { display: flex; flex-direction: column; gap: 6px; }
.cn-elsewhere li { font: 600 var(--cn-fs-ui)/1.4 var(--cn-sans); }
.cn-elsewhere a { color: var(--cn-ink); text-decoration: none; }
.cn-elsewhere a:hover { color: var(--cn-red); } .cn-group { margin-top: 64px; }
.cn-group:first-child { margin-top: 0; }
.cn-group__head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 16px;
padding-bottom: 14px;
border-bottom: var(--cn-heavy);
}
.cn-group__title {
margin: 0;
font: 800 var(--cn-fs-section)/1.05 var(--cn-sans);
letter-spacing: -0.03em;
color: var(--cn-ink);
}
.cn-group__title a { color: inherit; text-decoration: none; }
.cn-group__title a:hover { color: var(--cn-red); }
.cn-group__count {
position: relative;
top: -0.95em;
margin-left: 5px;
font-size: var(--cn-fs-ui);
font-weight: 700;
letter-spacing: 0;
color: var(--cn-red);
}
.cn-group__blurb {
order: 3;
flex-basis: 100%;
margin: 0;
font: 400 var(--cn-fs-ui)/1.5 var(--cn-sans);
color: var(--cn-meta);
}
.cn-group__all {
margin-left: auto;
font: 700 var(--cn-fs-ui)/1.2 var(--cn-sans);
color: var(--cn-ink);
text-decoration: none;
white-space: nowrap;
}
.cn-group__all:hover { color: var(--cn-red); text-decoration: underline; text-decoration-thickness: 2px; } .cn-index { list-style: none; margin: 0; padding: 0; }
.cn-row { border-bottom: var(--cn-hair); }
.cn-row:last-child,
.cn-entry:last-child,
.cn-row:not([hidden]):has(+ .cn-row[hidden]) { border-bottom: 0; }
.cn-row__line {
display: grid;
grid-template-columns: 104px minmax(0, 1fr) 96px;
gap: 16px;
align-items: center;
padding: 12px 0;
cursor: pointer;
font: 400 var(--cn-fs-ui)/1.4 var(--cn-sans);
}
.cn-row__date { font-size: var(--cn-fs-meta); color: var(--cn-meta); white-space: nowrap; }
.cn-row__date-short { display: none; }
.cn-row__year { display: none; }
.cn-index--mixed .cn-row__line { grid-template-columns: 104px 140px minmax(0, 1fr) 96px; }
.cn-row__cat { display: flex; min-width: 0; }
.cn-kind {
overflow: hidden;
font: 700 var(--cn-fs-meta)/1.4 var(--cn-sans);
color: var(--cn-ink-soft);
white-space: nowrap;
text-overflow: ellipsis;
}
.cn-row__title {
display: block;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: 700 var(--cn-fs-lede)/1.3 var(--cn-sans);
letter-spacing: -0.012em;
color: var(--cn-ink);
}
.cn-row__title a { color: inherit; text-decoration: none; }
.cn-row__line:hover .cn-row__title,
.cn-row__title a:hover { color: var(--cn-red); }
.cn-row__stats {
display: grid;
grid-template-columns: 1fr 28px;
align-items: center;
justify-items: end;
gap: 8px;
font-size: var(--cn-fs-meta);
color: var(--cn-meta);
white-space: nowrap;
}
.cn-row__claps { display: inline-flex; align-items: center; gap: 4px; }
.cn-row__claps svg { width: 13px; height: 13px; }
.cn-row__toggle {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
margin: -4px 0;
padding: 0;
border: 0;
background: none;
color: var(--cn-ink);
cursor: pointer;
transition: transform .3s var(--cn-ease), color .15s;
}
.cn-row__toggle svg { width: 18px; height: 18px; }
.cn-row__toggle:hover { color: var(--cn-red); }
.cn-row__toggle[aria-expanded="true"] { transform: rotate(90deg); color: var(--cn-red); }
.cn-row__more {
padding: 0 0 20px 120px;
font: 400 var(--cn-fs-excerpt)/1.55 var(--cn-sans);
color: var(--cn-ink-soft);
}
.cn-index--mixed .cn-row__more { padding-left: 260px; }
.cn-row__more[hidden] { display: none; }
.cn-row__excerpt { max-width: 62ch; margin: 0 0 12px; text-wrap: pretty; }
.cn-row__url { margin: 0 0 12px; font-size: var(--cn-fs-meta); }
.cn-row__url a { font-weight: 600; color: var(--cn-ink); text-decoration: underline; text-decoration-color: var(--cn-red); }
.cn-row__url a:hover { color: var(--cn-red); }
.cn-row__media { margin: 0 0 14px; }
.cn-row__media img { display: block; max-width: min(100%, 480px); height: auto; }
.cn-row__actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .cn-btn {
display: inline-block;
padding: 10px 18px;
border: 0;
border-radius: 0;
background: var(--cn-ink);
color: var(--cn-bg);
font: 700 var(--cn-fs-ui)/1.2 var(--cn-sans);
text-decoration: none;
cursor: pointer;
transition: background .15s;
}
.cn-btn:hover { background: var(--cn-red); color: #fff; } .cn-more {
margin-top: 14px;
padding: 6px 0;
border: 0;
background: transparent;
color: var(--cn-ink);
font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans);
text-decoration: underline;
text-decoration-color: var(--cn-red);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
cursor: pointer;
}
.cn-more:hover { color: var(--cn-red); } .cn-post-index { container-type: inline-size; }
.cn-entries { list-style: none; margin: 0; padding: 0; }
.cn-entry {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: 24px;
padding: 20px 0 22px;
border-bottom: var(--cn-hair);
}
.cn-entry.has-media { grid-template-columns: minmax(0, 1fr) 96px; }
.cn-entry:has(.cn-entry__link:focus-visible) { outline: 2px solid var(--cn-red); outline-offset: 4px; }
.cn-entry__main { min-width: 0; }
.cn-entry__head { display: flex; flex-direction: column; gap: 6px; }
body .cn-entry__title {
margin: 0;
font: 700 var(--cn-fs-title)/1.25 var(--cn-sans);
letter-spacing: -0.015em;
color: var(--cn-ink);
text-wrap: pretty;
transition: color .15s;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.cn-entry__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 12px;
margin: 0;
font: 400 var(--cn-fs-meta)/1.4 var(--cn-sans);
color: var(--cn-meta);
}
.cn-entry__meta .cn-kind { color: var(--cn-ink); }
.cn-entry__date { white-space: nowrap; }
.cn-entry__link { color: inherit; text-decoration: none; }
.cn-entry__link:hover { color: inherit; }
.cn-entry__link:focus-visible { outline: none; }
.cn-entry__link::after { content: ""; position: absolute; inset: 0; }
.cn-entry:hover .cn-entry__title { color: var(--cn-red); }
.cn-entry__excerpt {
margin: 10px 0 0;
font: 400 var(--cn-fs-excerpt)/1.55 var(--cn-sans);
color: var(--cn-ink-soft);
text-wrap: pretty;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.cn-entry__url { margin: 8px 0 0; font: 600 var(--cn-fs-meta)/1.4 var(--cn-sans); color: var(--cn-ink); overflow-wrap: anywhere; }
.cn-entry__claps { display: inline-flex; align-items: center; gap: 4px; }
.cn-entry__claps svg { width: 13px; height: 13px; }
.cn-entry__sep { display: none; }
.cn-entry__media img { display: block; width: 96px; height: 96px; object-fit: cover; } body .cn-entry.cn-entry--link { padding: 16px 0 17px; }
body .cn-entry--link .cn-entry__title { font-size: var(--cn-fs-lede); line-height: 1.3; }
.cn-entry__line {
display: flex;
align-items: baseline;
gap: 12px;
margin: 6px 0 0;
font: 400 var(--cn-fs-meta)/1.4 var(--cn-sans);
color: var(--cn-meta);
}
.cn-entry__line .cn-entry__date { flex: none; }
.cn-entry__host { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--cn-ink-soft); }
@container (max-width: 560px) {
.cn-entry { padding-block: 18px 20px; }
.cn-entry.has-media { grid-template-columns: minmax(0, 1fr) 72px; column-gap: 16px; }
.cn-entry__media img { width: 72px; height: 72px; }
} @media (max-width: 719px) {
.cn-entry__excerpt { display: none; }
}
.cn-empty { margin: 0; padding: 72px 0; font: 600 var(--cn-fs-lede)/1.5 var(--cn-sans); color: var(--cn-ink); }
.cn-pager {
display: flex;
justify-content: space-between;
margin-top: 32px;
padding-top: 14px;
border-top: var(--cn-heavy);
font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans);
}
.cn-pager a { color: var(--cn-ink); text-decoration: underline; text-decoration-color: var(--cn-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cn-pager a:hover { color: var(--cn-red); } body .cn-archive,
body .cn-page {
max-width: var(--cn-wide);
margin: 0 auto;
padding: 56px var(--cn-edge) 96px;
}
body .cn-archive > *,
body .cn-page > * { max-width: 880px; }
.cn-archive__title {
margin: 0;
font: 800 var(--cn-fs-display)/1.02 var(--cn-sans);
letter-spacing: -0.04em;
text-wrap: balance;
}
.cn-archive__q { color: var(--cn-red); }
.cn-archive__blurb {
max-width: 60ch;
margin: 16px 0 0;
font: 400 var(--cn-fs-lede)/1.5 var(--cn-sans);
color: var(--cn-ink-soft);
}
.cn-archive__blurb p { margin: 0; }
.cn-archive__count {
margin: 28px 0 0;
padding-bottom: 12px;
border-bottom: var(--cn-heavy);
font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans);
color: var(--cn-ink);
} .cn-stats { display: flex; flex-wrap: wrap; margin: 28px 0 0; }
.cn-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 24px 0 0;
margin-right: 24px;
border-right: var(--cn-hair);
}
.cn-stat:last-child { border-right: 0; }
.cn-stat__label { font: 600 var(--cn-fs-meta)/1.4 var(--cn-sans); color: var(--cn-meta); }
.cn-stat__value { font: 700 var(--cn-fs-lede)/1.3 var(--cn-sans); color: var(--cn-ink); white-space: nowrap; }
.cn-stat__value a { color: var(--cn-ink); text-decoration: underline; text-decoration-color: var(--cn-red); text-decoration-thickness: 2px; }
.cn-stat__value a:hover { color: var(--cn-red); } body .wp-block-search.cn-search { margin: 28px 0 0; }
.cn-search .wp-block-search__inside-wrapper { gap: 12px; align-items: flex-end; }
.cn-search .wp-block-search__input {
min-width: 0;
padding: 8px 0;
border: 0;
border-bottom: 2px solid var(--cn-ink);
border-radius: 0;
background: transparent;
color: var(--cn-ink);
font: 600 var(--cn-fs-lede)/1.4 var(--cn-sans);
outline: none;
}
.cn-search .wp-block-search__input::placeholder { color: var(--cn-meta); font-weight: 400; opacity: 1; }
.cn-search .wp-block-search__input:focus { border-bottom-color: var(--cn-red); }
body .cn-search .wp-block-search__button {
margin: 0;
padding: 11px 20px;
border: 0;
border-radius: 0;
background: var(--cn-ink);
color: var(--cn-bg);
font: 700 var(--cn-fs-ui)/1.2 var(--cn-sans);
cursor: pointer;
transition: background .15s;
}
body .cn-search .wp-block-search__button:hover { background: var(--cn-red); color: #fff; } .cn-empty:has(+ .cn-recovery) { padding: 28px 0 0; }
.cn-recovery__lead { margin: 8px 0 14px; font: 400 var(--cn-fs-excerpt)/1.5 var(--cn-sans); color: var(--cn-ink-soft); }
.cn-recovery__cats {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin: 0 0 48px;
padding: 0;
list-style: none;
font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans);
}
.cn-recovery__cats a { color: var(--cn-ink); text-decoration: underline; text-decoration-color: var(--cn-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cn-recovery__cats a:hover { color: var(--cn-red); }
body .cn-recovery__label { margin: 0; padding-bottom: 10px; border-bottom: var(--cn-heavy); font-size: var(--cn-fs-ui); } .cn-progress { position: fixed; top: var(--cn-top); left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.cn-progress span { display: block; width: 0; height: 100%; background: var(--cn-red); transition: width .08s linear; }
.cn-articlebar-wrap { position: sticky; top: var(--cn-top); z-index: 30; }
body .cn-articlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px var(--cn-gutter);
background: var(--cn-bg);
border-bottom: var(--cn-heavy);
}
.cn-back {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
font: 700 var(--cn-fs-ui)/1.2 var(--cn-sans);
color: var(--cn-ink);
text-decoration: none;
}
.cn-back svg { width: 18px; height: 18px; transition: transform .3s var(--cn-ease); }
.cn-back:hover { color: var(--cn-red); }
.cn-back:hover svg { transform: translateX(-3px); }
.cn-path { margin: 0; font: 600 var(--cn-fs-ui)/1.3 var(--cn-sans); color: var(--cn-ink-soft); text-align: center; }
.cn-path a { color: inherit; text-decoration: none; }
.cn-path .cn-path__home { font-weight: 800; letter-spacing: -0.01em; color: var(--cn-ink); }
.cn-path__sep { margin: 0 8px; color: var(--cn-rule-strong); }
.cn-path a:hover { color: var(--cn-red); } :root { --cn-article-cols: 72px minmax(0, 1fr) 72px; }
.has-cn-toc { --cn-article-cols: 72px minmax(0, 1fr) 220px; }
body .cn-article-grid {
display: grid;
grid-template-columns: var(--cn-article-cols);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 64px var(--cn-gutter) 72px;
}
body .cn-article { width: 100%; max-width: 700px; margin: 0 auto; font-family: var(--cn-sans); }
body .cn-article .cn-article__title {
margin: 0 0 20px;
font: 800 var(--cn-fs-display)/1.04 var(--cn-sans);
letter-spacing: -0.04em;
text-wrap: balance;
}
body .cn-article .cn-postmeta,
.cn-postmeta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 10px;
margin: 0 0 40px;
padding-bottom: 14px;
border-bottom: var(--cn-heavy);
font: 400 var(--cn-fs-ui)/1.4 var(--cn-sans);
color: var(--cn-meta);
}
.cn-postmeta > span:first-child { font-weight: 700; color: var(--cn-ink); }
.cn-postmeta a { color: var(--cn-ink); font-weight: 600; text-decoration: none; }
.cn-postmeta a:hover { color: var(--cn-red); }
.cn-postmeta > [aria-hidden] { color: var(--cn-rule-strong); } body .cn-cover { position: relative; margin: 0; }
.cn-cover__img { display: block; width: 100%; height: min(72vh, 680px); object-fit: cover; }
.cn-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .72) 28%, rgb(0 0 0 / .32) 58%, rgb(0 0 0 / .08) 85%, transparent);
pointer-events: none;
}
.cn-cover__over {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: var(--cn-article-cols);
column-gap: 40px;
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--cn-gutter) 44px;
color: #fff;
}
.cn-cover__over > * { grid-column: 2; justify-self: center; width: 100%; max-width: 700px; }
body .cn-cover__title {
margin: 0 0 16px;
font: 800 var(--cn-fs-display)/1.04 var(--cn-sans);
letter-spacing: -0.04em;
text-wrap: balance;
color: #fff;
}
.cn-cover__over .cn-postmeta { margin: 0; padding: 12px 0 0; border: 0; border-top: 2px solid #fff; color: rgb(255 255 255 / .85); }
.cn-cover__over .cn-postmeta > span:first-child,
.cn-cover__over .cn-postmeta a { color: #fff; }
.cn-cover__over .cn-postmeta > [aria-hidden] { color: rgb(255 255 255 / .5); }
.has-cn-cover .cn-article > .cn-article__title,
.has-cn-cover .cn-article > .cn-postmeta { display: none; }
body.has-cn-cover .cn-article-grid { padding-top: 56px; }
@media (max-width: 719px) {
.cn-cover__img { height: 440px; }
.cn-cover__over { grid-template-columns: minmax(0, 1fr); padding: 0 20px 28px; }
.cn-cover__over > * { grid-column: 1; }
} .cn-prose,
.wp-block-post-content { color: var(--cn-ink); overflow-wrap: break-word; }
body .cn-prose { font: 400 var(--cn-fs-body)/1.62 var(--cn-sans); }
body .cn-prose > * { margin-block: 0 1.1em; }
.cn-prose p { text-wrap: pretty; }
body .cn-prose > :where(h2, h3, h4, h5, h6) { margin: 2.1em 0 0.55em; font-family: var(--cn-sans); scroll-margin-top: 90px; }
.cn-prose h2 { font-size: var(--cn-fs-headline); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.cn-prose h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.cn-prose h4 { font-size: var(--cn-fs-body); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.cn-prose h5 { font-size: var(--cn-fs-excerpt); font-weight: 700; line-height: 1.4; }
body .cn-prose > h6 { font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans); letter-spacing: 0; text-transform: none; color: var(--cn-meta); }
.cn-prose strong { font-weight: 700; }
.cn-prose mark { padding: 0 .12em; background: var(--cn-red-soft); color: inherit; }
.cn-prose dl { margin-block: 0 1.1em; }
.cn-prose dt { font-weight: 700; }
.cn-prose dt + dd { margin-top: 2px; }
.cn-prose dd { margin: 0 0 .7em 1.3em; color: var(--cn-ink-soft); }
body .cn-prose > .wp-block-details { padding: 12px 0; border-top: var(--cn-heavy); border-bottom: var(--cn-hair); }
.cn-prose details summary { cursor: pointer; font: 700 var(--cn-fs-excerpt)/1.5 var(--cn-sans); color: var(--cn-ink); }
.cn-prose details summary::marker { color: var(--cn-red); }
.cn-prose details[open] summary { margin-bottom: 10px; }
.cn-prose details > :last-child { margin-bottom: 0; }
.cn-prose a {
color: var(--cn-ink);
text-decoration: underline;
text-decoration-color: var(--cn-red);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
transition: color .15s;
}
.cn-prose a:hover { color: var(--cn-red); }
body .cn-prose > .wp-block-quote,
.cn-prose blockquote {
margin: 1.7em 0;
padding: 0 0 0 24px;
border-left: 1px solid var(--cn-ink);
font-size: 1.375rem;
font-weight: 500;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--cn-ink);
}
.cn-prose blockquote p { margin: 0 0 .6em; }
.cn-prose blockquote cite { display: block; font: 600 var(--cn-fs-ui)/1.4 var(--cn-sans); font-style: normal; letter-spacing: 0; color: var(--cn-meta); }
.cn-prose :not(pre) > code { padding: .1em .3em; background: var(--cn-surface-2); font-family: var(--cn-code); font-size: .84em; }
.cn-prose pre,
.cn-prose .wp-block-code {
padding: 18px 20px;
border: 0;
border-top: var(--cn-heavy);
border-radius: 0;
background: var(--cn-surface);
font: .875rem/1.65 var(--cn-code);
tab-size: 4;
overflow-wrap: normal;
overflow-x: auto;
}
.cn-prose img { max-width: 100%; height: auto; border-radius: 0; }
body .cn-prose > figure { margin: 1.7em 0; }
.cn-prose figcaption { margin-top: 10px; font: 400 var(--cn-fs-meta)/1.45 var(--cn-sans); color: var(--cn-meta); text-align: left; }
.cn-prose hr,
.cn-prose .wp-block-separator { border: 0; border-top: var(--cn-heavy); margin: 2.6em 0; }
.cn-prose ul,
.cn-prose ol { padding-left: 1.3em; }
.cn-prose li + li { margin-top: .35em; }
.cn-prose li::marker { color: var(--cn-meta); }
.cn-prose ol > li::marker { font-weight: 700; color: var(--cn-ink); } .cn-prose .has-drop-cap:not(:focus)::first-letter {
float: left;
margin: 0.06em 0.08em 0 0;
font-size: 3.4em;
font-weight: 800;
line-height: 0.8;
color: var(--cn-ink);
}
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
.cn-prose .has-drop-cap:not(:focus)::first-letter { float: none; margin: 0 0.08em 0 0; -webkit-initial-letter: 2; initial-letter: 2; }
} body .cn-prose > figure.alignwide {
--cn-out: clamp(0px, (100vw - 700px) / 2 - 110px, 120px);
position: relative;
z-index: 2;
width: auto;
max-width: none;
margin-inline: calc(-1 * var(--cn-out));
background: var(--cn-bg);
}
.cn-prose .alignwide img { width: 100%; } body .cn-prose > .wp-block-table { overflow-x: auto; }
.cn-prose .wp-block-table table { width: 100%; border-collapse: collapse; font: 400 var(--cn-fs-excerpt)/1.5 var(--cn-sans); }
.cn-prose .wp-block-table :is(thead, tbody, tfoot) { border: 0; }
.cn-prose .wp-block-table :is(th, td) { padding: 10px 16px 10px 0; border: 0; border-bottom: var(--cn-hair); text-align: left; vertical-align: top; }
.cn-prose .wp-block-table th { font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans); color: var(--cn-ink); }
.cn-prose .wp-block-table thead th { border-bottom: var(--cn-heavy); }
.cn-prose .wp-block-table tfoot td { border-top: var(--cn-heavy); border-bottom: 0; font-weight: 700; }
.cn-prose .wp-block-table figcaption { margin-top: 10px; } body .cn-prose > .wp-block-pullquote {
margin: 44px 0;
padding: 24px 0;
border: 0;
border-block: var(--cn-heavy);
text-align: left;
}
body .cn-prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; font-size: 1.875rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.cn-prose .wp-block-pullquote p { margin: 0 0 14px; font-size: inherit; line-height: inherit; text-wrap: balance; }
.cn-prose .wp-block-pullquote cite { text-align: left; } .cn-prose sup.fn a { padding: 0 2px; margin-left: 1px; font: 700 .7em/1 var(--cn-sans); color: var(--cn-red); text-decoration: none; }
body .cn-prose > .wp-block-footnotes { margin: 56px 0 0; padding: 14px 0 0; border-top: var(--cn-heavy); list-style: none; counter-reset: cn-fn; }
.cn-prose .wp-block-footnotes::before { content: "Notes"; display: block; margin: 0 0 14px; font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans); }
.cn-prose .wp-block-footnotes li { counter-increment: cn-fn; position: relative; margin: 0 0 10px; padding-left: 2em; font-size: var(--cn-fs-excerpt); line-height: 1.55; color: var(--cn-ink-soft); }
.cn-prose .wp-block-footnotes li::before { content: counter(cn-fn); position: absolute; left: 0; top: 0; font: 700 var(--cn-fs-excerpt)/1.55 var(--cn-sans); color: var(--cn-red); }
.cn-prose .wp-block-footnotes li a { text-decoration: none; } body .cn-prose .wp-block-button .wp-block-button__link {
padding: 10px 18px;
border: 2px solid var(--cn-ink);
border-radius: 0;
background: var(--cn-ink);
color: var(--cn-bg);
font: 700 var(--cn-fs-ui)/1.2 var(--cn-sans);
text-decoration: none;
}
body .cn-prose .wp-block-button .wp-block-button__link:hover { border-color: var(--cn-red); background: var(--cn-red); color: #fff; }
body .cn-prose .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--cn-ink); }
body .cn-prose .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: transparent; color: var(--cn-red); } body .cn-article .cn-article__end {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 56px;
padding-top: 20px;
border-top: var(--cn-heavy);
} body .cn-article .cn-byline {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 20px 40px;
margin-top: 48px;
padding-top: 18px;
border-top: var(--cn-heavy);
}
.cn-byline :is(p, ul) { margin: 0; }
.cn-byline__name { font: 800 1.5rem/1.1 var(--cn-sans); letter-spacing: -0.025em; }
.cn-byline__name a { color: var(--cn-ink); text-decoration: none; }
.cn-byline__name a:hover { color: var(--cn-red); }
.cn-byline__bio { margin-top: 8px !important; font: 400 var(--cn-fs-excerpt)/1.55 var(--cn-sans); color: var(--cn-ink-soft); text-wrap: pretty; }
.cn-byline__head { font: 600 var(--cn-fs-meta)/1.4 var(--cn-sans); color: var(--cn-meta); }
.cn-byline__head + .cn-byline__list { margin-top: 4px !important; }
.cn-byline__list + .cn-byline__head { margin-top: 14px !important; }
.cn-byline__list { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0; list-style: none; font: 700 var(--cn-fs-ui)/1.6 var(--cn-sans); }
.cn-byline__list a { color: var(--cn-ink); text-decoration: underline; text-decoration-color: var(--cn-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cn-byline__list a:hover { color: var(--cn-red); } body .cn-article .cn-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
.cn-prevnext a { display: block; padding-top: 14px; border-top: var(--cn-heavy); color: inherit; text-decoration: none; }
.cn-prevnext .is-next { text-align: right; }
.cn-prevnext__label { display: block; margin-bottom: 6px; font: 600 var(--cn-fs-meta)/1.4 var(--cn-sans); color: var(--cn-meta); }
.cn-prevnext__title { display: block; font: 700 var(--cn-fs-lede)/1.3 var(--cn-sans); letter-spacing: -0.012em; color: var(--cn-ink); text-wrap: balance; transition: color .15s; }
.cn-prevnext a:hover .cn-prevnext__title { color: var(--cn-red); }  .cn-toc { position: sticky; z-index: 20; top: calc(var(--cn-top) + 96px); align-self: start; padding: 10px 0 12px; border-top: var(--cn-heavy); background: var(--cn-bg); box-shadow: -20px 0 0 var(--cn-bg); }
.cn-toc[hidden] { display: none; }
.cn-toc ul { list-style: none; margin: 0; padding: 0; }
.cn-toc a { display: block; padding: 6px 0; font: 500 var(--cn-fs-meta)/1.4 var(--cn-sans); color: var(--cn-meta); text-decoration: none; transition: color .15s; }
.cn-toc a:hover { color: var(--cn-ink); }
.cn-toc a.is-active { font-weight: 700; color: var(--cn-red); } .cn-reactions { --d: 32px; --i: 15px; display: flex; align-items: center; gap: 12px; }
.cn-reactions--rail {
--d: 40px; --i: 18px;
position: sticky;
z-index: 20;
top: calc(50vh - 100px);
align-self: start;
flex-direction: column;
gap: 10px;
} .cn-reactions--end { --d: 48px; --i: 22px; flex: 1; justify-content: space-between; gap: 14px; }
.cn-rbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--d);
height: var(--d);
padding: 0;
border: 1.5px solid var(--cn-ink);
border-radius: 0;
background: var(--cn-bg);
color: var(--cn-ink);
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.cn-rbtn svg { width: var(--i); height: var(--i); }
.cn-rbtn:hover { border-color: var(--cn-red); color: var(--cn-red); }
.cn-rbtn.is-active,
.cn-rbtn[aria-expanded="true"] { border-color: var(--cn-red); background: var(--cn-red); color: #fff; }
.cn-clap {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: transparent;
color: var(--cn-ink);
font: inherit;
cursor: pointer;
}
.cn-reactions--inline .cn-clap,
.cn-reactions--end .cn-clap { flex-direction: row; gap: 10px; }
.cn-clap__circle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: var(--d);
height: var(--d);
border: 1.5px solid var(--cn-ink);
background: var(--cn-bg);
transition: background .15s, border-color .15s, color .15s;
}
.cn-clap__circle svg { width: var(--i); height: var(--i); transform-origin: 50% 70%; }
.cn-clap:hover .cn-clap__circle { border-color: var(--cn-red); color: var(--cn-red); }
.cn-clap__count { font: 700 var(--cn-fs-meta)/1 var(--cn-sans); color: var(--cn-ink); transition: color .15s; }
.cn-reactions--rail .cn-clap__count { padding: 2px 4px; background: var(--cn-bg); }
.cn-reactions--end .cn-clap__count { font-size: var(--cn-fs-lede); font-weight: 800; }
.cn-clap.is-active .cn-clap__circle { border-color: var(--cn-red); background: var(--cn-red); color: #fff; }
.cn-clap.is-active .cn-clap__count { color: var(--cn-red); }
.cn-clap.is-pop .cn-clap__circle svg { animation: cn-clap-pop 380ms cubic-bezier(.34, 1.56, .64, 1); }
.cn-clap.is-max { cursor: default; }
.cn-clap__float {
position: absolute;
left: 50%;
top: -6px;
width: 28px;
margin-left: -14px;
text-align: center;
font: 800 var(--cn-fs-meta)/1 var(--cn-sans);
color: var(--cn-red);
pointer-events: none;
animation: cn-clap-float 900ms var(--cn-ease) forwards;
}
.cn-clap__float.is-error { width: 48px; margin-left: -24px; font-weight: 600; color: var(--cn-meta); } .cn-share { position: relative; z-index: 30; display: inline-block; }
.cn-share__menu {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
z-index: 50;
display: flex;
flex-direction: column;
min-width: 190px;
padding: 6px 0;
border: 1.5px solid var(--cn-ink);
background: var(--cn-bg);
box-shadow: 0 14px 36px rgb(0 0 0 / .14), 0 2px 6px rgb(0 0 0 / .08);
}
:root[data-theme="dark"] .cn-share__menu { background: var(--cn-surface-2); box-shadow: 0 16px 40px rgb(0 0 0 / .55), 0 2px 8px rgb(0 0 0 / .35); }
.cn-share__menu[hidden] { display: none; }
.cn-share__item {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px;
border: 0;
background: transparent;
color: var(--cn-ink);
font: 600 var(--cn-fs-ui)/1.3 var(--cn-sans);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background .12s, color .12s;
}
.cn-share__item:hover { background: var(--cn-hover); color: var(--cn-red); }
:root[data-theme="dark"] .cn-share__item:hover { background: var(--cn-rule); }
.cn-share__item svg { width: 16px; height: 16px; flex: none; color: currentColor; }
.cn-share__item[hidden] { display: none; } body .cn-article .cn-comments { margin-top: 64px; padding-top: 16px; border-top: var(--cn-heavy); }
body .cn-comments .wp-block-comments-title { margin: 0 0 20px; font: 800 1.5rem/1.15 var(--cn-sans); letter-spacing: -0.025em; color: var(--cn-ink); }
.cn-comments .wp-block-comment-template { display: flex; flex-direction: column; gap: 20px; margin: 0 0 28px; padding: 0; list-style: none; }
.cn-comments .wp-block-comment-template ol { list-style: none; margin: 20px 0 0 28px; padding: 0; }
body .cn-comment { padding-bottom: 18px; border-bottom: var(--cn-hair); }
body .cn-comment .cn-comment__meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; font: 400 var(--cn-fs-meta)/1.4 var(--cn-sans); color: var(--cn-meta); }
.cn-comment__meta .wp-block-comment-author-name { font-size: var(--cn-fs-ui); font-weight: 700; color: var(--cn-ink); }
.cn-comment__meta a { color: inherit; text-decoration: none; }
.cn-comment__meta .wp-block-comment-reply-link { margin-left: auto; }
.cn-comment__meta .wp-block-comment-reply-link a { font-weight: 700; color: var(--cn-ink); text-decoration: underline; text-decoration-color: var(--cn-red); text-decoration-thickness: 2px; }
.cn-comment__meta .wp-block-comment-reply-link a:hover { color: var(--cn-red); }
.cn-comment .wp-block-comment-content { font: 400 var(--cn-fs-lede)/1.55 var(--cn-sans); color: var(--cn-ink); }
.cn-comment .wp-block-comment-content p { margin: 0 0 .6em; text-wrap: pretty; }
.cn-comments .comment-respond { margin-top: 12px; }
.cn-comments .comment-reply-title { margin: 0 0 14px; font: 800 1.5rem/1.15 var(--cn-sans); letter-spacing: -0.025em; color: var(--cn-ink); }
.cn-comments .comment-reply-title small a { margin-left: 10px; font-size: var(--cn-fs-ui); font-weight: 700; letter-spacing: 0; color: var(--cn-red); }
.cn-comments .comment-form { display: flex; flex-direction: column; gap: 12px; }
.cn-comments .comment-form p { margin: 0; }
.cn-comments .comment-notes,
.cn-comments .logged-in-as,
.cn-comments .comment-form-cookies-consent { font: 400 var(--cn-fs-meta)/1.5 var(--cn-sans); color: var(--cn-meta); }
.cn-comments .comment-form label { display: block; margin-bottom: 4px; font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans); color: var(--cn-ink); }
.cn-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.cn-comments .comment-form-cookies-consent label { display: inline; margin: 0; font-weight: 400; color: var(--cn-meta); }
.cn-comments .comment-form-cookies-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cn-red); }
.cn-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
width: 100%;
padding: 10px 12px;
border: 1.5px solid var(--cn-field-rule);
border-radius: 0;
background: var(--cn-bg);
color: var(--cn-ink);
font: 400 var(--cn-fs-ui)/1.4 var(--cn-sans);
outline: none;
transition: border-color .15s;
}
.cn-comments .comment-form textarea { font-size: var(--cn-fs-excerpt); line-height: 1.5; resize: vertical; }
.cn-comments .comment-form :is(input, textarea):focus { border-color: var(--cn-red); }
.cn-comments .form-submit .submit,
.cn-comments .form-submit .wp-block-button__link {
padding: 11px 20px;
border: 0;
border-radius: 0;
background: var(--cn-ink);
color: var(--cn-bg);
font: 700 var(--cn-fs-ui)/1.2 var(--cn-sans);
cursor: pointer;
transition: background .15s;
}
.cn-comments .form-submit .submit:hover { background: var(--cn-red); color: #fff; } body .cn-site-footer { max-width: var(--cn-wide); margin: 0 auto; padding: 0 var(--cn-gutter) 72px; }
.cn-sitestats {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
gap: 8px 32px;
padding-top: 16px;
border-top: var(--cn-heavy);
font: 400 var(--cn-fs-meta)/1.5 var(--cn-sans);
color: var(--cn-meta);
}
.cn-sitestats p { margin: 0; }
.cn-sitestats__name { font: 800 var(--cn-fs-title)/1 var(--cn-sans); letter-spacing: -0.03em; }
.cn-sitestats__name a { color: var(--cn-ink); text-decoration: none; }
.cn-sitestats__facts a { font-weight: 700; color: var(--cn-ink); text-decoration: underline; text-decoration-color: var(--cn-red); text-decoration-thickness: 2px; }
.cn-sitestats__facts a:hover { color: var(--cn-red); }
.cn-sep { color: var(--cn-rule-strong); } body .cn-page .cn-page__title {
margin: 0 0 32px;
padding-bottom: 16px;
border-bottom: var(--cn-heavy);
font: 800 var(--cn-fs-display)/1.02 var(--cn-sans);
letter-spacing: -0.04em;
}
body .cn-page .cn-prose { max-width: 700px; }
body .cn-notfound { max-width: var(--cn-wide); margin: 0 auto; padding: 72px var(--cn-edge) 96px; }
body .cn-notfound > * { max-width: 700px; }
body .cn-notfound .cn-notfound__title { font: 800 var(--cn-fs-display)/1.02 var(--cn-sans); letter-spacing: -0.04em; text-wrap: balance; }
body .cn-notfound .cn-notfound__lead { margin-top: 16px; font: 400 var(--cn-fs-lede)/1.55 var(--cn-sans); color: var(--cn-ink-soft); text-wrap: pretty; }
body .cn-notfound .cn-search { margin: 32px 0 0; }
body .cn-notfound .cn-notfound__label { margin: 56px 0 0; padding-bottom: 10px; border-bottom: var(--cn-heavy); font-size: var(--cn-fs-ui); }
body .cn-notfound .cn-notfound__home { margin-top: 36px; } .cn-prose .forminator-ui { max-width: 560px; margin: 0; font-family: var(--cn-sans); } .cn-prose form.forminator-ui:not(.forminator-initialized) { display: block !important; }
.cn-prose div.forminator-ui[data-form] { display: none; }
.cn-prose .forminator-ui :is(input, textarea)::placeholder { color: var(--cn-meta); opacity: 1; }
.cn-prose .forminator-ui .forminator-row { margin: 0 0 22px; }
.cn-prose .forminator-ui .forminator-field { display: flex; flex-direction: column; gap: 6px; }
.cn-prose .forminator-ui .forminator-label { font: 700 var(--cn-fs-ui)/1.4 var(--cn-sans); color: var(--cn-ink); }
.cn-prose .forminator-ui .forminator-required { color: var(--cn-red); }
.cn-prose .forminator-ui :is(.forminator-input, .forminator-textarea) {
width: 100%;
padding: 11px 12px;
border: 1.5px solid var(--cn-field-rule);
border-radius: 0;
background: var(--cn-bg);
color: var(--cn-ink);
font: 400 var(--cn-fs-excerpt)/1.4 var(--cn-sans);
outline: none;
transition: border-color .15s;
}
.cn-prose .forminator-ui .forminator-textarea { min-height: 160px; line-height: 1.5; resize: vertical; }
.cn-prose .forminator-ui :is(.forminator-input, .forminator-textarea):focus { border-color: var(--cn-red); }
.cn-prose .forminator-ui .forminator-field > div:has(.forminator-description) { order: 3; align-self: flex-end; }
.cn-prose .forminator-ui .forminator-description { font: 400 var(--cn-fs-meta)/1.4 var(--cn-sans); color: var(--cn-meta); }
.cn-prose .forminator-ui .forminator-textarea { order: 2; }
.cn-prose .forminator-ui .forminator-button-submit {
align-self: flex-start;
width: auto;
padding: 12px 22px;
border: 0;
border-radius: 0;
background: var(--cn-ink);
color: var(--cn-bg);
font: 700 var(--cn-fs-ui)/1.2 var(--cn-sans);
cursor: pointer;
transition: background .15s;
}
.cn-prose .forminator-ui .forminator-button-submit:hover { background: var(--cn-red); color: #fff; }
.cn-prose .forminator-ui .forminator-button-submit:focus-visible { outline: 2px solid var(--cn-red); outline-offset: 2px; }
.cn-prose .forminator-ui .forminator-error-message { font: 600 var(--cn-fs-meta)/1.4 var(--cn-sans); color: var(--cn-red); }
.cn-prose .forminator-ui .forminator-has_error :is(.forminator-input, .forminator-textarea) { border-color: var(--cn-red); }
.cn-prose .forminator-ui .forminator-response-message:not([aria-hidden="true"]) {
margin: 0 0 22px;
padding: 12px 0 0;
border-top: 2px solid var(--cn-red);
font: 600 var(--cn-fs-ui)/1.5 var(--cn-sans);
color: var(--cn-ink);
}
.cn-prose .forminator-ui .forminator-response-message.forminator-success:not([aria-hidden="true"]) { border-top-color: var(--cn-ink); }
.cn-prose .forminator-ui .forminator-response-message p { margin: 0; } body .cn-site-header,
body .cn-now,
body .cn-home,
body .cn-site-footer { padding-inline: var(--cn-edge); } @media (max-width: 1100px) {
body .cn-site-header__nav { border-bottom: 0; }
body .wp-block-cn-category-nav { width: 100%; border-bottom: var(--cn-heavy); }
body .cn-site-header__end { width: 100%; margin-left: 0; justify-content: space-between; padding: 10px 0; border-bottom: var(--cn-hair); }
.cn-pagelinks { padding-bottom: 0; }
} @media (max-width: 719px) {
:root { --cn-gutter: 18px; }
.cn-site-header { padding-top: 28px; }
body .cn-site-header__top { margin-bottom: 20px; }
body .cn-brand { font-size: 2rem; }
body .cn-tagline { margin-top: 8px; } body .wp-block-cn-category-nav { margin-inline: calc(-1 * var(--cn-edge)); width: calc(100% + 2 * var(--cn-edge)); }
.cn-catnav {
gap: 22px;
overflow-x: auto;
scrollbar-width: none;
padding-inline: var(--cn-edge);
scroll-padding-inline: var(--cn-edge);
}
.cn-catnav::-webkit-scrollbar { display: none; }
.cn-catnav li { flex: none; }
.cn-catnav a { padding: 4px 0 12px; }
.cn-catnav a[aria-current]::after { bottom: 0; height: 4px; }
.wp-block-cn-category-nav.is-live .cn-catnav a[aria-current]::after { display: block; }
.wp-block-cn-category-nav .cn-catnav__mark { display: none; }
.cn-hsearch { flex: 0 1 190px; width: auto; }
.cn-hsearch__key { display: none; } .cn-pagelinks a,
.cn-byline__list a,
.cn-recovery__cats a { padding-block: 10px; }
.cn-group__all { padding-block: 12px; margin-block: -12px; }
.cn-byline__list { row-gap: 16px; }
.cn-recovery__cats { row-gap: 16px; }
body .cn-home { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 28px; }
body .cn-home__row,
body .cn-home__row.cn-home__row--3-2,
body .cn-home__row.cn-home__row--1-1 { grid-template-columns: minmax(0, 1fr); }
body .cn-home__row + .cn-home__row { margin-top: 56px; }
body .cn-home__row > * + * { margin-top: 56px; }
.cn-group__title { font-size: 1.625rem; } .cn-row__line,
.cn-index--mixed .cn-row__line { grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 12px; padding-block: 10px; }
.cn-row__cat,
.cn-row__date-full,
.cn-row__claps { display: none; }
.cn-row__date-short { display: inline; }
.cn-row__year { display: block; font-size: var(--cn-fs-label); }
.cn-row__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: clip; font-size: var(--cn-fs-excerpt); }
.cn-row__stats { display: flex; justify-content: flex-end; }
.cn-row__toggle { width: 44px; height: 44px; margin: 0; }
.cn-row__more,
.cn-index--mixed .cn-row__more { padding-left: 0; } .cn-comments .comment-form :is(input, textarea),
.cn-search .wp-block-search__input,
.cn-hsearch__input { font-size: 1rem; }
body .cn-archive,
body .cn-page { padding-top: 32px; padding-inline: var(--cn-gutter); }
body .cn-notfound { padding: 40px var(--cn-gutter) 72px; }
.cn-stats { gap: 16px 0; }
body .cn-articlebar { padding-inline: 12px 6px; }
.cn-path { display: none; }
body .cn-article-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 36px 20px 104px; }
.cn-toc { display: none !important; }
body .cn-prose { font-size: 1.125rem; } .cn-reactions--rail {
--d: 40px;
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
z-index: 40;
flex-direction: row;
justify-content: center;
gap: 32px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: var(--cn-bg);
border-top: var(--cn-heavy);
}
.cn-reactions--rail .cn-clap { flex-direction: row; gap: 8px; }
body .cn-article .cn-byline { grid-template-columns: minmax(0, 1fr); }
body .cn-article .cn-prevnext { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cn-prevnext .is-next { text-align: left; } body .cn-prose > :is(.alignleft, .alignright) { display: block; float: none; width: 100%; margin-inline: 0; }
.cn-prose :is(.alignleft, .alignright) img { width: 100%; }
.cn-prose :is(.alignleft, .alignright) figcaption { display: block; }
.cn-sitestats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cn-prose .forminator-ui :is(.forminator-input, .forminator-textarea) { font-size: 1rem; }
}