/* ============================================================
   LAYOUT SYSTEM  —  ブランドを担保する「型」
   full bleed は FB-100 / FB-EDGE / FB-INSET の3段階のみ。中間を作らない。
   ============================================================ */

/* 基準幅:超ワイドでも文字と写真が離れすぎないよう --shell で内側を止める。
   ただし箱で囲うのではなく padding として効かせるため、bleed は真に画面端まで届く。 */
.wrap{ padding-inline: var(--pad); }            /* FB-INSET */
.bleed{ width:100%; }                            /* FB-100 */
.bleed-r{ margin-right: calc(var(--pad) * -1); } /* FB-EDGE(右抜き・Viewport 端まで) */
/* FB-EDGE のうち、Viewport 端に接触させず外周余白を残すもの。
   shell の外へは出るが画面端には触れない = Object / Space の関係を作る。 */
.bleed-r--outer{ margin-right: calc((var(--pad) - var(--outer, 48px)) * -1); }
.bleed-l{ margin-left:  calc(var(--pad) * -1); } /* FB-EDGE(左抜き) */
/* 基準幅から意図的にはみ出す要素(巨大英字など) */
.out-l{ margin-left: calc((var(--pad) - var(--gut)) * -1); }

.sec{ position:relative; padding-block: var(--sec-m); }
.sec--clip{ overflow:hidden; }  /* bleed を使う節だけ。sticky を持つ節には付けない */
.sec--s{ padding-block: var(--sec-s); }
.sec--m{ padding-block: var(--sec-m); }
.sec--l{ padding-block: var(--sec-l); }
.sec--sm{ padding-block: var(--sec-s) var(--sec-m); }
.sec--ms{ padding-block: var(--sec-m) var(--sec-s); }
.sec--lm{ padding-block: var(--sec-l) var(--sec-m); }
.sec--flush{ padding-block: 0; }

/* ---- Section Rhythm:役割で呼吸量を変える4段階 ----------------
   COMPACT / STANDARD / OPEN と、SHOWCASE 面への助走(--to-showcase)。 */
.sec--compact { padding-block: var(--sec-compact-t)  var(--sec-compact-b); }
.sec--standard{ padding-block: var(--sec-standard-t) var(--sec-standard-b); }
.sec--open    { padding-block: var(--sec-open-t)     var(--sec-open-b); }
/* 全幅の SHOWCASE 面(Purple / 大写真)は自身に padding を持たないため、
   直前のセクションが助走を渡す。 */
.sec--to-showcase{ padding-bottom: var(--sec-lead-in); }
.sec--ink{ background: var(--ink); color: var(--white); }
.sec--off{ background: var(--off-white); }
.sec--purple{ background: var(--brand-purple); color: var(--white); }

/* セクション冒頭の空白(design-principles L-1)
   上端から 20vh は大型要素のみ。本文は 35vh 以降。 */
.sec__open{ min-height: 12vh; display:flex; align-items:flex-end; }

/* 2カラム(非対称)。等幅にしない */
.cols{ display:grid; gap: 40px; }
@media (min-width: 900px){
  .cols--38{ grid-template-columns: 38% 1fr; gap: 80px; }
  .cols--62{ grid-template-columns: 1fr 38%; gap: 80px; }
  .cols--55{ grid-template-columns: 52% 1fr; gap: 76px; }
}

.stack-24 > * + *{ margin-top:24px; }

/* ---- Text Rhythm:一律 24px をやめ、役割ごとの梯子にする --------
   line-height は変更しない。block 間の margin だけで呼吸を作る。 */
.stack-24:not(ul) > * + *{ margin-top: var(--tx-s); }              /* ラベル → 見出し */
.stack-24:not(ul) > .h2 + *,
.stack-24:not(ul) > .display + *,
.stack-24:not(ul) > .lead + *{ margin-top: var(--tx-m); }          /* 見出し → 本文 */
.stack-24:not(ul) > .body + .body{ margin-top: var(--tx-p); }      /* 段落 → 段落 */
.stack-24:not(ul) > * + .cta{ margin-top: var(--tx-l); }           /* 本文 → CTA */
.stack-40 > * + *{ margin-top:40px; }
.stack-64 > * + *{ margin-top:64px; }

/* 写真サイズの段階(design-principles L-3:大小の比を極端に) */
.ph--full  { width:100%; height:100vh; }
.ph--large { aspect-ratio: 16/10; }
.ph--medium{ aspect-ratio: 4/3; }
.ph--small { aspect-ratio: 5/4; }
.ph--portrait{ aspect-ratio: 2/3; }
.ph--detail{ aspect-ratio: 1/1; }

/* ---- REVEAL(モーション語彙:Image Mask / Text Reveal) ----
   1セクションあたり reveal 対象は最大3要素(design-principles M-5) */
.reveal{
  opacity:0; transform: translateY(var(--move));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.reveal.is-in{ opacity:1; transform:none; }

.mask{ clip-path: inset(0 0 100% 0); transition: clip-path var(--dur) var(--ease); }
.mask.is-in{ clip-path: inset(0 0 0% 0); }

/* Slow Image Scale */
.zoom img{ transform: scale(var(--scale-in)); transition: transform 1.6s var(--ease); }
.zoom.is-in img{ transform: scale(1); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .mask{ clip-path:none !important; }
  .zoom img{ transform:none !important; }
}