/*
Theme Name: shinsukenakano-theme
Theme URI: https://shinsukenakano.com
Author: Shinsuke Nakano
Author URI: https://shinsukenakano.com
Description: まだ名前のない塊が固まり、方眼に寸法が入るまで。紙と墨と余白だけでできた、一枚もののテーマ。
Version: 2.35.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: shinsukenakano-theme
Tags: one-column, custom-colors, portfolio
*/

:root{
  --paper:#ececec;
  /* 表紙をスクロールした先で紙が沈んでいく青。ここだけ差し替えれば色味を調整できる */
  --paper-blue:#00227a;
  --ink:#14140f;
  --mute:#8b8a82;
  --faint:#b7b5ad;
  --line:rgba(20,20,15,.13);
  /* 必須の米印。紙と墨だけの画面に一色だけ差す色なので、
     蛍光色ではなく、朱肉に近いところまで彩度を落としてある。 */
  --mark:#c9531f;
  /* 見出しは EB Garamond のスモールキャップスで小さく置く。
     大きくして目を引くのではなく、小さくして紙の隅の見出しのように扱う。
     和文の字は EB Garamond に無いので、Zen Kaku にそのまま落ちる。
     和文も明朝にしたいときは、下の2つ目を "Shippori Mincho" などに差し替える。 */
  --grot:"EB Garamond", "Zen Kaku Gothic New", serif;
  --sans:"Zen Kaku Gothic New", -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  /* 見出しの字間と、スモールキャップスの効き具合 */
  --cap:.11em;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html{ background:var(--paper); }
@media (prefers-reduced-motion:no-preference){
  /* JS がスクロール位置に合わせて html の background-color と、
     --ink / --mute / --faint を書き換える。ここでは値の飛びをならすだけ。 */
  html{ transition:background-color .4s var(--ease); }
  body,h1,h2,p,a,.mono{ transition:color .4s var(--ease); }
}
body{
  margin:0; background:transparent; color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:2.1;
  letter-spacing:.02em; font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:1px solid var(--ink); outline-offset:5px; }

.mono{
  font-family:var(--mono); font-size:11px; line-height:1.6;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.mono--ink{ color:var(--ink); }
.shell{ padding-inline:var(--pad); }

/* ---------------- 方眼 ----------------
   MODEL のうちは気配だけ。PRODUCT に近づくほど、
   はっきりした方眼になって余白に寸法が入る。 */
.grid{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.grid__cols{
  position:absolute; inset:0 var(--pad);
  display:grid; grid-template-columns:repeat(8,1fr);
  opacity:calc(.16 + var(--g,0) * .84);
}
.grid__cols i{ border-left:1px solid var(--line); }
.grid__cols i:last-child{ border-right:1px solid var(--line); }
.grid__rows{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 128px);
  opacity:calc(var(--g,0) * var(--g,0) * .85);
}
.hero,.section,.colophon{ position:relative; }

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  height:100svh; min-height:560px;
  display:grid; place-items:center;
  overflow:hidden;
}
.goo{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
  /* 独立したレイヤーに載せ、周囲の再描画を巻き込まないようにする */
  transform:translateZ(0);
  contain:paint;
}
.goo circle{ fill:var(--slime-fill, var(--ink)); }

.corner{
  position:absolute; z-index:3;
  display:flex; gap:10px;
}
.corner--bl{ bottom:var(--pad); left:var(--pad); }

/* ---------------- 見出しと道しるべ ----------------
   四隅の極小テキストと同じ扱いで、上端に固定する。 */
.masthead{
  position:fixed; z-index:20;
  top:var(--pad); left:var(--pad); right:var(--pad);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; pointer-events:none;
}
.masthead > *{ pointer-events:auto; }
.masthead__id{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.masthead__id h1, .masthead__id span{ margin:0; font-weight:400; }
.masthead__right{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; }

.nav{ display:flex; gap:clamp(13px,2.2vw,30px); }
.nav a{ position:relative; padding-bottom:2px; transition:color .3s var(--ease); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* 管理画面のメニューを使うと <li> が残るので、印だけ消して並びに混ぜる */
.nav li{ display:block; margin:0; list-style:none; }

/* 帯が上端に来ている間だけ、ヘッダーの文字を帯のインク色へ。
   濃い帯（既定は #14140f）の上で墨の文字が沈むのを避ける。 */
body.is-band-under .masthead .mono,
body.is-band-under .masthead .mono--ink,
body.is-band-under .nav-toggle{ color:var(--band-ink,#ececec); }

/* ---------------- ハンバーガー（狭い画面だけ） ----------------
   ボタン自体は常にDOMにあるが、広い画面では隠す。2本線→×の
   変形はCSSだけで作り、開閉の見た目の切り替えはJSがつける
   is-open / aria-expanded に任せる。 */
.nav-toggle{
  display:none;
  position:relative; z-index:21;
  width:30px; height:22px; padding:0; margin:0;
  border:0; background:transparent; color:var(--ink); cursor:pointer;
}
.nav-toggle__bar{
  position:absolute; left:0; right:0; height:1px;
  background:currentColor;
  transition:transform .35s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bar:first-child{ top:7px; }
.nav-toggle__bar:last-child{ top:15px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:640px){
  /* 開いている間は濃色のドロワーの上に乗るので、×は白にする */
  .nav-toggle[aria-expanded="true"]{ color:var(--paper); }
}

.nav-scrim{ display:none; }

@media (max-width:640px){
  .nav{ gap:12px; }

  .nav-toggle{ display:block; }

  /* 暗幕はドロワーとは別要素。ドロワー自身は不透明な色にしておき、
     暗幕は裏のページだけを薄暗くする（ドロワーの下に敷く）。 */
  .nav-scrim{
    display:block;
    position:fixed; inset:0; z-index:18;
    background:#14140f;
    opacity:0; pointer-events:none;
    transition:opacity .4s var(--ease);
  }
  .nav-scrim.is-open{ opacity:.32; pointer-events:auto; }

  /* 押すと右端からドロワーがスライドインしてくる。幅を広げ直したときも
     残らないよう resize でJSが閉じる。 */
  .nav{
    position:fixed; z-index:19;
    inset:0 0 0 auto;
    width:min(78vw, 300px);
    flex-direction:column; align-items:flex-start;
    gap:22px;
    padding:calc(var(--pad) + 46px) var(--pad) var(--pad);
    background:#14140f;
    visibility:hidden; pointer-events:none;
    transform:translateX(100%);
    transition:transform .4s var(--ease), visibility 0s linear .4s;
  }
  .nav.is-open{
    visibility:visible; pointer-events:auto; transform:translateX(0);
    transition:transform .4s var(--ease);
  }
  .nav a{ font-size:13px; color:var(--paper); }
  .nav a:hover, .nav a[aria-current="page"]{ color:var(--paper); opacity:.68; }
  .nav a::after{ background:var(--paper); }

  body.is-nav-open{ overflow:hidden; }
}


/* MODEL→PRODUCT のつまみ（見た目上は非表示。裏の自動アニメーションは維持） */
.control{
  display:none;
  position:absolute; z-index:4;
  left:50%; transform:translateX(-50%);
  bottom:clamp(26px,7vh,72px);
  width:min(420px, 62vw);
}
.control__labels{ display:flex; justify-content:space-between; padding-bottom:12px; }
.slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:none; cursor:ew-resize; display:block;
}
.slider::-webkit-slider-runnable-track{ height:1px; background:var(--ink); opacity:.35; }
.slider::-moz-range-track{ height:1px; background:var(--ink); opacity:.35; }
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; margin-top:-5px;
  background:var(--ink); border:0; border-radius:0;
  transition:transform .3s var(--ease);
}
.slider:hover::-webkit-slider-thumb,
.slider:active::-webkit-slider-thumb{ transform:scale(1.5); }
.slider::-moz-range-thumb{
  width:11px; height:11px; background:var(--ink); border:0; border-radius:0;
}
.control__read{ padding-top:12px; text-align:center; }

/* マイクで音に反応させるトリガー／録画（ヘッダーの下、右上あたり） */
.tools{
  position:absolute; z-index:6;
  right:var(--pad); top:calc(var(--pad) + 58px);
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
/* 打ち込み用。見えないが、focus はできる場所に置く */
.voice-input{
  position:absolute; z-index:6;
  right:var(--pad); top:calc(var(--pad) + 58px);
  width:120px; height:20px;
  opacity:0; border:0; background:none;
  font:inherit; color:transparent; caret-color:transparent;
  pointer-events:none;
}

.mic,.voice{
  display:flex; align-items:center; gap:9px;
  background:none; border:0; padding:4px; margin:-4px; cursor:pointer;
}
.mic__dot{
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--ink); background:none;
  transition:background .3s var(--ease);
}
.mic.is-live .mic__dot, .voice.is-live .mic__dot{
  background:var(--ink);
  animation:mic-pulse 1.1s ease-in-out infinite;
}
.mic.is-error .mic__dot{ border-color:var(--mute); }
@keyframes mic-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.7); opacity:.45; }
}

/* ---------------- 本文。余白を主役にする ---------------- */
.section{ padding-block:clamp(120px,26vh,300px); }
/* 上の一文と同じ位置・同じ幅にそろえて、中央に置く */
.stage{
  max-width:44rem; margin-inline:auto;
  text-align:center;
}
.stage > .mono{
  display:block;
  margin-bottom:clamp(16px,2.6vw,30px);
}
.stage + .stage{ margin-top:clamp(110px,22vh,260px); }
.stage__body{ max-width:none; }
.stage__title{
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.05rem,2vw,1.4rem);
  line-height:1.5; letter-spacing:.06em;
  font-variant-caps:small-caps; font-feature-settings:"smcp" 1;
  margin-bottom:clamp(20px,3vw,34px);
}
.stage__text{ max-width:34rem; margin-inline:auto; }
/* 中央揃えなので、行の長さを揃えて2行に落ち着かせる。
   最後の1行だけ短く残る「はぐれ行」を防ぐ。 */
.stage__text p,
.stage__text{ text-wrap:balance; }
.stage__text + .stage__text{ margin-top:1.7em; }
.stage__text p + p{ margin-top:1.7em; }

.pull{
  max-width:44rem; margin-inline:auto;
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.05rem,2.1vw,1.5rem);
  line-height:1.9; letter-spacing:.04em;
  text-align:center; text-wrap:balance;
}
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.colophon{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding:22px var(--pad) 26px;
  border-top:1px solid var(--line);
}

/* 出現 */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}

@media (max-width:700px){
  .grid__cols{ grid-template-columns:repeat(4,1fr); }
  .corner--tr{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------------- WordPress ---------------- */
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:999;
  background:var(--ink); color:var(--paper);
  padding:8px 14px; font-family:var(--mono); font-size:11px;
  transform:translateY(-200%);
}
.skip-link:focus{ transform:none; }

.prose{ max-width:38rem; }
.prose > * + *{ margin-top:1.7em; }
.prose h2{
  font-family:var(--grot); font-weight:500; font-size:1.15rem;
  letter-spacing:.07em; line-height:1.6;
  font-variant-caps:small-caps; font-feature-settings:"smcp" 1;
}
.prose a{ border-bottom:1px solid var(--line); }
.prose a:hover{ border-bottom-color:var(--ink); }
.prose img{ width:100%; }
.prose figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute); margin-top:9px; }

.page-title{
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.05rem,1.9vw,1.35rem);
  line-height:1.4; letter-spacing:var(--cap);
  font-variant-caps:small-caps; font-feature-settings:"smcp" 1;
  margin-bottom:clamp(30px,5vw,56px);
}
.page-body{ padding-top:clamp(150px,22vh,240px); padding-bottom:clamp(80px,14vh,180px); }
/* 段の題（表紙の Works など）。page-title と同じ扱いで、もう一段小さく */
.section-title{
  font-family:var(--grot); font-weight:500;
  font-size:clamp(.95rem,1.6vw,1.15rem);
  line-height:1.4; letter-spacing:var(--cap);
  font-variant-caps:small-caps; font-feature-settings:"smcp" 1;
  color:var(--ink);
}

.narrow{ max-width:74rem; margin-inline:auto; }

/* ---------------- 仕事の索引 ----------------
   4列の格子。図版の右端に年を縦組みで立て、下に 日付 / 名前 / 種別 を置き、
   カード下端に髪の毛罫線を引く。図版は列いっぱいに広げず、
   罫線より少し内側で止める。年は罫線の右端にそろえて立つので、
   図版を小さくするほど、年との間に余白が開く。 */
:root{
  --work-cols:  4;          /* 列の数 */
  --work-ratio: 4 / 3;      /* 図版の比率 */
  --work-thumb: 86%;        /* 列の幅に対する図版の幅。100% にすれば罫線まで届く */
  --ease-soft:  cubic-bezier(.16, 1, .3, 1);
  /* 触れたときの跳ね。下端を軸に、一度沈んで潰れてから伸び上がり、
     行き過ぎたぶんを小さく揺り返して、少し浮いた位置に落ち着く。 */
  --dip:     5px;    /* 最初に沈む深さ。ここが無いと、ただ浮くだけに見える */
  --lift:    -4px;   /* 落ち着く高さ */
  --zoom:    1.035;  /* なかの写真の寄り */
  --boing:   .56s;   /* 沈んで伸びて落ち着くまで */
  --squash:  .93;    /* いちばん潰れたときの縦。横はこのぶん膨らむ */
  --stretch: 1.05;   /* いちばん伸びたときの縦。横はこのぶん締まる */
  --settle:  .987;   /* 揺り返し。最後にもう一度だけ、わずかに潰れる */
  /* コマとコマのあいだの結び方。ease-out だと潰れも伸びも頭で終わって、
     指定した時刻より早く山に着いてしまう。行きも帰りも同じ丸みで結ぶ。 */
  --boing-ease: cubic-bezier(.45, .05, .55, .95);
  /* 1件のページで、右にとる作品画像の列の幅（左の文章に対する比） */
  --figs: .78fr;
  /* 投稿ページの額が下から跳ね上がって出るときの、待機位置・行き過ぎる高さ・かかる時間 */
  --pop-from: 72px;
  --pop-over: 15px;
  --pop:      .86s;
}

.works-lead{
  max-width:38rem;
  margin-top:clamp(-14px,-2vw,-8px);
  margin-bottom:clamp(24px,4vw,44px);
  color:var(--mute);
}
.works-filter{
  display:flex; flex-wrap:wrap; gap:clamp(13px,2.2vw,28px);
  padding-bottom:clamp(26px,4vw,44px);
}
.works-filter a{ transition:color .3s var(--ease); }
.works-filter a:hover{ color:var(--ink); }

.works{
  display:grid;
  grid-template-columns:repeat(var(--work-cols), minmax(0,1fr));
  column-gap:clamp(20px,3vw,44px);
  row-gap:clamp(46px,6vw,84px);
}
.work{ display:block; }

.work__frame{
  display:grid;
  grid-template-columns:minmax(0,var(--work-thumb)) 1fr;
  align-items:end;
  /* perspective は直接の子にしか効かない。.work__img を傾けるので、
     ここ（その直接の親）に置く。祖先の .works に置いても、途中で
     transform を使う要素（この .work__frame 自身）に preserve-3d が
     無いと3D空間が伝わらず、何も起きているように見えなくなる。 */
  perspective:1400px;
}
/* クリッピング（overflow:hidden）と3D変形は同じ箱に同居させない。
   同居させるとブラウザが3D変形を平面化して処理することがあり、
   傾きが消えて拡大縮小だけが見える、という壊れ方をする。
   なので外側（.work__img）は寸法だけを持って傾き、内側
   （.work__img-in）が実際に写真をクリップする役に専念する。 */
.work__img{
  display:block; position:relative;
  aspect-ratio:var(--work-ratio);
  background:rgba(20,20,15,.045);
}
.work__img-in{
  display:block; overflow:hidden;
  width:100%; height:100%;
}
.work__img-in img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* 年は図版の右の余白に、下端をそろえて立てる */
.work__year{
  writing-mode:vertical-rl;
  justify-self:end; align-self:end;
  font-family:var(--mono); font-size:10px; line-height:1;
  letter-spacing:.2em; color:var(--faint);
  padding-bottom:2px;
}

.work__date{ display:block; padding-top:clamp(14px,1.8vw,20px); }
.work__row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px;
  padding:9px 0 clamp(14px,1.8vw,20px);
  border-bottom:1px solid var(--line);
}
.work__name{
  font-size:14px; line-height:1.5; letter-spacing:.02em;
  transition:color .4s var(--ease);
}
.work__cat{ flex:none; }
/* 写真の索引で、日付の右に添える枚数 */
.work__sheets{ margin-left:10px; opacity:.7; }

/* ふだんはモノクロ。触れた瞬間に色が戻り、図版が下端を軸にひと潰れしてから
   伸び上がって、少し浮いた位置に落ち着く。指で触る端末では掛けない
   （触れる相手がいないと、灰色のままになるため）。

   潰れるときは縦が縮んで横がふくらみ、伸びるときはその逆。
   体積が変わらないように動かすと、硬い板ではなくゴムに見える。
   軸は下端（transform-origin:50% 100%）。紙に置かれたものが起き上がる感じになる。 */
@keyframes work-boing{
  0%  { transform:translateY(0) scale(1, 1); }
  /* 80ms あたり。いちど沈んで、いちばん潰れる。ここが伸びの助走になる */
  14% { transform:translateY(var(--dip)) scaleX(calc(2 - var(--squash))) scaleY(var(--squash)); }
  /* 260ms あたり。いちばん伸びる。落ち着く高さより上まで行き過ぎる */
  46% { transform:translateY(calc(var(--lift) * 1.9)) scaleX(calc(2 - var(--stretch))) scaleY(var(--stretch)); }
  /* 行き過ぎたぶんの揺り返し。ここが無いと、上で止まって固く見える */
  72% { transform:translateY(calc(var(--lift) * .55)) scaleX(calc(2 - var(--settle))) scaleY(var(--settle)); }
  100%{ transform:translateY(var(--lift)) scale(1, 1); }
}
/* 離したとき。落ちてきて、着いたところでもう一度だけ潰れて、小さく跳ねる */
@keyframes work-drop{
  0%  { transform:translateY(var(--lift)) scale(1, 1); }
  45% { transform:translateY(var(--dip)) scaleX(calc(2 - var(--squash))) scaleY(var(--squash)); }
  74% { transform:translateY(calc(var(--dip) * -.35)) scaleX(calc(2 - var(--settle))) scaleY(calc(2 - var(--settle))); }
  100%{ transform:translateY(0) scale(1, 1); }
}

@media (hover:hover) and (pointer:fine){
  .work__img-in img{ filter:grayscale(1); }
  .work__frame{ transform-origin:50% 100%; }
  /* 隣に重なって前に出るので、触れている1枚を常に最前面へ */
  .work{ position:relative; }
  .work:hover{ z-index:6; }
  .work__img-in img{ transition:transform .5s var(--ease-soft), filter .55s var(--ease); }

  .work:hover .work__frame{
    transform:translateY(var(--lift));
    animation:work-boing var(--boing) var(--boing-ease) forwards;
  }
  /* 離したときは JS が is-drop を付ける。終わったら自分で外れる */
  .work.is-drop .work__frame{
    animation:work-drop calc(var(--boing) * .72) var(--boing-ease) forwards;
  }
  .work:hover .work__img-in img{ filter:grayscale(0); transform:scale(var(--zoom)); }

  /* 触れている1枚だけを残し、ほかの名前は退く */
  .works:hover .work .work__name{ color:var(--faint); }
  .works:hover .work:hover .work__name{ color:var(--ink); }
}

/* ---- 図版が手前に迫る ----
   ポインタの位置に応じて、JS が --tx / --ty（-1〜1）を渡す。
   図版だけを傾けて盤から浮かせ、透かした影を敷いて奥行きを作る。
   下の名前・日付・年は紙のまま動かさない。傾け続けると安っぽくなるので、
   角度は控えめに、寄りとセットで「軽く持ち上がった」程度に止める。 */
@media (hover:hover) and (pointer:fine){
  .work__img{
    transition:transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
    will-change:transform;
  }
  .work:hover .work__img{
    transform:
      translateZ(28px)
      rotateX(calc(var(--ty, 0) * -6deg))
      rotateY(calc(var(--tx, 0) * 8deg))
      scale(var(--pop, 1.5));
    box-shadow:
      calc(var(--tx, 0) * -22px) calc(28px - var(--ty, 0) * 16px) 60px -14px rgba(20,20,15,.4);
  }
  /* 傾いたぶん、図版の中の写真は逆方向にわずかに動かして、
     切り抜いた一枚板ではなく厚みのある物として見せる */
  .work__img-in img{
    transition:transform .45s var(--ease-soft), filter .55s var(--ease);
  }
  .work:hover .work__img-in img{
    transform:
      scale(var(--zoom))
      translate(calc(var(--tx, 0) * -6px), calc(var(--ty, 0) * -6px));
  }
}

@media (prefers-reduced-motion:reduce){
  .work:hover .work__frame,
  .work.is-drop .work__frame{ animation:none; transform:none; }
  .work:hover .work__img img{ transform:none; }
}

@media (max-width:1180px){ :root{ --work-cols:3; } }
@media (max-width:880px){  :root{ --work-cols:2; } }
@media (max-width:520px){
  :root{ --work-cols:1; --work-thumb:78%; }
  .works{ row-gap:clamp(38px,9vw,56px); }
}

/* ---------------- 写真 ひと組（表紙のように、いちどに1枚） ----------------
   左に日付・番号・機材・ドット、右に写真いっぱい。方眼だけは図版と喧嘩する
   ので伏せるが、ヘッダーは上端に置いたままにする。 */
body.single-photo .grid,
body.single-work .grid{ display:none; }

.view{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(300px,46%) 1fr;
  align-items:center;
  overflow:hidden;
}
.view__pattern{
  position:absolute; inset:0; right:auto; width:46%;
  min-width:300px;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,  var(--line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 64px);
  opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.view__side{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(14px,2vw,22px);
  padding:calc(var(--pad) * 1.8) var(--pad) calc(var(--pad) * 1.4);
}

/* 図版が1枚も無い仕事は、額を畳んで文章だけの1段にする */
.view--nofig{ grid-template-columns:1fr; }
.view--nofig .view__pattern{ width:100%; }
.view--nofig .view__stage{ display:none; }
.view--nofig .view__side{ max-width:70rem; }
.view__count{
  margin:0;
  font-family:var(--grot); font-weight:500;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1; letter-spacing:.01em;
  color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.view__slash{ display:inline-block; margin-inline:.22em; opacity:.6; }
.view__title{
  margin:0;
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.03em;
  color:var(--ink);
}
.view__sub{ margin:-6px 0 0; }
.view__desc{
  margin:0; max-width:30rem;
  font-size:14px; line-height:2; color:var(--mute);
}

/* 種別の札。loubte の DESIGN のような小さな枠。 */
.view__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 0; }
.view__tag{
  display:inline-block; padding:5px 11px 4px;
  border:1px solid var(--line); color:var(--mute);
}

/* 本文は左の段に流す。図版は帯の下に回してあるので、ここは文章だけ。 */
.view__body{
  max-width:34rem;
  font-size:14px; line-height:2.1; color:var(--mute);
}
.view__body > * + *{ margin-top:1.5em; }
.view__body h2,
.view__body h3{
  font-family:var(--grot); font-weight:500; font-size:1.05rem;
  line-height:1.6; letter-spacing:.05em; color:var(--ink);
  margin-top:2em;
}
.view__body a{ color:var(--ink); border-bottom:1px solid var(--line); }
.view__body a:hover{ border-bottom-color:var(--ink); }
/* 図版は PHP 側で抜いてある。ここに残るのは、URL の文字だけになった
   埋め込みなど「図版を含まない figure」。念のため幅だけ抑えておく。 */
.view__body figure{ margin:0; }
.view__body img{ max-width:100%; height:auto; }
.view__body .wp-block-embed__wrapper{ word-break:break-all; }

.view__dots{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.view__dots button{
  width:8px; height:8px; padding:0; margin:0; border:0; border-radius:50%;
  background:var(--faint); cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.view__dots button:hover{ background:var(--mute); }
.view__dots button.is-active{
  background:var(--ink); transform:scale(1.35);
}
/* 下から跳ね上がって出る。地面から押し出されるように、
   潰れた姿で下に待機していて、伸びながら上がり、行き過ぎてから落ち着く。
   軸は下端。索引の跳ねと同じ考え方（縦が伸びるぶん横が締まる）。 */
@keyframes fig-pop{
  0%  { opacity:0; transform:translateY(var(--pop-from)) scaleX(1.045) scaleY(.93); }
  18% { opacity:1; }
  34% { transform:translateY(calc(var(--pop-over) * -1)) scaleX(.972) scaleY(1.055); }
  56% { transform:translateY(calc(var(--pop-over) * .34)) scaleX(1.014) scaleY(.984); }
  76% { transform:translateY(calc(var(--pop-over) * -.2)) scaleX(.996) scaleY(1.006); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* 写真の側は画面いっぱいに貼らず、額に収める。
   額の横幅は loubte の photos と同じ寸法（版面の半分から余白 80px を引いた幅）に
   合わせてある。列は 46 / 54 で割れているので、その中で中央に置く。 */
.view__stage{
  position:relative;
  height:min(58svh,600px);
  width:min(100%, calc(38vw - 80px));
  margin-inline:auto;
  /* 読み込んだとき、下から押し出されるように跳ね上がって出る。
     軸は下端。索引カードの跳ねと同じ考え方（縦が伸びるぶん横が締まる）。 */
  transform-origin:50% 100%;
  animation:fig-pop var(--pop) var(--boing-ease) both;
}
/* 横に滑って来たときは、面が入りきるのを待ってから跳ねる */
html.is-arriving .view__stage{ animation-delay:.34s; }
@media (prefers-reduced-motion:reduce){
  .view__stage{ animation:none; }
}
.view__fig{
  position:absolute; inset:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.view__fig.is-active{ opacity:1; visibility:visible; }
/* 焦点は額の縁に沿わせる。既定の outline-offset だと写真に食い込む。 */
.view__fig:focus-visible{ outline:1px solid var(--ink); outline-offset:10px; }
/* 図版の題は額の外、すぐ下に置く。額の寸法には影響させない。 */
.view__cap{
  position:absolute; top:100%; left:0; right:0;
  margin-top:12px; color:var(--mute);
}
/* 写真は切らない。額の中にそのままの比率で収める。 */
.view__fig img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; display:block; object-fit:contain;
  cursor:zoom-in;
  transition:max-width .5s var(--ease), max-height .5s var(--ease), transform .5s var(--ease);
}

/* ---------------- クリックで少しアップに、背景は黒に沈める ----------------
   面(帯・索引・左右の縦組み・ヘッダー)はそのまま裏に置き、黒い幕
   (zoom-veil)だけを上に敷く。いま出ている1枚の写真を複製して、
   その幕の「中」に直接差し込んで見せる(位置固定や重ね順のトリックを
   親要素越しに頼らないので、途中の要素にどんな演出用transformが
   乗っていても影響を受けない)。もう一度押すか、幕を押すか、Escで
   元に戻る。 */
.zoom-veil{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
body.is-zoomed{ overflow:hidden; }
body.is-zoomed .zoom-veil{
  opacity:1; visibility:visible;
  transition:opacity .5s var(--ease);
}
.zoom-veil__img{
  max-width:78vw; max-height:78svh;
  width:auto; height:auto;
  cursor:zoom-out;
  transform:scale(1.02);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion:reduce){
  .zoom-veil{ transition:none; }
  .zoom-veil__img{ transform:none; }
}

/* 差し替えは、次の1枚が下から上がってきて、行き過ぎてから収まる。
   紙を一枚めくって置き直すときの、あの少しの揺れ。 */
.view__fig.is-out{
  opacity:0; visibility:visible;
  transform:translate(20px,-30px) rotate(1deg);
}
.view__fig.is-enter{
  opacity:0; visibility:visible; transition:none;
  transform:translate(-40px,100%) rotate(-3deg);
}
.view__fig.is-active.is-settling{
  animation:viewSlideUp .9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes viewSlideUp{
  0%   { transform:translate(-40px,100%) rotate(-3deg); opacity:0; }
  50%  { transform:translate(4px,-8px)  rotate(.5deg);  opacity:1; }
  65%  { transform:translate(-3px,4px)  rotate(-.3deg); }
  75%  { transform:translate(2px,-2px)  rotate(.2deg); }
  85%  { transform:translate(-1px,1px)  rotate(-.1deg); }
  100% { transform:translate(0,0)       rotate(0);      opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .view__fig.is-active.is-settling{ animation:none; }
  .view__fig.is-out,
  .view__fig.is-enter{ transform:none; }
}

@media (max-width:880px){
  .view{ grid-template-columns:1fr; padding-top:calc(var(--pad) + 46px); }
  .view__pattern{ width:100%; }
  .view__side{ padding-bottom:clamp(30px,7vw,50px); }
  .view__stage{
    height:52svh; width:auto;
    margin:clamp(20px,5vw,32px) clamp(16px,4vw,28px) 0;
    order:-1;
  }
}

/* ---------------- 横に滑る移動 ----------------
   いま見ている面が左へ抜け、次の面が右から入る。
   出る側は #main を動かし、入る側は wp_head の一行が
   html に印を付けてから、下の transition で戻す。 */
#main.is-leaving{
  transform:translateX(-100%); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.76,0,.24,1), opacity .4s ease;
}
html.is-arriving #main{ transform:translateX(100%); opacity:0; }
html.is-arriving-in #main{
  transform:translateX(0); opacity:1;
  transition:transform .55s cubic-bezier(.76,0,.24,1), opacity .4s ease;
}
@media (prefers-reduced-motion:reduce){
  #main.is-leaving{ transform:none; opacity:1; transition:none; }
  html.is-arriving #main{ transform:none; opacity:1; }
}

/* ---------------- 下の帯 ----------------
   図版を見終えた下に、事実だけを載せた色の帯を敷く。
   右端は次の1件への戸口。そこには次の帯の色が覗いている。 */
.band__frame{ overflow:hidden; min-height:60px; }
.band{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start;
  min-height:clamp(220px,32vh,300px);
  padding:clamp(34px,4vw,52px) clamp(20px,4vw,64px) clamp(40px,5vw,60px);
}
.band__main{ flex:1; min-width:0; max-width:56rem; }
/* クレジットが1件も無い帯は、空きが目立つので背を低くする */
.band--slim{ min-height:clamp(170px,22vh,230px); }
.band--slim .band__meta{ margin-bottom:0; }
.band__title{
  margin:0 0 14px;
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.15rem,2.2vw,1.7rem);
  line-height:1.15; letter-spacing:.02em; color:inherit;
}
.band__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-bottom:clamp(26px,4vw,40px);
  color:inherit; opacity:.6;
}
.band__dot{ opacity:.55; }
.band__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,max-content));
  gap:18px 52px;
}
.band__item{ min-width:120px; }
.band__role{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:6px; opacity:.95;
}
.band__name{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; line-height:1.75; opacity:.6;
}
.band__link{
  border-bottom:1px solid currentColor; padding-bottom:1px;
  transition:opacity .3s var(--ease);
}
.band__link:hover{ opacity:.6; }
.band__scroll{
  position:absolute; right:calc(240px + 34px); top:50%;
  transform:translateY(-50%) rotate(90deg); transform-origin:center;
  font-size:9px; letter-spacing:.22em; color:inherit; opacity:.4; white-space:nowrap;
}

/* 次の写真への戸口 */
.band__next{
  position:absolute; top:0; right:0; bottom:0; width:240px;
  display:flex; align-items:center;
  padding:clamp(28px,3vw,40px) clamp(20px,2vw,30px);
  color:inherit; text-decoration:none; overflow:hidden;
  isolation:isolate;
}
.band__peek{
  position:absolute; inset:0; z-index:-1;
  background:var(--peek,transparent);
  transform:translateX(72%);
  transition:transform .55s var(--ease);
}
.band__next:hover .band__peek,
.band__next:focus-visible .band__peek{ transform:translateX(0); }
.band__next-inner{
  display:flex; flex-direction:column; gap:9px;
  transition:color .45s var(--ease), transform .45s var(--ease);
}
.band__next:hover .band__next-inner,
.band__next:focus-visible .band__next-inner{
  color:var(--peek-ink,currentColor); transform:translateX(4px);
}
.band__next::before{
  content:"→"; position:absolute; top:26px; right:26px;
  font-family:var(--mono); font-size:14px; opacity:.4;
  transition:transform .35s var(--ease), opacity .35s var(--ease), color .45s var(--ease);
}
.band__next:hover::before{
  transform:translateX(5px); opacity:.8; color:var(--peek-ink,currentColor);
}
.band__next-label{ opacity:.5; }
.band__next-title{
  font-family:var(--grot); font-weight:500; font-style:italic;
  font-size:1.15rem; line-height:1.25; letter-spacing:.01em;
}
.band__next-year{ font-size:9px; letter-spacing:.18em; opacity:.45; }

/* ひとりでに送っているとき、最後の1枚まで来たら戸口がゆっくり開く。
   次の写真の色が満ちきったところで、そのページへ移る。 */
.band__next.is-calling .band__peek{
  transform:translateX(0);
  transition-duration:var(--call,3200ms);
  transition-timing-function:linear;
}
.band__next.is-calling .band__next-inner{
  color:var(--peek-ink,currentColor);
  transition-duration:var(--call,3200ms);
}
.band__next.is-calling::before{
  transform:translateX(5px); opacity:.8;
  color:var(--peek-ink,currentColor);
  transition-duration:var(--call,3200ms);
}

/* 帯は左から引かれて、中身が順に入る */
.band.is-ready{ transform:scaleX(0); transform-origin:left center; }
.band.is-visible{
  transform-origin:left center;
  animation:bandDraw .85s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes bandDraw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.band [data-band-item]{ opacity:0; transform:translateX(-30px); }
.band.is-visible [data-band-item]{
  animation:bandItemIn .72s cubic-bezier(.16,1,.3,1) forwards;
}
.band.is-visible [data-band-item="1"]{ animation-delay:.52s; }
.band.is-visible [data-band-item="2"]{ animation-delay:.64s; }
.band.is-visible [data-band-item="3"]{ animation-delay:.76s; }
@keyframes bandItemIn{ to{ opacity:1; transform:translateX(0); } }

.band__next{ opacity:0; transform:translateX(30px); }
.band.is-visible .band__next{
  animation:bandNextIn .72s cubic-bezier(.16,1,.3,1) .92s forwards;
}
@keyframes bandNextIn{ to{ opacity:1; transform:translateX(0); } }

@media (prefers-reduced-motion:reduce){
  .band.is-ready{ transform:none; }
  .band.is-visible{ animation:none; }
  .band [data-band-item],
  .band__next{ opacity:1; transform:none; animation:none !important; }
}

@media (max-width:1080px){
  .band__scroll{ display:none; }
  .band__next{ width:200px; }
}
@media (max-width:880px){
  .band{ flex-direction:column; padding:clamp(28px,6vw,36px) clamp(16px,4vw,24px) 0; min-height:0; }
  .band__grid{ gap:16px 28px; }
  .band__next{
    position:relative; inset:auto; width:calc(100% + 2 * clamp(16px,4vw,24px));
    margin:clamp(28px,6vw,36px) calc(-1 * clamp(16px,4vw,24px)) 0;
    padding:22px clamp(16px,4vw,24px);
    align-items:center;
  }
  .band__next-inner{ flex-direction:row; align-items:baseline; gap:14px; }
  .band__next-year{ display:none; }
  .band__next::before{ top:50%; right:20px; transform:translateY(-50%); }
  .band__peek{ transform:translateY(76%); }
  .band__next:hover .band__peek,
  .band__next:focus-visible .band__peek{ transform:translateY(0); }
  .band__next.is-calling .band__peek{ transform:translateY(0); }
}

/* ---------------- 仕事 1件 ----------------
   版面を左右に割る。左は事実と文章、右は作品の画像だけ。
   本文は 38rem で止まるので、右の余白がそのまま図版の場所になる。
   画像が1枚も無ければ1段組みのまま（--figs の列が消える）。 */
.work-single{ display:block; }
.work-single--figs{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--figs, .78fr));
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
.work-single__figs{
  display:grid;
  gap:clamp(18px,2.6vw,34px);
}
.work-fig{ margin:0; }
.work-fig img{ width:100%; height:auto; display:block; }
.work-fig figcaption{ margin-top:9px; color:var(--mute); }

/* 出現の指定（.reveal）より強く当てて、動きだけ差し替える */
.work-fig.reveal{ opacity:0; transform:none; transform-origin:50% 100%; }
.work-fig.reveal.is-in{
  opacity:1;
  transition:none;
  animation:fig-pop var(--pop) var(--boing-ease) var(--d, 0ms) both;
}

/* 縦に積む画面では、題より先に作品を見せる */
@media (max-width:880px){
  .work-single--figs{ grid-template-columns:1fr; gap:clamp(30px,7vw,54px); }
  .work-single__figs{ order:-1; }
}

.work-lead{
  max-width:34rem;
  margin-top:clamp(-18px,-2.6vw,-12px);
  font-family:var(--grot); font-weight:400;
  font-size:clamp(1rem,1.8vw,1.2rem);
  line-height:1.95; letter-spacing:.045em;
}
.spec{
  margin:clamp(36px,6vw,64px) 0 0;
  max-width:44rem;
  border-top:1px solid var(--line);
}
.spec__row{
  display:grid; grid-template-columns:7rem 1fr; gap:clamp(14px,3vw,32px);
  padding:15px 0; border-bottom:1px solid var(--line);
}
.spec dt{ margin:0; padding-top:.35em; }
.spec dd{ margin:0; }
/* spec や抜粋のすぐ下から本文が始まるので、あいだを空ける */
.spec + .prose,
.work-lead + .prose{ margin-top:clamp(44px,7vw,86px); }
.under{ border-bottom:1px solid var(--line); }
.under:hover{ border-bottom-color:var(--ink); }
@media (max-width:560px){
  .spec__row{ grid-template-columns:1fr; gap:4px; }
}

.next{
  display:block;
  margin-top:clamp(70px,12vh,150px);
  padding-top:clamp(22px,3vw,34px);
  border-top:1px solid var(--line);
}
.next__title{
  display:block; margin-top:12px;
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1rem,1.9vw,1.3rem);
  line-height:1.45; letter-spacing:var(--cap);
  font-variant-caps:small-caps; font-feature-settings:"smcp" 1;
  transition:transform .5s var(--ease);
}
.next:hover .next__title{ transform:translateX(7px); }

/* ページ送り */
.pagination{ display:flex; }
.nav-links{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.page-numbers{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--mute); transition:color .3s var(--ease);
}
.page-numbers:hover, .page-numbers.current{ color:var(--ink); }

/* ---------------- 先頭へ戻る ----------------
   右側に長めの縦線＋矢じり。下までスクロールすると現れる。 */
.totop{
  position:fixed; z-index:15;
  right:var(--pad); bottom:var(--pad);
  width:34px; height:clamp(84px,14vh,132px);
  display:flex; align-items:flex-end; justify-content:center;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  opacity:0; transform:translateY(10px);
  pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.totop.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover .totop__arrow{ height:100%; }
.totop__arrow{
  position:relative;
  width:1px; height:78%;
  background:var(--ink);
  transition:height .35s var(--ease);
}
.totop__arrow::before{
  content:"";
  position:absolute; top:0; left:50%;
  width:9px; height:9px;
  border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:translate(-50%,4px) rotate(-135deg);
}
@media (max-width:700px){
  .totop{ right:calc(var(--pad) - 6px); height:clamp(64px,12vh,96px); }
}


/* ---------------- お問い合わせ ----------------
   画面のまんなかに細い一列だけを置く。左右は方眼にまかせて空けておく。
   欄の枠は四辺で囲わず、下の罫線一本だけにする。紙に引いた記入欄と
   同じ扱いで、ここだけ UI 然としないようにするため。 */
.contact{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding-block:clamp(120px,18vh,200px) clamp(80px,12vh,140px);
}
.contact__col{
  width:100%; max-width:30rem;
  margin-inline:auto;
  text-align:center;
}
.contact__title{ margin-bottom:clamp(20px,3vw,30px); }
.contact__lead{
  margin:0 0 clamp(34px,5vw,52px);
  font-size:14px; line-height:2.1; color:var(--mute);
}
.contact__body{ max-width:none; margin:0 0 clamp(34px,5vw,52px); text-align:left; }

/* 欄。ラベルは左に寄せる。中央そろえの入力欄は打ちにくい。 */
.contact__form{ display:grid; gap:clamp(22px,3vw,30px); text-align:left; }
.contact__field{ display:grid; gap:9px; }
.contact__field label{ color:var(--mute); }
/* 必須の米印。ラベルの字より一段大きく、少し上に持ち上げると
   等幅の小文字の列から浮いて、拾いやすくなる。 */
.contact__req{
  display:inline-block;
  margin-left:.5em;
  color:var(--mark);
  font-size:1.15em; line-height:1;
  transform:translateY(.05em);
}
.contact__req-note{
  margin:0 0 -6px;
  color:var(--faint);
}
.contact__req-note .contact__req{ margin:0 .35em 0 0; }
.contact__field input,
.contact__field select,
.contact__field textarea{
  width:100%;
  margin:0; padding:9px 2px 11px;
  font-family:var(--sans); font-size:15px; line-height:1.9;
  letter-spacing:.02em; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  border-radius:0;
  transition:border-color .35s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.contact__field textarea{ resize:vertical; min-height:9em; }
.contact__field select{
  cursor:pointer;
  /* 自前の矢じりを右端に置く。OS ごとの見た目の差をなくすため */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:22px;
}
.contact__field input:hover,
.contact__field select:hover,
.contact__field textarea:hover{ border-bottom-color:var(--faint); }
.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus{
  outline:none; border-bottom-color:var(--ink);
}
.contact__field input::placeholder,
.contact__field textarea::placeholder{ color:var(--faint); }

.contact__send{
  justify-self:start;
  margin-top:clamp(8px,1.6vw,16px);
  padding:14px 30px 13px;
  color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:0;
  cursor:pointer;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.contact__send:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.contact__note{
  margin:0; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; line-height:1.9; color:var(--faint);
}
.contact__note--warn{ color:var(--mute); }


/* 送り終えたあと */
.contact__done-mark{
  margin:0 0 18px;
  font-family:var(--grot); font-size:1.8rem; line-height:1; color:var(--ink);
}
.contact__done-text{
  margin:0 0 14px;
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.05rem,2vw,1.3rem); letter-spacing:.03em; color:var(--ink);
}
.contact__back{ margin:clamp(30px,5vw,46px) 0 0; }

/* おとりの欄。画面からも読み上げからも外す。
   display:none だけだと避けてくる機械がいるので、位置でも飛ばしておく。 */
.contact__trap{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---------------- 記入もれの知らせ ----------------
   欄の下に小さく赤字を出すやり方はとらない。送信を止めたことが
   伝わらないまま、もう一度押されることが多いため。画面を薄く覆って、
   足りないものだけを並べる。 */
.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:var(--pad);
  visibility:hidden; opacity:0;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.modal.is-open{ visibility:visible; opacity:1; }
.modal__veil{
  position:absolute; inset:0;
  background:rgba(20,20,15,.42);
  cursor:pointer;
}
.modal__panel{
  position:relative;
  width:100%; max-width:26rem;
  padding:clamp(38px,6vw,58px) clamp(26px,5vw,46px) clamp(32px,5vw,46px);
  background:#fff;
  text-align:center;
  transform:translateY(12px) scale(.985);
  transition:transform .38s var(--ease);
}
.modal.is-open .modal__panel{ transform:none; }
.modal__panel:focus{ outline:none; }
.modal__head{
  margin:0;
  font-size:15px; line-height:1.9; letter-spacing:.03em; color:var(--ink);
}
.modal__list{
  margin:clamp(22px,3vw,30px) 0 0;
  padding:0; list-style:none;
}
.modal__list:empty{ display:none; }
.modal__list li{
  font-size:14px; line-height:2.1; color:var(--ink);
}
/* 中黒は字として置かず、記号として前に添える */
.modal__list li::before{ content:"・"; color:var(--mute); }
.modal__close{
  display:inline-block;
  margin-top:clamp(26px,4vw,36px);
  font-size:12px;
  padding:13px 30px 12px;
  color:var(--ink);
  border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.modal__close:hover{ background:var(--ink); color:#fff; }

@media (prefers-reduced-motion:reduce){
  .modal{ transition:none; }
  .modal__panel{ transform:none; transition:none; }
}

/* ---------------- Still（写真の束） ----------------
   真ん中の1枚だけを大きく立て、左右の隣はその裏に小さく控える。
   下に題と日付、その下に波形。波形は音ではなく、束のどこを見ているかの目盛り。

   JS が [data-still] に is-stacked を付けたときだけ重なる。
   付かないとき（JS 無し）は、素直に縦に並んだ写真として読める。 */
/* この面だけは、上の見出しも小さなラベルも置かない。
   束を画面の高さいっぱいの中に据えて、上下の真ん中で見る。 */
.still{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--pad) + clamp(44px,6vh,72px));
  padding-bottom:clamp(48px,8vh,96px);
}
.still__lead{
  max-width:34rem; margin:0 auto clamp(30px,5vw,54px);
  text-align:center; color:var(--mute);
}

.still__deck{ position:relative; outline:none; }
.still__deck:focus-visible{ outline:1px solid var(--ink); outline-offset:16px; }

/* 束そのものの登場。位置が決まった瞬間にただ現れるのではなく、
   紙が下からゆっくり持ち上がって、霞んだところから像を結ぶように出す。
   JS が測り終えて位置を確定させたあと、is-in を付けて動かす。
   is-live（1枚ごとの重なりの動き）とは別の、束ぜんたい1回きりの登場。 */
.still__deck{
  opacity:0;
  transform:translateY(clamp(22px,4vh,40px));
  filter:blur(6px);
  transition:
    opacity 1.3s var(--ease-soft),
    transform 1.3s var(--ease-soft),
    filter 1.3s var(--ease-soft);
}
.still__deck.is-in{
  opacity:1; transform:translateY(0); filter:blur(0);
}

.still__stage{ display:flex; flex-direction:column; gap:clamp(20px,4vw,32px); }
.still__sheet{ margin:0; }
.still__sheet img{ display:block; width:100%; height:auto; }

/* --- ここから、JS が効いているときの重なり --- */
/* 高さは「余ったぶんを舞台に渡し、判はその高さから逆算する」順で決める。
   舞台の高さを svh で直に決めると、題・波形・余白との合計が画面を越えたとき、
   この面は縦に逃げ場が無いので上下が切れてしまう。 */
.still__deck.is-stacked{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
}

.still__deck.is-stacked .still__stage{
  /* 下の3つは見た目の調整用。JS がここから読んで配置を組み立てる */
  --still-shrink:.34;   /* 1枚離れるごとに縮む割合 */
  --still-lift:1.14;    /* 真ん中の1枚だけ、この割合で立てる */
  --still-gap:.6;       /* 隣までの距離。判の幅に対する割合 */
  --still-max:42;       /* 判の幅の上限（画面幅に対する％） */
  display:block;
  position:relative;
  flex:1 1 auto; min-height:0;
  /* 端の1枚が切れないよう、判のぶんだけ左右に逃げる */
  margin-inline:calc(var(--pad) * -1);
  overflow:hidden;
  cursor:grab; touch-action:pan-y;
}
.still__deck.is-stacked.is-dragging .still__stage{ cursor:grabbing; }

/* 幅と transform は JS が px と実数で書き込む。
   CSS 変数を calc の中で掛け合わせる書き方だと、
   ひとつでも解決に失敗した時点で transform ごと無効になり、
   判が縮尺も位置も持たないまま素の位置に落ちてしまう。 */
.still__deck.is-stacked .still__sheet{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
/* 動きが付くのは、is-live が乗ってから。
   読み込み直後の配置（全枚が中央に重なった状態から所定の位置へ）まで
   トランジションで繋ぐと、右へ滑り出してきたように見えてしまう。 */
.still__deck.is-live .still__sheet{
  transition:transform .62s var(--ease), opacity .62s var(--ease);
}
.still__deck.is-stacked .still__sheet img{
  width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover;
  background:var(--paper);
}
.still__deck.is-stacked .still__sheet.is-current img{}
/* 3枚ぶんより外は伏せる。重ねすぎると端が濁る */
.still__deck.is-stacked .still__sheet.is-far{ opacity:0; pointer-events:none; }
/* 隣の1枚は押せる。押すとそれが真ん中に来る */
.still__deck.is-stacked .still__sheet{ cursor:pointer; }
.still__deck.is-stacked .still__sheet.is-current{ cursor:default; }

/* 題と日付。写真の真下、中央にひと組だけ */
.still__slips{
  position:relative;
  margin-top:clamp(24px,4vh,50px);
  text-align:center;
}
.still__slip{ display:none; }
.still__slip.is-current{ display:block; }
/* 読み込み直後は動かさない。繰ってからの差し替えだけ、下から差し込む */
.still__deck.is-live .still__slip.is-current{
  animation:still-slip .5s var(--ease) both;
}
@keyframes still-slip{
  from{ opacity:0; transform:translateY(7px); }
  to  { opacity:1; transform:none; }
}
.still__title{
  margin:0;
  font-family:var(--grot); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.3rem);
  line-height:1.4; letter-spacing:.02em; color:var(--ink);
}
.still__date{ margin:9px 0 0; color:var(--faint); }

/* 波形。押した位置の1枚に飛ぶ */
.still__wave{
  position:relative;
  width:min(200px, 46vw);
  height:28px;
  margin:clamp(20px,2.8vh,36px) auto 0;
  cursor:pointer; touch-action:none; outline:none;
}
.still__wave:focus-visible{ outline:1px solid var(--ink); outline-offset:10px; }
.still__wave-canvas{ display:block; width:100%; height:100%; }
.still__playhead{
  position:absolute; top:0; bottom:0; left:0;
  width:1px; background:var(--ink);
  transform:translateX(-50%);
  transition:left .5s var(--ease);
}

@media (max-width:640px){
  .still__deck.is-stacked .still__stage{
    --still-max:84;
    --still-gap:.56;
    --still-shrink:.30;
  }
}

@media (prefers-reduced-motion:reduce){
  .still__deck{ opacity:1; transform:none; filter:none; transition:none; }
  .still__deck.is-live .still__sheet{ transition:none; }
  .still__deck.is-live .still__slip.is-current{ animation:none; }
  .still__playhead{ transition:none; }
}

/* ---------------- Still 1件 ---------------- */
.sheet__fig{ margin:0; }
.sheet__fig img{ display:block; width:100%; height:auto; }
.sheet__slip{ margin-top:clamp(26px,4vw,44px); text-align:center; }
.sheet__note{ max-width:34rem; margin:clamp(34px,5vw,56px) auto 0; }
.sheet__ways{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  margin-top:clamp(50px,8vw,96px);
  padding-top:clamp(20px,3vw,30px);
  border-top:1px solid var(--line);
}
.sheet__way{ flex:1; min-width:0; }
.sheet__way--end{ text-align:right; }
.sheet__ways a{ transition:color .3s var(--ease); }
.sheet__ways a:hover{ color:var(--ink); }

@media (max-width:640px){
  .sheet__ways{ flex-wrap:wrap; row-gap:12px; }
  .sheet__way{ flex:0 0 100%; text-align:left; }
  .sheet__way--end{ text-align:left; }
}

/* ---------------- Still の面は1画面で止める ----------------
   束・題・波形でひと組。読み進める先が無いので、ページごと動かさない。
   コロフォンは下端に据え、「先頭へ戻る」は行き先が無いので出さない。 */
body.is-still{ overflow:hidden; height:100svh; }
body.is-still #main{ height:100svh; }
body.is-still .still{
  height:100svh; min-height:0;
  padding-bottom:clamp(70px,10vh,110px);
}
body.is-still .colophon{
  position:fixed; z-index:16;
  left:0; right:0; bottom:0;
  border-top:0;
}
body.is-still .totop{ display:none; }

/* 縦が詰まった画面では、写真の下に付くものから先に削る。
   舞台の高さは余りから決まるので、ここで直に触る必要はない。 */
@media (max-height:640px){
  body.is-still .still{
    padding-top:calc(var(--pad) + 34px);
    padding-bottom:clamp(40px,6vh,64px);
  }
  body.is-still .still__slips{ margin-top:clamp(16px,2.6vh,26px); }
  body.is-still .still__wave{ height:22px; margin-top:clamp(14px,2.2vh,24px); }
}

/* ---------------- 写真 ひと組の面（shyn. の Film 個別ページに合わせた縦組みビューアー） ----------------
   左端に縦組みの見出し、真ん中に写真、右端にこの組の一覧を
   フィルムリールのように積む。左右は .plate の縁に position:absolute で
   寄せてあるだけで、画面には固定しない。この面を過ぎれば、下の帯や本文と
   同じようにスクロールでいっしょに流れて消える。
   図版の差し替えは索引と同じ仕組み（data-fig / data-dot）に載せてある。 */
.plate{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(var(--pad) + clamp(40px,6vh,64px)) var(--pad) calc(var(--pad) + 20px);
}

/* 左の縦組み。.plate の中で縁に寄せるだけ（画面には固定しない）。
   スクロールすれば、額や下の帯と同じように普通に流れて消えていく。
   行ごとに90度倒す。値が左、項目名がその右。 */
.plate__meta{
  position:absolute;
  left:var(--pad);
  top:44%;
  transform:translateY(-50%);
  z-index:5;
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:clamp(28px,4vw,46px);
}
.plate__row{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
}
.plate__val{
  margin:0;
  font-family:var(--grot); font-style:italic; font-weight:400;
  font-size:clamp(1rem,1.7vw,1.3rem);
  line-height:1; letter-spacing:.02em; color:var(--ink);
}
/* Camera・Year も Title と同じ書体・同じ大きさで立てる。項目ごとに
   字面が違って見えるのは字数のせいであって、意図して差を付けているわけではない */
.plate__val--sub{ color:var(--ink); }
.plate__val--num{ color:var(--ink); }
.plate__key{
  color:var(--faint);
  letter-spacing:.26em;
}

/* 真ん中の額。左右が固定になったぶん、この列だけで画面の中央に据える。 */
.plate__stage{
  width:min(100%, 60vw);
  height:min(76svh,860px);
  margin-inline:auto;
}

/* 右の帯。.plate の中で縁に寄せて、フィルムリールのように縦へ流れる。
   画面には固定しない（下の帯やそのあとの本文まで、これが乗ったまま
   ついてくるのを防ぐため）。中央の枠（plate__frame）だけが止まっていて、
   いま見ている1枚がそこに合う。 */
.plate__strip{
  position:absolute;
  right:var(--pad);
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center;
  gap:14px;
}
.plate__strip-viewport{
  position:relative;
  width:56px;
  height:300px;
  overflow:hidden;
}
/* いま見ている1枚がここに合う。動かない枠だけを置く */
.plate__frame{
  position:absolute; top:50%; left:50%;
  width:56px; height:56px;
  transform:translate(-50%,-50%);
  border:1px solid var(--ink);
  background:rgba(255,255,255,.16);
  pointer-events:none; z-index:2;
  box-sizing:border-box;
}
/* 上下は紙の色に溶けて消える */
.plate__strip-viewport::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    var(--paper) 0%, transparent 28%, transparent 72%, var(--paper) 100%);
  z-index:3; pointer-events:none;
}
.plate__thumbs{
  display:flex; flex-direction:column; gap:7px;
  padding:122px 0; /* (300 - 56) / 2 ぶんの余白で、1枚目が中央の枠に合うようにする */
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}
.plate__thumb{
  display:block; width:56px; height:56px; flex-shrink:0;
  padding:0; margin:0;
  border:0; background:none; cursor:pointer;
  opacity:.4; filter:grayscale(1);
  transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.plate__thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.plate__thumb:hover{ opacity:.72; }
.plate__thumb.is-active{ opacity:1; filter:grayscale(0); }
.plate__count{
  color:var(--faint); text-align:center;
  font-variant-numeric:tabular-nums;
}
.plate__slash{ display:inline-block; margin-inline:.24em; opacity:.6; }

/* 要約は面の外、帯との間にひと息置く */
.plate__desc{
  max-width:34rem;
  margin:0 auto clamp(30px,5vw,54px);
  padding-inline:var(--pad);
  text-align:center;
  font-size:14px; line-height:2; color:var(--mute);
}

@media (max-width:880px){
  /* 縦に積み替える。固定していた左右も流れに戻し、縦組みの見出しは横に戻す */
  .plate{
    flex-direction:column;
    gap:clamp(20px,4vw,32px);
    padding-top:calc(var(--pad) + 52px);
  }
  .plate__meta{
    position:static; transform:none; left:auto; top:auto; z-index:auto;
    order:-1;
    flex-direction:row; flex-wrap:wrap; justify-content:center;
    align-items:baseline;
    gap:6px clamp(16px,4vw,28px);
    text-align:center;
  }
  .plate__row{
    writing-mode:horizontal-tb; transform:none;
    flex-direction:row; align-items:baseline; gap:9px;
  }
  .plate__stage{ width:100%; height:52svh; }
  .plate__strip{
    position:static; transform:none; right:auto; top:auto; z-index:auto;
    flex-direction:row; align-items:center; justify-content:center;
    width:100%; gap:14px;
  }
  .plate__strip-viewport{
    width:100%; height:auto; overflow:visible;
  }
  .plate__strip-viewport::before{ display:none; }
  .plate__frame{ display:none; }
  .plate__thumbs{
    flex-direction:row; flex-wrap:nowrap; justify-content:center;
    width:100%; padding:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
    transform:none !important;
  }
  .plate__thumb{ width:clamp(40px,13vw,60px); height:clamp(40px,13vw,60px); }
}
/* ---------------- 書体 見本帳 ----------------
   1書体につき一枚の版。ここは本文ではなく標本なので、読み幅には収めない。

   主役は「打ち込める字」で、名前は小さく上に置くだけ。手すりは標本を
   見ているあいだ画面の下に貼り付き、太さ・大きさ・紙の色・揃えを
   その場で動かせる。

   紙の色は足さない。テーマが元から持っている三色（紙・墨・青）だけを
   回す。罫は currentColor から作るので、どの紙でも自動で追いてくる。 */

.spec{
  --sheet:var(--paper);
  --sheet-ink:var(--ink);
  --rule:color-mix(in srgb, currentColor 15%, transparent);
  background:var(--sheet); color:var(--sheet-ink);
  padding-bottom:clamp(60px,9vw,140px);
  transition:background .6s var(--ease), color .6s var(--ease);
  /* 版は必ず版面いっぱいに張る。親がグリッドやフレックスだったときに
     中身の幅まで縮んでしまうのを防ぐ。 */
  display:block; box-sizing:border-box;
  width:100%; max-width:100%; min-width:0;
  justify-self:stretch; align-self:stretch;
}
/* 中の段も同じ。縮む余地を残さない。 */
.spec > *,
.spec__stage > .shell,
.spec__bar > .shell{ box-sizing:border-box; width:100%; min-width:0; }
.spec[data-paper="ink"]{ --sheet:var(--ink);        --sheet-ink:var(--paper); }
.spec[data-paper="blue"]{ --sheet:var(--paper-blue); --sheet-ink:var(--paper); }

.spec .mono{ color:inherit; }
.spec__key{ opacity:.5; }
.spec__val{ opacity:.9; }
.spec__section{
  opacity:.5; padding:clamp(30px,4vw,54px) 0 14px;
  border-bottom:1px solid var(--rule);
}

/* ---- 標本 ---- */
.spec__stage{
  min-height:78svh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,7vw,110px) 0 clamp(20px,3vw,40px);
}
.spec__label{
  text-align:center; margin:0 0 clamp(22px,4vw,54px); font-weight:500;
}
.spec__type{
  font-size:150px; line-height:1.24; letter-spacing:var(--track,.06em);
  outline:0; overflow-wrap:anywhere; word-break:break-word; text-align:left;
  min-height:1.05em; max-width:100%;
}
.spec__type:focus-visible{ outline:1px solid currentColor; outline-offset:16px; }

/* ---- 手すり。画面の下に貼り付く ---- */
.spec__bar{
  position:sticky; bottom:0; z-index:3;
  background:var(--sheet);
  border-top:1px solid var(--rule);
  transition:background .6s var(--ease);
}
.spec__bar-in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px clamp(20px,3vw,52px);
  padding-block:clamp(12px,1.6vw,20px);
}
.spec__ctrl{ display:flex; align-items:center; gap:12px; min-width:0; }
.spec__ctrl--size{ flex:1 1 200px; }

.spec__weights,
.spec__papers{ display:flex; flex-wrap:wrap; gap:10px 16px; }
.spec__w,
.spec__paper{
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  color:inherit; opacity:.4; transition:opacity .3s var(--ease);
}
.spec__w:hover,
.spec__paper:hover{ opacity:.7; }
.spec__w.is-active,
.spec__paper.is-active{ opacity:1; }
.spec__w.is-active::before,
.spec__paper.is-active::before{ content:"／"; color:var(--mark); margin-right:.3em; }

.spec__ctrl--size .spec__val{ min-width:6ch; text-align:right; }
.spec__ctrl--size input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1;
  min-width:80px; height:1px; background:var(--rule); cursor:ew-resize;
}
.spec__ctrl--size input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:9px; height:9px; border-radius:50%; background:currentColor;
}
.spec__ctrl--size input[type=range]::-moz-range-thumb{
  width:9px; height:9px; border:0; border-radius:50%; background:currentColor;
}

/* 揃えの札。三本の罫で左・中・右を表す */
.spec__aligns{ display:flex; gap:6px; }
.spec__align{
  border:1px solid transparent; background:none; cursor:pointer;
  padding:6px; display:flex; flex-direction:column; gap:3px; width:26px;
  opacity:.4; transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.spec__align i{ display:block; height:1px; background:currentColor; width:100%; }
.spec__align i:nth-child(2){ width:60%; }
.spec__align[data-align="center"] i:nth-child(2){ margin-inline:auto; }
.spec__align[data-align="right"] i:nth-child(2){ margin-left:auto; }
.spec__align:hover{ opacity:.7; }
.spec__align.is-active{ opacity:1; border-color:var(--rule); }

/* ---- 升目の一覧表。升の中身は、その升自身の座標 ---- */
.spec__matrix{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--rule);
}
.spec__cell{
  min-height:clamp(200px,24vw,340px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(18px,2.4vw,32px);
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.spec__cell:last-child{ border-right:0; }
.spec__cell-text{
  margin:0 0 auto; text-align:center; padding-top:1.2em;
  font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.1;
  letter-spacing:var(--track,.06em);
}
.spec__cell-key{ margin:0; text-align:right; opacity:.45; }

/* ---- 流れる帯 ---- */
.spec__band{ overflow:hidden; padding:clamp(30px,5vw,70px) 0; }
.spec__band-track{
  display:flex; width:max-content;
  animation:specBand 26s linear infinite;
}
.spec__band-text{
  font-size:clamp(3rem,9vw,8rem); line-height:1.1;
  letter-spacing:var(--track,.06em); white-space:nowrap;
}
@keyframes specBand{ to{ transform:translateX(-50%); } }
.spec__band:hover .spec__band-track{ animation-play-state:paused; }

/* ---- 本文の見本 ---- */
.spec__sample-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,4vw,64px); padding-top:clamp(24px,3vw,44px);
}
.spec__sample-text{
  margin:8px 0 0; line-height:1.75; letter-spacing:calc(var(--track,.06em) * .5);
}

/* ---- 諸元 ---- */
.spec__specs{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3.2vw,64px);
  padding:clamp(30px,4vw,54px) 0 0;
}
.spec__note{ margin-top:22px; max-width:38rem; opacity:.7; }

/* ---- 字母表 ---- */
.spec__glyphs{
  display:grid; grid-template-columns:clamp(160px,20vw,240px) 1fr clamp(180px,22vw,300px);
  gap:clamp(20px,3vw,48px); align-items:start;
  padding-top:clamp(24px,3vw,44px);
}
.spec__count{ margin:0 0 18px; display:flex; align-items:baseline; gap:10px; }
.spec__count-n{ font-size:clamp(1.8rem,3.4vw,3rem); line-height:1; }
.spec__count-k{ opacity:.5; }
.spec__styles{ list-style:none; margin:26px 0 0; padding:0; opacity:.5; line-height:1.8; }

.spec__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(36px,3.6vw,54px),1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
.spec__glyph{
  aspect-ratio:1; border:0; background:none; cursor:pointer;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font:inherit; font-size:clamp(15px,1.7vw,21px); color:inherit;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.spec__glyph:hover,
.spec__glyph.is-active{ background:var(--sheet-ink); color:var(--sheet); }

.spec__lens{ position:sticky; top:clamp(80px,12vh,140px); }
.spec__lens-char{
  font-size:clamp(4.5rem,11vw,9rem); line-height:1; text-align:center;
  border:1px solid var(--rule); padding:clamp(14px,2vw,28px) 0;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(130px,16vw,220px);
}
.spec__lens-code{ margin-top:12px; text-align:center; opacity:.5; }

@media (max-width:1080px){
  .spec__glyphs{ grid-template-columns:1fr clamp(150px,20vw,240px); }
  .spec__counts{ grid-column:1 / -1; display:flex; gap:clamp(20px,4vw,54px); align-items:baseline; flex-wrap:wrap; }
  .spec__styles{ margin-top:0; }
}
@media (max-width:880px){
  .spec__stage{ min-height:62svh; }
  .spec__type{ font-size:64px; }
  .spec__bar-in{ gap:10px 20px; }
  .spec__ctrl--size{ flex-basis:100%; }
  .spec__sample-grid{ grid-template-columns:1fr; }
  .spec__glyphs{ grid-template-columns:1fr; }
  .spec__lens{ position:static; }
  .spec__lens-char{ min-height:0; font-size:clamp(4rem,22vw,7rem); }
  .spec__cell{ min-height:clamp(160px,40vw,240px); }
}

@media (prefers-reduced-motion:reduce){
  .spec, .spec__bar{ transition:none; }
  .spec__band-track{ animation:none; }
  .spec__glyph{ transition:none; }
}