@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root {
    --forest-green: #14532d;
    --aspen-gold: #b8860b;
    --ivory: #f8f1e3;
    --charcoal: #2c2c2c;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Noto Sans JP', system-ui, sans-serif;
}

.heading-serif {
    font-family: 'Cormorant Garamond', 'Noto Serif JP', Georgia, serif;
    font-weight: 700;
}

.nav-link { position: relative; transition: color .2s ease; }
.nav-link:after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;
    background-color: #b8860b; transition: width .3s ease;
}
.nav-link:hover:after { width: 100%; }
.nav-active { color: #b8860b; font-weight: 500; }
.nav-active:after { width: 100%; }

.section-title { position: relative; display: inline-block; }
.section-title:after {
    content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    width: 60px; height: 1px; background-color: #b8860b;
}

.minimal-btn { transition: all .3s ease; border: 1px solid #b8860b; }
.minimal-btn:hover { background-color: #b8860b; color: #fff; border-color: #b8860b; }

.season-tab { transition: all .2s ease; }
.season-tab.active { background-color: #14532d; color: #f8f1e3; border-color: #14532d; }

.photo-grid { column-count: 1; }
@media (min-width: 640px) { .photo-grid { column-count: 2; } }
@media (min-width: 1024px) { .photo-grid { column-count: 3; } }

.story-card { transition: all .4s ease; }
.story-card:hover { transform: translateY(-4px); box-shadow: 0 16px 24px -8px rgb(0 0 0 / .12); }

.nature-image { object-fit: cover; }

.gold-accent { color: #b8860b; }

.toast {
    background: #14532d; color: #f8f1e3; padding: 14px 20px; border-left: 4px solid #b8860b;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / .3); font-size: 13px; max-width: 320px;
    opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

.faq-toggle i { transition: transform .25s ease; }
.faq-item.open .faq-toggle i { transform: rotate(180deg); }

img { max-width: 100%; }