:root{
  --paper:#222222;
  --cell:#303030;
  --olive:#3F4526;
  --ink:#FAF8F3;
  --ink-soft:#C9C6BE;
  --rule:rgba(242,240,234,.22);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  --edge:8px;
  --head:60px;
  --gap:40px;
  --lead:18px;
  --font:"Inter","Zen Kaku Gothic New",system-ui,sans-serif;
  --weight:500;
  --link:#8AB4F8;
}
*{box-sizing:border-box}

/* ブラウザ標準の「前のページが溶けて切り替わる」演出（View Transitions）は、
   「画像が揃うまで隠す」仕組みと二重にかかり、着地直後に一瞬真っ暗になる
   不具合の原因になっていたため使わない。ページ着地後のふわっとした表示は
   下の表示待ちだけで行う */

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font);
  font-weight:var(--weight); font-size:14px; line-height:1.9;
  letter-spacing:.08em;
  -webkit-font-smoothing:antialiased;
}
.frame{background:var(--paper); padding:calc(var(--head) + var(--lead)) var(--edge) var(--gap)}
img{display:block; width:100%; height:auto}
/* 画像の長押し保存を抑える。スクロール・拡大・通常のタップは妨げない。 */
.frame img, .viewer img, a.image-link{-webkit-touch-callout:none}
.frame img, .viewer img{-webkit-user-select:none; user-select:none}
a{color:var(--ink-soft); text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:#4E4E4E; color:var(--ink)}
:focus-visible{outline:1px solid var(--ink-soft); outline-offset:3px}

.masthead{position:sticky; top:0; z-index:30; background:var(--paper);
     display:flex; align-items:center; gap:var(--s3);
     padding:var(--s2) var(--edge); max-width:1920px; margin:0 auto;
     margin-top:calc(-1 * (var(--head) + var(--lead)));
     margin-left:calc(-1 * var(--edge)); margin-right:calc(-1 * var(--edge))}
/* about・contactは画面いっぱいに中央寄せする特殊レイアウトのため、
   stickyだとヘッダーが消えてしまう。ここだけ元のfixedに戻す */
body.sub .masthead{position:fixed; left:0; right:0; margin:0 auto}
.inline{display:none; font-size:12px; letter-spacing:.18em}
.name{text-decoration:none; font-size:15px; letter-spacing:.16em; white-space:nowrap; color:var(--ink);
     background:none; border:0; padding:0; margin:0; font:inherit; font-size:15px;
     -webkit-appearance:none; appearance:none; cursor:pointer; text-align:left}

.nav{position:fixed; inset:0; background:var(--paper); z-index:20; display:none;
     flex-direction:column; justify-content:center; align-items:flex-end; text-align:right;
     gap:var(--s3); padding:var(--s5) var(--edge)}
.nav.open{display:flex}
.inline{display:none; font-size:13px; letter-spacing:.18em}
.inline a{color:var(--ink-soft)}
.inline a:hover{color:var(--ink)}
.nav a{font-family:var(--font); font-size:15px; letter-spacing:.18em; color:var(--ink-soft); width:max-content}

.nav a:hover,.nav a:focus-visible{color:var(--ink)}
.nav .shut{display:none}



h2{font-size:11px; font-weight:400; letter-spacing:.24em; color:var(--ink-soft);
   margin:0 0 var(--s3); padding:0; border:0}

section{padding-bottom:var(--gap)}

.grid{columns:2; column-gap:var(--s1)}
.grid figure{break-inside:avoid; margin:0 0 var(--s1)}
.grid button{all:unset; display:block; cursor:zoom-in; width:100%}
.grid figcaption{font-size:11px; color:var(--ink-soft); padding:6px 2px 2px; letter-spacing:.1em}

/* 《》などの記号まわりの余白を詰める（周りのletter-spacingより字間を狭める） */
.t{letter-spacing:-.03em}

/* ホームの写真：枚数が少ないと段組みが1列だけ余って歪む上、
   縦横比がバラバラだと行の下端がガタつくため、正方形に揃えたタイルにする */
#photo .grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
     align-items:start; gap:var(--s1); columns:unset}
#photo .grid figure{break-inside:auto; margin:0}
#photo .grid button, #photo .grid a{aspect-ratio:1/1; overflow:hidden; display:block}
#photo .grid img{width:100%; height:100%; object-fit:cover}
@media (min-width:640px){ #photo .grid{grid-template-columns:repeat(auto-fit, minmax(200px,1fr))} }
@media (min-width:1000px){ #photo .grid{grid-template-columns:repeat(auto-fit, minmax(230px,1fr))} }

/* ホームのdesign：縦横比が違う画像が並んでも高さを揃える（切り取らず縮小）。
   columnsの段組みだと高さ違いの2枚が重なることがあるのでflexにする */
#design .grid{display:flex; flex-wrap:nowrap; align-items:flex-start; gap:var(--s1); columns:unset;
     overflow-x:auto; scroll-behavior:smooth; overscroll-behavior-x:contain;
     scrollbar-width:none; padding-bottom:2px}
#design .grid::-webkit-scrollbar{display:none}
#design .grid figure{position:relative; break-inside:auto; margin:0 0 28px; flex:0 0 auto; width:fit-content; max-width:none}
#design .grid img{width:auto; height:clamp(230px, 27vw, 340px); margin:0 auto}
/* キャプションは画像の下に絶対配置で浮かせる：文字幅が画像より広くても
   レイアウト上の幅（＝サムネ同士の間隔）には影響させないため */
#design .grid figcaption{position:absolute; left:50%; top:100%; transform:translateX(-50%);
     width:max-content; max-width:none; text-align:center; margin:0; white-space:nowrap}

/* photo.html：小さいマスの一覧ではなく、1枚ずつ縦に大きく並べる場合 */
.grid.stacked{columns:1; max-width:990px; margin:0 auto}
.grid.stacked figure{margin:0 auto var(--s5); width:fit-content; max-width:100%}
.grid.stacked img{display:block; width:auto; height:auto; max-width:100%;
     max-height:calc(100svh - var(--head) - 56px)}
.grid.stacked figure.land{width:100%}
.grid.stacked figure.land img{width:100%; height:auto; max-height:none}
.grid.stacked figcaption{text-align:right; padding-top:5px; letter-spacing:.16em}
.pager{display:flex; justify-content:center; gap:var(--s3); padding-top:var(--s3);
     font-size:11px; letter-spacing:.16em}
.pager a{color:var(--ink-soft)}
.pager a:hover, .pager a[aria-current=page]{color:var(--ink)}

.track{display:flex; gap:var(--s1); overflow-x:auto; scroll-snap-type:x mandatory;
       scrollbar-width:none; -ms-overflow-style:none}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%; scroll-snap-align:center; margin:0}
.slidewrap{display:flex; align-items:center; gap:var(--s1)}
.slider{flex:1 1 auto; min-width:0; display:flex; overflow-x:auto; gap:var(--s2);
     scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider figure{flex:0 0 100%; scroll-snap-align:center; margin:0}
.slider figcaption{font-size:11px; color:var(--ink-soft); padding:8px 2px 0; text-align:center}
.play{all:unset; display:block; max-width:900px; margin:0 auto; cursor:pointer}
.play img{width:100%}
.ratio{position:relative; padding-top:56.25%; background:var(--cell); max-width:900px; margin:0 auto}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.arrow{flex:0 0 auto; width:28px; height:36px; padding:0; background:none; border:0; cursor:pointer}
.arrow::before{content:""; display:block; width:10px; height:10px; margin:0 auto;
     border-top:1px solid var(--ink); border-right:1px solid var(--ink)}
.arrow.prev::before{transform:rotate(-135deg)}
.arrow.next::before{transform:rotate(45deg)}
.arrow[disabled]{opacity:.25; cursor:default}
.counter{margin:0; padding-top:var(--s2); text-align:center; font-size:11px;
     letter-spacing:.2em; color:var(--ink-soft)}
.film .slot{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
            font-size:11px; color:var(--ink-soft); letter-spacing:.16em; text-align:center; padding:var(--s2)}
.film figcaption{font-size:11px; color:var(--ink-soft); padding:6px 2px 2px}

.poem{color:#EDEAE4; padding-bottom:var(--s5)}
.bilingual{display:grid; grid-template-columns:1fr; gap:var(--s3); max-width:60em}
.bilingual p{margin:0; font-size:12px; line-height:2.2}
.bilingual .en{letter-spacing:.03em}
.bilingual .ja{letter-spacing:.08em}
.bilingual .ko{font-family:"Noto Sans KR",sans-serif; font-weight:500; letter-spacing:.02em}
@media (min-width:560px){
  .bilingual{grid-template-columns:repeat(3,1fr); gap:var(--s3)}
  .bilingual p{font-size:11px}
}
@media (min-width:900px){
  .bilingual{gap:var(--s4)}
  .bilingual p{font-size:13px}
  .bilingual .ja{letter-spacing:.1em}
}

/* 訳（韓国語・英語）がまだない詩：日本語だけを1段組みで表示 */
.poemtext{max-width:38em}
.poemtext p{margin:0; font-size:12px; line-height:2.2; letter-spacing:.08em}
.poemrule{display:block; width:23.5em; max-width:100%; height:1px; background:var(--rule); margin:1.6em 0}
@media (min-width:900px){
  .poemtext p{font-size:13px; letter-spacing:.1em}
}



.cv{margin:0; max-width:34em; font-size:12px}
.cv dt{color:var(--ink-soft); letter-spacing:.14em; padding-top:var(--s2)}
.cv dd{margin:0 0 var(--s2); padding-top:var(--s2); border:0}
.cv dd:first-of-type, .cv dt:first-of-type{padding-top:0}

.bio{max-width:26em; margin:0 0 var(--s4); font-size:13px; line-height:2.1}
.bio .jp{display:block; font-size:15px; letter-spacing:.16em; margin-bottom:var(--s2)}
h3{font-size:11px; font-weight:400; letter-spacing:.2em; color:var(--ink-soft); margin:var(--s4) 0 var(--s2)}

     z-index:20; display:none; overflow-y:auto; padding:var(--s4) var(--edge) var(--s5)}
       color:var(--ink-soft); font-size:12px; letter-spacing:.16em; cursor:pointer; padding:0}
.jpname{display:block; font-size:15px; letter-spacing:.2em; color:var(--ink); margin-bottom:var(--s2)}
.cvwrap{display:inline-block; text-align:left}
.cvwrap h3{margin-top:var(--s5)}
.cvline{margin:0 0 3px; font-size:12px}
.cvline em{display:inline-block; width:3.4em}
.cvline em{font-style:normal; color:var(--ink-soft)}
.contact p{margin:0 0 var(--s2); max-width:26em}
.contact .meta{font-size:12px; color:var(--ink-soft); letter-spacing:.16em}
.contact #mail a{color:var(--link); text-decoration:underline; text-underline-offset:4px}
.contact #mail a:hover{color:var(--link)}
.ig{display:inline-block; color:var(--ink-soft); line-height:0}
.ig:hover{color:var(--ink)}
.ig svg{display:block}

.viewer{position:fixed; inset:0; background:rgba(18,18,18,.97); display:flex;
        opacity:0; visibility:hidden; pointer-events:none;
        transition:opacity .38s ease, visibility .38s ease;
        align-items:center; justify-content:center; flex-direction:column; gap:var(--s1);
        padding:var(--s1); z-index:10}
.viewer.open{opacity:1; visibility:visible; pointer-events:auto}
.viewer img{max-width:100%; max-height:calc(100dvh - 72px); width:auto; object-fit:contain;
        transform:scale(.97); transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.viewer.open img{transform:scale(1)}
.viewer p{margin:0; font-size:11px; color:#E4E0D5; letter-spacing:.14em; text-align:center}
.viewer .close{position:absolute; top:var(--s2); right:var(--s3); font-size:12px;
               color:#E4E0D5; background:none; border:0; cursor:pointer; letter-spacing:.16em}

@media (min-width:760px){
  :root{--head:72px; --gap:56px; --lead:26px}
    .inline{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s3); margin-left:auto}
}
@media (min-width:560px){
  :root{--edge:12px}
  .grid{columns:3}
  .cv dt{float:left; width:6em; clear:left}
  .cv dd{margin-left:6em}
}
@media (min-width:900px){
  :root{--edge:20px}
  .frame{max-width:1920px; margin:0 auto}
  .grid{columns:4}
  .track{padding:0 15%}
  .slide{flex:0 0 70%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

.page{max-width:34em; margin:0 auto; text-align:center}
.page .bio{max-width:none; margin:0 auto var(--s4)}
@media (min-width:760px){
  /* PCでは横幅に余裕があるので、CVの行が不要に折り返さない程度に広げる */
  .page{max-width:56em}
}

.burger{display:flex; align-items:center; justify-content:center; width:24px; height:24px;
     margin-left:auto; padding:0; background:none; border:0; cursor:pointer; color:var(--ink-soft)}
.burger::before{content:""; display:block; width:4px; height:4px; border-radius:50%;
     background:currentColor; box-shadow:-8px 0 0 currentColor, 8px 0 0 currentColor}
.burger:hover{color:var(--ink)}
@media (min-width:760px){ .burger{display:none} }

.en-cv{display:block; margin-top:calc(var(--s5) * 1.6)}
.cvwrap[lang=en] .cvline{letter-spacing:.02em}
.cvline{line-height:2}
.cvline em{vertical-align:top}

section[id], [id]{scroll-margin-top:calc(var(--head) + var(--s3))}

.burger.open{width:auto; color:var(--ink)}
.burger.open::before{display:none}
.burger.open::after{content:"close"; font-size:11px; letter-spacing:.16em}
.nav.open ~ *{}
@media (min-width:760px){ .burger.open{display:flex} }

body.sub .frame{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh}
body.sub .page{flex:1 0 auto; display:flex; flex-direction:column; justify-content:center}
body.sub .meta{margin-top:var(--s5)}
.inline a[aria-current], .nav a[aria-current]{color:var(--ink)}
.inline a[aria-current]{border-bottom:2px solid var(--ink); padding-bottom:4px; font-weight:600}

.contact p{margin:0 0 6px; line-height:1.7}
.contact .meta:last-of-type{margin-top:var(--s2); margin-bottom:0}

.inline .ig, .nav .ig{display:inline-flex; align-items:center; border:0; padding:0}
.nav .ig svg{width:20px; height:20px}

.grid img, .play img{transition:filter .7s ease, opacity .45s ease}
.grid button:hover img, .grid button:focus-visible img,
.grid a:hover img, .grid a:focus-visible img,
.play:hover img, .play:focus-visible img{filter:brightness(1.08)}
.inline a, .nav a, .name, .ig, .arrow{transition:color .3s ease, opacity .3s ease}
@media (hover:none){
  .grid button:active img, .grid a:active img, .play:active img, .work:active img,
  .squares .sq:active img, .vitem:active img{filter:brightness(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .grid img, .play img, .inline a, .nav a{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .viewer, .viewer img{transition:none}
  .viewer img{transform:none}
}


.viewer{padding:0; gap:0}
.viewer img{width:calc(100vw - 48px); height:calc(100dvh - 120px); max-width:none; max-height:none; object-fit:contain}
.viewer p{position:absolute; left:0; right:0; bottom:14px; padding:0 var(--s3);
     text-shadow:0 1px 6px rgba(0,0,0,.8)}
.viewer p:empty{display:none}
.viewer .close{top:12px; right:14px; text-shadow:0 1px 6px rgba(0,0,0,.8); z-index:2}

.viewer{z-index:50}

@media (max-width:560px){
  .viewer img{width:calc(100vw - 32px); height:calc(100dvh - 110px)}
}
@media (min-width:900px){
  .viewer img{width:calc(100vw - 220px); height:calc(100dvh - 150px)}
}

.js .reveal{opacity:0; transform:translateY(16px);
     transition:opacity 1s cubic-bezier(.2,.6,.3,1), transform 1s cubic-bezier(.2,.6,.3,1)}
.js .reveal.in{opacity:1; transform:none}
/* 最初の描画はHTML内でも隠す。表示許可はページ全体で一度だけ。 */
html{background:var(--paper)}
.js body:not(.ready) > :not(.page-load-status){visibility:hidden; opacity:0}
/* 大きいページ全体のopacityアニメーションは、復元した写真の描画と重ねない。 */
.js body > .frame{transition:none}
.js body.ready > .frame{visibility:visible; opacity:1}
/* 写真は完成状態で描き、画面サイズのカバーだけを薄くして一緒に見せる。
   待機中・pagehide時は即座に覆い、表示許可が出た時だけフェードする。 */
.js body::after{content:""; position:fixed; inset:0; z-index:99;
     background:var(--paper); pointer-events:none; opacity:1; visibility:visible;
     transition:none}
.js body.ready::after{opacity:0; visibility:hidden;
     transition:opacity 1.5s cubic-bezier(.32,.08,.72,.55), visibility 0s linear 1.5s}
.js body.ready.menu-leaving::after{opacity:1; visibility:visible; pointer-events:auto;
     transition:opacity .8s ease}
@media (prefers-reduced-motion:reduce){
  .js body.ready::after, .js body.ready.menu-leaving::after{transition:none}
}
.page-load-status{position:fixed; inset:0; z-index:100; display:flex;
     flex-direction:column; align-items:center; justify-content:center;
     padding:24px; background:var(--paper); color:var(--ink-soft); text-align:center}
.page-load-status[hidden]{display:none}
.page-load-status button{font:inherit; color:inherit; background:transparent;
     border:1px solid var(--rule); padding:8px 16px; cursor:pointer}
/* 動画も、読み込めるまでは背景色のまま待たせて、読み込めたらふわっと表示する */
.js .detailfilm .ratio iframe{opacity:0; transition:opacity .6s ease}
.js .detailfilm .ratio iframe.loaded{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
}

/* ---- カテゴリページ：大きく1枚＋右下にキャプション ---- */
.works{padding-bottom:var(--gap)}
.work{display:block; margin:0 auto var(--s5); border:0; max-width:990px}
.snap .work{margin:0 auto}
.work figure{margin:0 auto; width:fit-content; max-width:100%}
.work img{display:block; width:auto; height:auto; max-width:100%;
     max-height:calc(100svh - var(--head) - 56px); transition:filter .7s ease}
/* 横位置の作品は幅で揃え、縦位置は今まで通り高さで揃える */
.work figure.land{width:100%}
.work figure.land img, .snap .work figure.land img{width:100%; height:auto; max-height:none}
.work img:hover, .work:focus-visible img{filter:brightness(1.08)}
/* サムネイルの代わりに、数秒ループの無音プレビュー動画を出す場合。
   figureのwidth:fit-contentのままだと基準の幅が無いので、専用クラスで幅を戻し、
   .ratio（詳細ページの動画埋め込みと同じ仕組み）をこの枠いっぱいに広げて使う */
.work figure.workfilm{width:auto; max-width:100%}
.work .ratio{max-width:none; margin:0; pointer-events:none}
.work:hover .ratio, .work:focus-visible .ratio{filter:brightness(1.08)}
.work figcaption{display:flex; justify-content:flex-end; align-items:baseline; gap:var(--s2);
     padding-top:5px; font-size:11px; letter-spacing:.12em; text-align:right}
.work .t{color:var(--ink)}
.work .m{color:var(--ink-soft)}
/* 画面が狭い時は、タイトルが変な位置で折り返さないよう年だけ残して資材名は隠す */
@media (max-width:560px){
  .work .m .mat{display:none}
}


/* ---- design：同じ正方形で並べる ---- */
.squares{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s1)}
.squares .sq{display:block; aspect-ratio:1; overflow:hidden; border:0}
.squares img{width:100%; height:100%; object-fit:cover; transition:filter .7s ease}
.squares .sq:hover img, .squares .sq:focus-visible img{filter:brightness(1.08)}
@media (min-width:560px){ .squares{grid-template-columns:repeat(5,1fr)} }
@media (min-width:900px){ .squares{grid-template-columns:repeat(6,1fr)} }

/* ---- 作品詳細 ---- */
.detail{max-width:990px; margin:0 auto}
.detailhead{max-width:34em; margin:0 auto var(--s5); text-align:center}
/* 写真詳細は、年号・thanks・説明文の最後から写真までの距離を揃える。 */
.detailhead.compact{margin-bottom:32px}
.detailhead.compact .meta:last-child{margin-bottom:0}
.detailhead h1{font-size:18px; font-weight:var(--weight); letter-spacing:.14em; margin:0 0 8px}
.detailhead h1 a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:color-mix(in srgb, var(--ink-soft) 45%, transparent)}
.detailhead h1 a:hover, .detailhead h1 a:focus-visible{color:var(--ink); text-decoration-color:var(--ink-soft)}
.detailhead .meta{font-size:11px; letter-spacing:.16em; color:var(--ink-soft); margin:0 0 var(--s3)}
.detailhead .lead{font-size:12px; line-height:2.1; margin:0}
.detailhead .lead + .lead{margin-top:14px}
.detailhead .lead.en{color:var(--ink-soft)}
.detailhead .lead.credit{font-size:11px; color:var(--ink-soft); letter-spacing:.04em}
.detail > .credit{font-size:11px; color:var(--ink-soft); letter-spacing:.04em; text-align:left;
     margin:var(--s3) auto 0; max-width:990px}
.detail figure{margin:0 0 var(--s2)}
.detail img{display:block; width:auto; height:auto; max-width:100%;
     max-height:calc(100svh - var(--head) - 56px); margin:0 auto}
.detailfilm .play{max-width:none}
/* 動画の枠（.ratio）は中身の実寸が無いので、figureの幅を親いっぱいに戻す
   （.detail figure の width:fit-content のままだと基準の幅が無く、高さ0になって表示されない） */
.detail .detailfilm{width:auto}
.detail .detailfilm .ratio{max-width:100%; width:100%}
.back{padding-top:var(--s4); font-size:11px; letter-spacing:.16em; text-align:right}
.back.fixed{position:fixed; padding-top:0; bottom:var(--s2); right:var(--s3);
     background:var(--paper); padding:6px 10px; z-index:20}
@media (max-width:560px){ .back.fixed{right:var(--s1)} }
.back a{color:var(--ink-soft)}
.back a:hover{color:var(--ink)}

/* ---- ホーム：各カテゴリの「すべて見る」 ---- */
.more{padding-top:var(--s3); font-size:11px; letter-spacing:.16em; text-align:right}
.more a{color:var(--ink-soft)}
.more a:hover{color:var(--ink)}

/* ---- words ページ ---- */
.wordswrap{display:grid; grid-template-columns:1fr; gap:var(--s4)}
/* スマホ：目次は横1列・横スクロール（詩の本文がすぐ見えるように）。
   区切りは縦線で。1つずつのタイトルがつながって見えないようにする */
.toc{display:flex; flex-direction:row; align-items:center; gap:0; order:-1;
     overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px var(--s2);
     scrollbar-width:none}
/* 選択の枠線（キーボード操作用）が四角く目立って隙間があるように見えるため、
   tocのボタンは他の見た目（線・色）だけで選択状態を示す */
.toc button:focus-visible{outline:none}
.toc::-webkit-scrollbar{display:none}
.toc button{display:flex; align-items:center; flex:0 0 auto; position:relative;
     white-space:nowrap; text-align:left; padding:0 14px;
     background:none; border:0; cursor:pointer; font:inherit;
     font-size:12px; letter-spacing:.16em; color:var(--ink-soft)}
.toc button:first-child{padding-left:0}
.toc button:not(:first-child)::after{content:""; position:absolute; left:0; top:3px; bottom:3px;
     width:1px; background:var(--ink-soft); opacity:.35}
.toc button:hover{color:var(--ink)}
.toc button[aria-current=true]{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.poemitem{display:none}
.poemitem.on{display:block; animation:poemfade 1.1s ease}
@keyframes poemfade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .poemitem.on{animation:none} }
.poemtitle{font-size:13px; font-weight:var(--weight); letter-spacing:.2em;
     color:var(--ink-soft); margin:0 0 4px}
.poemyear{font-size:11px; letter-spacing:.14em; color:var(--ink-soft); margin:0 0 var(--s3)}
@media (max-width:560px){
  .detailhead h1{font-size:15px}
}
@media (min-width:760px){
  /* 左の本文と右の目次を独立させ、端に達しても他方へスクロールを渡さない。 */
  body.words{overflow:hidden}
  body.words .frame{height:100svh; display:flex; flex-direction:column; padding-bottom:var(--s2)}
  body.words .masthead{flex:0 0 auto}
  body.words .wordspage{flex:1 1 auto; min-height:0; padding-top:var(--s3); padding-bottom:var(--s3)}
  body.words .frame > .meta{flex:0 0 auto; margin:0}
  .wordswrap{height:100%; grid-template-columns:minmax(0,1fr) clamp(180px,18vw,240px); gap:0; min-height:0}
  .poems{min-width:0; min-height:0; overflow-y:auto; padding-right:var(--s5); padding-bottom:var(--s3)}
  .toc{order:0; flex-direction:column; align-items:flex-end; gap:12px; text-align:right;
       min-height:0; overflow-y:auto; overflow-x:hidden; padding:0 8px 0 0}
  .poems,.toc{overscroll-behavior-y:contain}
  .poems{scrollbar-width:none}
  .poems::-webkit-scrollbar{display:none}
  .poems.has-more{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent 100%)}
  .toc.has-more{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%)}
  .toc{scrollbar-width:thin; scrollbar-color:var(--rule) transparent}
  .toc::-webkit-scrollbar{display:block; width:3px}
  .toc::-webkit-scrollbar-thumb{background:var(--rule); border-radius:3px}
  .poems:focus-visible{outline:1px solid var(--rule); outline-offset:4px}
  .toc button{flex-direction:row-reverse; gap:10px; padding:4px 0; white-space:normal}
  .toc button:first-child{padding-left:0}
  .toc button:not(:first-child)::after{content:none}
  .toc button::before{content:""; flex:0 0 auto; width:12px; height:1px; background:currentColor;
       opacity:.6; transition:width .35s ease, opacity .35s ease}
  .toc button:hover::before{width:20px; opacity:1}
  .toc button[aria-current=true]::before{width:28px; opacity:1}
  .toc button[aria-current=true]{text-decoration:none}
}

.detail figure{margin:0 auto var(--s2); width:fit-content; max-width:100%}

@media (min-width:760px){
  .works > h2, .wordspage > h2{position:absolute; width:1px; height:1px; overflow:hidden;
       clip-path:inset(50%); white-space:nowrap; margin:0}
}

/* PCではページ名の見出しを隠す（ナビの現在地表示と重複するため）。
   読み上げ用には残す。ハンバーガーが出る幅では表示する。 */
@media (min-width:760px){
  .works > h2, .wordspage > h2{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; margin:0; padding:0}
}

.detail{max-width:990px}

/* video は他より一段小さく（幅だけ揃え、高さは各動画本来の比率のまま） */
.works.video .work{width:100%; max-width:990px; margin-left:auto; margin-right:auto}
.works.video .work figure{width:100%; max-width:990px}
.works.video .work img{width:100%; max-width:990px; height:auto; max-height:none; object-fit:contain}

@media (min-width:760px){

  .detail img{max-height:92vh}
}

html{scroll-padding-top:var(--head)}

/* ---- 1画面に1枚ずつ送る ---- */
.snap .frame{padding-top:calc(var(--head) + var(--lead)); padding-bottom:var(--gap)}
.snap .works{padding-bottom:var(--gap)}
.snap .work{display:block; margin:0 auto var(--s3)}
.snap .work img{max-height:76svh; max-width:100%; width:auto; height:auto; object-fit:fill}
@media (max-width:560px){ .snap .work img{max-height:68svh} }
.snap .works > h2{padding-top:calc(var(--head) + var(--s3))}

.back a{display:inline-block; padding:6px 2px}

/* ハンバーガー内：現在地に目盛りの線（wordsの目次と同じ語彙） */
.nav a{display:flex; align-items:center; flex-direction:row-reverse; gap:10px}
.nav a::before{content:""; flex:0 0 auto; width:12px; height:1px; background:currentColor;
     opacity:.6; transition:width .35s ease, opacity .35s ease}
.nav a:hover::before{width:20px; opacity:1}
.nav a.tap::before, .nav a[aria-current]::before{width:28px; opacity:1}

/* ホームの映像は1本だけ静置。横スクロールはしない */
.homefilm{margin:0; max-width:1000px}
.homefilm .play{max-width:none; margin:0}
.homefilm img{display:block; width:100%; height:auto}
.homefilm figcaption{padding-top:5px; font-size:11px; letter-spacing:.12em;
     color:var(--ink-soft); text-align:right}

/* ホームの映像：サムネの横、高さ中央にタイトルを置く */
.homevideo{display:flex; align-items:center; gap:var(--s4); max-width:none}
.homevideo .play{flex:0 1 1040px; min-width:0; max-width:100%; margin:0}
.homevideo img{display:block; width:100%; height:auto}
.vmeta{flex:0 0 auto; margin-left:auto; text-align:right; font-size:11px; letter-spacing:.12em; color:var(--ink-soft)}
.vmeta .t{margin:0 0 4px; color:var(--ink)}
.vmeta .m{margin:0 0 var(--s3)}
.vmeta .more{margin:0; padding-top:0}
@media (max-width:640px){
  .homevideo{flex-direction:column; align-items:stretch; gap:var(--s1)}
  .homevideo .play{flex:0 0 auto; width:100%}
  .vmeta{align-self:flex-end; margin-left:0}
  .vmeta .m{margin-bottom:var(--s2)}
}

/* ホームの映像：横に送る。縦スクロールは奪わない。
   幅を揃えるのではなく高さを揃える（縦横比が違っても黒帯を出さずに並ぶ） */
.vtrack{display:flex; align-items:flex-start; gap:var(--s1); overflow-x:auto; scroll-behavior:smooth;
     overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:2px}
.vtrack::-webkit-scrollbar{display:none}
.vitem{flex:0 0 auto; display:block; color:var(--ink-soft)}
.vitem .thumb{position:relative; display:block; width:fit-content; overflow:hidden}
.vitem img{display:block; width:auto; height:clamp(190px, 23vw, 290px);
     transition:filter .7s ease}
.vitem:hover img, .vitem:focus-visible img{filter:brightness(1.08)}
.vitem .thumb iframe{position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); border:0; pointer-events:none}
/* サムネイルの代わりに、数秒ループの無音プレビュー動画を出す場合。
   .ratio（詳細ページの動画埋め込みと同じ仕組み）を、高さ基準で使う
   （padding-topではなく、height＋aspect-ratioで幅を自動計算させる） */
.vitem .ratio{padding-top:0; height:clamp(190px, 23vw, 290px); width:auto; max-width:74vw;
     margin:0; pointer-events:none}
.vitem:hover .ratio, .vitem:focus-visible .ratio{filter:brightness(1.08)}
.vitem .cap{display:block; padding-top:6px; font-size:11px; letter-spacing:.12em; line-height:1.8;
     text-align:center}
.vitem .t{color:var(--ink)}
.vitem .m{white-space:nowrap; margin-left:8px}
.vnav{margin:0; padding-top:var(--s2); text-align:right; font-size:11px; letter-spacing:.16em}
.vnav a{color:var(--ink-soft)}
.vnav a:hover{color:var(--ink)}

.more a, .vnav a{white-space:nowrap}

.viewer .step{position:absolute; top:50%; margin-top:-22px; width:44px; height:44px;
     background:none; border:0; cursor:pointer; z-index:3}
.viewer .step::before{content:""; display:block; width:12px; height:12px; margin:0 auto;
     border-top:1px solid #F2EFE9; border-right:1px solid #F2EFE9;
     filter:drop-shadow(0 1px 4px rgba(0,0,0,.8))}
.viewer .step.prev{left:8px} .viewer .step.prev::before{transform:rotate(-135deg)}
.viewer .step.next{right:8px} .viewer .step.next::before{transform:rotate(45deg)}
.viewer .step[disabled]{opacity:.25; cursor:default}
.viewer .frameBox{position:relative; width:calc(100vw - 64px); max-width:1400px; aspect-ratio:16/9}
.viewer .frameBox iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (min-width:900px){ .viewer .step.prev{left:20px} .viewer .step.next{right:20px} }