/* Public header — invariant 56px, accent layer, brand left, sign-in right.
   Geometry stays identical across every public page (Landing, Sign in, Forgot,
   Imprint, Privacy). */

.public-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-public-h);
  background: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  overflow: hidden;
  flex: 0 0 auto;
}
/* Two-layer geometry mirrors the accordion-trigger pattern:
   .public-header-pad   — full-width, page-inset (mobile safe-area padding)
   .public-header-row   — max-width 920 centered, flex container.
   The brand thus aligns with the chevron column, the sign-in pill aligns
   with the right edge of the subscribe button — both at every viewport. */
.public-header-pad {
  height: 100%;
}
.public-header-row {
  height: 100%;
  max-width: var(--max-hero);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-width: 0;
}
.brand {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Brand mark — small filled square, drawn in CSS so no extra asset
   request is needed. Inert by design (aria-hidden in the markup); the
   brand text carries the accessible name. Uses --accent-yellow so the
   mark, the favicon, the button-hover slide-in, and the text-selection
   highlighter all share one identity. */
.brand-mark {
  width: 0.875em;          /* tracks the brand font-size — ~12.25–12.6px */
  height: 0.875em;
  background: var(--accent-yellow);
  flex: 0 0 auto;
}

/* Header sign-in pill — filled --ink, --accent-yellow slide-in on hover.
   Same hover machinery as form submit buttons (matches the highlighter
   accent used by ::selection). On /signin itself the pill gets
   aria-current=page, becomes inert, color-only. */
.header-login {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--bg);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--duration-medium) var(--ease-standard),
              filter var(--duration-quick) var(--ease-standard);
}
.header-login::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-yellow);
  transform: translateX(-100%);
  transition: transform var(--duration-medium) var(--ease-standard);
  z-index: -1;
}
.header-login > * { position: relative; z-index: 1; }
.header-login:hover::after { transform: translateX(0); }
.header-login:hover { color: var(--ink); }
.header-login:active { transform: translateY(1px); filter: brightness(0.97); }
.header-login:focus-visible { box-shadow: inset 0 0 0 2px var(--bg); }

/* Hairline rule above footer — full-bleed, mandatory on every page */
.footer-rule {
  height: 1px;
  background: var(--rule);
  width: 100%;
  flex: 0 0 auto;
}

.public-footer {
  height: var(--footer-public-h);
  overflow: hidden;
  flex: 0 0 auto;
}
.public-footer-pad {
  height: 100%;
}
.footer-row {
  height: 100%;
  max-width: var(--max-hero);
  margin: 0 auto;
  /* 3-column grid keeps the tagline centered regardless of the side
     items' widths. Side columns are 1fr each so the centerline of the
     middle item lands on the axis of the row, not on the midpoint of
     the remaining whitespace (which is what `justify-content:
     space-between` would give us). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-s);
  /* On narrow viewports, the items + gap can exceed the available inset
     width. min-width:0 lets each cell shrink past its intrinsic content
     width without forcing a horizontal scroll on the page. */
  min-width: 0;
}
.footer-row > * { min-width: 0; }
.footer-copy {
  font-family: var(--body-font);
  font-size: var(--step--1);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  justify-self: start;
}
.footer-tagline {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ink);
  margin: 0;
  justify-self: center;
  text-align: center;
  white-space: nowrap;
}
.footer-link { justify-self: end; }
.footer-link {
  font-family: var(--body-font);
  font-size: var(--step--1);
  color: var(--ink-mute);
  text-decoration: none;
  transition: color var(--duration-quick) var(--ease-standard);
}
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link[aria-current="page"] {
  color: var(--ink);
}

/* Below 720px the footer can't fit copy + tagline + link in one row at the
   fixed footer height. The tagline is a desktop-grade detail; on narrow
   viewports we drop it and fall back to the original two-item layout. */
@media (max-width: 720px) {
  .footer-row {
    grid-template-columns: 1fr auto;
  }
  .footer-tagline { display: none; }
}