/* Permanent content layout and accessible defaults; visual values belong to themes. */
:root {
  --page-bg: #fff;
  --ink: #171717;
  --font-body: system-ui, sans-serif;
  --font-size: 1.125rem;
  --line-height: 1.6;
  --page-pad-inline: clamp(1.5rem, 6vw, 7rem);
  --page-pad-block: 4rem;
  --content-width: 34rem;
  --content-align: start;
  --content-justify: center;
  --heading-size: clamp(5rem, 15vw, 12rem);
  --heading-gap: 2rem;
  --paragraph-gap: .65em;
  --signoff-gap: 1.4em;
}
* { box-sizing: border-box; }
html { min-width: 0; background: var(--page-bg); }
body { margin: 0; color: var(--ink); background: var(--page-bg); font-family: var(--font-body); font-size: var(--font-size); line-height: var(--line-height); }
.site { position: relative; isolation: isolate; display: grid; align-content: var(--content-justify); justify-items: var(--content-align); min-height: 100vh; min-height: 100svh; padding: var(--page-pad-block) var(--page-pad-inline); }
.identity { position: relative; width: 100%; max-width: var(--content-width); min-width: 0; }
.wordmark { margin: 0 0 var(--heading-gap); font-size: var(--heading-size); line-height: 1; overflow-wrap: anywhere; }
p { margin: 0; overflow-wrap: break-word; }
p + p { margin-block-start: var(--paragraph-gap); }
p.signoff { margin-block-start: var(--signoff-gap); }
@media (max-width: 40rem) {
  .site { padding-inline: var(--mobile-pad-inline, 1.5rem); padding-block: var(--mobile-pad-block, 3rem); align-content: var(--mobile-content-justify, start); }
}
@media (forced-colors: active) {
  .wordmark { background: none !important; height: auto !important; aspect-ratio: auto !important; }
  .wordmark span { position: static !important; clip-path: none !important; width: auto !important; height: auto !important; }
}
@media print {
  body { color: #000; background: #fff; }
  .site { min-height: auto; }
  .site::before, .site::after { display: none; }
  .wordmark { background: none !important; aspect-ratio: auto !important; }
  .wordmark span { position: static !important; clip-path: none !important; width: auto !important; height: auto !important; }
}
