/* ── RESET & TOKENS ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:#fafaf8;
  color:#1c1a17;
  font-family:'Noto Sans JP',sans-serif;
  font-weight:300;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

:root{
  --white:#fafaf8;
  --off:#f3f1ec;
  --pale:#eceae3;
  --dark:#1c1a17;
  --mid:#5c5850;
  --muted:#9a9288;
  --line:#e0dcd5;
  --gold:#a08848;
}

/* ── NAV ── */
.nav{
  display:flex;align-items:center;
  padding:28px 56px;
  border-bottom:1px solid var(--line);
  background:var(--white);
  position:sticky;top:0;z-index:100;
}
.nav-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;font-weight:400;
  letter-spacing:.35em;text-transform:uppercase;
}

/* ── BLOG LIST ── */
.blog-list-page{
  max-width:1200px;margin:0 auto;
  padding:80px 40px 120px;
}
.blog-header{
  margin-bottom:64px;text-align:center;
}
.blog-eyebrow{
  font-size:11px;letter-spacing:.3em;color:var(--gold);
  text-transform:uppercase;margin-bottom:12px;
}
.blog-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(40px,5vw,64px);font-weight:300;
  letter-spacing:.05em;
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  margin-bottom:64px;
}
.blog-card{
  background:var(--off);
  display:flex;flex-direction:column;
  transition:background .3s;
}
.blog-card:hover{background:var(--pale)}
.blog-card-img{
  aspect-ratio:16/9;overflow:hidden;
  background:var(--pale);
}
.blog-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s;
}
.blog-card:hover .blog-card-img img{transform:scale(1.03)}
.blog-card-body{padding:28px 24px 32px}
.blog-card-cat{
  font-size:10px;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase;display:block;margin-bottom:10px;
}
.blog-card-title{
  font-family:'Noto Serif JP',serif;
  font-size:16px;font-weight:300;
  line-height:1.6;color:var(--dark);
  margin-bottom:12px;
}
.blog-card-date{
  font-size:11px;color:var(--muted);letter-spacing:.05em;
}

/* ── PAGINATION ── */
.pagination{
  display:flex;justify-content:center;gap:4px;
}
.page-btn{
  width:36px;height:36px;
  border:1px solid var(--line);background:var(--white);
  font-size:12px;color:var(--mid);
  cursor:pointer;transition:all .2s;
}
.page-btn:hover,.page-btn.active{
  background:var(--dark);color:var(--white);border-color:var(--dark);
}

/* ── POST PAGE ── */
.blog-post-page{
  max-width:760px;margin:0 auto;
  padding:80px 40px 120px;
}
.post-article{}
.post-header{margin-bottom:40px}
.post-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(28px,4vw,48px);font-weight:300;
  line-height:1.2;color:var(--dark);
  margin:12px 0 16px;
}
.post-eyecatch{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  margin-bottom:48px;
}
.post-body{
  font-size:14px;line-height:2.1;color:var(--mid);
}
.post-body h2{
  font-family:'Noto Serif JP',serif;
  font-size:20px;font-weight:300;color:var(--dark);
  margin:48px 0 16px;padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.post-body h3{
  font-size:16px;font-weight:400;color:var(--dark);
  margin:32px 0 12px;
}
.post-body p{margin-bottom:20px}
.post-body img{max-width:100%;margin:32px 0}
.post-body ul,.post-body ol{padding-left:1.5em;margin-bottom:20px}
.post-body li{margin-bottom:8px}
.post-back{margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.back-link{
  font-size:12px;letter-spacing:.15em;color:var(--muted);
  transition:color .2s;
}
.back-link:hover{color:var(--dark)}

/* ── LOADING ── */
.loading{
  text-align:center;color:var(--muted);
  font-size:13px;padding:80px 0;
}

/* ── FOOTER ── */
.footer{
  padding:40px 56px;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);
  background:var(--white);
}
.footer-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;letter-spacing:.35em;text-transform:uppercase;
  color:var(--dark);
}
.footer-copy{font-size:11px;color:var(--muted)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .nav{padding:20px 24px}
  .blog-list-page{padding:56px 20px 80px}
  .blog-grid{grid-template-columns:1fr}
  .blog-post-page{padding:56px 20px 80px}
  .footer{flex-direction:column;gap:16px;padding:32px 24px;text-align:center}
}
@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr}
}