/* Home — the page shell around the section slots. Builds on theme.css (body, main, links).
   Everything snaps to the 8px unit; the pixel is 4px, matching the theme's border and shadow. */

/* The sections land on the nav's anchors without a smooth scroll: jumps only. */
html { scroll-behavior: auto; scroll-padding-top: 16px; }

/* Skip link in palette colours rather than base.css's white on black. */
.skip-link:focus {
  z-index: 1;
  padding: 8px 16px;
  background: #FFCD75;
  color: #1A1C2C;
  outline: 4px solid #41A6F6;
  outline-offset: 0;
}

/* Header and footer are bars on the panel colour; their content lines up with <main>. */
.home-footer { background: var(--surface); }
.home-footer { border-top: 4px solid var(--fg); margin-top: 32px; }

.home-bar {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 8px clamp(16px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 32px;
}

/* Bitmap type for short strings only: the link labels. */
.home-links a {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
}

/* The page's one <h1>. The nav and hero already show the name, so it is for screen readers only. */
.home-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.home-links li { max-width: none; }

/* Yellow rather than the theme's red: red on the panel colour misses 4.5:1. */
.home-links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: #FFCD75;
  text-decoration: none;
  border-bottom: 4px solid transparent;
}
.home-links a:hover,
.home-links a:focus-visible { border-bottom-color: #FFCD75; }
.home-links a:active { transform: translate(0, 4px); }
.home-links a:focus-visible { outline: 4px solid #41A6F6; outline-offset: 4px; }

/* Body copy stays in the sans role. */
.home-place { margin: 0; padding-block: 8px; font-size: 16px; line-height: 32px; }

/* The first and last slots sit against the bars, so they give up the theme's 64px. */
#main > #nav { padding-top: 16px; }
#main > #footer { padding-bottom: 32px; }

@media (max-width: 720px) {
  .home-links { gap: 0 16px; }
}