/* Guides and journal prompts (routes/marketing.js, lib/guides.js).
   Loaded after doc.css: the essay itself uses the About page's .ab-essay
   reading styles, and only what those pages lack is added here. Every colour
   is a --lp-* token, so the light and dark themes both follow. */

.gd .gd-head .hm-head { margin-bottom: 0; }
body.lp-dark .gd-h1 { max-width: 17ch; margin: 0 auto 26px; font-size: clamp(2.5rem, 1.7rem + 3.7vw, 4.8rem); line-height: 1.02; letter-spacing: -.024em; }
.gd .gd-crumb { text-decoration: none; }
.gd .gd-crumb:hover { color: var(--lp-amber-2); }
.gd .gd-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; font: 500 .74rem/1.4 var(--lp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); }
.gd .ab-stand { max-width: 34ch; }

/* ---- the essay ------------------------------------------------------------ */
.gd .gd-body { margin-top: clamp(44px, 6vw, 80px); }
.gd .gd-body h2 {
  margin: 2.2em 0 .7em; font: 400 clamp(1.45rem, 1.2rem + .9vw, 1.9rem)/1.2 var(--lp-serif);
  letter-spacing: -.012em; color: var(--lp-text); text-wrap: balance;
}
.gd .gd-body p.gd-lede { font-size: clamp(1.2rem, 1.08rem + .45vw, 1.42rem); line-height: 1.7; color: var(--lp-text); }
.gd .gd-body em { font-style: italic; color: var(--lp-text); }
.gd .gd-body strong { font-weight: 600; color: var(--lp-text); }
.gd .gd-body :is(ol, ul) { margin: 0 0 1.6em; padding: 0; list-style: none; }
.gd .gd-body :is(ol, ul) li {
  position: relative; margin: 0 0 .9em; padding-left: 2.1em;
  font: 400 clamp(1.05rem, 1rem + .25vw, 1.18rem)/1.72 var(--lp-serif); color: var(--lp-text-2);
}
.gd .gd-body .gd-steps { counter-reset: gd-step; }
.gd .gd-body .gd-steps li { counter-increment: gd-step; }
.gd .gd-body .gd-steps li::before,
.gd .gd-body .gd-scenes li::before {
  content: counter(gd-step); position: absolute; left: 0; top: .2em;
  display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%;
  font: 600 .78rem/1 var(--lp-mono); color: var(--lp-amber-2);
  border: 1px solid color-mix(in srgb, var(--lp-amber) 45%, transparent);
}
.gd .gd-body .gd-scenes { counter-reset: gd-step; }
.gd .gd-body .gd-scenes li { counter-increment: gd-step; }
.gd .gd-body .gd-list li::before {
  content: ""; position: absolute; left: .45em; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-amber);
}
.gd .gd-body .gd-prompts li {
  padding: .7em 1em .7em 2.6em; border: 1px solid var(--lp-line); border-radius: 14px;
  background: linear-gradient(180deg, var(--lp-ink-2), var(--lp-ink-1)); font-style: italic; color: var(--lp-text);
}
.gd .gd-body .gd-prompts li::before {
  content: "\201C"; position: absolute; left: .55em; top: .1em; font: 400 2.1rem/1 var(--lp-serif); color: var(--lp-amber);
}
.gd-pull {
  margin: 2em 0; padding: 30px 0; border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line);
  text-align: center; font: italic 400 clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem)/1.3 var(--lp-serif); color: var(--lp-amber-2); text-wrap: balance;
}
.gd .gd-body p.gd-note,
.gd .gd-note {
  margin: 2.4em 0 0; padding: 14px 18px; border-left: 2px solid color-mix(in srgb, var(--lp-amber) 55%, transparent);
  background: color-mix(in srgb, var(--lp-amber) 7%, transparent); border-radius: 0 12px 12px 0;
  font: 400 .98rem/1.6 var(--lp-sans); color: var(--lp-text-2);
}
.gd .gd-note--page { max-width: 760px; margin: 28px auto 0; }

/* ---- the next step ----------------------------------------------------------- */
.gd-next { margin-top: clamp(56px, 7vw, 88px); }
.gd-next__card {
  max-width: 760px; margin: 0 auto; padding: clamp(28px, 4vw, 44px); text-align: center;
  border: 1px solid color-mix(in srgb, var(--lp-amber) 32%, transparent); border-radius: 26px;
  background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--lp-amber) 12%, transparent), transparent 70%), var(--lp-ink-1);
}
.gd .gd-next__lead { margin: 0 0 10px; font: 500 .74rem/1.4 var(--lp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-amber-2); }
.gd .gd-next__q { max-width: 32ch; margin: 0 auto 24px; font: italic 400 clamp(1.35rem, 1.15rem + .9vw, 1.85rem)/1.38 var(--lp-serif); color: var(--lp-text); text-wrap: balance; }
.gd .gd-next__fine { margin: 18px 0 0; font-size: .9rem; color: var(--lp-muted); }

/* ---- cards ------------------------------------------------------------------- */
.gd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gd-cards--index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-cards--one { grid-template-columns: minmax(0, 560px); justify-content: center; }
.gd-index { margin-top: clamp(48px, 6vw, 80px); }
.gd .gd-card {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; text-decoration: none;
  border: 1px solid var(--lp-line); border-radius: 22px; background: linear-gradient(180deg, var(--lp-ink-2), var(--lp-ink-1));
  transition: border-color .2s ease, transform .2s ease;
}
.gd .gd-card:hover { border-color: color-mix(in srgb, var(--lp-amber) 50%, transparent); transform: translateY(-2px); }
.gd .gd-card:focus-visible { outline: 3px solid var(--lp-amber); outline-offset: 3px; }
.gd-card__kicker { font: 500 .7rem/1.4 var(--lp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-amber-2); }
.gd-card__title { font: 400 1.32rem/1.28 var(--lp-serif); color: var(--lp-text); text-wrap: balance; }
.gd-card__text { font-size: .97rem; line-height: 1.6; color: var(--lp-text-2); }
.gd-card__meta { margin-top: auto; padding-top: 6px; font: 500 .7rem/1.4 var(--lp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); }
.gd .gd-card--quiet { background: transparent; }
.gd .gd-more .hm-head { margin-bottom: 34px; }
/* Two related guides sit in the middle rather than in two of three columns. */
.gd-more .gd-cards:not(.gd-cards--one) { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; }
/* A page that ends on cards (not on the closing band) keeps its distance from the footer. */
.gd > .gd-more:last-child { margin-bottom: clamp(80px, 10vw, 140px); }

/* ---- a page of questions ----------------------------------------------------- */
.gd-how { max-width: 760px; margin: clamp(44px, 6vw, 72px) auto 0; }
.gd .gd-how__h, .gd .gd-group__h { margin: 0 0 16px; font: 500 .74rem/1.4 var(--lp-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lp-muted); }
.gd .gd-how__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; counter-reset: gd-how; }
.gd .gd-how__list li { position: relative; padding-left: 1.9em; counter-increment: gd-how; font-size: .98rem; line-height: 1.55; color: var(--lp-text-2); }
.gd .gd-how__list li::before { content: counter(gd-how); position: absolute; left: 0; top: .05em; font: 600 .8rem/1.6 var(--lp-mono); color: var(--lp-amber-2); }
.gd-group { max-width: 760px; margin: clamp(40px, 5vw, 60px) auto 0; }
.gd .gd-qs { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gd .gd-q {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px;
  padding: 18px 20px; border: 1px solid var(--lp-line); border-radius: 18px; background: linear-gradient(180deg, var(--lp-ink-2), var(--lp-ink-1));
}
.gd .gd-q:not(:has(.gd-q__n)) { grid-template-columns: minmax(0, 1fr) auto; }
.gd .gd-q__n { min-width: 2.2em; font: 600 .74rem/1.3 var(--lp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-amber-2); }
.gd .gd-qs--days .gd-q__n { min-width: 3.6em; }
.gd .gd-q__body p { margin: 0; }
.gd .gd-q__title { margin-bottom: 4px !important; font: 600 .82rem/1.4 var(--lp-sans); color: var(--lp-text); }
.gd .gd-q__text { font: 400 1.08rem/1.55 var(--lp-serif); color: var(--lp-text); }
.gd .gd-q__go {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font: 600 .84rem/1 var(--lp-sans); color: var(--lp-amber-2); border: 1px solid color-mix(in srgb, var(--lp-amber) 40%, transparent);
}
.gd .gd-q__go .icon { width: 15px; height: 15px; }
.gd .gd-q__go:hover { background: color-mix(in srgb, var(--lp-amber) 12%, transparent); }
.gd .gd-q__go:focus-visible { outline: 3px solid var(--lp-amber); outline-offset: 2px; }
.gd .gd-group__more { margin: 14px 0 0; font-size: .95rem; }
.gd .gd-group__more a { color: var(--lp-amber-2); }

@media (max-width: 860px) {
  .gd-cards { grid-template-columns: minmax(0, 1fr); }
  .gd-cards--index { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .gd .gd-how__list { grid-template-columns: minmax(0, 1fr); }
  .gd .gd-q, .gd .gd-q:not(:has(.gd-q__n)) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gd .gd-q__go { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .gd .gd-card { transition: none; }
  .gd .gd-card:hover { transform: none; }
}