.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(14px,2.4vw,26px);
  margin-top:2.4rem;position:relative;z-index:1;}
@media(min-width:760px){.g-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}}
/* スマホ：2行×横スクロール（4つセットで左右に流れる・追加曲も綺麗に伸びる） */
@media(max-width:760px){
  .g-grid{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
    grid-auto-columns:43%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;gap:14px 14px;padding:0 2px 14px;scrollbar-width:none;
    scroll-padding-left:var(--gut);}
  .g-grid::-webkit-scrollbar{display:none;}
  .g-card{scroll-snap-align:start;}
}
.g-card{position:relative;}
.gj-link{display:block;position:relative;border-radius:8px;overflow:hidden;transition:transform .25s ease;}
.gj{aspect-ratio:1/1;width:100%;background-size:cover;background-position:center;border-radius:8px;
  box-shadow:0 22px 44px -18px rgba(39,86,90,.5), 0 8px 18px -10px rgba(20,30,32,.3);
  transition:transform .45s var(--ease-quint),box-shadow .45s ease;}
.gj-link:hover .gj,.gj-link:focus-visible .gj{transform:scale(1.04);
  box-shadow:0 34px 64px -22px rgba(39,86,90,.6), 0 12px 24px -10px rgba(20,30,32,.35);}
/* A: オービットハブ（回る幾何リング＋再生コア。背景の軌道モチーフと呼応） */
.g-hub{position:absolute;left:50%;top:50%;width:52px;height:52px;display:grid;place-items:center;
  opacity:0;transform:translate(-50%,-50%) scale(.78);
  transition:opacity .35s ease,transform .4s var(--ease-back);pointer-events:none;}
.g-hub-ring{position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(255,255,255,.9);
  animation:geoSpin 16s linear infinite;}
.g-hub-core{width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(20,30,32,.5);}
.g-hub-core::before{content:"";border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent var(--teal-900);margin-left:3px;}
.gj-link:hover .g-hub,.gj-link:focus-visible .g-hub,.gj-link:active .g-hub,.g-card.is-center .g-hub{
  opacity:1;transform:translate(-50%,-50%) scale(1);}

/* B: 中央CTA（フィルムストリップ中央カードのみ。配信プラットフォームを明示） */
.g-cta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  gap:.55rem;padding:.85rem .6rem .7rem;opacity:0;transform:translateY(70%);pointer-events:none;
  background:linear-gradient(to top,rgba(39,86,90,.94),rgba(39,86,90,.5) 55%,rgba(39,86,90,0));
  transition:opacity .4s ease,transform .55s var(--ease-quint);}
.g-cta-icos{display:inline-flex;gap:.45rem;}
.g-cta-icos svg{width:15px;height:15px;fill:#fff;display:block;}
.g-cta-text{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;}
.g-card.is-center .g-cta{opacity:1;transform:none;}
.gm{display:flex;align-items:baseline;gap:.5rem;margin-top:10px;}
.gnum{font-family:var(--mono);font-size:.64rem;color:var(--teal-700);letter-spacing:.14em;}
.g-card h3{font-family:var(--serif-jp);font-weight:500;font-size:.98rem;margin:0;letter-spacing:0;line-height:1.3;}
.gfeat{font-size:.74rem;color:var(--mist);margin:.15rem 0 0;}
/* 横スクロール誘導（凝った演出）：横トラックを流れるティール＋弾むシェブロン＋右端フェード（スマホのみ） */
.g-swipe{display:none;}
.g-scroll{position:relative;}
/* ⑤ ジャケットの3Dチルト＋カーソル追従の光沢（PCのみ・tactile.jsが--mx/--my付与）
   mix-blend-mode は :hover 時のみ＝非ホバー要素に余計な合成レイヤを作らない */
@media(pointer:fine){
  .gj-link::after{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),rgba(255,255,255,0) 44%);
    opacity:0;transition:opacity .35s ease;}
  .gj-link:hover::after{opacity:1;mix-blend-mode:soft-light;}
}
@media(max-width:760px){
  .g-swipe{display:flex;align-items:center;gap:.55rem;justify-content:flex-end;margin:0 0 .85rem;}
  .g-swipe-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--teal-700);}
  .g-swipe-label::after{content:"Swipe";}
  .g-swipe-track{position:relative;width:48px;height:1px;overflow:hidden;
    background:linear-gradient(90deg,rgba(143,196,200,0),var(--line) 60%);}
  .g-swipe-dot{position:absolute;top:0;left:-22px;width:22px;height:1px;
    background:linear-gradient(90deg,transparent,var(--teal-500));animation:gSwipeDot 1.9s cubic-bezier(.65,0,.35,1) infinite;}
  .g-swipe-chev{width:7px;height:7px;border-top:1.4px solid var(--teal-500);border-right:1.4px solid var(--teal-500);
    transform:rotate(45deg);animation:gSwipeChev 1.9s ease-in-out infinite;}
  .g-scroll::after{content:"";position:absolute;top:0;right:0;width:46px;height:100%;z-index:2;
    pointer-events:none;background:linear-gradient(to right,rgba(251,252,252,0),var(--paper));}
}
@keyframes gSwipeDot{0%{left:-22px;}62%{left:48px;}100%{left:48px;}}
@keyframes gSwipeChev{0%,100%{transform:rotate(45deg) translate(-2px,-2px);opacity:.45;}50%{transform:rotate(45deg) translate(2px,2px);opacity:1;}}
@media(prefers-reduced-motion:reduce){.gj{transition:none;}.g-swipe-dot,.g-swipe-chev{animation:none;}.g-hub-ring{animation:none;}}
/* スマホ：曲名を1行に収める（最長9文字「ノクターナルノヴァ」基準）。
   ※基本ルールより後ろに置いて確実に上書き（メディアクエリは詳細度を上げないため） */
@media(max-width:760px){
  .gm{gap:.3rem;}
  .gnum{letter-spacing:.05em;}
  .g-card h3{font-size:.78rem;letter-spacing:-.015em;line-height:1.32;}
  /* スマホはジャケット絵を隠さないよう常時非表示、タップ時(:active)のみ表示（基本ルールより後ろ） */
  .g-hub{width:44px;height:44px;}
}

/* ===== ① デスクトップ：ジャケット領域のホイールで横スクロール（ネイティブscroll・Lenis非干渉） =====
   motion.js が PC幅・非reduce・JS有効時のみ #discography に .gp-on を付与し、
   ホイール→横移動の変換・中央拡大・進捗・初回ナッジを担当。
   マウスがジャケット領域(.g-scroll)にある時だけ横移動／外せば通常の縦スクロール。
   作品が増えてもページ縦スクロール量は不変（横移動はコンテナ内で完結）。
   .gp-on が無い時（モバイル/reduce/JS無効）は従来のグリッド/カルーセルにフォールバック。 */
.disco-pin{position:relative;}
.g-prog{display:none;}
@media(min-width:761px){
  .disco.gp-on{padding-block:clamp(48px,7vw,96px);}
  .disco.gp-on .disco-stage{display:flex;flex-direction:column;gap:clamp(14px,2.6vh,30px);}
  .disco.gp-on .disco-stage > .wrap{flex:none;}
  .disco.gp-on .g-scroll{position:relative;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;overscroll-behavior-x:contain;}
  .disco.gp-on .g-scroll::-webkit-scrollbar{display:none;}
  /* width:max-content でコンテナ自体を全コンテンツ幅に＝左右paddingも scrollWidth に算入され末尾まで届く
     （flexコンテナはデフォルトで親幅に縮み、末尾padding/要素が scrollWidth に入らないため） */
  .disco.gp-on .g-grid{--gw:clamp(220px,24vw,300px);display:flex;flex-wrap:nowrap;align-items:center;
    position:relative;width:max-content;gap:clamp(20px,2.4vw,40px);margin-top:0;
    padding-block:clamp(22px,3vh,40px);padding-inline:calc(50vw - var(--gw)/2);}
  .disco.gp-on .g-card{flex:0 0 var(--gw);margin:0;transition:none;transform-origin:center center;}
  .disco.gp-on .gj-link{outline-offset:-4px;}
  .disco.gp-on .g-card.cardfx{opacity:1;}
  .disco.gp-on .gj{box-shadow:0 32px 60px -26px rgba(39,86,90,.55),0 10px 22px -12px rgba(20,30,32,.32);}
  /* スクロール誘導（横）＋進捗バー */
  .disco.gp-on .g-swipe{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0;}
  .disco.gp-on .g-swipe-label::after{content:"Scroll";}
  .disco.gp-on .g-prog{display:block;width:min(280px,38%);height:2px;margin:.2rem auto 0;border-radius:2px;
    background:var(--line);overflow:hidden;}
  .disco.gp-on .g-prog-fill{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;
    background:linear-gradient(90deg,var(--teal-300),var(--teal-700));}
}