/* Shared site chrome (header/nav) + generic page layout/responsive
   container. Nav markup is duplicated per page — there's no build
   step/templating in this plain HTML/CSS/JS site — but it's styled and
   behaves identically everywhere via this shared file. */

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  min-height: var(--nav-height);
}

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}

.primary-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-lg);
}

.primary-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.primary-nav a:hover {
  text-decoration: underline;
}

/* Generic content container + responsive rhythm for every page except
   Home, which opts out via body.page-home / main.home-v2 overrides in
   css/home.css (single-viewport, no-scroll cover). */
main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

main.hero,
main.home-v2 {
  max-width: none;
  margin: 0;
  padding: 0;
}

main section + section {
  margin-top: var(--space-7);
}

@media (max-width: 600px) {
  main:not(.hero) {
    padding: var(--space-5) var(--space-3);
  }
}

@media (max-width: 480px) {
  .primary-nav ul {
    gap: var(--space-1) var(--space-3);
  }
  .primary-nav a {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
  }
}

/* ── Shared small-screen chrome ──
   Every page's mobile layout uses the same warm paper and the same
   red-stripe band behind its logo and nav. Each page's own CSS applies
   these (background: var(--m-paper) / var(--m-band)) inside its own
   mobile breakpoint. Both images are small WebP exports made for this
   (assets/images/shared/mobile/), not the multi-MB desktop textures. */
:root {
  --m-paper: var(--color-paper) url('/assets/images/shared/mobile/paper.webp') center top / cover no-repeat;
  --m-band: #c56c71 url('/assets/images/shared/mobile/stripe-band.webp') center 35% / max(900px, 100%) auto no-repeat;
}

/* ── Site footer ──
   One quiet copyright line on every page except Home. The year is
   filled in at build time (buildYear in .eleventy.js). */
.site-footer {
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
}

.site-footer__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--color-near-black);
  opacity: 0.7;
}

/* ── Logo → Home ──
   On every page but Home the logo is a link. The link box carries the
   logo's own size and rotation (from each page's CSS) and the image
   fills it, transparent margins included. The focus ring and the
   clickable area are drawn on ::after, inset to the torn-paper card
   itself: js/site.js sets --logo-card-inset from the card's position in
   the image (data-card-inset); the default here fits home-logo.png. */
.logo-home-link {
  --logo-card-inset: 7.2% 13% 13.3% 8.5%;
  position: relative;
  display: block;
  min-height: 0; /* keep aspect-ratio sizing; don't grow to the image's own ratio */
  pointer-events: none;
}

.logo-home-link > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.logo-home-link::after {
  content: "";
  position: absolute;
  inset: var(--logo-card-inset);
  pointer-events: auto;
}

.logo-home-link:focus-visible {
  outline: none;
  box-shadow: none;
}

.logo-home-link:focus-visible::after {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-focus-gap);
}