/* ============================================================
   Villz — PUBLIC (unauthenticated) browse surface
   ------------------------------------------------------------
   Styles the guest shell (partial/public_base.html) and the four
   public pages. Feed cards themselves are reused from
   villz-customer-home.css; this file only adds the `pub-*`
   layer plus two small guest-card additions.

   Everything references the tokens in villz-tokens.css.
   ============================================================ */

.villz-public {
  margin: 0;
  background: var(--noir, #0a0908);
  color: var(--ivory, #f4ede1);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.villz-public *,
.villz-public *::before,
.villz-public *::after { box-sizing: border-box; }

/* `:not(.pub-btn)` is load-bearing, not tidiness. `.villz-public a` has
   specificity 0,1,1 (class + type) while `.pub-btn--solid` is only 0,1,0, so the
   generic link color used to WIN on every button — every CTA is an <a>, so
   "Sign up", "Create an account" and "Sign in to follow" rendered rose-on-rose
   and were nearly unreadable. Excluding buttons here removes the conflict rather
   than papering over it with !important or a longer selector. */
.villz-public a:not(.pub-btn) { color: var(--rose, #c9a17a); }

/* ── Nav ──────────────────────────────────────────────────── */

.pub-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line, #2a2520);
  background: var(--noir-2, #141210);
  position: sticky;
  top: 0;
  z-index: 20;
}

.pub-nav__logo {
  font-family: var(--font-sc, 'Cormorant SC', Georgia, serif);
  font-size: 22px;
  letter-spacing: .3em;
  color: var(--ivory, #f4ede1);
  text-decoration: none;
}

.pub-nav__links {
  display: flex;
  gap: 22px;
  margin-left: 12px;
  flex: 1;
}

.pub-nav__links a {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-dim, #aea79a);
  text-decoration: none;
}

.pub-nav__links a:hover { color: var(--rose, #c9a17a); }

.pub-nav__auth { display: flex; gap: 10px; }

/* ── Buttons ──────────────────────────────────────────────── */

.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line, #2a2520);
  background: transparent;
  color: var(--ivory-dim, #aea79a);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}

.pub-btn--ghost:hover {
  color: var(--rose, #c9a17a);
  border-color: var(--rose, #c9a17a);
}

.pub-btn--solid {
  background: var(--rose, #c9a17a);
  border-color: var(--rose, #c9a17a);
  color: var(--noir, #0a0908);
}

.pub-btn--solid:hover { background: var(--champagne, #e6cba8); }

/* ── Main / hero ──────────────────────────────────────────── */

.pub-main { min-height: 60vh; }

.pub-hero {
  text-align: center;
  padding: 64px 24px 40px;
  border-bottom: 1px solid var(--line-soft, #1f1c18);
}

.pub-hero--compact { padding: 44px 24px 28px; }

.pub-hero__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ivory-mute, #6b6459);
  margin: 0 0 14px;
}

.pub-hero__title {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 54px);
  margin: 0 0 14px;
  color: var(--ivory, #f4ede1);
}

.pub-hero__sub {
  max-width: 56ch;
  margin: 0 auto 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ivory-dim, #aea79a);
}

.pub-hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Sections ─────────────────────────────────────────────── */

.pub-section { padding: 40px 0 8px; }

.pub-section__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px 8px;
}

.pub-section__rule {
  flex: 1;
  height: 1px;
  background: var(--line, #2a2520);
}

.pub-section__title {
  font-family: var(--font-sc, 'Cormorant SC', Georgia, serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ivory, #f4ede1);
}

.pub-section__title em { font-style: italic; color: var(--rose, #c9a17a); }

.pub-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--ivory-mute, #6b6459);
  font-size: 14px;
}

.pub-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 24px 44px;
}

.pub-pager__meta {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ivory-mute, #6b6459);
}

/* ── Guest feed-card additions (base card is in villz-customer-home.css) ── */

.villz-feed-price {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--rose, #c9a17a);
}

.villz-feed-actions .villz-feed-ico {
  text-decoration: none;
}

.villz-feed-actions .villz-feed-ico--cta {
  margin-left: auto;
  color: var(--rose, #c9a17a);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── Crumb ────────────────────────────────────────────────── */

.pub-crumb {
  padding: 22px 32px 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-mute, #6b6459);
}

.pub-crumb a { text-decoration: none; }
.pub-crumb__sep { margin: 0 8px; color: var(--line, #2a2520); }
.pub-crumb__here { color: var(--ivory-dim, #aea79a); }

/* ── Design detail ────────────────────────────────────────── */

.pub-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  padding: 28px 32px 8px;
  align-items: start;
}

.pub-detail__media {
  margin: 0;
  border: 1px solid var(--line, #2a2520);
  background: var(--noir-2, #141210);
}

.pub-detail__media video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pub-detail__tags {
  display: flex;
  gap: 8px;
  padding: 12px;
  flex-wrap: wrap;
}

.pub-tag {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line, #2a2520);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-dim, #aea79a);
}

.pub-detail__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ivory-mute, #6b6459);
  margin: 0 0 10px;
}

.pub-detail__title {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 40px);
  margin: 0 0 10px;
}

.pub-detail__byline {
  font-size: 14px;
  color: var(--ivory-dim, #aea79a);
  margin: 0 0 22px;
}

.pub-detail__byline em { color: var(--ivory, #f4ede1); }

.pub-detail__meta {
  display: flex;
  gap: 32px;
  margin: 0 0 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft, #1f1c18);
  border-bottom: 1px solid var(--line-soft, #1f1c18);
}

.pub-detail__meta dt,
.pub-profile__meta dt {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-mute, #6b6459);
  margin-bottom: 5px;
}

.pub-detail__meta dd,
.pub-profile__meta dd {
  margin: 0;
  font-size: 14px;
  color: var(--ivory, #f4ede1);
}

.pub-detail__desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ivory-dim, #aea79a);
  margin: 0 0 22px;
}

.pub-detail__block { margin: 0 0 22px; }

.pub-detail__block h2 {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-mute, #6b6459);
  margin: 0 0 6px;
}

.pub-detail__block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ivory-dim, #aea79a);
}

.pub-buybar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line, #2a2520);
  background: var(--noir-2, #141210);
  flex-wrap: wrap;
}

.pub-buybar__eyebrow {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-mute, #6b6459);
}

.pub-buybar__amount {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 30px;
  color: var(--ivory, #f4ede1);
}

.pub-buybar__meta {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--ivory-mute, #6b6459);
  margin-left: 6px;
}

.pub-detail__note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ivory-mute, #6b6459);
}

/* ── Artist profile ───────────────────────────────────────── */

.pub-profile__head {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 34px;
  padding: 40px 32px 8px;
  align-items: start;
}

.pub-profile__portrait {
  border: 1px solid var(--line, #2a2520);
  background: var(--noir-2, #141210);
  aspect-ratio: 1;
  overflow: hidden;
}

.pub-profile__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pub-profile__portrait--placeholder,
.pub-artist-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-sc, 'Cormorant SC', Georgia, serif);
  font-size: 40px;
  letter-spacing: .1em;
  color: var(--rose, #c9a17a);
}

.pub-profile__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ivory-mute, #6b6459);
  margin: 0 0 10px;
}

.pub-profile__name {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 42px);
  margin: 0 0 20px;
}

.pub-profile__meta {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft, #1f1c18);
  border-bottom: 1px solid var(--line-soft, #1f1c18);
}

.pub-profile__meta .pub-tag { margin: 0 6px 6px 0; }

.pub-profile__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.pub-mono {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ivory-mute, #6b6459);
}

/* ── Artist directory ─────────────────────────────────────── */

.pub-artist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 16px 32px 8px;
}

.pub-artist-card {
  display: block;
  border: 1px solid var(--line, #2a2520);
  background: var(--noir-2, #141210);
  padding: 16px;
  text-decoration: none;
  transition: border-color .18s, transform .18s;
}

.pub-artist-card:hover {
  border-color: var(--rose, #c9a17a);
  transform: translateY(-3px);
}

.pub-artist-card__portrait {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line-soft, #1f1c18);
  margin-bottom: 14px;
}

.pub-artist-card__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pub-artist-card__name {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: 18px;
  margin: 0 0 5px;
  color: var(--ivory, #f4ede1);
}

.pub-artist-card__area,
.pub-artist-card__rating {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--ivory-dim, #aea79a);
}

/* ── Pillars ──────────────────────────────────────────────── */

.pub-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line, #2a2520);
  margin: 40px 32px;
  border: 1px solid var(--line, #2a2520);
}

.pub-pillar {
  background: var(--noir-2, #141210);
  padding: 30px 24px;
  text-align: center;
}

.pub-pillar__num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--rose, #c9a17a);
  margin-bottom: 10px;
}

.pub-pillar__h {
  font-family: var(--font-sc, 'Cormorant SC', Georgia, serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--ivory, #f4ede1);
}

.pub-pillar__p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ivory-dim, #aea79a);
}

/* ── Footer ───────────────────────────────────────────────── */

.pub-foot {
  border-top: 1px solid var(--line, #2a2520);
  background: var(--noir-2, #141210);
  padding: 34px 32px 44px;
  text-align: center;
}

.pub-foot__apply {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 17px;
  color: var(--ivory-dim, #aea79a);
  margin: 0 0 20px;
}

.pub-foot__legal {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-mute, #6b6459);
  margin: 0 0 16px;
}

.pub-foot__legal a { text-decoration: none; margin: 0 4px; }

.pub-foot__mark {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: .28em;
  color: var(--ivory-mute, #6b6459);
  margin: 0;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1099px) {
  .pub-artist-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 899px) {
  .pub-detail { grid-template-columns: 1fr; }
  .pub-profile__head { grid-template-columns: 1fr; }
  .pub-profile__portrait { max-width: 200px; }
  .pub-pillars { grid-template-columns: 1fr; margin: 32px 16px; }
  .pub-artist-grid { grid-template-columns: repeat(2, 1fr); padding: 16px; }
}

@media (max-width: 719px) {
  .pub-nav { padding: 14px 16px; gap: 14px; flex-wrap: wrap; }
  .pub-nav__links { margin-left: 0; gap: 16px; }
  .pub-section__head,
  .pub-crumb,
  .pub-detail,
  .pub-profile__head { padding-left: 16px; padding-right: 16px; }
  .pub-detail__meta,
  .pub-profile__meta { gap: 22px; }
  .pub-artist-grid { grid-template-columns: 1fr; }
  .pub-foot { padding: 28px 16px 36px; }
}