:root {
  --sky:    #13233A;  /* 港の夜空 */
  --harbor: #0F1D2E;  /* 基調 */
  --water:  #0A1522;  /* 水面 */
  --moon:   #E8E2CF;  /* 月の象牙 */
  --clear:  #CFE3EE;  /* 第一区画の白い定常光 */
  --amber:  #D9A55B;  /* 下層の灯り（Kaluza 側だけに使う） */
  --mist:   #93A2B3;  /* 補助テキスト */
  --line:   rgba(207, 227, 238, .18);

  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;

  /* 1.25 比の尺度 */
  --t-0: .8rem;  --t-1: 1rem;  --t-2: 1.25rem; --t-3: 1.563rem;
  --t-4: 1.953rem; --t-5: 2.441rem;
  --gutter: clamp(16px, 5vw, 64px);
}
* { box-sizing: border-box; }
html { background: var(--harbor); color-scheme: dark; }
body {
  margin: 0; background: var(--harbor); color: var(--moon);
  font-family: var(--serif); font-size: 17px; line-height: 1.9;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--clear); outline-offset: 4px; border-radius: 2px; }
img { max-width: 100%; display: block; }

/* ---------- ヘッダー ---------- */
.site-head {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .4em 1em;
  padding: 20px var(--gutter);
  font-family: var(--sans); font-size: var(--t-0); letter-spacing: .08em;
}
.site-head.static { position: static; border-bottom: 1px solid var(--line); }
.site-head .mark { font-family: var(--serif); font-size: var(--t-1); letter-spacing: .3em; text-decoration: none; }
.site-head nav { display: flex; flex-wrap: wrap; gap: .2em 1.6em; }
.site-head nav a { text-decoration: none; color: var(--mist); }
.site-head nav a:hover { color: var(--moon); }

/* ---------- ヒーロー：空と水面 ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.sky, .sea { position: absolute; left: 0; right: 0; }
.sky { top: 0; height: 58%; background: linear-gradient(180deg, #0C182A 0%, var(--sky) 100%); }
.sea { top: 58%; bottom: 0; background: linear-gradient(180deg, #102036 0%, var(--water) 70%); }
.horizon { position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: var(--line); }

.moon { position: absolute; border-radius: 50%; }
.moon.big   { width: clamp(64px, 9vw, 120px); aspect-ratio: 1; top: 13%; right: 22%;
              background: radial-gradient(circle at 38% 36%, #F4F0E3 0%, #DCD5BF 60%, #BDB59C 100%);
              box-shadow: 0 0 60px 8px rgba(232, 226, 207, .12); }
.moon.small { width: clamp(28px, 3.6vw, 48px); aspect-ratio: 1; top: 21%; right: 12%;
              background: radial-gradient(circle at 40% 38%, #EEF3F4 0%, #C9D3D6 70%, #A9B4B8 100%);
              box-shadow: 0 0 36px 4px rgba(207, 227, 238, .10); }
/* 月の映り込み：水面に縦に伸びる光の帯 */
.glint { position: absolute; top: 58%; height: 34%; filter: blur(3px);
         background: repeating-linear-gradient(180deg, rgba(232,226,207,.55) 0 3px, transparent 3px 11px);
         -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
                 mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.glint.big   { right: calc(22% + clamp(64px, 9vw, 120px) * .2); width: clamp(38px, 5.4vw, 72px); }
.glint.small { right: calc(12% + clamp(28px, 3.6vw, 48px) * .15); width: clamp(18px, 2.4vw, 32px); opacity: .7; }

.title-wrap { position: absolute; left: var(--gutter); right: var(--gutter); }
.title-wrap.upper { bottom: 42%; display: flex; flex-direction: column-reverse; }
.title-wrap.lower { top: 58%; }
.name {
  margin: 0; font-weight: 800; line-height: 1;
  font-size: clamp(3.2rem, 13vw, 9.5rem); letter-spacing: .12em;
}
.reading { display: block; margin: 0 0 .4rem; font-family: var(--sans); font-weight: 400;
           font-size: var(--t-0); letter-spacing: .4em; color: var(--mist); }
.lede { margin: 0 0 1.4rem; font-size: var(--t-2); letter-spacing: .06em; max-width: 30em; }

/* 映り込み：上下反転＋水の揺らぎ。動きはこの1か所だけ */
.reflection { transform: scaleY(-1); transform-origin: center; filter: url(#ripple);
              opacity: .38; pointer-events: none; user-select: none;
              -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 100%);
                      mask-image: linear-gradient(0deg, #000 30%, transparent 100%); }
.reflection .name { color: var(--clear); }

/* ---------- セクション ---------- */
.section { border-top: 1px solid var(--line); padding: clamp(48px, 8vw, 104px) var(--gutter); }
.section h2 { margin: 0 0 .2em; font-size: var(--t-4); font-weight: 600; letter-spacing: .08em; line-height: 1.3; }
.section .kind { margin: 0 0 2rem; font-family: var(--sans); font-size: var(--t-0); color: var(--mist); letter-spacing: .06em; }
.orb { display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-right: .5em; vertical-align: .08em; background: var(--moon); }
.orb.small { background: var(--clear); width: .4em; height: .4em; vertical-align: .18em; }
.orb.amber { background: var(--amber); }
.intro { max-width: 34em; margin: 0 0 2.2rem; }
.intro + .intro { margin-top: -1.2rem; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }

.articles { list-style: none; margin: 0 0 2.4rem; padding: 0; max-width: 36em; }
.articles li { border-top: 1px solid var(--line); }
.articles li:last-child { border-bottom: 1px solid var(--line); }
.articles a { display: grid; grid-template-columns: 6.5em 1fr; gap: 1em; padding: 1rem 0; text-decoration: none; }
.articles time { font-family: var(--sans); font-size: var(--t-0); color: var(--mist); padding-top: .25em; }
.articles a:hover .t { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

.text-link { font-family: var(--sans); font-size: .9rem; letter-spacing: .04em;
             text-underline-offset: .35em; text-decoration-thickness: 1px; }

.book { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; max-width: 52em; }
.book img { width: 100%; height: auto; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.book h3 { margin: 0; font-size: var(--t-3); font-weight: 600; letter-spacing: .1em; }
.book .sub { margin: .2em 0 1rem; font-size: .92rem; color: var(--mist); }
.book dl { margin: 0 0 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: .2em 1.2em; font-family: var(--sans); font-size: .88rem; }
.book dt { color: var(--mist); }
.book dd { margin: 0; }
.book .desc { margin: 0 0 1.6rem; max-width: 30em; }
.buy { display: inline-block; padding: .7em 1.4em; border: 1px solid var(--amber); color: var(--amber);
       font-family: var(--sans); font-size: .9rem; letter-spacing: .06em; text-decoration: none; }
.buy:hover { background: var(--amber); color: var(--harbor); }

/* 案内冊子の抜粋：作中文書として組む */
.excerpt { margin: 0 0 2.4rem; padding: 1.6rem 0 0; border-top: 1px solid var(--line); max-width: 34em; }
.excerpt p { margin: 0 0 .9em; line-height: 2.05; }
.excerpt cite { display: block; font-style: normal; font-family: var(--sans); font-size: var(--t-0); color: var(--mist); }

.people { list-style: none; margin: 0 0 2.4rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; max-width: 36em; }
.people b { display: block; font-size: var(--t-2); font-weight: 600; letter-spacing: .06em; }
.people span { font-family: var(--sans); font-size: .84rem; color: var(--mist); line-height: 1.7; }

.links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 52em; border-top: 1px solid var(--line); }
.links li { border-bottom: 1px solid var(--line); }
.links a, .links .soon { display: block; padding: 1.1rem 0; text-decoration: none; }
.links b { display: block; font-size: var(--t-2); font-weight: 600; letter-spacing: .08em; }
.links span { font-family: var(--sans); font-size: .84rem; color: var(--mist); }
.links a:hover b { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.links .soon { color: var(--mist); }

/* ---------- 文書ページ（ガイドライン・プライバシー） ---------- */
.doc { padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(56px, 8vw, 104px); max-width: calc(40em + 2 * var(--gutter)); }
.doc h1 { margin: 0 0 .4em; font-size: var(--t-4); font-weight: 600; letter-spacing: .06em; line-height: 1.4; }
.doc .meta { margin: 0 0 2.4rem; font-family: var(--sans); font-size: var(--t-0); color: var(--mist); }
.doc h2 { margin: 2.4em 0 .6em; font-size: var(--t-2); font-weight: 600; letter-spacing: .06em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 0 0 .5em; }
.doc strong { color: var(--clear); font-weight: 600; }
.doc code { font-family: var(--sans); color: var(--amber); }
.doc .sign { margin-top: 3em; text-align: right; letter-spacing: .2em; }

/* ---------- 奥付 ---------- */
.colophon { border-top: 1px solid var(--line); padding: 40px var(--gutter) 56px;
            font-family: var(--sans); font-size: .82rem; color: var(--mist); line-height: 1.9; }
.colophon p { margin: 0; max-width: 60em; }
.colophon .who { color: var(--moon); font-family: var(--serif); font-size: var(--t-1); letter-spacing: .2em; margin-bottom: .6em; }
.colophon nav { display: flex; flex-wrap: wrap; gap: .2em 1.6em; margin: .8em 0; }
.colophon nav a { text-underline-offset: .3em; }

@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
  .book { grid-template-columns: 1fr; }
  .book img { max-width: 240px; }
}
@media (max-width: 520px) {
  .people { grid-template-columns: 1fr; }
  .articles a { grid-template-columns: 1fr; gap: .1em; }
  .moon.big { right: 30%; }
  .glint.big { right: calc(30% + clamp(64px, 9vw, 120px) * .2); }
}