.header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--paper); border-bottom: 1px solid var(--rule); color: var(--ink);
}
.header__in {
  height: 100%; max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.mark { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; font-weight: 500; letter-spacing: 0.12em; }
.mark svg { width: 28px; height: 24px; }
.header__links { display: flex; gap: 2.25rem; font-size: var(--fs-small); }
.header__links a { text-decoration: none; padding: 0.25rem 0; }
.header__links a:hover, .header__links a[aria-current="page"] { text-decoration: underline; }
.header__menu { display: none; background: none; border: 0; cursor: pointer; font-size: var(--fs-small); padding: 0.5rem 0; }

/* over the hero: transparent, paper text */
.header[data-theme="hero"] { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; color: var(--paper); }
.header { transition: background 200ms, color 200ms, border-color 200ms; }

@media (max-width: 960px) {
  .header__links {
    position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule);
    padding: 1rem var(--gutter) 2rem; font: 400 2rem/1.4 var(--font-serif);
    opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 200ms;
  }
  .header__links[data-open="true"] { opacity: 1; visibility: visible; }
  .header__menu { display: block; color: inherit; }
}

.footer { border-top: 1px solid var(--rule); padding: 4rem 0; }
.footer__in { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; color: var(--ink-3); font-size: var(--fs-small); }