@import url("fonts.css");

/* 本文は游ゴシック体 Pr6N M ＋ Helvetica Neue、見出しは同 B ＋ Medium。
   PDFポートフォリオと同じ組み合わせを weight で引く。 */
@font-face{
  font-family:SK; font-weight:400;
  src:local("HelveticaNeue"),local("Helvetica Neue"),local("HelveticaNeue-Light");
}
@font-face{
  font-family:SK; font-weight:500;
  src:local("HelveticaNeue-Medium"),local("Helvetica Neue Medium");
}
@font-face{
  font-family:SKJ; font-weight:400;
  src:local("YuGoPr6N-Medium"),local("游ゴシック体 Pr6N M"),
      local("YuGothic-Medium"),local("Yu Gothic Medium"),local("HiraginoSans-W3");
}
@font-face{
  font-family:SKJ; font-weight:500;
  src:local("YuGoPr6N-Demibold"),local("游ゴシック体 Pr6N D"),
      local("YuGoPr6N-Bold"),local("游ゴシック体 Pr6N B"),
      local("YuGothic-Bold"),local("HiraginoSans-W5");
}

:root{
  --bg:#fff;
  --ink:#111;
  --mute:#8c8c8c;
  --line:1px;
  --bar:44px;                            /* ヘッダー／フッターの高さ */
  --pad:1.4rem;                          /* ヘッダー／フッターの左右。画面幅によらず一定 */
  --gutter:clamp(1.1rem,8.9vw,8rem);     /* 本文の左右 */
  --ease:cubic-bezier(.16,.84,.28,1);
  --font:SK,SKJ,ArchivoX,ZenKakuX,"Helvetica Neue",Helvetica,"Hiragino Sans",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 14px/2 var(--font);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
  /* 行末の句読点をぶら下げる。WebKit のみ対応、他は無視される */
  hanging-punctuation:allow-end;
  font-variant-numeric:lining-nums tabular-nums;
}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
h1,h2,h3{font-size:inherit;font-weight:inherit}
ul{list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* ダーシの字面の中心はベースラインから .28em。数字は .36em、和文は .38em なので、
   その差だけ持ち上げて行の中心に合わせる（差は 14px で 1.0〜1.4px）。
   ベタで組まれた範囲は前後が詰まって見えるので、わずかに側面を空ける */
.dash{position:relative;top:-.08em;margin:0 .1em}
.dash.spaced{margin:0}
/* リンクのホバーはグレーに落とす。サムネイルは覆いで見せるので除く */
a:not(.thumb),.menu-open,.menu-close{transition:color .2s}
/* いま開いているページ。太さは本文の罫線と同じ 1px、位置は下線用の指定で詰める */
[aria-current]{text-decoration:underline;text-decoration-thickness:var(--line);
  text-underline-offset:.18em}
@media (hover:hover){
  a:not(.thumb):hover,.menu-open:hover,.menu-close:hover{color:var(--mute)}
}
a:focus-visible,button:focus-visible{outline:var(--line) solid currentColor;outline-offset:3px}

/* 両端揃えは和文の本文だけ。英文と、受賞・出典のような短文は右端を揃えない */
.cols>div:first-child p{
  text-align:justify;
  hanging-punctuation:allow-end;
  line-break:strict;
}
.block .cols>div:first-child p{text-align:left}

/* ── ヘッダー・フッター ───────────────────────── */
header,footer{
  height:var(--bar);
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  background:var(--bg);
}
header{
  position:fixed; inset:0 0 auto;
  z-index:80;
  justify-content:space-between;
  gap:1rem;
  border-bottom:var(--line) solid var(--ink);
}
.brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.brand .co{margin-left:.9em}
.head-nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);flex:0 0 auto}
.nav{display:none;align-items:center;gap:clamp(1rem,2vw,2rem)}
.ig-link{display:flex;align-items:center}
.menu-open{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;flex:0 0 auto}
footer{
  justify-content:space-between;
  gap:1rem;
  border-top:var(--line) solid var(--ink);
  font-size:13px;
}
footer small{font-size:inherit}
@media (max-width:520px){.co-credit{display:none}}
body.gallery footer{display:none}

@media (min-width:768px){
  .nav{display:flex}
  .menu-open{display:none}
}
@media (max-width:767.98px){
  .brand .co{display:none}
  :root{--gutter:1.1rem}
}

/* Instagram はアイコンのみ */
.ig{display:block;width:1.3em;height:1.3em}
.ig svg{width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── メニュー ───────────────────────── */
/* 開けるのは 768px 未満だけ。それ以上では画面の外へ送って閉じたままにする。
   display で消すと切り替わった瞬間に消えるので、transform で滑らせる */
.menu{
  /* 内側がサムネイル右列と揃い、境界線がグリッドの罫線に重なる幅 */
  position:fixed; inset:var(--bar) 0 0 auto; z-index:90;
  width:calc(50vw + var(--line) / 2);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
  padding:0 var(--pad); text-align:right;
  background:var(--bg); color:var(--ink);
  border-left:var(--line) solid var(--ink);
  visibility:hidden; transform:translateX(101%);
  transition:transform .38s var(--ease),visibility .38s;
}
.menu[data-open]{visibility:visible;transform:none}
.menu a{font-size:1.35rem;line-height:2.1}
.menu .ig{width:1.3em;height:1.3em}
@media (min-width:768px){
  .menu,.menu[data-open]{visibility:hidden;transform:translateX(101%)}
}
.menu-close{
  position:absolute; top:0; right:var(--pad);
  width:16px; height:var(--bar);
  background:none; border:0; padding:0; color:inherit; cursor:pointer;
}
/* 二本の罫線を正方形の対角線に重ねてバツ印にする。
   対角線の長さは一辺×√2、はみ出しは両端で (√2−1)/2 */
.menu-close::before,.menu-close::after{
  content:""; position:absolute; top:50%; left:-20.7%;
  width:141.4%; height:var(--line); background:currentColor;
}
.menu-close::before{transform:rotate(45deg)}
.menu-close::after{transform:rotate(-45deg)}

/* ── トップ ──────────────────────────────── */
html:has(body.gallery),body.gallery{height:100%;overflow:hidden;overscroll-behavior:none}
.gallery main{
  height:calc(100svh - var(--bar));
  margin-top:var(--bar);
  display:grid; gap:var(--line);
  background:var(--ink);
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
}
@media (max-aspect-ratio:1/1),(max-width:767.98px){
  .gallery main{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
}
.thumb{position:relative;overflow:hidden;background:var(--bg);display:block}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb span{
  position:absolute; inset:0;
  display:grid; place-content:center;
  padding:1.2rem;
  color:#fff; background:rgba(0,0,0,.36);
  font-size:18px; font-weight:500; line-height:1.5; text-align:center;
  opacity:0; transition:opacity .35s var(--ease);
}
.thumb:hover span,.thumb:focus-visible span{opacity:1}
/* ホバーできない端末では覆いを出さない（常時表示は覆いの意味がないため） */
@media (hover:none){.thumb span{display:none}}

/* ── 作品ページ ──────────────────────────── */
/* 本文の幅は 1184px で頭打ちにし、余ったぶんは左右へ等分する */
.work,.page{
  max-width:calc(1184px + var(--gutter) * 2);
  margin-inline:auto;
  padding:calc(var(--bar) * 2) var(--gutter) var(--bar);
}
.hero{width:100%;aspect-ratio:3/2;overflow:hidden;background:#eee}
.hero>*{width:100%;height:100%;object-fit:cover}
.meta{display:flex;flex-direction:column;gap:2rem;padding-top:2rem}
.title{display:flex;flex-direction:column;gap:.5rem}
.title time{color:var(--mute);line-height:1.6}
.title h1{font-size:24px;font-weight:500;line-height:1.5}
.title h2{font-size:20px;font-weight:400;line-height:1.6}
.roles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.roles li{border:var(--line) solid var(--ink);border-radius:999px;padding:.1em .9em;line-height:1.8}
.block{display:flex;flex-direction:column;gap:1rem}
.block h3{font-weight:500}
.cols{display:grid;grid-template-columns:1fr;gap:1.5rem 2rem}
.cols p+p{margin-top:.4rem}
.cols a{border-bottom:var(--line) solid currentColor}
@media (min-width:768px){
  .cols{grid-template-columns:1fr 1fr}
  .block{gap:.75rem}
}

/* 図版。参照サイトに合わせ、隙間なく敷き詰める。
   グリッドの写真は 3:2、全幅は 16:9 に切り、図面・UI・動画は plain で素の縦横比のまま見せる */
.figures{
  display:grid; grid-template-columns:1fr; gap:0; margin-top:2.5rem;
}
@media (min-width:768px){.figures{grid-template-columns:1fr 1fr}}
.figures figure{min-width:0}
.figures img,.figures video{width:100%;height:auto;display:block}
.figures figure:not(.plain):not(.wide) img{aspect-ratio:3/2;object-fit:cover}
/* 縦位置の写真で、被写体が下方にあるものは切り出しを下へ寄せる */
.figures .low img{object-position:50% 70%}
.figures .wide{grid-column:1/-1}
.figures .wide img{aspect-ratio:16/9;object-fit:cover}
.figures .plain{grid-column:1/-1}

/* ── NaCl フォントデモ ───────────────────── */
.demo{margin-top:.5rem}
.demo-stage{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:16/9; margin:0; padding:0 1rem;
  background:#0b0b0e; color:#fff;
  font-family:"NaCl",sans-serif;
  font-size:clamp(48px,10vw,150px); line-height:1;
  font-variation-settings:"wght" 1000;
  overflow:hidden; white-space:nowrap;
  caret-color:#fff; outline:none;
}
.demo{position:relative}
/* スライダーはステージ内の下部に、白いピル型の枠で重ねる */
.demo-ui{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  display:flex; align-items:center;
  width:min(78%,26em);
  border:var(--line) solid #fff; border-radius:999px;
  padding:.55rem 1.2rem; color:#fff; font-size:13px;
}
.demo-ui label{display:flex; align-items:center; gap:.8em; flex:1}
.demo-ui output{min-width:3em; font-variant-numeric:tabular-nums; text-align:right}
/* スライダーは 1px の罫線に、つまみは小さな黒丸に */
.demo-ui input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:var(--line); background:#fff; outline-offset:6px;
}
.demo-ui input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%; background:#fff; border:0;
}
.demo-ui input[type=range]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:#fff; border:0;
}
.demo-ui input[type=range]::-moz-range-track{height:var(--line); background:#fff}

/* ── プロフィール・コンタクト ──────────────── */

.page h1{font-size:24px;font-weight:500;line-height:1.5;padding-bottom:1.6rem}
.page .cols{margin-bottom:2.5rem}
/* 1カラムで読ませるページ。1行を 640px に収め、日本語の下に英語を置く */
.narrow h1,.narrow .cols,.record{max-width:640px;margin-inline:auto}
.narrow .cols{grid-template-columns:1fr}
.record+.record{margin-top:2.6rem}
.record h3{margin-bottom:1rem}
.record ul{display:flex;flex-direction:column}
.record li{padding-left:1.2em;text-indent:-1.2em}
/* ハイフンの視覚的な中心はベースラインから .28em、和文の中心は .38em。
   その差だけ持ち上げて行の中心に合わせる */
.record li::before{content:"-";margin-right:.5em;position:relative;top:-.1em}
.note{font-size:12px;color:var(--mute);margin-top:.6rem}