/* ==========================================================================
   Prose layout for the guide pages. Loaded only by /how-your-calories-are-
   calculated/ and /90-day-workout-plan/, so the home page pays nothing for it.
   Everything here builds on the existing tokens and classes, no new palette.
   ========================================================================== */

.article { max-width: 820px; margin: 0 auto; }
.article .sec-head { display: block; margin-bottom: 38px; }
.article h1 {
  font: 600 clamp(38px, 5.6vw, 60px)/1.04 'Space Grotesk', sans-serif;
  letter-spacing: -2.4px; margin: 14px 0 0;
}
.article h1 em { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--lime); }
.article .lede { color: var(--muted); font-size: 18px; line-height: 1.7; max-width: 68ch; margin: 22px 0 0; }

.article h2 {
  font: 600 27px/1.2 'Space Grotesk', sans-serif;
  letter-spacing: -0.6px; margin: 46px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.article p { max-width: 72ch; font-size: 16.5px; line-height: 1.75; color: #c3cac6; }
.article p strong { color: var(--ink); }
.article a { color: var(--lime); text-underline-offset: 3px; }

/* The equation itself. Monospaced so the operators line up and it reads as a
   formula rather than a sentence. */
.article .formula {
  background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--lime);
  padding: 18px 20px; font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 15.5px; line-height: 1.9; color: var(--ink); max-width: none;
}
.article .source { font-size: 14.5px; color: var(--muted); max-width: 72ch; }
.article .source cite { font-style: italic; }
.article .related { font-size: 15.5px; margin-top: 26px; }

.article .method-table { margin: 18px 0 8px; }
.article .method-row dd strong { color: var(--lime); }

/* Breadcrumb. Mirrors the BreadcrumbList in the page's structured data, so the
   trail a reader sees and the one Google reads are the same. */
.crumbs { margin-bottom: 26px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li { font-size: 14px; color: var(--muted); letter-spacing: .4px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #4b544f; }
.crumbs a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--lime); }

@media (max-width: 560px) {
  .article h2 { font-size: 23px; margin-top: 38px; }
  .article p, .article .lede { font-size: 16px; }
  .article .formula { font-size: 14.5px; padding: 15px 14px; overflow-x: auto; }
}

/* On the guide pages the two call to action controls are links, not buttons, so
   they pick up the default underline and inline layout that the button styling
   never had to deal with. Match the button rendering exactly. */
a.ghost-btn, a.primary-btn {
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
a.ghost-btn:hover, a.primary-btn:hover { text-decoration: none; }

/* The shared .sec top padding is tuned for the home page's full-bleed sections
   and leaves a large dead band above a breadcrumb. */
.article.sec { padding-top: 46px; }
@media (max-width: 560px) { .article.sec { padding-top: 30px; } }

/* .article a wins on specificity over .primary-btn, which was painting the CTA
   label lime on a lime background, i.e. invisible. Restore the button's own
   foreground colour explicitly. */
.article a.primary-btn { color: #0d110e; }
.article a.ghost-btn   { color: var(--ink); }

/* Guides hub. Cards are whole-area links so the tap target is the card, not just
   the heading, which matters most on a phone. */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.guide-card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  padding: 22px; text-decoration: none; transition: border-color .18s, transform .18s;
}
.guide-card:hover, .guide-card:focus-visible { border-color: #6d7c72; transform: translateY(-3px); }
.guide-card h2 {
  font: 600 20px/1.25 'Space Grotesk', sans-serif; letter-spacing: -0.3px;
  margin: 0 0 8px; padding: 0; border: 0; color: var(--ink);
}
.guide-card p { margin: 0 0 14px; font-size: 15.5px; color: var(--muted); max-width: none; }
.guide-card span { font-size: 14px; color: var(--lime); font-weight: 700; letter-spacing: .4px; }
@media (max-width: 700px) { .guide-grid { grid-template-columns: 1fr; } }