/* Blog section — shared by the /blog/ hub and every post, both languages.
   (Class names keep the .guide-* prefix; they are internal identifiers.)
   Loaded after site.css, which already supplies the tokens, header, footer,
   cta-banner, and the zh heading overrides (html[lang="zh-TW"] drops
   font-stretch and uppercasing). Nothing page-specific belongs in here. */

/* ---- Shared column ---- */

.guide-page,
.guides-hub {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 40px 88px;
}

.guides-hub { max-width: 960px; }

/* ---- Breadcrumb ---- */

.guide-crumb {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--g4);
  margin-bottom: 28px;
}
.guide-crumb a { color: var(--g4); text-decoration: none; border-bottom: 1px solid var(--g3); }
.guide-crumb a:hover { color: var(--black); border-bottom-color: var(--black); }
.guide-crumb span { margin: 0 8px; }

/* ---- Post head ---- */

.guide-head { margin-bottom: 36px; }

.guide-head h1 {
  font-family: var(--font-h);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.guide-dek {
  font-size: 17px;
  line-height: 1.6;
  color: var(--g5);
}

.guide-meta {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--g4);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--g2);
}
.guide-meta span { margin-right: 14px; }

/* ---- Video embed ---- */

.guide-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 36px 0;
  background: var(--g1);
  border-radius: 4px;
  overflow: hidden;
}
.guide-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.guide-video-note {
  font-size: 12px;
  color: var(--g4);
  margin-top: -24px;
  margin-bottom: 36px;
}

/* ---- Takeaway block ----
   Flat fill, no border and no shadow: the two together are a slop tell, and a
   bordered rounded box inside the article column reads as a nested card. */

.guide-tldr {
  background: var(--g1);
  padding: 28px 28px 30px;
  border-radius: 4px;
  margin-bottom: 44px;
}
.guide-tldr h2 {
  font-family: var(--font-m);
  font-size: 11px;
  font-stretch: normal;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--g4);
  margin-bottom: 14px;
}
.guide-tldr ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.guide-tldr li {
  font-size: 15px;
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}
.guide-tldr li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--g4);
}

/* ---- Body ---- */

.guide-body { font-size: 16px; line-height: 1.75; }

.guide-body h2 {
  font-family: var(--font-h);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 52px 0 16px;
}
.guide-body h3 {
  font-family: var(--font-h);
  font-size: 1rem;
  font-weight: 700;
  margin: 32px 0 10px;
}
.guide-body p { color: var(--g5); margin-bottom: 18px; }
.guide-body strong { color: var(--black); font-weight: 500; }

.guide-body ul, .guide-body ol { margin: 0 0 20px 20px; color: var(--g5); }
.guide-body li { margin-bottom: 9px; line-height: 1.7; }

.guide-body a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--g3);
  transition: text-decoration-color 0.15s;
}
.guide-body a:hover { text-decoration-color: var(--black); }

.guide-body blockquote {
  border-left: 2px solid var(--g3);
  padding-left: 20px;
  margin: 28px 0;
  color: var(--black);
  font-size: 17px;
  line-height: 1.6;
}

.guide-rule { border: 0; border-top: 1px solid var(--g2); margin: 52px 0; }

/* ---- Chapter deep-links ---- */

.guide-chapters { margin: 12px 0 20px; }
.guide-chapters a {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--g4);
  text-decoration: none;
  border-bottom: 1px solid var(--g2);
}
.guide-chapters a:hover { color: var(--black); border-bottom-color: var(--black); }

/* ---- Spoke / related links ---- */

.guide-links { margin: 44px 0 0; display: flex; flex-direction: column; gap: 2px; }
.guide-links-label {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g4);
  margin-bottom: 14px;
}
.guide-link-row {
  display: block;
  padding: 16px 0;
  border-top: 1px solid var(--g2);
  text-decoration: none;
  color: inherit;
}
.guide-links .guide-link-row:last-child { border-bottom: 1px solid var(--g2); }
.guide-link-row-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.guide-link-row:hover .guide-link-row-title { text-decoration: underline; text-underline-offset: 3px; }
.guide-link-row-desc { font-size: 13px; color: var(--g4); line-height: 1.55; }

/* ---- Hub ---- */

.guides-hub-head { margin-bottom: 52px; }
.guides-hub-head h1 {
  font-family: var(--font-h);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.guides-hub-sub { font-size: 15px; line-height: 1.6; color: var(--g5); max-width: 480px; }

.guide-section { margin-bottom: 52px; }
.guide-section h2 {
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--g2);
}

.guide-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--g2);
  text-decoration: none;
  color: inherit;
}
/* Thumbnail = the post's share poster at 560px (thumb-<lang>.jpg). 1200:630 ratio. */
.guide-card-thumb {
  flex: 0 0 200px;
  width: 200px;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 4px;
  background: var(--g2);
}
.guide-card-body { flex: 1; min-width: 0; }
.guide-card-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}
.guide-card:hover .guide-card-title { text-decoration: underline; text-underline-offset: 3px; }
.guide-card-desc { font-size: 13px; color: var(--g5); line-height: 1.6; margin-bottom: 8px; }
.guide-card-date {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--g4);
}

/* ---- Mobile ---- */

@media (max-width: 640px) {
  .guide-page, .guides-hub { padding: 36px 20px 64px; }
  .guide-body { font-size: 15px; }
  .guide-tldr { padding: 22px 20px 24px; }
  .guide-body h2 { font-size: 1.2rem; margin-top: 40px; }
  .guide-card { flex-direction: column; gap: 14px; }
  .guide-card-thumb { flex-basis: auto; width: 100%; }
}

/* ---- Figures ----
   Explanatory diagrams, not charts: there is no magnitude to encode and no
   verified numbers to plot, so nothing here carries meaning through colour.
   Meaning is in position and labels, which is also why these need no
   colourblind pass. Every fill and stroke is a token, so dark mode is
   inherited from site.css rather than redeclared. */

.guide-fig {
  margin: 40px 0;
}
.guide-fig svg,
.guide-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--g1);
}
.guide-fig figcaption {
  font-size: 12px;
  line-height: 1.5;
  color: var(--g4);
  margin-top: 10px;
}

.fig-title  { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.1em; fill: var(--g4); text-transform: uppercase; }
.fig-label  { font-family: var(--font-b); font-size: 14px; fill: var(--black); }
.fig-sub    { font-family: var(--font-b); font-size: 12.5px; fill: var(--g5); }
.fig-strong { font-family: var(--font-h); font-size: 15px; font-weight: 700; fill: var(--black); }
.fig-mono   { font-family: var(--font-m); font-size: 12px; letter-spacing: 0.04em; fill: var(--g4); }
.fig-rule   { stroke: var(--g3); stroke-width: 1; }
.fig-rule-strong { stroke: var(--black); stroke-width: 1.5; }
.fig-box    { fill: none; stroke: var(--g3); stroke-width: 1; }
.fig-fill   { fill: var(--white); stroke: var(--g3); stroke-width: 1; }
.fig-ink    { fill: var(--black); }
.fig-arrow  { stroke: var(--g4); stroke-width: 1.5; fill: none; }

/* zh keeps the same figures: Archivo has no CJK cut, so the display class
   falls through to Noto Sans TC and drops the expanded/uppercase treatment. */
html[lang="zh-TW"] .fig-title { text-transform: none; letter-spacing: 0.04em; }

/* Share poster: the same argument as the video insert it came from, sized
   for a link preview and for someone saving it to send on. */
.guide-share img { border-radius: 4px; }

/* Affiliate disclosure inside a post. One per page, sitting with the link it
   discloses, per rules/design.md. Quiet but not hidden: it reads as a note,
   not as fine print you are meant to skip. */
.guide-body .affiliate-note {
  background: var(--g1);
  border-radius: 4px;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--g5);
  margin: 28px 0 20px;
}
.guide-body .affiliate-note strong { color: var(--black); font-weight: 500; }
.guide-body .affiliate-cta { margin: 0 0 8px; }

/* .guide-body a sets prose ink and an underline, which beat .btn-primary on
   specificity and rendered the button as dark text on a dark fill with the
   underline showing as a stray line. Restore the button's own treatment. */
.guide-body a.btn-primary {
  color: var(--white);
  text-decoration: none;
}
.guide-body a.btn-primary:hover { text-decoration: none; }