@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg: #EFF2F0;
  --panel: #F8FAF8;
  --ink: #16221E;
  --ink-soft: #48544E;
  --teal: #0E7C66;
  --mustard: #C98A2C;
  --line: #C7CFC9;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans JP', sans-serif;
  line-height:1.8;
}

.wrap{max-width:880px; margin:0 auto; padding:0 24px;}

header.site{
  border-bottom:1px solid var(--line);
  padding:20px 0;
  position:sticky; top:0;
  background:rgba(239,242,240,0.92);
  backdrop-filter:blur(6px);
  z-index:10;
}
header.site .wrap{display:flex; justify-content:space-between; align-items:center;}
.logo{
  font-family:'Shippori Mincho', serif;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.logo span{color:var(--teal);}
nav.site a{
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  color:var(--ink-soft);
  text-decoration:none;
  margin-left:18px;
  border-bottom:1px solid transparent;
}
nav.site a:hover{border-color:var(--teal); color:var(--teal);}

.hero{padding:64px 0 40px;}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.75rem;
  color:var(--teal);
  letter-spacing:.08em;
  text-transform:uppercase;
}
h1.headline{
  font-family:'Shippori Mincho', serif;
  font-size:2.3rem;
  line-height:1.5;
  margin:14px 0 18px;
  font-weight:700;
}
.hero p.lead{color:var(--ink-soft); font-size:1.02rem; max-width:56ch;}

.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin:36px 0 60px;
}
@media(min-width:680px){ .cards{grid-template-columns:repeat(3,1fr);} }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:2px;
  padding:22px;
  text-decoration:none;
  color:var(--ink);
  display:block;
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{border-color:var(--teal); transform:translateY(-2px);}
.card .idx{
  font-family:'JetBrains Mono', monospace;
  font-size:.75rem;
  color:var(--mustard);
  display:block;
  margin-bottom:10px;
}
.card h3{
  font-family:'Shippori Mincho', serif;
  font-size:1.15rem;
  margin:0 0 8px;
}
.card p{color:var(--ink-soft); font-size:.9rem; margin:0;}

.meter{
  margin-top:14px;
  height:5px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
}
.meter span{display:block; height:100%; background:var(--teal);}

article.doc{padding:48px 0 80px;}
article.doc h1{
  font-family:'Shippori Mincho', serif;
  font-size:1.9rem;
  line-height:1.5;
}
article.doc h2{
  font-family:'Shippori Mincho', serif;
  font-size:1.3rem;
  margin-top:40px;
  border-left:4px solid var(--teal);
  padding-left:12px;
}
article.doc table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0;
  font-size:.92rem;
}
article.doc th, article.doc td{
  border:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
}
article.doc th{
  background:var(--panel);
  font-family:'JetBrains Mono', monospace;
  font-size:.75rem;
  color:var(--ink-soft);
}
.note{
  font-size:.85rem;
  color:var(--ink-soft);
  border-left:3px solid var(--mustard);
  padding-left:12px;
  margin:24px 0;
}
.cta{
  display:inline-block;
  margin-top:8px;
  padding:10px 18px;
  background:var(--teal);
  color:#fff;
  text-decoration:none;
  border-radius:2px;
  font-size:.9rem;
}
footer.site{
  border-top:1px solid var(--line);
  padding:28px 0 60px;
  font-size:.78rem;
  color:var(--ink-soft);
}