:root {
    --cream-light: #F8F2E6;
    --cream: #F2E9D8;
    --cream-dark: #E5D9C3;
    --brown-deep: #4A2F22;
    --brown-medium: #704C38;
    --brown-light: #967259;
    --gold-warm: #C8A962;
    --gold-darker: #AA8C4E;
    --text-dark: #3A271C;
    --text-muted: #7A6454;
    --border-soft: #D4C5B0;
    --serif: Georgia, 'Times New Roman', Times, serif;
    --sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {margin:0;padding:0;box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {
    font-family:var(--sans);
    color:var(--text-dark);
    background:var(--cream);
    line-height:1.6;
    min-height:100vh;
}
a {text-decoration:none;color:inherit;}

/* === HEADER: NỀN TRẮNG === */
.site-header {
    position:fixed;top:0;left:0;width:100%;
    padding:20px 32px;display:flex;justify-content:space-between;align-items:center;
    background:#ffffff;
    backdrop-filter:blur(12px);
    z-index:999;
    border-bottom:1px solid var(--border-soft);
}

/* === LOGO CHỮ Enkai Art === */
.logo-link {
    display:flex;align-items:center;text-decoration:none;
}
.logo-text {
    font-family:var(--serif);
    font-size:28px;
    font-weight:600;
    color:var(--brown-deep);
    letter-spacing:1px;
}

.main-nav a {
    color:var(--text-muted);font-size:14px;margin-left:24px;
    padding:6px 0;transition:color .25s ease;position:relative;
}
.main-nav a:hover,.main-nav a.active {color:var(--brown-deep);font-weight:600;}
.main-nav a.active::after {
    content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--brown-deep);
}

.home-page {
    background:linear-gradient(180deg, var(--cream-light), var(--cream-dark));
}
.hero {
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:100px 24px 60px;
}
.hero-inner {max-width:720px;}
.hero-subtitle {
    font-size:13px;letter-spacing:3px;text-transform:uppercase;
    color:var(--brown-medium);margin-bottom:16px;opacity:0.9;
}
.hero-title {
    font-family:var(--serif);font-size:clamp(42px,10vw,72px);
    color:var(--brown-deep);line-height:1.2;margin-bottom:16px;
}
.hero-desc {
    font-size:16px;color:var(--text-muted);margin-bottom:40px;
    max-width:540px;margin-left:auto;margin-right:auto;
}
.hero-btn {
    display:inline-block;padding:14px 36px;
    background:linear-gradient(135deg,var(--brown-deep),var(--brown-medium));
    color:var(--cream-light);border-radius:6px;font-weight:600;
    font-size:15px;letter-spacing:1px;text-transform:uppercase;
    transition:transform .25s,box-shadow .25s;
}
.hero-btn:hover {transform:translateY(-2px);box-shadow:0 8px 24px rgba(74,47,34,0.25);}

.container {max-width:1200px;margin:0 auto;padding:0 24px;}

.featured-works {
    padding:100px 0 80px;
    background:linear-gradient(180deg,transparent,var(--cream-dark));
}
.featured-wrap {
    background:rgba(255,255,255,0.35);border:1px solid var(--border-soft);
    border-radius:16px;padding:36px 24px;
}
.section-heading {
    text-align:center;margin-bottom:50px;padding-bottom:20px;
    border-bottom:1px solid var(--border-soft);
}
.section-heading h2 {
    font-family:var(--serif);font-size:clamp(28px,5vw,42px);
    color:var(--brown-deep);margin-bottom:10px;
}
.section-heading p {color:var(--text-muted);font-size:16px;}
.featured-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:900px) {.featured-grid {grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px) {.featured-grid {grid-template-columns:1fr;}}

.art-card {
    background:#fff;border-radius:12px;overflow:hidden;
    border:1px solid var(--border-soft);transition:transform .4s ease,box-shadow .4s ease,border-color .4s;
    cursor:pointer;
}
.art-card:hover {
    transform:translateY(-8px);box-shadow:0 20px 50px rgba(74,47,34,0.18);
    border-color:var(--brown-medium);
}
.art-media {
    width:100%;aspect-ratio:4/5;overflow:hidden;
}
.art-media img,.art-media video {
    width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;
}
.art-card:hover img,.art-card:hover video {transform:scale(1.05);}
.art-info {padding:20px 22px;}
.art-info h3 {
    font-family:var(--serif);font-size:19px;color:var(--brown-deep);
    margin-bottom:6px;font-weight:500;
}
.art-tag {
    font-size:13px;color:var(--gold-darker);opacity:0.85;
    text-transform:uppercase;letter-spacing:1px;
}

.view-all-wrap {text-align:center;margin-top:48px;}
.view-all-btn {
    display:inline-block;padding:12px 32px;border:1px solid var(--brown-deep);
    border-radius:6px;color:var(--brown-deep);font-weight:500;
    letter-spacing:1px;text-transform:uppercase;font-size:14px;transition:all .25s;
}
.view-all-btn:hover {background:var(--brown-deep);color:var(--cream-light);}

.gallery {padding:120px 24px 100px;max-width:1300px;margin:0 auto;}
.section-head {text-align:center;margin-bottom:60px;}
.section-head h2 {
    font-family:var(--serif);font-size:clamp(30px,5vw,44px);
    color:var(--brown-deep);margin-bottom:12px;
}
.section-head p {font-size:16px;color:var(--text-muted);margin-bottom:28px;}
.search-wrap {display:flex;justify-content:center;}
.search-box {
    width:100%;max-width:400px;padding:14px 20px;font-size:15px;
    border:1px solid var(--border-soft);border-radius:6px;
    background:#fff;color:var(--text-dark);outline:none;
}
.search-box::placeholder {color:var(--text-muted);}
.search-box:focus {border-color:var(--brown-medium);box-shadow:0 0 0 2px rgba(112,76,56,0.1);}
.art-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:36px 24px;
}

.work-detail {max-width:900px;margin:120px auto 100px;padding:0 24px;}
.work-single {
    animation:fadeIn .3s ease;background:#fff;border:1px solid var(--border-soft);
    border-radius:16px;padding:32px;
}
@keyframes fadeIn {
    from {opacity:0;transform:translateY(8px);}
    to {opacity:1;transform:translateY(0);}
}
.work-image-wrap {
    width:100%;border-radius:12px;overflow:hidden;
    border:1px solid var(--border-soft);margin-bottom:32px;
}
.work-detail-img {width:100%;display:block;}
.work-author {
    font-size:13px;text-transform:uppercase;letter-spacing:1.5px;
    color:var(--text-muted);margin-bottom:10px;
}
.work-single h1 {
    font-family:var(--serif);font-size:clamp(28px,5vw,48px);
    color:var(--brown-deep);line-height:1.2;margin-bottom:12px;
}
.work-date {
    font-size:14px;color:var(--text-muted);padding-bottom:28px;
    border-bottom:1px solid var(--border-soft);margin-bottom:32px;display:block;
}
.work-body {
    font-family:var(--serif);font-size:18px;line-height:1.8;
    color:var(--text-dark);margin-bottom:36px;
}
.inquire-btn {
    display:inline-flex;align-items:center;padding:12px 28px;
    border:1px solid var(--brown-deep);border-radius:6px;background:transparent;
    color:var(--brown-deep);font-size:14px;text-transform:uppercase;
    letter-spacing:1.2px;text-decoration:none;transition:all .25s ease;margin-bottom:30px;
}
.inquire-btn::after {content:'→';margin-left:10px;}
.inquire-btn:hover {background:var(--brown-deep);color:var(--cream-light);}

.info-section {padding:80px 0 100px;border-top:1px solid var(--border-soft);}
.info-grid {display:grid;grid-template-columns:1fr 1fr;gap:36px;}
@media (max-width:820px) {.info-grid {grid-template-columns:1fr;}}

.owner-box {
    background:#fff;border:1px solid var(--border-soft);
    border-radius:16px;padding:32px 28px;transition:border-color .3s ease;
}
.owner-box:hover {border-color:var(--brown-medium);}
.owner-box h3 {
    font-family:var(--serif);font-size:26px;color:var(--brown-deep);
    margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-soft);
}
.owner-name {font-size:22px;font-weight:600;color:var(--text-dark);margin-bottom:6px;}
.owner-role {color:var(--text-muted);font-size:15px;margin-bottom:24px;}
.copyright-box {
    background:var(--cream-dark);border:1px solid var(--border-soft);
    border-radius:10px;padding:22px;
}
.copyright-box h4 {color:var(--brown-medium);font-size:17px;margin-bottom:14px;}
.copyright-box p {color:var(--text-muted);font-size:15px;line-height:1.7;margin-bottom:8px;}
.copyright-text {
    margin-top:12px;padding-top:12px;border-top:1px dashed var(--border-soft);
    color:var(--brown-deep)!important;font-size:14px;
}

.idea-box {
    background:#fff;border:1px solid var(--border-soft);
    border-radius:16px;padding:32px 28px;transition:border-color .3s ease;
}
.idea-box:hover {border-color:var(--brown-medium);}
.idea-box h3 {
    font-family:var(--serif);font-size:26px;color:var(--brown-deep);
    margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-soft);
}
.idea-box p {color:var(--text-muted);font-size:16px;line-height:1.8;margin-bottom:14px;}
.idea-box strong {color:var(--brown-deep);}

.site-footer {
    background:var(--cream-dark);border-top:1px solid var(--border-soft);
    padding:40px 0;text-align:center;color:var(--text-muted);font-size:14px;
}
.footer-logo {
    font-family:var(--serif);font-size:22px;color:var(--brown-deep);margin-bottom:10px;
}
.site-footer a {color:var(--brown-medium);text-decoration:none;}
.site-footer a:hover {text-decoration:underline;}
.footer-note {margin-top:8px;font-size:13px;}

@media (max-width:768px) {
    .site-header {padding:16px 20px;}
    .logo-text {font-size:22px;}
    .main-nav a {margin-left:16px;font-size:13px;}
    .art-grid {grid-template-columns:1fr;gap:28px;}
    .work-single {padding:20px;}
}