/* =====================================================================
   HARU portfolio — 共通スタイル（style.css）
   ---------------------------------------------------------------------
   v10「紙とインク」: 白い紙に黒いインク。手描きのヨレた線。
   セッションの絵（白黒・手描き）と同じ世界観でサイト全体を統一。
   色やフォントを変えたいときは下の :root だけ触ればOK。
   ===================================================================== */

:root{
  --bg:#fcfbf7;                       /* 紙 */
  --ink:#1c1b18;                      /* インク */
  --soft:#45443f;
  --muted:#8b897f;
  --line:rgba(28,27,24,.18);          /* 薄い罫線 */
  --frame:rgba(28,27,24,.6);          /* 手描きの枠線 */
  --accent:#1c1b18;                   /* アクセントもインク（白黒が基調） */
  --hl:#f9e27d;                       /* マーカーの黄色（ハイライトだけに使う） */
  --tint:#f9e27d;
  --ph:rgba(28,27,24,.06);
  --card:#ffffff; --cardH:#fffdf0;
  --headbg:rgba(252,251,247,.92);
  --shadow:rgba(28,27,24,.16);

  /* 手描き風のヨレた角丸（大きい箱用 / 逆向き） */
  --rA:255px 18px 225px 18px / 18px 225px 18px 255px;
  --rB:18px 255px 18px 225px / 225px 18px 255px 18px;

  --jp:'Zen Maru Gothic',sans-serif;     /* 本文・見出し（丸ゴシック） */
  --grot:'Zen Maru Gothic',sans-serif;   /* 旧テーマ互換（見出し） */
  --mono:'JetBrains Mono',monospace;     /* 日付・小ラベル（タイプライター） */
  --hand:'Yomogi',cursive;               /* 手書きコメント */
  --sign:'Caveat',cursive;               /* 英字のサイン */

  /* 手描きの波線（見出しの下線などに） */
  --squig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M2 6 Q 17 1 32 6 T 62 6 T 92 6 T 118 6' fill='none' stroke='%231c1b18' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--jp);font-weight:400;color:var(--ink);line-height:1.9;min-height:100vh;overflow-x:hidden;background:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- ヘッダー（全ページ共通・Haru.ロゴ＋メニューを同じ行に。スクロールしても固定）
   左にロゴ、メニューは画面の左右方向で中央のまま（3列グリッドで実現） ---- */
.head{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 20px;padding:14px 6vw;background:var(--headbg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head .wm{grid-column:1;justify-self:start;font-family:var(--sign);font-weight:700;font-size:30px;color:var(--ink);line-height:1}
.head .wm i{font-style:normal}
.head .topnav{grid-column:2;justify-self:center;padding:0;margin:0;max-width:none}

/* ---- ハンバーガーメニュー（スマホ幅のみ表示・枠なしで手描き風の3本線） ---- */
.navtoggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;box-sizing:border-box;background:none;border:none;cursor:pointer;padding:0}
.navtoggle span{display:block;width:24px;height:3px;border-radius:3px;background:var(--ink);transition:transform .25s ease,opacity .25s ease}
.navtoggle span:nth-child(1){transform:rotate(-.5deg)}
.navtoggle span:nth-child(2){width:24px;transform:rotate(.4deg)}
.navtoggle span:nth-child(3){transform:rotate(-.3deg)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:680px){
  .head{grid-template-columns:1fr auto;justify-items:stretch;padding:12px 5vw;gap:0 12px}
  .head .wm{grid-column:1;justify-self:start}
  .navtoggle{display:flex;grid-column:2;justify-self:end}
  .head .topnav{grid-column:1/-1;justify-self:stretch;display:none;width:100%;max-width:none}
  .head .topnav.open{display:flex}
}

/* ---- チップ・日付・タグ（feed / post 共通） ---- */
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chip .dotm{width:8px;height:8px;border-radius:60% 40% 55% 45%/50% 60% 40% 50%;display:inline-block}
.d-photo{background:var(--ink)}
.d-project{background:transparent;border:1.5px solid var(--ink)}
.d-diary{background:var(--hl);border:1px solid var(--ink)}
.d-article{background:transparent;border:1.5px dashed var(--muted)}
.date{font-family:var(--mono);font-size:11px;color:var(--muted)}
.tags{font-family:var(--hand);font-size:12px;color:var(--muted);margin-top:10px}
.mark{font-family:var(--hand);font-size:12px;color:var(--soft);display:inline-block}

/* ---- ボタン（手描きの枠） ---- */
.btn{display:inline-block;font-family:var(--jp);font-weight:500;font-size:13px;padding:11px 22px;border:1.5px solid var(--ink);border-radius:14px 225px 14px 255px/255px 14px 225px 14px;color:var(--ink);background:var(--card);transition:.15s}
.btn:hover{background:var(--hl)}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:var(--soft);color:#fff}

/* ---- 見出し（波線の下線つき） ---- */
.sec-h{display:inline-block;font-family:var(--jp);font-weight:700;font-size:20px;letter-spacing:.04em;padding:0 4px 12px;background:var(--squig) left bottom no-repeat}
.sec-h small{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-left:12px}

/* ---- フッター ---- */
footer.site{padding:56px 6vw 90px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;border-top:1.5px solid var(--ink)}
footer.site .fmark{font-family:var(--hand);font-size:14px;color:var(--soft)}
footer.site .fcol{font-family:var(--mono);font-size:11px;letter-spacing:.04em;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer.site a{border-bottom:1.5px solid var(--line);padding-bottom:2px}
footer.site a:hover{color:var(--ink);border-color:var(--ink)}

/* ---- スクロール連動アニメーション ----
   .reveal を付けた要素は、画面に入ったとき .on が付いてバラバラと浮かび上がる。
   （トップページのコラージュのカテゴリ切り替え演出と同じ質感） ---- */
.reveal{opacity:0;transform:translateY(18px) scale(.96) rotate(-1.1deg);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.reveal:nth-child(even){transform:translateY(18px) scale(.96) rotate(1.1deg)}
.reveal.on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* ===== 共通トップナビ（全ページ統一ヘッダー） ===== */
.topnav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;box-sizing:border-box;padding:0 4vw}
.topnav > a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:40px;line-height:1;font-family:var(--jp);font-size:13px;color:var(--ink);text-decoration:none;background:#fff;border:1.5px solid var(--ink);border-radius:14px 225px 14px 255px/255px 14px 225px 14px;padding:0 22px;transition:background .2s ease}
.topnav > a:hover{background:var(--hl)}
.topnav > a[aria-current]{background:var(--hl)}
/* トップページ（Haru.ロゴ・Worksラベル）と同じサイン体フォントに揃える */
.topnav > a.tn-sign{font-family:var(--sign);font-weight:700;font-size:18px;line-height:1;padding:0 22px 2px}
/* Works の枠（worksgroup）も他のメニュー項目と同じ高さに揃える */
.worksgroup{display:inline-flex;align-items:center;box-sizing:border-box;height:40px;gap:8px;border:1.5px solid var(--ink);border-radius:var(--rA);padding:0 12px 0 9px;background:#fff}
.wg-top{display:contents}
.worksgroup .wg-label{font-family:var(--sign);font-weight:700;font-size:19px;line-height:1;color:var(--ink);background:transparent;border:none;cursor:pointer;padding:2px 6px;border-radius:8px;text-decoration:none;transition:background .2s ease}
.worksgroup .wg-label:hover{background:var(--hl)}
.worksgroup .wg-label[aria-pressed="true"]{background:var(--hl)}
.worksgroup .wg-items{display:flex;gap:6px;flex-wrap:wrap}
.worksgroup .wg-item{font-family:var(--jp);font-size:12px;color:var(--ink);background:#fff;border:1.5px solid var(--frame);border-radius:12px 200px 12px 220px/220px 12px 200px 12px;padding:6px 12px;cursor:pointer;transition:background .2s ease;white-space:nowrap;text-decoration:none}
.worksgroup .wg-item:hover{background:var(--hl)}
.worksgroup .wg-item[aria-pressed="true"],.worksgroup .wg-item[aria-current]{background:var(--hl);border-color:var(--ink)}

@media(max-width:680px){
  .topnav{flex-direction:column;align-items:stretch;padding:16px 5vw 20px;gap:8px;margin-top:4px;border-top:1px solid var(--line)}
  .topnav > a{width:100%;height:44px;font-size:14px}
  .topnav > a.tn-sign{font-size:17px}
  .worksgroup{flex-direction:column;align-items:stretch;height:auto;width:100%;padding:0;border:none;background:none;border-radius:0;gap:0}
  .wg-top{display:flex;align-items:stretch;justify-content:center;width:100%}
  /* Works のタップ範囲も、他のサブカテゴリ項目と同じ大きさ・当たり判定に揃える */
  .worksgroup .wg-label{display:block;width:100%;height:44px;line-height:44px;padding:0 12px;text-align:center;text-decoration:none;box-sizing:border-box;border:1.5px solid var(--ink);border-radius:14px 225px 14px 255px/255px 14px 225px 14px;background:#fff}
  .worksgroup .wg-label:hover{background:var(--hl)}
  /* ヘッダーメニューを開いたら、Worksのサブカテゴリも同時に見える（別途タップ不要） */
  .worksgroup .wg-items{display:flex;flex-direction:column;gap:8px;margin-top:10px;width:100%}
  .worksgroup .wg-item{width:100%;height:44px;line-height:1;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
}

/* ===== ページ読み込み時のふわっとフェード ===== */
@keyframes pagefade{from{opacity:0}to{opacity:1}}
body{animation:pagefade .45s ease both}

/* ===== 画像のドラッグ/長押し保存を抑止 ===== */
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;-webkit-touch-callout:none;user-select:none}