:root{
  --bg-deep:#1c1512;
  --bg-deep-2:#241c17;
  --bg-paper:#f3eee4;
  --bg-paper-2:#ece4d5;
  --text-cream:#ece3d3;
  --text-cream-dim:#b8ab97;
  --text-ink:#2b211b;
  --text-ink-dim:#6b6055;
  --accent-gold:#a9793f;
  --accent-gold-soft:#c79a5f;
  --line-on-dark:rgba(236,227,211,0.16);
  --line-on-light:rgba(43,33,27,0.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  max-width:750px;
  margin:0 auto;
  font-family:'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  background:var(--bg-paper);
  color:var(--text-ink);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
.serif{font-family:'Shippori Mincho', serif;}

/* ---------- grain motif (signature) ---------- */
.grain-mark{display:block;}
.grain-mark path{fill:none;stroke-linecap:round;}

/* ---------- header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  background:var(--bg-deep);
  border-bottom:1px solid rgba(236,227,211,0.1);
  color:#efe8da;
  font-size:11.5px; letter-spacing:.1em;
}
.topbar .brand{font-family:'Shippori Mincho',serif; font-size:18px; letter-spacing:.24em; flex:0 0 auto;}
.topbar nav{display:flex; gap:16px; flex:0 0 auto;}
.topbar nav a{color:inherit; text-decoration:none; opacity:.78; font-size:10.5px;}
.topbar nav a:hover{opacity:1;}
@media (max-width:380px){
  .topbar{ padding:12px 16px; }
  .topbar .brand{ font-size:15px; letter-spacing:.16em; }
  .topbar nav{ gap:10px; }
  .topbar nav a{ font-size:9.5px; }
}

/* ---------- hero ---------- */
.hero-figure{ line-height:0; background:var(--bg-deep-2); }
.hero-figure img{ width:100%; height:auto; }

.hero-band{
  background:var(--bg-deep); color:var(--text-cream);
  text-align:center; padding:48px 24px 44px;
}
.hero-eyebrow{
  font-size:10.5px; letter-spacing:.32em; color:var(--accent-gold-soft);
  margin-bottom:18px; text-transform:uppercase;
}
.hero-band h1{
  font-size:56px; font-weight:700; letter-spacing:.12em; line-height:1;
}
.hero-band .sub{
  margin-top:18px; font-size:13px; letter-spacing:.03em;
  color:var(--text-cream-dim); max-width:440px; margin-left:auto; margin-right:auto;
}
.hero-band .spec{
  margin-top:28px; display:flex; gap:10px 20px; font-size:11px; letter-spacing:.06em;
  color:var(--text-cream-dim); flex-wrap:wrap; justify-content:center;
}
.hero-band .spec b{color:var(--text-cream); font-weight:500;}

/* ---------- intro ---------- */
.intro{
  padding:56px 24px 48px;
  text-align:center;
}
.intro .kicker{
  font-size:11px; letter-spacing:.3em; color:var(--accent-gold);
  text-transform:uppercase; margin-bottom:20px;
}
.intro h2{
  font-size:24px; font-weight:600; letter-spacing:.02em;
  line-height:1.6; margin-bottom:22px;
}
.intro p{
  color:var(--text-ink-dim); font-size:14px; letter-spacing:.02em;
}
.intro-grain{ width:100px; height:28px; margin:32px auto 0; opacity:.55; }

/* ---------- index strip ---------- */
.index-strip{
  border-top:1px solid var(--line-on-light);
  border-bottom:1px solid var(--line-on-light);
  padding:18px 20px; display:flex; gap:8px 18px; flex-wrap:wrap;
  justify-content:center; font-size:11px; letter-spacing:.02em;
  color:var(--text-ink-dim);
}
.index-strip a{color:inherit; text-decoration:none;}
.index-strip a:hover{color:var(--accent-gold);}
.index-strip span{color:var(--line-on-light);}

/* ---------- style sections (single column, stacked) ---------- */
.style-section{
  display:block;
  border-bottom:1px solid var(--line-on-light);
}
.style-section:nth-child(even){ background:var(--bg-paper-2); }
.style-figure{ line-height:0; background:var(--bg-deep-2); }
.style-figure img{ width:100%; height:auto; }
.style-copy{
  padding:32px 24px 36px;
}
.style-num{
  font-family:'Shippori Mincho',serif; font-size:13px; letter-spacing:.24em;
  color:var(--accent-gold); margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.style-num em{
  font-style:normal; font-size:10px; letter-spacing:.14em; color:var(--text-ink-dim);
}
.style-copy h3{
  font-size:26px; font-weight:700; letter-spacing:.04em; line-height:1.35;
  margin-bottom:4px;
}
.style-copy .en-name{
  font-size:10.5px; letter-spacing:.18em; color:var(--text-ink-dim); text-transform:uppercase;
  margin-bottom:18px;
}
.style-copy p{
  font-size:14px; color:var(--text-ink-dim); letter-spacing:.01em; margin-bottom:22px;
}
.style-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.style-tags span{
  font-size:10.5px; letter-spacing:.03em; padding:6px 12px; border:1px solid var(--line-on-light);
  border-radius:999px; color:var(--text-ink-dim);
}
.style-spec{
  display:flex; gap:16px; flex-wrap:wrap; font-size:11px; letter-spacing:.03em; color:var(--text-ink-dim);
  border-top:1px solid var(--line-on-light); padding-top:16px;
}
.style-spec b{ color:var(--text-ink); font-weight:600; }
.grain-divider{ width:56px; height:16px; margin-top:26px; opacity:.5; }

/* ---------- per-room size toggle ---------- */
.room-toggle{
  display:inline-flex; align-items:center; gap:2px;
  padding:3px; margin-bottom:18px;
  border:1px solid var(--line-on-light); border-radius:999px;
}
.room-toggle button{
  appearance:none; border:none; cursor:pointer; background:transparent;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:10.5px; letter-spacing:.03em;
  padding:6px 13px; border-radius:999px; color:var(--text-ink-dim);
  display:flex; align-items:center; gap:5px; transition:background .2s ease, color .2s ease;
  white-space:nowrap;
}
.room-toggle button span{
  font-size:9px; opacity:.7; border-left:1px solid var(--line-on-light); padding-left:5px;
}
.room-toggle button.active{ background:var(--accent-gold); color:#fff; }
.room-toggle button.active span{ border-left-color:rgba(255,255,255,.4); opacity:.9; }
.room-toggle button:not(.active):hover{ color:var(--text-ink); }

/* ---------- spec band ---------- */
.spec-band{
  background:var(--bg-deep); color:var(--text-cream); padding:56px 24px;
  text-align:center;
}
.spec-band .kicker{ font-size:11px; letter-spacing:.3em; color:var(--accent-gold-soft); text-transform:uppercase; margin-bottom:18px; }
.spec-band h2{ font-family:'Shippori Mincho',serif; font-size:24px; letter-spacing:.08em; margin-bottom:36px; }
.spec-compare{
  display:flex; flex-direction:column; gap:32px;
}
.spec-col-head{
  font-family:'Shippori Mincho',serif; font-size:17px; letter-spacing:.1em; color:var(--text-cream);
  margin-bottom:16px; display:flex; align-items:baseline; justify-content:center; gap:10px;
}
.spec-col-head span{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:10.5px; letter-spacing:.06em; color:var(--accent-gold-soft); }
.spec-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; border-top:1px solid var(--line-on-dark);
}
.spec-grid div{ padding:20px 8px; border-bottom:1px solid var(--line-on-dark); border-right:1px solid var(--line-on-dark); }
.spec-grid div:last-child{ border-right:none; }
.spec-grid .val{ font-family:'Shippori Mincho',serif; font-size:22px; color:var(--accent-gold-soft); }
.spec-grid .lbl{ margin-top:8px; font-size:9.5px; letter-spacing:.1em; color:var(--text-cream-dim); text-transform:uppercase; }
.spec-band .size-note{
  margin-top:32px; font-size:11px; letter-spacing:.02em; color:var(--text-cream-dim);
}

/* ---------- footer ---------- */
footer{
  padding:48px 24px 40px; text-align:center; background:var(--bg-paper-2);
}
footer .brand{ font-family:'Shippori Mincho',serif; font-size:20px; letter-spacing:.24em; margin-bottom:14px; }
footer p{ font-size:11px; color:var(--text-ink-dim); letter-spacing:.02em; }
footer .fine{ margin-top:28px; font-size:10px; color:var(--text-ink-dim); opacity:.7; }

/* ---------- extra small screens ---------- */
@media (max-width:360px){
  .hero-band h1{ font-size:44px; }
  .style-copy h3{ font-size:22px; }
  .spec-grid .val{ font-size:19px; }
}