/* ============================================================
   TwelveStar Web Template - Custom CSS (Bootstrap 5 + Custom)
   ============================================================ */

/* ============================================================
   CSS Variables / Design Tokens
   ============================================================ */
:root {
    --color-primary:       #1E3A8A;  /* blue-900  */
    --color-primary-hover: #1e40af;  /* blue-800  */
    --color-accent:        #D97706;  /* amber-600 */
    --color-accent-light:  #F59E0B;  /* amber-500 */
    --color-dark:          #0F172A;  /* slate-900 */
    --color-slate-950:     #020617;
    --color-slate-600:     #475569;
    --color-slate-400:     #94A3B8;
    --color-slate-100:     #F1F5F9;
    --color-slate-50:      #F8FAFC;
    --color-success:       #10B981;  /* emerald-500 */

    --font-serif:   'Playfair Display', Georgia, serif;
    --font-sans:    'Inter', system-ui, sans-serif;

    --topbar-height: 38px;
    --header-height: 81px;
}

/* ============================================================
   Base
   ============================================================ */
html {
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-slate-50);
    color: var(--color-slate-600);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

main { flex: 1; }

.serif { font-family: var(--font-serif); }

::selection {
    background-color: #fef3c7;
    color: #92400e;
}

/* ============================================================
   TopBar
   ============================================================ */
.topbar {
    background-color: #0F172A;
    color: #CBD5E1;
    font-size: 0.75rem;
    border-bottom: 1px solid #1e293b;
    padding: 0.5rem 0;
    position: relative;
    z-index: 1031;
}

.topbar a {
    color: #CBD5E1;
    text-decoration: none;
    transition: color 0.2s;
}

.topbar a .bi {
    font-size: 0.875rem;
    vertical-align: middle;
    line-height: 1;
}

.topbar a:hover { color: var(--color-accent-light); }

.topbar .topbar-tagline {
    font-style: italic;
    opacity: 0.8;
}

/* Language picker dropdown in topbar */
.lang-picker-toggle {
    color: #CBD5E1;
    font-size: 0.75rem;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    box-shadow: none !important;
}

.lang-picker-toggle:hover,
.lang-picker-toggle:focus { color: var(--color-accent-light); }

.lang-picker-toggle .fi {
    width: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

.lang-picker-toggle::after {
    margin-left: 0.2rem;
}

.lang-picker-menu {
    background-color: #0F172A;
    border: 1px solid #1e293b;
    border-radius: 0.5rem;
    padding: 0.375rem 0;
    min-width: 10rem;
    box-shadow: 0 16px 32px rgba(0,0,0,0.4);
    z-index: 1035;
}

.lang-picker-form { margin: 0; }

.lang-picker-item {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: #94A3B8;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s, background-color 0.15s;
    cursor: pointer;
}

.lang-picker-item:hover {
    background-color: #1e293b;
    color: #fff;
}

.lang-picker-item.active {
    color: var(--color-accent-light);
    font-weight: 600;
}

.lang-picker-item .fi {
    width: 1.1em;
    flex-shrink: 0;
}

/* ============================================================
   Header / Navbar
   ============================================================ */
.site-header {
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-box {
    width: 48px;
    height: 48px;
    background-color: var(--color-slate-50);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.logo-box img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.logo-box .logo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    font-family: var(--font-serif);
    font-style: italic;
}

.logo-text-primary {
    color: var(--color-primary);
    font-weight: 700;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -0.025em;
    display: block;
}

.logo-text-sub {
    color: var(--color-accent);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1;
    margin-top: 0.2rem;
    display: block;
}

/* ── Main header nav (.menu-main) ────────────────────────────────────────── */
/* Bootstrap's .navbar-expand-lg handles show/hide and flex-direction:row.    */
/* The <ul> in the template carries ms-auto align-items-lg-center directly.   */
.menu-main .nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
}

.menu-main .nav-link:hover,
.menu-main .nav-link.active {
    color: var(--color-primary);
    background-color: var(--color-slate-50);
}

/* Dropdown */
.menu-main .dropdown-menu {
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    padding: 0.75rem 0;
    min-width: 14rem;
}

.menu-main .dropdown-item {
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    padding: 0.625rem 1.25rem;
    transition: color 0.2s, background-color 0.2s;
}

.menu-main .dropdown-item:hover {
    background-color: #eff6ff;
    color: var(--color-primary);
}

/* Icon spacing within header nav */
.menu-main .nav-link .bi,
.menu-main .dropdown-item .bi {
    margin-inline-end: 0.3rem;
    vertical-align: -0.1em;
    font-size: 0.95em;
}

/* btn-join: plain <a> sibling of <ul>, outside nav-item/nav-link entirely.
   Matches the WebTemplate5 pattern: class="btn-join ms-lg-4 mt-3 mt-lg-0"  */
.btn-join {
    background-color: var(--color-primary);
    color: #fff !important;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.625rem 1.5rem;
    white-space: nowrap;
    box-shadow: 0 10px 15px -3px rgba(30,58,138,0.2);
    transition: background-color 0.2s;
    text-decoration: none;
}

.btn-join:hover {
    background-color: var(--color-primary-hover);
    color: #fff !important;
}

/* Mobile nav */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    color: #475569;
    border-radius: 0.5rem;
}

.navbar-toggler:focus { box-shadow: none; }

/* Border + spacing when mobile menu opens */
.menu-main.show,
.menu-main.collapsing {
    border-top: 1px solid #f1f5f9;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

/* ── Topbar text-link nav (.menu-top-bar-menu) ───────────────────────────── */
/* Container uses d-flex align-items-center gap-3 from JSON CssClass.         */
/* Items are plain <a> elements styled by .topbar a.                          */
.menu-top-bar-menu .bi {
    margin-inline-end: 0.25rem;
    vertical-align: middle;
}

/* ── Topbar social icon links (.menu-top-bar-social) ────────────────────── */
/* Container uses d-flex align-items-center gap-2 from JSON CssClass.         */
/* Visual separator from the text nav.                                        */
.menu-top-bar-social {
    border-left: 1px solid #334155;
    padding-left: 0.75rem;
}

/* Hide text labels; links are icon-only (title attr provides accessibility). */
.menu-top-bar-social .menu-link-text {
    display: none;
}

/* ============================================================
   Hero / Carousel
   ============================================================ */
.hero-carousel {
    height: 650px;
    background-color: #0F172A;
}

.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    height: 100%;
}

.hero-carousel .carousel-item img.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    position: absolute;
    inset: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #F59E0B;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin-bottom: 1.5rem;
}

.hero-eyebrow .eyebrow-line {
    width: 2.5rem;
    height: 2px;
    background-color: #F59E0B;
    display: inline-block;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 2rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #f1f5f9;
    margin-bottom: 3rem;
    line-height: 1.6;
    font-weight: 300;
    max-width: 30rem;
    opacity: 0.9;
}

.btn-hero-primary {
    background-color: var(--color-accent);
    color: #fff;
    font-weight: 700;
    padding: 1rem 3rem;
    border-radius: 0.375rem;
    text-decoration: none;
    box-shadow: 0 25px 50px -12px rgba(120,53,15,0.4);
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0.5rem;
}

.btn-hero-primary:hover {
    background-color: var(--color-accent-light);
    color: #fff;
}

.btn-hero-ghost {
    background-color: rgba(255,255,255,0.05);
    color: #fff;
    font-weight: 700;
    padding: 1rem 3rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(255,255,255,0.2);
    text-decoration: none;
    transition: background-color 0.2s;
    backdrop-filter: blur(4px);
    display: inline-block;
}

.btn-hero-ghost:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}

.hero-book-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-book-inner {
    position: relative;
    max-width: 280px;
    padding: 2px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(4px);
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8);
    animation: float 6s ease-in-out infinite;
}

.hero-book-inner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    min-height: 350px;
    object-fit: contain;
}

/* Carousel controls */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: auto;
    bottom: 2.5rem;
    top: auto;
    opacity: 1;
    z-index: 3; /* must exceed .hero-content z-index:2 so controls are clickable */
}

.hero-carousel .carousel-control-prev { right: 5rem; left: auto; }
.hero-carousel .carousel-control-next { right: 2.5rem; }

.carousel-ctrl-btn {
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background-color 0.2s;
    text-decoration: none;
}

.carousel-ctrl-btn:hover {
    background: var(--color-accent);
    color: #fff;
}

.carousel-ctrl-btn svg { width: 24px; height: 24px; }

/* ============================================================
   Sections - Common
   ============================================================ */

main > section { display: flow-root; }

.section-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-accent);
    display: block;
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-serif);
    font-weight: 700;
    color: #0f172a;
}

/* ============================================================
   Entry Cards (Home)
   ============================================================ */
.entry-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s, transform 0.3s;
    height: 100%;
}

.entry-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.entry-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: background-color 0.2s, color 0.2s;
}

.entry-card:hover .entry-card-icon.icon-blue {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.entry-card:hover .entry-card-icon.icon-amber {
    background-color: var(--color-accent) !important;
    color: #fff !important;
}

.entry-card:hover .entry-card-icon.icon-emerald {
    background-color: #10B981 !important;
    color: #fff !important;
}

.entry-card-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
}

.entry-card-link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.2s;
}

.entry-card-link:hover { gap: 0.75rem; color: var(--color-primary); }

/* ============================================================
   Highlights Section (Home)
   ============================================================ */
.event-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.event-card img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    transition: transform 0.7s;
}

.event-card:hover img { transform: scale(1.05); }

.event-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30,58,138,0.6);
    z-index: 1;
}

.event-card-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.event-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fbbf24;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.btn-register {
    display: inline-block;
    background: #fff;
    color: var(--color-primary);
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    text-decoration: none;
    align-self: flex-start;
    transition: background-color 0.2s, color 0.2s;
    border: none;
    cursor: pointer;
}

.btn-register:hover {
    background: #fbbf24;
    color: #fff;
}

/* Book section */
.book-cover-wrap {
    position: relative;
    flex-shrink: 0;
    width: 176px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    background: #fff;
    border-radius: 2px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    padding: 2px;
}

.book-cover-wrap img {
    width: 100%;
    height: auto;
    display: block;
    min-height: 150px;
}

.book-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background-color: var(--color-accent);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    z-index: 10;
}

/* ============================================================
   Testimonials (Home)
   ============================================================ */
.testimonial-card {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.2s;
}

.testimonial-card:hover { transform: translateY(-4px); }

.testimonial-quote-icon {
    color: #fef3c7;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ============================================================
   CTA Section (Home)
   ============================================================ */
.cta-section {
    background-color: #0f172a;
    position: relative;
    overflow: hidden;
}

.cta-blob-1 {
    position: absolute;
    top: -12rem;
    right: -12rem;
    width: 24rem;
    height: 24rem;
    background: rgba(59,130,246,0.1);
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}

.cta-blob-2 {
    position: absolute;
    bottom: -12rem;
    left: -12rem;
    width: 24rem;
    height: 24rem;
    background: rgba(245,158,11,0.05);
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}

/* ============================================================
   Page Hero (inner pages)
   ============================================================ */
.page-hero {
    background-color: var(--color-primary);
    padding: 6rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero-blob {
    position: absolute;
    top: -12rem;
    right: -12rem;
    width: 24rem;
    height: 24rem;
    background: rgba(245,158,11,0.1);
    border-radius: 9999px;
    filter: blur(80px);
    pointer-events: none;
}

.page-hero-dark {
    background-color: #0f172a;
    padding: 4rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   Practices Page
   ============================================================ */
.practice-card {
    background: #fff;
    border-radius: 2rem;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.5s, transform 0.5s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.practice-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
    transform: translateY(-8px);
}

.practice-card-img-wrap {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.practice-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.practice-card:hover .practice-card-img-wrap img { transform: scale(1.1); }

.practice-card-cat {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.75rem;
}

.practice-card-dur {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.practice-card-body {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.practice-card-snippet {
    background: var(--color-slate-50);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 2rem;
    border: 1px solid #f1f5f9;
}

.practice-card-snippet .snippet-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.practice-card-snippet p {
    font-size: 0.75rem;
    color: #475569;
    font-style: italic;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
}

.btn-begin-practice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background-color: #0f172a;
    color: #fff;
    font-weight: 700;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
}

.btn-begin-practice:hover {
    background-color: var(--color-accent);
    color: #fff;
}

/* Practices Insight */
.insight-dark {
    background-color: #0f172a;
    border-radius: 3.5rem;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.insight-dark-blob {
    position: absolute;
    inset: 0;
    background: rgba(59,130,246,0.05);
    filter: blur(80px);
    border-radius: 9999px;
    transform: translate(50%, -50%);
    pointer-events: none;
}

/* ============================================================
   Invocations Page
   ============================================================ */
.inv-sidebar-search {
    position: relative;
    margin-bottom: 1.5rem;
}

.inv-sidebar-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    background: var(--color-slate-50);
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.inv-sidebar-search input:focus {
    border-color: var(--color-primary);
    background: #fff;
}

.inv-sidebar-search .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.inv-nav-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
    background: #fff;
    text-decoration: none;
    color: #475569;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

.inv-nav-item:hover {
    border-color: #bfdbfe;
    background: var(--color-slate-50);
    color: var(--color-primary);
}

.inv-nav-item.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(30,58,138,0.1);
}

.inv-nav-icon {
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: #f1f5f9;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-nav-item.active .inv-nav-icon {
    background: rgba(255,255,255,0.1);
    color: #fbbf24;
}

.inv-nav-label { font-weight: 700; font-size: 0.875rem; line-height: 1.3; }
.inv-nav-cat { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: #94a3b8; }
.inv-nav-item.active .inv-nav-cat { color: #bfdbfe; }

.inv-daily-rhythm {
    padding: 1.5rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 1.5rem;
    margin-top: 1.5rem;
}

/* Invocation content viewer */
.inv-viewer {
    background: var(--color-slate-50);
    border: 1px solid #f1f5f9;
    border-radius: 3rem;
    padding: 5rem 3rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    text-align: center;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inv-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: 9999px;
    margin-bottom: 2rem;
}

.inv-title-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin-bottom: 3rem;
}

/* Content stanzas */
.inv-stanza {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    color: var(--color-primary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.inv-divider {
    width: 4rem;
    height: 1px;
    background: rgba(245,158,11,0.3);
    margin: 0 auto 2rem;
}

.inv-stanza-accent {
    font-family: var(--font-serif);
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    font-size: clamp(1.5rem, 4vw, 3rem);
}

.inv-footer-deco {
    margin-top: 5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(226,232,240,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tab pane visibility */
.inv-tab-content > .inv-pane { display: none; }
.inv-tab-content > .inv-pane.active { display: flex; flex-direction: column; }

/* ============================================================
   Twelves Page
   ============================================================ */
.content-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: 1.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 4rem;
}

.content-card-dark {
    background: var(--color-primary);
    padding: 2.5rem;
    border-radius: 1.5rem;
    color: #fff;
    box-shadow: 0 25px 50px -12px rgba(30,58,138,0.4);
    margin-bottom: 4rem;
}

.prereq-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.prereq-num {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgba(251,191,36,0.2);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    line-height: 1;
    font-weight: 700;
}

/* ============================================================
   Typography Page
   ============================================================ */
.color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 1rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.resource-card-hover {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    aspect-ratio: 4/5;
    background: #0f172a;
}

.resource-card-hover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: transform 0.7s;
}

.resource-card-hover:hover img { transform: scale(1.1); }

.resource-card-hover .resource-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #020617 0%, transparent 60%);
    z-index: 1;
}

.resource-card-hover .resource-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.resource-card-hover .resource-desc {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.3s, transform 0.3s;
    font-size: 0.875rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.resource-card-hover:hover .resource-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Progress bar */
.stat-bar {
    width: 100%;
    background: rgba(255,255,255,0.1);
    height: 0.5rem;
    border-radius: 9999px;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    background-color: #F59E0B;
    border-radius: 9999px;
}

/* Network pulse gradient bar */
.network-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #3B82F6, #F59E0B);
    border-radius: 9999px;
    box-shadow: 0 0 15px rgba(59,130,246,0.5);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background-color: #020617;
    color: #cbd5e1;
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.site-footer h3 {
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.site-footer p, .site-footer li { font-size: 0.875rem; color: #94a3b8; line-height: 1.6; }

.site-footer a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover { color: #60a5fa; }

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 0.5rem; }

/* ============================================================
   Blog / Digital Archive
   ============================================================ */
.blog-hero {
    background: #0f172a;
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.9) 1px, transparent 0);
    background-size: 26px 26px;
}

.blog-featured-card {
    overflow: hidden;
    border-radius: 3rem;
    background: var(--color-slate-50);
    border: 1px solid #f1f5f9;
    transition: box-shadow 0.3s, transform 0.3s;
}

.blog-featured-card:hover {
    box-shadow: 0 30px 70px rgba(15,23,42,0.14);
    transform: translateY(-2px);
}

.blog-featured-card img,
.blog-card img,
.blog-recommend-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.blog-featured-card:hover img,
.blog-card:hover img,
.blog-recommend-card:hover img { transform: scale(1.06); }

.blog-card {
    height: 100%;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.blog-card-img {
    aspect-ratio: 16 / 10;
    border-radius: 1.5rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.5rem;
}

.blog-category-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(255,255,255,0.92);
    color: #0f172a;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.blog-meta {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.blog-link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-link:hover { color: var(--color-accent); }

.blog-newsletter {
    background: var(--color-slate-50);
    padding: 5rem 0;
}

.blog-post-hero {
    min-height: 500px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    color: #fff;
}

.blog-post-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.96), rgba(15,23,42,0.45), transparent);
}

.blog-post-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 4rem;
}

.blog-article {
    font-size: 1.1rem;
    line-height: 1.85;
    color: #475569;
}

.blog-article h3 {
    font-family: var(--font-serif);
    color: #0f172a;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-side-card {
    background: var(--color-slate-50);
    border: 1px solid #f1f5f9;
    border-radius: 2rem;
    padding: 2rem;
}

.blog-recent-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.blog-recent-item:hover,
.blog-recent-item.active {
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

.blog-recent-item.active {
    background: var(--color-primary);
    color: #fff;
}

.blog-recent-thumb {
    width: 64px;
    height: 64px;
    border-radius: 0.75rem;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }

.blog-recommend-card {
    display: block;
    background: #fff;
    border: 1px solid rgba(226,232,240,0.8);
    border-radius: 1.5rem;
    padding: 1.5rem;
    color: inherit;
    text-decoration: none;
    height: 100%;
    transition: box-shadow 0.2s, transform 0.2s;
}

.blog-recommend-card:hover {
    box-shadow: 0 20px 40px rgba(15,23,42,0.12);
    transform: translateY(-2px);
}

.blog-recommend-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
    .blog-featured-card { border-radius: 1.75rem; }
    .blog-post-hero { min-height: 430px; }
}

.footer-divider {
    border-color: #0f172a;
    margin: 2rem 0;
}

.footer-bottom {
    font-size: 0.75rem;
    color: #475569;
}

.footer-bottom a {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom a:hover { color: #cbd5e1; }

/* ============================================================
   Utility Overrides
   ============================================================ */
.text-primary-blue { color: var(--color-primary) !important; }
.text-accent-amber { color: var(--color-accent) !important; }
.bg-primary-blue   { background-color: var(--color-primary) !important; }
.bg-accent-amber   { background-color: var(--color-accent) !important; }

.btn-primary-blue {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
    border: none;
    transition: background-color 0.2s;
    text-decoration: none;
}

.btn-primary-blue:hover {
    background-color: var(--color-primary-hover);
    color: #fff;
}

.btn-accent-amber {
    background-color: var(--color-accent);
    color: #fff;
    font-weight: 700;
    border: none;
    transition: background-color 0.2s;
    text-decoration: none;
}

.btn-accent-amber:hover {
    background-color: var(--color-accent-light);
    color: #fff;
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* ============================================================
   Contact Page
   ============================================================ */
.contact-icon-wrap {
    width: 48px;
    height: 48px;
    background: var(--color-slate-50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.contact-form-panel {
    background: var(--color-slate-50);
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    padding: 2.5rem 3rem;
}

@media (max-width: 767px) {
    .contact-form-panel { padding: 1.75rem 1.25rem; }
}

.contact-input {
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #fff;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.contact-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
    outline: none;
}

.contact-input::placeholder { color: #94a3b8; }

.btn-primary-dark {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 24px rgba(30,58,138,0.18);
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-primary-dark:hover,
.btn-primary-dark:focus {
    background: var(--color-primary-hover);
    color: #fff;
    box-shadow: 0 6px 28px rgba(30,58,138,0.25);
}

/* ============================================================
   EXTRACTED UTILITY CLASSES (shared across all pages)
   ============================================================ */

/* Topbar social icon links */
.topbar-social-link { color: inherit; }

/* Footer contact link */
.footer-contact-link { border-color: #334155 !important; }

/* Entry card icon colour variants (index.html) */
.icon-blue  { background-color: #eff6ff; color: var(--color-primary); }
.icon-amber { background-color: #fffbeb; color: var(--color-accent); }
.icon-emerald { background-color: #ecfdf5; color: #10B981; }

/* Testimonial byline (index.html, book-v1.html) */
.testimonial-byline {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #475569;
}

/* CTA ghost button (index.html) */
.btn-cta-ghost {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Practice card h3 heading size */
.practice-card-body h3 { font-size: 1.5rem; }

/* ============================================================
   EDITORIAL PAGE  (editorial.html)
   ============================================================ */
main > section { display: flow-root; }
.ed-header { border-bottom: 1px solid #f1f5f9; padding: 6rem 0; }
.ed-eyebrow { display: block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; color: var(--color-accent); margin-bottom: 1.25rem; }
.ed-float-right { float: right; margin: 0 0 2rem 2.5rem; width: min(24rem, 100%); }
.ed-float-left  { float: left;  margin: 0 2.5rem 2rem 0; width: min(24rem, 100%); }
@media (max-width: 576px) {
    .ed-float-right, .ed-float-left { float: none; width: 100%; margin: 0 0 2rem 0; }
}
.ed-float-img { border-radius: 2.5rem; display: block; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.12); border: 1px solid #f1f5f9; }
.ed-float-caption { margin-top: 0.75rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #94a3b8; text-align: center; }
.ed-archive-note { margin-top: 0.75rem; padding: 1rem; background: var(--color-slate-50); border: 1px solid #f1f5f9; border-radius: 1rem; font-size: 0.75rem; color: #64748b; line-height: 1.6; }
.ed-body p { font-size: 1.125rem; color: #475569; line-height: 1.85; margin-bottom: 1.5rem; }
.ed-body h2 { font-size: 2rem; font-family: var(--font-serif); font-weight: 700; color: #0f172a; margin-bottom: 1.5rem; }
.ed-quote-banner { position: relative; height: 500px; overflow: hidden; }
.ed-quote-banner-img { width: 100%; height: 100%; object-fit: cover; transition: transform 15s ease; }
.ed-quote-banner:hover .ed-quote-banner-img { transform: scale(1.1); }
.ed-quote-overlay { position: absolute; inset: 0; background: rgba(2,6,23,0.5); display: flex; align-items: center; justify-content: center; }
.ed-quote-inner { max-width: 48rem; text-align: center; padding: 0 1.5rem; }
.ed-quote-mark { color: var(--color-accent); opacity: 0.6; margin-bottom: 2rem; }
.ed-quote-text  { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.5vw, 3rem); color: #fff; font-weight: 700; line-height: 1.2; margin-bottom: 2rem; }
.ed-quote-attr  { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4em; color: var(--color-accent); }
.ed-image-card { position: relative; border-radius: 4rem; overflow: hidden; height: 600px; box-shadow: 0 25px 80px rgba(0,0,0,0.2); }
.ed-image-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-image-card-panel { position: absolute; top: 3rem; left: 3rem; bottom: 3rem; width: min(28rem, calc(100% - 3.5rem)); background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-radius: 3rem; box-shadow: 0 20px 60px rgba(0,0,0,0.15); padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 767px) {
    .ed-image-card { height: auto; border-radius: 2rem; }
    .ed-image-card img { height: 300px; }
    .ed-image-card-panel { position: static; width: 100%; border-radius: 0 0 2rem 2rem; box-shadow: none; }
}
.ed-callout { background: #fffbeb; border: 1px solid #fde68a; border-radius: 1.25rem; padding: 1.5rem; }
.ed-callout p { font-size: 0.875rem; color: #78350f; font-weight: 500; font-style: italic; margin: 0; }
.ed-conclusion-img-wrap { padding: 0.5rem; background: #fff; border-radius: 3rem; box-shadow: 0 20px 60px rgba(0,0,0,0.1); border: 1px solid #f1f5f9; }
.ed-conclusion-img-wrap img { border-radius: 2.5rem; display: block; width: 100%; }
/* Editorial inline heading sizes */
.ed-header-title { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.ed-panel-title  { font-size: 2.25rem; }
.ed-conclusion-title { font-size: 2rem; }

/* ============================================================
   MEDIA PAGE  (media.html)
   ============================================================ */
.media-header { background: var(--color-slate-50); border-bottom: 1px solid #f1f5f9; padding: 4rem 0; }
.media-badge { display: inline-block; background: var(--color-primary); color: #fff; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; padding: 0.25rem 0.75rem; border-radius: 9999px; }
.video-player-wrap { background: #0f172a; border-radius: 2.5rem; overflow: hidden; aspect-ratio: 16 / 9; position: relative; }
.video-player-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.video-meta-panel { background: var(--color-slate-50); border: 1px solid #f1f5f9; border-radius: 2.5rem; padding: 2.5rem; }
.media-action-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 700; color: #475569; text-decoration: none; cursor: pointer; transition: background-color 0.2s; }
.media-action-btn:hover { background: var(--color-slate-50); color: #475569; }
.media-action-btn.primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 10px 20px rgba(30,58,138,0.1); }
.media-action-btn.primary:hover { background: var(--color-primary-hover); color: #fff; }
.topic-bullet { width: 6px; height: 6px; background: var(--color-accent); border-radius: 9999px; flex-shrink: 0; margin-top: 0.375rem; }
.rec-item { display: flex; gap: 1rem; cursor: pointer; text-decoration: none; color: inherit; }
.rec-item:hover .rec-title { color: var(--color-primary); }
.rec-thumb { width: 8rem; height: 5rem; border-radius: 1rem; overflow: hidden; flex-shrink: 0; position: relative; }
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.rec-item:hover .rec-thumb img { transform: scale(1.1); }
.rec-thumb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.rec-item:hover .rec-thumb-overlay { opacity: 1; }
.rec-time { position: absolute; bottom: 0.25rem; right: 0.35rem; background: rgba(0,0,0,0.8); color: #fff; font-size: 0.625rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 3px; }
.rec-title { font-family: var(--font-serif); font-weight: 700; color: #0f172a; font-size: 0.875rem; line-height: 1.4; transition: color 0.2s; }
.rec-date { font-size: 0.625rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; }
.upgrade-card { background: var(--color-primary); border-radius: 2.5rem; padding: 2rem; color: #fff; position: relative; overflow: hidden; }
.upgrade-card-blob { position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; background: rgba(255,255,255,0.04); filter: blur(60px); border-radius: 9999px; pointer-events: none; }
.discussion-section { background: var(--color-slate-50); border-top: 1px solid #f1f5f9; padding: 6rem 0; text-align: center; }
.discussion-icon-wrap { width: 4rem; height: 4rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; color: var(--color-primary); }
/* Media inline sizes */
.media-h1 { font-size: clamp(2rem, 4vw, 3rem); }
.media-lecture-title { font-size: 1.75rem; }
.media-lecture-meta { font-size: 0.8rem; }
.media-section-heading { font-size: 1.1rem; }
.media-upgrade-text { color: rgba(191,219,254,0.7); font-size: 0.875rem; font-weight: 300; }
.media-discussion-title { font-size: 2rem; }

/* ============================================================
   IMAGE FEATURES PAGE  (image-features.html)
   ============================================================ */
.imgfeat-header { background: #fff; border-bottom: 1px solid #f1f5f9; padding: 5rem 0; }
.imgfeat-eyebrow { display: flex; align-items: center; gap: 1rem; color: var(--color-primary); font-weight: 700; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.4em; margin-bottom: 1.5rem; }
.imgfeat-eyebrow-line { width: 2rem; height: 1px; background: #bfdbfe; display: inline-block; }
.mini-gallery-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 2rem; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.mini-gallery-item { position: relative; overflow: hidden; border-radius: 1rem; aspect-ratio: 1; cursor: pointer; background: var(--color-slate-50); }
.mini-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.mini-gallery-item:hover img { transform: scale(1.1); }
.mini-gallery-item-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; color: #fff; }
.mini-gallery-item:hover .mini-gallery-item-overlay { opacity: 1; }
.callout-image-wrap { position: relative; border: 4px solid #fff; border-radius: 2rem; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2); cursor: zoom-in; }
.callout-image-wrap img { width: 100%; height: auto; display: block; transition: transform 0.5s; }
.callout-image-wrap:hover img { transform: scale(1.02); }
.callout-annotation { position: absolute; top: 1.5rem; left: 1.5rem; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-radius: 1rem; padding: 1rem; max-width: 18rem; box-shadow: 0 10px 24px rgba(0,0,0,0.1); }
#imgFeatLightbox .modal-content { background: rgba(2,6,23,0.97); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; }
#imgFeatLightbox .modal-body { padding: 1.5rem; text-align: center; }
#imgFeatLightbox .btn-close { filter: invert(1); }
#imgFeatLightboxImg { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: 1rem; }
/* Image-features inline sizes */
.imgfeat-header-max { max-width: 56rem; }
.imgfeat-article-max { max-width: 48rem; }
.imgfeat-h1 { font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.1; }
.imgfeat-mini-gallery-title { font-size: 1.25rem; }
.imgfeat-gallery-label { font-size: 0.625rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.15em; }
.imgfeat-annotation-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #0f172a; }
.imgfeat-annotation-text { font-size: 0.75rem; line-height: 1.5; }
.imgfeat-close-hint { color: rgba(255,255,255,0.3); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4em; }

/* ============================================================
   GALLERY PAGE  (gallery.html)
   ============================================================ */
.gallery-hero { background-color: #0f172a; padding: 6rem 0; position: relative; overflow: hidden; text-align: center; }
.gallery-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, transparent 70%); }
.gallery-controls {
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
    border: 1px solid #f1f5f9;
    margin-top: -2.5rem;
    position: relative;
    z-index: 20;
}
.gallery-filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.gallery-filter-btn.active { background: var(--color-primary); color: #fff; box-shadow: 0 10px 20px rgba(30,58,138,0.2); }
.gallery-filter-btn:not(.active) { background: var(--color-slate-50); color: #94a3b8; }
.gallery-filter-btn:not(.active):hover { background: #e2e8f0; color: #475569; }
.gallery-search-wrap { position: relative; }
.gallery-search-wrap svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.gallery-search { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; background: var(--color-slate-50); border: 1px solid #e2e8f0; border-radius: 1rem; font-size: 0.875rem; font-weight: 500; outline: none; transition: border-color 0.2s; }
.gallery-search:focus { border-color: var(--color-primary); background: #fff; }
.gallery-columns { column-count: 2; column-gap: 1.25rem; }
@media (min-width: 768px) { .gallery-columns { column-count: 3; } }
@media (min-width: 1200px) { .gallery-columns { column-count: 4; } }
.gallery-item {
    break-inside: avoid;
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #e2e8f0;
    cursor: pointer;
    margin-bottom: 1.25rem;
    display: block;
}
.gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.7s; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.85) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-cat { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #F59E0B; margin-bottom: 0.25rem; }
.gallery-item-title { font-family: var(--font-serif); font-weight: 700; color: #fff; font-size: 1rem; }
.gallery-item-action { width: 32px; height: 32px; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: #fff; border: none; cursor: pointer; transition: background-color 0.2s; margin-top: 0.75rem; align-self: flex-start; }
.gallery-item-action:hover { background: var(--color-accent); }
#lightboxModal .modal-dialog { max-width: 900px; }
#lightboxModal .modal-content { background: rgba(2,6,23,0.97); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; }
#lightboxModal .modal-body { padding: 1.5rem; text-align: center; }
#lightboxModal .btn-close { filter: invert(1) grayscale(100%); }
#lightboxImg { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 0.75rem; }
.lightbox-caption-cat { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(255,255,255,0.4); }
.lightbox-caption-title { font-family: var(--font-serif); font-weight: 700; color: #fff; font-size: 1.5rem; }
.lightbox-nav { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 9999px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; }
.lightbox-nav:hover { background: var(--color-accent); }
/* Gallery inline sizes */
.gallery-hero-title { font-size: clamp(2.5rem, 5vw, 3.75rem); }
.gallery-hero-subtitle { color: #94a3b8; max-width: 32rem; margin: 0 auto; font-size: 1.1rem; }
.gallery-search-max { width: 100%; max-width: 20rem; }

/* ============================================================
   BOOK-V1 PAGE  (book-v1.html)
   ============================================================ */
.book-hero-section { background-color: var(--color-slate-50); border-bottom: 1px solid #f1f5f9; padding: 6rem 0; }
.book-stat-icon { width: 48px; height: 48px; background: #fffbeb; color: var(--color-accent); border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.testimonials-dark { background-color: #0f172a; border-radius: 3.5rem; margin: 0 1rem 5rem; overflow: hidden; position: relative; padding: 5rem 0; }
.testimonials-dark-blob { position: absolute; top: 0; right: 0; width: 24rem; height: 24rem; background: rgba(59,130,246,0.05); filter: blur(100px); border-radius: 9999px; pointer-events: none; }
.book-testimonial-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 1.5rem; padding: 2rem; height: 100%; }
.book-star-row { color: #F59E0B; display: flex; gap: 4px; margin-bottom: 1.5rem; }
.book-purchase-btn { background-color: var(--color-primary); color: #fff; font-weight: 700; padding: 1rem 2.5rem; border-radius: 0.75rem; border: none; text-decoration: none; display: inline-block; transition: background-color 0.2s; box-shadow: 0 20px 40px rgba(30,58,138,0.2); }
.book-purchase-btn:hover { background-color: var(--color-primary-hover); color: #fff; }
.book-download-btn { background: #fff; border: 1px solid #e2e8f0; color: #475569; font-weight: 700; padding: 1rem 2.5rem; border-radius: 0.75rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: background-color 0.2s; }
.book-download-btn:hover { background: var(--color-slate-50); color: #475569; }
.book-cover-hero { position: relative; }
.book-cover-hero img { width: 100%; max-width: 340px; margin: 0 auto; display: block; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.3); border-radius: 2px; border: 1px solid #e2e8f0; }
.book-cover-glow { position: absolute; inset: -2.5rem; background: rgba(245,158,11,0.08); filter: blur(80px); border-radius: 9999px; z-index: -1; }
/* Book-v1 inline sizes */
.book-v1-title { font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.1; }
.book-v1-body-title { font-size: 2rem; }
.book-v1-testimonials-title { font-size: 2rem; }

/* ============================================================
   BOOK-V2 PAGE  (book-v2.html)
   ============================================================ */
body.bv2-body { background-color: #0A0D14; color: #fff; }
.bv2-hero {
    position: relative;
    padding: 8rem 0 12rem;
    overflow: hidden;
    background-color: #0A0D14;
}
.bv2-hero-radial {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(245,158,11,0.05) 0%, transparent 50%);
    pointer-events: none;
}
.bv2-eyebrow-line { width: 3rem; height: 1px; background: #F59E0B; display: inline-block; }
.bv2-title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
}
.bv2-title-gradient {
    background: linear-gradient(to right, #fde68a, #F59E0B, #b45309);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bv2-order-btn {
    background: var(--color-accent);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 1.1rem 3rem;
    border-radius: 9999px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 25px 50px rgba(120,53,15,0.4);
}
.bv2-order-btn:hover { background: var(--color-accent-light); color: #fff; transform: scale(1.05); }
.bv2-preview-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 1.1rem 3rem;
    border-radius: 9999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.2s;
}
.bv2-preview-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.bv2-book-col { position: relative; }
.bv2-book-img {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 50px 80px rgba(245,158,11,0.2));
    transition: transform 0.7s;
}
.bv2-book-img:hover { transform: rotate(0deg) !important; }
.bv2-book-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    aspect-ratio: 1;
    background: rgba(59,130,246,0.1);
    border-radius: 9999px;
    filter: blur(120px);
    pointer-events: none;
    z-index: -1;
}
.bv2-content {
    background: #fff;
    border-radius: 5rem 5rem 0 0;
    margin-top: -5rem;
    position: relative;
    z-index: 20;
    color: #475569;
}
.bv2-bento-light { background: var(--color-slate-50); border: 1px solid #f1f5f9; border-radius: 3rem; padding: 2.5rem; transition: box-shadow 0.2s; }
.bv2-bento-light:hover { box-shadow: 0 25px 50px rgba(0,0,0,0.1); }
.bv2-bento-dark { background: #0f172a; color: #fff; border-radius: 3rem; padding: 2.5rem; box-shadow: 0 25px 50px rgba(0,0,0,0.3); position: relative; overflow: hidden; }
.bv2-bento-dark-hover { position: absolute; inset: 0; background: #1e40af; opacity: 0; transition: opacity 0.3s; border-radius: 3rem; }
.bv2-bento-dark:hover .bv2-bento-dark-hover { opacity: 0.1; }
.bv2-review-light { background: #fff; border: 1px solid #e2e8f0; border-radius: 4rem; padding: 3rem; }
.bv2-review-dark { background: #0f172a; border-radius: 4rem; padding: 3rem; }
.bv2-avatar { width: 56px; height: 56px; border-radius: 9999px; }
/* Book-v2 dark nav */
.site-header--dark { background: #0e1420; border-bottom: 1px solid #1e293b; }
.site-header--dark .logo-text-primary { color: #e2e8f0; }
.site-header--dark .navbar-toggler { color: #94a3b8; }
.site-header--dark .nav-link { color: #94a3b8; }
.site-header--dark .nav-link.nav-link-accent { color: #F59E0B; font-weight: 700; }
.site-header--dark .btn-join { background: var(--color-accent); }
/* Book-v2 inline sizes */
.bv2-eyebrow-text { color: #F59E0B; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5em; }
.bv2-hero-subtitle { max-width: 36rem; color: #94a3b8 !important; }
.bv2-intro-title { font-size: clamp(2rem, 4vw, 3rem); }
.bv2-intro-max { max-width: 42rem; margin: 0 auto; }
.bv2-bento-title { font-size: 1.5rem; }
.bv2-bento-dark-text { color: #94a3b8; font-size: 0.875rem; }
.bv2-summary-img { border-radius: 3.5rem; box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
.bv2-summary-title { font-size: 2rem; }
.bv2-summary-edition { color: #475569; font-size: 0.875rem; }
.bv2-reviews-title { font-size: 2.25rem; }
.bv2-review-quote { font-size: 1.4rem; }
.bv2-review-dark-quote { font-size: 1.4rem; color: #e2e8f0; }
.bv2-review-dark-meta { color: #475569; font-size: 0.875rem; }

/* ============================================================
   PRACTICES PAGE  (practices.html) � additional inline styles
   ============================================================ */
.practices-hero-eyebrow { color: #fbbf24; }
.practices-hero-title { font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.1; }
.practices-hero-subtitle { color: #bfdbfe; max-width: 36rem; margin: 0 auto; font-size: 1.1rem; line-height: 1.6; }
.practices-filter-tag-active { font-size: 0.75rem; background: var(--color-primary); border: 1px solid var(--color-primary); }
.practices-filter-tag { font-size: 0.75rem; border-color: #e2e8f0 !important; }
.practices-sticky-bar { top: 81px; z-index: 900; }
.practices-insight-eyebrow { color: var(--color-primary); }
.practices-insight-title { font-size: 2.5rem; }
.practices-insight-blob-text { color: rgba(191,219,254,0.8); }
.practices-insight-h3 { font-size: 1.5rem; }
.practices-cta-title { font-size: 2rem; }

/* ============================================================
   INVOCATIONS PAGE  (invocations.html) � additional inline styles
   ============================================================ */
.inv-hero-eyebrow { color: #F59E0B; }
.inv-hero-title { font-size: clamp(2rem, 5vw, 3rem); }
.inv-hero-subtitle { max-width: 36rem; margin: 0 auto; font-size: 1.1rem; }
.inv-sidebar-doc-label { font-size: 0.625rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.15em; padding: 0 0.25rem; margin-bottom: 0.5rem; }
.inv-daily-title { color: #92400e; font-size: 0.875rem; }
.inv-daily-body { font-size: 0.75rem; color: #b45309; line-height: 1.6; margin-bottom: 0.75rem; }
.inv-daily-link { font-size: 0.75rem; font-weight: 700; color: #92400e; text-decoration: underline; text-underline-offset: 3px; }
.inv-tab-max { max-width: 54rem; margin: 0 auto; }
.inv-footer-cite { font-size: 0.75rem; color: #94a3b8; font-style: italic; max-width: 24rem; }
.inv-origin-title { font-size: 2rem; }
.inv-science-title { font-size: 2rem; }
.inv-science-item { border-color: #f1f5f9 !important; }
.inv-science-icon { width: 40px; height: 40px; flex-shrink: 0; color: #F59E0B; border-color: #f1f5f9 !important; }
.inv-blockquote { background: #eff6ff; border-left: 4px solid var(--color-primary); }
.inv-how-to-section { background: #0f172a; border-radius: 4rem; overflow: hidden; position: relative; }
.inv-how-to-blob { position: absolute; top: 0; right: 0; width: 33%; height: 100%; background: rgba(59,130,246,0.05); filter: blur(80px); border-radius: 9999px; }
.inv-how-to-title { font-size: 2.5rem; }
.inv-practice-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.inv-practice-label { color: #fbbf24; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; }
.inv-practice-text { color: #cbd5e1; }

/* ============================================================
   TWELVES PAGE  (twelves.html) � additional inline styles
   ============================================================ */
.twelves-header-title { font-size: 3rem; }
.twelves-what-is-not { background-color: var(--color-slate-50); border-color: #e2e8f0 !important; }
.twelves-amber-heading { color: #92400e; font-size: 2rem; }
.twelves-list { list-style: disc; }
.twelves-who-heading { font-size: 2rem; }
.twelves-who-body { color: #bfdbfe; }
.twelves-prereq-box { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.twelves-prereq-title { color: #fcd34d; }
.twelves-quote-border { border-color: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.7); }
.twelves-content-title { font-size: 2rem; }

/* ============================================================
   CONTACT PAGE  (contact.html)
   ============================================================ */
.contact-hero-title { font-size: clamp(2.2rem,5vw,3.2rem); }
.contact-hero-subtitle { font-size: 1.1rem; }
.contact-info-heading { font-size: 1rem; }
.contact-row-gap { gap: 0 4rem !important; }

/* ============================================================
   BLOG PAGE  (blog.html)
   ============================================================ */
.blog-hero-eyebrow { color: #F59E0B; }
.blog-hero-title { font-size: clamp(2.5rem,6vw,4rem); }
.blog-hero-subtitle { max-width: 42rem; font-size: 1.2rem; }
.blog-featured-grid { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.blog-featured-img { min-height: 400px; overflow: hidden; }
.blog-featured-label { font-size: 0.7rem; letter-spacing: 0.16em; }
.blog-featured-label-rule { width: 2rem; height: 1px; background: #fde68a; }
.blog-featured-title { font-size: clamp(2rem,4vw,3rem); line-height: 1.1; }
.blog-featured-cta { width: 48px; height: 48px; }
.blog-divider { height: 1px; background: #f1f5f9; }
.blog-newsletter-body { max-width: 36rem; }

/* ============================================================
   BLOG POST PAGE  (blog-post.html)
   ============================================================ */
.bp-hero-title { font-size: clamp(2.25rem,6vw,4rem); line-height: 1.1; max-width: 52rem; }
.bp-avatar { width: 48px; height: 48px; }
.bp-sidebar-sticky { top: 100px; }
.bp-related-section { background: var(--color-slate-50); }

/* ============================================================
   TYPOGRAPHY PAGE  (typography.html)
   ============================================================ */
/* Heading size label spans (type scale demo) */
.ty-scale-label { font-size: 0.75rem; width: 2.5rem; flex-shrink: 0; }
/* Color swatch hex value */
.ty-swatch-value { font-size: 0.75rem; }
/* Code token sample */
.ty-code-sample { font-size: 0.875rem; }
/* Outline button (tokens demo) */
.ty-outline-btn { border-color: #e2e8f0 !important; color: #475569; }
/* Badge variants */
.ty-badge { font-size: 0.7rem; letter-spacing: 0.05em; }
.ty-badge-blue   { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe !important; }
.ty-badge-amber  { background: #fffbeb; color: #d97706; border-color: #fde68a !important; }
.ty-badge-green  { background: #ecfdf5; color: #10b981; border-color: #a7f3d0 !important; }
.ty-badge-slate  { background: #f1f5f9; color: #64748b; border-color: #e2e8f0 !important; }
/* Form icon positioning */
.ty-form-icon { left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
/* Form input with icon */
.ty-form-input { background: #f8fafc; border-color: #e2e8f0 !important; }
/* Checkbox custom size */
.ty-checkbox { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }
/* Profile card border */
.ty-card-border { border-color: #f1f5f9 !important; }
/* Profile avatar wrapper */
.ty-avatar-wrapper { width: 6rem; height: 6rem; }
/* Online status dot */
.ty-status-dot { width: 1.25rem; height: 1.25rem; background: #10b981; }
/* Profile name */
.ty-profile-name { font-size: 1.25rem; }
/* Profile tag */
.ty-tag { font-size: 0.65rem; }
/* Profile CTA */
.ty-profile-cta { border-color: var(--color-primary) !important; color: var(--color-primary); }
/* Resource card min-height */
.ty-resource-card { min-height: 320px; }
/* Resource premium badge */
.ty-resource-badge { background: #F59E0B; font-size: 0.65rem; text-transform: uppercase; }
/* Resource title */
.ty-resource-title { font-size: 1.4rem; }
/* Resource price */
.ty-resource-price { color: #F59E0B; }
/* Resource play button */
.ty-resource-play { background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); }
/* Stat card (primary bg) */
.ty-stat-card { background: var(--color-primary); }
/* Stat number */
.ty-stat-number { font-size: 2.5rem; }
/* Stat label */
.ty-stat-label { font-size: 0.7rem; letter-spacing: 0.15em; color: #bfdbfe; }
/* Stat bar track */
.ty-stat-bar-track { background: rgba(255,255,255,0.1); }
/* Stat bar meta */
.ty-stat-bar-meta { font-size: 0.75rem; color: #bfdbfe; }
/* Event card border */
.ty-event-card-border { border-color: #f1f5f9 !important; }
/* Event icon bg */
.ty-event-icon { background: #fffbeb; color: #D97706; }
/* Event countdown label */
.ty-event-countdown-label { font-size: 0.65rem; letter-spacing: 0.1em; color: #94a3b8; }
/* Event title */
.ty-event-title { font-size: 1.25rem; }
/* Event clamp body */
.ty-event-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Event meta row */
.ty-event-meta { font-size: 0.75rem; }
/* Event footer */
.ty-event-footer { background: #f8fafc; border-color: #f1f5f9 !important; }
/* Event register btn */
.ty-event-register { font-size: 0.75rem; }
/* Event save btn */
.ty-event-save { border-color: #e2e8f0 !important; }
/* Archive card border */
.ty-archive-card-border { border-color: #f1f5f9 !important; }
/* Archive badge */
.ty-archive-badge { font-size: 0.65rem; background: #eff6ff; color: #1e3a8a; letter-spacing: 0.05em; }
/* Archive mute btn */
.ty-archive-mute { color: #cbd5e1 !important; }
/* Archive title */
.ty-archive-title { font-size: 1.25rem; }
/* Archive border-top */
.ty-archive-border-top { border-color: #f1f5f9 !important; }
/* Archive avatar */
.ty-archive-avatar { width: 1.5rem; height: 1.5rem; }
/* Archive read time */
.ty-archive-meta { font-size: 0.75rem; }
/* Dark widget */
.ty-dark-widget { background: #0f172a; }
/* Dark widget blob */
.ty-dark-blob { position: absolute; top: -2.5rem; right: -2.5rem; width: 10rem; height: 10rem; background: rgba(59,130,246,0.1); filter: blur(40px); border-radius: 9999px; pointer-events: none; }
/* Dark widget icon */
.ty-dark-icon { background: rgba(255,255,255,0.05); color: #F59E0B; }
/* Dark widget sub */
.ty-dark-sub { font-size: 0.75rem; }
/* Dark widget big number */
.ty-dark-big { font-size: 2.5rem; }
/* Dark widget trend */
.ty-dark-trend { font-size: 0.75rem; color: #34d399; }
/* Dark widget uptime label */
.ty-dark-uptime-label { font-size: 0.65rem; letter-spacing: 0.15em; color: #64748b; }
/* Dark widget network header */
.ty-dark-network-header { font-size: 0.65rem; color: #475569; }
/* Dark widget CTA */
.ty-dark-cta { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 0.75rem; }

/* ============================================================
   SHARED SECTION BACKGROUNDS (index, practices)
   ============================================================ */
.section-bg-slate { background-color: var(--color-slate-50); }

/* ============================================================
   EDITORIAL PAGE  – remaining
   ============================================================ */
.ed-lead-text { font-size: 1.25rem; }

/* ============================================================
   MEDIA PAGE  – remaining
   ============================================================ */
.media-z1 { z-index: 1; }
.media-newsletter-body { max-width: 32rem; }

/* ============================================================
   IMAGE-FEATURES PAGE  – remaining
   ============================================================ */
.imgfeat-lead { max-width: 36rem; }

/* ============================================================
   SHARED UTILITIES (z-index, eyebrow modifiers)
   ============================================================ */
/* Z-index helpers used across multiple pages */
.pos-z1 { z-index: 1; }
.pos-z2 { z-index: 2; }
/* Amber eyebrow modifier (gallery hero, book-v1 testimonials) */
.section-eyebrow--amber { color: #F59E0B; }

/* ============================================================
   BOOK-V1  – additional extracted styles
   ============================================================ */
/* Floating animation for book cover image */
.book-cover-hero img { animation: float 6s ease-in-out infinite; }
/* Download button icon colour */
.book-download-btn svg { color: var(--color-accent); }

/* ============================================================
   BOOK-V2  – additional extracted styles
   ============================================================ */
/* Initial book tilt (hover resets to 0deg via existing rule) */
.bv2-book-img { transform: rotate(6deg); }
/* Star-rating row colour */
.bv2-stars { color: #F59E0B; }
/* Dark-card avatar placeholder background */
.bv2-avatar--dark { background: rgba(255,255,255,0.1); }

/* ============================================================
   INVOCATIONS PAGE  – additional extracted styles
   ============================================================ */
/* Sidebar sticky offset */
.inv-sidebar-sticky { top: 100px; }
/* Small variant of the accent stanza (Student Invocation closing line) */
.inv-stanza-accent--sm { font-size: 1.25rem; letter-spacing: 0.2em; }
/* Climax / closing stanza highlighted in accent colour */
.inv-stanza--climax { color: var(--color-accent); font-weight: 700; }
/* CTA button base font-size */
.inv-cta-btn { font-size: 1rem; }