/* =====================================================
   Travel with Masaru — Main Stylesheet
   Theme: Japanese Traditional (和風)
   ===================================================== */

:root {
  --washi:        #F5F0E8;
  --washi-light:  #FAF7F2;
  --washi-mid:    #EDE5D8;
  --sumi:         #2A2A2A;
  --sumi-light:   #5A5550;
  --matcha:       #5B7A4E;
  --matcha-dark:  #3D5C34;
  --matcha-light: #EBF2E5;
  --shu:          #C0392B;
  --sakura:       #D4849E;
  --kin:          #C9983A;
  --kin-light:    #FDF5DC;

  --font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-sans:  'Noto Sans', 'Helvetica Neue', Arial, sans-serif;

  --max-w:    1100px;
  --radius:   14px;
  --radius-sm: 8px;
  --shadow:      0 4px 24px rgba(42,42,42,0.09);
  --shadow-hover:0 10px 36px rgba(42,42,42,0.16);
  --transition:  0.22s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background-color: var(--washi); color: var(--sumi); font-family: var(--font-sans); line-height: 1.78; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1,h2,h3,h4 { font-family: var(--font-serif); line-height: 1.3; }

.section-eyebrow { font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--matcha); margin-bottom:12px; }
.section-eyebrow--center { text-align:center; }

.section-title { font-family:var(--font-serif); font-size:clamp(1.7rem,3vw,2.1rem); line-height:1.3; margin-bottom:36px; padding-bottom:18px; position:relative; }
.section-title::after { content:''; position:absolute; bottom:0; left:0; width:44px; height:3px; background:var(--shu); border-radius:2px; }
.section-title--center { text-align:center; }
.section-title--center::after { left:50%; transform:translateX(-50%); }
.section-title--no-line::after { display:none; }

.section-inner { max-width:var(--max-w); margin:0 auto; padding:88px 24px; }

/* Buttons */
.btn-primary { display:inline-block; padding:13px 30px; background:var(--matcha); color:#fff; font-family:var(--font-sans); font-size:.92rem; font-weight:600; border-radius:var(--radius-sm); transition:background var(--transition),transform var(--transition),box-shadow var(--transition); }
.btn-primary:hover { background:var(--matcha-dark); transform:translateY(-2px); box-shadow:0 6px 18px rgba(61,92,52,.28); }
.btn-secondary { display:inline-block; padding:11px 26px; border:2px solid var(--matcha); color:var(--matcha); font-family:var(--font-sans); font-size:.9rem; font-weight:600; border-radius:var(--radius-sm); transition:background var(--transition),color var(--transition); }
.btn-secondary:hover { background:var(--matcha); color:#fff; }
.btn-ghost { display:inline-block; padding:13px 24px; color:var(--sumi-light); font-family:var(--font-sans); font-size:.92rem; font-weight:600; border-radius:var(--radius-sm); border:2px solid var(--washi-mid); transition:border-color var(--transition),color var(--transition); }
.btn-ghost:hover { border-color:var(--matcha); color:var(--matcha); }

/* Header */
.site-header { position:sticky; top:0; z-index:200; background:rgba(245,240,232,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--washi-mid); }
.header-inner { max-width:var(--max-w); margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; gap:24px; }

.logo { display:flex; align-items:center; gap:11px; flex-shrink:0; transition:opacity var(--transition); }
.logo:hover { opacity:.8; }
.logo-kanji { display:flex; align-items:center; justify-content:center; width:38px; height:38px; background:var(--matcha); color:#fff; font-family:var(--font-serif); font-size:1.1rem; font-weight:700; border-radius:8px; flex-shrink:0; }
.logo-text { font-family:var(--font-serif); font-size:1.05rem; font-weight:700; color:var(--sumi); white-space:nowrap; }

.main-nav { display:flex; align-items:center; gap:28px; margin-left:auto; }
.main-nav a { font-size:.88rem; font-weight:600; color:var(--sumi-light); transition:color var(--transition); white-space:nowrap; }
.main-nav a:hover { color:var(--matcha); }
.lang-link { padding:5px 12px; border:1px solid var(--washi-mid); border-radius:20px; font-size:.82rem !important; color:var(--sumi-light) !important; transition:border-color var(--transition),color var(--transition) !important; }
.lang-link:hover { border-color:var(--matcha) !important; color:var(--matcha) !important; }

.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:4px; margin-left:auto; }
.nav-toggle span { display:block; height:2px; width:100%; background:var(--sumi); border-radius:2px; transition:transform var(--transition),opacity var(--transition); }

/* Hero */
.hero { max-width:var(--max-w); margin:0 auto; padding:72px 24px 60px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; min-height:calc(100vh - 68px); }
.hero-eyebrow { font-size:.82rem; letter-spacing:.12em; color:var(--sakura); margin-bottom:18px; }
.hero-title { font-family:var(--font-serif); line-height:1.12; margin-bottom:26px; }
.hero-title-sub { display:block; font-size:clamp(1.6rem,3.5vw,2.4rem); color:var(--sumi-light); font-weight:400; font-style:italic; }
.hero-title-main { display:block; font-size:clamp(3rem,7vw,5.2rem); color:var(--matcha); font-weight:700; line-height:1; letter-spacing:-.01em; }
.hero-subtitle { font-size:1.02rem; color:var(--sumi-light); line-height:1.85; margin-bottom:38px; max-width:460px; }
.hero-cta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-image { position:relative; display:flex; justify-content:center; align-items:flex-start; }
.hero-image-frame { position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); max-width:480px; width:100%; }
.hero-image-frame img { width:100%; height:auto; display:block; }
.hero-badge { position:absolute; bottom:-14px; left:-14px; background:var(--shu); color:#fff; border-radius:var(--radius-sm); padding:10px 16px; box-shadow:0 4px 16px rgba(192,57,43,.35); display:flex; flex-direction:column; align-items:flex-start; }
.hero-badge-jp { font-size:.7rem; font-family:var(--font-serif); opacity:.85; line-height:1; margin-bottom:3px; }
.hero-badge-en { font-size:.92rem; font-weight:700; line-height:1; }

.divider-wave { width:100%; line-height:0; overflow:hidden; background:var(--washi); }
.divider-wave svg { width:100%; height:60px; display:block; }

/* About */
.about { background:var(--washi-light); border-top:1px solid var(--washi-mid); border-bottom:1px solid var(--washi-mid); }
.about-inner { display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:64px; }
.about-image-wrap img { border-radius:var(--radius); box-shadow:var(--shadow); width:100%; }
.img-caption { font-size:.78rem; color:var(--sumi-light); text-align:center; margin-top:10px; font-style:italic; opacity:.75; }
.about-text p { color:var(--sumi-light); font-size:.97rem; margin-bottom:18px; }
.about-text .btn-secondary { margin-top:8px; }

/* Featured */
.featured { background:var(--washi); }
.featured-card { display:grid; grid-template-columns:1fr 1.4fr; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; transition:box-shadow var(--transition),transform var(--transition); }
.featured-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.featured-card-visual { position:relative; background:linear-gradient(145deg,#1F3864 0%,#2E6096 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; min-height:300px; }
.placeholder-icon { font-size:4rem; display:block; margin-bottom:16px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.placeholder-route { font-family:var(--font-serif); font-size:1.3rem; color:rgba(255,255,255,.9); font-weight:700; letter-spacing:.04em; }
.tag { position:absolute; top:18px; left:18px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:20px; }
.tag--green { background:var(--matcha); color:#fff; }
.featured-card-body { padding:44px 40px; }
.card-meta { font-size:.82rem; color:var(--sumi-light); margin-bottom:16px; }
.featured-card-body h3 { font-family:var(--font-serif); font-size:1.35rem; line-height:1.45; margin-bottom:18px; color:var(--sumi); }
.featured-card-body p { font-size:.95rem; color:var(--sumi-light); line-height:1.8; margin-bottom:28px; }

/* Categories */
.categories { background:var(--washi-mid); }
.category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.cat-card { background:var(--washi-light); border:1px solid transparent; border-radius:var(--radius); padding:36px 30px; box-shadow:var(--shadow); display:block; position:relative; transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition); overflow:hidden; }
.cat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:var(--matcha); }
.cat-card--gold { background:var(--kin-light); border-color:rgba(201,152,58,.3); }
.cat-card--gold:hover { border-color:var(--kin); }
.cat-badge { position:absolute; top:16px; right:16px; background:var(--kin); color:#fff; font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
.cat-icon { font-size:2.4rem; display:block; margin-bottom:16px; }
.cat-title { font-family:var(--font-serif); font-size:1.15rem; margin-bottom:12px; color:var(--sumi); }
.cat-desc { font-size:.9rem; color:var(--sumi-light); line-height:1.7; margin-bottom:20px; }
.cat-link { font-size:.88rem; font-weight:700; color:var(--matcha); }

/* Why section */
.why-section { background:var(--washi); }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center; }
.why-item { padding:28px 16px; background:var(--washi-light); border-radius:var(--radius); border:1px solid var(--washi-mid); }
.why-icon { font-size:2.4rem; display:block; margin-bottom:14px; }
.why-item h4 { font-family:var(--font-serif); font-size:1rem; color:var(--matcha); margin-bottom:10px; }
.why-item p { font-size:.86rem; color:var(--sumi-light); line-height:1.7; }

/* Footer */
.site-footer { background:#231F1C; color:#9E948A; text-align:center; }
.footer-inner { max-width:var(--max-w); margin:0 auto; padding:56px 24px 40px; }
.footer-logo { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px; }
.footer-logo .logo-kanji { background:var(--matcha); width:40px; height:40px; font-size:1.1rem; }
.footer-logo-text { font-family:var(--font-serif); font-size:1.25rem; font-weight:700; color:var(--washi); }
.footer-tagline { font-size:.88rem; color:#6E6560; margin-bottom:28px; }
.footer-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin-bottom:28px; }
.footer-nav a { font-size:.85rem; color:#9E948A; transition:color var(--transition); }
.footer-nav a:hover { color:var(--washi); }
.footer-copy { font-size:.78rem; color:#5A5550; border-top:1px solid #38332E; padding-top:20px; }
.footer-copy a { color:#6E6560; text-decoration:underline; transition:color var(--transition); }
.footer-copy a:hover { color:#9E948A; }

/* Responsive */
@media (max-width:900px) { .why-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) {
  .section-inner { padding:64px 20px; }
  .main-nav { display:none; position:fixed; top:68px; left:0; right:0; background:var(--washi); flex-direction:column; align-items:flex-start; padding:24px; gap:18px; border-bottom:1px solid var(--washi-mid); box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:199; }
  .main-nav.open { display:flex; }
  .main-nav a { font-size:1rem; width:100%; padding:8px 0; border-bottom:1px solid var(--washi-mid); }
  .main-nav a:last-child { border-bottom:none; }
  .lang-link { font-size:.9rem !important; border:none !important; padding:8px 0 !important; }
  .nav-toggle { display:flex; }
  .hero { grid-template-columns:1fr; min-height:auto; padding:48px 20px 40px; text-align:center; gap:36px; }
  .hero-content { order:2; } .hero-image { order:1; }
  .hero-subtitle { max-width:100%; margin-inline:auto; margin-bottom:28px; }
  .hero-cta { justify-content:center; }
  .hero-image-frame { max-width:300px; margin:0 auto; }
  .hero-badge { left:50%; transform:translateX(-50%); bottom:-16px; white-space:nowrap; align-items:center; }
  .about-inner { grid-template-columns:1fr; gap:36px; }
  .featured-card { grid-template-columns:1fr; }
  .featured-card-visual { min-height:200px; }
  .featured-card-body { padding:28px 24px; }
  .category-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .hero-title-main { font-size:3rem; }
  .why-grid { grid-template-columns:1fr; }
  .hero-cta { flex-direction:column; align-items:center; }
  .btn-primary,.btn-ghost { width:100%; text-align:center; }
}