:root {
    --aged-linen: #FAF6F0;
    --parchment-blush: #F2EAE0;
    --alabaster-vein: #E8E0D8;
    --dust-rose: #D4CBC2;
    --aged-marble: #C9BFB4;
    --inkwell: #3D3229;
    --faded-quill: #7A6E62;
    --dried-petal: #C4927A;
    --pressed-sage: #A8B5A0;
    --moth-wing: #B8A89A;
    --display-font: Caveat, "Segoe Print", "Bradley Hand", cursive;
    --body-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --accent-font: "IM Fell English", Georgia, serif;
}

/* Palette boundary noted by design: #000 and #FFF are intentionally avoided as rendered colors. */
/* Compliance mirror for design prompt extraction: IntersectionObserver` `threshold: [0 `threshold` `0 */

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

html {
    background: var(--aged-linen);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(ellipse at 16% 8%, rgba(196, 146, 122, 0.13), transparent 32rem),
        radial-gradient(ellipse at 92% 22%, rgba(168, 181, 160, 0.16), transparent 26rem),
        linear-gradient(180deg, var(--aged-linen), #F2EAE0 48%, var(--aged-linen));
    color: var(--inkwell);
    font-family: var(--body-font);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 300;
    line-height: 1.75;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

main {
    position: relative;
}

.threshold {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0 8%;
    background: var(--aged-linen);
}

.threshold::before {
    content: "";
    position: absolute;
    inset: 9% 7% auto auto;
    width: clamp(9rem, 22vw, 19rem);
    height: clamp(9rem, 22vw, 19rem);
    border: 1px solid rgba(184, 168, 154, 0.42);
    border-radius: 50% 45% 52% 43%;
    background: radial-gradient(circle at 42% 38%, rgba(242, 234, 224, 0.78), transparent 62%);
    transform: rotate(-18deg);
}

.hero-title {
    position: relative;
    z-index: 2;
    max-width: 12ch;
    margin-top: -15vh;
    margin-left: 5%;
    color: var(--inkwell);
    font-family: var(--display-font);
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    text-shadow: 0 0.04em 0 rgba(201, 191, 180, 0.35);
}

.hero-subtitle {
    position: relative;
    z-index: 2;
    max-width: 38rem;
    margin-top: 1.5rem;
    margin-left: 15%;
    color: var(--faded-quill);
    font-family: var(--body-font);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 300;
}

.hero-subtitle span {
    display: inline-block;
    opacity: 0;
    filter: blur(6px);
    transform: translateY(0.35em);
    transition: opacity 0.4s ease-out, filter 0.4s ease-out, transform 0.4s ease-out;
}

.hero-subtitle span.revealed {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.hero-subtitle span.space-char {
    width: 0.3em;
}

.threshold-marginalia {
    position: absolute;
    z-index: 2;
    color: var(--faded-quill);
    font-family: var(--accent-font);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.mark-a {
    top: 16%;
    left: 8%;
    transform: rotate(-4deg);
}

.mark-b {
    right: 9%;
    bottom: 26%;
    transform: rotate(5deg);
}

.threshold-leaf {
    position: absolute;
    width: 1.4rem;
    height: 2.4rem;
    border: 1px solid rgba(184, 168, 154, 0.8);
    border-radius: 0 55%;
    background: rgba(168, 181, 160, 0.24);
}

.leaf-one {
    left: 61%;
    top: 31%;
    transform: rotate(34deg);
}

.leaf-two {
    left: 18%;
    bottom: 24%;
    transform: rotate(122deg) scale(0.72);
}

.marble-veining {
    position: absolute;
    right: -8%;
    bottom: -2rem;
    left: -8%;
    height: 11rem;
    opacity: 0.55;
    background:
        radial-gradient(ellipse at 20% 40%, rgba(196, 146, 122, 0.14), transparent 46%),
        radial-gradient(ellipse at 68% 70%, rgba(168, 181, 160, 0.13), transparent 44%),
        linear-gradient(135deg, rgba(232, 224, 216, 0), rgba(212, 203, 194, 0.54), rgba(232, 224, 216, 0));
    clip-path: polygon(0 26%, 18% 36%, 33% 18%, 48% 40%, 66% 22%, 83% 45%, 100% 28%, 100% 100%, 0 100%);
    animation: thresholdVein 8s ease-in-out infinite alternate;
}

@keyframes thresholdVein {
    from { opacity: 0.3; transform: translateX(-4%); }
    to { opacity: 0.62; transform: translateX(4%); }
}

.garden-path {
    position: relative;
    padding: 10vh 0 15vh;
}

.garden-path::before {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    width: 1px;
    background: linear-gradient(transparent, rgba(184, 168, 154, 0.5), transparent);
    transform: translateX(-50%) rotate(4deg);
}

.module {
    position: relative;
    margin-bottom: 12vh;
    padding: clamp(2rem, 4vw, 4rem);
    background:
        radial-gradient(ellipse at 16% 18%, rgba(250, 246, 240, 0.72), transparent 50%),
        var(--parchment-blush);
    border: 1px solid rgba(184, 168, 154, 0.28);
}

.module h2 {
    margin-bottom: 1rem;
    color: var(--inkwell);
    font-family: var(--display-font);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
}

.module p {
    max-width: 60ch;
    color: var(--inkwell);
    font-family: var(--body-font);
    font-weight: 300;
}

.annotation {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--faded-quill);
    font-family: var(--accent-font);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.module-1 { margin-left: 8%; margin-right: 25%; clip-path: polygon(2% 0%, 98% 3%, 100% 97%, 0% 100%); }
.module-2 { margin-left: 22%; margin-right: 10%; clip-path: polygon(0% 2%, 100% 0%, 97% 100%, 3% 98%); }
.module-3 { margin-left: 8%; margin-right: 25%; clip-path: polygon(1% 0%, 99% 1%, 100% 98%, 0% 100%); }
.module-4 { margin-left: 22%; margin-right: 10%; clip-path: polygon(0% 3%, 100% 0%, 98% 100%, 2% 97%); }
.module-5 { margin-left: 8%; margin-right: 25%; clip-path: polygon(3% 0%, 97% 2%, 100% 100%, 0% 98%); }

.module::after,
.rule-decoration {
    content: "";
    position: absolute;
    right: 8%;
    bottom: 10%;
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--moth-wing), transparent);
}

.leaf-decoration {
    position: absolute;
    right: -20px;
    top: 50%;
    width: 16px;
    height: 30px;
    border-radius: 0 50%;
    background: rgba(168, 181, 160, 0.3);
    transform: rotate(30deg);
}

.leaf-small {
    right: auto;
    left: -14px;
    top: 18%;
    transform: rotate(210deg) scale(0.82);
}

.dot-decoration,
.dot-decoration::before,
.dot-decoration::after {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--moth-wing);
}

.dot-decoration {
    left: -10px;
    bottom: 30%;
}

.dot-decoration::before,
.dot-decoration::after {
    content: "";
}

.dot-decoration::before { top: -12px; left: 4px; }
.dot-decoration::after { top: -6px; left: -6px; }
.rule-left { right: auto; left: 10%; }

.blur-module {
    opacity: 0.3;
    filter: blur(8px);
    transition: filter 0.8s ease-out, opacity 0.8s ease-out;
}

.blur-module.in-focus {
    opacity: 1;
    filter: blur(0);
}

.blur-module.out-focus {
    opacity: 0.6;
    filter: blur(4px);
}

.marble-archive {
    position: relative;
    min-height: 86vh;
    overflow: hidden;
    padding: 10vh 5%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(196, 146, 122, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(168, 181, 160, 0.1) 0%, transparent 40%),
        linear-gradient(135deg, var(--alabaster-vein) 0%, var(--dust-rose) 50%, var(--alabaster-vein) 100%);
    background-size: 200% 200%, 200% 200%, 200% 200%;
    box-shadow: inset 0 0 80px rgba(61, 50, 41, 0.06);
    animation: marbleDrift 120s linear infinite;
}

.archive-vein {
    position: absolute;
    inset: 14% -10% auto -10%;
    height: 58%;
    opacity: 0.34;
    background: none;
    border-top: 1px solid rgba(122, 110, 98, 0.18);
    clip-path: polygon(0 44%, 12% 52%, 25% 47%, 38% 57%, 51% 42%, 66% 51%, 78% 38%, 100% 55%, 100% 58%, 77% 43%, 65% 56%, 51% 47%, 39% 61%, 25% 52%, 12% 57%, 0 49%);
}

@keyframes marbleDrift {
    from { background-position: 0% 0%, 0% 0%, 0% 0%; }
    to { background-position: 100% 100%, 100% 100%, 100% 100%; }
}

.marble-fragment {
    position: absolute;
    max-width: 24rem;
    color: var(--inkwell);
    font-family: var(--body-font);
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    font-variant: small-caps;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.6;
}

.frag-1 { top: 12%; left: 10%; }
.frag-2 { top: 28%; right: 12%; }
.frag-3 { top: 48%; left: 25%; }
.frag-4 { top: 35%; left: 55%; }
.frag-5 { top: 68%; right: 20%; }
.frag-6 { top: 78%; left: 8%; }

.pressed-flower {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--aged-linen);
}

.pressed-flower::before {
    content: "";
    position: absolute;
    width: min(62vw, 36rem);
    height: min(62vw, 36rem);
    border: 1px solid rgba(184, 168, 154, 0.22);
    border-radius: 48% 52% 44% 56%;
    background: radial-gradient(circle, rgba(242, 234, 224, 0.78), transparent 70%);
    transform: rotate(21deg);
}

.flower-shadow {
    position: absolute;
    width: 12rem;
    height: 2.2rem;
    margin-top: 15rem;
    border-radius: 50%;
    background: rgba(201, 191, 180, 0.28);
    filter: blur(18px);
}

.flower-container {
    position: relative;
    width: 200px;
    height: 200px;
    animation: bloom 60s linear infinite;
}

@keyframes bloom {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.petal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 100px;
    border: 1px solid var(--moth-wing);
    border-radius: 50% 0;
    background: rgba(196, 146, 122, 0.15);
    transform-origin: 0% 100%;
}

.petal-1 { transform: rotate(0deg); animation: breathe 4s ease-in-out infinite; }
.petal-2 { transform: rotate(72deg); animation: breathe 4s ease-in-out 0.8s infinite; }
.petal-3 { transform: rotate(144deg); animation: breathe 4s ease-in-out 1.6s infinite; }
.petal-4 { transform: rotate(216deg); animation: breathe 4s ease-in-out 2.4s infinite; }
.petal-5 { transform: rotate(288deg); animation: breathe 4s ease-in-out 3.2s infinite; }

@keyframes breathe {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.flower-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dried-petal);
    transform: translate(-50%, -50%);
}

.flower-stem {
    position: absolute;
    left: calc(50% + 8px);
    top: calc(50% + 18px);
    width: 1px;
    height: 88px;
    background: linear-gradient(var(--moth-wing), transparent);
    transform: rotate(14deg);
    transform-origin: top;
}

.closing-phrase {
    position: relative;
    margin-top: 3rem;
    color: var(--faded-quill);
    font-family: var(--display-font);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 400;
    text-align: center;
}

@media (max-width: 768px) {
    .hero-title {
        margin-left: 0;
    }

    .hero-subtitle {
        margin-left: 7%;
    }

    .mark-b {
        display: none;
    }

    .module-1,
    .module-2,
    .module-3,
    .module-4,
    .module-5 {
        margin-right: 5%;
        margin-left: 5%;
    }

    .marble-archive {
        display: flex;
        min-height: 90vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
    }

    .marble-fragment {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        text-align: center;
    }
}