/* 表題の明朝体は同梱し、外部のフォント配信に依存しない。 */
@font-face {
  font-family: 'Kisui Serif'; src: url('/assets/fonts/kisui-serif.ttf') format('truetype');
  font-weight: 200; font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #505c5c; --quiet: #66716f; --water: #d7dddb; --line: #7c888380;
  --submerged-ink: #53645e;
  --serif: 'Kisui Serif', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  color: var(--ink); background: var(--water);
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, a:focus-visible, section:focus-visible { outline: 1px solid var(--ink); outline-offset: 8px; }
::selection { background: #a8c1ba; color: #253d38; }
[hidden] { display: none !important; }
.installation { position: relative; min-height: 620px; height: 100svh; isolation: isolate; overflow: clip; }
/* 工房名は下線を添えず、左上の控えめな大きさと位置を維持する。 */
.signature { position: absolute; left: 2.65%; top: 3.4%; margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 200; letter-spacing: .14em; }
/* 描画が完成するまでは文字を残し、水面と二重にならない時点で表示を切り替える。 */
.installation[data-submerged-ready] [data-submerged] { color: transparent; }
.signature [data-submerged] { display: inline-block; }
/* ウェブの入口の文字端に作品を揃え、入口から本文へ視線が自然に続く位置に置く。 */
.work-panel { position: absolute; left: calc(24% + 10px); top: 36%; width: min(380px, 32vw); padding: 16px 0; }
/* 開いた瞬間だけ本文を軽く浮かび上がらせ、閉じる操作や内容の切り替えは待たせない。 */
.work-panel:not([hidden]) { animation: panel-appear .26s var(--ease); }
@keyframes panel-appear {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.work-panel h2 { margin: 0 0 26px; font-size: 23px; font-weight: 400; letter-spacing: .18em; }
.work-panel p { margin: 0 0 12px; font-size: 14px; line-height: 2.2; letter-spacing: .065em; text-wrap: pretty; }
/* 制作物は水面の余白に文字で並べ、名前と説明の全体を押せるリンクにする。 */
.work-list { list-style: none; margin: 0; padding: 0; }
.work-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.work-name { font-size: 20px; line-height: 1.4; letter-spacing: .06em; }
/* 矢印は作品名に添え、説明には行全体を使って小さい画面で一文字だけ残る折り返しを防ぐ。 */
.work-description { grid-column: 1 / -1; font-size: 12px; line-height: 1.8; letter-spacing: .04em; text-wrap: pretty; }
.work-arrow { grid-column: 2; grid-row: 1; align-self: center; font-size: 18px; transition: transform .5s var(--ease); }
.work-link:hover .work-arrow, .work-link:focus-visible .work-arrow { transform: translate(3px, -3px); }
/* 小さな文字の外にも指で押せる領域を確保する。 */
.close-panel { min-height: 48px; padding: 12px 0; margin-top: 18px; font-size: 12px; letter-spacing: .1em; display: inline-flex; gap: 22px; align-items: center; }
.close-panel span { display: inline-block; width: 20px; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); }
.close-panel:hover span { transform: scaleX(1.6); }
.no-script { position: absolute; left: 14%; top: 54%; max-width: 28em; padding-right: 24px; font-size: 14px; line-height: 2; }
/* 説明を読む間は水面を淡くし、文字の後ろに落ち着いた余白を保つ。 */
html[data-open] .water-surface { opacity: .64; }