/* 井上浩之 Ascending Works 共通スタイル
   構想：一冊の本をひらく。藍の「夜（序章）」から、読み進めるほど生成りの「紙（本編）」へと夜が明けていく。 */
:root{
  --night:#1C2130;      /* 藍墨：序章の夜 */
  --night-deep:#141826; /* 地平線より下 */
  --night-field:#222840;/* 夜の入力欄 */
  --paper:#E7E1D3;      /* 生成り：本編の紙 */
  --ink:#232838;        /* 紙の上の文字。黒ではなく藍の墨 */
  --mist:#9A9FAE;       /* 夜の補助文字 */
  --ash:#5F6474;        /* 紙の補助文字 */
  --brass:#C6A366;      /* 真鍮：夜のアクセント */
  --brass-ink:#7E622F;  /* 真鍮：紙の上で読める濃さ */
  --dawn:#EBCB91;       /* 暁：地平線の光だけに */

  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --latin:"Cormorant Garamond","Times New Roman",serif;
  --ease:cubic-bezier(.65,0,.25,1);
  --ease-out:cubic-bezier(.2,.75,.2,1);
  --gutter:max(24px, env(safe-area-inset-left, 0px));
  --gutter-r:max(24px, env(safe-area-inset-right, 0px));

  /* 現在の地（スクロールで切り替わる） */
  --bg:var(--night); --fg:var(--paper); --muted:var(--mist); --accent:var(--brass); --line:rgba(231,225,211,.16); --field:var(--night-field);
  color-scheme:dark;
}
html[data-tone="paper"]{
  --bg:var(--paper); --fg:var(--ink); --muted:var(--ash); --accent:var(--brass-ink); --line:rgba(35,40,56,.16); --field:rgba(35,40,56,.045);
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; scroll-padding-top:110px; scrollbar-gutter:stable; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--serif); font-size:17px; line-height:2.05; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  transition:background-color 1.4s var(--ease), color 1.4s var(--ease);
  overflow-x:hidden;
}
a{ color:inherit; }
img{ display:block; max-width:100%; height:auto; }
:focus-visible{ outline:1px solid var(--accent); outline-offset:5px; }
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-left:var(--gutter); padding-right:var(--gutter-r); }
.narrow{ max-width:900px; }
h1,h2,h3{ font-weight:500; }
h1,h2,h3,.verse,.statement,.lead,.key,.line{ word-break:auto-phrase; text-wrap:balance; }
p,dd,li,figcaption,summary{ text-wrap:pretty; }
.nb{ display:inline-block; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============ ヘッダー ============ */
.head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding-top:calc(env(safe-area-inset-top, 0px) + 22px); padding-bottom:18px;
  transition:transform .7s var(--ease), background-color 1.4s var(--ease), color 1.4s var(--ease);
  color:var(--fg);
}
.head.is-scrolled{ background:color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.head.is-hidden{ transform:translateY(-100%); }
@media (hover:none), (max-width:899px){ .head.is-scrolled{ background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; } }
.head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ text-decoration:none; display:flex; align-items:baseline; gap:14px; }
.logo b{ font-weight:500; font-size:17px; letter-spacing:.2em; }
.logo small{ font-family:var(--latin); font-style:italic; font-size:16px; letter-spacing:.05em; color:var(--muted); white-space:nowrap; }
.menu-btn{
  appearance:none; background:none; border:0; color:inherit; cursor:pointer;
  display:flex; align-items:center; gap:14px; font:inherit; font-size:13px; letter-spacing:.16em; padding:8px 0;
}
.menu-btn .label{ display:inline-block; min-width:5em; text-align:right; }
.menu-btn .bars{ position:relative; width:30px; height:9px; }
.menu-btn .bars::before,.menu-btn .bars::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform .6s var(--ease), top .6s var(--ease), width .6s var(--ease);
}
.menu-btn .bars::before{ top:0; }
.menu-btn .bars::after{ top:8px; width:70%; }
.menu-btn:hover .bars::after{ width:100%; }
.menu-open .menu-btn .bars::before{ top:4px; transform:rotate(18deg); }
.menu-open .menu-btn .bars::after{ top:4px; width:100%; transform:rotate(-18deg); }
.menu-open .head{ color:var(--paper); background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; transform:none; }
.menu-open .head .logo small{ color:var(--mist); }

/* ============ メニュー（全面） ============ */
.menu{
  position:fixed; inset:0; z-index:40; background:var(--night); color:var(--paper);
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .9s var(--ease), visibility 0s linear .9s;
  overflow-y:auto;
}
.menu-open .menu{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .9s var(--ease), visibility 0s; }
.menu .wrap{
  min-height:100%; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px;
  align-content:center; padding-top:calc(env(safe-area-inset-top,0px) + 120px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 64px);
}
.menu ol{ list-style:none; display:grid; gap:clamp(14px, 2.6vh, 28px); }
.menu ol a{ display:grid; gap:2px; text-decoration:none; }
.menu ol a span[lang="en"]{ font-family:var(--latin); font-style:italic; letter-spacing:.02em; }
.menu ol a span{ font-size:clamp(26px, 3.6vw, 42px); letter-spacing:.12em; line-height:1.5; transition:color .4s ease; }
.menu ol a small{ font-size:13px; color:var(--mist); letter-spacing:.06em; }
.menu ol a:hover span, .menu ol a[aria-current="page"] span{ color:var(--brass); }
.menu li{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.menu-open .menu li{ opacity:1; transform:none; }
.menu-open .menu li:nth-child(1){ transition-delay:.35s; }
.menu-open .menu li:nth-child(2){ transition-delay:.42s; }
.menu-open .menu li:nth-child(3){ transition-delay:.49s; }
.menu-open .menu li:nth-child(4){ transition-delay:.56s; }
.menu-open .menu li:nth-child(5){ transition-delay:.63s; }
.menu aside{ align-self:end; display:grid; gap:28px; font-size:14px; color:var(--mist); opacity:0; transition:opacity .8s ease .7s; }
.menu-open .menu aside{ opacity:1; }
.menu aside .elsewhere{ display:flex; gap:24px; }
.menu aside .elsewhere a{ text-decoration:none; border-bottom:1px solid rgba(231,225,211,.3); padding-bottom:2px; }
.menu aside .elsewhere a:hover{ color:var(--paper); border-color:var(--brass); }
.menu .verse-sm{ font-size:15px; line-height:2.2; color:var(--paper); }
@media (max-width:760px){
  .menu .wrap{ grid-template-columns:1fr; align-content:start; padding-top:calc(env(safe-area-inset-top,0px) + 110px); }
  .menu aside{ align-self:start; }
}

/* ============ ボタン・リンク ============ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:18px; text-decoration:none; cursor:pointer;
  font:inherit; font-size:14px; letter-spacing:.14em; line-height:1.6; padding:18px 34px; border:0;
  background:var(--fg); color:var(--bg); overflow:hidden; isolation:isolate;
  transition:color .5s ease, background-color 1.4s var(--ease);
}
.btn::before{ content:""; position:absolute; inset:0; background:var(--brass); transform:scaleX(0); transform-origin:right; transition:transform .7s var(--ease); z-index:-1; }
.btn:hover::before, .btn:focus-visible::before{ transform:scaleX(1); transform-origin:left; }
.btn:hover{ color:var(--night); }
.btn .dash{ width:28px; height:1px; background:currentColor; transition:width .5s var(--ease); }
.btn:hover .dash{ width:44px; }
.btn[disabled]{ opacity:.6; cursor:default; }
.link{
  display:inline-flex; align-items:center; gap:14px; text-decoration:none; font-size:14px; letter-spacing:.12em;
  padding-bottom:6px; background:linear-gradient(var(--accent),var(--accent)) left bottom / 100% 1px no-repeat;
  transition:background-size .6s var(--ease), color .4s ease;
}
.link:hover{ background-size:0 1px; background-position:right bottom; color:var(--accent); }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:24px 40px; }

/* ============ 節・見出し・本文 ============ */
.leaf{ position:relative; padding-block:clamp(96px, 14vh, 160px); }
.leaf.tight{ padding-top:0; }
.h2{ font-size:clamp(26px, 3.2vw, 40px); line-height:1.75; letter-spacing:.1em; margin-bottom:1.2em; }
.h2.small{ font-size:clamp(22px, 2.5vw, 30px); }
.prose{ max-width:33em; }
.prose p + p{ margin-top:1.2em; }
.muted{ color:var(--muted); }
.note{ font-size:13px; line-height:1.95; color:var(--muted); letter-spacing:.04em; }
.key{ margin-top:2.2em; padding-left:20px; border-left:1px solid var(--accent); max-width:30em; font-size:clamp(17px, 1.9vw, 20px); line-height:2; }
.lead{ font-size:clamp(15.5px, 1.5vw, 17px); color:var(--muted); line-height:2.2; max-width:30em; }

/* 下層ページの扉：題と、右に一枚の写真 */
.page-head{ position:relative; padding-top:calc(env(safe-area-inset-top,0px) + clamp(150px, 22vh, 220px)); padding-bottom:clamp(90px, 14vh, 150px); overflow:hidden; }
.page-head .wrap{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(40px, 7vw, 110px); align-items:end; }
.page-head.solo .wrap{ grid-template-columns:minmax(0,1fr); }
.page-head h1{ font-size:clamp(30px, 4.4vw, 56px); line-height:1.65; letter-spacing:.1em; margin-bottom:.9em; }
.page-head .whose{ display:block; font-size:13px; letter-spacing:.3em; color:var(--muted); margin-bottom:28px; }
.page-head .photo{ aspect-ratio:4/5; }
@media (max-width:820px){ .page-head .wrap{ grid-template-columns:1fr; } .page-head .photo{ max-width:420px; } }

.photo{ position:relative; overflow:hidden; }
.photo img{ width:100%; height:100%; object-fit:cover; }
.has-parallax .photo img{ height:112%; will-change:transform; }
.photo.natural img{ height:auto; }

/* 地平線：締めくくりの印 */
.horizon-line{ position:relative; height:1px; max-width:760px; margin:0 auto; background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); }
.horizon-line::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 8%, var(--dawn) 50%, transparent 92%); transform:scaleX(.05); opacity:0; transition:transform 3.2s var(--ease), opacity 1.6s ease; }
.horizon-line.is-in::after{ transform:scaleX(1); opacity:1; }

/* ============ 裏表紙 ============ */
.foot{ background:var(--night); color:var(--paper); padding-top:clamp(90px, 12vw, 140px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px); }
.foot .wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:56px 40px; }
.foot .name{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; font-size:clamp(28px, 3.2vw, 40px); letter-spacing:.24em; line-height:1.4; }
.foot .name small{ font-family:var(--latin); font-style:italic; font-size:clamp(20px, 2vw, 26px); letter-spacing:.04em; color:var(--mist); }
.foot .quals{ list-style:none; margin-top:30px; padding-left:18px; border-left:1px solid rgba(198,163,102,.5); display:grid; gap:12px; font-size:12.5px; line-height:1.85; letter-spacing:.06em; color:var(--mist); }
.foot nav{ display:grid; grid-template-columns:repeat(2, auto); gap:12px 48px; font-size:14px; align-content:start; }
.foot nav a{ text-decoration:none; color:var(--mist); transition:color .3s ease; }
.foot nav a:hover{ color:var(--paper); }
.foot .copy{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:28px; border-top:1px solid rgba(231,225,211,.14); font-size:12px; color:var(--mist); letter-spacing:.08em; }
.foot .copy small[lang="en"]{ font-family:var(--latin); font-style:italic; font-size:14px; letter-spacing:.04em; }
@media (max-width:640px){ .foot .wrap{ grid-template-columns:1fr; } }

/* ============ 動き ============ */
@media (prefers-reduced-motion:no-preference){
  @keyframes draw{ from{ transform:scaleX(0); opacity:0; } to{ transform:scaleX(1); opacity:1; } }
  @keyframes ink{ from{ opacity:0; filter:blur(6px); } to{ opacity:1; filter:none; } }
  @keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes fall{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

  /* 下層ページの扉 */
  .js .page-head h1, .js .page-head .whose{ animation:ink 1.8s var(--ease-out) .3s both; }
  .js .page-head .lead, .js .page-head .after-lead{ animation:fade 1.6s ease 1.1s both; }

  /* 写真：幕が上がるようにあらわれる */
  .js [data-reveal="photo"]::after{ content:""; position:absolute; inset:0; z-index:2; background:var(--bg); transform-origin:50% 0; transition:transform 1.6s var(--ease); }
  .js [data-reveal="photo"].is-in::after{ transform:scaleY(0); }
  /* 拡大から戻る動きは、視差のある大きな画面だけ */
  .js.has-parallax [data-reveal="photo"] img{ scale:1.12; transition:scale 2.4s var(--ease); }
  .js.has-parallax [data-reveal="photo"].is-in img{ scale:1; }

  /* 一行ずつ、下から */
  .js [data-reveal="lines"] .ln{ display:block; overflow:hidden; }
  .js [data-reveal="lines"] .ln > span{ display:inline-block; transform:translateY(105%); transition:transform 1.3s var(--ease); transition-delay:calc(var(--i, 0) * .14s); }
  .js [data-reveal="lines"].is-in .ln > span{ transform:none; }

  /* まとまり：静かに浮かぶ（直下の要素が順に） */
  .js [data-reveal="rise"] > *{ opacity:0; transform:translateY(28px); transition:opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); transition-delay:calc(var(--i, 0) * .12s); }
  .js [data-reveal="rise"].is-in > *{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  body, .head, .menu, .menu li, .menu aside, .btn{ transition:none !important; }
  .horizon-line::after{ transform:none; opacity:1; transition:none; }
}