/* =====================================================
   foryou.reviews — Epistolary Review Site
   =====================================================
   Palette:
     Paper Base:      #f5f0e8
     Ink (text):      #3b2f2f
     Airmail Red:     #c44b4f
     Airmail Blue:    #3d5a80
     Wax Seal:        #8b2252
     Wax Seal Dark:   #6b1a3a
     Margin Note:     #6b7fa3
     Hover/Active:    #d4a24e
     Shadow:          #4a4a4a

   Fonts:
     Display:         Playfair Display 700 italic
     Body:            Lora 400
     Margin Notes:    Caveat 400
     UI/Meta:         IBM Plex Sans 500
   ===================================================== */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: #f5f0e8;
    color: #3b2f2f;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    overflow-x: hidden;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =====================================================
   POSTMARK HEADER / NAVIGATION
   ===================================================== */

#postmark-header {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.postmark-circle {
    width: 120px;
    height: 120px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.postmark-circle:hover .postmark-svg {
    animation: postmark-spin 20s linear infinite;
}

@keyframes postmark-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.postmark-svg {
    width: 120px;
    height: 120px;
    transition: transform 0.3s ease;
}

.postmark-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    fill: #3b2f2f;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.postmark-date {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    fill: #3b2f2f;
}

.cancellation-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 10px;
    opacity: 0.5;
}

.cancellation-left {
    right: 100%;
    margin-right: 4px;
}

.cancellation-right {
    left: 100%;
    margin-left: 4px;
}

.cancellation-line svg {
    width: 100%;
    height: 100%;
}

/* Nav overlay */
.postmark-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: rgba(245, 240, 232, 0.97);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    clip-path: circle(0px at calc(100% - 84px) 84px);
}

.postmark-nav.open {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    clip-path: circle(150vmax at calc(100% - 84px) 84px);
}

.nav-link {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: #3b2f2f;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
}

.postmark-nav.open .nav-link {
    opacity: 1;
    transform: translateY(0);
}

.postmark-nav.open .nav-link:nth-child(1) { transition-delay: 0.15s; }
.postmark-nav.open .nav-link:nth-child(2) { transition-delay: 0.2s; }
.postmark-nav.open .nav-link:nth-child(3) { transition-delay: 0.25s; }
.postmark-nav.open .nav-link:nth-child(4) { transition-delay: 0.3s; }
.postmark-nav.open .nav-link:nth-child(5) { transition-delay: 0.35s; }

.nav-link:hover {
    color: #8b2252;
}

/* =====================================================
   HERO / OPENING LETTER
   ===================================================== */

.hero-letter {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 8% 60px;
    position: relative;
}

.hero-content {
    max-width: 680px;
    position: relative;
}

.hero-salutation {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: #6b7fa3;
    margin-bottom: 16px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #3b2f2f;
    margin-bottom: 32px;
}

.hero-title em {
    color: #8b2252;
    font-style: italic;
}

.hero-intro {
    font-family: 'Lora', serif;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    color: #3b2f2f;
    max-width: 560px;
}

.hero-stamp {
    position: absolute;
    top: -20px;
    right: -80px;
    width: 80px;
    height: 80px;
    opacity: 0.6;
    transform: rotate(12deg);
}

.stamp-svg {
    width: 100%;
    height: 100%;
}

.stamp-text-top,
.stamp-text-bottom {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    fill: #c44b4f;
    letter-spacing: 0.15em;
}

.scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: scroll-bounce 2s ease-in-out infinite;
}

.scroll-hint-text {
    font-family: 'Caveat', cursive;
    font-size: 1rem;
    color: #6b7fa3;
}

.scroll-arrow {
    opacity: 0.6;
}

@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* =====================================================
   ENVELOPE SECTIONS
   ===================================================== */

.envelope-section {
    min-height: 100vh;
    padding: 80px 0 0;
    position: relative;
}

.envelope {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    perspective: 1200px;
}

/* Envelope Flap */
.envelope-flap {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 80px;
    max-width: 1100px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-out;
    transform-origin: top center;
}

.envelope-flap-front {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: #ebe5d9;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    backface-visibility: hidden;
    border-bottom: 2px dashed #c44b4f;
}

.envelope-flap-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: #d8d2c6;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    backface-visibility: hidden;
    transform: rotateX(180deg);
}

.envelope.flap-open .envelope-flap {
    transform: rotateX(180deg);
}

/* Envelope Body */
.envelope-body {
    background: #f5f0e8;
    border-radius: 4px;
    padding: 48px 0 64px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    box-shadow: 0 2px 20px rgba(74, 74, 74, 0.08);
}

.envelope.flap-open .envelope-body {
    opacity: 1;
    transform: translateY(0);
}

/* Airmail Border */
.airmail-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        #c44b4f 0px,
        #c44b4f 12px,
        #f5f0e8 12px,
        #f5f0e8 16px,
        #3d5a80 16px,
        #3d5a80 28px,
        #f5f0e8 28px,
        #f5f0e8 32px
    );
    border-radius: 4px 4px 0 0;
}

/* Content wrapper for asymmetric layout */
.envelope-content-wrapper {
    display: flex;
    position: relative;
    padding: 32px 40px;
}

/* Review content columns */
.review-content {
    flex: 0 0 58%;
}

.review-left {
    margin-left: 0;
    margin-right: auto;
}

.review-right {
    margin-left: auto;
    margin-right: 0;
}

/* Margin notes */
.margin-notes {
    flex: 0 0 30%;
    position: relative;
}

.margin-left {
    order: -1;
    padding-right: 32px;
}

.margin-right {
    padding-left: 32px;
}

.margin-note {
    position: sticky;
    top: var(--note-top, 100px);
    font-family: 'Caveat', cursive;
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    color: #6b7fa3;
    line-height: 1.5;
    margin-bottom: 60px;
    padding-left: 12px;
    border-left: 2px solid rgba(107, 127, 163, 0.3);
}

/* Review Header */
.review-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.review-category {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4a4a4a;
}

.review-date {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7fa3;
}

/* Review Title */
.review-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #3b2f2f;
    margin-bottom: 32px;
}

/* Wax Seal Drop Cap */
.wax-seal-dropcap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #8b2252, #6b1a3a);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15),
        0 3px 8px rgba(74, 74, 74, 0.2);
    float: left;
    margin-right: 12px;
    margin-top: 4px;
    position: relative;
}

.wax-seal-dropcap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    background-size: cover;
    pointer-events: none;
}

.seal-letter {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2rem;
    color: #f5f0e8;
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* Review Body */
.review-body p {
    margin-bottom: 1.5em;
}

.review-body p:last-child {
    margin-bottom: 0;
}

/* Handwritten Underline */
.handwritten-underline {
    position: relative;
    display: inline;
}

.handwritten-underline svg {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 12px;
    overflow: visible;
}

.handwritten-underline svg path {
    stroke: #d4a24e;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =====================================================
   TORN PAPER DIVIDERS
   ===================================================== */

.torn-paper-divider {
    height: 40px;
    margin: 40px 0 0;
    position: relative;
    overflow: hidden;
}

.torn-paper-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(61, 90, 128, 0.08);
    clip-path: polygon(
        0% 20%,
        2% 45%,
        4% 30%,
        7% 55%,
        9% 35%,
        12% 60%,
        15% 40%,
        18% 50%,
        20% 25%,
        23% 55%,
        26% 30%,
        29% 48%,
        32% 22%,
        35% 50%,
        38% 35%,
        41% 58%,
        44% 28%,
        47% 52%,
        50% 38%,
        53% 55%,
        56% 30%,
        59% 48%,
        62% 25%,
        65% 52%,
        68% 35%,
        71% 55%,
        74% 28%,
        77% 50%,
        80% 40%,
        83% 58%,
        86% 32%,
        89% 50%,
        92% 25%,
        95% 48%,
        98% 35%,
        100% 45%,
        100% 100%,
        0% 100%
    );
}

.torn-paper-divider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(61, 90, 128, 0.04);
    clip-path: polygon(
        0% 60%,
        3% 40%,
        6% 55%,
        9% 38%,
        12% 50%,
        15% 35%,
        18% 55%,
        21% 42%,
        24% 58%,
        27% 35%,
        30% 52%,
        33% 40%,
        36% 56%,
        39% 38%,
        42% 52%,
        45% 35%,
        48% 50%,
        51% 42%,
        54% 58%,
        57% 38%,
        60% 55%,
        63% 40%,
        66% 52%,
        69% 35%,
        72% 50%,
        75% 42%,
        78% 55%,
        81% 38%,
        84% 52%,
        87% 40%,
        90% 55%,
        93% 38%,
        96% 50%,
        100% 42%,
        100% 100%,
        0% 100%
    );
}

/* Per-section tear variation using --tear-seed */
.envelope-section:nth-child(odd) .torn-paper-divider::before {
    clip-path: polygon(
        0% 30%,
        3% 50%,
        6% 25%,
        9% 45%,
        12% 30%,
        15% 55%,
        18% 35%,
        21% 50%,
        24% 28%,
        27% 48%,
        30% 35%,
        33% 55%,
        36% 25%,
        39% 50%,
        42% 32%,
        45% 52%,
        48% 28%,
        51% 45%,
        54% 35%,
        57% 55%,
        60% 30%,
        63% 48%,
        66% 25%,
        69% 50%,
        72% 35%,
        75% 52%,
        78% 30%,
        81% 48%,
        84% 38%,
        87% 55%,
        90% 28%,
        93% 45%,
        96% 32%,
        100% 50%,
        100% 100%,
        0% 100%
    );
}

/* =====================================================
   CANCELLATION LINE MOTIFS (inline decorative)
   ===================================================== */

.cancellation-motif {
    display: block;
    margin: 24px 0;
    height: 10px;
    opacity: 0.25;
}

.cancellation-motif svg {
    width: 100%;
    height: 100%;
}

/* =====================================================
   CLOSING LETTER
   ===================================================== */

.closing-letter {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 8%;
    text-align: center;
}

.closing-content {
    max-width: 520px;
}

.closing-salutation {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #6b7fa3;
    margin-bottom: 8px;
}

.closing-signature {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: #3b2f2f;
    margin-bottom: 32px;
}

.closing-seal {
    width: 80px;
    height: 80px;
    margin: 0 auto 32px;
}

.closing-seal-svg {
    width: 100%;
    height: 100%;
}

.closing-postscript {
    font-family: 'Caveat', cursive;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #6b7fa3;
    line-height: 1.6;
}

/* =====================================================
   POSTAGE STAMP HOVER EFFECT (for potential card views)
   ===================================================== */

.stamp-card {
    border: none;
    background: #f5f0e8;
    padding: 24px;
    position: relative;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    mask-image: radial-gradient(circle at 0px 0px, transparent 5px, black 5.5px),
                radial-gradient(circle at 0px 100%, transparent 5px, black 5.5px),
                radial-gradient(circle at 100% 0px, transparent 5px, black 5.5px),
                radial-gradient(circle at 100% 100%, transparent 5px, black 5.5px);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.stamp-card:hover {
    transform: rotate(2deg) translateY(-4px);
    box-shadow: 0 8px 24px rgba(74, 74, 74, 0.15);
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */

@media (max-width: 900px) {
    .postmark-circle {
        width: 80px;
        height: 80px;
    }

    .postmark-svg {
        width: 80px;
        height: 80px;
    }

    .cancellation-line {
        display: none;
    }

    .postmark-nav {
        clip-path: circle(0px at calc(100% - 64px) 64px);
    }

    .postmark-nav.open {
        clip-path: circle(150vmax at calc(100% - 64px) 64px);
    }

    #postmark-header {
        top: 16px;
        right: 16px;
    }
}

@media (max-width: 768px) {
    .envelope-content-wrapper {
        flex-direction: column;
        padding: 24px 20px;
    }

    .review-content {
        flex: 1;
    }

    .review-left,
    .review-right {
        margin: 0;
    }

    .margin-notes {
        flex: 1;
        order: 1;
        padding: 0;
        margin-top: 32px;
    }

    .margin-left {
        order: 1;
        padding-right: 0;
    }

    .margin-right {
        padding-left: 0;
    }

    .margin-note {
        position: relative;
        top: auto !important;
        margin-bottom: 20px;
        padding: 12px 16px;
        border-left: 3px solid #c44b4f;
        background: rgba(107, 127, 163, 0.05);
        border-radius: 0 4px 4px 0;
    }

    .hero-stamp {
        display: none;
    }

    .hero-letter {
        padding: 100px 6% 60px;
    }

    .envelope {
        padding: 0 12px;
    }

    .review-title {
        font-size: clamp(1.6rem, 4vw, 2.5rem);
    }

    .wax-seal-dropcap {
        width: 2.8em;
        height: 2.8em;
    }

    .seal-letter {
        font-size: 1.6rem;
    }

    .envelope-flap {
        height: 50px;
    }

    .envelope-flap-front,
    .envelope-flap-back {
        height: 50px;
    }

    .postmark-circle {
        width: 60px;
        height: 60px;
    }

    .postmark-svg {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .review-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    .envelope-content-wrapper {
        padding: 16px 12px;
    }

    .wax-seal-dropcap {
        width: 2.4em;
        height: 2.4em;
    }

    .seal-letter {
        font-size: 1.3rem;
    }
}

/* =====================================================
   SELECTION STYLES
   ===================================================== */

::selection {
    background: rgba(139, 34, 82, 0.15);
    color: #3b2f2f;
}

/* =====================================================
   LINK STYLES
   ===================================================== */

a {
    color: #8b2252;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #d4a24e;
}

/* =====================================================
   UNDERLINE ANIMATION STATES
   ===================================================== */

.handwritten-underline svg path {
    transition: stroke-dashoffset 0.8s ease-in-out;
}

.handwritten-underline.animated svg path {
    stroke-dashoffset: 0 !important;
}