/* ==========================================================
   島田敏次 作品サイト
   色・文字・余白はここ（:root）でまとめて変えられます
   ========================================================== */
:root{
  --bg:#f3f3f1;        /* 背景 */
  --ink:#242422;       /* 文字 */
  --ink-2:#64635e;     /* 補助の文字 */
  --ink-3:#86847e;     /* 薄い文字（小さな字でも読める濃さ） */
  --line:rgba(36,36,34,.14);
  --font:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  --pad:clamp(20px,4.5vw,64px);
  --max:1240px;
  --fade:1.1s;         /* 写真が切り替わる時間 */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:2;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
::selection{background:var(--ink);color:var(--bg)}
.u{border-bottom:1px solid var(--line);transition:border-color .3s}
.u:hover{border-color:currentColor}

/* ---------- header ---------- */
.site-head{
  width:min(var(--max),100% - 2 * var(--pad));margin:0 auto;padding:30px 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px;flex-wrap:wrap;
}
.brand{font-size:18px;font-weight:500;letter-spacing:.26em;line-height:1.4}
.brand span{margin-left:16px;font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--ink-3)}
.nav{display:flex;gap:clamp(20px,3vw,40px);font-size:13px;letter-spacing:.14em}
.nav a{padding:2px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.nav a:hover,.nav a[aria-current="page"]{border-color:currentColor}

/* 仕事の作品へのリンク（トップの名前の下・フッター） */
.biz{display:inline-flex;flex-direction:column;gap:2px;line-height:1.7}
.biz .l{font-size:14px;letter-spacing:.16em}
.biz i{display:inline-block;margin-left:.9em;font-style:normal;transition:transform .4s}
.biz:hover i{transform:translateX(6px)}
.biz .sub{font-size:11px;letter-spacing:.12em;color:var(--ink-3)}

/* ---------- top：名前とトップ写真 ---------- */
.intro{
  width:min(var(--max),100% - 2 * var(--pad));margin:clamp(4px,2vh,24px) auto 0;
  display:grid;grid-template-columns:minmax(0,1fr) min(calc(66vh * var(--ar)), 70%);
  grid-template-areas:"name img" "more img";grid-template-rows:auto 1fr;
  column-gap:clamp(32px,5vw,72px);
}
.intro__name{grid-area:name;padding-top:clamp(4px,3vh,32px)}
.intro .role{margin:0 0 14px;font-size:13px;letter-spacing:.34em;color:var(--ink-2)}
.intro .name{margin:0;font-size:clamp(34px,3.4vw,50px);font-weight:500;letter-spacing:.24em;line-height:1.25}
.intro .en{margin:14px 0 0;font-size:12px;letter-spacing:.18em;color:var(--ink-3)}
.intro__img{grid-area:img;margin:0}
.intro__img img{width:100%}
.intro__img figcaption{margin-top:12px;font-size:12px;letter-spacing:.14em;color:var(--ink-2)}
.intro__img figcaption a:hover{color:var(--ink)}
.intro__more{grid-area:more;align-self:end;padding-bottom:36px}
.intro .st{margin:0 0 30px;font-size:15px;letter-spacing:.14em;line-height:2.3}
.intro .biz{padding-top:16px;border-top:1px solid var(--line);min-width:210px}

/* ---------- top：作品（シリーズごとに写真と題名を1組に。左右交互） ---------- */
.works{width:min(var(--max),100% - 2 * var(--pad));margin:0 auto;padding-top:clamp(100px,16vh,180px)}
.sec-title{margin:0 0 clamp(44px,8vh,80px);font-size:13px;font-weight:400;letter-spacing:.3em;color:var(--ink-2)}
.wb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px)}
.wb + .wb{margin-top:clamp(72px,11vh,130px)}
.wb__img{grid-column:var(--ci);grid-row:1;display:block;overflow:hidden}
.wb__img img{width:100%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.wb:hover .wb__img img{transform:scale(1.025)}
.wb__txt{grid-column:var(--ct);grid-row:1;align-self:var(--al);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.wb--r .wb__txt{align-items:flex-end;text-align:right}
/* 作品名：和文は縦書き。欧文も同じ明朝・同じ太さで、字間をゆったり取ってそろえる */
.wb .t{font-weight:500;font-size:clamp(22px,2vw,29px);letter-spacing:.16em;line-height:1.35}
.wb .t.jp{writing-mode:vertical-rl;font-size:clamp(21px,1.9vw,27px);letter-spacing:.34em;line-height:1}
/* 点数と細い矢印（押せることをさりげなく伝える） */
.wb .go{display:flex;align-items:center;gap:14px;flex-shrink:0;color:var(--ink-3);transition:color .5s}
.wb .go i{position:relative;display:block;width:38px;height:1px;background:currentColor;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.wb .go i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.wb:hover .go,.wb:focus-visible .go{color:var(--ink)}
.wb:hover .go i,.wb:focus-visible .go i{width:64px}

/* ---------- series：1枚ずつ見る ---------- */
.viewer{width:min(1180px,100% - 2 * var(--pad));margin:clamp(8px,3vh,36px) auto 0}
.stage{
  position:relative;height:min(70vh,680px);cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity var(--fade) ease}
.stage img.is-active{opacity:1}
.stage:focus-visible{outline-offset:10px}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:20px;margin-top:24px}
.bar h1{margin:0;font-size:18px;font-weight:400;letter-spacing:.08em;line-height:1.5}
.bar h1.jp{letter-spacing:.18em}
.count{margin:0;font-size:12px;letter-spacing:.16em;color:var(--ink-3);text-align:center}
.ctl{margin:0;display:flex;justify-content:flex-end;gap:26px}
.ctl button{font-size:13px;letter-spacing:.16em;color:var(--ink-2);padding:4px 0;transition:color .3s}
.ctl button:hover{color:var(--ink)}

.s-nav{
  width:min(var(--max),100% - 2 * var(--pad));margin:clamp(90px,15vh,170px) auto 0;padding-top:26px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:baseline;font-size:15px;line-height:1.6;
}
.s-nav small{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.s-nav .next{text-align:right}
.s-nav .all{font-size:12px;letter-spacing:.2em;color:var(--ink-2)}
.s-nav a{transition:opacity .3s}
.s-nav a:hover{opacity:.6}

/* ---------- about / contact ---------- */
.about,.contact{width:min(640px,100% - 2 * var(--pad));margin:0 auto;padding-top:clamp(56px,11vh,130px)}
.about h1{margin:0;font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:.3em;line-height:1.4}
.about h1 span{display:block;margin-top:10px;font-size:12px;font-weight:400;letter-spacing:.16em;color:var(--ink-3)}
.about .role{margin:22px 0 0;font-size:13px;letter-spacing:.3em;color:var(--ink-2)}
.about .statement{margin:clamp(40px,6vh,64px) 0 clamp(56px,9vh,96px);font-size:16px;letter-spacing:.12em;line-height:2.2}
.about section{margin-bottom:clamp(48px,7vh,72px)}
.about h2{margin:0 0 12px;font-size:13px;font-weight:400;letter-spacing:.3em;color:var(--ink-2)}
.about ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.about li{padding:12px 0;border-bottom:1px solid var(--line)}

.contact h1{margin:0 0 clamp(32px,5vh,48px);font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:.24em;line-height:1.5}
.contact p{margin:0 0 1em}
.contact .mail{margin:28px 0 clamp(56px,9vh,96px);font-size:clamp(18px,2vw,22px);letter-spacing:.08em}
.contact .mail a{border-bottom:1px solid var(--line);transition:border-color .3s}
.contact .mail a:hover{border-color:currentColor}
.contact .biz-note{font-size:13px;color:var(--ink-2)}

/* ---------- footer ---------- */
.site-foot{
  width:min(var(--max),100% - 2 * var(--pad));margin:clamp(110px,16vh,180px) auto 0;padding:34px 0 40px;
  border-top:1px solid var(--line);
}
.f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px 40px;flex-wrap:wrap}
.site-foot .biz{align-items:flex-end;text-align:right}
.site-foot .biz .l{font-size:15px}
/* 写真の取り扱いについての一文：ふだんは見出しの1行だけ。押すと開き、「+」が「−」に変わる */
.f-note{margin:30px 0 0;max-width:66em;font-size:12px;line-height:2.1;letter-spacing:.1em;color:var(--ink-2)}
.f-note summary{display:inline-flex;align-items:center;gap:10px;list-style:none;cursor:pointer;transition:color .3s}
.f-note summary::-webkit-details-marker{display:none}
.f-note summary::after{content:"+";font-size:14px;line-height:1;color:var(--ink-3)}
.f-note[open] summary::after{content:"−"}
.f-note summary:hover{color:var(--ink)}
.f-note p{margin:10px 0 0}
/* リンクだとわかる細い下線（薄め・字から少し離す）。乗せると濃くなる */
.f-note a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(36,36,34,.35);transition:text-decoration-color .3s}
.f-note a:hover{text-decoration-color:var(--ink)}
.f-bottom{margin-top:34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;font-size:12px;letter-spacing:.1em;color:var(--ink-2)}
.f-bottom p{margin:0}
.f-bottom .links{display:flex;gap:28px}
.f-bottom a{transition:color .3s}
.f-bottom a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (min-width:1800px){
  :root{--max:1440px}   /* 大きな画面では全体の幅を少し広げる */
}
@media (max-width:820px){
  .intro{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "img" "more";grid-template-rows:auto;row-gap:28px}
  .intro__name{padding-top:6px}
  .intro__img{margin:0 calc(-1 * var(--pad))}
  .intro__img figcaption{padding:0 var(--pad)}
  .intro__more{padding-bottom:0}
  .intro .st{margin-bottom:24px}

  .wb{display:block}
  .wb + .wb{margin-top:72px}
  .wb__img,.wb__txt{width:92%}
  .wb--r .wb__img,.wb--r .wb__txt{width:80%}
  .wb--p .wb__img,.wb--p .wb__txt{width:60%}
  .wb--r .wb__img,.wb--r .wb__txt{margin-left:auto}
  .wb__txt{margin-top:14px;flex-direction:row;justify-content:space-between;align-items:center}
  .wb--r .wb__txt{text-align:left;align-items:center}
  .wb .t{font-size:20px;letter-spacing:.12em}
  .wb .t.jp{writing-mode:horizontal-tb;font-size:19px;letter-spacing:.2em;line-height:1.5}
  .wb .go i{width:28px}

  .viewer{width:100%}
  .stage{height:min(68vh,128vw)}
  .bar{padding:0 var(--pad);grid-template-columns:1fr auto;row-gap:10px}
  .count{text-align:right}
  .ctl{grid-column:1 / -1;justify-content:space-between}
}
@media (max-width:560px){
  .site-head{flex-direction:column;align-items:flex-start;padding:22px 0 18px}
  .brand{font-size:17px}
  .nav{gap:24px}
  .s-nav{grid-template-columns:1fr 1fr}
  .s-nav .all{grid-column:1 / -1;grid-row:2;text-align:center;margin-top:18px}
  .f-top{flex-direction:column}
  .f-note br{display:block;content:"";margin-top:6px}
  .site-foot .biz{align-items:flex-start;text-align:left}
  .f-bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  :root{--fade:0s}
}