/* TOMO blog: shared visual system for the index/listing page and every post page.
   Linked from every page in site/blog/ alongside /chrome.css (shared header/footer,
   not duplicated here). Full rationale and the "how to add a new post" checklist live
   in docs/brand/BLOG_STYLE_GUIDE.md — read that before adding a post or touching this
   file. Brand tokens only: #111111 bg, #F5A623 gold, #22c55e green, #3b82f6 blue,
   #8B5CF6 purple, Unbounded/Inter/JetBrains Mono. No new colors invented here. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #111111;
  color: #e0e0e0;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

/* ---- index page title + search/filter UI ---- */

.page-title { position: relative; max-width: 720px; margin: 0 auto; text-align: center; padding: 48px 20px 16px; }
.page-title h1 { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 36px; color: #fff; }
.page-title p { font-size: 16px; color: #888; margin-top: 8px; max-width: 520px; margin-left: auto; margin-right: auto; }

.search-toggle {
  position: absolute; top: 48px; right: 20px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
}
.search-toggle svg { width: 22px; height: 22px; stroke: #888; transition: stroke 0.15s; }
.search-toggle:hover svg { stroke: #F5A623; }

.search-panel {
  max-width: 720px; margin: 0 auto; padding: 0 20px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 250ms ease-out, opacity 250ms ease-out;
}
.search-panel.open { max-height: 200px; opacity: 1; }
.search-panel-inner { padding-top: 24px; }

.search-box {
  width: 100%; padding: 14px 16px 14px 44px;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: #fff;
  background: #1a1a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 14px center no-repeat;
  border: 1px solid #2a2a2a; border-radius: 10px; outline: none; -webkit-appearance: none;
}
.search-box::placeholder { color: #555; }
.search-box:focus { border-color: #F5A623; box-shadow: 0 0 0 2px rgba(245,166,35,0.15); }

.tag-filters { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.tag-filter {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border-radius: 6px;
  border: 1px solid #2a2a2a; background: #1a1a1a; color: #888; cursor: pointer; transition: all 0.15s;
}
.tag-filter:hover { border-color: #555; color: #ccc; }
.tag-filter.active { background: rgba(245,166,35,0.15); border-color: #F5A623; color: #F5A623; }

.post-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #555; letter-spacing: 1px; margin-bottom: 16px; max-width: 880px; margin-left: auto; margin-right: auto; padding: 0 20px; }

.no-results { text-align: center; padding: 48px 20px; display: none; }
.no-results p { color: #666; font-size: 15px; }

/* ---- tag pill colors: the one source of truth for all four categories.
   training=gold, culture=blue, community=green, personal=purple. Used on
   index tiles AND on the post-hero tag pill (article-tag shares these). ---- */
.tag-training { background: rgba(245,166,35,0.85); color: #111; }
.tag-culture { background: rgba(59,130,246,0.85); color: #fff; }
.tag-community { background: rgba(34,197,94,0.85); color: #111; }
.tag-personal { background: rgba(139,92,246,0.85); color: #fff; }

/* ---- index tiles: Press halftone texture, low opacity, fills the whole
   tile (card-body IS the tile, no separate bare header strip), dark scrim
   under the copy. See BLOG_STYLE_GUIDE.md "Texture rule" for the rotation. ---- */
.posts { max-width: 880px; margin: 0 auto; padding: 32px 20px 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.post-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 236px; text-decoration: none;
  background: #171717; border: 1px solid #2a2a2a; border-radius: 14px;
  overflow: hidden; transition: border-color 0.2s, transform 0.2s;
}
.post-card:hover { border-color: #F5A623; transform: translateY(-2px); }
.post-card.hidden { display: none; }
.post-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--tex-img) center / cover no-repeat;
  opacity: 0.12;
}
.post-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17,17,17,0.5) 0%, rgba(17,17,17,0.68) 100%);
}
.post-card .post-tag {
  display: inline-block; align-self: flex-start; z-index: 2; position: relative;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: 4px;
}
.card-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 20px; }
.post-date { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: #F5A623; letter-spacing: 1px; }
.post-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 21px; color: #fff; line-height: 1.32; }
.post-excerpt { font-size: 15px; color: #ccc; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 680px) { .posts { grid-template-columns: 1fr; } }

/* ---- post header: same halftone texture, contained to a box padded
   tightly around the tag/date/headline (never bleeding into bare page
   margin above or below). See BLOG_STYLE_GUIDE.md "Post-header anatomy". ---- */
.post-hero { padding: 56px 24px 40px; text-align: center; background: #111111; }
.hero-inner {
  position: relative; overflow: hidden; max-width: 860px; margin: 0 auto;
  border-radius: 20px; padding: 72px 32px;
}
.hero-inner::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--hero-img) center 18% / cover no-repeat;
  opacity: 0.14;
}
.hero-inner::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.62) 100%);
}
.hero-inner > * { position: relative; z-index: 2; }
.hero-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; }
.hero-date { display: block; margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; color: #F5A623; letter-spacing: 1.5px; text-transform: uppercase; }
.post-hero h1 { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: clamp(34px, 6.5vw, 56px); color: #fff; line-height: 1.15; max-width: 780px; margin: 20px auto 0; letter-spacing: -0.015em; }
@media (max-width: 600px) { .hero-inner { padding: 48px 24px; border-radius: 16px; } }

/* ---- article body typography (shared by every post) ---- */
.article { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; }
.article p { color: #ccc; margin-bottom: 18px; line-height: 1.8; }
.article p:first-of-type { font-size: 18px; color: #ddd; }
.article strong { color: #fff; font-weight: 600; }
.article em { font-style: italic; }
.article h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 22px; color: #fff; margin-top: 48px; margin-bottom: 16px; line-height: 1.3; }
.article h3 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 18px; color: #fff; margin-top: 36px; margin-bottom: 12px; line-height: 1.3; }
.article hr { border: none; border-top: 1px solid #333; margin: 48px 0; }
.article blockquote { border-left: 3px solid #F5A623; padding-left: 20px; margin: 24px 0; color: #bbb; font-style: italic; }
.article ul, .article ol { margin: 16px 0 24px 24px; color: #ccc; }
.article li { margin-bottom: 8px; line-height: 1.7; }
.article li strong { color: #fff; }

.article .sources { margin-top: 48px; padding-top: 24px; border-top: 1px solid #333; }
.article .sources p { font-size: 14px; color: #888; line-height: 1.6; margin-bottom: 8px; }
.article .sources em { color: #999; }

.article .closing-note { margin-top: 48px; padding-top: 24px; border-top: 1px solid #333; font-style: italic; color: #bbb; }
.article .closing-note p { color: #bbb; font-style: italic; }
.article .closing-note a { color: #F5A623; text-decoration: none; }

.read-next { margin-top: 48px; padding-top: 24px; border-top: 1px solid #333; }
.read-next p { font-size: 14px; color: #888; }
.read-next a { color: #F5A623; text-decoration: none; font-weight: 600; }
.read-next a:hover { text-decoration: underline; }

.cta-box { background: linear-gradient(135deg, rgba(245,166,35,0.08) 0%, rgba(245,166,35,0.02) 100%); border: 1px solid rgba(245,166,35,0.2); border-radius: 12px; padding: 24px 28px; margin-top: 48px; }
.cta-box p { color: #ccc; font-size: 15px; line-height: 1.6; margin-bottom: 0; }
.cta-box strong { color: #F5A623; }
.cta-box a { color: #F5A623; text-decoration: none; font-weight: 600; }
.cta-box a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .page-title h1 { font-size: 28px; }
  .article h2 { font-size: 19px; }
  .article h3 { font-size: 16px; }
}