/* Deliberate visual fallbacks for pages without a Ghost feature image. */
.sr-page-feature-fallback {
    margin: 0;
    min-height: 310px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}
.sr-fallback-canvas {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 23%),
        radial-gradient(circle at 25% 72%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 26%),
        linear-gradient(145deg, var(--panel-soft), var(--bg-raised));
}
.sr-fallback-grid {
    position: absolute;
    inset: 0;
    opacity: .6;
    background-image:
        linear-gradient(color-mix(in srgb, var(--line) 72%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--line) 72%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
}
.sr-fallback-node {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 8%, transparent);
}
.sr-fallback-node-a { left: 18%; top: 28%; }
.sr-fallback-node-b { left: 43%; top: 58%; border-color: var(--teal); }
.sr-fallback-node-c { right: 23%; top: 22%; }
.sr-fallback-line {
    position: absolute;
    height: 1px;
    background: color-mix(in srgb, var(--accent) 55%, var(--line));
    transform-origin: left center;
}
.sr-fallback-line-a { width: 31%; left: 19%; top: 31%; transform: rotate(24deg); }
.sr-fallback-line-b { width: 28%; left: 44%; top: 59%; transform: rotate(-32deg); background: color-mix(in srgb, var(--teal) 58%, var(--line)); }
.sr-fallback-copy {
    position: absolute;
    z-index: 2;
    right: 5%;
    bottom: 13%;
    width: min(430px, 44%);
    padding: 18px 20px 17px;
    border-top: 2px solid var(--ink);
    background: color-mix(in srgb, var(--bg-raised) 78%, transparent);
    backdrop-filter: blur(7px);
}
.sr-fallback-copy span,
.sr-fallback-copy em {
    display: block;
    color: var(--muted);
    font: 11px/1.5 var(--mono);
    font-style: normal;
}
.sr-fallback-copy span { color: var(--teal); text-transform: uppercase; letter-spacing: .04em; font-weight: 750; }
.sr-fallback-copy strong {
    display: block;
    margin: 8px 0 7px;
    font: 730 clamp(22px, 2.5vw, 34px)/1.05 var(--display);
    letter-spacing: -.035em;
}

/* Research: more network-like and precise. */
.sr-page-feature-fallback-research .sr-fallback-canvas {
    background:
        radial-gradient(circle at 70% 26%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 25%),
        linear-gradient(150deg, var(--code-bg), var(--bg-raised));
}
.sr-page-feature-fallback-research .sr-fallback-node-b { border-radius: 2px; transform: rotate(45deg); }

/* Professional service: calmer, document/editorial feeling. */
.sr-page-feature-fallback-service .sr-fallback-canvas {
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--teal) 7%, var(--panel-soft)), var(--bg-raised));
}
.sr-page-feature-fallback-service .sr-fallback-grid { background-size: 58px 30px; opacity: .45; }
.sr-page-feature-fallback-service .sr-fallback-node-a,
.sr-page-feature-fallback-service .sr-fallback-node-b,
.sr-page-feature-fallback-service .sr-fallback-node-c { border-radius: 2px; }

/* Sandbox: looser and more exploratory. */
.sr-page-feature-fallback-sandbox .sr-fallback-canvas {
    background:
        radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 21%),
        radial-gradient(circle at 30% 72%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 26%),
        var(--bg-raised);
}
.sr-page-feature-fallback-sandbox .sr-fallback-grid {
    background-image: radial-gradient(color-mix(in srgb, var(--line-strong) 70%, transparent) .8px, transparent .8px);
    background-size: 18px 18px;
    mask-image: none;
    opacity: .55;
}
.sr-page-feature-fallback-sandbox .sr-fallback-node-a { width: 20px; height: 20px; }
.sr-page-feature-fallback-sandbox .sr-fallback-node-c { width: 9px; height: 9px; }

/* Generic pages use a neutral research-notebook visual. */
.sr-page-feature-fallback-page .sr-fallback-canvas {
    background:
        radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 22%),
        linear-gradient(145deg, var(--panel-soft), var(--bg-raised));
}

@media (max-width: 760px) {
    .sr-page-feature-fallback,
    .sr-fallback-canvas { min-height: 250px; }
    .sr-fallback-copy {
        left: 20px;
        right: 20px;
        bottom: 20px;
        width: auto;
    }
    .sr-fallback-node-c { right: 14%; }
}