:root{
  /* 真モノクロ・ダーク（Co-Star系・366踏襲） */
  --bg:#0a0a0a; --ink:#f1f0ec; --muted:#8b8b86; --hair:rgba(255,255,255,.16); --ph:#191919;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --jp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --jpser:"Shippori Mincho",serif;
}
/* 石はフルカラー（色で判別するためスウォッチ/写真はモノクロにしない） */
::selection{background:var(--ink); color:var(--bg)}
a{-webkit-tap-highlight-color:rgba(255,255,255,.2)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--jp); font-size:17px; line-height:1.8; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}

/* top bar */
.top{position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:14px 28px; background:var(--bg); border-bottom:1px solid var(--hair)}
.top__brand{font-family:var(--serif); font-size:1.6rem; text-decoration:none; color:var(--ink); line-height:1; letter-spacing:.01em}
.top__nav{display:flex; gap:18px}
.top__nav a{font-family:var(--mono); text-transform:uppercase; font-size:.71rem; letter-spacing:.14em; color:var(--ink);
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-decoration-color:var(--muted)}
.top__nav a:hover,.top__nav a:active{text-decoration-color:var(--ink)}

.wrap{max-width:1000px; margin:0 auto; padding:0 28px}

/* masthead */
.mast{padding:48px 0 10px}
.mast__kick{font-family:var(--mono); text-transform:uppercase; font-size:.73rem; letter-spacing:.2em; color:var(--muted); margin:0}
.mast__big{font-family:var(--serif); font-weight:400; font-size:clamp(3.4rem,12vw,8rem); line-height:.92; letter-spacing:.005em; margin:.1em 0 .18em}
.mast__big small{font-size:.34em; color:var(--muted); letter-spacing:.04em}
.mast__big.jp{font-family:var(--jpser); font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.18; letter-spacing:.02em}

/* 神社リスト（写真なし・編集的） */
.slist{list-style:none; margin:24px 0 0; padding:0}
.slist li{border-bottom:1px solid var(--hair)}
.slist li:first-child{border-top:1px solid var(--hair)}
.slist a{display:flex; gap:16px; align-items:flex-start; padding:18px 4px; text-decoration:none; transition:background .12s}
.slist a:hover{background:rgba(255,255,255,.05)}
.slist__thumb{width:104px; height:78px; object-fit:cover; flex:0 0 auto; background:var(--ph)}
.slist__body{min-width:0; flex:1}
.slist__h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.slist__n{font-family:var(--jpser); font-weight:600; font-size:1.22rem}
.slist a:hover .slist__n{text-decoration:underline; text-underline-offset:3px}
.slist__m{font-family:var(--mono); font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.slist__r{font-family:var(--jp); font-size:.9rem; color:var(--muted); line-height:1.7; margin-top:6px; max-width:54em}

/* 神社ヒーロー写真（詳細ページ） */
.shrine-hero{margin:0}
.shrine-hero img{width:100%; max-width:720px; aspect-ratio:16/10; object-fit:cover; background:var(--ph); display:block; border:1px solid var(--hair)}
.shrine-hero figcaption{margin-top:9px}

@media(max-width:780px){ .slist__thumb{width:80px; height:60px} }
.mast__sub{font-family:var(--jpser); font-size:1.18rem; margin:0}
.mast__sub span{font-family:var(--jp); color:var(--muted)}

/* fact rows */
.facts{margin-top:22px; border-top:1px solid var(--hair)}
.frow{display:flex; gap:22px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--hair)}
.frow__l{font-family:var(--mono); text-transform:uppercase; font-size:.71rem; letter-spacing:.13em; color:var(--muted); width:150px; flex:0 0 auto}
.frow__v{font-family:var(--jpser); font-size:1.16rem}
.frow__v a{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--muted)}
.frow__v a:hover{text-decoration-color:var(--ink)}
.frow__v em{font-style:normal; font-family:var(--jp); font-size:.82rem; color:var(--muted); margin-left:12px}

/* blocks */
.blk{border-top:1px solid var(--hair); padding:50px 0}
.lbl{display:flex; align-items:center; gap:12px; margin:0 0 26px}
.lbl__en{font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:.78rem; letter-spacing:.15em}
.lbl__star{color:var(--muted)}
.lbl__jp{font-family:var(--jp); font-size:.86rem; color:var(--muted)}
.note{font-family:var(--mono); font-size:.66rem; color:var(--muted); margin:16px 0 0; letter-spacing:.02em}
.empty{font-family:var(--jpser); color:var(--muted)}

/* prose */
.prose{font-family:var(--jp); font-size:1.06rem; line-height:2; max-width:42em; margin:0}
/* lore（神話・言い伝え）：明朝で物語の質感に。モノクロ維持・段落で改段（空白行）して可読性を確保 */
.lore__body{max-width:39em}
.lore__p{font-family:var(--jpser); font-size:1.1rem; line-height:2.0; margin:0; color:#dedcd5}
.lore__p + .lore__p{margin-top:1.3em}

/* stone hero（石ページ：スウォッチ/写真＋説明 横並び） */
.stone-hero{display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:start; margin-top:4px}
.sw{width:100%; aspect-ratio:1/1; background:var(--c,#8b8b86); display:block}
.sw img{width:100%; height:100%; object-fit:cover}
.tags{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0}
.tag{font-family:var(--mono); text-transform:uppercase; font-size:.64rem; letter-spacing:.1em; color:var(--muted); border:1px solid var(--hair); padding:5px 11px}
.src{font-family:var(--mono); font-size:.62rem; color:var(--muted); margin-top:22px; letter-spacing:.02em}
.stone-hero__l{display:flex; flex-direction:column; gap:8px}
.cr{font-family:var(--mono); font-size:.58rem; color:var(--muted); letter-spacing:.02em; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(255,255,255,.25); word-break:break-word}
.cr:hover{text-decoration-color:var(--muted)}

/* gift / buy（反転ホバー・366踏襲） */
.gift{display:inline-flex; gap:10px; align-items:center; border:1px solid var(--ink); background:rgba(255,255,255,.04);
  padding:.8em 1.2em; text-decoration:none; margin-top:22px; transition:.15s;
  font-family:var(--mono); text-transform:uppercase; font-size:.72rem; letter-spacing:.08em}
.gift:hover{background:var(--ink); color:var(--bg)}
.gift:active{transform:translateY(1px)}
.pr{font-family:var(--mono); font-size:.6rem; color:var(--muted); margin-left:10px; letter-spacing:.06em}

/* mono link（Noctiaブリッジ） */
.mlink{display:inline-block; font-family:var(--mono); text-transform:uppercase; font-size:.73rem; letter-spacing:.1em;
  border:1px solid var(--ink); padding:.78em 1.2em; text-decoration:none; margin-top:6px; transition:.15s}
.mlink:hover{background:var(--ink); color:var(--bg)}
.mlink:active{transform:translateY(1px)}
.bridge{margin-top:8px}
.bridge p{font-family:var(--jpser); font-size:1.08rem; margin:0 0 18px; max-width:34em}

/* card grid（石一覧・誕生石月・星座別） */
.ixgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:22px; margin:30px 0 6px}
.ix{text-decoration:none; color:var(--ink)}
.ix__sw{width:100%; aspect-ratio:4/5; background:var(--c,#8b8b86); display:block}
.ix__sw img{width:100%; height:100%; object-fit:cover}
.ix__d{font-family:var(--jpser); font-weight:600; display:block; margin-top:10px; font-size:1.05rem}
.ix__f{font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
.ix:hover .ix__d{text-decoration:underline; text-underline-offset:3px}
/* glyph card（ホロスコープ：惑星・星座のグリフを枠内中央に） */
.ix__sw.gly{display:flex; align-items:center; justify-content:center; background:var(--ph);
  font-family:var(--serif); font-size:3rem; color:var(--muted); transition:color .15s, background .15s;
  font-variant-emoji:text}
.ix:hover .ix__sw.gly{color:var(--ink)}

/* tile grid（月・星座インデックス：ヘアライン格子・反転ホバー） */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:30px}
.tile{display:flex; flex-direction:column; gap:5px; padding:26px 22px; background:var(--bg); text-decoration:none; transition:.15s}
.tile:hover{background:var(--ink); color:var(--bg)}
.tile__en{font-family:var(--mono); text-transform:uppercase; font-size:.64rem; letter-spacing:.12em; color:var(--muted)}
.tile__m{font-family:var(--serif); font-size:2rem; line-height:1; font-variant-emoji:text}
.tile__n{font-family:var(--mono); font-size:.62rem; color:var(--muted)}
.tile:hover .tile__en,.tile:hover .tile__n{color:var(--bg)}

/* explore */
.ex{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); column-gap:14px}
.ex li{border-bottom:1px solid var(--hair)}
.ex li:nth-child(-n+2){border-top:1px solid var(--hair)}
.ex a{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 14px;
  text-decoration:none; font-family:var(--jpser); font-size:1.08rem; transition:background .12s}
.ex a::after{content:"↗"; font-family:var(--mono); color:var(--muted); font-size:.9rem}
.ex a:hover,.ex a:active{background:rgba(255,255,255,.07)}
.ex a:hover::after{color:var(--ink)}

/* footer */
.foot{max-width:1000px; margin:54px auto 0; border-top:1px solid var(--ink); padding:34px 28px 64px}
.foot p{font-family:var(--mono); font-size:.69rem; color:var(--muted); letter-spacing:.03em; max-width:62em; margin:.55em 0}
.foot__b{font-family:var(--serif)!important; font-size:2.6rem!important; color:var(--ink)!important; margin-top:18px!important; letter-spacing:.02em}

.crumb{font-family:var(--mono); text-transform:uppercase; font-size:.68rem; letter-spacing:.1em; color:var(--muted); margin:0 0 8px}
.crumb a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--muted)}

/* 366 誕生日ピラー */
.fig366{margin:0}
.fig366 img,.fig366__none{width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--ph); display:block}
.fig366__none{display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; font-family:var(--jpser); color:var(--muted); font-size:.95rem}
.fig366 b{font-family:var(--jpser); font-weight:600; font-size:1.04rem; display:block; margin-top:11px}
.fig366__m{color:var(--muted); font-size:.84rem; line-height:1.5; display:block; margin-top:2px}
.rows366{list-style:none; margin:0; padding:0}
.rows366 li{display:flex; gap:20px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--hair)}
.rows366 li:first-child{border-top:1px solid var(--hair)}
.rows366 .y{font-family:var(--serif); font-size:1.25rem; color:var(--muted); min-width:3em; flex:0 0 auto}
.rows366 b{font-family:var(--jpser); font-weight:600}
.rows366 .t{font-family:var(--jp)}
.rows366 .r{color:var(--muted); font-size:.83rem; margin-left:8px}
.dgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:28px}
.dgrid--z{grid-template-columns:repeat(4,1fr)}
.dcell{display:flex; flex-direction:column; gap:3px; padding:16px 12px; background:var(--bg); text-decoration:none; transition:.15s}
.dcell:hover{background:var(--ink); color:var(--bg)}
.dcell__d{font-family:var(--serif); font-size:1.5rem; line-height:1}
.dcell--wide .dcell__d{font-size:1.05rem; font-family:var(--jpser)}
.dcell__f{font-family:var(--mono); font-size:.6rem; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.dcell:hover .dcell__f{color:var(--bg)}

@media(max-width:780px){
  .dgrid{grid-template-columns:repeat(5,1fr)}
  .dgrid--z{grid-template-columns:repeat(2,1fr)}
  .ixgrid{grid-template-columns:repeat(2,1fr); gap:18px}
  .ex{grid-template-columns:1fr}
  .ex li:nth-child(2){border-top:none}
  .frow{flex-direction:column; gap:3px}
  .frow__l{width:auto}
  .top__nav{gap:13px}
  .stone-hero{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
}