/* =====================================================
   MASAKI. — Japan's Sonic Envoy
   ===================================================== */

:root{
  --sumi:        #0a0908;      /* 墨 ink black */
  --ink:         #1a1614;      /* deeper ink */
  --washi:       #f0e8d8;      /* 和紙 paper */
  --washi-warm:  #ece2cd;
  --bone:        #d9cdb3;
  --vermillion:  #b73225;      /* 朱 */
  --vermillion-d:#8a2419;
  --gold:        #c9a55a;      /* 金 */
  --gold-d:      #9a7e3e;
  --indigo:      #1a2942;      /* 藍 */
  --indigo-l:    #2a3a55;

  --font-display: "Cormorant Garamond", "Shippori Mincho B1", serif;
  --font-jp:      "Shippori Mincho B1", "Cormorant Garamond", serif;
  --font-ui:      "Manrope", "Helvetica Neue", system-ui, sans-serif;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--washi);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ display:block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
em{ font-style: italic; font-family: var(--font-display); font-weight: 500; }
strong{ font-weight: 600; }

/* ===== shared ===== */
.section-label{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  opacity: .75;
  margin-bottom: 32px;
}
.section-label .dot{
  width: 6px; height: 6px; background: var(--vermillion);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(183,50,37,.12);
}
.section-label--light{ color: var(--washi); opacity: .85; }
.section-label--light .dot{ background: var(--gold); box-shadow: 0 0 0 4px rgba(201,165,90,.18); }

.display{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 108px);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--sumi);
}
.display em{
  color: var(--vermillion);
  font-weight: 500;
  font-family: var(--font-display);
  font-style: italic;
}
.display .ink{ color: var(--vermillion); font-style: italic; }
.display--sm{ font-size: clamp(36px, 4.6vw, 68px); }
.display--light{ color: var(--washi); }
.display--light em{ color: var(--gold); }

/* ===== NAV ===== */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px;
  background: linear-gradient(to bottom, rgba(10,9,8,.55), rgba(10,9,8,0));
  color: var(--washi);
}
.nav__brand{
  display: inline-flex; align-items: baseline; gap: 12px;
  letter-spacing: .04em;
}
.nav__mark{
  font-family: var(--font-jp);
  font-size: 22px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vermillion);
  color: var(--washi);
  border-radius: 2px;
  transform: translateY(2px);
}
.nav__name{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .14em;
}
.nav__links{
  display: flex; align-items: center; gap: 36px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
}
.nav__links a{ opacity: .8; transition: opacity .2s; }
.nav__links a:hover{ opacity: 1; }
.nav__cta{
  border: 1px solid rgba(240,232,216,.4);
  padding: 10px 18px;
  border-radius: 2px;
  opacity: 1 !important;
}
.nav__cta:hover{ background: var(--washi); color: var(--sumi); }

/* ===== HERO ===== */
.hero{
  position: relative;
  min-height: 100vh;
  background: var(--sumi);
  color: var(--washi);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__bg{ position: absolute; inset: 0; z-index: 0; }
.hero__bg img{
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%;
  filter: contrast(1.02) brightness(.78) saturate(1.02);
}
.hero__veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,9,8,.85) 0%, rgba(10,9,8,.4) 45%, rgba(10,9,8,.1) 100%),
    linear-gradient(to bottom, rgba(10,9,8,.35) 0%, rgba(10,9,8,.1) 30%, rgba(10,9,8,.75) 100%);
}
.hero__sun{
  position: absolute;
  top: 18%; right: 8%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183,50,37,.55), rgba(183,50,37,0) 70%);
  filter: blur(2px);
  z-index: 1;
}
.hero__sun::after{
  content: "";
  position: absolute; inset: 50%;
  width: 180px; height: 180px;
  margin: -90px;
  border-radius: 50%;
  background: var(--vermillion);
  opacity: .85;
}
.hero__wave{
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 50vh;
  z-index: 1;
}
.hero__kanji{
  position: absolute;
  top: 110px; right: 56px;
  z-index: 2;
  display: flex; flex-direction: column;
  font-family: var(--font-jp);
  font-size: 22px;
  letter-spacing: 0;
  color: var(--washi);
  opacity: .55;
  writing-mode: vertical-rl;
}
.hero__kanji span{
  margin-bottom: 4px;
}
.hero__content{
  position: relative;
  z-index: 3;
  padding: 0 64px 110px;
  max-width: 1400px;
}
.hero__eyebrow{
  display: flex; align-items: center; gap: 16px;
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: .85;
  margin-bottom: 32px;
}
.hero__eyebrow .line{
  width: 56px; height: 1px;
  background: var(--gold);
}
.hero__title{
  display: flex; align-items: flex-end; gap: 32px;
  margin-bottom: 36px;
}
.hero__title-jp{
  font-family: var(--font-jp);
  font-size: clamp(120px, 18vw, 260px);
  font-weight: 600;
  line-height: .85;
  color: var(--washi);
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.hero__title-en{
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 168px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.01em;
  padding-bottom: 10px;
  color: var(--washi);
}
.hero__title-en .period{ color: var(--vermillion); }
.hero__tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25;
  max-width: 600px;
  margin-bottom: 56px;
  color: var(--washi-warm);
}
.hero__meta{
  display: flex; align-items: flex-end; gap: 32px;
  margin-top: 24px;
}
.hero__meta > div{ display: flex; flex-direction: column; gap: 4px; }
.hero__meta-num{
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold);
}
.hero__meta-num small{ font-size: .55em; color: var(--washi); margin-left: 2px; }
.hero__meta-lbl{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .7;
  line-height: 1.4;
}
.hero__meta-div{
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(240,232,216,.3), transparent);
  align-self: center;
}
.hero__scroll{
  position: absolute;
  right: 64px; bottom: 56px;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
  writing-mode: vertical-rl;
}
.hero__scroll-line{
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, transparent, var(--washi));
  animation: dropline 2.5s ease-in-out infinite;
}
@keyframes dropline{
  0%,100%{ transform: scaleY(.4); transform-origin: top; opacity: .3; }
  50%{ transform: scaleY(1); opacity: 1; }
}

/* ===== CONCEPT ===== */
.concept{
  background: var(--washi);
  padding: 140px 64px;
  position: relative;
}
.concept__paper{
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  background:
    linear-gradient(135deg, var(--washi) 0%, var(--washi-warm) 100%);
  padding: 100px 80px;
  border: 1px solid rgba(26,22,20,.08);
}
.concept__seigaiha{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: .25;
  pointer-events: none;
}
.concept__inner{
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.concept__inner .display{
  margin-bottom: 16px;
}
.concept__kicker{
  font-family: var(--font-jp);
  font-size: 18px;
  letter-spacing: 1em;
  color: var(--gold-d);
  margin-bottom: 56px;
  text-indent: 1em;
}
.concept__body{
  text-align: left;
  max-width: 640px;
  margin: 0 auto 56px;
  font-size: 17px;
  line-height: 1.8;
}
.concept__body p + p{ margin-top: 18px; }
.concept__body .lead{
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.45;
  font-weight: 400;
  margin-bottom: 24px;
  color: var(--sumi);
}
.concept__sig{
  display: inline-flex; align-items: center; gap: 18px;
}
.concept__sig-stamp{
  width: 64px; height: 64px;
  background: var(--vermillion);
  color: var(--washi);
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: 0 4px 18px rgba(183,50,37,.25);
}
.concept__sig-meta{
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-display);
}
.concept__sig-meta span:first-child{ font-size: 22px; font-style: italic; line-height: 1.1; }
.concept__sig-meta span:last-child{ font-size: 12px; letter-spacing: .15em; opacity: .65; text-transform: uppercase; font-family: var(--font-ui); margin-top: 4px;}

/* ===== FUJI BAND ===== */
.fuji{
  position: relative;
  background: var(--sumi);
  height: 380px;
  overflow: hidden;
}
.fuji__svg{
  width: 100%; height: 100%;
  display: block;
}
.fuji__type{
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--washi);
  pointer-events: none;
}
.fuji__type-jp{
  font-family: var(--font-jp);
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: .6em;
  font-weight: 500;
  margin-bottom: 24px;
  text-indent: .6em;
  opacity: .9;
}
.fuji__type-en{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: .04em;
  opacity: .7;
  max-width: 600px;
  text-align: center;
}

/* ===== ABOUT ===== */
.about{
  background: var(--washi);
  padding: 140px 64px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 96px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}
.about__col--photo{ position: relative; }
.about__frame{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--sumi);
}
.about__frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: contrast(1.05);
}
.about__frame::after{
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(240,232,216,.2);
  pointer-events: none;
}
.about__frame figcaption{
  position: absolute; left: 0; bottom: 0;
  background: var(--sumi);
  color: var(--washi);
  padding: 10px 20px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.about__stamp{
  position: absolute;
  top: -24px; right: -24px;
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  background: var(--vermillion);
  color: var(--washi);
  padding: 14px 12px;
  letter-spacing: .1em;
  z-index: 2;
  border-radius: 2px;
}
.about__col--text .display{ margin-bottom: 40px; }
.about__lead p{
  font-size: 17px;
  line-height: 1.8;
}
.about__lead p + p{ margin-top: 16px; }
.about__facts{
  margin-top: 48px;
  list-style: none;
  border-top: 1px solid rgba(26,22,20,.15);
}
.about__facts li{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(26,22,20,.15);
  font-size: 14px;
}
.about__facts li span:first-child{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .6;
  padding-top: 2px;
}

/* ===== SOUND ===== */
.sound{
  position: relative;
  background: var(--sumi);
  color: var(--washi);
  padding: 160px 64px;
  overflow: hidden;
}
.sound::before{
  /* subtle red glow accent */
  content: "";
  position: absolute;
  top: 20%; left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(183,50,37,.18), transparent 60%);
  pointer-events: none;
}
.sound__grid{
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 96px;
  row-gap: 64px;
  align-items: start;
}
.sound__head{ grid-column: 1 / -1; }
.sound__head .display{ margin-bottom: 0; }
.sound__portrait{
  position: relative;
  grid-column: 2;
  grid-row: 2;
  max-width: 380px;
  justify-self: end;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(201,165,90,.25);
}
.sound__portrait img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: contrast(1.05);
}
.sound__portrait figcaption{
  position: absolute; left: 0; bottom: 0;
  background: rgba(10,9,8,.85);
  color: var(--washi);
  padding: 14px 20px;
  display: flex; flex-direction: column;
  border-top-right-radius: 0;
  backdrop-filter: blur(6px);
}
.sound__portrait-jp{
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: .1em;
}
.sound__portrait-en{
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  margin-top: 2px;
}
.sound__pulls{
  grid-column: 1;
  grid-row: 2;
  display: flex; flex-direction: column; gap: 48px;
}
.pull{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
}
.pull > h3{ grid-column: 2; }
.pull > p{ grid-column: 2; }
.pull__num{
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  border-top: 1px solid var(--gold);
  height: fit-content;
  padding-top: 12px;
}
.pull h3{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.1;
}
.pull p{
  font-size: 15px;
  line-height: 1.75;
  color: rgba(240,232,216,.78);
}
.sound__quote{
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 32px;
  position: relative;
  padding: 64px 32px 32px;
  background: rgba(240,232,216,.04);
  border-left: 2px solid var(--vermillion);
}
.quote__mark{
  position: absolute;
  top: -24px; left: 16px;
  font-family: var(--font-jp);
  font-size: 120px;
  color: var(--vermillion);
  line-height: 1;
  opacity: .8;
}
.sound__quote blockquote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--washi);
}
.quote__attrib{
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .6;
}

/* ===== EXPERIENCE ===== */
.exp{
  background: var(--washi-warm);
  padding: 140px 64px;
  position: relative;
}
.exp__head{
  max-width: 1300px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  column-gap: 96px;
  align-items: end;
}
.exp__head .display{ margin-bottom: 0; }
.exp__intro{
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}
.exp__cards{
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.exp-card{
  background: var(--washi);
  display: flex; flex-direction: column;
  border: 1px solid rgba(26,22,20,.08);
  transition: transform .4s ease, box-shadow .4s ease;
}
.exp-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(10,9,8,.25);
}
.exp-card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sumi);
}
.exp-card__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform .8s ease;
}
.exp-card:hover .exp-card__media img{ transform: scale(1.04); }

.exp-card__body{
  padding: 32px 28px 28px;
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
}
.exp-card__kanji{
  position: absolute;
  top: -36px; right: 24px;
  width: 64px; height: 64px;
  background: var(--vermillion);
  color: var(--washi);
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(183,50,37,.3);
}
.exp-card--feature .exp-card__kanji{
  background: var(--sumi);
  color: var(--gold);
}
.exp-card h3{
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 6px;
}
.exp-card__sub{
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: 18px;
}
.exp-card__body p{
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  opacity: .85;
}
.exp-card__meta{
  list-style: none;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed rgba(26,22,20,.2);
  font-size: 13px;
}
.exp-card__meta li{
  display: flex; justify-content: space-between;
  padding: 6px 0;
  gap: 12px;
}
.exp-card__meta li span:first-child{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
  padding-top: 2px;
}
.exp-card__meta li span:last-child{
  text-align: right;
  font-weight: 400;
}

.exp__combo{
  max-width: 1300px;
  margin: 80px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 32px;
  padding: 28px 40px;
  background: var(--sumi);
  color: var(--washi);
  flex-wrap: wrap;
}
.exp__combo-jp{
  font-family: var(--font-jp);
  font-size: 24px;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--gold);
}
.exp__combo-en{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  opacity: .9;
}

/* ===== INSTRUMENTS ===== */
.ins{
  background: var(--sumi);
  color: var(--washi);
  padding: 160px 64px;
}
.ins__head{
  max-width: 1300px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 96px;
  align-items: end;
}
.ins__head .display{ margin-bottom: 0; }
.ins__head .amp{ color: var(--gold); font-style: italic; }
.ins__intro{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: rgba(240,232,216,.85);
}
.ins__grid{
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
.ins-tile{
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.ins-tile--lg{
  grid-column: span 2;
  grid-row: span 2;
}
.ins-tile img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(.2) contrast(1.05) brightness(.85);
  transition: transform .8s ease, filter .4s ease;
}
.ins-tile:hover img{
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.1) brightness(1);
}
.ins-tile figcaption{
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(10,9,8,.85) 0%, rgba(10,9,8,.1) 60%, transparent 100%);
  color: var(--washi);
}
.ins-tile__jp{
  font-family: var(--font-jp);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--gold);
  font-weight: 500;
}
.ins-tile__en{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  margin-top: 2px;
}
.ins-tile--lg .ins-tile__jp{ font-size: 22px; }
.ins-tile--lg .ins-tile__en{ font-size: 38px; }
.ins-tile__note{
  position: absolute;
  top: 14px; left: 14px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vermillion);
  background: var(--washi);
  padding: 4px 8px;
}
.ins__more{
  max-width: 1300px;
  margin: 48px auto 0;
  display: flex; flex-wrap: wrap; gap: 0;
  list-style: none;
  border-top: 1px solid rgba(240,232,216,.15);
  padding-top: 32px;
}
.ins__more li{
  padding: 8px 24px 8px 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  color: rgba(240,232,216,.7);
  position: relative;
}
.ins__more li:not(:last-child)::after{
  content: "/";
  margin-left: 24px;
  color: var(--gold);
  opacity: .5;
}

/* ===== STAGE / CREDITS ===== */
.stage{
  background: var(--washi);
  padding: 140px 64px 100px;
  overflow: hidden;
}
.stage__head{
  max-width: 1300px;
  margin: 0 auto 80px;
}
.stage__head .display{ margin-bottom: 0; }
.stage__cols{
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.stage__col h4{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--vermillion);
  color: var(--sumi);
}
.stage__col ul{
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
}
.stage__col li{
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,22,20,.1);
  color: var(--ink);
}
.stage__col li:last-child{ border-bottom: none; }
.stage__col em{
  color: var(--vermillion-d);
  font-family: var(--font-display);
  font-style: italic;
}

.stage__marquee{
  margin-top: 96px;
  border-top: 1px solid rgba(26,22,20,.12);
  border-bottom: 1px solid rgba(26,22,20,.12);
  padding: 28px 0;
  overflow: hidden;
  white-space: nowrap;
}
.stage__track{
  display: inline-flex;
  gap: 40px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
  color: var(--sumi);
  letter-spacing: .02em;
  animation: marquee 60s linear infinite;
}
.stage__track span{ flex-shrink: 0; }
.stage__track span:nth-child(odd){ color: var(--vermillion); }
.stage__track span:nth-child(2n){
  color: var(--gold-d);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 18px;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ===== BOOKING ===== */
.book{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--washi);
}
.book__wave{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.book__panel{
  position: relative;
  z-index: 1;
  display: flex; align-items: center;
  min-height: 100vh;
  padding: 120px 64px;
}
.book__inner{
  max-width: 720px;
  margin-left: auto;
  margin-right: 6vw;
  background: rgba(10,9,8,.92);
  color: var(--washi);
  padding: 72px 64px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201,165,90,.2);
}
.book__inner .display{ margin-bottom: 24px; }
.book__lead{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 48px;
  color: rgba(240,232,216,.9);
}
.book__rows{
  margin-bottom: 48px;
  border-top: 1px solid rgba(240,232,216,.15);
}
.book__row{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(240,232,216,.15);
  font-size: 14px;
}
.book__row-k{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
  padding-top: 2px;
}
.book__cta{
  display: inline-flex; align-items: center; gap: 18px;
  padding: 22px 36px;
  background: var(--vermillion);
  color: var(--washi);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: background .25s, gap .25s;
}
.book__cta:hover{
  background: var(--vermillion-d);
  gap: 28px;
}
.book__cta-arrow{
  display: inline-block;
  font-family: var(--font-ui);
  transition: transform .25s;
}
.book__cta:hover .book__cta-arrow{ transform: translateX(4px); }
.book__contact{
  margin-top: 36px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .7;
}
.book__contact-div{ opacity: .5; }

/* ===== FOOTER ===== */
.foot{
  background: var(--sumi);
  color: var(--washi);
  padding: 64px;
}
.foot__top{
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(240,232,216,.12);
  flex-wrap: wrap; gap: 24px;
}
.foot__brand{
  display: inline-flex; align-items: center; gap: 16px;
}
.foot__mark{
  width: 40px; height: 40px;
  background: var(--vermillion);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 500;
  border-radius: 2px;
}
.foot__name{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .12em;
}
.foot__name .period{ color: var(--vermillion); }
.foot__tag{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  opacity: .6;
  margin-left: 8px;
}
.foot__nav{
  display: flex; gap: 28px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.foot__nav a{ opacity: .65; transition: opacity .2s; }
.foot__nav a:hover{ opacity: 1; }
.foot__bot{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 32px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .5;
  flex-wrap: wrap; gap: 16px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
  .nav{ padding: 16px 24px; }
  .nav__links{ display: none; }
  .nav__links .nav__cta{ display: inline-flex; }
  .nav__links{ display: flex; gap: 16px; }
  .nav__links a:not(.nav__cta){ display: none; }

  .hero__content{ padding: 0 32px 80px; }
  .hero__scroll{ display: none; }
  .hero__kanji{ right: 24px; }

  .concept{ padding: 80px 24px; }
  .concept__paper{ padding: 60px 32px; }

  .about{
    padding: 80px 24px;
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sound{ padding: 80px 24px; }
  .sound__grid{ grid-template-columns: 1fr; gap: 40px; }
  .sound__portrait{ grid-column: 1; grid-row: auto; max-width: 100%; justify-self: stretch; }
  .sound__pulls{ grid-column: 1; grid-row: auto; }
  .sound__quote{ grid-column: 1; grid-row: auto; }

  .exp{ padding: 80px 24px; }
  .exp__head{ grid-template-columns: 1fr; gap: 24px; }
  .exp__cards{ grid-template-columns: 1fr; }

  .ins{ padding: 80px 24px; }
  .ins__head{ grid-template-columns: 1fr; gap: 24px; }
  .ins__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .ins-tile--lg{ grid-column: span 2; }

  .stage{ padding: 80px 24px; }
  .stage__cols{ grid-template-columns: 1fr; }

  .book__panel{ padding: 80px 24px; }
  .book__inner{ padding: 48px 28px; margin-right: 0; }
  .book__row{ grid-template-columns: 120px 1fr; }

  .foot{ padding: 48px 24px; }
  .foot__top, .foot__bot{ flex-direction: column; align-items: flex-start; }
}

/* =====================================================
   ADDITIONS — Heritage, Booking-Wave, Mgmt Footer
   ===================================================== */

/* ----- HERITAGE / ROOTS ----- */
.heritage{
  background: var(--sumi);
  color: var(--washi);
}
.heritage__banner{
  position: relative;
  min-height: 760px;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--sumi);
}
.heritage__bg{
  position: absolute; inset: 0;
  z-index: 0;
}
.heritage__bg img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.heritage__veil{
  position: absolute; inset: 0;
}
.heritage__banner--fuji .heritage__bg img{
  object-position: center 20%;
  filter: saturate(.95) contrast(1.02);
}
.heritage__veil--fuji{
  background:
    linear-gradient(to right,
      rgba(10,9,8,.82) 0%,
      rgba(10,9,8,.55) 35%,
      rgba(10,9,8,.15) 70%,
      rgba(10,9,8,.05) 100%),
    linear-gradient(to bottom,
      rgba(10,9,8,.25) 0%,
      transparent 30%,
      rgba(10,9,8,.55) 100%);
}
.heritage__banner--tea .heritage__bg img{
  object-position: center 28%;
  filter: contrast(1.05) brightness(.85);
}
.heritage__veil--tea{
  background:
    linear-gradient(to left,
      rgba(10,9,8,.88) 0%,
      rgba(10,9,8,.6) 35%,
      rgba(10,9,8,.25) 70%,
      rgba(10,9,8,.1) 100%),
    linear-gradient(to bottom,
      rgba(10,9,8,.3) 0%,
      transparent 30%,
      rgba(10,9,8,.55) 100%);
}

.heritage__inner{
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 140px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}
.heritage__col--type{ display: flex; flex-direction: column; align-items: flex-start; }
.heritage__col--type .display{ margin-top: 24px; margin-bottom: 8px; }
.heritage__kanji{
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: clamp(64px, 7.4vw, 120px);
  line-height: .95;
  color: var(--gold);
  opacity: .92;
  margin: 32px 0 24px;
  letter-spacing: -.02em;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.heritage__lead{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(240,232,216,.88);
  max-width: 420px;
  margin-top: 24px;
}
.heritage__col--text{
  font-size: 17px;
  line-height: 1.8;
  color: rgba(240,232,216,.88);
  max-width: 560px;
}
.heritage__inner--reverse .heritage__col--text{ justify-self: end; }
.heritage__col--text p + p{ margin-top: 18px; }
.heritage__col--text strong{ color: var(--washi); font-weight: 500; }
.heritage__col--text em{
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}
.heritage__credit{
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(240,232,216,.14);
  font-size: 12px;
  letter-spacing: .03em;
  color: rgba(240,232,216,.55);
  line-height: 1.55;
}
.heritage__credit span{
  display: block;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--gold);
  opacity: .85;
}

/* ----- BOOKING with The Great Wave ----- */
.book__bg{
  position: absolute; inset: 0;
  z-index: 0;
  background: #c9c4b1;
}
.book__bg-img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.book__bg-veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(10,9,8,.25) 0%,
      rgba(10,9,8,.05) 40%,
      rgba(10,9,8,.05) 100%),
    linear-gradient(to bottom,
      rgba(10,9,8,.2) 0%,
      transparent 40%,
      rgba(10,9,8,.4) 100%);
}
.book__credit{
  margin-top: 36px;
  padding-top: 14px;
  border-top: 1px solid rgba(240,232,216,.12);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(240,232,216,.5);
  line-height: 1.5;
}
.book__credit em{ color: rgba(240,232,216,.7); font-family: var(--font-display); }

/* mgmt rows inside booking panel */
.book__mgmt{
  margin-top: 36px;
  display: flex; flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(240,232,216,.15);
}
.book__mgmt-row{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(240,232,216,.12);
  font-size: 14px;
  align-items: start;
}
.book__mgmt-k{
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .6;
  padding-top: 4px;
}
.book__mgmt-v{
  font-family: var(--font-ui);
  line-height: 1.55;
}
.book__mgmt-v strong{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--washi);
  letter-spacing: .01em;
}
.book__mgmt-v a{
  color: var(--gold);
  border-bottom: 1px solid rgba(201,165,90,.4);
}
.book__mgmt-v a:hover{ color: var(--washi); }

/* ----- FOOTER additions ----- */
.foot__mid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  padding: 48px 0;
  border-bottom: 1px solid rgba(240,232,216,.12);
  align-items: center;
}
.foot__addr{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.foot__addr-block{
  display: flex; flex-direction: column;
  gap: 6px;
}
.foot__addr-k{
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .55;
  color: var(--gold);
  margin-bottom: 4px;
}
.foot__addr-v{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}
.foot__addr-v a{
  color: var(--washi);
  border-bottom: 1px solid rgba(240,232,216,.3);
}
.foot__addr-v a:hover{ color: var(--gold); }
.foot__addr-meta{
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .6;
  font-family: var(--font-ui);
}
.foot__social{
  display: flex;
  gap: 18px;
  justify-content: flex-end;
}
.foot__qr{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(240,232,216,.04);
  border: 1px solid rgba(240,232,216,.1);
  transition: background .25s, border-color .25s;
  width: 120px;
}
.foot__qr:hover{
  background: rgba(240,232,216,.08);
  border-color: rgba(201,165,90,.35);
}
.foot__qr img{
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--washi);
  padding: 6px;
  border-radius: 2px;
}
.foot__qr-cap{
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  text-align: center;
}
.foot__qr-cap > span:first-child{
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
}
.foot__qr-handle{
  font-size: 10px;
  letter-spacing: .12em;
  opacity: .55;
}

/* ----- Touch & Try card sakura framing ----- */
#experience .exp__cards .exp-card:last-child .exp-card__media img{
  object-position: center 35%;
}
/* ----- Shamisen Concert (feature card, tall portrait photo) ----- */
#experience .exp__cards .exp-card--feature .exp-card__media img{
  object-position: center 22%;
}
/* ----- Sadō Workshop (group/event photo, center action) ----- */
#experience .exp__cards .exp-card:first-child .exp-card__media img{
  object-position: center 50%;
}

/* ----- Responsive additions ----- */
@media (max-width: 1024px){
  .heritage__banner{ min-height: auto; }
  .heritage__inner,
  .heritage__inner--reverse{
    padding: 80px 24px;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .heritage__inner--reverse .heritage__col--text{ justify-self: start; }
  .heritage__inner--reverse > .heritage__col--type{ order: -1; }
  .heritage__veil--fuji,
  .heritage__veil--tea{
    background:
      linear-gradient(to bottom,
        rgba(10,9,8,.35) 0%,
        rgba(10,9,8,.55) 40%,
        rgba(10,9,8,.85) 100%);
  }

  .book__mgmt-row{ grid-template-columns: 140px 1fr; }

  .foot__mid{
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 0;
  }
  .foot__addr{ grid-template-columns: 1fr; gap: 24px; }
  .foot__social{ justify-content: flex-start; }
}

/* =====================================================
   PETALS — falling cherry blossoms (hero only)
   ===================================================== */
.petals{
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  perspective: 800px;
}
.petal{
  position: absolute;
  top: -8vh;
  left: 0;
  width: var(--size, 14px);
  height: calc(var(--size, 14px) * 1.1);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.10));
  opacity: 0;
  animation:
    petal-fall var(--dur, 16s) linear var(--delay, 0s) infinite,
    petal-spin calc(var(--dur, 16s) * 0.45) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes petal-fall{
  0%{
    transform: translate3d(var(--x), -10vh, 0) rotateZ(0);
    opacity: 0;
  }
  6%{ opacity: var(--o, .85); }
  25%{
    transform: translate3d(calc(var(--x) + var(--sway, 30px)), 30vh, 0) rotateZ(180deg);
  }
  50%{
    transform: translate3d(calc(var(--x) - var(--sway, 30px) * 0.6), 55vh, 0) rotateZ(360deg);
  }
  75%{
    transform: translate3d(calc(var(--x) + var(--sway, 30px) * 1.1), 80vh, 0) rotateZ(540deg);
  }
  94%{ opacity: var(--o, .85); }
  100%{
    transform: translate3d(calc(var(--x) - var(--sway, 30px) * 0.4), 112vh, 0) rotateZ(720deg);
    opacity: 0;
  }
}
@keyframes petal-spin{
  0%   { filter: drop-shadow(0 2px 4px rgba(0,0,0,.06)) brightness(1); }
  50%  { filter: drop-shadow(0 3px 6px rgba(0,0,0,.12)) brightness(1.05); }
  100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,.06)) brightness(.95); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .petal{ display: none; }
}

/* =====================================================
   NAV — Media (ghost) CTA + responsive
   ===================================================== */
.nav__cta--ghost{
  background: transparent;
  border: 1px solid rgba(240,232,216,.4);
  color: var(--washi);
}
.nav__cta--ghost:hover{
  background: rgba(240,232,216,.08);
}

/* Tighten the nav at typical desktop widths so 8 items still fit */
@media (max-width: 1280px){
  .nav__links{ gap: 22px; font-size: 12px; }
  .nav__cta{ padding: 8px 14px; }
}

/* =====================================================
   PRESS INQUIRY block
   ===================================================== */
.press__inquiry{
  max-width: 1300px;
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 72px;
  padding: 56px 0 0;
  border-top: 1px solid rgba(26,22,20,.15);
  align-items: start;
}
.press__inquiry-left .section-label{ margin-bottom: 24px; }
.press__inquiry-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--sumi);
  margin-bottom: 18px;
  text-wrap: pretty;
}
.press__inquiry-lead{
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  opacity: .8;
  max-width: 520px;
}
.press__inquiry-right{
  display: flex; flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  padding-top: 8px;
}
.press__cta{
  display: inline-flex; align-items: center; gap: 16px;
  padding: 20px 32px;
  background: var(--sumi);
  color: var(--washi);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .04em;
  border: 1px solid var(--sumi);
  transition: background .25s, gap .25s, color .25s, border-color .25s;
}
.press__cta:hover{
  background: var(--vermillion);
  border-color: var(--vermillion);
  gap: 24px;
}
.press__cta-arrow{ font-family: var(--font-ui); transition: transform .25s; }
.press__cta:hover .press__cta-arrow{ transform: translateX(4px); }
.press__inquiry-meta{
  display: flex; flex-direction: column;
  gap: 4px;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--ink);
  opacity: .65;
}
.press__inquiry-meta span:first-child{
  font-weight: 500;
  color: var(--sumi);
  letter-spacing: .02em;
  opacity: 1;
}

@media (max-width: 1024px){
  .press__inquiry{
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 40px;
    margin-top: 56px;
  }
  .press__inquiry-right{ padding-top: 0; }
}