/* Yuki Noguchi — portfolio
   白地・ヘアライン罫・瞬時切替。基本はB案（オーバーレイ）、?a でA案（縦積み）。 */

:root {
  --fg: #111;
  --muted: #8a8a8a;
  --hairline: #e5e5e5;
  --bg: #fff;
  --pad: max(20px, 3vw); /* ページ左右余白 */
  --header-h: 76px;
  /* ヒーロー画像の表示サイズ。基本は全画像この高さに揃う。ここを変えれば一括で変わる */
  --hero-h: 58vh;
  --hero-max-w: min(74vw, 1100px);
  /* 本文・ナビ=サンセリフ、見出し・ワードマーク=セリフの対比 */
  --font: "Switzer", "Helvetica Neue", Helvetica, Arial,
          "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Hiragino Mincho ProN", serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* スマホのタップ時に出るグレーの矩形を消す */
}

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none; /* 引っ張って更新の無効化はルート要素に効かせる必要がある */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--fg);
  overscroll-behavior-y: none; /* スマホの引っ張って更新を無効化（誤発動しかしない） */
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ダブルタップ拡大をリンク・ボタン上では無効化（連打で画面が拡大するのを防ぐ。ピンチは生きてる） */
a, button { touch-action: manipulation; }

a { color: inherit; text-decoration: none; }
a.u { border-bottom: 1px solid var(--hairline); }
a.u:hover { border-bottom-color: var(--fg); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

::selection { background: var(--fg); color: var(--bg); }

.muted { color: var(--muted); }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  background: var(--bg);
  z-index: 40;
  font-size: 12px;
}

.wordmark {
  position: relative;
  z-index: 46; /* メニューのオーバーレイ(45)より上＝開閉で消えてチカチカしない */
  font-family: var(--font-serif);
  font-size: 26px; /* セクション見出しと同サイズ */
  letter-spacing: 0.04em;
  font-weight: 300;
}

/* ナビは右端揃え（項目が3つと少ないので、50%線から始めると右が空きすぎる） */
.site-nav {
  margin-left: auto;
  display: flex;
  gap: 26px;
}
.site-nav a {
  color: var(--fg);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.site-nav a:hover { color: var(--muted); }
.site-nav a[aria-current="true"] { color: var(--muted); }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -10px;
  position: relative;
  z-index: 46; /* メニューのオーバーレイ(45)より上。下に潜ると閉じられなくなる */
}
.burger span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  background: var(--fg);
  transition: transform 0.25s, top 0.25s, opacity 0.2s;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 640px) {
  .burger { display: block; }
  .site-nav {
    position: fixed;
    left: 0;
    transform: none;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* ワードマークの下から上詰め */
    gap: 0;
    padding: calc(76px + 28px) var(--pad) var(--pad);
    visibility: hidden;
    opacity: 0;
    z-index: -1;
  }
  .site-nav.open { visibility: visible; opacity: 1; z-index: 45; }
  .site-nav a {
    /* 書体はワードマークと同じセリフのまま、サイズと字間で一段下の階層を作る
       （ワードマーク26px ＞ メニュー項目20px。同格に並べない） */
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 2.5;
    color: var(--fg);
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  touch-action: pan-y pinch-zoom; /* 縦スクロールとピンチはブラウザに残し、横だけ自前で扱う */
  /* 長押しでヒーロー内の空きエリアが範囲選択される（iOS）のを防ぐ */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.hero-stage {
  position: absolute;
  inset: var(--header-h) 0 0 0;
}

/* 画像は中央に浮かせる。切替は瞬時（display切替のみ、アニメーションなし）
   サイズは基本全画像共通＝--hero-h（:root）で一括調整。
   個別に変えたい時だけ works.json で "size": "s"/"l" を付ける */
.hero-img {
  position: absolute;
  inset: 0;
  margin: auto; /* transformだと半ピクセルずれで滲むためinset+marginで中央寄せ */
  max-width: var(--hero-max-w);
  max-height: var(--hero-h);
  width: auto;
  height: auto;
  display: none;
  user-select: none;
  -webkit-user-drag: none;
}
.hero-img.current { display: block; }

.hero-img.size-s { max-height: calc(var(--hero-h) * 0.62); }
.hero-img.size-l { max-height: calc(var(--hero-h) * 1.24); }

@media (max-width: 640px) {
  .hero-img { max-width: 86vw; }
}

/* ---------- sections ---------- */

/* セクションの間に薄い仕切り線（SDL準拠）。
   リズム：前の内容 → 大きめの余白 → 線 → 少し空けて見出し */
.panel {
  position: relative;
  padding: 56px var(--pad) 110px;
  scroll-margin-top: var(--header-h); /* ナビで飛んだ時、固定ヘッダーの下に見出しが潜らないように */
}
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad);
  right: var(--pad);
  border-top: 1px solid var(--hairline);
}
#about { padding-bottom: 170px; }

.section-title {
  font-family: var(--font-serif);
  font-size: 23px; /* ワードマーク26pxの一段下（サイズで階層を作る） */
  font-weight: 400; /* Georgiaは400が素の形。太らせない */
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .panel { padding: 40px var(--pad) 80px; }
}

/* ---------- work grid ---------- */

/* Workの列数：狭い画面=1列／通常=2列／1200px〜=4列 */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px; /* 広げすぎたので中間に（元16px→48px→32px） */
}
@media (min-width: 1200px) {
  .work-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; gap: 32px; }
}

.work-tile {
  display: block;
  width: 100%;
  text-align: left;
}

.work-tile .thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg); /* グレーだと画像の再読み込みの一瞬に灰色の四角が見える（スマホのBack時） */
}
/* 白っぽい画像が白背景に溶けないよう、内側に1pxの極薄キーラインを重ねる（レイアウトは動かない） */
.work-tile .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  pointer-events: none;
}
/* タイルは枠いっぱいに埋めて、はみ出す分はクロップ（ビューア側はノークロップ） */
.work-tile .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-tile:hover .thumb img { opacity: 0.94; }

/* 表紙画像を出さないタイル（Cosplay の入り口） */
.work-tile .thumb.blank {
  background: var(--bg);
  border: 1px solid var(--hairline);
  color: var(--fg);
  font-size: 12px;
}

.work-tile .tile-caption {
  display: block;
  margin-top: 8px;
}

/* ---------- about ---------- */

.about-body { max-width: none; }
.about-body p + p { margin-top: 1em; }

/* ---------- footer ---------- */

.site-footer {
  margin: 0 var(--pad);
  padding: 18px 0 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

/* ---------- viewer ---------- */

.viewer {
  position: fixed;
  inset: 0;
  background: var(--bg);
  overflow-y: auto;
  z-index: 60;
}

.viewer-back {
  position: fixed;
  top: 0;
  left: var(--pad);
  height: var(--header-h);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  z-index: 61;
}
.viewer-back:hover { color: var(--muted); }

.viewer-inner {
  padding: calc(var(--header-h) + 40px) var(--pad) 120px;
  max-width: 920px;
  margin: 0 auto;
}

.viewer-head { margin-bottom: 64px; } /* Open MATTE と作例の間 */
.viewer-title { font-family: var(--font-serif); font-size: 23px; font-weight: 400; letter-spacing: 0.02em; }
.viewer-note { margin-top: 26px; } /* タイトルと本文の間。幅はコンテナ任せ（中途半端な折返し禁止） */
.viewer-link { margin-top: 16px; }

.viewer-images > * { margin-bottom: 16px; }

/* 作例画像（gallery以外）：PCでは小さめに、薄いキーラインつき */
.viewer-images:not(.gallery) img {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto; /* コンテナより小さい時は中央に */
  outline: 1px solid rgba(0, 0, 0, 0.07);
  outline-offset: -1px;
}
@media (max-width: 640px) {
  .viewer-images:not(.gallery) img { max-width: 100%; }
}

/* gallery（Cosplay等）：小さめタイルのグリッド。列数は画面幅で変わる */
.viewer-images.gallery {
  display: grid;
  /* デスクトップ≒4列、スマホ≒2列（画面幅で自動調整） */
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 40vw), 1fr));
  gap: 12px;
  align-items: center; /* 高さの違う画像は上揃えでなく中央揃え */
}
.viewer-images.gallery > * { margin-bottom: 0; }
.viewer-images.gallery img { cursor: zoom-in; width: 100%; height: auto; }

/* クリック拡大。背景は薄い黒、クリック/タップで戻る */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 92vw;
  max-height: 90vh;
}

/* ============================================================
   B案（?b）：トップはヒーローのみ。Work/About/Contact はオーバーレイ
   ============================================================ */

body.variant-b { overflow: hidden; }

body.variant-b .hero {
  position: fixed;
  inset: 0;
  height: auto;
  touch-action: pinch-zoom; /* ピンチだけ許可（A案と同じ方針） */
}

body.variant-b .panel {
  position: fixed;
  inset: 0;
  background: var(--bg);
  overflow-y: auto;
  z-index: 20;
  display: none;
  padding-top: calc(var(--header-h) + 60px);
}
body.variant-b .panel.open { display: block; }
body.variant-b .panel::before { display: none; }

body.variant-b .site-footer { display: none; }