/* ============================================
   Badwater — CSS Custom Properties
   Warm Light Palette (Canyon-inspired)
   ============================================ */

:root {
    /* Warm light palette */
    --color-bg:           #F7F3EE;
    --color-bg-elevated:  #FFFFFF;
    --color-text:         #2A2520;
    --color-text-muted:   #8B7E6E;
    --color-sandstone:    #A89880;
    --color-terracotta:   #B84A28;
    --color-sienna:       #943D22;
    --color-slate:        #5A7D94;

    /* Borders and dividers */
    --color-border:       rgba(42, 37, 32, 0.08);
    --color-border-strong: rgba(42, 37, 32, 0.15);

    /* Connection map tiers */
    --color-direct:       var(--color-terracotta);
    --color-near:         rgba(139, 126, 110, 0.7);
    --color-distant:      rgba(139, 126, 110, 0.35);

    /* Typography — Ghost Brand editor injects heading/body fonts via ghost_head */
    --font-headline:      var(--gh-font-heading, Georgia, 'Times New Roman', serif);
    --font-body:          var(--gh-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

    /* Sizing */
    --content-width:      800px;
    --content-wide:       960px;
    --site-padding:       clamp(1.25rem, 4vw, 3rem);

    /* Transitions */
    --ease-out:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-base:    200ms var(--ease-out);
    --transition-slow:    500ms var(--ease-out);

    /* Shadows */
    --shadow-card:        0 1px 3px rgba(42, 37, 32, 0.06), 0 0 0 1px rgba(42, 37, 32, 0.04);
    --shadow-card-hover:  0 3px 8px rgba(42, 37, 32, 0.1), 0 0 0 1px rgba(42, 37, 32, 0.06);

    /* ---- Landing page compat (Scope variables mapped to Badwater) ---- */

    /* Colors */
    --color-background:       var(--color-bg);
    --color-background-300:   #EDE8E0;
    --color-background-400:   #E4DED4;
    --color-contrast:         var(--color-text);
    --color-secondary:        var(--color-text-muted);

    /* Containers */
    --container-small--width:  720px;
    --container-medium--width: 960px;
    --container-wide--width:   1200px;

    /* Typography */
    --font-h3:              1.25rem;
    --font-large:           1.125rem;
    --font-medium:          0.9375rem;
    --font-weight-regular:  400;
    --font-weight-medium:   450;
    --font-weight-semibold: 600;

    /* Spacing scale */
    --spacing-2:  0.5rem;
    --spacing-3:  0.75rem;
    --spacing-4:  1rem;
    --spacing-6:  1.5rem;
    --spacing-7:  1.75rem;
    --spacing-8:  2rem;
    --spacing-9:  2.5rem;
    --spacing-10: 3rem;

    /* Layout */
    --layout--gap:     2rem;
    --layout--padding: var(--site-padding);
    --vertical-rhythm: 1.5rem;
    --radius-1:        6px;
    --radius-2:        10px;

    /* Section defaults */
    --section--content--offset:             1.5rem;
    --section-featured--container-offset:   0px;
    --features-split--offset:               3rem;
    --landing--container-default--width:     var(--container-medium--width);

    /* Additional spacing + color tokens used by Scope components */
    --spacing-1:  0.25rem;
    --spacing-5:  1.25rem;
    --color-foreground:            var(--color-text-muted);
    --color-background-200:        #F2EDE6;
    --font-small:                  0.8125rem;
    --popup--overlay--color:       rgba(42, 37, 32, 0.3);

    color-scheme: light;
}

/* ============================================
   Dark Mode — Warm Canyon Night
   Applied when user selects Dark, or when
   system prefers dark and user is on System.
   ============================================ */

/* Explicit dark selection */
[data-color-scheme="dark"] {
    --color-bg:            #1A1714;
    --color-bg-elevated:   #242019;
    --color-text:          #E8E2D8;
    --color-text-muted:    #9E9486;
    --color-sandstone:     #B0A590;
    --color-terracotta:    #D4734E;
    --color-sienna:        #E08960;
    --color-slate:         #7BA3BD;

    --color-border:        rgba(232, 226, 216, 0.1);
    --color-border-strong: rgba(232, 226, 216, 0.18);

    --color-direct:        var(--color-terracotta);
    --color-near:          rgba(158, 148, 134, 0.7);
    --color-distant:       rgba(158, 148, 134, 0.35);

    --shadow-card:         0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-card-hover:   0 3px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);

    /* Landing page compat */
    --color-background:       var(--color-bg);
    --color-background-200:   #2A2520;
    --color-background-300:   #332E27;
    --color-background-400:   #3D362E;
    --color-contrast:         var(--color-text);
    --color-secondary:        var(--color-text-muted);
    --color-foreground:       var(--color-text-muted);
    --popup--overlay--color:  rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

/* System preference: dark */
@media (prefers-color-scheme: dark) {
    [data-color-scheme="system"] {
        --color-bg:            #1A1714;
        --color-bg-elevated:   #242019;
        --color-text:          #E8E2D8;
        --color-text-muted:    #9E9486;
        --color-sandstone:     #B0A590;
        --color-terracotta:    #D4734E;
        --color-sienna:        #E08960;
        --color-slate:         #7BA3BD;

        --color-border:        rgba(232, 226, 216, 0.1);
        --color-border-strong: rgba(232, 226, 216, 0.18);

        --color-direct:        var(--color-terracotta);
        --color-near:          rgba(158, 148, 134, 0.7);
        --color-distant:       rgba(158, 148, 134, 0.35);

        --shadow-card:         0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04);
        --shadow-card-hover:   0 3px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);

        --color-background:       var(--color-bg);
        --color-background-200:   #2A2520;
        --color-background-300:   #332E27;
        --color-background-400:   #3D362E;
        --color-contrast:         var(--color-text);
        --color-secondary:        var(--color-text-muted);
        --color-foreground:       var(--color-text-muted);
        --popup--overlay--color:  rgba(0, 0, 0, 0.5);

        color-scheme: dark;
    }
}

/* ============================================
   Base — Fonts, Reset, Typography
   ============================================ */

/* Fonts are handled by Ghost Brand editor via ghost_head */

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Headlines */
h1, h2, h3 {
    font-family: var(--font-headline);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    margin-top: 3rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

p {
    margin-bottom: 0.875rem;
}

/* Links */
a {
    color: var(--color-terracotta);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-sienna);
}

/* Content links within post bodies */
.post-content a {
    border-bottom: 1px solid rgba(184, 74, 40, 0.25);
    transition: color var(--transition-base), border-color var(--transition-base);
}

.post-content a:hover {
    border-bottom-color: var(--color-sienna);
}

/* Lists */
ul, ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

li {
    margin-bottom: 0.35rem;
}

/* Blockquotes */
blockquote {
    border-left: 3px solid var(--color-sandstone);
    padding-left: 1.25rem;
    margin: 2rem 0;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Horizontal rules */
hr {
    border: none;
    border-top: 1px solid var(--color-border-strong);
    margin: 3rem 0;
}

/* Selection */
::selection {
    background: rgba(184, 74, 40, 0.15);
    color: var(--color-text);
}

/* Focus visible for keyboard nav */
:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 3px;
}

/* Screen reader only — visually hidden but accessible */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip-to-content link — becomes visible on focus */
.skip-link:focus {
    position: fixed !important;
    top: 0.5rem;
    left: 0.5rem;
    width: auto !important;
    height: auto !important;
    padding: 0.75rem 1.25rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: var(--color-bg);
    color: var(--color-terracotta);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: var(--shadow-card-hover);
    z-index: 100000;
}

/* Disable transitions during color scheme switch */
.stop-transition,
.stop-transition *,
.stop-transition *::before,
.stop-transition *::after {
    transition-duration: 0s !important;
}

/* Images (rare, but handle gracefully) */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Code blocks if Ghost editor uses them */
code {
    font-size: 0.9em;
    background: var(--color-bg-elevated);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    color: var(--color-sandstone);
}

pre {
    background: var(--color-bg-elevated);
    padding: 1.25rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

pre code {
    background: none;
    padding: 0;
}
/* ============================================
   Layout — Header, Footer, Containers
   ============================================ */

/* Top-level wrapper */
.container {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Site header */
.site-header {
    padding: var(--site-padding);
    padding-bottom: 1rem;
}

.header-inner {
    max-width: var(--content-wide);
    margin: 0 auto;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Site logo (when uploaded in Ghost Admin) */
.site-logo {
    display: inline-flex;
    align-items: center;
}

.site-logo img {
    height: 3.4rem;
    width: auto;
    object-fit: contain;
}

.site-name {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.site-name:hover {
    color: var(--color-sandstone);
}

/* Header center variant (Ghost custom setting) */
.header-center .header-top {
    flex-direction: column;
    gap: 1rem;
}

.header-center .header-actions {
    width: 100%;
    justify-content: center;
}

/* Footer logo */
.footer-logo {
    display: inline-flex;
    align-items: center;
}

.footer-logo img {
    height: 1.95rem;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity var(--transition-base);
}

.footer-logo:hover img {
    opacity: 1;
}

.search-toggle {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.5rem;
    transition: color var(--transition-base);
}

.search-toggle:hover {
    color: var(--color-terracotta);
}

/* Breadcrumb */
.header-breadcrumb {
    margin-top: 0.5rem;
    min-height: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.breadcrumb-segment {
    opacity: 0;
    transform: translateY(4px);
    display: inline-block;
    animation: breadcrumb-arrive 400ms var(--ease-out) forwards;
}

.breadcrumb-segment a {
    color: var(--color-text-muted);
}

.breadcrumb-segment a:hover {
    color: var(--color-terracotta);
}

.breadcrumb-separator {
    display: inline-block;
    margin: 0 0.5rem;
    opacity: 0.4;
}

/* Main content */
.site-content {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--site-padding) 4rem;
}

/* Wide content variant (homepage, collections) */
.site-content--wide {
    max-width: var(--content-wide);
}

/* Footer */
.site-footer {
    padding: 4rem var(--site-padding) 3rem;
    border-top: 1px solid var(--color-border);
}

.footer-inner {
    max-width: var(--content-wide);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-name {
    font-family: var(--font-headline);
    font-size: 1rem;
    color: var(--color-text);
}

.footer-description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.footer-nav {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.footer-nav a {
    color: var(--color-text-muted);
}

.footer-nav a:hover {
    color: var(--color-terracotta);
}

.footer-separator {
    margin: 0 0.5rem;
    color: var(--color-border-strong);
}

/* Homepage layout */
.home-page {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding: 0 var(--site-padding) 4rem;
}

/* Body text wider than standard content-width (720px -> 1080px), desktop only */
.home-content-inner {
    max-width: 1080px;
    margin: 0 auto;
}

/* Pull the floating field closer to the body text above it */
.home-content + #floating-field-anchor {
    margin-top: -5rem;
}

.home-manifesto {
    max-width: var(--content-width);
    margin: 0 auto 2rem;
}

.manifesto-content {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.manifesto-content a {
    border-bottom: 1px solid rgba(184, 74, 40, 0.25);
}

/* ---- Homepage recommendations ---- */
.home-recommendations {
    max-width: var(--content-wide);
    margin: 3rem auto 0;
    padding: 0 var(--site-padding);
}

.home-recommendations-title {
    font-family: var(--font-headline);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.home-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}


/* ---- Tag exploration field ----
   Mirrors the floating field: full-width pannable viewport,
   radial mask fade, hidden scrollbars, horizontal-only pan. */

.tag-field-section {
    margin: 3rem auto 0;
}

.tag-field-title {
    font-family: var(--font-headline);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* Pannable viewport — matches floating-field */
.tag-field {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Height set dynamically by JS based on card layout.
       This fallback only shows during initial render. */
    height: 20vh;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    mask-image: radial-gradient(
        ellipse 48% 48% at center,
        black 70%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 48% 48% at center,
        black 70%,
        transparent 100%
    );
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tag-field::-webkit-scrollbar {
    display: none;
}

.tag-field-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 0.35rem;
    width: 80vw;
    max-width: none;
    min-height: 100%;
    margin: 0 auto;
    padding: 1.5rem 4vw;
    box-sizing: border-box;
}

/* Drift wrapper — same stagger as floating field */
.tag-drift {
    display: inline-flex;
    will-change: transform;
    margin: 0.2rem 0.05rem;
    flex-shrink: 0;
}

.tag-drift:nth-child(odd)  { margin-bottom: 0.5rem; }
.tag-drift:nth-child(even) { margin-top: 0.5rem; z-index: 2; }

/* Tag cards — matches floating-link style, no border, neutral shading */
.tag-link {
    display: inline-flex;
    align-items: center;
    padding: 0.66rem 1.2rem;
    background-clip: padding-box;
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(42, 37, 32, 0.05), 0 0 0 1px rgba(42, 37, 32, 0.02);
    background: #F0EBE2;
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 450;
    font-size: 0.8125rem;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 250ms var(--ease-out),
        box-shadow 200ms var(--ease-out),
        color 200ms var(--ease-out);
}

/* When Ghost provides an accent color, derive wash/text from it */
.tag-drift[style] .tag-link {
    background: color-mix(in srgb, var(--tag-accent) 15%, var(--color-bg));
    color: color-mix(in srgb, var(--tag-accent) 65%, var(--color-text));
}

/* Hover: lift + terracotta text */
.tag-link:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(42, 37, 32, 0.14), 0 0 0 1px rgba(42, 37, 32, 0.06);
    color: var(--color-terracotta);
    z-index: 10;
}

/* ---- Tag field mobile ---- */
@media (max-width: 768px) {
    .tag-field {
        height: 16vh;
    }

    .tag-field-title {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }

    .tag-field-inner {
        width: 120vw;
        padding: 1rem 15vw;
        gap: 0.3rem;
    }

    .tag-drift,
    .tag-drift:nth-child(odd),
    .tag-drift:nth-child(even) {
        margin: 0.15rem 0.1rem;
    }

    .tag-link {
        font-size: 0.75rem;
        padding: 0.48rem 0.84rem;
    }
}

/* Error pages */
.error-page {
    text-align: center;
    padding-top: 4rem;
}

.error-message {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.error-home-link {
    color: var(--color-terracotta);
    border-bottom: 1px solid rgba(184, 74, 40, 0.25);
}


/* ============================================
   Header — Navigation, Member actions
   ============================================ */

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-nav-link {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    transition: color var(--transition-base), background var(--transition-base);
}

.header-nav-link:hover {
    color: var(--color-terracotta);
}

.header-nav-current {
    color: var(--color-text);
}

.header-subscribe-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-terracotta);
    padding: 0.4rem 0.9rem;
    border-radius: 5px;
    text-decoration: none;
    transition: background var(--transition-base);
}

.header-subscribe-link:hover {
    background: var(--color-sienna);
    color: #fff;
}

.header-signin-link {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    transition: color var(--transition-base);
}

.header-signin-link:hover {
    color: var(--color-terracotta);
}

.header-member-link {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    transition: color var(--transition-base);
}

.header-member-link:hover {
    color: var(--color-terracotta);
}

/* Hide nav links on very small screens */
@media (max-width: 600px) {
    .header-nav {
        display: none;
    }
}


/* ============================================
   Subscribe form (inside footer)
   ============================================ */

.footer-subscribe {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.subscribe-form-row {
    display: flex;
    gap: 0.5rem;
    max-width: 380px;
    margin: 0 auto;
}

.subscribe-input {
    flex: 1;
    padding: 0.65rem 1rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    outline: none;
    transition: border-color 200ms var(--ease-out);
}

.subscribe-input:focus {
    border-color: var(--color-terracotta);
}

.subscribe-input::placeholder {
    color: var(--color-text-muted);
}

.subscribe-button {
    padding: 0.65rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-terracotta);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 200ms var(--ease-out);
}

.subscribe-button:hover {
    background: var(--color-sienna);
}

.subscribe-alert {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    min-height: 1.25rem;
}

.subscribe-error {
    color: #c0392b;
}

.subscribe-success {
    color: #27ae60;
    display: none;
}

form.success .subscribe-success {
    display: inline;
}

form.success .subscribe-form-row {
    display: none;
}

@media (max-width: 480px) {
    .subscribe-form-row {
        flex-direction: column;
    }
}


/* ============================================
   Footer — Social links, copyright
   ============================================ */

.footer-social {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.footer-social a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer-social a:hover {
    color: var(--color-terracotta);
}

.footer-copyright {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.6;
    margin-top: 0.75rem;
}
/* ============================================
   Post — Article content styling
   Comprehensive Ghost editor card formatting
   ============================================ */

/* ---- Post header ---- */
.post-header {
    max-width: var(--content-width);
    margin: 0 auto 2.5rem;
}

.post-title {
    margin-bottom: 0.25rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.post-meta a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.post-meta a:hover {
    color: var(--color-terracotta);
}

/* ---- Post content ---- */
.post-content {
    font-size: 1.0625rem;
    line-height: 1.78;
}

/* Center all direct children with content width */
.post-content > * {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

/* Vertical rhythm between elements */
.post-content > * + * {
    margin-top: 1.5rem;
}

/* Extra space before headings */
.post-content > h2 {
    margin-top: 2.5rem;
}

.post-content > h3 {
    margin-top: 2rem;
}

.post-content > h4,
.post-content > h5,
.post-content > h6 {
    margin-top: 1.75rem;
}

/* Tighter spacing when heading follows heading */
.post-content > h2 + h3,
.post-content > h3 + h4,
.post-content > h4 + h5,
.post-content > h5 + h6 {
    margin-top: 0.75rem;
}

/* Extra space around cards, hr, forms */
.post-content > .kg-card,
.post-content > hr,
.post-content > form {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* ---- Width modifiers ---- */
.post-content .kg-width-wide {
    max-width: var(--content-wide);
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

.post-content .kg-width-full {
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

/* ---- Images ---- */
.post-content .kg-image-card img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    background-color: var(--color-border);
}

.post-content .kg-image-card.kg-width-full img {
    border-radius: 0;
}

/* ---- Figcaptions ---- */
.post-content figcaption {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
    color: var(--color-text-muted);
}

.post-content figcaption a {
    color: var(--color-text-muted);
    text-decoration-color: rgba(139, 126, 110, 0.4);
}

.post-content figcaption a:hover {
    color: var(--color-terracotta);
}

/* ---- Gallery ---- */
.post-content .kg-gallery-card {
    --gap: 0.75rem;
}

.post-content .kg-gallery-image img {
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--color-border);
}

/* Reduce gap between consecutive image/gallery cards */
.post-content .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card,
.post-content .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
.post-content .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
.post-content .kg-image-card:not(.kg-card-hascaption) + .kg-image-card {
    margin-top: 0.5rem;
}

/* ---- Blockquote ---- */
.post-content blockquote {
    padding: 0.5em 0 0.5em 1.25rem;
    color: var(--color-text);
    font-weight: 500;
    border-left: 2px solid var(--color-terracotta);
}

.post-content blockquote p {
    margin: 0;
}

/* Alternate blockquote style */
.post-content blockquote.kg-blockquote-alt {
    padding: 1rem 0;
    font-family: var(--font-headline);
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    border-left: 0;
}

/* ---- Bookmark cards ---- */
.post-content .kg-bookmark-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 2rem auto;
    transition: background-color 150ms ease;
}

.post-content .kg-bookmark-card:hover {
    background: rgba(42, 37, 32, 0.02);
}

.post-content .kg-bookmark-container {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    color: var(--color-text);
    text-decoration: none;
}

.post-content .kg-bookmark-content {
    padding: 0.5rem 0 0.5rem 0.5rem;
    flex: 1;
    min-width: 0;
}

.post-content .kg-bookmark-title {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.post-content .kg-bookmark-description {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-content .kg-bookmark-metadata {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.post-content .kg-bookmark-icon {
    width: 16px;
    height: 16px;
}

.post-content .kg-bookmark-thumbnail img {
    border-radius: 4px;
    object-fit: cover;
}

/* Stack on mobile */
@media (max-width: 600px) {
    .post-content .kg-bookmark-container {
        flex-direction: column;
    }

    .post-content .kg-bookmark-thumbnail {
        order: -1;
    }

    .post-content .kg-bookmark-thumbnail img {
        position: static;
        height: auto;
        width: 100%;
    }
}

/* Reduce gap between consecutive bookmarks */
.post-content .kg-bookmark-card + .kg-bookmark-card {
    margin-top: 0.5rem;
}

/* ---- Callout cards ---- */
.post-content .kg-callout-card {
    padding: 1.125rem 1.375rem;
    border-radius: 8px;
    color: var(--color-text);
}

.post-content .kg-callout-card + .kg-callout-card {
    margin-top: 0.5rem;
}

.post-content .kg-callout-card div.kg-callout-emoji {
    padding-right: 0.875rem;
}

.post-content .kg-callout-text {
    font-weight: 450;
}

/* White callout variant */
.post-content .kg-callout-card-white {
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* ---- Toggle / accordion cards ---- */
.post-content .kg-toggle-card {
    padding: 0.875rem 1.125rem;
    border-radius: 6px;
    border: 0;
    background-color: rgba(42, 37, 32, 0.03);
    box-shadow: none;
    transition: background-color 150ms ease;
}

.post-content .kg-toggle-card:hover {
    background-color: rgba(42, 37, 32, 0.05);
}

.post-content .kg-toggle-card + .kg-toggle-card {
    margin-top: 0.375rem;
}

.post-content .kg-toggle-card h4.kg-toggle-heading-text {
    font-size: 1rem;
    font-weight: 500;
}

.post-content .kg-toggle-card[data-kg-toggle-state='open'] .kg-toggle-heading {
    padding-bottom: 0.75rem;
}

.post-content .kg-toggle-card-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-border);
    border-radius: 3px;
}

.post-content .kg-toggle-card-icon svg {
    width: 8px;
    height: 8px;
    color: var(--color-text);
}

.post-content .kg-toggle-card .kg-toggle-content p,
.post-content .kg-toggle-card .kg-toggle-content ul,
.post-content .kg-toggle-card .kg-toggle-content ol {
    margin-top: 0.75rem;
    font-size: inherit;
    line-height: inherit;
}

.post-content .kg-toggle-card .kg-toggle-content p:first-child,
.post-content .kg-toggle-card .kg-toggle-content ul:first-child,
.post-content .kg-toggle-card .kg-toggle-content ol:first-child {
    margin-top: 0;
}

/* ---- Code blocks ---- */
.post-content :not(pre) > code {
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    background-color: rgba(42, 37, 32, 0.04);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-text);
    font-size: 0.875em;
}

.post-content pre {
    max-height: 500px;
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    border-radius: 8px;
    color: var(--color-text);
    background-color: rgba(42, 37, 32, 0.04);
    box-shadow: inset 0 0 0 1px var(--color-border);
    overflow-x: auto;
}

.post-content .kg-code-card pre {
    margin-bottom: 0;
}

/* ---- Embed cards — responsive videos ---- */
.post-content .kg-embed-card > iframe[src*='player.vimeo.com'],
.post-content .kg-embed-card > iframe[src*='youtube.com'],
.post-content .kg-embed-card > iframe[src*='youtube-nocookie.com'],
.post-content .kg-embed-card > iframe[src*='kickstarter.com'][src*='video.html'] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    background-color: var(--color-border);
}

.post-content .kg-embed-card > iframe {
    border-radius: 0;
}

.post-content .kg-embed-card > .twitter-tweet {
    margin: 0 auto;
}

/* ---- Audio / Video cards ---- */
.post-content .kg-audio-card,
.post-content .kg-video-card {
    border-radius: 8px;
    overflow: hidden;
}

/* ---- File cards ---- */
.post-content .kg-file-card {
    border-radius: 8px;
}

/* ---- Header / Signup cards ---- */
.post-content .kg-header-card,
.post-content .kg-signup-card {
    overflow: hidden;
    border-radius: 8px;
}

/* ---- Button cards ---- */
.post-content .kg-btn {
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: 6px;
    text-align: center;
    transition: opacity 150ms ease;
}

.post-content .kg-btn:hover {
    opacity: 0.85;
}

/* ---- Divider / HR ---- */
.post-content hr,
.post-content .kg-divider-card hr {
    border: 0;
    border-top: 1px solid var(--color-border-strong);
    margin: 2.5rem auto;
}

/* ---- Lists ---- */
.post-content ul,
.post-content ol {
    padding-left: 1.5rem;
}

.post-content ul ul,
.post-content ol ol,
.post-content li + li {
    margin-top: 0.5em;
}

.post-content ol > li::marker {
    font-size: 0.938em;
    font-weight: 500;
}

.post-content ol ol {
    list-style: lower-alpha;
}

.post-content ol ol ol {
    list-style: lower-roman;
}

/* ---- Mark (highlight) ---- */
.post-content mark {
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
}

/* ---- Tables ---- */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.post-content thead {
    color: var(--color-text);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border-strong);
}

.post-content tr + tr {
    border-top: 1px solid var(--color-border);
}

.post-content th,
.post-content td {
    padding: 0.625rem 0.875rem;
    text-align: left;
}

.post-content th + th,
.post-content td + td {
    border-left: 1px solid var(--color-border);
}

.post-content tfoot {
    border-top: 1px solid var(--color-border);
}

/* Responsive table wrapper */
.post-content .responsive-table {
    overflow-x: auto;
}

/* ---- Footnotes ---- */
.post-content .footnotes-sep {
    margin-top: 3rem;
}

.post-content .footnotes ol {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ---- Product cards ---- */
.post-content .kg-product-card {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    padding: 1.5rem;
}

/* ---- Content paywall teaser ---- */
.post-content-teaser {
    position: relative;
}

.post-content-teaser::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    max-height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
    pointer-events: none;
}

/* ---- Featured image ---- */
.post-featured-image {
    max-width: var(--content-wide);
    margin: 0 auto 2.5rem;
}

.post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    background-color: var(--color-border);
}

.post-featured-image figcaption {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--color-text-muted);
}

/* ---- Post tags ---- */
.post-tags {
    max-width: var(--content-width);
    margin: 2.5rem auto 0;
}

.post-tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    border-radius: 4px;
    background-color: rgba(42, 37, 32, 0.04);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease;
}

.post-tag:hover {
    background-color: rgba(42, 37, 32, 0.08);
    color: var(--color-text);
}


/* ---- Content gate CTA (locked posts) ---- */
.content-cta {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.content-cta-title {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.content-cta-description {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.content-cta-button {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-terracotta);
    border-radius: 6px;
    text-decoration: none;
    transition: background 200ms var(--ease-out);
}

.content-cta-button:hover {
    background: var(--color-sienna);
    color: #fff;
}

.content-cta-signin {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.content-cta-signin a {
    color: var(--color-terracotta);
    text-decoration: none;
}

.content-cta-signin a:hover {
    text-decoration: underline;
}


/* ---- Lightbox overlay ---- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    cursor: zoom-out;
    transition: opacity 250ms ease, visibility 250ms ease;
}

.lightbox-overlay.lightbox-open {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    transform: scale(0.95);
    transition: transform 250ms ease;
}

.lightbox-overlay.lightbox-open .lightbox-image {
    transform: scale(1);
}


/* ---- Wide post content mode (Ghost custom setting) ---- */
.wide-post-content .post-content > *,
.wide-post-content .post-header,
.wide-post-content .post-tags,
.wide-post-content .content-cta,
.wide-post-content .post-comments {
    max-width: var(--content-wide);
}

/* Full-width cards must break out even in wide mode */
.wide-post-content .post-content > .kg-width-full {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


/* ---- Post footer: tags + share ---- */
.post-footer {
    max-width: var(--content-width);
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.post-tag-link {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: var(--color-bg-alt, #F0EBE2);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 450;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 200ms ease, background 200ms ease;
}

.post-tag-link:hover {
    color: var(--color-terracotta);
    background: color-mix(in srgb, var(--color-terracotta) 8%, var(--color-bg));
}

/* ---- Share bar ---- */
.share-bar {
    position: relative;
    margin-left: auto;
}

.share-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--color-bg-alt, #F0EBE2);
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 450;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 200ms ease, background 200ms ease;
}

.share-toggle:hover {
    color: var(--color-terracotta);
}

.share-toggle svg {
    flex-shrink: 0;
}

.share-links {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    background: var(--color-bg, #FDFAF5);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(42, 37, 32, 0.12), 0 0 0 1px rgba(42, 37, 32, 0.06);
    z-index: 100;
    min-width: 160px;
}

.share-bar.share-open .share-links {
    display: block;
}

.share-links li {
    margin: 0;
    padding: 0;
}

.share-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: none;
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    box-sizing: border-box;
}

.share-link:hover {
    background: var(--color-bg-alt, #F0EBE2);
    color: var(--color-terracotta);
}

.share-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.share-link:hover svg {
    opacity: 1;
}

.share-link-label {
    white-space: nowrap;
}

/* Copy link success state */
.share-copy.copied .share-link-label {
    color: var(--color-terracotta);
}

/* Mobile: share links stack full width */
@media (max-width: 768px) {
    .post-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .share-bar {
        margin-left: 0;
        width: 100%;
    }

    .share-links {
        right: auto;
        left: 0;
    }
}


/* ---- Ghost native comments ---- */
.post-comments {
    max-width: var(--content-width);
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
/* ============================================
   Connection Map — Three-tier link system
   Card styling with spatial drift and rotation
   ============================================ */

.connection-map {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border-strong);
}

/* Tiers */
.connection-tier {
    margin-bottom: 2.5rem;
}

.connection-tier:last-child {
    margin-bottom: 0;
}

.tier-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.tier-label--direct {
    color: var(--color-terracotta);
}

.tier-label--near {
    color: var(--color-near);
}

.tier-label--distant {
    color: var(--color-distant);
}

/* Link cluster — flex wrap with extra gap for rotated cards */
.connection-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.15rem;
    padding: 0.5rem 0;
}

/* ---- Drift wrapper (mirrors floating-drift) ---- */
.connection-drift {
    display: inline-flex;
    will-change: transform;
    margin: 0.2rem 0.05rem;
    flex-shrink: 0;
}

/* Stagger vertical rhythm for organic feel */
.connection-drift:nth-child(odd) {
    margin-bottom: 0.4rem;
}

.connection-drift:nth-child(even) {
    margin-top: 0.35rem;
}

/* ---- Card-style connection link ---- */
.connection-link {
    display: inline-flex;
    align-items: center;
    padding: 0.56rem 1rem;
    background-clip: padding-box;
    border: 1px solid rgba(42, 37, 32, 0.06);
    border-radius: 10px;
    box-shadow:
        0 1px 6px rgba(42, 37, 32, 0.05),
        0 0 0 1px rgba(42, 37, 32, 0.02);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 450;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 250ms var(--ease-out),
        box-shadow 200ms var(--ease-out),
        border-color 200ms var(--ease-out),
        color 200ms var(--ease-out);
}

/* Hover: scale up + visual lift */
.connection-link:hover {
    transform: scale(1.08);
    box-shadow:
        0 6px 16px rgba(42, 37, 32, 0.14),
        0 0 0 1px rgba(42, 37, 32, 0.06);
    border-color: var(--color-border-strong);
    color: var(--color-terracotta);
    z-index: 10;
}

/* ---- Tier-specific sizing ---- */

.connection-link--direct {
    font-size: 0.975rem;
    padding: 0.6rem 1.1rem;
}

.connection-link--near {
    font-size: 0.9rem;
    padding: 0.5rem 0.95rem;
    opacity: 0.85;
}

.connection-link--distant {
    font-size: 0.825rem;
    padding: 0.44rem 0.84rem;
    opacity: 0.65;
}

.connection-link--near:hover,
.connection-link--distant:hover {
    opacity: 1;
}

/* ---- Pastel wash cycling — southwestern tints ---- */

/* Direct tier — warm tones */
.tier--direct .connection-drift:nth-child(8n+1) .connection-link { background: #F5E8E3; }
.tier--direct .connection-drift:nth-child(8n+2) .connection-link { background: #F2E4DD; }
.tier--direct .connection-drift:nth-child(8n+3) .connection-link { background: #F3EAE1; }
.tier--direct .connection-drift:nth-child(8n+4) .connection-link { background: #F0EBE2; }
.tier--direct .connection-drift:nth-child(8n+5) .connection-link { background: #F5E8E3; }
.tier--direct .connection-drift:nth-child(8n+6) .connection-link { background: #F2E4DD; }
.tier--direct .connection-drift:nth-child(8n+7) .connection-link { background: #F3EAE1; }
.tier--direct .connection-drift:nth-child(8n+8) .connection-link { background: #F0EBE2; }

/* Near tier — cooler tones */
.tier--near .connection-drift:nth-child(8n+1) .connection-link { background: #E9EDE6; }
.tier--near .connection-drift:nth-child(8n+2) .connection-link { background: #E6EDF1; }
.tier--near .connection-drift:nth-child(8n+3) .connection-link { background: #F0EBE2; }
.tier--near .connection-drift:nth-child(8n+4) .connection-link { background: #EDEAEF; }
.tier--near .connection-drift:nth-child(8n+5) .connection-link { background: #E9EDE6; }
.tier--near .connection-drift:nth-child(8n+6) .connection-link { background: #E6EDF1; }
.tier--near .connection-drift:nth-child(8n+7) .connection-link { background: #F0EBE2; }
.tier--near .connection-drift:nth-child(8n+8) .connection-link { background: #EDEAEF; }

/* Distant tier — neutral washes */
.tier--distant .connection-drift:nth-child(8n+1) .connection-link { background: #F0ECE0; }
.tier--distant .connection-drift:nth-child(8n+2) .connection-link { background: #EDEAEF; }
.tier--distant .connection-drift:nth-child(8n+3) .connection-link { background: #E9EDE6; }
.tier--distant .connection-drift:nth-child(8n+4) .connection-link { background: #F0EBE2; }
.tier--distant .connection-drift:nth-child(8n+5) .connection-link { background: #F0ECE0; }
.tier--distant .connection-drift:nth-child(8n+6) .connection-link { background: #EDEAEF; }
.tier--distant .connection-drift:nth-child(8n+7) .connection-link { background: #E9EDE6; }
.tier--distant .connection-drift:nth-child(8n+8) .connection-link { background: #F0EBE2; }

/* ---- Arrival animation ---- */
.connection-map.is-visible .connection-tier {
    animation: tier-arrive 600ms var(--ease-out) forwards;
    opacity: 0;
}

.connection-map.is-visible .connection-tier:nth-child(1) {
    animation-delay: 0ms;
}

.connection-map.is-visible .connection-tier:nth-child(2) {
    animation-delay: 150ms;
}

.connection-map.is-visible .connection-tier:nth-child(3) {
    animation-delay: 300ms;
}

@keyframes tier-arrive {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state */
.connection-map--loading {
    min-height: 100px;
}

.connection-map--loading::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-sandstone);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
    margin: 2rem auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Mobile adjustments ---- */
@media (max-width: 768px) {
    .connection-links {
        gap: 0.3rem 0.1rem;
    }

    .connection-drift,
    .connection-drift:nth-child(odd),
    .connection-drift:nth-child(even) {
        margin: 0.15rem 0.05rem;
    }

    .connection-link {
        padding: 0.44rem 0.8rem;
    }

    .connection-link--direct {
        font-size: 0.9rem;
        padding: 0.5rem 0.9rem;
    }

    .connection-link--near {
        font-size: 0.85rem;
        padding: 0.44rem 0.8rem;
    }

    .connection-link--distant {
        font-size: 0.8rem;
        padding: 0.4rem 0.72rem;
    }
}

/* Reduced motion — static tilts only, no drift animation */
@media (prefers-reduced-motion: reduce) {
    .connection-drift {
        will-change: auto;
    }
}
/* ============================================
   Floating Field — 2D pannable card cluster
   with slow thermal drift

   Structure: .floating-drift (span, drift via JS transform)
              └ .floating-link (a, hover scale via CSS transform)

   The field is larger than its viewport window on all
   screen sizes. JS auto-centers the scroll so the user
   can pan in any direction to explore.
   ============================================ */

/* Viewport window — clips the larger inner field */
.floating-field {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Fade edges to hint there's more to explore */
    mask-image: radial-gradient(
        ellipse 48% 48% at center,
        black 70%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 48% 48% at center,
        black 70%,
        transparent 100%
    );
    /* Hide scrollbars but keep scrolling */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.floating-field::-webkit-scrollbar {
    display: none;
}

/* Height set dynamically by JS based on card count.
   This fallback only shows during initial render. */
.floating-field {
    height: var(--field-height, 60vh);
}

/* Inner cluster — wider/taller than viewport so cards form a 2D field */
.floating-field-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 0.35rem;
    /* Wider than viewport so cards wrap into multiple rows.
       --field-inner-width is set inline from Ghost custom setting. */
    width: var(--field-inner-width, 150vw);
    max-width: none;
    min-height: 100%;
    padding: 6vh 18vw;
    box-sizing: border-box;
}

/* Drift wrapper — positioned by JS via style.transform */
.floating-drift {
    display: inline-flex;
    will-change: transform;
    margin: 0.2rem 0.05rem;
    flex-shrink: 0;
}

.floating-drift:nth-child(odd) {
    margin-bottom: 0.5rem;
}

.floating-drift:nth-child(even) {
    margin-top: 0.5rem;
    z-index: 2;
}

/* Inner link card — hover scale lives here */
.floating-link {
    display: inline-flex;
    align-items: center;
    padding: 0.66rem 1.2rem;
    background-clip: padding-box;
    border: 1px solid rgba(42, 37, 32, 0.06);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(42, 37, 32, 0.05), 0 0 0 1px rgba(42, 37, 32, 0.02);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 450;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Washed southwestern palette — 8 subtle tints cycling via nth-child.
   All backgrounds are very light pastel washes so charcoal text stays readable. */

/* Terracotta wash */
.floating-drift:nth-child(8n+1) .floating-link { background: #F5E8E3; }
/* Sandstone wash */
.floating-drift:nth-child(8n+2) .floating-link { background: #F0EBE2; }
/* Slate blue wash */
.floating-drift:nth-child(8n+3) .floating-link { background: #E6EDF1; }
/* Sienna wash */
.floating-drift:nth-child(8n+4) .floating-link { background: #F2E4DD; }
/* Sage wash */
.floating-drift:nth-child(8n+5) .floating-link { background: #E9EDE6; }
/* Clay wash */
.floating-drift:nth-child(8n+6) .floating-link { background: #F3EAE1; }
/* Dusk purple wash */
.floating-drift:nth-child(8n+7) .floating-link { background: #EDEAEF; }
/* Mesa gold wash */
.floating-drift:nth-child(8n+8) .floating-link { background: #F0ECE0; }

/* Hover: scale up + visual lift */
.floating-link:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(42, 37, 32, 0.14), 0 0 0 1px rgba(42, 37, 32, 0.06);
    border-color: var(--color-border-strong);
    color: var(--color-terracotta);
    z-index: 10;
}

/* Size variants (~20% larger than original) */
.floating-link--lg {
    font-size: 1.125rem;
    padding: 0.72rem 1.32rem;
}

.floating-link--md {
    font-size: 0.975rem;
}

.floating-link--sm {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* ---- Mobile adjustments ---- */
@media (max-width: 768px) {
    .floating-field {
        height: var(--field-height-m, 40vh);
    }

    .floating-field-inner {
        width: var(--field-inner-width-m, 180vw);
        padding: 5vh 20vw;
        gap: 0.3rem;
    }

    .floating-drift,
    .floating-drift:nth-child(odd),
    .floating-drift:nth-child(even) {
        margin: 0.15rem 0.1rem;
    }

    .floating-link {
        font-size: 0.9rem;
        padding: 0.48rem 0.84rem;
    }

    .floating-link--lg {
        font-size: 0.975rem;
        padding: 0.54rem 0.96rem;
    }

    .floating-link--md {
        font-size: 0.9rem;
    }

    .floating-link--sm {
        font-size: 0.825rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .floating-drift {
        will-change: auto;
    }
}

/* ---- Dark mode ---- */
[data-color-scheme="dark"] .floating-link {
    border-color: rgba(232, 226, 216, 0.08);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

[data-color-scheme="dark"] .floating-link:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Dark southwestern palette — deep warm tints */
[data-color-scheme="dark"] .floating-drift:nth-child(8n+1) .floating-link { background: #2D2119; }
[data-color-scheme="dark"] .floating-drift:nth-child(8n+2) .floating-link { background: #28241C; }
[data-color-scheme="dark"] .floating-drift:nth-child(8n+3) .floating-link { background: #1E252B; }
[data-color-scheme="dark"] .floating-drift:nth-child(8n+4) .floating-link { background: #2B1F18; }
[data-color-scheme="dark"] .floating-drift:nth-child(8n+5) .floating-link { background: #212820; }
[data-color-scheme="dark"] .floating-drift:nth-child(8n+6) .floating-link { background: #2A221A; }
[data-color-scheme="dark"] .floating-drift:nth-child(8n+7) .floating-link { background: #252229; }
[data-color-scheme="dark"] .floating-drift:nth-child(8n+8) .floating-link { background: #27241C; }

@media (prefers-color-scheme: dark) {
    [data-color-scheme="system"] .floating-link {
        border-color: rgba(232, 226, 216, 0.08);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    [data-color-scheme="system"] .floating-link:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    [data-color-scheme="system"] .floating-drift:nth-child(8n+1) .floating-link { background: #2D2119; }
    [data-color-scheme="system"] .floating-drift:nth-child(8n+2) .floating-link { background: #28241C; }
    [data-color-scheme="system"] .floating-drift:nth-child(8n+3) .floating-link { background: #1E252B; }
    [data-color-scheme="system"] .floating-drift:nth-child(8n+4) .floating-link { background: #2B1F18; }
    [data-color-scheme="system"] .floating-drift:nth-child(8n+5) .floating-link { background: #212820; }
    [data-color-scheme="system"] .floating-drift:nth-child(8n+6) .floating-link { background: #2A221A; }
    [data-color-scheme="system"] .floating-drift:nth-child(8n+7) .floating-link { background: #252229; }
    [data-color-scheme="system"] .floating-drift:nth-child(8n+8) .floating-link { background: #27241C; }
}
/* ============================================
   Collection — Tag pages / Browse pages
   ============================================ */

.collection-header {
    margin-bottom: 3rem;
}

.collection-title {
    margin-bottom: 0.5rem;
}

.collection-description {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.collection-count {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    opacity: 0.6;
}

/* Post list on collection pages */
.collection-list {
    list-style: none;
    padding: 0;
}

.collection-item {
    border-bottom: 1px solid var(--color-border);
}

.collection-item:last-child {
    border-bottom: none;
}

.collection-item-link {
    display: block;
    padding: 1rem 0;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-base);
}

.collection-item-link:hover {
    color: var(--color-terracotta);
}

.collection-item-title {
    font-family: var(--font-headline);
    font-size: 1.125rem;
}

.collection-item-excerpt {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
    line-height: 1.5;
}

/* Pagination (if needed for large collections) */
.pagination {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
    font-size: 0.875rem;
}

.pagination a {
    color: var(--color-text-muted);
}

.pagination a:hover {
    color: var(--color-terracotta);
}
/* ============================================
   Tag Home — Rich tag page layout
   (used by tag-travels.hbs, tag-reflections.hbs)
   ============================================ */

/* ---- Hero ---- */

.tag-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.tag-hero--has-image {
    margin-bottom: 3.5rem;
}

.tag-hero-image {
    width: calc(100% + var(--site-padding) * 2);
    margin-left: calc(var(--site-padding) * -1);
    margin-right: calc(var(--site-padding) * -1);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.tag-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

.tag-hero-meta {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.tag-hero-title {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.tag-hero-description {
    max-width: 560px;
    margin: 0 auto;
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}


/* ---- Sections ---- */

.tag-home-section {
    margin-bottom: 3.5rem;
}

.tag-home-section-title {
    font-family: var(--font-headline);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    margin-top: 0;
}


/* ---- Post card grid ---- */

.tag-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Dense variant: slightly smaller min for the "all posts" section */
.tag-home-grid--dense {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

/* Post card overrides within the tag-home grid */
.tag-home-grid .post-card {
    margin: 0;
    transition: transform 0.25s ease;
}

.tag-home-grid .post-card:hover {
    transform: scale(1.03);
}

.tag-home-grid .post-card-style-vertical .post-card-media {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.tag-home-grid .post-card-style-vertical .post-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.tag-home-grid .post-card-content h3 {
    font-size: 1.125rem;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.tag-home-grid .post-card-content h3 a {
    color: var(--color-text);
    text-decoration: none;
}

.tag-home-grid .post-card-content h3 a:hover {
    color: var(--color-terracotta);
}

.tag-home-grid .post-card-content > p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 0;
}

.tag-home-grid .post-card-meta {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Pagination scoped to tag-home */
.tag-home .pagination {
    margin-top: 2rem;
}


/* ---- Responsive ---- */

@media (max-width: 768px) {
    .tag-hero-image {
        border-radius: 0 0 8px 8px;
    }

    .tag-home-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .tag-home-grid--dense {
        grid-template-columns: 1fr;
    }

    .tag-home-section-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tag-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ============================================
   Pages — Auth, Membership, Tags, Author
   ============================================ */

/* ---- Auth pages (signup / signin) ---- */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 3rem var(--site-padding);
}

.auth-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.auth-title {
    margin-bottom: 0.5rem;
}

.auth-description {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.auth-form {
    text-align: left;
}

.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.auth-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    outline: none;
    transition: border-color 200ms var(--ease-out);
}

.auth-input:focus {
    border-color: var(--color-terracotta);
}

.auth-input::placeholder {
    color: var(--color-text-muted);
}

.auth-button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-terracotta);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 200ms var(--ease-out);
}

.auth-button:hover {
    background: var(--color-sienna);
}

.auth-alert {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    min-height: 1.25rem;
}

.auth-error {
    color: #c0392b;
}

.auth-success {
    color: #27ae60;
    display: none;
}

/* Ghost adds .success class on the form on submit */
form.success .auth-success {
    display: inline;
}

form.success .auth-button,
form.success .auth-fields {
    display: none;
}

/* Loading state */
form.loading .auth-button .label {
    opacity: 0.6;
}

.auth-switch {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
}

.auth-switch a {
    color: var(--color-terracotta);
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}


/* ---- Membership / Pricing ---- */
.membership-hero {
    max-width: var(--content-width);
    margin: 0 auto 2rem;
    text-align: center;
}

.membership-description {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.membership-content {
    margin-top: 3rem;
}

/* Pricing toggle */
.pricing-section {
    max-width: 900px;
    margin: 0 auto 3rem;
}

.pricing-toggle-input {
    display: none;
}

.pricing-toggle {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 2rem;
    padding: 0.25rem;
    background: rgba(42, 37, 32, 0.04);
    border-radius: 6px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.pricing-toggle-label {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}

/* Active toggle state */
#pricing-toggle-monthly:checked ~ .pricing-toggle .pricing-toggle-label[for="pricing-toggle-monthly"],
#pricing-toggle-yearly:checked ~ .pricing-toggle .pricing-toggle-label[for="pricing-toggle-yearly"] {
    color: var(--color-text);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-card);
}

/* Show/hide prices based on toggle */
#pricing-toggle-monthly:checked ~ .pricing-cards .pricing-price-yearly,
#pricing-toggle-monthly:checked ~ .pricing-cards .pricing-button-yearly {
    display: none;
}

#pricing-toggle-yearly:checked ~ .pricing-cards .pricing-price-monthly,
#pricing-toggle-yearly:checked ~ .pricing-cards .pricing-button-monthly {
    display: none;
}

/* Pricing cards */
.pricing-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.pricing-card {
    flex: 1;
    min-width: 250px;
    max-width: 340px;
    padding: 2rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    text-align: center;
}

.pricing-name {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.pricing-trial {
    font-size: 0.8125rem;
    color: var(--color-terracotta);
    margin-bottom: 0.75rem;
}

.pricing-price {
    margin: 1rem 0;
}

.pricing-amount {
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text);
}

.pricing-period {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.pricing-description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.pricing-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.pricing-benefits li {
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
}

.pricing-benefits li:last-child {
    border-bottom: 1px solid var(--color-border);
}

.pricing-button {
    display: inline-block;
    width: 100%;
    padding: 0.7rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-terracotta);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 200ms var(--ease-out);
}

.pricing-button:hover {
    background: var(--color-sienna);
    color: #fff;
}

.pricing-button-current {
    background: rgba(42, 37, 32, 0.06);
    color: var(--color-text-muted);
    cursor: default;
}

.pricing-button-current:hover {
    background: rgba(42, 37, 32, 0.06);
    color: var(--color-text-muted);
}

.pricing-discount {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-terracotta);
    font-weight: 500;
}

.pricing-empty {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    .pricing-cards {
        flex-direction: column;
        align-items: center;
    }

    .pricing-card {
        max-width: 100%;
    }
}


/* ---- Tags browse page ---- */
.tags-hero {
    max-width: var(--content-width);
    margin: 0 auto 2rem;
    text-align: center;
}

.tags-grid-section {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding: 0 var(--site-padding);
}

.tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.tag-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.tag-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
}

.tag-card-name {
    font-size: 1.0625rem;
    margin-bottom: 0.375rem;
}

.tag-card-description {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    flex: 1;
}

.tag-card-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}


/* ---- Author page ---- */
.author-hero {
    max-width: var(--content-width);
    margin: 0 auto 2.5rem;
    text-align: center;
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.author-name {
    margin-bottom: 0.25rem;
}

.author-bio {
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

.author-location {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.author-posts {
    max-width: var(--content-width);
    margin: 0 auto;
}

/* Pagination */
.pagination {
    max-width: var(--content-width);
    margin: 2rem auto;
    text-align: center;
}

.pagination-link {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 200ms var(--ease-out);
}

.pagination-link:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}


/* ---- Recommendations page ---- */
.recommendations-hero {
    max-width: var(--content-width);
    margin: 0 auto 2rem;
    text-align: center;
}

.recommendations-description {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-width: var(--content-wide);
    margin: 0 auto 2rem;
}

.recommendation-card {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.recommendation-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
}

.recommendation-favicon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.recommendation-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.recommendation-title {
    font-size: 1rem;
    font-weight: 500;
}

.recommendation-excerpt {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.recommendations-content {
    max-width: var(--content-width);
    margin: 2rem auto 0;
}


/* ---- Contact page — hide subscribe CTA ---- */
.page-template .subscribe-cta {
    /* Hidden on custom pages where subscribe CTA is unwanted;
       controlled by body class when slug is "contact" */
}

body.page-contact .subscribe-cta {
    display: none;
}
/* ============================================
   Alive Behaviors — Animations & Interactions
   ============================================ */

/* ------------------------------------------
   1. Staggered Breadcrumb Arrival
   ------------------------------------------ */

@keyframes breadcrumb-arrive {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Each segment gets progressively delayed via JS nth-child */
.breadcrumb-segment:nth-child(1) { animation-delay: 100ms; }
.breadcrumb-segment:nth-child(2) { animation-delay: 200ms; }
.breadcrumb-segment:nth-child(3) { animation-delay: 300ms; }
.breadcrumb-segment:nth-child(4) { animation-delay: 400ms; }
.breadcrumb-segment:nth-child(5) { animation-delay: 500ms; }
.breadcrumb-segment:nth-child(6) { animation-delay: 600ms; }

/* Separators also stagger */
.breadcrumb-separator:nth-of-type(1) { animation-delay: 150ms; }
.breadcrumb-separator:nth-of-type(2) { animation-delay: 250ms; }
.breadcrumb-separator:nth-of-type(3) { animation-delay: 350ms; }
.breadcrumb-separator:nth-of-type(4) { animation-delay: 450ms; }
.breadcrumb-separator:nth-of-type(5) { animation-delay: 550ms; }

/* ------------------------------------------
   2. Scroll-Aware Link Warmth
   ------------------------------------------ */

.post-content a {
    --warmth: 0;
    text-shadow: 0 0 calc(var(--warmth) * 10px) rgba(184, 74, 40, calc(var(--warmth) * 0.2));
    transition: text-shadow 300ms ease, color var(--transition-base), border-color var(--transition-base);
}

/* ------------------------------------------
   3. Connection Map Arrival Pulse
   (tier-arrive keyframes are in connection-map.css)
   ------------------------------------------ */

/* Connection links within tiers also stagger slightly */
.connection-map.is-visible .connection-link {
    opacity: 0;
    animation: link-appear 400ms var(--ease-out) forwards;
}

.connection-map.is-visible .connection-tier:nth-child(1) .connection-link {
    animation-delay: calc(100ms + var(--link-index, 0) * 30ms);
}

.connection-map.is-visible .connection-tier:nth-child(2) .connection-link {
    animation-delay: calc(250ms + var(--link-index, 0) * 30ms);
}

.connection-map.is-visible .connection-tier:nth-child(3) .connection-link {
    animation-delay: calc(400ms + var(--link-index, 0) * 30ms);
}

@keyframes link-appear {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: var(--target-opacity, 1);
        transform: translateX(0);
    }
}

/* Set target opacities per tier so the animation lands correctly */
.connection-link--direct { --target-opacity: 1; }
.connection-link--near { --target-opacity: 0.6; }
.connection-link--distant { --target-opacity: 0.3; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb-segment,
    .connection-map.is-visible .connection-tier,
    .connection-map.is-visible .connection-link,
    .floating-link {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .post-content a {
        text-shadow: none !important;
    }
}
/* ============================================
   Responsive — Mobile breakpoints
   ============================================ */

/* Tablet and below */
@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    .site-header {
        padding: 1rem;
        padding-bottom: 0.75rem;
    }

    .site-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Connection map stacks vertically on mobile */
    .connection-links {
        flex-direction: column;
        gap: 0.4rem;
    }

    .connection-tier {
        margin-bottom: 1.5rem;
    }

    /* Footer */
    .site-footer {
        padding: 3rem 1rem 2rem;
    }

    /* Collection items get more breathing room */
    .collection-item-link {
        padding: 0.875rem 0;
    }
}

/* Small phones */
@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.375rem;
    }

    .header-breadcrumb {
        font-size: 0.8125rem;
    }

    .connection-link--direct {
        font-size: 0.9375rem;
    }

    .connection-link--near {
        font-size: 0.875rem;
    }

    .connection-link--distant {
        font-size: 0.75rem;
    }
}
/* ============================================
   Landing Page — imported from Scope theme
   Combines all sections-landing CSS modules
   ============================================ */

@import url('sections-landing/_base.css');
@import url('sections-landing/_columns.css');
@import url('sections-landing/_container.css');
@import url('sections-landing/brands.css');
@import url('sections-landing/counters.css');
@import url('sections-landing/featured-posts.css');
@import url('sections-landing/features.css');
@import url('sections-landing/features-icons.css');
@import url('sections-landing/features-split.css');
@import url('sections-landing/latest-posts.css');
@import url('sections-landing/pricing.css');
@import url('sections-landing/testimonials.css');
@import url('sections-landing/testimonials-cards.css');
.popup-navigation {
	/* Navigation. */
	nav {
		--navigation--link--padding-v: var(--spacing-4);
		--navigation--link--padding-h: var(--spacing-5);

		margin: auto calc(var(--navigation--link--padding-h) * -1);
		font-size: var(--font-small);
		font-weight: 450;
	}

	nav ul {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Link. */
	a.nav-link,
	button.nav-link {
		position: relative;
		display: flex;
		padding: 0;
		padding: var(--navigation--link--padding-v) var(--navigation--link--padding-h);
		border: 0;
		border-radius: var(--radius-2);
		background-color: transparent;
		color: var(--color-contrast);
		text-decoration: none;
		transition: background-color .2s ease, color .2s ease;

		> .label {
			transition: transform .2s ease;
		}
	}

	li:hover > a.nav-link,
	li:hover > button.nav-link,
	a.nav-link:hover,
	button.nav-link:hover {
		background-color: var(--color-background-200);
		color: var(--color-contrast);

		> .label {
			transform: translateX(var(--spacing-1));
		}

		&::before {
			transform: translateX(2px);
		}
	}

	.nav-link-current {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			left: calc(var(--navigation--link--padding-h) + 4px);
			width: 3px;
			height: 1lh;
			border-radius: 3px;
			background-color: var(--ghost-accent-color);
			translate: 0 -50%;
			content: "";
			transition: transform .2s ease;
		}
	}

	/* Separator. */
	.nav-separator {
		margin-right: var(--navigation--link--padding-h);
		margin-left: var(--navigation--link--padding-h);
		border-top: 1px solid var(--color-border);

		&:not(:first-child) {
			margin-top: var(--spacing-5);
		}

		&:not(:last-child) {
			margin-bottom: var(--spacing-5);
		}
	}

	/* Section. */
	.nav-section:not(:first-child) {
		margin-top: var(--spacing-5);
	}

	.nav-section-link {
		color: var(--color-secondary);
	}

	span.nav-section-link {
		display: block;
		padding: var(--navigation--link--padding-v) var(--navigation--link--padding-h);
	}

	/* Collapse toggle. */
	.collapse-toggle {
		--collapse--icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 15L13 10L8 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    --collapse--icon--rotate: 0deg;
    --collapse-open--icon--rotate: 90deg;

		gap: var(--spacing-6);

		/* Icon. */
		&::after {
			margin-top: calc(0.5lh - var(--collapse--icon--size) * 0.5);
			margin-left: auto;
			color: var(--color-mute);
			opacity: 0;
			transition: transform .2s ease, opacity .15s ease;
		}

		&[aria-expanded="true"]::after,
		&:hover::after,
		&:focus-visible::after {
			opacity: 1;
		}
	}

	/* Collapse. */
	.collapse {
		ul {
			min-height: max-content;
			margin-left: -2px;
			padding-left: calc(var(--spacing-4) + 4px);
			opacity: 0;
			transform: translateY(-40%);
			transition: transform .3s ease, filter .35s ease, opacity .35s ease;
			transform-origin: left;
			filter: blur(4px);
		}

		li:first-child {
			padding-top: var(--spacing-1);
		}

		.nav-link {
			outline-offset: -2px;
		}
	}

	.collapse-toggle[aria-expanded="true"] ~ .collapse-ready,
	.collapse-toggle[aria-expanded="true"] ~ .collapse:not(.collapse-ready, :has(.nav-link-current)) {
		> ul {
			opacity: 1;
			transform: translateY(0);
			filter: blur(0);
		}
	}
}
/* ============================================
   Color Scheme Toggle — Light / System / Dark
   Based on Aspect reference theme pattern.
   PVS handles the JS (pvs.initDarkMode).
   ============================================ */

.toggle-color-scheme-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 450;
    cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base);
}

/* Prevent jarring flash during scheme switch */
.stop-transition .toggle-color-scheme-button,
.stop-transition .toggle-color-scheme-button * {
    transition-duration: 0s !important;
}

.toggle-color-scheme-button > .label {
    flex: 1 0 0%;
    white-space: nowrap;
}

/* Pill indicator with sliding icon */
.toggle-color-scheme-button > .icon-wrapper {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 24px;
    border-radius: 1rem;
    margin: -0.15rem 0;
    background-color: var(--color-border);
    transition: background-color 0.15s;
}

.toggle-color-scheme-button .icon-wrapper > .icon {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.15s, transform 0.15s !important;
}

.toggle-color-scheme-button:hover > .icon-wrapper,
.toggle-color-scheme-button:focus-visible > .icon-wrapper {
    background-color: var(--color-border-strong);
}

.toggle-color-scheme-button:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 3px;
}

/* ---- State: Light ---- */
[data-color-scheme="light"] .toggle-color-scheme-button .label-system,
[data-color-scheme="light"] .toggle-color-scheme-button .label-dark {
    display: none;
}

[data-color-scheme="light"] .toggle-color-scheme-button .icon-wrapper > .icon-sun {
    opacity: 1;
}

/* ---- State: System ---- */
[data-color-scheme="system"] .toggle-color-scheme-button .label-light,
[data-color-scheme="system"] .toggle-color-scheme-button .label-dark {
    display: none;
}

[data-color-scheme="system"] .toggle-color-scheme-button .icon-wrapper > .icon {
    transform: translateX(6px);
}

[data-color-scheme="system"] .toggle-color-scheme-button .icon-wrapper > .icon-circle-half {
    opacity: 1;
}

/* ---- State: Dark ---- */
[data-color-scheme="dark"] .toggle-color-scheme-button .label-system,
[data-color-scheme="dark"] .toggle-color-scheme-button .label-light {
    display: none;
}

[data-color-scheme="dark"] .toggle-color-scheme-button .icon-wrapper > .icon {
    transform: translateX(12px);
}

[data-color-scheme="dark"] .toggle-color-scheme-button .icon-wrapper > .icon-moon {
    opacity: 1;
}
.section.hash-landing {
	--section--offset: fluid(100px, 120px);
	--section--content--offset: fluid(1rem, 1.25rem);

	> h1,
	> h2,
	> p,
	> .section-content > p {
		text-align: center;
	}

	/* Title. */
	> h1 {
		max-width: 640px;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
		font-size: fluid(48px, 64px);
		font-weight: var(--font-weight-semibold);
		line-height: fluid(50px, 64px);
	}

	> h2 {
		max-width: var(--container-small--width);
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
		font-size: 1.875rem; /* 30px */
		font-weight: var(--font-weight-semibold);
	}

	/* Excerpt. */
	> p,
	> .section-content > p {
		width: 100%;
		max-width: var(--container-small--width);
		margin: fluid(1rem, 1.25rem) auto 0;
		font-size: fluid(1rem, 1.125rem);
	}

	/* Content offset. */
	> .section-content,
	> .section-list {
		margin-top: var(--section--content--offset);
	}

	/* Content. */
	> .section-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--vertical-rhythm) var(--spacing-3);

		&:has(> p:first-child) {
			margin-top: 0;
		}

		> * {
			flex: 0 0 100%;
		}

		/* Buttons. */
		> .kg-button-card {
			--button--background-color: var(--color-background-300);
			--button--color: var(--color-contrast);

			flex: 0 0 auto;
			width: auto;

			+ .kg-button-card {
				--button--background-color: transparent;
				--button--color: var(--color-contrast);
				--button-hover--background-color: var(--color-background-300);
				--button-hover--color: var(--color-contrast);
			}
		}

		/* Gap for toggles. */
		> p + .kg-toggle-card {
			margin-top: var(--spacing-10);
		}

		> .kg-toggle-card + .kg-toggle-card {
			margin-top: 0;
		}

		/* Hide product description when empty. */
		.kg-product-card-description:not(:has(> :first-child)) {
			display: none;
		}

		.kg-product-card-description > * {
			font-size: inherit;
			font-weight: inherit;
			line-height: inherit;
		}

		.kg-product-card-container {
			color: inherit;
			font-family: inherit;
		}
	}

	/* Image. */
	> .section-image {
		width: 100%;
		max-width: var(--container-medium--width);
		margin-top: calc(var(--spacing-9) * 2);
		margin-right: auto;
		margin-left: auto;
	}

	> .screen-reader-text + * {
		margin-top: 0;
	}

	/* Set aspect ratio. */
	&[style*='--landing--aspect-ratio'] {
		/* Product card. */
		.kg-product-card-container img {
			object-fit: cover;
			aspect-ratio: var(--landing--aspect-ratio);
		}
	}
}
/* The response is configured individually for each section. */

.hash-landing-columns-5 {
	--landing--columns: 5;
}

.hash-landing-columns-4 {
	--landing--columns: 4;
}

.hash-landing-columns-3 {
	--landing--columns: 3;
}

.hash-landing-columns-2 {
	--landing--columns: 2;
}
/* Set section container. */
.hash-landing .section-content {
	width: 100%;
	max-width: var(--landing--container--width, var(--landing--container-default--width));
	margin-right: auto;
	margin-left: auto;
}

/* Content container regular width. */
.hash-landing .kg-width-regular {
	width: 100%;
	max-width: var(--container-medium--width);
	margin-right: auto;
	margin-left: auto;
}

/* Content container wide width. */
.hash-landing .kg-width-wide {
	width: 100%;
}

/* Content container full width. */
.hash-landing .kg-width-full {
	width: calc(100% + var(--layout--padding) * 2);
	max-width: calc(100% + var(--layout--padding) * 2);
	flex: 0 0 calc(100% + var(--layout--padding) * 2);
	margin-right: calc(var(--layout--padding) * -1);
	margin-left: calc(var(--layout--padding) * -1);
}

/* Border radius for images and video. */
.hash-landing .kg-video-card:not(.kg-width-full) .kg-video-container {
	clip-path: inset(0 round var(--radius-2));
}

/* Custom content container. */
.hash-landing-container-small,
.hash-landing-container-medium,
.hash-landing-container-wide,
.hash-landing-container-fluid {
	.kg-width-regular,
	.kg-width-wide,
	.kg-width-full {
		width: 100%;
		flex: 0 0 100%;
		max-width: var(--landing--container--width);
		margin-right: auto;
		margin-left: auto;
	}
}

/* Container small. */
.hash-landing-container-small {
	--landing--container--width: var(--container-small--width);
}

/* Container medium. */
.hash-landing-container-medium {
	--landing--container--width: var(--container-medium--width);
}

/* Container wide. */
.hash-landing-container-wide {
	--landing--container--width: var(--container-wide--width);
}

/* Container fluid. */
.hash-landing-container-fluid {
	--landing--container--width: 100%;

	max-width: 100%;
}
.section.hash-landing-brands {
	> .section-content {
		justify-content: space-around;
		align-items: center;
		gap: var(--spacing-10) calc(var(--spacing-9) * 2);
	}

	> .screen-reader-text + * {
		margin-top: 0;
	}

	.kg-product-card {
		position: relative;
		width: auto;
		flex: 0 0 auto;

		> .kg-product-card-container {
			padding: 0;
			box-shadow: none;
			background-color: transparent;
		}

		.kg-product-card-title-container,
		.kg-product-card-description {
			display: none;
		}

		&:has(.kg-product-card-button) {
			transition: transform .3s ease;

			&:hover {
				transform: rotate(-2deg) scale(1.05);
			}
		}
	}

	/* Button. */
	.kg-product-card-button {
		--button--padding-v: 0;
		--button--padding-h: 0;
		--button-hover--rotate: 0;
		--button-hover--scale: 1;
		--button-hover--opacity: 0;
		--button--opacity: 0;
		--button--min-height: 100%;
		--button--border-radius: 0;

		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
}

@mixin color-scheme-dark {
	.section.hash-landing-brands .kg-product-card-container {
		filter: brightness(0) invert();
	}
}
.section.hash-landing-counters {
	> .section-content {
		justify-content: space-around;
		align-items: center;
		gap: var(--spacing-10) calc(var(--spacing-9) * 2);
	}

	> .screen-reader-text + * {
		margin-top: 0;
	}

	.kg-product-card {
		position: relative;
		width: auto;
		flex: 0 0 auto;
		text-align: center;

		.kg-product-card-title {
			font-size: 1.875rem; /* 30px */
			font-weight: var(--font-weight-semibold);
		}

		> .kg-product-card-container {
			padding: 0;
			box-shadow: none;
			background-color: transparent;
		}

		&:has(.kg-product-card-button) {
			transition: transform .3s ease;

			&:hover {
				transform: rotate(-2deg) scale(1.05);
			}
		}
	}

	/* Button. */
	.kg-product-card-button {
		--button--padding-v: 0;
		--button--padding-h: 0;
		--button-hover--rotate: 0;
		--button-hover--scale: 1;
		--button-hover--opacity: 0;
		--button--opacity: 0;
		--button--min-height: 100%;
		--button--border-radius: 0;

		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
}
.section.hash-landing-featured-posts {
	--section--content--offset: 0;
}
/* Auto columns without #landing-columns- */
.hash-landing-features-icons:not([class*="hash-landing-columns-"]) {
	/* 1 column. */
	&:where(:has(.kg-product-card:only-child)) {
		--landing--columns: 1;
	}

	/* 2 columns. */
	&:where(:has(.kg-product-card:nth-child(2n):last-child)) {
		--landing--columns: 2;
	}

	/* 3 columns. */
	&:where(:has(.kg-product-card:nth-child(3n):last-child)) {
		--landing--columns: 3;
	}

	/* 4 columns. */
	&:where(:has(.kg-product-card:nth-child(4n):last-child)) {
		--landing--columns: 4;
	}

	/* 5 columns. */
	&:where(:has(.kg-product-card:nth-child(5n):last-child)) {
		--landing--columns: 5;
	}
}

/* Auto container without #landing-container-. */
.hash-landing-features-icons:not([class*="hash-landing-container-"]) {
	/* For 1 column. */
	&:where(:has(.kg-product-card:only-child)) {
		--landing--container-default--width: 400px;
	}

	/* for 2 columns. */
	&:where(.hash-landing-columns-2, :has(.kg-product-card:nth-child(2n):last-child)) {
		--landing--container-default--width: var(--container-small--width);
	}

	/* for 3 columns. */
	&:where(.hash-landing-columns-3, :has(.kg-product-card:nth-child(3n):last-child)) {
		--landing--container-default--width: var(--container-medium--width);
	}

	/* For 4, 5 columns. */
	&:where(.hash-landing-columns-4, :has(.kg-product-card:nth-child(4n):last-child)),
	&:where(.hash-landing-columns-5, :has(.kg-product-card:nth-child(5n):last-child)) {
		--landing--container-default--width: var(--container-wide--width);
	}
}

/* Responsive. */
@container (width < 1240px) {
	.hash-landing-features-icons.hash-landing-columns-5,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(5n):last-child) {
		--landing--columns: 4;
	}
}

@container (width < 1000px) {
	.hash-landing-features-icons.hash-landing-columns-5,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(5n):last-child),
	.hash-landing-features-icons.hash-landing-columns-4,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(4n):last-child) {
		--landing--columns: 3;
	}
}

@container (width < 760px) {
	.hash-landing-features-icons.hash-landing-columns-5,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(5n):last-child),
	.hash-landing-features-icons.hash-landing-columns-4,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(4n):last-child),
	.hash-landing-features-icons.hash-landing-columns-3,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(3n):last-child) {
		--landing--columns: 2;
	}
}

@container (width < 440px) {
	.hash-landing-features-icons.hash-landing-columns-5,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(5n):last-child),
	.hash-landing-features-icons.hash-landing-columns-4,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(4n):last-child),
	.hash-landing-features-icons.hash-landing-columns-3,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(3n):last-child),
	.hash-landing-features-icons.hash-landing-columns-2,
	.hash-landing-features-icons:has(.kg-product-card:nth-child(2n):last-child) {
		--landing--columns: 1;
	}
}

.section.hash-landing-features-icons {
	--section--content--offset: calc(var(--spacing-9) * 2);

	> .section-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--spacing-10) var(--spacing-9);
	}

	.kg-product-card {
		width: 100%;
		flex: 0 0 calc((100% - var(--spacing-9) * (var(--landing--columns) - 1)) / var(--landing--columns));
		max-width: calc((100% - var(--spacing-9) * (var(--landing--columns) - 1)) / var(--landing--columns));
		max-width: 100%;

		> .kg-product-card-container {
			position: relative;
			align-items: start;
			max-width: 100%;
			padding: 0;
			border-radius: 0;
			grid-row-gap: 0;
			box-shadow: none;
			background-color: transparent;
			color: inherit;
		}

		img {
			width: 44px;
			height: 44px;
			margin-bottom: var(--spacing-8);
			padding: 9px;
			border: 1px solid var(--color-border);
			border-radius: var(--radius-2);
			justify-self: start;
		}

		/* Title. */
		.kg-product-card-title {
			font-size: var(--font-large);
			font-weight: 500;
			line-height: 1.3;
		}

		/* Description. */
		.kg-product-card-description p {
			margin-top: var(--spacing-4);
			font-size: 1rem;
			line-height: inherit;
			opacity: 1;
		}

		/* Button. */
		.kg-product-card-button {
			--button-hover--rotate: 0;
			--button-hover--scale: 1;
			--button-hover--opacity: 0;
			--button--opacity: 0;
			--button--min-height: 100%;
			--button--border-radius: 0;

			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
		}

		/* Hover. */
		&:has(.kg-product-card-button) {
			img {
				transition: transform .4s ease, border-color .3s ease;
			}

			&:hover img {
				transform: scale(1.05) rotate(-4deg);
				border-color: color-mix(in srgb, var(--color-border), var(--color-contrast) 10%);
			}
		}
	}
}

@mixin color-scheme-dark {
	.section.hash-landing-features-icons .kg-product-card img {
		filter: brightness(0) invert();
	}
}
.section.hash-landing-features-split {
	--section--content--offset: calc(var(--spacing-9) * 2);
	--features-split--offset: var(--spacing-9);

	> .section-content {
		flex-direction: column;
		align-items: center;
		gap: calc(var(--spacing-9) * 2) var(--spacing-9);

		> .kg-product-card {
			position: relative;
			display: flex;
			flex-direction: row;
			flex: none;
			width: 100%;
			max-width: var(--container-medium--width);
		}
	}

	.kg-product-card-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-right: auto;
		margin-left: auto;
		padding: 0;
		background-color: transparent;
		grid-row-gap: 0;
		box-shadow: none;

		> .kg-product-card-image {
			border-radius: var(--radius-2);

			@container (width >= 600px) {
				position: absolute;
				top: 0;
				left: 0;
				width: 50%;
				height: 100%;
			}
		}
	}

	/* Title. */
	.kg-product-card-title {
		font-size: 1.875rem; /* 30px */
		font-weight: var(--font-weight-semibold);
		line-height: 1.2;
	}

	/* Description. */
	.kg-product-card-description {
		margin-top: var(--features-split--offset);

		> * {
			margin-top: 0;
			font-size: inherit;
			line-height: inherit;
			opacity: 1;

			+ * {
				margin-top: var(--vertical-rhythm);
			}
		}

		li+li {
			margin-top: var(--vertical-rhythm);
		}
	}

	/* Button. */
	.kg-product-card-button {
		--button--padding-v: var(--spacing-3);
		--button--padding-h: var(--spacing-6);
		--button--min-height: auto;
		--button--background-color: var(--color-background-300);
		--button--color: var(--color-contrast);
		--button-hover--background-color: var(--color-background-400);
		--button-hover--color: var(--color-contrast);

		width: auto;
		margin-top: var(--features-split--offset);

		/* Icon chevron right. */
		&::after {
			width: 1em;
			height: 1em;
			margin-right: -0.2em;
			margin-left: var(--spacing-2);
			background-color: currentcolor;
			content: "";
			mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18L15 12L9 6" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
			mask-size: 100% 100%;
		}
	}

	/* Enable split has image. */
	.kg-product-card:has(.kg-product-card-image) {
		gap: var(--spacing-8);

		.kg-product-card-container {
			width: 100%;
		}

		@container (width >= 600px) {
			&::before {
				content: "";
				flex: 0 0 50%;
				width: 50%;
				max-width: 50%;
				aspect-ratio: var(--landing--aspect-ratio, 3/4);
			}

			.kg-product-card-container {
				max-width: 380px;
				padding-top: var(--spacing-10);
				padding-bottom: var(--spacing-10);
				flex: 0 0 calc(50% - var(--spacing-9));
			}
		}

		@container (width < 600px) {
			flex-direction: column;

			.kg-product-card-image {
				margin-bottom: var(--spacing-10);
			}
		}
	}
}

/* Setting even. */
.section.hash-landing-features-split-even {
	.kg-product-card:has(.kg-product-card-image):nth-child(even) {
		&::before {
			order: 1;
		}

		.kg-product-card-image {
			right: 0;
			left: auto;
		}
	}
}

/* Setting odd. */
.section.hash-landing-features-split-odd {
	.kg-product-card:has(.kg-product-card-image):nth-child(odd) {
		&::before {
			order: 1;
		}

		.kg-product-card-image {
			right: 0;
			left: auto;
		}
	}
}

/* Setting end. */
.section.hash-landing-features-split-end {
	.kg-product-card:has(.kg-product-card-image) {
		&::before {
			order: 1;
		}

		.kg-product-card-image {
			right: 0;
			left: auto;
		}
	}
}
/* Auto columns without #landing-columns- */
.hash-landing-features:not([class*="hash-landing-columns-"]) {
	/* 1 column. */
	&:where(:has(.kg-product-card:only-child)) {
		--landing--columns: 1;
	}

	/* 2 columns. */
	&:where(:has(.kg-product-card:nth-child(2n):last-child)) {
		--landing--columns: 2;
	}

	/* 3 columns. */
	&:where(:has(.kg-product-card:nth-child(3n):last-child)) {
		--landing--columns: 3;
	}

	/* 4 columns. */
	&:where(:has(.kg-product-card:nth-child(4n):last-child)) {
		--landing--columns: 4;
	}

	/* 5 columns. */
	&:where(:has(.kg-product-card:nth-child(5n):last-child)) {
		--landing--columns: 5;
	}
}

/* Auto container without #landing-container-. */
.hash-landing-features:not([class*="hash-landing-container-"]) {
	/* For 1 column. */
	&:where(:has(.kg-product-card:only-child)) {
		--landing--container-default--width: 400px;
	}

	/* for 2 columns. */
	&:where(.hash-landing-columns-2, :has(.kg-product-card:nth-child(2n):last-child)) {
		--landing--container-default--width: var(--container-medium--width);
	}

	/* for 3, 4, 5 columns. */
	&:where(.hash-landing-columns-3, :has(.kg-product-card:nth-child(3n):last-child)),
	&:where(.hash-landing-columns-4, :has(.kg-product-card:nth-child(4n):last-child)),
	&:where(.hash-landing-columns-5, :has(.kg-product-card:nth-child(5n):last-child)) {
		--landing--container-default--width: var(--container-wide--width);
	}
}

/* Responsive. */
@container (width < 1240px) {
	.hash-landing-features.hash-landing-columns-5,
	.hash-landing-features:has(.kg-product-card:nth-child(5n):last-child) {
		--landing--columns: 4;
	}
}

@container (width < 1000px) {
	.hash-landing-features.hash-landing-columns-5,
	.hash-landing-features:has(.kg-product-card:nth-child(5n):last-child),
	.hash-landing-features.hash-landing-columns-4,
	.hash-landing-features:has(.kg-product-card:nth-child(4n):last-child) {
		--landing--columns: 3;
	}
}

@container (width < 760px) {
	.hash-landing-features.hash-landing-columns-5,
	.hash-landing-features:has(.kg-product-card:nth-child(5n):last-child),
	.hash-landing-features.hash-landing-columns-4,
	.hash-landing-features:has(.kg-product-card:nth-child(4n):last-child),
	.hash-landing-features.hash-landing-columns-3,
	.hash-landing-features:has(.kg-product-card:nth-child(3n):last-child) {
		--landing--columns: 2;
	}
}

@container (width < 520px) {
	.hash-landing-features.hash-landing-columns-5,
	.hash-landing-features:has(.kg-product-card:nth-child(5n):last-child),
	.hash-landing-features.hash-landing-columns-4,
	.hash-landing-features:has(.kg-product-card:nth-child(4n):last-child),
	.hash-landing-features.hash-landing-columns-3,
	.hash-landing-features:has(.kg-product-card:nth-child(3n):last-child),
	.hash-landing-features.hash-landing-columns-2,
	.hash-landing-features:has(.kg-product-card:nth-child(2n):last-child) {
		--landing--columns: 1;
	}
}

.section.hash-landing-features {
	--section--content--offset: calc(var(--spacing-9) * 2);

	> .section-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: start;
		gap: var(--spacing-10) var(--spacing-9);
	}

	.kg-product-card {
		width: 100%;
		flex: 0 0 calc((100% - var(--spacing-9) * (var(--landing--columns) - 1)) / var(--landing--columns));
		max-width: calc((100% - var(--spacing-9) * (var(--landing--columns) - 1)) / var(--landing--columns));
		text-align: center;

		> .kg-product-card-container {
			position: relative;
			max-width: 100%;
			padding: 0;
			background-color: transparent;
			color: inherit;
			grid-row-gap: 0;
			box-shadow: none;
		}

		img {
			margin-bottom: var(--spacing-8);
			border-radius: var(--radius-2);
		}

		/* Title. */
		.kg-product-card-title {
			font-size: var(--font-h3);
			font-weight: var(--font-weight-semibold);
			line-height: 1.3;
		}

		/* Description. */
		.kg-product-card-description p {
			margin-top: var(--spacing-4);
			font-size: 1rem;
			line-height: inherit;
			opacity: 1;
		}

		/* Button. */
		.kg-product-card-button {
			--button-hover--rotate: 0;
			--button-hover--scale: 1;
			--button-hover--opacity: 0;
			--button--opacity: 0;
			--button--min-height: 100%;
			--button--border-radius: 0;

			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
		}

		/* Hover. */
		&:has(.kg-product-card-button) {
			img {
				transition: transform .4s ease;
			}

			&:hover img {
				transform: scale(1.01) rotate(-1deg);
			}
		}
	}
}
.section.hash-landing-latest-posts {
	--section--content--offset: calc(var(--spacing-9) * 2);
}
/* Auto columns without #landing-columns- */
.hash-landing-pricing:not([class*="hash-landing-columns-"]) {
	/* 1 column. */
	&:where(:has(.kg-product-card:only-child)) {
		--landing--columns: 1;
	}

	/* 2 columns. */
	&:where(:has(.kg-product-card:nth-child(2n):last-child)) {
		--landing--columns: 2;
	}

	/* 3 columns. */
	&:where(:has(.kg-product-card:nth-child(3n):last-child)) {
		--landing--columns: 3;
	}

	/* 4 columns. */
	&:where(:has(.kg-product-card:nth-child(4n):last-child)) {
		--landing--columns: 4;
	}
}

/* Auto container without #landing-container-. */
.hash-landing-pricing:not([class*="hash-landing-container-"]) {
	/* For 1 column. */
	&:where(:has(.kg-product-card:only-child)) {
		--landing--container-default--width: 400px;
	}

	/* for 2 columns. */
	&:where(.hash-landing-columns-2, :has(.kg-product-card:nth-child(2n):last-child)) {
		--landing--container-default--width: var(--container-small--width);
	}

	/* for 3 columns. */
	&:where(.hash-landing-columns-3, :has(.kg-product-card:nth-child(3n):last-child)) {
		--landing--container-default--width: var(--container-medium--width);
	}

	/* for 4 columns. */
	&:where(.hash-landing-columns-4, :has(.kg-product-card:nth-child(4n):last-child)) {
		--landing--container-default--width: var(--container-wide--width);
	}
}

/* Responsive. */
@container (width < 1000px) {
	.hash-landing-pricing.hash-landing-columns-4,
	.hash-landing-pricing:has(.kg-product-card:nth-child(4n):last-child) {
		--landing--columns: 3;
	}
}

@container (width < 800px) {
	.hash-landing-pricing.hash-landing-columns-3,
	.hash-landing-pricing:has(.kg-product-card:nth-child(3n):last-child),
	.hash-landing-pricing.hash-landing-columns-4,
	.hash-landing-pricing:has(.kg-product-card:nth-child(4n):last-child) {
		--landing--columns: 2;
	}
}

@container (width < 600px) {
	.hash-landing-pricing.hash-landing-columns-2,
	.hash-landing-pricing:has(.kg-product-card:nth-child(2n):last-child),
	.hash-landing-pricing.hash-landing-columns-3,
	.hash-landing-pricing:has(.kg-product-card:nth-child(3n):last-child),
	.hash-landing-pricing.hash-landing-columns-4,
	.hash-landing-pricing:has(.kg-product-card:nth-child(4n):last-child) {
		--landing--columns: 1;
	}
}

/* Pricing. */
.section.hash-landing-pricing {
	--section--content--offset: calc(var(--spacing-9) * 2);

	> .section-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: var(--spacing-10) var(--layout--padding);
	}

	.kg-product-card {
		width: 100%;
		flex: 0 0 calc((100% - var(--spacing-9) * (var(--landing--columns) - 1)) / var(--landing--columns));
		max-width: calc((100% - var(--spacing-9) * (var(--landing--columns) - 1)) / var(--landing--columns));
		max-width: 100%;

		img {
			width: calc(100% + var(--spacing-8) * 2);
			max-width: calc(100% + var(--spacing-8) * 2);
			margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8) calc(var(--spacing-8) * -1);
			border-radius: var(--radius-1);
		}

		/* Title. */
		.kg-product-card-title {
			font-size: var(--font-large);
			font-weight: var(--font-weight-semibold);
			line-height: 1.3;
		}

		.kg-product-card-title-container {
			width: 100%;
		}

		/* Description. */
		.kg-product-card-description > * {
			margin-top: var(--spacing-7);
			font-size: var(--font-medium);
			line-height: inherit;
			opacity: 1;
		}

		.kg-product-card-description {
			margin-bottom: auto;

			strong {
				font-weight: var(--font-weight-medium);
			}
		}

		/* Button. */
		.kg-product-card-button {
			--button-hover--scale: 1.01;
			--button-hover--rotate: -0.6deg;

			margin-top: var(--spacing-8);
		}
	}

	.kg-product-card-container {
		position: relative;
		display: flex;
		flex-direction: column;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		padding: var(--layout--padding);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-2);
		background-color: transparent;
		color: inherit;
		grid-row-gap: 0;
		box-shadow: none;
	}
}
.section.hash-landing-testimonials-cards {
	--section--content--offset: calc(var(--spacing-9) * 2 - var(--spacing-4));
	--section-featured--container-offset: max(calc(50cqi - var(--container-wide--width) * 0.5), var(--layout--padding));

	position: relative;
	width: calc(100cqi + var(--layout--padding) * 2);
	max-width: calc(100cqi + var(--layout--padding) * 2);
	margin-right: calc(var(--layout--padding) * -1);
	margin-left: calc(var(--layout--padding) * -1);
	padding-right: var(--layout--padding);
	padding-left: var(--layout--padding);

	> .section-content {
		position: relative;
		width: calc(100% + var(--layout--padding) * 2);
		max-width: calc(100% + var(--layout--padding) * 2);
		margin-right: calc(var(--layout--padding) * -1);
		margin-bottom: calc(var(--spacing-4) * -1);
		margin-left: calc(var(--layout--padding) * -1);
		container: section-testimonials / inline-size;
	}

	.section-list {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--layout--padding);
		padding: var(--spacing-4) var(--section-featured--container-offset);
		overflow: auto hidden;
		scroll-snap-type: x mandatory;
		scroll-snap-stop: always;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	/* Card. */
	.kg-product-card {
		flex: 0 0 auto;
		scroll-snap-align: start;
		width: calc((100cqi - var(--section-featured--container-offset) * 2 - var(--layout--padding) * 2) / 3);
		scroll-margin-left: var(--section-featured--container-offset);

		@container (width < 1000px) {
			width: calc((100cqi - var(--section-featured--container-offset) * 2 - var(--layout--padding)) / 2);
		}

		@container (width < 700px) {
			width: calc(100cqi - var(--section-featured--container-offset) * 2);
		}

		> .kg-product-card-container {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: var(--spacing-9);
			max-width: 100%;
			min-height: 100%;
			padding: var(--spacing-9);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-2);
			background-color: transparent;
			text-align: center;
			box-shadow: none;

			&:has(> .kg-product-card-button) {
				transition: border-color .3s ease, transform .3s ease;

				&:hover {
					border-color: color-mix(in srgb, var(--color-border), var(--color-contrast) 20%);
					transform: rotate(-1deg) scale(1.02);
				}
			}
		}

		/* Rating. */
		.kg-product-card-rating {
			gap: var(--spacing-4);
			padding-left: 0;
			align-self: center;
			order: 1;
		}

		.kg-product-card-rating-star {
			width: 18px;
			height: 18px;

			&::before {
				display: block;
				width: 100%;
				height: 100%;
				background-color: currentcolor;
				content: "";
				mask-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0001 0.955078L12.6451 7.3145L19.5106 7.86491L14.2798 12.3457L15.8779 19.0452L10.0001 15.4551L4.12221 19.0452L5.72031 12.3457L0.489502 7.86491L7.35503 7.3145L10.0001 0.955078Z" fill="black"/></svg>');
				mask-size: 100% 100%;
			}

			> svg {
				display: none;
			}
		}

		/* Description. */
		.kg-product-card-description {
			margin-top: auto;
			font-size: fluid(16px, 18px);
			font-weight: var(--font-weight-medium);

			&:empty {
				display: none;
			}

			p {
				margin-top: 0;
				font-size: inherit;
				line-height: inherit;
				opacity: 1;
			}
		}

		/* Avatar. */
		.kg-product-card-image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			object-fit: cover;
		}

		/* Title. */
		.kg-product-card-title-container > h4 {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--spacing-3);
			font-size: var(--font-large);
			font-weight: var(--font-weight-semibold);

			> b {
				font-weight: inherit;
			}

			> b + span {
				color: var(--color-secondary);
				font-size: 1rem;
				font-weight: var(--font-weight-regular);
			}
		}

		.kg-product-card-image + .kg-product-card-title-container {
			margin-top: calc(var(--spacing-9) * -1 + var(--spacing-6));
		}

		/* Button. */
		.kg-product-card-button {
			--button-hover--rotate: 0;
			--button-hover--scale: 1;
			--button-hover--opacity: 0;
			--button--opacity: 0;
			--button--min-height: 100%;
			--button--border-radius: 0;

			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	/* Buttons. */
	.section-buttons-wrapper {
		justify-content: center;
		margin-top: calc(var(--vertical-rhythm) * -1 - var(--spacing-4));
	}

	.section-button-next {
		margin-right: 0;
	}

	.section-button-prev {
		margin-left: 0;
	}
}
.section.hash-landing-testimonials {
	--section--content--offset: calc(var(--spacing-9) * 2);

	> .section-content {
		position: relative;
		width: calc(100% + var(--layout--padding) * 2);
		max-width: calc(100% + var(--layout--padding) * 2);
		margin-right: calc(var(--layout--padding) * -1);
		margin-left: calc(var(--layout--padding) * -1);
	}

	.section-list {
		position: relative;
		display: flex;
		justify-content: flex-start;
		overflow: auto hidden;
		gap: var(--layout--gap);
		scroll-snap-type: x mandatory;
  	scroll-snap-stop: always;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		@container (width > 1000px) {
			&::before,
			&::after {
				position: sticky;
				top: 0;
				z-index: 1;
				width: 150px;
				min-width: 150px;
				height: 100%;
				content: "";
				pointer-events: none;
			}

			&::after {
				right: 0;
				margin-left: calc(var(--layout--gap) * -1 - 150px);
				background-image: linear-gradient(90deg, transparent 0%, var(--color-background) 100%);
			}

			&::before {
				left: 0;
				margin-right: calc(var(--layout--gap) * -1 - 150px);
				background-image: linear-gradient(-90deg, transparent 0%, var(--color-background) 100%);
			}
		}
	}

	/* Card. */
	.kg-product-card {
		width: 100%;
		flex: 0 0 auto;
		max-width: 800px;
		padding: 0 var(--layout--padding);
		scroll-snap-align: center;

		&:first-child {
			margin-left: max(0px, calc(50% - 400px));
		}

		&:last-child {
			margin-right: max(0px, calc(50% - 400px));
		}

		> .kg-product-card-container {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: var(--spacing-9);
			max-width: 100%;
			padding: 0;
			background-color: transparent;
			text-align: center;
			box-shadow: none;
		}

		/* Rating. */
		.kg-product-card-rating {
			gap: var(--spacing-4);
			padding-left: 0;
			align-self: center;
			order: -1;
		}

		.kg-product-card-rating-star {
			&::before {
				display: block;
				width: 20px;
				height: 20px;
				background-color: currentcolor;
				content: "";
				mask-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0001 0.955078L12.6451 7.3145L19.5106 7.86491L14.2798 12.3457L15.8779 19.0452L10.0001 15.4551L4.12221 19.0452L5.72031 12.3457L0.489502 7.86491L7.35503 7.3145L10.0001 0.955078Z" fill="black"/></svg>');
				mask-size: 100% 100%;
			}

			> svg {
				display: none;
			}
		}

		/* Description. */
		.kg-product-card-description {
			font-size: fluid(18px, 22px);
			font-weight: var(--font-weight-medium);
			line-height: 1.4;
			order: -1;

			&:empty {
				display: none;
			}

			p {
				margin-top: 0;
				font-size: inherit;
				line-height: inherit;
				opacity: 1;
			}
		}

		/* Avatar. */
		.kg-product-card-image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			object-fit: cover;
		}

		/* Title. */
		.kg-product-card-title-container > h4 {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--spacing-3);
			font-size: var(--font-large);
			font-weight: var(--font-weight-semibold);

			> b {
				font-weight: inherit;
			}

			> b + span {
				color: var(--color-secondary);
				font-size: 1rem;
				font-weight: var(--font-weight-regular);
			}
		}

		.kg-product-card-image + .kg-product-card-title-container {
			margin-top: calc(var(--spacing-9) * -1 + var(--spacing-6));
		}

		/* Button. */
		.kg-product-card-button {
			--button-hover--rotate: 0;
			--button-hover--scale: 1;
			--button-hover--opacity: 0;
			--button--opacity: 0;
			--button--min-height: 100%;
			--button--border-radius: 0;

			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	/* Buttons. */
	.section-buttons-wrapper {
		justify-content: center;
	}

	.section-button-next {
		margin-right: 0;
	}

	.section-button-prev {
		margin-left: 0;
	}
}