/* ==========================================================================
   Serververse blog theme
   Brand layer on top of Ghost's Source theme (built/screen.css).
   Colours, type and spacing follow www.serververs.com: src/app/tokens.css and
   DESIGN-SYSTEM.md in the website repo. Change them there first, then here.
   Note: the base theme sets html { font-size: 62.5% }, so 1rem = 10px here.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

/* `html:root` outranks the :root accent/font variables that {{ghost_head}} prints
   after this file, so the brand stays fixed whatever is picked in Ghost admin. */
html:root,
html:root[data-theme="dark"] {
    --sv-bg: #0b0b0c;
    --sv-surface: #141416;
    --sv-surface-2: #1c1c1f;
    --sv-line: rgba(255, 255, 255, 0.1);
    --sv-line-strong: rgba(255, 255, 255, 0.18);
    --sv-text: #f4f4f5;       /* 17.9:1 on --sv-bg */
    --sv-text-2: #a1a1aa;     /*  7.2:1 */
    --sv-text-3: #8b8b93;     /*  5.4:1 */
    --sv-accent: #ffa42e;
    --sv-accent-text: #ffa42e; /* 9.9:1 */
    --sv-accent-soft: rgba(255, 164, 46, 0.12);
    --sv-on-accent: #1a1203;   /* 9.4:1 on the orange; never white on orange (2.0:1) */
    --sv-focus: #ffbb63;
    --sv-nav-bg: rgba(14, 14, 16, 0.82);
    color-scheme: dark;
}

html:root[data-theme="light"] {
    --sv-bg: #fafaf9;
    --sv-surface: #ffffff;
    --sv-surface-2: #f4f4f5;
    --sv-line: rgba(0, 0, 0, 0.1);
    --sv-line-strong: rgba(0, 0, 0, 0.18);
    --sv-text: #18181b;       /* 17.0:1 */
    --sv-text-2: #52525b;     /*  7.7:1 */
    --sv-text-3: #63636c;     /*  6.0:1 */
    --sv-accent-text: #b23a0a; /* 6.0:1 */
    --sv-accent-soft: rgba(255, 164, 46, 0.16);
    --sv-focus: #b23a0a;
    --sv-nav-bg: rgba(255, 255, 255, 0.86);
    color-scheme: light;
}

/* Map the base theme's variables onto the tokens (same specificity as its
   :root.has-light-text block, and this file loads later). */
html:root,
:root.has-light-text,
:root.has-dark-text {
    --background-color: var(--sv-bg);
    --color-darker-gray: var(--sv-text);
    --color-primary-text: var(--sv-text);
    --color-secondary-text: var(--sv-text-2);
    --color-dark-gray: var(--sv-text-2);
    --color-mid-gray: var(--sv-text-3);
    --color-light-gray: var(--sv-surface-2);
    --color-lighter-gray: var(--sv-surface-2);
    --color-border: var(--sv-line);
    --color-dark-border: var(--sv-line-strong);
    --ghost-accent-color: var(--sv-accent);

    --sv-font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sv-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans: var(--sv-font-text);
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --gh-font-heading: var(--sv-font-display);
    --gh-font-body: var(--sv-font-text);

    --container-width: 1200px; /* --sv-maxw on the main site */
}

body {
    background-color: var(--sv-bg);
    color: var(--sv-text);
}

::selection {
    background: var(--sv-accent);
    color: var(--sv-on-accent);
}

:focus-visible {
    outline: 2px solid var(--sv-focus);
    outline-offset: 2px;
}

.sv-skip {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--sv-accent);
    color: var(--sv-on-accent);
    font-weight: 700;
    font-size: 15px;
}

.sv-skip:focus {
    top: 12px;
}

/* 2. Type ------------------------------------------------------------------ */

.is-title,
.gh-content :is(h1, h2, h3, h4),
.gh-card-title,
.gh-article-title,
.gh-header-title {
    font-family: var(--sv-font-display);
    text-wrap: balance;
}

.gh-article-title {
    letter-spacing: -0.02em;
}

/* Orange as text uses the accessible variant (dark orange on light). */
.gh-content a,
figcaption a,
.gh-article-tag,
.gh-card-tag {
    color: var(--sv-accent-text);
}

.gh-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.gh-content pre {
    background: var(--sv-surface);
    border: 1px solid var(--sv-line);
    border-radius: 12px;
    color: var(--sv-text);
}

.gh-content :not(pre) > code {
    background: var(--sv-surface-2);
    color: var(--sv-text);
    border-radius: 6px;
}

.gh-content blockquote:not([class]) {
    border-left-color: var(--sv-accent);
}

/* 3. Buttons --------------------------------------------------------------- */

.gh-button,
.sv-btn {
    font-family: var(--sv-font-text);
}

.gh-button {
    background-color: var(--sv-accent);
    color: var(--sv-on-accent);
    font-weight: 700;
}

.gh-button:hover {
    opacity: 1;
    background-color: #f08920;
}

.sv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sv-btn-primary {
    background: var(--sv-accent);
    color: var(--sv-on-accent);
}

.sv-btn-primary:hover {
    background: #f08920;
}

.sv-btn-ghost {
    color: var(--sv-text);
    border-color: var(--sv-line-strong);
}

.sv-btn-ghost:hover {
    background: var(--sv-surface-2);
}

/* 4. Header (floating pill, as on the main site) ----------------------------- */

/* The base theme makes every header link inherit its colour
   (.gh-navigation :is(a:not(.gh-button), …) { color: inherit }), so the header's own
   link colours are scoped to .gh-navigation.sv-nav to outrank it. */
.gh-navigation.sv-nav a.sv-btn-primary {
    color: var(--sv-on-accent);
}

.gh-navigation.sv-nav a.sv-btn-ghost,
.gh-navigation.sv-nav .sv-nav-brand,
.gh-navigation.sv-nav .sv-nav-mobile > a {
    color: var(--sv-text);
}

.gh-navigation.sv-nav .sv-nav-links a {
    color: var(--sv-text-2);
}

.gh-navigation.sv-nav .sv-nav-links a:hover,
.gh-navigation.sv-nav .sv-nav-links a.is-section {
    color: var(--sv-text);
}

.gh-navigation.sv-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    padding: 12px max(4vmin, 16px) 0;
    background: transparent;
    color: var(--sv-text);
    font-size: 15px;
    font-weight: 600;
}

.sv-nav-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    min-height: 60px;
    margin: 0 auto;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--sv-line);
    border-radius: 999px;
    background: var(--sv-nav-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.sv-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sv-text);
    font-family: var(--sv-font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.sv-nav-brand img {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.sv-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
}

.sv-nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--sv-text-2);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sv-nav-links a:hover {
    color: var(--sv-text);
    background: var(--sv-surface-2);
}

.sv-nav-links a.is-section {
    color: var(--sv-text);
    background: var(--sv-accent-soft);
}

.sv-nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.sv-nav .gh-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--sv-text);
}

.sv-nav .gh-icon-button:hover {
    background: var(--sv-surface-2);
}

.sv-nav .gh-icon-button svg {
    width: 20px;
    height: 20px;
}

[data-theme="dark"] .sv-icon-moon,
[data-theme="light"] .sv-icon-sun,
[data-theme="dark"] .sv-label-dark,
[data-theme="light"] .sv-label-light {
    display: none;
}

/* Mobile menu panel (opened by the base theme's script, which toggles .is-open) */
.sv-nav-mobile {
    display: none;
}

@media (max-width: 1080px) {
    .sv-nav-links a[href="/network"],
    .sv-nav-links a[href="/tools"] {
        display: none;
    }
}

@media (max-width: 767px) {
    .sv-nav-links,
    .sv-hide-sm {
        display: none;
    }

    .sv-nav-pill {
        gap: 8px;
        min-height: 56px;
        padding: 6px 6px 6px 10px;
    }

    .sv-nav-actions {
        gap: 2px;
    }

    .sv-nav .gh-burger {
        display: inline-flex;
        margin: 0;
    }

    .sv-nav-actions .sv-btn-primary {
        min-height: 40px;
        padding: 0 14px;
    }

    .sv-nav.is-open .sv-nav-mobile {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 80px;
        left: 12px;
        right: 12px;
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        padding: 8px;
        border: 1px solid var(--sv-line);
        border-radius: 20px;
        background: var(--sv-surface);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    }

    .sv-nav-mobile > a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 12px;
        color: var(--sv-text);
        font-size: 16px;
    }

    .sv-nav-mobile > a:hover,
    .sv-nav-mobile > a.is-section {
        background: var(--sv-surface-2);
    }

    .sv-nav-mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--sv-line);
    }

    .sv-nav-mobile-actions .sv-btn {
        min-height: 46px;
    }
}

@media (max-width: 380px) {
    .sv-nav-brand span {
        display: none;
    }
}

/* 5. Cards, header area, forms ------------------------------------------- */

.gh-card-image,
.gh-article-image img {
    border-radius: 14px;
}

.gh-card-image {
    overflow: hidden;
    background: var(--sv-surface);
}

.gh-form {
    background-color: var(--sv-surface-2);
    border: 1px solid var(--sv-line);
}

.gh-form:hover {
    background-color: var(--sv-surface-2);
    border-color: var(--sv-line-strong);
}

.gh-form-input {
    color: var(--sv-text);
}

.gh-form-input::placeholder {
    color: var(--sv-text-3);
}

/* 6. Footer (mirrors the main site's) ----------------------------------- */

.sv-footer {
    margin-top: clamp(64px, 10vw, 120px);
    padding-top: 48px;
    padding-bottom: 32px;
    border-top: 1px solid var(--sv-line);
    color: var(--sv-text-2);
    font-size: 15px;
}

.sv-signup {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 24px 48px;
    margin-bottom: 56px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--sv-line);
    border-radius: 20px;
    background: var(--sv-surface);
}

.sv-signup-title {
    margin: 0 0 8px;
    color: var(--sv-text);
    font-family: var(--sv-font-display);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.sv-signup-sub {
    margin: 0;
    color: var(--sv-text-2);
    font-size: 16px;
    line-height: 1.55;
}

.sv-signup .gh-form {
    max-width: none;
    margin: 0;
}

.sv-footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--sv-line);
}

.sv-footer-auth {
    display: flex;
    gap: 8px;
}

.sv-footer-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 32px 24px;
    padding: 40px 0;
}

.sv-footer-col h3 {
    margin: 0 0 14px;
    color: var(--sv-text-3);
    font-family: var(--sv-font-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sv-footer-col ul + h3 {
    margin-top: 28px;
}

.sv-footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-footer-col li + li {
    margin-top: 2px;
}

.sv-footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--sv-text-2);
    transition: color 0.15s ease;
}

.sv-footer a:hover {
    color: var(--sv-text);
}

.sv-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--sv-line);
}

.sv-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 14px;
    color: var(--sv-text-3);
}

.sv-footer-legal a {
    color: var(--sv-text);
    font-weight: 600;
}

.sv-footer-social {
    display: flex;
    gap: 4px;
}

.sv-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: var(--sv-text-2);
}

.sv-footer-social a:hover {
    background: var(--sv-surface-2);
}

.sv-footer-social svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 1024px) {
    .sv-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sv-signup {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sv-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }

    .sv-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .sv-footer-legal {
        flex-direction: column;
    }
}

/* 7. Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 8. Landing banner (header style "Landing") --------------------------------
   A rounded brand panel instead of the publication cover photo:
   near-black with orange glows in dark mode, warm white in light mode. */

html:root,
html:root[data-theme="dark"] {
    --sv-hero-bg:
        radial-gradient(60% 90% at 88% 8%, rgba(255, 164, 46, 0.40) 0%, rgba(255, 164, 46, 0) 62%),
        radial-gradient(45% 70% at 4% 100%, rgba(240, 105, 20, 0.30) 0%, rgba(240, 105, 20, 0) 60%),
        radial-gradient(30% 45% at 55% 50%, rgba(255, 164, 46, 0.06) 0%, rgba(255, 164, 46, 0) 70%),
        linear-gradient(160deg, #17140f 0%, #0f0f11 45%, #0b0b0c 100%);
    --sv-hero-grid: rgba(255, 255, 255, 0.045);
    --sv-hero-card: rgba(20, 20, 22, 0.72);
}

html:root[data-theme="light"] {
    --sv-hero-bg:
        radial-gradient(60% 90% at 88% 8%, rgba(255, 164, 46, 0.34) 0%, rgba(255, 164, 46, 0) 62%),
        radial-gradient(45% 70% at 4% 100%, rgba(255, 196, 120, 0.30) 0%, rgba(255, 196, 120, 0) 60%),
        linear-gradient(160deg, #fff8ee 0%, #fdfbf7 50%, #fafaf9 100%);
    --sv-hero-grid: rgba(0, 0, 0, 0.04);
    --sv-hero-card: rgba(255, 255, 255, 0.82);
}

.gh-header.is-classic.sv-landing {
    display: block;
    margin-top: 0;
    padding-block: 24px 8px;
}

.gh-header.is-classic.sv-landing .gh-header-inner {
    display: block;
    max-width: 1200px;
    text-align: left;
}

.sv-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(32px, 6vw, 72px);
    border: 1px solid var(--sv-line);
    border-radius: 28px;
    background: var(--sv-hero-bg);
    overflow: hidden;
}

/* faint grid, fading out towards the bottom, for depth */
.sv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--sv-hero-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--sv-hero-grid) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

.sv-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.gh-header.is-classic.sv-landing .gh-header-title {
    margin: 0;
    max-width: 16ch;
    color: var(--sv-text);
    font-family: var(--sv-font-display);
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.sv-hero-sub {
    margin: 0;
    max-width: 46ch;
    color: var(--sv-text-2);
    font-size: 18px;
    line-height: 1.55;
}

.sv-hero .gh-form {
    width: 100%;
    max-width: 460px;
    margin: 8px 0 0;
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-line-strong);
}

.sv-hero-note {
    margin: 0;
    color: var(--sv-text-3);
    font-size: 14px;
}

.sv-hero-post {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 20px;
    border: 1px solid var(--sv-line);
    border-radius: 20px;
    background: var(--sv-hero-card);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--sv-text);
    transition: border-color 0.15s ease;
}

.sv-hero-post:hover {
    border-color: var(--sv-line-strong);
}

.sv-hero-post-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 6px;
}

.sv-hero-post-label,
.sv-hero-post-title,
.sv-hero-post-meta {
    padding-inline: 6px;
}

.sv-hero-post-label {
    color: var(--sv-accent-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sv-hero-post-title {
    font-family: var(--sv-font-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.sv-hero-post-meta {
    color: var(--sv-text-3);
    font-size: 14px;
}

/* space between banner and the post list */
.gh-header.sv-landing + .gh-container,
.gh-header.sv-landing + .gh-cta + .gh-container {
    padding-top: clamp(40px, 6vw, 72px);
}

@media (max-width: 900px) {
    .sv-hero {
        grid-template-columns: 1fr;
    }

    .sv-hero-post {
        max-width: 520px;
    }
}

@media (max-width: 640px) {
    .gh-header.is-classic.sv-landing {
        padding-block: 16px 0;
    }

    .sv-hero {
        padding: 28px 20px;
        border-radius: 22px;
    }

    .sv-hero-sub {
        font-size: 16px;
    }
}

/* 9. Ghost comments ----------------------------------------------------------
   The comments frame's document uses color-scheme "normal". When the embedding
   element's scheme differs (this theme sets "dark"), browsers paint an opaque white
   backdrop behind the frame. Matching the scheme on the frame element keeps it
   transparent; the frame itself is set to dark/light by serververse.js. */
.gh-comments iframe {
    color-scheme: normal;
}