/* Shared site foundation for story-led; page compositions stay local. */
:root { --ink: #166534; --accent: #c2410c; --paper: #fdf6ec; --line: rgba(15, 23, 42, .18); --content: 1180px; }
@supports (color: color-mix(in srgb, black, white)) { :root { --line: color-mix(in srgb, var(--ink) 18%, transparent); } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: system-ui, sans-serif; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
header, footer { padding-inline: max(1.25rem, calc((100vw - var(--content)) / 2)); }
.site-shell-header, header { min-height: 4.75rem; display: flex; justify-content: space-between; gap: 1.25rem; align-items: center; padding-block: .9rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.site-brand { max-width: 22rem; color: var(--ink); font-size: .94rem; font-weight: 760; letter-spacing: -.015em; text-decoration: none; }
.site-shell-header nav, header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem 1rem; align-items: center; }
.site-shell-header nav a, header nav a { color: var(--ink); font-size: .88rem; text-decoration: none; }
.site-shell-header nav a[aria-current="page"], header nav a[aria-current="page"] { color: var(--accent); font-weight: 750; }
main { overflow: clip; }
/* Page CSS may use narrow inner reading columns, never a narrow site-wide <main>. */
html body main[data-page-role] { width: 100%; max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }
section { padding: clamp(3.5rem, 8vw, 7rem) max(1.25rem, calc((100vw - var(--content)) / 2)); }
/* Form foundation: generated page CSS may add composition detail, but every form stays usable. */
main form { display: grid; gap: 1rem; width: min(100%, 42rem); margin-block: 1.5rem 0; }
main form label { display: grid; gap: .45rem; color: var(--ink); font-size: .92rem; font-weight: 700; }
main form input, main form textarea, main form select { display: block; width: 100%; min-inline-size: 0; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: .45rem; background: #fff; color: var(--ink); font: inherit; line-height: 1.4; }
main form textarea { min-height: 9rem; resize: vertical; }
main form input:focus, main form textarea:focus, main form select:focus { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 2px; border-color: var(--accent); }
main form button, main form [type="submit"] { justify-self: start; min-height: 2.75rem; padding: .7rem 1.15rem; border: 0; border-radius: .45rem; background: var(--accent); color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
main form button:hover, main form [type="submit"]:hover { filter: brightness(.94); }
@media (max-width: 680px) { main form { width: 100%; } }
.site-shell-footer, footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: end; margin-top: 3rem; padding-block: 2.5rem; background: var(--ink); color: var(--paper); }
.site-shell-footer p, footer p { margin: 0; }
.site-shell-footer .site-footer-email, footer p + p { margin-top: .35rem; opacity: .78; font-size: .9rem; }
.site-shell-footer nav, footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1rem; }
.site-shell-footer a, footer a { color: inherit; font-size: .88rem; text-underline-offset: .18em; }
@media (max-width: 680px) { .site-shell-header, header, .site-shell-footer, footer { grid-template-columns: 1fr; align-items: start; } .site-shell-header, header { flex-direction: column; } .site-shell-header nav, header nav, .site-shell-footer nav, footer nav { justify-content: flex-start; } header, footer, section { padding-inline: 1.25rem; } }