/* postp.day -- the day after
   Watercolor / ethereal / ma-negative-space
   Palette:
     #f0e8ff  Lavender Light  (gradient start)
     #e8f0ff  Sky Pale        (gradient middle)
     #fff5e8  Warmth          (gradient end)
     #4a3f5c  Dusk Purple     (primary text)
     #8a7fa0  Twilight        (secondary text)
     #d8d0e8  Evening Lavender (footer gradient)
     #c8b8d8  Mist            (subtle accents)
     #f8f4ff  Near White      (lightest)
*/

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Lora', Georgia, serif;
    color: #4a3f5c;
    background: linear-gradient(
        180deg,
        #f0e8ff 0%,
        #e8f0ff 30%,
        #fff5e8 60%,
        #d8d0e8 100%
    );
    background-attachment: fixed;
    min-height: 300vh;
    line-height: 2;
    overflow-x: hidden;
}

/* The scroll itself, with extreme vertical breathing */
.reflection-scroll {
    position: relative;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

/* ---------- Hero / Morning After ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(
        180deg,
        #f0e8ff 0%,
        #f0e8ff 35%,
        #e8f0ff 70%,
        #fff5e8 100%
    );
}

.hero-inner {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 460px;
    padding: 0 24px;
}

.display-title {
    font-family: 'Cormorant Garamond', 'Cormorant', Lora, Georgia, serif;
    font-weight: 300;
    font-size: clamp(2rem, 6vw, 3.4rem);
    letter-spacing: 0.02em;
    color: #4a3f5c;
    line-height: 1.1;
    margin-bottom: 1.6rem;
}

.hero-subtitle {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.92rem;
    color: #8a7fa0;
    letter-spacing: 0.04em;
}

/* ---------- Reflection Blocks ---------- */
.reflection {
    max-width: 460px;
    margin: 0 auto;
    padding: 0 24px;
    margin-bottom: 200px;
    text-align: left;
}

.reflection:first-of-type {
    margin-top: 60px;
}

.reflection .meta {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: #8a7fa0;
    margin-bottom: 2.2rem;
    font-style: normal;
}

.reflection-title {
    font-family: 'Cormorant Garamond', 'Cormorant', Lora, Georgia, serif;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: #4a3f5c;
    line-height: 1.25;
    letter-spacing: 0.005em;
    margin-bottom: 1.4rem;
}

.reflection-body {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    line-height: 2;
    color: #4a3f5c;
}

/* Subtle hue shift per section -- ambient color journey */
#reflection-one  { color: #4a3f5c; }
#reflection-two  { color: #4a3f5c; }
#reflection-three { color: #4a3f5c; }
#reflection-four  { color: #463c5a; }
#reflection-five  { color: #4a3f5c; }
#reflection-six   { color: #463858; }
#reflection-seven { color: #423350; }

#reflection-one .reflection-body  { color: #4a3f5c; }
#reflection-two .reflection-body  { color: #4a3f5c; }
#reflection-three .reflection-body { color: #463c5a; }
#reflection-four .reflection-body  { color: #4a3f5c; }
#reflection-five .reflection-body  { color: #5a4a6a; }
#reflection-six .reflection-body   { color: #463858; }
#reflection-seven .reflection-body { color: #3e3050; }

/* ---------- Single-pixel accents ---------- */
.thread-dot,
.thread-line {
    display: block;
    margin: 0 auto 200px auto;
    background: #c8b8d8;
}

.thread-dot {
    width: 1px;
    height: 1px;
    border-radius: 50%;
}

.thread-line {
    width: 1px;
    height: 60px;
    opacity: 0.6;
}

/* ---------- Dusk / Footer ---------- */
.dusk {
    width: 100%;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(
        180deg,
        rgba(216, 208, 232, 0) 0%,
        #d8d0e8 60%,
        #c8b8d8 100%
    );
    padding: 200px 24px 160px 24px;
}

.dusk-line {
    max-width: 460px;
    margin: 0 auto;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    line-height: 2;
    color: #4a3f5c;
    text-align: center;
}

/* ---------- Selection ---------- */
::selection {
    background: #f8f4ff;
    color: #4a3f5c;
}

/* ---------- Responsive (gentle, not flashy) ---------- */
@media (max-width: 540px) {
    .reflection {
        margin-bottom: 160px;
        padding: 0 28px;
    }
    .thread-dot,
    .thread-line {
        margin-bottom: 160px;
    }
    .hero-inner {
        top: 58%;
    }
    .dusk {
        min-height: 60vh;
        padding: 160px 28px 120px 28px;
    }
}

@media (max-width: 380px) {
    .reflection {
        margin-bottom: 140px;
    }
    .thread-dot,
    .thread-line {
        margin-bottom: 140px;
    }
}