/* サイノツノ / 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(.16,1,.3,1);
}
@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}
html{-webkit-text-size-adjust:100%}
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))}


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

/* ---- サイト ---- */
.ph i img,.th i img{width:100%;height:100%;object-fit:cover}
.site{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;max-width:calc(1120*var(--u));margin:0 auto;display:flex;flex-direction:column;padding:calc(30*var(--u)) clamp(calc(20*var(--u)),5cqi,calc(56*var(--u))) calc(76*var(--u))}
.hud{position:fixed;z-index:4;left:clamp(calc(20*var(--u)),5vw,calc(56*var(--u)));right:clamp(calc(20*var(--u)),5vw,calc(56*var(--u)));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{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}
.swap{animation:swap 1.2s 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}}

/* 表紙：暦だけ。点に触れると、その日のノートと写真がうっすら浮かぶ */
.home{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(16*var(--u));position:relative}
.home .cal{position:relative;z-index:1}
.peek{position:absolute;left:0;right:0;top:calc(40*var(--u));bottom:calc(170*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%}

/* 一覧 */
.arch{margin-top:calc(64*var(--u));display:flex;flex-direction:column;gap:calc(56*var(--u));max-width:calc(640*var(--u))}
.yr .row{display:grid;grid-template-columns:4.4em minmax(0,1fr);align-items:center;gap:calc(10*var(--u));margin-bottom:calc(6*var(--u))}
.yr .dots{grid-template-columns:repeat(31,calc(10*var(--u)));gap:calc(4*var(--u))}
.yr .dot{width:calc(10*var(--u));height:calc(10*var(--u))}
.yr .dot::before{inset:calc(3*var(--u))}.yr .dot.has::before,.yr .dot.pic:not(.has)::before{inset:calc(2*var(--u))}
.mon h2{display:flex;align-items:baseline;gap:calc(14*var(--u));margin:0 0 calc(14*var(--u));font-weight:300}
.mon h2 .e{font-family:var(--en);font-size:calc(22*var(--u));letter-spacing:.04em}
.mon h2 .j{font-family:var(--jp);font-size:calc(12*var(--u));color:var(--sub);letter-spacing:.2em}
.mon ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint)}
.mon li a{display:grid;grid-template-columns:3.4em 6.6em minmax(0,1fr);gap:calc(8*var(--u));align-items:baseline;padding:calc(11*var(--u)) 0;border-bottom:1px solid var(--faint);text-decoration:none;color:var(--ink);position:relative}
.mon li a .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)}
/* 触れた所から、墨がにじむように線が左右へ広がる */
.mon li a::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)}
.mon li a:hover::after,.mon li a:focus-visible::after{transform:scaleX(1);opacity:.55}
.mon li a:hover .t{color:var(--ai);transform:translateX(calc(3*var(--u)))}

/* ノート */
.note{max-width:27em;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))}
.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-field{margin-top:calc(56*var(--u));display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(calc(12*var(--u)),2.4cqi,calc(28*var(--u)));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%}
.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)}
.ph .back{opacity:.5;transform:translate(calc(5*var(--u)),calc(-5*var(--u))) rotate(1.4deg)}
.ph .back.b2{opacity:.28;transform:translate(calc(10*var(--u)),calc(-10*var(--u))) rotate(2.8deg)}
.ph:hover .back{transform:translate(calc(9*var(--u)),calc(-8*var(--u))) rotate(2.4deg);opacity:.6}
.ph:hover .back.b2{transform:translate(calc(17*var(--u)),calc(-15*var(--u))) rotate(4.6deg);opacity:.36}
.ph:hover i{filter:brightness(1.03)}
.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}

/* 拡大表示：紙の上に一枚だけ。像はにじんで入れ替わる */
.lb{position:fixed;inset:0;z-index:20;touch-action:pan-y;opacity:0;transition:opacity .9s var(--flow)}
.lb.on{opacity:1}
.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));object-fit:cover;background:var(--faint);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.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:.7s}
.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)}
.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)))}
  .yr .dots{grid-template-columns:repeat(16,calc(10*var(--u)))}
  .yr .row{align-items:start}
  .mon li a{grid-template-columns:3em minmax(0,1fr)}
  .mon li a .d{display:none}
  .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));gap:calc(44*var(--u))}
  .peek{bottom:calc(210*var(--u))}
  .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-right:calc(22*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*clamp(calc(20*var(--u)),5cqi,calc(56*var(--u)))) 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))}
  .home{padding-bottom:calc(28*var(--u))}
  .pn{margin-bottom:calc(24*var(--u))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}