/* ==========================================================================
   STEEL LIVE — Layout   v1.1
   コンテナ / ヘッダー / ナビ / フッター / セクション
   ========================================================================== */

/* --- コンテナ -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* iPhone の横向き時、ノッチ側に文字が潜らないようにする */
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.container--narrow { max-width: var(--container-narrow); }

/* --- セクション ------------------------------------------------------------ */
.section { padding-block: var(--sp-section); }

/* 章の切り替えは背景色ではなく余白で行う。
   面を塗り分けすぎると「情報ブロックの列」に戻ってしまうため。 */
.section--alt { background: var(--bg-alt); }

/* ステートメント章・RECRUIT 章。余白そのものを主役にする */
.section--tall { padding-block: clamp(140px, 21vw, 340px); }

/* PC では 21vw が効きすぎる。1440px で上下 302px、本文 208px に対して
   章の 74% が空白になり、余白が主役ではなく間延びになっていた。
   「一文だけの章」という性格は変えず、上下の比率だけ落とす。
   （RECRUIT はこの後 .chapter--stars 側で別途上書きされる） */
@media (min-width: 768px) {
  .section--tall { padding-block: clamp(140px, 14.5vw, 240px); }
}

/* 端で断ち切る組版を許すため、章単位で横をクリップする */
.section--bleed { overflow: hidden; }

/* 信用パート（COMPANY）は明色に反転させ、装飾を排する。
   LUXURY / MINIMAL 30% を最も強く担う章。 */
.section--paper {
  background: var(--sl-paper);
  color: var(--sl-paper-dim);
}
.section--paper h1,
.section--paper h2,
.section--paper h3,
.section--paper .chapter-title { color: var(--sl-paper-ink); }
.section--paper .chapter-lead  { color: var(--sl-paper-dim); }

/* --- ヘッダー -------------------------------------------------------------- */
.site-header {
  position: sticky;   /* fixed は iOS のキーボード表示時に崩れるため使わない */
  top: 0;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top);
}

/* 背景とぼかしは ::before に持たせる。
   backdrop-filter を .site-header 自身に付けると
   position:fixed の子孫（モバイルナビ）の包含ブロックになってしまい、
   全画面オーバーレイがヘッダー内に閉じ込められるため。 */
.site-header::before {
  content: "";
  position: absolute;
  inset: -1px 0 0 0;
  z-index: -1;
  /* v2: 面で塗らず、上から落ちるスクリムにする。
     HERO を横切る帯を消し、文字の可読性だけを担保する。 */
  background: linear-gradient(180deg,
    rgba(7, 8, 10, 0.92) 0%,
    rgba(7, 8, 10, 0.72) 45%,
    rgba(7, 8, 10, 0) 100%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--header-h);
}

@media (min-width: 1024px) {
  .site-header__inner { height: var(--header-h-lg); }
}

/* --- ロゴ枠（素材受領後に差し替え） ----------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* タップターゲット確保 */
  text-decoration: none;
  flex: none;
}

.brand__wordmark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  color: var(--fg-strong);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .brand__wordmark { font-size: 1.25rem; }
}

/* --- ナビゲーション --------------------------------------------------------- */
.nav-toggle { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-3), 2vw, var(--sp-5));
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  position: relative;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  /* v2: グラデーションは HOME 内 2 箇所のみに保つため、ここは金属の単色 */
  background: var(--metal-200);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}

@media (hover: hover) {
  .site-nav__link:hover::after { transform: scaleX(1); }
}

/* components.css の .btn が後から display:inline-flex を宣言するため、
   同詳細度では負ける。親を含めて詳細度を上げる。 */
.site-header .site-header__cta { display: none; }

@media (min-width: 1024px) {
  .site-header .site-header__cta { display: inline-flex; }
}

/* v2: ヘッダー CTA は「箱」をやめ、下線テキストにする。
   HERO の視野内に枠付きボタンが残ると、v2 の世界観が壊れるため。 */
.site-header .site-header__cta {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  color: var(--fg-strong);
  text-decoration: underline;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 1px;
}

/* ==========================================================================
   モバイルナビ（1024px 未満）
   JS 未読込時は素のリストとして表示される（プログレッシブエンハンスメント）
   ========================================================================== */
@media (max-width: 1023.98px) {

  /* JS が有効になるまでは、ヘッダー内にリンクを畳まず素直に出す */
  .js-ready .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--fg-strong);
  }

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur-base) var(--ease),
                opacity var(--dur-fast) var(--ease);
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: relative;
  }
  .nav-toggle__bars::before { top: -7px; }
  .nav-toggle__bars::after  { top: 5px; }

  [aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  [aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  [aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

  /* JS 有効時のみ全画面オーバーレイに切り替える */
  .js-ready .site-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: var(--sp-6) var(--gutter);
    padding-top: max(var(--sp-6), env(safe-area-inset-top));
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    /* 開く時は visibility を即時 visible にする（focus() を効かせるため）。
       閉じる時のみ、フェードアウト後に hidden へ遅延させる。 */
    transition: opacity var(--dur-base) var(--ease),
                visibility 0s linear var(--dur-base);
  }

  .js-ready .site-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease),
                visibility 0s linear 0s;
  }

  .js-ready .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    width: 100%;
    max-width: 420px;
  }

  .js-ready .site-nav__link {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    min-height: 48px;
  }

  /* JS 未読込（フォールバック）: リンクを横並びで折り返し表示 */
  .site-nav__list { flex-wrap: wrap; gap: var(--sp-3); }
  .site-nav__link { font-size: 0.75rem; }
}

/* --- フッター -------------------------------------------------------------- */
.site-footer {
  background: var(--bg-alt);
  border-top: var(--bw) solid var(--border);
  padding-block: var(--sp-6) var(--sp-5);
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
}

.site-footer__top {
  display: grid;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: var(--bw) solid var(--border);
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

/* --- フッターの正式ロゴ -----------------------------------------------------
   横長ロゴなので高さではなく幅で決める。ロゴだけが主張しないよう、
   下に十分な余白を取る。 */
.site-footer__logo {
  width: 170px;                /* 4.93:1 なので高さは約 34px */
  height: auto;
  display: block;
}

@media (max-width: 767.98px) {
  .site-footer__logo { width: 140px; }   /* 高さ約 28px */
}

.site-footer__tagline {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--fg-dim);
}

.site-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}

@media (min-width: 600px) {
  .site-footer__nav-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.site-footer__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.site-footer__legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  text-decoration: none;
}

.site-footer__copyright {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}