:root {
  --fs-micro: 12px;
  --fs-small: 13px;
  --fs-body:  16px;
  --fs-lead:  20px;
  --tr-micro: 0.16em;
}

.page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column
}

.netbar,
.sitefoot {
  padding-inline: var(--nf-gutter, clamp(24px, 5vw, 56px))
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--nf-accent);
  color: var(--nf-on-accent);
  padding: 10px 14px;
  font-family: var(--nf-mono);
  font-size: var(--fs-small);
  text-decoration: none
}

.skip:focus {
  left: 8px;
  top: 8px;
  z-index: 100
}

.netbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--nf-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--nf-faint);
  padding-block: clamp(20px, 3vw, 32px);
  animation: nf-fade-in 1.2s ease 0.05s both
}

.netbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  color: var(--nf-ink-soft);
  text-decoration: none;
  transition: color 0.25s
}

.netbar-brand:hover {
  color: var(--nf-ink)
}

.netbar-brand:focus-visible {
  outline: 2px solid var(--nf-focus);
  outline-offset: 3px
}

.netbar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nf-accent);
  box-shadow: 0 0 10px var(--nf-accent);
  animation: nf-pulse 2.4s ease-in-out infinite;
  flex: none
}

.netbar-mark,
.foot-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  background: var(--nf-accent);
  color: var(--nf-on-accent);
  font-family: var(--nf-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  padding-right: 1px
}

.netbar-name {
  white-space: nowrap
}

.netbar-sep {
  color: var(--nf-faint)
}

.netbar-role {
  white-space: nowrap
}

.netbar-fill {
  flex: 1 1 auto;
  min-width: 0
}

.netbar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--nf-line-strong);
  border-radius: 999px;
  color: var(--nf-accent-ink);
  white-space: nowrap
}

.netbar-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--nf-underline);
  text-underline-offset: 4px;
  transition: color 0.25s,text-decoration-color 0.25s
}

.netbar-link:hover {
  color: var(--nf-ink-soft);
  text-decoration-color: var(--nf-accent)
}

.netbar-link:focus-visible {
  outline: 2px solid var(--nf-focus);
  outline-offset: 3px
}

.netbar-ext {
  font-size: 1em
}

.netbar-year {
  white-space: nowrap
}

@media (max-width: 560px) {
  .netbar-year {
    display: none
  }
  .netbar-role {
    white-space: normal
  }
}

.sitefoot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--nf-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--nf-faint);
  animation: nf-fade-in 1.2s ease 0.85s both;
  margin-top: auto;
  padding-block: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--nf-line)
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px
}

.sitefoot .linkish,
.sitefoot a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--nf-underline);
  text-underline-offset: 4px;
  transition: color 0.25s,text-decoration-color 0.25s
}

.sitefoot .linkish:hover,
.sitefoot a:hover {
  color: var(--nf-ink-soft);
  text-decoration-color: var(--nf-accent)
}

.sitefoot .linkish:focus-visible,
.sitefoot a:focus-visible {
  outline: 2px solid var(--nf-focus);
  outline-offset: 3px
}

.sitefoot .linkish {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit
}

.foot-brand {
  gap: 9px;
  color: var(--nf-ink-soft)!important;
  text-decoration: none!important
}

.foot-brand:hover {
  color: var(--nf-ink)!important
}

.foot-label {
  color: var(--nf-faint);
  flex: none
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  text-transform: none;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--nf-faint)
}

.foot-base a {
  text-transform: none;
  letter-spacing: inherit
}

.foot-note {
  color: var(--nf-faint)
}

@media (max-width: 560px) {
  .foot-row {
    gap: 10px 14px
  }
}

@keyframes nf-fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

@keyframes nf-pulse {
  0%, 100% { opacity: 1;    transform: scale(1) }
  50%      { opacity: 0.55; transform: scale(0.88) }
}

@media (prefers-reduced-motion: reduce) {
  .netbar,
  .sitefoot,
  .netbar-dot {
    animation: none
  }
}