/* LIL 変換不変分析エンジン — 静かな組版。研究所の紙面に近づける。 */
:root{
  --paper:#f6f4ef;
  --paper-2:#efece4;
  --ink:#1c1b18;
  --ink-2:#4a4842;
  --ink-3:#84806f;
  --rule:#d9d4c7;
  --rule-2:#e7e3d8;

  --moss:#5b6b4e;      /* 不変 */
  --indigo:#3f4d6e;    /* 代替 */
  --graphite:#767268;  /* 消滅 */
  --plum:#6d4a60;      /* 新生 */
  --gold:#9a7b3f;

  --serif:"Noto Serif JP","Hiragino Mincho ProN",serif;
  --display:"Cormorant Garamond","Noto Serif JP",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  --wide:1120px;
  --read:760px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.85;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.4;margin:0}
p{margin:0 0 .9em}
button,input,textarea,select{font:inherit;color:inherit}

/* ---------- header / footer ---------- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--wide);margin:0 auto;padding:1.4rem 1.4rem 1rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-mark{
  width:34px;height:34px;flex:none;border:1px solid var(--ink);border-radius:2px;
  display:grid;place-items:center;font-family:var(--display);font-size:19px;letter-spacing:.02em;
}
.brand-text b{display:block;font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.04em}
.brand-text i{display:block;font-family:var(--display);font-style:italic;font-size:12px;color:var(--ink-3);letter-spacing:.08em}
.site-nav{display:flex;gap:1.2rem;font-size:13px;letter-spacing:.06em}
.site-nav a{text-decoration:none;color:var(--ink-2);padding-bottom:2px;border-bottom:1px solid transparent}
.site-nav a:hover{border-color:var(--ink-3)}
.site-foot{
  max-width:var(--wide);margin:5rem auto 0;padding:2rem 1.4rem 3rem;border-top:1px solid var(--rule);
}
.foot-line{font-family:var(--serif);font-size:14px;color:var(--ink-2);margin:0 0 .4rem}
.foot-meta{font-size:12px;color:var(--ink-3);margin:0}

main{max-width:var(--wide);margin:0 auto;padding:0 1.4rem}

/* ---------- hero ---------- */
.hero{padding:2rem 0 1rem;border-top:1px solid var(--rule)}
.hero-kicker{font-family:var(--display);font-style:italic;letter-spacing:.12em;color:var(--ink-3);font-size:13px;margin-bottom:.8rem}
.hero h1{font-size:clamp(28px,5vw,44px);letter-spacing:.02em;margin-bottom:1rem}
.hero-lead{max-width:var(--read);color:var(--ink-2);font-size:15px}
.hero-lead strong{font-weight:500;color:var(--ink)}

/* 主役のアニメーション: 分解 → 変換 → 消滅 → 不変 → 新生 → 再構成 */
.stage{
  position:relative;height:190px;margin:2.2rem 0 1.4rem;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  overflow:hidden;
}
.stage .tile{
  position:absolute;top:50%;left:50%;width:52px;height:34px;margin:-17px 0 0 -26px;
  border:1px solid var(--ink-3);background:var(--paper-2);border-radius:2px;
  display:grid;place-items:center;font-size:9.5px;letter-spacing:.04em;color:var(--ink-2);
  animation:tile 14s ease-in-out infinite;
}
.stage .tile.keep{border-color:var(--moss);color:var(--moss);animation-name:tile-keep}
.stage .tile.gone{animation-name:tile-gone}
.stage .tile.born{border-color:var(--plum);color:var(--plum);animation-name:tile-born;opacity:0}
.stage-label{
  position:absolute;left:0;bottom:8px;width:100%;text-align:center;
  font-family:var(--display);letter-spacing:.24em;font-size:11px;color:var(--ink-3);
}
.stage-label span{position:absolute;left:0;width:100%;opacity:0;animation:phase 14s linear infinite}
@keyframes phase{0%,4%{opacity:0}6%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes tile{
  0%,8%{transform:translate(0,0) scale(1);opacity:1}
  22%,62%{transform:translate(calc(var(--x) * var(--k, 1)),calc(var(--y) * var(--k, 1))) scale(1);opacity:1}
  82%,100%{transform:translate(0,0) scale(1);opacity:1}
}
@keyframes tile-keep{
  0%,8%{transform:translate(0,0);opacity:1;box-shadow:none}
  22%,62%{transform:translate(calc(var(--x) * var(--k, 1)),calc(var(--y) * var(--k, 1)));opacity:1;box-shadow:0 0 0 3px rgba(91,107,78,.10)}
  82%,100%{transform:translate(0,0);opacity:1;box-shadow:none}
}
@keyframes tile-gone{
  0%,8%{transform:translate(0,0);opacity:1}
  22%{transform:translate(calc(var(--x) * var(--k, 1)),calc(var(--y) * var(--k, 1)));opacity:1}
  40%,74%{transform:translate(calc(var(--x) * var(--k, 1)),calc(var(--y) * var(--k, 1))) scale(.8);opacity:0}
  86%,100%{transform:translate(0,0);opacity:1}
}
@keyframes tile-born{
  0%,30%{transform:translate(calc(var(--x) * var(--k, 1)),calc(var(--y) * var(--k, 1))) scale(.6);opacity:0}
  44%,66%{transform:translate(calc(var(--x) * var(--k, 1)),calc(var(--y) * var(--k, 1))) scale(1);opacity:1}
  82%,100%{transform:translate(0,0) scale(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .stage .tile,.stage-label span{animation:none!important}
  .stage .tile.born{opacity:.5}
  .stage-label span:first-child{opacity:1}
}

/* ---------- form ---------- */
.ask{margin:1.6rem 0 3rem;max-width:var(--read)}
.ask label{display:block;font-size:13px;letter-spacing:.06em;color:var(--ink-2);margin-bottom:.5rem}
.ask-main{display:flex;gap:.6rem;flex-wrap:wrap}
.ask-main input{
  flex:1 1 260px;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--ink);
  padding:.6rem .2rem;font-family:var(--serif);font-size:20px;
}
.ask-main input:focus{outline:none;border-color:var(--moss)}
.btn{
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:.7rem 1.6rem;border-radius:2px;cursor:pointer;letter-spacing:.1em;font-size:13px;
}
.btn:hover{background:var(--moss);border-color:var(--moss)}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.ask-more{margin-top:1.2rem}
.ask-more summary{cursor:pointer;font-size:13px;color:var(--ink-3);letter-spacing:.05em}
.ask-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-top:1rem}
.ask-grid label{font-size:12px;color:var(--ink-3)}
.ask-grid input,.ask-grid textarea{
  width:100%;background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;padding:.5rem .6rem;font-size:14px;
}
.ask-grid textarea{min-height:64px;resize:vertical}
.ask-note{font-size:12.5px;color:var(--ink-3);margin-top:.8rem}
.err{color:#8a3a2f;font-size:13px;margin-top:.6rem}

/* ---------- generic blocks ---------- */
.section{padding:2.6rem 0;border-top:1px solid var(--rule)}
.section-no{font-family:var(--display);font-size:12px;letter-spacing:.28em;color:var(--ink-3);display:block;margin-bottom:.4rem}
.section h2{font-size:clamp(20px,3vw,26px);margin-bottom:.3rem}
.section-sub{color:var(--ink-3);font-size:13px;margin-bottom:1.6rem}
.lead{max-width:var(--read);font-family:var(--serif);font-size:17px;line-height:1.9}

.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.card{border:1px solid var(--rule);border-radius:2px;padding:1rem 1.1rem;background:var(--paper-2)}
.card h3{font-size:15px;margin-bottom:.35rem}
.card p{font-size:13.5px;color:var(--ink-2);margin:0 0 .5rem}
.card .why{font-size:12.5px;color:var(--ink-3);border-top:1px dotted var(--rule);padding-top:.5rem;margin-top:.5rem}
.tag{display:inline-block;font-size:11px;letter-spacing:.08em;border:1px solid var(--rule);border-radius:99px;padding:.1rem .6rem;color:var(--ink-3);background:var(--paper);margin:0 .3rem .3rem 0}
.tag.moss{border-color:var(--moss);color:var(--moss)}
.tag.indigo{border-color:var(--indigo);color:var(--indigo)}
.tag.graphite{border-color:var(--graphite);color:var(--graphite)}
.tag.plum{border-color:var(--plum);color:var(--plum)}
.tag.gold{border-color:var(--gold);color:var(--gold)}

.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{padding:.45rem 0;border-bottom:1px dotted var(--rule);font-size:13.5px}
.list-plain li:last-child{border-bottom:0}
.k{color:var(--ink-3);font-size:12px;letter-spacing:.06em;display:block}

table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--rule-2);vertical-align:top}
th{font-weight:400;color:var(--ink-3);font-size:12px;letter-spacing:.06em;white-space:nowrap}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 4分類 ---------- */
.classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.class-col{border-top:2px solid var(--rule);padding-top:.8rem}
.class-col.invariant{border-color:var(--moss)}
.class-col.substitute{border-color:var(--indigo)}
.class-col.disappear{border-color:var(--graphite)}
.class-col.emerge{border-color:var(--plum)}
.class-col h3{font-family:var(--display);letter-spacing:.14em;font-size:14px;margin-bottom:.1rem}
.class-col .ja{font-size:12px;color:var(--ink-3);margin-bottom:.8rem;display:block}
.class-item{padding:.6rem 0;border-bottom:1px dotted var(--rule)}
.class-item b{font-weight:500;font-size:13.5px}
.class-item small{display:block;color:var(--ink-3);font-size:12px;line-height:1.7;margin-top:.2rem}

/* ---------- 目的の階段 ---------- */
.ladder{list-style:none;margin:0;padding:0}
.ladder li{position:relative;padding:.7rem 0 .7rem 3.2rem;border-bottom:1px dotted var(--rule)}
.ladder li:before{
  content:attr(data-level);position:absolute;left:0;top:.75rem;
  font-family:var(--display);font-size:12px;letter-spacing:.1em;color:var(--gold);
  border:1px solid var(--rule);border-radius:99px;padding:.05rem .55rem;background:var(--paper-2);
}
.ladder li.core{background:linear-gradient(90deg,rgba(91,107,78,.08),transparent)}
.ladder b{font-family:var(--serif);font-weight:400;font-size:15.5px}
.ladder small{display:block;color:var(--ink-3);font-size:12.5px}

/* ---------- 軌道 ---------- */
.orbit{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.6rem}
.orbit .step{flex:0 0 210px;border:1px solid var(--rule);border-radius:2px;padding:.8rem;background:var(--paper-2)}
.orbit .step b{display:block;font-family:var(--serif);font-size:14px;margin-bottom:.3rem}
.orbit .step small{font-size:12px;color:var(--ink-3);display:block;line-height:1.7}
.orbit .arrow{flex:0 0 18px;display:grid;place-items:center;color:var(--ink-3)}

/* ---------- before / after ---------- */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch}
.ba .arrow{display:grid;place-items:center;font-family:var(--display);color:var(--ink-3);font-size:22px}
.ba .side{border:1px solid var(--rule);padding:1rem;border-radius:2px}
.ba .side.after{background:var(--paper-2);border-color:var(--moss)}
.ba h3{font-family:var(--display);letter-spacing:.18em;font-size:13px;margin-bottom:.4rem}
@media(max-width:720px){.ba{grid-template-columns:1fr}.ba .arrow{transform:rotate(90deg)}}

/* ---------- 未来事業3案 ---------- */
.scenario{border:1px solid var(--rule);border-radius:2px;padding:1.2rem;background:var(--paper-2);margin-bottom:1rem}
.scenario.zero{border-color:var(--plum);background:linear-gradient(180deg,rgba(109,74,96,.05),transparent)}
.scenario h3{font-size:18px;margin-bottom:.2rem}
.scenario .type{font-family:var(--display);letter-spacing:.2em;font-size:11px;color:var(--ink-3);display:block;margin-bottom:.5rem}
.scenario .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-top:.9rem}
.scenario .cols h4{font-size:12px;color:var(--ink-3);letter-spacing:.06em;font-family:var(--sans);font-weight:400;margin-bottom:.3rem}
.scenario ul{margin:0;padding-left:1.1rem;font-size:13px;color:var(--ink-2)}
.scenario li{margin-bottom:.25rem}

/* ---------- 進行画面 ---------- */
.run-steps{list-style:none;margin:1.4rem 0 0;padding:0;max-width:var(--read)}
.run-steps li{display:flex;gap:.8rem;align-items:baseline;padding:.55rem 0;border-bottom:1px dotted var(--rule);font-size:14px}
.run-steps .no{font-family:var(--display);color:var(--ink-3);width:1.6rem;flex:none}
.run-steps .state{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
.run-steps li.DONE{color:var(--ink)}
.run-steps li.DONE .state{color:var(--moss)}
.run-steps li.RUN{color:var(--ink)}
.run-steps li.RUN .state{color:var(--gold)}
.run-steps li.WAIT{color:var(--ink-3)}
.run-steps li.ERROR .state{color:#8a3a2f}
.bar{height:2px;background:var(--rule);margin:1.2rem 0;max-width:var(--read)}
.bar i{display:block;height:100%;background:var(--moss);transition:width .6s ease}

/* ---------- 一覧 ---------- */
.rows{list-style:none;margin:0;padding:0}
.rows li{border-bottom:1px solid var(--rule-2);padding:.9rem 0}
.rows a{text-decoration:none;display:block}
.rows b{font-family:var(--serif);font-weight:400;font-size:17px}
.rows small{display:block;color:var(--ink-3);font-size:12.5px}
.rows .badge{font-size:11px;border:1px solid var(--rule);border-radius:99px;padding:0 .5rem;color:var(--ink-3);margin-left:.5rem}

/* ---------- 検査 ---------- */
.checks{list-style:none;margin:0;padding:0;font-size:13px}
.checks li{padding:.4rem 0;border-bottom:1px dotted var(--rule);display:flex;gap:.6rem}
.checks .ok{color:var(--moss)}
.checks .ng{color:#8a3a2f}
.checks .detail{margin-left:auto;color:var(--ink-3);font-size:12px;text-align:right}

.muted{color:var(--ink-3);font-size:13px}
.center{text-align:center}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.hint{border-left:2px solid var(--gold);padding:.4rem 0 .4rem .9rem;color:var(--ink-2);font-size:13.5px;margin:1rem 0;background:linear-gradient(90deg,rgba(154,123,63,.06),transparent)}

@media(max-width:680px){
  .stage{--k:.60;height:150px}
  .stage .tile{width:44px;height:28px;margin:-14px 0 0 -22px;font-size:8px}
  .stage-label{font-size:10px;letter-spacing:.16em}
  .site-nav{gap:.9rem;font-size:12px}
  .brand-text i{display:none}
  main{padding:0 1rem}
}

/* ---------- 図版(Geminiで作った銅版画調のプレート) ---------- */
.plate{margin:2rem 0 1.6rem;padding:0}
.plate img{
  display:block;width:100%;height:auto;
}
.plate.slim{max-width:var(--read);margin:1.2rem 0}
.plate figcaption{
  font-family:var(--display);letter-spacing:.22em;font-size:10.5px;color:var(--ink-3);
  text-align:center;margin-top:.2rem;
}
.rows li.with-thumb a{display:grid;grid-template-columns:140px 1fr;gap:1.1rem;align-items:center}
.rows .thumb{
  width:140px;aspect-ratio:16/9;object-fit:cover;object-position:center;
  background:var(--paper);
}
@media(max-width:560px){
  .rows li.with-thumb a{grid-template-columns:92px 1fr;gap:.8rem}
  .rows .thumb{width:92px}
}