:root{
  --bg: #F5F3EE;
  --bg-2: #EDE9E0;
  --ink: #1A1C1A;
  --ink-soft: #3a3d38;
  --muted: #8a8d85;
  --rule: #d7d3c7;
  --sage: #9AAE94;
  --sage-deep: #6f8a6c;
  --sage-pale: #E3E8DD;
  --serif: "Noto Serif JP", "Cormorant Garamond", serif;
  --display: "Cormorant Garamond", "Noto Serif JP", serif;
  --sans: "Noto Sans JP", "Inter", sans-serif;
  --ui: "Inter", "Noto Sans JP", sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--sage-deep); }
img{ display:block; max-width:100%; }
::selection{ background:var(--sage); color:#fff; }

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 28px;
  background: rgba(245,243,238,.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(26,28,26,.06);
  font-family:var(--ui); font-size:clamp(13px, .9vw, 17px); letter-spacing:.14em; text-transform:uppercase;
}
.nav .logo img{ height:clamp(72px, 5.5vw, 96px); width:auto; mix-blend-mode:multiply; }
.nav ul{ display:flex; gap:clamp(24px, 2vw, 40px); list-style:none; }
.nav .book{ border:1px solid rgba(26,28,26,.5); font-size:clamp(13px, .9vw, 17px); padding:10px 18px; border-radius:999px; transition:background .3s,color .3s; white-space:nowrap; }
.nav .book:hover{ background:var(--ink); color:#fff; }
.nav__toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--ink); }
@media (max-width:900px){
  .nav ul{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav.is-open ul{
    display:flex; flex-direction:column; gap:18px;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(245,243,238,.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    padding:20px 24px 26px;
    border-bottom:1px solid rgba(26,28,26,.08);
  }
}

/* ---- article header ---- */
.posthead{ padding:128px 40px 0; max-width:760px; margin:0 auto; }
.posthead .back{
  font-family:var(--ui); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted);
  display:inline-block; margin-bottom:36px;
}
.posthead .genre{
  display:inline-block; font-family:var(--ui); font-size:10px; letter-spacing:.16em;
  color:var(--sage-deep); border:1px solid var(--sage-deep); border-radius:999px; padding:4px 13px;
  margin-bottom:22px;
}
.posthead h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(24px, 3vw, 34px); line-height:1.4; letter-spacing:.03em;
  text-wrap:pretty;
}
.posthead .meta{
  margin-top:20px; padding-bottom:22px; border-bottom:1px solid var(--rule);
  font-family:var(--ui); font-size:11px; letter-spacing:.14em; color:var(--muted);
  display:flex; gap:16px; align-items:center;
}

/* ---- article body ---- */
.post{ max-width:760px; margin:0 auto; padding:28px 40px 96px; }
.post > :first-child{ margin-top:0; }
.post p{
  font-size:14.5px; line-height:1.9; letter-spacing:.04em; color:var(--ink-soft);
  margin:0 0 18px; text-wrap:pretty;
}
.post h2{
  font-family:var(--serif); font-weight:500;
  font-size:19px; letter-spacing:.08em; line-height:1.6;
  margin:40px 0 18px; padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.post h3{
  font-family:var(--serif); font-weight:500;
  font-size:15px; letter-spacing:.08em; line-height:1.7;
  margin:30px 0 14px; color:var(--ink);
}
.post ul, .post ol{ margin:0 0 18px; padding-left:1.5em; display:flex; flex-direction:column; gap:6px; }
.post li{ font-size:14.5px; line-height:1.85; letter-spacing:.04em; color:var(--ink-soft); }
.post a{ color:var(--sage-deep); border-bottom:1px solid var(--rule); }
.post a:hover{ border-color:var(--sage-deep); }
.post blockquote{
  margin:0 0 18px; padding:6px 0 6px 22px; border-left:2px solid var(--sage);
  font-size:14px; line-height:1.95; letter-spacing:.04em; color:var(--muted);
}
.post figure{ margin:0 0 24px; text-align:center; }
.post figure img{ display:block; margin:0 auto; width:auto; max-width:100%; max-height:520px; border-radius:2px; }
.post figure figcaption{ margin-top:10px; font-family:var(--ui); font-size:11px; letter-spacing:.06em; color:var(--muted); text-align:center; }
.post strong{ font-weight:500; color:var(--ink); }

/* ---- end CTA ---- */
.postcta{
  max-width:760px; margin:0 auto; padding:0 40px 120px;
}
.postcta__inner{
  background:var(--bg-2); border:1px solid var(--rule); border-radius:3px;
  padding:44px 40px; text-align:center;
}
.postcta__inner p{ font-size:13px; line-height:2; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:24px; }
.postcta__btn{
  display:inline-block; font-family:var(--ui); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:999px; padding:14px 34px; transition:background .3s, color .3s;
}
.postcta__btn:hover{ background:var(--ink); color:#fff; }
.postcta__links{ margin-top:18px; font-family:var(--ui); font-size:11px; letter-spacing:.1em; }
.postcta__links a{ color:var(--muted); border-bottom:1px solid var(--rule); }

/* ---- blog index ---- */
.bloglist{ max-width:900px; margin:0 auto; padding:44px 40px 120px; }
.bloglist__filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.bloglist__filter{
  font-family:var(--ui); font-size:11px; letter-spacing:.12em; color:var(--muted);
  border:1px solid var(--rule); border-radius:999px; padding:6px 15px; background:none; cursor:pointer;
  transition:color .3s, background .3s, border-color .3s;
}
.bloglist__filter:hover{ color:var(--ink); border-color:var(--ink-soft); }
.bloglist__filter.is-on{ color:#fff; background:var(--sage-deep); border-color:var(--sage-deep); }
.bloglist ul{ list-style:none; }
.bloglist li{ border-bottom:1px solid var(--rule); }
.bloglist__row{ display:flex; align-items:baseline; gap:22px; padding:22px 4px; }
.bloglist__date{ flex:none; width:92px; font-family:var(--ui); font-size:11px; letter-spacing:.1em; color:var(--muted); }
.bloglist__title{ flex:1; font-family:var(--serif); font-size:15px; letter-spacing:.03em; line-height:1.7; transition:color .3s; }
a.bloglist__row:hover .bloglist__title{ color:var(--sage-deep); }
.bloglist__genre{ flex:none; font-family:var(--ui); font-size:10px; letter-spacing:.12em; color:var(--sage-deep); }
@media (max-width:700px){
  .bloglist__row{ flex-wrap:wrap; gap:6px 14px; }
  .bloglist__title{ flex-basis:100%; order:3; }
}

.footstrip{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  max-width:1440px; margin:0 auto;
  padding:32px 40px;
  border-top:1px solid var(--rule);
  font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.footstrip__links{ display:flex; gap:28px; flex-wrap:wrap; }
.footstrip__links a{ white-space:nowrap; }

@media (max-width:700px){
  .posthead{ padding:104px 22px 0; }
  .post{ padding:28px 22px 72px; }
  .post figure img{ max-height:60vh; }
  .postcta{ padding:0 22px 90px; }
  .bloglist{ padding:36px 22px 90px; }
  .footstrip{ padding:28px 22px; }
}