/* 北浦　由花里 公式サイト 共通スタイル
   index.html と past.html の両方から読み込まれます。 */

  :root{
    /* —— ピアノの世界から引いた配色 —— */
    --ink:        #16110C;   /* 漆黒の蓋（温かみのある黒） */
    --ink-2:      #1F1812;
    --ivory:      #F4EFE5;   /* 象牙鍵 */
    --ivory-2:    #ECE3D2;   /* やや沈めた地（カード等） */
    --ebony:      #241C14;   /* 明色地のテキスト */
    --brass:      #AE8B4C;   /* ペダルの真鍮 */
    --brass-lt:   #CBA970;
    --bordeaux:   #5C2A2C;   /* 客席のえんじ（差し色・控えめ） */
    --muted:      #7C7062;   /* 明色地の二次テキスト */
    --muted-dk:   #A8997F;   /* 暗色地の二次テキスト */
    --line:       rgba(36,28,20,.14);
    --line-dk:    rgba(244,239,229,.16);

    --serif-ja: "Shippori Mincho", serif;
    --serif-en: "Cormorant Garamond", serif;
    --sans:     "Jost", "Shippori Mincho", sans-serif;

    --maxw: 1120px;
    --pad: clamp(1.25rem, 5vw, 4rem);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  body{
    font-family:var(--serif-ja);
    background:var(--ivory);
    color:var(--ebony);
    line-height:1.85;
    font-weight:500;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation:none !important; transition:none !important; }
  }

  /* ============== ページ遷移（楽譜をめくる） ==============
     同じサイト内のページ移動を、ブラウザに動かしてもらう仕組み。
     遷移前と遷移後の画面をブラウザが撮り、その2枚を重ねて動かす。
     対応していないブラウザでは、これまでどおり普通に切り替わるだけ。 */
  @view-transition{ navigation:auto; }

  @media (prefers-reduced-motion: no-preference){
    ::view-transition-group(root){ animation-duration:.62s; }
    /* 前のページ＝めくられる紙。左端を綴じ目にして手前へ起こす。 */
    ::view-transition-old(root){
      animation:sheet-turn-out .62s cubic-bezier(.45,.05,.3,1) both;
      transform-origin:left center;
      z-index:2;
    }
    /* 次のページ＝下から現れる紙。動かさず、沈んだ状態から浮かび上がらせる。 */
    ::view-transition-new(root){
      animation:sheet-turn-in .62s cubic-bezier(.45,.05,.3,1) both;
      z-index:1;
    }
    @keyframes sheet-turn-out{
      from{ transform:perspective(1800px) rotateY(0deg); filter:brightness(1); }
      /* 88度で止める。90度を越えると紙の裏側が見えてしまうため。 */
      to  { transform:perspective(1800px) rotateY(-88deg); filter:brightness(.45); }
    }
    @keyframes sheet-turn-in{
      from{ transform:scale(.985); filter:brightness(.8); }
      to  { transform:scale(1);    filter:brightness(1); }
    }
  }

  ::selection{ background:var(--brass); color:var(--ink); }

  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

  /* —— 共通：楽章エンブレム（番号 + ラベル）—— */
  .eyebrow{
    font-family:var(--sans);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.32em;
    font-size:.72rem;
    color:var(--brass);
  }
  .movement{
    display:flex; align-items:baseline; gap:1rem;
    margin-bottom:1.6rem;
  }
  .movement .num{
    font-family:var(--serif-en);
    font-style:italic;
    font-weight:500;
    font-size:1.5rem;
    color:var(--brass);
    line-height:1;
  }
  .movement .lab{
    font-family:var(--sans);
    text-transform:uppercase;
    letter-spacing:.3em;
    font-size:.72rem;
    color:var(--muted);
  }
  .sec-title{
    font-family:var(--serif-ja);
    font-weight:700;
    line-height:1.25;
    font-size:clamp(1.7rem, 4.2vw, 2.7rem);
    letter-spacing:.02em;
  }
  .sec-title .en{
    display:block;
    font-family:var(--serif-en);
    font-style:italic;
    font-weight:500;
    color:var(--brass);
    font-size:.5em;
    letter-spacing:.04em;
    margin-top:.35rem;
  }

  /* —— 真鍮の細線 —— */
  .rule{ height:1px; background:var(--line); border:0; }

  /* ============== NAV ============== */
  header.nav{
    position:fixed; inset:0 0 auto 0; z-index:50;
    transition:border-color .4s ease;
    border-bottom:1px solid transparent;
  }
  /* 背景の色とぼかしは、ヘッダー自身ではなく背面の擬似要素に持たせる。
     backdrop-filter を持つ要素は position:fixed の子孫の位置の基準になるため、
     ヘッダーに直接かけると、画面外へ逃がしているスマホのメニューが
     ヘッダーの高さぶんしか動かず、画面上に覗いてしまう。 */
  header.nav::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:rgba(22,17,12,.86);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    backdrop-filter:saturate(140%) blur(10px);
    opacity:0; transition:opacity .4s ease;
  }
  header.nav.scrolled::before{ opacity:1; }
  header.nav.scrolled{ border-bottom:1px solid var(--line-dk); }
  /* 明るい地のページ用。ヘッダーの文字は象牙色なので、
     背景が透明のままだと読めない。最初から濃色の帯を出しておく。
     色はフッターと同じ --ink。透けないので、ぼかしは効かせない。 */
  header.nav.solid::before{
    opacity:1; background:var(--ink);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  header.nav.solid{ border-bottom:1px solid var(--line-dk); }
  .nav-inner{
    max-width:var(--maxw); margin-inline:auto;
    padding:1.1rem var(--pad);
    display:flex; align-items:center; justify-content:space-between;
    /* 背面の擬似要素より前に描画させる。 */
    position:relative; z-index:1;
  }
  .brand{
    font-family:var(--serif-en);
    font-size:1.4rem; font-weight:600; letter-spacing:.03em;
    color:var(--ivory);
  }
  .brand .ja{ font-family:var(--serif-ja); font-size:.78rem; letter-spacing:.3em; color:var(--muted-dk); margin-left:.6rem; }
  .nav-links{ display:flex; gap:2rem; align-items:center; }
  .nav-links a{
    font-family:var(--sans);
    font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ivory); opacity:.78; position:relative; padding:.25rem 0;
    transition:opacity .3s;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
    background:var(--brass); transition:width .35s ease;
  }
  .nav-links a:hover{ opacity:1; }
  .nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }

  .menu-btn{
    display:none; background:none; border:0; cursor:pointer;
    width:34px; height:24px; position:relative;
  }
  .menu-btn span{
    position:absolute; left:0; height:1.5px; width:100%; background:var(--ivory);
    transition:transform .35s ease, opacity .25s ease;
  }
  .menu-btn span:nth-child(1){ top:3px; }
  .menu-btn span:nth-child(2){ top:11px; }
  .menu-btn span:nth-child(3){ top:19px; }
  body.menu-open .menu-btn span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.menu-open .menu-btn span:nth-child(2){ opacity:0; }
  body.menu-open .menu-btn span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* ============== HERO ============== */
  .hero{
    position:relative;
    min-height:100svh;
    background:var(--ink);
    color:var(--ivory);
    display:flex; flex-direction:column; justify-content:center;
    padding-block:9rem 0;
    overflow:hidden;
  }
  /* 同じ人物写真をぼかして敷き、左側の文字領域にも写真の色と光をつなげる。 */
  .hero::before{
    content:""; position:absolute; inset:-2rem;
    background-image:url("assets/pianist-hero.jpg");
    background-size:cover;
    background-position:68% center;
    filter:blur(26px) saturate(.7);
    opacity:.3;
    transform:scale(1.05);
    pointer-events:none;
  }
  /* 写真の上でも文字のコントラストが落ちないよう、左側を重点的に暗くする。 */
  .hero::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(17,13,9,.94) 0%, rgba(17,13,9,.78) 44%, rgba(17,13,9,.22) 78%, rgba(17,13,9,.08) 100%),
      linear-gradient(0deg, rgba(17,13,9,.55), transparent 38%);
    pointer-events:none;
  }
  .hero-inner{
    position:relative; z-index:2; width:100%;
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.8fr);
    gap:clamp(1.5rem,5vw,5rem); align-items:center;
  }
  .hero-copy{ position:relative; z-index:2; padding-block:2rem 4rem; }
  .hero-portrait{
    align-self:end; height:min(72svh,760px); min-height:480px;
    margin-right:calc(var(--pad) * -1); overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
    mask-image:linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
  }
  .hero-portrait img{
    width:100%; height:100%; object-fit:cover; object-position:62% center;
  }
  .hero .eyebrow{ margin-bottom:1.4rem; opacity:0; animation:rise .9s .15s ease forwards; }
  .hero h1{
    font-family:var(--serif-en);
    font-weight:600;
    font-size:clamp(3.2rem, 11vw, 8rem);
    line-height:.96;
    letter-spacing:.005em;
    margin-bottom:1.2rem;
    opacity:0; animation:rise 1s .3s ease forwards;
  }
  .hero h1 .amp{ color:var(--brass); font-style:italic; }
  .hero .name-ja{
    font-family:var(--serif-ja); font-weight:600;
    font-size:clamp(1.05rem, 3vw, 1.5rem);
    letter-spacing:.45em; color:var(--muted-dk);
    margin-bottom:2.6rem; padding-left:.45em;
    opacity:0; animation:rise 1s .45s ease forwards;
  }
  .hero .tagline{
    font-family:var(--serif-ja); font-weight:500;
    font-size:clamp(1.15rem, 3.4vw, 1.9rem);
    line-height:1.7; max-width:24ch; color:var(--ivory);
    opacity:0; animation:rise 1s .6s ease forwards;
  }
  .hero .sub{
    margin-top:1.2rem; color:var(--muted-dk);
    font-size:clamp(.9rem,2.3vw,1.02rem); max-width:40ch;
    opacity:0; animation:rise 1s .72s ease forwards;
  }
  .mobile-break{ display:none; }
  .hero-cta{
    display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem;
    opacity:0; animation:rise 1s .85s ease forwards;
  }

  .btn{
    font-family:var(--sans); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
    padding:.95rem 1.9rem; border:1px solid var(--brass); color:var(--ivory);
    border-radius:0; cursor:pointer; transition:background .35s, color .35s, border-color .35s;
    display:inline-block; background:transparent;
  }
  .btn:hover, .btn:focus-visible{ background:var(--brass); color:var(--ink); }
  .btn.solid{ background:var(--brass); color:var(--ink); }
  .btn.solid:hover, .btn.solid:focus-visible{ background:var(--brass-lt); border-color:var(--brass-lt); }
  .btn.ghost-dark{ border-color:var(--ebony); color:var(--ebony); }
  .btn.ghost-dark:hover, .btn.ghost-dark:focus-visible{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

  /* 鍵盤のしるし（一度きりの署名・暗→明の継ぎ目） */
  .keyboard{
    position:relative; z-index:2;
    margin-top:auto; width:100%; height:46px; opacity:.9;
  }
  .keyboard svg{ width:100%; height:100%; display:block; }

  @keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }

  /* ============== SECTION 基本 ============== */
  section{ padding-block:clamp(4.5rem, 10vw, 8rem); }
  /* ヘッダーは画面に固定されているため、リンクで飛ぶとその下に潜り込んでしまう。
     ヘッダーの高さ（約4.9rem）ぶん手前で止めて、見出しが隠れないようにする。 */
  section[id]{ scroll-margin-top:5rem; }
  .lead{ font-size:clamp(1rem,2.6vw,1.18rem); max-width:62ch; }
  .grid-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(2rem,6vw,5rem); align-items:start; }

  /* —— プロフィール —— */
  #profile{ background:var(--ivory); }
  .bio p + p{ margin-top:1.2rem; }
  .portrait{
    position:relative; aspect-ratio:4/5; background:var(--ivory-2);
    border:1px solid var(--line); overflow:hidden;
  }
  .portrait img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 40%;
  }

  /* —— 演奏活動（番組表）—— */
  #performances{ background:var(--ink); color:var(--ivory); }
  #performances .eyebrow{ color:var(--brass-lt); }
  #performances .movement .lab{ color:var(--muted-dk); }
  #performances .sec-title{ color:var(--ivory); }
  #performances .rule{ background:var(--line-dk); }
  .program{ margin-top:2.6rem; }
  .gig{
    display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem 2rem; align-items:baseline;
    padding:1.7rem 0; border-top:1px solid var(--line-dk); transition:padding-left .4s ease;
  }
  .gig:last-of-type{ border-bottom:1px solid var(--line-dk); }
  .gig:hover{ padding-left:.6rem; }
  .gig .date{ font-family:var(--serif-en); line-height:1; }
  .gig .date .d{ font-size:2.3rem; font-weight:600; color:var(--ivory); }
  .gig .date .m{ display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lt); margin-top:.4rem; }
  .gig .meta .ttl{ font-family:var(--serif-ja); font-weight:600; font-size:1.2rem; color:var(--ivory); }
  .gig .meta .ven{ color:var(--muted-dk); font-size:.95rem; margin-top:.3rem; }
  .gig .meta .prog{ color:var(--muted-dk); font-size:.9rem; margin-top:.5rem; font-style:italic; font-family:var(--serif-en); letter-spacing:.01em; }
  .gig .go{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-lt); white-space:nowrap; align-self:center; }
  /* —— 公演が未定のときの表示 —— */
  .upcoming-none{
    text-align:center; padding-block:4rem;
    border-top:1px solid var(--line-dk); border-bottom:1px solid var(--line-dk);
  }
  .upcoming-none .ttl{
    font-family:var(--serif-ja); font-weight:600; line-height:1.6;
    font-size:clamp(1.15rem,3vw,1.5rem); color:var(--ivory);
  }
  .upcoming-none .note{
    margin-top:.9rem; color:var(--muted-dk); font-size:clamp(.9rem,2.3vw,1rem);
  }
  .upcoming-none .btn{ margin-top:2.2rem; }

  /* —— 過去の出演ページへの導線 —— */
  .past-link{ text-align:center; margin-top:2.4rem; }
  .past-link a{
    font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--brass-lt); border-bottom:1px solid var(--line-dk); padding-bottom:.3rem;
    transition:color .35s ease, border-color .35s ease;
  }
  .past-link a:hover{ color:var(--ivory); border-color:var(--brass); }
  /* 日付がまだ分からない公演のための、日付欄を持たない形。 */
  .gig.no-date{ grid-template-columns:1fr auto; }
  /* 下層ページ：固定ヘッダーのぶん、上に余白を足す。 */
  .page-top{ padding-top:calc(clamp(4.5rem, 10vw, 8rem) + 3rem); }

  /* —— これまでの出演ページ —— */
  /* 地はトップページと同じ明るい色。見出しなどは明色地用の既定がそのまま効く。 */
  #past{ background:var(--ivory); }
  /* .gig の配色は濃色地に合わせて作られているので、明色地用に置き換える。
     罫線は明るい線から暗い線へ、文字は象牙色から墨色へ。
     真鍮も、明るい地では濃いほうの --brass を使う。 */
  #past .gig{ border-top-color:var(--line); }
  #past .gig:last-of-type{ border-bottom-color:var(--line); }
  #past .gig .date .d{ color:var(--ebony); }
  #past .gig .date .m{ color:var(--brass); }
  #past .gig .meta .ttl{ color:var(--ebony); }
  #past .gig .meta .ven,
  #past .gig .meta .prog{ color:var(--muted); }
  #past .gig .go{ color:var(--brass); }
  #past .gig .go:hover{ color:var(--ebony); }
  /* 戻るリンクも明色地用に置き換える。 */
  #past .past-link a{ color:var(--brass); border-bottom-color:var(--line); }
  #past .past-link a:hover{ color:var(--ebony); border-bottom-color:var(--ebony); }
  .gig .go:hover{ color:var(--ivory); }

  /* —— 音源・映像 —— */
  #media{ background:var(--ivory); }
  /* max-width は、枚数が少ないときにカードが間延びしないための上限。 */
  .discs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; margin-top:2.6rem; max-width:820px; }
  .disc{
    background:var(--ivory-2); border:1px solid var(--line); padding:1.6rem;
    display:flex; flex-direction:column; gap:.4rem; transition:transform .35s ease, box-shadow .35s ease;
  }
  .disc:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -28px rgba(36,28,20,.55); }
  .disc .cover{
    aspect-ratio:1; background:var(--ink); margin:-1.6rem -1.6rem 1.1rem; position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .disc .cover svg{ width:40px; height:40px; color:var(--brass-lt); }
  /* —— YouTube のサムネイルを敷いたとき —— */
  /* サムネイルは横長なので、枠も動画と同じ比率にして切り取りを避ける。 */
  .disc .cover.video{ aspect-ratio:16/9; }
  .disc .cover img{ width:100%; height:100%; object-fit:cover; }
  .disc .cover .play{
    position:absolute; inset:0; margin:auto;
    width:54px; height:54px; border-radius:50%;
    border:1px solid var(--brass-lt); background:rgba(22,17,12,.55);
    display:flex; align-items:center; justify-content:center;
    transition:background .35s ease, border-color .35s ease;
  }
  .disc .cover .play::before{
    content:""; margin-left:3px;
    border-style:solid; border-width:8px 0 8px 13px;
    border-color:transparent transparent transparent var(--ivory);
  }
  .disc:hover .cover .play{ background:var(--brass); border-color:var(--brass); }
  .disc .kind{ font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); }
  .disc .nm{ font-family:var(--serif-ja); font-weight:600; font-size:1.12rem; }
  .disc .ds{ color:var(--muted); font-size:.9rem; }
  .disc .listen{ margin-top:.7rem; font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ebony); border-bottom:1px solid var(--brass); padding-bottom:.2rem; align-self:flex-start; }
  .disc .listen:hover{ color:var(--brass); }

  /* —— レッスン —— */
  #lessons{ background:var(--ink-2); color:var(--ivory); }
  #lessons .eyebrow{ color:var(--brass-lt); }
  #lessons .movement .lab{ color:var(--muted-dk); }
  #lessons .sec-title{ color:var(--ivory); }
  #lessons .lead{ color:var(--muted-dk); }
  .tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; margin-top:3rem; }
  .tier{ border:1px solid var(--line-dk); padding:2rem 1.7rem; display:flex; flex-direction:column; }
  .tier .t-num{ font-family:var(--serif-en); font-style:italic; color:var(--brass-lt); font-size:1.2rem; }
  .tier h3{ font-family:var(--serif-ja); font-weight:600; font-size:1.3rem; margin:.6rem 0 .9rem; color:var(--ivory); }
  .tier p{ color:var(--muted-dk); font-size:.95rem; flex:1; }
  .tier .det{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line-dk); font-size:.85rem; color:var(--muted-dk); }
  .tier .det b{ color:var(--brass-lt); font-weight:600; font-family:var(--sans); letter-spacing:.05em; }
  .lesson-note{
    margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem; align-items:center;
    justify-content:space-between; border-top:1px solid var(--line-dk); padding-top:2rem;
  }
  .lesson-note .fine{ color:var(--muted-dk); font-size:.92rem; max-width:46ch; }

  /* —— お問い合わせ —— */
  #contact{ background:var(--ivory); }
  form{ margin-top:2.6rem; max-width:680px; }
  .field{ margin-bottom:1.5rem; }
  .field label{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem; }
  .field input, .field textarea, .field select{
    width:100%; font-family:var(--serif-ja); font-size:1rem; color:var(--ebony);
    background:transparent; border:0; border-bottom:1px solid var(--line);
    padding:.7rem .2rem; transition:border-color .3s;
  }
  .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--brass); }
  .field textarea{ resize:vertical; min-height:120px; }
  .field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%); background-position:calc(100% - 16px) center,calc(100% - 11px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; }
  .form-note{ font-size:.82rem; color:var(--muted); margin-top:1.2rem; }

  /* ============== FOOTER ============== */
  footer{ background:var(--ink); color:var(--muted-dk); padding-block:4rem; }
  .foot-inner{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-end; }
  footer .brand{ display:block; margin-bottom:.6rem; }
  .copy{ font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; color:rgba(168,153,127,.6); }

  /* ============== reveal ============== */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; }
  .reveal.in{ opacity:1; transform:none; }
  /* サイト内の別ページから来たときは、浮き上がる動きを止めて即座に表示する。
     また、位置合わせのスクロールもなめらかにせず一瞬で済ませる。
     どちらも、めくる動きと重なって二重に見えるのを避けるため。
     読み込みが終わると script.js が nav-arrive を外し、通常の動きに戻る。 */
  html.nav-arrive{ scroll-behavior:auto; }
  html.nav-arrive .reveal{ transition:none; }

  /* ============== レスポンシブ ============== */
  @media (max-width:820px){
    .grid-2{ grid-template-columns:1fr; }
    /* 内容の直後でヒーローを閉じ、鍵盤まで不要な画面高の余白を作らない。 */
    .hero{ min-height:0; padding-top:6.8rem; justify-content:flex-start; }
    .hero::before{ background-position:68% center; filter:blur(22px) saturate(.65); opacity:.38; }
    .hero::after{
      background:
        linear-gradient(90deg, rgba(17,13,9,.94) 0%, rgba(17,13,9,.72) 48%, rgba(17,13,9,.16) 100%),
        linear-gradient(0deg, rgba(17,13,9,.86) 0%, transparent 55%);
    }
    .hero-inner{
      display:block;
      min-height:calc(8.75rem + clamp(330px,48svh,470px));
    }
    /* 写真を通常の文書フローから外し、元の文字幅と改行位置を維持する。 */
    .hero-copy{
      display:block; position:relative; z-index:2;
      padding:0;
    }
    /* 肩書き・英字名・漢字名の3つは中央揃え。以降のコピーは左揃えのまま。 */
    /* padding-left は字間の最後に残る余白を打ち消し、見た目の中心を合わせる。 */
    .hero .eyebrow{ margin-bottom:.75rem; text-align:center; padding-left:.32em; }
    /* スマホでは英字名を一行にまとめ、主役として十分な大きさを保つ。 */
    .hero h1{
      font-size:3.1rem;
      line-height:1;
      white-space:nowrap;
      margin-bottom:.8rem;
      text-align:center;
    }
    .hero h1 .name-break{ display:none; }
    .hero .name-ja{
      position:relative; z-index:3;
      margin-bottom:1.25rem;
      text-align:center;
    }
    .hero-portrait{
      position:absolute; z-index:1;
      top:8.75rem; right:calc(var(--pad) * -1);
      width:52%; height:clamp(330px,48svh,470px); min-height:0;
      margin:0;
      -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 20%, #000 100%);
      mask-image:linear-gradient(to right, transparent 0%, #000 20%, #000 100%);
    }
    .hero-portrait img{ object-position:61% center; }
    /* 紹介文をスマホで約14文字ずつに揃え、写真上へ長く伸びないようにする。 */
    .mobile-break{ display:initial; }
    /* キャッチコピーからCTAまでを写真と同じ縦の範囲へまとめる。 */
    .hero .tagline{ margin-top:0; }
    .hero .sub{ margin-top:.8rem; }
    /* 写真に重ならないよう縦に並べ、文字数に関係なく幅を揃える。 */
    .hero-cta{
      margin-top:1.4rem;
      display:flex; flex-direction:column; align-items:stretch;
      gap:.7rem;
      width:fit-content; max-width:100%;
    }
    .hero-cta .btn{ text-align:center; }
    /* 写真またはボタンの下端と鍵盤の間に、わずかな呼吸を持たせる。 */
    .keyboard{ margin-top:2.5rem; }
    .nav-links{
      position:fixed; inset:0; flex-direction:column; justify-content:center; gap:2.4rem;
      background:rgba(22,17,12,.97);
      -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
      transform:translateY(-100%); transition:transform .5s cubic-bezier(.7,0,.2,1);
    }
    .nav-links a{ font-size:1.05rem; opacity:1; }
    body.menu-open .nav-links{ transform:none; }
    .menu-btn{ display:block; z-index:60; }
    .contact-grid{ grid-template-columns:1fr; }
    .gig{ grid-template-columns:auto 1fr; }
    .gig .go{ grid-column:1 / -1; align-self:start; }
    .portrait{ margin-bottom:0; max-width:380px; }
  }
  @media (max-width:360px){
    .hero h1{ font-size:2.55rem; }
  }