/* kukudze inner pages in the brand book style (chapters 13 to 21): pricing, contact, sign in / sign up, account,
   about, legal, blog list, article, 404. Square sections, 1px rules, 4px radius on controls, no shadows.
   Values from tokens.css. Mobile first. */

.page-kick { display: block; margin-bottom: var(--space-12); font-family: var(--font-code); color: var(--color-primary); }
.page-head .notice { margin-top: var(--space-24); }
.notice { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-12) var(--space-16); max-width: 72ch; background: var(--color-info-bg); color: var(--color-text); border-radius: var(--radius-control); }
.notice .icon { color: var(--color-info); flex: none; margin-top: 2px; }
.notice a { font-weight: 600; }
.notice--warn { background: var(--color-warning-bg); }
.notice--warn .icon { color: var(--color-warning); }
.notice__title { display: block; font-weight: 700; }
.notice:focus-visible { outline-offset: var(--layout-focus-offset); }
.ruled { border-top: var(--border-thin) solid var(--color-border); }

/* ---------- Document layout: contents list + 72ch body (article, legal, about) ---------- */
.doc { display: grid; gap: var(--space-32); }
.doc__side { display: grid; gap: var(--space-24); align-content: start; }
.doc__body { min-width: 0; }
@media (min-width: 1024px) {
	.doc { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-48); align-items: start; }
	.doc__side { position: sticky; top: calc(var(--header-height) + var(--space-32)); }
	.doc--one { grid-template-columns: minmax(0, 1fr); }
	/* Article banner: first in the source (right under the title on phones), body column on desktop. */
	.doc:not(.doc--one) > .article-banner { grid-column: 2; grid-row: 1; }
	.doc:not(.doc--one) > .article-banner ~ .doc__side { grid-column: 1; grid-row: 1 / span 2; }
	.doc:not(.doc--one) > .article-banner ~ .doc__body { grid-column: 2; grid-row: 2; }
}
.toc { border-top: var(--border-thin) solid var(--color-border); padding-top: var(--space-16); }
.toc__title { font-family: var(--font-body); font-size: var(--font-size-label); font-weight: 600; letter-spacing: 0; line-height: var(--line-height-label); margin-bottom: var(--space-8); }
.toc ol { list-style: none; padding: 0; }
.toc a { display: flex; align-items: center; min-height: var(--layout-touch-target); padding-block: var(--space-4); color: var(--color-text); text-decoration: none; border-bottom: var(--border-thin) solid var(--color-border); }
.toc a:hover { color: var(--color-primary); text-decoration: underline; }
.toc .lv3 a { padding-left: var(--space-16); color: var(--color-text-muted); }
.side-box { border-top: var(--border-thin) solid var(--color-border); padding-top: var(--space-16); }
.side-box h2 { font-family: var(--font-body); font-size: var(--font-size-label); font-weight: 600; letter-spacing: 0; line-height: var(--line-height-label); margin-bottom: var(--space-8); }
.side-box p { color: var(--color-text-muted); }
.side-box p + p { margin-top: var(--space-8); }
.prose { font-size: var(--font-size-body); }
.prose h2 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); scroll-margin-top: calc(var(--header-height) + var(--space-24)); }
.prose h3 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); scroll-margin-top: calc(var(--header-height) + var(--space-24)); }
.prose blockquote { margin: var(--space-24) 0; padding-left: var(--space-16); border-left: 2px solid var(--color-primary); }
.prose code { padding: 1px 4px; background: var(--color-surface-muted); border-radius: var(--radius-badge); }
.prose table { width: 100%; border: var(--border-thin) solid var(--color-border); }
/* Wide tables scroll sideways inside their own box (phones); the page itself never scrolls sideways. */
.prose .table-scroll { overflow-x: auto; margin-block: var(--space-24); -webkit-overflow-scrolling: touch; }
.prose .table-scroll table { min-width: 34rem; margin: 0; }
.prose .table-scroll:focus-visible { outline: var(--layout-focus-width) solid var(--color-focus); outline-offset: var(--layout-focus-offset); }
.prose th, .prose td { padding: var(--space-12) var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); text-align: left; }
.prose img { border-radius: var(--radius-control); }
/* Legal pages: text from inc/legal/*.php, one <section> per contents item. Cookie table = two-table pattern. */
.post-meta + .legal { margin-top: var(--space-24); }
.legal__section > * + * { margin-top: var(--space-16); }
.legal__section > h2 { margin-top: 0; }
.legal__section > h3 { margin-top: var(--space-32); }
.legal__section + .legal__section { margin-top: var(--space-48); }
.legal-table { overflow-x: auto; }
.legal-table:focus-visible { outline: var(--layout-focus-width) solid var(--color-focus); outline-offset: var(--layout-focus-offset); }
.legal-table__inner { min-width: 640px; }
.prose .legal-table table { border: 0; }
.prose .legal-table .tbl-b th, .prose .legal-table .tbl-b td { height: auto; vertical-align: top; }
.prose .legal-table .tbl-h th { border-bottom: 0; }
.prose .legal-table code { overflow-wrap: anywhere; }
.c-ck-name { width: 28%; } .c-ck-what { width: 32%; } .c-ck-life { width: 20%; } .c-ck-who { width: 20%; }
.soon { display: grid; gap: var(--space-12); justify-items: start; padding: var(--space-24); background: var(--color-surface-muted); }
.soon__title { font-family: var(--font-display); font-size: var(--font-size-h4); font-weight: 700; letter-spacing: var(--letter-spacing-h4); }
.soon p { color: var(--color-text-muted); max-width: 60ch; }

/* ---------- Pricing (monthly prices only): four flat bordered columns (4 / 2 / 2 / 1) ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--border-thin) solid var(--color-border); border-left: var(--border-thin) solid var(--color-border); }
.plan { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); border-right: var(--border-thin) solid var(--color-border); border-bottom: var(--border-thin) solid var(--color-border); }
.plan h2 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
.plan__line { color: var(--color-text-muted); }
.price { display: grid; gap: var(--space-4); min-height: 96px; align-content: start; }
.price__amt { font-family: var(--font-display); font-size: var(--font-size-h1); font-weight: 800; line-height: 1; letter-spacing: var(--letter-spacing-h1); font-variant-numeric: tabular-nums; }
.price__unit { color: var(--color-text-muted); }
.plan__rule { height: 0; margin: 0; border: 0; border-top: var(--border-thin) solid var(--color-border); }
.plan__feat { display: grid; gap: var(--space-8); }
.plan__feat li { display: flex; gap: var(--space-8); align-items: flex-start; }
.plan__feat .icon { width: 20px; height: 20px; color: var(--color-success); flex: none; margin-top: 2px; }
.plan__act { display: grid; }
.plan__act .btn { width: 100%; white-space: nowrap; }
.plan__note { display: flex; gap: var(--space-8); align-items: flex-start; color: var(--color-text-muted); }
.plan__note .icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-success); }
.plan__note--soon .icon { color: var(--color-text-muted); }
.cmp-soon { font-weight: 400; color: var(--color-text-muted); }
@media (min-width: 768px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Card order (owner rule): name, line, price, button, note, divider, features. Subgrid: each of the 7 parts sits on
   the same line in every column of a row, so prices, buttons, notes and dividers line up. */
@media (min-width: 768px) {
	@supports (grid-template-rows: subgrid) {
		.plans .plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: var(--space-16); }
		.plans .plan > * { min-width: 0; }
		.plans .plan__act, .plans .plan__note, .plans .plan__rule { align-self: start; }
	}
}
.compare { margin-top: var(--space-48); }
.compare h2 { margin-bottom: var(--space-16); }
.compare__scroll { overflow-x: auto; }
.compare__scroll:focus-visible { outline: var(--layout-focus-width) solid var(--color-focus); outline-offset: var(--layout-focus-offset); }
.compare__inner { min-width: 640px; }
.tbl-h, .tbl-b { width: 100%; table-layout: fixed; }
.tbl-h { border-collapse: separate; border-spacing: 0; }
.tbl-h th { height: var(--layout-table-head); padding: 0 var(--space-16); text-align: left; font-weight: 600; background: var(--color-primary); color: var(--color-on-primary); }
.tbl-h th:first-child { border-top-left-radius: var(--radius-control); }
.tbl-h th:last-child { border-top-right-radius: var(--radius-control); }
.tbl-scroll { border: var(--border-thin) solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-control) var(--radius-control); background: var(--color-surface); }
.tbl-b td, .tbl-b th { height: var(--layout-table-row); padding: var(--space-12) var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); text-align: left; }
.tbl-b tr:last-child > * { border-bottom: 0; }
.tbl-b th[scope="row"] { font-weight: 600; }
.c-plan { width: 31%; } .c-m { width: 21%; } .c-n { width: 24%; } .c-r { width: 24%; }
.price-note { margin-top: var(--space-16); color: var(--color-text-muted); max-width: 72ch; }

/* ---------- Forms on pages (contact, auth, account) ---------- */
.form { display: grid; gap: var(--space-20); }
.form .btn[type="submit"] { justify-self: start; }
@media (max-width: 767px) { .form .btn[type="submit"] { width: 100%; justify-self: stretch; } }
.lbl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); }
.lbl-row a { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); font-weight: 600; }
.pw { position: relative; }
.pw input { padding-right: 96px; }
.pw__btn { position: absolute; top: 2px; right: 2px; bottom: 2px; display: inline-flex; align-items: center; gap: var(--space-8); min-width: var(--layout-touch-target); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-link); font-weight: 600; }
.pw__btn .icon { width: 20px; height: 20px; }
.pw__btn:hover { color: var(--color-primary-hover); }
.pw__btn .ic-hide { display: none; }
.pw__btn[data-shown] .ic-show { display: none; }
.pw__btn[data-shown] .ic-hide { display: inline-block; }
.or-line { display: flex; align-items: center; gap: var(--space-12); color: var(--color-text-muted); }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.btn-full { width: 100%; }
.g-ic { width: 20px; height: 20px; }

.contact { display: grid; gap: var(--space-48); }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.contact__mail { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--layout-touch-target); margin-top: var(--space-16); font-family: var(--font-code); font-size: var(--font-size-lead); overflow-wrap: anywhere; }
.contact__info p { color: var(--color-text-muted); max-width: 44ch; }
.contact__list { margin-top: var(--space-24); border-top: var(--border-thin) solid var(--color-border); }
.contact__list li { padding-block: var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); }
.contact__list b { display: block; font-weight: 600; }
.contact__list span { color: var(--color-text-muted); }
.form-box { padding-top: var(--space-24); border-top: var(--border-thin) solid var(--color-border); }
@media (min-width: 1024px) { .form-box { padding: 0 0 0 var(--space-48); border-top: 0; border-left: var(--border-thin) solid var(--color-border); } }
.form-box h2 { margin-bottom: var(--space-8); }
.form-box > .field-help { margin-bottom: var(--space-24); }
.form-box .notice { margin-bottom: var(--space-24); }

/* ---------- Sign in / sign up (brand book chapter 21) ----------
   White form with a restrained cobalt side panel above 1024px, stacked below. Full width: the two columns share
   the page (1:1 to 1439px, 5:7 from 1440px) and the panel runs to the right edge. The header already draws the
   top rule, so .auth has none (it was a second line). Nothing moves on hover. */
.auth { display: grid; --kuk-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }
.auth__main { display: grid; gap: var(--space-32); align-content: start; padding-block: var(--space-48) var(--space-64); min-width: 0; }
.auth__intro h1 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); }
.auth__intro .lead { margin-top: var(--space-12); max-width: 40ch; text-wrap: pretty; color: var(--color-text-muted); }
.auth__intro .notice { margin-top: var(--space-24); }
.auth__body { display: grid; gap: var(--space-24); align-content: start; min-width: 0; }
.auth__body > .notice { max-width: none; }
.form .auth__submit { width: 100%; justify-self: stretch; }
.auth__alt { display: grid; gap: var(--space-16); }
.auth__switch { color: var(--color-text-muted); }
.auth__switch a { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); font-weight: 600; }
.auth .field { position: relative; }
/* Field errors: error ink, a small alert icon and the text (chapter 12). */
.auth .field-error::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; background: currentColor; -webkit-mask: var(--kuk-alert) center / contain no-repeat; mask: var(--kuk-alert) center / contain no-repeat; }

/* Live email check (site.js): a badge in the demo's style, "Looks right" or "Check the format", plus a short hint.
   Format only, in the browser. Empty, untouched or without JavaScript it takes no space but stays a live region. */
.email-check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.email-check:not([data-state]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.email-check .icon { display: none; }
.email-check[data-state="ok"] .ic-ok, .email-check[data-state="bad"] .ic-bad { display: inline-block; }
.email-check[data-state="ok"] .email-check__badge { color: var(--color-success); background: var(--color-success-bg); }
.email-check[data-state="bad"] .email-check__badge { color: var(--color-warning); background: var(--color-warning-bg); }
.email-check__hint { color: var(--color-text-muted); }

/* Firebase sign-in states (auth.js): notice colors, the honeypot, the step panes (check link, new password,
   link expired, check your inbox). Nothing moves on hover. */
.notice--ok { background: var(--color-success-bg); }
.notice--ok .icon { color: var(--color-success); }
.notice--error { background: var(--color-error-bg); }
.notice--error .icon { color: var(--color-error); }
.notice > div { display: grid; gap: var(--space-12); min-width: 0; }
.notice[hidden] { display: none; }
.auth__pane { display: grid; gap: var(--space-24); align-content: start; min-width: 0; }
.auth__pane[hidden] { display: none; }
.auth__pane > .notice { max-width: none; }
.auth__terms { color: var(--color-text-muted); }
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.auth-step h2 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
.auth-step h2:focus { outline: none; box-shadow: none; } /* focus is moved here so screen readers start at the new step; a heading is not a control */
.auth-step__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.auth-step__wait { display: flex; align-items: center; gap: var(--space-12); color: var(--color-text-muted); }
.auth-step__wait[hidden] { display: none; }
.auth-step__spin { width: 20px; height: 20px; border: 2px solid var(--color-link); border-right-color: transparent; border-radius: 50%; animation: kuk-spin var(--motion-slow) linear infinite; }
.auth-step__more { color: var(--color-text-muted); }
.linkbtn { display: inline; min-height: var(--layout-touch-target); padding: 0; border: 0; background: none; color: var(--color-link); font: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
@media (max-width: 767px) { .auth-step__actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .auth-step__spin { animation: none; border-right-color: var(--color-link); opacity: 0.6; } }
.acct__email { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); overflow-wrap: anywhere; }
.acct__out { display: grid; gap: var(--space-12); justify-items: start; }
.acct__out .notice { max-width: none; }
.acct__row > .notice { max-width: none; }
.acct__notice + .acct__notice { margin-top: var(--space-16); }

/* Forgot password: opens under the form (#reset target without JavaScript, .is-open after a no-JS post). */
.reset { display: none; padding-top: var(--space-24); border-top: var(--border-thin) solid var(--color-border); }
.reset:target, .reset.is-open { display: block; }
.reset > * + * { margin-top: var(--space-16); }
.reset h2 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.reset .notice { max-width: none; }
.reset__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); }
.reset__back { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); font-weight: 600; }

/* Cobalt side panel: what an account gives (only true lines) and the radar drawing. */
.auth__side { container-type: inline-size; display: flex; flex-direction: column; justify-content: center; gap: var(--space-32); margin-inline: calc(-1 * var(--page-gutter)); padding: var(--space-48) var(--page-gutter); background: var(--color-brand-band); color: var(--color-on-brand-band); }
.auth__side h2 { color: var(--color-on-brand-band); font-size: var(--font-size-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
.auth__side-head p { margin-top: var(--space-12); max-width: 44ch; }
.auth__side a { color: var(--color-on-brand-band); font-weight: 600; }
.auth__side-body { display: grid; gap: var(--space-32); align-items: center; }
.auth__points { border-top: var(--border-thin) solid rgba(255, 255, 255, 0.4); }
.auth__points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-16); padding-block: var(--space-16); border-bottom: var(--border-thin) solid rgba(255, 255, 255, 0.4); }
.auth__points b { display: block; font-weight: 600; }
.auth__n { color: var(--color-accent); line-height: var(--line-height-body); }
@container (min-width: 600px) {
	.auth__side-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-48); }
}

/* Radar: the logo's radar drawn large (thin rings, a soft beam, a small white center point) with three numbered
   blips that match the list. The beam turns without stopping (5s a turn, linear, transform only). Each blip
   brightens when the beam reaches it and fades after (opacity only). Blips use the same duration and start
   together with the beam; their negative delays put the bright moment at the beam's angle (blip 1 at 119deg,
   2 at 203deg, 3 at 300deg; the beam edge starts at 72deg). The email check does not touch it, so it never
   restarts. Still final state without JavaScript and with reduced motion. Decorative: aria-hidden. */
.radar { width: min(100%, 176px); height: auto; overflow: visible; }
@container (min-width: 600px) { .radar { width: 100%; max-width: 360px; justify-self: center; } }
.radar__grid { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; }
.radar__beam { fill: rgba(255, 255, 255, 0.14); }
.radar__edge { stroke: #FFFFFF; stroke-width: 1.75; stroke-linecap: round; }
.radar__blip rect { fill: var(--color-accent); }
.radar__blip text { fill: #FFFFFF; font-family: var(--font-code); font-size: 22px; font-weight: 600; }
.radar__center { fill: #FFFFFF; }
.radar__sweep { transform-origin: 160px 160px; transform-box: view-box; will-change: transform; }
@keyframes kuk-sweep { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
@keyframes kuk-blip { 0% { opacity: 1; } 40%, 100% { opacity: 0.55; } }
.js .radar .radar__sweep { animation: kuk-sweep 5s linear infinite; }
.js .radar .radar__blip { animation: kuk-blip 5s linear infinite; }
.js .radar .radar__blip--1 { animation-delay: -4.34s; }
.js .radar .radar__blip--2 { animation-delay: -3.18s; }
.js .radar .radar__blip--3 { animation-delay: -1.83s; }
@media (prefers-reduced-motion: reduce) { .js .radar .radar__sweep, .js .radar .radar__blip { animation: none; } }
@media (forced-colors: active) { .radar { display: none; } }

/* Tablet (768 to 1024, stacked): title on the left, form on the right, so the form row uses the width. */
@media (min-width: 768px) and (max-width: 1024px) {
	.auth__main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-48); padding-block: var(--space-64); }
	.auth__side { padding-block: var(--space-64); }
}
/* Above 1024: split. The form column fills its part; the panel runs from there to the right edge. */
@media (min-width: 1025px) {
	.auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(100vh - var(--header-height)), 880px); }
	.auth__main { align-content: center; padding: var(--space-64) var(--space-48) var(--space-64) 0; }
	.auth__side { margin: 0 calc(-1 * var(--page-gutter)) 0 0; padding: var(--space-64) var(--page-gutter) var(--space-64) var(--space-48); }
}
@media (min-width: 1440px) {
	.auth { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.auth__main { padding-right: var(--space-64); }
	.auth__side { padding-left: var(--space-64); }
}

/* Account preview */
.acct { display: grid; margin-top: var(--space-32); border-top: var(--border-thin) solid var(--color-border); }
.acct__row { display: grid; gap: var(--space-16); padding-block: var(--space-24); border-bottom: var(--border-thin) solid var(--color-border); }
.acct__row h2 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
.acct__row dl { display: grid; gap: var(--space-8); }
.acct__row dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); }
.acct__row dt { color: var(--color-text-muted); }
.acct__row dd { font-weight: 600; }
.acct__plan { display: grid; gap: var(--space-16); min-width: 0; }
.acct__use { display: grid; gap: var(--space-8); justify-items: end; min-width: min(240px, 100%); }
.acct__bar { display: block; width: 100%; height: 8px; background: var(--color-surface-muted); border-radius: var(--radius-control); overflow: hidden; }
.acct__bar > span { display: block; height: 100%; background: var(--color-primary); }
.acct__more { color: var(--color-text-muted); }
.acct__more a { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); }
.acct__notice > div { display: grid; gap: var(--space-12); }
.acct__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.notice .acct__actions a { font-weight: 600; }
@media (max-width: 767px) { .acct__actions .btn, .acct .soon .btn { width: 100%; } .acct .soon { justify-items: stretch; } }
@media (min-width: 1024px) { .acct__row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-48); } }

/* ---------- Blog (no categories on the visitor side) ---------- */
.posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--page-gap); }
.post-card { position: relative; display: flex; flex-direction: column; gap: var(--space-12); padding-block: var(--space-24); border-top: var(--border-thin) solid var(--color-border); }
/* Banners: brand look, 4px radius, 1px rule, no shadow, nothing moves on hover. 2:1 like the files. */
.post-card__img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.article-banner { max-width: 72ch; margin: 0; font-size: var(--font-size-body); }
.article-banner__img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.post-card h2, .post-card h3 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.post-card h2 a, .post-card h3 a { display: block; min-height: var(--layout-touch-target); color: var(--color-text); text-decoration: none; } /* tap target 44px (the whole card is clickable too) */
.post-card h2 a::after, .post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover h2 a, .post-card:hover h3 a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-card p { color: var(--color-text-muted); }
.post-meta { font-family: var(--font-code); color: var(--color-text-muted); }
@media (min-width: 768px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-32); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--layout-touch-target); min-height: var(--layout-touch-target); padding: 0 var(--space-12); border: var(--border-thin) solid var(--color-control-border); border-radius: var(--radius-control); color: var(--color-text); text-decoration: none; font-weight: 600; }
.pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.pagination .dots { border-color: transparent; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-8); list-style: none; padding: 0; margin-bottom: var(--space-16); }
.crumbs li { display: flex; align-items: center; gap: var(--space-8); }
.crumbs li + li::before { content: "/"; color: var(--color-text-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); min-width: var(--layout-touch-target); }
.page-head .post-meta { margin-top: var(--space-16); display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); align-items: center; }
.page-head .post-meta a { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); }
.article-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-48); padding: var(--space-24); background: var(--color-surface-muted); }
.related { margin-top: var(--page-section); }
.related > h2 { margin-bottom: var(--space-16); }
.test-flag { margin-bottom: var(--space-16); }

/* ---------- 404 ---------- */
.lost-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }
@media (max-width: 767px) { .lost-actions .btn { width: 100%; } }