/* * backbone Landingpage Styles * Source of truth for layout/components/brand usage. * Keep brand tokens in :root unchanged unless explicitly updated by Brand Guide. */        *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Deeper, richer color palette */            --bb-black: #050505;
--bb-white: #FFFFFF;
--bb-purple-light: #8B5CF6;
--bb-purple-dark: #6D28D9;
--bb-accent-blue: #3B82F6;
--bg-body: #F5F3EE;
--bg-surface: rgba(255, 255, 255, 0.7);
--text-primary: #09090B;
--text-secondary: #52525B;
--text-tertiary: #A1A1AA;
--border-dim: rgba(0, 0, 0, 0.05);
--glass-border: rgba(255, 255, 255, 0.8);
/* Advanced Shadow System */            --shadow-micro: 0 2px 4px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,1);
--shadow-float: 0 12px 32px -8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1);
--shadow-heavy: 0 40px 80px -12px rgba(0,0,0,0.3), 0 20px 40px -8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
/* Button Inner Shadow for Tactile Feel */            --button-inner-glow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.1);
--button-inner-glow-hover: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 24px rgba(0,0,0,0.15);
/* Typography */            --serif: 'Instrument Serif Critical', 'Instrument Serif', Georgia, serif;
--sans: 'DM Sans Critical', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--headline-font: 'Inter', var(--sans);
--logo-font: 'Inter', 'DM Sans Critical', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--ink: 'Caveat', cursive;
--marker: 'Kalam', cursive;
--bb-purple: var(--bb-purple-dark); /* Alias — canonical token is --bb-purple-dark */
/* Overview page tokens */
--bg: #F9FAFB;
--bg-dark: #0A0A0B;
--bg-dark-surface: #161618;
--border: rgba(0, 0, 0, 0.08);
--border-hard: rgba(0, 0, 0, 0.15);
--border-dark: rgba(255, 255, 255, 0.08);
--text-dark-primary: rgba(255, 255, 255, 0.95);
--text-dark-secondary: rgba(255, 255, 255, 0.6);
--text-dark-tertiary: rgba(255, 255, 255, 0.35);
--red-alert: #DC2626;
--green: #22C55E;
--shadow-terminal: 0 24px 48px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
--site-header-height: 64px;
--site-header-bg: #FFFFFF;
--site-header-bg-scrolled: #FFFFFF;
--site-header-border: rgba(0, 0, 0, 0.08);
--site-header-border-scrolled: rgba(0, 0, 0, 0.12);
--site-header-shadow-scrolled: 0 12px 30px -26px rgba(15, 23, 42, 0.14);
--site-header-nav-shell: transparent;
--site-header-nav-shell-border: transparent;
--site-header-nav-pill: rgba(255, 255, 255, 0.1);
--site-header-nav-pill-border: transparent;
/* Physics-based Animation Curves */            --spring: cubic-bezier(0.175, 0.885, 0.32, 1.0);
--ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);
--draw-ease: cubic-bezier(0.65, 0, 0.35, 1);
}
        *:focus {
outline: none;
}
*:focus-visible {
outline: 2px solid var(--bb-purple-light);
outline-offset: 4px;
transition: outline-offset 0.2s ease;
}
.back-link:focus-visible {
border-radius: 12px;
}
.back-to-top:focus-visible {
border-radius: 50%;
}
.nav-link:focus-visible, .footer-cta-btn:focus-visible, .btn-header:focus-visible {
border-radius: 8px;
}
.hero-cta-btn:focus-visible, .hero-secondary-btn:focus-visible {
border-radius: 12px;
}
.article-item:focus-visible {
border-radius: 24px;
}
.article-sources-summary:focus-visible {
border-radius: 12px;
}
.site-header:focus-within {
outline: none;
}
::selection {
background: rgba(139, 92, 246, 0.2);
color: var(--bb-purple-dark);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.4);
}
/* White scrollbar for Dark Mode */        html.is-dark-mode ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
}
html.is-dark-mode ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.4);
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* The Ambient Transition for the whole body - timed precisely for the magical fade */        body {
background-color: var(--bg-body);
color: var(--text-primary);
font-family: var(--sans);
line-height: 1.7;
overflow-x: hidden;
transition: background-color 0.9s var(--ease-fluid), color 0.9s var(--ease-fluid);
}
html.is-route-transitioning body {
transition-duration: 0.52s;
transition-timing-function: var(--ease-fluid);
}
html.is-theme-switching body,
html.is-theme-switching .site-header,
html.is-theme-switching .nav-link,
html.is-theme-switching .nav-pill,
html.is-theme-switching .nav-status span,
html.is-theme-switching .btn-header,
html.is-theme-switching .backbone-logo__text,
html.is-theme-switching .backbone-logo__face,
html.is-theme-switching .toc-container,
html.is-theme-switching .floating-action-bar .action-icon-btn,
html.is-theme-switching .back-to-top,
html.is-theme-switching .back-link,
html.is-theme-switching .article-body,
html.is-theme-switching .article-header h1,
html.is-theme-switching .article-header .subtitle,
html.is-theme-switching .premise-text,
html.is-theme-switching .pull-quote,
html.is-theme-switching .sig-name,
html.is-theme-switching .sig-role,
html.is-theme-switching .article-body h2,
html.is-theme-switching .article-body strong,
html.is-theme-switching .quote-source,
html.is-theme-switching .source-item,
html.is-theme-switching .quote-block,
html.is-theme-switching .editorial-premise,
html.is-theme-switching .source-link,
html.is-theme-switching .article-sources-summary,
html.is-theme-switching .article-sources[open] .sources-content,
html.is-theme-switching .sources-summary-label,
html.is-theme-switching .sources-summary-chevron,
html.is-theme-switching .meta-read-time,
html.is-theme-switching .closing,
html.is-theme-switching .closing .accent,
html.is-theme-switching .article-signature,
html.is-theme-switching .next-issue-card,
html.is-theme-switching .next-issue-title,
html.is-theme-switching .next-issue-context,
html.is-theme-switching .next-issue-label,
html.is-theme-switching #siteFooter.footer--dark,
html.is-theme-switching #siteFooter.footer--dark .intake-badge,
html.is-theme-switching #siteFooter.footer--dark .status-text,
html.is-theme-switching #siteFooter.footer--dark .footer-headline,
html.is-theme-switching #siteFooter.footer--dark .founding-context,
html.is-theme-switching #siteFooter.footer--dark .fc-input,
html.is-theme-switching #siteFooter.footer--dark .fc-submit,
html.is-theme-switching #siteFooter.footer--dark .fallback-contact,
html.is-theme-switching #siteFooter.footer--dark .fallback-contact a,
html.is-theme-switching #siteFooter.footer--dark .footer-bottom-row,
html.is-theme-switching #siteFooter.footer--dark .footer-tagline,
html.is-theme-switching #siteFooter.footer--dark .footer-legal,
html.is-theme-switching #siteFooter.footer--dark .footer-legal a {
transition-duration: 3.4s !important;
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html[data-initial-view="privacy"] body,
html.is-privacy-view body {
background-color: #F5F3EE;
}
.view {
display: none;
opacity: 0;
grid-area: 1 / 1;
min-width: 0;
width: 100%;
}
.view.is-active {
display: block;
position: relative;
z-index: 3;
pointer-events: auto;
opacity: 1;
transform: none;
animation: none;
will-change: opacity;
}
.view.view-route-enter {
will-change: opacity;
animation: bbScaleIn var(--route-enter-duration, 450ms) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.view.view-route-shell {
min-height: calc(100vh - var(--site-header-height));
background: var(--route-shell-bg, transparent);
}
.view.view-route-shell.view-route-enter {
animation: none;
}
.view.view-route-shell.view-route-enter:not(.view-route-shell-self) > * {
animation: bbScaleIn var(--route-enter-duration, 450ms) cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: opacity;
}
.view.view-route-shell.view-route-shell-self.view-route-enter {
animation: bbScaleIn var(--route-enter-duration, 450ms) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.view.is-active.view-route-enter {
pointer-events: none;
}
.view.is-exiting {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
pointer-events: none;
animation: bbScaleOut var(--route-exit-duration, 450ms) cubic-bezier(0.4, 0, 0.2, 1) both;
will-change: opacity;
}
@keyframes bbScaleIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes bbScaleOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes viewEnterSpring {
0% {
opacity: 0;
transform: translateY(12px) scale(0.998);
}
55% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.view.is-active.view-return-fade {
animation: viewReturnFade 0.35s var(--ease-fluid) forwards;
}
@keyframes viewReturnFade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Crossfade for seamless Perspectives↔Atlas transitions */
/* Sofort die richtige View zeigen, ohne auf JS zu warten */        html[data-initial-view="overview"] #view-overview,        html[data-initial-view="perspectives"] #view-perspectives,        html[data-initial-view="article-1"] #view-article-1,        html[data-initial-view="article-2"] #view-article-2,        html[data-initial-view="article-3"] #view-article-3,        html[data-initial-view="article-4"] #view-article-4,        html[data-initial-view="article-5"] #view-article-5,        html[data-initial-view="privacy"] #view-privacy {
display: block;
opacity: 1;
animation: none;
}
html[data-initial-view] .view.is-active {
animation: none;
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.view.view-route-enter,
.view.is-active.view-return-fade {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
.view.is-exiting {
animation: none !important;
transform: none !important;
opacity: 0 !important;
}
.view.view-route-shell.view-route-enter > * {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
        html.is-reading-mode body {
background-color: #F5F3EE;
}
html.is-perspectives-view body {
background-color: #F5F3EE;
color: #0A0A0A;
}
html.is-reading-mode .quote-block {
background: linear-gradient(180deg, rgba(245, 243, 238, 0.82), rgba(245, 243, 238, 0.46));
border-color: rgba(236, 233, 227, 0.95);
}
/* Disable scroll-reveal animations in article reading mode */        html.is-reading-mode .reveal {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* --- Midnight Print (Dark Reading Mode) --- */
html.is-reading-mode.is-dark-mode body {
background-color: #1A1A1F;
/* Warm dark gray */            color: #E4E4E7;
/* Soft silver-white */        }
html.is-dark-mode.is-perspectives-view body {
background-color: #F5F3EE;
color: #0A0A0A;
}
/* Smooth transition for all color-changing elements */        .article-body, .article-header h1, .premise-text, .pull-quote, .sig-name,         .article-body h2, .article-body strong, .article-header .subtitle, .quote-source,         .sig-role, .source-item, .quote-block, .editorial-premise, .source-link,         .article-sources-summary, .article-sources[open] .sources-content, .sources-summary-label, .sources-summary-chevron, .meta-read-time,        .closing, .closing .accent, .article-signature,        .next-issue-card, .next-issue-title, .next-issue-context, .next-issue-label {
transition: color 0.9s var(--ease-fluid), background-color 0.9s var(--ease-fluid), border-color 0.9s var(--ease-fluid), box-shadow 0.9s var(--ease-fluid);
}
html.is-route-transitioning .article-body, html.is-route-transitioning .article-header h1, html.is-route-transitioning .premise-text, html.is-route-transitioning .pull-quote, html.is-route-transitioning .sig-name, html.is-route-transitioning .article-body h2, html.is-route-transitioning .article-body strong, html.is-route-transitioning .article-header .subtitle, html.is-route-transitioning .quote-source, html.is-route-transitioning .sig-role, html.is-route-transitioning .source-item, html.is-route-transitioning .quote-block, html.is-route-transitioning .editorial-premise, html.is-route-transitioning .source-link, html.is-route-transitioning .article-sources-summary, html.is-route-transitioning .article-sources[open] .sources-content, html.is-route-transitioning .sources-summary-label, html.is-route-transitioning .sources-summary-chevron, html.is-route-transitioning .meta-read-time, html.is-route-transitioning .closing, html.is-route-transitioning .closing .accent, html.is-route-transitioning .article-signature, html.is-route-transitioning .next-issue-card, html.is-route-transitioning .next-issue-title, html.is-route-transitioning .next-issue-context, html.is-route-transitioning .next-issue-label {
transition-duration: 0.48s;
transition-timing-function: ease;
}
/* Typography overrides for Dark Mode */        html.is-reading-mode.is-dark-mode .article-header h1,        html.is-reading-mode.is-dark-mode .article-body h2,        html.is-reading-mode.is-dark-mode .premise-text,        html.is-reading-mode.is-dark-mode .pull-quote,        html.is-reading-mode.is-dark-mode .sig-name,        html.is-reading-mode.is-dark-mode .article-body strong,        html.is-reading-mode.is-dark-mode .closing {
color: #F4F4F5;
/* Crisp white for hierarchy */        }
html.is-reading-mode.is-dark-mode .article-body {
color: #E4E4E7;
}
html.is-reading-mode.is-dark-mode .article-header .subtitle,        html.is-reading-mode.is-dark-mode .sig-role,        html.is-reading-mode.is-dark-mode .quote-source,        html.is-reading-mode.is-dark-mode .source-item {
color: #A1A1AA;
/* Muted tech gray */        }
html.is-reading-mode.is-dark-mode .meta-read-time {
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.25);
color: #C084FC;
/* Glowing purple */        }
html.is-reading-mode.is-dark-mode .closing .accent {
color: #C084FC;
/* Bright glowing purple for dark mode */        }
/* Structural elements in Dark Mode */        html.is-reading-mode.is-dark-mode .editorial-premise {
border-bottom-color: rgba(255,255,255,0.08);
}
html.is-reading-mode.is-dark-mode .quote-block {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border-color: rgba(255,255,255,0.06);
box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
html.is-reading-mode.is-dark-mode .quote-block::before,        html.is-reading-mode.is-dark-mode .pull-quote::before {
color: rgba(255,255,255,0.03);
}
/* Sources Accordion in Dark Mode */        html.is-reading-mode.is-dark-mode .article-sources-summary {
border-top-color: rgba(255,255,255,0.08);
}
html.is-reading-mode.is-dark-mode .article-sources-summary:hover {
border-top-color: rgba(255,255,255,0.16);
}
html.is-reading-mode.is-dark-mode .article-sources-summary:focus-visible {
outline-color: rgba(192, 132, 252, 0.42);
}
html.is-reading-mode.is-dark-mode .sources-summary-label,
html.is-reading-mode.is-dark-mode .sources-summary-chevron {
color: rgba(228, 228, 231, 0.5);
}
html.is-reading-mode.is-dark-mode .article-sources-summary:hover .sources-summary-label,
html.is-reading-mode.is-dark-mode .article-sources-summary:hover .sources-summary-chevron,
html.is-reading-mode.is-dark-mode .article-sources[open] .sources-summary-label,
html.is-reading-mode.is-dark-mode .article-sources[open] .sources-summary-chevron {
color: rgba(244, 244, 245, 0.76);
}
html.is-reading-mode.is-dark-mode .source-link {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.1);
color: #E4E4E7;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
html.is-reading-mode.is-dark-mode .source-link:hover {
background: rgba(139, 92, 246, 0.15);
color: #C084FC;
border-color: rgba(139, 92, 246, 0.4);
}
html.is-reading-mode.is-dark-mode .source-ref {
background: rgba(255,255,255,0.05);
color: #A1A1AA;
}
/* Inline Deep Links in Text */        .inline-link {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(0,0,0,0.4);
/* Dunklerer Unterstrich */            text-decoration-thickness: 2px;
/* Dickerer Unterstrich */            text-underline-offset: 4px;
font-style: italic;
            transition: all 0.3s ease;
position: relative;
}
.inline-link::after {
content: '';
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-left: 0.25em;
vertical-align: -0.05em;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 0.4;
transition: all 0.4s var(--spring);
}
.inline-link:hover {
color: var(--bb-purple-dark);
text-decoration-color: var(--bb-purple-dark);
background: rgba(139, 92, 246, 0.05);
}
.inline-link:hover::after {
opacity: 1;
transform: translate(2px, -2px) scale(1.1);
}
html.is-reading-mode.is-dark-mode .inline-link {
text-decoration-color: rgba(255,255,255,0.4);
/* Hellerer Unterstrich im Dark Mode */        }
html.is-reading-mode.is-dark-mode .inline-link:hover {
color: #C084FC;
text-decoration-color: #C084FC;
background: rgba(192, 132, 252, 0.1);
}
.target-glow {
animation: glowFadeOut 4s ease forwards;
            border-radius: 4px;
            padding: 2px 4px;
margin: -2px -4px;
display: inline;
        }
@keyframes glowFadeOut {
0% {
background: rgba(139, 92, 246, 0.12);
box-shadow: -3px 0 0 #6D28D9;
}
50% {
background: rgba(139, 92, 246, 0.12);
box-shadow: -3px 0 0 #6D28D9;
}
            100% {
background: transparent;
box-shadow: -3px 0 0 transparent;
}
}
html.is-reading-mode.is-dark-mode .target-glow {
animation: glowFadeOutDark 4s ease forwards;
}
@keyframes glowFadeOutDark {
0% {
background: rgba(192, 132, 252, 0.2);
box-shadow: -3px 0 0 #C084FC;
}
50% {
background: rgba(192, 132, 252, 0.2);
box-shadow: -3px 0 0 #C084FC;
}
            100% {
background: transparent;
box-shadow: -3px 0 0 transparent;
}
}
.wh-sentence-wrap {
    display: inline;
}
.wh-sentence-wrap.target-glow {
    display: inline;
}
/* Glow on panel wormhole links (flex items) */
.cp-wormhole.target-glow {
    display: flex;
}
@keyframes rw-pill-spring-up {
0% {
transform: translate(-50%, 30px);
opacity: 0;
}
100% {
transform: translate(-50%, 0);
opacity: 1;
}
}
.return-wormhole-pill {
position: fixed;
bottom: 40px;
left: 50%;
transform: translate(-50%, 24px);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 220;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
-webkit-transform: translate3d(-50%, 24px, 0);
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.return-wormhole-pill.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
-webkit-transform: translate3d(-50%, 0, 0);
animation: rw-pill-spring-up 0.7s var(--spring) both;
}
.rw-command-btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: var(--sans);
background: rgba(9, 9, 11, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.12);
height: 48px;
border-radius: 999px;
box-shadow: 0 16px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
transition: transform 0.3s var(--smooth), border-color 0.3s var(--smooth), box-shadow 0.3s var(--smooth), color 0.3s var(--smooth);
outline: none;
}
.rw-command-btn:hover {
border-color: rgba(255,255,255,0.3);
transform: translateY(-2px);
}
.rw-command-btn:active {
transform: translateY(0) scale(0.97);
transition: transform 0.1s ease;
}
.rw-command-btn:focus-visible {
box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.4), 0 20px 40px rgba(0,0,0,0.3);
border-color: #6D28D9;
transform: translateY(-2px);
}
.rw-return-command {
padding: 0 20px 0 24px;
gap: 10px;
color: #FAFAFA;
}
.rw-return-command:hover {
box-shadow: 0 0 0 4px rgba(255,255,255,0.08), 0 20px 40px rgba(0,0,0,0.3);
}
.rw-return-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #A1A1AA;
transition: color 0.3s ease;
}
.rw-return-icon svg {
width: 15px;
height: 15px;
transition: transform 0.5s var(--spring);
}
.rw-return-command:hover .rw-return-icon,
.rw-return-command:focus-visible .rw-return-icon {
color: #FFFFFF;
}
.rw-return-command:hover .rw-return-icon svg,
.rw-return-command:focus-visible .rw-return-icon svg {
transform: translateX(-4px);
}
.rw-command-label {
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
letter-spacing: 0.02em;
}
.rw-dismiss-command {
padding: 0 16px;
color: #A1A1AA;
}
.rw-dismiss-command:hover {
border-color: rgba(239, 68, 68, 0.4);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15), 0 20px 40px rgba(0,0,0,0.2);
}
.rw-dismiss-kbd {
background: linear-gradient(180deg, #27272A, #18181B);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 0 rgba(0,0,0,1);
color: #E4E4E7;
padding: 3px 8px;
border-radius: 6px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
transform: translateY(-1px);
transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.rw-dismiss-command:hover .rw-dismiss-kbd,
.rw-dismiss-command:focus-visible .rw-dismiss-kbd {
color: #FCA5A5;
border-color: rgba(239, 68, 68, 0.3);
}
.rw-dismiss-command:active .rw-dismiss-kbd {
transform: translateY(1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 rgba(0,0,0,1);
}
html.is-reading-mode.is-dark-mode .rw-command-btn {
background: rgba(9, 9, 11, 0.92);
box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
@media (max-width: 640px) {
.return-wormhole-pill {
gap: 10px;
}
.rw-command-btn {
height: 46px;
}
.rw-return-command {
padding: 0 18px 0 22px;
}
.rw-dismiss-command {
padding: 0 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.return-wormhole-pill,
.return-wormhole-pill.is-visible,
.rw-command-btn,
.rw-return-icon,
.rw-return-icon svg,
.rw-dismiss-kbd {
transition: none;
animation: none;
}
.rw-command-btn:hover,
.rw-command-btn:focus-visible,
.rw-command-btn:active,
.rw-return-command:hover .rw-return-icon svg,
.rw-return-command:focus-visible .rw-return-icon svg,
.rw-dismiss-command:active .rw-dismiss-kbd {
transform: none;
}
}
/* Back Link overrides in Dark Mode */        html.is-reading-mode.is-dark-mode .back-link {
color: #A1A1AA;
}
html.is-reading-mode.is-dark-mode .back-link:hover {
color: #F4F4F5;
}
html.is-reading-mode.is-dark-mode .back-link--article,
html.is-reading-mode.is-dark-mode .back-link--article:hover,
html.is-reading-mode.is-dark-mode .back-link--article:focus-visible {
color: #F4F4F5;
}
html.is-reading-mode.is-dark-mode .back-link--article {
background: rgba(255,255,255,0.12);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
html.is-reading-mode.is-dark-mode .back-link--article:hover,
html.is-reading-mode.is-dark-mode .back-link--article:focus-visible {
background: rgba(255,255,255,0.18);
}
/* Ink on Paper buttons — Dark Mode inversion */
html.is-dark-mode .hero-cta-btn,
html.is-dark-mode .next-issue-btn,
html.is-dark-mode .fc-submit {
background: #F4F4F5;
color: #09090B;
}
html.is-dark-mode .hero-cta-btn:hover,
html.is-dark-mode .next-issue-btn:hover,
html.is-dark-mode .fc-submit:hover {
background: #FFFFFF;
box-shadow: 0 8px 24px -8px rgba(255,255,255,0.15);
}
html.is-dark-mode .hero-secondary-btn {
border-color: rgba(255,255,255,0.16);
color: #F4F4F5;
}
html.is-dark-mode .hero-secondary-btn:hover {
border-color: rgba(255,255,255,0.4);
color: #FFFFFF;
}
html.is-dark-mode .fc-input:focus {
border-color: #F4F4F5;
box-shadow: 0 0 0 4px rgba(255,255,255,0.06), inset 0 2px 4px rgba(0,0,0,0.02);
}
html.is-dark-mode .article-arrow-wrap {
background: #F4F4F5;
border-color: #F4F4F5;
color: #09090B;
}
html.is-dark-mode .article-item:hover .article-arrow-wrap {
background: #FFFFFF;
border-color: #FFFFFF;
box-shadow: 0 8px 24px -8px rgba(255,255,255,0.15);
}
/* Action Bar adjustments in Dark Mode */        html.is-reading-mode.is-dark-mode .floating-action-bar .action-icon-btn {
background: rgba(26, 26, 31, 0.85);
border-color: rgba(255,255,255,0.1);
color: #A1A1AA;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
html.is-reading-mode.is-dark-mode .floating-action-bar .action-icon-btn:hover {
background: #27272A;
color: #F4F4F5;
border-color: rgba(255,255,255,0.2);
}
html.is-reading-mode.is-dark-mode .floating-action-bar .action-icon-btn.is-copied {
background: rgba(255,255,255,0.1);
color: #F4F4F5;
}
html.is-reading-mode.is-dark-mode .floating-divider {
background: rgba(255,255,255,0.1);
}
html.is-reading-mode.is-dark-mode .back-to-top {
background: rgba(255,255,255,0.12);
color: #F4F4F5;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
html.is-reading-mode.is-dark-mode .back-to-top:hover {
background: rgba(255,255,255,0.18);
color: #F4F4F5;
}
        .page {
max-width: 740px;
margin: 0 auto;
padding: 80px 24px 0;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.article-container {
max-width: 650px;
margin: 0 auto;
position: relative;
left: 0;
transition: left 0.4s var(--spring);
}
.backbone-logo {
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: var(--backbone-logo-gap, 0.16em);
text-decoration: none;
cursor: pointer;
transition: none;
transform-origin: left center;
--backbone-logo-gap: 0.16em;
--backbone-logo-mark-size: 1.08em;
--backbone-logo-mark-y: -0.06em;
--backbone-logo-text-color: #0A0A0A;
--backbone-logo-face-top: #8B5CF6;
--backbone-logo-face-left: #6D28D9;
--backbone-logo-face-right: #4C1D95;
}
.backbone-logo:hover {
transform: none;
}
.site-header .backbone-logo {
transition: none;
--backbone-logo-mark-size: 37px;
--backbone-logo-mark-y: -2px;
--backbone-logo-text-color: #0A0A0A;
--backbone-logo-face-top: #8B5CF6;
--backbone-logo-face-left: #6D28D9;
--backbone-logo-face-right: #4C1D95;
}
.backbone-logo--header {
font-size: 34px;
}
.backbone-logo--footer {
font-size: 20px;
}
.site-header .backbone-logo:hover {
transform: none;
opacity: 1;
}
.backbone-logo__impact {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible;
z-index: 1;
}
.backbone-logo__impact-ring,
.backbone-logo__impact-dust {
position: absolute;
left: 50%;
top: 78%;
width: 0;
height: 0;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
.backbone-logo__text {
font-family: var(--logo-font);
font-weight: 700;
font-style: normal;
text-transform: lowercase;
line-height: 1;
letter-spacing: -0.05em;
color: var(--backbone-logo-text-color);
transition: color 1.5s ease-in-out;
}
.backbone-logo__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--backbone-logo-mark-size);
height: var(--backbone-logo-mark-size);
transform: translateY(var(--backbone-logo-mark-y));
flex-shrink: 0;
position: relative;
overflow: visible;
transition: transform 0.3s var(--spring), width 0.3s var(--spring), height 0.3s var(--spring);
}
.backbone-logo__stone {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 2;
overflow: visible;
}
.backbone-logo__face {
transition: fill 1.5s ease-in-out;
}
.backbone-logo__face--top {
fill: var(--backbone-logo-face-top);
}
.backbone-logo__face--left {
fill: var(--backbone-logo-face-left);
}
.backbone-logo__face--right {
fill: var(--backbone-logo-face-right);
}
.site-header .backbone-logo--impact .backbone-logo__mark {
transform-origin: 50% 100%;
}
.site-header .backbone-logo--impact[data-logo-impact="pending"] .backbone-logo__mark {
opacity: 0;
}
.site-header .backbone-logo--impact .backbone-logo__impact-ring {
border: 1.5px solid rgba(35, 28, 18, 0.08);
}
.site-header .backbone-logo--impact .backbone-logo__impact-dust {
background: radial-gradient(
ellipse,
rgba(174, 163, 142, 0.34) 0%,
rgba(174, 163, 142, 0.16) 42%,
rgba(174, 163, 142, 0.05) 68%,
transparent 84%
);
filter: blur(0.2px);
}
.site-header .backbone-logo--impact[data-logo-impact="playing"] .backbone-logo__mark {
animation: bbHeaderLogoDrop 0.78s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}
.site-header .backbone-logo--impact[data-logo-impact="playing"] .backbone-logo__impact-ring {
animation: bbHeaderLogoImpactRing 0.52s cubic-bezier(0.14, 0.78, 0.2, 1) 0.46s both;
}
.site-header .backbone-logo--impact[data-logo-impact="playing"] .backbone-logo__impact-dust {
animation: bbHeaderLogoImpactDust 0.58s cubic-bezier(0.16, 0.72, 0.24, 1) 0.5s both;
}
@keyframes bbHeaderLogoDrop {
0% {
transform: translateY(calc(var(--backbone-logo-mark-y) - 2.18em)) scaleX(0.992) scaleY(1.018);
opacity: 0;
}
18% {
opacity: 1;
}
62% {
transform: translateY(calc(var(--backbone-logo-mark-y) + 0.034em)) scaleX(1.01) scaleY(0.983);
opacity: 1;
}
74% {
transform: translateY(calc(var(--backbone-logo-mark-y) - 0.012em)) scaleX(0.998) scaleY(1.005);
opacity: 1;
}
86% {
transform: translateY(calc(var(--backbone-logo-mark-y) + 0.004em)) scaleX(1.002) scaleY(0.998);
opacity: 1;
}
100% {
transform: translateY(var(--backbone-logo-mark-y)) scaleX(1) scaleY(1);
opacity: 1;
}
}
@keyframes bbHeaderLogoImpactRing {
0% {
width: 0.76em;
height: 0.085em;
opacity: 0;
border-width: 1.8px;
}
14% {
opacity: 0.82;
}
100% {
width: 4.8em;
height: 0.28em;
opacity: 0;
border-width: 0.35px;
}
}
@keyframes bbHeaderLogoImpactDust {
0% {
width: 0.34em;
height: 0.035em;
opacity: 0;
}
18% {
opacity: 0.56;
}
100% {
width: 3.5em;
height: 0.17em;
opacity: 0;
}
}
html.is-dark-mode.is-reading-mode .backbone-logo {
--backbone-logo-text-color: #FFFFFF;
--backbone-logo-face-top: #A78BFA;
--backbone-logo-face-left: #7C3AED;
--backbone-logo-face-right: #5B21B6;
}
html.is-dark-mode.is-reading-mode .site-header .backbone-logo {
--backbone-logo-text-color: #0A0A0A;
--backbone-logo-face-top: #8B5CF6;
--backbone-logo-face-left: #6D28D9;
--backbone-logo-face-right: #4C1D95;
}
@media (prefers-reduced-motion: reduce) {
.site-header .backbone-logo--impact .backbone-logo__mark,
.site-header .backbone-logo--impact .backbone-logo__impact-ring,
.site-header .backbone-logo--impact .backbone-logo__impact-dust {
animation: none !important;
transition: none !important;
}
.site-header .backbone-logo--impact .backbone-logo__mark {
transform: translateY(var(--backbone-logo-mark-y)) !important;
opacity: 1 !important;
}
.site-header .backbone-logo--impact .backbone-logo__impact {
display: none !important;
}
}
html.is-dark-mode.is-reading-mode {
--site-header-bg: #FFFFFF;
--site-header-bg-scrolled: #FFFFFF;
--site-header-border: rgba(0, 0, 0, 0.08);
--site-header-border-scrolled: rgba(0, 0, 0, 0.12);
--site-header-shadow-scrolled: 0 12px 30px -26px rgba(15, 23, 42, 0.14);
--site-header-nav-shell: transparent;
--site-header-nav-shell-border: transparent;
--site-header-nav-pill: rgba(255, 255, 255, 0.1);
--site-header-nav-pill-border: transparent;
}
html.is-dark-mode.is-reading-mode .site-header .logo {
color: #FFFFFF;
}
html.is-dark-mode.is-reading-mode .site-header {
background-color: var(--site-header-bg);
border-bottom-color: var(--site-header-border);
}
html.is-dark-mode.is-reading-mode .site-header.is-scrolled {
background-color: var(--site-header-bg-scrolled);
border-bottom-color: var(--site-header-border-scrolled);
box-shadow: var(--site-header-shadow-scrolled);
}
html.is-dark-mode.is-reading-mode .nav-link {
color: rgba(9,9,11,0.68);
}
html.is-dark-mode.is-reading-mode .nav-link:hover {
color: #09090B;
}
html.is-dark-mode.is-reading-mode .nav-link.active {
color: #09090B;
}
html.is-dark-mode.is-reading-mode .nav-center {
background: var(--site-header-nav-shell);
box-shadow: none;
}
html.is-dark-mode.is-reading-mode .nav-pill {
background: var(--site-header-nav-pill);
box-shadow: none;
}
html.is-dark-mode.is-reading-mode .nav-status span {
color: #18181B;
}
html.is-dark-mode.is-reading-mode .btn-header {
background: #09090B;
color: #FFFFFF;
}
html.is-dark-mode.is-reading-mode .btn-header:hover {
background: #18181B;
}
html.is-dark-mode:not(.is-reading-mode) body {
background-color: #F5F3EE;
color: #0A0A0A;
}
/* ══════════════════════════════════════
   ENTERPRISE HEADER
   ══════════════════════════════════════ */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
background-color: var(--site-header-bg);
border-bottom: 1px solid var(--site-header-border);
height: var(--site-header-height);
z-index: 1000;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
/* Reveal: slow, soft spring — feels like it floats in */
transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.44s cubic-bezier(0.25, 0.1, 0.25, 1),
            background-color 0.32s ease,
            border-color 0.32s ease,
            box-shadow 0.32s ease;
will-change: transform, opacity;
}
.site-header.is-scrolled {
background-color: var(--site-header-bg-scrolled);
border-bottom-color: var(--site-header-border-scrolled);
box-shadow: var(--site-header-shadow-scrolled);
}
.site-header.is-hidden {
transform: translateY(-100%) !important;
opacity: 0 !important;
pointer-events: none;
/* Hide: softer exit for reading flow */
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.34s cubic-bezier(0.25, 0.1, 0.25, 1),
            border-color 0.4s ease;
}
html.is-restoring-article-scroll .site-header {
transform: translateY(-100%) !important;
opacity: 0 !important;
pointer-events: none;
}
.header-inner {
width: 100%;
max-width: 1200px;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Sliding Nav Pill */
.nav-center {
display: flex;
gap: 36px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background: var(--site-header-nav-shell);
border: 0;
box-shadow: none;
}
.nav-pill {
display: none;
}
.nav-link {
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
color: rgba(9,9,11,0.68);
text-decoration: none;
padding: 4px 0;
position: relative;
z-index: 2;
transition: color 0.2s;
cursor: pointer;
}
.nav-link:hover { color: #09090B; }
.nav-link.active { color: #09090B; font-weight: 600; }
.header-right {
display: flex;
align-items: center;
gap: 12px;
}
.nav-status {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 0 16px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.14);
background: rgba(255,255,255,0.92);
}
.nav-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 0 4px rgba(16,185,129,0.12), 0 0 14px rgba(16,185,129,0.45);
animation: statusBlink 2.4s ease-in-out infinite;
}
@keyframes statusBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.92); } }
.nav-status span {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: #18181B;
}
.btn-header {
background: #09090B;
color: #FFFFFF;
padding: 9px 20px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.12);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-header:hover {
transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(0,0,0,0.18);
background: #18181B;
}
.btn-header:active {
transform: scale(0.96) translateY(0);
transition: transform 0.05s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* ══════════════════════════════════════
   OVERVIEW — New full-width layout
   ══════════════════════════════════════ */
#view-overview {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding: 0;
max-width: none;
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 840px; margin: 0 auto; padding: 0 24px; }
.eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 20px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.eyebrow::before {
content: '';
width: 2px; height: 12px;
background: var(--text-tertiary);
opacity: 0.5;
border-radius: 1px;
}
.eyebrow.dark { color: var(--text-dark-tertiary); }
.eyebrow.center { justify-content: center; width: 100%; }
#view-overview .section-title {
font-family: var(--serif);
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.02em;
text-wrap: balance;
}
/* HERO */
.hero {
padding: 140px 0 80px;
min-height: 88vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-content {
max-width: 860px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.hero-title {
font-family: var(--serif);
font-size: clamp(48px, 7vw, 80px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.03em;
margin-bottom: 28px;
color: var(--text-primary);
}
.hero-dynamic { display: inline-block; position: relative; }
#view-overview .hero-typer { color: var(--text-primary); transition: color 0.2s ease; display: inline; }
#view-overview .hero-typer.is-governed { color: var(--bb-purple); }
#view-overview .hero-cursor {
display: inline-block;
width: 4px; height: 0.82em;
background: var(--text-primary);
margin-left: 3px;
vertical-align: baseline;
border-radius: 2px;
animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero-subtitle {
font-size: 19px;
color: var(--text-secondary);
margin-bottom: 36px;
max-width: 500px;
line-height: 1.55;
}
.hero-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 44px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
padding: 14px 28px;
border-radius: 12px;
text-decoration: none;
transition: all 0.25s ease;
cursor: pointer;
border: none;
}
.btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--spring); }
.btn-primary {
background: var(--text-primary);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.12);
}
.btn-primary:hover {
background: #18181B;
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px -8px rgba(0,0,0,0.25);
}
.btn-primary:hover svg { transform: translateX(3px); }
.btn-secondary {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-hard);
}
.btn-secondary:hover {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.25);
}
.trust-row {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.trust-chip {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 7px;
}
.trust-chip svg { width: 14px; height: 14px; color: var(--text-tertiary); }
.trust-divider {
width: 1px;
height: 16px;
background: var(--border-hard);
align-self: center;
}
/* DARK BAND */
.dark-band {
background: var(--bg-dark);
color: var(--text-dark-primary);
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
padding: 72px 0;
}
.shift-statement {
text-align: center;
max-width: 740px;
margin: 0 auto 52px;
}
.shift-statement .section-title { margin-bottom: 20px; }
.shift-body {
font-size: 18px;
color: var(--text-dark-secondary);
line-height: 1.65;
max-width: 620px;
margin: 0 auto;
}
.incident-callout {
max-width: 720px;
margin: 0 auto 60px;
padding: 24px 32px;
background: rgba(220, 38, 38, 0.06);
border: 1px solid rgba(220, 38, 38, 0.15);
border-radius: 16px;
}
.incident-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--red-alert);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.incident-label::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--red-alert);
animation: pulse-red 2s ease-in-out infinite;
}
@keyframes pulse-red {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.incident-text {
font-size: 16px;
color: rgba(255,255,255,0.85);
line-height: 1.6;
}
.incident-source {
margin-top: 12px;
font-family: var(--mono);
font-size: 11px;
color: rgba(255,255,255,0.3);
}
.problem-header { margin-bottom: 32px; }
.problem-header .section-title {
font-size: clamp(28px, 4vw, 44px);
color: var(--text-dark-primary);
}
.problem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border-dark);
border: 1px solid var(--border-dark);
border-radius: 20px;
overflow: hidden;
}
.problem-cell {
background: var(--bg-dark);
padding: 40px 36px;
transition: background 0.3s ease;
}
.problem-cell:hover { background: var(--bg-dark-surface); }
.problem-kicker {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--text-dark-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.problem-title {
font-family: var(--serif);
font-size: 28px;
line-height: 1.1;
margin-bottom: 14px;
color: var(--text-dark-primary);
}
.problem-desc {
font-size: 14.5px;
color: var(--text-dark-secondary);
line-height: 1.6;
}
/* WHAT WE DO */
.what-section { padding: 72px 0 56px; }
.what-header {
text-align: center;
max-width: 640px;
margin: 0 auto 40px;
}
.what-header .section-title { margin-bottom: 20px; }
.what-header p {
font-size: 17px;
color: var(--text-secondary);
line-height: 1.6;
}
.code-terminal-full {
background: var(--bg-dark);
border-radius: 20px;
box-shadow: var(--shadow-terminal);
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
margin-bottom: 48px;
}
.code-terminal-full .code-bar {
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
background: rgba(255,255,255,0.02);
}
.code-terminal-full .code-lang { margin-left: auto; margin-right: auto; }
.code-terminal-full .code-copy-btn {
background: none; border: none; cursor: pointer; padding: 4px;
opacity: 0.3; transition: opacity 0.2s;
}
.code-terminal-full .code-copy-btn:hover { opacity: 0.7; }
.code-terminal-full .code-copy-btn svg { width: 14px; height: 14px; color: #fff; stroke: rgba(255,255,255,0.5); }
.code-dots { display: flex; gap: 6px; }
.code-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.code-lang {
font-family: var(--mono); font-size: 10px; font-weight: 600;
letter-spacing: 0.08em; color: rgba(255,255,255,0.3); text-transform: uppercase;
}
.code-body-full {
padding: 24px 36px;
font-family: var(--mono);
font-size: 13.5px;
line-height: 2.2;
color: #E4E4E7;
overflow-x: auto;
white-space: pre-wrap;
}
.terminal-cursor {
display: inline-block; width: 8px; height: 16px;
vertical-align: middle; border-radius: 1px;
animation: blink 1s step-end infinite;
}
.purple-cursor { background: var(--bb-purple); }
.sy-comment { color: #6B7280; }
.sy-keyword { color: #C084FC; }
.sy-decorator { color: #F59E0B; }
.sy-string { color: #34D399; }
.sy-fn { color: #60A5FA; }
.flow-visual {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 0;
align-items: stretch;
max-width: 960px;
margin: 0 auto;
}
.flow-step {
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px 22px;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flow-step:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.flow-step-number {
font-family: var(--mono); font-size: 11px; font-weight: 700;
color: var(--text-tertiary); letter-spacing: 0.1em; margin-bottom: 16px;
}
.flow-step-title {
font-family: var(--serif); font-size: 26px; line-height: 1.1; margin-bottom: 8px;
}
.flow-step-desc {
font-size: 14.5px; color: var(--text-secondary); line-height: 1.55;
}
.flow-arrow {
display: flex; align-items: center; justify-content: center;
padding: 0 8px; color: var(--text-tertiary);
}
.flow-arrow svg { width: 24px; height: 24px; }
/* WHO WE HELP */
.who-section { padding: 56px 0; }
.who-header { margin-bottom: 32px; }
.who-header .section-title { max-width: 720px; }
.who-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
}
.who-card {
background: var(--bg);
padding: 36px 32px;
transition: background 0.3s ease;
}
.who-card:hover { background: #fff; }
.who-card-title {
font-family: var(--serif); font-size: 32px; line-height: 1.1; margin-bottom: 6px;
}
.who-card-subtitle {
font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px;
}
.who-card-desc {
font-size: 14.5px; color: var(--text-secondary); line-height: 1.6;
}
/* WHY NOW */
.why-section { padding: 64px 0; }
.why-header { margin-bottom: 32px; }
.why-header .section-title { max-width: 700px; }
.ov-spec-table { border-top: 2px solid var(--text-primary); }
.ov-spec-row {
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
padding: 22px 0;
border-bottom: 1px solid var(--border);
align-items: baseline;
}
.ov-spec-label { font-family: var(--serif); font-size: 28px; line-height: 1.15; }
.ov-spec-label.alert { color: var(--red-alert); }
.ov-spec-value { font-size: 15.5px; color: var(--text-secondary); line-height: 1.6; }
.penalty-callout {
margin-top: 32px;
padding: 28px 36px;
background: rgba(220, 38, 38, 0.04);
border: 1px solid rgba(220, 38, 38, 0.12);
border-radius: 20px;
display: flex;
align-items: center;
gap: 36px;
}
.penalty-number {
font-family: var(--serif);
font-size: clamp(48px, 6vw, 72px);
font-weight: 400;
color: var(--red-alert);
line-height: 1;
white-space: nowrap;
}
.penalty-context {
font-size: 16px; color: var(--text-secondary); line-height: 1.55;
}
.penalty-context strong { color: var(--text-primary); }
.bridge-statement {
margin-top: 48px;
padding-left: 24px;
border-left: 2px solid var(--text-tertiary);
font-size: 19px;
color: var(--text-primary);
font-weight: 500;
line-height: 1.5;
max-width: 600px;
}
/* QUOTE */
.quote-section { padding: 48px 0; }
.quote-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 24px;
padding: 48px 56px;
box-shadow: var(--shadow-md);
text-align: center;
position: relative;
}
.quote-card::before {
content: '\201C';
position: absolute;
top: 16px; left: 40px;
font-family: var(--serif);
font-size: 72px;
color: rgba(0, 0, 0, 0.04);
line-height: 1;
}
#view-overview .quote-text {
font-size: 19px;
line-height: 1.55;
color: var(--text-primary);
max-width: 640px;
margin: 0 auto 24px;
font-style: italic;
}
.quote-author {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.post-quote {
text-align: center;
margin-top: 24px;
font-size: 19px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.5;
}
/* CLOSING */
.closing-section { padding: 56px 0; text-align: center; }
.closing-statement {
font-family: var(--serif);
font-size: clamp(30px, 4.3vw, 40px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 32px;
}
.closing-accent { color: var(--bb-purple); font-style: italic; }
.editorial-bridge {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.editorial-divider { width: 40px; height: 2px; background: var(--text-primary); }
.editorial-kicker {
font-family: var(--mono);
font-size: 11px; font-weight: 600; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--text-tertiary);
}
#view-overview .editorial-link {
font-family: var(--serif);
font-size: clamp(32px, 4.5vw, 44px);
color: var(--text-primary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: color 0.2s;
}
#view-overview .editorial-link:hover { color: var(--bb-purple); }
#view-overview .editorial-link svg {
width: 28px; height: 28px;
transition: transform 0.3s var(--spring);
}
#view-overview .editorial-link:hover svg { transform: translateX(6px); }
/* Reduce gap between closing section and footer on overview */
#view-overview .closing-section { padding-bottom: 0; margin-bottom: -80px; }
/* OVERVIEW RESPONSIVE */
@media (max-width: 960px) {
.hero { min-height: auto; padding: 110px 0 48px; }
.flow-visual { grid-template-columns: 1fr; gap: 16px; }
.flow-arrow { transform: rotate(90deg); padding: 4px 0; }
.problem-grid { grid-template-columns: 1fr; }
.who-grid { grid-template-columns: 1fr; }
.ov-spec-row { grid-template-columns: 1fr; gap: 8px; }
.penalty-callout { flex-direction: column; gap: 20px; text-align: center; }
}
@media (max-width: 600px) {
.hero-title { font-size: 44px; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn { justify-content: center; }
.trust-row { gap: 12px; }
.trust-divider { display: none; }
.quote-card { padding: 36px 24px; }
.hero { padding: 100px 0 48px; }
}
/* ══════════════════════════════════════
   END OVERVIEW
   ══════════════════════════════════════ */
.headline {
font-family: var(--headline-font);
font-size: clamp(44px, 6.4vw, 64px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--text-primary);
margin-bottom: 24px;
text-wrap: balance;
}
.headline-primary {
display: block;
}
.headline-secondary {
display: block;
font-family: var(--sans);
font-size: 22px;
font-weight: 400;
line-height: 1.5;
color: var(--text-secondary);
margin-top: 16px;
letter-spacing: -0.015em;
}
        .headline-dynamic {
display: block;
}
.hero-typer {
display: inline;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease;
border-radius: 4px;
padding: 0 2px;
margin: 0 -2px;
}
.hero-typer.is-selected {
background-color: rgba(109, 40, 217, 0.15);
}
.hero-typer.is-governed {
color: var(--bb-purple-dark);
}
.hero-cursor {
display: inline-block;
width: 4px;
height: 0.85em;
background: var(--text-primary);
vertical-align: baseline;
margin-left: 1px;
border-radius: 2px;
animation: cursorBlink 1s step-end infinite;
}
.hero-cursor.is-governed {
background: var(--bb-purple-dark);
}
@keyframes cursorBlink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
.slogan {
font-family: var(--sans);
font-size: 22px;
font-weight: 500;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 32px;
text-wrap: balance;
letter-spacing: -0.015em;
}
.slogan-punch {
color: var(--text-primary);
font-weight: 500;
}
.hero-cta-wrapper {
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.hero-signature {
font-family: var(--mono);
font-size: 12.5px;
font-weight: 500;
color: var(--text-tertiary);
letter-spacing: 0.02em;
}
.hero-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
background: #09090B;
color: var(--bb-white);
border: none;
padding: 15px 30px;
border-radius: 10px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
white-space: nowrap;
letter-spacing: -0.01em;
}
.hero-cta-btn:hover {
transform: translateY(-2px);
background: #18181B;
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.25);
}
.hero-cta-btn:active {
transform: scale(0.96) translateY(0);
transition: transform 0.05s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero-cta-btn svg {
width: 15px;
height: 15px;
transition: transform 0.3s ease;
color: #FFFFFF;
}
.hero-cta-btn:hover svg {
transform: translateX(3px);
}
.hero-secondary-btn {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
background: transparent;
color: var(--text-primary);
border: 1.5px solid rgba(9,9,11,0.18);
padding: 15px 26px;
border-radius: 10px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
white-space: nowrap;
letter-spacing: -0.01em;
}
.hero-secondary-btn:hover {
transform: translateY(-1px);
border-color: rgba(9,9,11,0.45);
color: var(--text-primary);
}
.hero-secondary-btn:active {
transform: scale(0.96) translateY(0);
transition: transform 0.05s ease;
}
.hero-secondary-btn svg {
width: 16px;
height: 16px;
color: currentColor;
transition: transform 0.3s ease;
}
.hero-secondary-btn:hover svg {
transform: translateX(1px);
}
.trust-anchors {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: center;
margin-bottom: 0;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
}
.trust-item {
display: flex;
align-items: center;
gap: 8px;
}
.trust-item svg {
width: 15px;
height: 15px;
opacity: 0.9;
color: var(--bb-purple-dark);
}
.trust-item + .trust-item {
padding-left: 24px;
border-left: 1px solid rgba(0,0,0,0.08);
}
.divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
margin: 56px 0;
}
.hero-content-divider {
width: 100%;
height: 1px;
margin: 64px 0;
background: linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.03));
}
        .section-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 24px;
display: inline-flex;
align-items: center;
padding-left: 16px;
position: relative;
}
.prose > div > .section-label {
margin-top: 0;
}
.section-label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 14px;
border-radius: 2px;
background: var(--text-primary);
opacity: 0.2;
}
.prose {
color: var(--text-secondary);
font-size: 1.18rem;
line-height: 1.85;
letter-spacing: -0.005em;
}
.prose p {
margin-bottom: 28px;
}
.prose strong {
color: var(--text-primary);
font-weight: 600;
}
.prose em.signal {
color: var(--bb-purple-dark);
font-style: normal;
font-weight: 600;
}
.claim {
font-family: var(--serif);
font-size: clamp(36px, 5.5vw, 48px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 32px;
text-wrap: balance;
}
.trust-breaks-lead {
margin-bottom: 22px;
max-width: 92%;
color: var(--text-primary);
font-size: clamp(1.08rem, 1.8vw, 1.2rem);
line-height: 1.62;
letter-spacing: -0.01em;
}
.trust-breaks-lead-muted {
display: block;
color: var(--text-secondary);
}
.trust-breaks-shell {
margin: 0 0 6px;
max-width: 100%;
}
.trust-breaks-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin: 0;
}
.trust-break-card {
min-height: 0;
}
.trust-break-icon {
margin-bottom: 20px;
}
.trust-break-title {
margin: 0 0 10px;
font-family: var(--mono);
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
color: var(--text-primary);
line-height: 1.35;
}
.trust-break-copy {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
font-weight: 500;
}
@media (min-width: 900px) {
.trust-breaks-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
}
.who-help-section {
margin: 56px 0 6px;
}
.who-help-lead {
margin: 0 0 34px;
max-width: 88%;
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.62;
letter-spacing: -0.005em;
}
.who-help-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
padding-top: 14px;
border-top: 1px solid rgba(0,0,0,0.07);
}
.who-help-item {
min-width: 0;
}
.who-help-title {
margin: 0 0 10px;
font-family: var(--serif);
font-size: clamp(30px, 3.2vw, 40px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text-primary);
text-wrap: balance;
}
.who-help-subtitle {
margin: 0 0 10px;
font-size: 1.01rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
line-height: 1.45;
}
.who-help-copy {
margin: 0;
font-size: 0.98rem;
line-height: 1.62;
color: var(--text-secondary);
max-width: 96%;
}
.quote-block {
margin: 64px 0;
padding: 48px;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7));
border: 1px solid rgba(0,0,0,0.08);
border-radius: 24px;
box-shadow: 0 4px 24px -8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);
position: relative;
overflow: hidden;
transition: transform 0.35s var(--spring), box-shadow 0.35s ease;
}
.quote-block::before {
content: '\201C';
position: absolute;
top: -20px;
left: 24px;
font-family: var(--serif);
font-size: 180px;
color: rgba(139, 92, 246, 0.05);
line-height: 1;
z-index: 0;
user-select: none;
}
.quote-text {
font-family: var(--sans);
font-size: 19px;
line-height: 1.7;
color: inherit;
font-weight: 400;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.quote-source {
font-family: var(--mono);
font-size: 12px;
color: var(--text-tertiary);
letter-spacing: 0.02em;
position: relative;
z-index: 1;
font-weight: 500;
}
/* macOS Terminal Style Code Block - Monochrome Premium */        .code-wrap {
margin: 64px 0;
border-radius: 20px;
background: #09090B;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: var(--shadow-heavy);
position: relative;
transform: translateZ(0);
transition: transform 0.35s var(--spring), box-shadow 0.35s ease, border-color 0.35s ease;
}
.code-wrap.is-active-typing {
border-color: rgba(139, 92, 246, 0.4);
box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.1), 0 24px 48px -12px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.code-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: radial-gradient(circle at top, rgba(255,255,255,0.04), transparent 70%);
pointer-events: none;
z-index: 0;
}
.code-bar {
background: rgba(255,255,255,0.03);
padding: 12px 24px;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
backdrop-filter: blur(12px);
}
.code-controls {
display: flex;
align-items: center;
gap: 8px;
}
.code-lang-badge {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,0.3);
letter-spacing: 0.05em;
margin-right: auto;
padding-left: 16px;
}
.code-copy-btn {
background: transparent;
border: 1px solid transparent;
color: rgba(255,255,255,0.4);
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(2px);
transition: all 0.3s var(--spring);
}
.code-wrap:hover .code-copy-btn {
opacity: 1;
transform: translateY(0);
}
.code-copy-btn:hover {
color: var(--bb-white);
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.15);
}
.code-copy-btn:active {
transform: scale(0.92);
opacity: 0.8;
}
.code-copy-btn svg {
width: 14px;
height: 14px;
transition: transform 0.3s var(--spring);
}
.code-copy-btn:hover svg, .code-copy-btn:focus-visible svg {
transform: scale(1.1);
}
.code-copy-btn.is-copied {
color: #10B981;
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.2);
opacity: 1;
transform: translateY(0);
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
opacity: 1;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
transition: background 0.3s ease;
}
.dot:nth-child(1) {
background: rgba(255,255,255,0.25);
}
.dot:nth-child(2) {
background: rgba(255,255,255,0.15);
}
.dot:nth-child(3) {
background: rgba(255,255,255,0.08);
}
.code-block {
position: relative;
z-index: 1;
padding: 40px;
font-family: var(--mono);
font-size: 15px;
line-height: 1.8;
color: #E4E4E7;
overflow-x: auto;
}
.code-block .comment {
color: #A1A1AA;
font-style: italic;
}
.code-block .keyword {
color: #C084FC;
font-weight: 500;
}
.code-block .string {
color: #6EE7B7;
}
.code-block .decorator {
color: #93C5FD;
}
.code-block .bright {
color: #FFFFFF;
font-weight: 600;
}
.code-block .cursor {
display: inline-block;
width: 6px;
height: 18px;
background: #C084FC;
vertical-align: middle;
margin-left: 2px;
border-radius: 2px;
box-shadow: 0 0 10px rgba(192,132,252,0.8);
animation: blink 1s step-end infinite;
will-change: opacity;
}
.code-block .cursor.is-typing {
animation: none;
opacity: 1;
}
        .stat-line {
margin: 56px 0;
padding: 0;
border: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.stat-item {
background: rgba(255, 255, 255, 0.9);
padding: 32px 24px;
border-radius: 24px;
border: 1px solid rgba(0,0,0,0.04);
box-shadow: 0 4px 12px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,1);
transition: all 0.35s var(--spring);
position: relative;
}
.stat-item:hover {
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1);
}
.stat-visual {
height: 44px;
width: 44px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0,0,0,0.04);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: var(--text-primary);
transition: all 0.35s var(--spring);
}
.stat-item:hover .stat-visual {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
color: var(--text-primary);
}
.stat-visual svg {
width: 22px;
height: 22px;
}
.stat-value {
font-family: var(--mono);
font-size: 16px;
font-weight: 600;
color: var(--bb-purple-dark);
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.stat-label {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
font-weight: 500;
}
.closing {
font-family: var(--serif);
font-size: clamp(32px, 4.5vw, 42px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-top: 40px;
text-wrap: balance;
}
.closing .accent {
color: var(--bb-purple-dark);
font-style: italic;
}
        .back-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
background: none;
border: none;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: #636675;
text-decoration: none;
margin-bottom: 24px;
cursor: pointer;
transition: color 0.2s ease;
}
.back-link:hover {
color: #09090B;
}
.back-link:active {
color: #09090B;
}
.back-link svg {
width: 16px;
height: 16px;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.back-link:hover svg {
transform: translateX(-4px);
}
.back-link--article {
width: 48px;
height: 48px;
justify-content: center;
margin-top: 12px;
margin-bottom: 32px;
border-radius: 50%;
background: #09090B;
box-shadow: 0 4px 14px rgba(0,0,0,0.1);
color: var(--bb-white);
transition: transform 0.4s var(--spring), box-shadow 0.4s var(--spring), background-color 0.4s var(--spring), color 0.4s var(--spring);
}
.back-link--article:hover,
.back-link--article:focus-visible {
transform: translateY(-1px) scale(1.01);
box-shadow: 0 6px 18px rgba(0,0,0,0.14);
background: #18181B;
color: var(--bb-white);
}
.back-link--article .back-link__icon {
width: 18px;
height: 18px;
position: relative;
z-index: 1;
transition: transform 0.3s var(--spring);
}
.back-link--article:hover .back-link__icon,
.back-link--article:focus-visible .back-link__icon {
transform: translateX(-2px);
}
html.is-reading-mode .back-link--article {
width: 44px;
height: 44px;
margin-bottom: 28px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
html.is-reading-mode .back-link--article:hover,
html.is-reading-mode .back-link--article:focus-visible {
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(0,0,0,0.12);
}
.article-header {
margin-bottom: 80px;
}
.article-header--staggered {
animation-delay: 0.1s;
}
.article-header .meta-top {
font-family: var(--mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--bb-purple-dark);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 32px;
font-weight: 600;
}
.meta-dot {
color: rgba(0,0,0,0.15);
}
.meta-read-time {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.15);
color: var(--bb-purple-dark);
padding: 4px 12px;
border-radius: 999px;
font-weight: 600;
margin-left: 8px;
}
.meta-read-time svg {
width: 14px;
height: 14px;
opacity: 0.8;
}
.article-header h1 {
font-family: var(--serif);
font-size: clamp(56px, 9vw, 96px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.03em;
color: #0A0A0A;
margin-bottom: 32px;
scroll-margin-top: 132px;
text-wrap: balance;
}
.article-header .subtitle {
font-family: var(--sans);
font-size: 24px;
color: var(--text-secondary);
line-height: 1.5;
font-weight: 400;
max-width: 100%;
text-wrap: balance;
letter-spacing: -0.01em;
}
/* "Ink on Paper" Typography for Longform Reading */        .article-body {
font-family: var(--sans);
font-size: 1.125rem;
line-height: 1.8;
color: #1a1a1f;
letter-spacing: -0.005em;
transition: color 1s var(--ease-fluid);
}
.article-body p {
margin-bottom: 36px;
}
.article-key-points {
margin: 18px 0 36px;
padding: 0;
list-style: none;
display: grid;
gap: 18px;
}
.article-key-points li {
position: relative;
padding-left: 22px;
margin: 0;
}
.article-key-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.82em;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(9, 9, 11, 0.22);
transform: translateY(-50%);
}
.article-lead-label {
font-weight: 700;
color: inherit;
}
.article-bridge-note {
margin-bottom: 48px;
}
/* Editorial Premise (Forwarding Hook) */        .editorial-premise {
position: relative;
/* Anchor for Marginalia */            margin-bottom: 64px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.article-author {
position: absolute;
top: 0;
left: -228px;
width: 180px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.article-author-name {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
letter-spacing: 0.08em;
color: var(--text-tertiary);
text-wrap: balance;
}
.article-author-role {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
        .article-signature {
margin-top: 0;
margin-bottom: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 0;
}
.premise-label {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--bb-purple-dark);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.premise-label::before {
content: '';
display: block;
width: 12px;
height: 1px;
background: var(--bb-purple-dark);
opacity: 0.5;
}
.premise-text {
font-family: var(--sans);
font-size: 1.35rem;
color: var(--text-primary);
line-height: 1.5;
font-weight: 500;
letter-spacing: -0.015em;
text-wrap: balance;
}
@media (max-width: 1040px) {
    .article-author {
        position: static;
        width: auto;
        margin-bottom: 24px;
        gap: 4px;
    }
    .article-author-name {
        font-size: 13px;
    }
}
/* Premium Whitespace instead of Hairline Dividers */        .article-body h2 {
font-family: var(--serif);
font-size: 42px;
font-weight: 400;
color: var(--text-primary);
margin: 88px 0 32px;
letter-spacing: -0.02em;
line-height: 1.15;
scroll-margin-top: 132px;
text-wrap: balance;
}
.article-body strong {
font-weight: 600;
}
/* Reading Mode specific overrides (Light) */        html.is-reading-mode:not(.is-dark-mode) .article-body {
color: #141416;
}
html.is-reading-mode:not(.is-dark-mode) .article-header h1 {
color: #000000;
}
html.is-reading-mode:not(.is-dark-mode) .premise-text {
color: #000000;
}
html.is-reading-mode:not(.is-dark-mode) .article-body h2 {
color: #000000;
}
html.is-reading-mode:not(.is-dark-mode) .article-body strong {
color: #000000;
}
html.is-reading-mode:not(.is-dark-mode) .article-key-points li::before {
background: rgba(9, 9, 11, 0.22);
}
html.is-reading-mode:not(.is-dark-mode) .article-lead-label {
color: #000000;
}
html.is-reading-mode:not(.is-dark-mode) .sig-name {
color: #000000;
}
html.is-reading-mode:not(.is-dark-mode) .pull-quote {
color: #000000;
}
html.is-reading-mode:not(.is-dark-mode) .closing {
color: #000000;
}
html.is-reading-mode:not(.is-dark-mode) .article-header .meta-top,
html.is-reading-mode:not(.is-dark-mode) .article-author-name,
html.is-reading-mode:not(.is-dark-mode) .article-author-role,
html.is-reading-mode:not(.is-dark-mode) .premise-label,
html.is-reading-mode:not(.is-dark-mode) .toc-label {
color: #71717A;
}
html.is-reading-mode:not(.is-dark-mode) .meta-read-time {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
color: #52525B;
}
html.is-reading-mode:not(.is-dark-mode) .meta-read-time svg {
opacity: 0.68;
}
html.is-reading-mode:not(.is-dark-mode) .premise-label::before {
background: rgba(109, 40, 217, 0.42);
}
html.is-reading-mode:not(.is-dark-mode) .closing .accent {
color: var(--bb-purple-dark);
}
html.is-reading-mode.is-dark-mode .article-header .meta-top,
html.is-reading-mode.is-dark-mode .article-author-name,
html.is-reading-mode.is-dark-mode .article-author-role,
html.is-reading-mode.is-dark-mode .premise-label,
html.is-reading-mode.is-dark-mode .toc-label {
color: rgba(255, 255, 255, 0.68);
}
html.is-reading-mode.is-dark-mode .article-key-points li::before {
background: rgba(255, 255, 255, 0.28);
}
html.is-reading-mode.is-dark-mode .article-lead-label {
color: #FFFFFF;
}
html.is-reading-mode.is-dark-mode .meta-read-time {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
color: #D4D4D8;
}
html.is-reading-mode.is-dark-mode .premise-label::before {
background: rgba(192, 132, 252, 0.5);
}
html.is-reading-mode.is-dark-mode .closing .accent {
color: #C084FC;
}
        .pull-quote {
position: relative;
font-family: var(--serif);
font-size: clamp(32px, 5vw, 44px);
font-weight: 400;
color: var(--text-primary);
text-align: center;
line-height: 1.2;
margin: 100px 0;
padding: 0;
letter-spacing: -0.015em;
text-wrap: balance;
border: none;
background: none;
border-radius: 0;
z-index: 1;
}
.pull-quote::before {
content: '\201C';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--serif);
font-size: 240px;
color: rgba(0, 0, 0, 0.03);
line-height: 1;
z-index: -1;
pointer-events: none;
margin-top: 20px;
}
.next-issue-card {
margin: 88px 0 64px;
position: relative;
width: min(800px, calc(100vw - 48px));
max-width: none;
margin-left: calc((650px - min(800px, calc(100vw - 48px))) / 2);
margin-right: calc((650px - min(800px, calc(100vw - 48px))) / 2);
transition: transform 0.4s var(--smooth), box-shadow 0.4s var(--smooth), border-color 0.4s ease;
}
.next-issue-card:hover {
transform: translateY(-4px);
}
.next-issue-card::before {
content: none;
}
.next-issue-shell {
position: relative;
z-index: 1;
}
.next-issue-label::before {
display: none;
}
.next-issue-btn svg {
width: 15px;
height: 15px;
transition: transform 0.25s ease;
}
.next-issue-card.next-issue-card--available {
--next-issue-accent: #5372A8;
--next-issue-accent-hover: #435E8C;
--next-issue-cover-bg: radial-gradient(circle at 78% 78%, #5372A8, #243652);
--next-issue-accent-glow: rgba(83,114,168,0.36);
--next-issue-accent-ring: rgba(83,114,168,0.22);
--next-issue-btn-border: transparent;
display: flex;
overflow: hidden;
background: #09090B;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4);
}
.next-issue-card.next-issue-card--available:hover {
box-shadow: 0 60px 100px -20px rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.15);
}
.next-issue-card.next-issue-card--issue-1 {
--next-issue-accent: #5372A8;
--next-issue-accent-hover: #435E8C;
--next-issue-cover-bg: radial-gradient(circle at 78% 78%, #5372A8, #243652);
--next-issue-accent-glow: rgba(83,114,168,0.36);
--next-issue-accent-ring: rgba(83,114,168,0.22);
--next-issue-btn-border: transparent;
}
.next-issue-card.next-issue-card--issue-2 {
--next-issue-accent: #303136;
--next-issue-accent-hover: #1A1C21;
--next-issue-cover-bg: linear-gradient(145deg, #303136 0%, #121316 100%);
--next-issue-accent-glow: rgba(0,0,0,0.42);
--next-issue-accent-ring: rgba(255,255,255,0.14);
--next-issue-btn-border: rgba(255,255,255,0.14);
}
.next-issue-card.next-issue-card--issue-3 {
--next-issue-accent: #5E4C8A;
--next-issue-accent-hover: #4E3F73;
--next-issue-cover-bg: radial-gradient(circle at 30% 20%, #5E4C8A, #2F2548);
--next-issue-accent-glow: rgba(94,76,138,0.34);
--next-issue-accent-ring: rgba(94,76,138,0.22);
--next-issue-btn-border: transparent;
}
.next-issue-card.next-issue-card--issue-4 {
--next-issue-accent: #8A6A46;
--next-issue-accent-hover: #735639;
--next-issue-cover-bg: linear-gradient(145deg, #8A6A46 0%, #3A2A1E 100%);
--next-issue-accent-glow: rgba(138,106,70,0.36);
--next-issue-accent-ring: rgba(138,106,70,0.2);
--next-issue-btn-border: transparent;
}
.next-issue-card.next-issue-card--available .next-issue-cover {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
flex: 0 0 35%;
min-height: 100%;
border-right: 1px solid rgba(255,255,255,0.05);
}
.next-issue-card.next-issue-card--available .next-issue-cover::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
.next-issue-card.next-issue-card--available .next-issue-cover::after {
content: "";
position: absolute;
inset: -5%;
background: var(--next-issue-cover-bg);
}
.next-issue-card.next-issue-card--available .next-issue-cover-number {
position: relative;
z-index: 2;
font-family: var(--serif);
font-size: clamp(128px, 13vw, 176px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
color: rgba(255,255,255,0.12);
}
.next-issue-card.next-issue-card--available .next-issue-shell {
display: flex;
align-items: center;
flex: 1;
padding: clamp(44px, 5vw, 56px) clamp(32px, 4.2vw, 48px);
background: #09090B;
}
.next-issue-card.next-issue-card--available .next-issue-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.next-issue-card.next-issue-card--available .next-issue-title {
margin: 0 0 16px;
font-family: var(--serif);
font-size: clamp(32px, 4vw, 42px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: #FFFFFF;
text-wrap: balance;
}
.next-issue-card.next-issue-card--available .next-issue-context {
max-width: 480px;
}
.next-issue-card.next-issue-card--available .next-issue-context-main {
font-family: var(--sans);
font-size: 16.5px;
line-height: 1.6;
color: rgba(255,255,255,0.6);
text-wrap: pretty;
}
.next-issue-card.next-issue-card--available .next-issue-label {
display: block;
margin: 0 0 20px;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
display: inline-flex;
align-items: center;
gap: 14px;
width: 100%;
}
.next-issue-card.next-issue-card--available .next-issue-label::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(255,255,255,0.1);
}
.next-issue-card.next-issue-card--available .next-issue-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 52px;
padding: 0 28px;
margin-top: 40px;
align-self: flex-start;
background: var(--next-issue-accent);
color: #FFFFFF;
border: 1px solid var(--next-issue-btn-border);
border-radius: 12px;
font-family: var(--sans);
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
text-decoration: none;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px -14px var(--next-issue-accent-glow);
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.next-issue-card.next-issue-card--available .next-issue-btn:hover {
transform: translateY(-1px);
background: var(--next-issue-accent-hover);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 14px 28px -16px var(--next-issue-accent-glow);
}
.next-issue-card.next-issue-card--available .next-issue-btn:hover svg,
.next-issue-card.next-issue-card--available .next-issue-btn:focus-visible svg {
transform: translateX(3px);
}
.next-issue-card.next-issue-card--available .next-issue-btn:active {
transform: translateY(0) scale(0.97);
}
.next-issue-card.next-issue-card--available .next-issue-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 4px var(--next-issue-accent-ring), inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px -14px var(--next-issue-accent-glow);
}
.next-issue-card.next-issue-card--coming-soon {
--next-issue-accent: #8E3B52;
--next-issue-accent-hover: #743044;
--next-issue-accent-glow: rgba(142,59,82,0.38);
--next-issue-accent-ring: rgba(142,59,82,0.22);
display: flex;
overflow: hidden;
background: #10070B;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.42);
}
.next-issue-card.next-issue-card--coming-soon:hover {
box-shadow: 0 60px 100px -20px rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.14);
}
.next-issue-card.next-issue-card--coming-soon .next-issue-cover {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
flex: 0 0 35%;
min-height: 100%;
border-right: 1px solid rgba(255,255,255,0.05);
background: linear-gradient(145deg, #8E3B52 0%, #2A0F18 100%);
}
.next-issue-card.next-issue-card--coming-soon .next-issue-cover::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-cover-number {
position: relative;
z-index: 2;
font-family: var(--serif);
font-size: clamp(128px, 13vw, 176px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
color: rgba(255,255,255,0.1);
}
.next-issue-card.next-issue-card--coming-soon .next-issue-shell {
display: flex;
align-items: center;
flex: 1;
padding: clamp(44px, 5vw, 56px) clamp(32px, 4.2vw, 48px);
background: #10070B;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-title {
margin: 0 0 16px;
font-family: var(--serif);
font-size: clamp(32px, 4vw, 42px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: #FFFFFF;
text-wrap: balance;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-context {
max-width: 520px;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-context-main {
font-family: var(--sans);
font-size: 16.5px;
line-height: 1.6;
color: rgba(255,255,255,0.64);
text-wrap: pretty;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-meta {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin: 0 0 18px;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-label {
display: inline-flex;
align-items: center;
gap: 0;
margin: 0;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(245,188,204,0.9);
}
.next-issue-card.next-issue-card--coming-soon .next-issue-label::after {
content: none;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-status {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0;
flex: 1 1 auto;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245,188,204,0.78);
}
.next-issue-card.next-issue-card--coming-soon .next-issue-status::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(245,188,204,0.24);
}
.next-issue-card.next-issue-card--coming-soon .next-issue-action {
width: min(460px, 100%);
margin-top: 28px;
}
.next-issue-card.next-issue-card--coming-soon .next-issue-prompt {
display: block;
margin-bottom: 14px;
font-family: var(--sans);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
color: #FFFFFF;
}
.next-issue-card.next-issue-card--coming-soon .fc-form {
display: flex;
align-items: stretch;
width: 100%;
max-width: 100%;
gap: 0;
margin: 0;
padding: 4px;
min-height: 56px;
background: #09090B;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
position: relative;
transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success {
display: flex;
flex-direction: row;
gap: 0;
padding: 4px;
border-color: rgba(245,188,204,0.18);
box-shadow: 0 0 0 4px rgba(142,59,82,0.14);
background: #160A10;
}
.next-issue-card.next-issue-card--coming-soon .fc-form:focus-within {
border-color: var(--next-issue-accent);
box-shadow: 0 0 0 4px var(--next-issue-accent-ring);
background: #09090B;
}
.next-issue-card.next-issue-card--coming-soon .fc-form.has-error {
border-color: #EF4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
background: #09090B;
animation: formShake 0.3s var(--spring);
}
.next-issue-form-cursor {
display: inline-block;
width: 8px;
height: 18px;
margin: 0 0 0 14px;
align-self: center;
background: var(--next-issue-accent);
flex-shrink: 0;
animation: nextIssueBlink 1s step-end infinite;
}
@keyframes nextIssueBlink {
50% {
opacity: 0;
}
}
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input {
flex: 1;
min-width: 0;
padding: 0 14px;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
font-family: var(--mono);
font-size: 13.5px;
color: #FFFFFF;
}
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input::placeholder {
color: rgba(255,255,255,0.32);
font-style: normal;
}
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input:-webkit-autofill,
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input:-webkit-autofill:hover,
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input:-webkit-autofill:focus,
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input:-webkit-autofill:active {
-webkit-text-fill-color: #FFFFFF;
-webkit-box-shadow: 0 0 0 1000px #09090B inset;
box-shadow: 0 0 0 1000px #09090B inset;
caret-color: #FFFFFF;
border: none;
transition: background-color 9999s ease-out 0s, color 9999s ease-out 0s;
}
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-input:-webkit-autofill,
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-input:-webkit-autofill:hover,
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-input:-webkit-autofill:focus,
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-input:-webkit-autofill:active {
-webkit-text-fill-color: rgba(255,255,255,0.78);
}
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input:-moz-autofill {
box-shadow: 0 0 0 1000px #09090B inset;
-moz-text-fill-color: #FFFFFF;
caret-color: #FFFFFF;
}
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input:focus,
.next-issue-card.next-issue-card--coming-soon .fc-form .fc-input.is-error {
background: transparent;
border: none;
box-shadow: none;
outline: none;
}
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-input,
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .next-issue-form-cursor {
display: none;
}
.next-issue-card.next-issue-card--coming-soon .fc-submit {
background: var(--next-issue-accent);
color: #FFFFFF;
border: none;
border-radius: 12px;
flex: 0 0 auto;
min-width: 168px;
min-height: 48px;
padding: 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px -14px var(--next-issue-accent-glow);
transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.next-issue-card.next-issue-card--coming-soon .fc-submit-label {
display: inline-block;
max-width: none;
white-space: nowrap;
line-height: 1;
text-align: center;
}
.next-issue-card.next-issue-card--coming-soon .fc-submit.is-inline-label .fc-submit-label {
max-width: none;
white-space: nowrap;
}
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-submit {
flex: 1 1 100%;
width: 100%;
min-width: 0;
background: var(--next-issue-accent);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px -14px var(--next-issue-accent-glow);
transform: none;
}
.next-issue-card.next-issue-card--coming-soon .fc-submit:hover {
background: var(--next-issue-accent-hover);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 14px 28px -16px var(--next-issue-accent-glow);
transform: translateY(-1px);
}
.next-issue-card.next-issue-card--coming-soon .fc-submit:active {
transform: translateY(0) scale(0.97);
}
.next-issue-card.next-issue-card--coming-soon .fc-submit:focus-visible {
outline: none;
box-shadow: 0 0 0 4px var(--next-issue-accent-ring), inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px -14px var(--next-issue-accent-glow);
}
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-submit:hover,
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-submit:active,
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success .fc-submit:focus-visible {
background: var(--next-issue-accent);
transform: none;
}
.next-issue-card.next-issue-card--coming-soon .fc-error-msg {
padding: 10px 0 0;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: #FCA5A5;
}
.next-issue-card.next-issue-card--coming-soon .fc-success-row {
width: 100%;
min-height: 56px;
padding: 0 4px;
align-items: center;
justify-content: flex-start;
gap: 12px;
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #10B981;
}
.next-issue-card.next-issue-card--coming-soon .fc-form.is-success ~ .fc-success-row {
display: none;
}
.next-issue-card.next-issue-card--coming-soon .fc-success-row svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: currentColor;
}
html.is-reading-mode:not(.is-dark-mode) .next-issue-card.next-issue-card--available,
html.is-reading-mode.is-dark-mode .next-issue-card.next-issue-card--available {
background: #09090B;
}
html.is-reading-mode:not(.is-dark-mode) .next-issue-card.next-issue-card--coming-soon,
html.is-reading-mode.is-dark-mode .next-issue-card.next-issue-card--coming-soon {
background: #050505;
}
@media (max-width: 860px) {
    .next-issue-card {
        margin: 72px 0 56px;
        width: calc(100vw - 32px);
        margin-left: calc((650px - (100vw - 32px)) / 2);
        margin-right: calc((650px - (100vw - 32px)) / 2);
    }
    .next-issue-card.next-issue-card--available {
        flex-direction: column;
    }
    .next-issue-card.next-issue-card--available .next-issue-cover {
        flex: auto;
        min-height: 180px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .next-issue-card.next-issue-card--available .next-issue-cover-number {
        font-size: clamp(118px, 28vw, 152px);
    }
    .next-issue-card.next-issue-card--available .next-issue-shell {
        padding: 40px 24px;
    }
    .next-issue-card.next-issue-card--available .next-issue-btn {
        width: 100%;
    }
    .next-issue-card.next-issue-card--coming-soon {
        flex-direction: column;
    }
    .next-issue-card.next-issue-card--coming-soon .next-issue-cover {
        flex: auto;
        min-height: 180px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .next-issue-card.next-issue-card--coming-soon .next-issue-cover-number {
        font-size: clamp(118px, 28vw, 152px);
    }
    .next-issue-card.next-issue-card--coming-soon .next-issue-shell {
        padding: 40px 24px;
    }
    .next-issue-card.next-issue-card--coming-soon .next-issue-action {
        width: 100%;
        margin-top: 32px;
    }
}
@media (max-width: 640px) {
    .next-issue-card.next-issue-card--available .next-issue-cover {
        min-height: 160px;
    }
    .next-issue-card.next-issue-card--available .next-issue-shell {
        padding: 32px 20px;
    }
    .next-issue-card.next-issue-card--available .next-issue-title,
    .next-issue-card.next-issue-card--coming-soon .next-issue-title {
        font-size: clamp(30px, 8vw, 38px);
    }
    .next-issue-card.next-issue-card--coming-soon .next-issue-cover {
        min-height: 160px;
    }
    .next-issue-card.next-issue-card--coming-soon .next-issue-shell {
        padding: 32px 20px;
    }
    .next-issue-card.next-issue-card--coming-soon .fc-form {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }
    .next-issue-card.next-issue-card--coming-soon .next-issue-form-cursor {
        margin: 2px 0 0;
        align-self: flex-start;
    }
    .next-issue-card.next-issue-card--coming-soon .fc-form .fc-input {
        width: 100%;
        padding: 0;
    }
    .next-issue-card.next-issue-card--coming-soon .fc-submit {
        width: 100%;
        min-width: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .next-issue-card,
    .next-issue-btn,
    .next-issue-card.next-issue-card--coming-soon .fc-form,
    .next-issue-card.next-issue-card--coming-soon .fc-submit,
    .next-issue-form-cursor {
        transition: none;
        animation: none;
    }
    .next-issue-card:hover,
    .next-issue-card.next-issue-card--available .next-issue-btn:hover,
    .next-issue-card.next-issue-card--coming-soon .fc-submit:hover {
        transform: none;
    }
}
.article-sources {
margin-top: 56px;
margin-bottom: 28px;
}
.article-sources-summary {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 16px 0;
border-top: 1px solid rgba(0,0,0,0.06);
cursor: pointer;
outline: none;
transition: border-color 0.3s ease;
}
.article-sources-summary::-webkit-details-marker {
display: none;
}
.article-sources-summary:hover {
border-top-color: rgba(0,0,0,0.1);
}
.article-sources-summary:focus-visible {
outline: 2px solid rgba(139, 92, 246, 0.28);
outline-offset: 6px;
}
.sources-summary-main {
display: flex;
align-items: center;
min-width: 0;
}
.sources-summary-label {
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.13em;
color: rgba(24, 24, 27, 0.5);
font-weight: 500;
transition: color 0.3s ease;
}
.sources-summary-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: rgba(24, 24, 27, 0.34);
transition: transform 0.35s var(--spring), color 0.3s ease;
}
.sources-summary-chevron svg {
width: 14px;
height: 14px;
}
.article-sources-summary:hover .sources-summary-label,
.article-sources[open] .sources-summary-label {
color: rgba(24, 24, 27, 0.68);
}
.article-sources-summary:hover .sources-summary-chevron,
.article-sources[open] .sources-summary-chevron {
color: rgba(24, 24, 27, 0.5);
}
.sources-content-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--spring);
}
.sources-content {
min-height: 0;
overflow: hidden;
opacity: 0;
transition: opacity 0.35s ease, padding 0.35s ease;
padding: 0;
}
.article-sources[open] .sources-content-wrapper {
grid-template-rows: 1fr;
}
.article-sources[open] .sources-content {
opacity: 1;
padding: 8px 0 0;
}
.article-sources[open] .sources-summary-chevron {
transform: rotate(180deg);
}
.source-item {
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: var(--text-tertiary);
margin-bottom: 32px;
padding-left: 20px;
border-left: 3px solid rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 0.3s ease;
}
.source-item:last-child {
margin-bottom: 0;
}
.source-item:hover {
border-left-color: var(--bb-purple-light);
}
.source-item strong {
color: var(--text-secondary);
font-weight: 600;
}
.source-link {
color: var(--text-secondary);
text-decoration: none;
font-family: var(--mono);
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease;
width: fit-content;
background: #FFFFFF;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.source-link:hover {
color: var(--bb-purple-dark);
border-color: rgba(139, 92, 246, 0.2);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(139, 92, 246, 0.1);
}
.source-link svg {
width: 12px;
height: 12px;
}
.source-ref {
font-family: var(--mono);
font-size: 12px;
color: var(--text-tertiary);
background: rgba(0,0,0,0.02);
padding: 4px 10px;
border-radius: 6px;
width: fit-content;
}
        .index-dim-layer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.2);
transform: translateZ(0);
z-index: 180;
opacity: 0;
visibility: hidden;
transition: all 0.4s var(--spring);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
html.is-dark-mode .index-dim-layer {
background: rgba(0,0,0,0.4);
}
.index-dim-layer.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.toc-container {
position: fixed;
top: 140px;
left: 40px;
width: 260px;
max-height: calc(100vh - 200px);
z-index: 190;
display: flex;
flex-direction: column;
transform: translateX(-16px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 0.4s var(--spring), opacity 0.3s ease-out, visibility 0.4s;
}
.toc-container.is-open {
transform: translateX(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.toc-header-wrap {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-shrink: 0;
}
.toc-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--bb-purple-dark);
}
.toc-close-btn {
display: none;
}
.toc-content {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.1) transparent;
padding-right: 16px;
margin-right: -16px;
}
html.is-dark-mode .toc-content {
scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.chapter-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.chapter-item {
font-family: var(--sans);
font-size: 12px;
font-weight: 400;
color: var(--text-secondary);
text-decoration: none;
background: none;
border: none;
text-align: left;
padding: 2px 0 2px 12px;
cursor: pointer;
line-height: 1.4;
word-wrap: break-word;
position: relative;
transition: color 0.3s ease, font-weight 0.2s ease;
outline: none;
border-radius: 4px;
}
.chapter-item:focus-visible {
outline: 2px solid var(--bb-purple-light);
outline-offset: 2px;
}
.chapter-item::before {
content: '';
position: absolute;
left: 0;
top: 2px;
bottom: 2px;
width: 3px;
background: var(--bb-purple-dark);
border-radius: 2px;
opacity: 0;
transform: scaleY(0.5);
transition: opacity 0.2s ease, transform 0.2s var(--spring);
}
.chapter-item:hover {
color: var(--text-primary);
}
.chapter-item.is-active {
font-weight: 600;
color: var(--text-primary);
}
.chapter-item.is-active::before {
opacity: 1;
transform: scaleY(1);
}
/* Dark mode TOC text */        html.is-reading-mode.is-dark-mode .toc-label {
color: #C084FC;
}
html.is-reading-mode.is-dark-mode .chapter-item {
color: #A1A1AA;
}
html.is-reading-mode.is-dark-mode .chapter-item:hover {
color: #E4E4E7;
}
html.is-reading-mode.is-dark-mode .chapter-item.is-active {
color: #F4F4F5;
}
html.is-reading-mode.is-dark-mode .chapter-item.is-active::before {
background: #C084FC;
}
        .floating-action-bar {
position: fixed;
bottom: 40px;
right: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
z-index: 150;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--spring);
}
.floating-action-bar.is-article,
.floating-action-bar.is-perspectives {
opacity: 1;
pointer-events: auto;
}
.action-col-vertical {
display: flex;
flex-direction: column;
gap: 12px;
opacity: 0;
transform: translateY(24px) scale(0.9);
pointer-events: none;
visibility: hidden;
transition: opacity 0.4s var(--spring), transform 0.4s var(--spring), visibility 0.4s;
}
.floating-action-bar.show-share .action-col-vertical {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
}
.floating-action-bar .action-icon-btn {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
position: relative;
transition: all 0.4s var(--spring);
background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.05);
}
.floating-action-bar .action-icon-btn:hover, .floating-action-bar .action-icon-btn:focus-visible {
background: #FFFFFF;
color: #09090B;
border-color: rgba(0,0,0,0.15);
box-shadow: 0 6px 16px -4px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.floating-action-bar .action-icon-btn.is-copied {
background: rgba(9,9,11,0.06);
color: #09090B;
border-color: rgba(0,0,0,0.12);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.floating-action-bar .action-icon-btn svg {
width: 20px;
height: 20px;
transition: transform 0.4s var(--spring);
}
.floating-action-bar .action-icon-btn:hover svg, .floating-action-bar .action-icon-btn:focus-visible svg {
transform: scale(1.1);
}
.floating-action-bar .action-icon-btn.is-copied svg {
transform: scale(1.15);
}
.icon-wrap {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 20px;
height: 20px;
}
.floating-action-bar .action-icon-btn[data-share="copy"] .icon-wrap svg {
position: absolute;
inset: 0;
transition: opacity 0.22s ease, transform 0.28s var(--spring), color 0.24s ease;
}
.floating-action-bar .action-icon-btn[data-share="copy"] .share-icon--default {
opacity: 1;
transform: scale(1);
}
.floating-action-bar .action-icon-btn[data-share="copy"] .share-icon--success {
opacity: 0;
transform: scale(0.72);
}
.floating-action-bar .action-icon-btn[data-share="copy"]:hover .share-icon--default,
.floating-action-bar .action-icon-btn[data-share="copy"]:focus-visible .share-icon--default {
transform: scale(1.08);
}
.floating-action-bar .action-icon-btn[data-share="copy"].is-copied .share-icon--default {
opacity: 0;
transform: scale(0.72);
}
.floating-action-bar .action-icon-btn[data-share="copy"].is-copied .share-icon--success {
opacity: 1;
transform: scale(1);
}
html.is-reading-mode.is-dark-mode .floating-action-bar .action-icon-btn.is-copied {
background: rgba(255,255,255,0.1);
color: #F4F4F5;
border-color: rgba(255,255,255,0.2);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Index Button - Always visible in article mode */        .floating-action-bar .index-toggle-btn {
display: none;
}
.floating-action-bar.is-article .index-toggle-btn {
display: flex;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
}
.icon-menu-svg, .icon-close-svg {
position: absolute;
transition: transform 0.4s var(--spring), opacity 0.3s ease;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.icon-close-svg {
opacity: 0;
transform: scale(0.5) rotate(-90deg);
}
.index-toggle-btn.is-open .icon-menu-svg {
opacity: 0;
transform: scale(0.5) rotate(90deg);
}
.index-toggle-btn.is-open .icon-close-svg {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.floating-action-bar .action-tooltip {
position: absolute;
background: var(--text-primary);
color: var(--bb-white);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
padding: 6px 12px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: all 0.3s var(--spring);
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
top: 50%;
right: calc(100% + 12px);
transform: translateY(-50%) translateX(8px) scale(0.95);
}
.floating-action-bar .action-tooltip::after {
content: '';
position: absolute;
border-style: solid;
top: 50%;
left: 100%;
right: auto;
transform: translateY(-50%);
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent var(--text-primary);
}
.floating-action-bar .action-icon-btn.is-copied .action-tooltip {
transform: translateY(-50%) translateX(0) scale(1);
opacity: 1;
}
.floating-action-bar .action-icon-btn:hover .action-tooltip,        .floating-action-bar .action-icon-btn:focus-visible .action-tooltip {
transform: translateY(-50%) translateX(0) scale(1);
opacity: 1;
}
.floating-divider {
width: 1px;
height: 20px;
background: rgba(0,0,0,0.1);
opacity: 0;
transform: scaleY(0);
transition: all 0.4s var(--spring);
}
.floating-action-bar.show-share .floating-divider {
opacity: 1;
transform: scaleY(1);
}
/* Integrated Reading Progress & Back to Top */        .back-to-top {
position: relative;
width: 52px;
height: 52px;
border-radius: 50%;
background: #09090B;
border: none;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
color: var(--bb-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: translateY(24px) scale(0.9);
pointer-events: none;
visibility: hidden;
transition: opacity 0.4s var(--spring), transform 0.4s var(--spring), visibility 0.4s, box-shadow 0.4s var(--spring), background-color 0.4s var(--spring);
}
.back-to-top.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
}
.back-to-top.is-visible:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
background: #18181B;
color: var(--bb-white);
}
/* The Circular SVG Progress */        .progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
pointer-events: none;
border-radius: 50%;
}
.progress-ring__circle {
transition: stroke-dashoffset 0.1s ease-out;
stroke-linecap: round;
}
.b2t-icon {
width: 18px;
height: 18px;
transition: transform 0.3s var(--spring);
position: relative;
z-index: 2;
}
.back-to-top:hover .b2t-icon {
transform: translateY(-3px);
}
@media (min-width: 769px) {
.floating-action-bar.is-article .action-col-vertical {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
}
.floating-action-bar.is-article .floating-divider {
opacity: 1;
transform: scaleY(1);
}
.floating-action-bar.is-article .back-to-top {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
}
.floating-action-bar.is-article .back-to-top:hover,
.floating-action-bar.is-article .back-to-top:focus-visible {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
background: #18181B;
color: var(--bb-white);
}
}
        .footer {
margin-top: 120px;
padding-top: 80px;
padding-bottom: 40px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
opacity: 1;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);
}
.footer-cta {
margin-bottom: 64px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.intake-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(139, 92, 246, 0.05);
border: 1px solid rgba(139, 92, 246, 0.15);
}
.intake-badge .status-text {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--bb-purple-dark);
}
.footer-headline {
font-family: var(--serif);
font-size: clamp(48px, 6vw, 64px);
font-weight: 400;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
text-wrap: balance;
transition: opacity 0.3s ease;
}
.shimmer-text {
background: linear-gradient(-45deg, #000000 0%, #000000 35%, #6D28D9 50%, #000000 65%, #000000 100%);
background-size: 300% auto;
color: transparent;
display: inline-block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 8s linear infinite;
}
html.is-reading-mode.is-dark-mode .shimmer-text {
background: linear-gradient(-45deg, #F4F4F5 0%, #F4F4F5 35%, #C084FC 50%, #F4F4F5 65%, #F4F4F5 100%);
background-size: 300% auto;
color: transparent;
display: inline-block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.founding-context {
font-family: var(--sans);
font-size: 18px;
font-weight: 400;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 32px;
max-width: 420px;
text-wrap: balance;
}
.fc-form {
display: flex;
width: 100%;
max-width: 440px;
gap: 8px;
margin-bottom: 24px;
position: relative;
}
.fc-input {
flex: 1;
background: rgba(255,255,255,0.95);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 12px;
padding: 15px 24px;
font-family: var(--sans);
font-size: 15px;
color: var(--text-primary);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
transition: all 0.3s ease;
}
.fc-input::placeholder {
color: #52525B;
}
.fc-input:focus {
border-color: #09090B;
box-shadow: 0 0 0 4px rgba(9,9,11,0.06), inset 0 2px 4px rgba(0,0,0,0.02);
outline: none;
background: #FFFFFF;
}
.fc-submit {
background: #09090B;
color: var(--bb-white);
border: none;
padding: 15px 30px;
border-radius: 10px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fc-submit:hover {
transform: translateY(-2px);
background: #18181B;
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.25);
}
.fc-submit:active {
transform: scale(0.96) translateY(0);
transition: transform 0.05s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Form Error State */        .fc-input.is-error {
border-color: #EF4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1), inset 0 2px 4px rgba(0,0,0,0.02);
animation: formShake 0.3s var(--spring);
}
.fc-error-msg {
display: none;
font-family: var(--mono);
font-size: 12px;
color: #EF4444;
letter-spacing: 0.02em;
padding: 6px 24px 0;
font-weight: 500;
}
.fc-form.has-error + .fc-error-msg {
display: block;
}
@keyframes formShake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-6px);
}
40% {
transform: translateX(6px);
}
60% {
transform: translateX(-4px);
}
80% {
transform: translateX(4px);
}
100% {
transform: translateX(0);
}
}
        @keyframes ctaPulse {
0% {
transform: scale(1);
border-color: rgba(0,0,0,0.08);
box-shadow: 0 0 0 0 rgba(9,9,11, 0);
}
40% {
transform: scale(1.03);
border-color: #09090B;
box-shadow: 0 0 0 8px rgba(9,9,11, 0.06);
}
100% {
transform: scale(1);
border-color: rgba(0,0,0,0.08);
box-shadow: 0 0 0 0 rgba(9,9,11, 0);
}
}
.fc-input.is-pulse {
animation: ctaPulse 0.6s var(--ease-fluid) forwards;
}
/* Form Success Confirmation */        .fc-success-row {
display: none;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
width: 100%;
max-width: 440px;
}
.fc-success-row svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.fc-form.is-success {
display: none;
}
.fc-form.is-success + .fc-error-msg {
display: none;
}
.fc-form.is-success ~ .fc-success-row {
display: flex;
animation: viewEnterSpring 0.5s var(--ease-fluid) forwards;
}
/* Dark mode form states */        html.is-reading-mode.is-dark-mode .fc-input.is-error {
border-color: #F87171;
box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15), inset 0 2px 4px rgba(0,0,0,0.1);
}
html.is-reading-mode.is-dark-mode .fc-error-msg {
color: #F87171;
}
html.is-reading-mode.is-dark-mode .fc-success-row {
color: #F4F4F5;
}
.fallback-contact {
font-size: 14px;
color: var(--text-secondary);
font-weight: 500;
}
.fallback-contact a {
color: var(--text-primary);
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
position: relative;
padding-bottom: 2px;
}
.fallback-contact a::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: var(--border-dim);
transition: background-color 0.3s ease;
}
.fallback-contact a:hover {
color: var(--text-primary);
}
.fallback-contact a:hover::after {
background-color: var(--text-primary);
}
.footer-divider-line {
width: 40px;
height: 1px;
background: rgba(0,0,0,0.08);
margin-bottom: 40px;
}
.footer-identity {
margin-bottom: 24px;
}
.footer-tagline {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 40px;
}
.footer-legal {
font-size: 12px;
color: var(--text-tertiary);
font-weight: 500;
}
/* Advanced Reveal Animations */
.reveal {
opacity: 0;
transform: translateY(32px) scale(0.98);
}
.reveal-soft {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
#view-overview .reveal:not(#heroCodeWrap),
#view-overview .reveal-soft:not(#heroCodeWrap) {
opacity: 1;
transform: none;
animation: none !important;
}
@keyframes fadeUpReveal {
0% {
opacity: 0;
transform: translateY(40px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeUpRevealSoft {
0% {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes shimmer {
0% {
background-position: 300% center;
}
100% {
background-position: 0% center;
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
}
70% {
box-shadow: 0 0 0 8px rgba(16,185,129,0);
}
100% {
box-shadow: 0 0 0 0 rgba(16,185,129,0);
}
}
@keyframes pulse-purple {
0% {
box-shadow: 0 0 0 0 rgba(9,9,11, 0.25);
}
70% {
box-shadow: 0 0 0 6px rgba(9,9,11, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(9,9,11, 0);
}
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
        @media (max-width: 1100px) {
.toc-container {
top: 0;
left: 0;
width: 320px;
height: 100vh;
max-height: none;
background: var(--bg-body);
border: none;
border-right: 1px solid rgba(0,0,0,0.04);
box-shadow: var(--shadow-heavy);
transform: translateX(-100%);
padding: 40px 24px;
}
html.is-reading-mode .toc-container {
background: var(--bg-body);
}
html.is-reading-mode.is-dark-mode .toc-container {
background: #1A1A1F;
border-color: rgba(255,255,255,0.06);
}
.toc-container.is-open {
transform: translateX(0);
}
.toc-close-btn {
display: block;
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 4px;
margin: -4px;
transition: color 0.3s ease;
border-radius: 50%;
}
.toc-close-btn:hover {
color: var(--text-primary);
}
.toc-close-btn svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 768px) {
.page {
padding: calc(var(--site-header-height) + 8px) 20px 0;
}
.site-header .backbone-logo {
font-size: 30px !important;
--backbone-logo-mark-size: 32px;
--backbone-logo-mark-y: -2px;
}
.header-inner {
min-height: var(--site-header-height);
padding: 0 14px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
}
.nav-center {
position: static;
left: auto;
transform: none;
justify-self: center;
gap: 14px;
min-width: 0;
}
.btn-header {
min-height: 34px;
padding: 6px 10px;
font-size: 0;
line-height: 1;
white-space: nowrap;
justify-self: end;
}
.btn-header::after {
content: 'Access';
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.nav-link {
font-size: 12.5px;
padding: 4px 0;
}
.header-right {
justify-self: end;
gap: 0;
}
.nav-status {
display: none;
min-height: 32px;
padding: 0 10px;
gap: 6px;
flex-shrink: 0;
}
.nav-status-dot {
width: 6px;
height: 6px;
box-shadow: 0 0 0 3px rgba(16,185,129,0.12), 0 0 10px rgba(16,185,129,0.38);
}
.nav-status span {
font-size: 11px;
white-space: nowrap;
}
.hero-cta-wrapper {
margin-bottom: 32px;
gap: 10px;
}
.hero-signature {
font-size: 11.5px;
line-height: 1.5;
}
.trust-anchors {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: 64px;
}
.trust-item + .trust-item {
padding-left: 0;
border-left: none;
padding-top: 16px;
border-top: 1px solid rgba(0,0,0,0.06);
}
.trust-breaks-lead {
margin-bottom: 14px;
max-width: 100%;
font-size: 1.04rem;
line-height: 1.58;
}
.trust-breaks-shell {
margin: 0;
max-width: 100%;
}
.trust-breaks-grid {
gap: 16px;
}
.trust-break-icon {
width: 40px;
height: 40px;
margin-bottom: 16px;
}
.trust-break-title {
margin: 0 0 8px;
font-size: 15px;
line-height: 1.35;
}
.trust-break-copy {
font-size: 14px;
line-height: 1.5;
}
.who-help-section {
margin: 44px 0 0;
}
.who-help-lead {
max-width: 100%;
margin-bottom: 24px;
font-size: 1rem;
}
.who-help-grid {
grid-template-columns: 1fr;
gap: 22px;
padding-top: 0;
border-top: none;
}
.who-help-title {
font-size: clamp(34px, 11vw, 44px);
margin-bottom: 8px;
}
.who-help-subtitle {
font-size: 0.98rem;
margin-bottom: 8px;
}
.who-help-copy {
font-size: 0.95rem;
}
.stat-line {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px 0;
margin: 48px 0;
}
.stat-item {
padding: 24px;
}
.quote-block {
padding: 32px 24px;
margin: 48px 0;
border-radius: 20px;
}
.quote-block::before {
font-size: 120px;
top: -10px;
left: 16px;
}
.code-wrap {
margin: 48px 0;
}
.code-block {
padding: 24px;
}
.code-wrap::after {
content: '';
position: absolute;
top: 45px;
right: 0;
bottom: 0;
width: 48px;
background: linear-gradient(to right, rgba(9,9,11,0), rgba(9,9,11,1));
pointer-events: none;
z-index: 2;
border-bottom-right-radius: 20px;
}
.meta-divider {
display: none;
}
.article-item {
padding: 32px 24px;
border-radius: 20px;
}
.issue-header {
margin-bottom: 16px;
}
.article-item.is-featured .issue-header {
margin-bottom: 20px;
}
.issue-number {
font-size: 28px;
}
.article-item.is-featured .issue-number {
font-size: 40px;
}
.article-title-wrap {
gap: 16px;
align-items: center;
}
.article-arrow-wrap {
display: flex;
height: 36px;
padding: 0 12px;
margin-top: 0;
}
.article-arrow-text {
font-size: 12px;
margin-right: 6px;
margin-left: 0;
}
.article-arrow {
width: 14px;
height: 14px;
}
.article-excerpt {
max-width: 100%;
font-size: 1.05rem;
}
.editorial-premise {
margin-bottom: 48px;
padding-bottom: 32px;
}
.premise-text {
font-size: 1.15rem;
}
.pull-quote {
margin: 80px 0;
padding: 0;
font-size: 28px;
}
.pull-quote::before {
font-size: 160px;
margin-top: 10px;
}
.article-header h1 {
font-size: 48px;
scroll-margin-top: 104px;
}
.article-body {
font-size: 1.0625rem;
}
.article-body h2 {
font-size: 32px;
margin-top: 64px;
margin-bottom: 24px;
scroll-margin-top: 104px;
}
.article-sources {
margin-top: 40px;
margin-bottom: 20px;
}
.article-sources-summary {
padding: 14px 0;
}
.sources-summary-label {
font-size: 10px;
letter-spacing: 0.12em;
}
.article-sources[open] .sources-content {
padding-top: 6px;
}
.fc-form {
flex-direction: column;
border-radius: 24px;
gap: 12px;
}
.fc-submit {
width: 100%;
justify-content: center;
padding: 16px;
}
.floating-action-bar {
bottom: 24px;
right: 50%;
transform: translateX(50%) translateY(24px) scale(0.9);
flex-direction: row;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 6px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
gap: 0;
align-items: center;
}
.floating-action-bar.is-article {
opacity: 1;
pointer-events: auto;
transform: translateX(50%) translateY(0) scale(1);
}
.floating-action-bar.show-b2t {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateX(50%) translateY(0) scale(1);
}
/* The Theme toggle stays visible in mobile, tooltips hidden */            .floating-action-bar .action-tooltip {
display: none;
}
.action-col-vertical {
flex-direction: row;
gap: 4px;
max-width: 0;
opacity: 0;
overflow: hidden;
transform: none;
margin: 0;
transition: max-width 0.35s var(--spring), opacity 0.4s ease, margin 0.4s ease;
}
.floating-action-bar.show-share .action-col-vertical {
max-width: 200px;
opacity: 1;
margin-right: 4px;
}
.floating-divider {
width: 1px;
height: 24px;
margin: 0;
transform: scaleY(0);
transition: transform 0.4s var(--spring), margin 0.4s ease;
}
/* Mobile TOC */            .toc-container {
width: 85%;
}
.chapter-item {
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
}
.chapter-list {
gap: 4px;
}
/* Index button in mobile bar */            .floating-action-bar .index-toggle-btn {
margin-right: 0;
max-width: 0;
padding: 0;
border-width: 0;
overflow: hidden;
transform: none;
opacity: 0;
transition: max-width 0.35s var(--spring), opacity 0.4s ease, margin 0.4s ease;
display: none;
}
.floating-action-bar.is-article .index-toggle-btn {
max-width: 48px;
border-width: 1px;
margin-right: 4px;
transform: none;
opacity: 1;
overflow: visible;
display: flex;
padding: 6px;
}
.return-wormhole-pill {
bottom: 84px;
/* sit slightly higher on mobile to clear action bar */            }
}

@media (max-width: 640px) {
:root {
--site-header-height: 104px;
}
.page {
padding: calc(var(--site-header-height) + 8px) 16px 0;
}
.site-header .backbone-logo {
font-size: 27px !important;
--backbone-logo-mark-size: 29px;
--backbone-logo-mark-y: -2px;
grid-area: logo;
min-width: 0;
}
.header-inner {
height: 100%;
min-height: var(--site-header-height);
padding: 12px 14px 10px;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"logo cta"
"nav nav";
gap: 8px 12px;
align-content: center;
}
.nav-center {
grid-area: nav;
justify-self: stretch;
justify-content: flex-start;
gap: 16px;
padding-left: 2px;
}
.nav-link {
font-size: 12.5px;
padding: 6px 0;
}
.header-right {
grid-area: cta;
align-self: start;
justify-self: end;
}
.btn-header {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 12px;
}
.btn-header::after {
font-size: 12px;
}
#view-overview.overview-refresh {
margin-top: calc(-1 * (var(--site-header-height) + 8px));
}
#view-overview.overview-refresh .ovr-hero {
padding-top: calc(var(--site-header-height) + 44px);
}
}

@media (max-width: 560px) {
.site-header .backbone-logo {
font-size: 26px !important;
--backbone-logo-mark-size: 28px;
--backbone-logo-mark-y: -2px;
}
.header-inner {
padding: 12px 12px 10px;
gap: 8px 10px;
}
.nav-center {
gap: 14px;
}
.nav-link {
font-size: 12px;
}
.btn-header {
padding: 0 11px;
}
.btn-header::after {
font-size: 11px;
}
}

/* Cross-View UX/UI Micro Polish (Enterprise coherence) */

#view-overview .hero-content-divider {
margin: 58px 0 48px;
}
#view-overview .divider {
margin: 66px 0 52px;
}
#view-overview .prose p {
margin-bottom: 26px;
}
#view-overview .prose .section-label {
margin-bottom: 18px;
}
#view-overview .trust-breaks-grid {
gap: 18px;
}
#view-overview .who-help-section {
margin-top: 56px;
}
#view-overview .stat-line {
margin: 56px 0 52px;
}
#view-overview .quote-block {
margin: 58px 0;
}
#view-overview .trust-break-card,
#view-overview .stat-item,
#view-overview .quote-block {
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.96);
}

html.is-reading-mode .toc-container {
left: 32px;
top: 132px;
width: 250px;
max-height: calc(100vh - 184px);
background: rgba(245, 243, 238, 0.86);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transform: translateZ(0);
box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.24);
padding: 18px 16px 16px;
}
html.is-reading-mode .toc-header-wrap {
margin-bottom: 16px;
}
html.is-reading-mode .toc-content {
padding-right: 10px;
margin-right: -10px;
}
html.is-reading-mode .chapter-list {
gap: 10px;
}
html.is-reading-mode .chapter-item {
font-size: 12.5px;
line-height: 1.45;
}
html.is-reading-mode .floating-action-bar {
gap: 10px;
}
html.is-reading-mode .floating-action-bar .action-icon-btn {
width: 42px;
height: 42px;
background: rgba(255, 255, 255, 0.74);
border-color: rgba(0, 0, 0, 0.07);
box-shadow: 0 4px 9px rgba(0, 0, 0, 0.07);
}
html.is-reading-mode .floating-action-bar .action-icon-btn:hover,
html.is-reading-mode .floating-action-bar .action-icon-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 6px 12px -8px rgba(0,0,0,0.14);
}
html.is-reading-mode .floating-action-bar .action-tooltip {
font-size: 9.5px;
padding: 5px 9px;
}
html.is-reading-mode .back-to-top {
width: 46px;
height: 46px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
html.is-reading-mode .back-to-top.is-visible:hover {
transform: translateY(-1px) scale(1.01);
box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
html.is-reading-mode.is-dark-mode .toc-container {
background: rgba(26, 26, 31, 0.84);
border-color: rgba(255, 255, 255, 0.09);
box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.52);
}
html.is-reading-mode.is-dark-mode .floating-action-bar .action-icon-btn {
background: rgba(26, 26, 31, 0.82);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.34);
}

.footer {
margin-top: 132px;
padding-top: 88px;
padding-bottom: 44px;
}
.footer-cta {
margin-bottom: 56px;
max-width: 560px;
}
.footer-headline {
margin-bottom: 18px;
}
.founding-context {
max-width: 500px;
font-size: 17px;
line-height: 1.62;
color: #595a68;
margin-bottom: 28px;
}
.fc-form {
margin-bottom: 20px;
}
.footer-divider-line {
width: 56px;
margin-bottom: 26px;
background: rgba(0, 0, 0, 0.1);
}
.footer-tagline {
margin-bottom: 14px;
font-size: 11px;
letter-spacing: 0.12em;
}
.footer-legal {
max-width: 640px;
font-size: 11.5px;
line-height: 1.6;
color: #8a8b98;
}

@media (max-width: 768px) {
#view-overview .hero-content-divider {
margin: 42px 0 34px;
}
#view-overview .divider {
margin: 52px 0 40px;
}
#view-overview .quote-block {
margin: 44px 0;
}
html.is-reading-mode .toc-container {
padding: 24px 18px;
}
.footer {
margin-top: 112px;
padding-top: 74px;
}
.footer-cta {
margin-bottom: 48px;
}
.founding-context {
font-size: 16px;
line-height: 1.58;
}
.footer-legal {
font-size: 11px;
}
}

/* Fixes: Overview quote mark + reading TOC background reset */
#view-overview .quote-block::before {
content: '\201C';
letter-spacing: -0.28em;
font-family: var(--serif);
}

html.is-reading-mode .toc-container {
background: transparent;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}

html.is-reading-mode.is-dark-mode .toc-container {
background: transparent;
border-color: transparent;
box-shadow: none;
}

@media (max-width: 768px) {
#view-overview .quote-block::before {
letter-spacing: -0.24em;
}
}







/* --- EDITORIAL HUMAN TOUCH --- */
.issue-number-ink {
    font-family: var(--ink);
    font-size: 48px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 0.7;
    transform: rotate(-2deg);
    position: relative;
    display: inline-block;
}

/* Editor's Circle (Static + Redraw Hover) */
.editor-circle-static {
    position: absolute; top: -15px; left: -15px;
    width: 80px; height: 80px;
    pointer-events: none; z-index: 5; overflow: visible;
}
.circle-redraw path {
    fill: none; stroke: #EF4444; stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 200; stroke-dashoffset: 0;
}
.article-item:hover .circle-redraw path {
    animation: reDraw 0.6s var(--draw-ease) forwards;
}
@keyframes reDraw {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
}

.text-static {
    position: absolute; top: -15px; left: 65px;
    font-family: var(--ink); font-size: 24px; color: #EF4444;
    transform: rotate(-5deg); opacity: 1;
    transition: transform 0.3s var(--spring);
    white-space: nowrap;
}
.article-item:hover .text-static {
    transform: rotate(-2deg) scale(1.05);
}

/* Autoren Signatur unten rechts */
.author-box {
    margin-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: border-color 0.3s ease;
}
.article-item:hover .author-box { border-top-color: rgba(0,0,0,0.08); }

.signature {
    font-family: var(--ink);
    font-size: 32px;
    line-height: 1;
    transform: rotate(-3deg);
    opacity: 0.75;
    transition: all 0.4s var(--spring);
}
.article-item:hover .signature {
    opacity: 1;
    transform: rotate(-1deg) scale(1.05);
}

/* Individuelle Tintenfarben */
.ink-black { color: #27272A; }
.ink-purple { color: var(--bb-purple); }
.ink-blue { color: #2563EB; }
.ink-green { color: #059669; }
/* --- EDITORIAL HUMAN TOUCH EXTENSIONS --- */
.signal-ink-risk {
    font-style: italic;
    color: var(--text-primary);
    font-weight: 600;
}

.ink-circle-wrap {
    position: relative;
    display: inline-block;
    color: inherit;
    font-weight: 600;
    white-space: nowrap;
    z-index: 2;
}

.ink-circle-wrap svg {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 140%;
    pointer-events: none;
    overflow: visible;
    z-index: -1;
    opacity: 0.85;
}

.ink-circle-wrap path {
    fill: none;
    stroke: #EF4444;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
}

.ink-circle-wrap:hover path,
.ink-circle-wrap:focus-within path {
    animation: circleReDraw 0.6s var(--draw-ease) forwards;
}

.ink-note-danger {
    position: absolute;
    top: -20px;
    right: -18px;
    font-family: var(--marker);
    font-size: 18px;
    color: #EF4444;
    transform: rotate(5deg);
    opacity: 1;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transition: transform 0.3s var(--spring);
}

.ink-circle-wrap:hover .ink-note-danger,
.ink-circle-wrap:focus-within .ink-note-danger {
    transform: rotate(2deg) scale(1.05);
}

.quote-block--annotated {
    cursor: pointer;
    overflow: visible;
    padding-right: 72px;
    padding-bottom: 56px;
}

.quote-block--annotated .ink-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.quote-block--annotated .ink-highlight::before {
    content: '';
    position: absolute;
    top: 42%;
    left: -2%;
    right: -2%;
    bottom: 0;
    background: rgba(139, 92, 246, 0.25);
    z-index: -1;
    transform: skewX(-15deg) scaleX(1);
    transform-origin: left;
    border-radius: 2px;
}

.quote-block--annotated:hover .ink-highlight::before,
.quote-block--annotated:focus-within .ink-highlight::before {
    animation: highlightReDraw 0.6s var(--draw-ease) forwards;
}

.ink-note-quote {
    position: absolute;
    right: 22px;
    bottom: 18px;
    font-family: var(--ink);
    font-size: 26px;
    color: var(--bb-purple-dark);
    line-height: 0.95;
    transform: rotate(-5deg);
    opacity: 1;
    pointer-events: none;
    transition: transform 0.3s var(--spring);
}

.quote-block--annotated:hover .ink-note-quote,
.quote-block--annotated:focus-within .ink-note-quote {
    transform: rotate(-2deg) scale(1.05);
}

.article-signature {
    position: relative;
    overflow: visible;
    padding-left: 10px;
}

.article-signature .sig-name {
    font-family: var(--ink);
    font-size: clamp(36px, 4.4vw, 42px);
    font-style: normal;
    font-weight: 700;
    color: #1E1B4B;
    transform: rotate(-2deg);
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    cursor: default;
}

.article-signature .sig-role {
    margin-left: 4px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
}

.footer,
.footer-cta,
.fc-form--editorial {
    overflow: visible;
}

.fc-form--editorial {
    margin-top: 12px;
}

.fc-form--editorial .ink-arrow-wrap {
    position: absolute;
    top: -50px;
    left: clamp(112px, 36%, 156px);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    opacity: 0.9;
    pointer-events: none;
}

.fc-form--editorial .ink-arrow-text {
    font-family: var(--ink);
    font-size: 24px;
    color: var(--bb-purple-dark);
    transform: rotate(-5deg);
    white-space: nowrap;
    transition: transform 0.3s var(--spring);
}

.fc-form--editorial .ink-arrow-wrap svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--bb-purple-dark);
    stroke-width: 2.5;
    stroke-linecap: round;
    transform: rotate(20deg) translateY(10px);
    overflow: visible;
}

.fc-form--editorial .ink-arrow-wrap path {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

.fc-form--editorial:hover .ink-arrow-text,
.fc-form--editorial:focus-within .ink-arrow-text {
    transform: rotate(-2deg) scale(1.05);
}

.fc-form--editorial:hover .ink-arrow-wrap path,
.fc-form--editorial:focus-within .ink-arrow-wrap path {
    animation: arrowReDraw 0.6s var(--draw-ease) forwards;
}

.inline-link,
.ink-link {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    line-height: inherit;
    padding-bottom: 0.24em;
    transition: color 0.3s ease;
}

.inline-link::after,
.ink-link::after {
    content: none;
}

.inline-link svg,
.ink-link svg {
    position: absolute;
    bottom: -4px;
    left: -2px;
    right: -2px;
    width: calc(100% + 4px);
    height: 8px;
    pointer-events: none;
    overflow: visible;
}

.inline-link path,
.ink-link path {
    fill: none;
    stroke: var(--bb-purple-dark);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

.inline-link:hover,
.inline-link:focus-visible,
.ink-link:hover,
.ink-link:focus-visible {
    color: var(--bb-purple-dark);
    background: none;
}

.inline-link:hover path,
.inline-link:focus-visible path,
.ink-link:hover path,
.ink-link:focus-visible path {
    animation: linkReDraw 0.4s var(--draw-ease) forwards;
}

html.is-dark-mode .article-signature .sig-name {
    color: #EDE9FE;
}

html.is-dark-mode .article-signature .sig-role {
    color: #A1A1AA;
}

html.is-dark-mode .quote-block--annotated .ink-highlight::before {
    background: rgba(192, 132, 252, 0.28);
}

html.is-dark-mode .ink-note-quote,
html.is-dark-mode .fc-form--editorial .ink-arrow-text,
html.is-dark-mode .fc-form--editorial .ink-arrow-wrap svg {
    color: #C084FC;
    stroke: #C084FC;
}

html.is-dark-mode .inline-link path,
html.is-dark-mode .ink-link path {
    stroke: #C084FC;
}

html.is-dark-mode .inline-link:hover,
html.is-dark-mode .inline-link:focus-visible,
html.is-dark-mode .ink-link:hover,
html.is-dark-mode .ink-link:focus-visible {
    color: #C084FC;
}

@keyframes circleReDraw {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
}

@keyframes highlightReDraw {
    0% { transform: skewX(-15deg) scaleX(0); }
    100% { transform: skewX(-15deg) scaleX(1); }
}

@keyframes arrowReDraw {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

@keyframes linkReDraw {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

@media (max-width: 900px) {
    .quote-block--annotated {
        padding-right: 48px;
        padding-bottom: 58px;
    }

    .ink-note-quote {
        right: 18px;
        bottom: 16px;
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .ink-note-danger {
        top: -28px;
        right: auto;
        left: 2px;
        font-size: 16px;
    }

    .fc-form--editorial .ink-arrow-wrap {
        top: -42px;
        left: 14px;
        gap: 6px;
    }

    .fc-form--editorial .ink-arrow-text {
        font-size: 20px;
    }

    .fc-form--editorial .ink-arrow-wrap svg {
        width: 34px;
        height: 34px;
        transform: rotate(18deg) translateY(8px);
    }
}

@media (max-width: 640px) {
    .quote-block--annotated {
        padding-right: 24px;
        padding-bottom: 76px;
    }

    .ink-note-quote {
        right: 18px;
        bottom: 18px;
        max-width: 150px;
        font-size: 20px;
        text-align: right;
    }

    .article-signature .sig-name {
        font-size: 42px;
    }
}
/* --- HUMAN TOUCH REFINEMENTS --- */
html.is-restoring-article-scroll .article-container,
html.is-restoring-article-scroll #siteFooter,
html.is-restoring-article-scroll .floating-action-bar,
html.is-initial-reading-boot .article-container,
html.is-initial-reading-boot #siteFooter,
html.is-initial-reading-boot .floating-action-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}
html.is-restoring-view-scroll .page {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

.footer-cta {
    position: relative;
}

.fc-form--editorial .ink-arrow-wrap {
    top: 6px;
    left: calc(100% + 28px);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    opacity: 0.95;
}

.fc-form--editorial .ink-arrow-text {
    font-size: 32px;
    line-height: 0.9;
    transform: rotate(-4deg);
}

.fc-form--editorial .ink-arrow-wrap svg {
    width: 96px;
    height: 64px;
    stroke-width: 2.8;
    transform: none;
}

.fc-form--editorial .ink-arrow-wrap path {
    stroke-dasharray: 160;
}

.fc-form--editorial:hover .ink-arrow-text,
.fc-form--editorial:focus-within .ink-arrow-text {
    transform: rotate(-1deg) scale(1.04);
}

.inline-link,
.ink-link {
    padding-bottom: 0.08em;
}

.inline-link svg,
.ink-link svg {
    bottom: -1px;
    left: -1px;
    right: -1px;
    width: calc(100% + 2px);
    height: 6px;
}

.inline-link path,
.ink-link path {
    stroke: rgba(39, 39, 42, 0.44);
    stroke-width: 1.85;
    transition: stroke 0.28s ease;
}

.inline-link:hover,
.inline-link:focus-visible,
.ink-link:hover,
.ink-link:focus-visible {
    color: inherit;
}

.inline-link:hover path,
.inline-link:focus-visible path,
.ink-link:hover path,
.ink-link:focus-visible path {
    stroke: var(--bb-purple-dark);
}

html.is-dark-mode .inline-link path,
html.is-dark-mode .ink-link path {
    stroke: rgba(244, 244, 245, 0.42);
}

html.is-dark-mode .inline-link:hover,
html.is-dark-mode .inline-link:focus-visible,
html.is-dark-mode .ink-link:hover,
html.is-dark-mode .ink-link:focus-visible {
    color: inherit;
}

html.is-dark-mode .inline-link:hover path,
html.is-dark-mode .inline-link:focus-visible path,
html.is-dark-mode .ink-link:hover path,
html.is-dark-mode .ink-link:focus-visible path {
    stroke: #C084FC;
}

@media (max-width: 1180px) {
    .fc-form--editorial .ink-arrow-wrap {
        top: 10px;
        left: calc(100% + 16px);
    }

    .fc-form--editorial .ink-arrow-text {
        font-size: 28px;
    }

    .fc-form--editorial .ink-arrow-wrap svg {
        width: 82px;
        height: 56px;
    }
}

@media (max-width: 768px) {
    .fc-form--editorial .ink-arrow-wrap {
        top: -58px;
        left: auto;
        right: 6px;
        align-items: flex-end;
    }

    .fc-form--editorial .ink-arrow-text {
        font-size: 24px;
    }

    .fc-form--editorial .ink-arrow-wrap svg {
        width: 70px;
        height: 48px;
    }
}

@media (max-width: 560px) {
    .fc-form--editorial .ink-arrow-wrap {
        top: -52px;
        right: 12px;
    }

    .fc-form--editorial .ink-arrow-text {
        font-size: 21px;
    }
}
/* --- PURE EDITORIAL HIGHLIGHT --- */
.hl-editorial {
    color: var(--text-primary, #09090B);
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

p:hover .hl-editorial,
div:hover > .hl-editorial {
    color: #000000;
}

/* --- STRAIGHT INLINE DEEP LINKS --- */
.inline-link svg,
.ink-link svg {
    bottom: -0.02em;
    height: 4px;
}

.inline-link path,
.ink-link path {
    stroke-linecap: butt;
    stroke-linejoin: miter;
}
/* --- EDITORIAL INLINE LINKS --- */
.editorial-link {
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    display: inline;
    position: static;
    padding-bottom: 0 !important;
    background: none !important;
}

.editorial-link .link-text {
    font-style: italic;
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(0, 0, 0, 0.35);
    transition: text-decoration-color 0.24s ease, color 0.24s ease, background-color 0.45s ease, box-shadow 0.45s ease;
}

.editorial-link .link-arrow {
    display: inline-block;
    width: 0.65em;
    height: 0.65em;
    margin-left: 4px;
    vertical-align: baseline;
    position: relative;
    top: -1px;
    color: rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.24s ease;
}

.editorial-link .link-arrow path {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.editorial-link:hover .link-text,
.editorial-link:focus-visible .link-text {
    text-decoration-color: #6D28D9;
    color: #6D28D9;
}

.editorial-link:hover .link-arrow,
.editorial-link:focus-visible .link-arrow {
    color: #6D28D9;
    transform: translate(2px, -2px);
}

html.is-dark-mode .editorial-link .link-text {
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

html.is-dark-mode .editorial-link .link-arrow {
    color: rgba(255, 255, 255, 0.45);
}

html.is-dark-mode .editorial-link:hover .link-text,
html.is-dark-mode .editorial-link:focus-visible .link-text {
    text-decoration-color: #C084FC;
    color: #C084FC;
}

html.is-dark-mode .editorial-link:hover .link-arrow,
html.is-dark-mode .editorial-link:focus-visible .link-arrow {
    color: #C084FC;
}

.inline-link.editorial-link .link-arrow {
    left: auto;
    right: auto;
    bottom: auto;
    width: 0.65em;
    height: 0.65em;
    pointer-events: none;
    overflow: visible;
}

.inline-link.editorial-link .link-arrow path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
}

.inline-link.editorial-link:hover .link-arrow path,
.inline-link.editorial-link:focus-visible .link-arrow path {
    animation: none !important;
}

.editorial-link.target-glow .link-text {
    animation: glowFadeOut 4s var(--ease-fluid) forwards;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

html.is-reading-mode.is-dark-mode .editorial-link.target-glow .link-text {
    animation: glowFadeOutDark 4s var(--ease-fluid) forwards;
}

html.is-theme-switching .editorial-link .link-text {
    transition: text-decoration-color 0.9s ease-in-out, color 0.9s ease-in-out, background-color 0.9s ease-in-out, box-shadow 0.9s ease-in-out;
}

html.is-theme-switching .editorial-link .link-arrow {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.9s ease-in-out;
}

html.is-theme-switching .inline-link.editorial-link .link-arrow path {
    animation: none !important;
}

/* Homepage Scanability Refresh */
.summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 6px 0 48px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.74));
    box-shadow: 0 8px 26px -16px rgba(0,0,0,0.12);
    overflow: hidden;
}
.summary-cell {
    min-width: 0;
    padding: 22px 24px 24px;
}
.summary-cell + .summary-cell {
    border-left: 1px solid rgba(0,0,0,0.08);
}
.summary-role {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.summary-outcome {
    max-width: 17ch;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--text-primary);
}
.section-support-line {
    margin: 12px 0 22px;
    max-width: 760px;
    font-family: var(--sans);
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.55;
    letter-spacing: -0.015em;
    color: var(--text-secondary);
    text-wrap: balance;
}
.trust-breaks-support {
    margin-bottom: 28px;
}
.trust-break-kicker {
    margin: 18px 0 10px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(109, 40, 217, 0.76);
}
#view-overview .trust-breaks-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}
#view-overview .trust-break-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    padding: 40px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84));
    box-shadow: 0 -8px 24px -8px rgba(0,0,0,0.06);
    position: relative;
    min-height: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
#view-overview .trust-break-card:nth-child(2) {
    margin-top: -24px;
    z-index: 2;
}
#view-overview .trust-break-card:nth-child(3) {
    margin-top: -24px;
    z-index: 3;
}
#view-overview .trust-break-card:hover {
    transform: translateY(-6px);
    z-index: 10;
    border-color: rgba(109, 40, 217, 0.2);
    box-shadow: 0 12px 32px -8px rgba(109, 40, 217, 0.15);
}
#view-overview .trust-break-head,
#view-overview .trust-break-body {
    min-width: 0;
}
#view-overview .trust-break-body {
    display: flex;
    align-items: center;
}
#view-overview .trust-break-kicker {
    margin: 0 0 8px;
    color: var(--bb-purple-dark);
    letter-spacing: 0.1em;
}
#view-overview .trust-break-title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(28px, 3.8vw, 38px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
#view-overview .trust-break-copy {
    margin: 0;
    max-width: none;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
#view-overview .stat-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
#view-overview .stat-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    padding: 28px 24px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.6));
    box-shadow: 0 8px 24px -12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,1);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#view-overview .stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(109, 40, 217, 0.2);
    box-shadow: 0 12px 32px -12px rgba(109, 40, 217, 0.1), inset 0 1px 0 rgba(255,255,255,1);
}
#view-overview .stat-value {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--text-primary);
}
#view-overview .stat-label {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.who-help-section {
    margin: 56px 0 8px;
}
.who-help-lead {
    margin: 0 0 26px;
    max-width: 820px;
}
.who-help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 18px;
}
.who-help-item {
    min-height: 100%;
    padding: 22px 22px 24px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.76));
    box-shadow: 0 8px 22px -16px rgba(0,0,0,0.12);
}
.who-help-title {
    margin: 0 0 8px;
    font-size: clamp(28px, 2.9vw, 38px);
    line-height: 1.08;
}
.who-help-subtitle {
    margin: 0 0 12px;
    min-height: 0;
    font-size: 0.98rem;
    line-height: 1.5;
}
.who-help-copy {
    max-width: none;
}
.fact-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 28px 0 20px;
}
.fact-item {
    padding: 22px 24px 24px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78));
    box-shadow: 0 8px 24px -18px rgba(0,0,0,0.14);
}
.fact-meta {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.fact-copy {
    margin: 0;
    max-width: 32ch;
    font-size: 1rem;
    line-height: 1.62;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.why-now-bridge {
    margin: 0 0 18px;
    max-width: 720px;
    color: var(--text-secondary);
}
@media (max-width: 1100px) {
    .summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .summary-cell + .summary-cell {
        border-left: none;
    }
    .summary-cell:nth-child(even) {
        border-left: 1px solid rgba(0,0,0,0.08);
    }
    .summary-cell:nth-child(n+3) {
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    .who-help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .fact-panel {
        grid-template-columns: 1fr;
    }
    .fact-copy {
        max-width: none;
    }
}
@media (max-width: 680px) {
    .summary-strip {
        grid-template-columns: 1fr;
    }
    .summary-cell:nth-child(even) {
        border-left: none;
    }
    .summary-cell:nth-child(n+2) {
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    .who-help-grid {
        grid-template-columns: 1fr;
    }
    .who-help-item,
    .fact-item {
        padding: 20px 20px 22px;
    }
    #view-overview .trust-break-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px;
    }
    #view-overview .trust-break-card:nth-child(2),
    #view-overview .trust-break-card:nth-child(3) {
        margin-top: -14px;
    }
    #view-overview .trust-break-title {
        font-size: clamp(24px, 9vw, 32px);
    }
    #view-overview .stat-line {
        grid-template-columns: 1fr;
    }
    #view-overview .stat-item {
        padding: 24px 20px;
    }
}
.why-now-postscript {
    margin: 0 0 24px;
    max-width: 760px;
    color: var(--text-primary);
}

/* Homepage Polish Refinements */
.headline-secondary {
    margin-top: 14px;
    max-width: 880px;
}
.hero-cta-wrapper {
    margin-bottom: 32px;
    gap: 10px;
}
.hero-cta-btn {
    box-shadow: none;
}
.hero-cta-btn:hover {
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.25);
}
.hero-secondary-btn {
    border-color: rgba(9,9,11,0.18);
}
.hero-secondary-btn:hover {
    border-color: rgba(9,9,11,0.45);
}
.trust-anchors {
    gap: 12px;
}
.trust-item {
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
    box-shadow: 0 4px 10px -8px rgba(0,0,0,0.08);
}
.trust-item + .trust-item {
    padding-left: 14px;
    border-left: none;
}
.trust-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.85;
}
.trust-item span {
    white-space: nowrap;
}
.hero-content-divider {
    margin: 52px 0;
}
.chapter-item {
    transition: color 0.18s ease;
}
.chapter-item::before {
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.quote-block {
    box-shadow: 0 4px 22px -8px rgba(0,0,0,0.054), 0 1px 3px rgba(0,0,0,0.027);
}
.code-wrap.is-active-typing {
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.09), 0 24px 48px -12px rgba(139, 92, 246, 0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.article-item {
    box-shadow: 0 4px 12px rgba(0,0,0,0.036), inset 0 1px 0 rgba(255,255,255,1);
}
.article-item:hover {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.09), 0 4px 12px rgba(0,0,0,0.045), inset 0 1px 0 rgba(255,255,255,1);
}
.article-item.is-featured {
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.072), inset 0 1px 0 rgba(255,255,255,1);
}
.article-item.is-featured:hover {
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.108), inset 0 1px 0 rgba(255,255,255,1);
}
.article-item:hover .article-arrow-wrap {
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.25);
}
.who-help-item {
    box-shadow: 0 8px 22px -16px rgba(0,0,0,0.108);
}
.fact-item {
    box-shadow: 0 8px 24px -18px rgba(0,0,0,0.126);
}
@media (max-width: 768px) {
    .hero-cta-wrapper {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-bottom: 28px;
        gap: 12px;
    }
    .hero-cta-btn,
    .hero-secondary-btn {
        width: 100%;
        justify-content: center;
    }
    .trust-anchors {
        align-items: stretch;
        gap: 10px;
        margin-bottom: 52px;
    }
    .trust-item,
    .trust-item + .trust-item {
        width: 100%;
        padding: 12px 14px;
        padding-left: 14px;
        border: 1px solid rgba(0,0,0,0.08);
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    .trust-item span {
        white-space: normal;
    }
    .hero-content-divider {
        margin: 48px 0;
    }
}

/* Overview Final Pass */
#view-overview .section-support-line {
    margin: 0 0 36px;
    max-width: 640px;
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.55;
    letter-spacing: -0.012em;
    color: var(--text-secondary);
    text-wrap: balance;
}
#view-overview .trust-breaks-support {
    margin-bottom: 34px;
}
#view-overview .trust-breaks-shell {
    margin-top: 2px;
}
#view-overview .stat-line {
    margin: 48px 0 60px;
    align-items: stretch;
}
#view-overview .stat-item {
    border-radius: 18px;
}
#view-overview .stat-value {
    font-size: clamp(24px, 2.5vw, 30px);
}
#view-overview .who-help-section {
    margin-top: 60px;
}
#view-overview .who-help-lead {
    margin: 0 0 30px;
    max-width: none;
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.55;
    letter-spacing: -0.012em;
    color: var(--text-secondary);
    text-wrap: balance;
}
#view-overview .why-now-intro {
    margin: 0 0 46px;
    max-width: 640px;
    font-family: var(--serif);
    font-size: clamp(34px, 4.9vw, 38px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    text-wrap: balance;
}
#view-overview .why-now-spec {
    max-width: 640px;
    margin: 0 auto;
}
#view-overview .spec-table {
    border-top: 2px solid var(--text-primary);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
#view-overview .spec-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#view-overview .spec-row:last-child {
    border-bottom: none;
}
#view-overview .spec-row:hover {
    padding-left: 16px;
}
#view-overview .spec-title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(28px, 4vw, 32px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
#view-overview .spec-title--alert {
    color: #DC2626;
}
#view-overview .spec-copy {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
#view-overview .section-outro {
    margin: 40px auto 0;
    max-width: 640px;
    padding-left: 16px;
    border-left: 2px solid var(--bb-purple-dark);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-primary);
}
#view-overview .quote-block {
    margin: 52px 0 36px;
}
#view-overview .why-now-postscript {
    margin: 0 auto 22px;
    max-width: 640px;
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.58;
    color: var(--text-primary);
}
#view-overview .closing {
    margin-top: 28px;
}
#view-overview .overview-bottom-cta {
    margin-top: 52px;
}
html.is-dark-mode #view-overview .spec-table {
    border-top-color: rgba(244,244,245,0.9);
    border-bottom-color: rgba(255,255,255,0.12);
}
html.is-dark-mode #view-overview .spec-row {
    border-bottom-color: rgba(255,255,255,0.08);
}
html.is-dark-mode #view-overview .spec-title--alert {
    color: #F87171;
}
html.is-dark-mode #view-overview .section-outro {
    border-left-color: #A78BFA;
}
@media (max-width: 768px) {
    #view-overview .section-support-line {
        margin-bottom: 30px;
        font-size: 1rem;
    }
    #view-overview .why-now-intro {
        margin-bottom: 34px;
        font-size: clamp(30px, 9vw, 36px);
    }
    #view-overview .spec-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 24px 0;
    }
    #view-overview .spec-row:hover {
        padding-left: 8px;
    }
    #view-overview .section-outro {
        margin-top: 32px;
        font-size: 16px;
    }
    #view-overview .quote-block {
        margin: 44px 0 30px;
    }
    #view-overview .why-now-postscript {
        font-size: 17px;
        margin-bottom: 18px;
    }
    #view-overview .overview-bottom-cta {
        margin-top: 44px;
    }
}


/* ════════════════════════════════════════════════════════════
   ATLAS: EDGE HANDLE (Desktop spatial trigger)
   ════════════════════════════════════════════════════════════ */
.concept-term {
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(109, 40, 217, 0.3);
    text-underline-offset: 8px;
    padding: 2px 0;
    transition: color 0.3s ease, text-decoration-color 0.3s ease, text-underline-offset 0.3s ease;
}
.concept-term:hover,
.concept-term.is-active {
    color: var(--bb-purple-dark);
    text-decoration-color: var(--bb-purple-dark);
    text-underline-offset: 4px;
}
html.is-dark-mode .concept-term {
    text-decoration-color: rgba(192, 132, 252, 0.35);
}
html.is-dark-mode .concept-term:hover,
html.is-dark-mode .concept-term.is-active {
    color: #C084FC;
    text-decoration-color: #C084FC;
}

/* ════════════════════════════════════════════════════════════
   ATLAS: LAYER 2 — MICRO CARD (Hover / First Tap)
   ════════════════════════════════════════════════════════════ */
.atlas-micro-card {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    width: min(280px, calc(100vw - 20px));
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.atlas-micro-card.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.atlas-micro-card::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.96);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.atlas-micro-card[data-placement="bottom"]::after {
    top: -6px;
    bottom: auto;
    transform: translateX(-50%) rotate(225deg);
}
html.is-dark-mode .atlas-micro-card {
    background: rgba(30, 30, 36, 0.96);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html.is-dark-mode .atlas-micro-card::after {
    background: rgba(30, 30, 36, 0.96);
    border-color: rgba(255, 255, 255, 0.08);
}
.mc-title {
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.1;
    margin-bottom: 8px;
    color: #09090B;
}
html.is-dark-mode .mc-title { color: #F4F4F5; }
.mc-def {
    font-size: 13px;
    line-height: 1.5;
    color: #52525B;
    margin-bottom: 14px;
}
html.is-dark-mode .mc-def { color: #A1A1AA; }
.mc-explore {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: #6D28D9;
    cursor: default;
    user-select: none;
    pointer-events: none;
}
html.is-dark-mode .mc-explore { color: #C084FC; }
/* Mobile micro card */
@media (max-width: 768px) {
    .atlas-micro-card {
        position: fixed;
        top: auto;
        bottom: 100px;
        left: 16px;
        right: 16px;
        width: auto;
        transform: translateY(20px) scale(0.95);
    }
    .atlas-micro-card.is-visible {
        transform: translateY(0) scale(1);
    }
    .atlas-micro-card::after { display: none; }
}

/* ════════════════════════════════════════════════════════════
   ATLAS: LAYER 3 — CONCEPT PANEL (Left Drawer)
   ════════════════════════════════════════════════════════════ */
.atlas-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
html.is-dark-mode .atlas-panel-overlay {
    background: rgba(0, 0, 0, 0.42);
}
html.is-panel-open .atlas-panel-overlay {
    opacity: 1;
    pointer-events: auto;
}
html.is-panel-closing .atlas-panel-overlay,
html.is-panel-closing .atlas-panel {
    pointer-events: none;
}
.atlas-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 510;
    width: 520px;
    max-width: 100%;
    background: #F5F3EE;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.46s var(--ease-fluid);
    will-change: transform;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
html.is-dark-mode .atlas-panel {
    background: #16161B;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.4);
}
html.is-panel-open .atlas-panel {
    transform: translateX(0);
}
/* Spatial shift: article moves right when panel opens */
@media (min-width: 1200px) {
    html.is-panel-open.is-reading-mode .article-container {
        transform: translateX(152px);
        transition: transform 0.46s var(--ease-fluid);
    }
}
.article-container {
    transition: transform 0.46s var(--ease-fluid);
    will-change: transform;
}
/* Panel header */
.atlas-panel-header {
    padding: 22px 32px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #F5F3EE 72%, rgba(245, 243, 238, 0));
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    margin-bottom: 0;
}
html.is-dark-mode .atlas-panel-header {
    background: linear-gradient(180deg, #16161B 72%, rgba(22, 22, 27, 0));
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.atlas-panel-heading {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.atlas-panel-heading-word {
    font-family: var(--headline-font);
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #09090B;
    transform: translateY(-1px);
}
html.is-dark-mode .atlas-panel-heading-word {
    color: #F4F4F5;
}
.atlas-panel-heading-icon {
    --atlas-book-bg: #FAFAFA;
    --atlas-panel-book-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --atlas-panel-book-duration: 1.8s;
    width: 30px;
    height: 30px;
    position: relative;
    flex: 0 0 30px;
    color: #52525B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.36s ease, filter 0.5s ease;
    perspective: 800px;
}
html.is-dark-mode .atlas-panel-heading-icon {
    --atlas-book-bg: #1A1A1F;
    color: #A1A1AA;
}
.atlas-panel-heading-icon.is-open,
.atlas-panel-heading-icon.is-closing {
    color: #09090B;
    filter: drop-shadow(0 3px 10px rgba(9, 9, 11, 0.12));
}
html.is-dark-mode .atlas-panel-heading-icon.is-open,
html.is-dark-mode .atlas-panel-heading-icon.is-closing {
    color: #F4F4F5;
    filter: drop-shadow(0 3px 10px rgba(244, 244, 245, 0.06));
}
.atlas-panel-book {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-style: preserve-3d;
    transition: transform var(--atlas-panel-book-duration) var(--atlas-panel-book-ease);
}
.atlas-panel-heading-icon.is-opening .atlas-panel-book,
.atlas-panel-heading-icon.is-open .atlas-panel-book {
    transform: rotateX(35deg) rotateY(-20deg) rotateZ(5deg) scale(1.1);
}
.atlas-panel-book-spine {
    stroke-width: 3px;
    transition: stroke-width var(--atlas-panel-book-duration) var(--atlas-panel-book-ease);
}
.atlas-panel-book-page {
    transform-origin: 18px 18px;
    fill: var(--atlas-book-bg);
    transition: transform var(--atlas-panel-book-duration) var(--atlas-panel-book-ease);
}
.atlas-panel-book-page--cover {
    transform: rotateY(179deg);
}
.atlas-panel-book-page--one {
    transform: rotateY(177deg);
}
.atlas-panel-book-page--two {
    transform: rotateY(175deg);
}
.atlas-panel-book-code {
    stroke-width: 1.5px;
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}
.atlas-panel-heading-icon.is-opening .atlas-panel-book-spine,
.atlas-panel-heading-icon.is-open .atlas-panel-book-spine {
    stroke-width: 2px;
}
.atlas-panel-heading-icon.is-opening .atlas-panel-book-page--cover,
.atlas-panel-heading-icon.is-open .atlas-panel-book-page--cover {
    transform: rotateY(0deg);
}
.atlas-panel-heading-icon.is-opening .atlas-panel-book-page--one,
.atlas-panel-heading-icon.is-open .atlas-panel-book-page--one {
    transform: rotateY(-4deg);
    transition-delay: 0.2s;
}
.atlas-panel-heading-icon.is-opening .atlas-panel-book-page--two,
.atlas-panel-heading-icon.is-open .atlas-panel-book-page--two {
    transform: rotateY(-8deg);
    transition-delay: 0.4s;
}
.atlas-panel-heading-icon.is-opening .atlas-panel-book-code--1,
.atlas-panel-heading-icon.is-open .atlas-panel-book-code--1 {
    stroke-dashoffset: 0;
    transition-delay: 1s;
}
.atlas-panel-heading-icon.is-opening .atlas-panel-book-code--2,
.atlas-panel-heading-icon.is-open .atlas-panel-book-code--2 {
    stroke-dashoffset: 0;
    transition-delay: 1.4s;
}
.atlas-panel-heading-icon.is-opening .atlas-panel-book-code--3,
.atlas-panel-heading-icon.is-open .atlas-panel-book-code--3 {
    stroke-dashoffset: 0;
    transition-delay: 1.8s;
}

.atlas-panel-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.78);
    color: #52525B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.atlas-panel-close:hover {
    color: #09090B;
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.12);
    transform: scale(1.04);
}
html.is-dark-mode .atlas-panel-close {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
    color: #A1A1AA;
}
html.is-dark-mode .atlas-panel-close:hover {
    background: rgba(255,255,255,0.1);
    color: #F4F4F5;
}
/* Panel content */
.atlas-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 34px 32px 56px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.05) transparent;
}
.atlas-panel-content::-webkit-scrollbar {
    width: 3px;
}
.atlas-panel-content::-webkit-scrollbar-track {
    background: transparent;
}
.atlas-panel-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    transition: background 0.3s ease;
}
.atlas-panel-content:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}
html.is-dark-mode .atlas-panel-content {
    scrollbar-color: rgba(255, 255, 255, 0.05) transparent;
}
html.is-dark-mode .atlas-panel-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.04);
}
html.is-dark-mode .atlas-panel-content:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}
.atlas-panel-term-hero {
    margin-bottom: 0;
}
.atlas-panel-term-hero.is-animated {
    animation: atlasPanelFadeUp 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes atlasPanelFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .atlas-panel-heading-icon,
    .atlas-panel-book-shell,
    .atlas-panel-book-3d,
    .atlas-panel-book-depth,
    .atlas-panel-book-spine,
    .atlas-panel-book-page,
    .atlas-panel-book-code {
        transition: none !important;
    }
    .atlas-panel-heading-icon.is-open,
    .atlas-panel-heading-icon.is-closing,
    .atlas-panel-heading-icon.is-opening,
    html.is-dark-mode .atlas-panel-heading-icon.is-open {
        filter: none;
    }
    html.is-dark-mode .atlas-panel-heading-icon.is-closing {
        filter: none;
    }
    html.is-dark-mode .atlas-panel-heading-icon.is-opening {
        filter: none;
    }
}
/* Panel: title & definition */
.cp-title {
    font-family: var(--serif);
    font-size: clamp(42px, 4vw, 46px);
    line-height: 1.05;
    margin-bottom: 24px;
    letter-spacing: -0.025em;
}
.cp-def {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    margin-bottom: 40px;
    padding-left: 20px;
    border-left: 2px solid rgba(0, 0, 0, 0.18);
}
html.is-dark-mode .cp-def {
    color: #E4E4E7;
    border-left-color: rgba(255, 255, 255, 0.18);
}
.cp-section-title {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: #09090B;
    margin-bottom: 16px;
}
.cp-section-copy {
    font-size: 15px;
    line-height: 1.68;
    color: #52525B;
}
html.is-dark-mode .cp-section-title {
    color: #F4F4F5;
}
html.is-dark-mode .cp-section-copy {
    color: #A1A1AA;
}
/* Panel: Wormhole links */
.cp-section { margin-bottom: 48px; }
.cp-wormhole {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: border-color 0.3s var(--ease-fluid);
    background: transparent;
}
html.is-dark-mode .cp-wormhole {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.cp-wormhole:hover {
    border-bottom-color: rgba(109, 40, 217, 0.2);
}
html.is-dark-mode .cp-wormhole:hover {
    border-bottom-color: rgba(192, 132, 252, 0.2);
}
.wh-number {
    font-family: var(--mono);
    font-size: 12px;
    color: #71717A;
    flex-shrink: 0;
    transition: color 0.3s ease;
}
html.is-dark-mode .wh-number {
    color: #71717A;
}
.wh-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.4s var(--spring);
}
.wh-article {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.2;
    color: #09090B;
    transition: color 0.2s ease;
}
html.is-dark-mode .wh-article {
    color: #F4F4F5;
}
.wh-role {
    font-size: 13px;
    color: #A1A1AA;
    font-style: italic;
}
html.is-dark-mode .wh-role {
    color: #71717A;
}
.cp-wormhole:hover .wh-number {
    color: #6D28D9;
}
.cp-wormhole:hover .wh-details {
    transform: translateX(6px);
}
.cp-wormhole:hover .wh-article {
    color: #6D28D9;
}
html.is-dark-mode .cp-wormhole:hover .wh-number,
html.is-dark-mode .cp-wormhole:hover .wh-article {
    color: #C084FC;
}
.cp-wormhole.wormhole-return-highlight {
    animation: panelHighlight 3s ease forwards;
}
@keyframes panelHighlight {
    0% {
        border-color: #8B5CF6;
        background: rgba(139, 92, 246, 0.08);
    }
    60% {
        border-color: #8B5CF6;
        background: rgba(139, 92, 246, 0.08);
    }
    100% {
        border-color: rgba(0, 0, 0, 0.08);
        background: transparent;
    }
}
html.is-dark-mode .cp-wormhole.wormhole-return-highlight {
    animation: panelHighlightDark 3s ease forwards;
}
@keyframes panelHighlightDark {
    0% {
        border-color: #C084FC;
        background: rgba(192, 132, 252, 0.12);
    }
    60% {
        border-color: #C084FC;
        background: rgba(192, 132, 252, 0.12);
    }
    100% {
        border-color: rgba(255, 255, 255, 0.08);
        background: transparent;
    }
}
/* Panel: Related concepts */
.cp-related-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
html.is-dark-mode .cp-related-wrap {
    border-top-color: rgba(255, 255, 255, 0.08);
}
.cp-related-item {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 14px 0;
    color: #52525B;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--sans);
    width: 100%;
}
html.is-dark-mode .cp-related-item {
    color: #A1A1AA;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.cp-related-item:last-child {
    border-bottom: none;
}
.related-text {
    transition: transform 0.4s var(--spring);
}
.related-arrow {
    width: 18px;
    height: 18px;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.4s var(--spring);
    color: #6D28D9;
}
html.is-dark-mode .related-arrow {
    color: #C084FC;
}
.cp-related-item:hover {
    color: #6D28D9;
}
.cp-related-item:hover .related-text {
    transform: translateX(6px);
}
.cp-related-item:hover .related-arrow {
    opacity: 1;
    transform: translateX(0);
}
html.is-dark-mode .cp-related-item:hover {
    color: #C084FC;
}
/* Panel: Product Bridge */
.cp-bridge {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
html.is-dark-mode .cp-bridge {
    border-top-color: rgba(255, 255, 255, 0.08);
}
.cp-bridge-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    color: #A1A1AA;
    margin-bottom: 12px;
}
html.is-dark-mode .cp-bridge-label {
    color: #71717A;
}
.cp-bridge-title {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.15;
    color: #09090B;
    margin-bottom: 10px;
}
html.is-dark-mode .cp-bridge-title {
    color: #F4F4F5;
}
.cp-bridge-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #52525B;
    margin-bottom: 0;
}
html.is-dark-mode .cp-bridge-desc {
    color: #A1A1AA;
}
/* Mobile: Bottom Sheet */
@media (max-width: 768px) {
    .atlas-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 88vh;
        transform: translateY(100%);
        border-radius: 24px 24px 0 0;
        border-right: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.16);
    }
    html.is-panel-open .atlas-panel {
        transform: translateY(0);
    }
    .atlas-panel-header {
        padding: 18px 24px 12px;
    }
    .atlas-panel-heading-word {
        font-size: 24px;
    }
    .atlas-panel-heading-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
    .atlas-panel-content {
        padding: 24px 24px 40px;
    }
    .atlas-panel-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.15);
    }
    html.is-dark-mode .atlas-panel-header::before {
        background: rgba(255, 255, 255, 0.2);
    }
    .cp-title {
        font-size: 38px;
        margin-bottom: 24px;
    }
    .cp-def {
        margin-bottom: 40px;
        padding-left: 14px;
    }
    .cp-section {
        margin-bottom: 40px;
    }
    .cp-section-title {
        font-size: 20px;
    }
    .wh-article {
        font-size: 18px;
    }
}

/* ════════════════════════════════════════════════════════════
   ATLAS: FULL ATLAS VIEW
   ════════════════════════════════════════════════════════════ */
/* Hide TOC when panel is open */
html.is-panel-open .toc-container {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    pointer-events: none;
}

/* Wormhole target glow for Atlas jumps */
.wormhole-atlas-glow {
    animation: atlasGlow 5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border-radius: 4px;
    padding: 4px 6px;
    margin: -4px -6px;
    display: inline;
}
@keyframes atlasGlow {
    0% { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 16px rgba(139, 92, 246, 0.4); }
    20% { background: rgba(139, 92, 246, 0.15); box-shadow: 0 0 8px rgba(139, 92, 246, 0.2); }
    100% { background: transparent; box-shadow: none; }
}
html.is-dark-mode .wormhole-atlas-glow {
    animation-name: atlasGlowDark;
}
@keyframes atlasGlowDark {
    0% { background: rgba(192, 132, 252, 0.3); box-shadow: 0 0 16px rgba(192, 132, 252, 0.4); }
    20% { background: rgba(192, 132, 252, 0.15); }
    100% { background: transparent; box-shadow: none; }
}

/* Overview refresh */
html:not(.is-reading-mode):not(.is-perspectives-view) .site-header {
    background: rgba(245, 243, 238, 0.86);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateZ(0);
    box-shadow: none;
}
html.is-privacy-view .site-header,
html[data-initial-view="privacy"] .site-header {
    background: rgba(245, 243, 238, 0.86);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateZ(0);
    box-shadow: none;
}
html:not(.is-reading-mode):not(.is-perspectives-view) .site-header.is-scrolled {
    background: rgba(245, 243, 238, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}
html.is-privacy-view .site-header.is-scrolled,
html[data-initial-view="privacy"] .site-header.is-scrolled {
    background: rgba(245, 243, 238, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}
html.is-perspectives-view .site-header {
    background: rgba(245, 243, 238, 0.86);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateZ(0);
    box-shadow: none;
}
html.is-perspectives-view .site-header.is-scrolled {
    background: rgba(245, 243, 238, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}
html.is-reading-mode .site-header {
    background: rgba(245, 243, 238, 0.86);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateZ(0);
    box-shadow: none;
}
html.is-reading-mode .site-header.is-scrolled {
    background: rgba(245, 243, 238, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}
html.is-privacy-view .atlas-edge-handle,
html.is-privacy-view .atlas-fab-btn,
html.is-privacy-view .floating-action-bar,
html.is-privacy-view .back-to-top,
html[data-initial-view="privacy"] .atlas-edge-handle,
html[data-initial-view="privacy"] .atlas-fab-btn,
html[data-initial-view="privacy"] .floating-action-bar,
html[data-initial-view="privacy"] .back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
html.is-perspectives-view .floating-action-bar .theme-toggle-btn,
html.is-perspectives-view .floating-action-bar .action-col-vertical,
html.is-perspectives-view .floating-action-bar .floating-divider,
html.is-perspectives-view .back-to-top {
    display: none !important;
}
#view-overview.overview-refresh {
    --ovr-bg-primary: #F5F3EE;
    --ovr-bg-elevated: #FFFFFF;
    --ovr-bg-subtle: #EEEBE4;
    --ovr-bg-dark: #0A0A0A;
    --ovr-bg-dark-elevated: #141414;
    --ovr-text-primary: #0A0A0A;
    --ovr-text-secondary: #52525B;
    --ovr-text-muted: #A1A1AA;
    --ovr-text-inverse: #FAFAFA;
    --ovr-text-inverse-secondary: rgba(255, 255, 255, 0.68);
    --ovr-brand-purple: #7C3AED;
    --ovr-brand-green: #10B981;
    --ovr-border-light: rgba(0, 0, 0, 0.06);
    --ovr-border-medium: rgba(0, 0, 0, 0.1);
    --ovr-border-dark: rgba(255, 255, 255, 0.08);
    --ovr-border-dark-medium: rgba(255, 255, 255, 0.12);
    --ovr-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    --ovr-shadow-elevated: 0 4px 24px rgba(0, 0, 0, 0.06);
    --ovr-section-gap: clamp(96px, 12vw, 156px);
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    margin-top: -80px;
    padding: 0;
    background: var(--ovr-bg-primary);
    color: var(--ovr-text-primary);
    overflow: hidden;
}
#view-overview.overview-refresh .ovr-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
#view-overview.overview-refresh .ovr-container--narrow {
    max-width: 880px;
}
#view-overview.overview-refresh .ovr-section {
    padding: var(--ovr-section-gap) 0;
}
#view-overview.overview-refresh .ovr-section--light {
    background: var(--ovr-bg-primary);
}
#view-overview.overview-refresh .ovr-section--tight-top {
    padding-top: 0;
}
#view-overview.overview-refresh .ovr-section--dark {
    background: var(--ovr-bg-dark);
    color: var(--ovr-text-inverse);
    position: relative;
}
#view-overview.overview-refresh .ovr-section--dark::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--ovr-border-dark);
}
#view-overview.overview-refresh .ovr-section--quote {
    border-top: 1px solid var(--ovr-border-light);
    padding-top: clamp(44px, 5vw, 72px);
    padding-bottom: 18px;
    text-align: center;
}
#view-overview.overview-refresh .ovr-section--closing {
    padding-top: 18px;
    padding-bottom: clamp(56px, 7vw, 84px);
    text-align: center;
    margin-bottom: 0;
}
#view-overview.overview-refresh .ovr-section--why {
    padding-bottom: calc(var(--ovr-section-gap) * 0.5);
}
#view-overview.overview-refresh .ovr-section--why .ovr-section-intro {
    max-width: none;
}
#view-overview.overview-refresh .ovr-section--why .ovr-section-title {
    white-space: nowrap;
}
#view-overview.overview-refresh .ovr-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ovr-text-muted);
    margin-bottom: 20px;
}
#view-overview.overview-refresh .ovr-eyebrow--dark {
    color: var(--ovr-text-inverse-secondary);
}
#view-overview.overview-refresh .ovr-section-intro {
    max-width: 760px;
    margin-bottom: 56px;
}
#view-overview.overview-refresh .ovr-section-title {
    margin: 0 0 16px;
    font-family: var(--headline-font);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ovr-text-primary);
}
#view-overview.overview-refresh .ovr-section-title--dark {
    color: var(--ovr-text-inverse);
    max-width: 720px;
}
#view-overview.overview-refresh .ovr-section-body {
    margin: 0;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ovr-text-secondary);
}
#view-overview.overview-refresh .ovr-section-body--dark {
    color: var(--ovr-text-inverse-secondary);
}
#view-overview.overview-refresh .ovr-hero {
    background: var(--ovr-bg-primary);
    padding-top: clamp(140px, 18vh, 200px);
    padding-bottom: clamp(84px, 10vh, 124px);
    min-height: clamp(620px, 86vh, 920px);
    display: flex;
    align-items: flex-end;
}
#view-overview.overview-refresh .ovr-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(500px, 0.96fr);
    max-width: 1200px;
    margin: 0 auto;
    gap: clamp(28px, 3.2vw, 64px);
    align-items: end;
}
#view-overview.overview-refresh .ovr-hero-copy {
    min-width: 0;
    max-width: 600px;
}
#view-overview.overview-refresh .ovr-hero-title {
    margin: 0;
    font-family: var(--headline-font);
    font-size: clamp(42px, 5.1vw, 64px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--ovr-text-primary);
}
#view-overview.overview-refresh .ovr-hero-title-line {
    display: inline-block;
    white-space: nowrap;
}
#view-overview.overview-refresh .ovr-hero-title em {
    font-family: var(--headline-font);
    font-style: normal;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    font-size: 1em;
    text-rendering: inherit;
}
#view-overview.overview-refresh .ovr-hero-side {
    padding-bottom: 4px;
    max-width: 590px;
    justify-self: end;
}
#view-overview.overview-refresh .ovr-hero-subtitle {
    margin: 0 0 24px;
    max-width: 590px;
    font-family: var(--sans);
    font-size: clamp(15px, 1.34vw, 17.5px);
    font-weight: 500;
    line-height: 1.46;
    letter-spacing: -0.015em;
    color: var(--ovr-text-secondary);
}
@media (max-width: 1180px) {
    #view-overview.overview-refresh .ovr-hero-grid {
        grid-template-columns: minmax(0, 1.06fr) minmax(460px, 0.94fr);
        gap: clamp(20px, 2.6vw, 40px);
    }
    #view-overview.overview-refresh .ovr-hero-title {
        font-size: clamp(40px, 4.9vw, 60px);
    }
    #view-overview.overview-refresh .ovr-hero-side,
    #view-overview.overview-refresh .ovr-hero-subtitle {
        max-width: 500px;
    }
}
@media (max-width: 1080px) {
    #view-overview.overview-refresh .ovr-hero-actions {
        flex-wrap: wrap;
    }
}
@media (max-width: 640px) {
    #view-overview.overview-refresh .ovr-hero-title-line {
        white-space: normal;
    }
    #view-overview.overview-refresh .ovr-section--why .ovr-section-title {
        white-space: normal;
    }
}
#view-overview.overview-refresh .ovr-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
#view-overview.overview-refresh .ovr-hero-actions .ovr-btn {
    min-height: 44px;
    padding: 0 18px;
    font-size: 14px;
    white-space: nowrap;
}
#view-overview.overview-refresh .ovr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#view-overview.overview-refresh .ovr-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
#view-overview.overview-refresh .ovr-btn--primary {
    background: var(--ovr-text-primary);
    color: var(--ovr-text-inverse);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
#view-overview.overview-refresh .ovr-btn--primary:hover {
    transform: translateY(-1px);
    background: #1A1A1F;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
#view-overview.overview-refresh .ovr-btn--secondary {
    border-color: var(--ovr-border-medium);
    background: transparent;
    color: var(--ovr-text-primary);
}
#view-overview.overview-refresh .ovr-btn--secondary:hover {
    background: var(--ovr-bg-elevated);
    border-color: rgba(0, 0, 0, 0.18);
}
#view-overview.overview-refresh .ovr-btn:hover svg,
#view-overview.overview-refresh .ovr-btn:focus-visible svg {
    transform: translateX(3px);
}
#view-overview.overview-refresh .ovr-trust-bar {
    border-top: 1px solid var(--ovr-border-light);
    background: var(--ovr-bg-primary);
}
#view-overview.overview-refresh .ovr-trust-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(18px, 3vw, 34px);
    flex-wrap: wrap;
    padding: 30px 0 34px;
}
#view-overview.overview-refresh .ovr-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ovr-text-muted);
}
#view-overview.overview-refresh .ovr-trust-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
#view-overview.overview-refresh .ovr-trust-divider {
    width: 1px;
    height: 16px;
    background: var(--ovr-border-light);
}
#view-overview.overview-refresh .ovr-incident {
    margin-bottom: 72px;
    padding: clamp(32px, 4vw, 40px);
    border-radius: 20px;
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-top-color: rgba(220, 38, 38, 0.35);
    background: rgba(20, 10, 10, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 48px -12px rgba(220, 38, 38, 0.15);
    position: relative;
    overflow: hidden;
}
#view-overview.overview-refresh .ovr-incident::before {
    content: "";
    position: absolute;
    inset: -40% 0 auto;
    height: 100%;
    background: radial-gradient(ellipse at 50% 30%, rgba(220, 38, 38, 0.08), transparent 60%);
    pointer-events: none;
}
#view-overview.overview-refresh .ovr-incident-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
#view-overview.overview-refresh .ovr-incident-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
    animation: ovrIncidentBlink 1.5s step-end infinite;
}
@keyframes ovrIncidentBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
#view-overview.overview-refresh .ovr-incident-label {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #FCA5A5;
}
#view-overview.overview-refresh .ovr-incident-text {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    font-size: clamp(17px, 1.75vw, 19px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}
#view-overview.overview-refresh .ovr-incident-source {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--mono);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.4);
}
@media (prefers-reduced-motion: reduce) {
    #view-overview.overview-refresh .ovr-incident-dot {
        animation: none;
    }
}
#view-overview.overview-refresh .ovr-problem-head {
    margin-bottom: 32px;
}
#view-overview.overview-refresh .ovr-problem-title-main {
    margin: 0;
    font-family: var(--headline-font);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ovr-text-inverse);
}
#view-overview.overview-refresh .ovr-problem-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--ovr-border-dark);
    border-radius: 14px;
    background: var(--ovr-border-dark);
    overflow: hidden;
}
#view-overview.overview-refresh .ovr-problem-card {
    background: var(--ovr-bg-dark);
    padding: clamp(28px, 3vw, 40px);
    display: flex;
    flex-direction: column;
}
#view-overview.overview-refresh .ovr-problem-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.012));
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
#view-overview.overview-refresh .ovr-problem-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.025) 50%, transparent 100%);
    opacity: 0.7;
}
#view-overview.overview-refresh .ovr-problem-record {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(62%, 220px);
}
#view-overview.overview-refresh .ovr-problem-log-line {
    width: var(--line-width, 100%);
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(250, 250, 250, 0.72), rgba(250, 250, 250, 0.18));
    transform-origin: left center;
    will-change: width, opacity, transform, filter;
    animation: ovrProblemWriteFade 3s infinite ease-in-out;
}
#view-overview.overview-refresh .ovr-problem-log-line:nth-child(1) {
    --line-width: 100%;
    animation-delay: 0s;
}
#view-overview.overview-refresh .ovr-problem-log-line:nth-child(2) {
    --line-width: 82%;
    animation-delay: 0.38s;
}
#view-overview.overview-refresh .ovr-problem-log-line:nth-child(3) {
    --line-width: 58%;
    animation-delay: 0.76s;
    background: linear-gradient(90deg, rgba(250, 250, 250, 0.38), rgba(250, 250, 250, 0.12));
}
@keyframes ovrProblemWriteFade {
    0%, 10% {
        width: 0;
        opacity: 0;
        filter: blur(0);
        transform: translateY(0);
    }
    24%, 48% {
        width: var(--line-width);
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
    62% {
        width: var(--line-width);
        opacity: 1;
    }
    76% {
        width: var(--line-width);
        opacity: 0;
        filter: blur(4px);
        transform: translateY(-8px);
    }
    100% {
        width: var(--line-width);
        opacity: 0;
        filter: blur(5px);
        transform: translateY(-10px);
    }
}
#view-overview.overview-refresh .ovr-problem-breach {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
#view-overview.overview-refresh .ovr-problem-barrier {
    position: absolute;
    left: 50%;
    top: 18%;
    bottom: 18%;
    width: 1px;
    border-left: 2px dashed rgba(255, 255, 255, 0.2);
    transform: translateX(-50%);
}
#view-overview.overview-refresh .ovr-problem-barrier-pulse {
    position: absolute;
    left: 50%;
    top: var(--pulse-top, 50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(239, 68, 68, 0.82);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: ovrProblemPulseFail 2.4s infinite cubic-bezier(0.16, 1, 0.3, 1);
}
#view-overview.overview-refresh .ovr-problem-barrier-pulse--one {
    --pulse-top: 35%;
    animation-delay: 0s;
}
#view-overview.overview-refresh .ovr-problem-barrier-pulse--two {
    --pulse-top: 65%;
    animation-delay: 0.8s;
}
#view-overview.overview-refresh .ovr-problem-barrier-pulse--three {
    --pulse-top: 50%;
    animation-delay: 1.6s;
}
#view-overview.overview-refresh .ovr-problem-threat-dot {
    position: absolute;
    left: var(--threat-rest, 14%);
    top: var(--threat-top, 50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    opacity: 0.82;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.72);
    transform: translate(-50%, -50%) scale(0.85);
    will-change: left, opacity, transform;
    animation: ovrProblemBreach 2.4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
#view-overview.overview-refresh .ovr-problem-threat-dot--one {
    --threat-top: 35%;
    --threat-rest: 28%;
    animation-delay: 0s;
}
#view-overview.overview-refresh .ovr-problem-threat-dot--two {
    --threat-top: 65%;
    --threat-rest: 50%;
    animation-delay: 0.8s;
}
#view-overview.overview-refresh .ovr-problem-threat-dot--three {
    --threat-top: 50%;
    --threat-rest: 72%;
    animation-delay: 1.6s;
}
@keyframes ovrProblemBreach {
    0% {
        left: 12%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.45);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    45% {
        left: 48%;
        opacity: 1;
    }
    52% {
        left: 52%;
        opacity: 1;
    }
    85% {
        left: 88%;
        opacity: 1;
    }
    100% {
        left: 92%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}
@keyframes ovrProblemPulseFail {
    0%, 40% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    48% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.55);
    }
}
#view-overview.overview-refresh .ovr-problem-evidence {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 88px;
}
#view-overview.overview-refresh .ovr-problem-fragment {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.55);
    animation: ovrProblemScramble 2.1s infinite steps(1);
}
#view-overview.overview-refresh .ovr-problem-fragment:nth-child(2n) {
    animation-delay: 0.3s;
    background: rgba(255, 255, 255, 0.32);
}
#view-overview.overview-refresh .ovr-problem-fragment:nth-child(3n) {
    animation-delay: 0.65s;
    background: rgba(255, 255, 255, 0.14);
}
#view-overview.overview-refresh .ovr-problem-fragment:nth-child(5n) {
    animation-delay: 1s;
    background: rgba(255, 255, 255, 0.76);
}
@keyframes ovrProblemScramble {
    0%, 100% {
        opacity: 0.92;
        transform: translate(0, 0);
    }
    25% {
        opacity: 0.24;
        transform: translate(4px, -4px);
    }
    50% {
        opacity: 0.72;
        transform: translate(-4px, 2px);
    }
    75% {
        opacity: 0;
        transform: translate(0, 4px);
    }
}
@media (prefers-reduced-motion: reduce) {
    #view-overview.overview-refresh .ovr-problem-log-line,
    #view-overview.overview-refresh .ovr-problem-barrier-pulse,
    #view-overview.overview-refresh .ovr-problem-threat-dot,
    #view-overview.overview-refresh .ovr-problem-fragment {
        animation: none;
    }
    #view-overview.overview-refresh .ovr-problem-log-line {
        opacity: 0.82;
        filter: none;
        transform: none;
    }
    #view-overview.overview-refresh .ovr-problem-barrier-pulse {
        opacity: 0;
    }
    #view-overview.overview-refresh .ovr-problem-threat-dot {
        transform: translate(-50%, -50%) scale(1);
    }
    #view-overview.overview-refresh .ovr-problem-fragment {
        opacity: 0.72;
        transform: none;
    }
}
#view-overview.overview-refresh .ovr-problem-kicker {
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ovr-text-inverse-secondary);
}
#view-overview.overview-refresh .ovr-problem-title {
    margin: 0 0 12px;
    font-family: var(--headline-font);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--ovr-text-inverse);
}
#view-overview.overview-refresh .ovr-problem-copy {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ovr-text-inverse-secondary);
}
#view-overview.overview-refresh .ovr-code-block {
    margin-bottom: 64px;
    border-radius: 16px;
    overflow: hidden;
    background: #09090B;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
#view-overview.overview-refresh .ovr-exec-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 340px;
}
#view-overview.overview-refresh .ovr-exec-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#view-overview.overview-refresh .ovr-exec-pane--editor {
    background: #09090B;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
#view-overview.overview-refresh .ovr-exec-pane--terminal {
    background: #000000;
    color: var(--ovr-text-inverse);
}
#view-overview.overview-refresh .ovr-exec-pane-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
#view-overview.overview-refresh .ovr-exec-window-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
#view-overview.overview-refresh .ovr-exec-window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
#view-overview.overview-refresh .ovr-exec-window-dot--red {
    background: #FF5F56;
}
#view-overview.overview-refresh .ovr-exec-window-dot--yellow {
    background: #FFBD2E;
}
#view-overview.overview-refresh .ovr-exec-window-dot--green {
    background: #27C93F;
}
#view-overview.overview-refresh .ovr-exec-pane-spacer {
    flex: 0 0 42px;
}
#view-overview.overview-refresh .ovr-exec-pane-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}
#view-overview.overview-refresh .ovr-exec-pane-label--editor {
    flex: 1 1 auto;
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.46);
}
#view-overview.overview-refresh .ovr-exec-pane-label--live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#view-overview.overview-refresh .ovr-exec-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: ovrExecLivePulse 2s ease-in-out infinite;
}
@keyframes ovrExecLivePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}
#view-overview.overview-refresh .ovr-exec-run {
    appearance: none;
    border: 1px solid rgba(109, 40, 217, 0.3);
    background: rgba(109, 40, 217, 0.15);
    color: #C4B5FD;
    border-radius: 6px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.15);
    transition: transform 0.2s var(--smooth), background-color 0.2s var(--smooth), border-color 0.2s var(--smooth), color 0.2s var(--smooth), box-shadow 0.2s var(--smooth), filter 0.2s var(--smooth);
}
#view-overview.overview-refresh .ovr-exec-run:hover:not(:disabled) {
    background: var(--ovr-brand-purple);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.35);
    border-color: rgba(255, 255, 255, 0.2);
}
#view-overview.overview-refresh .ovr-exec-run:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
}
#view-overview.overview-refresh .ovr-exec-run:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.28), 0 4px 14px rgba(109, 40, 217, 0.24);
}
#view-overview.overview-refresh .ovr-exec-run:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(80%);
    transform: none;
}
#view-overview.overview-refresh .ovr-exec-run-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}
#view-overview.overview-refresh .ovr-exec-code {
    margin: 0;
    padding: 24px 20px;
    display: flex;
    align-items: flex-start;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.8;
    color: #E4E4E7;
    background: #09090B;
}
#view-overview.overview-refresh .ovr-exec-line-numbers {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    text-align: right;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.2);
    user-select: none;
}
#view-overview.overview-refresh .ovr-exec-code-content {
    flex: 1 1 auto;
    min-width: 0;
}
#view-overview.overview-refresh .ovr-exec-code-content pre,
#view-overview.overview-refresh .ovr-exec-code-content code {
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
#view-overview.overview-refresh .ovr-exec-terminal {
    flex: 1 1 auto;
    min-height: 280px;
    max-height: 280px;
    padding: 24px 20px;
    overflow-y: auto;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.8;
    color: #A1A1AA;
    scroll-behavior: smooth;
    background:
        radial-gradient(circle at top right, rgba(109, 40, 217, 0.14), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%),
        #000000;
}
#view-overview.overview-refresh .ovr-exec-terminal::-webkit-scrollbar {
    width: 6px;
}
#view-overview.overview-refresh .ovr-exec-terminal::-webkit-scrollbar-track {
    background: transparent;
}
#view-overview.overview-refresh .ovr-exec-terminal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}
#view-overview.overview-refresh .ovr-exec-line {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    word-break: break-word;
}
#view-overview.overview-refresh .ovr-exec-line:last-child {
    margin-bottom: 0;
}
#view-overview.overview-refresh .ovr-exec-line.is-visible {
    opacity: 1;
    transform: translateY(0);
}
#view-overview.overview-refresh .ovr-exec-line-ts {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11.5px;
    flex: 0 0 auto;
    user-select: none;
}
#view-overview.overview-refresh .ovr-exec-line-arrow {
    color: #52525B;
    flex: 0 0 auto;
}
#view-overview.overview-refresh .ovr-exec-line-content {
    flex: 1 1 auto;
    min-width: 0;
}
#view-overview.overview-refresh .ovr-exec-line--success .ovr-exec-line-content {
    color: #34D399;
    font-weight: 600;
}
#view-overview.overview-refresh .ovr-exec-line--highlight .ovr-exec-line-content {
    color: #E4E4E7;
}
#view-overview.overview-refresh .ovr-exec-line--hash .ovr-exec-line-content {
    color: #A1A1AA;
}
#view-overview.overview-refresh .ovr-exec-chip {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    font-weight: 700;
    margin-right: 4px;
}
#view-overview.overview-refresh .ovr-exec-chip--record {
    color: #09090B;
    background: #FFFFFF;
}
#view-overview.overview-refresh .ovr-exec-chip--hash {
    color: #FFFFFF;
    background: var(--ovr-brand-purple);
}
#view-overview.overview-refresh .ovr-exec-cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: #FFFFFF;
    vertical-align: middle;
    margin-left: 4px;
    animation: ovrExecCursorBlink 1s step-end infinite;
}
@keyframes ovrExecCursorBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
#view-overview.overview-refresh .ovr-exec-code .ovr-sy-comment {
    color: #71717A;
    font-style: italic;
}
#view-overview.overview-refresh .ovr-exec-code .ovr-sy-keyword {
    color: #C084FC;
}
#view-overview.overview-refresh .ovr-exec-code .ovr-sy-decorator {
    color: #38BDF8;
}
#view-overview.overview-refresh .ovr-exec-code .ovr-sy-string {
    color: #34D399;
}
#view-overview.overview-refresh .ovr-exec-code .ovr-sy-function {
    color: #60A5FA;
}
@media (prefers-reduced-motion: reduce) {
    #view-overview.overview-refresh .ovr-exec-terminal {
        scroll-behavior: auto;
    }
    #view-overview.overview-refresh .ovr-exec-line {
        transition: none;
    }
    #view-overview.overview-refresh .ovr-exec-run {
        transition: none;
    }
    #view-overview.overview-refresh .ovr-exec-live-dot,
    #view-overview.overview-refresh .ovr-exec-cursor {
        animation: none;
        opacity: 1;
    }
}
#view-overview.overview-refresh .ovr-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
#view-overview.overview-refresh .ovr-flow-card {
    padding: 32px;
    border: 1px solid var(--ovr-border-light);
    border-radius: 14px;
    background: var(--ovr-bg-elevated);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
#view-overview.overview-refresh .ovr-flow-card:hover {
    transform: translateY(-2px);
    border-color: var(--ovr-border-medium);
    box-shadow: var(--ovr-shadow-card);
}
#view-overview.overview-refresh .ovr-flow-number {
    margin-bottom: 20px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--ovr-text-muted);
}
#view-overview.overview-refresh .ovr-flow-title {
    margin: 0 0 12px;
    font-family: var(--headline-font);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
}
#view-overview.overview-refresh .ovr-flow-copy {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ovr-text-secondary);
}
#view-overview.overview-refresh .ovr-who-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
#view-overview.overview-refresh .ovr-who-card {
    padding: clamp(28px, 3vw, 40px);
    border: 1px solid var(--ovr-border-light);
    border-radius: 14px;
    background: var(--ovr-bg-elevated);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
#view-overview.overview-refresh .ovr-who-card:hover {
    transform: translateY(-2px);
    border-color: var(--ovr-border-medium);
    box-shadow: var(--ovr-shadow-card);
}
#view-overview.overview-refresh .ovr-who-role {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ovr-text-muted);
}
#view-overview.overview-refresh .ovr-who-title {
    margin: 0 0 12px;
    font-family: var(--headline-font);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}
#view-overview.overview-refresh .ovr-who-copy {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ovr-text-secondary);
}
#view-overview.overview-refresh .ovr-why-ledger {
    margin-top: -8px;
}
#view-overview.overview-refresh .ovr-why-timeline {
    border-top: 2px solid var(--ovr-text-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
#view-overview.overview-refresh .ovr-why-row {
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    padding: 32px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s var(--smooth), background-color 0.3s var(--smooth);
}
#view-overview.overview-refresh .ovr-why-row:last-child {
    border-bottom: none;
}
#view-overview.overview-refresh .ovr-why-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ovr-text-primary);
    opacity: 0;
    transform: scaleY(0.5);
    transition: opacity 0.3s var(--smooth), transform 0.3s var(--spring);
}
#view-overview.overview-refresh .ovr-why-row:hover {
    background: rgba(0, 0, 0, 0.02);
    transform: translateX(4px);
}
#view-overview.overview-refresh .ovr-why-row:hover::before {
    opacity: 1;
    transform: scaleY(1);
}
#view-overview.overview-refresh .ovr-why-label {
    padding-top: 6px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ovr-text-primary);
}
#view-overview.overview-refresh .ovr-why-content {
    min-width: 0;
}
#view-overview.overview-refresh .ovr-why-title {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--ovr-text-primary);
}
#view-overview.overview-refresh .ovr-why-copy {
    margin: 0;
    max-width: 500px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ovr-text-secondary);
    text-wrap: pretty;
}
#view-overview.overview-refresh .ovr-why-penalty {
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    margin-top: 48px;
    padding: 40px 32px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
}
#view-overview.overview-refresh .ovr-why-penalty-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
#view-overview.overview-refresh .ovr-why-penalty-amount {
    margin: 0;
    font-family: var(--mono);
    font-size: 56px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #B91C1C;
}
#view-overview.overview-refresh .ovr-why-penalty-right {
    padding-top: 4px;
}
#view-overview.overview-refresh .ovr-why-penalty-kicker {
    margin-bottom: 12px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #B91C1C;
}
#view-overview.overview-refresh .ovr-why-penalty-copy {
    margin: 0;
    max-width: 500px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ovr-text-primary);
    text-wrap: pretty;
}
#view-overview.overview-refresh .ovr-why-bridge {
    margin: 56px 0 0;
    text-align: left;
    font-family: var(--serif);
    font-size: clamp(22px, 2.5vw, 26px);
    font-style: italic;
    line-height: 1.45;
    color: var(--ovr-text-secondary);
}
#view-overview.overview-refresh .ovr-quote-heading {
    margin: 0 auto 14px;
    max-width: 520px;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.08;
    text-wrap: balance;
    text-align: center;
}
#view-overview.overview-refresh .ovr-quote-subline {
    display: block;
    margin-top: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--ovr-text-primary);
}
#view-overview.overview-refresh .ovr-quote-attribution {
    margin: 0;
    font-size: 14px;
    color: var(--ovr-text-muted);
}
#view-overview.overview-refresh .ovr-quote-bridge {
    margin: 16px auto 0;
    max-width: 560px;
    font-size: clamp(15.5px, 1.8vw, 18px);
    line-height: 1.55;
    color: var(--ovr-text-secondary);
    text-align: center;
}
#view-overview.overview-refresh .ovr-quote-bridge--compact {
    margin-top: 16px;
    max-width: 560px;
}
#view-overview.overview-refresh .ovr-closing-title {
    margin: 0 auto;
    max-width: 800px;
    font-family: var(--serif);
    font-size: clamp(42px, 5.8vw, 72px);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-align: center;
}
#view-overview.overview-refresh .ovr-closing-accent {
    font-style: italic;
    color: var(--ovr-brand-purple);
}
#view-overview.overview-refresh .ovr-closing-linkwrap {
    position: relative;
    margin-top: 28px;
    min-width: min(100%, 360px);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
#view-overview.overview-refresh .ovr-closing-linkwrap::before {
    content: "";
    width: 56px;
    height: 1px;
    background: var(--ovr-border-medium);
}
#view-overview.overview-refresh .ovr-closing-kicker {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ovr-text-muted);
}
#view-overview.overview-refresh .ovr-closing-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--ovr-border-medium);
    color: var(--ovr-text-primary);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#view-overview.overview-refresh .ovr-closing-link svg {
    width: 16px;
    height: 16px;
    color: currentColor;
    transition: transform 0.25s ease;
}
#view-overview.overview-refresh .ovr-closing-link:hover,
#view-overview.overview-refresh .ovr-closing-link:focus-visible {
    border-color: var(--ovr-text-primary);
    color: var(--ovr-text-primary);
    transform: translateY(-1px);
}
#view-overview.overview-refresh .ovr-closing-link:hover svg,
#view-overview.overview-refresh .ovr-closing-link:focus-visible svg {
    transform: translateX(2px);
}
#view-overview.overview-refresh .ovr-hiring-block {
    margin-top: clamp(72px, 8vw, 104px);
    padding-top: clamp(28px, 4vw, 36px);
    width: 100%;
    border-top: 1px solid var(--ovr-border-light);
    text-align: left;
}
#view-overview.overview-refresh .ovr-hiring-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(292px, 320px);
    gap: clamp(28px, 3vw, 44px);
    align-items: end;
}
#view-overview.overview-refresh .ovr-hiring-left,
#view-overview.overview-refresh .ovr-hiring-right {
    min-width: 0;
}
#view-overview.overview-refresh .ovr-hiring-left {
    max-width: 760px;
}
#view-overview.overview-refresh .ovr-hiring-right {
    max-width: 320px;
    padding-bottom: 12px;
}
#view-overview.overview-refresh .ovr-hiring-kicker {
    display: inline-block;
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ovr-brand-purple);
}
#view-overview.overview-refresh .ovr-hiring-lead {
    margin: 0;
    max-width: none;
    font-family: var(--headline-font);
    font-size: clamp(30px, 2.8vw, 36px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--ovr-text-primary);
    text-wrap: initial;
}
#view-overview.overview-refresh .ovr-hiring-lead-line {
    display: block;
    white-space: nowrap;
}
#view-overview.overview-refresh .ovr-hiring-copy {
    margin: 0 0 20px;
    max-width: 286px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ovr-text-primary);
}
#view-overview.overview-refresh .ovr-hiring-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 10px;
    background: #09090B;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#view-overview.overview-refresh .ovr-hiring-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
#view-overview.overview-refresh .ovr-hiring-btn:hover,
#view-overview.overview-refresh .ovr-hiring-btn:focus-visible {
    background: #18181B;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
#view-overview.overview-refresh .ovr-hiring-btn:hover svg,
#view-overview.overview-refresh .ovr-hiring-btn:focus-visible svg {
    transform: translateX(3px);
}
#view-overview.overview-refresh .ovr-hiring-btn:active {
    transform: scale(0.96) translateY(0);
    transition: transform 0.05s ease;
}
@media (max-width: 1120px) {
    #view-overview.overview-refresh .ovr-hiring-grid {
        grid-template-columns: minmax(0, 1fr) minmax(272px, 296px);
        gap: 24px;
    }
    #view-overview.overview-refresh .ovr-hiring-left {
        max-width: 680px;
    }
    #view-overview.overview-refresh .ovr-hiring-right {
        max-width: 296px;
    }
    #view-overview.overview-refresh .ovr-hiring-lead {
        font-size: 30px;
    }
    #view-overview.overview-refresh .ovr-hiring-copy {
        max-width: 272px;
    }
}
@media (max-width: 960px) {
    #view-overview.overview-refresh .ovr-hero {
        min-height: auto;
        padding-top: 128px;
        padding-bottom: 72px;
        align-items: flex-start;
    }
    #view-overview.overview-refresh .ovr-hero-grid,
    #view-overview.overview-refresh .ovr-problem-grid,
    #view-overview.overview-refresh .ovr-flow-grid,
    #view-overview.overview-refresh .ovr-who-grid {
        grid-template-columns: 1fr;
    }
    #view-overview.overview-refresh .ovr-exec-split {
        grid-template-columns: 1fr;
    }
    #view-overview.overview-refresh .ovr-exec-pane--editor {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    #view-overview.overview-refresh .ovr-hero-grid {
        gap: 40px;
    }
    #view-overview.overview-refresh .ovr-problem-visual {
        height: 132px;
        margin-bottom: 26px;
    }
    #view-overview.overview-refresh .ovr-why-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 16px;
    }
    #view-overview.overview-refresh .ovr-why-row:hover {
        transform: translateX(2px);
    }
    #view-overview.overview-refresh .ovr-hiring-block {
        margin-top: 64px;
        max-width: 100%;
    }
    #view-overview.overview-refresh .ovr-hiring-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    #view-overview.overview-refresh .ovr-hiring-left {
        max-width: none;
    }
    #view-overview.overview-refresh .ovr-hiring-right {
        justify-self: stretch;
        max-width: none;
        padding-bottom: 0;
    }
    #view-overview.overview-refresh .ovr-hiring-lead {
        max-width: none;
    }
    #view-overview.overview-refresh .ovr-hiring-lead-line {
        white-space: normal;
    }
    #view-overview.overview-refresh .ovr-why-penalty {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 40px 24px 32px;
    }
    #view-overview.overview-refresh .ovr-why-penalty-amount {
        font-size: 48px;
    }
}
@media (prefers-reduced-motion: reduce) {
    #view-overview.overview-refresh .ovr-why-row {
        transition: none;
    }
    #view-overview.overview-refresh .ovr-why-row:hover {
        transform: none;
    }
    #view-overview.overview-refresh .ovr-why-row::before {
        transition: none;
    }
}
@media (max-width: 768px) {
    #view-overview.overview-refresh {
        margin-top: calc(-1 * (var(--site-header-height) + 8px));
    }
    #view-overview.overview-refresh .ovr-exec-pane-bar {
        padding: 16px 18px;
    }
    #view-overview.overview-refresh .ovr-exec-code {
        padding: 20px 18px 22px;
        font-size: 13px;
    }
    #view-overview.overview-refresh .ovr-exec-terminal {
        padding: 20px 18px 22px;
        min-height: 240px;
        max-height: 240px;
    }
    #view-overview.overview-refresh .ovr-exec-line-numbers {
        padding-right: 12px;
        margin-right: 12px;
    }
}
@media (max-width: 640px) {
    #view-overview.overview-refresh .ovr-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    #view-overview.overview-refresh .ovr-btn {
        width: 100%;
    }
    #view-overview.overview-refresh .ovr-trust-divider {
        display: none;
    }
    #view-overview.overview-refresh .ovr-trust-row {
        gap: 14px;
    }
    #view-overview.overview-refresh .ovr-section-intro,
    #view-overview.overview-refresh .ovr-quote-heading,
    #view-overview.overview-refresh .ovr-quote-bridge {
        max-width: none;
    }
    #view-overview.overview-refresh .ovr-hiring-block {
        margin-top: 56px;
        padding-top: 28px;
    }
    #view-overview.overview-refresh .ovr-hiring-lead {
        font-size: 32px;
    }
    #view-overview.overview-refresh .ovr-hiring-copy {
        font-size: 16px;
    }
    #view-overview.overview-refresh .ovr-hiring-btn {
        width: 100%;
        justify-content: center;
    }
}
#siteFooter.footer--dark {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 96px;
    padding: clamp(80px, 10vw, 120px) 0 48px;
    background: #0A0A0A;
    color: #FAFAFA;
    overflow: hidden;
    isolation: isolate;
}
html:not(.is-reading-mode):not(.is-perspectives-view):not(.is-privacy-view) #siteFooter.footer--dark {
    margin-top: 0;
}
html.is-privacy-view #siteFooter.footer--dark,
html[data-initial-view="privacy"] #siteFooter.footer--dark {
    margin-top: 48px;
}
@media (prefers-reduced-motion: reduce) {
    #footerCanvas {
        display: none;
    }
}
#view-privacy,
#view-privacy main {
    background: #F5F3EE;
}
#view-privacy {
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
}
#view-privacy main {
    min-height: 100vh;
}
#view-privacy .article-container {
    max-width: 740px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px) 104px;
}
#view-privacy .back-link {
    margin-bottom: 32px;
}
#view-privacy .article-header {
    margin-bottom: 72px;
}
#view-privacy .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}
#view-privacy .article-header .meta-top {
    margin-bottom: 24px;
    color: #7C3AED;
    letter-spacing: 0.12em;
}
#view-privacy .article-header h1 {
    font-family: var(--headline-font);
    font-size: clamp(44px, 6.4vw, 64px);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}
#view-privacy .article-header .subtitle {
    max-width: 560px;
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.6;
    color: #52525B;
}
#view-privacy .article-body {
    font-size: 17px;
    line-height: 1.75;
    color: #52525B;
}
#view-privacy .article-body p {
    margin-bottom: 28px;
}
#view-privacy .article-body h2 {
    margin: 64px 0 18px;
    font-family: var(--headline-font);
    font-size: clamp(30px, 3.8vw, 42px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #0A0A0A;
}
#view-privacy .article-body h2:first-of-type {
    margin-top: 0;
}
#view-privacy .article-body strong {
    color: #0A0A0A;
}
#view-privacy .editorial-premise,
#view-privacy .article-body,
#view-privacy .article-header,
#view-privacy .article-header .subtitle,
#view-privacy .article-body h2,
#view-privacy .article-body strong,
#view-privacy .premise-text {
    background: transparent;
}
#view-privacy .editorial-premise {
    margin-bottom: 64px;
    padding: 32px 34px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.04);
}
#view-privacy .premise-label {
    margin-bottom: 14px;
    letter-spacing: 0.08em;
    color: #7C3AED;
}
#view-privacy .premise-label::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7C3AED;
    opacity: 1;
}
#view-privacy .premise-text {
    font-family: var(--sans);
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.42;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: #0A0A0A;
    text-wrap: balance;
}
#view-privacy .privacy-legal-closing {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
#view-privacy .privacy-contact-block {
    margin-bottom: 32px;
}
#view-privacy .privacy-contact-company {
    margin: 0 0 12px;
    color: #0A0A0A;
}
#view-privacy .privacy-contact-link-row {
    margin: 0;
}
#view-privacy .privacy-legal-copy {
    margin: 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
}
@media (max-width: 768px) {
    #view-privacy .article-container {
        padding-top: 0;
        padding-bottom: 96px;
    }
    #view-privacy .editorial-premise {
        padding: 24px;
    }
    #view-privacy .article-body h2 {
        margin-top: 56px;
    }
    #view-privacy .privacy-legal-closing {
        margin-top: 48px;
    }
}
#footerCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
#siteFooter .footer-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 44%, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.08) 48%, rgba(10, 10, 10, 0.76) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.04) 0%, rgba(10, 10, 10, 0.24) 100%);
}
#siteFooter.footer--dark .footer-shell {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
#siteFooter.footer--dark .footer-cta {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 80px;
}
#siteFooter.footer--dark .intake-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    margin-bottom: 28px;
}
#siteFooter.footer--dark .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
#siteFooter.footer--dark .status-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}
#siteFooter.footer--dark .footer-headline {
    margin-bottom: 16px;
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FAFAFA;
}
html.is-reading-mode #siteFooter.footer--dark .footer-headline,
html:not(.is-reading-mode) #siteFooter.footer--dark .footer-headline {
    font-family: var(--headline-font);
    font-weight: 700;
    letter-spacing: -0.03em;
}
#siteFooter.footer--dark .founding-context {
    margin: 0 auto 36px;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}
#siteFooter.footer--dark .fc-form {
    display: flex;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto 16px;
}
#siteFooter.footer--dark .fc-form.is-success {
    display: flex;
    gap: 0;
    max-width: 420px;
    margin: 0 auto 16px;
}
#siteFooter.footer--dark .fc-input {
    flex: 1;
    height: 48px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #141414;
    color: #FAFAFA;
    font-size: 15px;
    box-shadow: none;
}
#siteFooter.footer--dark .fc-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
#siteFooter.footer--dark .fc-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}
#siteFooter.footer--dark .fc-submit {
    height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    border: none;
    background: #FFFFFF;
    color: #0A0A0A;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
}
#siteFooter.footer--dark .fc-submit:hover {
    opacity: 0.9;
    transform: none;
    box-shadow: none;
}
#siteFooter.footer--dark .fc-submit:active {
    transform: scale(0.96);
    transition: transform 0.05s ease;
}
#siteFooter.footer--dark .fc-form.is-success .fc-input {
    display: none;
}
#siteFooter.footer--dark .fc-form.is-success .fc-submit {
    flex: 1 1 100%;
    width: 100%;
    background: #FFFFFF;
    color: #0A0A0A;
    box-shadow: none;
    pointer-events: none;
}
#siteFooter.footer--dark .fc-form.is-success .fc-submit:hover,
#siteFooter.footer--dark .fc-form.is-success .fc-submit:active,
#siteFooter.footer--dark .fc-form.is-success .fc-submit:focus-visible {
    background: #FFFFFF;
    color: #0A0A0A;
    transform: none;
    box-shadow: none;
}
#siteFooter.footer--dark .fc-error-msg {
    color: #FCA5A5;
    text-align: center;
}
#siteFooter.footer--dark .fc-success-row {
    color: rgba(255, 255, 255, 0.82);
}
#siteFooter.footer--dark .fc-success-row svg {
    color: #10B981;
}
#siteFooter.footer--dark .fc-form.is-success ~ .fc-success-row {
    display: none;
}
#siteFooter.footer--dark .fallback-contact {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}
#siteFooter.footer--dark .fallback-contact a {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    padding-bottom: 0;
    transition: color 0.2s ease;
}
#siteFooter.footer--dark .fallback-contact a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
    transform-origin: left center;
    transition: background 0.2s ease, transform 0.2s ease;
}
#siteFooter.footer--dark .fallback-contact a:hover {
    color: rgba(255, 255, 255, 0.9);
}
#siteFooter.footer--dark .fallback-contact a:hover::after {
    background: rgba(255, 255, 255, 0.58);
    transform: scaleY(1.8);
}
#siteFooter.footer--dark .footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#siteFooter.footer--dark .footer-brand-stack {
    display: flex;
    align-items: center;
    gap: 16px;
}
#siteFooter.footer--dark .backbone-logo {
    --backbone-logo-text-color: #FAFAFA;
    --backbone-logo-face-top: #A78BFA;
    --backbone-logo-face-left: #7C3AED;
    --backbone-logo-face-right: #5B21B6;
}
#siteFooter.footer--dark .footer-tagline {
    margin: 0;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.6);
}
#siteFooter.footer--dark .footer-legal {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
}
#siteFooter.footer--dark .footer-legal a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 3px;
}
#siteFooter.footer--dark .footer-legal a:hover {
    text-decoration-color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 900px) {
    #siteFooter.footer--dark .fc-form {
        flex-direction: column;
    }
    #siteFooter.footer--dark .fc-submit {
        width: 100%;
    }
    #siteFooter.footer--dark .footer-bottom-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Perspectives Archive Rebuild */
#view-perspectives {
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    margin-top: -80px;
    padding: 0;
    background: #F8F7F4;
    color: var(--text-primary);
    overflow: hidden;
    color-scheme: light;
}
#view-perspectives main {
    width: 100%;
    max-width: none;
    padding: clamp(136px, 16vw, 172px) 0 clamp(96px, 12vw, 120px);
}
#view-perspectives .psp-archive {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
#view-perspectives .psp-header {
    max-width: 900px;
    margin: 0 auto clamp(56px, 8vw, 72px);
    text-align: center;
}
#view-perspectives .psp-headline {
    margin: 0 0 24px;
    font-family: var(--headline-font);
    font-size: clamp(52px, 8vw, 80px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}
#view-perspectives .psp-slogan {
    max-width: 640px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-secondary);
    text-wrap: balance;
}
#view-perspectives .psp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.8vw, 32px);
}
#view-perspectives .psp-subscribe {
    margin-top: clamp(72px, 9vw, 112px);
}
#view-perspectives .psp-subscribe__inner {
    width: 100%;
    max-width: 700px;
    margin: 0;
    padding: 0;
    text-align: left;
}
#view-perspectives .psp-subscribe__header {
    display: block;
    max-width: 100%;
    margin-bottom: 18px;
}
#view-perspectives .psp-subscribe__title {
    margin: 0;
    font-family: var(--headline-font);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--text-primary);
    white-space: nowrap;
}
#view-perspectives .psp-subscribe__body {
    max-width: 620px;
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-secondary);
    text-wrap: pretty;
}
#view-perspectives .psp-subscribe .fc-form {
    width: 100%;
    max-width: 560px;
    margin: 0;
    gap: 10px;
    align-items: stretch;
}
#view-perspectives .psp-subscribe .fc-form.is-success {
    display: flex;
    width: 100%;
    max-width: 560px;
    gap: 0;
    margin: 0;
}
#view-perspectives .psp-subscribe .fc-input {
    height: 52px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    background: #FFFFFF;
    box-shadow: none;
}
#view-perspectives .psp-subscribe .fc-input:focus {
    border-color: rgba(9, 9, 11, 0.22);
    box-shadow: 0 0 0 4px rgba(9, 9, 11, 0.05);
}
#view-perspectives .psp-subscribe .fc-submit {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 10px;
    background: #09090B;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}
#view-perspectives .psp-subscribe .fc-submit:hover {
    transform: translateY(-1px);
    background: #18181B;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
#view-perspectives .psp-subscribe .fc-submit:active {
    transform: scale(0.96) translateY(0);
}
#view-perspectives .psp-subscribe .fc-form.is-success .fc-input {
    display: none;
}
#view-perspectives .psp-subscribe .fc-form.is-success .fc-submit {
    flex: 1 1 100%;
    width: 100%;
    background: #09090B;
    color: #FFFFFF;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}
#view-perspectives .psp-subscribe .fc-form.is-success .fc-submit:hover,
#view-perspectives .psp-subscribe .fc-form.is-success .fc-submit:active,
#view-perspectives .psp-subscribe .fc-form.is-success .fc-submit:focus-visible {
    background: #09090B;
    color: #FFFFFF;
    transform: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
#view-perspectives .psp-subscribe .fc-error-msg {
    max-width: 560px;
    margin: 0;
    padding: 10px 0 0;
    text-align: left;
}
#view-perspectives .psp-subscribe .fc-form.is-success ~ .fc-success-row {
    display: none;
}
#view-perspectives .psp-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.055);
    border-radius: 24px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.02);
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-width: 0;
    transition: transform 0.42s var(--spring), box-shadow 0.42s var(--ease-fluid), border-color 0.32s ease;
    outline: none;
}
#view-perspectives .psp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.09);
    border-color: rgba(0, 0, 0, 0.1);
}
#view-perspectives .psp-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--bb-purple-dark);
    box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.16), 0 4px 20px rgba(0, 0, 0, 0.02);
}
#view-perspectives .psp-card--featured {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 440px;
}
#view-perspectives .psp-card--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 280px;
}
#view-perspectives .psp-card-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}
#view-perspectives .psp-card-cover::after {
    content: "";
    position: absolute;
    inset: -3%;
    z-index: 1;
    transition: transform 0.7s var(--ease-fluid), opacity 0.4s ease;
}
#view-perspectives .psp-card--standard .psp-card-cover::after,
#view-perspectives .psp-card--wide .psp-card-cover::after {
    opacity: 0.94;
}
#view-perspectives .psp-card:hover .psp-card-cover::after,
#view-perspectives .psp-card:focus-visible .psp-card-cover::after {
    transform: scale(1.03);
}
#view-perspectives .psp-card--featured:hover .psp-card-cover::after,
#view-perspectives .psp-card--featured:focus-visible .psp-card-cover::after {
    transform: scale(1.045);
}
#view-perspectives .psp-card--featured .psp-card-cover {
    flex: 0 0 45%;
}
#view-perspectives .psp-card--standard .psp-card-cover {
    height: 220px;
}
#view-perspectives .psp-card--wide .psp-card-cover {
    flex: 0 0 30%;
}
#view-perspectives .psp-issue-3 .psp-card-cover::after {
    background: radial-gradient(circle at 30% 20%, #5E4C8A, #2F2548);
}
#view-perspectives .psp-issue-4 .psp-card-cover::after {
    background: linear-gradient(145deg, #8A6A46 0%, #3A2A1E 100%);
}
#view-perspectives .psp-issue-2 .psp-card-cover::after {
    background: linear-gradient(145deg, #303136 0%, #121316 100%);
}
#view-perspectives .psp-issue-1 .psp-card-cover::after {
    background: radial-gradient(circle at 78% 78%, #5372A8, #243652);
}
#view-perspectives .psp-issue-0 .psp-card-cover::after {
    background: linear-gradient(140deg, #0F766E, #1F4037);
}
#view-perspectives .psp-card-cover-label {
    position: relative;
    z-index: 2;
    font-family: var(--headline-font);
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.16);
    transition: transform 0.42s var(--spring), opacity 0.42s ease;
}
#view-perspectives .psp-card--featured .psp-card-cover-label {
    font-size: 140px;
}
#view-perspectives .psp-card:hover .psp-card-cover-label,
#view-perspectives .psp-card:focus-visible .psp-card-cover-label {
    transform: scale(1.03);
    opacity: 0.24;
}
#view-perspectives .psp-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 40px;
    position: relative;
    z-index: 2;
    min-width: 0;
}
#view-perspectives .psp-card--featured .psp-card-content {
    justify-content: center;
    padding: 64px;
}
#view-perspectives .psp-card--wide .psp-card-content {
    justify-content: center;
}
#view-perspectives .psp-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
#view-perspectives .psp-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
#view-perspectives .psp-meta-text {
    color: inherit;
}
#view-perspectives .psp-meta-divider {
    color: var(--text-tertiary);
    opacity: 0.7;
}
#view-perspectives .psp-meta-badge {
    position: relative;
    overflow: hidden;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: #09090B;
}
#view-perspectives .psp-meta-badge--latest {
    background: var(--bb-purple-dark);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(109, 40, 217, 0.22);
}
#view-perspectives .psp-issue-4 .psp-meta-badge--latest {
    background: #8A6A46;
    box-shadow: 0 4px 10px rgba(138, 106, 70, 0.24);
}
#view-perspectives .psp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#view-perspectives .psp-tag {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.022);
    border: 1px solid rgba(0, 0, 0, 0.035);
    padding: 4px 10px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
#view-perspectives .psp-card:hover .psp-tag,
#view-perspectives .psp-card:focus-visible .psp-tag {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    color: var(--text-primary);
}
#view-perspectives .psp-title {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-wrap: balance;
}
#view-perspectives .psp-card--featured .psp-title {
    font-size: 48px;
}
#view-perspectives .psp-excerpt {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    text-wrap: pretty;
}
#view-perspectives .psp-card--featured .psp-excerpt {
    max-width: 90%;
    font-size: 18px;
}
#view-perspectives .psp-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
#view-perspectives .psp-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bb-purple-dark);
    transition: color 0.3s ease;
}
#view-perspectives .psp-read-arrow {
    width: 16px;
    height: 16px;
    color: currentColor;
    overflow: visible;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
#view-perspectives .psp-read-arrow__line {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    opacity: 0;
    transition: stroke-dashoffset 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.1s ease;
}
#view-perspectives .psp-read-arrow__head {
    transform: translateX(-11px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
#view-perspectives .psp-card:hover .psp-read,
#view-perspectives .psp-card:focus-visible .psp-read {
    color: var(--bb-purple-dark);
}
#view-perspectives .psp-card:hover .psp-read-arrow,
#view-perspectives .psp-card:focus-visible .psp-read-arrow {
    color: var(--bb-purple-dark);
    transform: translateX(4px);
}
#view-perspectives .psp-card:hover .psp-read-arrow__line,
#view-perspectives .psp-card:focus-visible .psp-read-arrow__line {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s ease;
}
#view-perspectives .psp-card:hover .psp-read-arrow__head,
#view-perspectives .psp-card:focus-visible .psp-read-arrow__head {
    transform: translateX(0);
    transition: transform 0.36s cubic-bezier(0.25, 1, 0.5, 1);
}
#view-perspectives .psp-signature {
    color: var(--psp-signature-ink, rgba(39, 39, 42, 0.72));
    font-family: var(--ink);
    font-size: 28px;
    line-height: 0.8;
    transform: rotate(-2deg);
    opacity: 0.76;
    transition: transform 0.32s var(--spring), opacity 0.32s var(--spring), color 0.32s ease;
}
@media (prefers-reduced-motion: reduce) {
    #view-perspectives .psp-read-arrow,
    #view-perspectives .psp-read-arrow__line,
    #view-perspectives .psp-read-arrow__head {
        transition: none !important;
        animation: none !important;
    }
    #view-perspectives .psp-read-arrow {
        transform: none !important;
    }
    #view-perspectives .psp-read-arrow__line {
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
    }
    #view-perspectives .psp-read-arrow__head {
        transform: translateX(0) !important;
    }
}
#view-perspectives .psp-issue-3 {
    --psp-signature-ink: rgba(94, 76, 138, 0.78);
}
#view-perspectives .psp-issue-4 {
    --psp-signature-ink: rgba(138, 106, 70, 0.82);
}
#view-perspectives .psp-issue-2 {
    --psp-signature-ink: rgba(26, 28, 33, 0.72);
}
#view-perspectives .psp-issue-1 {
    --psp-signature-ink: rgba(83, 114, 168, 0.76);
}
#view-perspectives .psp-issue-0 {
    --psp-signature-ink: rgba(15, 118, 110, 0.8);
}
#view-perspectives .psp-card:hover .psp-signature,
#view-perspectives .psp-card:focus-visible .psp-signature {
    opacity: 0.82;
    transform: rotate(-1deg) scale(1.02);
}
html.is-dark-mode #view-perspectives,
html.is-dark-mode.is-perspectives-view #view-perspectives {
    background: #F8F7F4;
    color: var(--text-primary);
    color-scheme: light;
}
@media (max-width: 960px) {
    #view-perspectives main {
        padding-top: calc(var(--site-header-height) + 72px);
    }
    #view-perspectives .psp-grid {
        grid-template-columns: 1fr;
    }
    #view-perspectives .psp-card--featured,
    #view-perspectives .psp-card--wide {
        flex-direction: column;
        min-height: 0;
    }
    #view-perspectives .psp-card--featured .psp-card-cover,
    #view-perspectives .psp-card--wide .psp-card-cover {
        flex: auto;
        height: 280px;
    }
    #view-perspectives .psp-card-content {
        padding: 32px;
    }
    #view-perspectives .psp-card--featured .psp-card-content {
        padding: 40px 32px;
    }
}
@media (max-width: 640px) {
    #view-perspectives main {
        padding-top: calc(var(--site-header-height) + 56px);
        padding-bottom: 88px;
    }
    #view-perspectives .psp-header {
        margin-bottom: 48px;
    }
    #view-perspectives .psp-headline {
        font-size: 44px;
    }
    #view-perspectives .psp-slogan {
        font-size: 18px;
    }
    #view-perspectives .psp-card {
        border-radius: 20px;
    }
    #view-perspectives .psp-card-cover-label {
        font-size: 64px;
    }
    #view-perspectives .psp-card--featured .psp-card-cover-label {
        font-size: 96px;
    }
    #view-perspectives .psp-card-top {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 12px;
    }
    #view-perspectives .psp-card-content {
        padding: 28px;
    }
    #view-perspectives .psp-card--featured .psp-card-content {
        padding: 32px 28px;
    }
    #view-perspectives .psp-title {
        font-size: 30px;
    }
    #view-perspectives .psp-card--featured .psp-title {
        font-size: 36px;
    }
    #view-perspectives .psp-card--featured .psp-card-cover,
    #view-perspectives .psp-card--wide .psp-card-cover {
        height: 240px;
    }
    #view-perspectives .psp-subscribe {
        margin-top: 56px;
    }
    #view-perspectives .psp-subscribe__inner {
        max-width: 100%;
    }
    #view-perspectives .psp-subscribe__header {
        margin-bottom: 14px;
    }
    #view-perspectives .psp-subscribe__title {
        font-size: 26px;
    }
    #view-perspectives .psp-subscribe__body {
        margin-bottom: 24px;
        font-size: 16px;
    }
    #view-perspectives .psp-subscribe .fc-form,
    #view-perspectives .psp-subscribe .fc-form.is-success {
        flex-direction: column;
        gap: 12px;
    }
    #view-perspectives .psp-subscribe .fc-submit {
        width: 100%;
        justify-content: center;
    }
}