/* ── イリキリ ──────────────────────────────────────────────
   世界の5色だけ。黒・炭・ダスト・骨・ミルク。原色ゼロ、ネオンゼロ。
   ダークが既定（この世界は黒）。ライトは同じ5色の明暗を入れ替えるだけ。
   塗りつぶした面はヘッダー1枚だけ。その下は仕切り線だけで組む。 */

:root{
  --ground:#0A0A0B;      /* 黒   ── 人が暮らす所 */
  --mass:#17171A;        /* 炭   ── 上に建ったもの */
  --ink:#F5F2EC;         /* ミルク */
  --dim:#6B675F;         /* ダスト */
  --bone:#E3DCD0;        /* 骨 */
  --rule:rgba(227,220,208,.15);
  --rule-hard:rgba(227,220,208,.34);
  --gloss:rgba(245,242,236,.05);

  --f-disp:"Shippori Mincho B1",serif;
  --f-body:"Zen Kaku Gothic New",system-ui,sans-serif;
  --f-data:"JetBrains Mono",ui-monospace,monospace;

  --fs-xs:.6875rem; --fs-s:.8125rem; --fs-base:.9375rem;
  --fs-m:1.125rem;  --fs-l:1.75rem;  --fs-xl:2.75rem; --fs-2xl:4rem;

  --gut:clamp(1.25rem,5vw,3.5rem);
  --wide:64rem;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:#F5F2EC; --mass:#E3DCD0; --ink:#0A0A0B; --dim:#6B675F; --bone:#17171A;
    --rule:rgba(10,10,11,.16); --rule-hard:rgba(10,10,11,.34); --gloss:rgba(10,10,11,.04);
  }
}
:root[data-theme="light"]{
  --ground:#F5F2EC; --mass:#E3DCD0; --ink:#0A0A0B; --dim:#6B675F; --bone:#17171A;
  --rule:rgba(10,10,11,.16); --rule-hard:rgba(10,10,11,.34); --gloss:rgba(10,10,11,.04);
}
:root[data-theme="dark"]{
  --ground:#0A0A0B; --mass:#17171A; --ink:#F5F2EC; --dim:#6B675F; --bone:#E3DCD0;
  --rule:rgba(227,220,208,.15); --rule-hard:rgba(227,220,208,.34); --gloss:rgba(245,242,236,.05);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-base); line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--bone); outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--wide); margin:0 auto; padding-inline:var(--gut)}

/* ══ 上に建ったもの ══ 塗りつぶした面はここだけ ══ */
.built{background:var(--mass); border-bottom:1px solid var(--rule-hard); padding-block:clamp(1.5rem,4vw,2.5rem)}
.built .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.ident{display:flex; align-items:center; gap:1.1rem; text-decoration:none}
.wordmark{font-family:var(--f-data); font-size:var(--fs-m); font-weight:500; letter-spacing:.42em; text-transform:uppercase; color:var(--ink)}
.nav{display:flex; align-items:center; gap:1.5rem}
.nav a{font-family:var(--f-disp); font-size:var(--fs-m); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; padding-block:.2rem}
.nav a:hover{border-bottom-color:var(--bone)}
.theme-btn{
  font-family:var(--f-data); font-size:var(--fs-xs); letter-spacing:.16em;
  color:var(--dim); background:none; border:1px solid var(--rule);
  padding:.5rem .85rem; cursor:pointer; line-height:1;
}
.theme-btn:hover{color:var(--ink); border-color:var(--rule-hard)}

/* ══ 世界の一行 ══ */
.world{padding-block:clamp(3.5rem,10vw,6.5rem)}
.world p{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.5rem,4.6vw,var(--fs-xl)); line-height:1.62;
  margin:0; max-width:24em; text-wrap:balance;
}
.world p .under{display:block; color:var(--dim)}

/* ══ 節 ══ */
section{border-top:1px solid var(--rule); padding-block:clamp(2.5rem,6vw,4rem)}
.lede{border-top:0; padding-block:clamp(3rem,8vw,5rem) clamp(2rem,5vw,3rem)}
.eyebrow{
  font-family:var(--f-data); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--dim); margin:0 0 1.75rem;
}
.eyebrow.second{margin-top:2.75rem}
.eyebrow .jp{font-family:var(--f-body); letter-spacing:.22em; margin-left:1.1em}
.h1{font-family:var(--f-disp); font-weight:800; font-size:clamp(2.25rem,8vw,var(--fs-2xl)); line-height:1.15; margin:0; text-wrap:balance}
.sub{color:var(--dim); margin:.9rem 0 0; max-width:34em}
.kei-big{font-family:var(--f-body); font-size:var(--fs-xs); letter-spacing:.5em; color:var(--dim); margin:0 0 1rem}
.oneline{font-family:var(--f-disp); font-size:clamp(1.125rem,3vw,var(--fs-l)); color:var(--dim); margin:1.1rem 0 0; max-width:26em}

/* ══ 見る場所 ══ */
.places{display:flex; flex-wrap:wrap; gap:0 3.5rem; list-style:none; margin:0; padding:0}
.places a{
  display:inline-flex; align-items:baseline; gap:.8rem;
  font-family:var(--f-disp); font-size:var(--fs-m); font-weight:600;
  text-decoration:none; padding-block:.5rem; border-bottom:1px solid transparent;
}
.places a:hover{border-bottom-color:var(--bone)}
.places .handle{font-family:var(--f-data); font-size:var(--fs-s); color:var(--dim)}

/* ══ 絞り込み ══ */
.filters{display:flex; flex-wrap:wrap; gap:0 .5rem; margin:0 0 1.5rem}
.fbtn{
  font-family:var(--f-body); font-size:var(--fs-s); letter-spacing:.14em;
  color:var(--dim); background:none; border:1px solid var(--rule);
  padding:.45rem 1.1rem; cursor:pointer; line-height:1.4;
}
.fbtn:hover{color:var(--ink)}
.fbtn.is-on{color:var(--ink); border-color:var(--rule-hard); background:var(--gloss)}

/* ══ 生き物 ══ カードにしない。仕切り線だけ ══ */
.beings{list-style:none; margin:0; padding:0}
.being{display:grid; grid-template-columns:3.4rem 1fr; gap:0 1.75rem; padding-block:1.75rem; border-top:1px solid var(--rule); scroll-margin-top:1.5rem}
.being:first-child{border-top:0}
.being[hidden]{display:none}   /* display:grid が [hidden] に勝つので明示する */
.rail{display:flex; flex-direction:column; gap:.55rem; padding-top:.7rem}
.kei{font-family:var(--f-body); font-size:var(--fs-xs); letter-spacing:.3em; color:var(--dim); border:1px solid var(--rule); padding:.2rem 0; text-align:center; width:2.6rem}
.being[data-kei="量"] .kei{background:var(--gloss)}
.name{font-family:var(--f-disp); font-weight:800; font-size:var(--fs-l); line-height:1.3; margin:0}
.name a{text-decoration:none; border-bottom:1px solid transparent}
.name a:hover{border-bottom-color:var(--bone)}
.can{margin:.55rem 0 0; max-width:34em}
.cant{margin:.15rem 0 0; color:var(--dim); font-family:var(--f-disp); max-width:34em}
.story{margin:.9rem 0 0; font-family:var(--f-data); font-size:var(--fs-s); color:var(--dim); display:flex; flex-wrap:wrap; align-items:center; gap:.75rem}
.story .t{font-family:var(--f-body)}
.status{font-family:var(--f-data); font-size:var(--fs-xs); letter-spacing:.14em; border:1px solid var(--rule); padding:.1rem .5rem; color:var(--dim)}
.more{margin:2.25rem 0 0}
.more a{font-family:var(--f-disp); font-size:var(--fs-m); font-weight:600; text-decoration:none; border-bottom:1px solid var(--rule-hard); padding-bottom:.2rem}
.more a:hover{border-bottom-color:var(--bone)}

/* ══ できること / できないこと ══ 1体ページの主役 ══ */
.big-can{font-family:var(--f-disp); font-weight:600; font-size:clamp(1.25rem,3.4vw,var(--fs-l)); line-height:1.55; margin:0; max-width:24em; text-wrap:balance}
.big-cant{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.25rem,3.4vw,var(--fs-l)); line-height:1.55; margin:0; max-width:24em; color:var(--dim); text-wrap:balance}
.storyline{font-family:var(--f-disp); font-weight:600; font-size:var(--fs-m); margin:0}

/* ══ その他 ══ */
.specs{margin:0; display:grid; gap:0}
.spec{display:grid; grid-template-columns:5rem 1fr; gap:0 1.75rem; padding-block:.9rem; border-top:1px solid var(--rule)}
.spec:first-child{border-top:0}
.spec dt{font-family:var(--f-data); font-size:var(--fs-xs); letter-spacing:.16em; color:var(--dim); padding-top:.35rem}
.spec dd{margin:0; max-width:34em}

/* ══ 三つの出し方 ══ */
.forms{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0}
.form{border-left:1px solid var(--rule); padding-inline:1.75rem 1.75rem}
.form:first-child{border-left:0; padding-left:0}
.form h3{font-family:var(--f-disp); font-size:var(--fs-m); font-weight:800; margin:0 0 .5rem}
.form dl{margin:.9rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem}
.form dt{font-family:var(--f-data); font-size:var(--fs-xs); color:var(--dim); letter-spacing:.1em}
.form dd{margin:0; font-size:var(--fs-s)}
.form p{margin:0; color:var(--dim); font-size:var(--fs-s)}

/* ══ 前後 ══ */
.pager{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--rule); padding-block:2rem 0; margin-top:1rem}
.pager a{font-family:var(--f-data); font-size:var(--fs-s); color:var(--dim); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:.15rem}
.pager a:hover{color:var(--ink); border-bottom-color:var(--bone)}

/* ══ 足元 ══ */
footer{border-top:1px solid var(--rule); margin-top:clamp(2rem,6vw,4rem); padding-block:2.5rem 4rem}
.sign{font-family:var(--f-data); font-size:var(--fs-xs); color:var(--dim); letter-spacing:.2em; margin:0}

@media (max-width:34rem){
  .being{grid-template-columns:1fr; gap:.75rem}
  .rail{flex-direction:row; align-items:center; gap:1rem; padding-top:0}
  .form{border-left:0; padding-inline:0; padding-bottom:2rem}
  .places{gap:0 2rem}
  .spec{grid-template-columns:1fr; gap:.15rem}
  .nav{gap:1rem}
}