/*
======================================================================
  HAYASEWORKS — styles.final.commented.css
  --------------------------------------------------------------------
  ✅ 同じ仕様・挙動を維持したまま、セクション分割と注釈で可読性を向上
  - 目次ナビ（TOC）ホバー下線
  - HAYASEWORKS ロゴ/タイトル/TOC の左端を共有ガターで揃える
  - 目次ナビの表示位置を上げる（ヒーロー左下）
  - ハンバーガーメニュー時の暗幕とメニューの z-index を安定化
  - ライトボックスの見やすさ＆フィルムストリップ
  - モバイル最適化
======================================================================
*/


/* ===================================================================
   0) 基本トークン（色・影・レイアウト幅）
   -------------------------------------------------------------------
   - サイト全体で使うカラー/影/最大幅。
   - --gutter-left は「左端を揃える」ための共有ガター。
=================================================================== */
:root{
  /* Palette */
  --bg:#ffffff;
  --text:#5b5b5b;
  --sub:#475569;
  --line:#e2e8f0;
  --brand:#414143;

  /* Layout width */
  --max:1080px;             /* ページの最大幅（本文） */
  --container-max:1100px;   /* ヒーロー左寄せの基準幅 */

  /* Shadows */
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 10px 30px rgba(15,23,42,.10);

  /* 🔸 Brand/Title/TOC の左端を揃える共有ガター */
  --gutter-left: max(40px, calc((100vw - var(--container-max)) / 2 + 12px));
}


/* ===================================================================
   1) ベーススタイル
=================================================================== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--text);
  line-height:1.7; font-size:16px;
  font-family:"Futura","Avenir Next","Avenir",ui-sans-serif,system-ui,-apple-system,"Segoe UI","Inter","Helvetica Neue","Arial","Noto Sans JP",sans-serif;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
.container{ width:min(var(--max),92%); max-width:var(--max); margin:0 auto; padding:20px 20px }


/* ===================================================================
   2) ヘッダー / ナビ
   - PC: 上部固定＋通常ナビ
   - SP: ハンバーガー＋暗幕オーバーレイ
=================================================================== */
.header{ position:sticky; top:0; background:#fff; z-index:10;border-bottom: 1px solid var(--line); }
.header--thin{ border-bottom:1px solid var(--line) }
.nav{ display:flex; align-items:center; gap:16px; height:64px }

/* ロゴ/ブランドを共有ガターで左に揃える */
.logo{ height:28px; width:auto; display:block }
.brand{ display:flex; align-items:center; gap:8px;  }

/* グローバルナビ（PC） */
.links a{
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:14px;
  position:relative;
}
.links a[aria-current="page"]{ background:#f4f6f9 }
.nav .spacer{ 
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右に配置 */
  gap: 24px;
  height: 64px;
  padding: 0 20px;    

}

/* PC ホバー下線（アニメ） */
.links a{ position:relative; overflow:hidden }
.links a::after{
  content:""; position:absolute; left:50%; bottom:4px;
  width:100%; height:2px; background:currentColor; border-radius:999px;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  transition:transform .3s ease;
}
.links a:hover::after,
.links a[aria-current="page"]::after{
  transform:translateX(-50%) scaleX(1);
}

.links {
  display: flex;
  gap: 10px; /* メニュー同士の間隔 */
    margin-left: auto;
}

/* ===================================================================
   3) ハンバーガー（SP） + オーバーレイ/メニュー
   - .nav-overlay は links(=25) より下の 20 に固定
   - クリックは JS 側で「暗幕/余白/リンク → 閉じる」に対応
=================================================================== */
.hamburger{
  display:none; position:fixed; top:12px; right:12px;
  width:44px; height:44px; z-index:30; background:transparent; border:none; cursor:pointer;
}
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--brand);
  transition:transform .25s ease, opacity .2s ease, background .2s ease;
}
.hamburger span:nth-child(1){ top:13px }
.hamburger span:nth-child(2){ top:21px }
.hamburger span:nth-child(3){ top:29px }
/* 開いたときアイコンを「×」に */
.header.open .hamburger span:nth-child(1){ transform:translateY(8px) rotate(45deg); background:#fff }
.header.open .hamburger span:nth-child(2){ opacity:0 }
.header.open .hamburger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); background:#fff }

/* モバイル状態 */
.nav-overlay{ display:none } /* 初期は非表示（JS で hidden 属性も制御） */

@media (max-width:900px){
  .hamburger{ display:inline-block }
  .links{ display:none } /* SP ではデフォルト非表示 */

  /* 🔸 暗幕（オーバーレイ）— メニューより下に敷く */
  .header.open .nav-overlay{
    display:block; position:fixed; inset:0; z-index:20;
    background:rgba(8,8,12,.62); backdrop-filter:blur(6px) saturate(110%);
  }

  /* 🔸 SP メニュー本体（暗幕の上） */
  .header.open .links{
    display:flex; position:fixed; inset:0; z-index:25;
    flex-direction:column; justify-content:center; align-items:center; gap:24px;
    background:transparent;
  }
  .header.open .links a{
    background:transparent; color:#fff; font-size:22px; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; padding:6px 10px;
    text-shadow:0 1px 10px rgba(0,0,0,.35);
    border-radius:0; position:relative;
  }
  .header.open .links a::after{
    content:""; position:absolute; left:50%; bottom:-8px;
    width:100%; height:2px; background: currentColor; border-radius:999px;
    transform: translateX(-50%) scaleX(.2); transform-origin:center; opacity:.9;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .32s;
  }
  .header.open .links a:hover::after{ transform: translateX(-50%) scaleX(1) }
}


/* ===================================================================
   4) ヒーロー（左寄せタイトル & TOC のための土台）
=================================================================== */
.hero--plain{
  min-height:100vh; display:flex; align-items:center; justify-content:flex-start;
  background:#f9fafb; position:relative;
}
.hero-title{ text-align:left }
.hero-title h1{ margin:0; font-size:clamp(32px,6vw,64px); font-weight:400; letter-spacing:.04em }
/* タイトルをやや上に＆左端を共有ガターに合わせる */
.hero--plain .hero-title{
  width:auto; text-align:left; transform:translateY(-28vh);
  margin-left:var(--gutter-left);
}


/* ===================================================================
   5) セクション / 見出し
=================================================================== */
main>section{
  background:#fff; padding:clamp(64px,8vw,96px) 0;
  border:none; border-radius:0; box-shadow:0 20px 40px rgba(0,0,0,.08);
}
main>section:last-of-type{ box-shadow:none }
.k-center{ text-align:center }
.about h2,.works h2,#shopping h2,.contact h2{
  font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  margin-bottom: 80px;
}



/* ===================================================================
   6) ABOUT
=================================================================== */
.about-flex{
  display:grid; grid-template-columns:1fr !important; justify-items:center; text-align:center;
  gap:clamp(24px,5vw,px);
}
.about-icon img{
  width:140px; height:140px; object-fit:cover; border-radius:50%;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); background:#fff; margin:0 auto;
}
.about-text{ max-width:58ch; margin:0 auto }
.about-text p{ margin:0 0 clamp(20px,3vw,32px); line-height:1.8; color:var(--sub) }
.about-text-en{ margin-top:1.5em; line-height:1.7; font-size:.95em; color:#444 }


/* ===================================================================
   7) SNS アイコン
=================================================================== */
.social-links{
  display:flex; justify-content:center; gap:20px; margin-top:40px; color:#000;
}
.social-links a img,.social-links svg{
  width:40px; height:40px; display:block; transition:filter .3s ease;
}
.social-links a:hover img,.social-links a:hover svg{ filter:brightness(180%) }
@media (max-width:600px){
  .social-links{ gap:15px; margin-top:80px }
  .social-links a img,.social-links svg{ width:32px; height:32px }
}


/* ===================================================================
   8) Works / Shopping（カード）
=================================================================== */
.works-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,32px); margin-top:clamp(10px,2vw,16px); margin-bottom:clamp(24px,4vw,40px);
}
.work{
  margin:0; border:1px solid #e9eef5; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.work img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .3s ease, filter .3s ease, opacity .3s ease }
.work:hover img{ filter:brightness(1.1) saturate(.9); opacity:.9 }
.work figcaption{ padding:12px 14px; font-size:14px; color:#667085 }
@media(max-width:640px){ .works-grid{ grid-template-columns:1fr } }


/* ===================================================================
   9) Buttons
=================================================================== */
.btn-dark{
  display:inline-block; padding:14px 32px; background:#000; color:#fff;
  border:2px solid #000; border-radius:12px; font-weight:600; letter-spacing:.05em;
  transition:background .25s ease, color .25s ease;
}
.btn-dark:hover{ background:#fff; color:#000 }
.btn-dark:active{ background:#f4f4f4; color:#000 }


/* ===================================================================
   10) ギャラリーグリッド
=================================================================== */
.gallery{ display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:repeat(12,1fr) }
.gallery figure{
  margin:0; grid-column:span 4; border:1px solid #e9eef5; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04); position:relative
}
.gallery img{ width:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .3s ease, filter .3s ease, opacity .3s ease }
.gallery figure:hover img{ filter:brightness(1.1) saturate(.9); opacity:.9 }
.gallery figcaption{ padding:12px 14px; font-size:13px; color:#667085 }
@media(max-width:980px){ .gallery figure{ grid-column:span 6 } }
@media(max-width:640px){ .gallery figure{ grid-column:span 12 } }


/* ===================================================================
   11) フッター
=================================================================== */
.footer{ padding:20px 0; padding-top:60px; font-size:14px; color:var(--sub); background:#fff;}


/* ===================================================================
   12) ライトボックス（大きく・見やすく・サムネ帯）
=================================================================== */
.lightbox{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0, 0, 0, 0.073); backdrop-filter:blur(6px) saturate(110%);
}
.lightbox.open{ display:block; animation:lb-fade .24s ease }
@keyframes lb-fade{ from{opacity:0} to{opacity:1} }

/* 枠構造 */
.lb-inner{ position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr; gap:10px; padding:12px }
.lb-topbar{ display:flex; align-items:center; justify-content:space-between }
.lb-counter{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#fff; font-size:13px; font-weight:600; letter-spacing:.06em;
}
.lightbox .close{
  background:transparent; border:none; color:#fff; font-size:20px;
  padding:8px 10px; border-radius:10px; cursor:pointer; transition:opacity .2s ease; opacity:.9;
}
.lightbox .close:hover{ opacity:1 }

/* 左右ボタン / 画像 / 右ボタン */
.lb-frame{ display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; height:100% }
.lb-side{ display:flex; align-items:center; justify-content:center }
.lightbox .prev,.lightbox .next{
  width:44px; height:44px; border:none; cursor:pointer; background:rgba(255,255,255,.12);
  color:#fff; border-radius:999px; display:grid; place-items:center; transition:background .2s ease, opacity .2s ease; opacity:.95;
}
.lightbox .prev:hover,.lightbox .next:hover{ background:rgba(255,255,255,.18) }

/* 画像＋キャプション */
.lb-media{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; gap:12px }
.lb-img{
  width:auto; height:auto; max-width:98vw; max-height:90vh; object-fit:contain;
  display:block; margin:0 auto; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:lb-zoom .24s ease; image-rendering:auto;
}
@keyframes lb-zoom{ from{transform:scale(.985); opacity:0} to{transform:scale(1); opacity:1} }
.lb-caption{
  color:#e5e7eb; text-align:center; line-height:1.6; font-size:14px; text-shadow:0 1px 1px rgba(0,0,0,.35);
  max-width:min(95vw,1000px);
}
.lb-caption .date{ display:block; font-size:12px; opacity:.78; margin-bottom:2px }
.lb-caption .text{ display:block; font-size:14px }

/* フィルムストリップ */
.lb-strip{
  width:100%; max-width:min(95vw,1000px); display:flex; gap:8px; padding:8px 4px 2px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.lb-strip::-webkit-scrollbar{ height:8px }
.lb-strip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:999px }
.lb-strip::-webkit-scrollbar-track{ background:transparent }
.lb-thumb{
  flex:0 0 auto; height:72px; width:auto; border-radius:8px; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 4px 10px rgba(0,0,0,.18); opacity:.85; cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lb-thumb:hover{ opacity:1 }
.lb-thumb[aria-selected="true"]{ outline:2px solid #fff; outline-offset:2px; opacity:1; box-shadow:0 6px 16px rgba(0,0,0,.28) }


/* ===================================================================
   13) スクロールインジケータ（右下）
=================================================================== */
.scroll-indicator{
  position:absolute;
  right:clamp(35px,5vw,40px);
  bottom: clamp(80px, 20vh, 100px);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; user-select:none; z-index:6;
}
.scroll-indicator__text{
  writing-mode:vertical-rl; text-transform:uppercase; letter-spacing:.25em; font-size:12px; font-weight:600;
  color:var(--brand); opacity:.95; margin-bottom:12px; padding-inline:6px;
}
.scroll-indicator__bar{ width:1px; height:70px; margin:0 auto; position:relative }
.scroll-indicator__bar::after{
  content:""; position:absolute; left:0; bottom:0; width:1px; height:100%; background:var(--brand);
  transform-origin:0 100%; animation:pg-liner 2.5s cubic-bezier(1,0,0,1) infinite;
}
@keyframes pg-liner{
  0%{ transform:scale(1,0); transform-origin:0 100% }
  30%{ transform:scale(1,1); transform-origin:0 100% }
  70%{ transform:scale(1,1); transform-origin:0 0% }
  100%{ transform:scale(1,0); transform-origin:0 0% }
}

/* PC用のスクロールボタン位置調整 */
@media (min-width: 1025px) {
  .scroll-indicator {
    right: 300px;   /* ← 内側に寄せる（既存は20pxや40px） */
    bottom: 120px; /* ついでに上下位置も調整可 */
  }
}


/* ===================================================================
   14) TOC（目次ナビ）— ヒーロー左下
   - 左端は共有ガターでロゴ/タイトルと揃える
   - PC はホバー下線、SP はシンプル表示
=================================================================== */
.toc-nav{
  position:absolute;
  bottom:clamp(80px,26vh,240px); /* ← 表示位置を上げる */
  left:var(--gutter-left);       /* ← 左端を共有ガターに合わせる */
  background:transparent; border:none; box-shadow:none; z-index:5;
}
.toc-list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  font-size:12px; letter-spacing:.18em; color:#6b7280;
}
.toc-list li{ position:relative }
.toc-list a{
  display:inline-block; padding:6px 4px; color:#111; opacity:.92; position:relative; overflow:hidden;
  transition:color .25s ease, opacity .25s ease;
}
.toc-list a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.toc-list a:hover{ color:#111827; opacity:1 }
.toc-list a:hover::after{ transform:scaleX(1) }
.toc-list a.is-current{ color:#111827; opacity:1 }
.toc-list a.is-current::after{ transform:scaleX(.6) }


/* ===================================================================
   15) アニメ削減ポリシー
=================================================================== */
@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}


/* ===================================================================
   16) モバイル最適化（<= 640px）
   - ナビ/タイポ/余白/ライトボックス調整
   - モバイルでは TOC のアンダーラインを省略（視認性優先）
=================================================================== */
@media (max-width:640px){
  /* Header/NAV サイズ微調整 */
  .brand{ margin-left:0 } /* コンテナの左右パディングで整える */
  .nav{ height:56px }
  .logo{ 
    height:24px k;
    width: auto;
    display: block;
  }

  .hamburger{ top:8px; right:8px; width:42px; height:42px }
  .hamburger span{ left:9px; right:9px }

  /* Hero */
  .hero--plain{ min-height:92vh; padding-top:12px }
  .hero-title h1{ font-size:clamp(28px,8vw,40px) }

  /* セクション余白 */
  main>section{ padding:56px 0; box-shadow:0 16px 32px rgba(0,0,0,.08) }

  /* 見出し */
  .about h2,.works h2,#shopping h2,.contact h2{
    margin-bottom:90px; font-size:21px; letter-spacing:.12em; color: #858585;
  }

  /* ABOUT */
  .about-flex{ gap:24px }
  .about-icon img{ width:120px; height:120px }
  .about-text{ max-width:48ch }
  .about-text p{ margin-bottom:25px }
  .about-text-en{ font-size:.95rem; margin-bottom: 80px; }

  /* Works */
  .works-grid{ grid-template-columns:1fr; gap:16px; margin-top:8px; margin-bottom:24px }
  .work{ border-radius:14px }
  .work figcaption{ font-size:13px; padding:10px 12px }

  /* Buttons */
  .btn-dark{ padding:14px 22px; border-radius:12px; font-size:.95rem; margin-top: 20px; }

  /* Gallery */
  .gallery{ gap:14px }
  .gallery figure{ grid-column:span 12; border-radius:14px }
  .gallery figcaption{ font-size:12.5px }

  /* Lightbox */
  .lb-inner{ padding:8px }
  .lb-frame{ grid-template-columns:12px 1fr 12px }
  .lightbox .prev,.lightbox .next{ width:36px; height:36px }
  .lb-media{ gap:10px }
  .lb-img{ max-width:96vw; max-height:82vh; border-radius:10px }
  .lb-strip{ gap:6px; padding:6px 2px 2px }
  .lb-thumb{ height:56px; border-radius:6px }
  .lb-caption{ font-size:13px; line-height:1.65; max-width:94vw }

  /* TOC（モバイルはシンプル、アンダーライン無し） */
  .toc-nav{ bottom:16px; left:16px }
  .toc-list{ gap:6px; font-size:14px; margin-left: 20PX;margin-bottom: 180PX;}
  .toc-list a::after{ display:none }

  .scroll-indicator {bottom: 50px;}


}

/* === TOC hover underline (PC強制オン) ============================== */
@media (min-width: 641px) {
  .toc-nav .toc-list a{
    position: relative;
    display: inline-block;     /* 幅を持たせて下線を描画 */
    text-decoration: none;     /* 既定の下線を消す */
    overflow: visible;         /* 下線が切れないように明示 */
  }
  .toc-nav .toc-list a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;                  /* -2pxだと環境により隠れることがあるので0に */
    width:100%;
    height:1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
    display: block;            /* モバイル用の display:none を無効化 */
  }
  .toc-nav .toc-list a:hover::after{
    transform: scaleX(1);
  }

  /* フェールセーフ：何かに負けたら通常の下線も出す */
  .toc-nav .toc-list a:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}


/* === TOC: ダブル下線防止（PC） ================================ */
@media (min-width: 641px) {
  .toc-nav .toc-list a,
  .toc-nav .toc-list a:hover,
  .toc-nav .toc-list a:focus {
    text-decoration: none !important;  /* UA下線や保険の下線を殺す */
    border-bottom: none !important;    /* 別ルールでのボーダー下線対策 */
    box-shadow: none !important;       /* inset系で擬似下線を消しておく */
  }
  .toc-nav .toc-list a::after {        /* 下線は擬似要素だけで描画 */
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
    display:block;
  }
  .toc-nav .toc-list a:hover::after { transform: scaleX(1); }
  .toc-nav .toc-list a.is-current::after { transform: scaleX(.6); }
}


/* ---- reset: 以前の isolate があれば解除（ブレンド阻害の予防） ---- */
html { isolation: auto !important; }


:root{
  --dot-gap: 96px;     /* 128pxに変えたい場合はここを128pxへ */
  --dot-opacity: .40;  /* 存在感の調整 */
}
html { isolation: auto !important; }  /* ブレンド隔離を回避 */

html::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 12; /* ドット層（ヘッダー/暗幕より下） */

  /* 画像タイル化したドットを使用（白ドット＋透明背景） */
  background-image: url("./icons/dot-grid-128.png"); /* ←配置先に合わせてパス変更 */
  background-repeat: repeat;
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: center;

  mix-blend-mode: difference; /* 暗所で白、明所で黒に見える */
  opacity: var(--dot-opacity);
}

/* ==== Dot grid overlay（スクロール固定・背面に応じて白黒反転） ==== */
html::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;                 /* いちばん上に固定 */
  /* ドットパターン：SVG不要・画像不要 */
  background-image: radial-gradient(currentColor var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: center;

  color: #ffffff23;                          /* 基本は白で描画して… */
  mix-blend-mode: difference;           /* 背景の明度に応じて反転（白↔黒） */
  opacity: var(--dot-opacity);
}

/* 高解像度で細く見える場合は少し太らせる */
@media (min-resolution: 2dppx){
  :root{ --dot-size: 1.7px; }
}


/* ==== Dot grid（反転ドット）本体：他より低い z-index に下げる ==== */
:root{
  --dot-size: 1.5px;  /* 小さめドット */
  --dot-gap:  64px;   /* 間隔ひろめ */
  --dot-opacity: .45; /* 濃さ */
}
html { isolation: auto !important; } /* ブレンドの隔離を避ける */

html::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 12;  /* ← 基準：ドット層（上げすぎない） */
  background-image: radial-gradient(currentColor var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: center;
  color:#ffffff69;
  mix-blend-mode:difference;
  opacity: var(--dot-opacity);
}

/* ==== ヘッダー／フッター／暗幕をドットより上に ==== */
.header{ position: sticky; top:0; z-index: 20; } /* ドット(12)より上 */
.footer{ position: relative; z-index: 20; }      /* フッターも上に */

@media (max-width:640px){
  /* 暗幕とメニューはさらに上 */
  .header.open .nav-overlay{ z-index: 30; }
  .header.open .links{ z-index: 35; }
}

/* （任意）高解像度で細く見えるときの補正 */
@media (min-resolution: 2dppx){
  :root{ --dot-size: 1.7px; }
}


.hamburger{
  position: fixed;          /* 親(header)の stacking context に縛られない */
  top: 12px; right: 12px;   /* 既存値に合わせて調整 */
  z-index: 60;              /* 暗幕やメニューより上 */
  pointer-events: auto;
}

/* 暗幕とメニューの重ね順（必要なら調整） */
@media (max-width:640px){
  .header.open .nav-overlay{ z-index: 40; } /* 暗幕 */
  .header.open .links{      z-index: 50; }  /* メニュー本体 */
}


@media (max-width: 900px){
  .hamburger { display: block; }
  .links     { display: none; }

  /* overlayやopen時の挙動もこの範囲で定義 */
  .header.open .links{
    display: flex;
    flex-direction: column;
    /* 既存のSPスタイルを流用 */
  }
}


.footer {
  padding: 32px 16px;
  text-align: center;
  font-family: 'Helvetica Neue', 'Segoe UI', 'Roboto', sans-serif; /* モダン系 */
  background: #ffffff;      /* 黒背景 */
  color: #eee;           /* 薄いグレー文字 */
  z-index: 13;
}

.footer .disclaimer {
  font-size: 12px;
  color: #aaa;           /* 少し薄いグレー */
  margin-bottom: 16px;
  line-height: 1.6;
}

.footer .designed {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #a5a5a5;
  letter-spacing: .05em;
}

.footer .sns-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.footer .sns-links a img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: opacity .25s, transform .25s;
}

.footer .sns-links a:hover img {
  opacity: 0.7;
  transform: scale(1.1); /* ちょっと拡大でモダン感 */
}




/* ===============================================================
   THEME — Noir Black (高級感のある黒基調)
   - 深い黒のグラデーション、繊細なガラス感、上品なアニメーション
   - 既存のライトボックスに重ねるだけで適用可能
   =============================================================== */

:root{
  --noir-bg-1: rgba(8,10,12,.96);
  --noir-bg-2: rgba(18,22,26,.92);
  --noir-glass: rgba(255,255,255,.06);
  --noir-glass-strong: rgba(255,255,255,.10);
  --noir-border: rgba(255,255,255,.12);
  --noir-border-weak: rgba(255,255,255,.08);
  --noir-text: #e8eaed;
  --noir-text-weak: #b6bcc6;
  --noir-accent: #d6c389; /* desaturated gold */
}

/* Overlay */
.lightbox{
  background:
    radial-gradient(1200px 800px at 50% 45%, var(--noir-bg-2) 0%, rgba(0,0,0,.98) 70%) ,
    linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.98) 100%);
}
.lightbox::after{
  /* subtle vignette */
  content:"";
  position:fixed; inset:0; pointer-events:none;
  box-shadow: inset 0 0 180px rgba(0,0,0,.55);
}

/* Topbar */
.lb-topbar{
  padding: 8px;
  border-radius: 14px;
  background: var(--noir-glass);
  backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid var(--noir-border-weak);
}
.lb-counter{
  background: transparent !important;
  color: var(--noir-text);
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Close button */
.lightbox .close{
  width: 44px; height: 44px;
  display:inline-grid; place-items:center;
  background: var(--noir-glass);
  border: 1px solid var(--noir-border);
  border-radius: 999px;
  color: var(--noir-text);
  opacity: .9;
  transition: transform .16s ease, opacity .16s ease, background .2s ease, border-color .2s ease;
}
.lightbox .close:hover{ 
  opacity: 1; transform: translateY(-1px) scale(1.03);
  background: var(--noir-glass-strong);
  border-color: var(--noir-accent);
}

/* Stage */
.lb-frame{
  gap: 12px;
}
.lb-media{
  position: relative;
  border-radius: 18px;
  padding: clamp(6px, 1.2vw, 10px);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border: 1px solid var(--noir-border-weak);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.35);
}
.lb-media::before{
  /* hairline highlight */
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.lb-img{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transform: translateZ(0);
  opacity: 0; transform: scale(.985);
  transition: opacity .32s ease, transform .32s ease;
}
.lb-img.enter{ opacity: 1; transform: scale(1); }

/* Navigation buttons */
.lightbox .prev, .lightbox .next{
  width: 48px; height: 48px;
  display:inline-grid; place-items:center;
  border-radius: 999px;
  background: var(--noir-glass);
  border: 1px solid var(--noir-border);
  color: var(--noir-text);
  opacity: .92;
  backdrop-filter: blur(6px) saturate(115%);
  transition: transform .16s ease, opacity .16s ease, border-color .2s ease, background .2s ease;
}
.lightbox .prev:hover, .lightbox .next:hover{
  opacity: 1; transform: translateY(-1px);
  background: var(--noir-glass-strong);
  border-color: var(--noir-accent);
}

/* Thumbnails strip */
.lb-strip{
  margin-top: 10px;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--noir-border-weak);
  overflow-x: auto;
}
.lb-thumb{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  filter: grayscale(.25) contrast(.95) saturate(.92);
  opacity: .85;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease, border-color .2s ease;
}
.lb-thumb:hover{ opacity:1; filter:none; transform: translateY(-1px); }
.lb-thumb[aria-selected="true"]{
  border-color: var(--noir-accent);
  filter: none; opacity:1;
  box-shadow: 0 0 0 1px var(--noir-accent);
}

/* Caption */
.lb-caption{
  margin-top: 10px;
  color: var(--noir-text);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.lb-caption .date{
  color: var(--noir-text-weak);
  letter-spacing: .06em;
}
.lb-caption .text{
  color: var(--noir-text);
}

/* Responsive tuning */
@media (max-width: 640px){
  .lightbox .prev, .lightbox .next { width: 44px; height: 44px; }
  .lightbox .close { width: 42px; height: 42px; }
}


/* ===============================================================
   THEME — White Luxe (高級感のある白基調)
   - 明るいホワイト、柔らかなガラス感、上品な陰影
   =============================================================== */

:root{
  --luxe-bg-1: rgba(255,255,255,.96);
  --luxe-bg-2: rgba(248,250,252,.94);
  --luxe-glass: rgba(0,0,0,.04);
  --luxe-glass-strong: rgba(0,0,0,.08);
  --luxe-border: rgba(0,0,0,.10);
  --luxe-border-weak: rgba(0,0,0,.05);
  --luxe-text: #111;
  --luxe-text-weak: #555;
  --luxe-accent: #a78bfa; /* soft lavender accent */
}

.lightbox{
  background:
    radial-gradient(1200px 800px at 50% 45%, var(--luxe-bg-2) 0%, rgba(255, 255, 255, 0.155) 70%) ,
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(245,245,245,.98) 100%);
}
.lightbox::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  box-shadow: inset 0 0 180px rgba(0,0,0,.08);
}

/* Topbar */
.lb-topbar{
  padding: 8px;
  border-radius: 14px;
  background: var(--luxe-glass);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--luxe-border-weak);
}
.lb-counter{
  background: transparent !important;
  color: var(--luxe-text);
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* Close button */
.lightbox .close{
  width: 44px; height: 44px;
  display:inline-grid; place-items:center;
  background: var(--luxe-glass);
  border: 1px solid var(--luxe-border);
  border-radius: 999px;
  color: var(--luxe-text);
  opacity: .9;
  transition: transform .16s ease, opacity .16s ease, background .2s ease, border-color .2s ease;
}
.lightbox .close:hover{ 
  opacity: 1; transform: translateY(-1px) scale(1.03);
  background: var(--luxe-glass-strong);
  border-color: var(--luxe-accent);
}

/* Stage */
.lb-media{
  border-radius: 18px;
  padding: clamp(6px, 1.2vw, 10px);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  border: 1px solid var(--luxe-border-weak);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
.lb-img{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  opacity: 0; transform: scale(.985);
  transition: opacity .32s ease, transform .32s ease;
}
.lb-img.enter{ opacity: 1; transform: scale(1); }

/* Navigation buttons */
.lightbox .prev, .lightbox .next{
  width: 48px; height: 48px;
  display:inline-grid; place-items:center;
  border-radius: 999px;
  background: var(--luxe-glass);
  border: 1px solid var(--luxe-border);
  color: var(--luxe-text);
  opacity: .92;
  backdrop-filter: blur(6px) saturate(120%);
  transition: transform .16s ease, opacity .16s ease, border-color .2s ease, background .2s ease;
}
.lightbox .prev:hover, .lightbox .next:hover{
  opacity: 1; transform: translateY(-1px);
  background: var(--luxe-glass-strong);
  border-color: var(--luxe-accent);
}

/* Thumbnails strip */
.lb-strip{
  margin-top: 10px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--luxe-border-weak);
}
.lb-thumb{
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  filter: grayscale(.05) contrast(.98);
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.lb-thumb:hover{ opacity:1; transform: translateY(-1px); }
.lb-thumb[aria-selected="true"]{
  border-color: var(--luxe-accent);
  opacity:1;
  box-shadow: 0 0 0 1px var(--luxe-accent);
}

/* Caption */
.lb-caption{
  margin-top: 10px;
  color: var(--luxe-text);
}
.lb-caption .date{
  color: var(--luxe-text-weak);
}
.lb-caption .text{
  color: var(--luxe-text);
}


/* ===============================================================
   Lightbox — Desktop layout (image left / caption top-right / thumbs bottom-left)
   Applies on wide screens only
   =============================================================== */
@media (min-width: 1024px){
  .lightbox .lb-frame{
    /* ensure we can align media nicely */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 12px;
    /* keep existing behavior where side nav buttons sit left/right */
  }
  .lightbox .lb-media{
    /* 2-column grid inside the media block */
    display: grid;
    grid-template-columns: minmax(0, 58vw) minmax(320px, 420px);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "img caption"
      "strip caption";
    align-items: start;
    gap: clamp(10px, 1.6vw, 18px);
    /* let the media consume available height without overflow */
    max-height: calc(100vh - 140px); /* topbar + paddings margin */
    overflow: hidden;
  }
  .lightbox .lb-img{
    grid-area: img;
    width: 100%;
    height: 100%;
    object-fit: contain;
    align-self: start;
    justify-self: stretch;
  }
  .lightbox .lb-strip{
    grid-area: strip;
    align-self: end;
    justify-self: start;
    max-width: 100%;
    overflow-x: auto;
  }
  .lightbox .lb-caption{
    grid-area: caption;
    align-self: start;
    justify-self: start;
    position: static; /* ensure it's not absolutely positioned */
    max-height: 100%;
    overflow: auto;
    padding-right: 6px;
  }
  /* Optional: tame the .lb-side width so arrows hug the edges vertically centered */
  .lightbox .lb-side{
    display: grid;
    align-content: center;
  }
}


/* ===============================================================
   Lightbox — Desktop Right Panel Layout
   PC表示時：左=画像 / 右上=日付+キャプション / 右下=サムネイル
   =============================================================== */
@media (min-width: 1024px){
  /* 右側のサイド幅を安定させる */
  .lightbox .lb-media{
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 420px);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "stage  caption"
      "stage  spacer"
      "stage  strip";
    align-items: stretch;
    gap: 12px;
    padding: clamp(8px, 1.2vw, 12px);
  }
  .lightbox .lb-img{
    grid-area: stage;
    align-self: center;
    justify-self: center;
    max-width: 100%;
    max-height: calc(100vh - 180px); /* 上下余白+UIを引いた残りを目安 */
    object-fit: contain;
  }
  .lightbox .lb-caption{
    grid-area: caption;
    align-self: start; 
    margin-top: 0;
  }
  .lightbox .lb-strip{
    grid-area: strip;
    align-self: end;
    margin-top: 0;
  }
  /* 既存のボタン配置は維持（左右ナビはそのまま） */
  .lightbox .prev,
  .lightbox .next{
    align-self: center;
  }
}

@media (max-width: 640px) {
  .lb-caption {
    margin-top: 10px;
    margin-bottom: 24px; /* ← キャプション下に余白を追加 */
  }
}

/* ===============================================================
   Lightbox — Modern Font + Left-aligned Caption
   =============================================================== */
:root {
  --noir-font-en: "Inter","Futura","Helvetica Neue",sans-serif;
  --noir-font-jp: "Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
}

.lightbox, .lightbox * {
  font-family: var(--noir-font-en), var(--noir-font-jp);
}
/* ===============================================================
   Lightbox — Caption with Yu Mincho
   =============================================================== */
.lb-caption {
  text-align: left;
  align-self: start;
  padding-inline: 4px;
  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "MS PMincho", serif;
}

.lb-caption .date {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
  letter-spacing: .05em;
  font-weight: 500;
  font-family: "Futura", "Helvetica Neue", Arial, sans-serif; /* ← 日付はFutura */
}

.lb-caption .text {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  font-weight: 400;
  font-family: inherit; /* 親の游明朝を引き継ぐ */
}

@media (min-width: 1024px) {
  .lb-caption {
    padding-left: 16px;  /* ← 左側余白を追加 */
  }
}


@media (max-width: 640px) {
  .lb-img {
    max-height: calc(100vh - 140px); /* ← 上下の余白＋キャプション分を確保 */
    object-fit: contain;
  }

}

@media (max-width: 640px) {
  .lb-img {
    max-width: 75vw;   /* ← 横幅を画面幅より少し小さめに */
    margin-top: 25PX;
    max-height: calc(100vh - 140px);
    object-fit: contain;
  }

  .lb-caption {
    margin-bottom: 40px;
    padding-left: 8px;   /* 左右に余白を追加 */
    padding-right: 8px;
  }

  .lb-strip {
    padding-left: 6px;   /* サムネ帯にも余白を追加 */
    padding-right: 6px;
  }
}


.lightbox .lb-media,
.lightbox .lb-img {
  box-shadow: none !important;   /* 影を消す */
  
  border: none !important;       /* 枠線を消す */
}

/* Noir/White Luxeで入れている薄い内側ハイライトも無効化 */
.lightbox .lb-media::before {
  box-shadow: none !important;
}


@font-face {
  font-family: 'FuturaOnly';
  src: local("Futura");
  unicode-range: U+0020-007F; /* 英数字・記号のみ */
}

body {
  font-family: "FuturaOnly", "游ゴシック体", "Yu Gothic", "Hiragino Sans", sans-serif;
}


/* =========================================================
   Global Font Stacks
   ---------------------------------------------------------
   英字: Futura（Adobe Fonts例: 'futura-pt'）
   日本語: お好みの和文フォントに調整可
   ========================================================= */
:root{
  --font-en: "futura-pt", "Futura", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", system-ui, sans-serif;

  /* 調整用（お好みで数値変更） */
  --ls-en-body: 0.01em;
  --ls-en-h: 0.02em;
  --ls-ja: 0.02em;
}

/* 基本：英字→Futura、日本語→和文（自動フォールバック） */
html, body{
  font-family: var(--font-en), var(--font-ja);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: var(--ls-ja);
}

/* =============== ユーティリティ：強制切替 =============== */
/* 英字を強制適用したい時に .font-en を付与 */
.font-en{ font-family: var(--font-en), var(--font-ja); letter-spacing: var(--ls-en-body); }
/* 和文を強制適用したい時に .font-ja を付与（アイコン混在対策など） */
.font-ja{ font-family: var(--font-ja); letter-spacing: var(--ls-ja); }

/* lang属性が付いている場合はより確実に適用 */
:lang(en){ font-family: var(--font-en), var(--font-ja); letter-spacing: var(--ls-en-body); }

/* =============== 見出し/タイトル類 =============== */
h1, h2, h3, h4, h5, h6,
.hero-title, .page-title, .section-title{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: var(--ls-en-h);
  font-weight: 700; /* Adobe Fonts側で有効なウェイトに合わせて 400/500/700 を使い分け */
}

/* サブタイトルや小見出し */
.sub-title, .lead, .kicker{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: var(--ls-en-body);
  font-weight: 500;
}

/* =============== ナビ/ボタン/ラベル =============== */
.nav, .nav a, .global-nav a, .toc-nav a,
.menu, .menu a, .breadcrumb a{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.06em; /* 英字ナビはやや広めが読みやすい */
  text-transform: none;   /* ALL CAPSにしたい場合は uppercase */
}

button, .btn, .badge, .chip, .tag{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* =============== キャプション/カード/表組み =============== */
.caption, figcaption, .meta, .credit, .lightbox-caption{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.02em;
  font-size: 0.92em;
  opacity: .9;
}

.card .title, .card .meta, .table th, .table td{
  font-family: var(--font-en), var(--font-ja);
}

/* =============== フォーム/プレースホルダ =============== */
input, select, textarea, label{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.01em;
}
::placeholder{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.02em;
}

/* =============== スクロールインジケータ/小要素 =============== */
.scroll-label, .scroll-indicator, .pill, .small, small{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.04em;
}

/* =============== ヒーロー/ライトボックス固有（任意） =============== */
.hero .eyebrow, .hero .cta{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Lightbox内のUI（次/前、閉じるなど英字UI想定） */
.lightbox .ui, .lightbox .control, .lightbox .counter{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.06em;
}

/* =============== フッター/コピーライト/SNS =============== */
.footer, .footer a, .copyright, .social a{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* =============== 英字のみ微調整（任意） =============== */
/* 英数字が連続する要素の字詰め最適化（慣用） */
[data-en], .en, code, pre, kbd, samp{
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: var(--ls-en-body);
}

/* =============== 強制フォールバックテスト（任意） =============== */
/* 万一、特定要素で日本語にもFuturaが当たって崩れる場合は .font-ja を付ける */
.ja-only{ font-family: var(--font-ja) !important; letter-spacing: var(--ls-ja) !important; }

/* =============== 既存サイト全体を微リファイン（任意） =============== */
/* 見出しの英字をややタイトに・本文は控えめに */
body{ letter-spacing: var(--ls-ja); }
h1, h2, h3, h4, h5, h6{ letter-spacing: var(--ls-en-h); }



.footer-brand {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 20px;
}

.footer-logo {
  width: 140px;   /* サイズ調整 */
  height: auto;
  opacity: 0.3;   /* 少し落ち着かせる */
  filter: grayscale(100%) brightness(40%);
  transition: opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 1;
}

.about-name {
  margin-bottom: 10px;
  text-align: left;
}

.about-name .role {
  font-size: 1rem;
  font-weight: 500;
  color: #666;
  margin-top: 20px;
}

/* 日本語名：はんなり明朝 */
.about-name .jp-name {
  font-family: "Hannari", serif; /* Adobe Fonts で配信される場合は kit ID を追加 */
  font-size: 1.8rem;
  font-weight: 600;
  margin-right: 6px;
}

/* 英字名：薄め（細字＆淡色） */
.about-name .en-name {
  font-family: var(--font-en, "futura-pt", sans-serif);
  font-size: 1.4rem;
  font-weight: 300;   /* 細め */
  color: #777;        /* 薄めグレー */
}


@media (min-width: 1024px) {
  .about-name {
  margin-bottom: 10px;
  text-align: left;
}
}



.note-center {
  text-align: center;
  font-size: 0.85rem;
  color: #9a9a9a;
  margin-top: 12px;
  margin-bottom: 35px;
  line-height: 1.6;
}


.toc-nav a
{
  font-size: 1rem;
  letter-spacing: 2px;
  color: #47474a;
}




.old-portfolio {
  margin-top: 32px;
  text-align: center; /* 左寄せにしたい場合は削除 */
}

.old-portfolio a {
  font-size: 0.95rem;
  color: #555;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.old-portfolio a:hover {
  color: #000;
}

/* ===== WORKS (data-driven) : minimal additions ===== */
.works-list{display:grid;gap:18px;}
.work-card{padding:18px 18px 12px;}
.work-title{margin:0 0 6px;font-size:18px;letter-spacing:.02em;}
.work-meta{margin:0 0 10px;color:var(--sub);font-size:13px;}
.work-desc{margin:0 0 14px;line-height:1.7;}
.work-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
.btn-small{padding:8px 12px;font-size:12px;}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin:10px 0 14px;background:rgba(0,0,0,.06);}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media (min-width:900px){.works-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}