.board-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.board-head-row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); }
.board-head-row > div:first-child { display: grid; gap: var(--space-3); }
.board-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-2); }
.notice { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); color: var(--muted-foreground); font-size: 0.9rem; }
.notice-compact { max-width: 16rem; padding: var(--space-2) var(--space-3); }
.search-summary { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); color: var(--subtle-foreground); font-family: var(--mono); font-size: 0.78rem; }
.search-summary strong { color: var(--primary-text); font-weight: 600; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); gap: var(--space-3); }
.card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-height: 13rem;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface-card);
  color: var(--foreground);
  animation: rise 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms cubic-bezier(0.16, 1, 0.3, 1), background 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.grid > .card:nth-child(2) { animation-delay: 40ms; }
.grid > .card:nth-child(3) { animation-delay: 80ms; }
.grid > .card:nth-child(4) { animation-delay: 120ms; }
.grid > .card:nth-child(n + 5) { animation-delay: 150ms; }
.card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 0.25rem;
  background-image: linear-gradient(
    90deg,
    var(--secondary) 0 7%,
    transparent 7% 14%,
    var(--primary) 14% 62%,
    transparent 62% 78%,
    var(--cyber) 78% 80%,
    transparent 80%
  );
  opacity: 0.8;
  content: '';
}
.card.status-matched::before { background-image: linear-gradient(90deg, var(--secondary) 0 7%, transparent 7% 14%, var(--warning) 14% 76%, transparent 76% 88%, var(--warning) 88% 90%, transparent 90%); }
.card.status-launched::before { background-image: linear-gradient(90deg, var(--secondary) 0 7%, transparent 7% 14%, var(--primary) 14% 88%, transparent 88% 94%, var(--foreground) 94% 100%); }
.card:hover { border-color: var(--primary-border); background: var(--surface-card-hover); box-shadow: var(--shadow-panel), 0 0 1.25rem var(--primary-subtle); transform: translateY(-0.2rem); }
.card:focus-visible { outline-offset: 4px; }
.card h2, .card-pitch { overflow-wrap: anywhere; }
.card h2 { font-size: 1.1rem; }
.project-media { position: relative; overflow: hidden; width: 100%; min-width: 0; border: 1px solid var(--border-subtle); border-radius: calc(var(--radius) - var(--space-2)); background: var(--surface-sunken); aspect-ratio: 16 / 7; }
.project-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-favicon { position: absolute; right: var(--space-3); bottom: var(--space-3); width: 2rem; height: 2rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-1); background: var(--surface-raised); object-fit: contain; }
.project-media-preview { position: relative; overflow: hidden; width: 100%; min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); aspect-ratio: 16 / 7; }
.project-media-preview .project-cover[src=''] { display: none; }
.project-media-preview .project-favicon[src=''] { display: none; }
.project-media-picker { display: grid !important; min-width: 0; }
.project-media-picker > label { margin-top: var(--space-3); }
.project-media-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.form-help { color: var(--muted-foreground); font-size: 0.85rem; font-weight: 400; }
.card-pitch { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.88rem; }
.card-top, .card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-top > *, .card-foot > * { min-width: 0; }
.card-status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--success); font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.card-status::before { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0.5rem currentColor; content: ''; }
.status-matched .card-status, .card-status.status-matched { color: var(--warning); }
.status-launched .card-status, .card-status.status-launched { color: var(--primary); }
.card-owner, .card-pitch, .card-interest, .detail-meta { color: var(--muted-foreground); }
.card-owner, .card-interest { font-size: 0.78rem; }
.card-owner { overflow: hidden; font-family: var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.card-pitch { line-height: 1.5; }
.card-roles { display: grid; gap: var(--space-2); }
.card-foot { align-self: end; padding-top: var(--space-3); border-top: 1px solid var(--border-emphasis); }
.empty { display: grid; min-height: 14rem; place-items: center; border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--space-6); color: var(--muted-foreground); text-align: center; }

.detail { display: grid; max-width: 52rem; margin-inline: auto; gap: var(--space-6); }
.detail-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-6); }
.detail-head > div:first-child { display: grid; gap: var(--space-3); }
.detail-actions { flex: none; }
.detail-desc { max-width: 68ch; color: var(--muted-foreground); white-space: pre-wrap; }
.detail-facts { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4) var(--space-6); margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: var(--space-5); }
.detail-facts dt { color: var(--subtle-foreground); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.detail-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.interest { display: grid; gap: var(--space-4); }
.interest-list, .member-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.interest-list li, .member-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border-subtle); padding: var(--space-4) 0; }
.interest-list li { flex-wrap: wrap; }
.interest-list p, .member-row p { flex-basis: 100%; margin: 0; color: var(--muted-foreground); }
.member-list { margin-top: var(--space-4); margin-bottom: var(--space-10); }
.member-row > div { min-width: 0; }
.member-row strong { font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.member-row form { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.hero { display: grid; align-content: center; min-height: min(70dvb, 46rem); gap: var(--space-4); max-width: 48rem; }
.hero > * { animation: rise 360ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.hero > *:nth-child(2) { animation-delay: 60ms; }
.hero > *:nth-child(3) { animation-delay: 120ms; }
.hero > *:nth-child(n + 4) { animation-delay: 180ms; }
.board-head, .filterbar, .search-summary { animation: rise 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.filterbar { animation-delay: 40ms; }
.search-summary { animation-delay: 80ms; }
.detail > *, .form-page, .member-list, .empty { animation: rise 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.detail > *:nth-child(2) { animation-delay: 50ms; }
.detail > *:nth-child(n + 3) { animation-delay: 100ms; }
.landing { grid-template-columns: minmax(0, 0.9fr) minmax(19rem, 1.1fr); align-items: center; max-width: none; gap: clamp(var(--space-8), 7vw, var(--space-16)); padding-block: var(--space-10); }
.landing-copy { display: grid; align-content: center; gap: var(--space-4); max-width: 44rem; }
/* An offset archive fragment gives the landing page a heritage layer without
   framing the content like a textile or repeating a garment motif. */
.landing::after {
  position: fixed;
  z-index: -1;
  top: 10%;
  right: -5rem;
  width: clamp(16rem, 42vw, 31rem);
  height: clamp(14rem, 48vw, 34rem);
  background:
    linear-gradient(var(--border-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-faint) 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 12%, var(--secondary) 12% 13%, transparent 13% 58%, var(--cyber) 58% 58.5%, transparent 58.5%),
    radial-gradient(circle at 62% 34%, var(--primary-subtle), transparent 42%);
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, 100% 100%, 100% 100%;
  clip-path: polygon(18% 0, 100% 0, 100% 82%, 74% 82%, 74% 100%, 0 100%, 0 24%, 18% 24%);
  content: '';
  opacity: 0.68;
}
.landing-runway { width: min(100%, 32rem); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--surface-translucent); }
.landing-runway .runway-track { height: 0.65rem; }
.landing-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.landing-visual { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); aspect-ratio: 5 / 4; background: radial-gradient(circle at 76% 24%, var(--primary-subtle), transparent 32%), var(--surface-sunken); box-shadow: var(--shadow-float); isolation: isolate; }
.landing-visual::before { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--surface-backdrop), transparent 30%); content: ''; }
.landing-visual::after {
  position: absolute;
  z-index: 2;
  inset: var(--space-3);
  border: 1px solid var(--border-faint);
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--secondary) 0 12%, transparent 12% 20%, var(--primary) 20% 76%, transparent 76% 92%, var(--cyber) 92%);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 8rem 0.25rem;
  content: '';
}
.heritage-map { display: block; width: 100%; height: 100%; color: var(--foreground); }
.map-grid { fill: url('#archive-grid'); }
.map-grid-line { stroke: var(--border-emphasis); stroke-width: 1; }
.map-grid-node { fill: var(--border-strong); }
.map-axis { fill: none; stroke: var(--secondary); stroke-dasharray: 3 9; stroke-width: 2; opacity: 0.62; }
.map-signal { fill: none; stroke: var(--cyber); stroke-dasharray: 2 8; stroke-width: 2; opacity: 0.68; }
.map-route-shadow { fill: none; stroke: var(--primary); stroke-width: 18; opacity: 0.08; }
.map-route { fill: none; stroke: var(--border-strong); stroke-dasharray: 18 10; stroke-width: 8; }
.map-route-complete { fill: none; stroke: var(--primary); stroke-dasharray: 18 10; stroke-width: 8; animation: archive-route 900ms cubic-bezier(0.16, 1, 0.3, 1) 160ms backwards; }
.map-fragments { fill: var(--secondary); opacity: 0.72; }
.map-checkpoints { fill: var(--surface-sunken); stroke: var(--cyber); stroke-width: 3; }
.map-threshold > rect:first-child { fill: var(--surface-sunken); stroke: var(--primary); stroke-width: 4; }
.map-threshold > rect:last-child { fill: var(--primary); }
.map-output { fill: none; stroke: var(--success); stroke-width: 4; }
.map-output path:first-child { fill: var(--surface-sunken); }
.map-label { fill: var(--muted-foreground); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; }
.map-label-threshold { fill: var(--primary-text); }
.map-label-output { fill: var(--success); }
@keyframes archive-route { from { opacity: 0; stroke-dashoffset: 180; } }
.landing-visual figcaption { position: absolute; z-index: 3; right: var(--space-4); bottom: var(--space-4); left: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--media-foreground); font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-shadow: 0 1px 0 var(--media-text-shadow); text-transform: uppercase; }
.landing-visual figcaption span { color: var(--media-muted); }
.landing-visual figcaption strong { color: var(--media-success); font: inherit; }
.auth-hero { display: grid; min-height: 0; place-items: center; }

body:has(.landing) { min-height: 100dvb; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
body:has(.landing) .main { display: grid; min-height: 0; padding-block: clamp(var(--space-4), 4dvb, var(--space-8)); }
body:has(.landing) .landing { min-height: 0; padding-block: 0; }
body:has(.landing) .footer { gap: var(--space-2); padding-block: var(--space-4); }

body:has(.auth-hero) { min-height: 100dvb; display: grid; grid-template-rows: auto minmax(0, 1fr); }
body:has(.auth-hero) .main { display: grid; min-height: 0; padding-block: 0; }
body:has(.auth-hero) .footer { display: none; }

@media (max-width: 56rem) { .landing { grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr); gap: var(--space-6); } }
@media (max-width: 44rem) { .board-head-row, .detail-head { align-items: stretch; flex-direction: column; } .board-actions { justify-content: start; } .search-summary { flex-direction: column; gap: var(--space-1); } .card-foot { align-items: start; flex-wrap: wrap; } .card-interest { flex-basis: 100%; } .detail-facts { grid-template-columns: 1fr; gap: var(--space-2); } .detail-facts dd { margin-bottom: var(--space-3); } .member-row { align-items: start; flex-direction: column; } .landing { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .landing-visual { width: min(100%, 34rem); aspect-ratio: 16 / 9; } body:has(.landing) { display: block; } body:has(.landing) .main { display: block; min-height: auto; } }

/* Avatar picker: the preview itself is the crop surface. Drag to reposition,
   scroll or slide to zoom. */
.avatar-picker { display: grid !important; gap: var(--space-4); }
.avatar-stage { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
.avatar-frame {
  position: relative;
  flex: none;
  width: 9.25rem;
  height: 9.25rem;
  border-radius: 50%;
  transition: box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.avatar-frame .avatar-preview { width: 100%; height: 100%; }
.avatar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.avatar-canvas[data-dragging] { cursor: grabbing; }
.avatar-canvas[hidden] { display: none; }
.is-cropping .avatar-frame { box-shadow: 0 0 0 1px var(--primary-border), var(--glow-primary); }
.avatar-controls { display: grid; flex: 1 1 16rem; gap: var(--space-3); min-width: 0; }
.avatar-controls .form-help { margin: 0; }
.avatar-controls .form-help a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 0.2em; }
.avatar-zoom { display: grid !important; gap: var(--space-1) !important; max-width: 16rem; color: var(--muted-foreground) !important; font-size: 0.8rem !important; }
.avatar-zoom[hidden] { display: none !important; }
.avatar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.avatar-choose { display: inline-flex !important; gap: 0 !important; cursor: pointer; }
.avatar-choose input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avatar-choose:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--ring); }
.avatar-status:empty { display: none; }

/* Avatars in lists sit ahead of the name and pick up the primary signal on row hover. */
.member-row > div { flex: 1 1 auto; }
.member-row:hover > .avatar, .interest-list li:hover > .avatar { box-shadow: inset 0 0 0 1px var(--primary-border); }
/* The avatar and name read as one unit; everything else is pushed to the end. */
.interest-list li > .avatar + strong { flex: 1 1 auto; margin-inline-start: calc(var(--space-4) * -1 + var(--space-3)); }
.detail-meta { display: flex; align-items: center; gap: var(--space-2); }