/* =========================================================
   EN Front (clean, organized)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --accent:#1a365d;
  --paper:#f9fafb;
  --ink:#0b2a3a;
  --bd:rgba(0,0,0,.12);
  --shadow:0 2px 6px rgba(0,0,0,.08);
  --shadow-h:0 6px 18px rgba(0,0,0,.12);
}

/* ---------- Hero ---------- */
.en-front .hero{
  position:relative;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  background-position:center;
  background-size:cover;
}
.en-front .hero::before{ content:""; position:absolute; inset:0; background:none; }
.en-front .hero .inner{
  position:relative; z-index:1;
  max-width:min(1100px,92%);
  transform:translateY(-6vh);
}
.en-front .hero h1{
  font-size:clamp(3.2rem,7vw,4.8rem);
  font-weight:700; line-height:1.1;
  margin:0 0 .5em;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.en-front .hero .hero-title,
.en-front .hero .hero-subtitle{
  font-size:clamp(1.35rem,2.8vw,2.2rem);
  font-weight:400; line-height:1.55;
  color:#fff; max-width:60ch; margin:.2em auto;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
/* by line（白抜き・大きめ・間隔広め） */
.en-front .hero .byline{ margin-top:1.1em; }
.hero .byline a{
  color:#fff !important;
  text-decoration:none !important;
  font-style:italic;
  font-weight:700;
  font-size:1.4rem;      /* 1.2–1.4remで調整可 */
  letter-spacing:.06em;
  display:inline-block;
}
.hero .byline a:hover{ opacity:.9; }

/* ===== EN Hero fine-tune (frame & vertical balance) ===== */

/* PC主体の見え方を整える：やや低め＆上側の筆跡を強調 */
.en-front .hero{
  min-height: 70vh;               /* 80vh → 70vh に圧縮（お好みで 68–72vh） */
  background-position: center 38%;/* 上の筆跡が見える位置に固定 */
}

/* タイトル群をほんの少しだけ上へ（中央に見える量感へ） */
.en-front .hero .inner{
  transform: translateY(-10vh);   /* 既存 -6vh を上書き（-8〜-12vhで微調整可） */
}

/* モバイルは窮屈になりやすいので控えめに */
@media (max-width: 960px){
  .en-front .hero{
    min-height: 62vh;             /* 多少短く */
    background-position: center 32%;
  }
  .en-front .hero .inner{
    transform: translateY(-6vh);  /* スマホは持ち上げ量を弱める */
  }
}
/* Hero: custom language switcher */
.hero{ position:relative; }
.hero .hero-lang-lite{
  position:absolute; top:16px; right:70px; z-index:10;
  display:flex; gap:10px; padding:6px 10px; border-radius:999px;
  background:transparent; transition:background .25s ease;
}
.hero .hero-lang-lite:hover{ background:rgba(0,0,0,.35); }
.hero .hero-lang-lite a{
  display:flex; align-items:center; gap:6px;
  color:#fff; font-weight:600; font-size:.9rem; text-decoration:none;
}
.hero .hero-lang-lite a img{
  height:auto; width:auto; max-height:16px; object-fit:contain; border-radius:2px;
}
.admin-bar .hero .hero-lang-lite{ top:48px; }

/* ---------- Main ---------- */
#main{ padding:40px 0 56px; }

/* Upper: Featured + Latest（50:50 / モバイルで1カラム） */
.en-front .feature-grid{
  display:grid; gap:24px;
  grid-template-columns:1fr 1fr;
  width:min(1100px,92%); margin:0 auto 36px;
}
@media (max-width:860px){ .en-front .feature-grid{ grid-template-columns:1fr; } }

/* Card 基本 */
.en-front .feature-card{
  background:#faf7f2;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:24px 32px;
  box-shadow:var(--shadow);
  color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.en-front .feature-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-h); }
.en-front .feature-card h2{ font-size:1.35rem; margin:.1em 0 .5em; letter-spacing:.02em; }

/* Featured（左） */
.en-front .feature-card .feature-list{
  list-style:none; margin:0; padding:0; display:grid; gap:12px;
}
.en-front .feature-card .feature-list li:first-child{ margin-top:1.2em; }
.en-front .feature-card .feature-list li{ margin-bottom:.8em; }
.en-front .feature-card .feature-list li > strong{
  display:block; font-weight:700; line-height:1.45; margin:0 0 .35em; overflow-wrap:anywhere;
}
.en-front .feature-card .piece-desc{ margin:0 0 .7em; }
.en-front .feature-card .inline-preview{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin:.35rem 0 .4em; }

/* 再生ボタン */
.playbtn{
  appearance:none; border:1px solid var(--accent);
  background:#fff; color:var(--accent);
  font-weight:700; padding:.45em .9em; border-radius:999px; cursor:pointer;
}
.playbtn:hover{ background:var(--accent); color:#fff; }

/* “Full piece & notes” */
.en-front a.more{ font-size:.95rem; font-weight:600; color:inherit; opacity:.9; text-decoration:none; }
.en-front a.more:hover{ text-decoration:underline; opacity:1; }

/* Latest（右） */
.en-front .feature-card.is-latest .feature-list li{
  display:flex; flex-direction:column; align-items:flex-start;
}
.en-front .feature-card.is-latest .feature-list a{
  font-size:.95rem; line-height:1.55; font-weight:600; color:var(--accent); text-decoration:none;
}
.en-front .feature-card.is-latest .feature-list a:hover{ text-decoration:underline; }
.en-front .feature-card.is-latest .post-date{
  display:block; margin-top:.15em; font-size:.85rem; color:#666;
}
.en-front .feature-card.is-latest .feature-list li + li{ margin-top:.9em; }
.en-front .is-latest .subheading{ font-size:1.15rem; margin:1.1em 0 .6em; font-weight:600; border:none; padding:0; }

/* 「Latest …」余白・Blog Top 強調 */
.feature-card.is-latest > h2{ margin-bottom:.45rem !important; }
.feature-card.is-latest .subheading{ margin:.55rem 0 .35rem !important; }
.feature-card.is-latest .feature-list{ margin-top:.2rem !important; }
.feature-card .blog-top-link{ margin-top:1.1rem !important; text-align:right !important; }
.feature-card .blog-top-link a{ font-size:1.12rem !important; font-weight:700 !important; text-decoration:none; }
.feature-card .blog-top-link a:hover{ text-decoration:underline; }

/* ---------- Explore the Site (EN, unified with upper cards) ---------- */
.en-explore {
  margin-top: 2.8rem;
  width: min(1100px, 92%);
  margin-inline: auto;
}
.en-explore h2 {
  font-size: 1.55rem;          /* ← 少し大きめ */
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 24px 40px;
}
@media (max-width: 900px) {
  .explore-grid { grid-template-columns: 1fr; }
}

.explore-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.explore-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.explore-item:last-child { border-bottom: none; }

.explore-link {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);            /* ← 青を使わず本文色に */
  margin-bottom: 0.25rem;
}
.explore-item:hover .explore-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.explore-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #333;
  opacity: 0.95;
}
/* ---------- Acknowledgement（感謝） ---------- */
.acknowledgement{
  background:#fff; border:1px solid var(--bd);
  border-radius:14px; box-shadow:var(--shadow);
  padding:20px 24px; margin:40px auto; width:min(900px,92%);
  text-align:center; font-style:italic; font-size:.95rem; color:#444;
}
.acknowledgement::before, .acknowledgement::after{ content:none !important; display:none !important; }
.en-front .acknowledgement{ max-width:760px; background:#faf7f2; border-radius:10px; }

/* ---------- Smooth white text ---------- */
.en-front .hero h1,
.en-front .hero .hero-title,
.en-front .hero .hero-subtitle{
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- In-page scroll behavior ---------- */
html{ scroll-behavior:smooth; }
.anchor-offset{ scroll-margin-top:88px; } /* 固定ヘッダー高に合わせて調整 */

/* --- Profile & Contact (plain block) alignment fix --- */
.explore-item--plain {
  grid-column: 1 / 2;             /* ← 左カラム側に揃える */
  text-align: left;               /* 左寄せ */
  border-bottom: none;            /* 下線なし */
  padding: 1.2rem 0 0.8rem;       /* 上下の余白調整 */
}

.plain-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;         /* 左寄せ */
  gap: 0.4rem;
}

.plain-links a {
  font-weight: 700;
  font-size: 1.15rem;              /* 他タイトルと同等の大きさ */
  color: var(--accent);            /* 通常リンク色と統一 */
  text-decoration: none;
  line-height: 1.5;
}

.plain-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- Explore 2-column layout fix ----- */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 24px 32px;
}
@media (max-width: 900px){
  .explore-grid { grid-template-columns: 1fr; }
}

.explore-item {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.explore-item:last-child {
  border-bottom: none;
}

/* 最後のカード：同じ行高・フォント統一 */
.explore-item--plain {
  border-bottom: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0.9rem;
}

.plain-links a {
  display: block;
  font-weight: 700;
  font-size: 1.15rem;     /* 他項目タイトルと同サイズ */
  color: var(--accent);   /* 同じ色 */
  text-decoration: none;
  line-height: 1.5;
}
.plain-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- FIX: last item should be right column, same title size/color ---- */

/* 1) 左固定の指定をリセット（過去に入れた grid-column:1/2 を無効化） */
.explore-item--plain { 
  grid-column: auto !important;      /* ← 右列へ自動配置に戻す（3行目の右側） */
  border-bottom: none;
  padding-top: 0.9rem;
}

/* 2) 2行リンクの見た目を他タイトルと統一 */
.explore-item--plain .plain-links { display:flex; flex-direction:column; gap:.35rem; }
.explore-item--plain .plain-links a{
  font-weight: 700;
  font-size: 1.15rem;                /* ← 他の .explore-link と同サイズ */
  color: var(--ink);                 /* ← リンク色ではなく本文色 */
  text-decoration: none;
  line-height: 1.45;
}
.explore-item--plain .plain-links a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- FIX: Make last plain links match other titles perfectly --- */
.explore-item--plain .plain-links a {
  font-size: 1.15rem;          /* 同一サイズ */
  font-weight: 700;            /* 同一太さ */
  line-height: 1.55;           /* 行間を同じに */
  color: var(--accent);        /* 左のタイトルと同じ色 */
  text-decoration: none;
  letter-spacing: 0.02em;      /* 微妙な間隔を統一 */
}

.explore-item--plain .plain-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === Force last card (Chibanoinkyo/Contact) to match other titles === */
.en-explore .explore-link{
  font-size:1.15rem;          /* 参考：他タイトルの基準 */
  font-weight:700;
  color:var(--accent);
}

/* ←これが肝心：強いセレクタ + !important で上書き */
.en-explore .explore-item--plain .plain-links a{
  font-size:1.15rem !important;
  font-weight:700 !important;
  line-height:1.55 !important;
  color:var(--accent) !important;  /* 左のタイトル色と同じ（青） */
  text-decoration:none !important;
  display:inline-block;
  margin:0 0 .25rem 0;
}
.en-explore .explore-item--plain .plain-links a:hover{
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* ===== Explore (EN) – stable grid & typography ===== */
.en-explore{
  width: min(1100px, 92%);
  margin: 2.8rem auto 0;
}
.en-explore h2{
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0 0 1rem;
  letter-spacing: .01em;
  color: var(--ink);
}

/* 2カラム × 3行（900px未満で1カラム） */
.explore-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 24px 40px;
}
@media (max-width: 900px){
  .explore-grid{ grid-template-columns: 1fr; }
}

/* 項目の見た目 */
.explore-item{ padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.explore-item:nth-last-child(1){ border-bottom: none; } /* 最後だけ線なし */

.explore-title{ margin: 0 0 .25rem; font-size: 1.15rem; line-height: 1.55; }
.explore-link{
  text-decoration: none;
  color: var(--ink);                 /* ← リンク色は使わない（本文色） */
  font-weight: 700;
}
.explore-item:hover .explore-link{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.explore-desc{ margin:0; font-size:1rem; line-height:1.55; color:#333; opacity:.95; }

/* 6) Profile / Contact：他タイトルと同サイズ・同色、右下に自然配置 */
.explore-item--plain{ border-bottom:none; padding-top:.9rem; grid-column:auto !important; }
.explore-item--plain .plain-links{ display:flex; flex-direction:column; gap:.35rem; }
.explore-item--plain .plain-links a{
  font-size: 1.15rem;                /* ← 他項目タイトルと完全一致 */
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.explore-item--plain .plain-links a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 曲名テキスト（strong＋説明）と Play 行（.inline-preview）の間に余白 */
.feature-card .feature-list li { 
  display: flow-root;                 /* 余白の食い上がり防止（安全策） */
}
.feature-card .feature-list li > .inline-preview{
  margin-top: .60rem !important;      /* ← お好みで .4〜.7rem で微調整 */
}