/* Visual guides (plan 073): the guide page and the /guides index.
   Ported from .claude/skills/visual-guide/preview.css, which stays the reference design for the local
   preview. The site's layout supplies the header, footer and fonts (Outfit, Nunito Sans). Everything is
   scoped under .guide-page / .guides-index, and the rules re-state what Bulma's reset strips (margins,
   list bullets, heading sizes) because the guide body is plain rendered Markdown, not Bulma markup.
   The rest of the site is dark (body.bulma-page is #0a0a0a), but the guides are long reads, so their
   content sits on a full-width white reading surface (.guide-surface) with the reference design's light
   palette (Michael, Oct 2026). The site's navbar and footer stay dark around it. */

/* The full-width white band between the navbar and the footer. The text columns inside stay narrow. */
.guide-surface {
    /* flow-root keeps a first child's top margin (the admin preview banner) inside the white band;
       without it the margin collapses through and the dark page shows as a gap under the navbar. */
    display: flow-root;
    background: #fff;
    color: #1a1d21;
}

/* site.css colors every p and blockquote #ccc for the dark site; on the white surface they inherit the
   ink instead. The guide's own classed paragraphs (byline, TL;DR, pull-quote credit) still win. */
.guide-surface p,
.guide-surface blockquote,
.guide-surface li {
    color: inherit;
}

.guide-page,
.guides-index {
    --guide-ink: #1a1d21;
    --guide-muted: #5b6370;
    --guide-panel: #f6f7f9;
    --guide-rule: #e3e6ea;
    --guide-navy: #286090;
    --guide-quote-rule: hsl(52, 84%, 52%);
    --guide-code-bg: hsl(214, 20%, 93%);
    --guide-listen: #15803d;
    --guide-listen-hover: #166534;
    --guide-heading-font: 'Outfit', sans-serif;
    --guide-mono-font: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

    color: var(--guide-ink);
    font: 400 1.125rem/1.65 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* region The guide page */

.guide-page {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 5rem;
}

.guide-preview-banner {
    max-width: 48rem;
    margin: 1.5rem auto 0;
    padding: .75rem 1.25rem;
    border-radius: 8px;
    background: hsl(45, 100%, 90%);
    color: #5c4400;
    font-size: 1rem;
}

.guide-page h1,
.guide-page h2 {
    font-family: var(--guide-heading-font);
    letter-spacing: -0.01em;
    color: var(--guide-ink);
}

.guide-page h1 {
    font-size: clamp(1.875rem, 4.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 2rem 0 1.5rem;
}

.guide-page h2 {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.guide-page h3 {
    font-family: var(--guide-heading-font);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2rem 0 .75rem;
}

.guide-page p,
.guide-page ul,
.guide-page ol,
.guide-page pre {
    margin: 0 0 1.25rem;
}

.guide-page .guide-body ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.guide-page .guide-body ol {
    list-style: decimal;
    padding-left: 1.5rem;
}

.guide-page li + li {
    margin-top: .5rem;
}

.guide-page strong {
    color: inherit;
}

.guide-page a {
    color: var(--guide-navy);
    text-underline-offset: 3px;
}

.guide-page .guide-body a {
    text-decoration: underline;
}

.guide-section {
    margin-top: 3.5rem;
}

.guide-page figure {
    margin: 0 0 2rem;
}

/* Images are wider than the 48rem text column: 54rem for sections, 64rem for the hero. */
.guide-section figure {
    width: min(100vw - 2rem, 54rem);
    margin: 0 0 2rem 50%;
    transform: translateX(-50%);
}

.guide-hero figure {
    width: min(100vw - 2rem, 64rem);
    margin: 0 0 2rem 50%;
    transform: translateX(-50%);
}

.guide-page figure a {
    display: block;
}

.guide-page figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #11151a;
    box-shadow: 0 1px 3px hsl(0 0% 0% / .12), 0 10px 30px hsl(0 0% 0% / .10);
}

.guide-page code,
.guide-page pre {
    font-family: var(--guide-mono-font);
}

.guide-page code {
    font-size: .875em;
    color: inherit;
    background: var(--guide-code-bg);
    padding: .125em .375em;
    border-radius: 4px;
}

.guide-page pre {
    background: #11151a;
    color: #e6e8eb;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: .9rem;
    line-height: 1.5;
}

.guide-page pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Pull quotes: upright Outfit with a yellow rule; the second paragraph is the attribution. */
.guide-page blockquote {
    margin: 2.5rem 0;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid var(--guide-quote-rule);
    background: var(--guide-panel);
    border-radius: 0 8px 8px 0;
}

.guide-page blockquote p {
    margin: 0;
    font: 500 1.375rem/1.45 var(--guide-heading-font);
    letter-spacing: -0.005em;
}

.guide-page blockquote p + p {
    margin-top: .75rem;
    font: 700 .9375rem/1.4 'Nunito Sans', sans-serif;
    letter-spacing: 0;
    color: var(--guide-muted);
}

.guide-page blockquote p + p::before {
    content: "\2014\00a0";
}

.guide-resources {
    margin-top: 2rem;
    font-size: 1rem;
}

.guide-page .guide-resources p {
    margin: 0 0 .375rem;
    font: 600 .75rem/1.2 var(--guide-heading-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--guide-muted);
}

.guide-page .guide-resources ul {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.guide-page .guide-resources li + li {
    margin-top: .25rem;
}

.guide-page .guide-listen {
    margin: 2rem 0 0;
}

.guide-page .guide-listen a {
    display: inline-block;
    padding: .625rem 1.25rem;
    border-radius: 999px;
    background: var(--guide-listen);
    color: #fff;
    font: 600 1rem/1.2 var(--guide-heading-font);
    text-decoration: none;
}

.guide-page .guide-listen a:hover {
    background: var(--guide-listen-hover);
}

.guide-page .guide-tldr {
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 0 2rem;
    padding: .125rem 0 .125rem 1.25rem;
    border-left: 4px solid var(--guide-navy);
}

.guide-page .guide-tldr strong,
.guide-page .guide-tldr code {
    font-style: normal;
}

/* site.css gives every strong a light colour and lighter weight for the dark site */
.guide-surface strong {
    color: inherit;
    font-weight: 700;
}

.guide-page .guide-byline {
    margin: -0.5rem 0 1.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--guide-muted);
}

.guide-page .guide-byline a {
    color: var(--guide-ink);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--guide-rule);
}

.guide-page .guide-byline a:hover {
    border-bottom-color: var(--guide-navy);
}


/* "Guides > Episode N" above the hero: where you are, and the way back to the list. It breaks out of
   the text column exactly like .guide-hero figure (same width, centered), so it lines up with the image. */
.guide-page .guide-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    width: min(100vw - 2rem, 64rem);
    margin: 0 0 1.25rem 50%;
    transform: translateX(-50%);
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--guide-muted);
}

.guide-page .guide-breadcrumb a {
    color: var(--guide-navy);
    font-weight: 700;
    text-decoration: none;
}

.guide-page .guide-breadcrumb a:hover {
    text-decoration: underline;
}

/* "More visual guides" at the end, above the signup box: the neighbouring episodes and the full list. */
.guide-page .guide-more {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--guide-rule);
}

.guide-page .guide-more h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.guide-page .guide-more ul {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.guide-page .guide-more li {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    margin: 0 0 .625rem;
}

.guide-page .guide-more .guide-more-label {
    flex: 0 0 3.5rem;
    font: 600 .75rem/1.2 var(--guide-heading-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--guide-muted);
}

.guide-page .guide-more li a {
    color: var(--guide-ink);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--guide-rule);
}

.guide-page .guide-more li a:hover {
    border-bottom-color: var(--guide-navy);
}

.guide-page .guide-more a.guide-more-all {
    font: 600 1rem/1.2 var(--guide-heading-font);
    color: var(--guide-navy);
    text-decoration: none;
}

.guide-page .guide-more a.guide-more-all:hover {
    text-decoration: underline;
}

/* With the "More visual guides" block above it, the signup box needs less of a gap. */
.guide-page .guide-more + .guide-signup {
    margin-top: 2.5rem;
}

.guide-signup {
    margin-top: 4rem;
    padding: 2rem;
    /* Square, like the index strip: a radius curls the thick top rule at both ends */
    border-radius: 0;
    background: var(--guide-panel);
    border-top: 4px solid var(--guide-navy);
}

.guide-page .guide-signup h2 {
    margin: 0 0 .75rem;
}

.guide-page .guide-signup a.guide-signup-button {
    display: inline-block;
    padding: .625rem 1.25rem;
    border-radius: 999px;
    background: var(--guide-navy);
    color: #fff;
    font: 600 1rem/1.2 var(--guide-heading-font);
    text-decoration: none;
}

.guide-page .guide-signup a.guide-signup-button:hover {
    filter: brightness(1.1);
}

@media (max-width: 48rem) {
    .guide-page blockquote {
        padding: 1.25rem;
    }

    .guide-page blockquote p {
        font-size: 1.1875rem;
    }
}

/* endregion */

/* region The /guides index */

/* The guide pages hide the site banner (#global-sponsor-message, hide_site_banner in the viewmodels),
   so this is the real space between the navbar and the H1. */
.guides-index {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 6rem;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.guides-index h1,
.guides-index h2 {
    font-family: var(--guide-heading-font);
    letter-spacing: -0.01em;
    color: var(--guide-ink);
}

.guides-index h1 {
    font-size: clamp(1.875rem, 4.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1rem;
}

.guides-index .guides-lede {
    max-width: 38rem;
    margin: 0 0 3rem;
    color: var(--guide-muted);
    font-size: 1.125rem;
}

.guides-index a {
    color: var(--guide-navy);
    text-underline-offset: 3px;
}

/* Signup box: the guide page's .guide-signup panel (navy top rule), restated for the index. With no
   guides it is the empty state, directly under the lede; the lede's 3rem margin collapses into this one. */
.guides-index .guide-signup {
    margin-top: 3rem;
    padding: 2rem 2rem 2.25rem;
}

.guides-index .guide-signup h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 .75rem;
}

.guides-index .guide-signup p {
    max-width: 38rem;
    margin: 0;
    color: var(--guide-muted);
}

/* The slim signup strip above the list: one line of pitch, the button on the right. It wraps to two
   lines on narrow screens. */
.guides-index .guides-signup-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: -1rem 0 2.5rem;
    padding: 1rem 1.25rem;
    /* Square corners: a radius bends the thick left rule into a curved sliver at each end */
    border-radius: 0;
    background: #eceef2;
    border-left: 4px solid var(--guide-navy);
}

.guides-index .guides-signup-strip p {
    flex: 1 1 22rem;
    margin: 0;
    color: var(--guide-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.guides-index .guides-signup-strip strong {
    color: var(--guide-ink);
}

.guides-index .guides-signup-strip a.guides-signup-button {
    flex: 0 0 auto;
    padding: .5rem 1.1rem;
    font-size: .9375rem;
}

.guides-index .guides-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.guides-index a.guides-signup-button {
    display: inline-block;
    padding: .625rem 1.25rem;
    border-radius: 999px;
    background: var(--guide-navy);
    color: #fff;
    font: 600 1rem/1.2 var(--guide-heading-font);
    text-decoration: none;
}

.guides-index a.guides-signup-button:hover {
    filter: brightness(1.1);
}

.guides-index a.guides-secondary {
    font: 600 1rem/1.2 var(--guide-heading-font);
    color: var(--guide-ink);
    text-decoration: none;
}

.guides-index a.guides-secondary:hover {
    color: var(--guide-navy);
}

/* Paging on the light reading surface. */
.guides-index .pagination .pagination-link,
.guides-index .pagination .pagination-previous,
.guides-index .pagination .pagination-next {
    background-color: #fff;
    border-color: var(--guide-rule);
    color: var(--guide-ink);
}

.guides-index .pagination a.pagination-previous:hover,
.guides-index .pagination a.pagination-next:hover {
    border-color: var(--guide-navy);
    color: var(--guide-navy);
}

.guides-index .pagination .pagination-link.is-current {
    background-color: var(--guide-navy);
    border-color: var(--guide-navy);
    color: #fff;
}

.guides-index .pagination .is-disabled {
    background-color: var(--guide-panel);
    border-color: var(--guide-rule);
    color: #8a919c;
}

/* The <li> is a block box with this page's 1.6 line-height, which leaves a line-box gap under the
   inline-flex "Page N of M" and lifts it above the Previous/Next buttons. A flex <li> has no line box. */
.guides-index .pagination-list li {
    display: flex;
}

.guides-card {
    padding: 2.25rem 0;
    border-top: 1px solid var(--guide-rule);
}

.guides-card:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.guides-card .guides-row {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

.guides-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background: #11151a;
    box-shadow: 0 1px 3px hsl(0 0% 0% / .12), 0 6px 18px hsl(0 0% 0% / .08);
}

.guides-index .guides-card h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 .5rem;
}

.guides-index .guides-card h2 a {
    color: var(--guide-ink);
    text-decoration: none;
}

.guides-index .guides-card h2 a:hover {
    color: var(--guide-navy);
}

.guides-index .guides-meta {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    color: var(--guide-muted);
}

.guides-index .guides-tldr {
    margin: -.3rem 0 1rem;
    font-size: 1.125rem;
}

.guides-index .guides-tldr code {
    font-family: var(--guide-mono-font);
    font-size: .875em;
    color: inherit;
    background: var(--guide-code-bg);
    padding: .1em .35em;
    border-radius: 4px;
}

.guides-index .guides-read {
    font: 600 1.0625rem/1.2 var(--guide-heading-font);
    color: var(--guide-navy);
    text-decoration: none;
}

.guides-index .guides-read:hover {
    text-decoration: underline;
}

@media (max-width: 44rem) {
    .guides-index {
        padding-top: 2rem;
    }

    .guides-card .guides-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .guides-index .guide-signup {
        padding: 1.5rem 1.25rem 1.75rem;
    }
}

/* endregion */