:root {
    /* 和の淡色 */
    --washi:       #fbf6ed;   /* 生成り和紙 */
    --washi-2:     #f4ecdb;   /* 一段濃い和紙 */
    --sakura:      #f6cad6;   /* 桜色 */
    --sakura-pale: #fde6ec;
    --sakura-deep: #e89bb0;
    --fuji:        #c9c0e0;   /* 淡藤 */
    --moegi:       #cfe0c0;   /* 淡萌黄 */
    --asagi:       #b9d6dc;   /* 淡浅葱 */
    --yamabuki:    #e2bf6a;   /* 山吹（金） */
    --shu:         #c8584d;   /* 朱（控えめ） */
    --shu-soft:    #de8a82;
    --sumi:        #2f2a32;   /* 墨 */
    --ink:         #3a3138;
    --ink-soft:    #6a5f66;
    --ink-mute:    #9a8e96;
    --line:        rgba(58, 49, 56, 0.13);

    --serif:   "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
    --hand:    "Klee One", "Yu Mincho", serif;
    --display: "Cormorant Garamond", "Shippori Mincho", serif;
    --mono:    "JetBrains Mono", ui-monospace, monospace;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: var(--serif);
    color: var(--ink);
    background: var(--washi);
    line-height: 1.95;
    letter-spacing: 0.04em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

  img { max-width: 100%; display: block; }

  /* ─────────── 背景：和紙テクスチャ + ぼんやりした淡色のグラデ ─────────── */
  .bg-washi {
    position: fixed; inset: 0; z-index: -3;
    background:
      radial-gradient(ellipse at 12% 8%,  rgba(246,202,214,.45) 0%, transparent 55%),
      radial-gradient(ellipse at 88% 18%, rgba(201,192,224,.35) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 90%, rgba(207,224,192,.32) 0%, transparent 55%),
      radial-gradient(ellipse at 92% 78%, rgba(185,214,220,.30) 0%, transparent 55%),
      var(--washi);
    background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
    animation: shift 30s ease-in-out infinite;
  }
  @keyframes shift {
    0%,100% { background-position: 0 0, 100% 0, 0 100%, 100% 100%, 0 0; }
    50%     { background-position: 20% 10%, 80% 20%, 10% 80%, 90% 70%, 0 0; }
  }
  /* 和紙繊維の粒感 */
  .bg-grain {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    opacity: .35;
    background-image:
      repeating-linear-gradient(91deg,
        transparent 0 30px,
        rgba(58,49,56,.022) 30px 31px),
      repeating-linear-gradient(2deg,
        transparent 0 38px,
        rgba(200,88,77,.018) 38px 39px);
  }

  /* ─────────── 霞雲（水墨風・複数レイヤー重ね） ─────────── */
  .bg-clouds { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .cloud {
    position: absolute; display: block;
    background-repeat: no-repeat; background-size: 100% 100%;
    opacity: 0;
    animation: cloudDrift linear infinite;
    will-change: transform, opacity;
    filter: blur(.4px) saturate(1.4) contrast(1.15) drop-shadow(0 6px 18px rgba(180, 120, 140, .18));
  }
  /* 雲A：霞・桜寄り。複数の楕円が重なって柔らかい水彩風 */
  .cloud.a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -10 660 160'%3E%3Cdefs%3E%3CradialGradient id='ra1' cx='50%25' cy='50%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='.95'/%3E%3Cstop offset='55%25' stop-color='%23fde6ec' stop-opacity='.6'/%3E%3Cstop offset='100%25' stop-color='%23f6cad6' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='ra2' cx='50%25' cy='50%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='.85'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='fa1' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23fa1)'%3E%3Cellipse cx='110' cy='80' rx='110' ry='28' fill='url(%23ra1)'/%3E%3Cellipse cx='250' cy='66' rx='160' ry='34' fill='url(%23ra1)'/%3E%3Cellipse cx='420' cy='78' rx='150' ry='30' fill='url(%23ra1)'/%3E%3Cellipse cx='540' cy='84' rx='80' ry='22' fill='url(%23ra1)'/%3E%3Cellipse cx='200' cy='60' rx='80' ry='14' fill='url(%23ra2)'/%3E%3Cellipse cx='380' cy='72' rx='110' ry='14' fill='url(%23ra2)'/%3E%3C/g%3E%3C/svg%3E");
  }
  /* 雲B：霞・藤寄り */
  .cloud.b {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -10 660 160'%3E%3Cdefs%3E%3CradialGradient id='rb1' cx='50%25' cy='50%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='.92'/%3E%3Cstop offset='55%25' stop-color='%23ece5f5' stop-opacity='.55'/%3E%3Cstop offset='100%25' stop-color='%23c9c0e0' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='rb2' cx='50%25' cy='50%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='.8'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='fb1' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23fb1)'%3E%3Cellipse cx='90' cy='80' rx='90' ry='22' fill='url(%23rb1)'/%3E%3Cellipse cx='220' cy='70' rx='150' ry='30' fill='url(%23rb1)'/%3E%3Cellipse cx='400' cy='80' rx='170' ry='32' fill='url(%23rb1)'/%3E%3Cellipse cx='540' cy='86' rx='80' ry='20' fill='url(%23rb1)'/%3E%3Cellipse cx='180' cy='66' rx='90' ry='12' fill='url(%23rb2)'/%3E%3Cellipse cx='400' cy='74' rx='130' ry='14' fill='url(%23rb2)'/%3E%3C/g%3E%3C/svg%3E");
  }
  /* 雲C：霞・萌黄寄り（一層細く） */
  .cloud.c {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -10 660 120'%3E%3Cdefs%3E%3CradialGradient id='rc1' cx='50%25' cy='50%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='.9'/%3E%3Cstop offset='55%25' stop-color='%23ecf3e2' stop-opacity='.5'/%3E%3Cstop offset='100%25' stop-color='%23cfe0c0' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='fc1' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23fc1)'%3E%3Cellipse cx='100' cy='55' rx='100' ry='18' fill='url(%23rc1)'/%3E%3Cellipse cx='280' cy='48' rx='160' ry='22' fill='url(%23rc1)'/%3E%3Cellipse cx='460' cy='56' rx='140' ry='20' fill='url(%23rc1)'/%3E%3C/g%3E%3C/svg%3E");
  }
  .cloud-1 { width: 720px; height: 170px; top: 6%;  animation-duration: 130s; animation-delay:    0s; }
  .cloud-2 { width: 880px; height: 200px; top: 24%; animation-duration: 170s; animation-delay:  -55s; }
  .cloud-3 { width: 600px; height: 110px; top: 48%; animation-duration: 145s; animation-delay:  -90s; }
  .cloud-4 { width: 920px; height: 220px; top: 64%; animation-duration: 200s; animation-delay: -130s; }
  .cloud-5 { width: 700px; height: 160px; top: 84%; animation-duration: 160s; animation-delay:  -70s; }
  @keyframes cloudDrift {
    0%   { transform: translateX(-40vw); opacity: 0; }
    12%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(140vw); opacity: 0; }
  }

  /* ─────────── 桜の散らし（自然な落下：fall + sway + spin の3層分離） ─────────── */
  .sakura-rain { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; perspective: 1400px; }
  /* 落下（縦方向のみ・等速ベース） */
  .petal-fall {
    position: absolute; top: -10vh;
    animation: petalFall linear infinite;
    will-change: transform;
  }
  /* 横揺れ（sin風のゆらぎ） */
  .petal-sway {
    display: block;
    animation: petalSway ease-in-out infinite alternate;
    will-change: transform;
  }
  /* 自転（軸はランダム） */
  .petal {
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='30%25' r='80%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='35%25' stop-color='%23fff2f5'/%3E%3Cstop offset='75%25' stop-color='%23fbd1dc'/%3E%3Cstop offset='100%25' stop-color='%23e89bb0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M16 2 C 5 8 4 22 14 33 L16 36 L18 33 C28 22 27 8 16 2 Z' fill='url(%23g)'/%3E%3Cpath d='M14 33 L16 28 L18 33' fill='none' stroke='%23d97f95' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M16 4 C 14 10 15 16 16 18 C 17 16 18 10 16 4 Z' fill='%23d97f95' opacity='.18'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
    animation: petalSpin linear infinite;
    transform-style: preserve-3d; will-change: transform;
  }
  @keyframes petalFall {
    0%   { transform: translateY(-10vh); }
    100% { transform: translateY(115vh); }
  }
  @keyframes petalSway {
    0%   { transform: translateX(-22px); }
    100% { transform: translateX(22px); }
  }
  @keyframes petalSpin {
    0%   { transform: rotateY(0deg)   rotateZ(0deg); }
    50%  { transform: rotateY(180deg) rotateZ(140deg); }
    100% { transform: rotateY(360deg) rotateZ(360deg); }
  }

  /* ─────────── 共通レイアウト ─────────── */
  .wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
  .topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 28px 32px 0;
    max-width: 1100px; margin: 0 auto;
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    color: var(--ink-mute); text-transform: uppercase;
    position: relative; z-index: 4;
  }
  .topbar .brand {
    font-family: var(--display); font-style: italic;
    font-size: 16px; letter-spacing: .04em; color: var(--ink);
    text-transform: none;
  }
  .topbar nav { display: flex; gap: 24px; }
  .topbar nav a { color: var(--ink-soft); text-decoration: none; transition: color .2s; }
  .topbar nav a:hover { color: var(--shu); }

  /* ─────────── HERO ─────────── */
  .hero {
    position: relative; z-index: 2;
    min-height: 92vh;
    padding: 80px 0 100px;
    display: flex; align-items: center;
  }

  /* 月（満月・金縁） */
  .moon {
    position: absolute;
    top: 12%; right: 8%;
    width: 220px; height: 220px;
    z-index: 1; pointer-events: none;
    animation: moonFloat 16s ease-in-out infinite;
  }
  .moon-disc {
    position: absolute; inset: 28px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 38% 36%, #ffffff 0%, #fff7e6 30%, #fbe6c1 65%, #e8c984 100%);
    box-shadow:
      inset -10px -14px 30px rgba(180, 140, 70, .28),
      inset 8px 10px 24px rgba(255, 250, 235, .8),
      0 0 50px rgba(226, 191, 106, .35),
      0 0 110px rgba(226, 191, 106, .18);
  }
  /* 月のうさぎ（ぼんやりとしたクレーター模様） */
  .moon-disc::before {
    content: ''; position: absolute;
    top: 30%; left: 28%;
    width: 22%; height: 14%;
    background: rgba(180,140,70,.16);
    border-radius: 50%;
    filter: blur(2px);
  }
  .moon-disc::after {
    content: ''; position: absolute;
    top: 56%; left: 50%;
    width: 14%; height: 10%;
    background: rgba(180,140,70,.12);
    border-radius: 50%;
    filter: blur(2px);
  }
  .moon-glow {
    position: absolute; inset: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252,236,196,.55) 0%, rgba(252,236,196,.18) 40%, transparent 75%);
    filter: blur(8px);
  }
  /* 月にかかる雲 */
  .moon-cloud {
    position: absolute;
    top: 48%; left: -14%;
    width: 130%; height: 18%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.85) 30%, rgba(255,255,255,.85) 70%, transparent 100%);
    border-radius: 50%;
    filter: blur(4px);
    opacity: .55;
    animation: cloudOverMoon 18s ease-in-out infinite;
  }
  @keyframes moonFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-10px); }
  }
  @keyframes cloudOverMoon {
    0%,100% { transform: translateX(-6%); opacity: .45; }
    50%     { transform: translateX(8%);  opacity: .65; }
  }

  /* 背後の桜の枝（さりげなく） */
  .branch {
    position: absolute;
    z-index: 1; pointer-events: none;
    opacity: .85;
  }
  .branch.left  { top: -40px; left: -80px; width: 1080px; transform: rotate(-5deg); display: none; }
  .branch.right { bottom: 20px; right: -100px; width: 1000px; transform: rotate(180deg); display: none; }

  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 60px;
    align-items: center;
    width: 100%;
    position: relative; z-index: 3;
  }

  .hero-tag {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .25em;
    color: var(--shu); text-transform: uppercase;
    margin-bottom: 28px;
  }
  .hero-tag .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--shu);
    box-shadow: 0 0 0 4px rgba(200,88,77,.14);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(200,88,77,.14); }
    50%     { box-shadow: 0 0 0 8px rgba(200,88,77,.04); }
  }

  .hero h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(36px, 5.6vw, 76px);
    letter-spacing: 0.02em;
    line-height: 1.0;
    margin: 0 0 20px;
    color: var(--sumi);
    position: relative;
    white-space: nowrap;
  }
  .hero h1 .kanji {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: .26em;
    letter-spacing: .55em;
    color: var(--shu);
    margin-bottom: 14px;
    text-indent: .55em;
  }
  .hero .catch {
    font-family: var(--hand);
    font-size: clamp(18px, 2.1vw, 24px);
    color: var(--ink);
    line-height: 1.8;
    margin: 0 0 36px;
    max-width: 480px;
  }
  .hero .catch::before {
    content: "";
    display: inline-block;
    width: 40px; height: 1px;
    background: var(--shu);
    transform: translateY(-7px);
    margin-right: 16px;
  }

  .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(58,49,56,.18);
    border-radius: 999px;
    color: var(--ink); text-decoration: none;
    font-size: 13px; font-family: var(--serif);
    letter-spacing: .08em;
    transition: all .25s;
    backdrop-filter: blur(4px);
  }
  .hero-btn:hover {
    background: var(--shu);
    color: var(--washi);
    border-color: var(--shu);
    transform: translateY(-2px);
  }
  .hero-btn .ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--shu); color: #fff;
    font-size: 11px; font-weight: 700;
    transition: all .25s;
  }
  .hero-btn:hover .ic { background: var(--washi); color: var(--shu); }

  .hero-photo {
    position: relative;
    display: flex; justify-content: center;
  }
  .tachie-frame {
    position: relative;
    width: 100%;
    max-width: 420px;
  }
  /* 立ち絵の背景：丸い淡い和の輪 */
  .tachie-frame::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 110%; padding-bottom: 110%;
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(253,230,236,.5) 35%, rgba(246,202,214,.2) 60%, transparent 75%);
    z-index: 0;
  }
  .tachie {
    position: relative; z-index: 1;
    width: 100%;
    filter: drop-shadow(0 18px 28px rgba(58,49,56,.16));
  }

  .scroll-hint {
    position: absolute; bottom: 32px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .3em; color: var(--ink-mute);
    text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .scroll-hint::after {
    content: ""; width: 1px; height: 28px;
    background: linear-gradient(to bottom, var(--ink-mute), transparent);
  }

  /* ─────────── セクション共通 ─────────── */
  section.block { padding-block: 100px; position: relative; z-index: 2; }
  .section-head {
    display: flex; align-items: baseline; gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 48px;
    flex-wrap: wrap;
  }
  .section-head .num {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .25em; color: var(--shu); text-transform: uppercase;
  }
  .section-head h2 {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(28px, 4vw, 40px);
    margin: 0; letter-spacing: .04em; color: var(--sumi);
  }
  .section-head .jp { display: none; }

  /* ─────────── ABOUT ─────────── */
  .about-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 56px; align-items: start;
  }
  .about-portrait {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 12px 36px rgba(58,49,56,.12);
    position: relative;
  }
  .about-portrait::after {
    content: '';
    position: absolute; inset: 0;
    border: 1px solid rgba(255,255,255,.6);
    pointer-events: none;
  }
  .about-portrait img { width: 100%; height: 100%; object-fit: cover; }
  .about-bio {
    font-size: 16px; color: var(--ink);
    line-height: 2.1; white-space: pre-line;
    margin: 0;
  }
  .about-bio .lead {
    font-family: var(--hand);
    font-size: 22px;
    color: var(--shu);
    display: block;
    margin-bottom: 18px;
    line-height: 1.6;
  }

  /* ─────────── SAMPLE ─────────── */
  .sample-list { display: grid; gap: 14px; }
  .sample-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px; align-items: center;
    padding: 22px 26px;
    background: rgba(255,255,255,.75);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: all .25s;
    backdrop-filter: blur(4px);
  }
  .sample-card:hover {
    border-color: var(--shu);
    transform: translateX(4px);
    box-shadow: 0 8px 22px rgba(246,202,214,.35);
  }
  .sample-play {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--shu);
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all .2s;
  }
  .sample-play:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(200,88,77,.35); }
  .sample-card.playing .sample-play { background: var(--sumi); }

  .sample-info { min-width: 0; }
  .sample-cat {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px; letter-spacing: .2em;
    color: var(--shu); text-transform: uppercase;
    margin-bottom: 6px;
  }
  .sample-title {
    font-size: 17px; font-weight: 500;
    color: var(--ink); margin-bottom: 4px;
    font-family: var(--serif);
  }
  .sample-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }
  .sample-time {
    font-family: var(--mono); font-size: 12px;
    color: var(--ink-mute);
    align-self: center;
  }

  /* ─────────── WORKS ─────────── */
  .works {
    border-top: 1px solid var(--line);
  }
  .work-row {
    display: grid;
    grid-template-columns: 110px 130px 1fr;
    gap: 24px; align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    transition: padding .25s;
  }
  .work-row:hover { padding-left: 12px; background: rgba(255,255,255,.4); }
  .work-row .year {
    font-family: var(--mono);
    font-size: 12px; letter-spacing: .08em;
    color: var(--shu);
  }
  .work-row .cat {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: .18em;
    color: var(--ink-soft); text-transform: uppercase;
  }
  .work-row .title {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
  }

  /* ─────────── DATA ─────────── */
  .data-grid {
    background: rgba(255,255,255,.7);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
  }
  .data-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .data-row dt {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: .2em;
    color: var(--shu); text-transform: uppercase;
  }
  .data-row dd { margin: 0; font-size: 14px; color: var(--ink); }
  .data-grid .data-row:nth-last-child(-n+2) { border-bottom: none; }

  /* ─────────── SCHEDULE ─────────── */
  .schedule-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
  }
  .sched {
    padding: 18px 10px;
    background: rgba(255,255,255,.75);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-align: center;
    transition: all .25s;
  }
  .sched:hover { transform: translateY(-3px); border-color: var(--shu); }
  .sched.rest { background: var(--washi-2); opacity: .65; }
  .sched .day {
    font-family: var(--serif);
    font-size: 22px; font-weight: 500;
    color: var(--shu);
    margin-bottom: 6px;
  }
  .sched .where {
    font-size: 12px; font-weight: 500;
    color: var(--ink); margin-bottom: 4px;
  }
  .sched .time {
    font-family: var(--mono);
    font-size: 10.5px; color: var(--ink-soft);
    letter-spacing: .04em;
  }
  .sched-note {
    margin-top: 18px;
    font-size: 12px; color: var(--ink-mute);
    text-align: right;
  }

  /* ─────────── HISTORY ─────────── */
  .history {
    list-style: none;
    margin: 0;
    padding: 0 0 0 28px;
    position: relative;
  }
  .history::before {
    content: '';
    position: absolute;
    left: 6px; top: 8px; bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--shu-soft) 8%, var(--shu-soft) 92%, transparent);
  }
  .history li {
    position: relative;
    padding: 14px 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 24px;
    border-bottom: 1px dashed var(--line);
  }
  .history li:last-child { border-bottom: none; }
  .history li::before {
    content: '';
    position: absolute;
    left: -27px; top: 22px;
    width: 9px; height: 9px;
    background: var(--shu);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--washi);
  }
  .history .date {
    font-family: var(--mono);
    font-size: 12px; color: var(--shu);
    letter-spacing: .04em;
  }
  .history .body { font-size: 14px; color: var(--ink); }

  /* ─────────── CONTACT ─────────── */
  .contact-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px; align-items: center;
  }
  .contact-big {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1.3; margin: 0;
    color: var(--sumi);
  }
  .contact-big em {
    font-family: var(--hand);
    font-style: normal;
    color: var(--shu);
  }
  .contact-list { display: flex; flex-direction: column; gap: 0; }
  .contact-list a {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 22px 4px;
    border-bottom: 1px solid var(--ink);
    text-decoration: none; color: var(--ink);
    transition: all .25s;
  }
  .contact-list a:first-child { border-top: 1px solid var(--ink); }
  .contact-list a:hover { padding-left: 16px; color: var(--shu); }
  .contact-list .ch {
    font-family: var(--serif); font-size: 20px;
  }
  .contact-list .v {
    font-family: var(--mono); font-size: 12px;
    color: var(--ink-mute); letter-spacing: .04em;
  }
  .contact-list a:hover .v { color: var(--shu); }

  /* ─────────── LINKS ─────────── */
  .links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
  .link-item {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: all .25s;
    backdrop-filter: blur(4px);
  }
  .link-item:hover {
    border-color: var(--shu);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(246,202,214,.3);
  }
  .link-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--washi-2);
    display: grid; place-items: center;
    font-family: var(--serif); font-weight: 500;
    font-size: 14px; color: var(--shu);
    flex-shrink: 0;
    overflow: hidden;
  }
  .link-icon img { width: 18px; height: 18px; display: block; }
  .link-icon-letter {
    font-family: var(--serif); font-weight: 500;
    font-size: 14px; color: var(--shu);
    line-height: 1;
  }
  .link-text { display: flex; flex-direction: column; min-width: 0; }
  .link-label {
    font-family: var(--serif); font-size: 14px;
    color: var(--ink); font-weight: 500;
  }
  .link-value {
    font-family: var(--mono); font-size: 11px;
    color: var(--ink-mute);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ─────────── CREDITS ─────────── */
  .credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  .credit {
    padding: 22px 24px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .credit .role {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: .18em;
    color: var(--shu); text-transform: uppercase;
    margin-bottom: 8px;
  }
  .credit .name {
    font-family: var(--serif); font-size: 18px;
    color: var(--ink); margin-bottom: 8px;
  }
  .credit .link {
    font-family: var(--mono); font-size: 12px;
    color: var(--ink-soft); text-decoration: none;
  }
  .credit .link:hover { color: var(--shu); }

  /* ─────────── FANS ─────────── */
  .fans-lead {
    font-family: var(--hand);
    font-size: 17px;
    color: var(--ink);
    margin-bottom: 28px;
  }
  .fan-tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  .fan-tag {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 18px;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .fan-tag .k {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: .15em;
    color: var(--shu); text-transform: uppercase;
  }
  .fan-tag .v {
    font-size: 13px; color: var(--ink); font-weight: 500;
  }

  /* ─────────── FOOTER ─────────── */
  footer {
    margin-top: 60px;
    padding: 50px 32px 40px;
    max-width: 1100px;
    margin-left: auto; margin-right: auto;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 16px;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .2em; color: var(--ink-soft);
    text-transform: uppercase;
    position: relative; z-index: 2;
  }
  footer .signoff {
    font-family: var(--hand); font-size: 16px;
    color: var(--shu); text-transform: none; letter-spacing: .04em;
  }
  .chibi-wrap {
    display: flex; flex-direction: column; align-items: center;
    margin: 60px auto 0;
    gap: 12px;
  }
  .chibi-wrap img { max-width: 160px; animation: float 4s ease-in-out infinite; }
  @keyframes float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
  }
  .chibi-wrap .thanks {
    font-family: var(--hand); font-size: 18px;
    color: var(--shu);
  }

  /* ─────────── back to top ─────────── */
  .back-to-top {
    position: fixed;
    left: 24px; bottom: 24px;
    z-index: 60;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(58,49,56,.12), 0 2px 6px rgba(58,49,56,.08);
    backdrop-filter: blur(6px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px;
    cursor: pointer;
    font-family: var(--mono);
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease,
                background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
  .back-to-top:hover {
    background: var(--shu);
    color: #fff;
    border-color: var(--shu);
    box-shadow: 0 12px 28px rgba(200,88,77,.32);
  }
  .back-to-top:active { transform: translateY(2px); }
  .btt-arrow { font-size: 16px; line-height: 1; font-weight: 600; }
  .btt-label { font-size: 9px; letter-spacing: .18em; line-height: 1; }
  @media (max-width: 640px) {
    .back-to-top { left: 14px; bottom: 16px; width: 46px; height: 46px; }
    .btt-arrow { font-size: 14px; }
    .btt-label { font-size: 8px; }
  }

  /* ─────────── reveal ─────────── */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* ─────────── responsive ─────────── */
  @media (max-width: 880px) {
    .topbar { padding: 18px 32px 0; font-size: 10px; }
    .topbar .brand { font-size: 13px; }
    .topbar nav { display: none; }
    .topbar .meta { font-size: 10px; }
    .wrap { padding: 0 32px; }
    section.block { padding-block: 70px; }
    .section-head { gap: 16px; margin-bottom: 32px; padding-bottom: 14px; }
    .section-head h2 { font-size: clamp(24px, 6vw, 34px); }

    .hero { min-height: auto; padding: 60px 0 70px; }
    .hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .hero-photo { order: -1; }
    .tachie-frame { max-width: 260px; margin: 0 auto; }
    .hero h1 {
      font-size: clamp(30px, 11vw, 64px);
      letter-spacing: 0;
      white-space: nowrap;
    }
    .hero h1 .kanji { font-size: .26em; }
    .hero .catch { font-size: clamp(15px, 4vw, 19px); }
    .hero-tag { font-size: 10px; gap: 10px; margin-bottom: 18px; }
    .hero-buttons { gap: 8px; }
    .hero-btn { padding: 11px 16px; font-size: 12px; }
    .moon { width: 110px; height: 110px; top: 5%; right: 5%; }
    .moon-disc { inset: 16px; }
    .branch { display: none; }

    .about-grid { grid-template-columns: 1fr; gap: 28px; }
    .about-portrait { max-width: 320px; margin: 0 auto; }
    .about-bio {
      font-size: 15px; line-height: 1.95;
      line-break: strict;
      overflow-wrap: anywhere;
    }

    .schedule-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .sched { padding: 14px 12px; }

    .activities-grid { grid-template-columns: 1fr; gap: 12px; }

    .sample-card { grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; }
    .sample-time { display: none; }
    .sample-title { font-size: 15px; }
    .sample-desc { font-size: 12px; }
    .sample-audio { width: 100%; height: 32px; }

    .data-grid { grid-template-columns: 1fr; }
    .data-grid .data-row:nth-last-child(2) { border-bottom: 1px solid var(--line); }

    .fan-tags { grid-template-columns: 1fr; }

    .history li { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }

    .work-row { grid-template-columns: 80px 1fr; row-gap: 6px; padding: 14px 16px; }
    .work-row .cat { grid-column: 1 / -1; justify-self: start; }
    .work-row .title { grid-column: 1 / -1; font-size: 15px; }

    .credits-grid { grid-template-columns: 1fr; gap: 12px; }
    .credit { padding: 18px 20px; }

    .contact-block { grid-template-columns: 1fr; gap: 28px; }
    .contact-big {
      font-size: clamp(26px, 7.4vw, 40px);
      line-break: strict;
      overflow-wrap: anywhere;
    }
    .contact-list a { padding: 16px 0; }
    .contact-list .v { font-size: 13px; }

    .links-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .link-item { padding: 14px 16px; }
    .link-label { font-size: 10px; }
    .link-value { font-size: 13px; }

    .chibi-wrap img { max-width: 180px; }

    footer { padding: 40px 20px; font-size: 11px; gap: 4px; }
  }

  @media (max-width: 480px) {
    .topbar { padding: 16px 24px 0; }
    .topbar .meta { display: none; }
    .wrap { padding: 0 24px; }
    .hero h1 { font-size: clamp(28px, 10.5vw, 50px); letter-spacing: 0; white-space: nowrap; }
    .schedule-grid { grid-template-columns: 1fr; }
    .links-grid { grid-template-columns: 1fr; }
    .hero-buttons { flex-direction: column; align-items: stretch; }
    .hero-btn { justify-content: center; }
    .sample-card { padding: 14px 14px; }
    .work-row { padding: 12px 14px; }
    .credit { padding: 16px 16px; }
  }