:root{
    /* ---- Color（緑・青は使わない／真っ白も使わない） ---- */
    --paper:      #F1ECE2;
    --paper-deep: #EAE4D8;
    --ink:        #211D18;
    --ink-body:   #2C2720;
    --muted:      #8B8474;
    --line:       #D8D1C4;
    --shu:        #C0392B;
    --sumi:       #211D18;
    /* ---- Type（明朝/セリフのみ・2ウェイト 400/700） ---- */
    --font-display:"Shippori Mincho B1","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    --font-body:"EB Garamond","Sorts Mill Goudy",Georgia,"Times New Roman","Hiragino Mincho ProN",serif;
    /* ---- Layout ---- */
    --maxw: 1280px;
    --pad:  clamp(24px, 6vw, 96px);
    --radius: 2px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; color:var(--ink-body);
    background-color:var(--paper);
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%3Cfilter%20id%3D%27w%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20seed%3D%274%27%20stitchTiles%3D%27stitch%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.17%20%200%200%200%200%200.15%20%200%200%200%200%200.12%20%200%200%200%200.35%20-0.12%27%20result%3D%27grain%27%2F%3E%3CfeTurbulence%20type%3D%27turbulence%27%20baseFrequency%3D%270.007%200.42%27%20numOctaves%3D%272%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27f%27%2F%3E%3CfeColorMatrix%20in%3D%27f%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.17%20%200%200%200%200%200.15%20%200%200%200%200%200.12%20%200%200%200%200.14%20-0.04%27%20result%3D%27fib%27%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%27grain%27%2F%3E%3CfeMergeNode%20in%3D%27fib%27%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23w%29%27%2F%3E%3C%2Fsvg%3E");   /* 和紙ノイズ（SVG feTurbulence・procedural） */
    background-size:260px 260px;
    font-family:var(--font-body); font-weight:400; line-height:1.75;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}

  /* ---- labels ---- */
  .kicker-jp{font-size:14px; letter-spacing:.34em; color:var(--muted); margin:0;}

  /* ---- nav ---- */
  nav{position:sticky; top:0; z-index:20; background:rgba(241,236,226,.86); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--line); overflow:hidden;}
  .nav-inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:80px;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand{gap:16px;}
  .brand .mark{width:34px; height:34px; display:block;}
  .brand .name{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:28px; letter-spacing:.04em;}
  .nav-links{display:flex; gap:30px; position:relative;}
  #navbrush{position:absolute; left:0; width:122%; top:50%; transform:translateY(-50%); height:64px; z-index:0; pointer-events:none; opacity:.95;}  /* かすれの一筆＝About~Expの約120%・右に抜く・文字の下 */
  .nav-links a{position:relative; z-index:1; font-size:16px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding-bottom:4px; transition:color .2s;}
  .nav-links a:hover{color:var(--ink);}
  .nav-links a.active{color:var(--ink); border-bottom:1.5px solid var(--ink);}
  .nav-links a.login-link{letter-spacing:.16em; text-transform:none;}

  /* ---- hero（左：特大3段見出し ／ 右：円相・クリックで再描画） ---- */
  header.hero{
    position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden;
    background:transparent;   /* 地は body の和紙テクスチャを通す（ドットグリッドは廃止） */
  }
  header.hero > .wrap{max-width:min(2100px,96vw);}   /* heroだけ広く取り、右の円相に余白を渡す */
  .hero-inner{
    position:relative; z-index:1; width:100%;
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    align-items:center; gap:clamp(24px,4vw,72px);
  }
  .hero-text{order:2;}   /* DOMはテキスト先(読み上げ/SEO)・見た目は円相を左/文字を右 */
  .hero .kicker-jp{margin:0 0 22px;}
  .hero h1{
    font-family:var(--font-display); font-weight:700; color:var(--ink);
    margin:0 0 .34em; letter-spacing:-.012em; line-height:1.04;
  }
  .hero h1 .l{display:block; white-space:nowrap; font-size:clamp(44px,6.8vw,104px);}
  .hero .lede{font-size:clamp(18px,1.6vw,20px); line-height:1.7; color:var(--ink-body); margin:0; max-width:24em;}
  .hero-actions{margin:22px 0 0;}
  .login-cta{display:inline-block; font-size:13px; letter-spacing:.18em; color:var(--muted); padding-bottom:3px; border-bottom:1px solid var(--line); transition:color .2s,border-color .2s;}
  .login-cta:hover{color:var(--ink); border-color:var(--ink);}

  .enso-cell{order:1; display:flex; justify-content:flex-start; align-items:center;}  /* 円相を左端寄せ＝文字との間(ま)を最大化 */
  .enso-stage{position:relative;}
  /* 落款＝実印画像。canvas内 shu座標(内側円相の切れ目)にdrawImageで描くため、DOMでは非表示＝データ供給元 */
  .seal{display:none;}
  #enso{display:block; cursor:pointer; pointer-events:auto; outline:none;}
  #enso:focus-visible{box-shadow:0 0 0 1px var(--line);}  /* キーボード時のみ控えめに。額縁化する朱アウトラインは廃止 */
  .enso-hint{margin:14px 0 0; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); text-align:center; opacity:.0; transition:opacity .4s;}
  .enso-cell:hover .enso-hint{opacity:.7;}

  /* ---- section ---- */
  section{padding:clamp(56px,9vw,120px) 0;}
  .sec-head{display:flex; align-items:baseline; gap:18px; margin:0 0 28px; padding-bottom:18px; border-bottom:1px solid var(--line);}
  .sec-head .en{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:clamp(28px,4vw,40px); line-height:1.1; margin:0;}
  .sec-head .jp{font-size:14px; letter-spacing:.18em; color:var(--muted);}
  .sub-label{font-family:var(--font-body); font-size:13px; letter-spacing:.2em; color:var(--muted); margin:34px 0 2px;}
  .sub-label:first-of-type{margin-top:6px;}
  .works-note{font-size:13px; color:var(--muted); margin:18px 0 0;}

  /* ---- about ---- */
  .about-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:48px;}
  .about-grid .meta{font-size:15px; color:var(--muted); line-height:2;}
  .about-grid p{font-size:clamp(17px,1.4vw,20px); line-height:1.85; margin:0 0 1.2em; max-width:62ch;}
  .about-grid .pull{font-family:var(--font-display); font-weight:400; font-size:clamp(20px,2.2vw,26px); color:var(--ink); line-height:1.6;}

  /* ---- list rows ---- */
  .rows{display:flex; flex-direction:column;}
  .row{display:grid; grid-template-columns:90px 1fr auto; gap:24px; align-items:baseline; padding:28px 0; border-bottom:1px solid var(--line);}
  .row .yr{font-size:15px; color:var(--muted);}
  .row .ttl{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:clamp(18px,2vw,22px); line-height:1.35;}
  .row .sub{display:block; font-family:var(--font-body); font-weight:400; font-size:16px; color:var(--muted); line-height:1.6; margin-top:6px;}
  .row .cat{font-size:15px; font-style:italic; color:var(--muted); text-align:right; white-space:nowrap;}
  .row a.ttl-link{border-bottom:1px solid var(--line); transition:border-color .2s;}
  .row a.ttl-link:hover{border-color:var(--ink);}

  /* ---- footer ---- */
  footer{border-top:1px solid var(--line); padding:40px 0 56px;}
  .foot-inner{display:flex; align-items:baseline; justify-content:space-between; gap:24px;}
  footer .fl{font-family:var(--font-display); font-size:16px; color:var(--ink); letter-spacing:.02em;}
  footer .fr{font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-align:right;}

  /* ---- responsive ---- */
  @media (max-width:820px){
    .nav-links{display:none;}
    header.hero{min-height:auto; padding:15vh 0 9vh;}
    .hero-inner{grid-template-columns:1fr; gap:36px;}
    .hero h1 .l{font-size:clamp(44px,13vw,86px);}
    .hero-text{order:1;}   /* モバイルはテキスト→円相の縦積みに戻す */
    .enso-cell{order:2; justify-content:center;}   /* モバイルは円相を中央に */
    .row{grid-template-columns:1fr; gap:6px;}
    .row .cat{text-align:left;}
    .about-grid{grid-template-columns:1fr; gap:28px;}
  }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  /* ===================== 書・現代アート（art.html／レイアウトA＝掛軸・床の間） ===================== */
  /* 共有資産（site.css／navbrush／logomark）に追記。既存セレクタは変更しない＝index.html に影響なし */
  .page-intro{padding:clamp(64px,10vw,128px) 0 clamp(8px,2vw,24px);}
  .page-intro .kicker-jp{margin:0 0 18px;}
  .page-intro h1{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:clamp(40px,6vw,84px); line-height:1.06; letter-spacing:-.01em; margin:0 0 .42em;}
  .page-intro .lede{font-size:clamp(18px,1.6vw,22px); line-height:1.8; color:var(--ink-body); margin:0; max-width:34em;}

  .art-piece{padding:clamp(48px,8vw,104px) 0; border-top:1px solid var(--line);}
  .art-head{display:flex; align-items:baseline; gap:16px; margin:0 0 30px; flex-wrap:wrap;}
  .art-head .num{font-size:13px; letter-spacing:.22em; color:var(--muted);}
  .art-head .ttl{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:clamp(24px,3.2vw,38px); line-height:1.12;}
  .art-head .med{margin-left:auto; font-size:14px; font-style:italic; color:var(--muted); white-space:nowrap;}

  /* 映像（主作品）：縦長(9:16)なので高さ基準で1画面に収める・中央寄せ（影なし・自動再生しない＝文人/抑制） */
  .art-figure{margin:0;}
  .video-wrap{max-width:100%; text-align:center;}
  .art-figure video{display:block; margin:0 auto; width:auto; height:auto; max-width:100%; max-height:clamp(380px,72vh,720px); border:1px solid var(--line); background:var(--ink);}
  .art-cap{margin:18px 0 0; font-size:15px; color:var(--muted); line-height:1.8; max-width:56ch;}
  .art-cap .gloss{color:var(--ink); font-style:normal;}

  /* パーツ＝この一作を構成する書 */
  .part{margin-top:clamp(44px,7vw,88px);}
  .part:first-of-type{margin-top:4px;}
  .part-label{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:clamp(22px,2.6vw,32px); line-height:1.1; margin:0 0 18px;}

  /* 黒の書道下敷き風マット（等幅・影なし）。作品は深い墨地に浮く＝畳/斜め/雑さを一掃 */
  .matted{background:#17120D; padding:clamp(14px,2.4vw,30px);}
  .matted img{display:block; width:100%; height:auto; border:none; background:transparent;}

  /* ○△□：横帯（バンド） */
  .band .art-figure{max-width:100%;}

  /* Ai：掛軸（縦）＋テキスト2カラム */
  .scroll-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,5vw,72px); align-items:center;}
  .scroll-grid .kake{max-width:380px; margin:0 auto;}
  .art-body .ask{font-family:var(--font-display); font-weight:400; font-size:clamp(21px,2.4vw,32px); line-height:1.45; color:var(--ink); margin:0 0 .5em;}
  .art-body p{font-size:clamp(16px,1.35vw,19px); line-height:1.8; margin:1em 0 0; max-width:34ch; color:var(--ink-body);}

  .back-row{padding:clamp(40px,6vw,72px) 0 0;}
  .back-top{display:inline-block; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding-bottom:3px; border-bottom:1px solid var(--line); transition:color .2s,border-color .2s;}
  .back-top:hover{color:var(--ink); border-color:var(--ink);}

  @media (max-width:820px){
    .scroll-grid{grid-template-columns:1fr; gap:26px;}
    .scroll-grid .kake{max-width:280px;}
    .art-head .med{margin-left:0; width:100%;}
  }

  /* ===================== LinkedIn 落款（外部ロゴ＝例外・SPEC §11）。墨単色＋「in」は地で抜く＝溶け込む ===================== */
  .lede-seal{position:relative; display:inline-block; margin-right:.55em; vertical-align:-.35em; line-height:0; border-radius:6px;}  /* lede先頭(複業家の左隣)に置くので右マージン */
  .lede-seal svg{width:1.45em; height:1.45em; display:block; transition:opacity .2s;}
  .lede-seal:hover svg{opacity:.72;}
  .lede-seal:focus-visible{outline:1px solid var(--line); outline-offset:3px;}

  /* 硯（すずり）＝左の円相と連動した波紋。アイコン本体(SVG)は不変、外側に重ねる墨の波紋だけ足す。色は墨と地のみ（新色なし） */
  .seal-ripple{position:absolute; left:50%; top:50%; width:1.45em; height:1.45em; transform:translate(-50%,-50%); border-radius:7px; pointer-events:none; z-index:0;}
  .seal-ripple::before,.seal-ripple::after{content:""; position:absolute; inset:0; border-radius:7px; border:1px solid rgba(33,29,24,.45); opacity:0;}
  .lede-seal svg{position:relative; z-index:1;}
  /* 円相がもにょもにょしてる間(.is-dipping)＝波紋ON＋輪郭ぷるぷる。終筆/静止でOFF */
  .lede-seal.is-dipping .seal-ripple::before{animation:sealRipple 900ms ease-out infinite;}
  .lede-seal.is-dipping .seal-ripple::after{animation:sealRipple 900ms ease-out 450ms infinite;}
  .lede-seal.is-dipping svg{animation:sealWobble 480ms ease-in-out infinite;}
  /* hover/focusでも軽く波紋＝クリック誘導（静止時の手がかり） */
  .lede-seal:hover .seal-ripple::before,.lede-seal:focus-visible .seal-ripple::before{animation:sealRipple 900ms ease-out infinite;}
  @keyframes sealRipple{0%{transform:scale(.92); opacity:.45;} 100%{transform:scale(1.85); opacity:0;}}
  @keyframes sealWobble{0%,100%{transform:translateY(0) rotate(0);} 25%{transform:translateY(-.5px) rotate(-1.2deg);} 75%{transform:translateY(.5px) rotate(1.2deg);}}
  @media (prefers-reduced-motion: reduce){
    .lede-seal.is-dipping .seal-ripple::before,.lede-seal.is-dipping .seal-ripple::after,
    .lede-seal:hover .seal-ripple::before,.lede-seal.is-dipping svg{animation:none;}
  }