/* ==========================================================================
   4shimon.net v0.1 MVP — 領域確認用スタイル
   完成デザインではない。グレーのプレースホルダーで構成する。
   ========================================================================== */

:root {
  /* LAYOUT */
  --container-max: 1248px;
  --page-margin: 24px;
  --grid-gutter: 24px;

  /* HERO */
  --hero-height-desktop: 80svh;
  --pickup-offset-x: 0px;
  --pickup-offset-y: 0px;
  --hero-glitch-cycle: 30s;
  --hero-scanline-opacity: 0.18;

  /* HERO LOGO: Desktop値。参考スクリーンショットからの目視近似。微調整はこの3値で */
  --hero-logo-height: 300px;
  --hero-logo-top: 210px;
  --hero-logo-left: 350px;

  /* COLOR: MVP PLACEHOLDERS ONLY — 完成配色ではない */
  --color-page: #000000;
  --color-hero: #999999;
  --color-hero-dark: #777777;
  --color-dark: #222222;
  --color-card: #cccccc;
  --color-card-light: #dddddd;
  --color-text: #1a1a1a;
  --color-text-on-dark: #f4f4f4;
  --color-border: #333333;

  /* MENU OVERLAY: 展開時に背後のHero画像へ重ねる暗幕の濃さ */
  --menu-overlay-color: rgba(0, 0, 0, 0.92);

  /* MENU OVERLAY IMAGE: 暗幕の上・メニュー文字の下に重ねる半透明画像の不透明度 */
  --menu-overlay-image-opacity: 0.15;

  /* LINK CARD BADGE: MVP PLACEHOLDER COLORS — 最終配色ではない */
  --link-badge-title-bg: #1a56db;
  --link-badge-desc-bg: rgba(0, 0, 0, 0.85);
}

/* ==========================================================================
   RESET (最小限)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* hidden属性: display指定を持つ要素（.link-card等）でUA既定のdisplay:noneが
   上書きされてしまうため、優先させるルールを明示する */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ==========================================================================
   LAYOUT / GRID
   ========================================================================== */

.container {
  width: min(var(--container-max), calc(100% - var(--page-margin) * 2));
  margin-inline: auto;
}

.column-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* RESPONSIVE BREAKPOINT: 1024px
   Breakpoint chosen to prevent overlap between the hero logo and pickup area */
@media (max-width: 1024px) {
  :root {
    --grid-gutter: 16px;
    --page-margin: 24px;
  }

  .column-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   HEADER / HAMBURGER
   ========================================================================== */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-block: 20px;
}

.hamburger {
  position: relative;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
}

.hamburger__bar {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-text-on-dark);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* z-index順: Menu overlay(25) < Header(30) < Menu button(40)
   .site-menuは.site-header内の子要素のため、.hamburgerに個別のz-indexが
   ないとこのローカルな重なり順内でoverlayに隠れてしまう */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--menu-overlay-color);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.site-menu.is-open {
  visibility: visible;
  opacity: 1;
}

/* レイヤー順: 元のページ（.site-menuの半透明背景越しに透ける）
   → この::before（半透明フルスクリーン画像）→ メニュー文字/×ボタン
   ::beforeは生成順で.site-menu__listより先に描画されるため、
   z-index指定なしでも自然に文字の背後に収まる */
.site-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/images/menu-overlay-desktop.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--menu-overlay-image-opacity);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .site-menu::before {
    background-image: url("assets/images/menu-overlay-mobile.webp");
  }
}

.site-menu__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.site-menu__list a {
  font-size: 24px;
  color: var(--color-text-on-dark);
}

.site-menu__list a:focus-visible,
.hamburger:focus-visible,
.pickup__link:focus-visible,
.view-button:focus-visible,
.link-card:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: var(--hero-height-desktop);
  min-height: 640px;
  max-height: 900px;
}

/* Hero全体の最前面に置く静止走査線。操作対象を遮らないようpointer-eventsを無効化する */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.22) 0,
    rgba(255, 255, 255, 0.22) 1px,
    rgba(0, 0, 0, 0.25) 1px,
    rgba(0, 0, 0, 0.25) 3px
  );
  opacity: var(--hero-scanline-opacity);
  pointer-events: none;
}

.hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-hero);
}

.hero__picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__picture-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__mobile-bars {
  display: none;
}

.hero__logo {
  position: absolute;
  z-index: 10;
  top: var(--hero-logo-top);
  left: var(--hero-logo-left);
}

.hero__logo-mark {
  display: block;
  height: var(--hero-logo-height);
  width: auto;
}

.hero__pickup-zone {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
}

.hero__pickup-zone .container {
  width: min(var(--container-max), calc(100% - var(--page-margin) * 2));
}

.hero__pickup-zone .column-grid {
  width: 100%;
}

.pickup {
  position: relative;
  grid-column: 8 / span 5;
  align-self: center;
  background: transparent;
  padding: 16px;
  translate: var(--pickup-offset-x) var(--pickup-offset-y);
}

.pickup__title {
  font-size: 24px;
  line-height: 1.25;
  color: var(--color-text-on-dark);
  margin-bottom: 10px;
}

/* LIMINAL MUSIC：緑の座布団。色はASJ Pattern Jumperの商品タイトルと同じ#52c200 */
.pickup__title-highlight {
  display: block;
  width: fit-content;
  padding: 4px 8px;
  color: #ffffff;
  background: #52c200;
}

/* 元文字は常時表示し、疑似要素の断片だけを動かして可読性とレイアウトを維持する */
.pickup__title-glitch {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.pickup__title-glitch::before,
.pickup__title-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation-duration: var(--hero-glitch-cycle);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.pickup__title-glitch::before {
  color: #00fff0;
  animation-name: pickup-glitch-cyan;
}

.pickup__title-glitch::after {
  color: #9b35ff;
  animation-name: pickup-glitch-violet;
}

/* 30秒共通タイムライン・不均等4回発生へ変更。JavaScriptのクラス付与・タイマー・
   乱数は使用せず、animation-iteration-count:infiniteのCSSのみで制御する。
   発生開始位置：2.5秒(8.3333%)・10.0秒(33.3333%)・15.5秒(51.6667%)・24.0秒(80.0000%)。
   各発生は合計150ms・3段階×50ms（30秒に対し0.1667%刻み、150ms=0.5%）。
   不透明度・色・clip-path・steps(1,end)の見え方、最大移動量5pxは
   7秒周期時代の値をそのまま流用している */
@keyframes pickup-glitch-cyan {
  0%, 8.8333%, 33.8333%, 52.1667%, 80.5000%, 100% {
    opacity: 0;
    clip-path: inset(0);
    transform: translate(0);
  }
  8.3333%, 33.3333%, 51.6667%, 80.0000% {
    opacity: 0.85;
    clip-path: inset(8% 0 67% 0);
    transform: translate(5px, -1px);
  }
  8.5000%, 33.5000%, 51.8334%, 80.1667% {
    opacity: 0.7;
    clip-path: inset(58% 0 17% 0);
    transform: translate(-4px, 1px);
  }
  8.6666%, 33.6666%, 52.0000%, 80.3333% {
    opacity: 0.8;
    clip-path: inset(32% 0 43% 0);
    transform: translate(3px);
  }
}

@keyframes pickup-glitch-violet {
  0%, 8.8333%, 33.8333%, 52.1667%, 80.5000%, 100% {
    opacity: 0;
    clip-path: inset(0);
    transform: translate(0);
  }
  8.3333%, 33.3333%, 51.6667%, 80.0000% {
    opacity: 0.7;
    clip-path: inset(63% 0 10% 0);
    transform: translate(-5px, 1px);
  }
  8.5000%, 33.5000%, 51.8334%, 80.1667% {
    opacity: 0.8;
    clip-path: inset(24% 0 49% 0);
    transform: translate(4px, -1px);
  }
  8.6666%, 33.6666%, 52.0000%, 80.3333% {
    opacity: 0.65;
    clip-path: inset(47% 0 26% 0);
    transform: translate(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pickup__title-glitch::before,
  .pickup__title-glitch::after {
    animation: none;
    opacity: 0;
  }
}

/* and Other Works.：座布団なしの通常テキスト。LIMINAL MUSICとは別行に積む */
.pickup__title-plain {
  display: block;
  margin-top: 4px;
}

.pickup__desc {
  font-size: 14px;
  color: var(--color-text-on-dark);
  margin-bottom: 16px;
}

.pickup__link {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--color-dark);
  background: var(--color-text-on-dark);
}

/* View Projectの視覚用グリッチ。実要素（クリック領域・背景・フォーカス枠）は
   触れず、白いボタン背景＋文字をまとめて複製した2レイヤーをaria-hiddenで
   支援技術から除外し、position:absoluteで重ねる。タイトルと同じ30秒共通
   タイムライン上で、タイトルとは異なる不均等な3回発生位置を持つ。
   発生開始位置：6.5秒(21.6667%)・18.5秒(61.6667%)・27.5秒(91.6667%)。
   持続時間・段階構成はタイトルと同じ（150ms・3段階×50ms）だが、
   最大移動量だけタイトルの5pxより控えめな3pxに抑えている */
.pickup__link-glitch {
  position: absolute;
  inset: 0;
  padding: 8px 16px;
  background: var(--color-text-on-dark);
  opacity: 0;
  pointer-events: none;
  animation-duration: var(--hero-glitch-cycle);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.pickup__link-glitch--cyan {
  color: #00fff0;
  animation-name: view-link-glitch-cyan;
}

.pickup__link-glitch--violet {
  color: #9b35ff;
  animation-name: view-link-glitch-violet;
}

@keyframes view-link-glitch-cyan {
  0%, 22.1667%, 62.1667%, 92.1667%, 100% {
    opacity: 0;
    clip-path: inset(0);
    transform: translate(0);
  }
  21.6667%, 61.6667%, 91.6667% {
    opacity: 0.85;
    clip-path: inset(8% 0 67% 0);
    transform: translate(3px, -1px);
  }
  21.8334%, 61.8334%, 91.8334% {
    opacity: 0.7;
    clip-path: inset(58% 0 17% 0);
    transform: translate(-2px, 1px);
  }
  22.0000%, 62.0000%, 92.0000% {
    opacity: 0.8;
    clip-path: inset(32% 0 43% 0);
    transform: translate(2px);
  }
}

@keyframes view-link-glitch-violet {
  0%, 22.1667%, 62.1667%, 92.1667%, 100% {
    opacity: 0;
    clip-path: inset(0);
    transform: translate(0);
  }
  21.6667%, 61.6667%, 91.6667% {
    opacity: 0.7;
    clip-path: inset(63% 0 10% 0);
    transform: translate(-3px, 1px);
  }
  21.8334%, 61.8334%, 91.8334% {
    opacity: 0.8;
    clip-path: inset(24% 0 49% 0);
    transform: translate(2px, -1px);
  }
  22.0000%, 62.0000%, 92.0000% {
    opacity: 0.65;
    clip-path: inset(47% 0 26% 0);
    transform: translate(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pickup__link-glitch {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
  }

  .hero__visual {
    position: relative;
    height: min(125vw, 800px);
    min-height: 0;
    max-height: none;
  }

  .hero__picture-img {
    object-position: center;
  }

  .hero__pickup-zone {
    position: relative;
    inset: auto;
    z-index: 5;
    background: var(--color-dark);
    padding-block: 32px;
  }

  .pickup {
    grid-column: 1 / -1;
  }

  /* Mobileは中央・大きめ配置（参考画像準拠）。Desktopの--hero-logo-*には触れない */
  .hero__logo {
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero__logo-mark {
    width: clamp(180px, 52vw, 280px);
    height: auto;
  }

  /* 高さは固定せず画像の縦横比（780:116）に追従させる。
     固定高+object-fit:coverだと390px以外の幅で上下が切れ、下端の色帯が欠けるため */
  .hero__mobile-bars {
    display: block;
    position: relative;
    background: var(--color-hero-dark);
  }

  .hero__mobile-bars-img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* PICK UP AREAの背景をスマートフォン幅だけ真っ黒にする。
   上のmax-width:1024pxブロックが.hero__pickup-zoneへ--color-dark(#222)を
   設定しているため、タブレット(768px)を変えないよう640px限定で上書きする */
@media (max-width: 640px) {
  .hero__pickup-zone {
    background-color: #000000;
  }
}

/* iPhone実機確認によりスマートフォン幅ではロゴを引き上げる。
   .hero__logoを配置枠（left:50%指定時のshrink-to-fit制約を明示widthで解消した枠）とし、
   その中でlogo.svgの実比率(viewBox 417.64×528.9)をaspect-ratioで再現しつつ、
   .hero__logo-markをgridのplace-items:centerで95%サイズに中央配置する。
   枠の中心位置・topは変えず、ロゴ実寸のみを縮小する目的のため、transform:scaleは使わない */
@media (max-width: 480px) {
  .hero__logo {
    top: 130px;
    width: clamp(170px, 50vw, 265px);
    aspect-ratio: 417.64 / 528.9;
    display: grid;
    place-items: center;
  }

  .hero__logo-mark {
    display: block;
    width: 95%;
    height: auto;
  }
}

/* ==========================================================================
   SECTION HEADING (共通)
   ========================================================================== */

.section-heading {
  grid-column: 3 / span 8;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: 32px 16px;
  color: var(--color-text-on-dark);
}

@media (max-width: 1024px) {
  .section-heading {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   FEATURED RELEASES / PRODUCT CARD
   ========================================================================== */

.featured-releases {
  padding-block: 16px 48px;
}

.featured-releases__grid {
  row-gap: 48px;
}

/* 外形：Horizontal / Vertical / Link Cardで共通の8Column中央配置 */
.product-card--horizontal,
.product-card--vertical {
  grid-column: 3 / span 8;
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-card-light);
}

.product-card__body {
  padding: 20px 0;
  background: var(--color-card);
  padding-inline: 20px;
}

/* 横型：カード内部で画像59% / 情報41%に分割 */
.product-card--horizontal {
  display: grid;
  grid-template-columns: 59fr 41fr;
  gap: var(--grid-gutter);
}

.product-card--horizontal .product-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 縦型：画像・情報を通常のブロックとして上下に積む */

.product-card__category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  opacity: 0.7;
}

.product-card__title {
  font-size: 20px;
  margin-bottom: 8px;
}

.product-card__desc {
  font-size: 14px;
  margin-bottom: 16px;
  opacity: 0.85;
}

/* Viewボタンを情報領域内で水平方向中央に配置 */
.product-card__actions {
  display: flex;
  justify-content: center;
}

@media (max-width: 1024px) {
  .product-card--horizontal,
  .product-card--vertical {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
}

/* ASJ Pattern Jumper 仮実装：実画像投入時のサイズ感・余白・レスポンシブ確認用。
   上段（画像）・下段（テキスト）の塗りを解除し、透過画像とテキストのみが
   黒背景上に浮いて見える状態にする。他のVertical Product Cardには影響させない */
/* aspect-ratio: 4/3 は基本ルール（.product-card__media）と同値のため再指定しない */
.product-card--asj-pattern-jumper .product-card__media {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

.product-card--asj-pattern-jumper .product-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.product-card--asj-pattern-jumper .product-card__body {
  background: transparent;
}

.product-card--asj-pattern-jumper .product-card__category,
.product-card--asj-pattern-jumper .product-card__desc {
  color: #ffffff;
}

.product-card--asj-pattern-jumper .product-card__title {
  color: #52c200;
}

/* ==========================================================================
   菱形 VIEW ボタン
   ========================================================================== */

.view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 8px;
  color: var(--color-text);
  background: #ffffff;
  border: 1px solid var(--color-border);
  rotate: 45deg;
}

.view-button span {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.04em;
  rotate: -45deg;
}

.view-button:hover {
  color: #ffffff;
  background: var(--color-border);
}

/* リンク先未確定の無効状態。<span>のためTab移動・hover変化は元から発生しない。
   pointer-events:noneでクリック不可を明示する */
.view-button--disabled {
  background-color: #555555;
  border-color: #555555;
  color: #999999;
  cursor: default;
  pointer-events: none;
}

/* ==========================================================================
   EXTERNAL LINK CARDS
   ========================================================================== */

.external-links {
  padding-block: 16px 48px;
}

.external-links__grid {
  row-gap: 16px;
}

/* 背景画像全面表示＋文字オーバーレイ構成。
   カード自体の幅は既存の8/4Columnグリッド（1024px Breakpoint）に従う。
   文字領域（情報ブロック）の右側/中央配置切り替えはサイト全体のMobile
   Breakpoint（1024px）に合わせる。高さ・背景画像の切り替えはそれとは別軸の
   481px/480px専用Media Queryで行う（詳細は各Media Query内のコメント参照）。
   タブレット幅（1024px以下〜481px）では高さ180pxのDesktop扱いを維持し、
   細長い帯にならないようにする */
.link-card {
  position: relative;
  grid-column: 3 / span 8;
  display: block;
  height: 180px;
  overflow: hidden;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  --link-card-accent: var(--link-badge-title-bg);
}

.link-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-card-light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 「共通幅の左詰め情報ブロックをカード右側へ、全カード同じ位置で置く」構成。
   幅を固定値にすることで、右端(right)・左端とも全カードで統一される。
   共通幅234pxは、全リンクのタイトル/説明文の自然幅をブラウザ実測した中で
   最大のもの（Gumroad説明文 約232.6px、座布団padding込み）に安全マージンを
   加えた値。内部は align-items: flex-start で左端を揃える */
.link-card__body {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 234px;
  max-width: calc(100% - 48px);
}

/* タイトル・説明文＝内容幅に合わせた座布団付きバッジ */
.link-card__name,
.link-card__desc {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: #ffffff;
  white-space: nowrap;
}

.link-card__name {
  padding: 4px 8px;
  font-size: 16px;
  font-weight: 600;
  background: var(--link-card-accent);
}

.link-card__desc {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 13px;
  background: var(--link-badge-desc-bg);
}

/* 媒体別アクセント色（タイトル座布団のみ）。指定のない媒体は
   .link-card の既定値（現行の青 = --link-badge-title-bg）を使う */
.link-card--instagram {
  --link-card-accent: #00aeff;
}

.link-card--x {
  --link-card-accent: #52c200;
}

/* Instagram / X: 実素材あり。他リンクは背景画像未着手のためプレースホルダー背景のまま */
.link-card--instagram .link-card__media {
  background-image: url("assets/images/link-instagram-desktop.webp");
}

.link-card--x .link-card__media {
  background-image: url("assets/images/link-x-desktop.webp");
}

/* サイト全体のMobile Breakpoint（1024px）。文字領域の配置切り替えは
   ここに合わせる。高さ・背景画像の切り替え（481px/480px）とは別軸のため、
   下の480px専用Breakpointとは意図的に分離している */
@media (max-width: 1024px) {
  .link-card {
    grid-column: 1 / -1;
  }

  /* Desktopと同じ共通幅234pxの情報領域を、そのままカード中央へ配置する。
     position/display/flex-direction/align-items/text-alignは基本ルール
     （.link-card__body）と同値のためここでは再指定しない。
     width が定数（min()の結果も定数）のため、left:50%+translateXによる
     中央寄せでも shrink-to-fit 特有の幅制限は発生しない。234pxがカード幅に
     対して大きすぎる場合のみ calc(100% - 24px) 側にフォールバックする */
  .link-card__body {
    left: 50%;
    right: auto;
    width: min(234px, calc(100% - 24px));
    max-width: none;
    transform: translate(-50%, -50%);
  }

  .link-card__name,
  .link-card__desc {
    width: max-content;
  }
}

/* 電話幅専用Breakpoint（Link Cardのみ）。480px以下でのみ高さ・背景画像を
   切り替える。文字領域の配置（中央寄せ）は上の1024px Breakpointが担当するため
   ここでは触れない */
@media (max-width: 480px) {
  .link-card {
    height: 100px;
  }

  .link-card__name,
  .link-card__desc {
    white-space: normal;
  }

  .link-card--instagram .link-card__media {
    background-image: url("assets/images/link-instagram-mobile.webp");
  }

  .link-card--x .link-card__media {
    background-image: url("assets/images/link-x-mobile.webp");
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-dark);
  color: var(--color-text-on-dark);
  padding-block: 48px;
}

.site-footer__grid {
  row-gap: 32px;
}

.site-footer__col {
  grid-column: span 4;
}

.site-footer__col:nth-child(1) { grid-column: 1 / span 4; }
.site-footer__col:nth-child(2) { grid-column: 5 / span 4; }
.site-footer__col:nth-child(3) { grid-column: 9 / span 4; }

.site-footer__logo {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.site-footer__tagline {
  font-size: 13px;
  opacity: 0.75;
}

.site-footer__heading {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

/* Gumroad / SoundCloud / YouTube: リンク先未確定のため非リンク表示。
   通常テキストより低いopacityのみで表現し、カーソルやhoverは付けない */
.site-footer__link--disabled {
  opacity: 0.4;
}

.site-footer__contact {
  font-size: 14px;
}

.site-footer__copyright {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.6;
}

@media (max-width: 1024px) {
  .site-footer__col:nth-child(1),
  .site-footer__col:nth-child(2),
  .site-footer__col:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   404 PAGE — 404.html専用。トップページの色・書体・座布団表現を再利用する。
   ほかのページ・既存クラスには影響しない
   ========================================================================== */

.page-404 {
  min-height: 100svh;
}

.page-404__main {
  width: min(400px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: clamp(40px, 8vh, 88px);
}

.page-404__graphic {
  width: 100%;
  height: auto;
  margin-bottom: clamp(24px, 5vw, 40px);
}

/* 404: 補助的なページ番号として扱う。本文と同程度のサイズにとどめる */
.page-404__code {
  font-size: 14px;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 12px;
}

/* PAGE NOT FOUND: 主見出し。緑座布団はLIMINAL MUSIC(#52c200)と同じ値を404専用に複製 */
.page-404__title {
  display: inline-block;
  width: fit-content;
  padding: 4px 8px;
  font-size: 24px;
  line-height: 1.25;
  color: #ffffff;
  background: #52c200;
  margin-bottom: 16px;
}

.page-404__description {
  font-size: 14px;
  color: var(--color-text-on-dark);
  margin-bottom: 24px;
}

/* 戻るリンク: ボタン化せず、白・下線のみの通常リンクとして表現する */
.page-404__home-link {
  display: inline-block;
  color: #ffffff;
  text-decoration: underline;
}

.page-404__home-link:visited {
  color: #ffffff;
}

.page-404__home-link:hover {
  opacity: 0.75;
}

.page-404__home-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}