/* Rasterix：ワードマーク＝Adobe Garamond Pro イタリック（画面では EB Garamond で代用）／本文＝Optima（和文は Noto Sans JP） */
:root { --ink:#1a1a1a; --paper:#c9cac7; --rule:#1a1a1a; --cross:#8a8b88; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--paper); color:var(--ink); min-height:100vh;
       font-family:Optima, "Optima Nova", Candara, "Noto Sans JP", sans-serif; line-height:1.7;
       display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.ja, [lang="ja"] { font-family:Optima, "Noto Sans JP", sans-serif; font-weight:400; }
.garamond { font-family:"Adobe Garamond Pro", "EB Garamond", Garamond, serif; font-style:italic; font-weight:500; }
/* 本文は網点の上でも読めるよう少し太く（10/18）。ワードマークだけ細いまま */
/* Optima は Regular と Bold しかないので、輪郭に細い線を足して間の太さにする（スマホで見て 0.35px・10/18 本人） */
body { -webkit-text-stroke:.35px currentColor; }
.wm, .site-header .home { -webkit-font-smoothing:antialiased; -webkit-text-stroke:0; }

/* ナビゲーション */
.site-header { width:100%; max-width:960px; margin:0 auto; padding:28px 24px;
               display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.site-header .home { font-family:"Adobe Garamond Pro", "EB Garamond", Garamond, serif; font-style:italic;
                     font-size:24px; line-height:1; border:0; letter-spacing:.01em; }
.site-header .home[aria-hidden="true"] { visibility:hidden; }
.site-header nav { display:flex; gap:28px; font-size:12px; letter-spacing:.16em; }
.site-header nav a { border-bottom:1px solid transparent; padding-bottom:3px; }
.site-header nav a:hover { border-bottom-color:currentColor; }
.site-header nav a[aria-current="page"] { border-bottom-color:currentColor; }

main { flex:1; width:100%; max-width:720px; margin:0 auto; padding:10vh 24px 64px; }

/* Home */
.wm { font-family:"Adobe Garamond Pro", "EB Garamond", Garamond, serif; font-style:italic; font-weight:400;
      font-size:clamp(56px, 11vw, 96px); line-height:1; margin:0; letter-spacing:.01em; display:inline-block; }
/* x の交点を通る線（名刺の表と同じ。文字は線の上に重ねる） */
.xcross { position:relative; display:inline-block; }
.xcross .wm { position:relative; z-index:1; }
.xl { position:absolute; background:var(--cross); z-index:0; opacity:0; }
.xcross.ready .xl { opacity:1; }
.xl.xh { height:1px; } .xl.xv { width:1px; }
.home-line { margin-top:48px; }
.home-line .ja { display:block; font-size:clamp(17px, 2.4vw, 20px); line-height:1.9; letter-spacing:.06em; }
.home-line .en { display:block; font-size:clamp(16px, 2.2vw, 19px); margin-top:12px; letter-spacing:.02em; }

/* 背景：全ページでグレーの地に白い網点（home.js・10/18 本人決定）。文字は黒 */
/* ?hero=particles：黒い背景に粒子の層と背景動画。文字は白 */
body.home.dark { --ink:#f2f2f2; --paper:#000; --rule:#f2f2f2; --cross:rgba(255,255,255,.4); }
/* ページの切り替えをふわっと重ねる（対応ブラウザのみ）。背景と上の帯は前後でほぼ同じ絵なので、文字だけが入れ替わって見える */
@view-transition { navigation:auto; }
.hero { view-transition-name:hero; }
.site-header { view-transition-name:site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.35s; }
@media (prefers-reduced-motion:reduce) { @view-transition { navigation:none; } }
.hero { position:fixed; inset:0; z-index:0; pointer-events:none; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* 背景の動画：2 本の video を交互に使い、フェードでつなぐ。色はそのまま、暗めに沈める */
.bgv { position:absolute; inset:0; overflow:hidden; }
.bgv video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
             transition:opacity var(--fade, .4s) ease; filter:brightness(.6) saturate(.95); }
/* 動画の窓の大きさ（?bg= で見比べる。既定は a）。--cx＝窓の中心の横位置・--w＝幅 */
.hero[data-bg] .bgv { inset:auto; left:var(--cx); top:50%; transform:translate(-50%,-50%); width:var(--w); aspect-ratio:var(--ar, 16/9); }
.hero[data-bg="a"]    { --cx:72vw;   --w:44vw; }
.hero[data-bg="ab1"]  { --cx:64.7vw; --w:40.7vw; }
.hero[data-bg="ab2"]  { --cx:57.3vw; --w:37.3vw; }
.hero[data-bg="b"]    { --cx:50vw;   --w:34vw; }
.hero[data-bg="r"]    { --cx:50vw;   --w:46vw; }  /* 位置と幅は home.js が R の左端〜網目の右端で測って上書きする */
.hero[data-bg="c"]    { --cx:76vw;   --w:24vw; --ar:3/4; }
.hero[data-bg="tile"] { --cx:66vw;   --w:56vw; --ar:16/9; }
/* タイル：小さな窓を並べ、それぞれが別の動画を同時に流す。すき間は黒 */
/* 枠で切り抜く（?fx=track）：動画は見せず、canvas に枠の中だけを描く */
.bgv.fx video { opacity:0 !important; }
.bgv canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.bgv.tiles { display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr); gap:3px; }
.bgv.tiles video { position:static; width:100%; height:100%; min-width:0; min-height:0; }
@media (max-width:700px) {
  .hero[data-bg] { --cx:50vw; --w:84vw; --ar:16/9; }
  .hero[data-bg] .bgv { top:auto; bottom:14vh; transform:translateX(-50%); }
}
/* 案を切り替えるボタン（?bg= があるときだけ出す・見比べ用） */
.bg-pick { position:fixed; left:12px; top:12px; z-index:5; display:flex; flex-wrap:wrap; gap:4px; font-size:11px; }
.bg-pick a { border:1px solid rgba(255,255,255,.35); padding:2px 8px; color:#fff; background:rgba(0,0,0,.5); }
.bg-pick a[aria-current] { background:#fff; color:#000; }
.bgv video.on { opacity:1; }
.hero ~ .site-header, .hero ~ main, .hero ~ .site-footer { position:relative; z-index:1; }

/* ページ見出し */
.page-title { font-size:12px; font-weight:400; letter-spacing:.16em; margin:0 0 40px; }
.page-title .ja { letter-spacing:.1em; margin-left:.8em; }

/* About */
.about p { margin:0 0 20px; font-size:17px; max-width:34em; }
.about p.ja { font-size:14.5px; line-height:2; }

/* Brands */
.brands { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.brands li { border-bottom:1px solid var(--rule); }
.brands a, .brands .row { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:8px 32px; padding:24px 0; border:0; }
.brands .head { display:flex; flex-direction:column; }
.brands .name { font-family:"Adobe Garamond Pro", "EB Garamond", Garamond, serif; font-style:italic; font-size:30px; line-height:1.2; }
.brands .kind { font-size:12px; letter-spacing:.06em; margin-top:6px; }
.brands .kind .ja { display:block; font-size:11px; }
.brands .desc { font-size:14px; text-align:right; padding-top:6px; }
.brands .desc .ja { display:block; font-size:12.5px; margin-top:4px; }
.brands a:hover .name { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }

/* Company */
dl.op { display:grid; grid-template-columns:9.5em 1fr; gap:14px 16px; margin:0; font-size:14px; }
dl.op dt { font-size:12px; letter-spacing:.06em; padding-top:2px; }
dl.op dt .ja { display:block; font-size:11px; }
dl.op dd { margin:0; }
dl.op dd .ja { display:block; font-size:13px; }

.ph { background:#fff3c4; padding:0 2px; }

.site-footer { width:100%; max-width:960px; margin:0 auto; padding:24px; display:flex; justify-content:space-between;
               gap:16px; font-size:12px; letter-spacing:.06em; }

@media (max-width:520px) {
  .site-header { flex-direction:column; gap:14px; }
  .site-header .home[aria-hidden="true"] { display:none; }
  .site-header nav { gap:22px; }
  dl.op { grid-template-columns:1fr; gap:2px; }
  dl.op dd { margin-bottom:14px; }
  .brands a, .brands .row { grid-template-columns:1fr; gap:10px; }
  .brands .desc { text-align:left; padding-top:0; }
  .site-footer { flex-direction:column; align-items:center; gap:6px; }
}