/* ============================================================
   site.css — the chrome both pages share: the bar at the top,
   the rule at the bottom, and the two tokens neither page can
   do without. Everything else stays in the page that owns it.

   Loaded after hopala.css and before each page's own <style>.
   ============================================================ */

:root {
  --mono-face: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Height of the sticky bar. On the toy's narrow layout the bar leaves the
     flow and this becomes the toy screen's top padding, so a slight overshoot
     is harmless and an undershoot would slide the device under the logo. */
  --head-h: 3.4rem;
}

/* ---- the bar ---------------------------------------------- */
.site-head {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--hairline);
}
.site-head .in {
  max-inline-size: 1240px; margin-inline: auto; padding: .6rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-head .hopala-wm { font-size: 1.5rem }

.site-nav {
  display: flex; align-items: center; gap: .9rem;
  font-size: .86rem; color: var(--muted-soft);
  min-inline-size: 0;
}
.site-nav .desc { white-space: nowrap }
.site-nav a {
  font-weight: 600; color: var(--ink); text-decoration: none;
  padding: .3rem .75rem; white-space: nowrap;
  border: 1.5px solid var(--ink);
  border-radius: 11px 14px 11px 15px / 14px 11px 15px 11px;
  box-shadow: 2px 3px 0 rgba(20, 20, 19, .12);
  transition: background .2s, color .2s, transform .3s var(--spring);
}
.site-nav a:hover {
  background: var(--clay-deep); border-color: var(--clay-deep); color: #fff;
  transform: translateY(-1px);
}
/* The tagline is the first thing to go: the link is a control, the descriptor
   is a courtesy, and on a phone there is room for one of them. */
@media (max-width: 560px) { .site-nav .desc { display: none } }

/* ---- the rule at the bottom -------------------------------- */
.site-foot {
  border-block-start: 1px solid var(--hairline);
  padding-block: 1.6rem 2.4rem;
  font-size: .88rem; color: var(--muted-soft);
}
.site-foot .in {
  max-inline-size: 1240px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
}
.site-foot a { color: var(--clay-text) }