/* 流動レイアウトの層（2026-09-24 STΛCK「web.dev の新しいレスポンシブ／コンテナクエリ／clamp() を読んだ上で、幅で潰れる所を直しスマホにも最適化」）
   site.css の直後に読む。やること:
   1. 余白と見出しの大きさを clamp() で画面幅に追従させる（ブレイクポイントで段差を作らない。最小はスマホで読める値、最大は PC の設計値）
   2. 札（作品・記事・クリエイター・Learn）は「札自身の幅」で中の文字を切り替える（コンテナクエリ。列数が変わっても札の中身が潰れない）
   3. 幅の決め方は min()/max()（固定 px を画面より広くしない） */

/* 1. 寸法トークン（site.css の :root と各 @media の値を上書き。ここが正本） */
:root{
  --gutter:clamp(16px, 1.2vw + 12px, 64px);
  --pad:clamp(52px, 3vw + 40px, 96px);
  --pad-l:clamp(60px, 4vw + 48px, 128px);
  --fs-hero:clamp(40px, 5.6vw + 20px, 132px);
  --fs-sec:clamp(28px, 1.8vw + 22px, 46px);
  --fs-band:clamp(30px, 2vw + 22px, 52px);
  --fs-sub:clamp(12.5px, .2vw + 12px, 14px);
  --fs-lead:clamp(14px, .25vw + 13px, 16px);
  --sp-title:clamp(22px, 1.6vw + 16px, 44px);  /* 見出しと中身の間 */
}
.wrap{padding-inline:var(--gutter)}

/* 見出しの階段（全ページ共通） */
.sec-title .en{font-size:var(--fs-sec);line-height:1;text-wrap:balance}
.sec-title .sub{font-size:var(--fs-sub)}
.band .en{font-size:var(--fs-band)}
.page-hero h1 .en,.page-hero.dark h1 .en{font-size:var(--fs-hero);line-height:.95;overflow-wrap:anywhere}
.page-hero h1 .sub{font-size:clamp(13px,.25vw + 12px,15px)}
.page-hero .lead,.lrn-lead,.about .lead{font-size:var(--fs-lead);line-height:1.9}
.h2 .en{font-size:clamp(24px,1.4vw + 18px,36px)}

/* 2. 札はコンテナ（自分の幅で中を決める） */
.acard,.hc,.cx-tile,.lrn-t,.lp-course{container-type:inline-size}  /* 幅が中身で決まる札（.awg-it の帯・.wcard2 の段組）には付けない。inline-size の封じ込めで幅 0 になり縦書きに崩れた（2026-09-24 実害） */
@supports (container-type:inline-size){
  /* 記事の札 */
  @container (max-width:240px){
    .acard .t{font-size:14px;line-height:1.5;margin-top:8px}
    .acard .s{display:none}
    .acard .by{font-size:10.5px}
    .acard .article-arrow{display:none}
  }
  @container (min-width:241px) and (max-width:340px){
    .acard .t{font-size:16px;line-height:1.5}
    .acard .s{font-size:12.5px}
  }
  /* クリエイターの札（トップ・一覧） */
  @container (max-width:200px){
    .hc-b b{font-size:13.5px}
    .hc-b small{font-size:10px;letter-spacing:.04em}
    .hc-b em{font-size:10.5px}
    .cx-name{font-size:13px}
    .cx-sub{font-size:10.5px}
  }
  /* Learn の札（トップ・学習ページ） */
  @container (max-width:200px){
    .lrn-t-en{font-size:20px;margin-top:22px}
    .lrn-t b{font-size:14px}
    .lrn-t p{font-size:12px;line-height:1.75}
    .lrn-t-st{top:14px;right:12px;font-size:9.5px;padding:6px 8px}
    .lp-course .lp-no{font-size:16px}
    .lp-course .lp-benefit{font-size:12.5px;line-height:1.7}
  }
}

/* 3. 幅の決まり: 固定幅を画面より広くしない */
img,video,iframe{max-width:100%}
.wrap{max-width:min(100%, var(--max))}

/* 4. 短い題名の最終行が 1〜2 文字だけにならないように、行の長さを揃える（2026-09-25 幅検査: News の行・Learn の見出し・トップのクリエイター名・記事の要点） */
.nrow .t,.lp-get b,.hc-b b,.tl3 b{text-wrap:balance}