/* ============================================================
     幽玄会社テンプル TOPページ — 統合スタイルシート
     ------------------------------------------------------------
     構成：Hero → Archiving → Now → Footer

     統合にあたって行ったこと：
     ・Hero/Footer（--cave系トークン、Noto Serif JP / Noto Sans JP /
       IM Fell English）と、Now/Archiving（--bg系トークン、
       Shippori Mincho / Zen Kaku Gothic New）の2系統に分かれていた
       デザイントークンを、ひとつの共通トークンセットに統一
     ・和文見出しフォントは Shippori Mincho に統一（Hero見出しの
       weight 200 は読み込み対象外のため、最も近い 400 に変更）
     ・本文フォントは Zen Kaku Gothic New に統一（従来の weight 300
       の軽さはそのまま踏襲）
     ・英字のキャプション／サブタイトルは IM Fell English（italic）
       のまま維持し、Hero・Footer の世界観を継承
     ・アニメーション名が衝突していたため改名：
         Hero の「breathe」→ yg-breathe / yg-breathe-en / yg-breathe-tag
         Footer の「flicker」（灯明）→ candle-flicker
         Archiving/Now の「flicker」（蛍）はそのまま維持
     ・Footer にあった確認用の .page-stub（プレースホルダー文言）は
       最終ページでは不要のため削除
     ・Hero背景は幽玄神殿のスケッチ画像（hero-bg.png）に差し替え済み

     2回目の調整で行ったこと：
     ・セクション順を Hero → Archiving → Now → Footer に変更
     ・セクション間の余白（上下padding）を全体的に縮小
     ・明滅系アニメーション（yg-breathe系／breathe／flicker／
       candle-flicker）の周期をすべて7〜8秒前後に統一
       （元は5s〜28sとバラバラだった）
     ・Footerの「幽玄会社テンプル」を上詰め表示に変更
     ・Hero以外の背景をグラデーション（.yg-page）に変更
       （Heroは独自の背景画像を持つため影響なし）
  ============================================================ */

  /* ---------------------------------------------------------
     共通デザイントークン
  --------------------------------------------------------- */
  :root{
    --bg:         #F7F6F2;  /* 生成り紙／洞窟の余白（統合前の --bg と --cave を統一） */
    --bg2:        #F0EDE8;  /* Footer等、一段沈んだ余白（旧 --cave2） */
    --ink:        #1F1D1B;  /* 墨の文字（見出し・ラベル：最も濃い） */
    --ink-soft:   #3D3830;  /* 項目テキスト：見出しよりわずかに薄い（旧#615D54から濃く変更） */
    --ink-faint:  #6E695F;  /* 日付・キャプション：さらに一段薄いが視認性は確保（旧#9A968Cから濃く変更） */
    --line:       #DAD6CC;  /* 罫線色 */
    --accent:     #2C3A52;  /* 藍のアクセント（Current ラベルのみ使用） */
    --cave-image: url("assets/temple-hero.jpg"); /* Hero背景（元画像そのまま） */

    --serif:    'Shippori Mincho', serif;         /* 見出し・活動名（和文） */
    --serif-num: 'EB Garamond', 'Shippori Mincho', serif;  /* 英字・数字（日付など）専用。和文はShippori Minchoにフォールバック */
    --sans:     'Zen Kaku Gothic New', sans-serif; /* 本文・ラベル */
  }

  *{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--serif);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden; /* iOS等での意図しない横スクロールを防止 */
  }

  /* Hero以外（Archiving / Now / Footer）を貫く、ごく緩やかなグラデーション。
     Heroは独自の背景画像で覆われるため、ここでは影響を受けない。 */
  .yg-page{
    background:linear-gradient(180deg, var(--bg) 0%, #F2EFE9 55%, var(--bg2) 100%);
    color:var(--ink);
  }

  /* ---------------------------------------------------------
     共通アニメーション
  --------------------------------------------------------- */

  /* 蛍の発光カーブ（Archiving / Now 共通）周期8秒、一周期に一度だけ発光 */
  @keyframes flicker{
    0%{   opacity:0.6;  }
    10%{  opacity:0.62; }
    20%{  opacity:0.72; }
    27%{  opacity:0.9;  }
    32%{  opacity:1;    }
    38%{  opacity:0.86; }
    46%{  opacity:0.68; }
    58%{  opacity:0.61; }
    100%{ opacity:0.6;  }
  }

  /* 見出しの静かな呼吸（Archiving / Now 共通） */
  @keyframes breathe{
    0%, 100%{ opacity:0.92; letter-spacing:0.30em; }
    50%{      opacity:1;    letter-spacing:0.34em; }
  }

  /* Hero専用：ロゴ・英字名・タグラインの呼吸（不透明度のみのフェード） */
  @keyframes yg-breathe{
    0%, 100%{ opacity:0.2; }
    50%{      opacity:1;   }
  }
  @keyframes yg-breathe-en{
    0%, 100%{ opacity:0.5; }
    50%{      opacity:0.9; }
  }
  @keyframes yg-breathe-tag{
    0%, 100%{ opacity:0.45; }
    50%{      opacity:0.95; }
  }

  /* Hero額縁専用：木目の光と影がじわじわ移り変わるグラデーション（周期28秒） */
  @keyframes yg-frame-shift{
    0%{   background-position:20% 20%;  }
    50%{  background-position:80% 80%;  }
    100%{ background-position:20% 20%;  }
  }

  /* Hero背景専用：ごく微弱な明滅（周期11秒、コントラストと明るさがわずかに揺れる） */
  @keyframes yg-hero-bg-flicker{
    0%, 100%{ filter:contrast(1.03) brightness(0.99); }
    50%{      filter:contrast(1.05) brightness(1.015); }
  }

  /* Footer専用：灯明の明滅（不規則に揺らぐ火のリズム、周期8秒） */
  @keyframes candle-flicker{
    0%   { opacity:1;    }
    3%   { opacity:0.35; }
    6%   { opacity:0.9;  }
    8%   { opacity:0.25; }
    10%  { opacity:1;    }
    28%  { opacity:1;    }
    30%  { opacity:0.4;  }
    32%  { opacity:0.85; }
    34%  { opacity:1;    }
    62%  { opacity:1;    }
    64%  { opacity:0.3;  }
    66%  { opacity:0.75; }
    68%  { opacity:0.95; }
    70%  { opacity:1;    }
    100% { opacity:1;    }
  }

  /* ============================================================
     SITE HEADER（左上固定）
  ============================================================ */
  .yg-site-header{
    position:fixed;
    top:0; left:0;
    z-index:50;
    padding:20px 24px;
    pointer-events:none;
  }
  .yg-site-header a{
    pointer-events:auto;
    text-decoration:none;
    font-family:var(--serif-num);
    font-weight:500;
    font-size:13px;
    letter-spacing:0.08em;
    color:var(--ink-soft);
    transition:color 0.3s ease;
  }
  .yg-site-header a:hover{
    color:var(--ink);
  }

  /* ============================================================
     HERO
  ============================================================ */
  .yg-hero{
    position:relative;
    height:100svh;
    max-height:1028px;
    box-sizing:border-box;
    background:var(--bg); /* 額縁まわりのマット部分 */
    padding:clamp(56px, 9vh, 88px) clamp(20px, 6vw, 72px) clamp(20px, 5vh, 56px);
    display:flex;
  }
  .yg-hero__frame{
    position:relative;
    flex:1;
    padding:12px;
    box-sizing:border-box;
    /* 額縁本体：光の当たる面と陰の面をグラデーションで表現した木枠（彩度を抑えたトーン） */
    background:linear-gradient(155deg,
      #B6B0A2 0%,
      #A6A091 22%,
      #79766A 48%,
      #989385 72%,
      #B6B0A2 100%);
    background-size:240% 240%; /* 実サイズより大きく描き、位置をずらして光の移ろいを表現 */
    animation:yg-frame-shift 28s ease-in-out infinite;
    box-shadow:0 8px 24px rgba(31,29,27,0.10); /* 壁に掛かっているような柔らかい影 */
  }
  .yg-hero__canvas{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    /* 額縁と絵の間の、一段窪んだ縁（rabbet）を表す内側の影。上下左右で陰影の向きを変え、より立体的に */
    box-shadow:
      inset 0 3px 6px rgba(20,17,12,0.4),
      inset 0 -1px 2px rgba(255,252,245,0.12),
      inset 0 0 0 1px rgba(20,17,12,0.25);
  }
  /* 絵の四隅がわずかに沈み込むビネット（周辺減光）。額装された一枚の絵らしい奥行きを出す */
  .yg-hero__canvas::before{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(20,17,12,0) 55%, rgba(20,17,12,0.24) 100%);
  }
  /* ガラス面にギャラリーの照明が反射しているような、斜めの光の筋 */
  .yg-hero__canvas::after{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(115deg,
      transparent 28%,
      rgba(255,255,255,0.09) 42%,
      rgba(255,255,255,0.15) 48%,
      rgba(255,255,255,0.06) 54%,
      transparent 66%);
    mix-blend-mode:screen;
  }
  .yg-hero__bg{
    position:absolute;
    inset:-4%;
    background-image:var(--cave-image);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    filter:contrast(1.03);
    transition:filter 0.8s ease, transform 0.8s ease;
    animation:yg-hero-bg-flicker 11s ease-in-out infinite;
  }
  .yg-hero__bg::after{
    content:"";
    position:absolute; inset:0;
    opacity:0.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .yg-hero:hover .yg-hero__bg{
    filter:contrast(1.08);
    transform:scale(1.015);
  }
  .yg-hero__content{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 1.4rem;
  }
  .yg-hero__logo-jp{
    margin:0;
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(18px, 3.5vw, 36px);
    letter-spacing:0.25em;
    color:var(--ink);
    animation:flicker 8s ease-in-out infinite;
  }
  .yg-hero__logo-en{
    margin:0.9rem 0 0;
    font-family:var(--serif-num);
    font-size:clamp(11px, 1.3vw, 15px);
    letter-spacing:0.22em;
    color:var(--ink-faint);
    animation:yg-breathe-en 7s ease-in-out infinite;
  }
  .yg-hero__tagline{
    margin:1.6rem 0 0;
    font-family:var(--serif);
    font-weight:300;
    font-size:clamp(13px, 1.6vw, 18px);
    letter-spacing:0.2em;
    color:var(--ink);
    animation:flicker 8s ease-in-out infinite;
    animation-delay:-3s;
  }

  @media (max-width:640px){
    .yg-hero__logo-jp{ font-size:26px; }
    .yg-hero__logo-en{ display:none; }
    .yg-hero__tagline{ margin-top:0.7rem; font-size:16px; }
  }

  /* ============================================================
     NOW
  ============================================================ */
  .now{ max-width:1040px; margin:0 auto; padding:3vh 8vw 8vh; }

  .now__heading{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(22px, 2.6vw, 30px);
    letter-spacing:0.30em; color:var(--ink);
    margin:0 0 5vh 0; text-align:center;
    animation:breathe 7s ease-in-out infinite;
  }

  /* ---- 共通：日付＋内容の行形式（Future / Current / Past で共通） ---- */
  .now__entry-date{
    flex-shrink:0;
    min-width:128px;
    font-family:var(--serif-num);
    font-weight:500;
    font-size:15px;
    letter-spacing:0.03em;
    color:var(--ink-faint);
    animation:flicker 8s ease-in-out infinite;
  }
  .now__entry-content{
    display:block;
    font-family:var(--serif);
    font-weight:500;
    font-size:14px;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    animation:flicker 8s ease-in-out infinite;
  }
  /* 英語表記の項目はEB Garamondに揃える */
  .now__entry-content.is-en{
    font-family:var(--serif-num);
    font-style:italic;
  }

  /* ---- Future：見出し直下、常時表示 ---- */
  .now__future{
    max-width:640px;
    padding-bottom:2vh; margin-bottom:3.3vh;
  }
  .now__future-label{
    display:block; margin-bottom:12px;
    font-family:var(--serif-num);
    font-weight:500;
    font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--ink);
    animation:breathe 9s ease-in-out infinite;
  }
  .now__future-items{ display:flex; flex-direction:column; gap:12px; }
  .now__future-item{
    display:flex; align-items:baseline; gap:14px;
    text-decoration:none;
  }
  .now__future-item:hover .now__entry-content{ color:var(--ink); }
  .now__future-item:nth-of-type(1) .now__entry-date,
  .now__future-item:nth-of-type(1) .now__entry-content{ animation-delay:-1s; }
  .now__future-item:nth-of-type(2) .now__entry-date,
  .now__future-item:nth-of-type(2) .now__entry-content{ animation-delay:-3.5s; }

  /* ---- Current：主役。明滅が「今、生きている」ことを示す ---- */
  .now__current{
    max-width:640px;
    padding-bottom:2vh; margin-bottom:3.3vh;
  }
  .now__current-label{
    display:block; margin-bottom:12px;
    font-family:var(--serif-num);
    font-weight:500;
    font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--accent);
    animation:breathe 9s ease-in-out infinite;
  }
  .now__current-items{ display:flex; flex-direction:column; gap:12px; }
  .now__current-empty{
    display:flex; align-items:baseline; gap:14px;
  }
  .now__current-item{
    display:flex; align-items:baseline; gap:14px;
    text-decoration:none;
  }
  .now__current-item:hover .now__entry-content{ color:var(--ink-soft); }
  .now__current-item .now__entry-content{
    color:var(--ink);
    animation:flicker 8s ease-in-out infinite;
  }
  .now__current-item:nth-of-type(1) .now__entry-date,
  .now__current-item:nth-of-type(1) .now__entry-content{ animation-delay:0s;   }
  .now__current-item:nth-of-type(2) .now__entry-date,
  .now__current-item:nth-of-type(2) .now__entry-content{ animation-delay:-2s;  }
  .now__current-item:nth-of-type(3) .now__entry-date,
  .now__current-item:nth-of-type(3) .now__entry-content{ animation-delay:-4s;  }
  .now__current-item:nth-of-type(4) .now__entry-date,
  .now__current-item:nth-of-type(4) .now__entry-content{ animation-delay:-6s;  }

  /* ---- Past：アコーディオン ---- */
  .now__records{ max-width:640px; }

  .now__toggle{
    all:unset; box-sizing:border-box;
    position:relative;
    display:flex; align-items:baseline; gap:14px;
    width:100%; cursor:pointer;
    padding:0 0 14px;
  }
  /* 下線の左端はFuture/Current/Pastと揃え、右端はNowセクションの右余白（Archivingと同じ基準）まで伸ばす。
     正確な距離はJSで測定して --now-past-ext に設定する */
  .now__toggle::after{
    content:"";
    position:absolute;
    left:0; right:calc(-1 * var(--now-past-ext, 0px)); bottom:0;
    border-bottom:1px solid var(--line);
  }
  .now__toggle-name{
    font-family:var(--serif-num); font-weight:500; font-size:13px;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--ink);
    flex-shrink:0;
    animation:breathe 9s ease-in-out infinite;
  }
  /* 「+」は下線の右端（延長された位置）の真上に配置する */
  .now__toggle-icon{
    position:absolute;
    right:calc(-1 * var(--now-past-ext, 0px));
    bottom:calc(50% - 5.5px);
    width:11px; height:11px;
  }
  .now__toggle-icon::before, .now__toggle-icon::after{ content:''; position:absolute; background:var(--ink-soft); }
  .now__toggle-icon::before{ left:0; top:5px; width:11px; height:1px; }
  .now__toggle-icon::after{
    left:5px; top:0; width:1px; height:11px;
    transition:transform 0.45s cubic-bezier(.22,1,.36,1), opacity 0.45s ease;
    transform-origin:center;
  }
  .now__toggle[aria-expanded="true"] .now__toggle-icon::after{ transform:rotate(90deg); opacity:0; }

  .now__panel{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows 0.55s cubic-bezier(.22,1,.36,1);
  }
  .now__panel.is-open{ grid-template-rows:1fr; }
  .now__panel-inner{ overflow:hidden; }
  .now__panel-pad{ padding:1.6vh 0 0.8vh; }

  .now__ledger{ display:flex; flex-direction:column; gap:12px; }
  .now__row{
    display:flex; align-items:baseline; gap:14px;
    text-decoration:none;
  }
  .now__row:hover .now__entry-content{ color:var(--ink); }
  .now__row:nth-of-type(1) .now__entry-date,
  .now__row:nth-of-type(1) .now__entry-content{ animation-delay:-0.5s; }
  .now__row:nth-of-type(2) .now__entry-date,
  .now__row:nth-of-type(2) .now__entry-content{ animation-delay:-3s;   }
  .now__row:nth-of-type(3) .now__entry-date,
  .now__row:nth-of-type(3) .now__entry-content{ animation-delay:-5.5s; }
  .now__row:nth-of-type(4) .now__entry-date,
  .now__row:nth-of-type(4) .now__entry-content{ animation-delay:-7s;   }

  /* ============================================================
     WORK（作品空間＋キャプション）
     ------------------------------------------------------------
     ・左：幽玄会社テンプルという名称と、大きな余白＝作品空間そのもの
     ・右：控えめな作品キャプション（メイン領域の約28%、最大380px）
     ・カードUIに見えすぎないよう、影は極めて薄く、角丸なし
  ============================================================ */
  .work{
    position:relative;
    max-width:1200px;
    margin:0 auto;
    padding:9vh 8vw 14vh;
    min-height:78vh;
  }
  /* キャプション：メイン領域右端付近、外周へごくわずかに張り出す。垂直方向は中央よりやや上 */
  .work__caption{
    position:absolute;
    top:46%;
    right:var(--work-caption-right, calc(3vw - 18px));
    transform:translateY(-50%);
    width:min(30%, 380px);
    min-width:260px;
    background:rgba(255,255,255,0.72);
    border:1px solid rgba(31,29,27,0.07);
    box-shadow:0 1px 2px rgba(31,29,27,0.04);
    padding:2rem 1.8rem;
  }
  .work__caption-heading{
    margin:0 0 2.6vh;
    font-family:var(--serif);
    font-weight:500;
    font-size:15px;
    letter-spacing:0.28em;
    color:var(--ink);
    text-align:center;
  }
  .work__caption-statement{
    margin:0 0 3.2vh;
    font-family:var(--serif);
    font-weight:300;
    font-size:12px;
    letter-spacing:0.03em;
    line-height:2;
    color:var(--ink-soft);
    text-align:left;
  }
  .work__caption-list{ margin:0; }
  .work__caption-row{
    display:flex;
    align-items:baseline;
    gap:1.1rem;
    margin-bottom:11px;
  }
  .work__caption-row:last-child{ margin-bottom:0; }
  .work__caption-row dt,
  .work__caption-row dd{ margin:0; font-family:var(--serif); }
  .work__caption-row dt{
    flex:none;
    width:5em;
    font-size:10px;
    letter-spacing:0.14em;
    color:var(--ink-faint);
    white-space:nowrap;
  }
  .work__caption-row dd{
    font-size:12px;
    letter-spacing:0.02em;
    color:var(--ink-soft);
  }

  @media (max-width:900px){
    .work{ min-height:0; padding:6vh 8vw 8vh; }
    .work__caption{
      position:static;
      transform:none;
      width:100%;
      max-width:420px;
      min-width:0;
      margin:0 0 0 auto;
    }
  }

  @media (max-width:560px){
    .work__caption{ margin-left:0; padding:1.6rem 1.4rem; }
  }

  /* ============================================================
     ARCHIVING
  ============================================================ */
  .archiving{
    max-width:1040px;
    margin:0 auto;
    padding:8vh 8vw 8vh;
  }

  .archiving__heading{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(22px, 2.6vw, 30px);
    letter-spacing:0.30em;
    color:var(--ink);
    margin:0 0 5vh 0;
    text-align:center;
    animation:breathe 7s ease-in-out infinite;
  }

  .archiving__list{
    position:relative;
    display:flex;
    justify-content:space-between;
  }
  .archiving__item{
    width:calc((100% - 168px) / 4); /* 4項目・gap56px相当を維持しつつ、両端をコンテナ幅に揃える */
  }

  .archiving__item{
    position:relative;
    display:block;
    text-decoration:none;
    color:inherit;
    opacity:0;
    transform:translateY(12px);
    transition:opacity 1s ease, transform 1s ease;
  }
  .archiving__item.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  .archiving__label{
    display:block;
    font-family:var(--sans);
    font-weight:400;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:10px;
    opacity:0;
    transition:opacity 0.5s ease;
  }
  .archiving__item:hover .archiving__label{
    opacity:1;
  }

  .archiving__name{
    display:block;
    font-family:var(--serif-num);
    font-weight:500;
    font-size:18px;
    line-height:1.35;
    letter-spacing:0.04em;
    color:var(--ink-soft);
    min-height:calc(1.35em * 2); /* 見出しが1行でも2行でも、キャプションの開始位置を揃える */
    animation:flicker 8s ease-in-out infinite;
  }
  .archiving__item:nth-child(1) .archiving__name{ animation-delay:0s;    }
  .archiving__item:nth-child(2) .archiving__name{ animation-delay:-2.5s; }
  .archiving__item:nth-child(3) .archiving__name{ animation-delay:-5s;   }
  .archiving__item:nth-child(4) .archiving__name{ animation-delay:-1.3s; }

  .archiving__caption{
    display:block;
    margin-top:9px;
    font-size:13.5px;
    line-height:1.9;
    letter-spacing:0.04em;
    color:var(--ink-faint);
    animation:flicker 8s ease-in-out infinite;
  }
  .archiving__item:nth-child(1) .archiving__caption{ animation-delay:0s;    }
  .archiving__item:nth-child(2) .archiving__caption{ animation-delay:-2.5s; }
  .archiving__item:nth-child(3) .archiving__caption{ animation-delay:-5s;   }
  .archiving__item:nth-child(4) .archiving__caption{ animation-delay:-1.3s; }

  /* キャプション文冒頭に添える「開示前」タグ */
  .archiving__tag{
    font-family:var(--sans);
    font-weight:500;
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--ink-faint);
    margin-right:0.4em;
  }

  /* ============================================================
     FOOTER
  ============================================================ */
  .yg-footer{
    position:relative;
    background:var(--bg2);
    border-top:1px solid var(--line);
    overflow:hidden;
  }
  .yg-footer::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0.18;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .yg-footer__inner{
    position:relative;
    padding:20px 24px calc(48px + env(safe-area-inset-bottom));
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:48px;
    flex-wrap:wrap;
  }
  .yg-footer__brand{
    display:flex;
    align-items:flex-start;
    align-self:flex-start; /* 「幽玄会社テンプル」を上詰めに */
    gap:24px;
  }
  .yg-footer__brand h2{
    margin:0 0 6px;
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(15px, 1.6vw, 18px);
    letter-spacing:0.14em;
    color:var(--ink);
    animation:flicker 8s ease-in-out infinite;
  }
  .yg-footer__subtitle{
    margin:0;
    font-family:var(--serif-num);
    font-size:14px;
    letter-spacing:0.06em;
    color:var(--ink-faint);
    animation:flicker 8s ease-in-out infinite;
  }
  .yg-footer__copyright{
    font-family:var(--serif-num);
    font-size:14px;
    letter-spacing:0.02em;
    color:var(--ink-faint);
    animation:flicker 8s ease-in-out infinite;
    animation-delay:-4s;
  }

  /* ---------------------------------------------------------
     アクセシビリティ／レスポンシブ
  --------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .yg-hero__logo-jp, .yg-hero__logo-en, .yg-hero__tagline,
    .yg-hero__bg, .yg-hero__frame,
    .now__heading, .now__entry-date, .now__entry-content,
    .now__future-label, .now__current-label, .now__toggle-name,
    .archiving__heading, .archiving__name, .archiving__caption,
    .work__caption-heading,
    .yg-footer__brand h2, .yg-footer__subtitle, .yg-footer__copyright{
      animation:none; opacity:1;
    }
    .archiving__item{ transition:none !important; transform:none !important; opacity:1; }
    .archiving__label{ transition:none !important; }
  }

  @media (max-width:640px){
    .now{ padding-top:1.5vh; }
    .now__entry-content{ font-size:14px; }
    .now__entry-date{ min-width:128px; font-size:14px; }
    .yg-footer__inner{
      padding:20px 24px calc(32px + env(safe-area-inset-bottom));
      gap:16px;
    }
  }

  @media (max-width:560px){
    .archiving{ padding-top:3vh; padding-bottom:6vh; }
    .archiving__list{ flex-direction:column; gap:28px; }
    .archiving__item{ width:100%; }
    .archiving__name{ font-size:16px; }
  }