/* ═══════════════════════════════════════════════════════
   EDITORIAL BRUTALIST — Design System (Fihris Classic V2)
   Fihris Author Page (Production)
   Aesthetic: Brutalist Luxury × Editorial Diamond Dividers
   Core Brand: Bg #FDFBF7, Text #111827, Accent #92400E, Border #E5E0D8
 ═══════════════════════════════════════════════════════ */

:root {
    /* Fihris Editorial Brand Colors */
    --l-bg:          #FDFBF7;
    --l-surface:     #FFFFFF;
    --l-text:        #111827;
    --l-text-muted:  #7A7265;
    --l-border:      #E5E0D8;
    --l-accent:      var(--author-theme-solid, #92400E);
    
    --font-display:  'Aref Ruqaa', 'Aref Ruqaa Ink', serif;
    --font-body:     'Noto Kufi Arabic', sans-serif;
    --font-mono:     'Space Grotesk', monospace;

    --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s6: 3rem; --s8: 4rem; --s12: 6rem;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { 
    scroll-behavior: smooth; 
    scrollbar-width: thin; 
    scrollbar-color: var(--l-accent) var(--l-border); 
}
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--l-bg); }
html::-webkit-scrollbar-thumb { background: var(--l-accent); border-radius: 2px; }

body {
    background: var(--l-bg);
    color: var(--l-text);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.8;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ═══ LOADING CURTAIN ═══ */
#ms-curtain {
    position: fixed; inset: 0; background: var(--l-bg); z-index: 10000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
}
.ms-curtain-logo {
    font-family: var(--font-display); font-size: 4.5rem; color: var(--l-accent);
    opacity: 0; transform: translateY(20px);
}
.ms-curtain-line {
    width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--l-text), transparent);
}

/* ═══ FLOATING NAV ═══ */
#ms-nav {
    position: fixed; top: var(--s3); left: 50%; transform: translateX(-50%);
    z-index: 500; opacity: 0; transition: opacity 0.5s ease;
}
#ms-nav.visible { opacity: 1; }
.ms-nav-strip {
    display: flex; align-items: center; gap: var(--s1);
    background: rgba(253, 251, 247, 0.95); backdrop-filter: blur(10px);
    border: 2px solid var(--l-text); border-radius: 2px; padding: 0.4rem 0.6rem;
    box-shadow: 4px 4px 0px var(--l-accent);
}
.ms-nav-strip a {
    display: block; padding: 0.4rem 1rem; color: var(--l-text); font-size: 0.85rem;
    font-weight: 700; text-decoration: none; border-radius: 2px;
    transition: all 0.2s var(--ease-out-expo); white-space: nowrap;
}
.ms-nav-strip a:hover, .ms-nav-strip a.active { background: var(--l-accent); color: #fff; }
.ms-nav-progress {
    width: 2px; height: 24px; background: var(--l-border);
    border-radius: 0; overflow: hidden; margin: 0 var(--s1);
}
.ms-nav-progress-fill { width: 100%; height: 0%; background: var(--l-accent); transition: height 0.1s linear; }

/* ═══ HERO SECTION (EDITORIAL BRUTALIST) ═══ */
#ri-hero {
    position: relative; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 6rem 8vw 4rem; z-index: 1;
}

.ri-hero-content {
    max-width: 1200px; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: 1.2fr 0.8fr;
    gap: 4vw; align-items: center;
    position: relative;
}

.ri-hero-text-block {
    display: flex; flex-direction: column; gap: var(--s3);
}

.ri-hero-eyebrow {
    display: flex; align-items: center; gap: var(--s2);
    opacity: 0; transform: translateY(30px);
}
.ri-hero-eyebrow-line { width: 40px; height: 2px; background: var(--l-accent); }
.ri-hero-eyebrow-text { font-family: var(--font-body); font-size: 0.85rem; color: var(--l-text-muted); letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase; }

.ri-hero-name {
    font-family: var(--font-display); 
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    line-height: 1.1; color: var(--l-text); 
    position: relative; z-index: 2;
    opacity: 0; transform: translateY(40px);
}
.ri-hero-name span { color: var(--l-accent); }

.ri-hero-bio { 
    font-size: 1.1rem; color: var(--l-text-muted); line-height: 2.0; max-width: 600px; font-weight: 400; 
    opacity: 0; transform: translateY(20px);
}

/* Portrait Block - Brutalist Framing */
.ri-hero-portrait-wrap {
    position: relative;
    opacity: 0; transform: translateY(40px) scale(0.95);
    display: flex;
    justify-content: center;
}
.ri-portrait-frame {
    width: 320px; height: 420px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--l-text);
    box-shadow: 8px 8px 0px var(--l-accent);
    background: var(--l-surface);
}
.ri-portrait-img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(10%) contrast(1.05);
}
.ri-portrait-initial {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 8rem; color: var(--l-accent); background: var(--l-surface);
}

/* Brutalist Stamp */
.ri-stamp {
    position: absolute; bottom: -20px; left: -20px;
    width: 90px; height: 90px;
    background: var(--l-text); color: var(--l-bg);
    border-radius: 2px;
    border: 2px solid var(--l-accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.1rem;
    box-shadow: 4px 4px 0px var(--l-accent);
    animation: riSpin 25s linear infinite;
}
@keyframes riSpin { 100% { transform: rotate(360deg); } }

/* Actions */
.ri-hero-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); opacity: 0; transform: translateY(20px); }

.ri-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--l-accent); color: #fff; padding: 0.9rem 2.2rem; border-radius: 2px;
    font-weight: 700; font-size: 0.95rem; text-decoration: none;
    border: 2px solid var(--l-text); cursor: pointer; font-family: var(--font-body);
    transition: all 0.2s var(--ease-out-expo);
    box-shadow: 4px 4px 0px var(--l-text);
}
.ri-btn-primary:hover { 
    transform: translate(-4px, -4px); 
    box-shadow: 6px 6px 0px var(--l-accent); 
    border-color: var(--l-text);
    background: var(--l-accent);
    color: #fff;
}

.ri-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--l-surface); color: var(--l-text); padding: 0.9rem 2.2rem;
    border-radius: 2px; border: 2px solid var(--l-text); font-size: 0.95rem;
    font-weight: 700; text-decoration: none; transition: all 0.2s ease; cursor: pointer; 
    font-family: var(--font-body);
    box-shadow: 4px 4px 0px var(--l-border);
}
.ri-btn-ghost:hover { 
    transform: translate(-3px, -3px); 
    box-shadow: 6px 6px 0px var(--l-accent); 
    border-color: var(--l-text);
    background: var(--l-surface);
    color: var(--l-text);
}

/* Stats Row */
.ri-hero-stats {
    display: flex; gap: var(--s6); padding-top: var(--s4); 
    border-top: 2px solid var(--l-border); 
    margin-top: var(--s4);
    opacity: 0; transform: translateY(20px);
}
.ri-stat { display: flex; flex-direction: column; gap: 0; }
.ri-stat-num { font-family: var(--font-display); font-size: 2.8rem; color: var(--l-text); line-height: 1.1; font-weight: 700; }
.ri-stat-label { font-size: 0.85rem; color: var(--l-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* ═══ SECTION DIVIDER (Brutalist Diamond Style) ═══ */
.ri-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--s12) 0 var(--s8);
    width: 100%;
    padding: 0 8vw;
}
.ri-divider-label {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--l-text);
    background: var(--l-bg);
    padding: 0 var(--s4);
    z-index: 2;
    position: relative;
    font-weight: 700;
}
.ri-divider-label::before,
.ri-divider-label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--l-accent);
}
.ri-divider-label::before { right: -5px; }
.ri-divider-label::after { left: -5px; }

.ri-divider-rule {
    position: absolute;
    left: 8vw;
    right: 8vw;
    top: 50%;
    height: 2px;
    background: linear-gradient(to left, transparent, var(--l-accent) 20%, var(--l-accent) 80%, transparent);
    z-index: 1;
}

/* ═══ EDITORIAL NOVELS GALLERY ═══ */
#ri-novels { padding: 0 8vw; position: relative; }
.ri-gallery { display: flex; flex-direction: column; gap: var(--s6); padding-bottom: var(--s12); }

.ri-novel-showcase {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 4vw; align-items: center;
    background: var(--l-surface); padding: var(--s4); border-radius: 2px;
    border: 2px solid var(--l-border);
    box-shadow: 4px 4px 0px var(--l-border);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ri-novel-showcase:hover {
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0px var(--l-accent);
    border-color: var(--l-text);
}
.ri-novel-showcase:nth-child(even) { grid-template-columns: 1.1fr 1fr; direction: ltr; }
.ri-novel-showcase:nth-child(even) > * { direction: rtl; }

/* 2.5D Book Art (Brutalist style with 2px borders) */
.ri-book-stage {
    perspective: 1500px;
    width: 100%; display: flex; justify-content: center; align-items: center;
}
.ri-book-render {
    width: 260px; aspect-ratio: 2/3;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s var(--ease-out-expo);
    transform: rotateY(-12deg) rotateX(4deg);
    box-shadow: 
        -15px 20px 40px rgba(17,24,39,0.15),
        inset 3px 0 10px rgba(255,255,255,0.3);
    border-radius: 2px;
    border: 2px solid var(--l-text);
}
.ri-novel-showcase:hover .ri-book-render {
    transform: rotateY(-3deg) rotateX(1deg) scale(1.03);
    box-shadow: 
        -20px 25px 45px rgba(17,24,39,0.2),
        inset 3px 0 10px rgba(255,255,255,0.3);
}
.ri-novel-showcase:nth-child(even) .ri-book-render {
    transform: rotateY(12deg) rotateX(4deg);
    box-shadow: 
        15px 20px 40px rgba(17,24,39,0.15),
        inset -3px 0 10px rgba(255,255,255,0.3);
}
.ri-novel-showcase:nth-child(even):hover .ri-book-render {
    transform: rotateY(3deg) rotateX(1deg) scale(1.03);
    box-shadow: 
        20px 25px 45px rgba(17,24,39,0.2),
        inset -3px 0 10px rgba(255,255,255,0.3);
}

.ri-book-cover {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 2px;
    position: relative; z-index: 2;
}
.ri-book-spine {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 10px;
    background: linear-gradient(to right, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.15) 100%);
    z-index: 3; border-radius: 2px 0 0 2px;
}
.ri-novel-showcase:nth-child(even) .ri-book-spine {
    left: auto; right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.15) 100%);
    border-radius: 0 2px 2px 0;
}

/* Typography for Book */
.ri-book-info {
    display: flex; flex-direction: column; gap: var(--s2);
}
.ri-tag {
    align-self: flex-start;
    font-size: 0.8rem; font-weight: 700; padding: 0.25rem 0.9rem; border-radius: 2px;
    background: var(--l-accent); color: #fff;
    border: 1px solid var(--l-text);
}
.ri-book-title {
    font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--l-text); line-height: 1.2; font-weight: 700;
}
.ri-book-desc {
    font-size: 1rem; line-height: 1.8; color: var(--l-text-muted);
    margin-bottom: var(--s2); max-width: 500px;
}
.ri-book-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ═══ STORES ═══ */
.ri-stores-grid { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 8vw; }
.ri-store-pill {
    padding: 0.9rem 2rem; background: var(--l-surface); border: 2px solid var(--l-text);
    border-radius: 2px; color: var(--l-text); font-weight: 700; text-decoration: none;
    font-size: 0.95rem; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem;
    box-shadow: 4px 4px 0px var(--l-accent);
}
.ri-store-pill:hover { 
    background: var(--l-accent); color: #fff; 
    transform: translate(-3px, -3px); 
    box-shadow: 6px 6px 0px var(--l-text); 
}

/* ═══ FOOTER ═══ */
.ri-footer {
    border-top: 2px solid var(--l-text); padding: var(--s8) 8vw;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s4);
    margin-top: var(--s12);
    background: var(--l-surface);
}
.ri-footer-brand { font-family: var(--font-display); font-size: 2.8rem; color: var(--l-text); font-weight: 700; }
.ri-footer-nav { display: flex; gap: var(--s3); }
.ri-footer-nav a { color: var(--l-text-muted); text-decoration: none; font-weight: 700; transition: color 0.2s; }
.ri-footer-nav a:hover { color: var(--l-accent); }

/* ═══ MODALS & OVERLAYS ═══ */
.ri-modal-backdrop { 
    position: fixed; inset: 0; background: rgba(253, 251, 247, 0.85); backdrop-filter: blur(8px); 
    z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; 
    display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.ri-modal-backdrop.active { opacity: 1; pointer-events: all; }
.ri-modal-box {
    background: var(--l-surface); border: 2px solid var(--l-text);
    border-radius: 2px; padding: var(--s6); width: 100%; max-width: 600px;
    max-height: 90vh; overflow-y: auto; position: relative;
    box-shadow: 8px 8px 0px var(--l-accent);
    transform: translateY(20px); transition: all 0.3s var(--ease-out-expo);
}
.ri-modal-backdrop.active .ri-modal-box { transform: translateY(0); }

.ri-modal-close { 
    position: absolute; top: var(--s3); left: var(--s3); 
    background: var(--l-bg); border: 2px solid var(--l-text); 
    width: 38px; height: 38px; border-radius: 2px; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; color: var(--l-text); font-size: 1.1rem; 
    transition: all 0.2s; 
}
.ri-modal-close:hover { background: var(--l-accent); color: #fff; }

/* Form inputs styling */
.ri-input { 
    width: 100%; background: var(--l-bg); border: 2px solid var(--l-text); 
    padding: 0.9rem; border-radius: 2px; font-family: var(--font-body); 
    outline: none; margin-bottom: 1rem; color: var(--l-text); 
}
.ri-input:focus { border-color: var(--l-accent); }

.ri-star-lbl { cursor: pointer; font-size: 2rem; color: var(--l-border); transition: color 0.2s; }
.ri-star-lbl.active, .ri-star-lbl:hover { color: var(--l-accent); }
.ri-review-item { padding: 1.2rem 0; border-bottom: 2px solid var(--l-border); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
    .ri-hero-content { grid-template-columns: 1fr; text-align: center; justify-content: center; padding-top: var(--s8); }
    .ri-hero-text-block { align-items: center; }
    .ri-hero-bio { text-align: center; }
    .ri-hero-actions { justify-content: center; }
    .ri-hero-stats { justify-content: center; flex-wrap: wrap; }
    .ri-portrait-frame { width: 280px; height: 380px; margin: 0 auto; }
    
    .ri-novel-showcase, .ri-novel-showcase:nth-child(even) { grid-template-columns: 1fr; direction: rtl; }
    .ri-novel-showcase:nth-child(even) > * { direction: rtl; text-align: right; }
    .ri-novel-showcase { padding: var(--s4) var(--s3); text-align: center; }
    .ri-book-info { align-items: center; }
    .ri-book-desc { text-align: center; }
    .ri-book-actions { justify-content: center; }
    .ri-tag { align-self: center; }
    
    #ms-nav { width: calc(100% - 2rem); }
    .ms-nav-strip { justify-content: space-between; overflow-x: auto; border-radius: 2px; }
    .ms-nav-progress { display: none; }
}

@media (max-width: 600px) {
    :root { --s12: 4rem; --s6: 2rem; --s8: 3rem; }
    .ri-hero-name { font-size: clamp(2.5rem, 10vw, 4rem); }
    .ri-portrait-frame { width: 240px; height: 320px; }
    .ri-btn-primary, .ri-btn-ghost { width: 100%; justify-content: center; }
    .ri-book-render { width: 200px; }
    .ri-footer { flex-direction: column; text-align: center; }
}