@charset "utf-8";
/* ==========================================================================
   Layout — ページの骨格。プロジェクト固有の見た目は持たない。
   ========================================================================== */
@layer layout {

  /* 全ページ最上部の告知バー。架空の題材であることを常時示すためのもので、
     閉じられる作りにしない・テーマで沈ませない。 */
  /* ⛔ 黒帯の追従はやめる。ヘッダーを固定するので、両方が居座ると
     画面の上が2段ぶん潰れて本文の可読域が減る。
     告知はページ先頭で1度読ませれば足りる。 */
  .l-demo-bar {
    position: relative; z-index: 100;
    display: flex; align-items: center; gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-6);
    background: var(--color-demo-bar-bg);
    color: var(--color-demo-bar-text);
    font-size: var(--fs-xs);
    line-height: var(--lh-compact);
  }
  .l-demo-bar__badge {
    flex: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-demo-bar-badge);
    color: #221a00;
    font-weight: 700;
    letter-spacing: .04em;
    font-feature-settings: "palt";
  }
  .l-demo-bar__text { margin: 0; }

  /* 段組みの器。左右の余白は 24px × 2 を確保したうえで最大幅まで伸ばす */
  .l-container {
    width: min(var(--width-container), 100% - var(--space-12));
    margin-inline: auto;
  }
  /* 和文の本文柱。1行あたり全角40字前後に収める */
  /* 見出しを左に置き、本文を右に流す2カラム。
     ⛔ 空いた右を「本文を広げて」埋めない。和文は1行が長いほど読みにくくなるので、
        余った幅は見出し側に渡す。本文はここでも約42字/行に収まる。
     ⛔ 見出しは sticky にして、長い一覧を読んでいる間も「今どの章か」を残す。
        top はヘッダーの高さぶん下げる（貼り付いたヘッダーに隠れる） */
  .l-split {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--space-8) var(--space-16);
    align-items: start;
  }
  .l-split__head { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
  .l-split__body { min-width: 0; }

  /* ヒーローが縦積みに変わる幅と合わせる。⛔ ここを別の値にしない */
  @media (max-width: 899px) {
    .l-split { grid-template-columns: 1fr; gap: var(--space-8); }
    .l-split__head { position: static; }
  }

  /* ヘッダーは上端に貼り付いて追従する。
     ⛔ fixed にしてはいけない。通常フローにある黒帯（l-demo-bar）の上に重なる
        （実測で発生）。sticky なら黒帯の下から始まり、スクロールで上端に貼り付く。
     ⛔ 黒帯も固定すると上部が 44+68=112px 埋まり、画面高の低い端末で本文が読めなくなる。
        告知はページ先頭で1度読ませれば要件を満たす。 */
  .l-header {
    position: sticky; top: 0; z-index: 90;
    background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow .2s ease;
  }
  /* 少しでもスクロールしたら影をつけて、本文の上に載っていることを示す */
  .l-header.is-stuck { box-shadow: 0 1px 12px rgb(20 24 28 / 10%); }

  /* ⛔ sticky なので本文を押し下げる必要はない（fixed 時の名残を削除）。
     l-main はページ内リンクの基準としてだけ残す */
  .l-main { }
  .l-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-3);
  }
  .l-header__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
  .l-header__mark {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: 700; font-size: var(--fs-lg);
  }
  .l-header__name { display: block; font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; }
  .l-header__role {
    display: block;
    font-size: var(--fs-xs); letter-spacing: .12em;
    color: var(--color-text-muted);
  }
  .l-header__nav { display: flex; align-items: center; gap: var(--space-6); font-size: var(--fs-sm); }
  .l-header__cta { margin-left: var(--space-2); }
  .l-header__link { color: var(--color-text-secondary); text-decoration: none; }
  .l-header__link:hover { color: var(--color-accent); }

  /* 縦のリズム。セクション間の余白はここだけが決める */
  /* ページ内リンクの着地点が固定ヘッダーに隠れないようにする */
  .l-section { padding-block: var(--space-16); scroll-margin-top: var(--header-h); }
  /* ヒーローの背景。ぼかしたオフィス写真 ＋ その上にかぶせる膜の2枚。
     ⛔ 写真は装飾なので HTML には書かない（読み上げにも検索にも意味がない）。
     ⛔ z-index を負にした擬似要素は「親の背景より前・本文より後ろ」に入る。
        親に isolation を付けて、外の要素より後ろへ抜けないようにしている。 */
  .l-section--hero {
    position: relative;
    isolation: isolate;
    /* 上の余白。⛔ 黒帯とヘッダーで既に148px使っているので、
       ここを広げるぶん下の要素が押し下がる */
    padding-block: var(--space-12) var(--space-16);
    background: var(--hero-bg);   /* 写真が読めなかったときに出る地の色 */
  }
  .l-section--hero::before,
  .l-section--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .l-section--hero::before {
    z-index: -2;
    background: var(--hero-photo) center / cover no-repeat;
  }
  /* 膜。⛔ 消すと見出しのコントラストが基準を割る */
  .l-section--hero::after {
    z-index: -1;
    background: var(--hero-veil);
  }

  /* 面を交互に変えて、章の切れ目を色でも示す */
  .l-section--alt { background: var(--color-bg-surface-alt); }
  .l-section + .l-section { border-top: 1px solid var(--color-border); }
  .l-section--alt + .l-section, .l-section + .l-section--alt { border-top: 0; }

  /* スクロールで入ってきた章を軽く持ち上げる。JavaScript は使わない。
     ⛔ 対応していないブラウザでは何も起きないだけで、内容は最初から見えている */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .l-section > .l-container {
        animation: l-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
      }
      @keyframes l-rise {
        from { opacity: 0; translate: 0 16px; }
        to   { opacity: 1; translate: 0 0; }
      }
      .l-section--hero > .l-container { animation: none; }
    }
  }

  .l-footer {
    padding-block: var(--space-12);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-surface-alt);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
  }
  .l-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; }

  @media (max-width: 767px) {
    .l-demo-bar { padding-inline: var(--space-4); }
    .l-container { width: min(var(--width-container), 100% - var(--space-8)); }
    /* 小さい画面ではページ内リンクを畳むが、問い合わせだけは残す */
    .l-header__nav > .l-header__link { display: none; }
    .l-header__nav { gap: 0; }
    .l-section { padding-block: var(--space-12); }
    .l-section--hero { padding-block: var(--space-12); }
  }

  /* ⛔ 背景の切り替えは 899px。ヒーローが縦積みに変わる幅と必ず合わせる。
     ここが 767px だったため、768〜899px の間だけ「縦積みなのに横向きの膜」に
     なっていた（膜が薄い右側へ本文が伸びる＝読みにくくなる帯）。 */
  @media (max-width: 899px) {
    /* 縦長の専用画像に差し替える。⛔ 横長画像を縦長の面に cover で敷くと
       2.5倍に引き伸ばした中央の細い帯しか映らず、ぼやけた平面になる（実機で発生）。
       写真の中で構造のある部分（植栽・デスク）が上に来るよう、
       元画像の上260pxを落として切り出してある（_build_hero.py）。 */
    .l-section--hero::before { background-image: url("/assets/img/hero-office-sp.webp"); }
    /* 縦に積むと文字が全幅に載るので、膜は縦方向のグラデにする。
       実測（430×1100・専用画像）: キッカー 5.14 ／ 大見出し 9.31 ／ リード文 7.44 ＝ AA合格。
       ⛔ 濃さを触ったら `_check_hero_contrast.py` で測り直す。 */
    .l-section--hero::after {
      background: linear-gradient(170deg,
          rgb(247 246 243 / 38%) 0%,
          rgb(244 242 238 / 32%) 55%,
          rgb(241 239 234 / 22%) 100%);
    }
  }
}