body{

    background:var(--background);

    color:var(--text);

    font-family:"Inter",sans-serif;

    overflow-x:hidden;

    position:relative;

}

/* --------------------------- */
/* Background                  */
/* --------------------------- */

.background-glow{

    position:fixed;

    width:900px;

    height:900px;

    left:-250px;

    top:-250px;

    background:

    radial-gradient(circle,
    rgba(236,188,108,.18),
    transparent 70%);

    pointer-events:none;

    z-index:-2;

}

.noise{

    position:fixed;

    inset:0;

    opacity:.035;

    background-image:

    radial-gradient(circle at 20% 20%,#000 1px,transparent 1px);

    background-size:24px 24px;

    pointer-events:none;

    z-index:-1;

}

/* --------------------------- */
/* Hero                        */
/* --------------------------- */

.hero{

    width:min(92%,1200px);

    margin:auto;

    padding-top:70px;

    text-align:center;

}

.hero-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.edition,
.year{

    font-size:.8rem;

    letter-spacing:.35rem;

    text-transform:uppercase;

    color:#A67C52;

}

/* --------------------------- */
/* Title                       */
/* --------------------------- */

.hero h1{

    display:flex;

    flex-direction:column;

    align-items:center;

    line-height:.85;

    font-family:"Cormorant Garamond",serif;

    color:var(--title);

}

.line-one{

    font-size:2rem;

    font-weight:500;

}

.line-two{

    font-size:7rem;

    font-weight:700;

}

.line-three{

    margin-top:-10px;

    font-size:3rem;

    font-weight:500;

}

/* --------------------------- */

.subtitle{

    width:min(700px,100%);

    margin:35px auto;

    line-height:1.8;

    font-size:1.05rem;

    color:#74675B;

}

/* --------------------------- */

.divider{

    width:180px;

    height:1px;

    background:#D8C8B4;

    margin:40px auto;

    position:relative;

}

.divider::before{

    content:"";

    width:14px;

    height:14px;

    border:2px solid #C79A63;

    background:white;

    position:absolute;

    left:50%;

    top:50%;

    transform:

    translate(-50%,-50%)

    rotate(45deg);

}

/* --------------------------- */

blockquote{

    width:min(650px,100%);

    margin:auto;

    font-family:"Cormorant Garamond",serif;

    font-size:1.6rem;

    line-height:1.5;

    color:#53483D;

    font-style:italic;

}

/* --------------------------- */

footer{

    width:min(92%,1200px);

    margin:70px auto 40px;

    display:flex;

    justify-content:center;

    color:#8C7A67;

    font-size:.95rem;

}

footer strong{

    color:#4C3D30;

}

/* --------------------------- */

@media(max-width:900px){

.line-two{

font-size:5rem;

}

.line-three{

font-size:2.2rem;

}

blockquote{

font-size:1.3rem;

}

.hero-top{

flex-direction:column;

gap:10px;

}

}

/* PAPER / FILM GRAIN */


.noise{

    position:fixed;

    inset:0;


    pointer-events:none;


    z-index:100;


    opacity:.08;


    background-image:

    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");


}

.art-stage::before{


    background:


    radial-gradient(

        circle at 20% 10%,

        rgba(255,220,150,.4),

        transparent 45%

    ),

    radial-gradient(

        circle at 80% 80%,

        rgba(120,70,20,.15),

        transparent 50%

    );


}

/* Responsive adjustments for smaller screens */

@media(max-width:700px){


.art-stage{

    aspect-ratio:

    4 / 5;

}



.bowl{

    transform:

    translateX(-50%)

    scale(.65);

}



.placemat{

    transform:

    translateX(-50%)

    scale(.7);

}



.window{

    transform:

    scale(.7);

}


}