/* Guides: long-form reading pages under /guides (built by tools/build-guides.py).
   Uses the crane.css tokens; the reading column is --container-narrow. */

.guide { background: var(--parch); }

.guide-head {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: calc(var(--sec-3) + 72px) var(--gutter) var(--sec-1);
}
.guide-crumbs { margin: 0 0 18px; font: 600 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-crumbs a { color: var(--gold-deep); text-decoration: none; }
.guide-crumbs a:hover { text-decoration: underline; }
.guide-h1 { margin: 0 0 18px; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; text-wrap: balance; }
.guide-lede { margin: 0 0 22px; max-width: 62ch; color: var(--ink); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; }
.guide-meta { margin: 0; color: var(--mut); font-size: 13.5px; }
.guide-meta a { color: inherit; }

.guide-body {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--sec-3);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.7;
}
.guide-body > * + * { margin-top: 1em; }
.guide-body h2 {
  margin: 2.2em 0 0.5em;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(25px, 2.6vw, 32px);
  line-height: 1.15;
  text-wrap: balance;
}
.guide-body h3 { margin: 1.6em 0 0.3em; font-size: 18px; line-height: 1.3; }
.guide-body p, .guide-body li { max-width: 68ch; }
.guide-body ul, .guide-body ol { padding-left: 1.3em; }
.guide-body li + li { margin-top: 0.45em; }
.guide-body a { color: var(--crane-red); text-decoration: underline; text-underline-offset: 2px; }
.guide-body a:hover { color: var(--red-deep); }
.guide-body strong { font-weight: 650; }

.guide-answer {
  padding: 18px 20px;
  border-left: 3px solid var(--gold);
  background: var(--paper);
  border-radius: 0 10px 10px 0;
}
.guide-answer p { margin: 0; }

.guide-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Focusable so keyboard users can scroll a wide table on a phone. */
.guide-table-wrap:focus-visible { outline: 2px solid var(--focus-ring, #7A5518); outline-offset: 2px; }
.guide-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; background: var(--paper); }
.guide-table caption { padding: 0 0 8px; color: var(--mut); font-size: 13px; text-align: left; }
.guide-table th, .guide-table td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.guide-table thead th { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mut); }
.guide-table tbody th { font-weight: 650; }

.guide-steps { counter-reset: step; list-style: none; padding-left: 0; }
.guide-steps > li { position: relative; padding-left: 44px; }
.guide-steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1em;
  color: var(--gold-deep);
  font: 600 14px/1.6 'IBM Plex Mono', monospace;
}

.guide-note { color: var(--mut); font-size: 14px; }

.guide-related { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--line-2); }
.guide-related h2 { margin-top: 0; font-size: 20px; }
.guide-body .guide-related ul { list-style: none; padding: 0; }

.guide .sol-faq { padding-top: 0; background: transparent; }

/* Guides hub */
.guide-body .guide-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-2); }
.guide-body .guide-list li { max-width: none; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.guide-list a { display: block; color: var(--ink); text-decoration: none; }
.guide-list a:hover .guide-list-t { color: var(--crane-red); }
.guide-list-t { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.25; }
.guide-list-d { display: block; margin-top: 4px; color: var(--mut); font-size: 15px; line-height: 1.55; }

@media (max-width: 640px) {
  .guide-head { padding-top: calc(var(--sec-2) + 64px); }
  .guide-body { font-size: 16px; }
  .guide-steps > li { padding-left: 36px; }
}

@media print {
  .cr-nav, .cr-drawer, .cr-drawer-overlay, .cr-footer-block, .cr-final, .guide-crumbs, .guide-related, .mobile-cta-bar { display: none !important; }
  .guide-head { padding-top: 0; }
  body, .guide { background: #fff; }
}