/* サイノツノ / sAI nO tsunO
   層は4枚（0=水面の線 1=影の数字 2=本文 3=計器）。動きの約束：止まらない・繰り返さない・強調しない。
   PCとスマホは同じ1枚の設計を、幅（container query）で組み替える。見本帳は design/ にある。 */
/* 寸法のものさし：1440×760 までは 1px（＝見本帳どおり）。それより大きい窓では、幅と高さの狭い方に合わせて版ごと相似に伸ばす（2倍まで）。
   長さとして登録するので、JS からも px の値で読める（水面の線・拡大表示が同じものさしを使う） */
@property --u{syntax:"<length>";inherits:true;initial-value:1px}
:root{
  --u:clamp(1px,min(100vw / 1440,100vh / 760),2px);
  --paper:#f8f8f6; --ink:#17181b; --sub:#85878d; --faint:#dcdcd7; --hair:#17181b;
  --ai:#2f4392; --panel:#e9e9eb; --chip:#ffffff;
  --jp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --en:"Cormorant Garamond","Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ui:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --flow:cubic-bezier(.33,0,.2,1);   /* 静かに立ち上がり、長く落ち着く（最初だけ速い曲線は使わない。app.js の EASE_IN と同じ） */
  --tide:cubic-bezier(.45,0,.55,1);  /* ゆっくり入ってゆっくり抜ける（app.js の EASE_IO と同じ） */
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#121315; --ink:#e7e7e3; --sub:#7a7c83; --faint:#2a2c31; --hair:#e7e7e3;
  --ai:#a3b3f2; --panel:#1f2024; --chip:#1a1b1f; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121315; --ink:#e7e7e3; --sub:#7a7c83; --faint:#2a2c31; --hair:#e7e7e3;
  --ai:#a3b3f2; --panel:#1f2024; --chip:#1a1b1f; color-scheme:dark}
*{box-sizing:border-box}
/* スマホで触れた時にブラウザが付ける半透明の黒い枠は消す（触れた手ごたえはサイトのかすみと水面のたわみが受け持つ・2026-10-13 ケンタ）。キーボードの枠（:focus-visible）は残す */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:calc(16*var(--u));margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:1px solid var(--ai);outline-offset:calc(4*var(--u))}


/* 触れた所の墨：和紙に一滴落としたように、にじんで広がり、乾くように薄れる（輪郭は描かない）。ページが替わっても残るよう、本文の外の層に置く */
.fx{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.sumi{position:absolute;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ai) 40%,var(--ink)) 0%,color-mix(in srgb,var(--ai) 30%,transparent) 38%,transparent 100%);filter:blur(calc(3*var(--u)))}

/* マーク：二つの輪（墨＝ケンタ、藍＝エメ）。位置は JS が毎フレーム決める（周期を持たない揺れ） */
.mk{display:block;overflow:visible;color:var(--ink)}

/* ---- サイト ---- */
.ph i img,.th i img{width:100%;height:100%;object-fit:cover}
/* 左右の余白：画面の幅に比例（スマホ 20 〜 大きな画面で 120 まで）。本文・計器・下の操作帯が同じ端を共有する。
   本文の幅に上限は置かない＝構図が画面の端まで届く（余白は意図して残し、取り残された空白は作らない） */
.site{--gx:max(clamp(calc(20*var(--u)),5.5vw,calc(120*var(--u))),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));min-height:100vh;min-height:100svh;position:relative;overflow:clip;isolation:isolate;container:site/inline-size}
#bg{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;will-change:transform}
.ghost{position:absolute;right:-.06em;bottom:-.22em;z-index:1;pointer-events:none;font-family:var(--en);font-weight:300;font-size:clamp(calc(150*var(--u)),34cqi,calc(380*var(--u)));line-height:1;color:transparent;-webkit-text-stroke:1px var(--faint);letter-spacing:-.02em;user-select:none}
.layer{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:calc(30*var(--u)) var(--gx) calc(76*var(--u))}
.hud{position:fixed;z-index:4;left:var(--gx);right:var(--gx);bottom:calc(26*var(--u));display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-weight:300;font-size:calc(10*var(--u));letter-spacing:.08em;color:var(--sub);pointer-events:none}
.hud a{pointer-events:auto;color:var(--sub);display:block;opacity:.6;transition:opacity 1.2s var(--flow)}
.hud a:hover{opacity:1}
.hud .mk{width:calc(18*var(--u));height:calc(18*var(--u))}

/* 頭 */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(16*var(--u))}
.brand{color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:calc(12*var(--u));align-self:flex-start}
.brand .mk{width:calc(30*var(--u));height:calc(30*var(--u))}
.en-sub{font-family:var(--en);font-size:calc(13*var(--u));letter-spacing:.34em;color:var(--sub);font-weight:400}
.en-sub b{font-weight:inherit;color:var(--ai)}
.nav{display:flex;gap:calc(26*var(--u))}
.nav a{display:flex;flex-direction:column;align-items:flex-end;gap:calc(3*var(--u));text-decoration:none;color:var(--sub);transition:color 1.4s var(--flow)}
.nav .j{font-family:var(--jp);font-weight:300;font-size:calc(14*var(--u))}
.nav .e{font-family:var(--en);font-size:calc(11*var(--u));letter-spacing:.2em;font-style:italic}
.nav a.on{color:var(--ink)}
.nav a:hover{color:var(--ai)}

.mono{font-family:var(--mono);font-weight:300;font-size:calc(11*var(--u));color:var(--sub);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.en{font-family:var(--en);font-style:italic;color:var(--sub);letter-spacing:.06em}

/* 暦（ドット） */
.cal{display:flex;flex-direction:column;gap:calc(12*var(--u))}
.cal-h{display:flex;align-items:baseline;gap:calc(14*var(--u))}
.cal-h .m{font-family:var(--en);font-weight:300;font-size:calc(32*var(--u));line-height:1;letter-spacing:.02em}
.dots{display:grid;grid-template-columns:repeat(31,calc(14*var(--u)));gap:calc(7*var(--u)) calc(6*var(--u))}
.dot{width:calc(14*var(--u));height:calc(14*var(--u));border:0;padding:0;background:none;position:relative;cursor:default}
.dot::before{content:"";position:absolute;inset:calc(5*var(--u));border-radius:50%;background:var(--faint);transition:transform 1.6s var(--flow),background 1.6s var(--flow)}
.dot.has,.dot.pic{cursor:pointer}
.dot.pic:not(.has)::before{background:transparent;box-shadow:inset 0 0 0 1px var(--ink);inset:calc(4*var(--u))}
.dot.pic.has::before{box-shadow:0 0 0 calc(2*var(--u)) var(--paper),0 0 0 calc(2.6*var(--u)) var(--ink)}
.dot.has::before{background:var(--ink);inset:calc(4*var(--u))}
.dot.today::after{content:"";position:absolute;inset:0;border:1px solid var(--ai);border-radius:50%;animation:breathe 5.3s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(.86);opacity:.55}to{transform:scale(1.08);opacity:1}}
.dot.has:hover::before,.dot.has:focus-visible::before{background:var(--ai);transform:scale(1.35)}
.dot.pic:not(.has):hover::before,.dot.pic:not(.has):focus-visible::before{box-shadow:inset 0 0 0 1px var(--ai);transform:scale(1.35)}
.dot.fut::before{background:transparent;box-shadow:inset 0 0 0 1px var(--faint)}
.cal-read{position:relative;min-height:calc(24*var(--u));font-family:var(--jp);font-weight:300;font-size:calc(14*var(--u));display:flex;gap:calc(12*var(--u));align-items:baseline}
.cal-read a{color:inherit;text-decoration:none}
.cr-old{position:absolute;inset:0;display:flex;gap:inherit;align-items:baseline;pointer-events:none}   /* 前の一行：いまの姿のまま薄れて消える（app.js の fadeOld） */
.swap{animation:swap 1.6s var(--flow) both}
@keyframes swap{from{opacity:0;transform:translateX(calc(5*var(--u)));filter:blur(calc(3*var(--u)))}to{opacity:1;transform:none;filter:none}}

/* 表紙：暦だけ。点に触れると、その日のノートと写真がうっすら浮かぶ */
/* 構図の間：暦を黄金比の線（下から約 38%）まで上げ、影の日付を右上の端で切る。空いた場所は、左下の暦と右上の日付が対角に引き合う「間」になる（PC もスマホも同じ） */
.home{--lift:max(calc(16*var(--u)),calc(38.2svh - 196*var(--u)));flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:var(--lift);position:relative}
.site:has(.layer[data-route="home"]) .ghost{bottom:auto;top:-.16em;right:-.08em;-webkit-text-stroke-color:color-mix(in srgb,var(--faint) 80%,var(--paper))}
.home .cal{position:relative;z-index:1}
.peek{position:absolute;left:0;right:0;top:calc(40*var(--u));bottom:calc(var(--lift) + 154*var(--u));pointer-events:none;z-index:0}
.peek>*{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--flow),filter 2.2s var(--flow),transform 2.4s var(--flow);filter:blur(calc(8*var(--u)));transform:translateY(calc(6*var(--u)))}
.peek>.on{opacity:1;filter:blur(calc(1.1*var(--u)));transform:none}
.pk-note{display:flex;flex-direction:column;justify-content:center;gap:.2em;font-family:var(--jp);font-weight:200;font-size:clamp(calc(20*var(--u)),3.3cqi,calc(34*var(--u)));line-height:1.9;letter-spacing:.08em;color:color-mix(in srgb,var(--ink) 12%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 65%,transparent);mask-image:linear-gradient(90deg,#000 65%,transparent)}
.pk-note span{white-space:nowrap;overflow:hidden}
.pk-note small{font-family:var(--mono);font-size:calc(11*var(--u));letter-spacing:.1em;margin-bottom:1em}
.pk-ph i{position:absolute;background-size:cover;background-position:center;inset:0 6% 0 34%;opacity:.3;-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent)}
.pk-ph i.both{inset:0 2% 0 48%}
.pk-note.both{right:46%}

/* 年の目次（年が二つ以上ある時だけ）：上に貼りついて残り、押すとその年までゆっくり流れて移る。見ている年が濃くなる（app.js） */
.yrs{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:calc(8*var(--u)) calc(22*var(--u));margin:calc(48*var(--u)) calc(-1*var(--gx)) 0;padding:calc(14*var(--u)) var(--gx) calc(18*var(--u));background:linear-gradient(to bottom,var(--paper) 55%,color-mix(in srgb,var(--paper) 0%,transparent))}
.yrs a{text-decoration:none;font-family:var(--mono);font-weight:300;font-size:calc(11*var(--u));letter-spacing:.08em;color:var(--sub);opacity:.55;transition:opacity 1.8s var(--flow),color 1.8s var(--flow)}
.yrs a.on{opacity:1;color:var(--ink)}
.yrs a:hover{opacity:1;color:var(--ai)}
/* 年の区切りは線でなく余白で。見出しは年と数だけ */
.yr-sec+.yr-sec{margin-top:clamp(calc(88*var(--u)),16vh,calc(200*var(--u)))}
.yr-h{display:flex;align-items:baseline;gap:calc(14*var(--u));margin:0 0 calc(28*var(--u));font-weight:300}
.yr-h .e{font-family:var(--en);font-weight:300;font-size:calc(26*var(--u));letter-spacing:.04em}

/* 一覧：年ごとに、月を一行ずつ。ひらくのはいつも一つ（ひらくと、前の月は潮が引くように閉じる）。
   閉じる・隠すのは JS がある時だけ（html.js）。JS が無い時は全部の月がひらき、全部の束が見える */
.arch{margin-top:calc(64*var(--u));max-width:max(calc(640*var(--u)),50cqi)}
.yrs~.arch,.yrs~.ph-years{margin-top:calc(24*var(--u))}
.mo{position:relative;border-bottom:1px solid var(--faint)}
.yr-h+.mo{border-top:1px solid var(--faint)}
.mo>button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:calc(14*var(--u));align-items:baseline;padding:calc(15*var(--u)) 0;text-align:left;background:none;border:0;cursor:pointer}
.mo>button .e{font-family:var(--en);font-size:calc(20*var(--u));letter-spacing:.04em;transition:color 1.8s var(--flow),translate 2.4s var(--flow)}
.mo>button .j{font-family:var(--jp);font-weight:300;font-size:calc(12*var(--u));color:var(--sub);letter-spacing:.2em}
.mo>button .mono{justify-self:end;transition:opacity 1.6s var(--tide)}
.mo>button:hover .e{color:var(--ai);translate:calc(3*var(--u)) 0}
.js .mo.open>button .mono{opacity:0}
.mo .body{display:grid;grid-template-rows:1fr}
.js .mo .body{grid-template-rows:0fr;transition:grid-template-rows 1.9s var(--tide)}
.js .mo.open .body{grid-template-rows:1fr}
.mo ol{overflow:hidden;min-height:0;list-style:none;margin:0;padding:0}
.mo li:last-child{padding-bottom:calc(10*var(--u))}   /* 下の余白は閉じた中に入れる（ol に付けると閉じても残る） */
.mo li a{position:relative;display:grid;grid-template-columns:3.4em 6.6em minmax(0,1fr);gap:calc(8*var(--u));align-items:baseline;padding:calc(10*var(--u)) 0;text-decoration:none;color:var(--ink)}
.mo li .t{font-family:var(--jp);font-weight:300;font-size:calc(15*var(--u));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 1.8s var(--flow),transform 2.4s var(--flow)}
.mo li a:hover .t,.mo li a:focus-visible .t{color:var(--ai);transform:translateX(calc(3*var(--u)))}
/* 行は、ひらく時に水面から浮かぶ（少し上から・霞から、一行ずつ） */
.js .mo li{opacity:0;filter:blur(calc(4*var(--u)));translate:0 calc(-5*var(--u));transition:opacity 1.1s var(--tide),filter 1.1s var(--tide),translate 1.4s var(--flow)}
.js .mo.open li{opacity:1;filter:none;translate:0 0;transition-duration:1.8s,1.8s,2.2s;transition-delay:calc(.35s + var(--i)*.09s)}
/* ノートの行も、触れた所から墨の線が下へにじむ（PC は触れている間、スマホは押している間） */
.mo li a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--ai) 25%,var(--ai) 75%,transparent);transform:scaleX(.06);transform-origin:var(--ox,50%) 50%;opacity:0;transition:transform 2.4s var(--flow),opacity 1.8s var(--flow);pointer-events:none}
.mo li a:hover::after,.mo li a.press::after,.mo li a:focus-visible::after{transform:scaleX(1);opacity:.4}
/* 月の行に触れた所から、墨がにじむように下の線が左右へ広がる */
.mo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--ai) 25%,var(--ai) 75%,transparent);transform:scaleX(.08);transform-origin:var(--ox,50%) 50%;opacity:0;transition:transform 2.6s var(--flow),opacity 1.8s var(--flow);pointer-events:none}
.mo:has(>button:hover)::after,.mo:has(>button:focus-visible)::after,.mo:has(>button.press)::after{transform:scaleX(1);opacity:.5}

/* ノート */
.note{max-width:clamp(27em,56cqi,38em);width:100%;margin:calc(72*var(--u)) auto 0}
.note .meta{display:flex;gap:calc(16*var(--u));align-items:baseline;flex-wrap:wrap}
.note h1{font-family:var(--jp);font-weight:500;font-size:calc(21*var(--u));letter-spacing:.14em;margin:calc(16*var(--u)) 0 calc(56*var(--u));text-wrap:balance}
.txt{font-family:var(--jp);font-weight:300;font-size:calc(16*var(--u));line-height:2.15;letter-spacing:.06em}
.txt .ln{display:block;min-height:1em}
.txt .gap{display:block;height:1.1em}
.end{display:flex;justify-content:center;margin:calc(60*var(--u)) 0 0;color:var(--sub)}
.end .mk{width:calc(18*var(--u));height:calc(18*var(--u))}
.pn{display:flex;justify-content:space-between;margin-top:calc(56*var(--u));gap:calc(12*var(--u));margin-bottom:max(0px,calc(clamp(calc(150*var(--u)),34cqi,calc(380*var(--u))) * .72 - 36*var(--u)))}   /* 前後のノートは影の数字より上で終える（影の数字の高さ分の余白を下に置く） */
.pn a{text-decoration:none;color:var(--sub);display:flex;flex-direction:column;gap:calc(4*var(--u));max-width:48%;transition:color 1.4s var(--flow)}
.pn a:last-child{text-align:right;align-items:flex-end}
.pn a .t{font-family:var(--jp);font-weight:300;font-size:calc(13*var(--u))}
.pn a:hover{color:var(--ai)}

/* ノートの終わりの、その日の写真 */
.dayph{margin-top:calc(56*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u))}
.dayph>div{display:flex;gap:calc(6*var(--u));flex-wrap:wrap}
.th{width:calc(58*var(--u));height:calc(58*var(--u));position:relative;display:block}
.th i{position:absolute;inset:0;border-radius:calc(2*var(--u));overflow:hidden;background:var(--faint);opacity:.85;transition:opacity 1.4s var(--flow)}
.th:hover i{opacity:1}
/* 写真：水に浮かぶ石のように、大きさも位置も揃えない */
/* 束の年の並び：束が少なくて一画面に収まる時は、残りの高さの真ん中に置く（下に取り残された空白を作らない） */
.ph-years{margin-top:calc(56*var(--u));flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:calc(40*var(--u))}
.ph-field{--cg:clamp(calc(12*var(--u)),2.4cqi,calc(28*var(--u)));display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);row-gap:clamp(calc(20*var(--u)),4cqi,calc(48*var(--u)));align-items:start}
.ph{grid-column:var(--c);aspect-ratio:var(--r);margin-top:calc(var(--mt)*var(--u));position:relative;display:block;max-width:100%;width:min(100%,calc(72vh * var(--r)))}
/* 左隣の束と隙間なく並んだ束（横長を広げた時）：左に息つぎの余白を取る。左隣の重ねた紙は右上へはみ出すので、その分も空ける */
.ph.tight{margin-left:calc(var(--cg) * 1.6 + 30 * var(--u));max-width:calc(100% - var(--cg) * 1.6 - 30 * var(--u))}
.ph img,.th img,.pk-ph img{display:block}
.ph i{position:absolute;inset:0;border-radius:calc(2*var(--u));overflow:hidden;background:var(--faint);transition:filter 2s var(--flow),transform 2.4s var(--flow),opacity 2s var(--flow)}
/* 重ねた紙の順（表が上）。めくる時は app.js が一時的に入れ替える */
.ph .front{z-index:3}.ph .back.b1{z-index:2}.ph .back.b2,.ph .back.nx{z-index:1}
/* 重なり方は束ごとに違う（ずれる向き・量・傾き）。値は tools/build.py の STACK から --x1〜--r2 で渡す。app.js の slot() も同じ値を読む。触れると同じ向きに少し開く */
.ph{--x1:5;--y1:-5;--r1:1.4;--x2:10;--y2:-10;--r2:2.8}
.ph .back{opacity:.5;transform:translate(calc(var(--x1)*var(--u)),calc(var(--y1)*var(--u))) rotate(calc(var(--r1)*1deg))}
.ph .back.b2,.ph .back.nx{opacity:.28;transform:translate(calc(var(--x2)*var(--u)),calc(var(--y2)*var(--u))) rotate(calc(var(--r2)*1deg))}
.ph:hover .back{transform:translate(calc(var(--x1)*1.75*var(--u)),calc(var(--y1)*1.65*var(--u))) rotate(calc(var(--r1)*1.7deg));opacity:.6}
.ph:hover .back.b2{transform:translate(calc(var(--x2)*1.7*var(--u)),calc(var(--y2)*1.5*var(--u))) rotate(calc(var(--r2)*1.65deg));opacity:.36}
.ph:hover i{filter:brightness(1.03)}
.js .ph.hid{display:none}
html:not(.js) .more{display:none}
/* 前の年の残りの束：押すと浮かんでひろがり、もう一度押すと沈んでたたまれる */
.more{display:flex;gap:calc(12*var(--u));align-items:baseline;margin-top:clamp(calc(40*var(--u)),6cqi,calc(64*var(--u)));background:none;border:0;padding:0;cursor:pointer;color:var(--sub);transition:color 1.6s var(--flow)}
.more .j{font-family:var(--jp);font-weight:300;font-size:calc(12*var(--u));letter-spacing:.24em}
.more:hover{color:var(--ai)}
.ph span{position:absolute;left:0;top:calc(100% + calc(8*var(--u)));font-family:var(--mono);font-size:calc(10*var(--u));color:var(--sub);opacity:0;transition:opacity 1.6s var(--flow)}
.ph:hover span{opacity:1}

/* 束をひろげた一覧：位置と大きさは app.js が幅に合わせて決める（列の数も幅で変わる）。JS が無い時は縦横比のまま折り返して並ぶ */
.spread-wrap{margin-top:calc(56*var(--u));flex:1;display:flex;flex-direction:column}
.sp-cap{display:flex;gap:calc(20*var(--u));align-items:baseline;margin-bottom:calc(28*var(--u))}
.sp-cap a{font-family:var(--jp);font-weight:300;font-size:calc(12*var(--u));letter-spacing:.2em;color:var(--sub);text-decoration:none;transition:color 1.4s var(--flow)}
.sp-cap a:hover{color:var(--ai)}
.spread{position:relative;display:flex;flex-wrap:wrap;gap:calc(14*var(--u))}
.spread.laid{display:block}
.spread.few{margin-block:auto}
.sp{display:block;position:relative;width:calc(25% - calc(11*var(--u)));aspect-ratio:var(--r);border-radius:calc(2*var(--u));overflow:hidden;background:var(--faint);cursor:zoom-in}
.spread.laid .sp{position:absolute;width:auto;aspect-ratio:auto}
.sp img{display:block;width:100%;height:100%;object-fit:cover;transition:filter 2s var(--flow),transform 2.6s var(--flow)}
/* 触れた明るさ・ふくらみはマウスの時だけ（指で触れると、離した後も残って、拡大から帰った一枚が少し大きく見え、カチッと収まって見えていた） */
@media (hover:hover){.sp:hover img{filter:brightness(1.04);transform:scale(1.015)}}
/* 拡大表示：紙の上に一枚だけ。像はにじんで入れ替わる */
/* 薄れて現れるのは紙（背景）と操作だけ。写真は自分の動きで現れる（一覧から浮かび上がる一枚が、背景と一緒に薄く始まらないように） */
.lb{position:fixed;inset:0;z-index:20;touch-action:pan-y}
.lb-bg,.lb-bar{opacity:0;transition:opacity 1.3s var(--flow)}
.lb.on .lb-bg{opacity:1;transition-duration:1.8s}
.lb.on .lb-bar{opacity:1;transition:opacity 1.6s var(--flow) .9s}
.lb-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(calc(10*var(--u)));backdrop-filter:blur(calc(10*var(--u)))}
.lb-fig{position:absolute;inset:0 0 calc(96*var(--u));margin:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.lb-img{position:absolute;border-radius:calc(2*var(--u));will-change:transform,opacity;opacity:0;filter:blur(calc(10*var(--u)));transform:scale(.975);transition:opacity 1.1s var(--flow),filter 1.4s var(--flow),transform 1.6s var(--flow),translate 1.6s var(--flow)}
.lb-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.lb-img.on{opacity:1;filter:none;transform:none}
.lb-img.out{opacity:0;filter:blur(calc(8*var(--u)));transform:translateX(var(--dx,0px)) scale(.99);transition-duration:1s}
.lb-bar{position:absolute;left:0;right:0;bottom:calc(calc(26*var(--u)) + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;gap:calc(22*var(--u))}
.lb-bar button{background:none;border:0;color:var(--sub);font-family:var(--en);font-size:calc(20*var(--u));min-width:calc(44*var(--u));min-height:calc(44*var(--u));cursor:pointer;transition:color 1s var(--flow),opacity 1.4s var(--tide)}
.lb-bar button:hover{color:var(--ai)}
.lb-bar button:disabled{opacity:.25;cursor:default}
.lb-bar .cl{font-family:var(--jp);font-size:calc(12*var(--u));letter-spacing:.2em}
/* 写真がまだ無い時・見つからない時：輪だけを真ん中に */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(18*var(--u));color:var(--sub)}
.empty .mk{width:calc(34*var(--u));height:calc(34*var(--u))}
/* スマホの下の操作帯（PCでは出さない） */
.dock{display:none}
/* スマホ幅：同じ設計を組み替えるだけ */
@container site (max-width:720px){
  .layer{padding-top:calc(24*var(--u))}
  .dots{grid-template-columns:repeat(16,calc(14*var(--u)))}
  .mo li a{grid-template-columns:3em minmax(0,1fr)}
  .mo li a .d{display:none}
  .yrs{margin-top:calc(36*var(--u));gap:calc(8*var(--u)) calc(18*var(--u))}
  .yr-h{margin-bottom:calc(22*var(--u))}
  .nav{gap:calc(18*var(--u))}
  .note{margin-top:calc(52*var(--u))}
  .note h1{margin-bottom:calc(40*var(--u))}
  .txt{font-size:calc(15*var(--u));line-height:2.05;letter-spacing:.04em}
  .arch{margin-top:calc(48*var(--u))}
  .peek{bottom:calc(var(--lift) + 182*var(--u))}
  .ph.tight{margin-left:0;max-width:100%}
  .pk-ph i{inset:4% 0 4% 18%}
  .pk-ph i.both{inset:0 0 50% 26%}
  .pk-note.both{right:0;top:46%}
  /* 重ねた紙は束によって右にも左にもはみ出すので、左右に同じだけ空ける */
  .ph-field{grid-template-columns:repeat(6,minmax(0,1fr));padding-inline:calc(13*var(--u));row-gap:calc(44*var(--u))}
  .spread-wrap{margin-top:calc(40*var(--u))}
  .spread:not(.laid) .sp{width:calc(50% - calc(7*var(--u)))}
  .ph{grid-column:var(--sc);margin-top:calc(var(--smt)*var(--u))}
  .hud{display:none}
  .top .nav{display:none}
  .dock{display:flex;position:sticky;bottom:0;z-index:3;margin:auto calc(-1*var(--gx)) calc(-76*var(--u));padding:calc(22*var(--u)) calc(34*var(--u)) calc(calc(18*var(--u)) + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:center;background:linear-gradient(to bottom,transparent,var(--paper) 45%)}
  .dock a{display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--u));min-width:calc(56*var(--u));min-height:calc(44*var(--u));justify-content:center;text-decoration:none;color:var(--sub);transition:color 1.4s var(--flow)}
  .dock a.on{color:var(--ink)}
  .dock .j{font-family:var(--jp);font-weight:300;font-size:calc(15*var(--u))}
  .dock .e{font-family:var(--en);font-size:calc(11*var(--u));letter-spacing:.2em;font-style:italic}
  .dock .mk{width:calc(24*var(--u));height:calc(24*var(--u))}
  /* 影の数字は下の操作帯の上に置く（帯の裏に沈めると、端の線だけがのぞいて見える） */
  .ghost{bottom:calc(84*var(--u) + env(safe-area-inset-bottom,0px) - .22em)}
  .home{--lift:max(calc(28*var(--u)),calc(38.2svh - 196*var(--u)))}
  .pn{margin-bottom:calc(clamp(calc(150*var(--u)),34cqi,calc(380*var(--u))) * .72 + 36*var(--u))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}