/* ============================================================================
   lisafrank.css  ·  "Lisa Frank Stratosphere"  ·  layered AFTER Solo's screen.css
   ----------------------------------------------------------------------------
   A holographic sticker-book design layer. The RAINBOW SYSTEM is fixed (mine);
   everything Savannah controls from Ghost stays editable as CONTENT:
     · --ghost-accent-color  -> highlight accent (tags, links, focus, subscribe)
     · @custom.background_color -> the aurora OVERLAYS it (never replaces)
     · Typography picker (sans/serif/mono) -> still switches; cute display font is
       only the default-sans fallback (serif/mono win via --gh-font-* tokens)
     · header text / nav / footer / post content / images -> untouched Ghost data
   Garish on purpose, built carefully: GPU-only motion, reduced-motion honored,
   accessible focus, readable cards on any background.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0 · DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* fixed Lisa Frank palette */
    --lf-pink:   #ff4fd8;
    --lf-magenta:#ff2fa0;
    --lf-cyan:   #25e0ff;
    --lf-blue:   #4f7dff;
    --lf-purple: #a04bff;
    --lf-grape:  #7b2fff;
    --lf-lime:   #8cff52;
    --lf-yellow: #ffd23f;
    --lf-orange: #ff8a3f;
    --lf-mint:   #5efcd0;
    --lf-ink:    #3a1670;  /* readable deep grape for text on white cards */
    --lf-ink-soft:#6b5b9a;

    --lf-rainbow: linear-gradient(100deg,
        #ff2fa0 0%, #ff4fd8 18%, #a04bff 36%, #4f7dff 54%, #25e0ff 70%, #8cff52 85%, #ffd23f 100%);
    --lf-rainbow-soft: linear-gradient(100deg,
        #ff8ad6, #c79bff, #8fb2ff, #8af0ff, #b6ff9b, #ffe79b);
    --lf-conic: conic-gradient(from 0deg,
        #ff2fa0, #ffd23f, #8cff52, #25e0ff, #4f7dff, #a04bff, #ff2fa0);

    /* motion */
    --lf-spring: cubic-bezier(.34, 1.56, .64, 1);
    --lf-out:    cubic-bezier(.22, 1, .36, 1);
    --lf-bounce: cubic-bezier(.2, .85, .3, 1.4);

    /* shape */
    --lf-radius: 26px;
    --lf-radius-sm: 16px;

    /* narrow the column so it isn't a 1440px wall — leaves room for side decor */
    --container-width: 1160px;
}

/* the display font defers to her Typography picker, falls back to the cute set.
   Only overrides on the default sans setting (serif/mono pickers still win). */
:root {
    --font-sans: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --lf-display: "Fredoka", "Baloo 2", var(--font-sans);
    --lf-script:  "Pacifico", "Fredoka", cursive;
}

/* cross-document page transitions: a soft cross-fade on navigation (supporting
   browsers only, and only when motion is welcome). Progressive enhancement. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}

/* ----------------------------------------------------------------------------
   1 · BASE NICETIES — selection, scrollbar, focus, smooth scroll
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
::selection { background: var(--lf-grape); color: #fff; }  /* white on grape = 5.7:1 (AA) */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: rgba(160, 75, 255, .08); }
::-webkit-scrollbar-thumb {
    background: var(--lf-rainbow); border-radius: 999px;
    border: 3px solid transparent; background-clip: padding-box;
}
/* focus ring is a fixed dark-core + white-halo pair so it clears 3:1 on ANY
   background or accent the owner picks (not tied to --ghost-accent-color). */
:focus-visible {
    outline: 3px solid #1a1340; outline-offset: 2px; border-radius: 6px;
    box-shadow: 0 0 0 6px #fff;
}
.has-light-text :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px rgba(0, 0, 0, .85); }
.gh-icon-btn:focus-visible, .gh-text-btn:focus-visible { outline: 3px solid #1a1340; outline-offset: 2px; }

body { overflow-x: hidden; }

/* ----------------------------------------------------------------------------
   2 · ANIMATED AURORA + SPARKLE FIELD (overlays her background, never replaces)
   -------------------------------------------------------------------------- */
body::before {
    content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 34% at 14% 14%, rgba(255, 79, 216, .34), transparent 70%),
        radial-gradient(34% 30% at 88% 10%, rgba(37, 224, 255, .32), transparent 70%),
        radial-gradient(40% 38% at 50% 102%, rgba(255, 210, 63, .30), transparent 70%),
        radial-gradient(36% 34% at 84% 88%, rgba(160, 75, 255, .30), transparent 70%),
        radial-gradient(30% 28% at 8% 70%, rgba(140, 255, 82, .26), transparent 70%);
    background-repeat: no-repeat;
    animation: lf-aurora 26s ease-in-out infinite alternate;
    will-change: transform;
}
/* (no starfield — the soft rainbow aurora is the only background wash; the
   peppered emoji layer below is the texture) */

/* ----------------------------------------------------------------------------
   3 · PEPPERED EMOJI DECOR (flowers/books/ambulances/...; JS scatters them
   randomly across the viewport on every load, each bobbing gently)
   -------------------------------------------------------------------------- */
.lf-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lf-emoji {
    position: absolute; font-size: var(--s, 32px); line-height: 1;
    opacity: var(--o, .8); user-select: none;
    filter: drop-shadow(0 4px 8px rgba(123, 47, 255, .18));
    animation: lf-bob var(--dur, 9s) ease-in-out infinite;
    animation-delay: var(--del, 0s);
    will-change: transform;
}

/* ----------------------------------------------------------------------------
   4 · HOLOGRAPHIC SCROLL-PROGRESS BAR (transform: scaleX — compositor only)
   -------------------------------------------------------------------------- */
.lf-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 1000;
    background: rgba(58, 22, 112, .16); pointer-events: none;  /* darker track so the bar reads (1.4.11) */
}
.lf-progress-bar {
    height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center;
    /* dark-safe gradient (no pale stops) so the position indicator stays visible */
    background: linear-gradient(90deg, #ff2fa0, #a04bff, #4f7dff, #7b2fff);
    box-shadow: 0 0 12px rgba(255, 79, 216, .7);
    will-change: transform;
}

/* ----------------------------------------------------------------------------
   5 · TYPOGRAPHY — display font on default sans; serif/mono pickers still win
   -------------------------------------------------------------------------- */
body:not(.has-serif-font):not(.has-mono-font) h1,
body:not(.has-serif-font):not(.has-mono-font) h2,
body:not(.has-serif-font):not(.has-mono-font) h3,
body:not(.has-serif-font):not(.has-mono-font) .gh-article-title,
body:not(.has-serif-font):not(.has-mono-font) .lf-card-title,
body:not(.has-serif-font):not(.has-mono-font) .gh-comments-title,
body:not(.has-serif-font):not(.has-mono-font) .gh-about-primary {
    font-family: var(--gh-font-heading, var(--lf-display));
    letter-spacing: .2px; font-weight: 700;
}
/* honor the serif/mono picker on our custom feed classes too (Solo only styles
   .gh-card*, not .lf-card*). --gh-font-* keeps any Ghost custom font winning. */
.has-serif-font .lf-card-title, .has-serif-font .gh-comments-title { font-family: var(--gh-font-heading, var(--font-serif)); }
.has-mono-font  .lf-card-title, .has-mono-font  .gh-comments-title { font-family: var(--gh-font-heading, var(--font-mono)); }
.has-serif-font .lf-card-excerpt, .has-serif-font .lf-card-date { font-family: var(--gh-font-body, var(--font-serif)); }
.has-mono-font  .lf-card-excerpt, .has-mono-font  .lf-card-date { font-family: var(--gh-font-body, var(--font-mono)); }

/* tame Solo's oversized type (hero stays big & bold, just not 5.8rem humongous) */
.gh-about-primary { font-size: clamp(2.7rem, 1.4rem + 5.2vw, 5rem) !important; line-height: 1.04 !important; }
.gh-article-title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem) !important; line-height: 1.12 !important; }
.gh-content h2    { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem) !important; }
.gh-content h3    { font-size: clamp(1.25rem, 1rem + .8vw, 1.55rem) !important; }

/* ----------------------------------------------------------------------------
   6 · HEADER + NAV — rainbow shimmer logo, candy pills
   -------------------------------------------------------------------------- */
.gh-head { position: relative; z-index: 5; }
.gh-head-inner { padding-block: 8px; }

.gh-head-logo {
    font-family: var(--lf-script) !important; font-weight: 400; font-size: 1.8rem;
    transition: transform .25s var(--lf-spring);
}
.gh-head-logo:not(:has(img)) { color: var(--lf-ink); }
.has-light-text .gh-head-logo:not(:has(img)) { color: #fff; }
.gh-head-logo img { height: clamp(48px, 6vw, 66px); width: auto; }
.gh-head-logo:hover { transform: rotate(-3deg) scale(1.06); }

/* nav links -> glossy pills that lift + wobble */
.gh-head-menu .nav a, .gh-head-link {
    position: relative; border-radius: 999px; padding: 7px 16px; font-weight: 700;
    color: inherit; text-decoration: none;
    transition: transform .2s var(--lf-spring), color .2s ease, background .2s ease, box-shadow .2s ease;
}
.gh-head-menu .nav a::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 0; height: 3px;
    transform: translateX(-50%); border-radius: 999px; background: var(--lf-rainbow);
    transition: width .25s var(--lf-spring);
}
.gh-head-menu .nav a:hover, .gh-head-link:hover {
    transform: translateY(-3px) rotate(-2.5deg);
    color: var(--ghost-accent-color, var(--lf-magenta));
}
.gh-head-menu .nav a:hover::after { width: 60%; }
.gh-head-menu .nav li.nav-current a {
    background: rgba(255, 79, 216, .12);
    color: var(--ghost-accent-color, var(--lf-magenta));
}
.gh-head-menu .nav li.nav-current a::after { width: 60%; }

/* search / icon buttons -> spinny circle */
.gh-icon-btn, .gh-search {
    border-radius: 999px !important;
    transition: transform .35s var(--lf-spring), background .2s ease;
}
.gh-icon-btn:hover, .gh-search:hover {
    transform: rotate(18deg) scale(1.12);
    background: rgba(37, 224, 255, .16);
}

/* onload entrance choreography — JS adds .lf-loaded after window load.
   Pure animation (no persistent hidden state) so it degrades to visible if JS is off. */
.lf-loaded .gh-head-brand { animation: lf-drop .6s var(--lf-spring) both; }
.lf-loaded .gh-head-menu .nav > li { animation: lf-drop .55s var(--lf-spring) both; }
.lf-loaded .gh-head-menu .nav > li:nth-child(1) { animation-delay: .05s; }
.lf-loaded .gh-head-menu .nav > li:nth-child(2) { animation-delay: .11s; }
.lf-loaded .gh-head-menu .nav > li:nth-child(3) { animation-delay: .17s; }
.lf-loaded .gh-head-menu .nav > li:nth-child(4) { animation-delay: .23s; }
.lf-loaded .gh-head-menu .nav > li:nth-child(5) { animation-delay: .29s; }
.lf-loaded .gh-head-menu .nav > li:nth-child(6) { animation-delay: .35s; }

/* ----------------------------------------------------------------------------
   7 · HERO (gh-about) — die-cut sticker headline, orbiting motifs, glow
   -------------------------------------------------------------------------- */
.gh-about { position: relative; }
.gh-about-content-inner { position: relative; z-index: 2; }

/* GLOWING PINK STICKER WORD: solid accent fill, chunky white die-cut border,
   pink halo glow. paint-order puts the white stroke behind the fill = clean border.
   Uses her accent, so it stays editable (pink today; follows whatever she picks). */
.gh-about-primary {
    background: none !important;
    color: var(--ghost-accent-color, var(--lf-magenta)) !important;
    -webkit-text-fill-color: var(--ghost-accent-color, var(--lf-magenta)) !important;
    paint-order: stroke fill;
    -webkit-text-stroke: 5px #fff;
    text-shadow:
        0 0 18px rgba(255, 79, 216, .8),
        0 0 42px rgba(255, 79, 216, .55),
        0 8px 22px rgba(123, 47, 255, .35);
    padding-bottom: .08em;
    animation: lf-pop .8s var(--lf-spring) both;
}
/* each letter bobs on calm water — staggered phase makes a slow wave drift L->R */
.gh-about-primary .lf-word { display: inline-block; white-space: nowrap; }
.gh-about-primary .lf-letter {
    display: inline-block; will-change: transform;
    animation: lf-sway 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.13s);
}
.gh-about-secondary {
    font-weight: 600; color: var(--lf-ink-soft);
    animation: lf-pop .9s .08s var(--lf-spring) both;
}
.gh-about-image { border-radius: var(--lf-radius); }

/* soft rainbow glow behind the headline (overlays her bg, works light/dark/photo) */
.gh-about-content-inner::after {
    content: ""; position: absolute; inset: -14% -8%; z-index: -1; pointer-events: none;
    background: radial-gradient(58% 72% at 30% 50%, rgba(255, 79, 216, .18), rgba(37, 224, 255, .12) 45%, transparent 76%);
    filter: blur(16px);
}
/* one spinning sparkle by the headline */
.gh-about-content-inner::before {
    content: "✦"; position: absolute; left: -1.1em; top: -.1em; font-size: 1.4rem;
    color: var(--lf-yellow); animation: lf-spin 9s linear infinite; z-index: 2;
}

/* orbiting kawaii stickers around the hero (markup in index.hbs) */
.lf-hero-stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lf-hero-sticker {
    position: absolute; font-size: var(--s, 54px); line-height: 1; user-select: none;
    filter: drop-shadow(0 6px 12px rgba(123, 47, 255, .28));
    animation: lf-bob var(--dur, 8s) ease-in-out infinite; animation-delay: var(--del, 0s);
}
.lf-hero-sticker--1 { top: 6%;  right: 10%; --s: 70px; --dur: 9s;  --del: -1s; }
.lf-hero-sticker--2 { top: 60%; right: 18%; --s: 46px; --dur: 7s;  --del: -3s; }
.lf-hero-sticker--3 { top: 16%; left: 6%;   --s: 40px; --dur: 8s;  --del: -2s; }
.lf-hero-sticker--4 { bottom: 8%; left: 14%; --s: 56px; --dur: 10s; --del: -4s; }
@media (max-width: 700px) {
    .lf-hero-sticker--2, .lf-hero-sticker--3 { display: none; }
    .lf-hero-sticker--1 { --s: 48px; top: 2%; right: 4%; }
    .lf-hero-sticker--4 { --s: 40px; bottom: 2%; left: 4%; }
}

/* ----------------------------------------------------------------------------
   8 · FEED — sticker-card grid with 3D tilt, holographic gloss, scroll reveal
   -------------------------------------------------------------------------- */
.lf-feed, .gh-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 36px 30px;
    padding-block: 18px 32px;
    perspective: 1200px;
    align-items: start;  /* each card = its natural height, no stretch "chin" */
}

.lf-card {
    --rot: 0deg; --rx: 0deg; --ry: 0deg; --lift: 0px; --rev: 0px; --scl: 1; --mx: 50%; --my: 50%;
    --edge: var(--lf-pink); --shadow: rgba(255, 79, 216, .26);
    position: relative; background: #fff;
    border: 3px solid var(--edge); border-radius: var(--lf-radius);
    box-shadow: 8px 8px 0 var(--shadow), 0 14px 30px rgba(123, 47, 255, .10);
    overflow: hidden; transform-style: preserve-3d;
    transform: translateY(var(--lift)) translateY(var(--rev)) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rot)) scale(var(--scl));
    transition: transform .35s var(--lf-spring), box-shadow .35s var(--lf-out), border-color .3s ease;
}
/* stagger the resting tilt so they sit like stickers stuck askew */
.lf-card:nth-child(4n+1) { --rot: -1.6deg; }
.lf-card:nth-child(4n+2) { --rot:  1.3deg; --edge: var(--lf-cyan);   --shadow: rgba(37, 224, 255, .28); }
.lf-card:nth-child(4n+3) { --rot: -1deg;   --edge: var(--lf-yellow); --shadow: rgba(255, 210, 63, .34); }
.lf-card:nth-child(4n+4) { --rot:  1.8deg; --edge: var(--lf-lime);   --shadow: rgba(140, 255, 82, .30); }

.lf-card:hover, .lf-card:focus-within {
    --rot: 0deg; --lift: -6px; --scl: 1.015;
    box-shadow: 14px 16px 0 var(--shadow), 0 26px 48px rgba(123, 47, 255, .20);
    border-color: var(--edge);
    will-change: transform;  /* promote only while interacting (not permanently) */
}
/* keyboard focus ring survives overflow:hidden because box-shadow draws outside */
.lf-card:focus-within {
    box-shadow: 0 0 0 4px var(--ghost-accent-color, var(--lf-purple)),
                14px 16px 0 var(--shadow), 0 26px 48px rgba(123, 47, 255, .20);
}

/* pointer-follow highlight + holographic gloss */
.lf-card::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(180px 180px at var(--mx) var(--my), rgba(255, 255, 255, .45), transparent 60%);
    opacity: 0; transition: opacity .3s ease; mix-blend-mode: overlay;
}
.lf-card:hover::before { opacity: 1; }
.lf-gloss {
    position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 4;
    pointer-events: none; transform: skewX(-18deg) translateX(0);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    opacity: 0;
}
.lf-card:hover .lf-gloss { animation: lf-sweep .7s var(--lf-out); }

.lf-card-link { display: block; color: var(--lf-ink); text-decoration: none; }

.lf-card-img {
    position: relative; aspect-ratio: 3 / 2; overflow: hidden;
    background: var(--lf-conic); background-size: 140% 140%; background-position: center;
}
.lf-card-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--lf-out);
}
.lf-card:hover .lf-card-img img { transform: scale(1.07) rotate(.5deg); }
.lf-card-noimg {
    display: flex; align-items: center; justify-content: center; height: 100%;
    color: #fff;
}
.lf-card-noimg svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); animation: lf-bob 6s ease-in-out infinite; }

/* glossy sticker-shine corner highlight */
.lf-card-img::after {
    content: ""; position: absolute; top: 8px; left: 10px; width: 38%; height: 30%;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent);
    transform: rotate(-18deg);
}

.lf-card-body { padding: 16px 18px 20px; position: relative; }
.lf-tag {
    display: inline-block; margin-bottom: 9px; padding: 4px 13px; border-radius: 999px;
    font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    color: #fff;
    /* darken the accent so white text clears AA at ANY accent the owner picks */
    background: color-mix(in srgb, var(--ghost-accent-color, var(--lf-magenta)) 72%, #2a0e52);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.lf-card-title { margin: .1em 0 .4em; font-size: 1.32rem; line-height: 1.18; color: var(--lf-ink); }
.lf-card-excerpt { margin: 0 0 14px; color: var(--lf-ink-soft); font-size: .98rem; line-height: 1.55; }
.lf-card-date {
    font-size: .8rem; font-weight: 700; color: var(--lf-ink-soft);
    display: inline-flex; align-items: center; gap: 6px;
}
.lf-card-date::before { content: "✦"; color: var(--lf-yellow); }

/* scroll-reveal — drive --rev/--scl (which live INSIDE the base transform) so the
   3D tilt vars survive after reveal. Only active when JS marks motion OK + IO ok. */
.lf-fx-ready .lf-reveal { opacity: 0; --rev: 30px; --scl: .9; }
.lf-fx-ready .lf-reveal.is-in {
    opacity: 1; --rev: 0px; --scl: 1;
    transition: opacity .6s var(--lf-out), transform .7s var(--lf-spring);
}

/* empty feed state (no posts / empty tag) */
.lf-empty {
    grid-column: 1 / -1; text-align: center; padding: 56px 24px; color: var(--lf-ink-soft);
}
.lf-empty svg { width: 84px; height: 84px; animation: lf-bob 6s ease-in-out infinite; }
.lf-empty p { font-family: var(--lf-display); font-weight: 700; font-size: 1.3rem; margin: 14px 0 0; color: var(--lf-ink); }
.has-light-text .lf-empty, .has-light-text .lf-empty p { color: #fff; }

/* ----------------------------------------------------------------------------
   9 · BUTTONS — candy pills with gloss + squish
   -------------------------------------------------------------------------- */
.gh-btn, .gh-primary-btn, .gh-head-btn, .gh-button-share, .lf-btn {
    border-radius: 999px !important; font-weight: 800 !important;
    transition: transform .18s var(--lf-spring), box-shadow .25s var(--lf-out), filter .2s ease !important;
}
.gh-primary-btn, .gh-head-btn, .lf-btn {
    position: relative; overflow: hidden; border: none !important; color: #fff !important;
    /* accent hue kept, darkened toward navy + ending in grape so white labels clear AA */
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--ghost-accent-color, var(--lf-magenta)) 60%, #2a0e52), var(--lf-grape)) !important;
    box-shadow: 0 8px 0 rgba(123, 47, 255, .28), 0 14px 26px rgba(255, 79, 216, .28) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.gh-primary-btn::after, .gh-head-btn::after, .lf-btn::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(rgba(255, 255, 255, .35), transparent);
    border-radius: 999px 999px 0 0; pointer-events: none;
}
.gh-primary-btn:hover, .gh-head-btn:hover, .lf-btn:hover {
    transform: translateY(-3px) rotate(-1deg) scale(1.03);
    filter: saturate(1.15);
    box-shadow: 0 11px 0 rgba(123, 47, 255, .3), 0 20px 34px rgba(255, 79, 216, .34) !important;
}
.gh-primary-btn:active, .gh-head-btn:active, .lf-btn:active {
    transform: translateY(2px) scale(.95);
    box-shadow: 0 3px 0 rgba(123, 47, 255, .3) !important;
}

/* the hero subscribe row -> animated rainbow border + gloss + focus lift */
.gh-subscribe-input {
    position: relative; border: 3px solid transparent !important; border-radius: 999px !important;
    background: linear-gradient(#fff, #fff) padding-box, var(--lf-rainbow) border-box;
    background-size: auto, 220% 100%;
    box-shadow: 6px 6px 0 rgba(37, 224, 255, .22);
    transition: transform .25s var(--lf-spring), box-shadow .25s var(--lf-out);
}
.gh-subscribe-input:focus-within {
    transform: translateY(-2px);
    box-shadow: 8px 8px 0 rgba(160, 75, 255, .3);
    animation: lf-flow 6s linear infinite;
}

/* ----------------------------------------------------------------------------
   10 · CONTENT — links, blockquotes, lists, images, drop cap
   -------------------------------------------------------------------------- */
.gh-content a {
    color: var(--lf-ink);  /* readable link text (accent stays as the underline) */
    background-image: linear-gradient(var(--ghost-accent-color, var(--lf-magenta)), var(--ghost-accent-color, var(--lf-magenta)));
    background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat;
    text-decoration: none; transition: background-size .25s var(--lf-out), color .2s ease;
}
.has-light-text .gh-content a { color: #fff; }
.gh-content a:hover { background-size: 100% 100%; background-image: var(--lf-rainbow-soft); color: var(--lf-ink); border-radius: 4px; }

.gh-content blockquote {
    position: relative; border: none; padding: 16px 22px 16px 28px; margin-inline: 0;
    background: rgba(255, 79, 216, .07); border-radius: 0 18px 18px 0;
}
.gh-content blockquote::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    border-radius: 999px; background: var(--lf-rainbow);
}

.gh-content ul li::marker { content: "✦ "; color: var(--lf-pink); }
.gh-content ol li::marker { color: var(--lf-purple); font-weight: 800; }

.gh-article-image { border-radius: var(--lf-radius); overflow: hidden; box-shadow: 0 18px 40px rgba(123, 47, 255, .18); }
.gh-article-image img { width: 100%; display: block; }
.gh-content img { border-radius: var(--lf-radius-sm); }
.gh-content figure { border-radius: var(--lf-radius-sm); }

/* drop cap on the first paragraph of a post (best-effort: only if first child is a <p>) */
.gh-content > p:first-of-type::first-letter {
    float: left; font-family: var(--lf-display); font-weight: 700;
    font-size: 3.4em; line-height: .72; padding: .06em .12em 0 0;
    color: var(--lf-grape);  /* solid (5.7:1) — rainbow-clip left too many letters illegible */
}
.has-light-text .gh-content > p:first-of-type::first-letter { color: var(--lf-pink); }

/* ----------------------------------------------------------------------------
   11 · POST / PAGE — title, meta pills, prev-next, share, comments, CTA
   -------------------------------------------------------------------------- */
.gh-article-excerpt { color: var(--lf-ink-soft); font-weight: 600; }

/* article meta: name + date as on-brand bits (readable on light AND dark bg) */
.gh-author-name-list a { font-weight: 800; color: var(--lf-ink); text-decoration: none; }
.has-light-text .gh-author-name-list a { color: rgba(255, 255, 255, .92); }
.gh-article-date { font-weight: 700; color: var(--lf-ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.gh-article-date::before { content: "✦"; color: var(--lf-yellow); }
.has-light-text .gh-article-date { color: rgba(255, 255, 255, .78); }

.gh-article-tag, .gh-article-tag:visited {
    border-radius: 999px; padding: 5px 15px; font-weight: 800; color: #fff !important;
    background: var(--tag-color, var(--ghost-accent-color, var(--lf-magenta)));
    box-shadow: 0 4px 0 rgba(0, 0, 0, .1); text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    transition: transform .2s var(--lf-spring);
}
.gh-article-tag:hover { transform: translateY(-2px) rotate(-2deg) scale(1.04); }

.gh-navigation-link {
    border-radius: 999px; padding: 9px 18px; font-weight: 800;
    background: rgba(160, 75, 255, .1); transition: transform .2s var(--lf-spring), background .2s ease;
}
.gh-navigation-link:hover { transform: translateY(-2px) scale(1.04); background: rgba(255, 79, 216, .16); }

/* comments heading -> solid readable (don't touch the {{comments}} third-party widget) */
.gh-comments-title { font-weight: 800; color: var(--lf-ink); }
.has-light-text .gh-comments-title { color: #fff; }

/* membership / paid gate -> holographic sticker panel */
.gh-cta {
    position: relative; border-radius: var(--lf-radius); padding: 30px 26px; text-align: center;
    border: 3px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--lf-rainbow) border-box;
    box-shadow: 8px 8px 0 rgba(160, 75, 255, .18), 0 16px 36px rgba(123, 47, 255, .14);
}
.has-light-text .gh-cta {
    background: linear-gradient(rgba(22, 10, 46, .7), rgba(22, 10, 46, .7)) padding-box, var(--lf-rainbow) border-box;
}
.gh-cta-title { font-family: var(--gh-font-heading, var(--lf-display)); font-weight: 800; font-size: 1.35rem; margin-bottom: 16px; }
.gh-cta-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.gh-cta-link { color: var(--lf-ink-soft); cursor: pointer; }
.has-light-text .gh-cta-title { color: #fff; }
.has-light-text .gh-cta-link { color: rgba(255, 255, 255, .85); }

/* ----------------------------------------------------------------------------
   12 · TAG / AUTHOR / POST / PAGE TITLES — animated rainbow (matches the hero)
   -------------------------------------------------------------------------- */
.post-template .gh-article-title, .page-template .gh-article-title,
.tag-template .gh-article-title, .author-template .gh-article-title {
    color: var(--lf-ink); -webkit-text-fill-color: var(--lf-ink); background: none;
    display: inline-block; position: relative; padding-bottom: .16em;
    animation: lf-pop .8s var(--lf-spring) both;
}
/* rainbow lives on a non-text underline bar (no contrast obligation) */
.post-template .gh-article-title::after, .page-template .gh-article-title::after,
.tag-template .gh-article-title::after, .author-template .gh-article-title::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
    border-radius: 999px; background: var(--lf-rainbow); background-size: 220% 100%;
    animation: lf-flow 7s linear infinite;
}
.has-light-text .post-template .gh-article-title, .has-light-text .page-template .gh-article-title,
.has-light-text .tag-template .gh-article-title, .has-light-text .author-template .gh-article-title {
    color: #fff; -webkit-text-fill-color: #fff;
}

/* author header avatar ring (works whether the class is on <img> or its <a> wrapper) */
.gh-author-image { border-radius: 50%; }
img.gh-author-image,
.gh-author-image-list .gh-author-image img,
.gh-author-image-list .gh-author-icon {
    border-radius: 50%; border: 3px solid var(--lf-pink); box-shadow: 0 6px 14px rgba(255, 79, 216, .32);
}
/* author social row -> candy hover */
.gh-author-social-link {
    border-radius: 999px; transition: transform .2s var(--lf-spring), color .2s ease;
}
.gh-author-social-link:hover {
    transform: translateY(-3px) rotate(-4deg) scale(1.12);
    color: var(--ghost-accent-color, var(--lf-magenta));
}

/* ----------------------------------------------------------------------------
   13 · FOOTER — rainbow wave crown (static; no per-frame repaint)
   -------------------------------------------------------------------------- */
/* footer sits in a blue-sky-with-clouds scene; the grass garden is at the very bottom */
.lf-footer-scene {
    position: relative; margin-top: 60px; overflow: hidden;
    background: linear-gradient(180deg, #7fcdff 0%, #aee3ff 46%, #d9f4ff 100%);
}
.lf-foot-clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lf-cloud {
    position: absolute; color: #fff; opacity: .95;
    filter: drop-shadow(0 6px 10px rgba(70, 130, 190, .25));
    animation: lf-drift var(--d, 40s) linear infinite;
}
.lf-cloud--1 { width: 92px;  height: 92px;  top: 14%; left: -16%; --d: 46s; }
.lf-cloud--2 { width: 58px;  height: 58px;  top: 36%; left: -16%; --d: 62s; animation-delay: -24s; }
.lf-cloud--3 { width: 122px; height: 122px; top: 4%;  left: -18%; --d: 54s; animation-delay: -36s; }

.gh-foot { position: relative; z-index: 1; margin-top: 0; padding-top: 50px; background: transparent; }
.gh-foot::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 22px;
    background: var(--lf-rainbow);
    -webkit-mask: radial-gradient(14px 18px at 14px bottom, transparent 96%, #000) repeat-x 0 0 / 28px 22px;
    mask: radial-gradient(14px 18px at 14px bottom, transparent 96%, #000) repeat-x 0 0 / 28px 22px;
}
.lf-foot-logo { display: block; text-align: center; margin: 0 auto 16px; }
.lf-foot-logo img { height: 60px; width: auto; display: inline-block; filter: drop-shadow(0 6px 12px rgba(60, 120, 180, .35)); }
.gh-copyright { font-weight: 600; color: var(--lf-ink); }       /* dark text on the light sky */
.gh-copyright a { color: var(--lf-grape); }
.gh-copyright::after { content: " ⋆˚｡⋆"; color: var(--lf-grape); }
.gh-foot-menu a { color: var(--lf-ink); transition: transform .2s var(--lf-spring), color .2s ease; }
.gh-foot-menu a:hover { transform: translateY(-2px) rotate(-2deg); color: var(--ghost-accent-color, var(--lf-magenta)); }

/* PROPER FOOTER: force at least a viewport of content so the footer + garden are
   always pushed below the fold (Solo already flex-column + min-height:100vh on .gh-site;
   this guarantees the spacing even when a page is short). */
.gh-main { min-height: 100vh; }

/* SVG + EMOJI GARDEN at the very bottom (rolling SVG grass + planted emoji/flowers) */
.lf-garden { position: relative; z-index: 1; width: 100%; height: 156px; overflow: hidden; }
.lf-garden-grass {
    position: absolute; left: 0; bottom: 0; width: 100%; height: 116px; display: block;
    filter: drop-shadow(0 -4px 12px rgba(123, 47, 255, .12));
}
.lf-garden-row {
    position: absolute; left: 0; right: 0; bottom: 46px;
    display: flex; justify-content: space-evenly; align-items: flex-end;
    padding: 0 4%; pointer-events: none;
}
.lf-garden-row > span { font-size: clamp(24px, 4.4vw, 42px); line-height: 1; }
.lf-garden-svg { width: clamp(30px, 5vw, 46px); height: clamp(30px, 5vw, 46px); }
.lf-garden-row > * {
    transform-origin: bottom center;
    animation: lf-plant 5s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(95, 60, 30, .16));
}
.lf-garden-row > :nth-child(2n) { animation-duration: 6.3s; animation-delay: -1.6s; }
.lf-garden-row > :nth-child(3n) { animation-duration: 4.6s; animation-delay: -3.1s; }
.lf-garden-row > :nth-child(5n) { animation-delay: -2.2s; }
@media (max-width: 700px) {
    .lf-garden { height: 120px; }
    .lf-garden-grass { height: 88px; }
    .lf-garden-row { bottom: 36px; }
    .lf-garden-row > :nth-child(2n) { display: none; }
}

/* ----------------------------------------------------------------------------
   14 · BACK-TO-TOP rocket (out of tab order while hidden; shimmer only when shown)
   -------------------------------------------------------------------------- */
.lf-totop {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    width: 54px; height: 54px; border: none; cursor: pointer; border-radius: 50%;
    background: var(--lf-rainbow); background-size: 200% 100%;
    box-shadow: 0 10px 24px rgba(123, 47, 255, .4); color: #fff;
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; transform: translateY(24px) scale(.6); pointer-events: none;
    transition: opacity .35s var(--lf-out), transform .45s var(--lf-spring), visibility 0s linear .4s;
}
.lf-totop.is-shown {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
    transition: opacity .35s var(--lf-out), transform .45s var(--lf-spring), visibility 0s;
    animation: lf-flow 5s linear infinite;
}
.lf-totop:hover { transform: translateY(-4px) scale(1.1) rotate(-6deg); }
.lf-totop svg { width: 26px; height: 26px; }

/* ----------------------------------------------------------------------------
   15 · FX LAYER — cursor sparkles + click confetti (JS-driven via WAAPI)
   -------------------------------------------------------------------------- */
.lf-fx { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.lf-spark { position: fixed; line-height: 1; pointer-events: none; user-select: none; will-change: transform, opacity; }

/* ----------------------------------------------------------------------------
   16 · DARK BACKGROUND SUPPORT (.has-light-text = she chose a dark bg)
   cards stay white w/ dark ink (readable); chrome text goes light
   -------------------------------------------------------------------------- */
.has-light-text .gh-about-secondary { color: rgba(255, 255, 255, .85); }
.has-light-text .gh-head-menu .nav a,
.has-light-text .gh-head-link { color: rgba(255, 255, 255, .92); }
/* NOTE: footer text is NOT inverted here — the footer is always the light blue-sky
   scene, so .gh-copyright / .gh-foot-menu stay dark (--lf-ink) regardless of bg. */
.has-light-text .gh-content blockquote { background: rgba(255, 255, 255, .08); }
/* cards explicitly keep their light treatment regardless of bg */
.has-light-text .lf-card { background: #fff; }
.has-light-text .lf-card-title { color: var(--lf-ink); }

/* ----------------------------------------------------------------------------
   16b · ERROR / 404 — a lost-in-the-stratosphere moment
   -------------------------------------------------------------------------- */
.lf-error { text-align: center; padding: 70px 24px 90px; }
.lf-error-motif { display: flex; gap: 18px; justify-content: center; margin-bottom: 14px; font-size: 80px; line-height: 1; }
.lf-error-motif span { filter: drop-shadow(0 8px 14px rgba(123, 47, 255, .3)); animation: lf-bob 7s ease-in-out infinite; }
.lf-error-motif span:nth-child(2) { font-size: 56px; animation-delay: -2.5s; }
.lf-error-code {
    font-family: var(--lf-display); font-weight: 700; margin: 0; line-height: 1;
    font-size: clamp(4rem, 2rem + 14vw, 9rem);
    background: var(--lf-rainbow); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: lf-flow 7s linear infinite;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 0 12px 24px rgba(123, 47, 255, .3);
}
.lf-error-msg { font-family: var(--lf-display); font-weight: 700; font-size: 1.4rem; color: var(--lf-ink); margin: 8px 0 4px; }
.lf-error-sub { color: var(--lf-ink-soft); margin: 0 0 26px; }
.lf-error .gh-btn { display: inline-block; padding: 12px 28px; }
.has-light-text .lf-error-msg { color: #fff; }
.has-light-text .lf-error-sub { color: rgba(255, 255, 255, .8); }

/* ----------------------------------------------------------------------------
   16c · A11Y CHROME — skip link + motion-pause control (2.4.1, 2.2.2)
   -------------------------------------------------------------------------- */
.lf-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lf-skip:focus {
    position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip-path: none; z-index: 10000;
    padding: 10px 18px; background: #fff; color: var(--lf-ink); font-weight: 800;
    border-radius: 999px; box-shadow: 0 0 0 3px var(--lf-grape), 0 10px 24px rgba(0, 0, 0, .25);
}

/* in-page control to stop all looping motion (satisfies 2.2.2 for users who have
   NOT set OS reduced-motion). JS toggles .lf-motion-paused + persists the choice. */
.lf-motion-toggle {
    position: fixed; left: 22px; bottom: 22px; z-index: 900;
    width: 44px; height: 44px; border: none; cursor: pointer; border-radius: 50%;
    background: #fff; color: var(--lf-ink); box-shadow: 0 6px 16px rgba(123, 47, 255, .3);
    display: grid; place-items: center; font-size: 17px; line-height: 1;
    transition: transform .2s var(--lf-spring);
}
.lf-motion-toggle:hover { transform: scale(1.1) rotate(-6deg); }
.lf-motion-paused *, .lf-motion-paused *::before, .lf-motion-paused *::after {
    animation-play-state: paused !important;
}
@media (max-width: 640px) { .lf-motion-toggle { left: 14px; bottom: 14px; width: 40px; height: 40px; } }

/* ----------------------------------------------------------------------------
   17 · KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes lf-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(2%, -2%, 0) scale(1.08) rotate(2deg); }
    100% { transform: translate3d(-2%, 1%, 0) scale(1.04) rotate(-2deg); }
}
@keyframes lf-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
@keyframes lf-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes lf-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-14px) rotate(4deg); }
}
@keyframes lf-spin { to { transform: rotate(360deg); } }
@keyframes lf-pop {
    0%   { opacity: 0; transform: translateY(16px) scale(.94); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lf-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lf-plant { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes lf-sway {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(1.5px, -4px) rotate(-1.8deg); }
    50%      { transform: translate(0, -5px) rotate(0deg); }
    75%      { transform: translate(-1.5px, -4px) rotate(1.8deg); }
}
@keyframes lf-sweep {
    0%   { transform: skewX(-18deg) translateX(0);    opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: skewX(-18deg) translateX(430%); opacity: 0; }
}
@keyframes lf-drift { from { transform: translateX(0); } to { transform: translateX(125vw); } }

/* ----------------------------------------------------------------------------
   18 · RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .lf-feed, .gh-feed { grid-template-columns: 1fr; gap: 26px; }
    .lf-card { --rot: 0deg !important; }
    .lf-footer-scene { margin-top: 40px; }
    .lf-totop { right: 14px; bottom: 14px; width: 48px; height: 48px; }
    .lf-foot-logo img { height: 50px; }
}

/* ----------------------------------------------------------------------------
   19 · REDUCED MOTION — kill all motion, keep the static rainbow world
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    body::before, .lf-emoji, .lf-hero-sticker, .lf-card-noimg svg,
    .gh-about-content-inner::before { animation: none; }
    /* reveal is never hidden under reduced motion (lf-fx-ready isn't added), but
       reset the custom props defensively so cards are always visible */
    .lf-reveal { opacity: 1; --rev: 0px; --scl: 1; }
    .lf-fx { display: none; }
}