/* gabs.review -- mid-century literary salon */
/* Palette: #F5F0E8, #EDE7D9, #2C1810, #1A120B, #6B5744, #B8860B, #8B9A6B, #C4917B */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}

body{
    background:#F5F0E8;
    color:#2C1810;
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    line-height:1.72;
    overflow-x:hidden;
}

/* Foyer */
.foyer{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem;
}

.foyer-title{
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    color:#2C1810;
    letter-spacing:-0.01em;
    line-height:1;
    opacity:0;
    animation:fadeIn 1.2s ease-out 0.3s forwards;
}

@keyframes fadeIn{to{opacity:1}}

.foyer-subtitle{
    font-family:'Source Sans 3',sans-serif;
    font-weight:300;
    font-size:clamp(0.9rem,1.5vw,1.15rem);
    color:#6B5744;
    margin-top:1rem;
    letter-spacing:0.05em;
    opacity:0;
    animation:fadeIn 1s ease-out 0.8s forwards;
}

.foyer-ornament{
    font-family:'EB Garamond',serif;
    font-size:1.5rem;
    color:#B8860B;
    margin-top:2rem;
    opacity:0;
    animation:fadeIn 0.8s ease-out 1.2s forwards;
}

/* Split layout */
.split-layout{
    display:grid;
    grid-template-columns:38% 1px 1fr;
    min-height:100vh;
}

.panel{padding:4rem 3rem}

.panel-left{
    background:#EDE7D9;
    position:relative;
}

.panel-right{
    background:#F5F0E8;
}

/* Brass divider */
.brass-rule{
    background:#B8860B;
    box-shadow:0 0 8px rgba(184,134,11,0.15);
}

/* Subject blocks */
.subject-label{
    font-family:'Source Sans 3',sans-serif;
    font-weight:600;
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:#B8860B;
    display:block;
    margin-bottom:0.5rem;
}

.subject-title{
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:#2C1810;
    line-height:1.2;
    margin-bottom:0.5rem;
}

.subject-meta{
    font-family:'JetBrains Mono',monospace;
    font-size:0.7rem;
    color:#6B5744;
    letter-spacing:0.05em;
    display:block;
    margin-bottom:1.5rem;
}

.subject-image{
    max-width:240px;
    margin:1rem 0;
}

.subject-image svg{width:100%;height:auto}

.also-title{
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-style:italic;
    font-size:1.2rem;
    color:#2C1810;
    margin-bottom:0.25rem;
}

/* Rating */
.rating-display{
    margin-top:1rem;
    display:flex;
    align-items:center;
    gap:0.75rem;
}

.rating-stars{
    font-size:1.2rem;
    color:#B8860B;
    letter-spacing:0.1em;
}

.rating-text{
    font-family:'Source Sans 3',sans-serif;
    font-weight:300;
    font-size:0.8rem;
    color:#8B9A6B;
    text-transform:uppercase;
    letter-spacing:0.15em;
}

/* Review body */
.review-heading{
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(1.8rem,3.5vw,3rem);
    color:#2C1810;
    line-height:1.2;
    margin-bottom:2rem;
}

.review-text{
    font-family:'Source Sans 3',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    line-height:1.85;
    margin-bottom:1.5rem;
    color:#2C1810;
}

.drop-cap{
    float:left;
    font-family:'EB Garamond',serif;
    font-size:4em;
    line-height:0.8;
    padding-right:0.08em;
    padding-top:0.05em;
    color:#B8860B;
}

/* Pull quotes */
.pull-quote{
    margin:2.5rem 0;
    padding:1.5rem 2rem;
    border-left:3px solid #B8860B;
}

.pull-quote p{
    font-family:'EB Garamond',serif;
    font-style:italic;
    font-size:clamp(1.2rem,2vw,1.6rem);
    color:#6B5744;
    line-height:1.5;
}

.review-sign{
    font-family:'EB Garamond',serif;
    font-style:italic;
    font-size:0.95rem;
    color:#8B9A6B;
    margin-top:3rem;
}

/* Colophon */
.colophon{
    background:#1A120B;
    padding:2rem;
    text-align:center;
}

.colophon-text{
    font-family:'Source Sans 3',sans-serif;
    font-weight:300;
    font-size:0.75rem;
    letter-spacing:0.12em;
    color:#6B5744;
}

/* Reveal animations */
.reveal-left{
    opacity:0;
    transform:translateX(-20px);
    transition:opacity 0.7s ease-out,transform 0.7s ease-out;
}

.reveal-left.visible{opacity:1;transform:translateX(0)}

.reveal-right{
    opacity:0;
    transform:translateX(20px);
    transition:opacity 0.7s ease-out,transform 0.7s ease-out;
}

.reveal-right.visible{opacity:1;transform:translateX(0)}

/* Responsive */
@media(max-width:768px){
    .split-layout{
        grid-template-columns:1fr;
    }
    .brass-rule{display:none}
    .panel{padding:2rem 1.5rem}
}