/* 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); }

/* ---------- colour: each section of a guide takes the next occasion colour (launch, winter, spring, summer, gold) ---------- */
.guides-site main { --sc: var(--launch); --scd: var(--launch); --scf: #fff; --sct: rgba(179, 38, 58, .09); }
.guides-site main > section:nth-of-type(5n+2) { --sc: var(--winter); --scd: var(--winter); --scf: #fff; --sct: rgba(62, 92, 138, .1); }
.guides-site main > section:nth-of-type(5n+3) { --sc: var(--spring); --scd: var(--spring); --scf: #fff; --sct: rgba(79, 138, 91, .11); }
.guides-site main > section:nth-of-type(5n+4) { --sc: var(--summer); --scd: var(--summer); --scf: #fff; --sct: rgba(211, 90, 42, .1); }
.guides-site main > section:nth-of-type(5n) { --sc: #FFC83D; --scd: #B87700; --scf: var(--ink); --sct: rgba(255, 200, 61, .2); }

.guides-site .section-pill { background: var(--sc); color: var(--scf); }
.guides-site .section-heading::before { background: var(--sc); }
.guides-site .prompt-num { background: var(--scd); -webkit-background-clip: text; background-clip: text; }
.guides-site .prompt-head { background: var(--sct); color: var(--ink); }
.guides-site .prompt-body { border-left: 3px solid var(--sc); }
.guides-site .copy-btn:hover { border-color: var(--scd); color: var(--scd); }
.guides-site .copy-btn.is-copied { background: var(--scd); color: #fff; }

/* guide header: rainbow rule, a coloured dot on each tag, a coloured first meta chip */
.guides-site .accent-bar { width: 96px; background: linear-gradient(90deg, var(--launch) 0 20%, var(--winter) 20% 40%, var(--spring) 40% 60%, var(--summer) 60% 80%, #FFC83D 80%); }
.guides-site .article-head .guide-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--launch); vertical-align: 1px; }
.guides-site .article-head .guide-tag:nth-child(2)::before { background: var(--winter); }
.guides-site .article-head .guide-tag:nth-child(3)::before { background: var(--spring); }
.guides-site .article-head .guide-tag:nth-child(4)::before { background: var(--summer); }
.guides-site .article-head .guide-tag[data-cat]::before { background: var(--cat); }
.guides-site .meta-chip:nth-child(1) { border-color: var(--launch); }
.guides-site .meta-chip:nth-child(2) { border-color: var(--winter); }
.guides-site .meta-chip:nth-child(3) { border-color: var(--spring); }
.guides-site .meta-chip:nth-child(4) { border-color: var(--summer); }

/* roadmap guide */
.guides-site .aj-step::before { background: var(--sc); }
.guides-site .aj-meta span { background: var(--sct); }
.guides-site .aj-output { background: var(--sct); border-left: 4px solid var(--sc); border-radius: 4px 12px 12px 4px; }
.guides-site .aj-quote { border-left-color: var(--sc); }
.guides-site .aj-grid3 div:nth-child(1) { border-top: 4px solid var(--launch); }
.guides-site .aj-grid3 div:nth-child(2) { border-top: 4px solid var(--winter); }
.guides-site .aj-grid3 div:nth-child(3) { border-top: 4px solid var(--spring); }
.guides-site .aj-callout { background: rgba(255, 200, 61, .22); border-left: 4px solid #FFC83D; border-radius: 4px 12px 12px 4px; }
.guides-site .aj-chips span:nth-child(5n+1) { background: rgba(179, 38, 58, .09); }
.guides-site .aj-chips span:nth-child(5n+2) { background: rgba(62, 92, 138, .1); }
.guides-site .aj-chips span:nth-child(5n+3) { background: rgba(79, 138, 91, .11); }
.guides-site .aj-chips span:nth-child(5n+4) { background: rgba(211, 90, 42, .1); }
.guides-site .aj-chips span:nth-child(5n) { background: rgba(255, 200, 61, .25); }

/* AIApply banner at the top of the roadmap */
.aj-apply { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; max-width: 720px; padding: 16px 20px; border-radius: 20px; border: 1.5px solid var(--border); border-left: 5px solid #FFC83D; background: #fff; box-shadow: 0 10px 24px -18px rgba(10, 10, 11, .35); }
.aj-apply p { font-size: 0.9rem; line-height: 1.5; color: var(--muted-strong); }
.aj-apply p b { display: block; margin-bottom: 2px; font-size: 0.98rem; font-weight: 800; color: var(--ink); }
.aj-apply a { flex: none; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font-size: 0.85rem; font-weight: 700; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.aj-apply a:hover, .aj-apply a:focus-visible { background: #fff; border-color: #B87700; color: #B87700; transform: translateY(-2px); }
@media (max-width: 760px) { .aj-apply { flex-direction: column; align-items: flex-start; } }

/* long prompts start folded (assets/prompt-fold.js) */
.guides-site .pf-fold { max-height: 150px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.guides-site .pf-toggle { display: inline-block; margin-top: 10px; padding: 7px 15px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.guides-site .pf-toggle:hover { border-color: var(--scd, var(--ink)); color: var(--scd, var(--ink)); transform: translateY(-2px); }
.guides-site .ig-step::before, .guides-site .hm-prompt::before, .guides-site .cc-prompt::before { background: var(--sc); }