/* =====================================================================
   THE BHUKKAD TIMES — Franchise Guides (long-form article pages)
   Newspaper idiom shared with press/events: paper, charcoal rules,
   Playfair headlines, yellow highlighter. Static HTML, no React.
   ===================================================================== */
main.guide-page { padding-top: 104px !important; }
.guide-wrap { width: min(100% - 40px, 1240px); margin: 0 auto; box-sizing: border-box; }
.guide-intro-strip {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-charcoal);
}
.guide-intro-strip .back-link { border: 1px solid var(--warm-charcoal); padding: 6px 12px; background: #F8F4E8; text-decoration: none; color: var(--warm-charcoal); transition: background 220ms ease; }
.guide-intro-strip .back-link:hover { background: var(--tbc-yellow); }
.guide-intro-strip .issue { font-style: italic; font-weight: 500; text-transform: none; }
.guide-crumbs { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.04em; margin: 18px 0 0; color: rgba(44,42,37,0.75); }
.guide-crumbs a { color: var(--warm-charcoal); text-decoration: none; border-bottom: 1px solid rgba(44,42,37,0.35); }
.guide-crumbs a:hover { border-bottom-color: var(--warm-charcoal); }
.guide-crumbs span { margin: 0 6px; }

/* Article masthead */
.guide-head { border-top: 4px double var(--warm-charcoal); border-bottom: 2px solid var(--warm-charcoal); padding: 26px 0 22px; margin-top: 14px; }
.guide-kicker { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; display: inline-block; background: var(--tbc-yellow); padding: 4px 10px 3px; margin-bottom: 14px; }
.guide-head h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--warm-charcoal); max-width: 18ch; }
.guide-standfirst { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: rgba(44,42,37,0.85); max-width: 70ch; margin: 0 0 18px; }
.guide-byline { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(44,42,37,0.8); }
.guide-byline b { color: var(--warm-charcoal); }

/* Two-column body: article + rail */
.guide-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; margin-top: 34px; align-items: start; }
.guide-article { min-width: 0; }
.guide-article > p, .guide-section p { font-family: var(--font-body); font-size: 17px; line-height: 1.68; color: var(--warm-charcoal); margin: 0 0 18px; max-width: 72ch; }
.guide-section ul, .guide-section ol { font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: var(--warm-charcoal); padding-left: 22px; margin: 0 0 18px; max-width: 70ch; }
.guide-section li { margin: 0 0 8px; }
.guide-section a, .guide-article a { color: var(--terracotta); text-decoration: none; border-bottom: 1px solid rgba(196,75,42,0.4); }
.guide-section a:hover { border-bottom-color: var(--terracotta); }
.guide-intro-text p:first-child::first-letter { font-family: var(--font-display); font-weight: 900; font-size: 3.6em; float: left; line-height: 0.8; padding: 6px 10px 0 0; color: var(--warm-charcoal); }

.guide-takeaways { border: 2px solid var(--warm-charcoal); background: #F8F4E8; padding: 18px 22px 10px; margin: 6px 0 30px; box-shadow: 6px 6px 0 rgba(44,42,37,0.9); }
.guide-takeaways h2 { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 10px; }
.guide-takeaways ol { margin: 0; padding-left: 20px; font-family: var(--font-body); font-size: 15.5px; line-height: 1.5; }
.guide-takeaways li { margin: 0 0 8px; }

.guide-section { margin-top: 38px; }
.guide-section-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--warm-charcoal); padding-bottom: 8px; margin-bottom: 18px; }
.guide-section-head .no { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--terracotta); }
.guide-section-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.15; margin: 0; color: var(--warm-charcoal); }

/* Comparison table — printed rules */
.guide-table { margin: 28px 0 34px; overflow-x: auto; }
.guide-table table { border-collapse: collapse; width: 100%; font-family: var(--font-body); font-size: 14.5px; line-height: 1.4; }
.guide-table caption { caption-side: top; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 0 10px; }
.guide-table th { text-align: left; font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border-top: 3px double var(--warm-charcoal); border-bottom: 2px solid var(--warm-charcoal); padding: 10px 12px 8px; background: #F8F4E8; }
.guide-table td { border-bottom: 1px solid rgba(44,42,37,0.3); padding: 10px 12px; vertical-align: top; }
.guide-table tr:nth-child(even) td { background: rgba(248,244,232,0.6); }
.guide-table tr:last-child td { border-bottom: 2px solid var(--warm-charcoal); }

/* FAQ */
.guide-faq { margin-top: 38px; }
.guide-faq .qa { border-top: 1px solid rgba(44,42,37,0.3); padding: 16px 0; }
.guide-faq .qa:last-child { border-bottom: 2px solid var(--warm-charcoal); }
.guide-faq h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin: 0 0 8px; color: var(--warm-charcoal); }
.guide-faq p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; margin: 0; max-width: 72ch; }

/* Rail */
.guide-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.rail-box { border: 2px solid var(--warm-charcoal); background: #F8F4E8; padding: 16px 18px; }
.rail-box.cta { background: var(--warm-charcoal); color: var(--ivory-cream); border-color: var(--warm-charcoal); }
.rail-box h3 { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 10px; }
.rail-box p { font-family: var(--font-body); font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.rail-box ul { list-style: none; padding: 0; margin: 0; }
.rail-box li { border-top: 1px dashed rgba(44,42,37,0.3); padding: 8px 0; font-family: var(--font-body); font-size: 14px; line-height: 1.4; }
.rail-box.cta li { border-top-color: rgba(244,236,216,0.3); }
.rail-box li a { color: inherit; text-decoration: none; }
.rail-box li a:hover { color: var(--terracotta); }
.rail-box.cta li a:hover { color: var(--tbc-yellow); }
.rail-btn { display: inline-block; margin-top: 4px; background: var(--tbc-yellow); color: var(--warm-charcoal); text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 14px; border: 2px solid var(--tbc-yellow); }
.rail-btn:hover { background: transparent; color: var(--tbc-yellow); }
.rail-box.cta .num { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--tbc-yellow); }
.rail-box.cta .lab { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; margin-bottom: 10px; }

/* Sources + related */
.guide-sources { margin-top: 38px; border-top: 2px solid var(--warm-charcoal); padding-top: 14px; }
.guide-sources h2 { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 10px; }
.guide-sources ol { font-family: var(--font-body); font-size: 13px; line-height: 1.5; padding-left: 20px; margin: 0; color: rgba(44,42,37,0.8); column-count: 2; column-gap: 32px; }
.guide-sources a { color: var(--warm-charcoal); text-decoration: none; border-bottom: 1px solid rgba(44,42,37,0.3); overflow-wrap: anywhere; }
.guide-related { margin-top: 44px; }
.guide-related .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide-card { display: block; border: 2px solid var(--warm-charcoal); background: #F8F4E8; padding: 16px 18px 18px; text-decoration: none; color: var(--warm-charcoal); transition: transform 150ms ease, box-shadow 150ms ease; }
.guide-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(44,42,37,0.9); }
.guide-card .k { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 8px; }
.guide-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.15; margin: 0 0 8px; }
.guide-card p { font-family: var(--font-body); font-size: 14px; line-height: 1.5; margin: 0; color: rgba(44,42,37,0.8); }

/* Guides index */
.guides-index .guide-card { padding: 22px 22px 24px; }
.guides-index .guide-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.15; margin: 0 0 8px; }
.guides-index .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; }

.guide-finalrule { margin: 60px 0 40px; border-top: 4px double var(--warm-charcoal); padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.guide-finalrule a { color: var(--warm-charcoal); }

@media (max-width: 900px) {
  .guide-body { grid-template-columns: 1fr; gap: 28px; }
  .guide-rail { position: static; }
  .guide-related .cards, .guides-index .cards { grid-template-columns: 1fr; }
  .guide-sources ol { column-count: 1; }
  .guide-head h1 { max-width: none; }
}

.cross-hub { font-family: var(--font-body); font-size: 17px; line-height: 1.6; margin: 0; }
.cross-hub a { color: var(--terracotta); text-decoration: none; border-bottom: 1px solid rgba(196,75,42,0.4); }