/* ==========================================================
   Takshashila — home page (editorial newspaper)
   Page-specific components for index.qmd. Loaded via the page's
   include-in-header front-matter, on top of the global
   assets/css/takshashila-base.css (tokens + shared primitives).

   Only home-only components live here. The shared listing
   primitives the home page reuses — .pub-list / .tk-pub,
   .blog-list / .blog-row, .news-cards, .np-split, .books —
   already live in takshashila-base.css and are NOT redefined.
   ========================================================== */

/* ── Masthead hero — thick top rule + lede + featured dossier ── */
.hp-mast { padding: 56px 0 64px; border-bottom: var(--tk-rule); }
.hp-mast .inner { max-width: var(--tk-max); margin: 0 auto; padding: 0 var(--tk-pad-x); }
.hp-mast .meta-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; flex-wrap: wrap; gap: 12px; }
.hp-mast .nameplate { font-family: var(--tk-serif); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tk-ink-50); }
.hp-mast .issue { font-family: var(--tk-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--tk-ink-50); }
.hp-mast .issue b { color: var(--tk-primary); }

.hp-mast .hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; }
.hp-mast .lede-col .hp-title { font-family: var(--tk-serif); font-weight: 400; font-size: 72px; line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 28px; text-wrap: balance; }
.hp-mast .lede-col .hp-title em { font-style: italic; color: var(--tk-primary); }
.hp-mast .lede-col p { font-family: var(--tk-serif); font-weight: 300; font-size: 22px; line-height: 1.5; color: var(--tk-ink-70); margin: 0; max-width: 580px; text-wrap: pretty; }
.hp-mast .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Featured dossier (inside hero) */
.feat-col { border-left: 2px solid var(--tk-primary); padding-left: 28px; align-self: end; }
.feat-col .feat-eyebrow { font-family: var(--tk-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tk-primary); margin-bottom: 12px; }
.feat-col .feat-title { font-family: var(--tk-serif); font-weight: 400; font-size: 44px; line-height: 0.95; letter-spacing: -0.025em; margin: 8px 0 18px; text-wrap: balance; }
.feat-col .feat-title em { font-style: italic; color: var(--tk-primary); }
.feat-col .feat-blurb { font-family: var(--tk-serif); font-weight: 300; font-size: 16px; line-height: 1.55; color: var(--tk-ink-70); margin: 0 0 16px; text-wrap: pretty; }
.feat-col .feat-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tk-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tk-primary); margin-bottom: 18px; padding-top: 14px; border-top: 1px solid var(--tk-ink-20); width: 100%; }
.feat-col .feat-status .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tk-primary); animation: feat-pulse 1.8s ease-in-out infinite; }
.feat-col .feat-link { font-family: var(--tk-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tk-ink); border-bottom: 1px solid var(--tk-ink); padding-bottom: 3px; }
@keyframes feat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 960px) {
  .hp-mast .hero-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hp-mast .lede-col .hp-title { font-size: 48px; }
  .feat-col { border-left: none; padding-left: 0; border-top: 2px solid var(--tk-primary); padding-top: 24px; }
}
@media (max-width: 560px) {
  .hp-mast .lede-col .hp-title { font-size: 40px; }
}

/* ── What we do — three pillars ── */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--tk-rule); background: var(--tk-paper); }
.pillar { padding: 36px 32px 40px; border-right: var(--tk-rule); position: relative; }
.pillar:last-child { border-right: none; }
.pillar .num { font-family: var(--tk-mono); font-size: 11px; color: var(--tk-primary); letter-spacing: 0.1em; margin-bottom: 18px; }
.pillar h3 { font-family: var(--tk-serif); font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 14px; font-weight: 500; }
.pillar p { font-size: 15px; line-height: 1.6; color: var(--tk-ink-70); margin: 0 0 20px; text-wrap: pretty; }
.pillar .more { font-family: var(--tk-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tk-ink); border-bottom: 1px solid var(--tk-ink); padding-bottom: 2px; }
@media (max-width: 720px) { .pillars { grid-template-columns: 1fr; } .pillar { border-right: none; border-bottom: var(--tk-rule); } .pillar:last-child { border-bottom: none; } }

/* ── Events — four-up card grid ── */
.ev-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: var(--tk-rule); background: var(--tk-paper); }
.ev-card { padding: 0; border-right: var(--tk-rule); border-bottom: var(--tk-rule); display: flex; flex-direction: column; transition: background 0.15s ease; }
.ev-cards > .ev-card:nth-child(2n) { border-right: none; }
.ev-cards > .ev-card:nth-last-child(-n+2) { border-bottom: none; }
.ev-card:hover { background: var(--tk-bg-deep); }
.ev-card .ev-body { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.ev-card .ev-type { font-family: var(--tk-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; background: var(--tk-primary); color: #fff; align-self: flex-start; }
.ev-card .ev-date { font-family: var(--tk-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--tk-primary); }
.ev-card h3 { font-family: var(--tk-serif); font-size: 26px; line-height: 1.2; letter-spacing: -0.005em; margin: 0; font-weight: 500; text-wrap: pretty; }
.ev-card p { font-size: 14px; line-height: 1.55; color: var(--tk-ink-70); margin: 0; text-wrap: pretty; flex: 1; }
.ev-card .ev-link { font-family: var(--tk-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tk-ink); border-bottom: 1px solid var(--tk-ink); padding-bottom: 3px; align-self: flex-start; margin-top: 6px; }
.ev-cta-wrap { margin-top: 32px; display: flex; justify-content: center; }
@media (max-width: 720px) {
  .ev-cards { grid-template-columns: 1fr; }
  .ev-card { border-right: none; }
  .ev-cards > .ev-card:nth-last-child(-n+2) { border-bottom: var(--tk-rule); }
  .ev-cards > .ev-card:last-child { border-bottom: none; }
}

/* ── About strip ── */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.about-tag { font-family: var(--tk-mono); font-size: 11px; color: var(--tk-primary); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.about-grid h2 { font-family: var(--tk-serif); font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 28px; text-wrap: balance; }
.about-grid h2 em { color: var(--tk-primary); font-style: italic; }
.about-grid .about-img {
  aspect-ratio: 5/4; margin-top: 8px;
  background: repeating-linear-gradient(135deg, rgba(98,13,61,0.06) 0 8px, rgba(98,13,61,0.12) 8px 16px);
  position: relative; overflow: hidden;
}
.about-grid .about-img .ph-tag { position: absolute; top: 14px; left: 16px; font-family: var(--tk-mono); font-size: 10px; color: var(--tk-primary); letter-spacing: 0.14em; }
.about-grid .about-img .ph-cap { position: absolute; bottom: 14px; left: 16px; right: 16px; font-family: var(--tk-mono); font-size: 10px; color: var(--tk-ink-50); letter-spacing: 0.1em; text-transform: uppercase; }
.about-grid .about-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-grid .about-body p { font-size: 15px; line-height: 1.65; color: var(--tk-ink-70); text-wrap: pretty; margin: 0 0 18px; }
@media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } }

/* Real book covers fill the cover box (base styles the box only) */
.tk-root .book .book-cover img { width: 100%; height: 100%; object-fit: cover; }