/* =========================================================
   NAKAMURA KANAKO — 共通スタイル
   色・余白はここの数値を変えると全ページに反映されます
   ========================================================= */
:root{
  --bg:        #ededed;   /* 背景色（薄いグレー） */
  --fg:        #23252a;   /* 文字色 */
  --muted:     #86888c;   /* 薄い文字色 */
  --line:      #d6d6d6;   /* 罫線 */
  --gap:       8px;       /* 写真どうしの間隔（作品ページ） */
  --rail:      214px;     /* 左欄（名前とナビ）の幅＝写真の開始位置 */
  --pad:       34px;      /* 画面の端からの余白 */
  --edge:      26px;      /* 上下の端からの余白 */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  /* 欧文 Roboto ／ 和文 Noto Sans JP（ゴシック） */
  font-family:"Roboto","Helvetica Neue",Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:12px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:auto;}
a{color:inherit; text-decoration:none;}

/* キーボード操作時にどこを選んでいるか分かるようにする（マウス操作では出ません） */
a:focus-visible, button:focus-visible{
  outline:1px solid var(--fg); outline-offset:4px;
}

/* 読み上げソフト向けの見出し。画面には表示されません */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== 画面の四隅に固定されるテキスト ===== */
.brand{
  position:fixed; left:var(--pad); top:var(--edge); z-index:20;
  font-size:15px; letter-spacing:.14em;
}

.rail-nav{
  position:fixed; left:var(--pad); bottom:var(--edge); z-index:20;
  display:flex; flex-direction:column;
}
.rail-nav a{color:var(--muted); letter-spacing:.1em; transition:color .25s;}
.rail-nav a:hover, .rail-nav a.on{color:var(--fg);}
.rail-nav .c{color:var(--muted); margin-top:12px;}

/* 作品ページ右上のタイトルとクレジット */
.meta{
  position:fixed; right:var(--pad); top:var(--edge); z-index:20;
  width:230px; text-align:right;
}
.meta h1{
  font-size:13px; letter-spacing:.14em; font-weight:500;
  margin:0 0 20px;
}
.meta dl{margin:0;}
.meta dt, .meta dd{display:inline; margin:0;}
.meta dt{color:var(--muted);}
.meta dt::after{content:":"; padding-right:.35em;}
.meta div{line-height:1.75;}

/* ===== 作品ページ：中央に写真を積む ===== */
.stream{
  width:min(62vw, 1010px); margin:0 auto;
  padding:0 0 110px;
}
.stream figure{margin:0 0 var(--gap);}

/* 写真は読み込めた順にふわっと出す。
   JavaScriptが動く環境でだけ効きます（html.js）。切れていれば普通に表示されます */
html.js .stream figure img{opacity:0; transition:opacity .9s ease;}
html.js .stream figure img.is-in{opacity:1;}
/* 1枚目は最初に目に入るので、待たせないよう短めに */
html.js .stream figure:first-of-type img{transition-duration:.35s;}
.pager{
  display:flex; gap:26px; padding-top:22px;
  color:var(--muted); letter-spacing:.1em;
}
.pager a:hover{color:var(--fg);}
.pager .right{margin-left:auto;}

/* ===== 通常ページ（トップ／プロフィール／コンタクト） ===== */
.page{margin-left:var(--rail); margin-right:var(--pad); padding:var(--edge) 0 90px;}

/* トップ：企画一覧 */
.view-switch{display:flex; gap:18px; padding:34px 0 0;}
.view-switch button{
  font-family:inherit; font-size:12px; letter-spacing:.1em;
  background:none; border:0; padding:0; cursor:pointer; color:var(--muted);
}
.view-switch button.on{color:var(--fg);}

.gallery{
  padding:44px 0 0;
  display:grid; grid-template-columns:1fr 1fr; column-gap:70px; align-items:start;
}
.gcol-2{padding-top:150px;}   /* 右の列だけ下げて、左右がそろわないようにする */
.entry{display:block; margin-bottom:80px;}
.entry figure{margin:0; overflow:hidden;}
/* 枠は動かさず、中の写真だけがわずかに寄る */
.entry img{transition:transform .7s cubic-bezier(.2,.6,.2,1), opacity .45s;}
.entry:hover img{transform:scale(1.035); opacity:.92;}
.entry .t{transition:opacity .25s;}
.entry:hover .t{opacity:.55;}
.entry .meta-t{padding-top:12px;}
.entry .t{letter-spacing:.14em; display:block;}
.entry .y{display:block; color:var(--muted); letter-spacing:.1em;}

.list{display:none; padding:40px 0 0;}
body.is-list .gallery{display:none;}
body.is-list .list{display:block;}
.list a{
  display:grid; grid-template-columns:1fr 90px;
  gap:20px; padding:13px 0; border-bottom:1px solid var(--line);
}
.list a:first-child{border-top:1px solid var(--line);}
.list a:hover{color:var(--muted);}
.list .t{letter-spacing:.14em;}
.list .y{color:var(--muted); text-align:right; letter-spacing:.1em;}

/* list表示でマウスを乗せたときに出る小さな写真 */
.list-peek{
  position:fixed; left:0; top:0; z-index:30; width:200px;
  pointer-events:none; opacity:0; transition:opacity .3s ease;
}
.list-peek.on{opacity:1;}
.list-peek img{aspect-ratio:3/2; object-fit:cover;}

/* プロフィール／コンタクト */
.doc{padding-top:34px; max-width:620px; line-height:2.0;}
.doc h1{font-size:12px; letter-spacing:.14em; font-weight:400; color:var(--muted); margin:0 0 26px;}
.doc p{margin:0 0 1.5em;}
.cv{margin:0 0 2em;}
.cv div{display:flex; gap:16px;}
.cv .y{color:var(--muted); flex:0 0 46px;}
.note{color:var(--muted);}
.contact-link{
  display:inline-block; border-bottom:1px solid var(--line);
  padding-bottom:2px; transition:border-color .25s;
}
.contact-link:hover{border-color:var(--fg);}

/* ===== トップページ：スライドショー＋その下の紹介 ===== */
/* 開いた瞬間はスライドショーだけが見え、スクロールすると profile / contact が続きます */
.show{
  position:relative;
  margin:calc(var(--edge) + 100px) var(--pad) calc(var(--edge) + 74px) var(--rail);
  height:calc(100vh - var(--edge)*2 - 148px);   /* 次の内容が画面の下に隠れる高さ */
  min-height:300px;
}
.show .fr{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.1s ease; pointer-events:none;
}
.show .fr.on{opacity:1;}
/* 写真は切り取らず、全体が入るように置く */
.show img{width:100%; height:100%; object-fit:contain; object-position:center;}
/* 写真をクリックすると進む。右で次、左で前（カーソルの形で分かります） */
.zone{position:absolute; top:0; bottom:0; z-index:10; background:none; border:0; padding:0;}
.zone.next{left:26%; right:0; cursor:e-resize;}
.zone.prev{left:0; width:26%; cursor:w-resize;}

/* スライドの下：プロフィールと連絡先 */
.tail{
  margin-left:var(--rail); margin-right:var(--pad);
  padding:0 0 14vh;
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
  align-items:start; max-width:900px;
  border-top:1px solid var(--line); padding-top:38px;
}
.tail h2{
  font-size:12px; letter-spacing:.16em; font-weight:400;
  color:var(--muted); margin:0 0 18px;
}
.tail p{margin:0 0 1.3em; max-width:34em;}
.tail .cv{margin:0 0 1.6em;}
.tail .cv div{display:flex; gap:16px;}
.tail .cv .y{color:var(--muted); flex:0 0 46px;}
.tail .note{color:var(--muted);}
.tail .links{display:flex; flex-direction:column; gap:4px; align-items:flex-start;}

/* ===== 動きを減らす設定にしている人向け ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}

/* ===== 画面が狭いとき ===== */
@media (max-width:1200px){
  :root{--rail:180px; --pad:26px;}
  .meta{width:180px;}
  .stream{width:min(70vw, 900px);}
  .gallery{column-gap:44px;}
  .entry{margin-bottom:56px;}
}
@media (max-width:900px){
  :root{--pad:18px; --edge:18px; --gap:6px;}

  /* ===== スマホ：写真を画面いっぱいに、文字はその上に載せる ===== */
  /* 縦位置の写真を用意したコマだけを出します（横位置は切り抜きが激しくなるため） */
  .show{
    position:relative; margin:0; height:100svh; min-height:0;
    background:#000;
  }
  /* 縦画面いっぱいに埋める。
     切り抜く位置は写真ごとに変えられます。既定は中央。
     被写体が端に寄っている写真は、該当の <div class="fr"> に
     style="--pos:100%" のように書くと窓の位置がずれます（0%＝左端、100%＝右端） */
  .show img{object-fit:cover; object-position:var(--pos,50%) center;}
  .zone.next{left:30%;} .zone.prev{width:30%;}

  /* 写真の上に載る文字を読ませるための、ごく薄い暗がり */
  .show::before{
    content:""; position:absolute; inset:0 0 auto 0; height:210px; z-index:5;
    background:linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.12) 62%, transparent);
    pointer-events:none;
  }
  body.top .brand{
    position:absolute; left:var(--pad); top:var(--edge); z-index:6;
    color:#fff; padding:0; font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,.35);
  }
  body.top .rail-nav{
    position:absolute; left:var(--pad); top:calc(var(--edge) + 30px); bottom:auto; z-index:6;
    flex-direction:row; gap:16px; padding:0;
  }
  body.top .rail-nav a{color:rgba(255,255,255,.8); text-shadow:0 1px 3px rgba(0,0,0,.35);}
  body.top .rail-nav a:hover, body.top .rail-nav a.on{color:#fff;}
  body.top .rail-nav .c{
    position:absolute; left:0; top:26px; margin:0; width:max-content;
    color:rgba(255,255,255,.68); font-size:11px; text-shadow:0 1px 3px rgba(0,0,0,.35);
  }


  /* 明るい写真のコマでは、文字を濃色に切り替える（白背景の物撮りなど）。
     使うときは該当の <div class="fr"> に data-ink="dark" を付けます */
  body.top .brand, body.top .rail-nav a, body.top .rail-nav .c{
    transition:color .8s ease, text-shadow .8s ease;
  }
  body.top.ink-dark .show::before{
    background:linear-gradient(rgba(255,255,255,.55), transparent);
  }
  body.top.ink-dark .brand{color:var(--fg); text-shadow:none;}
  body.top.ink-dark .rail-nav a{color:var(--muted); text-shadow:none;}
  body.top.ink-dark .rail-nav a:hover, body.top.ink-dark .rail-nav a.on{color:var(--fg);}
  body.top.ink-dark .rail-nav .c{color:var(--muted); text-shadow:none;}

  /* スライド以外のページ（404など）は従来どおり */
  .brand{position:static; display:block; padding:18px var(--pad) 0;}
  .rail-nav{position:static; flex-direction:row; gap:18px; flex-wrap:wrap; padding:26px var(--pad) 30px;}
  .rail-nav .c{margin-top:0; width:100%;}
  .page{margin:0; padding:26px var(--pad) 20px;}
  .tail{margin:0; padding:34px var(--pad) 12vh; grid-template-columns:1fr; gap:34px;}
}