@import url('./site-footer.css?v=f77ac9cec5');

/* ND redesign shell, shared by every redesigned page (body.home-redesign):
 * page skin, header, buttons, section heads, project cards, closing card,
 * app-window title bar and footer. The `home-*` names are historical —
 * they were born on the homepage; page-specific parts live in their own
 * files (homepage.css, projects-page.css). Load css/ambient-gradient.css
 * before this file. */

/* ND-02: page-scoped skin; shared UI continues to use project tokens. */
.home-redesign {
  --color-bg: var(--nd-bg);
  --color-bg-sunken: var(--nd-bg);
  --color-bg-elevated: var(--nd-panel);
  --color-surface: var(--nd-panel);
  --color-surface-hover: var(--nd-hover);
  --color-border: var(--nd-line);
  --color-border-strong: var(--nd-muted);
  --color-text-primary: var(--nd-text);
  --color-text-secondary: var(--nd-muted);
  --color-text-tertiary: var(--nd-muted);
  --caret-cycle-color: var(--ambient-mint);
  --color-text-on-accent: var(--ambient-ink);
  --header-height: var(--nd-header-height);
  --container-max: var(--home-width);
  --page-gutter: var(--nd-gutter);

  color-scheme: dark;
}

/* The root keeps the old site colour otherwise: visible on overscroll. */
html:has(> body.home-redesign) {
  background-color: var(--nd-bg);
}

/* Kit controls carry their own colour and focus ring (css/ui-kit.css). */
.home-redesign a:where(:not(.ui-btn, .ui-link, .ui-chip)) {
  color: inherit;
}

.home-redesign :is(a, button):where(:not(.ui-btn, .ui-chip, .ui-seg-item, .ui-tab, .ui-link, .ui-chip-remove)):focus-visible {
  outline: 2px solid var(--ambient-mint);
  outline-offset: 5px;
}

.home-redesign .header {
  background: var(--home-header-bg);
  backdrop-filter: blur(var(--home-header-blur));
}

.home-redesign .header::after {
  height: 1px;
  background: var(--nd-line);
  animation: none;
}

.home-redesign .header-inner {
  gap: var(--space-xs);
}

.home-redesign .nav {
  gap: var(--home-nav-gap);
}

.home-redesign .nav a {
  position: relative;
  color: var(--nd-muted);
  letter-spacing: normal;
}

.home-redesign .nav a:hover,
.home-redesign .nav a[aria-current="page"] {
  color: var(--nd-text);
}

/* Zigzag underline: current page full, hover half. Pure CSS mask.
   Anchored to the text centre, not the box bottom: pages pad links to a
   touch-target height differently, and the box bottom left a wide gap. */
.home-redesign .nav a::after {
  content: "";
  position: absolute;
  inset: calc(50% + 0.8em) 0 auto;
  height: 5px;
  background: var(--ambient-mint);
  mask-image: var(--zig-nav-tile);
  mask-repeat: repeat-x;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.home-redesign .nav a:hover::after {
  opacity: 0.5;
}

.home-redesign .nav a[aria-current="page"]::after {
  opacity: 1;
}

/* The zigzag draws itself left to right: on hover, and once on page load
   for the current page. Leaving the link wipes it back. The strip grows
   via `right`, not clip-path: Safari skipped clip-path transitions on this
   masked pseudo-element, so hover showed nothing there. */
@media (prefers-reduced-motion: no-preference) {
  .home-redesign .nav a::after {
    right: 100%;
    transition:
      opacity 0.2s ease,
      right 0.3s var(--ease-out);
  }

  .home-redesign .nav a:hover::after {
    right: 0;
    transition:
      opacity 0.15s ease,
      right 0.45s var(--ease-out);
  }

  .home-redesign .nav a[aria-current="page"]::after {
    right: 0;
    animation: nav-zig-draw 0.6s var(--ease-out) 0.15s both;
  }
}

@keyframes nav-zig-draw {
  from {
    right: 100%;
  }

  to {
    right: 0;
  }
}

.home-redesign .nav .header-user {
  gap: var(--home-nav-gap);
}

/* The zigzag is the hover cue; the old underline from styles.css doubled it. */
.home-redesign .nav .header-user-name:hover {
  text-decoration: none;
}

/* Admin link reads as a plain nav item, set apart only by colour. */
.home-redesign .nav .header-admin-link,
.home-redesign .nav .header-admin-link:hover {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ambient-mint);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: inherit;
  letter-spacing: normal;
}

.home-redesign main > .zigline {
  width: calc(100% - 2 * var(--nd-gutter));
  max-width: calc(var(--home-width) - 2 * var(--nd-gutter));
  margin-inline: auto;
}

.home-redesign main {
  padding-top: var(--header-height);
}

.home-redesign main > section:not(.ui-screen) {
  padding: var(--home-section-space) var(--nd-gutter);
  max-width: var(--home-width);
}

.home-redesign h2 {
  font-size: var(--nd-heading-size);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: var(--leading-tight);
}

.home-redesign h3 {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.home-skip {
  position: fixed;
  top: calc(-1 * var(--header-height));
  left: var(--nd-gutter);
  z-index: 1200;
  padding: var(--space-2xs);
  background: var(--nd-text);
  color: var(--nd-bg) !important;
}

.home-skip:focus {
  top: var(--space-2xs);
}

.home-title-accent {
  color: var(--ambient-mint);
}

.home-lead {
  max-width: var(--home-copy-width);
  margin-top: var(--space-xs);
  font-size: var(--text-lg);
  color: var(--nd-muted);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-related);
  margin-top: var(--home-content-gap);
}

.home-actions[hidden] {
  display: none;
}






/* Title bar: compact, like an app window in Linear's product shots. */
.home-window-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--home-window-height);
  padding-inline: var(--home-window-text-inset);
  border-bottom: 1px solid var(--home-window-divider);
  background: var(--home-window-toolbar);
  color: var(--nd-muted);
  font: 500 var(--home-window-title-size) / 1 var(--font-body);
  letter-spacing: -0.01em;
}

.home-window-dots {
  display: flex;
  align-items: center;
  gap: var(--home-window-dot-gap);
}

.home-window-dots > * {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--home-window-dot-size);
  height: var(--home-window-dot-size);
  padding: 0;
  border: 1px solid var(--home-window-highlight);
  border-radius: var(--radius-full);
  background: var(--nd-window-red);
  box-shadow: inset 0 1px 1px var(--home-window-highlight), 0 1px 2px var(--home-window-shade);
  appearance: none;
  color: var(--home-window-dot-glyph);
}

.home-window-dots > :nth-child(2) {
  background: var(--nd-window-yellow);
}

.home-window-dots > :nth-child(3) {
  background: var(--nd-window-green);
}

.home-section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-sm);
  margin-bottom: var(--home-content-gap);
}

.home-section-head > p {
  max-width: var(--home-copy-width);
  justify-self: end;
  color: var(--nd-muted);
  font-size: var(--text-sm);
}

.home-redesign .showcase-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nd-card-gap);
}

/* Section actions sit right under their grid, at the card gap, so they read
 * as part of the block above; no divider, which would cut them off from it. */
.home-section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-related) var(--spacing-content);
  margin-top: var(--nd-card-gap);
}

.home-noscript {
  color: var(--nd-muted);
}

/* Closing card: its outer edges line up with the content column of the
 * sections above, so it reads as a framed card, not a clipped band. */
.home-redesign main > .home-join {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-sm);
  width: calc(100% - 2 * var(--nd-gutter));
  max-width: calc(var(--home-width) - 2 * var(--nd-gutter));
  margin: var(--space-sm) auto;
  padding: var(--home-section-space) var(--space-sm);
  border: 1px solid var(--nd-line);
  border-radius: var(--home-window-radius);
  background: var(--nd-panel);
}

.home-join-copy,
.home-members {
  min-width: 0;
}

.home-join h2 {
  margin-bottom: var(--space-xs);
  font-size: var(--home-story-size);
}

.home-join-copy > p {
  max-width: var(--home-copy-width);
  color: var(--nd-muted);
}

.home-join-copy .home-join-note,
.home-hero-copy .home-join-note {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
}

@media (width <= 900px) {
  .home-redesign .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 768px) {
  .home-section-head {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .home-section-head > p {
    justify-self: start;
  }

  .home-redesign main > .home-join {
    grid-template-columns: 1fr;
    padding-inline: var(--space-xs);
  }

}

@media (width <= 540px) {
  .home-redesign .showcase-grid {
    grid-template-columns: 1fr;
    gap: var(--home-content-gap);
  }
}

@media (width <= 380px) {
  .home-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-redesign *,
  .home-redesign *::before,
  .home-redesign *::after {
    animation: none !important;
    transition: none !important;
  }
}