/* editorial.css — 背面に透ける大きな英語の見出しと、散りばめた写真（2026-10-11）
   お手本: トップの「Photo & Film」特集。装飾したページだけが読み込む（共通の style.css は変えない） */

/* ---- 背面の透かし文字 ---- */
.eg{position:relative;overflow:hidden;--eg-ghost:#f0ede7;padding-top:clamp(92px,11vw,168px)}
/* .warm の節は白背景になったので、透かし文字の色は共通のまま（2026-10-11） */
.eg::before{
  content:attr(data-ghost);content:attr(data-ghost) / "";
  position:absolute;z-index:0;top:clamp(6px,1.6vw,26px);left:50%;transform:translateX(-50%);
  width:max-content;color:var(--eg-ghost);pointer-events:none;user-select:none;
  font-family:var(--serif);font-weight:400;line-height:.85;letter-spacing:-.045em;white-space:nowrap;
  font-size:min(13.5rem,calc((100vw - 32px) / (var(--n,8) * .44)))
}
.eg>*{position:relative;z-index:1}
.eg .sec-head h2,.eg>.wrap>h1,.eg>.wrap>h2{font-weight:400}
.eg .sec-head h2{font-size:clamp(1.9rem,4.3vw,3.3rem);line-height:1.16}
.eg .eyebrow{font-family:var(--serif);font-weight:400;letter-spacing:.23em}
/* 透かし文字のある節では、見出しの上の副題（Journal・Before you choose など）は表示しない（2026-10-11 太田さん決定）。
   透かし文字と同じ役割で重複するため。HTMLの文字は残す（表示だけ消す）。結論の囲み（.answer-card）・カードの分類ラベルは対象外 */
.eg .sec-head>.eyebrow,.home-film-feature .sec-head>.eyebrow{display:none}   /* トップ先頭の「Photo & Film」特集も同じ（元から透かし文字あり・2026-10-11） */

/* ---- 散りばめた写真（段をずらして並べる） ---- */
.eg-scatter{background:#fff;padding:clamp(34px,6vw,84px) 0;overflow:hidden}
.eg-scatter__in{
  width:min(1180px,calc(100% - 40px));margin:0 auto;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,2vw,28px);align-items:start
}
.eg-ph{margin:0;overflow:hidden;background:#f0ede7;min-width:0}
.eg-ph img{display:block;width:100%;height:auto}
.eg-scatter--a .eg-ph:nth-child(1){grid-column:1/8}
.eg-scatter--a .eg-ph:nth-child(2){grid-column:9/13;margin-top:clamp(36px,9vw,150px)}
.eg-scatter--b .eg-ph:nth-child(1){grid-column:1/5;margin-top:clamp(40px,7vw,110px)}
.eg-scatter--b .eg-ph:nth-child(2){grid-column:5/9}
.eg-scatter--b .eg-ph:nth-child(3){grid-column:9/13;margin-top:clamp(70px,13vw,200px)}
.eg-scatter--c .eg-ph:nth-child(1){grid-column:2/6;margin-top:clamp(50px,10vw,160px)}
.eg-scatter--c .eg-ph:nth-child(2){grid-column:6/13}

@media(max-width:700px){
  .eg-scatter__in{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .eg-scatter--a .eg-ph:nth-child(1){grid-column:1/6}
  .eg-scatter--a .eg-ph:nth-child(2){grid-column:3/7;margin-top:0}
  .eg-scatter--b .eg-ph:nth-child(1){grid-column:1/4;margin-top:0}
  .eg-scatter--b .eg-ph:nth-child(2){grid-column:4/7;margin-top:34px}
  .eg-scatter--b .eg-ph:nth-child(3){grid-column:2/6;margin-top:0}
  .eg-scatter--c .eg-ph:nth-child(1){grid-column:1/4;margin-top:34px}
  .eg-scatter--c .eg-ph:nth-child(2){grid-column:4/7;margin-top:0}
}

/* 記事の途中に入れる写真（本文の幅より広く） */
.eg-inline{
  width:min(1180px,calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%);
  margin:clamp(34px,5vw,72px) 0;padding:0;background:none
}
.eg-inline .eg-scatter__in{width:100%}