:root {
  --paper: #f3f2ef;
  --ink:   #14140f;
  --mute:  rgba(20, 20, 15, 0.45);
  --faint: rgba(20, 20, 15, 0.115);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.9;
  letter-spacing: 0.06em;
}

a { color: inherit; text-decoration: none; }

main {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(2.2rem, 7vw, 5rem) clamp(1.4rem, 5vw, 3.4rem) 8rem;
}

/* 上の一行：戻る / ページ名 */
nav {
  display: flex;
  justify-content: space-between;
  color: var(--mute);
  margin-bottom: clamp(3rem, 9vw, 6rem);
}
nav a:hover { color: var(--ink); }

/* 作品一覧 */
.list { list-style: none; }
.list li + li { margin-top: 1.4rem; }
.list a {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--faint);
}
.list a:hover { border-bottom-color: var(--ink); }
.list .title { flex: 1; }
.list .when  { color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 作品ページ */
header h1 {
  font-size: 1.15em;
  font-weight: 500;
}
header .when {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
header .note {
  margin-top: 1.6rem;
  max-width: 34em;
}

.photos {
  margin-top: clamp(2.6rem, 8vw, 4.5rem);
  display: grid;
  gap: clamp(1.2rem, 4vw, 2.4rem);
}
.photos img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--faint);
}
.photos figcaption {
  margin-top: 0.4rem;
  color: var(--mute);
  font-size: 0.85em;
}