/**
 * African Novelist - Pages CSS
 * Part 3: Single Book, Journal, Single Post, About, Contact, Auth, Account
 */

/* ============================================
   Books Page — Premium Editorial (bk-)
   ============================================ */

/* ── Hero with LIBRARY Watermark ── */
.bk-hero {
    position: relative;
    padding: calc(70px + 110px) 0 60px;
    text-align: center;
    background: #faf9f6;
    color: #1a1a1a;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bk-hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: clamp(80px, 13vw, 200px);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.03);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    user-select: none;
    line-height: 1;
}

.bk-hero-frame {
    position: absolute;
    top: 40px; left: 40px; right: 40px; bottom: 40px;
    border: 1px solid rgba(201, 169, 98, 0.12);
    pointer-events: none;
    z-index: 1;
}

.bk-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bk-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #c9a962;
    margin-bottom: 48px;
    text-transform: uppercase;
}

.bk-label-line {
    display: inline-block;
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a962, transparent);
}

.bk-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(56px, 9vw, 120px);
    font-weight: 400;
    line-height: 1.05;
    color: #1a1a1a;
    margin: 0 0 32px;
    letter-spacing: -0.03em;
}

.bk-hero-title em {
    font-style: italic;
    color: #c9a962;
}

.bk-hero-ornament {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.bk-hero-ornament span {
    display: block;
    width: 50px;
    height: 1px;
    background: #ddd;
}

.bk-hero-ornament i {
    font-size: 12px;
    color: #c9a962;
}

.bk-hero-sub {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.35em;
    color: #aaa;
    margin: 0;
    text-transform: uppercase;
}

.bk-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 50px;
    overflow: hidden;
    z-index: 2;
}

.bk-hero-scroll span {
    display: block;
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, #c9a962, transparent);
    animation: abScrollPulse 2s ease-in-out infinite;
}

/* ── Collection Grid ── */
.bk-collection {
    padding: 100px 0 120px;
    background: #fff;
}

.bk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.bk-card {
    position: relative;
    padding: 44px 32px 40px;
    background: #faf9f6;
    border: 1px solid #f0ede8;
    text-align: center;
    transition: all 0.4s ease;
    overflow: hidden;
}

.bk-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: #c9a962;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.bk-card:hover {
    background: #fff;
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}

.bk-card:hover::before {
    transform: scaleX(1);
}

.bk-card-num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.03);
    line-height: 1;
    z-index: 0;
}

.bk-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
}

.bk-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    padding: 5px 12px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    color: #1a1a1a;
    border: 1px solid #f0ede8;
}

.bk-rating i {
    color: #c9a962;
    font-size: 9px;
}

.bk-new-badge {
    background: #1a1a1a;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    letter-spacing: 0.12em;
}

.bk-wishlist {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #f0ede8;
    border-radius: 50%;
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bk-wishlist:hover {
    color: #c9a962;
    border-color: #c9a962;
}

.bk-cover {
    display: block;
    position: relative;
    z-index: 2;
    margin: 0 auto 36px;
    width: 155px;
    transition: transform 0.4s ease;
}

.bk-cover:hover {
    transform: translateY(-6px);
}

.bk-cover img {
    width: 100%;
    height: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.14);
    display: block;
}

.bk-info {
    position: relative;
    z-index: 2;
}

.bk-category {
    display: block;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #c9a962;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.bk-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.bk-excerpt {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #999;
    line-height: 1.85;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bk-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #bbb;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.bk-link i {
    font-size: 8px;
    transition: transform 0.3s ease;
}

.bk-link:hover {
    color: #c9a962;
}

.bk-link:hover i {
    transform: translateX(4px);
}

/* ── Stats Bar ── */
.bk-stats {
    padding: 80px 0;
    background: #faf9f6;
    border-top: 1px solid #f0ede8;
    border-bottom: 1px solid #f0ede8;
}

.bk-stats-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

.bk-stat { text-align: center; }

.bk-stat-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.bk-stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #bbb;
    text-transform: uppercase;
}

.bk-stat-div {
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg, transparent, #ddd, transparent);
}

/* ── FAQ Section ── */
.bk-faq {
    padding: 120px 0;
    background: #fff;
}

.bk-faq-header {
    text-align: center;
    margin-bottom: 70px;
}

.bk-faq-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #c9a962;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.bk-faq-title {
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.02em;
}

.bk-faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}

.bk-faq-item {
    padding: 48px 36px;
    background: #faf9f6;
    border: 1px solid #f0ede8;
    margin-left: -1px;
    text-align: center;
    transition: all 0.4s ease;
}

.bk-faq-item:first-child { margin-left: 0; }

.bk-faq-item:hover {
    background: #fff;
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    z-index: 2;
    position: relative;
}

.bk-faq-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    background: #fff;
    border: 1px solid #ece8e1;
    border-radius: 50%;
    color: #c9a962;
    font-size: 16px;
    transition: all 0.4s ease;
}

.bk-faq-item:hover .bk-faq-icon {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #c9a962;
}

.bk-faq-item h4 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.bk-faq-item p {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #999;
    line-height: 1.85;
    margin: 0;
}

/* ── Books Page Responsive ── */
@media (max-width: 991px) {
    .bk-hero {
        min-height: 65vh;
        padding: calc(70px + 60px) 0 80px;
    }
    .bk-hero-frame { top: 24px; left: 24px; right: 24px; bottom: 24px; }
    .bk-hero-watermark { font-size: 80px; }
    .bk-hero-title { font-size: 64px; }
    .bk-collection { padding: 80px 0; }
    .bk-grid { grid-template-columns: 1fr; gap: 24px; }
    .bk-card { max-width: 400px; margin: 0 auto; width: 100%; }
    .bk-stats-grid { gap: 30px; }
    .bk-stat-num { font-size: 34px; }
    .bk-faq-grid { grid-template-columns: 1fr; gap: 0; }
    .bk-faq-item { margin-left: 0; margin-top: -1px; }
    .bk-faq-item:first-child { margin-top: 0; }
    .bk-faq-title { font-size: 34px; }
}

@media (max-width: 576px) {
    .bk-hero { min-height: 60vh; padding: calc(70px + 50px) 0 70px; }
    .bk-hero-frame { top: 16px; left: 16px; right: 16px; bottom: 16px; }
    .bk-hero-watermark { font-size: 48px; }
    .bk-hero-title { font-size: 46px; }
    .bk-hero-sub { font-size: 10px; letter-spacing: 0.2em; }
    .bk-hero-ornament span { width: 30px; }
    .bk-label-line { width: 30px; }
    .bk-stats { padding: 60px 0; }
    .bk-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .bk-stat-div { display: none; }
    .bk-stat-num { font-size: 30px; }
    .bk-faq { padding: 80px 0; }
    .bk-faq-title { font-size: 30px; }
}

/* ============================================
   Single Product Page - Premium Redesign (sp-)
   ============================================ */

/* Hero */
.sp-hero {
    position: relative;
    padding: calc(70px + 60px) 0 100px;
    background: #fff;
    color: #1a1a1a;
    overflow: hidden;
    min-height: 100vh;
}

.sp-hero-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 30% 80%, rgba(201,169,98,0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(0,0,0,0.01) 0%, transparent 50%);
    pointer-events: none;
}

/* Top Bar */
.sp-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.sp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #bbb;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sp-back-link:hover {
    color: #1a1a1a;
    transform: translateX(-4px);
}

.sp-back-link i { font-size: 10px; }

.sp-top-actions { display: flex; gap: 20px; }

.sp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f8f8f8;
    border: 1px solid #f0f0f0;
    padding: 10px 18px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #999;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-action-btn:hover {
    background: #f0f0f0;
    border-color: #e0e0e0;
    color: #1a1a1a;
}

.sp-action-btn.active {
    color: #e74c3c;
    border-color: rgba(231,76,60,0.3);
    background: rgba(231,76,60,0.08);
}

.sp-action-btn i { font-size: 12px; }

/* Hero Grid */
.sp-hero-grid {
    display: grid;
    grid-template-columns: 0.45fr 0.55fr;
    gap: 100px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Cover */
.sp-cover-col {
    display: flex;
    justify-content: center;
}

.sp-cover-frame {
    position: relative;
    max-width: 420px;
    width: 100%;
    animation: spCoverReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes spCoverReveal {
    from { opacity: 0; transform: scale(0.94) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.sp-cover-frame img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 40px 80px rgba(0,0,0,0.15);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
}

.sp-cover-frame:hover img {
    transform: translateY(-10px);
    box-shadow: 0 60px 100px rgba(0,0,0,0.2);
}

.sp-cover-glow {
    position: absolute;
    bottom: -40px;
    left: 10%;
    right: 10%;
    height: 80px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.06) 0%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

/* Details Column */
.sp-details-col {
    padding: 10px 0;
}

.sp-header-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.sp-category {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(201,169,98,0.1);
    border: 1px solid rgba(201,169,98,0.2);
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #c9a962;
}

.sp-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
}

.sp-rating i { color: #f5a623; font-size: 10px; }

.sp-title {
    font-family: var(--font-serif);
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.05;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    opacity: 0;
    animation: spFadeUp 0.8s ease forwards 0.15s;
}

.sp-subtitle {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    color: #888;
    margin: 0 0 20px;
    line-height: 1.5;
    opacity: 0;
    animation: spFadeUp 0.8s ease forwards 0.25s;
}

.sp-author-line {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #bbb;
    margin: 0 0 28px;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: spFadeUp 0.8s ease forwards 0.3s;
}

.sp-author-line strong {
    color: #1a1a1a;
    font-weight: 600;
}

.sp-desc {
    margin-bottom: 40px;
    opacity: 0;
    animation: spFadeUp 0.8s ease forwards 0.35s;
}

.sp-desc p {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.9;
    color: #888;
    max-width: 500px;
    margin: 0;
}

@keyframes spFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Purchase Section */
.sp-purchase {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 40px;
    padding-top: 32px;
    border-top: 1px solid #f0f0f0;
    opacity: 0;
    animation: spFadeUp 0.8s ease forwards 0.4s;
}

.sp-purchase-digital {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 28px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 28px;
}

.sp-price-wrap { min-width: 110px; }

.sp-price-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #bbb;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sp-price {
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

.sp-purchase-actions {
    display: flex;
    gap: 12px;
    flex: 1;
}

.sp-btn-buy {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.35s ease;
}

.sp-btn-buy:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.sp-btn-buy i { font-size: 10px; transition: transform 0.3s ease; }
.sp-btn-buy:hover i { transform: translateX(3px); }

.sp-btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 22px;
    background: transparent;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-btn-cart:hover {
    border-color: #1a1a1a;
    color: #1a1a1a;
    background: #fafafa;
}

.sp-btn-cart i { font-size: 10px; }

/* Paperback */
.sp-purchase-paperback {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-retailer-row { display: flex; gap: 14px; }

.sp-retailer {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.35s ease;
}

.sp-retailer:hover {
    background: #fff;
    border-color: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.sp-retailer > i:first-child,
.sp-retailer > svg:first-child {
    font-size: 18px;
    color: #ccc;
    width: 22px;
    height: 22px;
    text-align: center;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.sp-retailer:hover > i:first-child,
.sp-retailer:hover > svg:first-child { color: #1a1a1a; }

.sp-retailer div { flex: 1; }

.sp-retailer div span {
    display: block;
    font-family: var(--font-sans);
    font-size: 9px;
    color: #bbb;
    letter-spacing: 0.05em;
}

.sp-retailer div strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 2px;
}

.sp-ext-icon {
    font-size: 9px !important;
    color: #ddd !important;
    width: auto !important;
}

.sp-retailer.amazon { border-left: 3px solid #d48d3b; }
.sp-retailer.takealot { border-left: 3px solid #4a90e2; }

/* Trust */
.sp-trust {
    display: flex;
    gap: 24px;
    opacity: 0;
    animation: spFadeUp 0.8s ease forwards 0.5s;
}

.sp-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #bbb;
    text-transform: uppercase;
}

.sp-trust-item i {
    font-size: 11px;
    color: #4caf50;
}

/* ── Specs Bar ── */
.sp-specs-bar {
    padding: 50px 0;
    background: #faf9f6;
    border-top: 1px solid #f0ede8;
    border-bottom: 1px solid #f0ede8;
}

.sp-specs-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.sp-spec { text-align: center; }

.sp-spec-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #bbb;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sp-spec-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.sp-isbn { font-size: 14px; color: #888; letter-spacing: 0.02em; }

.sp-spec-divider {
    width: 1px;
    height: 36px;
    background: #e5e0d8;
}

/* ── Synopsis ── */
.sp-synopsis {
    position: relative;
    padding: 120px 0;
    background: #fff;
    overflow: hidden;
}

.sp-synopsis-watermark {
    position: absolute;
    top: -60px;
    right: -40px;
    font-family: var(--font-serif);
    font-size: clamp(200px, 35vw, 500px);
    line-height: 1;
    color: #f8f8f8;
    pointer-events: none;
    z-index: 0;
    font-weight: 400;
}

.sp-synopsis-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 100px;
    position: relative;
    z-index: 1;
    align-items: start;
}

.sp-section-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #c9a962;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.sp-section-title {
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.sp-synopsis-text {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.85;
    color: #666;
    max-width: 600px;
}

.sp-synopsis-text p { margin-bottom: 28px; }
.sp-synopsis-text p:last-child { margin-bottom: 0; }

.sp-drop-cap::first-letter {
    float: left;
    font-size: 88px;
    line-height: 0.75;
    padding-right: 14px;
    padding-top: 6px;
    font-family: var(--font-serif);
    color: #1a1a1a;
}

/* Author Card */
.sp-synopsis-aside {
    padding-top: 10px;
}

.sp-author-card {
    position: relative;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.05);
    transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.5s ease;
}

.sp-author-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.08);
}

.sp-author-card-accent {
    height: 3px;
    background: linear-gradient(90deg, #c9a962, rgba(201,169,98,0.2));
}

.sp-author-card-inner {
    padding: 50px 40px;
}

.sp-quote-icon {
    margin-bottom: 24px;
    color: #c9a962;
    font-size: 22px;
    opacity: 0.5;
}

.sp-author-card h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 24px;
}

.sp-author-quote-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.85;
    color: #777;
    margin: 0 0 40px;
}

.sp-author-mini {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.sp-author-mini img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(100%);
}

.sp-author-mini-name {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #1a1a1a;
    text-transform: uppercase;
}

.sp-author-mini-role {
    display: block;
    font-family: var(--font-sans);
    font-size: 9px;
    color: #bbb;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* ── Reviews ── */
.sp-reviews {
    padding: 100px 0;
    background: #fcfcfc;
}

.sp-reviews-header {
    text-align: center;
    margin-bottom: 60px;
}

.sp-reviews-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.sp-review-card {
    background: #fff;
    padding: 40px;
    border-radius: 6px;
    border: 1px solid #f2f2f2;
    box-shadow: 0 6px 20px rgba(0,0,0,0.02);
    transition: all 0.35s ease;
}

.sp-review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.05);
    border-color: #eee;
}

.sp-review-stars {
    color: #f5a623;
    margin-bottom: 20px;
    display: flex;
    gap: 2px;
}

.sp-review-stars i { font-size: 11px; }

.sp-review-body {
    margin-bottom: 24px;
}

.sp-review-body p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin: 0;
}

.sp-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #f8f8f8;
    font-size: 11px;
    color: #bbb;
}

.sp-review-name {
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sp-no-reviews {
    text-align: center;
    padding: 60px 0;
    color: #bbb;
}

.sp-no-reviews i {
    font-size: 36px;
    margin-bottom: 16px;
    display: block;
    color: #ddd;
}

.sp-no-reviews p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    margin: 0;
}

/* Review Form */
.sp-review-form-wrap {
    max-width: 640px;
    margin: 60px auto 0;
    padding-top: 50px;
    border-top: 1px solid #f0f0f0;
    text-align: left;
}

.sp-review-form-wrap h3 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 30px;
    text-align: center;
}

.sp-rating-input {
    margin-bottom: 24px;
}

.sp-rating-input > label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.star-rating-input input { display: none; }

.star-rating-input label {
    cursor: pointer;
    font-size: 24px;
    color: #e0e0e0;
    transition: color 0.2s ease;
}

.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input input:checked ~ label {
    color: #c9a962;
}

.sp-form-group { margin-bottom: 24px; }

.sp-form-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.sp-form-textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    background: #fafafa;
    font-family: var(--font-sans);
    font-size: 14px;
    color: #1a1a1a;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s ease;
}

.sp-form-textarea:focus {
    outline: none;
    border-color: #1a1a1a;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.sp-form-textarea::placeholder { color: #ccc; }

.sp-btn-submit-review {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-btn-submit-review:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.sp-btn-submit-review i { font-size: 10px; transition: transform 0.3s ease; }
.sp-btn-submit-review:hover i { transform: translateX(3px); }

.sp-review-login {
    text-align: center;
    margin-top: 50px;
    padding: 40px;
    background: #fff;
    border: 1px dashed #e8e8e8;
    border-radius: 6px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.sp-review-login p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #999;
    margin: 0;
}

.sp-review-login a {
    color: #c9a962;
    font-weight: 600;
    text-decoration: none;
}

.sp-review-login a:hover { text-decoration: underline; }

/* ── Related Books ── */
.sp-related {
    padding: 100px 0;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.sp-related-header {
    text-align: center;
    margin-bottom: 60px;
}

.sp-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.sp-related-card { text-align: center; }

.sp-related-cover {
    display: block;
    aspect-ratio: 2/3;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sp-related-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-related-card:hover .sp-related-cover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.15);
}

.sp-related-cat {
    display: block;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #c9a962;
    margin-bottom: 8px;
}

.sp-related-info h3 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.sp-related-info h3 a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sp-related-info h3 a:hover { color: #c9a962; }

/* ── Journey CTA ── */
.sp-cta {
    padding: 140px 0;
    background: #0a0a0a;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sp-cta-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(201,169,98,0.04) 0%, transparent 70%);
    pointer-events: none;
}

.sp-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.sp-cta-title {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.sp-cta-desc {
    font-family: var(--font-serif);
    font-size: 17px;
    font-style: italic;
    color: rgba(255,255,255,0.45);
    line-height: 1.8;
    margin: 0 0 50px;
}

.sp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 40px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.4s ease;
}

.sp-cta-btn:hover {
    background: #fff;
    color: #1a1a1a;
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.sp-cta-btn i { font-size: 10px; transition: transform 0.3s ease; }
.sp-cta-btn:hover i { transform: translateX(4px); }

/* ── Single Product Responsive ── */
@media (max-width: 991px) {
    .sp-hero {
        min-height: auto;
        padding: calc(70px + 40px) 0 80px;
    }

    .sp-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .sp-cover-frame { max-width: 340px; margin: 0 auto; }

    .sp-title { font-size: 48px; }

    .sp-purchase-digital {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .sp-purchase-actions { flex-direction: column; }

    .sp-retailer-row { flex-direction: column; }

    .sp-trust { flex-wrap: wrap; gap: 16px; }

    .sp-specs-grid { gap: 28px; flex-wrap: wrap; }

    .sp-synopsis-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .sp-synopsis-watermark { font-size: 180px; top: 0; }

    .sp-section-title { font-size: 36px; }

    .sp-reviews-grid { grid-template-columns: 1fr; }

    .sp-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .sp-cta-title { font-size: 38px; }
}

@media (max-width: 576px) {
    .sp-top-bar { flex-direction: column; gap: 16px; align-items: flex-start; }
    .sp-back-link span { display: none; }
    .sp-action-btn span { display: none; }
    .sp-action-btn { padding: 10px 14px; }

    .sp-title { font-size: 38px; }
    .sp-subtitle { font-size: 18px; }

    .sp-price { font-size: 28px; }

    .sp-specs-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .sp-spec-divider { display: none; }

    .sp-related-grid { grid-template-columns: 1fr; gap: 40px; }

    .sp-cta { padding: 100px 0; }
    .sp-cta-title { font-size: 32px; }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll Reveal Class */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Journal Page — Premium Editorial (jn-)
   ============================================ */

/* ── Hero with JOURNAL Watermark ── */
.jn-hero {
    position: relative;
    padding: calc(70px + 110px) 0 60px;
    text-align: center;
    background: #faf9f6;
    color: #1a1a1a;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.jn-hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: clamp(80px, 13vw, 200px);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.03);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    user-select: none;
    line-height: 1;
}

.jn-hero-frame {
    position: absolute;
    top: 40px; left: 40px; right: 40px; bottom: 40px;
    border: 1px solid rgba(201, 169, 98, 0.12);
    pointer-events: none;
    z-index: 1;
}

.jn-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jn-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #c9a962;
    margin-bottom: 48px;
    text-transform: uppercase;
}

.jn-label-line {
    display: inline-block;
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a962, transparent);
}

.jn-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(56px, 9vw, 120px);
    font-weight: 400;
    line-height: 1.05;
    color: #1a1a1a;
    margin: 0 0 32px;
    letter-spacing: -0.03em;
}

.jn-hero-title em {
    font-style: italic;
    color: #c9a962;
}

.jn-hero-ornament {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.jn-hero-ornament span {
    display: block;
    width: 50px;
    height: 1px;
    background: #ddd;
}

.jn-hero-ornament i {
    font-size: 12px;
    color: #c9a962;
}

.jn-hero-sub {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.35em;
    color: #aaa;
    margin: 0;
    text-transform: uppercase;
}

.jn-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 50px;
    overflow: hidden;
    z-index: 2;
}

.jn-hero-scroll span {
    display: block;
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, #c9a962, transparent);
    animation: abScrollPulse 2s ease-in-out infinite;
}

/* ── Featured Post ── */
.jn-featured {
    padding: 100px 0;
    background: #fff;
}

.jn-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.jn-featured-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f0ede8;
}

.jn-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.6s ease;
}

.jn-featured-image:hover img {
    filter: grayscale(20%);
}

.jn-featured-content {
    padding: 10px 0;
}

.jn-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #c9a962;
    background: rgba(201, 169, 98, 0.08);
    padding: 6px 14px;
    margin-bottom: 28px;
}

.jn-featured-title {
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 20px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.jn-meta {
    display: flex;
    gap: 24px;
    font-family: var(--font-sans);
    font-size: 11px;
    color: #bbb;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}

.jn-meta i {
    margin-right: 6px;
    color: #ddd;
}

.jn-featured-excerpt {
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: #888;
    line-height: 1.9;
    margin: 0 0 32px;
}

.jn-read-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #1a1a1a;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.jn-read-link i {
    font-size: 9px;
    transition: transform 0.3s ease;
}

.jn-read-link:hover {
    color: #c9a962;
}

.jn-read-link:hover i {
    transform: translateX(4px);
}

/* ── Posts Grid ── */
.jn-posts {
    padding: 100px 0 120px;
    background: #faf9f6;
}

.jn-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
}

.jn-card {
    background: #fff;
    border: 1px solid #f0ede8;
    transition: all 0.4s ease;
    overflow: hidden;
}

.jn-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}

.jn-card-image {
    display: block;
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.jn-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.jn-card:hover .jn-card-image img {
    filter: grayscale(0);
}

.jn-card-cat {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    background: #c9a962;
    padding: 4px 10px;
}

.jn-card-body {
    padding: 28px 28px 32px;
}

.jn-card-meta {
    display: flex;
    gap: 20px;
    font-family: var(--font-sans);
    font-size: 10px;
    color: #bbb;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}

.jn-card-body h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 12px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.jn-card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.jn-card-body h3 a:hover {
    color: #c9a962;
}

.jn-card-body p {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #999;
    line-height: 1.85;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jn-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #bbb;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.jn-card-link i {
    font-size: 8px;
    transition: transform 0.3s ease;
}

.jn-card-link:hover {
    color: #c9a962;
}

.jn-card-link:hover i {
    transform: translateX(4px);
}

/* ── Load More ── */
.jn-load-more {
    text-align: center;
    margin-top: 60px;
}

.jn-load-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #bbb;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px 36px;
    border: 1px solid #e5e0d8;
    transition: all 0.35s ease;
}

.jn-load-btn:hover {
    border-color: #c9a962;
    color: #c9a962;
    transform: translateY(-2px);
}

/* ── Journal Page Responsive ── */
@media (max-width: 991px) {
    .jn-hero {
        min-height: 65vh;
        padding: calc(70px + 60px) 0 80px;
    }
    .jn-hero-frame { top: 24px; left: 24px; right: 24px; bottom: 24px; }
    .jn-hero-watermark { font-size: 80px; }
    .jn-hero-title { font-size: 64px; }
    .jn-featured { padding: 80px 0; }
    .jn-featured-grid { grid-template-columns: 1fr; gap: 40px; }
    .jn-featured-title { font-size: 28px; }
    .jn-posts { padding: 80px 0; }
    .jn-posts-grid { grid-template-columns: 1fr; max-width: 500px; }
}

@media (max-width: 576px) {
    .jn-hero { min-height: 60vh; padding: calc(70px + 50px) 0 70px; }
    .jn-hero-frame { top: 16px; left: 16px; right: 16px; bottom: 16px; }
    .jn-hero-watermark { font-size: 48px; }
    .jn-hero-title { font-size: 46px; }
    .jn-hero-sub { font-size: 10px; letter-spacing: 0.2em; }
    .jn-hero-ornament span { width: 30px; }
    .jn-label-line { width: 30px; }
    .jn-featured { padding: 60px 0; }
    .jn-featured-title { font-size: 24px; }
    .jn-card-body { padding: 22px 20px 26px; }
}

/* ============================================
   Single Journal Post — Premium Editorial (sj-)
   ============================================ */

/* ── Hero ── */
.sj-hero {
    position: relative;
    padding: calc(70px + 80px) 0 70px;
    text-align: center;
    background: #faf9f6;
    color: #1a1a1a;
    overflow: hidden;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sj-hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: clamp(70px, 12vw, 180px);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.03);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    user-select: none;
    line-height: 1;
}

.sj-hero-frame {
    position: absolute;
    top: 40px; left: 40px; right: 40px; bottom: 40px;
    border: 1px solid rgba(201, 169, 98, 0.12);
    pointer-events: none;
    z-index: 1;
}

.sj-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #bbb;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.sj-back i {
    font-size: 9px;
    transition: transform 0.3s ease;
}

.sj-back:hover {
    color: #c9a962;
}

.sj-back:hover i {
    transform: translateX(-4px);
}

.sj-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.sj-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.sj-meta-cat {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #c9a962;
}

.sj-meta-sep {
    width: 4px;
    height: 4px;
    background: #ddd;
    border-radius: 50%;
}

.sj-meta-date,
.sj-meta-read {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #bbb;
}

.sj-meta-read i {
    margin-right: 4px;
    font-size: 9px;
}

.sj-title {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 400;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0 0 36px;
    letter-spacing: -0.02em;
}

.sj-hero-ornament {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sj-hero-ornament span {
    display: block;
    width: 50px;
    height: 1px;
    background: #ddd;
}

.sj-hero-ornament i {
    font-size: 12px;
    color: #c9a962;
}

/* ── Featured Image ── */
.sj-featured-img {
    padding: 60px 0 0;
    background: #fff;
}

.sj-img-wrap {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.sj-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

.sj-img-caption {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-style: italic;
    color: #bbb;
    margin-top: 18px;
    letter-spacing: 0.02em;
}

/* ── Author Bar ── */
.sj-author {
    background: #fff;
    padding: 40px 0;
}

.sj-author-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 36px;
    border-bottom: 1px solid #f0ede8;
}

.sj-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f0ede8;
}

.sj-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sj-author-details {
    flex: 1;
}

.sj-author-name {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1a1a1a;
}

.sj-author-role {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #bbb;
    margin-top: 2px;
}

.sj-share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #f0ede8;
    border-radius: 50%;
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sj-share-btn:hover {
    border-color: #c9a962;
    color: #c9a962;
}

/* ── Post Content ── */
.sj-content {
    background: #fff;
    padding: 0 0 80px;
}

.sj-content-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 50px 20px 0;
}

.sj-content-inner p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 2;
    color: #555;
    margin-bottom: 28px;
}

.sj-content-inner p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-size: 56px;
    font-weight: 400;
    float: left;
    line-height: 1;
    margin-right: 10px;
    margin-top: 4px;
    color: #c9a962;
}

.sj-content-inner h2 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 48px 0 20px;
    letter-spacing: -0.01em;
}

.sj-content-inner h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 40px 0 16px;
}

.sj-content-inner blockquote {
    border-left: 3px solid #c9a962;
    margin: 40px 0;
    padding: 20px 0 20px 32px;
    font-family: var(--font-serif);
    font-size: 20px;
    font-style: italic;
    color: #888;
    line-height: 1.7;
}

.sj-content-inner ul,
.sj-content-inner ol {
    margin: 24px 0;
    padding-left: 24px;
    color: #555;
    line-height: 2;
}

.sj-content-inner img {
    max-width: 100%;
    height: auto;
    margin: 40px 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

/* ── End Ornament ── */
.sj-end-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 0 80px;
    background: #fff;
}

.sj-end-ornament span {
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
}

.sj-end-ornament i {
    font-size: 14px;
    color: #c9a962;
}

/* ── Related Posts ── */
.sj-related {
    padding: 100px 0 120px;
    background: #faf9f6;
    border-top: 1px solid #f0ede8;
}

.sj-related-header {
    text-align: center;
    margin-bottom: 60px;
}

.sj-related-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #c9a962;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.sj-related-title {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.02em;
}

.sj-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
}

.sj-related-card {
    background: #fff;
    border: 1px solid #f0ede8;
    overflow: hidden;
    transition: all 0.4s ease;
}

.sj-related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}

.sj-related-image {
    display: block;
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.sj-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.sj-related-card:hover .sj-related-image img {
    filter: grayscale(0);
}

.sj-related-cat {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    background: #c9a962;
    padding: 4px 10px;
}

.sj-related-body {
    padding: 28px 28px 32px;
}

.sj-related-meta {
    display: flex;
    gap: 20px;
    font-family: var(--font-sans);
    font-size: 10px;
    color: #bbb;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}

.sj-related-body h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 12px;
    line-height: 1.35;
}

.sj-related-body h3 a {
    color: inherit;
    text-decoration: none;
}

.sj-related-body h3 a:hover {
    color: #c9a962;
}

.sj-related-body p {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #999;
    line-height: 1.85;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sj-related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #bbb;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.sj-related-link i {
    font-size: 8px;
    transition: transform 0.3s ease;
}

.sj-related-link:hover {
    color: #c9a962;
}

.sj-related-link:hover i {
    transform: translateX(4px);
}

/* ── Next Post ── */
.sj-next {
    padding: 100px 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid #f0ede8;
}

.sj-next-inner {
    max-width: 600px;
    margin: 0 auto;
}

.sj-next-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #c9a962;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.sj-next-title {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 16px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.sj-next-excerpt {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #aaa;
    line-height: 1.8;
    margin: 0 0 32px;
}

.sj-next-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #1a1a1a;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px 36px;
    border: 1px solid #e5e0d8;
    transition: all 0.35s ease;
}

.sj-next-link i {
    font-size: 9px;
    transition: transform 0.3s ease;
}

.sj-next-link:hover {
    border-color: #c9a962;
    color: #c9a962;
    transform: translateY(-2px);
}

.sj-next-link:hover i {
    transform: translateX(4px);
}

/* ── Single Post Responsive ── */
@media (max-width: 991px) {
    .sj-hero {
        min-height: 50vh;
        padding: calc(70px + 50px) 0 60px;
    }
    .sj-hero-frame { top: 24px; left: 24px; right: 24px; bottom: 24px; }
    .sj-hero-watermark { font-size: 70px; }
    .sj-title { font-size: 34px; }
    .sj-related-grid { grid-template-columns: 1fr; max-width: 500px; }
    .sj-related { padding: 80px 0; }
    .sj-next { padding: 80px 0; }
    .sj-next-title { font-size: 26px; }
}

@media (max-width: 576px) {
    .sj-hero { min-height: 45vh; padding: calc(70px + 40px) 0 50px; }
    .sj-hero-frame { top: 16px; left: 16px; right: 16px; bottom: 16px; }
    .sj-hero-watermark { font-size: 44px; }
    .sj-title { font-size: 26px; }
    .sj-back { margin-bottom: 30px; }
    .sj-meta { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .sj-hero-ornament span { width: 30px; }
    .sj-img-wrap { margin: 0 -15px; }
    .sj-content-inner { padding: 36px 0 0; }
    .sj-content-inner p { font-size: 15px; }
    .sj-content-inner p:first-of-type::first-letter { font-size: 44px; }
    .sj-content-inner blockquote { font-size: 17px; padding-left: 20px; }
    .sj-related-body { padding: 22px 20px 26px; }
    .sj-next-title { font-size: 22px; }
    .sj-related-title { font-size: 28px; }
}

/* Legacy post styles */
.post-hero { padding: calc(80px + var(--space-4xl)) 0 var(--space-3xl); text-align: center; }
.read-next { padding: var(--space-4xl) 0; border-top: 1px solid var(--color-border); margin-top: var(--space-4xl); }
.read-next h3 { text-align: center; margin-bottom: var(--space-2xl); }

/* ============================================
   About Page — Premium Editorial (ab-)
   ============================================ */

/* ── Hero with BIOGRAPHY Watermark ── */
.ab-hero {
    position: relative;
    padding: calc(70px + 110px) 0 60px;
    text-align: center;
    background: #faf9f6;
    color: #1a1a1a;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ab-hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: clamp(80px, 13vw, 200px);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.03);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    user-select: none;
    line-height: 1;
}

.ab-hero-frame {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    border: 1px solid rgba(201, 169, 98, 0.12);
    pointer-events: none;
    z-index: 1;
}

.ab-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ab-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #c9a962;
    margin-bottom: 48px;
    text-transform: uppercase;
}

.ab-label-line {
    display: inline-block;
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a962, transparent);
}

.ab-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(56px, 9vw, 120px);
    font-weight: 400;
    line-height: 1.05;
    color: #1a1a1a;
    margin: 0 0 32px;
    letter-spacing: -0.03em;
}

.ab-hero-title em {
    font-style: italic;
    color: #c9a962;
}

.ab-hero-ornament {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.ab-hero-ornament span {
    display: block;
    width: 50px;
    height: 1px;
    background: #ddd;
}

.ab-hero-ornament i {
    font-size: 12px;
    color: #c9a962;
}

.ab-hero-sub {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.35em;
    color: #aaa;
    margin: 0;
    text-transform: uppercase;
}

.ab-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 50px;
    overflow: hidden;
    z-index: 2;
}

.ab-hero-scroll span {
    display: block;
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, #c9a962, transparent);
    animation: abScrollPulse 2s ease-in-out infinite;
}

@keyframes abScrollPulse {
    0%, 100% { opacity: 0.3; transform: translateY(-100%); }
    50% { opacity: 1; transform: translateY(0); }
}

/* ── Biography Section ── */
.ab-bio {
    position: relative;
    padding: 130px 0;
    background: #fff;
    overflow: hidden;
}

.ab-bio-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 90px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.ab-bio-image {
    position: relative;
}

.ab-image-frame {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.ab-image-frame img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.8s ease;
}

.ab-bio-image:hover .ab-image-frame img {
    filter: grayscale(20%) contrast(1.05);
}

.ab-image-accent {
    position: absolute;
    top: 24px;
    left: 24px;
    right: -16px;
    bottom: -16px;
    border: 1px solid rgba(201, 169, 98, 0.18);
    z-index: 1;
    pointer-events: none;
}

.ab-bio-content {
    padding: 10px 0;
}

.ab-bio-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #c9a962;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.ab-bio-name {
    font-family: var(--font-serif);
    font-size: clamp(38px, 4.5vw, 58px);
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.15;
    margin: 0 0 32px;
    letter-spacing: -0.02em;
}

.ab-bio-name em {
    font-style: italic;
    color: #999;
}

.ab-bio-quote {
    font-family: var(--font-serif);
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    color: #555;
    line-height: 1.6;
    margin: 0 0 32px;
    padding-left: 24px;
    border-left: 3px solid #c9a962;
}

.ab-bio-text p {
    font-family: var(--font-sans);
    font-size: 14.5px;
    color: #777;
    line-height: 2;
    margin-bottom: 18px;
    max-width: 520px;
}

.ab-bio-text p:last-child {
    margin-bottom: 0;
}

.ab-bio-signature {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ab-sig-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #c9a962, transparent);
    margin-bottom: 10px;
}

.ab-sig-name {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.ab-sig-role {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #bbb;
    text-transform: uppercase;
}

/* ── Stats Bar ── */
.ab-stats {
    padding: 80px 0;
    background: #faf9f6;
    border-top: 1px solid #f0ede8;
    border-bottom: 1px solid #f0ede8;
}

.ab-stats-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

.ab-stat {
    text-align: center;
}

.ab-stat-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.ab-stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #bbb;
    text-transform: uppercase;
}

.ab-stat-div {
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg, transparent, #ddd, transparent);
}

/* ── Philosophy Section ── */
.ab-philosophy {
    padding: 130px 0;
    background: #fff;
}

.ab-philosophy-header {
    text-align: center;
    margin-bottom: 80px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.ab-philosophy-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #c9a962;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.ab-philosophy-title {
    font-family: var(--font-serif);
    font-size: 46px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.ab-philosophy-sub {
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    color: #aaa;
    margin: 0;
    line-height: 1.6;
}

.ab-philosophy-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}

.ab-phil-card {
    text-align: center;
    padding: 55px 40px 50px;
    background: #faf9f6;
    border: 1px solid #f0ede8;
    margin-left: -1px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.ab-phil-card:first-child {
    margin-left: 0;
}

.ab-phil-num {
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.03);
    letter-spacing: 0;
    line-height: 1;
}

.ab-phil-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #c9a962;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.ab-phil-card:hover {
    background: #fff;
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.07);
    z-index: 2;
}

.ab-phil-card:hover::before {
    transform: scaleX(1);
}

.ab-phil-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    background: #fff;
    border: 1px solid #ece8e1;
    border-radius: 50%;
    color: #c9a962;
    font-size: 18px;
    transition: all 0.4s ease;
}

.ab-phil-card:hover .ab-phil-icon {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #c9a962;
    transform: scale(1.1);
}

.ab-phil-card h3 {
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.ab-phil-card p {
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: #999;
    line-height: 1.9;
    margin: 0;
}

/* ── Available On ── */
.ab-available {
    padding: 90px 0;
    text-align: center;
    background: #faf9f6;
    border-top: 1px solid #f0ede8;
}

.ab-avail-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #ccc;
    margin-bottom: 44px;
    text-transform: uppercase;
}

.ab-avail-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.ab-avail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 32px;
    background: #fff;
    border: 1px solid #f0ede8;
    border-radius: 0;
    text-decoration: none;
    transition: all 0.35s ease;
}

.ab-avail-item:hover {
    border-color: #c9a962;
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.05);
}

.ab-avail-item i,
.ab-avail-item svg {
    font-size: 22px;
    width: 22px;
    height: 22px;
    color: #ccc;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.ab-avail-item:hover i,
.ab-avail-item:hover svg {
    color: #c9a962;
}

.ab-avail-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1px;
}

.ab-avail-text span {
    font-family: var(--font-sans);
    font-size: 10px;
    color: #bbb;
    letter-spacing: 0.05em;
}

.ab-avail-text strong {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

/* ── CTA Section ── */
.ab-cta {
    padding: 150px 0;
    background: #0a0a0a;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ab-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(201,169,98,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.ab-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 0 auto;
}

.ab-cta-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #c9a962;
    margin-bottom: 32px;
}

.ab-cta-title {
    font-family: var(--font-serif);
    font-size: 54px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 24px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ab-cta-desc {
    font-family: var(--font-serif);
    font-size: 17px;
    font-style: italic;
    color: rgba(255,255,255,0.4);
    line-height: 1.8;
    margin: 0 0 54px;
}

.ab-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 19px 44px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.4s ease;
}

.ab-cta-btn:hover {
    background: #c9a962;
    color: #0a0a0a;
    border-color: #c9a962;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(201,169,98,0.25);
}

.ab-cta-btn i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.ab-cta-btn:hover i {
    transform: translateX(4px);
}

/* ── About Page Responsive ── */
@media (max-width: 991px) {
    .ab-hero {
        min-height: 65vh;
        padding: calc(70px + 60px) 0 80px;
    }

    .ab-hero-frame {
        top: 24px; left: 24px; right: 24px; bottom: 24px;
    }

    .ab-hero-watermark { font-size: 80px; }
    .ab-hero-title { font-size: 64px; }

    .ab-bio { padding: 90px 0; }

    .ab-bio-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ab-bio-image {
        max-width: 420px;
        margin: 0 auto;
    }

    .ab-bio-name { font-size: 40px; }

    .ab-stats-grid { gap: 30px; }
    .ab-stat-num { font-size: 34px; }

    .ab-philosophy-cards {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ab-phil-card {
        margin-left: 0;
        margin-top: -1px;
    }

    .ab-phil-card:first-child { margin-top: 0; }
    .ab-phil-card { padding: 42px 32px; }
    .ab-philosophy-title { font-size: 36px; }

    .ab-avail-logos {
        flex-direction: column;
        gap: 16px;
    }

    .ab-avail-item {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .ab-cta-title { font-size: 40px; }
}

@media (max-width: 576px) {
    .ab-hero {
        min-height: 60vh;
        padding: calc(70px + 50px) 0 70px;
    }

    .ab-hero-frame {
        top: 16px; left: 16px; right: 16px; bottom: 16px;
    }

    .ab-hero-watermark { font-size: 48px; }
    .ab-hero-title { font-size: 46px; }

    .ab-hero-sub {
        font-size: 10px;
        letter-spacing: 0.2em;
    }

    .ab-hero-ornament span { width: 30px; }
    .ab-label-line { width: 30px; }

    .ab-bio { padding: 70px 0; }
    .ab-bio-name { font-size: 34px; }

    .ab-bio-quote {
        font-size: 17px;
        padding-left: 18px;
    }

    .ab-image-accent { display: none; }

    .ab-stats { padding: 60px 0; }

    .ab-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .ab-stat-div { display: none; }
    .ab-stat-num { font-size: 30px; }

    .ab-philosophy { padding: 80px 0; }
    .ab-philosophy-title { font-size: 30px; }
    .ab-cta { padding: 100px 0; }
    .ab-cta-title { font-size: 32px; }
}

/* Legacy Available On (keep for backward compat) */
.available-section { padding: var(--space-4xl) 0; text-align: center; border-top: 1px solid var(--color-border); }
.section-label-center { display: block; font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.retailer-logos { display: flex; justify-content: center; align-items: center; gap: var(--space-4xl); }
.retailer-text { font-size: var(--text-lg); color: var(--color-text-muted); letter-spacing: 0.05em; }
.retailer-text strong { font-weight: 600; color: var(--color-primary); }
.retailer-text i { font-size: 8px; vertical-align: middle; }

/* ============================================
   Contact Page — Premium Editorial (ct-)
   ============================================ */

/* ── Hero with CONNECT Watermark ── */
.ct-hero {
    position: relative;
    padding: calc(70px + 110px) 0 60px;
    text-align: center;
    background: #faf9f6;
    color: #1a1a1a;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ct-hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: clamp(80px, 13vw, 200px);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.03);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    user-select: none;
    line-height: 1;
}

.ct-hero-frame {
    position: absolute;
    top: 40px; left: 40px; right: 40px; bottom: 40px;
    border: 1px solid rgba(201, 169, 98, 0.12);
    pointer-events: none;
    z-index: 1;
}

.ct-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ct-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #c9a962;
    margin-bottom: 48px;
    text-transform: uppercase;
}

.ct-label-line {
    display: inline-block;
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a962, transparent);
}

.ct-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(56px, 9vw, 120px);
    font-weight: 400;
    line-height: 1.05;
    color: #1a1a1a;
    margin: 0 0 32px;
    letter-spacing: -0.03em;
}

.ct-hero-title em {
    font-style: italic;
    color: #c9a962;
}

.ct-hero-ornament {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.ct-hero-ornament span {
    display: block;
    width: 50px;
    height: 1px;
    background: #ddd;
}

.ct-hero-ornament i {
    font-size: 12px;
    color: #c9a962;
}

.ct-hero-sub {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.35em;
    color: #aaa;
    margin: 0;
    text-transform: uppercase;
}

.ct-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 50px;
    overflow: hidden;
    z-index: 2;
}

.ct-hero-scroll span {
    display: block;
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, #c9a962, transparent);
    animation: abScrollPulse 2s ease-in-out infinite;
}

/* ── Contact Cards ── */
.ct-cards {
    padding: 100px 0;
    background: #fff;
}

.ct-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}

.ct-card {
    padding: 50px 38px;
    background: #faf9f6;
    border: 1px solid #f0ede8;
    margin-left: -1px;
    text-align: left;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.ct-card:first-child { margin-left: 0; }

.ct-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: #c9a962;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.ct-card:hover {
    background: #fff;
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.07);
    z-index: 2;
}

.ct-card:hover::before {
    transform: scaleX(1);
}

.ct-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid #ece8e1;
    border-radius: 50%;
    color: #c9a962;
    font-size: 17px;
    transition: all 0.4s ease;
}

.ct-card:hover .ct-card-icon {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #c9a962;
    transform: scale(1.1);
}

.ct-card h3 {
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.ct-card p {
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: #999;
    line-height: 1.85;
    margin: 0 0 24px;
}

.ct-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #bbb;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.ct-card-link i {
    font-size: 8px;
    transition: transform 0.3s ease;
}

.ct-card-link:hover {
    color: #c9a962;
}

.ct-card-link:hover i {
    transform: translateX(4px);
}

/* ── Contact Form ── */
.ct-form-section {
    padding: 110px 0;
    background: #faf9f6;
}

.ct-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

.ct-form-header {
    text-align: center;
    margin-bottom: 50px;
}

.ct-form-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #c9a962;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.ct-form-title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.ct-form-desc {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #aaa;
    margin: 0;
}

.ct-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ct-form-group {
    margin-bottom: 24px;
}

.ct-input-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #999;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ct-input {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #e5e0d8;
    background: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.ct-input:focus {
    outline: none;
    border-color: #c9a962;
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.08);
}

.ct-input::placeholder {
    color: #ccc;
}

.ct-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px;
    cursor: pointer;
}

.ct-textarea {
    resize: vertical;
    min-height: 160px;
}

.ct-submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 40px;
    background: #1a1a1a;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.4s ease;
}

.ct-submit:hover {
    background: #c9a962;
    color: #0a0a0a;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(201, 169, 98, 0.2);
}

.ct-submit i {
    font-size: 12px;
}

/* ── Contact Info ── */
.ct-info {
    padding: 100px 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid #f0ede8;
}

.ct-quote {
    font-family: var(--font-serif);
    font-size: 20px;
    font-style: italic;
    color: #aaa;
    margin: 0 0 36px;
    line-height: 1.6;
}

.ct-email {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.ct-email a {
    font-family: var(--font-serif);
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 400;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.ct-email a:hover {
    color: #c9a962;
}

.ct-copy-btn {
    background: none;
    border: 1px solid #f0ede8;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ct-copy-btn:hover {
    border-color: #c9a962;
    color: #c9a962;
}

.ct-social {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.ct-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #f0ede8;
    border-radius: 50%;
    color: #ccc;
    text-decoration: none;
    transition: all 0.35s ease;
}

.ct-social a:hover {
    border-color: #c9a962;
    color: #c9a962;
    transform: translateY(-3px);
}

/* ── Contact Page Responsive ── */
@media (max-width: 991px) {
    .ct-hero {
        min-height: 65vh;
        padding: calc(70px + 60px) 0 80px;
    }
    .ct-hero-frame { top: 24px; left: 24px; right: 24px; bottom: 24px; }
    .ct-hero-watermark { font-size: 80px; }
    .ct-hero-title { font-size: 64px; }
    .ct-cards { padding: 80px 0; }
    .ct-cards-grid { grid-template-columns: 1fr; gap: 0; }
    .ct-card { margin-left: 0; margin-top: -1px; }
    .ct-card:first-child { margin-top: 0; }
    .ct-form-section { padding: 80px 0; }
    .ct-form-title { font-size: 32px; }
    .ct-email a { font-size: 24px; }
}

@media (max-width: 576px) {
    .ct-hero { min-height: 60vh; padding: calc(70px + 50px) 0 70px; }
    .ct-hero-frame { top: 16px; left: 16px; right: 16px; bottom: 16px; }
    .ct-hero-watermark { font-size: 48px; }
    .ct-hero-title { font-size: 46px; }
    .ct-hero-sub { font-size: 10px; letter-spacing: 0.2em; }
    .ct-hero-ornament span { width: 30px; }
    .ct-label-line { width: 30px; }
    .ct-form-row { grid-template-columns: 1fr; }
    .ct-form-title { font-size: 28px; }
    .ct-info { padding: 70px 0; }
    .ct-email a { font-size: 20px; }
}

/* ============================================
   Home Newsletter — Monthly Digest (nl-)
   ============================================ */
.home-newsletter {
    background: #050505;
    padding: 140px 0;
    position: relative;
    overflow: hidden;
    display: block;
}

/* ── Ambient Glow Effects ── */
.nl-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.nl-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.nl-glow-1 {
    top: -15%;
    right: -8%;
    width: 500px;
    height: 500px;
    background: rgba(201, 169, 98, 0.06);
    animation: nl-float 22s infinite alternate ease-in-out;
}

.nl-glow-2 {
    bottom: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: rgba(255, 255, 255, 0.015);
    animation: nl-float 28s infinite alternate-reverse ease-in-out;
}

.nl-glow-3 {
    top: 40%;
    left: 30%;
    width: 300px;
    height: 300px;
    background: rgba(201, 169, 98, 0.03);
    animation: nl-float 18s 5s infinite alternate ease-in-out;
}

@keyframes nl-float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -25px) scale(1.08); }
}

/* ── Watermark ── */
.nl-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: clamp(100px, 18vw, 280px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.015);
    letter-spacing: 0.15em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ── Gold Frame ── */
.nl-frame {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 1px solid rgba(201, 169, 98, 0.06);
    pointer-events: none;
    z-index: 1;
}

.home-newsletter .container {
    position: relative;
    z-index: 2;
}

/* ── Card ── */
.nl-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 0;
}

/* ── Left Content ── */
.nl-content {
    text-align: left;
}

.nl-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(201, 169, 98, 0.08);
    border: 1px solid rgba(201, 169, 98, 0.18);
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #c9a962;
    margin-bottom: 36px;
    transition: all 0.3s ease;
}

.nl-badge:hover {
    background: rgba(201, 169, 98, 0.14);
    border-color: rgba(201, 169, 98, 0.35);
}

.nl-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c9a962;
    animation: nl-pulse 2s infinite ease-in-out;
}

@keyframes nl-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

.nl-badge i {
    font-size: 11px;
}

.nl-title {
    font-family: var(--font-serif);
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0 0 28px;
}

.nl-title em {
    font-style: italic;
    background: linear-gradient(135deg, #c9a962, #e8d5a3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nl-desc {
    font-family: var(--font-serif);
    font-size: 17px;
    font-style: italic;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.45);
    max-width: 440px;
    margin: 0 0 36px;
}

/* Perks */
.nl-perks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nl-perk {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.3s ease;
}

.nl-perk:hover {
    color: rgba(255, 255, 255, 0.8);
}

.nl-perk i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #c9a962;
    background: rgba(201, 169, 98, 0.08);
    border: 1px solid rgba(201, 169, 98, 0.12);
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nl-perk:hover i {
    background: rgba(201, 169, 98, 0.15);
    border-color: rgba(201, 169, 98, 0.3);
    transform: translateX(2px);
}

/* ── Right Form Side ── */
.nl-form-side {
    display: flex;
    justify-content: flex-end;
}

.nl-form-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 40px 36px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s ease;
}

.nl-form-card:hover {
    border-color: rgba(201, 169, 98, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.nl-form-header {
    text-align: center;
    margin-bottom: 32px;
}

.nl-form-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.15), rgba(201, 169, 98, 0.05));
    border: 1px solid rgba(201, 169, 98, 0.2);
    border-radius: 14px;
    color: #c9a962;
    font-size: 20px;
}

.nl-form-heading {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.nl-form-sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

/* ── Form Fields ── */
.nl-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.nl-field {
    position: relative;
    display: flex;
    align-items: center;
}

.nl-field > i {
    position: absolute;
    left: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    transition: color 0.3s ease;
    z-index: 1;
}

.nl-input {
    width: 100%;
    padding: 16px 16px 16px 46px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
    outline: none;
    transition: all 0.35s ease;
}

.nl-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.nl-input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(201, 169, 98, 0.45);
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.08);
}

.nl-field:focus-within > i {
    color: #c9a962;
}

.nl-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #c9a962, #d4b872);
    color: #0a0a0a;
    border: none;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.nl-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.2));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nl-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(201, 169, 98, 0.25);
}

.nl-submit:hover::before {
    opacity: 1;
}

.nl-submit i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.nl-submit:hover i {
    transform: translateX(4px);
}

/* ── Trust Indicators ── */
.nl-trust {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.nl-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.nl-trust-item i {
    font-size: 10px;
    color: rgba(201, 169, 98, 0.5);
}

/* ── Success Message ── */
@keyframes nl-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.newsletter-success-msg {
    animation: nl-fadeIn 0.5s ease forwards;
}

/* ── Responsive — Tablet ── */
@media (max-width: 991px) {
    .home-newsletter {
        padding: 100px 0;
    }

    .nl-card {
        grid-template-columns: 1fr;
        gap: 56px;
        text-align: center;
    }

    .nl-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nl-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .nl-perks {
        align-items: center;
    }

    .nl-form-side {
        justify-content: center;
    }

    .nl-form-card {
        max-width: 480px;
    }
}

/* ── Responsive — Mobile ── */
@media (max-width: 576px) {
    .home-newsletter {
        padding: 80px 0;
    }

    .nl-title {
        font-size: 36px;
    }

    .nl-desc {
        font-size: 15px;
    }

    .nl-perks {
        gap: 12px;
    }

    .nl-perk {
        font-size: 12px;
    }

    .nl-form-card {
        padding: 32px 24px;
        border-radius: 16px;
    }

    .nl-form-heading {
        font-size: 20px;
    }

    .nl-trust {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* ============================================
   Auth Page — Premium Editorial (au-)
   ============================================ */

/* ── Shell ── */
.au {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background: #faf9f6;
}

/* ── Dark Showcase Panel (Left) ── */
.au-showcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 100vh;
    background: #080808;
}

.au-showcase-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0c0c0c 0%, #080808 50%, #0a0a0a 100%);
    z-index: 0;
}

.au-showcase-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 1;
}

.au-glow-1 {
    top: -15%;
    right: -10%;
    width: 450px;
    height: 450px;
    background: rgba(201, 169, 98, 0.07);
    animation: au-drift 20s infinite alternate ease-in-out;
}

.au-glow-2 {
    bottom: -20%;
    left: -15%;
    width: 550px;
    height: 550px;
    background: rgba(201, 169, 98, 0.04);
    animation: au-drift 26s infinite alternate-reverse ease-in-out;
}

@keyframes au-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, -15px) scale(1.06); }
}

.au-showcase-watermark {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-serif);
    font-size: clamp(90px, 14vw, 220px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.015);
    letter-spacing: 0.12em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.au-showcase-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 50px;
}

.au-showcase-frame {
    position: absolute;
    inset: 36px;
    border: 1px solid rgba(201, 169, 98, 0.08);
    pointer-events: none;
}

.au-showcase-content {
    text-align: center;
    max-width: 380px;
}

/* Brand Mark */
.au-brand-mark {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 36px;
    background: rgba(201, 169, 98, 0.08);
    border: 1px solid rgba(201, 169, 98, 0.15);
    border-radius: 16px;
}

.au-brand-mark i {
    font-size: 22px;
    color: #c9a962;
}

.au-brand-title {
    font-family: var(--font-serif);
    font-size: clamp(38px, 4.5vw, 58px);
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.03em;
}

.au-brand-title em {
    font-style: italic;
    background: linear-gradient(135deg, #c9a962, #e8d5a3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.au-brand-tagline {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0 40px;
}

/* Brand Divider */
.au-brand-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}

.au-brand-divider span {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,98,0.25), transparent);
}

.au-brand-divider i {
    font-size: 6px;
    color: #c9a962;
    opacity: 0.6;
}

/* Stats */
.au-brand-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 44px;
}

.au-stat { text-align: center; }

.au-stat-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.au-stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

.au-stat-sep {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, rgba(201,169,98,0.2), transparent);
}

/* Quote */
.au-brand-quote {
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.7;
    margin: 0 0 40px;
    padding: 0;
    border: none;
}

/* Social Proof */
.au-social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.au-avatars {
    display: flex;
}

.au-avatar-dot {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border: 2px solid #080808;
    margin-left: -8px;
}

.au-avatar-dot:first-child { margin-left: 0; }

.au-avatar-dot:nth-child(1) { background: #c9a962; }
.au-avatar-dot:nth-child(2) { background: #7c6d4f; }
.au-avatar-dot:nth-child(3) { background: #4a4030; }
.au-avatar-dot:nth-child(4) {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    font-size: 11px;
}

.au-proof-text {
    font-family: var(--font-sans);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
}

/* ── Form Panel (Right) ── */
.au-form-panel {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #faf7f0 0%, #f5f0e8 50%, #faf7f0 100%);
    position: relative;
    min-height: 100vh;
}
.au-form-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #a88a40, #e8d5a3, #c9a962, #a88a40);
    background-size: 200% 100%;
    animation: au-gold-bar 4s linear infinite;
}
@keyframes au-gold-bar {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.au-mob-header {
    display: none;
}

.au-form-scroll {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 52px;
    overflow-y: auto;
}

.au-form-container {
    width: 100%;
    max-width: 420px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(201,169,98,0.2);
    border-radius: 20px;
    padding: 48px 44px 44px;
    box-shadow:
        0 24px 64px rgba(100,80,30,0.12),
        0 2px 0 rgba(201,169,98,0.15) inset,
        0 0 0 1px rgba(255,255,255,0.6) inset;
    animation: au-card-in 0.55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes au-card-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Pill Toggle ── */
.au-toggle {
    display: flex;
    position: relative;
    background: #f5f3ef;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 36px;
}

.au-toggle-btn {
    flex: 1;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #999;
    text-decoration: none;
    padding: 12px 0;
    border-radius: 9px;
    position: relative;
    z-index: 2;
    transition: color 0.35s ease;
}

.au-toggle-btn.active { color: #1a1a1a; }

.au-toggle-btn:hover:not(.active) { color: #666; }

.au-toggle-pill {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Alert ── */
.au-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-family: var(--font-sans);
    font-size: 13px;
    margin-bottom: 24px;
    border-radius: 10px;
    border: 1px solid;
}

.au-alert i { font-size: 15px; flex-shrink: 0; }

.au-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.au-alert-success {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

/* ── Heading ── */
.au-heading {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(201,169,98,0.18);
    position: relative;
}
.au-heading::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 48px; height: 2px;
    background: linear-gradient(90deg, #c9a962, transparent);
}

.au-title {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 8px;
    letter-spacing: -0.025em;
}

.au-subtitle {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #7a7060;
    margin: 0;
    line-height: 1.65;
}

/* ── Fields ── */
.au-field { margin-bottom: 20px; }

.au-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.au-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.au-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.5px solid rgba(201,169,98,0.2);
    border-radius: 12px;
    background: rgba(255,255,255,0.9);
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 2px 6px rgba(100,80,30,0.05);
}

.au-input-wrap.focused,
.au-input-wrap:focus-within {
    border-color: #c9a962;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(201,169,98,0.18), 0 4px 16px rgba(201,169,98,0.12);
    transform: translateY(-1px);
}

.au-input-wrap > i {
    position: absolute;
    left: 14px;
    color: #c9b87a;
    font-size: 14px;
    transition: color 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.au-input-wrap.focused > i,
.au-input-wrap:focus-within > i {
    color: #a88a40;
    transform: scale(1.1);
}

.au-input {
    width: 100%;
    padding: 14px 14px 14px 42px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: #1a1a1a;
    background: transparent;
    border: none;
    border-radius: 10px;
    outline: none;
}

.au-input-pass { padding-right: 48px; }

.au-input::placeholder { color: #c5c0b8; }

/* Password Eye Toggle */
.au-eye {
    position: absolute;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    z-index: 1;
}

.au-eye:hover {
    color: #999;
    background: rgba(0,0,0,0.04);
}

/* Password Strength Bar */
.au-pw-strength {
    height: 3px;
    background: #f0ede8;
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}

.au-pw-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.35s ease, background 0.35s ease;
}

.au-pw-fill.weak { background: #ef4444; }
.au-pw-fill.medium { background: #f59e0b; }
.au-pw-fill.strong { background: #22c55e; }

/* ── Submit ── */
.au-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    margin-top: 8px;
    background: linear-gradient(135deg, #c9a962 0%, #a88a40 100%);
    color: #0a0a0a;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(201,169,98,0.45), 0 2px 0 rgba(255,255,255,0.2) inset;
}

.au-submit::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.au-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(201,169,98,0.6), 0 2px 0 rgba(255,255,255,0.2) inset;
}

.au-submit:hover::before { left: 130%; }
.au-submit:active { transform: translateY(0); }

.au-submit i {
    font-size: 12px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.au-submit span { position: relative; z-index: 1; }

.au-submit:hover i { transform: translateX(4px); }

.au-submit.loading {
    pointer-events: none;
    opacity: 0.8;
}

/* ── Or Divider ── */
.au-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
}

.au-or span {
    flex: 1;
    height: 1px;
    background: #f0ede8;
}

.au-or em {
    font-family: var(--font-sans);
    font-size: 11px;
    font-style: normal;
    color: #ccc;
}

/* ── Demo Button ── */
.au-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 24px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-decoration: none;
    border: 1.5px solid #eeebe5;
    border-radius: 10px;
    transition: all 0.35s ease;
}

.au-demo i {
    font-size: 13px;
    color: #c9a962;
}

.au-demo:hover {
    border-color: #c9a962;
    color: #c9a962;
    background: rgba(201,169,98,0.04);
}

/* ── Terms ── */
.au-terms {
    text-align: center;
    margin-top: 20px;
    font-family: var(--font-sans);
    font-size: 11px;
    color: #bbb;
    line-height: 1.6;
}

.au-terms a {
    color: #c9a962;
    text-decoration: none;
    font-weight: 600;
}

.au-terms a:hover { text-decoration: underline; }

/* ── Switch Text ── */
.au-switch-text {
    text-align: center;
    margin-top: 24px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: #aaa;
}

.au-switch-text a {
    color: #c9a962;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.au-switch-text a:hover { color: #1a1a1a; }

/* ── Forgot Password Link ── */
.au-forgot-row {
    text-align: right;
    margin: -4px 0 8px;
}

.au-forgot-link {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #c9a962;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.au-forgot-link:hover { color: #1a1a1a; }

/* ── OTP Icon ── */
.au-otp-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a962 0%, #d4b97a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.au-otp-icon i {
    font-size: 22px;
    color: #fff;
}

/* ── OTP Input Group ── */
.au-otp-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 28px 0;
}

.au-otp-input {
    width: 52px;
    height: 60px;
    border: 2px solid #e4e4e7;
    border-radius: 10px;
    background: #fafafa;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    -moz-appearance: textfield;
}

.au-otp-input::-webkit-outer-spin-button,
.au-otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.au-otp-input:focus {
    border-color: #c9a962;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15);
}

.au-otp-input:not(:placeholder-shown) {
    border-color: #c9a962;
    background: #fff;
}

.au-otp-sep {
    font-size: 20px;
    font-weight: 300;
    color: #d4d4d8;
    margin: 0 2px;
    user-select: none;
}

/* ── OTP Footer ── */
.au-otp-footer {
    text-align: center;
    margin-top: 20px;
}

.au-otp-timer {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #71717a;
    margin: 0 0 10px;
}

.au-otp-timer strong {
    color: #1a1a1a;
    font-weight: 600;
}

.au-otp-resend {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #a1a1aa;
    margin: 0;
}

.au-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: #c9a962;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.au-link-btn:hover { color: #1a1a1a; text-decoration: underline; }

/* ── OTP responsive ── */
@media (max-width: 480px) {
    .au-otp-input {
        width: 42px;
        height: 50px;
        font-size: 20px;
    }
    .au-otp-group { gap: 5px; }
    .au-otp-sep { font-size: 16px; }
}

/* Dynamic CMS Runtime */
.cms-page-shell {
    display: grid;
    gap: 0;
}

.cms-section {
    padding: 72px 0;
    position: relative;
}

.cms-section-inner {
    display: grid;
    gap: 16px;
}

.cms-eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 700;
}

.cms-section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    margin: 0;
    font-family: var(--font-serif);
}

.cms-section-subtitle,
.cms-section-description {
    color: #4b5563;
    max-width: 780px;
    margin: 0;
}

.cms-components {
    display: grid;
    gap: 14px;
}

.cms-heading {
    margin: 0;
}

.cms-text,
.cms-richtext {
    margin: 0;
    line-height: 1.65;
    color: #374151;
}

.cms-image img {
    width: 100%;
    display: block;
    border-radius: 14px;
}

.cms-video video {
    width: 100%;
    border-radius: 14px;
}

.cms-button-wrap {
    margin-top: 6px;
}

.cms-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 10px 18px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

.cms-button:hover {
    background: #1f2937;
    color: #fff;
}

.cms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.cms-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cms-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(17,24,39,0.08);
}

.cms-card a {
    display: block;
    color: inherit;
}

.cms-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.cms-card h3 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 10px 12px 8px;
}

.cms-card p {
    font-size: 13px;
    color: #6b7280;
    margin: 0 12px 12px;
}

.cms-card-badge {
    display: inline-flex;
    margin: 10px 12px 0;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.cms-empty {
    color: #6b7280;
}

.cms-dynamic-form {
    display: grid;
    gap: 14px;
    max-width: 760px;
}

.cms-form-group {
    display: grid;
    gap: 6px;
}

.cms-form-group label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4b5563;
    font-weight: 600;
}

.cms-form-group input,
.cms-form-group textarea,
.cms-form-group select {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    color: #111827;
    background: #fff;
}

.cms-form-group small {
    font-size: 12px;
    color: #6b7280;
}

.cms-dynamic-form button[type=\"submit\"] {
    justify-self: start;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    background: #111827;
    color: #fff;
}

.cms-dynamic-form button[type=\"submit\"]:hover {
    background: #1f2937;
}

/* ── Auth Responsive — Tablet ── */
@media (max-width: 991px) {
    .au {
        grid-template-columns: 1fr;
    }

    .au-showcase {
        display: none;
    }

    .au-form-panel {
        min-height: 100vh;
        background: #f8f6f2;
    }

    .au-mob-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: #fff;
        border-bottom: 1px solid #f0ede8;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .au-mob-back {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #1a1a1a;
        font-size: 15px;
        background: #f5f3ef;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .au-mob-back:hover {
        background: #eeebe5;
    }

    .au-mob-logo {
        font-family: var(--font-serif);
        font-size: 17px;
        font-weight: 500;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .au-mob-logo i {
        font-size: 14px;
        color: #c9a962;
    }

    .au-mob-spacer { width: 38px; }

    .au-form-scroll {
        padding: 32px 20px 80px;
        align-items: flex-start;
    }

    .au-form-container {
        max-width: 460px;
        margin: 0 auto;
        background: #fff;
        padding: 32px 28px;
        border-radius: 18px;
        border: 1px solid #f0ede8;
        box-shadow: 0 4px 24px rgba(0,0,0,0.03);
    }
}

/* ── Auth Responsive — Mobile ── */
@media (max-width: 576px) {
    .au-mob-header {
        padding: 14px 16px;
    }

    .au-mob-logo { font-size: 15px; }

    .au-form-scroll {
        padding: 24px 16px 60px;
    }

    .au-form-container {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .au-title { font-size: 24px; }
    .au-subtitle { font-size: 13px; }
    .au-field-row { grid-template-columns: 1fr; gap: 0; }
    .au-toggle { margin-bottom: 28px; }
    .au-toggle-btn { font-size: 11px; padding: 11px 0; }

    .au-submit {
        padding: 14px 24px;
        font-size: 13px;
    }
}

/* Auth Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: var(--transition-base); }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal { background: #fff; border-radius: 16px; padding: 40px;
    max-width: 420px; width: 100%; margin: 20px;
    transform: translateY(20px); transition: var(--transition-base); position: relative; }
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header { text-align: center; margin-bottom: 32px; }
.modal-header h2 { font-family: var(--font-serif); font-size: 28px; font-weight: 400;
    color: #1a1a1a; margin-bottom: 0; }
.modal-header p { color: #999; margin: 8px 0 0; font-size: 14px; }
.modal-close { position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: #999; font-size: 18px;
    cursor: pointer; transition: var(--transition-fast); }
.modal-close:hover { color: #1a1a1a; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 10px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    margin-bottom: 10px; color: #999; }
.form-input-wrap { position: relative; display: flex; align-items: center; }
.form-input-wrap i { position: absolute; left: 16px; color: #ccc; font-size: 14px; }
.form-input { width: 100%; padding: 14px 16px 14px 44px;
    font-size: 14px; border: 1px solid #f0f0f0;
    border-radius: 8px; background: #fafafa;
    color: #1a1a1a; outline: none; transition: var(--transition-fast); }
.form-input:focus { border-color: #1a1a1a; background: #fff; }
.form-input::placeholder { color: #bbb; }
.btn-submit { width: 100%; padding: 14px 24px; margin-top: 8px;
    background: #1a1a1a; color: #fff; border: none; border-radius: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: background 0.2s; }
.btn-submit:hover { background: #333; }
.btn-submit i { font-size: 12px; }
.modal-footer { text-align: center; margin-top: 24px;
    font-size: 13px; color: #999; }
.modal-footer a { color: #1a1a1a; font-weight: 500; }
.modal-footer a:hover { text-decoration: underline; }
.demo-link { display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 16px; font-size: 12px; color: #999; cursor: pointer; }
.demo-link i { font-size: 14px; }
.demo-link:hover { color: #1a1a1a; }
.auth-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Account Dashboard */
.account-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; padding-top: 80px; }
.account-sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border);
    padding: var(--space-2xl); position: sticky; top: 80px; height: calc(100vh - 80px); overflow-y: auto; }
.account-user { text-align: center; padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-xl); }
.account-avatar { width: 80px; height: 80px; border-radius: var(--radius-full);
    object-fit: cover; margin: 0 auto var(--space-md); }
.account-name { font-family: var(--font-serif); font-size: var(--text-xl);
    font-weight: 500; margin-bottom: var(--space-xs); }
.account-email { font-size: var(--text-sm); color: var(--color-text-muted); }
.account-stats { display: flex; justify-content: space-around;
    padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-xl); }
.account-stat { text-align: center; }
.account-stat-value { font-family: var(--font-serif); font-size: var(--text-2xl);
    font-weight: 500; color: var(--color-primary); }
.account-stat-label { font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: var(--tracking-widest); color: var(--color-text-muted); }
.account-nav { list-style: none; padding: 0; margin: 0; }
.account-nav li { margin-bottom: var(--space-xs); }
.account-nav a { display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-md); border-radius: var(--radius-md);
    color: var(--color-text-secondary); transition: var(--transition-fast); }
.account-nav a:hover { background: var(--color-background); color: var(--color-primary); }
.account-nav a.active { background: var(--color-background); color: var(--color-primary); font-weight: 500; }
.account-nav a i { width: 20px; text-align: center; }
.account-main { padding: var(--space-2xl) var(--space-3xl); background: var(--color-background); }
.account-greeting { margin-bottom: var(--space-2xl); }
.account-greeting h1 { font-size: var(--text-3xl); margin-bottom: var(--space-sm); }
.account-greeting p { color: var(--color-text-secondary); }
.continue-reading { background: var(--color-surface); border-radius: var(--radius-lg);
    padding: var(--space-xl); margin-bottom: var(--space-2xl);
    display: flex; gap: var(--space-xl); align-items: center; }
.continue-reading-image { width: 100px; height: 150px; border-radius: var(--radius-md);
    overflow: hidden; flex-shrink: 0; }
.continue-reading-image img { width: 100%; height: 100%; object-fit: cover; }
.continue-reading-content { flex: 1; }
.continue-reading-title { font-family: var(--font-serif); font-size: var(--text-xl);
    margin-bottom: var(--space-xs); }
.continue-reading-author { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.progress-bar { height: 6px; background: var(--color-border);
    border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-sm); }
.progress-bar-fill { height: 100%; background: var(--color-accent);
    border-radius: var(--radius-full); transition: width 0.3s ease; }
.progress-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.library-section h2 { margin-bottom: var(--space-xl); }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-lg); }
.library-card { background: var(--color-surface); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-sm); }
.library-card-image { aspect-ratio: 3/4; overflow: hidden; }
.library-card-image img { width: 100%; height: 100%; object-fit: cover; }
.library-card-content { padding: var(--space-md); }
.library-card-title { font-family: var(--font-serif); font-size: var(--text-base);
    font-weight: 500; margin-bottom: var(--space-sm); line-height: var(--leading-snug); }
.library-card-actions { display: flex; gap: var(--space-sm); }
.library-card-actions .btn { flex: 1; padding: var(--space-sm); font-size: var(--text-xs); }
@media (max-width: 991px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; height: auto; border-right: none;
        border-bottom: 1px solid var(--color-border); }
    .account-main { padding: var(--space-xl); }
}

/* Utilities */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

/* Flash Messages */
.alert { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md);
    margin-bottom: var(--space-lg); font-size: var(--text-sm); }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-3xl); }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); font-size: var(--text-sm);
    color: var(--color-text-secondary); transition: var(--transition-fast); }
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .active { background: var(--color-primary); border-color: var(--color-primary);
    color: var(--color-text-inverse); }
.pagination .disabled { opacity: 0.5; pointer-events: none; }

/* Empty States */
.empty-state { text-align: center; padding: var(--space-4xl) var(--space-xl); }
.empty-state i { font-size: var(--text-5xl); color: var(--color-border); margin-bottom: var(--space-xl); }
.empty-state h3 { margin-bottom: var(--space-md); }
.empty-state p { color: var(--color-text-secondary); margin-bottom: var(--space-xl); }

/* ═══════════════════════════════════════════════════════════════
   UNIFIED AUTH — Premium Additions
   New selectors for the unified login/register experience.
   Existing .au-* rules above are preserved unchanged.
═══════════════════════════════════════════════════════════════ */

/* ── Showcase: cinematic corner frames ── */
.au-sc-corner {
    position: absolute;
    width: 44px;
    height: 44px;
    z-index: 4;
    pointer-events: none;
}
.au-sc-tl { top: 28px;    left: 28px;    border-top: 1px solid rgba(201,169,98,0.45); border-left:  1px solid rgba(201,169,98,0.45); }
.au-sc-tr { top: 28px;    right: 28px;   border-top: 1px solid rgba(201,169,98,0.45); border-right: 1px solid rgba(201,169,98,0.45); }
.au-sc-bl { bottom: 28px; left: 28px;    border-bottom: 1px solid rgba(201,169,98,0.45); border-left:  1px solid rgba(201,169,98,0.45); }
.au-sc-br { bottom: 28px; right: 28px;   border-bottom: 1px solid rgba(201,169,98,0.45); border-right: 1px solid rgba(201,169,98,0.45); }

/* ── Showcase: editorial chapter label ── */
.au-sc-chapter {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.42em;
    color: rgba(201,169,98,0.4);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
}

/* ── Form container: wider for two-column name row ── */
.au-form-container {
    max-width: 480px;
}

/* ── Form brand mark (desktop) ── */
.au-fc-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.au-fc-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1a1612;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.au-fc-logo:hover { opacity: 0.65; }
.au-fc-logo i {
    font-size: 17px;
    color: #c9a962;
}

/* ── Mode toggle ── */
.au-mode-toggle {
    display: flex;
    position: relative;
    background: rgba(201,169,98,0.07);
    border: 1px solid rgba(201,169,98,0.2);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    gap: 0;
}

.au-mode-btn {
    flex: 1;
    padding: 11px 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(26,22,18,0.4);
    background: none;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    white-space: nowrap;
}
.au-mode-btn.active            { color: #0a0806; }
.au-mode-btn:hover:not(.active){ color: rgba(26,22,18,0.6); }
.au-mode-btn:focus-visible     {
    outline: 2px solid rgba(201,169,98,0.55);
    outline-offset: 2px;
    border-radius: 9px;
}

/* Sliding pill indicator */
.au-mode-pill {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #fff;
    border-radius: 9px;
    box-shadow:
        0 2px 8px rgba(100,80,30,0.12),
        0 0 0 1px rgba(201,169,98,0.15);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(.4,0,.2,1);
}

/* ── Form panes ── */
.au-panes-wrap { position: relative; }

.au-pane { display: none; }
.au-pane.active { display: block; }

.au-pane-enter {
    animation: au-enter 0.4s cubic-bezier(.2,.8,.2,1) both;
}
.au-pane-exit {
    animation: au-exit 0.35s ease both;
}
@keyframes au-enter {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes au-exit {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(-18px); }
}

/* ── Pane heading ── */
.au-pane-hd {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(201,169,98,0.15);
    position: relative;
}
.au-pane-hd::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 44px; height: 2px;
    background: linear-gradient(90deg, #c9a962, transparent);
    border-radius: 1px;
}

/* ── Forgot password row ── */
.au-field-util {
    display: flex;
    justify-content: flex-end;
    margin-top: -10px;
    margin-bottom: 20px;
}

.au-forgot-link {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: #8a7a5a;
    transition: color 0.2s ease;
    position: relative;
}
.au-forgot-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.au-forgot-link:hover         { color: #5d4a1e; }
.au-forgot-link:hover::after  { opacity: 0.35; }

/* ── Switch text + inline button ── */
.au-switch-text {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 13px;
    color: #7a7060;
    margin: 20px 0 0;
    line-height: 1.5;
}

.au-switch-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: #a88a40;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    vertical-align: baseline;
}
.au-switch-btn:hover {
    color: #6e5820;
    border-color: rgba(168,138,64,0.45);
}
.au-switch-btn:focus-visible {
    outline: 2px solid rgba(201,169,98,0.5);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Password strength label text ── */
.au-pw-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    min-height: 16px;
    transition: color 0.3s ease;
}
.au-pw-label.weak   { color: #ef4444; }
.au-pw-label.medium { color: #d97706; }
.au-pw-label.strong { color: #16a34a; }

/* ── Field row gap ── */
.au-field-row { gap: 14px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — UNIFIED AUTH
═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .au-sc-corner, .au-sc-chapter { display: none; }
    .au-fc-brand { display: none; }

    .au-form-scroll { padding: 28px 20px 48px; }
    .au-form-container {
        max-width: 100%;
        padding: 32px 24px 28px;
        border-radius: 16px;
    }

    .au-mode-btn { font-size: 11px; padding: 10px 6px; }
}

@media (max-width: 576px) {
    .au-form-scroll  { padding: 20px 14px 40px; }
    .au-form-container {
        padding: 26px 18px 24px;
        border-radius: 14px;
    }
    .au-mode-btn  { font-size: 11px; padding: 10px 4px; }
    .au-title     { font-size: 23px; }
    .au-subtitle  { font-size: 13px; }
    .au-field-row { grid-template-columns: 1fr; gap: 0; }
    .au-input     { font-size: 16px; } /* prevent iOS zoom */
    .au-submit    { padding: 15px 24px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .au-pane-enter, .au-pane-exit { animation: none !important; }
    .au-mode-pill { transition: none !important; }
    .au-form-panel::before { animation: none !important; }
}