:root {
    --e-bg: #F4EEDF; /* Parchment off-white */
    --e-text: #112233; /* Deep navy */
    --e-accent: #8b6b4a; /* Sepia bronze */
    
    --font-head: 'Cinzel', serif;
    --font-body: 'Libre Baskerville', serif;
}

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

body { background-color: var(--e-bg); color: var(--e-text); font-family: var(--font-body); overflow-x: hidden; }

/* Custom Clock Cursor */
.e-cursor {
    position: fixed; width: 40px; height: 40px; border: 1px solid var(--e-text); border-radius: 50%;
    pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, opacity 0.3s;
    background: rgba(244, 238, 223, 0.4); backdrop-filter: blur(2px); mix-blend-mode: multiply;
}
.e-cursor.hover { width: 80px; height: 80px; background: transparent; }
.hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; background: var(--e-text); border-radius: 4px; }
.hour-hand { width: 2px; height: 10px; margin-left: -1px; }
.min-hand { width: 1.5px; height: 14px; margin-left: -0.75px; }
.sec-hand { width: 1px; height: 16px; margin-left: -0.5px; background: var(--e-accent); }
.center-dot { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: var(--e-text); border-radius: 50%; transform: translate(-50%, -50%); }

/* Paper Texture Global Overlay */
.paper-grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 9000; mix-blend-mode: multiply; opacity: 0.6;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* Header */
.e-header {
    border-bottom: 2px solid var(--e-text); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; border-top: 10px solid var(--e-text);
}
.logo { font-family: var(--font-head); font-size: 2.5rem; font-weight: 700; letter-spacing: 5px; }

/* Main Container borders */
.e-main { margin: 40px 5%; border: 1px solid var(--e-text); padding: 50px; background: var(--e-bg); position: relative; }
.e-main::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--e-text); pointer-events: none; }

/* Hero */
.split-layout { display: flex; gap: 60px; align-items: center; border-bottom: 1px solid var(--e-text); padding-bottom: 60px; margin-bottom: 60px; }
.col-left { flex: 1; }
.col-right { flex: 1.2; height: 600px; }

.hero-text h1 { font-family: var(--font-head); font-size: 6rem; line-height: 1; margin-bottom: 30px; letter-spacing: -2px; }
.hero-text p { font-size: 1.1rem; line-height: 1.8; color: #334; margin-bottom: 40px; }
.divider { width: 50px; height: 2px; background: var(--e-accent); margin-bottom: 40px; }

.meta-row { display: flex; gap: 30px; font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 2px; }

/* Parallax Image Mask */
.parallax-wrapper { overflow: hidden; position: relative; border: 1px solid var(--e-text); padding: 10px; background: var(--e-bg); }
.parallax-img { width: 100%; height: 130%; object-fit: cover; filter: sepia(40%) contrast(1.1); transform: translateY(-15%); }

/* Editorial Article */
.e-article { max-width: 900px; margin: 0 auto 100px; }
.sub-headline { font-family: var(--font-head); font-size: 2.5rem; text-align: center; margin-bottom: 40px; border-bottom: 1px dashed var(--e-text); padding-bottom: 20px; }

.two-col-text { font-size: 1.1rem; line-height: 1.9; column-count: 2; column-gap: 50px; text-align: justify; }
.dropcap { float: left; font-family: var(--font-head); font-size: 5rem; line-height: 0.8; margin-top: 10px; margin-right: 15px; color: var(--e-text); }
.two-col-text p { margin-bottom: 20px; color: #223; }

/* Grid Collection */
.e-collection { border-top: 2px solid var(--e-text); padding-top: 60px; }
.section-heading { font-family: var(--font-head); font-size: 1.5rem; text-align: center; margin-bottom: 50px; letter-spacing: 4px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

.item-card { text-decoration: none; color: var(--e-text); display: block; border-bottom: 1px solid transparent; transition: border-color 0.3s; padding-bottom: 20px; }
.item-card:hover { border-bottom: 1px solid var(--e-accent); }
.img-mask { width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--e-text); margin-bottom: 20px; }
.img-mask img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.5s, transform 0.5s; }
.item-card:hover .img-mask img { filter: grayscale(0%) sepia(20%); transform: scale(1.05); }

.item-detail h3 { font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 5px; }
.item-detail .year { font-style: italic; color: var(--e-accent); font-size: 0.9rem; }

/* Footer */
.e-footer { text-align: center; padding: 60px 5%; border-top: 10px solid var(--e-text); margin-top: 100px; }
.f-logo { font-family: var(--font-head); font-size: 2rem; letter-spacing: 5px; margin-bottom: 20px; }
.e-footer p { font-style: italic; margin-bottom: 30px; font-size: 0.9rem; color: #556; }
.inquiry-btn { display: inline-block; padding: 10px 30px; border: 1px solid var(--e-text); color: var(--e-text); text-decoration: none; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 2px; transition: background 0.3s, color 0.3s; }
.inquiry-btn:hover { background: var(--e-text); color: var(--e-bg); }

@media (max-width: 900px) {
    .split-layout { flex-direction: column; }
    .col-right { height: 400px; width: 100%; }
    .two-col-text { column-count: 1; }
    .grid-3 { grid-template-columns: 1fr; }
    .hero-text h1 { font-size: 4rem; }
    .e-main { margin: 20px 2%; padding: 20px; }
}