/* Cairoglyphics — shared stylesheet
   Dark stone base, gold umbrella accent, one colour per Cairo property.
   Keeps family resemblance with cairolabs.ai (triangle wordmark, dark panel,
   same spacing rhythm) while owning its own identity as the hub. */

:root {
  --bg:        #0b0d11;
  --stone:     #0e1218;
  --panel:     #12161d;
  --ink:       #e9edf2;
  --muted:     #98a3b0;
  --faint:     #6d7885;
  --line:      #212936;
  --line-soft: #1a212c;

  /* Umbrella accent — gold on dark stone */
  --gold:      #e9b352;
  --gold-dim:  rgba(233,179,82,0.14);
  --gold-edge: rgba(233,179,82,0.38);

  /* Per-property accents */
  --labs:        #5ec8ff;
  --consulting:  #d2843f;
  --networks:    #4e82d6;

  --radius: 12px;
  --maxw: 940px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
header {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,13,17,0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 16px; }
.brand { font-weight: 700; letter-spacing: 0.3em; font-size: 13px; color: var(--ink); white-space: nowrap; }
.brand .tri { color: var(--gold); }
.brand a { color: inherit; }
.brand a:hover { text-decoration: none; }
nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
nav a { color: var(--muted); font-size: 14px; }
nav a:hover { color: var(--ink); text-decoration: none; }
nav a.active { color: var(--gold); }

/* ---------- hero ---------- */
.hero { padding: 72px 0 40px; }
.hero h1 { font-size: clamp(30px, 5.2vw, 46px); line-height: 1.1; margin: 0 0 18px; letter-spacing: -0.03em; max-width: 700px; }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0; line-height: 1.7; }
.pill { display: inline-block; font-size: 12px; color: var(--gold); border: 1px solid var(--gold-edge); border-radius: 999px; padding: 4px 12px; margin-bottom: 22px; letter-spacing: 0.08em; }

/* ---------- filter bar ---------- */
.filterbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--stone); padding: 22px 0; position: sticky; top: 61px; z-index: 90; }
.filter-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.filter-row + .filter-row { margin-top: 14px; }
.filter-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); min-width: 74px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* Topic row is a fixed 5-across grid so the nine top topics plus the
   "+N more" button land as two tidy rows of five. */
#tag-row .chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
#tag-row .chip { width: 100%; text-align: center; }
@media (max-width: 760px) { #tag-row .chips { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { #tag-row .chips { grid-template-columns: repeat(2, 1fr); } }
.chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit; line-height: 1.4; transition: border-color .12s, color .12s, background .12s;
}
.chip:hover { color: var(--ink); border-color: var(--faint); }
.chip[hidden] { display: none; }
.chip-more { color: var(--gold); border-style: dashed; }
.chip-more:hover { color: var(--gold); border-color: var(--gold-edge); }
.chip[aria-pressed="true"] { color: var(--ink); background: rgba(233,179,82,0.10); border-color: var(--gold-edge); }
.chip[data-property="labs"][aria-pressed="true"]       { color: var(--labs);       background: rgba(94,200,255,0.12);  border-color: rgba(94,200,255,0.45); }
.chip[data-property="consulting"][aria-pressed="true"] { color: var(--consulting); background: rgba(210,132,63,0.14);  border-color: rgba(210,132,63,0.45); }
.chip[data-property="networks"][aria-pressed="true"]   { color: var(--networks);   background: rgba(78,130,214,0.14);  border-color: rgba(78,130,214,0.45); }

.filter-status { margin-top: 16px; font-size: 14px; color: var(--faint); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.clear-btn { background: none; border: none; color: var(--gold); font: inherit; font-size: 14px; cursor: pointer; padding: 0; text-decoration: underline; }
.clear-btn[hidden] { display: none; }

/* ---------- post list ---------- */
/* The `hidden` attribute must beat any display: rule in this file.
   .post-card/.chip/.clear-btn/.empty all set display, which silently
   defeated the UA [hidden] rule -- that is what broke the filters. */
[hidden] { display: none !important; }

.posts { padding: 48px 0 24px; }
.post-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 16px; color: inherit; transition: border-color .12s; }
.post-card:hover { text-decoration: none; border-color: var(--faint); }
.post-card:hover h2 { color: var(--gold); }
.post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.badge { border-radius: 4px; padding: 3px 9px; font-size: 11px; letter-spacing: 0.1em; border: 1px solid; }
.badge.labs       { color: var(--labs);       border-color: rgba(94,200,255,0.4);  background: rgba(94,200,255,0.10); }
.badge.consulting { color: var(--consulting); border-color: rgba(210,132,63,0.4);  background: rgba(210,132,63,0.10); }
.badge.networks   { color: var(--networks);   border-color: rgba(78,130,214,0.4);  background: rgba(78,130,214,0.10); }
.post-meta .sect { color: var(--faint); }
.post-meta time { color: var(--faint); text-transform: none; letter-spacing: 0.02em; }
.post-card h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; transition: color .12s; }
.post-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.post-tags { margin-top: 14px; display: flex; gap: 7px; flex-wrap: wrap; }
.tag { font-size: 12px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }

.empty { text-align: center; padding: 64px 24px; color: var(--muted); }
.empty[hidden] { display: none; }
.empty h3 { color: var(--ink); margin: 0 0 8px; font-size: 18px; }

/* ---------- post page ---------- */
.article { padding: 56px 0 32px; max-width: 720px; }
.article h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 16px; }
.article .summary { font-size: 18px; color: var(--muted); line-height: 1.7; margin: 0 0 28px; }
.article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.prose { font-size: 17px; line-height: 1.78; color: #dbe2ea; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 25px; letter-spacing: -0.02em; margin: 44px 0 14px; color: var(--ink); }
.prose h3 { font-size: 19px; letter-spacing: -0.01em; margin: 32px 0 10px; color: var(--ink); }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--gold-edge); color: var(--muted); font-style: italic; }
.prose code { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 14.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--gold); }
.prose pre { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; overflow-x: auto; margin: 0 0 22px; }
.prose pre code { background: none; border: none; padding: 0; color: #cdd6e0; font-size: 14px; line-height: 1.6; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose th { background: var(--panel); color: var(--ink); }

.article-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.backlink { font-size: 15px; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 44px 0 60px; margin-top: 40px; }
.footer-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer-brand { font-size: 13px; letter-spacing: 0.25em; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.footer-brand .tri { color: var(--gold); }
.footer-meta { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 460px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--muted); font-size: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 680px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .filterbar { position: static; }
  nav { gap: 16px; }
  .filter-label { min-width: 0; width: 100%; }
  .footer-inner { flex-direction: column; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.prose .ai-note { margin: 36px 0 0; padding: 14px 18px; border-left: 2px solid var(--gold-edge); background: rgba(255,255,255,.03); color: var(--muted); font-size: 15px; font-style: italic; line-height: 1.6; }

.article .summary .tldr { color: var(--ink); font-style: normal; font-weight: 700; letter-spacing: .02em; margin-right: 4px; }