/* domains.html — page-specific styles, extracted from inline */

/* Domains intro */
.domains-intro{
  background:radial-gradient(ellipse at top,#16263F 0%,transparent 60%),radial-gradient(ellipse at bottom,#0A1424 0%,transparent 70%),#050810;
  padding:160px 32px 80px;text-align:center;position:relative;overflow:hidden;
}

/* 6 Domains grid */
.domains{padding:80px 32px 120px;position:relative;overflow:hidden;background:#0a1020}
.domains::before{
  content:"6 Domains";position:absolute;top:6%;right:-2%;
  font-family:'Cinzel',serif;font-weight:200;
  font-size:clamp(120px,18vw,260px);color:rgba(184,168,122,.04);
  letter-spacing:.04em;line-height:.85;pointer-events:none;
}
.domains-inner{max-width:1200px;margin:0 auto;position:relative;z-index:5}
.domains-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;margin-top:64px;
}
.domain-card{
  padding:44px 32px 36px;
  background:linear-gradient(180deg,rgba(20,37,64,.32) 0%,rgba(15,12,8,.5) 100%);
  border:1px solid rgba(184,168,122,.18);
  border-top:1px solid rgba(184,168,122,.45);
  position:relative;overflow:hidden;
  min-width:0;word-break:keep-all;overflow-wrap:break-word;
  transition:transform .6s var(--ease,cubic-bezier(.2,.7,.2,1)),background .6s var(--ease,cubic-bezier(.2,.7,.2,1)),border-color .6s var(--ease,cubic-bezier(.2,.7,.2,1)),box-shadow .6s var(--ease,cubic-bezier(.2,.7,.2,1));
}
/* 上端の細いゴールド光ライン（hover時に左右に広がる） */
.domain-card::before{
  content:"";position:absolute;top:0;left:50%;
  width:30%;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--gold,#B8A87A) 50%,transparent 100%);
  transform:translateX(-50%);
  transition:width .9s var(--ease,cubic-bezier(.2,.7,.2,1)),opacity .6s var(--ease);
  opacity:.85;pointer-events:none;
}
/* 右下に小さいギリシャ装飾（カードのリズム要素） */
.domain-card::after{
  content:"";position:absolute;right:18px;bottom:14px;
  width:6px;height:6px;
  border:1px solid rgba(184,168,122,.4);
  border-radius:50%;
  transition:transform .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.domain-card:hover{
  background:linear-gradient(180deg,rgba(20,37,64,.55) 0%,rgba(15,12,8,.78) 100%);
  border-color:rgba(184,168,122,.45);
  transform:translateY(-5px);
  box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 60px rgba(184,168,122,.07);
}
.domain-card:hover::before{width:90%;opacity:1}
.domain-card:hover::after{transform:scale(1.4);border-color:var(--gold,#B8A87A);box-shadow:0 0 12px rgba(184,168,122,.6)}

/* === 番号（大きな装飾エレメント、リズムの軸） === */
.domain-card .num{
  font-family:'Cinzel',serif;font-weight:300;
  font-size:42px;line-height:1;
  letter-spacing:.08em;
  color:transparent;
  -webkit-text-stroke:1px rgba(184,168,122,.55);
  text-transform:uppercase;margin-bottom:24px;
  display:block;
  transition:color .6s var(--ease),-webkit-text-stroke-color .6s var(--ease),opacity .6s var(--ease);
}
.domain-card .num::after{
  content:"";display:block;width:24px;height:1px;
  background:var(--gold,#B8A87A);opacity:.5;margin-top:10px;
  transition:width .8s var(--ease,cubic-bezier(.2,.7,.2,1)),opacity .6s var(--ease);
}
.domain-card:hover .num{
  color:rgba(184,168,122,.18);
  -webkit-text-stroke-color:var(--gold,#B8A87A);
}
.domain-card:hover .num::after{width:60px;opacity:.9}

/* === 日本語タイトル === */
.domain-card h4{
  font-family:'Noto Serif JP',serif;font-weight:400;
  font-size:clamp(17px,1.7vw,21px);
  color:var(--bone,#F5F0E6);letter-spacing:.04em;
  line-height:1.55;margin-bottom:16px;
  word-break:keep-all;overflow-wrap:break-word;
}
/* === 英語サブ（リズムを与えるための色彩バリエーション） === */
.domain-card h4 .sub{
  display:block;
  font-family:'Cinzel',serif;font-weight:300;
  font-size:11px;letter-spacing:.28em;
  margin-top:10px;text-transform:uppercase;
  line-height:1.7;
  word-break:break-word;overflow-wrap:break-word;
  padding-top:8px;
  border-top:1px solid rgba(184,168,122,.18);
  transition:color .6s var(--ease),letter-spacing .6s var(--ease),border-color .6s var(--ease);
}
.domain-card:hover h4 .sub{letter-spacing:.32em;border-color:rgba(184,168,122,.4)}

/* リズム: 6カードに3色のサブラベル色を循環 (Gold / Gold-Light / Bone-muted) */
.domain-card:nth-child(3n+1) h4 .sub{color:var(--gold,#B8A87A);opacity:.78}
.domain-card:nth-child(3n+2) h4 .sub{color:var(--gold-light,#C4B88A);opacity:.78}
.domain-card:nth-child(3n+3) h4 .sub{color:rgba(245,240,230,.62)}

/* リズム: 番号色彩の微差で奥行きを出す */
.domain-card:nth-child(2n) .num::after{background:var(--gold-light,#C4B88A)}

.domain-card p{
  font-family:'Noto Sans JP',sans-serif;font-weight:350;
  font-size:14px;color:var(--bone,#F5F0E6);
  opacity:.78;line-height:1.95;letter-spacing:.04em;
  word-break:keep-all;line-break:strict;
  overflow-wrap:break-word;
}

/* Why NYX section */
.why-nyx{
  background:radial-gradient(ellipse at center,#142540 0%,#0A1424 50%,#050810 100%);
  padding:140px 32px;position:relative;overflow:hidden;
  border-top:1px solid rgba(184,168,122,.1);
}
.why-nyx::before{
  content:"Νύξ";position:absolute;top:5%;left:-2%;
  font-family:'Cinzel',serif;font-weight:200;
  font-size:clamp(140px,22vw,320px);color:rgba(184,168,122,.04);
  letter-spacing:.06em;line-height:.85;pointer-events:none;
}
.why-nyx-inner{max-width:980px;margin:0 auto;text-align:center;position:relative;z-index:5}
.why-nyx .greek-tag{
  display:inline-block;
  font-family:'Cinzel',serif;font-size:13px;letter-spacing:.4em;
  color:var(--gold,#B8A87A);text-transform:uppercase;
  border-bottom:1px solid rgba(184,168,122,.4);
  padding-bottom:4px;margin-bottom:32px;
}
.why-nyx .myth-line{
  font-family:'Noto Serif JP',serif;font-weight:300;
  font-size:clamp(15px,1.6vw,20px);
  color:var(--bone,#F5F0E6);opacity:.82;
  letter-spacing:.06em;line-height:1.9;
  max-width:680px;margin:0 auto 56px;
  word-break:keep-all;line-break:strict;
}
.why-nyx .key-line-jp{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:400;
  font-size:clamp(28px,4vw,48px);
  color:var(--bone,#F5F0E6);letter-spacing:.04em;
  line-height:1.55;margin-bottom:18px;
  word-break:keep-all;line-break:strict;
}
.why-nyx .key-line-jp em{font-style:italic;color:var(--gold,#B8A87A)}
.why-nyx .key-line-en{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(15px,1.6vw,21px);color:var(--gold,#B8A87A);opacity:.82;
  letter-spacing:.06em;margin-bottom:96px;
}
.why-nyx .divider{
  width:60px;height:1px;background:var(--gold,#B8A87A);
  opacity:.5;margin:40px auto 80px;
}

/* Cycle loop — circular 4-step diagram */
.cycle-loop{
  position:relative;width:min(560px,90vw);height:min(560px,90vw);
  margin:64px auto 80px;
}
.cycle-loop::before{
  content:"";position:absolute;inset:14%;
  border-radius:50%;
  border:1px dashed rgba(184,168,122,.35);
}
.cycle-loop::after{
  content:"";position:absolute;inset:32%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(184,168,122,.08) 0%,transparent 70%);
}
.cycle-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;z-index:3;
  font-family:'Cinzel',serif;font-size:11px;
  letter-spacing:.4em;color:var(--gold,#B8A87A);opacity:.7;
  text-transform:uppercase;
}
.cycle-center .cc-jp{
  display:block;font-family:'Noto Serif JP',serif;
  font-size:14px;letter-spacing:.2em;color:var(--bone,#F5F0E6);
  opacity:.85;margin-top:10px;
}
.cycle-node{
  position:absolute;width:30%;
  text-align:center;
}
.cycle-node .cn-num{
  font-family:'Cinzel',serif;font-size:11px;
  letter-spacing:.4em;color:var(--gold,#B8A87A);
  margin-bottom:8px;opacity:.85;
}
.cycle-node .cn-text{
  font-family:'Noto Serif JP',serif;font-weight:400;
  font-size:clamp(13px,1.3vw,16px);
  color:var(--bone,#F5F0E6);line-height:1.55;
  letter-spacing:.04em;
  word-break:keep-all;line-break:strict;
}
.cycle-node.n1{top:0;left:50%;transform:translateX(-50%)}
.cycle-node.n2{top:50%;right:0;transform:translateY(-50%)}
.cycle-node.n3{bottom:0;left:50%;transform:translateX(-50%)}
.cycle-node.n4{top:50%;left:0;transform:translateY(-50%)}
/* Arrows between nodes (SVG-like with CSS pseudo) */
.cycle-arrow{
  position:absolute;width:14px;height:14px;
  border-top:1px solid var(--gold,#B8A87A);
  border-right:1px solid var(--gold,#B8A87A);
  opacity:.6;
}
@media(max-width:600px){
  .cycle-arrow{width:18px;height:18px;opacity:.85;border-width:1.5px}
}
.cycle-arrow.a1{top:18%;right:22%;transform:rotate(45deg)}
.cycle-arrow.a2{bottom:22%;right:18%;transform:rotate(135deg)}
.cycle-arrow.a3{bottom:18%;left:22%;transform:rotate(225deg)}
.cycle-arrow.a4{top:22%;left:18%;transform:rotate(315deg)}

/* Closing line */
.why-nyx .closing-jp{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:400;
  font-size:clamp(22px,2.8vw,34px);
  color:var(--bone,#F5F0E6);letter-spacing:.06em;
  line-height:1.7;margin:80px auto 14px;
  word-break:keep-all;line-break:strict;
}
.why-nyx .closing-en{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(14px,1.5vw,18px);color:var(--gold,#B8A87A);opacity:.7;
  letter-spacing:.06em;
}

@media(max-width:768px){
  .domains-intro{padding:96px 18px 48px}
  .domains-intro h1.lux-title{font-size:clamp(24px,7vw,32px) !important;line-height:1.5}
  .domains-intro .lux-subtitle{font-size:13px;line-height:1.7}

  .domains{padding:48px 16px 64px}
  .domains-inner > div[style] h2{font-size:clamp(22px,6.4vw,30px) !important;line-height:1.45 !important}
  .domains-inner > div[style] .lux-subtitle{font-size:13px}
  .domains-grid{gap:14px;grid-template-columns:1fr;margin-top:36px}
  .domain-card{padding:22px 20px}
  .domain-card .num{font-size:10px;letter-spacing:.4em;margin-bottom:10px}
  .domain-card h4{font-size:17px;line-height:1.55;margin-bottom:12px;letter-spacing:.04em}
  .domain-card p{font-size:13.5px;line-height:1.95}

  .why-nyx{padding:64px 18px}
  .why-nyx::before{font-size:clamp(120px,30vw,200px) !important}
  .why-nyx .greek-tag{font-size:11px;letter-spacing:.3em;margin-bottom:24px}
  .why-nyx .myth-line{font-size:13.5px;line-height:1.95;margin-bottom:36px}
  .why-nyx .key-line-jp{font-size:clamp(20px,5.6vw,28px);line-height:1.55;letter-spacing:.04em}

  .cycle-loop{width:88vw;height:88vw;max-width:380px;max-height:380px}
  .cycle-node{width:42%}
  .cycle-node .cn-text{font-size:12px}
  .cycle-arrow{width:10px;height:10px}
}
@media(max-width:380px){
  .domains-grid{gap:12px}
  .domain-card{padding:20px 16px}
  .domain-card h4{font-size:15.5px}
  .domain-card p{font-size:13px}
}

.nyx-skip-to-content{
  position:fixed;left:-9999px;top:8px;z-index:9999;
  padding:10px 16px;background:#0A0A0A;color:#B8A87A;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.3em;
  border:1px solid #B8A87A;text-decoration:none;text-transform:uppercase;
}
.nyx-skip-to-content:focus{left:8px}