:root{
  /* container = コンテンツ幅を制限して中央寄せする枠 */
  --container: 1100px;

  /* spacing scale (8px step) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;

  --r1: 10px;
  --r2: 16px;

  --border: 1px solid rgba(0,0,0,.12);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  line-height: 1.7;
}

img{ max-width: 100%; height: auto; display:block; }

.container{
  width: min(100% - (var(--s2) * 2), var(--container));
  margin-inline: auto;
}

.section{ padding-block: var(--s5); }
.section--alt{ background: rgba(0,0,0,.03); }

.stack{ display:flex; flex-direction:column; gap: var(--s3); }
.stack-sm{ display:flex; flex-direction:column; gap: var(--s1); }

.grid{ display:grid; gap: var(--s3); }
/* Grid: repeat(3, 1fr) = 1fr幅の列を3本作る */
.cards{ grid-template-columns: repeat(3, 1fr); }

.lead{ font-size: 1.05rem; }

.site-header{
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: var(--border);
  z-index: 10;
}

/* Flex: gapは要素間の距離。space-betweenだと端寄せになるので差が見えにくい */
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-block: var(--s2);
  gap: var(--s2);
}

.brand{
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  letter-spacing: .08em;
}

.site-nav .nav-list{
  display:flex;
  gap: var(--s1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav a{
  text-decoration: none;
  color: inherit;
  padding: var(--s1) var(--s2);
  border-radius: var(--r1);
}

.site-nav a:focus-visible,
.site-nav a:hover{
  outline: none;
  background: rgba(0,0,0,.06);
}

.menu-btn{
  display:none;
  border: var(--border);
  border-radius: var(--r1);
  background: #fff;
  padding: var(--s1);
}

.menu-btn__bar{
  display:block;
  width: 22px;
  height: 2px;
  background: #111;
  margin: 5px 0;
}

.card{
  border: var(--border);
  border-radius: var(--r2);
  padding: var(--s3); /* padding = 内側の余白（中の文字と枠の距離） */
  background: #fff;
}

.card__title{ margin: 0 0 var(--s2); }

.meta{
  border: var(--border);
  border-radius: var(--r2);
  padding: var(--s3);
  background: #fff;
  margin: 0;
}

.meta__row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s2);
  padding-block: var(--s1);
}

.post{
  border: var(--border);
  border-radius: var(--r2);
  padding: var(--s4);
  background: #fff;
}

.post__meta{ margin: 0; opacity: .75; }

.post__figure{
  border-radius: var(--r2);
  overflow:hidden;
  border: var(--border);
}

.quote{
  margin: 0;
  padding: var(--s3);
  border-left: 4px solid rgba(0,0,0,.2);
  background: rgba(0,0,0,.03);
  border-radius: var(--r1);
}

.form{
  max-width: 640px;
}

.field input,
.field textarea{
  width: 100%;
  padding: var(--s2);
  border: var(--border);
  border-radius: var(--r1);
  font: inherit;
}

.field input:focus,
.field textarea:focus{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

.field__error{
  margin: 0;
  min-height: 1.2em;
  font-size: .95rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: var(--s2) var(--s3);
  border-radius: var(--r1);
  border: var(--border);
  background: #111;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.btn:hover{ opacity: .92; }

.form__status{ margin: 0; min-height: 1.2em; }

/* a11y helpers */
.skip-link{
  position:absolute;
  top: -40px;
  left: var(--s2);
  background: #111;
  color: #fff;
  padding: var(--s1) var(--s2);
  border-radius: var(--r1);
  text-decoration:none;
}

.skip-link:focus{ top: var(--s2); }

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border:0;
}

pre{
  margin: 0;
  padding: var(--s2);
  border: var(--border);
  border-radius: var(--r2);
  overflow: auto;
  background: rgba(0,0,0,.03);
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
}

/* responsive */
@media (max-width: 900px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .meta__row{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .menu-btn{ display:block; }
  .header-inner{
    flex-wrap: wrap;
    align-items: center;
  }
  .brand{
    order: 1;
  }
  .menu-btn{
    order: 2;
    margin-left: auto;
  }
  .site-nav{
    order: 3;
    flex-basis: 100%;
    width: 100%;
    display: none;
  }
  .site-nav.is-open{ display: block; }
    .site-nav .nav-list{
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s1);
    padding-block: var(--s2);
    margin: 0;
  }
  .site-nav a{
    text-align: right;
  }
  .cards{ grid-template-columns: 1fr; }
  /** 
    情報量が多い／スクロールが長い → --s3
    ゆったり見せたい／読みやすさ重視 → --s4
  **/
  .section{ padding-block: var(--s3); }
  #works .cards{ gap: var(--s2); }
}