/* The template's plain default look, until a design run (Hallmark) replaces it. Logical properties only, so the
   same rules work right to left. */
:root {
  --color-ink: oklch(0.25 0.01 250);
  --color-muted: oklch(0.5 0.01 250);
  --color-paper: oklch(0.99 0.003 250);
  --color-line: oklch(0.9 0.005 250);
  /* --font-script comes from src/styles/fonts.css: the Noto families for the site's scripts. */
  --font-body: var(--font-script), system-ui, sans-serif;
}
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 1rem/1.6 var(--font-body); }
main { max-inline-size: 42rem; margin-inline: auto; padding-inline: 1rem; padding-block: 3rem; }
h1 { font-size: 2rem; line-height: 1.2; margin-block: 0 0.5rem; overflow-wrap: break-word; }
.muted { color: var(--color-muted); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; border-block-start: 1px solid var(--color-line); padding-block-start: 1rem; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
footer { max-inline-size: 42rem; margin-inline: auto; padding-inline: 1rem; padding-block: 2rem; border-block-start: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.875rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
img { max-inline-size: 100%; block-size: auto; }
#contact form { display: grid; gap: 0.75rem; max-inline-size: 28rem; }
#contact label { display: grid; gap: 0.25rem; }
#contact input, #contact textarea, #contact button { font: inherit; padding-block: 0.5rem; padding-inline: 0.75rem; border: 1px solid var(--color-line); border-radius: 0.25rem; }
#contact button { justify-self: start; background: var(--color-ink); color: var(--color-paper); cursor: pointer; }
#contact :focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.test-banner { margin: 0; padding-block: 0.5rem; padding-inline: 1rem; background: oklch(0.93 0.08 85); color: oklch(0.3 0.05 85); text-align: center; font-size: 0.875rem; }