/* ── RESET & BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--white);
  color: var(--black);
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── TOKENS ── */
:root {
  --white: #FAFAF8;
  --off:   #F2F1EE;
  --line:  #E0DED9;
  --muted: #9A9690;
  --dark:  #2A2825;
  --black: #111110;
  --wine:  #8B1A24;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--white); }
::-webkit-scrollbar-thumb { background:var(--line); }

/* ── NAV ── */
nav {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
  height: 64px;
  background: rgba(250,250,248,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: var(--black);
  text-decoration: none;
}
.nav-logo em { font-style:normal; color:var(--wine); }
.nav-links { display:flex; gap:44px; list-style:none; }
.nav-links a {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--black); }

/* ── FOOTER ── */
footer {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 44px 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}
.f-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--black);
}
.f-logo em { font-style:normal; color:var(--wine); }
.f-nav { display:flex; gap:32px; }
.f-nav a {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.f-nav a:hover { color: var(--black); }
.f-copy {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: right;
  line-height: 1.9;
}

/* ── UTILITIES ── */
.sec { padding: 120px 60px; border-bottom: 1px solid var(--line); }
.sec-header { display:grid; grid-template-columns:200px 1fr; gap:60px; margin-bottom:80px; align-items:baseline; }
.sec-num {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--muted);
  text-transform: uppercase;
  padding-top: 8px;
}
.sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--black);
}
.sec-title em { font-style:italic; color:var(--wine); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--black);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--black);
  transition: color 0.3s, border-color 0.3s;
}
.btn-text:hover { color: var(--wine); border-color: var(--wine); }
.btn-text .arr { transition: transform 0.3s; }
.btn-text:hover .arr { transform: translateX(4px); }

.btn-fill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--white);
  text-decoration: none;
  background: var(--black);
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.btn-fill:hover { background: var(--wine); }

/* ── CONTACT FORM (shared) ── */
.c-form { display:flex; flex-direction:column; }
.f-row { display:grid; grid-template-columns:1fr 1fr; }
.field {
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px;
  background: var(--white);
  transition: background 0.2s;
}
.field:focus-within { background:#fff; border-color:var(--dark); z-index:1; }
.f-label {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 14px 20px 4px;
  transition: color 0.2s;
}
.field:focus-within .f-label { color: var(--black); }
.field input, .field select, .field textarea {
  width:100%; background:transparent; border:none; outline:none;
  color:var(--black);
  font-family:'Noto Serif JP', serif;
  font-weight:300; font-size:0.88rem;
  padding:2px 20px 14px; appearance:none;
}
.field textarea { height:130px; resize:none; }
.field select option { background:var(--white); }
.f-submit { padding:32px 0 0; display:flex; align-items:center; gap:24px; }
.btn-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.62rem; letter-spacing:0.1em;
  color: var(--muted); line-height:1.9;
}

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  nav { padding:0 24px; }
  .nav-links { display:none; }
  .sec { padding:80px 24px; }
  .sec-header { grid-template-columns:1fr; gap:12px; }
  footer { grid-template-columns:1fr; text-align:center; gap:24px; }
  .f-nav { justify-content:center; flex-wrap:wrap; }
  .f-copy { text-align:center; }
  .f-row { grid-template-columns:1fr; }
}