/* Feature guides. One article per URL, so each one can be shared on its own.
   Layout only -- every colour, button and heading style comes from launch.css,
   which these pages load first. Keep this file small: if a rule belongs to the
   whole site it belongs in launch.css instead. */

.fg-hero { padding: 132px 0 48px; }
.fg-hero .kicker { margin-bottom: 14px; }
.fg-hero h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.15; margin: 0 0 18px; max-width: 22ch; }
.fg-meta { font-size: 14px; opacity: .62; display: flex; gap: 14px; flex-wrap: wrap; }

.fg-body { max-width: 760px; }
.fg-body h2 { margin: 56px 0 14px; }
.fg-body h3 { margin: 34px 0 8px; font-size: 20px; }
.fg-body p { line-height: 1.75; margin: 0 0 18px; }
.fg-body ul { line-height: 1.75; padding-left: 20px; margin: 0 0 18px; }
.fg-body li { margin-bottom: 8px; }
.fg-body strong { font-weight: 650; }

/* The claim this page is built on. Pulled out so it reads as the argument
   rather than another paragraph. */
.fg-claim { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 40px; }
.fg-claim div { border: 1px solid rgba(0,0,0,.12); border-radius: 14px; padding: 20px 22px; }
.fg-claim b { display: block; font-size: 34px; line-height: 1.1; margin-bottom: 6px; }
.fg-claim span { display: block; font-size: 15px; opacity: .72; }
.fg-claim .is-strong { border-color: rgba(0,0,0,.28); background: rgba(0,0,0,.035); }

.fg-shot { margin: 34px 0 12px; }
.fg-shot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid rgba(0,0,0,.12); }
.fg-shot figcaption { font-size: 14px; opacity: .66; margin-top: 10px; line-height: 1.6; }

.fg-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 28px; }
.fg-card { border: 1px solid rgba(0,0,0,.12); border-radius: 16px; padding: 24px; text-decoration: none; color: inherit; display: block; }
.fg-card:hover { border-color: rgba(0,0,0,.34); }
.fg-card h3 { margin: 10px 0 8px; font-size: 21px; }
.fg-card p { margin: 0; line-height: 1.65; opacity: .78; font-size: 15px; }
.fg-card.is-soon { opacity: .5; pointer-events: none; }

.fg-next { border-top: 1px solid rgba(0,0,0,.12); margin-top: 56px; padding-top: 28px; }

@media (max-width: 640px) {
  .fg-hero { padding: 116px 0 36px; }
  .fg-claim { grid-template-columns: 1fr; }
}

/* CJK headings. Same rule as launch.css: negative tracking and tight leading
   are Latin habits — CJK glyphs already fill the em box, so copying them makes
   the characters collide. See the "CJK headings" section in launch.css. */
.fg-hero h1:is(:lang(zh), :lang(ja), :lang(ko)),
.fg-body h2:is(:lang(zh), :lang(ja), :lang(ko)),
.fg-body h3:is(:lang(zh), :lang(ja), :lang(ko)),
.fg-card h3:is(:lang(zh), :lang(ja), :lang(ko)) {
  letter-spacing: 0;
  line-height: 1.3;
}

.fg-hero h1:is(:lang(zh), :lang(ja), :lang(ko)) { max-width: 20ch; }
.fg-claim span:is(:lang(zh), :lang(ja), :lang(ko)) { line-height: 1.7; }

/* The version tag in the byline is a link to the download section — it is the
   one place on a guide page where a reader who is already sold can leave. */
.fg-version {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: 1;
}
.fg-meta .fg-version { opacity: .85; }
.fg-version:hover { opacity: 1; }

/* The "try it now" block. It appears twice on an article on purpose: once
   right after the argument lands, and once at the end. The practice runs in a
   browser, so a convinced reader is one click from doing it — making them
   scroll to the bottom to discover that is what the page got wrong first. */
.fg-try {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 30px 0 34px;
}
.fg-try span { font-size: 14px; opacity: .62; }

/* Anchored sections sit under the sticky header. Without this, every link into
   #local-katago and friends -- including the ones in the page's own JSON-LD
   ItemList -- lands with the heading hidden behind the black bar. 100px is the
   scrolled header height plus a little air. */
.fg-body [id],
.fg-hero[id],
section[id] {
  scroll-margin-top: 100px;
}

/* Section index. A ten-item list of links is the cheapest navigation there is
   and it is also what a search engine reads as the page's table of contents.
   Kept as inline pills rather than a bulleted list so it reads as a control
   strip, not as content. */
.fg-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 26px 0 8px;
  padding: 0;
  list-style: none;
}
.fg-toc li { margin: 0; }
.fg-toc a {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  opacity: .8;
}
.fg-toc a:hover { border-color: rgba(0, 0, 0, .4); opacity: 1; }