/* ── Offentliga guider (/guide) ─────────────────────────────────────────────
   Läsning utan inloggning. Text ligger på --paper och --card med --ink och --ink-2,
   så kontrasten följer tokens i ljust och mörkt läge. Ingen färg bär mening ensam. */

.guide-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: 820px; margin: 0 auto; padding: var(--space-4) var(--space-4) 0;
}
.guide-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.guide-nav { display: flex; gap: var(--space-4); font-weight: 600; }
.guide-nav a { color: var(--ink); text-underline-offset: 4px; }

.guide { display: block; padding: var(--space-6) var(--space-4) var(--space-8); outline: none; }
.guide-wrap { max-width: 720px; margin: 0 auto; }
.guide-wrap > * + * { margin-top: var(--space-6); }

.guide h1 { margin: 0; font-size: var(--fs-h1); line-height: 1.1; color: var(--ink); overflow-wrap: break-word; }
.guide h2 { margin: var(--space-6) 0 0; font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); }
.guide-lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink); }
.guide-meta { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.guide-crumbs { display: flex; gap: var(--space-2); font-size: var(--fs-small); color: var(--ink-2); }
.guide-crumbs a { color: var(--ink-2); }

.guide-article > * + * { margin-top: var(--space-3); }
.guide-article > header + * { margin-top: var(--space-6); }
.guide-article p, .guide-article li { font-size: var(--fs-body); line-height: 1.7; color: var(--ink); max-width: 68ch; }
.guide-article p { margin: 0; }
.guide-article ul, .guide-article ol { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.guide-article a, .guide-lead a { color: var(--ink); text-decoration-thickness: 1.5px; }

.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.guide-card {
  display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
  padding: var(--space-4); text-decoration: none; color: var(--ink);
}
.guide-card:hover { color: var(--ink); }
.guide-card-title { font: 700 20px/1.2 var(--f-display); color: var(--ink); }
.guide-card-text { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.guide-card-meta { margin-top: auto; font-size: 13px; color: var(--ink-2); }

/* Knappen är med flit diskret: guiden ska läsas, inte sälja. */
.guide-cta {
  display: grid; gap: var(--space-3); justify-items: start;
  padding: var(--space-4); border: var(--bw-thin) dashed var(--line-soft); border-radius: var(--r-m);
  background: var(--paper-2);
}
.guide-cta h2 { margin: 0; font-size: var(--fs-h3); }
.guide-cta p { margin: 0; max-width: 56ch; color: var(--ink); line-height: 1.55; }

.guide-foot {
  max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8);
  border-top: var(--bw-thin) solid var(--line-soft); color: var(--ink-2); font-size: var(--fs-small);
}
.guide-foot p { margin: 0 0 var(--space-2); }
.guide-foot a { color: var(--ink); margin-right: var(--space-4); }
.guide-foot-wrap { max-width: 720px; margin: 0 auto; }

@media (max-width: 600px) {
  .guide-lead { font-size: 17.5px; }
}