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

body{

    background:#f7f2f0;
    background-image: url("https://i.pinimg.com/1200x/97/4c/82/974c82116e6b43abaf774dcdd23df6cb.jpg");
    background-size: 300px 500px;
    color:#8d7979;

    font-family:'IBM Plex Mono', monospace;

    padding:80px 30px;
}

/* PAGE */

.page{

    width:760px;

    margin:auto;
}

/* NAV */

.nav{

    display:flex;

    gap:18px;

    margin-bottom:45px;
}

.nav a{

    text-decoration:none;

    font-size:10px;

    color:#a28d8d;

    transition:0.2s;
}

.nav a:hover{

    opacity:0.6;
}

/* TITLE */

h1{

    font-family:'Cormorant Garamond', serif;

    font-size:58px;

    font-weight:300;

    margin-bottom:55px;

    color:#76495e;
}

/* ENTRY LAYOUT */

.entry-layout{

    display:flex;

    align-items:flex-start;

    gap:28px;

    margin-bottom:65px;
}

/* PAPER */

.paper{

    background:#f4ece8;

    padding:32px;

    border:1px solid #e2d5d1;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.04);

    position:relative;

    flex:1;

    transform:rotate(-1deg);
}

/* TAPE */

.paper::before{

    content:"";

    position:absolute;

    width:85px;
    height:18px;

    background:rgba(255,255,255,0.35);

    top:-10px;
    left:80%;

    transform:translateX(-50%) rotate(-2deg);
}

/* DATE */

.date{

    font-size:9px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#b79d9d;

    display:block;

    margin-bottom:16px;
}

/* TEXT */

.paper p{
    font-size: 11px;
    line-height: 1.9;
    width: 100%; /* Ahora ocupa el 100% de la hoja */
    color: #866f6f;
}

/* POLAROID */

.polaroid{

    width:170px;

    background:#faf8f7;

    padding:10px 10px 30px;

    box-shadow:
    0 10px 20px rgba(0,0,0,0.05);

    transform:rotate(2deg);

    position:relative;

    transition:0.3s;

    flex-shrink:0;
}

.polaroid:hover{

    transform:
    rotate(1deg)
    translateY(-3px);
}

.polaroid img{

    width:100%;

    display:block;

    margin-bottom:12px;
}

.polaroid span{

    font-family:'Cormorant Garamond', serif;

    font-size:15px;

    color:#8b7474;
}

/* SECRET NOTE */

.hidden-note{

    position:absolute;

    bottom:10px;
    left:30%;

    transform:translateX(-50%);

    font-size:8px;

    color:#b89d9d;

    opacity:0;

    transition:0.4s;

    white-space:nowrap;

    pointer-events:none;

    letter-spacing:1px;
}

.secret-photo:hover .hidden-note{

    opacity:1;
}

.entry-layout.reverse{

    flex-direction:row-reverse;
}