/* The site's header and footer, shared by every Skald page. Markup: src/Chrome.php.
 *
 * Loaded after a page's own styles and before /theme.css, so a theme can still
 * restyle it. Uses only the colour tokens every page defines (--ink, --dim, --line,
 * --bg, --accent). Furniture, so sans-serif; the prose stays serif.
 *
 * One width on every page (--site-w, 72rem), whatever the page's own column is, so
 * the bar does not jump as a reader moves between pages. Pages that lay out in
 * columns use the same width; a column of prose keeps its own, narrower measure.
 */
:root { --site-w: 72rem; }
.site-head, .site-foot {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--dim);
}
.site-in { max-width: var(--site-w); margin: 0 auto; padding: 0 16px; }
.site-head a, .site-foot a { color: var(--dim); }
.site-head a:hover, .site-foot a:hover { color: var(--accent); }
.site-head a:focus-visible, .site-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.site-head { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-head .site-in {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: .35rem 1.1rem; padding-top: .7rem; padding-bottom: .75rem;
}
/* The logo (public/brand/) with "· by Lifspel" as live text, never part of the image:
   it stays crisp, and a screen reader reads it. Zoe Kimura, 2026-09-25. */
.site-brand { display: inline-flex; align-items: flex-end; gap: .45rem; text-decoration: none; white-space: nowrap; }
.site-logo { height: 44px; width: auto; display: block; }
.site-logo .lg-ink { fill: var(--ink); }
.site-logo .lg-k { fill: var(--accent); }
.site-brand span { font: 14px/1 Georgia, 'Iowan Old Style', serif; color: var(--dim); padding-bottom: 1px; }
.site-head .site-brand:hover span { color: var(--accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-left: auto; }
.site-nav a { text-decoration: none; white-space: nowrap; }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: .35em; text-decoration-thickness: 2px; }
/* The way out to Lifspel proper, set a little apart from Skald's own pages. */
.site-nav .site-lifspel { padding-left: 1.1rem; border-left: 1px solid var(--line); color: var(--accent); }
/* Sign in / sign out: a link or a one-button form, made to look like the other
   links and never to break across a line. */
.site-account { margin: 0; display: inline; white-space: nowrap; }
.site-account button { font: inherit; color: var(--dim); background: none; border: 0; padding: 0;
  cursor: pointer; white-space: nowrap; }
.site-account button:hover { color: var(--accent); }
.site-account button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Footer */
.site-foot { margin: 5rem 0 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.site-foot .site-in { padding-top: 1.4rem; padding-bottom: 4rem; }
.site-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.2rem; margin: 0 0 .4rem; }
.site-links { margin: 0 0 .4rem; }
.site-legal { margin: 1rem 0 0; font-size: .82rem; line-height: 1.55; }

/* A phone: the brand and the account share the top row, the page links take the
   row below. Sign out is never left stranded on a line of its own. */
@media (max-width: 40rem) {
  .site-nav { order: 2; flex-basis: 100%; margin-left: 0; }
  .site-account { order: 1; margin-left: auto; }
  .site-nav .site-lifspel { padding-left: 0; border-left: 0; }
}