/* ════════════════════════════════════════
   Alt World skin — GR10K風 テクニカル・ブルータリズム（裏世界 2%限定）
   html.sot-oldweb が付いた時だけ適用。通常サイトには一切影響しない。
   ・無彩色 / 利他主義的サンセリフ / メタはモノスペース / モジュラーグリッド
════════════════════════════════════════ */

html.sot-oldweb,
html.sot-oldweb body {
  background: #e7e7e4;
  color: #111;
  font-family: "Helvetica Neue", Arial, Helvetica, "Hiragino Kaku Gothic ProN", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

/* モダンな装飾を撤去 */
html.sot-oldweb .grain,
html.sot-oldweb .bg-logo { display: none !important; }

/* リンク：黒・hoverで下線（実務的） */
html.sot-oldweb a { color: #111 !important; text-decoration: none; }
html.sot-oldweb a:hover { text-decoration: underline; }

/* ナビ：素朴な小さい文字バー */
html.sot-oldweb .pill-nav {
  background: rgba(231, 231, 228, 0.92);
  border: 1px solid #111;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 0;
  padding: 4px 6px;
}
html.sot-oldweb .pill-item {
  color: #111 !important;
  background: none !important;
  border-radius: 0;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 5px 12px;
}
html.sot-oldweb .pill-item.is-active { text-decoration: underline; }

/* 見出し：小さく実務的（テキストは従属的） */
html.sot-oldweb .hero-inner { gap: 18px; }
html.sot-oldweb .hero-logo { filter: none; opacity: 1; width: 78px; }
html.sot-oldweb .hero-name {
  font-family: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 22px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  gap: 0.35em;
  text-shadow: none;
}
html.sot-oldweb .hero-sub { display: block !important; color: #333; }

html.sot-oldweb .sec-label {
  color: #111;
  font-family: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 18px;
}
html.sot-oldweb .release-title,
html.sot-oldweb .about-title,
html.sot-oldweb .contact-heading,
html.sot-oldweb .dp-title {
  font-family: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.02em;
  font-size: clamp(24px, 4vw, 42px) !important;
  text-transform: uppercase;
  text-shadow: none;
  color: #111;
}

/* メタ情報はモノスペース */
html.sot-oldweb .release-meta,
html.sot-oldweb .dp-meta,
html.sot-oldweb .item-price,
html.sot-oldweb .item-thumb span,
html.sot-oldweb .site-footer,
html.sot-oldweb .cap-d,
html.sot-oldweb .disco-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #555 !important;
  text-transform: uppercase;
}
html.sot-oldweb .about-text { color: #222 !important; font-size: 14px; }
/* メンバー名：キャプションの後に小さく（B＝モノスペース） */
html.sot-oldweb .about-members {
  margin-top: 18px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #555;
}

/* 帯：細いモノスペースのティッカー */
html.sot-oldweb .s-marquee { border-color: #111; background: #dedeDB; }
html.sot-oldweb .marquee-track {
  color: #111;
  font-family: ui-monospace, Menlo, monospace;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* セクション罫線 */
html.sot-oldweb section,
html.sot-oldweb .site-footer { border-color: #111 !important; }
/* 各ページ先頭セクションの上罫線を消す（スティッキーヘッダー直下で二重=2px相当に太くなるのを防ぎ、
   線はヘッダーの border-bottom 1px に固定。HOME=.s-heroは元々罫線なし＝この細さに統一） */
html.sot-oldweb .s-release,
html.sot-oldweb .s-items,
html.sot-oldweb .s-about { border-top: none !important; }

/* 画像：クリーンな角ばった細枠 */
html.sot-oldweb img { border-radius: 0 !important; }
html.sot-oldweb .release-cover img,
html.sot-oldweb .about-img img,
html.sot-oldweb .item-thumb {
  border-radius: 0 !important;
  border: 1px solid #111 !important;
  box-shadow: none !important;
}

/* ボタン：素朴な枠（ディスコパネルのサブスク・再生ボタン） */
html.sot-oldweb .dp-links a,
html.sot-oldweb .dp-play {
  border: 1px solid #111 !important;
  background: #dedeDB !important;
  border-radius: 0 !important;
  color: #111 !important;
  text-transform: uppercase;
  font-size: 11px;
}

/* New Release のサブスク：ミニマルな行リスト（囲いなし・細い罫線） */
html.sot-oldweb .stream-list { border-top: 1px solid #111; }
html.sot-oldweb .stream-list li { border-bottom: 1px solid rgba(17, 17, 17, 0.16); }
html.sot-oldweb .stream-list a {
  border: none !important;
  background: none !important;
  padding: 15px 2px !important;
  gap: 13px;
  color: #111 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 500;
}
html.sot-oldweb .stream-list a:hover { gap: 17px; }
html.sot-oldweb .stream-list img { width: 17px; filter: grayscale(1); }  /* アイコン白黒 */
html.sot-oldweb .stream-list svg { color: #111; }                         /* 右の矢印 */

/* New Release を初期画面いっぱいに（スクロールで Discography へ続く） */
@media (min-width: 769px) {
  html.sot-oldweb .s-release {
    min-height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ── Discography → 技術カタログのモジュラーグリッド ── */
html.sot-oldweb .s-disco { padding: 50px 0 60px !important; }
html.sot-oldweb .disco-stage {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 28px !important;  /* .container と同じ左右余白（両端が画面に接しないように） */
  overflow: visible !important;
}
html.sot-oldweb .disco-ring {
  position: static !important;
  inset: auto !important;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 22px;            /* 格子の罫線をやめ、余白で区切る */
}
html.sot-oldweb .disco-card {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: auto !important;
  background: none;
  padding: 0;
  cursor: default;
}
html.sot-oldweb .disco-card .disco-cover-img,
html.sot-oldweb .disco-card .ph {
  box-shadow: none !important;
  border: 1px solid #111 !important;
}
/* モノクロ・アーカイブ：通常はグレースケール、ホバー/再生中で色が蘇る
   （左の白黒アートワークと世界観を地続きにする） */
html.sot-oldweb .disco-card .disco-cover-img {
  filter: grayscale(1) contrast(1.03) brightness(0.98);
  transition: filter 0.55s ease;
}
/* ホバー判定は画像エリア内のみ（下のキャプション文字の上では発火しない）。
   .ow-thumb は画像＋再生ボタンのラッパなので、ボタン上でも色は維持される */
html.sot-oldweb .ow-thumb:hover .disco-cover-img,
html.sot-oldweb .disco-card .disco-cover-img:hover,
html.sot-oldweb .disco-card.is-playing .disco-cover-img {
  filter: grayscale(0) contrast(1) brightness(1);
}
html.sot-oldweb .disco-card .cap {
  opacity: 1 !important;
  transform: none !important;
  margin-top: 8px;
  text-align: left;
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  line-height: 1.5;
  color: #111;
}
/* タイトル＝主役（少し大きめ） */
html.sot-oldweb .disco-card .cap-t {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #111;
}
/* feat. クレジット（タイトル下に小さく・リンク付き） */
html.sot-oldweb .cap-t .rel-feat {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: #777;
}
html.sot-oldweb .cap-t .rel-feat a { color: #777 !important; text-decoration: underline; }
/* リリース日(年.月)＝従属（小さく） */
html.sot-oldweb .disco-card .cap-d {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: #666 !important;
}
/* クレジット全記載＝さらに従属（小さく・折り返し可） */
html.sot-oldweb .disco-card .cap-cr {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #999;
}
html.sot-oldweb .disco-card .cap-cr a { color: #777 !important; }

/* ジャケ左下のミニマルなプレビュー再生ボタン */
html.sot-oldweb .ow-thumb { position: relative; line-height: 0; }
html.sot-oldweb .ow-prev-play {
  position: absolute;
  left: 7px;
  bottom: 7px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  background: rgba(231, 231, 228, 0.92) !important;
  color: #111 !important;
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
html.sot-oldweb .ow-prev-play:hover,
html.sot-oldweb .ow-prev-play.is-playing {
  background: #111 !important;
  color: #e7e7e4 !important;
}

/* Items：Musicと同じ作法に（格子なし・余白区切り・モノクロ→ホバーで色復活） */
html.sot-oldweb .items-grid { gap: 26px 22px; background: none; border: none; }
html.sot-oldweb .item-card { background: none; padding: 0; }
html.sot-oldweb .item-thumb { border: 1px solid #111; border-radius: 0; background: #dededb; }
/* サムネ：通常はグレースケール、ホバーで色が蘇る（Discographyと同じ） */
html.sot-oldweb .item-thumb img {
  filter: grayscale(1) contrast(1.03) brightness(0.98);
  transition: filter 0.55s ease, opacity 0.5s ease;
}
/* ホバー判定は画像(サムネ)内のみ（下の商品名/ステータス上では発火しない） */
html.sot-oldweb .item-thumb:hover img {
  filter: grayscale(0) contrast(1) brightness(1);
}
/* Sold Out は色を戻さず沈んだまま（売切れの質感） */
html.sot-oldweb .item-card.is-soldout .item-thumb img,
html.sot-oldweb .item-card.is-soldout:hover .item-thumb img {
  filter: grayscale(1) brightness(0.6) !important;
}
/* 2枚目画像への切替も画像(サムネ)内ホバーで判定（キャプション上では切り替えない） */
html.sot-oldweb .item-card:hover .item-alt { opacity: 0; }
html.sot-oldweb .item-thumb:hover .item-alt { opacity: 1; }

/* ステータスタグ：角ばった淡色ラベル（再生ボタンと同じ作法） */
html.sot-oldweb .item-tag {
  top: 8px;
  left: 8px;
  border-radius: 0;
  background: rgba(231, 231, 228, 0.9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid #111;
  color: #111;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
}

/* キャプション：タイトル＝主役 / ステータス＝小さく従属（Discographyと同じ階層） */
html.sot-oldweb .item-info { margin-top: 10px; }
html.sot-oldweb .item-name {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #111;
}
html.sot-oldweb .item-price {
  margin-top: 3px;
  font-size: 9px;
  color: #888 !important;
}

/* ── 左ビジュアル / 右コンテンツ・ページ切替レイアウト ── */
html.sot-oldweb,
html.sot-oldweb body { height: 100vh; overflow: hidden; }

.ow-artwork {
  position: fixed;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  background: #0c0c0c url("../assets/images/sot_logo_artwork_web.jpg") center center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

html.sot-oldweb main {
  position: relative;
  z-index: 1;
  margin-left: 50vw;
  width: 50vw;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #e7e7e4;
  border-left: 1px solid #111;
}

/* 右パネルに薄いフィルムグレインを重ね、左アートワークの粒子質感と繋ぐ
   （viewport固定＝レンズ越しの粒子。ヘッダ(z10)より下・本文より上） */
html.sot-oldweb main::before {
  content: "";
  position: fixed;
  top: 0;
  left: 50vw;
  right: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 各セクションを右パネル内に収める（巨大min-height等を解除） */
html.sot-oldweb .s-hero { height: auto; min-height: 0; padding: 64px 28px; overflow: visible; }
html.sot-oldweb .s-release,
html.sot-oldweb .s-items,
html.sot-oldweb .s-about,
html.sot-oldweb .s-contact { padding: 48px 0; }
html.sot-oldweb .container { padding: 0 28px; max-width: none; }

/* 右半分幅に合わせて列を減らす・縦並びに */
html.sot-oldweb .disco-ring { grid-template-columns: repeat(3, 1fr); }
html.sot-oldweb .items-grid { grid-template-columns: repeat(3, 1fr); }
/* New Release: A画面と同じ配置（ジャケ左 / タイトル・日付・クレジット・再生バー・サブスクを右にまとめる） */
html.sot-oldweb .release-grid {
  grid-template-columns: minmax(0, 0.9fr) 1fr;
  gap: 28px;
  align-items: start;
}
html.sot-oldweb .release-cover { align-self: start; }
/* New Release ジャケ：Discographyと同じ作法 — モノクロ→ホバーで色復活・拡大エフェクトなし */
html.sot-oldweb .release-cover img {
  opacity: 1;
  filter: grayscale(1) contrast(1.03) brightness(0.98);
  transition: filter 0.55s ease;
}
html.sot-oldweb .release-cover:hover img,
html.sot-oldweb .release-cover.is-playing img {
  transform: none;
  filter: grayscale(0) contrast(1) brightness(1);
}
html.sot-oldweb .release-title { font-size: clamp(26px, 3.2vw, 42px) !important; }
/* Aboutタイトルは大文字変換せず「edeNn & Ron.」の大小文字を保つ */
html.sot-oldweb .about-title { text-transform: none !important; }

/* About(INFO)：画像を小さく左／テキストを右の2カラムにし、Contact・footerまで1画面に収める */
html.sot-oldweb .about-grid {
  grid-template-columns: minmax(0, 0.66fr) 1fr;
  gap: 30px;
  align-items: center;
}
html.sot-oldweb .about-img { max-width: 250px; }
/* About写真：Discography/Itemsと同じ モノクロ→ホバーで色復活・拡大なし */
html.sot-oldweb .about-img img {
  opacity: 1;
  aspect-ratio: 4 / 5;
  height: auto;
  filter: grayscale(1) contrast(1.03) brightness(0.98);
  transition: filter 0.55s ease;
}
html.sot-oldweb .about-img:hover img {
  transform: none;
  filter: grayscale(0) contrast(1) brightness(1);
}
/* INFOページは縦に余裕を持たせ過ぎない（1画面に収める） */
html.sot-oldweb .s-about,
html.sot-oldweb .s-contact { padding: 36px 0; }

/* ════════════════════════════════════════
   B画面 ① モーション抑制（A用の動きをすべて止める）
════════════════════════════════════════ */
html.sot-oldweb .s-marquee,
html.sot-oldweb .scroll-cue { display: none !important; }

html.sot-oldweb .hero-logo-wrap,
html.sot-oldweb .hero-word,
html.sot-oldweb .hero-sub,
html.sot-oldweb .js-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
html.sot-oldweb .hero-inner { transform: none !important; }
/* ナビは常時表示（A画面の読込フェード/自動退避を無効化） */
html.sot-oldweb .pill-nav,
html.sot-oldweb .pill-nav.nav-idle {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
  pointer-events: auto !important;
}

/* ════════════════════════════════════════
   B画面 ② 技術カタログ・レイアウト
════════════════════════════════════════ */
/* ヒーローを左寄せの「表紙/インデックス」に */
html.sot-oldweb .s-hero { align-items: flex-start !important; }
html.sot-oldweb .hero-inner { width: 100%; }
html.sot-oldweb .hero-inner,
html.sot-oldweb .hero-copy { align-items: flex-start; text-align: left; }
html.sot-oldweb .hero-copy { width: 100%; }
html.sot-oldweb .hero-name { justify-content: flex-start; }

/* 右パネル上部の固定トップバー（Kiko風: ナビ=左 / ブランド=中央） */
html.sot-oldweb .ow-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #e7e7e4;
  border-bottom: 1px solid #111;
  display: flex;
  align-items: center;
  padding: 9px 20px;
}
/* ヘッダ内に組み込んだ pill-nav（左・素の文字リンク） */
html.sot-oldweb .ow-head .pill-nav {
  position: static;
  translate: none;
  inset: auto;
  margin: 0;
  border: none;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  gap: 0;
}
html.sot-oldweb .ow-head .pill-item {
  padding: 4px 16px 4px 0;
  font-size: 11px;
  letter-spacing: 0.06em;
}
/* ブランド名（中央・サンセリフ） */
html.sot-oldweb .ow-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;            /* KIKO風：気持ち太く */
  font-size: 14px;
  letter-spacing: -0.005em;    /* KIKO風：字間を詰める */
  text-transform: uppercase;
  white-space: nowrap;
  color: #111;
}

/* ヒーローの型番風スペック表 */
html.sot-oldweb .hero-inner,
html.sot-oldweb .hero-copy { min-width: 0; max-width: 100%; }
.ow-spec {
  margin-top: 24px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  border-top: 1px solid #111;
}
.ow-spec dd { min-width: 0; }
.ow-spec > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid #c6c6c2;
}
.ow-spec dt { color: #777; text-transform: uppercase; letter-spacing: 0.06em; }
.ow-spec dd { color: #111; text-align: left; }

/* セクション見出しに通し番号（01 / 02 …） */
html.sot-oldweb main { counter-reset: sec; }
html.sot-oldweb .sec-label::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) "  —  ";
  color: #999;
}

/* B: ホームのヤギは出さない（余白を主役にする） */
html.sot-oldweb .hero-logo-wrap { display: none !important; }

/* 右パネル左下の小さなタグライン（ホームのみ） */
.ow-tag {
  position: fixed;
  bottom: 26px;
  left: calc(50vw + 28px);
  z-index: 3;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: #333;
  pointer-events: none;
}

/* スマホ：分割をやめ全幅・アートワークは薄い全面背景 */
@media (max-width: 768px) {
  .ow-artwork { width: 100vw; opacity: 0.14; }
  html.sot-oldweb main {
    margin-left: 0;
    width: 100%;
    border-left: none;
    background: rgba(231, 231, 228, 0.93);
  }
  html.sot-oldweb .disco-ring { grid-template-columns: repeat(2, 1fr); }
  html.sot-oldweb .items-grid { grid-template-columns: repeat(2, 1fr); }
  html.sot-oldweb .release-grid { grid-template-columns: 1fr; gap: 20px; }
  /* モバイルのAboutは前のバージョン（フル幅・縦積み・自然なアスペクト）に戻す */
  html.sot-oldweb .about-grid { grid-template-columns: 1fr; gap: 22px; }
  html.sot-oldweb .about-img { max-width: none; }
  html.sot-oldweb .about-img img { aspect-ratio: auto; opacity: 0.78; }
  html.sot-oldweb .hero-name { font-size: 18px !important; }
  .ow-tag { left: 20px; bottom: 22px; }
  html.sot-oldweb main::before { left: 0; opacity: 0.3; } /* グレインは全幅に */

  /* モバイルHOME：左パネルのアートワークを全面背景に・文字なし */
  html.sot-oldweb.ow-page-home .ow-artwork {
    opacity: 1;                 /* くっきり全面に */
    top: auto; bottom: 0;       /* 下端アンカーで少し下げる（上はヘッダーと同色の余白） */
    height: 90vh;
  }
  html.sot-oldweb.ow-page-home main { background: transparent; } /* 背景の被せを外しアートワークを見せる */
  html.sot-oldweb.ow-page-home main::before { display: none; }   /* グレイン無し（アートワークそのまま） */
  html.sot-oldweb.ow-page-home .ow-tag,
  html.sot-oldweb.ow-page-home .hero-inner { display: none !important; } /* テキストは入れない */
}

/* 狭い画面（スマホ＋細い右パネル）：ヘッダを2段に（ブランド上／ナビ下・重なり防止） */
@media (max-width: 1150px) {
  html.sot-oldweb .ow-head {
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
  }
  html.sot-oldweb .ow-title { position: static; transform: none; order: -1; }
  html.sot-oldweb .ow-head .pill-nav { justify-content: center; }
  html.sot-oldweb .ow-head .pill-item { padding: 2px 11px; }
}