*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 16px/1.8 var(--font-body); overflow-wrap: anywhere; }
body.modal-open { overflow: hidden; }
img { max-width: 100%; height: auto; }
svg { display: block; }
a { color: var(--action); text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
button, input, textarea, select { font: inherit; }
button, .button { cursor: pointer; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 4px; border-radius: 3px; }
input, textarea, select { max-width: 100%; min-width: 0; padding: 12px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--control-line); border-radius: 10px; }
input:focus, textarea:focus { border-color: var(--action); }
textarea { width: 100%; resize: vertical; }
/* Stacked fields reserve an 8px gap for the existing 3px + 4px focus outline. */
.form-field, .comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment,
.post-password-form label { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.form-field > :is(input, textarea, select), .post-password-form input[type=password] { width: 100%; min-width: 0; }
.post-password-form label { margin-bottom: var(--space-4); }
button { border: 0; background: none; }
.button, input[type=submit] { display: inline-flex; justify-content: center; align-items: center; gap: 28px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--action); border-radius: 12px; background: var(--action); color: white; text-decoration: none; font-size: 15px; letter-spacing: .04em; transition: transform var(--duration-control) var(--ease); }
.button:hover { background: color-mix(in srgb, var(--action) 85%, black); transform: translateY(-2px); text-decoration: none; }
.button:active { transform: translateY(1px); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; line-height: 1.45; }
h1, h2, h3, p { margin-top: 0; }
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 20px; background: white; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.muted { color: var(--muted); }
.eyebrow { font-family: Georgia, var(--font-heading); font-size: 12px; letter-spacing: .16em; color: var(--action); }
.fine-rule { display: block; width: 40px; height: 1px; background: var(--action); margin: 28px 0; }
/* Keep article margins inside a stable main box during streamed HTML parsing. */
main { display: flow-root; }
main:focus { outline: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0s !important; }
  .button:hover, .post-card:hover { transform: none !important; }
  .card-image:hover img { transform: none !important; }
}

/* State primitives; markup/validation remains owned by the calling feature. */
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; color: var(--muted); background: var(--cream); border-color: var(--control-line); }
.button:disabled:hover, input[type=submit]:disabled:hover { transform: none; background: var(--cream); }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field-help, .field-error { margin: 8px 0 16px; font-size: 14px; }
.field-help { color: var(--muted); }
.field-error { color: var(--error); }
.notice { padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--action); border-radius: 4px; background: var(--surface); }
.notice-error { border-left-color: var(--error); }