/* =================================================================
   forktheworld brand styles – layered on top of Source theme
   Overrides color tokens, fonts, and key UI elements.
   Source's Handlebars logic + features remain fully intact.
   ================================================================= */

/* ── TOKENS ────────────────────────────────────────────────────── */
:root {
    --ftw-void:     #0C0B14;
    --ftw-deep:     #12111E;
    --ftw-surface:  #1A1829;
    --ftw-raised:   #201E32;

    --ftw-purple:   #9B30FF;
    --ftw-flash:    #BB55FF;
    --ftw-dim:      #6B35BB;

    --ftw-text-primary:   #EDE9F8;
    --ftw-text-secondary: #A89EC8;
    --ftw-text-muted:     #9088B4;
    --ftw-text-body:      #CCC6E4;

    --ftw-border:    #2C2840;
    --ftw-border-hi: #4A3D70;

    --ftw-font-display: "Bebas Neue", sans-serif;
    --ftw-font-body:    "Fraunces", Georgia, serif;
    --ftw-font-mono:    "DM Mono", "JetBrains Mono", monospace;

    /* Map onto Source's variables so its own components pick up our palette */
    --background-color:       var(--ftw-void);
    --color-primary-text:     var(--ftw-text-primary);
    --color-secondary-text:   var(--ftw-text-secondary);
    --color-border:           var(--ftw-border);
    --color-dark-border:      var(--ftw-border-hi);
    --color-lighter-gray:     var(--ftw-surface);
    --color-darker-gray:      var(--ftw-text-primary);

    /* Force light-text mode (dark background) */
    --color-white:  var(--ftw-text-primary);
    --color-black:  var(--ftw-void);

    /* Aliases so ftw-visuals.css (which uses original var names) works */
    --void:            var(--ftw-void);
    --deep:            var(--ftw-deep);
    --surface:         var(--ftw-surface);
    --raised:          var(--ftw-raised);
    --purple:          var(--ftw-purple);
    --flash:           var(--ftw-flash);
    --dim:             var(--ftw-dim);
    --text-primary:    var(--ftw-text-primary);
    --text-secondary:  var(--ftw-text-secondary);
    --text-muted:      var(--ftw-text-muted);
    --text-body:       var(--ftw-text-body);
    --border:          var(--ftw-border);
    --border-hi:       var(--ftw-border-hi);
    --font-display:    var(--ftw-font-display);
    --font-body:       var(--ftw-font-body);
    --font-mono:       var(--ftw-font-mono);
    --max-w:           1320px;
    --gap:             clamp(24px, 1.7rem + 1.9vw, 48px);
    --radius:          2px;
}

/* Light-text overrides – Source uses .has-light-text on :root */
/* --background-color MUSS ein direkter Hex-Wert sein (kein var()),
   damit Ghost's comments-Script ihn via getPropertyValue() parsen kann */
:root,
:root.has-light-text,
:root.has-dark-text {
    --background-color:     #0C0B14;
    --color-primary-text:   var(--ftw-text-primary);
    --color-secondary-text: var(--ftw-text-secondary);
    --color-border:         var(--ftw-border);
    --color-dark-border:    var(--ftw-border-hi);
    --color-lighter-gray:   var(--ftw-surface);
    --color-darker-gray:    var(--ftw-text-primary);
}

/* ── DARK BASE ──────────────────────────────────────────────────── */
html { color-scheme: dark; }

body {
    background-color: var(--ftw-void) !important;
    color: var(--ftw-text-body);
    font-family: var(--ftw-font-body);
    font-size: clamp(17px, 1.2vw, 20px);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* Film grain texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.35;
}

::selection { background: var(--ftw-purple); color: #fff; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--ftw-void); }
::-webkit-scrollbar-thumb { background: var(--ftw-purple); }

/* ── TYPOGRAPHY ─────────────────────────────────────────────────── */

/* Bebas Neue: generische Headings + strukturelle Titel */
h1, h2, h3, h4, h5, h6,
.is-title,
.gh-featured-post-title {
    font-family: var(--ftw-font-display) !important;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--ftw-text-primary) !important;
    text-transform: none !important;
}

/* Artikel-Haupttitel → Fraunces (hat echte Klein- und Großbuchstaben) */
.gh-article-title {
    font-family: var(--ftw-font-body) !important;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--ftw-text-primary) !important;
    text-transform: none !important;
}

/* Post-Karten-Titel + "Weiterlesen"-Karten → DM Mono */
.gh-card-title {
    font-family: var(--ftw-font-mono) !important;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ftw-text-primary) !important;
    text-transform: none !important;
}

/* .gh-header-title = Hero-Überschrift in Landing/Search → kein uppercase */
.gh-header-title {
    text-transform: none !important;
}

/* Section-Labels: uppercase explizit wiederherstellen.
   Unsere blanket h2/h3-Regel oben würde sie sonst überschreiben.
   .gh-container-title = "NEWS", "WEITERLESEN"
   .gh-featured-title  = "EMPFOHLEN"
   .gh-sidebar-title   = "EMPFEHLUNGEN" */
.gh-container-title,
.gh-featured-title,
.gh-sidebar-title {
    text-transform: uppercase !important;
    font-family: var(--ftw-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
}

p { color: var(--ftw-text-body); font-weight: 300; }
a { color: var(--ftw-purple); transition: color 0.2s; }
a:hover { color: var(--ftw-flash); }

strong { color: var(--ftw-text-primary); font-weight: 700; }

code, pre, .is-code,
.gh-content code,
.gh-content pre {
    font-family: var(--ftw-font-mono) !important;
    font-size: 0.85em;
    color: var(--ftw-flash);
    background: var(--ftw-surface);
    padding: 0.1em 0.4em;
    border-radius: 2px;
}
pre, .gh-content pre { padding: 1.5rem; overflow-x: auto; }
pre code, .gh-content pre code { background: none; padding: 0; }

blockquote,
.gh-content blockquote {
    border-left: 3px solid var(--ftw-purple);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--ftw-text-secondary);
}

/* Body text class that Source uses */
.is-body {
    font-family: var(--ftw-font-body) !important;
}

/* ── GHOST VIEWPORT / LAYOUT ────────────────────────────────────── */
.gh-viewport {
    background-color: var(--ftw-void);
    min-height: 100vh;
}

/* ── NAVIGATION ─────────────────────────────────────────────────── */
/*
 * Source theme sets html { font-size: 62.5% } → 1rem = 10px.
 * All font sizes in this file use px to avoid that ambiguity.
 */
.gh-navigation {
    background-color: rgba(12, 11, 20, 0.0) !important;
    border-bottom: 1px solid transparent !important;
    transition: background-color 0.3s, border-color 0.3s !important;
    backdrop-filter: none;
    /* WCAG 1.4.10: allow reflow without horizontal scroll */
    overflow-x: hidden;
}

/* Scrolled state */
.gh-navigation.is-sticky,
.gh-navigation[style*="background"] {
    background-color: rgba(12, 11, 20, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom-color: var(--ftw-border) !important;
}

/* ── Logo: left-aligned, Bebas Neue, fork SVG included via HBS ── */
.gh-navigation .gh-navigation-logo,
.gh-navigation .gh-navigation-logo.is-title {
    font-family: var(--ftw-font-display) !important;
    font-size: 28px !important;           /* WCAG 1.4.4 – px so it scales with user zoom */
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    color: var(--ftw-text-primary) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap;
}
.gh-navigation .gh-navigation-logo:hover,
.gh-navigation .gh-navigation-logo.is-title:hover {
    color: var(--ftw-text-primary) !important;
    opacity: 1 !important;
}

/* ── Nav links: DM Mono, uppercase, 14px minimum (WCAG AA) ── */
.gh-navigation a:not(.gh-button):not(.gh-navigation-logo) {
    color: var(--ftw-text-secondary) !important;
    font-family: var(--ftw-font-mono) !important;
    font-size: 14px !important;           /* WCAG: ≥14px for nav items */
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    /* WCAG 2.5.5: touch targets ≥44px height */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.gh-navigation a:not(.gh-button):not(.gh-navigation-logo):hover {
    color: var(--ftw-purple) !important;
    opacity: 1 !important;
}

/* ── Nav centered in left-logo layout ── */
/* Default to left-logo (set in package.json). Center the menu. */
.gh-navigation.is-left-logo .gh-navigation-menu {
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Subscribe / Sign-in / Account buttons ── */
.gh-navigation .gh-button {
    background: transparent !important;
    border: 1px solid var(--ftw-purple) !important;
    color: var(--ftw-text-primary) !important;
    font-family: var(--ftw-font-mono) !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    min-height: 44px !important;          /* WCAG 2.5.5 */
    padding: 0 20px !important;
    transition: background 0.2s, color 0.2s !important;
}
.gh-navigation .gh-button:hover {
    background: var(--ftw-purple) !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* ── Dropdown ── */
.gh-dropdown {
    background: rgba(12, 11, 20, 0.99) !important;
    border: 1px solid var(--ftw-border) !important;
    border-top: 2px solid var(--ftw-purple) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}
.gh-dropdown li a {
    color: var(--ftw-text-secondary) !important;
    font-family: var(--ftw-font-mono) !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--ftw-border);
    padding: 12px 20px !important;
    min-height: 44px;                     /* WCAG 2.5.5 */
    display: flex;
    align-items: center;
}
.gh-dropdown li a:hover {
    background: var(--ftw-surface) !important;
    color: var(--ftw-text-primary) !important;
    padding-left: 28px !important;
}

/* ── Burger / icon buttons ── */
.gh-icon-button {
    color: var(--ftw-text-secondary) !important;
    min-height: 44px;
    min-width: 44px;
}
.gh-icon-button svg { color: inherit !important; }
.gh-icon-button:hover { color: var(--ftw-purple) !important; opacity: 1 !important; }

/* ── Mobile open overlay ── */
.is-open#gh-navigation {
    background: rgba(12, 11, 20, 0.99) !important;
    backdrop-filter: blur(20px);
}
.is-open#gh-navigation .nav a {
    font-family: var(--ftw-font-display) !important;
    font-size: 28px !important;
    text-transform: none !important;
    color: var(--ftw-text-primary) !important;
    letter-spacing: 0.02em !important;
}
.is-open#gh-navigation .nav a:hover { color: var(--ftw-purple) !important; }

/* ── CARD / POST LIST ────────────────────────────────────────────── */
.gh-card,
.gh-card-wrapper {
    background: var(--ftw-deep) !important;
    border: none;
    transition: background 0.2s;
    position: relative;
    overflow: hidden;
}
.gh-card::before,
.gh-card-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--ftw-purple);
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
    z-index: 1;
}
.gh-card:hover,
.gh-card-wrapper:hover {
    background: var(--ftw-surface) !important;
}
.gh-card:hover::before,
.gh-card-wrapper:hover::before {
    transform: scaleX(1);
}

.gh-card-title {
    color: var(--ftw-text-primary) !important;
    font-size: 17px !important;
    text-decoration: none !important;
    transition: color 0.2s, text-decoration-color 0.2s;
}

/* Magazine-Header: kleine Seitenkarten */
.gh-header.is-magazine .gh-header-left .gh-card-title,
.gh-header.is-magazine .gh-header-right .gh-card-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
}

/* Magazine-Header: großer Featured-Post (direkt unter gh-header-inner) */
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
}
/* underline on hover – never strikethrough */
.gh-card-link:hover .gh-card-title,
.gh-card:hover .gh-card-title {
    color: var(--ftw-purple) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--ftw-purple) !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1.5px !important;
}
/* kill Source's opacity-fade on hover */
.gh-card-link:hover .gh-card-title { opacity: 1 !important; }

.gh-card-excerpt {
    color: var(--ftw-text-secondary) !important;
    font-style: normal !important;
}

.gh-card-meta,
.gh-card-footer,
.gh-post-meta {
    color: var(--ftw-text-muted) !important;
    font-family: var(--ftw-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em;
}

/* Tag badges – override ghost-accent-color from Source */
.gh-article-tag,
.gh-card-tag,
.gh-tag {
    font-family: var(--ftw-font-mono) !important;
    font-size: 14px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ftw-purple) !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
}
/* .gh-article-tag is an <a> → direct hover */
.gh-article-tag:hover {
    color: var(--ftw-flash) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
/* .gh-card-tag is a <p> inside <a.gh-card-link> → parent hover */
.gh-card-link:hover .gh-card-tag {
    color: var(--ftw-flash) !important;
}

/* Featured section spacing: Abstand nach oben (überschreibt screen.css 100px) */
.gh-featured {
    margin-top: 120px !important;
}
/* Abstand zwischen Post-Cards und der Trennlinie des Headers */
.gh-header.is-magazine .gh-header-inner {
    padding-bottom: 48px !important;
}

/* Featured label */
.gh-featured-label {
    font-family: var(--ftw-font-mono) !important;
    color: var(--ftw-purple) !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 12px !important;
}

/* ── ARTICLE / POST ─────────────────────────────────────────────── */
.gh-article {
    background: var(--ftw-void) !important;
}

.gh-article-title {
    font-size: clamp(32px, 4vw, 45px) !important;
    line-height: 1.15 !important;
    color: var(--ftw-text-primary) !important;
}

.gh-article-meta,
.gh-article-authors,
.gh-article-date {
    font-family: var(--ftw-font-mono) !important;
    color: var(--ftw-text-muted) !important;
    font-size: 13px !important;
    letter-spacing: 0.08em;
}

/* Article content */
.gh-content {
    color: var(--ftw-text-body);
    font-size: clamp(17px, 1.2vw, 20px);
    line-height: 1.85;
    text-align: left !important;
    --content-width: 680px;     /* Override Source default 720px for ~65 chars/line */
}
/* Override Source's rem-based content sizes with px */
.gh-content p  { color: var(--ftw-text-body); font-weight: 300; margin-bottom: 24px; font-size: clamp(17px, 1.2vw, 20px); text-align: left !important; }
.gh-content h2 { margin: 48px 0 20px; font-size: clamp(28px, 4vw, 48px); text-align: left !important; }
.gh-content h3 { margin: 36px 0 16px; font-size: clamp(22px, 3vw, 36px); text-align: left !important; }
.gh-content ul, .gh-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--ftw-text-body);
}
.gh-content li { margin-bottom: 0.5rem; }
.gh-content img { width: 100%; margin: 2rem 0; }
.gh-content hr {
    border: none;
    border-top: 1px solid var(--ftw-border);
    margin: 3rem 0;
}
.gh-content a {
    color: var(--ftw-purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gh-content a:hover { color: var(--ftw-flash); }

/* ── FEATURE IMAGE ──────────────────────────────────────────────── */
.gh-article-image img,
.gh-card-image img {
    filter: saturate(0.85) brightness(0.9);
    transition: transform 0.6s;
}
.gh-card:hover .gh-card-image img { transform: scale(1.03); }

/* ── HEADER (MAGAZINE / HIGHLIGHT / CLASSIC) ────────────────────── */
.gh-header {
    background: var(--ftw-void) !important;
}
.gh-header-inner {
    /* border auf gh-inner statt gh-outer → gleiche Breite wie Footer/Section-Linien */
    border-bottom: 1px solid var(--ftw-border);
}
.gh-header-title {
    color: var(--ftw-text-primary) !important;
}
.gh-header-description {
    color: var(--ftw-text-secondary) !important;
    font-family: var(--ftw-font-body) !important;
}

/* ── CTA / SUBSCRIBE SECTIONS ───────────────────────────────────── */
.gh-cta,
.gh-subscribe-section {
    background: var(--ftw-surface) !important;
    border: 1px solid var(--ftw-border) !important;
    border-top: 3px solid var(--ftw-purple) !important;
}

.gh-cta-title,
.gh-subscribe-title {
    color: var(--ftw-text-primary) !important;
}
.gh-cta-description,
.gh-subscribe-description {
    color: var(--ftw-text-secondary) !important;
}

/* Email input */
.gh-form-input[type="email"],
.gh-email-input,
.gh-subscribe-input input[type="email"] {
    background: #ffffff !important;
    border: 1.5px solid #000000 !important;
    color: #000000 !important;
    font-family: var(--ftw-font-mono) !important;
    border-radius: 6px !important;
}
.gh-form-input[type="email"]::placeholder,
.gh-email-input::placeholder { color: #555555 !important; }
.gh-form-input[type="email"]:focus,
.gh-email-input:focus {
    border-color: var(--ftw-purple) !important;
    outline: 2px solid var(--ftw-purple) !important;
    outline-offset: 2px !important;
}

/* Subscribe / CTA button */
.gh-button,
.gh-subscribe-btn,
[data-members-form] button[type="submit"] {
    background: var(--ftw-purple) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--ftw-font-mono) !important;
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    transition: background 0.2s !important;
    border-radius: 6px !important;
    min-height: 44px !important;          /* WCAG 2.5.5 */
}
.gh-button:hover,
.gh-subscribe-btn:hover,
[data-members-form] button[type="submit"]:hover {
    background: var(--ftw-flash) !important;
}

/* ── FOOTER ─────────────────────────────────────────────────────── */
.gh-footer {
    background: var(--ftw-void) !important;
    /* border-top entfernt – gh-footer-signup hat bereits lila Trennakzent */
    padding: 4rem 0 2rem;
}

.gh-footer-bar {
    /* ftw-footer-top hat bereits border-bottom → kein border-top hier (sonst doppelte Linie) */
    border-top: none !important;
    border-bottom: 1px solid var(--ftw-border) !important;
    padding-top: 2rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gh-footer-logo,
.gh-footer-logo.is-title {
    font-family: var(--ftw-font-display) !important;
    font-size: 20px !important;
    letter-spacing: 0.04em !important;
    color: var(--ftw-text-primary) !important;
}

.gh-footer-menu a {
    font-family: var(--ftw-font-mono) !important;
    font-size: 13px !important;
    color: var(--ftw-text-muted) !important;
    transition: color 0.2s;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-height: 44px;                     /* WCAG 2.5.5 */
    display: inline-flex;
    align-items: center;
}
.gh-footer-menu a:hover { color: var(--ftw-purple) !important; }

.gh-footer-copyright,
.gh-footer-copyright a {
    font-family: var(--ftw-font-mono) !important;
    font-size: 12px !important;
    color: var(--ftw-text-muted) !important;
    letter-spacing: 0.06em;
}

/* Footer signup section */
.gh-footer-signup {
    background: var(--ftw-surface) !important;
    border: 1px solid var(--ftw-border) !important;
    border-top: 3px solid var(--ftw-purple) !important;
    padding: 3rem !important;
    margin-bottom: 3rem;
}
.gh-footer-signup-header {
    color: var(--ftw-text-primary) !important;
}
.gh-footer-signup-subhead {
    color: var(--ftw-text-secondary) !important;
}

/* ── SIDEBAR ────────────────────────────────────────────────────── */
.gh-sidebar {
    background: var(--ftw-deep) !important;
    border-left: 1px solid var(--ftw-border) !important;
}
.gh-sidebar .gh-widget-title {
    font-family: var(--ftw-font-mono) !important;
    color: var(--ftw-purple) !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 12px !important;
    border-bottom: 1px solid var(--ftw-border);
    padding-bottom: 10px;
    margin-bottom: 16px;
}

/* ── PAGINATION ──────────────────────────────────────────────────── */
.gh-pagination a,
.gh-pagination .gh-pagination-link {
    font-family: var(--ftw-font-mono) !important;
    color: var(--ftw-text-muted) !important;
    border: 1px solid var(--ftw-border) !important;
    background: var(--ftw-deep) !important;
    transition: all 0.2s;
}
.gh-pagination a:hover,
.gh-pagination .gh-pagination-link:hover {
    border-color: var(--ftw-purple) !important;
    color: var(--ftw-purple) !important;
    background: var(--ftw-surface) !important;
}

/* ── TAGS / ARCHIVE ──────────────────────────────────────────────── */
.gh-tag-archive,
.gh-topic {
    background: var(--ftw-deep) !important;
    border: 1px solid var(--ftw-border) !important;
    transition: background 0.2s;
}
.gh-tag-archive:hover,
.gh-topic:hover {
    background: var(--ftw-surface) !important;
    border-color: var(--ftw-purple) !important;
}

/* ── AUTHOR PAGE ─────────────────────────────────────────────────── */
.gh-author-image img {
    filter: saturate(0.8) brightness(0.85);
    border-left: 3px solid var(--ftw-purple);
}
.gh-author-name { color: var(--ftw-text-primary) !important; }
.gh-author-bio  { color: var(--ftw-text-secondary) !important; }

/* ── COMMENTS ────────────────────────────────────────────────────── */
.ftw-comments {
    border-top: 1px solid var(--ftw-border);
    margin-top: 60px;
    padding: 60px 0 80px;
}
.ftw-comments-inner {
    max-width: 740px;
    margin: 0 auto;
    padding: 0 max(4vmin, 20px);
}
.ftw-comments-label {
    font-family: var(--ftw-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--ftw-purple) !important;
    margin-bottom: 32px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ftw-border);
}
.gh-comments {
    margin-top: 0 !important;
    background: transparent !important;
    color-scheme: dark;
}
/* Falls Ghost Comments direkt DOM-Elemente rendert (kein iframe) */
.gh-comments > *,
#ghost-comments-root,
#ghost-comments-root > * {
    background: transparent !important;
    color: var(--ftw-text-body) !important;
}
/* iframe-Element selbst (content bleibt ghostseitig) */
.gh-comments iframe {
    background: transparent !important;
    color-scheme: dark !important;
}

/* ── SEARCH ──────────────────────────────────────────────────────── */
.gh-search-modal,
.gh-search-overlay {
    background: rgba(12, 11, 20, 0.97) !important;
    backdrop-filter: blur(20px) !important;
}
.gh-search-input {
    font-family: var(--ftw-font-mono) !important;
    background: var(--ftw-deep) !important;
    color: var(--ftw-text-primary) !important;
    border: 1px solid var(--ftw-border) !important;
}
.gh-search-result-title  { color: var(--ftw-text-primary) !important; }
.gh-search-result-url    { color: var(--ftw-purple) !important; }

/* Search toggle icon */
.gh-search-toggle {
    color: var(--ftw-text-muted) !important;
    background: none !important;
    transition: color 0.2s;
}
.gh-search-toggle:hover { color: var(--ftw-purple) !important; }

/* ── PORTAL / MEMBERS ────────────────────────────────────────────── */
.gh-portal-triggerbtn {
    background: transparent !important;
    border: 1px solid var(--ftw-purple) !important;
    color: var(--ftw-text-primary) !important;
    font-family: var(--ftw-font-mono) !important;
    transition: all 0.2s !important;
}
.gh-portal-triggerbtn:hover {
    background: var(--ftw-purple) !important;
    color: #fff !important;
}

/* Members-only paywall card */
.gh-post-upgrade-cta {
    background: var(--ftw-surface) !important;
    border: 1px solid var(--ftw-border) !important;
    border-top: 3px solid var(--ftw-purple) !important;
}

/* ── KOENIG CARDS ─────────────────────────────────────────────────── */
.kg-width-wide {
    margin-left: calc(50% - min(45vw, 680px));
    margin-right: calc(50% - min(45vw, 680px));
    width: min(90vw, 1360px);
    max-width: 1360px;
}
.kg-width-full {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}
.kg-card { margin: 2rem 0; }
.kg-image-card img { width: 100%; height: auto; filter: saturate(0.85); }
.kg-image-caption {
    font-family: var(--ftw-font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--ftw-text-muted);
    text-align: center;
    padding: 6px 0;
}
.kg-gallery-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.kg-video-card video { width: 100%; }
.kg-audio-card {
    background: var(--ftw-surface) !important;
    border: 1px solid var(--ftw-border) !important;
    padding: 1.5rem;
}
.kg-bookmark-card {
    border: 1px solid var(--ftw-border) !important;
    background: var(--ftw-deep) !important;
    padding: 1.2rem;
    display: flex;
    gap: 1rem;
}
.kg-bookmark-title       { font-family: var(--ftw-font-display); color: var(--ftw-text-primary); }
.kg-bookmark-description { font-size: 14px; color: var(--ftw-text-secondary); }
.kg-bookmark-url         { font-family: var(--ftw-font-mono); font-size: 12px; color: var(--ftw-text-muted); }
.kg-callout-card {
    background: var(--ftw-surface) !important;
    border-left: 3px solid var(--ftw-purple) !important;
    padding: 1.2rem 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.kg-toggle-card     { border: 1px solid var(--ftw-border) !important; }
.kg-toggle-heading  { padding: 1rem; cursor: pointer; font-family: var(--ftw-font-display); color: var(--ftw-text-primary); }
.kg-toggle-content  { padding: 0 1rem 1rem; color: var(--ftw-text-body); }
.kg-header-card     { background: var(--ftw-deep) !important; }
.kg-header-card-header { color: var(--ftw-text-primary) !important; }
.kg-product-card    { background: var(--ftw-surface) !important; border: 1px solid var(--ftw-border) !important; }

/* ── PODCAST / AUDIO ─────────────────────────────────────────────── */
.gh-podcast-player,
.gh-episode-player {
    background: var(--ftw-surface) !important;
    border: 1px solid var(--ftw-border) !important;
}

/* ── ACCESSIBILITY – WCAG 2.1 AA ─────────────────────────────────── */

/* 2.4.7 – Focus visible: distinct purple ring on all interactive elements */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--ftw-purple) !important;
    outline-offset: 3px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 4px rgba(155, 48, 255, 0.25) !important;
}

/* 2.5.5 – Target size: all interactive elements ≥44×44px */
a, button, [role="button"],
input[type="submit"], input[type="button"],
label[for] {
    /* Only set min-height where it doesn't break layout */
}
.gh-navigation a,
.gh-footer a,
.ftw-footer-col a,
.ftw-footer-social a,
.gh-button,
.gh-icon-button,
.gh-burger,
.gh-search-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* 1.4.3 – Contrast: interactive text colours all meet 4.5:1 on dark bg */
/* All our custom text is on #0C0B14 or #12111E:
   --ftw-text-primary   #EDE9F8 → 14.8:1  ✓
   --ftw-text-secondary #A89EC8 →  6.1:1  ✓
   --ftw-text-muted     #9088B4 →  4.6:1  ✓ (barely)
   --ftw-purple         #9B30FF →  4.5:1  ✓ */

/* 1.4.1 – Use of colour: links in content always underlined */
.gh-content a:not(.gh-button) {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* 2.4.1 – Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    background: var(--ftw-purple);
    color: #fff;
    padding: 10px 20px;
    font-family: var(--ftw-font-mono);
    font-size: 14px;
    z-index: 9999;
    transition: top 0.2s;
    border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }

/* 1.4.4 – Text resize: no px restrictions on zoom */
html { font-size: 62.5%; }           /* keep Source's base so its rem-units are correct */
body { font-size: clamp(17px, 1.2vw, 20px) !important; }

/* 1.4.10 – Reflow: no horizontal scroll at 320px width */
@media (max-width: 360px) {
    .gh-navigation-menu { display: none; }
    .gh-navigation { padding: 0 12px; }
    .ftw-footer-top { grid-template-columns: 1fr !important; }
    .gh-content h2 { font-size: 24px !important; }
}

/* 1.3.4 – Orientation: no lock */
/* (no CSS restriction needed) */

/* 3.2.1 – On Focus: no unexpected context change */
/* (no JS-side changes) */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── HIGH CONTRAST ───────────────────────────────────────────────── */
@media (prefers-contrast: high) {
    :root {
        --ftw-text-muted:     #B8B0D0;
        --ftw-text-secondary: #D4CEEC;
        --ftw-border:         #4A4070;
    }
}

/* ── BRANDED FOOTER TOP ──────────────────────────────────────────── */
.ftw-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--ftw-border);
}

.ftw-footer-logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    margin-bottom: 1rem;
}
.ftw-footer-logo-text {
    font-family: var(--ftw-font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--ftw-text-primary);
    line-height: 1;
}
.ftw-footer-logo-text span { color: var(--ftw-purple); }

.ftw-footer-desc {
    font-size: 15px;
    color: var(--ftw-text-muted);
    margin-top: 10px;
    max-width: 280px;
    line-height: 1.7;
    font-style: normal;
}

.ftw-footer-social {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}
.ftw-footer-social a {
    font-family: var(--ftw-font-mono);
    font-size: 13px;
    color: var(--ftw-text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    min-height: 44px;                     /* WCAG 2.5.5 */
}
.ftw-footer-social a:hover { color: var(--ftw-purple); }

.ftw-footer-col h2,
.ftw-footer-col-title {
    font-family: var(--ftw-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ftw-purple) !important;
    margin-bottom: 16px;
    font-weight: 500;
    border: none;
    padding: 0;
}

.ftw-footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    margin: 0;
}
.ftw-footer-col a {
    font-family: var(--ftw-font-mono);
    font-size: 14px;
    color: var(--ftw-text-secondary) !important;
    transition: color 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
    min-height: 44px;                     /* WCAG 2.5.5 */
}
.ftw-footer-col a:hover { color: var(--ftw-purple) !important; }

.ftw-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}
.ftw-footer-badge {
    font-family: var(--ftw-font-mono);
    font-size: 11px;
    color: var(--ftw-text-muted);
    border: 1px solid var(--ftw-border);
    padding: 3px 8px;
    border-radius: 2px;
}

/* Logo icon vertical align in nav */
.ftw-logo {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}
.ftw-logo-icon { flex-shrink: 0; }
.ftw-nav-logo-text {
    font-family: var(--ftw-font-display) !important;
    font-size: 28px !important;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--ftw-text-primary);
}
.ftw-nav-logo-text span { color: var(--ftw-purple); }

@media (max-width: 900px) {
    .ftw-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
    .ftw-footer-top { grid-template-columns: 1fr; }
}

/* ── HOMEPAGE: GRID LAYOUT FOR POST FEED ───────────────────────── */
.home-template .gh-feed {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--grid-gap, 42px) !important;
}
@media (max-width: 600px) {
    .home-template .gh-feed { grid-template-columns: 1fr !important; }
}

/* ── ARTICLE: SOCIAL SHARE LINKS ────────────────────────────────── */
.ftw-share-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftw-share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--ftw-purple) !important;
    border: 1px solid var(--ftw-border-hi);
    border-radius: 50%;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    text-decoration: none !important;
}

.ftw-share-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.ftw-share-link:hover {
    color: #fff !important;
    background: var(--ftw-purple);
    border-color: var(--ftw-purple);
    opacity: 1 !important;
}

/* ── ARTICLE: AUTHOR AVATAR ──────────────────────────────────────── */
.author-profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.ftw-author-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ftw-purple);
    color: #fff !important;
    font-family: var(--ftw-font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    flex-shrink: 0;
}

.ftw-author-avatar-fallback:hover {
    background: var(--ftw-flash);
    opacity: 1 !important;
}

/* ── RELATED POSTS ("Read more"): Titel auf 2 Zeilen begrenzen ───── */
.gh-container .gh-feed .gh-card-title {
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/* ── MAGAZINE HEADER: große Featured-Karte (direktes Kind von gh-header-inner) ── */
/* Im Magazine-Layout ist Post 1 ein <article.gh-card> direkt unter .gh-header-inner,
   nicht in gh-header-left oder gh-header-right. */

/* Mehr Excerpt-Zeilen (Source setzt global -webkit-line-clamp: 2) */
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
    -webkit-line-clamp: 5 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Karte als Flex-Column: Content oben, Meta unten → kein leerer Bereich */
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-link {
    display: flex !important;
    flex-direction: column !important;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta {
    margin-top: auto !important;
}

/* "Weiterlesen →" – dekorativer Text (die ganze Karte ist bereits ein <a>) */
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-wrapper::after {
    content: "Weiterlesen →";
    display: block;
    margin-top: 20px;
    color: var(--ftw-purple);
    font-family: var(--ftw-font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s;
}
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-link:hover .gh-card-wrapper::after {
    color: var(--ftw-flash);
}

/* ── HIDE GHOST-INJECTED SUBSCRIPTION CTAs ──────────────────────── */
.ghost-display,
.ghost-display.dark,
.gh-post-upgrade-cta,
.content-cta,
[class*="upgrade-cta"],
[class*="post-cta"],
[class*="signup-card"],
.gh-signup-card,
.kg-signup-card,
.kg-subscription-card {
    display: none !important;
}
/* Linie (hr) direkt vor der Box */
hr:has(+ .ghost-display) {
    display: none !important;
}

/* ── HOMEPAGE HERO ───────────────────────────────────────────────── */
.ftw-hero {
    padding: 72px 0 56px;
}

.ftw-hero-inner {
    max-width: var(--max-w, 1320px);
    margin: 0 auto;
}

.ftw-hero-content {
    border-left: 3px solid var(--ftw-purple);
    padding-left: 32px;
    max-width: 760px;
}

.ftw-hero-eyebrow {
    font-family: var(--ftw-font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--ftw-text-primary);
    margin: 0 0 20px;
    line-height: 1;
}

.ftw-hero-slash {
    color: var(--ftw-purple);
}

.ftw-hero-brand {
    color: var(--ftw-text-primary);
    font-family: var(--ftw-font-mono);
}

.ftw-hero-headline {
    font-family: var(--ftw-font-display) !important;
    font-size: clamp(52px, 6vw, 88px) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em;
    color: var(--ftw-text-primary) !important;
    text-transform: none !important;
    margin: 0 0 20px;
}

.ftw-hero-sub {
    font-family: var(--ftw-font-mono);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: rgba(237, 233, 248, 0.7);
    margin: 0 0 36px;
    line-height: 1.6;
}

.ftw-hero-cta {
    display: inline-block;
    background: var(--ftw-purple);
    color: #fff !important;
    font-family: var(--ftw-font-mono);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 32px;
    text-decoration: none !important;
    border-radius: var(--radius, 2px);
    transition: background 0.2s;
    min-height: 44px;
    align-items: center;
    line-height: 1;
}

.ftw-hero-cta:hover {
    background: var(--ftw-dim);
    color: #fff !important;
}

@media (max-width: 767px) {
    .ftw-hero {
        padding: 48px 0 40px;
    }
    .ftw-hero-content {
        padding-left: 20px;
    }
}