/* ============================================================================================
   Potter Service · "Friendly + Magical" theme (rebuild, Nov 2026)
   Loads AFTER style.css: keeps every layout, swaps the dark night look for a light, warm, trustworthy one
   with unicorn magic in the colors (pink · violet · gold · sky) and soft sparkles.
   ============================================================================================ */
:root {
  --text: #2b2140; --muted: #6b6380; --line: rgba(80, 52, 140, .14);
  --pink: #e2459b; --violet: #7a4cff; --gold: #f2b33d; --sky: #2fa8e0; --mint: #1fb58f;
  --paper: #fffaf6; --card: #ffffff; --soft: #f7f1ff;
  --grad: linear-gradient(120deg, #e2459b, #a24cff 55%, #2fa8e0);
  --shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px -22px rgba(76, 40, 150, .35);
}
html { scroll-behavior: smooth; }
body {
  color: var(--text); font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 520px at 8% -4%, rgba(226, 69, 155, .10), transparent 60%),
    radial-gradient(900px 600px at 96% 6%, rgba(122, 76, 255, .10), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(47, 168, 224, .08), transparent 60%),
    var(--paper);
}
h1, h2, .section-head h2, .page-hero h1 { color: #241a3a; }
h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.02em; }
.page-hero h1, .hero-copy h1 { letter-spacing: -.03em; line-height: 1.02; }
a { color: var(--violet); }
.gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.eyebrow { color: var(--pink); letter-spacing: .16em; }
.lead, .section-copy { color: var(--muted); }
p { color: var(--muted); }

/* top banner + header */
.announcement { background: linear-gradient(90deg, #ffe3f1, #efe6ff, #def3ff); color: #4a2c6e; border-bottom: 1px solid var(--line); font-weight: 700; }
.announcement a { color: var(--pink); font-weight: 800; }
.site-header { background: rgba(255, 250, 246, .86); border-bottom: 1px solid var(--line); box-shadow: 0 8px 28px -24px rgba(76,40,150,.5); }
.brand, .brand strong { color: #241a3a; }
.brand small { color: var(--muted); }
.brand-mark { background: linear-gradient(145deg, #ffe0f0, #ece2ff); border: 1px solid var(--line); box-shadow: 0 6px 16px -8px rgba(226,69,155,.6); }
.nav a { color: #4c4363; }
.nav a:hover, .nav a.active { color: #241a3a; background: #f3ecff; }
.nav a.active { box-shadow: inset 0 -2px var(--pink); }
.nav .nav-call { background: var(--grad); color: #fff !important; box-shadow: 0 8px 20px -10px rgba(162,76,255,.8); margin-left: 6px; }
.menu-btn { background: #fff; border: 1px solid var(--line); color: #241a3a; }
.mobile-nav.open { background: #fffdfb; border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(76,40,150,.45); }
.mobile-nav a { color: #3a3150; } .mobile-nav a:hover, .mobile-nav a.active { background: #f3ecff; color: #241a3a; }

/* buttons, badges, chips */
.btn { border: 1px solid var(--line); color: #2b2140; background: #fff; box-shadow: 0 6px 16px -12px rgba(76,40,150,.5); }
.btn:hover { border-color: rgba(122,76,255,.45); }
.btn-primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 14px 30px -14px rgba(162, 76, 255, .9); }
.btn-secondary { background: #fff; }
.badge, .chip, .status-pill, .mini-projects span { background: #f6efff; border: 1px solid var(--line); color: #5a3d99; }
.feature-card .badge { background: #fff2d6; color: #8a5a00; border-color: #f6d690; }

/* every card-like block: white, rounded, soft shadow */
.card, .notice, .empty-state, .contact-progress, .name-story, .heart-card, .history-card, .project-feature, .ad-showcase article, .sponsor-card,
.quick-card, .feature-card, .service-card, .visual-project-card, .story-chapter, .heart-realm, .recovery-chapter, .recovery-note, .status-item,
.status-board, .project-card, .magic-value, .sponsor-path, .project-hub-world, .safety-callout, .ride-feature, .history-content, .history-future,
.recovery-story, .recovery-banner-inner, .status-summary > *, .legal, .value-icon + * {
  background: var(--card) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow); color: var(--text);
}
.story-chapter.featured, .heart-realm { background: radial-gradient(circle at 95% 0%, rgba(226,69,155,.08), transparent 40%), #fff !important; }
.story-chapter:after { background: radial-gradient(circle, rgba(162,76,255,.10), transparent 68%); }
.heart-realm p, .story-chapter p, .card p, .project-feature p { color: var(--muted); }
.notice { background: linear-gradient(90deg, #fff0f7, #f4efff) !important; color: #4a2c6e; }
.quick-icon, .feature-icon, .icon, .value-icon, .path-icon, .chapter-icon, .future-icon, .recovery-icon, .recovery-note-icon {
  background: linear-gradient(145deg, #ffe6f3, #efe7ff) !important; border: 1px solid var(--line); color: #2b2140; }
.service-visual { background: radial-gradient(circle at 50% 40%, rgba(226,69,155,.12), transparent 60%), linear-gradient(160deg, #fff5fb, #f1ebff) !important; }
.project-art { background: radial-gradient(circle at 40% 30%, #fff, #ffe4f2 40%, #e9e0ff) !important; border: 1px solid var(--line); }
.visual-project-image, .project-thumb, .world-image { background: #f4eeff; }

/* heroes: light with a gentle glow */
.hero-cinematic, .magical-hero, .status-hero, .recovery-hero, .advert-hero, .sponsor-sky, .story-realm {
  background: radial-gradient(700px 420px at 85% 10%, rgba(162,76,255,.13), transparent 60%), radial-gradient(600px 380px at 10% 90%, rgba(226,69,155,.11), transparent 60%) !important;
  color: var(--text);
}
.hero-cinematic:before, .hero-cinematic:after, .magical-hero:before, .magical-hero:after { opacity: .25 !important; }
.hero-note { background: #fff !important; border: 1px solid var(--line) !important; color: var(--text); box-shadow: var(--shadow); }
.page-hero:after { background: radial-gradient(circle, rgba(162,76,255,.10), transparent 68%); }

/* history timeline + constellation keep their shapes, lighter colors */
.history-stage:before { box-shadow: none; opacity: .7; }
.history-orb { box-shadow: 0 10px 24px -10px rgba(162,76,255,.7); }
.history-label { color: var(--pink); }
.star-node { background: radial-gradient(circle at 35% 30%, #fff, #f2e8ff 60%) !important; border: 1px solid var(--line) !important; box-shadow: 0 12px 26px -14px rgba(122,76,255,.6); }

/* status page bits */
.status-orb, .legend-dot { box-shadow: none; }
.finished { color: var(--mint); } .progress { color: var(--gold); } .pending { color: var(--muted); }

/* footer */
.footer { background: linear-gradient(180deg, #fff, #f8f2ff); border-top: 1px solid var(--line); color: var(--text); }
.footer h3, .footer-logo { color: #241a3a; }
.footer a { color: #4c4363; } .footer a:hover { color: var(--pink); }
.footer small, .footer p { color: var(--muted); }
.copyright { color: var(--muted); border-top: 1px solid var(--line); }
.footer-contact a { display: flex; align-items: center; gap: 8px; }
.footer-contact .big { font-weight: 800; color: #241a3a; font-size: 15px; }

/* ===== new pieces: contact cards, updates, contact strip ===== */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s; }
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(122,76,255,.55); }
.contact-card .ci { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(145deg, #ffe6f3, #efe7ff); }
.contact-card h3 { margin: 4px 0 0; font-size: 19px; } .contact-card p { margin: 0; font-size: 14.5px; }
.contact-card b { font-size: 17px; color: #241a3a; }
.contact-card.fb .ci { background: #e7f0ff; } .contact-card.fb b { color: #1b5fd6; }
.contact-strip { max-width: 1380px; width: calc(100% - 48px); margin: 0 auto 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 22px 26px; border-radius: 24px; background: linear-gradient(120deg, #fff0f7, #f2ecff 60%, #e9f6ff); border: 1px solid var(--line); }
.contact-strip strong { font-family: Fraunces, Georgia, serif; font-size: 22px; color: #241a3a; margin-right: auto; }
.updates-list { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.update { padding: 26px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.update .when { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.update h2 { margin: 8px 0 8px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.update-banner { max-width: 1380px; width: calc(100% - 48px); margin: 10px auto 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.update-banner .ub-i { font-size: 26px; } .update-banner p { margin: 0; flex: 1; min-width: 240px; color: var(--text); }
.sparkle-sep { text-align: center; color: #c9a5ff; letter-spacing: .6em; margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* fixes after the first preview */
.hero-cinematic { background: url("potter-service-banner.png") center/cover no-repeat !important; }
.hero-cinematic:before { opacity: 1 !important; background: linear-gradient(90deg, rgba(255,250,246,0) 0, rgba(255,250,246,.05) 40%, rgba(255,250,246,.72) 66%, rgba(255,250,246,.92) 100%), linear-gradient(180deg, transparent 70%, var(--paper) 100%) !important; }
@media (max-width: 900px) { .hero-cinematic:before { background: linear-gradient(180deg, rgba(255,250,246,0) 0, rgba(255,250,246,.1) 36%, rgba(255,250,246,.9) 70%, var(--paper) 100%) !important; } }
.hero-copy { background: rgba(255,255,255,.86) !important; border: 1px solid var(--line) !important; box-shadow: 0 30px 70px -30px rgba(76,40,150,.45); }
.hero-copy h1 { color: #241a3a; }
.hero-note { border-top: 1px solid var(--line) !important; background: transparent !important; box-shadow: none !important; color: var(--muted) !important; }
.quick-icon, .feature-icon { width: 58px; height: 58px; display: grid !important; place-items: center; border-radius: 18px; font-size: 28px !important; }
.icon, .value-icon, .path-icon, .chapter-icon, .future-icon, .recovery-icon, .recovery-note-icon { border-radius: 16px; }

/* ---- fixes round 2 (Bow: photos missing, words blending in) ---- */
/* the van photo on Services, the banner on About + History: bring the pictures back with a light fade */
.ride-feature { background: url("van-background.png") center/cover no-repeat !important; border: 1px solid var(--line) !important; }
.ride-feature:before { background: linear-gradient(90deg, rgba(255,250,246,.97) 0, rgba(255,250,246,.9) 32%, rgba(255,250,246,.45) 52%, transparent 76%) !important; }
@media (max-width: 760px) { .ride-feature:before { background: linear-gradient(180deg, rgba(255,250,246,.97) 0, rgba(255,250,246,.88) 60%, rgba(255,250,246,.3)) !important; } }
.magical-hero { background: linear-gradient(90deg, rgba(255,250,246,.96) 0%, rgba(255,250,246,.82) 46%, rgba(255,250,246,.1) 100%), url("potter-service-banner.png") center/cover no-repeat !important; border-bottom: 1px solid var(--line) !important; }
.magical-hero:before { background: radial-gradient(circle at 70% 25%, rgba(226,69,155,.12), transparent 25%), linear-gradient(180deg, transparent 70%, var(--paper) 100%) !important; }
.magical-hero:after { color: rgba(162,76,255,.55); text-shadow: none; }
@media (max-width: 760px) { .magical-hero { background: linear-gradient(180deg, rgba(255,250,246,.55) 0%, rgba(255,250,246,.95) 55%), url("potter-service-banner.png") 38% center/cover no-repeat !important; } }
/* the old dark picture boxes (inline styles) */
[style*="#4c2273"], [style*="#090917"] { background: radial-gradient(circle at 50% 40%, #fff, #f3e9ff 60%, #e6dcff) !important; }
/* every piece of text that was light-on-dark: dark again */
.ride-copy, .ride-copy p, .ride-copy h2, .ride-copy li, .heart-realm p, .notice, .safety-callout p, .recovery-point, .recovery-banner p, .recovery-date,
.recovery-signature, .bow-signature, .project-credit, .status-meta span, .story-kicker, .timeline-year, .hero-rune, .sponsor-empty, .portal-card .portal-link,
.magical-hero-copy, .magical-hero-copy p, .magical-hero h1, .recovery-status-pill, .status-pill.pending { color: var(--text) !important; }
.ride-copy p, .heart-realm p, .safety-callout p, .recovery-point, .project-credit, .status-meta span, .magical-hero-copy p { color: var(--muted) !important; }
.project-kicker, .story-kicker, .history-label, .recovery-date, .timeline-year { color: var(--pink) !important; }
.quick-card a, .portal-card .portal-link { color: var(--violet) !important; }
.sponsor-empty:before, .recovery-banner:before { opacity: .35; }
/* any leftover dark gradient boxes inside cards */
.visual-project-body, .service-body, .world-copy, .status-main, .history-content { color: var(--text); }
.visual-project-topline, .project-domain { color: var(--muted); }

/* emoji art tiles for projects without a picture yet */
.emoji-art { display: grid !important; place-items: center; min-height: 190px; background: radial-gradient(circle at 30% 25%, #fff, transparent 45%), linear-gradient(135deg, var(--a, #ffe3f1), var(--b, #e9ddff)) !important; }
.emoji-art span { font-size: 78px; filter: drop-shadow(0 10px 18px rgba(122,76,255,.25)); }

/* round 3 (Nov 3): last bits of text blending into the background */
.hero-rune { background: rgba(255,255,255,.88) !important; color: #2b2140 !important; border: 1px solid var(--line, #eadff5) !important; box-shadow: 0 6px 18px rgba(122,76,255,.12); }
.status-pill { color: #2b2140 !important; background: #f3ecff !important; border-color: #e2d4fb !important; }
.status-pill.finished { color: #11643f !important; background: #dcf7ea !important; border-color: #a8e8c8 !important; }
.status-pill.rebuilding, .status-pill.progress { color: #7a3d00 !important; background: #ffefd6 !important; border-color: #ffd49a !important; }
.status-pill.needs, .status-pill.waiting { color: #8a1c4f !important; background: #ffe3ef !important; border-color: #ffbcd6 !important; }
.status-card p, .status-legend p, .project-status p, .updates p, main p { color: #4a3f5e; }

/* round 4 (Nov 3): Updates page dark boxes → light */
.recovery-signoff, .status-intro {
  background: radial-gradient(circle at 50% 0%, rgba(255,111,181,.14), transparent 50%), linear-gradient(135deg, #fff 0%, #f6efff 55%, #ffeef6 100%) !important;
  border: 1px solid var(--line, #eadff5) !important; box-shadow: 0 18px 40px rgba(122,76,255,.12) !important; color: #2b2140 !important;
}
.recovery-signoff:before, .recovery-signoff:after, .status-intro:before, .status-intro:after { opacity: .25 !important; }
.recovery-signoff h1, .recovery-signoff h2, .recovery-signoff h3, .recovery-signoff strong,
.status-intro h1, .status-intro h2, .status-intro h3, .status-intro strong { color: #2b2140 !important; -webkit-text-fill-color: #2b2140 !important; background: none !important; text-shadow: none !important; }
.recovery-signoff p, .recovery-signoff span, .recovery-signoff div, .status-intro p, .status-intro div { color: #4a3f5e !important; }
.recovery-signoff .eyebrow, .recovery-signoff [class*="kicker"], .status-intro .eyebrow, .status-intro [class*="kicker"] { color: #d63f8f !important; }
/* status cards + legend + note: grey text a bit darker */
[class*="status-card"] p, [class*="status-legend"] p, [class*="status-item"] p, .rebuild-note p, [class*="note-from"] p { color: #4a3f5e !important; }

/* Services page pictures (Nov 5) */
.service-visual.has-art { height: auto; aspect-ratio: 16 / 9; padding: 0; background: none !important; overflow: hidden; }
.service-visual.has-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.service-card:hover .service-visual.has-art img { transform: scale(1.03); }
.project-art.has-art { padding: 0; overflow: hidden; background: none !important; font-size: 0; }
.project-art.has-art img { display: block; width: 100%; height: 100%; object-fit: cover; }