/* ==========================================================================
   KF.Social "WOW 2" layer  —  gh-wow2.css
   A purely ADDITIVE showpiece stylesheet for the user-facing static pages:
   /u/{id} profiles, /c/{slug} gems, /explore, /invite.
   Loaded AFTER golden.css (and, where present, gh-wow.css). Never edits a
   golden.css or gh-wow.css rule — new class names only, so the shipped
   browser cache of those files is never invalidated by edits here.

   Contract (same as gh-wow.css):
     - Everything is beautiful and fully readable with JS disabled.
     - All motion is gated behind (prefers-reduced-motion: no-preference).
     - Reserve space for every block: no layout shift.
   ========================================================================== */

/* ----- Shared page shell ------------------------------------------------- */
.w2-wrap { max-width: var(--w, 1120px); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.w2-narrow { max-width: 760px; }

/* =========================================================================
   PROFILE — /u/{id}
   A person worth meeting: a warm cover band, a generous avatar with an
   optional verified tick, name + location + member-since, prose bio, honest
   facts, and a same-city path back into the communities hub.
   ========================================================================= */
.w2-profile-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(130% 120% at 18% 0%, #241a0d, var(--ink) 58%, var(--coffee-deep));
  color: var(--cream);
}
.w2-profile-hero-in {
  position: relative; z-index: 2;
  max-width: 780px; margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 24px clamp(2.4rem, 5vw, 3.4rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.w2-avatar {
  position: relative;
  width: 148px; height: 148px; border-radius: 50%;
  border: 5px solid rgba(255,253,246,.92);
  box-shadow: 0 24px 50px -22px rgba(13,10,7,.75);
  object-fit: cover; background: var(--cream-2);
}
.w2-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 60px; color: var(--cream);
  background: linear-gradient(150deg, var(--gold), var(--gold-deep));
}
.w2-tick {
  position: absolute; right: 6px; bottom: 6px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); border: 4px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(13,10,7,.6);
}
.w2-tick svg { width: 20px; height: 20px; color: #fff; }
.w2-profile-name {
  font-size: clamp(1.9rem, 4.4vw, 2.7rem); font-weight: 650; letter-spacing: -.03em;
  line-height: 1.05; margin: 1.2rem 0 .1rem; color: var(--cream);
}
.w2-profile-handle { font-size: 1rem; color: var(--gold-soft); font-weight: 500; margin: 0; }
.w2-profile-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem;
  margin: 1rem 0 .2rem; color: rgba(255,253,246,.8); font-size: .95rem;
}
.w2-profile-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.w2-profile-meta svg { width: 1rem; height: 1rem; color: var(--gold-soft); opacity: .95; }
.w2-profile-meta .dot { color: rgba(255,253,246,.4); }
.w2-profile-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.7rem; }

/* Stat pills that sit half-over the hero edge. */
.w2-stats {
  display: flex; justify-content: center; gap: 0;
  max-width: 460px; margin: -2.1rem auto 0; position: relative; z-index: 3;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-shot); padding: .9rem 1rem;
}
.w2-stat { flex: 1; text-align: center; padding: 0 .7rem; }
.w2-stat + .w2-stat { border-left: 1px solid var(--line); }
.w2-stat-v { font-size: 1.35rem; font-weight: 750; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.w2-stat-l { font-size: .68rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-top: .25rem; }

/* Prose bio card. */
.w2-bio {
  max-width: 640px; margin: 2.4rem auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: clamp(1.6rem, 4vw, 2.4rem);
}
.w2-bio-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .7rem; }
.w2-bio p { font-size: 1.06rem; line-height: 1.7; color: var(--body); margin: 0; }

/* Interest / place chips. */
.w2-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.w2-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  background: var(--cream-2); border: 1px solid var(--line); color: var(--gold-deep);
  text-decoration: none; transition: transform .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
a.w2-chip:hover { transform: translateY(-2px); border-color: var(--gold-soft); color: var(--ink); }
.w2-chip svg { width: .95rem; height: .95rem; }

/* =========================================================================
   GEM / COMMUNITY — /c/{slug}
   Cover-photo hero with scrim, category badge, name + tagline overlaid.
   ========================================================================= */
.w2-cover {
  position: relative; overflow: hidden;
  min-height: clamp(320px, 42vw, 460px);
  display: flex; align-items: flex-end;
  background: var(--coffee-deep);
}
.w2-cover-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.w2-cover-grad { position: absolute; inset: 0; }
.w2-cover-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,10,7,.28) 0%, rgba(13,10,7,.12) 34%, rgba(13,10,7,.72) 78%, rgba(13,10,7,.94) 100%);
}
.w2-cover-in {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--w, 1120px); margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 4rem) 24px clamp(1.9rem, 4vw, 2.6rem);
  color: var(--cream);
}
.w2-cover-badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.w2-cover-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px;
  font-size: .78rem; font-weight: 650; letter-spacing: .04em;
  background: rgba(255,253,246,.16); color: var(--cream);
  border: 1px solid rgba(255,253,246,.24); backdrop-filter: blur(6px);
}
.w2-cover-badge.gold { background: color-mix(in srgb, var(--gold) 88%, transparent); border-color: transparent; color: #17130C; }
.w2-cover h1 {
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 650; letter-spacing: -.032em;
  line-height: 1.04; margin: 0; color: var(--cream);
  text-shadow: 0 1px 20px rgba(13,10,7,.4);
}
.w2-cover-tag {
  font-size: clamp(1.02rem, 2vw, 1.2rem); line-height: 1.55; margin: .9rem 0 0;
  max-width: 46ch; color: rgba(255,253,246,.9);
}
.w2-cover-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.w2-emoji-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 16px; font-size: 1.4rem;
  background: rgba(255,253,246,.16); border: 1px solid rgba(255,253,246,.24);
  backdrop-filter: blur(6px);
}

/* Fact row (real data only). */
.w2-facts { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2.2rem; }
.w2-fact {
  flex: 1 1 12rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-card);
}
.w2-fact dt { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .35rem; }
.w2-fact dd { font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: 0; }

/* Related gem rail (photographic, homepage gem pattern). */
.w2-gemrail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; }
.w2-gemrail > * { scroll-snap-align: start; }
.w2-gemcard {
  position: relative; display: block; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 3/2.1; text-decoration: none; box-shadow: var(--shadow-card);
  border: 1px solid var(--line); background: var(--cream-2);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.w2-gemcard:hover { box-shadow: var(--shadow-shot); border-color: var(--gold-soft); }
.w2-gemcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.w2-gemcard:hover img { transform: scale(1.05); }
.w2-gemcard-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,7,0) 40%, rgba(13,10,7,.82) 100%); }
.w2-gemcard-tx { position: absolute; left: 16px; right: 16px; bottom: 14px; color: var(--cream); z-index: 2; }
.w2-gemcard-tx h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.015em; margin: 0; }
.w2-gemcard-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }

/* =========================================================================
   Shared section furniture for the user-facing pages.
   ========================================================================= */
.w2-sec { max-width: var(--w, 1120px); margin: 0 auto; padding: clamp(2.6rem, 6vw, 4rem) 24px; }
.w2-sec-narrow { max-width: 780px; }
.w2-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.w2-sec-head { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 650; letter-spacing: -.026em; line-height: 1.12; margin: .5rem 0 .5rem; color: var(--ink); }
.w2-sec-dek { font-size: 1.04rem; color: var(--body); max-width: 48ch; margin: 0 0 1.8rem; line-height: 1.6; }

/* Editorial post-card grid for /explore featured strip. */
.w2-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px){ .w2-postgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .w2-postgrid { grid-template-columns: 1fr; } }
.w2-postcard {
  display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--ink);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.w2-postcard:hover { box-shadow: var(--shadow-shot); border-color: var(--gold-soft); }
.w2-postcard-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--cream-2); }
.w2-postcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.w2-postcard:hover .w2-postcard-media img { transform: scale(1.04); }
.w2-postcard-body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; }
.w2-postcard-by { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--faint); }
.w2-postcard-by img { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; }
.w2-postcard-by b { color: var(--ink); font-weight: 650; }
.w2-postcard-text { font-size: .98rem; line-height: 1.55; color: var(--body); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Profile mini-cards rail for /explore "people to meet". */
.w2-peoplerail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; }
.w2-peoplerail > * { scroll-snap-align: start; }
.w2-personcard {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem; padding: 1.4rem 1.2rem; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.w2-personcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-shot); border-color: var(--gold-soft); }
.w2-personcard img { width: 4.4rem; height: 4.4rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--cream-2); }
.w2-personcard-name { font-size: .98rem; font-weight: 650; color: var(--ink); display: inline-flex; align-items: center; gap: .3rem; }
.w2-personcard-name svg { width: .9rem; height: .9rem; color: var(--blue); }
.w2-personcard-loc { font-size: .82rem; color: var(--faint); }

/* =========================================================================
   INVITE — /invite/{handle}
   The warm handshake: big inviter avatar, a personal line, honest install path.
   ========================================================================= */
.w2-invite-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(130% 120% at 82% 0%, #241a0d, var(--ink) 58%, var(--coffee-deep));
  color: var(--cream);
}
.w2-invite-in {
  position: relative; z-index: 2; max-width: 640px; margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) 24px clamp(2.6rem, 6vw, 3.6rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.w2-invite-avatar {
  width: 116px; height: 116px; border-radius: 50%;
  border: 4px solid var(--gold-soft); object-fit: cover;
  box-shadow: 0 20px 44px -20px rgba(13,10,7,.7); background: var(--cream-2);
}
.w2-invite-avatar.initials {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 46px;
  color: #17130C; background: linear-gradient(150deg, var(--gold-soft), var(--gold));
}
.w2-invite-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin: 1.3rem 0 .5rem; }
.w2-invite-hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 650; letter-spacing: -.03em;
  line-height: 1.08; margin: 0; color: var(--cream);
}
.w2-invite-hero h1 .serif { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; color: var(--gold-soft); }
.w2-invite-sub { font-size: 1.08rem; line-height: 1.55; color: rgba(255,253,246,.85); margin: 1rem 0 0; max-width: 34ch; }
.w2-invite-promises { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: 1.3rem; font-size: .86rem; font-weight: 600; color: var(--gold-soft); }
.w2-invite-promises .sep { color: rgba(255,253,246,.35); }

/* Install card that overlaps the hero. */
.w2-invite-card {
  max-width: 460px; margin: -2rem auto 0; position: relative; z-index: 3;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-shot); padding: clamp(1.6rem, 4vw, 2.2rem);
  text-align: center;
}
.w2-invite-card-steps { display: flex; flex-direction: column; gap: .9rem; margin: 0 0 1.4rem; text-align: left; counter-reset: istep; }
.w2-invite-step { display: flex; align-items: flex-start; gap: .8rem; }
.w2-invite-step::before {
  counter-increment: istep; content: counter(istep);
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--ink); color: var(--cream); font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.w2-invite-step p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--body); }
.w2-invite-step p b { color: var(--ink); }

/* Reveal on these pages reuses gh-wow.css's [data-wow] primitives, driven by
   wow.js. No new reveal attribute is introduced here so nothing can be left
   hidden if a page marks an element but wow.js has no animation for it. */

@media (max-width: 640px) {
  .w2-stats { border-radius: var(--r-lg); }
  .w2-facts { gap: .7rem; }
}