/* How-to section - docs layout (left TOC sidebar + reading pane) and segmented
   top nav. Layered on top of blog.css (page frame, footer, base tokens). */

html { scroll-behavior: smooth; }
/* blog.css sets overflow-x:hidden on html/body, which forces overflow-y:auto and
   creates a scroll container that breaks position:sticky and anchor scrolling.
   overflow-x:clip prevents horizontal overflow without a scroll container. */
html, body { overflow-x: clip; }

/* ---------- top nav: brand left, segmented chapter pill centered, CTA right ---------- */
.howto-topbar .brand {
  position: static;
  left: auto;
  top: auto;
  transform: none;
}

.howto-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  padding: 5px 6px;
  border-radius: 15px;
  background: rgba(24, 34, 40, 0.05);
  border: 1px solid rgba(52, 52, 52, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.howto-nav-label {
  padding: 8px 14px;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.howto-nav > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  color: #3f3f3c;
  letter-spacing: -0.01em;
  transition: color 160ms ease, background 160ms ease;
}
.howto-nav-label + a::before,
.howto-nav > a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 14px;
  width: 1px;
  background: rgba(52, 52, 52, 0.14);
  transform: translateY(-50%);
}
.howto-nav > a:hover { color: #111; background: rgba(52, 52, 52, 0.05); }
.howto-nav > a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(#555, #333);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}
.howto-nav > a[aria-current="page"]::before,
.howto-nav > a[aria-current="page"] + a::before { opacity: 0; }

.nav-right > a.howto-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #272727;
  border-radius: 8px;
  background: linear-gradient(#555, #333);
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

@media (max-width: 900px) {
  .howto-nav { display: none; }
}

/* ---------- docs shell ---------- */
.howto-shell {
  width: min(100%, 1240px);
  margin: 0 auto;
  /* Bottom padding lives on .howto-main, not here: the sidebar's sticky range
     ends at the grid row's bottom edge, so padding on the shell would shorten
     that range and let the sidebar get pushed up behind the fixed topbar. */
  padding: 52px clamp(22px, 4vw, 56px) 0;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}

/* ---------- sidebar / table of contents ---------- */
.howto-side {
  position: sticky;
  top: 96px;
  align-self: start;
  /* 188px = 96px stick offset + footer height + breathing room, so the sidebar
     still fits on screen when the page is scrolled all the way to the bottom. */
  max-height: calc(100vh - 188px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.howto-side-intro {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}
.howto-side-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 36px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #272727;
  border-radius: 8px;
  background: linear-gradient(#555, #333);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease;
}
.howto-side-cta:hover { transform: translateY(-1px); }

.howto-toc { display: flex; flex-direction: column; gap: 28px; }
.howto-toc-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: #343434;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.howto-toc-head i {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.howto-toc-items {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.howto-toc-items a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  color: #6b6963;
  font-size: 14.5px;
  line-height: 1.35;
  transition: color 150ms ease;
}
.howto-toc-items a::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #cfccc4;
  background: transparent;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.howto-toc-items a:hover { color: #111; }
.howto-toc-items a.is-active { color: #1c1b19; font-weight: 500; }
.howto-toc-items a.is-active::before {
  border-color: #2f7de1;
  background: #2f7de1;
  box-shadow: 0 0 0 3px rgba(47, 125, 225, 0.16);
}

/* ---------- reading pane ---------- */
.howto-main { max-width: 720px; padding-bottom: 100px; }
.howto-main [id] { scroll-margin-top: 104px; }
.chapter-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: #6a6862;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.howto-main h1 {
  margin: 20px 0 0;
  color: #2b2b2b;
  font-size: clamp(25px, 2.4vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.howto-lede { margin: 20px 0 0; }
.howto-lede p {
  margin: 0 0 15px;
  color: #56544f;
  font-size: 15px;
  line-height: 1.6;
}
.howto-lede p:last-child { margin-bottom: 0; }

.howto-figure {
  margin: 36px 0 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #f0eee8;
  box-shadow: 1px 2px 3px rgba(255, 255, 255, 0.8), 2px 3px 5px rgba(152, 146, 140, 0.12) inset;
}
.howto-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.howto-section { margin-top: 40px; }
.howto-section h2 {
  margin: 0 0 12px;
  color: #2b2b2b;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.howto-section p {
  margin: 0 0 15px;
  color: #56544f;
  font-size: 15px;
  line-height: 1.6;
}
.howto-section strong { color: #3d3c3a; font-weight: 600; }
.howto-section ul {
  margin: 0 0 15px;
  padding-left: 20px;
}
.howto-section li { margin-bottom: 9px; color: #56544f; font-size: 15px; line-height: 1.55; }
.howto-section li::marker { color: #9a978f; }
.howto-section blockquote {
  margin: 22px 0;
  padding-left: 18px;
  border-left: 2px solid #cdc9c0;
  color: #3d3c3a;
  font-size: 16.5px;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

/* ---------- chapter pager ---------- */
.chapter-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 56px 0 0;
}
.chapter-pager a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card, #fbfbf8);
  transition: transform 180ms ease, border-color 180ms ease;
}
.chapter-pager a:hover { transform: translateY(-2px); border-color: rgba(52, 52, 52, 0.22); }
.chapter-pager a.is-next { text-align: right; }
.chapter-pager small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chapter-pager span { color: #343434; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.chapter-pager a.is-disabled { opacity: 0.45; pointer-events: none; }

@media (max-width: 940px) {
  .howto-shell { grid-template-columns: 1fr; gap: 0; }
  .howto-side { display: none; }
  .howto-main { max-width: 720px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .chapter-pager { grid-template-columns: 1fr; }
  .chapter-pager a.is-next { text-align: left; }
}

/* ---------- index landing ---------- */
.howto-hero { width: min(100%, 720px); margin: 0 auto; text-align: center; }
.howto-hero h1 {
  margin: 24px 0 0;
  color: #2b2b2b;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.howto-hero p { margin: 20px auto 0; max-width: 600px; color: #66645f; font-size: 18px; line-height: 1.55; }

.howto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 56px auto 0;
}
.howto-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card, #fbfbf8);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.howto-card:hover { transform: translateY(-3px); border-color: rgba(52, 52, 52, 0.22); box-shadow: 0 16px 34px rgba(52, 48, 40, 0.10); }
.howto-card-media { position: relative; aspect-ratio: 1672 / 941; overflow: hidden; background: #eceae4; }
.howto-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.howto-card-stage {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(20, 22, 24, 0.72);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.howto-card-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; }
.howto-card-body h2 { margin: 0; color: #343434; font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; }
.howto-card-body p { margin: 0; color: #66645f; font-size: 15px; line-height: 1.5; }
.howto-card-link { margin-top: 6px; color: #3d3c3a; font-size: 14px; font-weight: 500; }
.howto-card:hover .howto-card-link { color: #111; }

@media (max-width: 720px) {
  .howto-grid { grid-template-columns: 1fr; }
}