:root {
    /* Source Serif 4** for longer body copy and descriptive passages because it remains readable while preserving a refined bookish tone. */
    --spruce: #07150F;
    --pine: #0F2A1D;
    --moss: #31553A;
    --fern: #6E8F5C;
    --ivory: #F4EAD2;
    --parchment: #DCCB9F;
    --brass: #B88A3D;
    --rosehip: #7A2E2A;
    --mushroom: #8C7A5C;
    --display: 'Cormorant Garamond', serif;
    --label: 'Fraunces', serif;
    --body: 'Source Serif 4', serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ivory);
    font-family: var(--body);
    background: var(--spruce);
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: .18;
    background-image: radial-gradient(circle at 20% 30%, #F4EAD2 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, #8C7A5C 0 1px, transparent 1px);
    background-size: 34px 34px, 47px 47px;
    mix-blend-mode: soft-light;
}

main { background: radial-gradient(circle at 50% 0%, rgba(110,143,92,.26), transparent 32rem), linear-gradient(180deg, var(--spruce), var(--pine) 46%, var(--spruce)); }

.section-panel {
    position: relative;
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 5rem);
    display: grid;
    place-items: center;
    isolation: isolate;
}

.threshold { align-content: center; overflow: hidden; }
.threshold::before, .threshold::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .55;
    animation: drift 16s ease-in-out infinite alternate;
}
.threshold::before { width: 44rem; height: 44rem; background: radial-gradient(circle, rgba(49,85,58,.72), transparent 67%); top: -18rem; left: -12rem; }
.threshold::after { width: 34rem; height: 34rem; background: radial-gradient(circle, rgba(184,138,61,.22), transparent 70%); bottom: 8%; right: -10rem; animation-delay: -6s; }

.canopy {
    position: absolute;
    inset: 3vw;
    border: 1px solid rgba(184,138,61,.32);
    box-shadow: inset 0 0 8rem rgba(7,21,15,.75);
    z-index: -1;
}

.eyebrow {
    margin: 0 0 .6rem;
    color: var(--parchment);
    font-family: var(--label);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.wordmark {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(5rem, 18vw, 17rem);
    font-weight: 700;
    line-height: .75;
    letter-spacing: .045em;
    color: var(--ivory);
    text-shadow: 0 1rem 3rem rgba(0,0,0,.42), 0 0 2px var(--brass);
}

.intro { max-width: 43rem; margin: 1.25rem auto 2rem; text-align: center; color: var(--parchment); font-size: clamp(1.05rem, 2vw, 1.35rem); }

.manor-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); width: min(1120px, 100%); }
.threshold-grid { grid-template-columns: repeat(6, 1fr); align-items: end; }

.heirloom-card {
    position: relative;
    min-height: 15rem;
    padding: 1.5rem;
    color: var(--pine);
    background: linear-gradient(145deg, var(--ivory), var(--parchment));
    border: 1px solid var(--brass);
    border-radius: 2.2rem 2.2rem 1rem 1rem;
    box-shadow: inset 0 0 0 6px rgba(184,138,61,.16), 0 1rem 2.4rem rgba(0,0,0,.32);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .45s ease, box-shadow .45s ease, border-radius .6s ease;
    animation: breathe 7s ease-in-out infinite;
}
.heirloom-card::before { content: ""; position: absolute; inset: .7rem; border: 1px dashed rgba(49,85,58,.38); border-radius: inherit; pointer-events: none; }
.heirloom-card::after { content: attr(data-charm); position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1rem; color: var(--rosehip); font-family: var(--label); font-size: .68rem; letter-spacing: .05em; opacity: 0; transform: translateY(.5rem); transition: .35s ease; }
.heirloom-card:hover { transform: rotateX(3deg) rotateY(-4deg) translateY(-.35rem); box-shadow: inset 0 0 0 6px rgba(184,138,61,.22), 0 1.4rem 3rem rgba(0,0,0,.45); }
.heirloom-card:hover::after { opacity: 1; transform: translateY(0); }

.threshold-grid .heirloom-card:nth-child(1) { grid-column: span 1; min-height: 17rem; border-radius: 3rem 3rem .8rem .8rem; }
.threshold-grid .heirloom-card:nth-child(2) { grid-column: span 1; min-height: 14rem; border-radius: 1.2rem; }
.threshold-grid .heirloom-card:nth-child(3) { grid-column: span 1; min-height: 18rem; border-radius: 50% 50% 1.4rem 1.4rem; }
.threshold-grid .heirloom-card:nth-child(4) { grid-column: span 1; min-height: 15rem; border-radius: 1rem 1rem 2.4rem 2.4rem; }
.threshold-grid .heirloom-card:nth-child(5) { grid-column: span 1; min-height: 16rem; border-radius: .8rem 3rem .8rem 3rem; }
.threshold-grid .heirloom-card:nth-child(6) { grid-column: span 1; min-height: 14.5rem; border-radius: 2.6rem .9rem 2.6rem .9rem; }

.brass-icon { width: 4.4rem; height: 4.4rem; fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(255,255,255,.3)); animation: iconFloat 5s ease-in-out infinite; }
.brass-icon.large { width: 8rem; height: 8rem; }
.heirloom-card h2, .heirloom-card h3 { margin: .85rem 0 .35rem; color: var(--pine); font-family: var(--label); font-weight: 650; }
.heirloom-card h2 { font-size: 1.25rem; }
.heirloom-card p { margin: 0; color: var(--moss); line-height: 1.35; }
.heirloom-card small { display: block; margin-top: .85rem; color: var(--mushroom); font-family: var(--label); font-size: .7rem; }
.wax-seal { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--rosehip); color: var(--ivory); font-family: var(--display); box-shadow: 0 .25rem .6rem rgba(122,46,42,.35); }

.section-heading { text-align: center; max-width: 42rem; margin-bottom: 2rem; }
.section-heading h2, .folio h2, .tapestry-card h2 { margin: 0; font-family: var(--display); font-size: clamp(3rem, 8vw, 6.5rem); line-height: .9; color: var(--ivory); }
.section-heading p, .folio p, .tapestry-card > p:last-child { color: var(--parchment); font-size: 1.16rem; }
.vine-divider { display: block; width: min(32rem, 80vw); height: 2rem; margin: 0 auto 1rem; border-top: 1px solid var(--brass); border-radius: 50%; position: relative; animation: curl 8s ease-in-out infinite; }
.vine-divider::before, .vine-divider::after { content: "☙"; position: absolute; top: -.9rem; color: var(--fern); font-size: 1.4rem; }
.vine-divider::before { left: 22%; } .vine-divider::after { right: 22%; transform: scaleX(-1); }

.drawer-grid { grid-template-columns: repeat(4, 1fr); }
.drawer-grid .heirloom-card { min-height: 12rem; background: linear-gradient(160deg, rgba(15,42,29,.96), rgba(49,85,58,.96)); color: var(--ivory); }
.drawer-grid .heirloom-card h3, .drawer-grid .heirloom-card p { color: var(--ivory); }
.drawer-grid .heirloom-card span { color: var(--brass); font-size: 2.2rem; }

.tapestry { grid-template-columns: minmax(0, 720px) minmax(13rem, 20rem); gap: 2rem; }
.tapestry-card { min-height: 31rem; padding: clamp(2rem, 5vw, 4rem); display: grid; align-content: center; justify-items: start; background: linear-gradient(145deg, rgba(15,42,29,.98), rgba(7,21,15,.98)); color: var(--ivory); }
.tapestry-card h2, .tapestry-card .eyebrow { color: var(--ivory); }
.charm-ring { display: grid; gap: 1rem; }
.charm-ring span { padding: 1rem 1.2rem; border: 1px solid rgba(184,138,61,.55); border-radius: 999px; color: var(--parchment); font-family: var(--label); background: rgba(7,21,15,.5); animation: iconFloat 6s ease-in-out infinite; }
.charm-ring span:nth-child(2) { animation-delay: -1s; } .charm-ring span:nth-child(3) { animation-delay: -2s; } .charm-ring span:nth-child(4) { animation-delay: -3s; }

.folio { min-height: 70vh; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(184,138,61,.18), transparent 25rem); }
.folio p { max-width: 39rem; }

.morph-frame { border-radius: 4rem 2rem 5rem 2.4rem; animation: frameMorph 9s ease-in-out infinite; }
.pressed-leaf { animation-delay: -.8s; }

@keyframes breathe { 0%,100% { border-radius: 2.2rem 2.2rem 1rem 1rem; } 50% { border-radius: 2.8rem 1.9rem 1.4rem 1.9rem; } }
@keyframes frameMorph { 0%,100% { border-radius: 4rem 2rem 5rem 2.4rem; } 50% { border-radius: 2.2rem 4.6rem 2.5rem 5.2rem; } }
@keyframes iconFloat { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(.25rem,-.45rem,0) rotate(2deg); } }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2rem,1rem,0) scale(1.08); } }
@keyframes curl { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.88); } }

@media (max-width: 980px) {
    .threshold-grid, .drawer-grid, .tapestry { grid-template-columns: repeat(2, 1fr); }
    .tapestry-card { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .section-panel { padding: 2rem 1rem; }
    .threshold-grid, .drawer-grid, .tapestry { grid-template-columns: 1fr; }
    .wordmark { font-size: 22vw; }
}