/* mesh.wiki — site-specific styles. Slim by design: the SHELL chrome
   (topbar · left rail · menu · footer) is styled by the shared
   /lib/art-shell-extras.css + components/art-menu.mutual; this file
   carries the page-body styles and the cream-and-gold tokens.

   mesh.wiki the homepage is intentionally one screen: search bar +
   suggestions. No overview, no explanation, no marketing copy. */

/* Brand fonts live in assets.mesh.eco — every page links its
   stylesheet (`https://assets.mesh.eco/fonts.css`) directly, which
   ships the full @font-face bundle (Inter + Inter-ext + Lato +
   Lato-ext, with per-subset unicode-range hints). No local @font-face
   here; that block previously duplicated the assets.mesh.eco bundle
   incompletely (missing the ext subsets + unicode-range hints) and
   pointed at /fonts/* which only resolved via the serve.py + nginx
   fallthrough. */

:root {
  --ground:    #e8e4df;
  --ink:       #1a1a1a;
  --ink-soft:  #3a3a3a;
  --ink-mute:  #6a6a6a;
  --gold:      #8b6914;
  --gold-soft: rgba(139,105,20,0.10);
  --gold-line: rgba(139,105,20,0.18);
  --card:      rgba(255,255,255,0.55);
  --mesh-warn: #b8860b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--ink-soft);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  font-weight: 300;
}

/* Hide the native browser scrollbar — the mesh rail
   (lib/art-section-scrollbar.js, attached via body.has-section-rail)
   is the sole visible scroll affordance on mesh.wiki. The page
   remains fully scrollable (wheel · touch · keyboard · the mesh rail);
   only the browser's own gutter is suppressed. */
html { scrollbar-width: none; }              /* Firefox */
html { -ms-overflow-style: none; }           /* legacy Edge / IE */
html::-webkit-scrollbar { display: none; }   /* Chrome · Safari · Edge */
body { scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }

/* Global anchor styling — gold, never browser-default blue/underline. */
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }


/* ═══════════════════════════════════════════════════════════════════
   MENU HEADER — suppress the mesh.art-style "<N> places" sub-count
   ═══════════════════════════════════════════════════════════════════
   mesh.art seeds .art-menu-header-badge with `<totalItems> places`
   because its NAV is literally venues. On mesh.wiki the count is
   meaningless (and would read e.g. "15 places" while we're really
   surfacing primitives), so hide it via the site stylesheet rather
   than forking the component's JS. */
.art-menu-header-badge { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE HERO — search-bar first, no viewport-locking
   ═══════════════════════════════════════════════════════════════════
   The hero is compact and naturally-sized so the suggestion grid
   shows right after — no forced 100vh-fill, no scroll cue. On most
   screens both the search bar and the first row of suggestions are
   visible together. */
.wiki-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7rem 24px 2rem;
  text-align: center;
}
.wiki-hero-wordmark {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.55rem;
}
.wiki-hero-tagline {
  font-size: 0.92rem;
  color: var(--ink-mute);
  margin: 0 0 1.8rem;
  max-width: 44ch;
  line-height: 1.5;
}

/* The hero's search slot — owns #artTopbarSearchSlot on the homepage
   so the canonical lib/art-filter-bar.js mounts here (instead of in
   the hidden topbar slot which wiki-shell-fixes.js removes). The
   filter-bar's default render is a compact 36px-tall input meant
   for the topbar; the overrides below promote it to a large, pill-
   shaped hero search with the same cream-and-gold palette as the
   rest of mesh.wiki. */
.wiki-hero-search-slot {
  width: 100%;
  max-width: 620px;
}
/* The filter-bar's outer container ('<label class="art-filter-bar">'). */
.wiki-hero-search-slot .art-filter-bar {
  height: auto;
  padding: 1.05rem 1.4rem 1.05rem 3.2rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--gold-line);
  box-shadow: 0 6px 24px rgba(0,0,0,0.04);
  font-size: 1.05rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wiki-hero-search-slot .art-filter-bar:focus-within {
  border-color: var(--gold);
  box-shadow: 0 6px 24px rgba(139,105,20,0.10);
}
/* The leading magnifying-glass icon — inset from the pill's left edge. */
.wiki-hero-search-slot .art-filter-bar-icon {
  left: 1.25rem;
  font-size: 1rem;
  color: var(--gold);
}
.wiki-hero-search-slot .art-filter-bar::before { left: 1.25rem; }
/* The text input itself. */
.wiki-hero-search-slot .art-filter-bar-input {
  font: 400 1.05rem/1.4 'Inter', sans-serif;
  color: var(--ink);
}
.wiki-hero-search-slot .art-filter-bar-input::placeholder {
  color: var(--ink-mute);
  font-weight: 300;
}
/* Hide the count + tools row inside the hero — mesh.wiki has no
   listings to count and no filter/sort dimensions. */
.wiki-hero-search-slot .art-filter-bar-count,
.wiki-hero-search-slot .art-filter-bar-tools { display: none; }

.dev-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  font-size: 0.74rem;
  color: var(--mesh-warn);
}
.dev-badge code {
  background: var(--gold-soft);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--gold);
}


/* ═══════════════════════════════════════════════════════════════════
   SUGGESTED ARTICLES — a shuffleable grid right under the hero
   ═══════════════════════════════════════════════════════════════════ */

.wiki-suggested {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem 24px 5rem;
}
.wiki-suggested-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  padding: 0 0.3rem;
}
.wiki-suggested-head h2 {
  font-family: 'Lato', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
/* Inline shuffle button on the right of the section header — same
   semantics as the left-rail shuffle button, dispatched via the same
   `mesh-wiki:shuffle` event. Pill-styled to match the design system. */
.wiki-shuffle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: 500 0.74rem/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--card);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s, transform 0.15s;
}
.wiki-shuffle-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(255,255,255,0.75);
  transform: translateY(-1px);
}
.wiki-shuffle-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.wiki-shuffle-btn i { color: var(--gold); font-size: 0.85rem; }
.wiki-shuffle-btn:active { transform: translateY(0); }

.wiki-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
  transition: opacity 0.25s;
}
.wiki-suggestions-grid.shuffled .wiki-suggestion {
  animation: wiki-fade-in 0.4s ease-out both;
}
@keyframes wiki-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wiki-suggestion {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, background-color 0.15s;
}
.wiki-suggestion:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  text-decoration: none;
  background: rgba(255,255,255,0.75);
}
.wiki-suggestion-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: 0 0 64px;
}
.wiki-suggestion-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wiki-suggestion-thumb[data-fallback] i { font-size: 1.3rem; }
.wiki-suggestion-body { min-width: 0; }
.wiki-suggestion-axis {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 0.15rem;
}
.wiki-suggestion-title {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.2rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiki-suggestion-desc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════
   SOURCE CHIP — suggestion-card source label only
   ═══════════════════════════════════════════════════════════════════
   The article-view "Live from <source>" chip lives in m-mask-header's
   built-in `.profile-source-chip` now — see the source: opts on
   MeshMaskHeader.render in /mask/meta-renderer.js. The .wiki-source-*
   classes that used to inject the article-page chip from article/
   index.html have been removed. */

/* Suggestion-card source label — smaller, sits under the axis label. */
.wiki-suggestion-source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  margin-top: 0.25rem;
  text-transform: none;
}
.wiki-suggestion-source .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════════════════
   ARTICLE ROUTE — host + breadcrumb pill
   ═══════════════════════════════════════════════════════════════════ */

.wiki-article-host {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 24px 64px;
}

.wiki-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin-bottom: 1rem;
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: var(--card);
}
.wiki-breadcrumb:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.wiki-breadcrumb::before { content: '←'; font-size: 0.95rem; line-height: 1; }

/* Strip MediaWiki-inherited underlines from anchors inside the article
   body. The article HTML is fetched verbatim from Wikipedia and
   inserted via innerHTML, so it brings MediaWiki's per-class
   decorations along: a.new (redlinks), sup.reference / .citation
   (footnotes), .oo-ui-buttonElement-button (Phonos audio buttons),
   plus default `<a>` underlines under some browser UA styles.
   `!important` is justified here because the article body is
   external-source content the page explicitly re-styles to fit the
   mesh.wiki shell — same reason `text-decoration` is the longhand
   `text-decoration-line` here, so the longhand cascade can't put an
   underline back after the shorthand. Hover keeps a gold underline
   so anchors are still affordant. */
.wiki-article-host a,
.wiki-article-host a:visited,
.wiki-article-host a.new,
.wiki-article-host a.external,
.wiki-article-host sup.reference a,
.wiki-article-host .citation a,
.wiki-article-host a.oo-ui-buttonElement-button,
.wiki-article-host .oo-ui-buttonElement-button {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
.wiki-article-host a:hover {
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 3px;
}
/* Redlinks (missing MediaWiki articles) — dim them rather than the
   default red, so they read as "no article yet" without screaming. */
.wiki-article-host a.new,
.wiki-article-host a[href*="action=edit&redlink=1"] {
  color: var(--ink-mute) !important;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .wiki-hero { padding: 5rem 18px 1.5rem; }
  .wiki-suggested { padding: 1.2rem 18px 3rem; }
  .wiki-search-input { font-size: 0.98rem; padding: 0.9rem 3.8rem 0.9rem 2.7rem; }
  .wiki-search-submit { width: 2.4rem; height: 2.4rem; }
  .wiki-suggestion { grid-template-columns: 52px 1fr; }
  .wiki-suggestion-thumb { width: 52px; height: 52px; flex-basis: 52px; }
}