/* ==========================================================================
   IMN stylesheet maintenance map (2026-10-11)

   01 共通             theme tokens, defaults, layout-compatible rules
   02 ハブ             index panels, metallic frame, accordion navigation
   03 記事             typography, text, page navigation, headings
   04 図表             table, diagram, responsive table positioning
   05 画像・出典       figures, credits, disclosure buttons
   06 レスポンシブ     @media overrides co-located with their owning components

   Design-preserving cleanup: declarations superseded by a later rule with
   EXACTLY the same selector, property and importance have been eliminated.
   Responsive declarations stay next to their components to preserve cascade.
   Do not append new overriding rules at EOF; edit the owning rule instead.
   Actual page article body is category-mysticism with #pagebody.imn-content.
   ========================================================================== */

/* IMN category color tokens — category-specific colors are centralized here. */
.category-imn{
  --imn-accent:#79dfff;
  --imn-bg:#000;
  --imn-bg-glow:rgba(30,107,164,.08);
  --imn-article-glow:rgba(56,151,219,.05);
  --imn-h2-line:rgba(89,190,220,.70);
  --imn-h2-bg-start:rgba(10,37,48,.55);
  --imn-h2-bg-end:rgba(5,20,29,.18);
  --imn-h2-text:#c9dbe3;
  --imn-h3-text:#9edff2;
  --imn-box-line:rgba(103,184,225,.16);
  --imn-box-bg:rgba(5,17,25,.72);
  --imn-muted:#7895a2;
  --imn-box-line-soft:rgba(103,184,225,.14);
  --imn-box-bg-soft:rgba(5,17,25,.65);
}

/* ── 01 共通 ─────────────────────────────── */
/* IMNカテゴリ用 */
body.category-imn{
  --accent:var(--imn-accent);
  background:#000;
}
body.category-imn .site-header{
  box-shadow:0 0 28px var(--imn-article-glow);
}


/* ==========================================================================
   IMN ARTICLE - CURRENT DESIGN COMPATIBILITY
   旧本文の画像マークアップは維持しながら、現在の共通記事デザインへ合わせる。
   ========================================================================== */
body.category-imn.page-type-article #pagebody .article-lead{
  margin:0 0 30px;
  padding:14px 16px;
  border-left:2px solid var(--imn-h2-line);
  background:linear-gradient(
    90deg,
    var(--imn-h2-bg-start),
    var(--imn-h2-bg-end) 72%,
    transparent
  );
  color:var(--imn-h2-text);
  font-size:13px;
  line-height:1.9;
}

body.category-imn.page-type-article #pagebody .article-lead a{
  color:var(--imn-h3-text);
  text-underline-offset:3px;
}

body.category-imn.page-type-article #pagebody .imgboxr{
  padding:8px;
  border:1px solid var(--imn-box-line);
  border-radius:4px;
  background:var(--imn-box-bg);
}

body.category-imn.page-type-article #pagebody .imgboxr dt,
body.category-imn.page-type-article #pagebody .imgboxr dd{
  margin:0;
}

body.category-imn.page-type-article #pagebody .imgboxr dd{
  padding:7px 4px 2px;
  color:var(--imn-muted);
  font-size:10px;
  line-height:1.55;
  text-align:center;
}

body.category-imn.page-type-article #pagebody .center{
  clear:both;
  margin:28px 0;
}

body.category-imn.page-type-article #pagebody .center > img{
  margin:4px 6px;
  padding:5px;
  border:1px solid var(--imn-box-line-soft);
  border-radius:3px;
  background:var(--imn-box-bg-soft);
}

body.category-imn.page-type-article #pagebody .center .font12{
  margin-top:5px;
  color:var(--imn-muted);
  font-size:10px;
}


/* ==========================================================================
   RESPONSIVE SYSTEM — IMN
   TIER 1 COMPACT と TIER 4 COMPACT-LANDSCAPE は同じ記事モバイル表現を共有。
   ========================================================================== */
@media (max-width:760px),
       (orientation:landscape) and (max-height:800px) and (max-width:1100px){
body.category-imn.page-type-article #pagebody .article-lead{
    margin-bottom:24px;
    padding:12px 13px;
    font-size:12px;
  }

  body.category-imn.page-type-article #pagebody .imgboxr{
    float:none;
    width:min(100%,320px);
    max-width:100%;
    margin:20px auto;
  }

  body.category-imn.page-type-article #pagebody .center > img{
    max-width:calc(50% - 16px);
    height:auto;
  }
}


/* ==========================================================================
   IMN HUB — legacy title-image hero + compact list navigation
   ========================================================================== */
#pagebody.imn-hub{
  max-width:1080px;
  margin-inline:auto;
  background:#000;
}

#pagebody.imn-hub .imn-hub-hero{
  margin:0 0 34px;
  border:0;
  border-radius:0;
  background:#000;
  box-shadow:none;
}

#pagebody.imn-hub .imn-hub-hero-figure{
  position:relative;
  /* Keep the square sigil smaller on desktop; retain full width on mobile. */
  width:min(100%,507px);
  margin:0 auto;
  overflow:hidden;
  background:#000;
  text-align:center;
}

#pagebody.imn-hub .imn-hub-hero-bg{
  display:block;
  width:100%;
  max-width:1254px;
  height:auto;
  object-fit:contain;
  object-position:center;
  margin:0 auto;
  opacity:1;
  filter:none;
}

#pagebody.imn-hub .imn-hub-hero-figure::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.03), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.34));
  pointer-events:none;
}

#pagebody.imn-hub .imn-hub-hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,44px);
  text-align:center;
}

#pagebody.imn-hub .imn-hub-hero-overlay h1{
  width:min(92%,900px);
  margin:0;
  line-height:1.25;
  transform:translateY(-52px);
}

#pagebody.imn-hub .imn-title-sub{
  display:block;
  color:#e3e6e9;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "MS PMincho",
    "Noto Serif JP",
    serif;
  font-size:clamp(1.35rem,3vw,2.35rem);
  font-weight:500;
  letter-spacing:.08em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.85),
    0 0 10px rgba(0,0,0,.55);
}

#pagebody.imn-hub .imn-title-main{
  display:block;
  margin-top:clamp(6px,1.2vw,12px);
}

#pagebody.imn-hub .imn-title-main img{
  display:block;
  width:min(344px,46vw);
  max-width:100%;
  height:auto;
  margin:0 auto;
}

#pagebody.imn-hub .imn-hub-hero-description{
  max-width:780px;
  margin:0 auto;
  padding:18px 28px 24px;
  color:#a9c0ca;
  font-size:13px;
  line-height:1.85;
  text-align:center;
}

@media (max-width:760px){
  #pagebody.imn-hub .imn-hub-hero-bg{
    width:100%;
    max-width:100%;
    height:auto;
    object-position:center;
  }

  #pagebody.imn-hub .imn-hub-hero-overlay{
    padding:18px 14px;
  }

  #pagebody.imn-hub .imn-hub-hero-overlay h1{
    transform:translateY(-28px);
  }

  #pagebody.imn-hub .imn-title-sub{
    font-size:clamp(1rem,5.2vw,1.35rem);
    letter-spacing:.05em;
  }

  #pagebody.imn-hub .imn-title-main{
    margin-top:4px;
  }

  #pagebody.imn-hub .imn-title-main img{
    width:min(248px,58vw);
  }

  #pagebody.imn-hub .imn-hub-hero-description{
    padding:14px 18px 20px;
    font-size:12.5px;
  }
}

#pagebody.imn-hub .imn-hub-section{
}

#pagebody.imn-hub .imn-hub-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url('/assets/img/mysticism/fields/imn/imn-ornate-frame-transparent.png') center/100% 100% no-repeat;
}

#pagebody.imn-hub .imn-hub-section > *{
  position:relative;
  z-index:1;
}

#pagebody.imn-hub .imn-hub-section > h2{
  position:relative;
  isolation:isolate;
}

#pagebody.imn-hub .imn-hub-section > h2::before{
  content:none;
}

#pagebody.imn-hub .imn-hub-section > h2::after{
  content:none;
}

#pagebody.imn-hub .imn-hub-index{
}

#pagebody.imn-hub .imn-hub-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 24px;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:8px 12px;
  color:#d5e5eb;
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease;
}

#pagebody.imn-hub .imn-hub-row:hover,
#pagebody.imn-hub .imn-hub-row:focus-visible{
}

#pagebody.imn-hub .imn-hub-no{
  color:#6e9baa;
  font-size:11px;
  letter-spacing:.08em;
  text-align:center;
}

#pagebody.imn-hub .imn-hub-body{
  display:grid;
  grid-template-columns:minmax(190px,34%) minmax(0,1fr);
  align-items:baseline;
  gap:14px;
  min-width:0;
}

#pagebody.imn-hub .imn-hub-body strong{
  color:#dbeaf0;
  font-size:13px;
  line-height:1.55;
}

#pagebody.imn-hub .imn-hub-body small{
  color:#89a4af;
  font-size:11px;
  line-height:1.65;
}

#pagebody.imn-hub .imn-hub-arrow{
  color:#d7ad56;
  font-size:16px;
  text-align:right;
}

@media (max-width:760px){
  #pagebody.imn-hub .imn-hub-hero{
    margin-bottom:26px;
  }

  #pagebody.imn-hub .imn-hub-hero-figure{
    width:100%;
    padding:12px 12px 0;
  }

  #pagebody.imn-hub .imn-hub-hero-copy{
    padding:16px 16px 20px;
  }

  #pagebody.imn-hub .imn-hub-row{
    grid-template-columns:32px minmax(0,1fr) 18px;
    gap:8px;
    min-height:0;
    padding:9px 8px;
  }

  #pagebody.imn-hub .imn-hub-body{
    display:block;
  }

  #pagebody.imn-hub .imn-hub-body strong,
  #pagebody.imn-hub .imn-hub-body small{
    display:block;
  }

  #pagebody.imn-hub .imn-hub-body small{
    margin-top:2px;
    font-size:10px;
    line-height:1.55;
  }
}

@media (max-width:760px){
  #pagebody.imn-hub .imn-hub-section{
    margin:0 0 24px;
    padding:34px 22px 22px;
  }

  #pagebody.imn-hub .imn-hub-section > h2{
    margin-bottom:14px;
    font-size:.95rem;
  }
}


/* ── 02 ハブ ─────────────────────────────── */
/* FINAL IMN frame1 reusable-parts implementation — CSS-relative asset URLs */
#pagebody.imn-hub .imn-hub-section{
}
#pagebody.imn-hub .imn-hub-section::before{content:none!important;}
#pagebody.imn-hub .imn-hub-section > h2{
}
#pagebody.imn-hub .imn-hub-section > h2::before,
#pagebody.imn-hub .imn-hub-section > h2::after{content:none!important;}
#pagebody.imn-hub .imn-hub-index{}
#pagebody.imn-hub .imn-hub-row{}
#pagebody.imn-hub .imn-hub-row:hover,#pagebody.imn-hub .imn-hub-row:focus-visible{
  background:rgba(255,255,255,.025);border-color:rgba(232,200,103,.28);
}
@media(max-width:760px){
 #pagebody.imn-hub .imn-hub-section{
  padding:32px 24px 22px;
  background-size:
    120px 76px,120px 76px,120px 84px,120px 84px,
    calc(100% - 185px) 22px,calc(100% - 185px) 22px,
    26px calc(100% - 126px),26px calc(100% - 126px);
 }
 #pagebody.imn-hub .imn-hub-section > h2{margin-bottom:14px;font-size:.95rem;}
}


/* ==========================================================================
   IMN HUB — frame2 image ornaments + metallic gold CSS double frame
   ========================================================================== */
#pagebody.imn-hub .imn-hub-section{
  border-image:linear-gradient(
    110deg,
    #5f3a06 0%,
    #c8952f 14%,
    #fff0a4 28%,
    #9b6715 43%,
    #f2d979 57%,
    #8a5810 72%,
    #dfbd5a 87%,
    #5d3906 100%
  ) 1;
  background-color:#000;
  background-image:
    url('../img/mysticism/fields/imn/frame2/corner-tl.png'),
    url('../img/mysticism/fields/imn/frame2/corner-tr.png'),
    url('../img/mysticism/fields/imn/frame2/corner-bl.png'),
    url('../img/mysticism/fields/imn/frame2/corner-br.png'),
    url('../img/mysticism/fields/imn/frame2/edge-top.png'),
    url('../img/mysticism/fields/imn/frame2/edge-bottom.png'),
    url('../img/mysticism/fields/imn/frame2/edge-left.png'),
    url('../img/mysticism/fields/imn/frame2/edge-right.png');
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-position:left top,right top,left bottom,right bottom,center top,center bottom,left center,right center;
  background-size:
    80px 80px,
    80px 80px,
    80px 80px,
    80px 80px,
    calc(100% - 145px) 18px,
    calc(100% - 145px) 18px,
    18px calc(100% - 145px),
    18px calc(100% - 145px);
}

#pagebody.imn-hub .imn-hub-section > h2{
  background:none;
}

#pagebody.imn-hub .imn-hub-section > h2::before,
#pagebody.imn-hub .imn-hub-section > h2::after{
}

#pagebody.imn-hub .imn-hub-index{
}

#pagebody.imn-hub .imn-hub-row{
}

#pagebody.imn-hub .imn-hub-row:hover,
#pagebody.imn-hub .imn-hub-row:focus-visible{
}

@media (max-width:760px){
  #pagebody.imn-hub .imn-hub-section{
    padding:28px 22px 22px;
    background-size:
      60px 60px,
      60px 60px,
      60px 60px,
      60px 60px,
      calc(100% - 110px) 14px,
      calc(100% - 110px) 14px,
      14px calc(100% - 110px),
      14px calc(100% - 110px);
  }
  #pagebody.imn-hub .imn-hub-section > h2{
    font-size:.95rem;
    margin-bottom:12px;
  }
}


/* ==========================================================================
   IMN HUB — restored metallic section frame + frame2 ornaments on heading only
   ========================================================================== */
#pagebody.imn-hub .imn-hub-section{
}

#pagebody.imn-hub .imn-hub-section > h2{
}

#pagebody.imn-hub .imn-hub-section > h2::before,
#pagebody.imn-hub .imn-hub-section > h2::after{
}

#pagebody.imn-hub .imn-hub-index{
}

#pagebody.imn-hub .imn-hub-row{
}

#pagebody.imn-hub .imn-hub-row:hover,
#pagebody.imn-hub .imn-hub-row:focus-visible{
}

@media (max-width:760px){
  #pagebody.imn-hub .imn-hub-section{
    padding:10px;
  }

  #pagebody.imn-hub .imn-hub-section > h2{
    padding:12px 24px 11px;
    font-size:.95rem;
    background-size:
      32px 32px,
      32px 32px,
      32px 32px,
      32px 32px,
      calc(100% - 54px) 8px,
      calc(100% - 54px) 8px,
      8px calc(100% - 54px),
      8px calc(100% - 54px);
  }
}


/* ==========================================================================
   IMN HUB — single-image h2 frame, no sliced parts
   ========================================================================== */
#pagebody.imn-hub .imn-hub-section{
}

#pagebody.imn-hub .imn-hub-section > h2{
  min-height:72px;
  margin:0 0 14px;
  padding:18px 72px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background-color:#000;
  background-image:url('../img/mysticism/fields/imn/imn-h2-frame-single.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  color:#ead9a9;
  font-size:1rem;
  line-height:1.5;
  letter-spacing:.04em;
  text-align:center;
  box-shadow:none;
  text-shadow:0 1px 0 rgba(255,240,190,.08);
}

#pagebody.imn-hub .imn-hub-section > h2::before,
#pagebody.imn-hub .imn-hub-section > h2::after{
  content:none;
}

#pagebody.imn-hub .imn-hub-index{
}

#pagebody.imn-hub .imn-hub-row{
}

#pagebody.imn-hub .imn-hub-row:hover,
#pagebody.imn-hub .imn-hub-row:focus-visible{
}

@media (max-width:760px){
  #pagebody.imn-hub .imn-hub-section{
    padding:10px;
  }

  #pagebody.imn-hub .imn-hub-section > h2{
    min-height:58px;
    padding:14px 48px 13px;
    font-size:.95rem;
  }
}


/* ==========================================================================
   IMN HUB — final accepted Art Deco h2 frame (single unified image)
   ========================================================================== */
#pagebody.imn-hub .imn-hub-section{
  margin:0 0 28px;
  padding:14px;
  position:relative;
  border:1px solid transparent;
  border-radius:3px;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(
      135deg,
      #5d3b08 0%,
      #c8942c 13%,
      #f4df91 24%,
      #8f6418 39%,
      #fff0a9 52%,
      #ad7b20 66%,
      #e4c464 82%,
      #68430b 100%
    ) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,240,180,.025),
    0 0 8px rgba(204,157,47,.10);
}

#pagebody.imn-hub .imn-hub-section > h2.imn-hub-heading{
  min-height:58px;
  margin:0 0 14px;
  padding:12px 72px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:#000 url('../img/mysticism/fields/imn/imn-h2-frame-artdeco-final.png') center/100% 100% no-repeat;
  color:#ead9a9;
  font-size:1rem;
  line-height:1.5;
  letter-spacing:.04em;
  text-align:center;
  box-shadow:none;
  text-shadow:0 1px 0 rgba(255,240,190,.08);
}

#pagebody.imn-hub .imn-hub-section > h2.imn-hub-heading::before,
#pagebody.imn-hub .imn-hub-section > h2.imn-hub-heading::after{
  content:none;
}

#pagebody.imn-hub .imn-hub-index{
}

#pagebody.imn-hub .imn-hub-row{
  border-bottom:1px solid rgba(201,161,76,.20);
  background:#000;
}

#pagebody.imn-hub .imn-hub-row:hover,
#pagebody.imn-hub .imn-hub-row:focus-visible{
  background:#080808;
  border-color:rgba(205,164,69,.34);
}

@media (max-width:760px){
  #pagebody.imn-hub .imn-hub-section{
    padding:10px;
  }

  #pagebody.imn-hub .imn-hub-section > h2.imn-hub-heading{
    min-height:50px;
    padding:10px 42px 9px;
    font-size:.95rem;
  }
}


/* ==========================================================================
   IMN HUB — accordion navigation
   ========================================================================== */
#pagebody.imn-hub details.imn-hub-accordion{
  overflow:hidden;
}

#pagebody.imn-hub details.imn-hub-accordion > summary.imn-hub-heading{
  min-height:58px;
  padding:12px 72px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  list-style:none;
  cursor:pointer;
  user-select:none;
  border:none;
  background:#000 url('../img/mysticism/fields/imn/imn-h2-frame-artdeco-final.png') center/100% 100% no-repeat;
  color:#ead9a9;
  font-size:1rem;
  line-height:1.5;
  letter-spacing:.04em;
  text-align:center;
  box-shadow:none;
  text-shadow:0 1px 0 rgba(255,240,190,.08);
}

#pagebody.imn-hub details.imn-hub-accordion > summary.imn-hub-heading::-webkit-details-marker{
  display:none;
}

#pagebody.imn-hub details.imn-hub-accordion > summary.imn-hub-heading::marker{
  content:"";
}

#pagebody.imn-hub .imn-hub-heading-text{
  display:block;
  width:100%;
  text-align:center;
}

#pagebody.imn-hub .imn-hub-toggle-icon{
}

#pagebody.imn-hub .imn-hub-toggle-icon::before,
#pagebody.imn-hub .imn-hub-toggle-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1px;
  background:linear-gradient(90deg,#866016,#f2d47a,#866016);
  transform:translate(-50%,-50%);
}

#pagebody.imn-hub .imn-hub-toggle-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
  transition:transform .18s ease, opacity .18s ease;
}

#pagebody.imn-hub details.imn-hub-accordion[open] .imn-hub-toggle-icon::after{
  opacity:0;
  transform:translate(-50%,-50%) rotate(0deg);
}

#pagebody.imn-hub details.imn-hub-accordion > .imn-hub-index{
}

#pagebody.imn-hub details.imn-hub-accordion > summary.imn-hub-heading:focus-visible{
  outline:1px solid rgba(244,223,145,.9);
  outline-offset:-5px;
}

@media (max-width:760px){
  #pagebody.imn-hub details.imn-hub-accordion > summary.imn-hub-heading{
    min-height:50px;
    padding:10px 46px 9px;
    font-size:.95rem;
  }
  #pagebody.imn-hub .imn-hub-toggle-icon{
    right:20px;
  }
}


/* ==========================================================================
   IMN HUB — accordion body frame only when open, and triangle toggle icons
   ========================================================================== */
#pagebody.imn-hub details.imn-hub-accordion.imn-hub-section{
  margin:0 0 28px;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}

#pagebody.imn-hub details.imn-hub-accordion > summary.imn-hub-heading{
  margin:0;
}

#pagebody.imn-hub details.imn-hub-accordion > .imn-hub-index{
  margin-top:8px;
  padding:0;
  border:1px solid transparent;
  border-radius:0 0 3px 3px;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(
      135deg,
      #5d3b08 0%,
      #c8942c 13%,
      #f4df91 24%,
      #8f6418 39%,
      #fff0a9 52%,
      #ad7b20 66%,
      #e4c464 82%,
      #68430b 100%
    ) border-box;
  box-shadow:0 0 8px rgba(204,157,47,.10);
  overflow:hidden;
}

#pagebody.imn-hub .imn-hub-index{
  border-top:none;
}

#pagebody.imn-hub .imn-hub-row:first-child{
  border-top:none;
}

#pagebody.imn-hub .imn-hub-toggle-icon{
  position:absolute;
  right:28px;
  top:50%;
  width:auto;
  height:auto;
  transform:translateY(-52%);
  color:#ead9a9;
  font-size:15px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
}

#pagebody.imn-hub .imn-hub-toggle-icon::before{
  content:"▼";
  position:static;
  display:block;
  width:auto;
  height:auto;
  background:none;
  box-shadow:none;
  opacity:1;
  transform:none;
}

#pagebody.imn-hub .imn-hub-toggle-icon::after{
  content:none;
}

#pagebody.imn-hub details.imn-hub-accordion[open] .imn-hub-toggle-icon::before{
  content:"▲";
}

@media (max-width:760px){
  #pagebody.imn-hub details.imn-hub-accordion.imn-hub-section{
    margin-bottom:18px;
  }

  #pagebody.imn-hub details.imn-hub-accordion > .imn-hub-index{
    margin-top:6px;
  }

  #pagebody.imn-hub .imn-hub-toggle-icon{
    right:18px;
    font-size:13px;
  }
}


/* ========================================================================== 
   IMN ARTICLE PAGES — hub design language applied across all IMN content
   ========================================================================== */
.category-mysticism.page-type-article #pagebody.imn-content{
  --imn-gold:#d7b85f;
  --imn-gold-soft:#ead9a9;
  --imn-blue:#b8ced8;
  --imn-text:#d8e3e8;
  --imn-muted:#91a5ae;
  --imn-line:rgba(207,171,78,.28);
  position:relative;
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  padding:clamp(28px,4vw,48px) clamp(18px,4.5vw,52px) clamp(42px,5vw,64px);
  border:0;
  background:#000;
  color:var(--imn-text);
  box-shadow:none;
}

.category-mysticism.page-type-article #pagebody.imn-content > h1{
  margin:0 0 34px;
  padding:8px 12px 22px;
  border-bottom:0; /* IMN article h1: legacy separator removed */
  color:#e3e6e9;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","MS PMincho","Noto Serif JP",serif;
  font-size:clamp(1.55rem,3.2vw,2.25rem);
  font-weight:500;
  line-height:1.55;
  letter-spacing:.045em;
  text-align:center;
  text-shadow:0 1px 2px #000,0 0 14px rgba(224,205,151,.10);
}

.category-mysticism.page-type-article #pagebody.imn-content h2{
  min-height:0;
  margin:38px 0 22px;
  padding:11px 16px 12px;
  display:block;
  border:0;
  border-radius:3px;
  background:linear-gradient(
    90deg,
    rgba(31,45,52,.96) 0%,
    rgba(22,34,41,.92) 62%,
    rgba(12,20,25,.88) 100%
  );
  color:#d9d2bc;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.035em;
  text-align:left;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  text-shadow:0 1px 1px rgba(0,0,0,.55);
}

.category-mysticism.page-type-article #pagebody.imn-content h3{
  margin:30px 0 16px;
  padding:8px 0 8px 14px;
  border-left:3px solid #b98a27;
  border-bottom:1px solid rgba(207,171,78,.20);
  color:#d9c58d;
  font-size:1rem;
  line-height:1.7;
}

.category-mysticism.page-type-article #pagebody.imn-content p,
.category-mysticism.page-type-article #pagebody.imn-content li,
.category-mysticism.page-type-article #pagebody.imn-content dd,
.category-mysticism.page-type-article #pagebody.imn-content td,
.category-mysticism.page-type-article #pagebody.imn-content th{
  color:var(--imn-text);
}

.category-mysticism.page-type-article #pagebody.imn-content a{
  color:#d7c27f;
  text-decoration-color:rgba(215,194,127,.42);
  text-underline-offset:.16em;
}
.category-mysticism.page-type-article #pagebody.imn-content a:hover,
.category-mysticism.page-type-article #pagebody.imn-content a:focus-visible{
  color:#fff0ae;
  text-decoration-color:#fff0ae;
}

/* Page-bottom navigation links should use the ordinary site link treatment,
   not the IMN gold inline-link accent. */
.category-mysticism.page-type-article #pagebody.imn-content > a{
  color:#9ed5e3;
  text-decoration-color:rgba(158,213,227,.48);
}
.category-mysticism.page-type-article #pagebody.imn-content > a:hover,
.category-mysticism.page-type-article #pagebody.imn-content > a:focus-visible{
  color:#ccecff;
  text-decoration-color:#ccecff;
}

/* IMN automatic TOC uses the normal site TOC palette, never the gold inline-link
   accent, and remains left-aligned even when the h1/image is centered. */
.category-mysticism.page-type-article #pagebody.imn-content .article-toc{
  text-align:left;
}
.category-mysticism.page-type-article #pagebody.imn-content .article-toc-label{
  color:var(--color-toc-kicker);
  text-align:left;
}
.category-mysticism.page-type-article #pagebody.imn-content .article-toc-title{
  color:var(--color-toc-title);
  text-align:left;
}
.category-mysticism.page-type-article #pagebody.imn-content .article-toc ol,
.category-mysticism.page-type-article #pagebody.imn-content .article-toc li{
  text-align:left;
}
.category-mysticism.page-type-article #pagebody.imn-content .article-toc li{
  color:var(--color-toc-item);
}
.category-mysticism.page-type-article #pagebody.imn-content .article-toc a{
  color:var(--color-toc-link);
  text-decoration:none;
}
.category-mysticism.page-type-article #pagebody.imn-content .article-toc a:hover,
.category-mysticism.page-type-article #pagebody.imn-content .article-toc a:focus-visible{
  color:var(--color-toc-link-hover);
  text-decoration:underline;
  text-decoration-color:currentColor;
}

.category-mysticism.page-type-article #pagebody.imn-content hr{
  margin:30px 0;
  border:0;
  border-top:1px solid var(--imn-line);
}

.category-mysticism.page-type-article #pagebody.imn-content table{
  border-color:rgba(207,171,78,.28);
  background:#070707;
  color:var(--imn-text);
}
.category-mysticism.page-type-article #pagebody.imn-content th{
  background:#11100c;
  color:#dfcf9d;
}
.category-mysticism.page-type-article #pagebody.imn-content td,
.category-mysticism.page-type-article #pagebody.imn-content th{
  border-color:rgba(207,171,78,.22);
}

.category-mysticism.page-type-article #pagebody.imn-content blockquote{
  margin:26px 0;
  padding:16px 20px;
  border-left:2px solid #b98a27;
  background:rgba(196,153,55,.055);
  color:#d8d2bc;
}

.category-mysticism.page-type-article #pagebody.imn-content .imgboxr{
  border:1px solid rgba(207,171,78,.28);
  border-radius:2px;
  background:#050505;
  box-shadow:0 0 10px rgba(0,0,0,.30);
}
.category-mysticism.page-type-article #pagebody.imn-content .imgboxr dd{
  color:var(--imn-muted);
}
.category-mysticism.page-type-article #pagebody.imn-content img{
  max-width:100%;
  height:auto;
}

.category-mysticism.page-type-article #pagebody.imn-content .font12{
  color:var(--imn-muted);
}

@media (max-width:760px){
  .category-mysticism.page-type-article #pagebody.imn-content{
    padding:26px 14px 42px;
  }
  .category-mysticism.page-type-article #pagebody.imn-content > h1{
    margin-bottom:26px;
    padding-left:6px;
    padding-right:6px;
    font-size:clamp(1.3rem,6.2vw,1.7rem);
  }
  .category-mysticism.page-type-article #pagebody.imn-content h2{
    min-height:0;
    margin:30px 0 18px;
    padding:10px 13px 11px;
    font-size:.96rem;
  }
  .category-mysticism.page-type-article #pagebody.imn-content h3{
    margin-top:24px;
  }
}


/* ==========================================================================
   IMN about page — declaration plate image
   ========================================================================== */
.category-mysticism.page-type-article #pagebody.imn-content .imn-declaration-figure{
  margin:28px auto;
  max-width:min(100%, 980px);
}

.category-mysticism.page-type-article #pagebody.imn-content .imn-declaration-figure > img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}

@media (max-width:760px){
  .category-mysticism.page-type-article #pagebody.imn-content .imn-declaration-figure{
    margin:22px auto;
  }
}

/* IMN article lead Hero images: shared sizing for info and intro. */
@media (min-width:761px){
  .category-mysticism.page-type-article #pagebody.imn-content img.imn-article-hero-image{
    width:66.6667%;
    max-width:66.6667%;
    height:auto;
  }
}

/* WMT renewal (2026-10): scoped to western-mystery-tradition only.
   Existing source images, inline dimensions, tables and image flow are untouched. */
.category-mysticism.page-type-article #pagebody.imn-wmt-content {
  overflow-wrap: break-word;
}
.category-mysticism.page-type-article #pagebody.imn-wmt-content > h1 {
  margin-bottom: 1.25rem;
}
/* WMT sub-index: compact pale-blue cards; preserve relative hrefs. */
.category-mysticism.page-type-article #pagebody.imn-wmt-content.imn-wmt-index .imn-wmt-link-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .7rem;
  margin: .8rem 0 1.2rem;
}
/* IMN western-mystery-tradition: restore legacy centred image blocks.
   Keep imgboxr floats and individual image widths unchanged. */
.category-mysticism.page-type-article #pagebody.imn-wmt-content .center,
.category-mysticism.page-type-article #pagebody.imn-gdac-content .center {
  text-align: center;
  clear: both;
}

/* Western Mystery Tradition: on narrow screens, remove desktop right floats
   and centre the original figure plus caption without changing image dimensions. */
@media (max-width:760px) {
  .category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg,
  .category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg {
    text-align: center;
  }
  .category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg > .imgboxr,
  .category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg > .imgboxr {
    float: none;
    clear: both;
    display: table;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin: 20px auto;
  }
  .category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg > .imgboxr img,
  .category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg > .imgboxr img {
    max-width: 100%;
    height: auto;
  }
}

/* 2026-10-10: IMN article figures are centered on desktop as well as mobile.
   Use the intrinsic image width as the figure's sizing track so long captions
   wrap below the image rather than widening the caption frame. */
.category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg,
.category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg {
  clear: both;
  text-align: center;
}
.category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg > .imgboxr,
.category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg > .imgboxr {
  float: none;
  display: grid;
  grid-template-columns: minmax(0, max-content);
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 20px auto;
}
.category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg > .imgboxr dt,
.category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg > .imgboxr dt,
.category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg > .imgboxr dd,
.category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg > .imgboxr dd {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* Caption must not contribute its own long max-content width to the image grid. */
.category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg > .imgboxr dd,
.category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg > .imgboxr dd {
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
}
.category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg > .imgboxr img,
.category-mysticism.page-type-article #pagebody.imn-gdac-content .mobimg > .imgboxr img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* WMT history01: subordinate h3 headings use muted slate blue, not gold. */
.category-mysticism.page-type-article #pagebody.imn-content.imn-history01 h3{
  color:#b8ced8;
  background:rgba(20,39,50,.56);
  border-left-color:#63879a;
  border-bottom-color:rgba(122,162,178,.30);
}

/* WMT history07: keep Abraham Abulafia's 240px portrait aligned at the
   right on desktop and centred on mobile; wrap its long URL citation. */
.category-mysticism.page-type-article #pagebody.imn-wmt-content .imgboxr.imn-abraham-figure {
  box-sizing: border-box;
  width: 256px;
  max-width: 100%;
}
.category-mysticism.page-type-article #pagebody.imn-wmt-content .imgboxr.imn-abraham-figure dd {
  overflow-wrap: anywhere;
  word-break: normal;
}
@media (max-width:760px) {
  .category-mysticism.page-type-article #pagebody.imn-wmt-content .mobimg > .imgboxr.imn-abraham-figure {
    margin-right: auto;
    margin-left: auto;
  }
}

/* Golden Dawn and Crowley renewal, scoped to their original articles.
   Existing figure sources, explicit dimensions, desktop floats and text are untouched. */
.category-mysticism.page-type-article #pagebody.imn-gdac-content {
  overflow-wrap: break-word;
}
.category-mysticism.page-type-article #pagebody.imn-gdac-content > h1 {
  margin-bottom: 1.25rem;
}

/* Navigation matches the restrained pale-blue IMN info/intro index links. */
.category-mysticism.page-type-article #pagebody.imn-gdac-index a[href] {
  color: #a9cfe3;
  text-decoration: underline;
  text-decoration-color: rgba(169,207,227,.55);
  text-underline-offset: .19em;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.category-mysticism.page-type-article #pagebody.imn-gdac-index a[href]:hover,
.category-mysticism.page-type-article #pagebody.imn-gdac-index a[href]:focus-visible {
  color: #d4e9f3;
  text-decoration-color: currentColor;
}
/* Image citation text: honor existing legacy caption classes without changing article paragraphs. */
.category-mysticism.page-type-article #pagebody.imn-gdac-content .font09,
.category-mysticism.page-type-article #pagebody.imn-gdac-content .font10 {
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (max-width:760px) {



}


/* Golden Dawn / Crowley: restrained slate-blue h3 instead of gold. */
.category-mysticism.page-type-article #pagebody.imn-content.imn-gdac-content h3 {
  color:#b8ced8;
  background:rgba(20,39,50,.56);
  border-left-color:#63879a;
  border-bottom-color:rgba(122,162,178,.30);
}

/* GD history: compact multiline captions only; leave article text, images and floats intact. */
.category-mysticism.page-type-article #pagebody.imn-gd-history .imgboxr dd {
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Crowley: keep a comfortable gap between paired-photo captions and following body text. */
.category-mysticism.page-type-article #pagebody.imn-gdac-content .center.imn-caption-block {
  margin-bottom: 1.65rem;
}

/* 2026-10-10: compact touch cards for all nine WMT / GD / Crowley indexes.
   WMT rules intentionally match the earlier high-specificity selectors. */
.category-mysticism.page-type-article #pagebody.imn-wmt-content.imn-wmt-index .imn-wmt-link-list > a,
.category-mysticism.page-type-article #pagebody.imn-gdac-index a.imn-index-card {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: .42rem .8rem;
  border: 1px solid #54788a;
  border-radius: 6px;
  background: #1b3847;
  color: #bce0f1;
  text-decoration: none;
  box-shadow: none;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: background-color .18s, border-color .18s;
}
.category-mysticism.page-type-article #pagebody.imn-wmt-content.imn-wmt-index .imn-wmt-link-list > a:hover,
.category-mysticism.page-type-article #pagebody.imn-wmt-content.imn-wmt-index .imn-wmt-link-list > a:focus-visible,
.category-mysticism.page-type-article #pagebody.imn-gdac-index a.imn-index-card:hover,
.category-mysticism.page-type-article #pagebody.imn-gdac-index a.imn-index-card:focus-visible {
  color: #f1f9ff;
  border-color: #92bed4;
  background: #2a4b5c;
  text-decoration: none;
  outline-offset: 3px;
}
.category-mysticism.page-type-article #pagebody.imn-gdac-index a.imn-index-card {
  margin: .65rem 0;
}
.category-mysticism.page-type-article #pagebody.imn-gdac-index a.imn-index-card + br {
  display: none;
}
@media (max-width: 760px) {
  .category-mysticism.page-type-article #pagebody.imn-wmt-content.imn-wmt-index .imn-wmt-link-list > a,
  .category-mysticism.page-type-article #pagebody.imn-gdac-index a.imn-index-card {
    min-height: 44px;
    padding: .42rem .68rem;
    font-size: 14px;
  }
}

/* Tiny original artwork on two IMN intro pages: avoid pixelated upscaling.
   Other IMN Hero images retain their shared responsive styling. */
.category-mysticism.page-type-article #pagebody.imn-content img.imn-native-size-hero{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  margin-inline:auto;
}
@media (min-width:761px){
  .category-mysticism.page-type-article #pagebody.imn-content img.imn-article-hero-image.imn-native-size-hero{
    width:auto;
    max-width:100%;
  }
}

/* Image-credit disclosure is styled in the live body.category-mysticism rules below. */

/* ── 03 記事：現行見出し（core.css に対する優先順位維持） ── */
/* 2026-10-11: IMN charcoal/slate heading hierarchy; intentionally no gold.
   core.css applies !important to every
   article h2; match its cascade priority here, limited to IMN article bodies.
   Keep other categories and the IMN hub unaffected. */
body.category-mysticism.page-type-article #pagebody.imn-content h2 {
  margin:40px 0 24px !important;
  padding:13px 18px !important;
  font-size:1.15rem !important;
  font-weight:700 !important;
  letter-spacing:.05em !important;
  color:#e5eaf0 !important;
  background:linear-gradient(90deg,rgba(32,117,190,.25) 0%,rgba(29,101,171,.18) 70%,rgba(25,83,148,.12) 100%) !important;
  border:0 !important;
  border-top:1px solid rgba(113,181,231,.48) !important;
  border-bottom:1px solid rgba(76,144,195,.34) !important;
  border-radius:3px !important;
  box-shadow:inset 0 1px rgba(255,255,255,.045) !important;
}
body.category-mysticism.page-type-article #pagebody.imn-content h3 {
  margin:26px 0 13px 10px !important;
  padding:4px 9px 4px 13px !important;
  font-size:1rem !important;
  font-weight:600 !important;
  line-height:1.65 !important;
  color:#c1d0db !important;
  background:transparent !important;
  border:0 !important;
  border-left:3px solid #78909f !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
@media (max-width:760px) {
  body.category-mysticism.page-type-article #pagebody.imn-content h2 {
    margin:30px 0 18px !important;
    padding:11px 13px !important;
    font-size:1.03rem !important;
  }
  body.category-mysticism.page-type-article #pagebody.imn-content h3 {
    margin:23px 0 13px 5px !important;
    padding:7px 9px 7px 11px !important;
    font-size:.95rem !important;
  }
}

/* IMN article h1: subtitle in full-width separate row; avoid mid-word wraps. */
body.category-mysticism.page-type-article #pagebody.imn-content h1 .imn-h1-subtitle {
 display:block !important; font-size:.78em !important; line-height:1.5 !important;
 margin-top:.2em; overflow-wrap:normal; word-break:keep-all;
}
@media(max-width:760px) {
 body.category-mysticism.page-type-article #pagebody.imn-content h1 .imn-h1-subtitle { font-size:.75em !important; }
}

/* ── 04 図表 ─────────────────────────────── */
/* Three principles table, WMT alchemy: center and allow more space before the following paragraph. */
body.category-mysticism.page-type-article #pagebody.imn-content .imn-three-principles-table { margin-bottom:1.6rem; }
@media (min-width:761px) {
  body.category-mysticism.page-type-article #pagebody.imn-content .imn-three-principles-table { width:fit-content; max-width:100%; margin-inline:auto; }
  body.category-mysticism.page-type-article #pagebody.imn-content .imn-three-principles-table table { margin-inline:auto !important; }
}

/* ── 05 画像・出典 ───────────────────────── */
/* IMN image-credit disclosure: button design A, scoped to actual rendered body class. */
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details {
  margin:.65rem 0 .2rem; text-align:center; font-size:inherit;
}
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details summary {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  box-sizing:border-box; max-width:100%; min-height:38px; padding:8px 14px;
  color:#d5dde3; background:#101214; border:1px solid #4c555d; border-radius:6px;
  font-size:13px; font-weight:600; line-height:1.4; cursor:pointer;
  list-style:none; user-select:none; transition:background-color .15s,border-color .15s;
}
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details summary::-webkit-details-marker { display:none; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details summary::marker { content:""; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details summary::before { content:"ⓘ"; color:#aebdc8; font-size:1.1em; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details summary::after { content:"⌄"; color:#aebdc8; font-size:1.35em; line-height:.65; margin-left:.3em; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details[open] summary::after { content:"⌃"; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details summary:hover { background:#171a1e; border-color:#697682; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details summary:focus-visible { outline:2px solid #b6d8ee; outline-offset:3px; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details .imn-credit-trigger-open { display:none; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details[open] .imn-credit-trigger-closed { display:none; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-details[open] .imn-credit-trigger-open { display:inline; }
body.category-mysticism #pagebody .imn-credit-caption .imn-credit-source { text-align:left; }

/* ── 06 レスポンシブ：各コンポーネント直後の @media に分散配置 ── */

/* 2026-10-11 Accessibility: keyboard-visible focus for disclosure and article links. */
body.category-mysticism #pagebody.imn-content :is(a[href],button,summary):focus-visible { outline:3px solid #d7ecff; outline-offset:3px; border-radius:3px; }
body.category-mysticism #pagebody.imn-content details summary { cursor:pointer; }