/* Guides hub + guide pages: matches the redesigned homepage (scale + dark nav). Loaded after style.css; scoped to body.guides-site. */
.guides-site { zoom: 0.89; }
.guides-site main { zoom: 1.2; } /* page content 20% larger than the nav/footer, which stay identical to the homepage */

/* line the logo and newsletter button up with the page content edges (content is 1.2x, so its width and side padding are too) */
@media (min-width: 761px) {
  .guides-site .nav-inner { max-width: 1296px; padding-left: 38px; padding-right: 38px; }
}

/* hub subtitle: same on-screen size as the homepage subtitle (21px / 18px on phones); /1.2 cancels the content zoom */
.guides-site .guides-intro { font-size: 17.5px; line-height: 1.55; }
@media (max-width: 760px) { .guides-site .guides-intro { font-size: 15px; } }

/* phone menu: dark like the homepage (the base styles make the bar white, which hid the white logo) */
@media (max-width: 760px) {
  .guides-site .nav.has-menu, .guides-site .nav.has-menu .nav-inner { background: var(--ink); }
  .guides-site .nav.has-menu .nav-toggle span { background: #fff; }
  .guides-site .nav.has-menu .nav-right { background: var(--ink); border-bottom-color: rgba(255, 255, 255, .1); box-shadow: 0 22px 34px -22px rgba(0, 0, 0, .6); }
  .guides-site .nav.has-menu .nav-right .nav-link { color: #fff; }
  .guides-site .nav.has-menu .nav-right .nav-link .nav-ico { color: rgba(255, 255, 255, .72); }
  .guides-site .nav.has-menu .nav-right .nav-link:hover, .guides-site .nav.has-menu .nav-right .nav-link.is-active { background: rgba(255, 255, 255, .1); color: #fff; }
}

/* nav: same dark bar and gradient text logo as the homepage */
.guides-site .nav { background: rgba(10, 10, 11, .93); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (prefers-reduced-transparency: reduce) { .guides-site .nav { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .guides-site .nav { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: #fff; } }
.guides-site .nav .nav-link { color: rgba(255, 255, 255, .72); }
.guides-site .nav .nav-link:hover, .guides-site .nav .nav-link.is-active { color: #fff; }
.guides-site .nav .nav-links .nav-link.is-active::after { background: #fff; }
.guides-site .nav .btn-work-with-me { background: #fff; color: var(--ink); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); }
.guides-site .nav :focus-visible { outline-color: #fff; }
.guides-site .h-logo { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.guides-site .h-logo .accent-text { display: inline-block; padding-bottom: .22em; margin-bottom: -.22em; } /* room for the g descender */
@media (max-width: 760px) {
  .guides-site .nav.has-menu .nav-right .nav-link-ext { border-top-color: rgba(255, 255, 255, .12); }
  .guides-site .nav.has-menu .nav-right .nav-link-ext::after { color: rgba(255, 255, 255, .5); }
}

/* "Back to all guides" link at the bottom of every guide */
.guide-back-foot { margin-top: 40px; }
.guide-back-foot a { color: var(--ink); font-weight: 700; }
.guide-back-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* reading progress line under the nav (guide pages) */
.read-progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 5px; pointer-events: none; z-index: 1; }
.read-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: #fff; }
.read-progress b { position: absolute; top: 50%; left: 0; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(10, 10, 11, .2); }