/* 及川大樹サイト 見本 — あったかい・手づくり感 */
/* ==========================================================
   ★ここを書き換えると、サイト全体の色が変わります★
   色は「#」で始まる6桁の数字です（例：#ffffff が白、#000000 が黒）
   ========================================================== */
:root {
  --paper: #f3ecdc;       /* ページの背景色（古い紙の、少し黄ばんだ白） */
  --paper-dark: #e6dcc6;  /* 画像の代わりの板・うすい面の色 */
  --ink: #2e2a24;         /* 文字の色（黒に近い、あたたかい茶色） */
  --ink-soft: #85796a;    /* 補足の文字の色 */
  --accent: #2e2a24;      /* リンクやボタンの色（ここだけ一色足してもOK） */
  --accent-2: #c9bc9f;    /* 区切りテープの色 */
  --thumb-1: #d8cdb4;     /* 仮の画像の板の色 1〜4 */
  --thumb-2: #bdb094;
  --thumb-3: #e4dac3;
  --thumb-4: #a89b80;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(rgba(120, 90, 50, .06) 1px, transparent 1px),
    radial-gradient(rgba(120, 90, 50, .04) 1px, transparent 1px);
  background-size: 22px 22px, 13px 13px;
  background-position: 0 0, 7px 9px;
  color: var(--ink);
  font-family: "Klee One", "Zen Kurenaido", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.9;
  font-size: 17px;
}

a { color: var(--accent); text-underline-offset: 4px; }
a:hover { color: var(--ink); }

/* ヘッダー */
.site-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 24px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
}
.site-title {
  font-family: "Shippori Mincho", serif;
  font-size: 26px;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--ink);
}
.site-title small {
  display: block;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--ink-soft);
}
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
nav a {
  text-decoration: none;
  color: var(--ink);
  padding: 2px 4px;
  border-bottom: 2px dashed transparent;
}
nav a:hover, nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* ゆるいマスキングテープ風の区切り */
.tape {
  max-width: 932px;
  margin: 0 auto;
  height: 1px;
  background: var(--accent-2);
}

main { max-width: 980px; margin: 0 auto; padding: 40px 24px 150px; position: relative; }

/* ちりばめイラスト（images/ フォルダの絵）
   各ページの <img class="doodle" style="--w:80; top:..; right:.."> で位置と大きさ(--w)を変えられます */
.doodle {
  position: absolute;
  width: calc(var(--w, 80) * 1px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 700px) {
  .doodle { width: calc(var(--w, 80) * .6px); }
}

h1, h2 {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  letter-spacing: .08em;
}
h1 { font-size: 30px; margin: 0 0 8px; }
h2 { font-size: 22px; margin: 48px 0 12px; }
.lead { color: var(--ink-soft); margin: 0 0 32px; }

/* トップ */
.hero { text-align: center; padding: 48px 0 24px; }
.hero p.catch {
  font-family: "Shippori Mincho", serif;
  font-size: 24px;
  letter-spacing: .15em;
  margin: 0 0 12px;
}
.hero .sub { color: var(--ink-soft); }

/* 作品カード（ポラロイド風） */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 34px 28px; }
.card {
  background: #fffdf8;
  padding: 12px 12px 16px;
  box-shadow: 0 3px 10px rgba(80, 55, 30, .18);
  text-decoration: none;
  color: var(--ink);
}
.card .thumb {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  color: rgba(59, 47, 39, .55);
  font-size: 14px;
  background: var(--paper-dark);
}
.card .thumb.t1 { background: var(--thumb-1); }
.card .thumb.t2 { background: var(--thumb-2); }
.card .thumb.t3 { background: var(--thumb-3); }
.card .thumb.t4 { background: var(--thumb-4); }
.card h3 { margin: 12px 0 2px; font-size: 17px; font-weight: 600; }
.card p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* 絞り込みタブ（コラージュ / ドローイング / 版画） */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.tabs span {
  padding: 4px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 15px;
}
.tabs span.on { background: var(--ink); color: var(--paper); }

/* 詩 */
.poem {
  background: #fffdf8;
  padding: 28px 32px;
  margin: 0 0 28px;
  box-shadow: 0 3px 10px rgba(80, 55, 30, .15);
  border-left: 6px solid var(--accent-2);
}
.poem h3 { font-family: "Shippori Mincho", serif; margin: 0 0 12px; font-size: 20px; }
.poem p { margin: 0; white-space: pre-line; }

/* プロフィール */
.profile { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.profile .portrait {
  display: block;
  width: 100%;
  height: auto;
  background: #fffdf8;
  padding: 8px;
  box-shadow: 0 3px 10px rgba(80, 55, 30, .18);
}
@media (max-width: 640px) { .profile { grid-template-columns: 1fr; } }

/* 依頼の種類 */
.jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; padding: 0; list-style: none; }
.jobs li { background: #fffdf8; padding: 16px 18px; box-shadow: 0 2px 8px rgba(80, 55, 30, .14); }
.jobs strong { display: block; font-size: 18px; margin-bottom: 4px; }

/* フォーム */
form { display: grid; gap: 18px; max-width: 620px; }
label { display: grid; gap: 6px; font-size: 15px; }
input, select, textarea {
  font: inherit;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: #fffdf8;
  border-radius: 4px;
  color: var(--ink);
}
textarea { min-height: 160px; }
button {
  font: inherit;
  padding: 12px 28px;
  border: 2px solid var(--ink);
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  justify-self: start;
}
button:hover { background: var(--ink); }
.note { font-size: 14px; color: var(--ink-soft); }

footer { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 24px; }

/* 作品ギャラリー：絵の縦横比そのままで並べる（切り取らない） */
.masonry { display: block; columns: 3 240px; column-gap: 28px; }
.masonry .card { display: block; break-inside: avoid; margin: 0 0 28px; }
.card img { display: block; width: 100%; height: auto; }
.tabs span { cursor: pointer; user-select: none; }
.tabs span:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }
/* トップのカード：4:3の枠いっぱいに作品を入れる */
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 詩の見出し下の小さな注記（掲載誌など） */
.poem .source { font-size: 13px; color: var(--ink-soft); margin: -6px 0 14px; }

/* プロフィールのSNSリンク */
.sns { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* 依頼フォーム：迷惑メール対策の見えない欄／送信結果の表示 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#form-status { min-height: 1.9em; margin: 0; }
#form-status.ok { color: #3f6b3a; }
#form-status.error { color: #a23b2a; }
button:disabled { opacity: .5; cursor: default; }