/* Henry Edwards — holding page
   Layout: one quiet column, mark top-left, name set large, footer pinned to the bottom. */
:root {
  --bg: #f3f1ec;
  --ink: #15202b;
  --muted: #5b6672;
  --rule: #d9d6cf;
  --accent: #b8873b;
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11181f; --ink: #ece9e2; --muted: #9aa4ae; --rule: #26313b; --accent: #d3a35a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11181f; --ink: #ece9e2; --muted: #9aa4ae; --rule: #26313b; --accent: #d3a35a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.page {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 3rem;
  max-width: 64rem;
  margin: 0 auto;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  padding-left: max(16px, env(safe-area-inset-left, 0px), 4vw);
  padding-right: max(16px, env(safe-area-inset-right, 0px), 4vw);
}

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mark { display: block; width: 44px; height: 44px; color: var(--ink); }
.mark svg { width: 100%; height: 100%; display: block; }
.mark .arm { fill: var(--accent); }
.status {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: 0.6rem;
}
.status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* Main */
.hero { align-self: center; display: grid; gap: 1.5rem; max-width: 46rem; }
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero h1 .surname { display: block; color: var(--muted); font-weight: 400; }
.hero p { margin: 0; max-width: 34rem; font-size: clamp(1.125rem, 2.2vw, 1.375rem); color: var(--ink); }
.hero p em { font-style: italic; color: var(--accent); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--rule); padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted);
}
.site-footer a { color: inherit; text-underline-offset: 3px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .status::before { animation: none; } }