/* foryou.reviews - Editorial Cinematic Review Magazine */

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

:root{
    --linen:#FAF3E8;
    --ivory:#F5ECD7;
    --umber:#3B2314;
    --walnut:#6B4C3B;
    --venetian:#C44536;
    --gold:#B8860B;
    --rose:#C4908E;
    --espresso:#1E1108;
}

body{
    background:var(--linen);
    color:var(--umber);
    font-family:'Source Serif 4',Georgia,serif;
    font-weight:400;
    font-size:clamp(1.05rem,1.2vw,1.25rem);
    line-height:1.72;
    letter-spacing:0.005em;
    overflow-x:hidden;
    scroll-snap-type:y mandatory;
}

/* Grain overlay */
.grain-overlay{
    position:fixed;
    inset:0;
    z-index:999;
    pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* Marginal voice sidebar */
.margin-voice{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:clamp(40px,4vw,60px);
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2rem;
}

.margin-tag{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:0.65rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--walnut);
    writing-mode:vertical-rl;
    text-orientation:mixed;
    opacity:0.5;
}

/* Folio base */
.folio{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem) clamp(60px,8vw,120px);
    scroll-snap-align:start;
    position:relative;
    overflow:hidden;
}

.folio-linen{background:var(--linen)}
.folio-warm{background:var(--ivory)}

/* Folio number watermark */
.folio-number{
    position:absolute;
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    font-size:clamp(15rem,25vw,30rem);
    color:var(--ivory);
    opacity:0.08;
    z-index:0;
    user-select:none;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    line-height:1;
}

.folio-warm .folio-number{color:var(--linen)}

/* Opening folio */
.folio-opening{
    flex-direction:column;
    text-align:center;
}

.folio-content{
    position:relative;
    z-index:1;
}

.hero-title{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,9rem);
    letter-spacing:-0.02em;
    line-height:1.05;
    color:var(--umber);
    opacity:0;
    transform:translateY(1rem);
    transition:opacity 0.8s ease-out 0.8s,transform 0.8s ease-out 0.8s;
}

.folio-opening.is-visible .hero-title{
    opacity:1;
    transform:translateY(0);
}

.for-you{
    color:var(--venetian);
}

.hero-tagline{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--walnut);
    margin-top:1.5rem;
    opacity:0;
    transition:opacity 0.6s ease-out 1.3s;
}

.folio-opening.is-visible .hero-tagline{opacity:1}

.ornamental-rule{
    width:clamp(200px,40vw,400px);
    height:12px;
    margin-top:2rem;
    opacity:0;
    transition:opacity 0.6s ease-out 1.6s;
}

.folio-opening.is-visible .ornamental-rule{opacity:1}

.ornamental-rule line{
    stroke-dasharray:200;
    stroke-dashoffset:200;
    transition:stroke-dashoffset 1s ease 1.8s;
}

.folio-opening.is-visible .ornamental-rule line{
    stroke-dashoffset:0;
}

/* Folio spread */
.folio-spread{
    display:grid;
    gap:clamp(2rem,4vw,4rem);
    max-width:1100px;
    width:100%;
    position:relative;
    z-index:1;
}

.spread-left{grid-template-columns:1.2fr 0.8fr}
.spread-right{grid-template-columns:0.8fr 1.2fr}

/* Review text */
.review-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.review-title{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4.5rem);
    letter-spacing:-0.02em;
    line-height:1.1;
    color:var(--umber);
    margin-bottom:0.5rem;
    opacity:0;
    transform:translateY(2rem);
    transition:opacity 0.6s ease-out,transform 0.6s ease-out;
}

.folio.is-visible .review-title{
    opacity:1;
    transform:translateY(0);
}

.review-dateline{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--walnut);
    margin-bottom:1.5rem;
    opacity:0;
    transition:opacity 0.5s ease 0.2s;
}

.folio.is-visible .review-dateline{opacity:1}

.review-body{
    max-width:38em;
    opacity:0;
    transform:translateY(1rem);
    transition:opacity 0.6s ease-out 0.2s,transform 0.6s ease-out 0.2s;
}

.folio.is-visible .review-body{
    opacity:1;
    transform:translateY(0);
}

/* Review visual side */
.review-visual{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Wax seal */
.wax-seal{
    width:clamp(80px,10vw,120px);
    opacity:0;
    transform:scale(1.4);
    transition:opacity 0.3s ease-out 0.4s,transform 0.3s ease-out 0.4s;
}

.wax-seal svg{
    width:100%;
    height:auto;
    filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.25));
}

.folio.is-visible .wax-seal{
    opacity:1;
    transform:scale(1);
}

/* Postcard quote */
.postcard-quote{
    background:var(--rose);
    border:1px solid var(--gold);
    padding:clamp(1.5rem,3vw,2.5rem);
    transform:rotate(-1.5deg) translateX(-3rem);
    opacity:0;
    transition:opacity 0.6s ease-out 0.3s,transform 0.6s cubic-bezier(0.23,1,0.32,1) 0.3s;
    position:relative;
    max-width:380px;
}

.folio.is-visible .postcard-quote{
    opacity:1;
    transform:rotate(-1.5deg) translateX(0);
}

.postcard-text{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    color:var(--umber);
    line-height:1.5;
}

.postcard-stamp{
    position:absolute;
    bottom:8px;
    right:12px;
    width:28px;
    height:28px;
    border:1px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'DM Sans',sans-serif;
    font-weight:700;
    font-size:0.7rem;
    color:var(--gold);
}

/* Colophon */
.folio-colophon{
    background:var(--espresso);
    flex-direction:column;
    text-align:center;
}

.colophon-content{
    position:relative;
    z-index:1;
    max-width:600px;
}

.colophon-seal{
    width:clamp(8rem,15vw,16rem);
    margin:0 auto 2rem;
    opacity:0;
    transform:scale(1.4);
    transition:opacity 0.4s ease-out 0.3s,transform 0.4s ease-out 0.3s;
}

.colophon-seal svg{
    width:100%;
    height:auto;
    filter:drop-shadow(2px 3px 4px rgba(0,0,0,0.4));
}

.folio-colophon.is-visible .colophon-seal{
    opacity:1;
    transform:scale(1);
}

.colophon-note{
    font-family:'Source Serif 4',Georgia,serif;
    font-style:italic;
    font-size:clamp(0.9rem,1.1vw,1.05rem);
    color:var(--linen);
    line-height:1.65;
    margin-bottom:2rem;
    opacity:0.8;
}

.colophon-domain{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:700;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--linen);
    letter-spacing:-0.01em;
}

.colophon-year{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:0.75rem;
    letter-spacing:0.12em;
    color:var(--walnut);
    margin-top:0.5rem;
}

/* Responsive */
@media(max-width:768px){
    body{scroll-snap-type:y proximity}
    .margin-voice{
        position:fixed;
        top:0;left:0;right:0;
        bottom:auto;
        width:100%;
        height:40px;
        flex-direction:row;
        writing-mode:horizontal-tb;
        padding:0 1rem;
        background:var(--linen);
        border-bottom:1px solid rgba(107,76,59,0.1);
    }
    .margin-tag{
        writing-mode:horizontal-tb;
        text-orientation:initial;
    }
    .folio{padding:clamp(2rem,4vw,4rem) clamp(1rem,4vw,2rem)}
    .folio-spread{grid-template-columns:1fr !important}
    .postcard-quote{transform:rotate(0);max-width:100%}
    .folio.is-visible .postcard-quote{transform:rotate(0)}
}

@media(prefers-reduced-motion:reduce){
    .hero-title,.hero-tagline,.ornamental-rule,.review-title,.review-dateline,.review-body,.wax-seal,.postcard-quote,.colophon-seal{
        opacity:1;transform:none;transition:none;
    }
    .ornamental-rule line{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}