/* Listing / archive family — blog index, category, tag, generic archive,
   search (FE-004). Loaded only on that family by functions.php::bmhud_assets()
   (is_home()||is_archive()||is_search(), excluding is_front_page() — see
   PLAT-006's comment on that exclusion). Never move this into global.css —
   it would leak the card/grid layout onto every page. */

.bmhud-listing{
  --ink:#080B08; --obsidian:#0A0F0B; --surface:#121A13; --elevated:#1A241B;
  --pine:#0C3A0D; --forest:#104911; --emerald:#1E7A2C;
  --gold-deep:#B9842A; --gold:#E2A837; --gold-light:#EFC35C;
  --heading:#F4EFE3; --body:#CFC9BB; --muted:#8E8B7E;
  --border:rgba(244,239,227,0.10); --border-gold:rgba(226,168,55,0.30);
  --nav-bg:rgba(10,15,11,0.72);
  --pill-fill:#0C3A0D; --pill-text:#F4EFE3;
  --kicker-color:#E2A837;
  --featured-bg:linear-gradient(160deg, rgba(12,58,13,0.55) 0%, var(--surface) 60%);
  --card-shadow:none; --card-hover-shadow:none;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
}

/* Light edition + green-ink promotion. Green carries structure/labels only;
   ochre remains the sole attention colour. Dark remains the default. */
:root[data-theme="light"] .bmhud-listing{
  --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
  --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
  --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
  --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
  --bm-hover-from-gold:var(--bm-gold-ink-hover);
  --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
  --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
  --nav-bg:rgba(231,224,206,0.78);
  --pill-fill:#154C17; --pill-text:#EFE9DA;
  --kicker-color:#215B27;
  --featured-bg:linear-gradient(160deg, rgba(21,76,23,0.14) 0%, var(--surface) 60%);
  --card-shadow:0 1px 0 rgba(244,239,227,0.55), 0 10px 28px -20px rgba(42,40,32,0.52);
  --card-hover-shadow:0 1px 0 rgba(244,239,227,0.60), 0 14px 32px -18px rgba(42,40,32,0.52);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .bmhud-listing{
    --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
    --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
    --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
    --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
    --bm-hover-from-gold:var(--bm-gold-ink-hover);
    --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
    --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
    --nav-bg:rgba(231,224,206,0.78);
    --pill-fill:#154C17; --pill-text:#EFE9DA;
    --kicker-color:#215B27;
    --featured-bg:linear-gradient(160deg, rgba(21,76,23,0.14) 0%, var(--surface) 60%);
    --card-shadow:0 1px 0 rgba(244,239,227,0.55), 0 10px 28px -20px rgba(42,40,32,0.52);
    --card-hover-shadow:0 1px 0 rgba(244,239,227,0.60), 0 14px 32px -18px rgba(42,40,32,0.52);
  }
}
.bmhud-listing *{ box-sizing:border-box; }
.bmhud-listing{
  background:var(--obsidian); color:var(--body); font-family:var(--sans);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.bmhud-listing a{ color:var(--bm-gold-ink,var(--gold)); text-decoration:none; transition:color .18s ease; }
.bmhud-listing a:hover{ color:var(--bm-gold-ink-hover,var(--gold-light)); }
.bmhud-listing a:focus-visible{ outline:2px solid var(--bm-focus,var(--gold)); outline-offset:2px; border-radius:2px; }

.listing-stage{ max-width:1240px; margin:0 auto; padding:0 28px; }

/* ---- Sticky blurred nav (same grammar as single.php's .notebook-nav) ---- */
.listing-nav{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:18px 28px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  background:var(--nav-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.listing-nav-brand{ color:var(--heading); font-family:var(--serif); font-weight:600; font-size:18px; line-height:1; letter-spacing:0; }
.listing-nav-brand b{ color:var(--bm-gold-ink,var(--gold)); font-weight:inherit; }
.listing-nav-back{ color:var(--muted); font-size:12px; letter-spacing:.05em; white-space:nowrap; }
.listing-nav-back:hover{ color:var(--bm-hover-from-gold,var(--gold)); }

/* ---- Archive header (direction §4) ---- */
.listing-header{ max-width:760px; padding:56px 0 40px; }
.bmhud-listing .listing-header .bm-kicker{ color:var(--kicker-color); }
.listing-title{
  font-family:var(--serif); color:var(--heading); font-weight:500;
  font-size:clamp(2rem,5vw,3rem); line-height:1.15; letter-spacing:-0.02em;
  margin:10px 0 14px;
}
.listing-desc{ font-size:16px; color:var(--body); line-height:1.7; margin:0 0 14px; }
.listing-count{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0;
}

/* ---- Featured lead card (direction §2/§3 — homepage .proj-family gradient
   panel behind the newest post) ---- */
.listing-featured{
  position:relative; display:block;
  background:var(--featured-bg);
  border:1px solid var(--border); border-radius:16px;
  padding:40px; margin:0 0 40px;
  box-shadow:var(--card-shadow);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.listing-featured:hover,
.listing-featured:focus-within{ border-color:var(--border-gold); box-shadow:var(--card-hover-shadow); }
.listing-featured-title{
  font-family:var(--serif); color:var(--heading); font-weight:500;
  font-size:clamp(1.6rem,4vw,2.4rem); line-height:1.2; letter-spacing:-0.015em;
  margin:0 0 16px;
}
.listing-featured-excerpt{
  font-size:17px; line-height:1.7; color:var(--body);
  max-width:640px; margin:0 0 26px;
}
.listing-featured-meta{
  font-family:var(--mono); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; line-height:1.4;
  color:var(--muted); margin:0 0 16px; display:flex; gap:10px; align-items:center;
}
.listing-featured-meta span[aria-hidden]{ color:var(--muted); }
.listing-featured-cue{ display:inline-block; color:var(--bm-gold-ink,var(--gold)); font-weight:600; font-size:15px; }

/* ---- Grid + card (direction §3 — reuse of the homepage .post grammar) ---- */
.listing-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px;
}
.listing-card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:28px; display:flex; flex-direction:column;
  box-shadow:var(--card-shadow);
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.listing-card:hover,
.listing-card:focus-within{ background:var(--elevated); border-color:var(--border-gold); box-shadow:var(--card-hover-shadow); }

/* Category pill — shared by featured + grid cards. Homepage/BRAND "category
   tag" token: deep-pine fill, warm-white text, pill shape. Plain <span>, not
   a link — the whole card is already one clickable target (see
   .listing-card-link below); a second nested link would be invalid HTML. */
.listing-pill{
  display:inline-block; background:var(--pill-fill); color:var(--pill-text);
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.04em;
  padding:5px 14px; border-radius:999px; margin:0 0 16px; align-self:flex-start;
}

.listing-card-title{ font-family:var(--serif); color:var(--heading); font-weight:500; font-size:22px; line-height:1.25; margin:0 0 12px; }
.listing-card-link{ color:inherit; }
.listing-card-link:hover{ color:var(--bm-gold-ink-hover,var(--gold-light)); }
/* Stretched-link pattern: the title is the ONE real, accessible link (single
   tab stop, clear name); this pseudo-element overlays the whole card so the
   entire box is clickable without nesting a second link inside it. */
.listing-card-link::after{ content:""; position:absolute; inset:0; }

.listing-card-excerpt{ font-size:15px; color:var(--body); line-height:1.7; margin:0 0 24px; flex:1; }
.listing-card-meta{
  font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; line-height:1.4;
  color:var(--muted); margin:0 0 12px; display:flex; gap:10px; align-items:center;
}
.listing-card-meta span[aria-hidden]{ color:var(--muted); }
.listing-card-cue{ color:var(--bm-gold-ink,var(--gold)); font-weight:600; font-size:14px; }

/* ---- Pagination (direction §5) ---- */
.listing-pagination{
  display:flex; align-items:center; gap:16px;
  margin:48px 0 0; padding-top:24px; border-top:1px solid var(--border);
  font-family:var(--sans); font-size:14px;
}
.listing-pagination a{ color:var(--bm-gold-ink,var(--gold)); font-weight:500; }
.listing-pagination a:hover{ color:var(--bm-gold-ink-hover,var(--gold-light)); }
.listing-pagination-next{ margin-left:auto; }

/* ---- Empty state (direction §5) — one quiet muted line ---- */
.listing-empty{ color:var(--muted); font-size:15px; padding:32px 0 8px; }

/* ---- index.php singular fallback guard ---- */
.listing-fallback-article{ padding:16px 0 8px; }
.listing-fallback-content{ font-size:16px; line-height:1.7; color:var(--body); max-width:720px; }
.listing-fallback-content p{ margin:0 0 22px; }

/* ---- Footer (matches the site-wide grammar) ---- */
.bm-footer{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  padding:26px 0 46px; margin-top:64px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.bm-footer b{ color:var(--bm-gold-ink,var(--gold)); }
.bm-footer-name{ font-family:var(--serif); font-weight:500; font-size:14px; letter-spacing:0; color:var(--heading); }
.bm-footer-name b{ color:var(--bm-gold-ink,var(--gold)); font-weight:inherit; }

/* ---- Responsive ---- */
@media(max-width:720px){
  .listing-grid{ grid-template-columns:1fr; }
  .listing-featured{ padding:28px; }
}
@media(max-width:640px){
  .listing-nav{ padding:16px 18px; flex-wrap:wrap; }
  .listing-stage{ padding:0 18px; }
  .listing-header{ padding:44px 0 32px; }
  .listing-pagination{ flex-wrap:wrap; }
}

@media(prefers-reduced-motion:reduce){
  .bmhud-listing *{ transition:none !important; }
}