@charset "utf-8";
/* ============================================================
   site.css — ニッポニテス／異常巻きアンモナイト
   FUJIYAMA PROJECTS
   地色：濡れた頁岩。文字：骨。差し色：朱（切った面）と水（規則）。
   ============================================================ */

:root{
  --sumi:#111619;
  --iwa:#192126;
  --iwa2:#212B31;
  --sen:#2E3A40;
  --hone:#E6E0D2;
  --hai:#93A09B;
  --hai2:#6B7873;
  --shu:#D8442E;
  --mizu:#7FB3C0;
  --maxw:1080px;
  --disp:"Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --body:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mono:"Roboto Mono", "SFMono-Regular", Consolas, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sumi); color:var(--hone);
  font-family:var(--body); font-size:16px; line-height:1.9;
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
}
img{max-width:100%}
a{color:var(--mizu); text-decoration:none; border-bottom:1px solid rgba(127,179,192,.35)}
a:hover{border-bottom-color:var(--mizu)}
:focus-visible{outline:2px solid var(--mizu); outline-offset:3px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---------- ヘッダ ---------- */
header.bar{
  position:sticky; top:0; z-index:50;
  background:rgba(17,22,25,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sen);
}
.bar .in{
  max-width:var(--maxw); margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:nowrap;
}
.mark{
  font-family:var(--disp); font-size:17px; font-weight:700;
  letter-spacing:.06em; color:var(--hone); border:0; white-space:nowrap;
}
.mark span{color:var(--shu)}
nav.site{display:flex; gap:16px; flex:1 1 auto; flex-wrap:wrap}
nav.site a{
  color:var(--hai); border:0; font-size:13.5px; letter-spacing:.06em;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
nav.site a:hover{color:var(--hone)}
nav.site a[aria-current="page"]{color:var(--hone); border-bottom-color:var(--shu)}

/* ---------- 深度スイッチ ---------- */
.depth{display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto}
.depth .dlab{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--hai2); text-transform:uppercase;
}
.seg{display:flex; border:1px solid var(--sen); border-radius:2px; overflow:hidden}
.seg button{
  font-family:var(--body); font-size:12.5px; letter-spacing:.1em;
  background:transparent; color:var(--hai); border:0; cursor:pointer;
  padding:5px 11px; line-height:1.6; border-right:1px solid var(--sen);
}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--hone); background:rgba(127,179,192,.06)}
.seg button[aria-pressed="true"]{background:var(--shu); color:#fff}

/* ---------- 深度による出し分け ---------- */
[data-d]{display:none}
body[data-depth="1"] [data-d~="1"],
body[data-depth="2"] [data-d~="2"],
body[data-depth="3"] [data-d~="3"]{display:block}
body[data-depth="1"] li[data-d~="1"],
body[data-depth="2"] li[data-d~="2"],
body[data-depth="3"] li[data-d~="3"]{display:list-item}
body[data-depth="1"] tr[data-d~="1"],
body[data-depth="2"] tr[data-d~="2"],
body[data-depth="3"] tr[data-d~="3"]{display:table-row}
body[data-depth="1"] .di[data-d~="1"],
body[data-depth="2"] .di[data-d~="2"],
body[data-depth="3"] .di[data-d~="3"]{display:inline}

/* ---------- 見出し・本文 ---------- */
h1,h2,h3{font-family:var(--disp); font-weight:700; line-height:1.42; letter-spacing:.03em; margin:0}
h1{font-size:clamp(30px,5.4vw,52px)}
h2{font-size:clamp(22px,3.2vw,31px); margin:0 0 18px}
h3{font-size:18px; margin:0 0 10px; letter-spacing:.05em}
p{margin:0 0 1.25em}
.lead{font-size:17.5px; color:#D6D0C2}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  color:var(--hai2); text-transform:uppercase; margin:0 0 14px;
}
.sci{font-style:italic}
.note{font-size:13.5px; color:var(--hai); line-height:1.85}
.rule{height:1px; background:var(--sen); border:0; margin:0}

section{padding:64px 0}
section.tight{padding:40px 0}

/* ---------- ヒーロー ---------- */
.hero{position:relative; min-height:min(84vh,760px); display:grid; align-items:center; overflow:hidden}
#heroGL{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero .veil{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(17,22,25,.95) 0%, rgba(17,22,25,.72) 46%, rgba(17,22,25,0) 78%);
  pointer-events:none;
}
.hero .txt{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%}
.hero h1{max-width:14em}
.hero .sub{max-width:30em; margin-top:20px; color:#CFC9BB}
.hint{
  position:absolute; right:24px; bottom:20px; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--hai2);
}

/* ---------- カード ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2px; background:var(--sen)}
.card{
  background:var(--iwa); padding:26px 24px 30px; display:block; border:0;
  transition:background .18s;
}
.card:hover{background:var(--iwa2); border:0}
.card .no{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--shu)}
.card h3{margin:10px 0 8px; color:var(--hone)}
.card p{margin:0; font-size:14px; color:var(--hai); line-height:1.8}

/* ---------- 実験台（モデル） ---------- */
.bench{display:grid; grid-template-columns:1fr 340px; gap:2px; background:var(--sen); border:1px solid var(--sen)}
.stage{position:relative; background:var(--iwa); min-height:520px; overflow:hidden}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
.stage .tag{
  position:absolute; left:14px; top:12px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; color:var(--hai2); pointer-events:none;
}
.stage[data-nogl] .fallback{display:block}
.fallback{display:none; padding:40px; color:var(--hai); font-size:14px}
.panel{background:var(--iwa); padding:20px 18px 26px; overflow:auto; max-height:min(86vh,780px)}
.panel h3{font-family:var(--body); font-size:12px; letter-spacing:.16em; color:var(--hai2); margin:0 0 14px; font-weight:500}

.presets{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-bottom:22px; background:var(--sen)}
.presets button{
  background:var(--iwa2); color:var(--hone); border:0; cursor:pointer;
  font-family:var(--body); font-size:12.5px; padding:10px 8px; line-height:1.5;
  letter-spacing:.04em;
}
.presets button:hover{background:#2A343A}
.presets button[aria-pressed="true"]{background:var(--shu); color:#fff}
.presets button i{display:block; font-style:normal; font-family:var(--mono); font-size:9.5px; color:rgba(230,224,210,.5); letter-spacing:.1em}
.presets button[aria-pressed="true"] i{color:rgba(255,255,255,.72)}

.ctl{margin:0 0 15px}
.ctl .row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:3px}
.ctl label{font-size:12.5px; color:var(--hone)}
.ctl output{font-family:var(--mono); font-size:11.5px; color:var(--mizu)}
.ctl .sym{font-family:var(--mono); font-size:10px; color:var(--hai2); letter-spacing:.1em}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:14px;
  background:transparent; cursor:pointer; margin:0; display:block;
}
input[type=range]::-webkit-slider-runnable-track{height:1px; background:var(--sen)}
input[type=range]::-moz-range-track{height:1px; background:var(--sen)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; background:var(--shu);
  border-radius:50%; margin-top:-5px;
}
input[type=range]::-moz-range-thumb{width:11px; height:11px; background:var(--shu); border:0; border-radius:50%}

.toggles{display:flex; flex-direction:column; gap:9px; margin:20px 0 0; padding-top:18px; border-top:1px solid var(--sen)}
.toggles label{display:flex; align-items:center; gap:9px; font-size:12.5px; cursor:pointer; color:var(--hone)}
.toggles input{accent-color:var(--shu); width:14px; height:14px}

#tplot{width:100%; height:88px; display:block; margin-top:20px; padding-top:18px; border-top:1px solid var(--sen)}

/* ---------- 図・データ ---------- */
.fig{background:var(--iwa); border:1px solid var(--sen); padding:24px; margin:0 0 26px}
.fig figcaption{font-size:13px; color:var(--hai); margin-top:16px; line-height:1.8}
.fig.photo{padding:14px}
.fig.photo img{display:block; width:100%; height:auto; background:#0C0F10}
.fig.photo figcaption{padding:0 6px}
.gal2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:26px 0 18px}
.gal2 .fig{margin:0}
@media(max-width:760px){.gal2{grid-template-columns:1fr}}
.two{display:grid; grid-template-columns:1fr 1fr; gap:26px}

table.data{width:100%; border-collapse:collapse; font-size:14px; margin:0 0 8px}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 8px}
.scrollx table.data{min-width:640px; margin:0}
table.data th,table.data td{
  text-align:left; padding:9px 10px; border-bottom:1px solid var(--sen); vertical-align:top;
}
table.data th{color:var(--hai); font-weight:500; font-size:12.5px; letter-spacing:.04em; white-space:nowrap}
table.data td.num{font-family:var(--mono); font-size:12.5px; color:var(--mizu); white-space:nowrap}
table.data caption{text-align:left; font-size:12px; color:var(--hai2); padding-bottom:10px; letter-spacing:.08em; font-family:var(--mono)}

pre.eq{
  font-family:var(--mono); font-size:12.5px; line-height:2; color:var(--hone);
  background:var(--iwa); border-left:2px solid var(--shu); padding:16px 18px;
  overflow-x:auto; margin:0 0 20px;
}
.kv{font-family:var(--mono); font-size:12.5px; color:var(--mizu)}

/* ---------- 年表 ---------- */
.tl{border-left:1px solid var(--sen); padding-left:0; margin:0; list-style:none}
.tl li{position:relative; padding:0 0 34px 26px}
.tl li::before{
  content:""; position:absolute; left:-4px; top:11px; width:7px; height:7px;
  background:var(--sumi); border:1px solid var(--hai2); border-radius:50%;
}
.tl li.hit::before{background:var(--shu); border-color:var(--shu)}
.tl .y{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--shu)}
.tl h3{margin:4px 0 6px; font-size:17px}
.tl p{margin:0; font-size:14.5px; color:#C9C3B6}

/* ---------- 文献 ---------- */
ol.ref{margin:0; padding:0 0 0 1.4em; font-size:13.5px; line-height:1.95; color:#CFC9BB}
ol.ref li{margin-bottom:12px}
ol.ref .j{color:var(--hai)}

/* ---------- 引き ---------- */
.pull{
  font-family:var(--disp); font-size:clamp(20px,3.4vw,30px); line-height:1.62;
  color:var(--hone); margin:0; padding:34px 0 34px 26px; border-left:2px solid var(--shu);
}

.cta{
  display:inline-block; border:1px solid var(--shu); color:var(--hone);
  padding:11px 24px; font-size:14px; letter-spacing:.08em; margin-top:8px;
}
.cta:hover{background:var(--shu); color:#fff; border-color:var(--shu)}

/* ---------- 脚 ---------- */
footer.foot{border-top:1px solid var(--sen); padding:44px 0 60px; margin-top:20px}
footer.foot .cols{display:grid; grid-template-columns:1.4fr 1fr; gap:34px}
footer.foot p{font-size:12.5px; color:var(--hai); line-height:1.95; margin:0 0 12px}
footer.foot .lic{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--hai2)}

/* ---------- 応答 ---------- */
@media (max-width:900px){
  .bench{grid-template-columns:1fr}
  .stage{min-height:400px; height:min(62vh,460px)}
  .panel{max-height:none}
  .two,footer.foot .cols{grid-template-columns:1fr}
  .hero{align-items:end; padding-bottom:44px; min-height:min(88vh,760px)}
  #heroGL{inset:0 0 auto 0; height:50%}
  .hero .veil{background:linear-gradient(180deg, rgba(17,22,25,.10) 0%, rgba(17,22,25,.30) 34%, rgba(17,22,25,.96) 54%)}
  .bar .in{gap:10px; padding:9px 16px; flex-wrap:wrap}
  .mark{font-size:15px}
  .seg button{padding:5px 9px; font-size:12px; letter-spacing:.04em}
  nav.site{order:3; flex-basis:100%; gap:14px}
  .depth .dlab{display:none}
  .wrap{padding:0 18px}
  section{padding:46px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}