/* フォントは functions.php で wp_enqueue（Google Fonts）。CSSからの@importは外した */
:root{
  --bg:#0f1318; --surface:#171d25; --surface-2:#1e2631; --line:#2b3542;
  --ink:#eef2f6; --dim:#8593a2; --dim-2:#5f6c7b;
  /* 三層を意味する層コード色（装飾ではなく層の識別） */
  --l1:#d8a533;  /* 不変の核・正本＝真鍮金 */
  --l2:#5aa9e6;  /* 機能＝鋼青 */
  --l3:#64cf9d;  /* 職種提示＝セージ緑 */
  --slab:"Zilla Slab", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --wrap:1120px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px;}
.mono{font-family:var(--mono);}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim);
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(15,19,24,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px;}
.logo{display:flex; align-items:baseline; gap:10px;}
.logo b{font-family:var(--slab); font-weight:700; font-size:18px; letter-spacing:-.01em;}
.logo .dom{font-family:var(--mono); font-size:11px; color:var(--dim);}
.topnav{display:flex; align-items:center; gap:22px;}
.topnav a{font-size:13px; color:var(--dim); transition:color .15s;}
.topnav a:hover{color:var(--ink);}
.btn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  border:1px solid var(--line); border-radius:8px; padding:9px 15px;
  background:var(--surface); color:var(--ink); cursor:pointer; transition:.16s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{border-color:var(--l3); color:var(--l3);}
.btn-solid{background:var(--l1); border-color:var(--l1); color:#20180a; font-weight:600;}
.btn-solid:hover{background:#e6b544; border-color:#e6b544; color:#20180a;}
@media(max-width:720px){ .topnav a:not(.btn){display:none;} }

/* ---------- hero ---------- */
.hero{padding:74px 0 40px; position:relative;}
.hero h1{
  font-family:var(--slab); font-weight:700; font-size:clamp(34px,6vw,62px);
  line-height:1.04; letter-spacing:-.015em; margin:16px 0 0; max-width:15ch;
}
.hero h1 .u{position:relative; white-space:nowrap;}
.hero h1 .u::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.14em; background:var(--l1); opacity:.85;}
.hero .lead{font-size:clamp(15px,2vw,18px); color:var(--dim); margin:20px 0 0; max-width:46ch;}
.hero .lead b{color:var(--ink); font-weight:600;}

/* ---------- strata signature ---------- */
.strata{
  margin:40px 0 0; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#141a22,#10151b);
}
.strata-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.05em;
}
.strata-head .tick{color:var(--l3);}
.band{position:relative; padding:20px 18px; border-bottom:1px solid var(--line);}
.band:last-child{border-bottom:0;}
.band .lab{font-family:var(--mono); font-size:11px; letter-spacing:.08em; display:flex; align-items:center; gap:9px; margin-bottom:10px;}
.chip{width:10px; height:10px; border-radius:2px; flex:none;}
.band .role{color:var(--dim); font-size:11px;}
/* L1 bedrock */
.band-1{background:
  repeating-linear-gradient(135deg, rgba(216,165,51,.05) 0 10px, transparent 10px 20px), #131820;}
.band-1 .chip{background:var(--l1);}
.axioms{display:flex; flex-wrap:wrap; gap:8px;}
.axiom{
  font-family:var(--mono); font-size:12px; color:#e7d3a2;
  border:1px solid rgba(216,165,51,.4); border-radius:7px; padding:6px 11px; background:rgba(216,165,51,.06);
}
.axiom b{color:var(--l1);}
/* L2 function */
.band-2 .chip{background:var(--l2);}
.fn-row{display:flex; flex-wrap:wrap; gap:8px;}
.fn{
  font-family:var(--mono); font-size:12px; color:#bfe0fb;
  border:1px solid rgba(90,169,230,.35); border-radius:7px; padding:6px 11px; background:rgba(90,169,230,.06);
}
/* L3 surface — occupation labels cycle */
.band-3{background:linear-gradient(180deg, rgba(100,207,157,.07), transparent);}
.band-3 .chip{background:var(--l3);}
.surface{display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:44px;}
.occ{
  font-family:var(--slab); font-weight:600; font-size:clamp(20px,3.4vw,30px); color:var(--l3);
  letter-spacing:-.01em; transition:opacity .5s, transform .5s;
}
.occ-sub{font-family:var(--mono); font-size:11px; color:var(--dim); border-left:1px solid var(--line); padding-left:14px;}
.derive-arrow{font-family:var(--mono); font-size:11px; color:var(--dim-2); margin-top:12px; display:flex; align-items:center; gap:8px;}
.derive-arrow .k{color:var(--l1);} .derive-arrow .v{color:var(--l3);}

/* ---------- ledger stats ---------- */
.ledger{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:34px 0 0; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.ledger .cell{padding:18px 16px; border-right:1px solid var(--line);}
.ledger .cell:last-child{border-right:0;}
.ledger .n{font-family:var(--slab); font-weight:700; font-size:30px; line-height:1;}
.ledger .k{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:7px; letter-spacing:.04em;}
@media(max-width:640px){ .ledger{grid-template-columns:repeat(2,1fr);} .ledger .cell:nth-child(2){border-right:0;} .ledger .cell:nth-child(1),.ledger .cell:nth-child(2){border-bottom:1px solid var(--line);} }

/* ---------- section frame ---------- */
.section{padding:64px 0; border-top:1px solid var(--line);}
.section-head{display:flex; align-items:baseline; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.section-head h2{font-family:var(--slab); font-weight:600; font-size:clamp(22px,3.2vw,30px); margin:0; letter-spacing:-.01em;}
.section-head .idx{font-family:var(--mono); font-size:12px; color:var(--l1);}

/* ---------- three-layer thesis ---------- */
.layers{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.layer-card{border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--surface); position:relative;}
.layer-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px;}
.layer-card.l1::before{background:var(--l1);}
.layer-card.l2::before{background:var(--l2);}
.layer-card.l3::before{background:var(--l3);}
.layer-card .tag{font-family:var(--mono); font-size:11px; letter-spacing:.06em;}
.layer-card.l1 .tag{color:var(--l1);} .layer-card.l2 .tag{color:var(--l2);} .layer-card.l3 .tag{color:var(--l3);}
.layer-card h3{font-family:var(--slab); font-weight:600; font-size:18px; margin:8px 0 8px;}
.layer-card p{font-size:13.5px; color:var(--dim); margin:0;}
@media(max-width:800px){ .layers{grid-template-columns:1fr;} }

/* ---------- browse: 3 entry points ---------- */
.entries{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.entry{border:1px solid var(--line); border-radius:12px; padding:22px; background:var(--surface); transition:.18s; display:block;}
.entry:hover{border-color:var(--l3); transform:translateY(-2px);}
.entry .big{font-family:var(--slab); font-weight:700; font-size:34px; line-height:1;}
.entry .t{font-size:15px; font-weight:600; margin:10px 0 4px;}
.entry .d{font-size:13px; color:var(--dim);}
.entry .go{font-family:var(--mono); font-size:12px; color:var(--l3); margin-top:14px; display:inline-block;}
@media(max-width:800px){ .entries{grid-template-columns:1fr;} }

/* ---------- work modes ---------- */
.modes{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.mode{border:1px solid var(--line); border-radius:10px; padding:15px; background:var(--surface); transition:.15s; display:block; text-decoration:none; color:inherit;}
.mode:hover{border-color:var(--l2); transform:translateY(-1px);}
.mode .m{font-family:var(--slab); font-weight:600; font-size:15px;}
.mode .c{font-family:var(--mono); font-size:12px; color:var(--dim); margin-top:5px;}
.mode .c b{color:var(--l2); font-weight:600;}
@media(max-width:820px){ .modes{grid-template-columns:repeat(2,1fr);} }

/* ---------- featured clusters (ledger list) ---------- */
.clist{border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.crow{display:grid; grid-template-columns:44px 1fr auto auto; gap:16px; align-items:center;
  padding:15px 18px; border-bottom:1px solid var(--line); transition:.15s;}
.crow:last-child{border-bottom:0;}
.crow:hover{background:var(--surface);}
.crow .rank{font-family:var(--mono); font-size:13px; color:var(--l1);}
.crow .name{font-family:var(--slab); font-weight:600; font-size:16px;}
.crow .tier{font-family:var(--mono); font-size:10px; letter-spacing:.1em; border:1px solid var(--l1); color:var(--l1); border-radius:4px; padding:2px 7px; margin-left:9px;}
.crow .meta{font-family:var(--mono); font-size:12px; color:var(--dim); text-align:right;}
.crow .score{font-family:var(--slab); font-weight:700; font-size:20px; color:var(--l3);}
.crow .live{font-family:var(--mono); font-size:10px; color:var(--l3); border:1px solid rgba(100,207,157,.4); border-radius:4px; padding:2px 7px; background:rgba(100,207,157,.08);}
.crow .soon{font-family:var(--mono); font-size:10px; color:var(--dim-2); border:1px solid var(--line); border-radius:4px; padding:2px 7px;}
@media(max-width:720px){
  .crow{grid-template-columns:34px 1fr auto; gap:10px;}
  .crow .meta{display:none;}
  .crow .tier{display:none;}
}

/* ---------- two audiences ---------- */
.aud{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.aud-card{border:1px solid var(--line); border-radius:14px; padding:26px; background:var(--surface);}
.aud-card.showcase{background:linear-gradient(180deg, rgba(216,165,51,.08), var(--surface)); border-color:rgba(216,165,51,.35);}
.aud-card .who{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);}
.aud-card h3{font-family:var(--slab); font-weight:700; font-size:23px; margin:10px 0 10px;}
.aud-card p{font-size:14px; color:var(--dim); margin:0 0 20px;}
.aud-card .cta{margin-top:4px;}
@media(max-width:760px){ .aud{grid-template-columns:1fr;} }

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); padding:40px 0 56px;}
.foot .grid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.foot .arch{max-width:52ch; font-size:13px; color:var(--dim);}
.foot .arch b{color:var(--ink);}
.foot .fmeta{font-family:var(--mono); font-size:11px; color:var(--dim-2); line-height:1.9; text-align:right;}
@media(max-width:640px){ .foot .fmeta{text-align:left;} }

:focus-visible{outline:2px solid var(--l3); outline-offset:3px;}
@media(prefers-reduced-motion:reduce){ .occ{transition:none;} html{scroll-behavior:auto;} }

/* reveal */
.reveal{opacity:0; transform:translateY(14px);}
.reveal.in{opacity:1; transform:none; transition:opacity .6s, transform .6s;}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none;} }