@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — Manifest Section Styles
   ファイル: manifest.css
   役割: Manifest セクション (ヘッダーパート + 本体)
   ---
   構造:
   <section class="manifest site-section reveal-group">
     .manifest__header  — ヘッダーパート (pttn-big-2.svg + MANIFEST)
     .manifest__body    — 本体 (イエロー、縦書きコピー + 罫線 + 英文SVG)
   ---
   ヘッダーパート + 本体は一体。外側に上下24px (--section-gap)。
   ========================================================================== */

.manifest {
  position: relative;
  width: 100%;
}

/* --------------------------------------------------------------------------
   ヘッダーパート (Statement と共通仕様)
   背景: pttn-big-2.svg を天地400pxにトリミング
   見出し: Goudy Bookletter 1911 / 56pt / #720b2e
   -------------------------------------------------------------------------- */
.manifest__header {
  position: relative;
  width: 100%;
  height: var(--header-pattern-h);  /* 400px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 背景パターン (pttn-big-2.svg)
   v15.1: width/height を SVG実寸幅 (--header-pattern-svg-w) に固定し、
          center 配置の絶対座標で左右はみ出し可。
          object-fit は使わず、SVG をそのまま指定サイズで描画。 */
.manifest__header-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--header-pattern-svg-w);
  height: auto;
  max-width: none;
  z-index: var(--z-base);
}

/* 「MANIFEST」見出し (Goudy Bookletter 1911 / 56pt) */
.manifest__title {
  position: relative;
  z-index: var(--z-content);
  font-family: var(--font-goudy);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);  /* Goudy 共通の字間 */
  margin: 0;
  -webkit-text-stroke: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   本体 (イエロー背景、縦書きコピー + 罫線 + 英文SVG)
   ---
   セクション高さ 960px。上下 padding 167.5px / 147.5px
   (ガイドのH170/H150から、上下2.5pxずつカットして960pxに調整)。
   -------------------------------------------------------------------------- */
.manifest__body {
  position: relative;
  width: 100%;
  background-color: #fdd700;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上 167.5px (H170 - 2.5) / 下 147.5px (H150 - 2.5) */
  padding-top: 167.5px;
  padding-bottom: 147.5px;
}

/* --------------------------------------------------------------------------
   縦書きコピー「想像の共鳴が / コスモスを / 創造する」
   OP-1 と同じ縦書き手法 (writing-mode: vertical-rl)
   -------------------------------------------------------------------------- */
.manifest__copy {
  display: flex;
  flex-direction: row-reverse;  /* 右から左 */
  align-items: flex-end;        /* 下揃え (各行の文字数が異なるため) */
  justify-content: center;
  gap: 0;                       /* 列間は line-height で確保 */
  margin: 0;
}

.manifest__line {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-shuei-anti);
  /* 44pt = 44px (W1440アートボード基準) */
  font-size: 44px;
  /* 行送り 77pt ÷ 44pt = 1.75 */
  line-height: 1.75;
  color: var(--color-wine-typo);
  margin: 0;
  padding: 0;
  font-weight: 400;

  /* オプティカル代替: プロポーショナルメトリクス */
  font-feature-settings: "palt" 1;

  /* 細く見せる: .shuei-light クラスを併用。
     背景色 (#fdd700) を stroke 色として指定。
     stroke幅は 44px × 0.01389 ≒ 0.611px が自動で効く。 */
  --shuei-light-color: #fdd700;
}

/* --------------------------------------------------------------------------
   罫線 (W100px / 3px / #f7f6f6)
   コピーと英文SVGの間。上下に H50 ずつ。
   -------------------------------------------------------------------------- */
.manifest__divider {
  width: 100px;
  height: 3px;
  background-color: var(--color-bg-light);
  border: 0;
  /* 上 H50 (コピーから) / 下 H50 (英文SVGへ) */
  margin: 50px 0;
}

/* --------------------------------------------------------------------------
   英文 i-r-c-a-c_2.svg (Imaginative Resonance Creates A Cosmos)
   SVG原寸 198.08 × 278.03
   -------------------------------------------------------------------------- */
.manifest__statement {
  width: 198.0821px;          /* v46.5: SVG原寸(CD指定・PC font44ptに対応)。これが正。231pxはv45.9で誤って拡大した値だった */
  height: auto;
  display: block;
}

/* ==========================================================================
   SP (≤481px) — MANIFEST
   ========================================================================== */
@media (max-width: 481px) {
  .manifest__title {
    font-size: 38px;
  }

  /* 黄色Box: 9:16 (390 × 693) アスペクト固定、内容物は中央寄せ */
  .manifest__body {
    aspect-ratio: 9 / 16;
    padding-top: 0;
    padding-bottom: 0;
    justify-content: center;
  }

  /* 縦書き「想像の共鳴が/コスモスを/創造する」: tsuku-bold 30pt / 行送り52.5pt */
  .manifest__line {
    font-size: 30px;
    line-height: 1.75;
  }

  /* 罫線: 線幅3pt × W68px、上下36pxアキ */
  .manifest__divider {
    width: 68px;
    height: 3px;
    margin: 36px 0;
  }

  /* 英文SVG: W135.056px */
  .manifest__statement {
    width: 135.056px;         /* v46.5: SP SVG原寸(CD指定・SP font30ptに対応)。157.5pxはv45.9の誤り */
  }
}

/* ==========================================================================
   v44.5: 横向きスマホ — 横書き切替の再導入
   ---
   経緯: 縦書き3列(1列≒460px)は横向きの画面高(390-440px)に収まらず1文字ごとに
   改列して崩壊する(v35.1でルール一時撤去→崩壊表示のまま積み残し)。
   判定: (orientation:landscape) and (max-height:500px)
     = v36.2確定形。旧max-width:950pxは端末実幅の境界と重なりBraveのセーフエリア
       伸縮で真偽が往復=ブルブルの一因だった。高さ390-440は500から十分遠く安定。
       statement.css の現存ルールと同形式。iPad横(h768)は対象外=縦書き維持。
   揺れ対策の本命は opening.js の着地Y修正(v44.5・innerHeight依存→snap-marker方式)。
   Manifest側は表示修正のみ。
   ========================================================================== */
/* ==========================================================================
   v45.3: 横向きスマホ — CD仮説採用「Statement同様、縦組みのまま縮小」
   ---
   旧v44.6は横書き化(writing-mode:horizontal-tb)+3行縦積みだった。これが
   ①縦組みflexの化け(全ブラウザ)②Braveのバー判定発振(揺れ)の元凶だった。
   新方針: 縦組み(vertical-rl)を維持し、横向きの低い画面高に font-size だけで
   収める。Statement(.statement__line: 52→36px @ landscape/max-height:500)と同設計。
   縦組みのままなので writing-mode 切替が消え、化けも writing-mode 由来の
   レイアウト不安定も発生しない。body高さは内容(padding+コピー)に追従。
   判定: (orientation:landscape) and (max-height:500px) = 章/Statement と統一。
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .manifest__body {
    /* v44.6のheight:560px固定は画面高(390-440)を超えスクロール/窮屈の原因だった→撤回。
       天地paddingを圧縮し、縦組みコピーが画面高に自然に収まるようにする。 */
    padding-top: 56px;
    padding-bottom: 48px;
  }
  .manifest__line {
    /* 縦組み維持のまま font 縮小(Statement流)。
       最長列「コスモスを」5字 × 26px×係数 ≈ 150px で横向き画面高に余裕で収まる。 */
    font-size: 26px;
  }
  .manifest__statement {
    width: 114.9px;           /* v46.5: スマホ横のみ58%縮小。原寸198.0821×0.58≒114.9px */
  }
}

/* v35.1: 横向きmanifestルールを一時撤去（Brave横揺れの最終切り分け）。
   揺れは opening横向きルール撤去(v34.9)後・cover付与(v35.0)後も継続するため、
   Homeに残る最後のセッション改変=このmanifest横向きルールを外し、当方CSSが原因かを確定する。
   ※揺れが当ルール起因でないと判明したら、縦書きコピー縮小(font26px/pad56px)を復活させる。
   → v44.5で上記の通り再導入(判定はv36.2形式・揺れの真因はopening.js側と特定) */