@layer components {
  .site-header { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-instrument); display: grid; gap: var(--space-3) var(--space-6); grid-template-columns: auto minmax(0, 1fr) auto; min-height: 5.25rem; padding: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right), calc((100vw - var(--content-public)) / 2)) var(--space-3); position: relative; z-index: 2; }
  .brand { align-items: center; color: var(--color-text); display: inline-flex; font-weight: var(--weight-bold); gap: var(--space-3); min-height: 2.75rem; text-decoration: none; }
  .brand:hover { color: var(--color-text); }
  .brand__mark { align-items: center; background: var(--neutral-950); border: 2px solid var(--neutral-950); border-radius: var(--radius-md); color: var(--neutral-0); display: grid; height: 2.5rem; overflow: hidden; place-items: center; position: relative; width: 2.5rem; }
  .brand__mark .icon { height: 1.55rem; position: relative; width: 1.55rem; z-index: 1; }
  .brand__pixels { background: var(--warning-soft); bottom: 0.15rem; box-shadow: 0.45rem 0 var(--accent-300), 0 -0.45rem var(--accent-300); height: 0.35rem; position: absolute; right: 0.55rem; width: 0.35rem; }
  .public-nav { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
  .public-nav a, .admin-nav a { align-items: center; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-text-secondary); display: inline-flex; font-weight: var(--weight-bold); gap: var(--space-2); min-height: 3rem; padding: var(--space-2) var(--space-4); text-decoration: none; }
  .public-nav a:hover { background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text); }
  .public-nav a[aria-current="page"] { background: var(--neutral-950); border-color: var(--neutral-950); color: var(--neutral-0); box-shadow: inset 0 1px 0 var(--neutral-700), 0 2px 0 var(--neutral-400); }
  .season-chip { align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); display: inline-flex; font-size: var(--text-sm); font-weight: var(--weight-semibold); gap: var(--space-2); min-height: 2.75rem; padding-inline: var(--space-3); white-space: nowrap; }
  .season-chip__dot { background: var(--success-strong); border-radius: 50%; height: 0.5rem; width: 0.5rem; }
  .site-footer { align-items: center; background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text-secondary); display: flex; flex-wrap: wrap; font-size: var(--text-sm); gap: var(--space-4); justify-content: space-between; margin-top: auto; padding: var(--space-6) max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right), calc((100vw - var(--content-public)) / 2)) max(var(--space-6), env(safe-area-inset-bottom)); }
  .site-footer a { align-items: center; display: inline-flex; min-height: 2.75rem; }
  .public-shell { display: flex; flex-direction: column; }
  .public-shell > main { flex: 1; width: 100%; }
  .page-header { align-items: end; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; margin-bottom: var(--space-6); padding-bottom: var(--space-6); position: relative; }
  .page-header::after { background: var(--accent-300); bottom: -0.25rem; box-shadow: 0.5rem 0 var(--warning-soft), 1rem 0 var(--accent-200); content: ""; height: 0.4rem; left: 0; position: absolute; width: 0.4rem; }
  .page-header__copy { display: grid; flex: 1 1 24rem; gap: var(--space-3); max-width: 48rem; min-width: 0; }
  .page-header__description { color: var(--color-text-secondary); font-size: var(--text-lead); max-width: var(--measure-prose); }
  .page-header__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .context-strip { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-instrument); display: grid; gap: var(--space-4); margin-bottom: var(--space-8); padding: var(--space-4); }
  .context-strip p { display: grid; padding-inline: var(--space-3); }
  .context-strip span { color: var(--color-text-secondary); font-size: var(--text-sm); }
  .section-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--neutral-0); min-width: 0; padding: var(--space-6); }
  .section-heading { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; margin-bottom: var(--space-6); }
  .section-heading > * { max-width: 100%; min-width: 0; }
  .section-heading > div { display: grid; gap: var(--space-2); }
  .section-empty { color: var(--color-text-secondary); overflow-wrap: anywhere; padding-block: var(--space-8); text-align: center; }
  .definition-grid { border-block: 1px solid var(--color-border); display: grid; margin-bottom: var(--space-8); }
  .definition-grid > div { padding: var(--space-4); }
  .definition-grid dt { color: var(--color-text-secondary); font-size: var(--text-sm); }
  .definition-grid dd { font-size: var(--text-h3); font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }
  .auth-page { display: grid; min-height: calc(100dvh - 12rem); padding: var(--space-8) var(--space-4); place-items: start center; }
  .auth-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: grid; gap: var(--space-4); max-width: 31rem; min-width: 0; overflow-wrap: anywhere; padding: var(--space-8); width: 100%; }
  .auth-panel > p:not(.eyebrow) { color: var(--color-text-secondary); }
  .auth-panel form { display: grid; gap: var(--space-4); }
  .auth-panel .form-actions { margin-top: var(--space-2); }
  @media (min-width: 40rem) {
    .context-strip { grid-template-columns: 1fr 1fr auto; }
    .definition-grid { grid-template-columns: repeat(4, 1fr); }
    .definition-grid > div + div { border-left: 1px solid var(--color-border); }
  }
  @media (max-width: 39.999rem) {
    .site-header { align-items: stretch; display: flex; flex-wrap: wrap; }
    .public-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .public-nav--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-nav a { font-size: var(--text-sm); justify-content: center; padding-inline: var(--space-1); }
    .public-nav a span { min-width: 0; overflow-wrap: anywhere; }
    .public-nav .icon, .season-chip { display: none; }
    .brand > span:last-child { overflow-wrap: anywhere; }
  }
  @media (min-width: 40rem) and (max-width: 62rem) {
    .site-header { grid-template-columns: auto 1fr; }
    .season-chip { display: none; }
    .public-nav { justify-content: end; }
  }
  @media (max-width: 22rem) {
    .public-nav a { font-size: var(--text-xs); }
  }
}